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

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

/**
 * 图例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();
      }
    }

    /** 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.update();
    }

    /** icon宽 */
    get sHeight(): number {
      return this.img.height;
    }
    set sHeight(v: number) {
      this.img.height = v
      this.update();
    }

    /** 是否显示锚点  */
    _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(): string {
      return this.textItem.color;
    }
    set color(v: string) {
      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) {
      super(parent);
      this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
      this.img.width = 32;
      this.img.height = 32;
      let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
      this.anchorList = anchorPoint.map(t => {
        let item = new SAnchorItem(this);
        item.moveTo(t.x, t.y);
        return item;
      });
      this.update();
      this.textItem.text = "";
      this.textItem.backgroundColor = SColor.White;
      this.textItem.font.size = 24;
      this.textItem.moveTo(26, -6);
      this.moveable = true;
      this.selectable = true;
      this.isTransform = false;
      // this.textItem.enabled = false;
      // this.img.enabled = false;
    }

    /**
     * 鼠标按下事件
     *
     * */
    onMouseDown(event: SMouseEvent): boolean {
      console.log(this)
      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.Normal) {
        if (this.selected) {
          painter.pen.lineWidth = painter.toPx(1);
          painter.pen.lineDash = [
            painter.toPx(3),
            painter.toPx(7)
          ];
          painter.pen.color = new SColor("#000000");
          painter.brush.color = SColor.Transparent;
          painter.drawRect(this.boundingRect());
        }
      } else if (this.status == SItemStatus.Edit) {
        painter.pen.lineWidth = painter.toPx(1);
        painter.pen.lineDash = [
          painter.toPx(3),
          painter.toPx(7)
        ];
        painter.pen.color = SColor.Red;
        painter.brush.color = SColor.Transparent;
        painter.drawRect(this.boundingRect());
      }
    } // Function onDraw()
  }