public-fuse/src/view/case/draw/board/editCAD/Layer.js

import Load from "./Load";
import { stateService } from "./Service/StateService";
import { elementService } from "./Service/ElementService";
import { floorplanService } from "./Service/FloorplanService";
import { tagService } from "./Service/TagService";
import { tableService } from "./Service/TableService";
import { historyService } from "./Service/HistoryService";

import UIControl from "./Controls/UIControl";
import { moveTag } from "./Controls/MoveTag";
import { moveTable } from "./Controls/MoveTable";
import { addWall } from "./Controls/AddWall";
import { moveWall } from "./Controls/MoveWall";
import { addRectangle } from "./Controls/AddRectangle";
import { moveRectangle } from "./Controls/MoveRectangle";
import { addCircle } from "./Controls/AddCircle";
import { moveCircle } from "./Controls/MoveCircle";
import { addIcon } from "./Controls/AddIcon";
import { moveIcon } from "./Controls/MoveIcon";
import { addArrow } from "./Controls/AddArrow";
import { moveArrow } from "./Controls/MoveArrow";
import { coordinate } from "./Coordinate";
import Render from "./Renderer/Render";
import { draw } from "./Renderer/Draw";
import { listenLayer } from "./ListenLayer";
import { floorplanData } from "./FloorplanData";

import LayerEvents from "./enum/LayerEvents.js";
import UIEvents from "./enum/UIEvents.js";
import SelectState from "./enum/SelectState.js";
import Constant from "./Constant";
import VectorType from "./enum/VectorType";
import MathUtil, { mathUtil } from "./MathUtil";
import { wallService } from "./Service/WallService";
import { history } from "./History/History.js";
import { signService } from "./Service/SignService";
import { iconService } from "./Service/IconService";
import { customImageService } from "./Service/CustomImageService.js";
import { moveCustomImage } from "./Controls/MoveCustomImage.js";
import { moveBgImage } from "./Controls/MoveBgImage.js";

export default class Layer {
  constructor() {
    //super()
    this.load = new Load(this);
    this.uiControl = new UIControl(this);
    this.renderer = new Render(this);
    //this.history = new History(this)

    this.canvas = null;
    this.startX = null;
    this.startY = null;

    history.layer = this;
  }

  //开始
  start(canvas, vectorData) {
    coordinate.init(canvas);
    this.canvas = canvas;
    draw.initContext(this.canvas);
    this.bindEvents();
    return this.load.load(vectorData).then(() => {
      //。。。
      this.renderer.autoRedraw();
    });
  }

  bindEvents() {
    this.canvas.addEventListener("contextmenu", function (e) {
      e.preventDefault();
    });
    this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
    this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
    this.canvas.addEventListener("mousewheel", this.onWheel.bind(this));
    this.canvas.addEventListener("DOMMouseScroll", this.onWheel.bind(this));
  }

  onMouseDown(e) {
    this.startX = e.offsetX || e.layerX;
    this.startY = e.offsetY || e.layerY;

    this.lastX = e.offsetX || e.layerX;
    this.lastY = e.offsetY || e.layerY;

    // 右键
    if (e.button == 2) {
      this.stopAddVector();
      this.renderer.autoRedraw();
      return;
    }

    const eventName = stateService.getEventName();
    //点击第一次
    if (eventName == LayerEvents.AddWall) {
      let flag = addWall.setNewWallPoint("start", {
        x: this.startX,
        y: this.startY,
      });
      if (!flag) {
        return;
      }
    }
    //点击第二次
    else if (eventName == LayerEvents.AddingWall) {
      let flag = addWall.setNewWallPoint("end", {
        x: this.startX,
        y: this.startY,
      });
      if (!flag) {
        return;
      }
      if (addWall.canAdd) {
        addWall.buildWall();
        history.save();
      } else {
        return;
      }
    } else if (eventName == LayerEvents.AddRectangle) {
      addRectangle.execute({
        x: this.startX,
        y: this.startY,
      });
    } else if (eventName == LayerEvents.AddCircle) {
      addCircle.execute({
        x: this.startX,
        y: this.startY,
      });
    } else if (eventName == LayerEvents.AddIcon) {
      addIcon.execute({
        x: this.startX,
        y: this.startY,
      });
    } else if (eventName == LayerEvents.AddArrow) {
      addArrow.execute({
        x: this.startX,
        y: this.startY,
      });
    } else {
      const selectItem = stateService.getSelectItem();
      if (eventName == null && selectItem) {
        stateService.setDraggingItem(selectItem);
        this.uiControl.selectUI = selectItem.type;
      } 
      // else if (eventName == null) {
      //   this.uiControl.clearUI();
      // }
    }
    this.setEventName("mouseDown");
    this.uiControl.clearUI();
    // 清除上一个状态
    // 设置当前事件名称
    e.preventDefault();
    e.stopPropagation();
  }

  onMouseMove(e) {
    const X = e.offsetX || e.layerX;
    const Y = e.offsetY || e.layerY;
    if (this.lastX == null) {
      this.lastX = X;
    }
    if (this.lastY == null) {
      this.lastY = Y;
    }
    let dx = X - this.lastX;
    let dy = Y - this.lastY;

    let position = coordinate.getXYFromScreen({
      x: X,
      y: Y,
    });

    const eventName = stateService.getEventName();
    // 是否需要重绘
    let needAutoRedraw = false;

    const draggingItem = stateService.getDraggingItem();
    switch (eventName) {
      case null:
        //监控当前选择的构件
        needAutoRedraw = listenLayer.start(position);
        break;
      case LayerEvents.PanBackGround:
        break;
      case LayerEvents.AddWall:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }
        elementService.execute(null, position);
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        break;
      case LayerEvents.AddingWall:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        let startPosition = {
          x: addWall.startInfo.position.x,
          y: addWall.startInfo.position.y,
        };
        listenLayer.start(position, null, null, startPosition);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.execute(startPosition, position);
        elementService.setStartAddWall(position);
        if (!elementService.newWall.display) {
          elementService.setNewWall(startPosition, position);
          elementService.showNewWall(); //画墙
        } else {
          if (!listenLayer.modifyPoint && addWall.startInfo.linkedPointId) {
            //角度很正
            let newEndPosition = elementService.checkAngle(
              position,
              addWall.startInfo.linkedPointId,
              null
            );
            if (newEndPosition) {
              mathUtil.clonePoint(position, newEndPosition);
              listenLayer.modifyPoint = {
                x: newEndPosition.x,
                y: newEndPosition.y,
              };
            }
          }
          elementService.setNewWallEndPosition(position); //改变end位置
        }

        addWall.canAdd = addWall.canAddWallForEnd(position);
        if (!addWall.canAdd) {
          elementService.setNewWallState("error");
        } else {
          elementService.setNewWallState("normal");
        }
        break;
      case LayerEvents.MoveWall:
        dx = (dx * Constant.defaultZoom) / coordinate.zoom;
        dy = (dy * Constant.defaultZoom) / coordinate.zoom;
        // 1表示可以继续移动，2表示不能移动(启动距离还不够)，3表示wallId被删除了,4表示重新开始移动（需要达到一定距离才能启动）,5表示不能移动（不合适）
        let moveFlag = moveWall.moveWallPlane(draggingItem.vectorId, dx, dy);
        // 启动的时候需要点距离，所以真正移动了才更新lastX和lastY
        if (moveFlag == 1) {
          this.lastX = X;
          this.lastY = Y;
          needAutoRedraw = true;
        }
        // 需要继续保持移动，一般是距离不够启动
        else if (moveFlag == 2) {
        }
        // wallId被删除了
        else if (moveFlag == 3) {
          history.save();
          stateService.clearSelectItem();
          stateService.clearDraggingItem();
          stateService.clearEventName();
          listenLayer.clear();
          needAutoRedraw = true;
        }
        // wallId有一端被吸附了，这时候需要重新启动
        else if (moveFlag == 4) {
          this.lastX = X;
          this.lastY = Y;
          this.startX = X;
          this.startY = Y;
          needAutoRedraw = true;
        } else if (moveFlag == 5) {
          this.lastX = X;
          this.lastY = Y;
        }
        break;
      case LayerEvents.MoveWallPoint:
        let point = floorplanService.getPoint(draggingItem.vectorId);
        listenLayer.start(position, draggingItem.vectorId, point.parent);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }
        elementService.execute(null, position);
        let flag = moveWall.movePoint(
          draggingItem.vectorId,
          position,
          listenLayer.modifyPoint
        );
        if (!flag) {
          elementService.hideAll();
        }
        needAutoRedraw = true;
        break;
      case LayerEvents.AddRectangle:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        break;
      case LayerEvents.AddingRectangle:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        addRectangle.execute(position);
        break;
      case LayerEvents.MoveRectangle:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveRectangle.moveFullRectangle(dx, dy, draggingItem.vectorId);
        }
        this.lastX = X;
        this.lastY = Y;
        break;
      case LayerEvents.MoveRectangleVertex:
        needAutoRedraw = true;
        if (draggingItem != null) {
          elementService.setStartAddWall(position);
          elementService.showStartAddWall();
          moveRectangle.moveRectangleVertex(
            position,
            draggingItem.vectorId,
            parseInt(draggingItem.selectIndex.substring(7))
          );
        }
        break;
      case LayerEvents.MoveRectangleSide:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveRectangle.moveRectangleSide(
            position,
            draggingItem.vectorId,
            parseInt(draggingItem.selectIndex.substring(5))
          );
        }
        break;
      case LayerEvents.AddCircle:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        break;
      case LayerEvents.AddingCircle:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        addCircle.execute(position);
        break;
      case LayerEvents.MoveCircle:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveCircle.moveFullCircle(dx, dy, draggingItem.vectorId);
        }
        this.lastX = X;
        this.lastY = Y;
        break;
      case LayerEvents.MoveCircleVertex:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveCircle.moveCircleVertex(
            position,
            draggingItem.vectorId,
            parseInt(draggingItem.selectIndex.substring(7))
          );
        }
        break;
      case LayerEvents.AddIcon:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        break;
      case LayerEvents.AddingIcon:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        addIcon.execute(position);
        break;
      case LayerEvents.MoveIcon:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveIcon.moveFullIcon(dx, dy, draggingItem.vectorId);
        }
        this.lastX = X;
        this.lastY = Y;
        break;
      case LayerEvents.MoveIconVertex:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveIcon.moveIconVertex(
            position,
            draggingItem.vectorId,
            parseInt(draggingItem.selectIndex.substring(7))
          );
        }
        break;
      case LayerEvents.AddArrow:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        break;
      case LayerEvents.AddingArrow:
        stateService.clearDraggingItem();
        stateService.clearFocusItem();
        needAutoRedraw = true;
        elementService.setStartAddWall(position);
        elementService.showStartAddWall();
        addArrow.execute(position);
        break;
      case LayerEvents.MoveArrow:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveArrow.moveFullArrow(dx, dy, draggingItem.vectorId);
        }
        this.lastX = X;
        this.lastY = Y;
        break;
      case LayerEvents.moveArrowVertex:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveArrow.moveArrowVertex(
            position,
            draggingItem.vectorId,
            draggingItem.selectIndex
          );
        }
        break;
      case LayerEvents.AddTag:
        needAutoRedraw = true;
        if (draggingItem == null) {
          const tag = tagService.createTag(position);
          if (tag.vectorId) {
            stateService.setSelectItem(
              tag.vectorId,
              VectorType.Tag,
              SelectState.All
            );
            stateService.setDraggingItem(stateService.selectItem);
          }
        } else {
          moveTag.moveFullTag(dx, dy, draggingItem.vectorId);
        }
        this.lastX = X;
        this.lastY = Y;
        break;
      case LayerEvents.MoveTag:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveTag.moveFullTag(dx, dy, draggingItem.vectorId);
          this.lastX = X;
          this.lastY = Y;
        }
        break;
      case LayerEvents.AddTable:
        needAutoRedraw = true;
        if (draggingItem == null) {
          const table = tableService.createTable(position);
          if (table.vectorId) {
            stateService.setSelectItem(
              table.vectorId,
              VectorType.Table,
              SelectState.All
            );
            stateService.setDraggingItem(stateService.selectItem);
          }
        } else {
          moveTable.moveFullTable(dx, dy, draggingItem.vectorId);
        }
        this.lastX = X;
        this.lastY = Y;
        break;
      case LayerEvents.MoveTable:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveTable.moveFullTable(dx, dy, draggingItem.vectorId);
          this.lastX = X;
          this.lastY = Y;
        }
        break;
      case LayerEvents.AddSign:
        needAutoRedraw = true;
        if (draggingItem == null) {
          const signType = this.uiControl.getSignTypeForUI();
          const sign = signService.createSign(position, signType);
          if (sign.vectorId) {
            stateService.setSelectItem(
              sign.vectorId,
              signType,
              SelectState.All
            );
            stateService.setDraggingItem(stateService.selectItem);
          }
        } else {
          const sign = floorplanService.getSign(draggingItem.vectorId);
          mathUtil.clonePoint(sign.center, position);
        }
        break;
      case LayerEvents.MoveCustomImage:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveCustomImage.moveFullCustomImage(dx, dy, draggingItem.vectorId);
          this.lastX = X;
          this.lastY = Y;
        }
        break;
      case LayerEvents.MoveSign:
        needAutoRedraw = true;
        const sign = floorplanService.getSign(draggingItem.vectorId);
        mathUtil.clonePoint(sign.center, position);
        break;
      case LayerEvents.MoveBgImage:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveBgImage.moveFullBgImage(dx, dy, draggingItem.vectorId);
          this.lastX = X;
          this.lastY = Y;
        }
        break;
    }

    if (needAutoRedraw) {
      this.renderer.autoRedraw();
    }
  }

  onMouseUp(e) {
    const X = e.offsetX || e.layerX;
    const Y = e.offsetY || e.layerY;

    let eventName = stateService.getEventName();
    const draggingItem = stateService.getDraggingItem();
    let focusItem = null;

    if (draggingItem && draggingItem.vectorId) {
      if (
        mathUtil.getDistance(
          {
            x: this.startX,
            y: this.startY,
          },
          {
            x: X,
            y: Y,
          }
        ) < Constant.minMovePix
      ) {
        focusItem = {
          vectorId: draggingItem.vectorId,
          type: draggingItem.type,
          selectIndex: draggingItem.selectIndex,
          cursor: { x: this.lastX, y: this.lastY },
        };
        this.uiControl.showAttributes(focusItem);
      } else {
        focusItem = null;
      }
      stateService.setFocusItem(focusItem);
      //this.uiControl.clearUI();
    }

    let position = coordinate.getXYFromScreen({
      x: X,
      y: Y,
    });
    let needAutoRedraw = false;
    switch (eventName) {
      case null:
        return;
      case LayerEvents.PanBackGround:
        needAutoRedraw = true;
        stateService.clearFocusItem();
        this.uiControl.clearUI();
        break;
      case LayerEvents.MoveWallPoint:
        if (focusItem == null) {
          needAutoRedraw = true;
          let point = floorplanService.getPoint(draggingItem.vectorId);
          if (point) {
            listenLayer.start(point, draggingItem.vectorId, point.parent);

            if (
              listenLayer.modifyPoint &&
              listenLayer.modifyPoint.hasOwnProperty("linkedPointId")
            ) {
              wallService.moveTo(
                draggingItem.vectorId,
                listenLayer.modifyPoint.linkedPointId
              );
            } else if (
              listenLayer.modifyPoint &&
              (listenLayer.modifyPoint.linkedPointIdX ||
                listenLayer.modifyPoint.linkedPointIdY)
            ) {
              mathUtil.clonePoint(point, listenLayer.modifyPoint);
            } else if (
              listenLayer.modifyPoint &&
              listenLayer.modifyPoint.hasOwnProperty("linkedWallId")
            ) {
              point = wallService.createPoint(
                listenLayer.modifyPoint.x,
                listenLayer.modifyPoint.y
              );
              wallService.splitWall(
                listenLayer.modifyPoint.linkedWallId,
                point.vectorId,
                "start"
              );
              wallService.moveTo(draggingItem.vectorId, point.vectorId);
            } else if (moveWall.splitWallId != null) {
              wallService.splitWall(
                moveWall.splitWallId,
                draggingItem.vectorId,
                "start"
              );
            }
            //draggingItem.vectorId所在的墙面与其他墙角相交
            moveWall.updateForAbsorbWallPoints();
            history.save();
          }
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        elementService.hideAll();
        break;
      case LayerEvents.AddingWall:
        needAutoRedraw = true;
        if (addWall.startInfo && addWall.startInfo.linkedPointId) {
          let addWallStartPoint = floorplanService.getPoint(
            addWall.startInfo.linkedPointId
          );
          if (
            addWall.endInfo.position &&
            Object.keys(addWallStartPoint.parent).length > 1
          ) {
            stateService.clearEventName();
            addWall.clear();
            elementService.hideAll();
            this.uiControl.clearUI();
            history.save();
          }
        }
        break;
      case LayerEvents.MoveWall:
        if (focusItem == null) {
          needAutoRedraw = true;
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
      case LayerEvents.AddingRectangle:
        needAutoRedraw = true;
        if (
          mathUtil.getDistance(addRectangle.start, addRectangle.end) <
          Constant.minAdsorb
        ) {
          floorplanService.deleteRectangle(addRectangle.currentVectorId);
        }
        stateService.clearEventName();
        elementService.hideAll();
        addRectangle.clear();
        history.save();
        this.uiControl.clearUI();
        break;
      case LayerEvents.MoveRectangle:
        if (focusItem == null) {
          needAutoRedraw = true;
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
      case LayerEvents.MoveRectangleVertex:
        needAutoRedraw = true;
        elementService.hideAll();
        history.save();
        break;
      case LayerEvents.MoveRectangleSide:
        needAutoRedraw = true;
        history.save();
        break;
      case LayerEvents.AddingCircle:
        if (addCircle.end != null && addCircle.currentVectorId != null) {
          if (
            mathUtil.getDistance(addCircle.start, addCircle.end) <
            Constant.minAdsorb
          ) {
            floorplanService.deleteCircle(addCircle.currentVectorId);
          }
          needAutoRedraw = true;
        }
        stateService.clearEventName();
        elementService.hideAll();
        addCircle.clear();
        history.save();
        this.uiControl.clearUI();
        break;
      case LayerEvents.MoveCircle:
        if (focusItem == null) {
          needAutoRedraw = true;
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
      case LayerEvents.MoveCircleVertex:
        needAutoRedraw = true;
        history.save();
        break;
      case LayerEvents.AddingIcon:
        if (addIcon.end != null && addIcon.currentVectorId != null) {
          if (
            mathUtil.getDistance(addIcon.start, addIcon.end) <
            Constant.minAdsorb
          ) {
            iconService.deleteIcon(addIcon.currentVectorId);
          }
          needAutoRedraw = true;
        }
        stateService.clearEventName();
        elementService.hideAll();
        addIcon.clear();
        history.save();
        this.uiControl.clearUI();
        break;
      case LayerEvents.MoveIcon:
        if (focusItem == null) {
          needAutoRedraw = true;
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
      case LayerEvents.MoveIconVertex:
        needAutoRedraw = true;
        history.save();
        break;
      case LayerEvents.AddingArrow:
        if (addArrow.start != null && addArrow.currentVectorId != null) {
          if (
            mathUtil.getDistance(addArrow.start, addArrow.end) <
            Constant.minAdsorb
          ) {
            floorplanService.deleteArrow(addArrow.currentVectorId);
          }
          needAutoRedraw = true;
        }
        stateService.clearEventName();
        elementService.hideAll();
        addArrow.clear();
        history.save();
        this.uiControl.clearUI();
        break;
      case LayerEvents.MoveArrow:
        needAutoRedraw = true;
        history.save();
        break;
      case LayerEvents.MoveTag:
        if (focusItem == null) {
          needAutoRedraw = true;
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
      case LayerEvents.AddTag:
        needAutoRedraw = true;
        this.uiControl.showAttributes(focusItem);
        history.save();
        break;
      case LayerEvents.MoveTable:
        if (focusItem == null) {
          needAutoRedraw = true;
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
      case LayerEvents.AddTable:
        needAutoRedraw = true;
        this.uiControl.showAttributes(focusItem);
        history.save();
        break;
      case LayerEvents.AddSign:
        needAutoRedraw = true;
        this.uiControl.clearUI();
        this.uiControl.showAttributes(focusItem);
        history.save();
        break;
      case LayerEvents.MoveSign:
        if (focusItem != null && signService.isSign(focusItem.type)) {
          //history.save();
          this.uiControl.showAttributes(focusItem);
        } else {
          needAutoRedraw = true;
          history.save();
        }
        break;
      case LayerEvents.MoveCustomImage:
        if (focusItem == null) {
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
      case LayerEvents.MoveBgImage:
        if (focusItem == null) {
          history.save();
        } else {
          this.uiControl.showAttributes(focusItem);
        }
        break;
    }
    this.lastX = null;
    this.lastY = null;
    this.setEventName("mouseUp");
    stateService.clearDraggingItem();
    this.renderer.autoRedraw();
  }

  onWheel(e) {
    // e.preventDefault()
    // const type = e.type
    // if (type == 'DOMMouseScroll' || type == 'mousewheel') {
    //     // 当在canvas用滚轮滚动时
    //     const delta = e.wheelDelta ? (e.wheelDelta / 120) * 2 : (-(e.detail || 0) / 3) * 2
    //     const zoom = coordinate.zoom + delta
    //     if (zoom < 14) {
    //         return
    //     }
    //     coordinate.updateZoom(zoom)
    //     this.renderer.autoRedraw()
    // }
  }

  onKeydown(e) {
    if (!this.display) {
      return;
    }

    if (e.ctrlKey && e.code == "KeyZ") {
      this.revokeHistory();
      console.log("ctrl+z");
    } else if (e.ctrlKey && e.code == "KeyY") {
      this.recoveryHistory();
      console.log("ctrl+y");
    } else if (e.code == "Delete") {
      this.uiControl.deleteItem();
      this.uiControl.clearUI();
      history.save();
      this.renderer.autoRedraw();
      console.log("Delete");
    } else if (e.code == "Escape") {
      this.stopAddVector();
      this.renderer.autoRedraw();
      console.log("Esc");
    }
  }

  setEventName(eventType) {
    let eventName = stateService.getEventName();

    if (eventType == "mouseDown") {
      if (eventName == null) {
        const selectItem = stateService.getSelectItem();
        if (selectItem == null) {
          stateService.setEventName(LayerEvents.PanBackGround);
        } else if (selectItem.type == VectorType.Wall) {
          stateService.setEventName(LayerEvents.MoveWall);
        } else if (selectItem.type == VectorType.WallCorner) {
          stateService.setEventName(LayerEvents.MoveWallPoint);
        } else if (selectItem.type == VectorType.Tag) {
          stateService.setEventName(LayerEvents.MoveTag);
        } else if (signService.isSign(selectItem.type)) {
          stateService.setEventName(LayerEvents.MoveSign);
        } else if (selectItem.type == VectorType.Rectangle) {
          if (selectItem.selectIndex == SelectState.All) {
            stateService.setEventName(LayerEvents.MoveRectangle);
          } else if (selectItem.selectIndex.indexOf(SelectState.Vertex) > -1) {
            stateService.setEventName(LayerEvents.MoveRectangleVertex);
          } else if (selectItem.selectIndex.indexOf(SelectState.Side) > -1) {
            stateService.setEventName(LayerEvents.MoveRectangleSide);
          }
        } else if (selectItem.type == VectorType.Circle) {
          if (selectItem.selectIndex == SelectState.All) {
            stateService.setEventName(LayerEvents.MoveCircle);
          } else if (selectItem.selectIndex.indexOf(SelectState.Vertex) > -1) {
            stateService.setEventName(LayerEvents.MoveCircleVertex);
          }
        } else if (selectItem.type == VectorType.Icon) {
          if (selectItem.selectIndex == SelectState.All) {
            stateService.setEventName(LayerEvents.MoveIcon);
          } else if (selectItem.selectIndex.indexOf(SelectState.Vertex) > -1) {
            stateService.setEventName(LayerEvents.MoveIconVertex);
          }
        } else if (selectItem.type == VectorType.Arrow) {
          if (selectItem.selectIndex == SelectState.All) {
            stateService.setEventName(LayerEvents.MoveArrow);
          } else {
            stateService.setEventName(LayerEvents.moveArrowVertex);
          }
        } else if (selectItem.type == VectorType.Table) {
          stateService.setEventName(LayerEvents.MoveTable);
        } else if (selectItem.type == VectorType.Title) {
          stateService.setEventName(LayerEvents.MoveTitle);
        } else if (selectItem.type == VectorType.Compass) {
          stateService.setEventName(LayerEvents.MoveCompass);
        } else if (selectItem.type == VectorType.CustomImage) {
          stateService.setEventName(LayerEvents.MoveCustomImage);
        } else if (selectItem.type == VectorType.BgImage) {
          stateService.setEventName(LayerEvents.MoveBgImage);
        } 
      } else if (eventName == LayerEvents.AddWall) {
        stateService.setEventName(LayerEvents.AddingWall);
      }
    } else if (eventType == "mouseUp") {
      if (eventName == LayerEvents.AddTag) {
        stateService.clearEventName();
      } else if (eventName == LayerEvents.AddRectangle) {
        stateService.setEventName(LayerEvents.AddingRectangle);
      } else if (eventName == LayerEvents.AddCircle) {
        stateService.setEventName(LayerEvents.AddingCircle);
      } else if (eventName == LayerEvents.AddIcon) {
        stateService.setEventName(LayerEvents.AddingIcon);
      } else if (eventName == LayerEvents.AddArrow) {
        stateService.setEventName(LayerEvents.AddingArrow);
      } else if (eventName == LayerEvents.AddTable) {
        stateService.clearEventName();
      } 
      else if (
        eventName != LayerEvents.AddWall &&
        eventName != LayerEvents.AddingWall
      ) {
        //&& eventName != LayerEvents.AddRectangle && eventName != LayerEvents.AddingRectangle && eventName != LayerEvents.AddCircle && eventName != LayerEvents.AddingCircle && eventName != LayerEvents.AddArrow && eventName != LayerEvents.AddingArrow && eventName != LayerEvents.AddIcon && eventName != LayerEvents.AddingIcon
        stateService.clearEventName();
      }
    }
  }

  exit() {
    stateService.clearItems();
    stateService.clearEventName();
    this.uiControl.clearUI();
  }

  stopAddVector() {
    let eventName = stateService.getEventName();
    if (eventName != LayerEvents.AddingWall) {
      stateService.clearEventName();
      const draggingItem = stateService.getDraggingItem();
      if (eventName == LayerEvents.AddTag) {
        if (draggingItem && draggingItem.vectorId) {
          tagService.deleteTag(draggingItem.vectorId);
          this.uiControl.clearUI();
          stateService.clearItems();
        }
      } else if (eventName == LayerEvents.AddTable) {
        if (draggingItem && draggingItem.vectorId) {
          tableService.deleteTable(draggingItem.vectorId);
          this.uiControl.clearUI();
          stateService.clearItems();
        }
      } else if (eventName == LayerEvents.AddSign) {
        if (draggingItem && draggingItem.vectorId) {
          floorplanService.deleteSign(draggingItem.vectorId);
          stateService.clearItems();
        }
      } 
    } else {
      stateService.setEventName(LayerEvents.AddWall);
    }

    this.uiControl.clearUI();
    elementService.hideAll();
  }
}