wanda-editer/src/lib/items/TipelineItem.ts

import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
import { SPainter, SColor, SRect } from '@saga-web/draw';
import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
import { Relation } from '../types/Relation';
import { SPoint } from "@saga-web/draw/lib";
import { Point } from "@saga-web/big/lib/types/Point";
import { uuid } from '@/components/mapClass/until';
import { SMouseEvent } from '@saga-web/base/lib';

/**
 * 管道item
 *
 * */
export class TipelineItem extends SPolylineItem {
  /** 起始锚点  */
  startAnchor: SAnchorItem | null = null;
  /** 结束锚点  */
  endAnchor: SAnchorItem | null = null;
  /** 对应的图例ID  */
  _graphElementId: string = "";
  get graphElementId(): string {
    return this._graphElementId;
  }
  set graphElementId(v: string) {
    this._graphElementId = v;
    if (this.data) {
      this.data.GraphElementId = this._graphElementId;
    }
  }
  /** 关联节点1ID  */
  _node1Id: string = "";
  get node1Id(): string {
    return this._node1Id;
  }
  set node1Id(v: string) {
    this._node1Id = v;
    if (this.data) {
      this.data.Node1ID = this._node1Id;
    }
  }
  /** 关联节点2ID  */
  _node2Id: string = "";
  get node2Id(): string {
    return this._node2Id;
  }
  set node2Id(v: string) {
    this._node2Id = v;
    if (this.data) {
      this.data.Node2ID = this._node2Id;
    }
  }
  /** 关联锚点1ID  */
  _anchor1ID: string = "";
  get anchor1ID(): string {
    return this._anchor1ID;
  }
  set anchor1ID(v: string) {
    this._anchor1ID = v;
    if (this.data) {
      this.data.Anchor1ID = this._anchor1ID;
    }
  }
  /** 关联锚点2ID  */
  _anchor2ID: string = "";
  get anchor2ID(): string {
    return this._anchor2ID;
  }
  set anchor2ID(v: string) {
    this._anchor2ID = v;
    if (this.data) {
      this.data.Anchor2ID = this._anchor2ID;
    }
  }

  /** 是否蒙版遮罩  */
  _maskFlag: boolean = false;
  get maskFlag(): boolean {
    return this._maskFlag;
  }
  set maskFlag(v: boolean) {
    if (v === this._maskFlag) {
      return
    }
    this._maskFlag = v;
    this.update()
  }

  /** 数据存储  */
  data: Relation | null = null;
  /** 接收事件作出修改  */
  changePos() {
    if (this.startAnchor) {
      // 判断删除equip后,不移动
      if (this.startAnchor.parent && this.startAnchor.parent.parent) {
        let p = this.startAnchor.mapToScene(0, 0);
        this.pointList[0] = new SPoint(p.x - this.x, p.y - this.y)
      }
    }
    if (this.endAnchor) {
      // 删除equip后
      if (this.endAnchor.parent && this.endAnchor.parent.parent) {
        let p = this.endAnchor.mapToScene(0, 0);
        this.pointList[
          this.pointList.length - 1
        ] = new SPoint(p.x - this.x, p.y - this.y)
      }
    }
  }

  constructor(parent: SGraphItem | null, data: Relation) {
    super(parent, []);
    this.zOrder = ItemOrder.polylineOrder;
    this.pointList = data.PointList.map(item => {
      return new SPoint(item.X, item.Y);
    });
    this.data = data;
    this.name = data.Name;
    if (!data.ID) {
      data.ID = uuid()
    }
    this.id = data.ID;
    if (data.GraphElementId) {
      this._graphElementId = data.GraphElementId
    }
    if (data.Node1ID) {
      this._node1Id = data.Node1ID
    }
    if (data.Node2ID) {
      this._node2Id = data.Node2ID
    }
    if (data.Anchor1ID) {
      this._anchor1ID = data.Anchor1ID
    }
    if (data.Anchor2ID) {
      this._anchor2ID = data.Anchor2ID
    }
    if (data.Properties.Zorder) {
      this.zOrder = data.Properties.Zorder;
    }
    if (data.Properties && data.Properties.Color) {
      this.strokeColor = new SColor(data.Properties.Color);
    }
    // if(data.Properties && data.Properties.LineDash){
    //   this.LineDash = data.Properties.LineDash
    // }
    if (data.Properties && data.Properties.LineWidth) {
      this.lineWidth = data.Properties.LineWidth;
    }
  }

  /**
     * 鼠标按下事件
     *
     * @param   event   保存事件参数
     * @return  boolean
     */
    onMouseDown(event: SMouseEvent): boolean {
      if (event.buttons == 1)
      this.$emit("legendItemClick", event);
      super.onMouseDown(event);
      return true;
  } // Function onMouseDown()

  /** 获取data数据  */
  toData(): Relation | null {
    let pointList: Point[] = this.pointList.map(item => {
      return {
        X: item.x,
        Y: item.y
      }
    });

    if (this.data) {
      this.data.Name = this.name;
      this.data.PointList = pointList;
      this.data.Properties.Zorder = this.zOrder;
      this.data.Properties.LineWidth = this.lineWidth;
      // this.data.Properties.LineDash = this.LineDash;
      this.data.Properties.Color = this.strokeColor.value;
    }

    return this.data
  }

  // onDraw(painter: SPainter) {
    //     if (this.maskFlag && this.status == SItemStatus.Normal) {
    //         let color = new SColor(this.strokeColor)
    //         color.alpha = color.alpha / 8
    //         painter.pen.color = color

    //         if (this.selected) {
    //             painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
    //             painter.shadow.shadowBlur = 10;
    //             painter.shadow.shadowColor = new SColor(`#00000033`);
    //             painter.shadow.shadowOffsetX = 5;
    //             painter.shadow.shadowOffsetY = 5;
    //         } else {
    //             painter.pen.lineWidth = painter.toPx(this.lineWidth);
    //             painter.shadow.shadowColor = SColor.Transparent
    //         }
    //         painter.drawPolyline(this.pointList)

    //         painter.pen.color = new SColor('#ffffff80')
    //         painter.drawPolyline(this.pointList)
    //     } else {
    //         super.onDraw(painter)
    //     }
    // }
  /**
     * Item绘制框架
     *
     * @param   painter       painter对象
     * @param   rect          绘制区域
     */
    onPaint(painter: SPainter, rect: SRect): void {
      super.onPaint(painter, rect);
      if (this.maskFlag && this.status == SItemStatus.Normal) {
          if (this.selected) {
              painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
          } else {
              painter.pen.lineWidth = painter.toPx(this.lineWidth);
          }
          painter.pen.color = new SColor('#ffffff80')
          painter.drawPolyline(this.pointList)
      }
  } // Function onPaint()
}