sagacloud-web/saga-web-big/src/items/SIconTextItem.ts

import {
    SObjectItem,
    SImageItem,
    STextItem,
    SAnchorItem,
    SGraphItem
} from "@saga-web/graph/lib";
import { SItemStatus, ItemOrder } from "..";
import { SMouseEvent } from "@saga-web/base";
import { SSize, SRect, SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
import { Anchor } from "../types/topology/Anchor";

/**
 * 图例item  icon
 *
 * */
export class SIconTextItem extends SObjectItem {
    /** item状态  */
    _status: SItemStatus = SItemStatus.Normal;
    get status(): SItemStatus {
        return this._status;
    }
    set status(v: SItemStatus) {
        this._status = v;
        if (v == SItemStatus.Normal) {
            this.moveable = true;
            this.textItem.moveable = false;
            this.img.moveable = false;
        } else if (v == SItemStatus.Edit) {
            this.moveable = false;
            this.textItem.moveable = true;
            this.img.moveable = true;
        } else if (v == SItemStatus.Create) {
            this.moveable = true;
            this.textItem.moveable = false;
            this.img.moveable = false;
        }
        this.update();
    }

    /** 是否显示文字  */
    _showText: boolean = true;
    get showText(): boolean {
        return this._showText;
    }
    set showText(v: boolean) {
        if (v === this._showText) {
            return;
        }
        this._showText = v;
        if (v) {
            this.textItem.show();
        } else {
            this.textItem.hide();
        }
    }

    /** 是否被选中 */
    get selected(): boolean {
        return this._selected && this.selectable && this.enabled;
    } // Get selected
    set selected(value: boolean) {
        // 如果选择状态未变更
        if (this.selected == value) {
            return;
        }
        this._selected = value;
        if (value) {
            this.img.scale = 1.25;
            this.zOrder = ItemOrder.highLightOrder;
        } else {
            this.img.scale = 1;
            this.zOrder = ItemOrder.markOrder;
        }
        this.update();
    } // Set selected

    /** 是否激活  */
    _isActive: boolean = false;
    get isActive(): boolean {
        return this._isActive;
    } // Get isActive
    set isActive(v: boolean) {
        this._isActive = v;
        if (v) {
            this.cursor = "pointer";
            this.textItem.cursor = "pointer";
            this.img.cursor = "pointer";
        } else {
            this.cursor = "auto";
            this.textItem.cursor = "auto";
            this.img.cursor = "auto";
        }
        this.update();
    } // Set isActive

    /** 激活显示颜色  */
    _activeColor: SColor = new SColor("#00000033");
    get activeColor(): SColor {
        return this._activeColor;
    } // Get activeColor
    set activeColor(v: SColor) {
        this._activeColor = v;
        this.update();
    } // Set activeColor

    /** X轴坐标 */
    get x(): number {
        return this.pos.x;
    } // Get x
    set x(v: number) {
        this.pos.x = v;
        this.$emit("changePos");
        this.update();
    } // Set x
    /** Y轴坐标 */
    get y(): number {
        return this.pos.y;
    } // Get y
    set y(v: number) {
        this.pos.y = v;
        this.$emit("changePos");
        this.update();
    } // Set y

    /** icon宽 */
    get sWidth(): number {
        return this.img.width;
    }
    set sWidth(v: number) {
        this.img.width = v;
        this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5);
        this.changeAhchorPoint();
        this.update();
    }

    /** icon宽 */
    get sHeight(): number {
        return this.img.height;
    }
    set sHeight(v: number) {
        this.img.height = v;
        this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5);
        this.changeAhchorPoint();
        this.update();
    }

    /** 是否显示锚点  */
    private _showAnchor: boolean = false;
    get showAnchor(): boolean {
        return this._showAnchor;
    }
    set showAnchor(v: boolean) {
        this._showAnchor = v;
        this.anchorList.forEach(t => {
            t.visible = v;
        });
    }

    get text(): string {
        return this.textItem.text;
    }
    set text(v: string) {
        this.textItem.text = v;
        this.update();
    }
    get color(): SColor {
        return this.textItem.color;
    }
    set color(v: SColor) {
        this.textItem.color = v;
        this.update();
    }
    get font(): SFont {
        return this.textItem.font;
    }
    set font(v: SFont) {
        this.textItem.font = v;
        this.update();
    }
    /** img Item    */
    img: SImageItem = new SImageItem(this);

    /** text item   */
    textItem: STextItem = new STextItem(this);

    /**
     * 构造体
     *
     * */
    constructor(parent: SGraphItem | null, data?: Anchor[]) {
        super(parent);
        this.img.width = 32;
        this.img.height = 32;
        this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5);
        this.img.connect("onMove", this, this.changeAhchorPoint.bind(this));
        let anchorPoint;
        if (data && data.length) {
            anchorPoint = data.map(t => {
                return {
                    x: t.Pos.X,
                    y: t.Pos.Y,
                    id: t.ID
                };
            });
        } else {
            anchorPoint = [
                { x: this.img.x, y: this.img.y, id: "" },
                { x: this.img.x, y: this.img.y, id: "" },
                { x: this.img.x, y: this.img.y, id: "" },
                { x: this.img.x, y: this.img.y, id: "" }
                // { x: this.img.x, y: this.img.y + this.img.height / 2, id: "" },
                // { x: this.img.x, y: this.img.y - this.img.height / 2, id: "" },
                // { x: this.img.x - this.img.width / 2, y: this.img.y, id: "" },
                // { x: this.img.x + this.img.width / 2, y: this.img.y, id: "" }
            ];
        }
        this.anchorList = anchorPoint.map(t => {
            let item = new SAnchorItem(this);
            if (t.id) {
                item.id = t.id;
            }
            item.moveTo(t.x, t.y);
            return item;
        });
        this.showAnchor = false;
        this.textItem.text = "";
        this.textItem.font.size = 12;
        // 偏移二分之一文本高度
        this.textItem.moveTo((this.img.width * 0.5), -(this.font.size * 1.25 * 0.5));
        this.moveable = true;
        this.selectable = true;
    }

    /**
     * 计算并移动锚点的位置
     *
     * */
    private changeAhchorPoint(): void {
        // 判断是否有锚点
        if (this.anchorList.length) {
            let anchorPoint = [
                { x: this.img.x, y: this.img.y },
                { x: this.img.x, y: this.img.y },
                { x: this.img.x, y: this.img.y },
                { x: this.img.x, y: this.img.y }
                // { x: this.img.x, y: this.img.y + this.img.height / 2 },
                // { x: this.img.x, y: this.img.y - this.img.height / 2 },
                // { x: this.img.x - this.img.width / 2, y: this.img.y },
                // { x: this.img.x + this.img.width / 2, y: this.img.y }
            ];
            this.anchorList.forEach((item, index) => {
                item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
            });
        }
    } // Function changeAhchorPoint()

    /**
     * 鼠标按下事件
     *
     * */
    onMouseDown(event: SMouseEvent): boolean {
        if (this.status == SItemStatus.Normal) {
            return super.onMouseDown(event);
        } else if (this.status == SItemStatus.Edit) {
            return super.onMouseDown(event);
        }
        return true;
    } // Function onMouseDown()

    /**
     * 宽高发发生变化
     *
     * @param   oldSize 改之前的大小
     * @param   newSize 改之后大小
     * */
    onResize(oldSize: SSize, newSize: SSize) {
        console.log(arguments);
    } // Function onResize()

    /**
     * 鼠标双击事件
     *
     * @param   event   鼠标事件
     * @return  是否处理事件
     * */
    onDoubleClick(event: SMouseEvent): boolean {
        // 如果位show状态 双击改对象则需改为编辑状态
        if (SItemStatus.Normal == this.status) {
            this.status = SItemStatus.Edit;
            this.grabItem(this);
        } else if (SItemStatus.Edit == this.status) {
            this.status = SItemStatus.Normal;
            this.releaseItem();
        }
        this.update();
        return true;
    } // Function onDoubleClick()

    /**
     * 宽高发生变化
     *
     * @return  SRect   所有子对象的并集
     * */
    boundingRect(): SRect {
        let rect = this.img
            .boundingRect()
            .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
        if (this.showText) {
            rect = rect.unioned(
                this.textItem
                    .boundingRect()
                    .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0)
            );
        }
        return rect.adjusted(-5, -5, 10, 10);
    } // Function boundingRect()

    /**
     * Item绘制操作
     *
     * @param   painter painter对象
     */
    onDraw(painter: SPainter): void {
        if (this.status == SItemStatus.Edit) {
            painter.pen.lineWidth = painter.toPx(1);
            painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
            painter.pen.color = SColor.Black;
            painter.brush.color = SColor.Transparent;
            painter.drawRect(this.boundingRect());
        }
        if (this.isActive) {
            painter.pen.color = SColor.Transparent;
            painter.brush.color = this.activeColor;
            if (this.selected) {
                painter.shadow.shadowBlur = 10;
                painter.shadow.shadowColor = this.activeColor;
                painter.shadow.shadowOffsetX = 5;
                painter.shadow.shadowOffsetY = 5;
                painter.drawCircle(this.img.x, this.img.y, (this.sWidth / 2.0 + 3) * 1.25);
            } else {
                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0 + 3);
            }
        } else {
            if (this.selected) {
                painter.pen.color = SColor.Transparent;
                painter.brush.color = SColor.Transparent;
                painter.shadow.shadowBlur = 10;
                painter.shadow.shadowColor = new SColor(`#00000033`);
                painter.shadow.shadowOffsetX = 5;
                painter.shadow.shadowOffsetY = 5;
                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
            }
        }
    } // Function onDraw()
}