123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- import { SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
- import { STextItem } from '@saga-web/graph/lib'
- import { hexify } from '@/components/mapClass/until'
- import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
- /**
- *图例节点Item(区域类型 --防火分区)
- *
- * * @author 张宇(taohuzy@163.com)
- */
- export class SFHFQZoneLegendItem extends SPolygonItem {
- /**
- * 构造函数
- *
- * @param parent 指向父对象
- * @param data 图例节点对象数据
- */
- constructor(parent, data) {
- super(parent)
- /** text item */
- this.textItem = new STextItem(this)
- /** 是否显示文字 */
- this._showText = true
- /** 是否蒙版遮罩 */
- this._maskFlag = false
- this.textItem.isTransform = false
- this.zOrder = ItemOrder.polygonOrder
- this.data = data
- this.id = data.ID
- this.name = data.Name
- this.text = data.Name
- if (data) {
- this.setPointList = []
- let setPointList
- if (data.OutLine) {
- if (data.OutLine[0] instanceof SPoint) {
- this.setPointList = data.OutLine
- } else {
- setPointList = data.OutLine.map((i) => {
- return new SPoint(i.X, i.Y)
- })
- this.setPointList = setPointList
- }
- }
- // 设置线宽
- if (data.Properties.LineWidth) {
- this.lineWidth = data.Properties.LineWidth
- }
- if (data.Properties.StrokeColor) {
- this.strokeColor = data.Properties.StrokeColor.includes('#')
- ? new SColor(data.Properties.StrokeColor)
- : new SColor(hexify(data.Properties.StrokeColor))
- }
- if (data.Properties.FillColor) {
- this.fillColor = data.Properties.FillColor.includes('#')
- ? new SColor(data.Properties.FillColor)
- : new SColor(hexify(data.Properties.FillColor))
- }
- if (data.Properties.TextPos) {
- this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
- }
- if (data.Properties.color) {
- this.color = new SColor(data.Properties.color)
- }
- if (data.Properties.font) {
- this.font = new SFont('sans-serif', data.Properties.font)
- }
- // if( data.Properties.LineDash){
- // this.LineDash =this._legend.Properties.LineDash
- // }
- }
- // 监听多边形创建完成事件,并动态计算文本位置
- this.connect('finishCreated', this, () => {
- // 计算文本位置
- let x = this.getPointList.reduce((pre, cur, index, arr) => {
- return pre + cur.x / arr.length
- }, 0),
- y = this.getPointList.reduce((pre, cur, index, arr) => {
- return pre + cur.y / arr.length
- }, 0)
- this.textItem.moveTo(x, y)
- })
- }
- get text() {
- return this.textItem.text
- }
- set text(v) {
- this.textItem.text = v
- this.update()
- }
- get color() {
- return this.textItem.color
- }
- set color(v) {
- this.textItem.color = v
- }
- get font() {
- return this.textItem.font
- }
- set font(v) {
- this.textItem.font = v
- }
- get status() {
- return this._status
- }
- // 编辑当前状态
- set status(value) {
- this._status = value
- // 如果状态为show则需清栈
- if (value == SItemStatus.Normal) {
- // 切换显示状态显示文本
- this.showText = true
- // 切换显示状态不可移动文本
- this.textItem.moveable = false
- if (this.undoStack) {
- this.undoStack.clear()
- }
- } else if (value == SItemStatus.Edit) {
- // 切换编辑状态显示文本
- this.showText = true
- // 切换编辑状态可移动文本
- this.textItem.moveable = true
- } else if (value == SItemStatus.Create) {
- // 切换创建状态不显示文本
- this.showText = false
- // 切换创建状态不可移动文本
- this.textItem.moveable = false
- }
- this.update()
- }
- get showText() {
- return this._showText
- }
- set showText(v) {
- if (v === this._showText) {
- return
- }
- this._showText = v
- if (v) {
- this.textItem.show()
- } else {
- this.textItem.hide()
- }
- }
- get maskFlag() {
- return this._maskFlag
- }
- set maskFlag(v) {
- if (v === this._maskFlag) {
- return
- }
- this._maskFlag = v
- this.update()
- }
- toData() {
- this.data.Pos = { X: this.x, Y: this.y }
- this.data.Name = this.text
- this.data.Properties.FillColor = this.fillColor.value
- this.data.Properties.StrokeColor = this.strokeColor.value
- this.data.Properties.LineWidth = this.lineWidth
- this.data.OutLine = this.getPointList.map((pos) => {
- return {
- X: pos.x,
- Y: pos.y,
- }
- })
- this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
- this.data.Properties.font = this.font.size
- this.data.Properties.color = this.color.value
- return this.data
- }
- onDraw(painter) {
- if (this.maskFlag && this.status == SItemStatus.Normal) {
- let color = new SColor(this.strokeColor)
- color.alpha = color.alpha / 2
- let brushcolor = new SColor(this.fillColor)
- brushcolor.alpha = brushcolor.alpha / 2
- painter.pen.color = color
- painter.pen.lineCapStyle = SLineCapStyle.Square
- painter.pen.lineWidth = painter.toPx(this._lineWidth)
- painter.brush.color = brushcolor
- // @ts-ignore
- painter.drawPolygon([...this.pointList])
- } else {
- this.selected = true
- super.onDraw(painter)
- }
- }
- } // Class SZoneLegendItem
|