persagy_topo_editer/src/components/editClass/edit/items/SBaseArrowEdit.ts

/*
 * *********************************************************************************************************************
 *
 *          !!
 *        .F88X
 *        X8888Y
 *      .}888888N;
 *        i888888N;        .:!              .I$WI:
 *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
 *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
 *            +888888N;  .8888888Y                                  "&&8Y.}8,
 *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
 *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
 *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
 *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
 *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
 *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
 *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
 *      .:R888888I
 *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
 *        ~8888'
 *        .!88~                                                                     All rights reserved.
 *
 * *********************************************************************************************************************
 */

import { SArrowStyleType, SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw";
import { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
import { SItemStatus } from "@persagy-web/big";;
import {
  SLineStyle,
  SGraphItem, SGraphPointListInsert, SGraphPointListUpdate
} from "@persagy-web/graph/";
import { SGraphEdit } from "..";
import { SMathUtil } from '@persagy-web/big/lib/utils/SMathUtil';
import { Marker } from "./../type/Marker";

/**
 * 折线编辑类
 *
 * @author 韩耀龙 <han_yao_long@163.com>
 */
export class SBaseArrowEdit extends SGraphEdit {
  /** 编辑相关操作的数据 */
  data: Marker;
  /** undo/redo 堆栈 */
  private undoStack: SUndoStack = new SUndoStack();
  /** 是否绘制完成 */
  _status: SItemStatus = SItemStatus.Normal;
  get status(): SItemStatus {
    return this._status;
  } // Get status
  set status(v: SItemStatus) {
    this._status = v;
    if (this.undoStack) {
      this.undoStack.clear();
    }

    this.update();
  } // Set status

  /** 矩形两个对角 */
  private _line: SPoint[] = [];
  get line(): SPoint[] {
    return this._line;
  } // Get line
  set line(arr: SPoint[]) {
    this._line = arr;
    this.update();
  } // Get line

  /** 矩形左上角 */
  private _leftTop: SPoint = new SPoint();
  /** 矩形右下角 */
  private _rightBottom: SPoint = new SPoint();
  /** 拖动灵敏度 */
  dis: number = 5;
  /** 拖动灵敏度 */
  private sceneDis: number = 5;
  /** 是否垂直水平绘制  */
  private _verAndLeve: Boolean = false;
  get verAndLeve(): Boolean {
    return this._verAndLeve;
  } // Get verAndLeve
  set verAndLeve(bool: Boolean) {
    this._verAndLeve = bool;
    this.update();
  } // Set verAndLeve

  /** 当前点索引 */
  curIndex: number = -1;
  /** 当前点坐标 */
  private curPoint: SPoint | null = null;
  /** 线条颜色 */
  _strokeColor: SColor = SColor.Black;
  get strokeColor(): SColor {
    return this._strokeColor;
  } // Get strokeColor
  set strokeColor(v: SColor) {
    this._strokeColor = v;
    this.update();
  } // Set strokeColor

  /** 填充色 */
  _fillColor: SColor = new SColor("#2196f3");
  get fillColor(): SColor {
    return this._fillColor;
  } // Get fillColor
  set fillColor(v: SColor) {
    this._fillColor = v;
    this.update();
  } // Set fillColor

  /** 选中端点填充色 */
  private _activeFillColor: SColor = new SColor("#2196f3");
  get activeFillColor(): SColor {
    return this._activeFillColor;
  } // Get activeFillColor
  set activeFillColor(v: SColor) {
    this._activeFillColor = v;
    this.update();
  } // Set activeFillColor

  /** 边框样式 */
  _lineStyle: SLineStyle = SLineStyle.Solid;
  get lineStyle(): SLineStyle {
    return this._lineStyle;
  } // Get lineStyle
  set lineStyle(v: SLineStyle) {
    this._lineStyle = v;
    this.update();
  } // Set lineStyle

  /** 线条宽度 */
  _lineWidth: number = 1;
  get lineWidth(): number {
    return this._lineWidth;
  } // Get lineWidth
  set lineWidth(v: number) {
    this._lineWidth = v;
    this.update();
  } // Set lineWidth

  /**
   * 构造函数
   *
   * @param parent    指向父对象
   * @param data      数据
   */
  constructor(parent: SGraphItem | null, data: Marker) {
    super(parent);
    this.showSelect = false;
    this.data = data;
    if (data.style && data.style.default) {
      // 关于顶点
      if (data.style.default.line) {
        let setPointList: SPoint[];
        setPointList = data.style.default.line.map(i => {
          return new SPoint(i.x, i.y)
        });
        this.line = setPointList;
      }

      // 颜色
      if (data.style.default.strokeColor) {
        this.strokeColor = new SColor(data.style.default.strokeColor)
      }

      // 线宽
      if (data.style.default.LineWidth) {
        this.lineWidth = data.style.default.lineWidth
      }

      // 线样式
      if (data.style.default.LineStyle) {
        this.lineStyle = data.style.default.lineStyle
      }
    }
  } // Constructor

  /**
   * 鼠标双击事件
   *
   * @param	event   事件参数
   * @return 是否处理该事件
  */
  onDoubleClick(event: SMouseEvent): boolean {
    if (this.status == SItemStatus.Normal) {
      this.status = SItemStatus.Edit;
      this.grabItem(this);
    } else if (this.status == SItemStatus.Edit) {
      this.status = SItemStatus.Normal;
      this.releaseItem();
    }

    this.update();
    return true;
  } // Function onDoubleClick()

  /**
   * 鼠标按下事件
   *
   * @param event   鼠标事件
   * @return  是否处理该事件
  */
  onMouseDown(event: SMouseEvent): boolean {
    this.curIndex = -1;
    this.curPoint = null;
    if (event.shiftKey || this._verAndLeve) {
      event = this.compare(event);
    }

    if (event.buttons == SMouseButton.LeftButton) {
      if (this.status == SItemStatus.Normal) {
        return super.onMouseDown(event);
      } else if (this.status == SItemStatus.Edit) {
        // 判断是否点击到端点上(获取端点索引值)
        this.findNearestPoint(new SPoint(event.x, event.y));
      } else if (this.status == SItemStatus.Create) {
        this.addPoint(new SPoint(event.x, event.y));
        return true;
      }
    }

    return true;
  } // Function onMouseDown()

  /**
   * shift 垂直水平创建或编辑
   *
   * @param event   事件
   * @return  返回鼠标事件
  */
  compare(event: SMouseEvent): SMouseEvent {
    if (this.line.length) {
      let last = new SPoint(event.x, event.y);
      if (this.status == SItemStatus.Create) {
        last = this.line[0];
      } else if (this.status == SItemStatus.Edit) {
        if (this.curIndex == 1) {
          last = this.line[0];
        } else if (this.curIndex == 0) {
          last = this.line[1];
        }
      }

      const dx = Math.abs(event.x - last.x);
      const dy = Math.abs(event.y - last.y);
      if (dy > dx) {
        event.x = last.x;
      } else {
        event.y = last.y;
      }
    }

    return event;
  } // Function compare()

  /**
   * 获取点击点与 Point[] 中的点距离最近点
   *
   * @param p   鼠标点击点
  */
  findNearestPoint(p: SPoint): void {
    let len = this.sceneDis;
    for (let i = 0; i < this.line.length; i++) {
      let dis = SMathUtil.pointDistance(
        p.x,
        p.y,
        this.line[i].x,
        this.line[i].y
      );
      if (dis < len) {
        len = dis;
        this.curIndex = i;
        this.curPoint = new SPoint(this.line[this.curIndex]);
      }
    }
  } // Function findNearestPoint()

  /**
   * 鼠标移动事件
   *
   * @param event   鼠标事件
   * @return  是否处理事件
  */
  onMouseMove(event: SMouseEvent): boolean {
    if (event.shiftKey || this._verAndLeve) {
      event = this.compare(event);
    }

    if (this.status == SItemStatus.Create) {
      if (this.line[0] instanceof SPoint) {
        this.line[1] = new SPoint(event.x, event.y);
        this.calRect()
      }
    } else if (this.status == SItemStatus.Edit) {
      if (-1 != this.curIndex) {
        this.line[this.curIndex].x = event.x;
        this.line[this.curIndex].y = event.y;
        this.calRect()
      }
    } else {
      return super.onMouseMove(event);
    }

    this.update();
    return true;
  } // Function onMouseMove()

  /**
   * 鼠标抬起事件
   *
   * @param	event   事件参数
   * @return 是否处理该事件
  */
  onMouseUp(event: SMouseEvent): boolean {
    if (this.status == SItemStatus.Edit) {
      if (this.curIndex > -1) {
        const p = new SPoint(
          this.line[this.curIndex].x,
          this.line[this.curIndex].y
        );
        this.recordAction(SGraphPointListUpdate, [
          this.line,
          this.curPoint,
          p,
          this.curIndex
        ]);
      }
    } else if (this.status == SItemStatus.Normal) {
      super.onMouseUp(event)
      return true;
    }

    this.curIndex = -1;
    this.curPoint = null;
    return true;
  } // Function onMouseUp()

  /**
   * 计算矩形的左上角和右下角
  */
  private calRect(): void {
    if (this.line.length > 1) {
      const fi = this.line[0];
      const se = this.line[1];
      let minx, maxx, miny, maxy;
      if (fi.x < se.x) {
        minx = fi.x;
        maxx = se.x;
      } else {
        minx = se.x;
        maxx = fi.x;
      }

      if (fi.y < se.y) {
        miny = fi.y;
        maxy = se.y;
      } else {
        miny = se.y;
        maxy = fi.y;
      }

      this._leftTop = new SPoint(minx, miny)
      this._rightBottom = new SPoint(maxx, maxy)
    }
  } // Function calRect

  /**
   * 添加点至数组中
   *
   * @param p   添加的点
  */
  private addPoint(p: SPoint): void {
    if (this.line.length < 2) {
      this.line.push(p);
      this.recordAction(SGraphPointListInsert, [this.line, p]);
    } else {
      this.line[1] = p;
      this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
      this.status = SItemStatus.Normal;
      this.releaseItem();
      this.$emit("finishCreated");
    }

    this.calRect()
    this.update();
  } // Function addPoint()

  /**
   * 移动后处理所有坐标,并肩原点置为场景原点
  */
  moveToOrigin(): void {
    this.line = this.line.map(t => {
      t.x = t.x + this.x;
      t.y = t.y + this.y;
      return t;
    });

    this.x = 0;
    this.y = 0;
  } // Function moveToOrigin()

  /**
   * 记录相关动作并推入栈中
   *
   * @param	SGraphCommand   相关命令类
   * @param	any             对应传入参数
  */
  protected recordAction(SGraphCommand: any, any: any[]): void {
    // 记录相关命令并推入堆栈中
    const command = new SGraphCommand(this.scene, this, ...any);
    this.undoStack.push(command);
  } // Function recordAction()

  /**
   * 判断点是否在区域内
   *
   * @param x   x 横向坐标
   * @param y   y 纵向坐标
   * @return  在区域内返回 true, 否则 false
  */
  contains(x: number, y: number): boolean {
    if (this.line.length == 2) {
      let p = new SPoint(x, y);
      if (
        SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1]))
          .MinDis < this.dis
      ) {
        return true;
      }
    }

    return false;
  } // Function contains()

  /**
   * Item 对象边界区域
   *
   * @return 外接矩阵
  */
  boundingRect(): SRect {
    if (this.line.length > 1) {
      this.calRect()
      return new SRect(this._leftTop, this._rightBottom);
    }

    return new SRect()
  } // Function boundingRect()

  /**
   * 撤销操作
  */
  undo(): void {
    if (this._status != SItemStatus.Normal) {
      this.undoStack.undo();
    }
  } // Function undo()

  /**
   * 重做操作
  */
  redo(): void {
    if (this._status != SItemStatus.Normal) {
      this.undoStack.redo();
    }
  } // Function redo()

  /**
   * 取消操作执行
  */
  cancelOperate(): void {
    if (this.status == SItemStatus.Create) {
      this.parent = null;
      this.releaseItem();
    } else if (this.status == SItemStatus.Edit) {
      this.status = SItemStatus.Normal;
      this.releaseItem();
    }
  } // Function cancelOperate()

  /**
   * Item绘制操作
   *
   * @param painter   绘制对象
  */
  onDraw(painter: SPainter): void {
    painter.pen.color = this.strokeColor;
    if (this.line.length == 2) {
      painter.brush.color = this.fillColor;
      painter.pen.lineWidth = this.lineWidth
      if (this.lineStyle == SLineStyle.Dashed) {
        painter.pen.lineDash = [
          painter.toPx(this.lineWidth * 3),
          painter.toPx(this.lineWidth * 7)
        ];
      } else if (this.lineStyle == SLineStyle.Dotted) {
        painter.pen.lineDash = [
          painter.toPx(this.lineWidth * 2),
          painter.toPx(this.lineWidth * 2)
        ];
      }

      if (this.selected && this.status == SItemStatus.Normal) {
        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;
      }

      painter.drawArrowLine(this.line[0], this.line[1], { begin: SArrowStyleType.None, end: SArrowStyleType.Basic });
      if (
        this.status == SItemStatus.Edit ||
        this.status == SItemStatus.Create
      ) {
        // 绘制端点
        this.line.forEach((p, i): void => {
          painter.brush.color = this.fillColor;
          if (i == this.curIndex) {
            painter.brush.color = this.activeFillColor;
          }
          painter.drawCircle(p.x, p.y, painter.toPx(5));
        });
      }

    } else if (this.line.length == 1) {
      if (
        this.status == SItemStatus.Edit ||
        this.status == SItemStatus.Create
      ) {
        // 绘制端点
        painter.brush.color = this.fillColor;
        painter.drawCircle(
          this.line[0].x,
          this.line[0].y,
          painter.toPx(5)
        );
      }
    }
  } // Function onDraw()

  /**
   * 返回对象储存的相关数据
   *
   * @return	实体类保存得数据
  */
  toData(): any {
    this.moveToOrigin()
    const Line = [{ x: this.line[0].x, y: this.line[0].y }, { x: this.line[1].x, y: this.line[1].y }];
    this.data.style.default.line = Line;
    this.data.style.default.lineWidth = this.lineWidth;
    this.data.style.default.lineStyle = this.lineStyle;
    this.data.style.default.strokeColor = this.strokeColor;
    return this.data
  } // Function toData()
} // Class SArrowEdit