import Symbol from './Symbol'
import Zondy from '../Zondy'
import { defaultValue, defined, toJSON } from '../../util'
import { SymbolType } from '../enum'
import Color from '../Color'
import HorizontalAlignment from '../enum/HorizontalAlignment'
import VerticalAlignment from '../enum/VerticalAlignment'
import Font from '../Font'
/**
* 文本符号，支持点几何对象，参考示例：<a href='#new-TextSymbol'>[创建文本样式]</a>
* <br><br>[ES5引入方式]：<br/>
* Zondy.Symbol.TextSymbol() <br/>
* [ES6引入方式]：<br/>
* import { TextSymbol } from "@mapgis/webclient-common" <br/>
* <br/>
* @class TextSymbol
* @moduleEX SymbolModule
* @extends Symbol
* @param {Object} options 构造参数
* @param1 {Number} [options.angle = 0] 文字的旋转角度，单位度，0~360度，顺时针旋转,需要开启rotated选项
* @param1 {String} [options.backgroundColor] 背景颜色
* @param1 {String} [options.borderLineColor] 边界颜色
* @param1 {Number} [options.borderLineSize] 边界宽度
* @param1 {String} [options.textShadowColor] 文字阴影颜色
* @param {String} [options.color = New Zondy.Color(0,0,0)] 颜色
* @param {Font} [options.font] 字体样式
* @param1 {String} [options.haloColor] 光晕颜色
* @param1 {Number} [options.haloSize] 光晕大小
* @param {HorizontalAlignment} [options.horizontalAlignment = 'center'] 水平方向，可选"left"|"right"|"center"
* @param1 {Boolean} [options.kerning = true] 是否调整文本字符串中字符之间的间距，二维暂时不支持
* @param {Number} [options.lineHeight = 1.1] 行高，最小设置为1.1
* @param1 {Number} [options.lineWidth = 192] 行宽
* @param1 {Boolean} [options.rotated = false] 是否旋转
* @param {String} [options.text] 默认显示内容
* @param {VerticalAlignment} [options.verticalAlignment='baseline'] 垂直对齐,可选"baseline"|"top"|"middle"|"bottom"
* @param {Number} [options.xoffset = 0] x偏移
* @param {Number} [options.yoffset = 0] y偏移
*
* @summary <h5>支持如下方法：</h5>
* [1、克隆并返回新的符号对象]{@link Symbol#clone} <br/>
* [2、导出一个JSON对像]{@link Symbol#toJSON} <br/>
* <a href='#fromJSON'>[3、将JSON里的数据导入，并返回一个新的TextSymbol对象]</a><br/>
*
* @example <caption><h7 id='new-TextSymbol'>创建文本样式</h7></caption>
* // ES5引入方式
* const { TextSymbol } = Zondy.Symbol
* const { TextSymbol, Color } = Zondy
* // ES6引入方式
* import { TextSymbol, Color } from "@mapgis/webclient-common"
* const textSymbol = new TextSymbol({
* // 字体颜色
* color: new Color(252, 100, 22, 1),
* // 字体内容，如果是服务端数据，可不填
* text: "默认文字",
* // 字体样式
* font: {
* // 字体
* family: "微软雅黑",
* // 文字大小，单位像素
* size: 30,
* // 文字是否为斜体，正常模式
* style: "normal",
* // 文字粗细
* weight: "normal"
* }
* })
*/
class TextSymbol extends Symbol {
constructor(options) {
super(options)
options = defaultValue(options, {})
/**
* 符号类型
* @member {String} TextSymbol.prototype.type
*/
this.type = SymbolType.text
/**
* 文字角度
* @member {Number} TextSymbol.prototype.angle
*/
this.angle = defaultValue(options.angle, 0)
/**
* 文字背景颜色
* @member {Color} TextSymbol.prototype.backgroundColor
*/
this.backgroundColor = defined(options.backgroundColor)
? Color.fromColor(
defaultValue(options.backgroundColor, new Color(255, 255, 255, 0.25))
)
: undefined
/**
* 文字外边框颜色
* @member {Color} TextSymbol.prototype.borderLineColor
*/
this.borderLineColor = Color.fromColor(
defaultValue(options.borderLineColor, new Color(0, 0, 0, 1))
)
/**
* 文字外边框线宽
* @member {Number} TextSymbol.prototype.borderLineSize
*/
this.borderLineSize = defaultValue(options.borderLineSize, 0)
/**
* 文字颜色
* @member {Color} TextSymbol.prototype.color
*/
this.color = Color.fromColor(defaultValue(options.color, new Color()))
/**
* 文字字体
* @member {String} TextSymbol.prototype.font
*/
this.font = Font.fromJSON(defaultValue(options.font, {}))
/**
* 光晕颜色
* @member {Color} TextSymbol.prototype.haloColor
*/
this.haloColor = Color.fromColor(
defaultValue(options.haloColor, new Color())
)
/**
* 光晕大小
* @member {Number} TextSymbol.prototype.haloSize
*/
this.haloSize = defaultValue(options.haloSize, 0)
/**
* 水平方向
* @member {HorizontalAlignment} TextSymbol.prototype.verticalAlignment
*/
this.horizontalAlignment = defaultValue(
options.horizontalAlignment,
HorizontalAlignment.center
)
/**
* 是否调整文本字符串中字符之间的间距
* @member {Boolean} TextSymbol.prototype.kerning
*/
this.kerning = defaultValue(options.kerning, false)
/**
* 行高
* @member {Number} TextSymbol.prototype.lineHeight
*/
this.lineHeight = defaultValue(options.lineHeight, 1.1)
/**
* 行宽
* @member {Number} TextSymbol.prototype.lineWidth
*/
this.lineWidth = defaultValue(options.lineWidth, 192)
/**
* 是否旋转
* @member {Boolean} TextSymbol.prototype.rotated
*/
this.rotated = defaultValue(options.rotated, false)
/**
* 显示的内容
* @member {String} TextSymbol.prototype.text
*/
this.text = defaultValue(options.text, '')
/**
* 垂直对齐
* @member {VerticalAlignment} TextSymbol.prototype.verticalAlignment
*/
this.verticalAlignment = defaultValue(
options.verticalAlignment,
VerticalAlignment.baseline
)
/**
* x偏移
* @member {Number} TextSymbol.prototype.xoffset
*/
this.xoffset = defaultValue(options.xoffset, 0)
/**
* y偏移
* @member {Number} TextSymbol.prototype.yoffset
*/
this.yoffset = defaultValue(options.yoffset, 0)
}
/**
* 将JSON里的数据导入，并返回一个新的TextSymbol对象<a id='fromJSON'></a>
* @param {Object} [json] 新的TextSymbol对象
* @return {TextSymbol} 新的TextSymbol对象
*/
static fromJSON(json) {
json = defaultValue(json, {})
return new TextSymbol(json)
}
/**
* 克隆并返回新的符号对象
* @return {TextSymbol} 克隆后的新符号对象
*/
clone() {
return new TextSymbol(this.toJSON())
}
/**
* 导出为JSON对象
* @return {Object} JSON对像
*/
toJSON() {
const json = super.toJSON()
json.angle = this.angle
json.backgroundColor = toJSON(this.backgroundColor, Color)
json.borderLineColor = toJSON(this.borderLineColor, Color)
json.borderLineSize = this.borderLineSize
json.color = toJSON(this.color, Color)
json.font = toJSON(this.font, Font)
json.haloColor = toJSON(this.haloColor, Color)
json.haloSize = this.haloSize
json.horizontalAlignment = this.horizontalAlignment
json.kerning = this.kerning
json.lineHeight = this.lineHeight
json.lineWidth = this.lineWidth
json.rotated = this.rotated
json.text = this.text
json.verticalAlignment = this.verticalAlignment
json.xoffset = this.xoffset
json.yoffset = this.yoffset
return json
}
}
Zondy.Symbol.TextSymbol = TextSymbol
export default TextSymbol
