wanda-bm-guide/src/lib/items/SZoneLegendItem.js

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 SZoneLegendItem 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) {
                    // @ts-ignore
                    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.name
        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