traffic-laser/src/graphic/Layer.js

import Load from "./Load";
import { stateService } from "./Service/StateService";
import { elementService } from "./Service/ElementService";
import { dataService } from "./Service/DataService";
import { textService } from "./Service/TextService";
import { historyService } from "./Service/HistoryService";
import UIControl from "./Controls/UIControl";
// import { moveRectangle } from "./Controls/MoveRectangle";
import { moveText } from "./Controls/MoveText";
import { moveSVG } from "./Controls/MoveSVG";
import { moveMagnifier } from "./Controls/MoveMagnifier";
import { addRoad } from "./Controls/AddRoad";
import { addLine } from "./Controls/AddLine";
import { addPoint } from "./Controls/AddPoint";
import { addCircle } from "./Controls/AddCircle";
import { addText } from "./Controls/AddText";
import { addMagnifier } from "./Controls/AddMagnifier";
import { addSVG } from "./Controls/AddSVG";
import { moveRoad } from "./Controls/MoveRoad";
import { moveLine } from "./Controls/MoveLine";
import { movePoint } from "./Controls/MovePoint";
import { moveCircle } from "./Controls/MoveCircle";
import { coordinate } from "./Coordinate";
import Render from "./Renderer/Render";
import { draw } from "./Renderer/Draw";
import { listenLayer } from "./ListenLayer";
import LayerEvents from "./enum/LayerEvents.js";
import UIEvents from "./enum/UIEvents.js";
import SelectState from "./enum/SelectState.js";
import VectorType from "./enum/VectorType";
import { mathUtil } from "./Util/MathUtil";
import History from "./History/History";
import mitt from "mitt";
import { roadService } from "./Service/RoadService";
import { edgeService } from "./Service/EdgeService";
import { roadPointService } from "./Service/RoadPointService";
import { curveRoadService } from "./Service/CurveRoadService";
import VectorCategory from "./enum/VectorCategory";
import Settings from "./Settings";
import { uiService } from "./Service/UIService";
import { imageService } from "./Service/ImageService";

const minDragDis = 10;
const minZoom = 20;
const maxZoom = 800;

export default class Layer {
  constructor(canvas, newsletter, graphicState) {
    this.canvas = canvas;
    this.load = new Load(this);

    this.uiControl = new UIControl(this, newsletter, graphicState);
    this.renderer = new Render(this);
    this.history = new History(this);
    this.mousePosition = null;
    this.dragging = false; // 当前是否正在拖拽
    this.start();

    Object.setPrototypeOf(Object.getPrototypeOf(this), mitt());
  }

  start() {
    if (this.canvas) {
      this.canvas.width = this.canvas.clientWidth;
      this.canvas.height = this.canvas.clientHeight;
      coordinate.init(this.canvas);
      draw.initContext(this.canvas);
      dataService.initVectorData();
      this.bindEvents();
    }

    window.vectorData = dataService.vectorData;
  }

  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("touchstart", this.onMouseDown.bind(this));
    this.canvas.addEventListener("touchmove", this.onMouseMove.bind(this));
    this.canvas.addEventListener("touchend", this.onMouseUp.bind(this));

    this.canvas.addEventListener("mousewheel", this.onWheel.bind(this));
    this.canvas.addEventListener("DOMMouseScroll", this.onWheel.bind(this));
    this.canvas.addEventListener("resize", this.reSize.bind(this));
    document.addEventListener("keydown", this.onKeydown.bind(this));
  }

  reSize = function () {
    console.log("resize");
    coordinate.updateForCanvas();
    this.renderer.autoRedraw();
  };

  onMouseDown(e) {
    if (e instanceof TouchEvent) {
      this.startX = e.touches[0].pageX;
      this.startY = e.touches[0].pageY;

      this.lastX = e.touches[0].pageX;
      this.lastY = e.touches[0].pageY;
    } else {
      this.startX = e.offsetX || e.layerX;
      this.startY = e.offsetY || e.layerY;

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

    let position = coordinate.getXYFromScreen({
      x: this.startX,
      y: this.startY,
    });

    // 右键
    if (e.button == 2) {
      this.stopAddVector();
      return;
    }
    this.dragging = false;
    //用于支持平板电脑
    listenLayer.start(position);
    this.setEventName("mouseDown");
    const eventName = stateService.getEventName();
    switch (eventName) {
      case LayerEvents.AddRoad:
        stateService.setEventName(LayerEvents.AddingRoad);
        addRoad.setNewRoadPoint("start", position);
        break;
      case LayerEvents.AddCurveRoad:
        stateService.setEventName(LayerEvents.AddingCurveRoad);
        addRoad.setNewRoadPoint("start", position);
        break;
      case LayerEvents.AddLine:
        stateService.setEventName(LayerEvents.AddingLine);
        addLine.setNewLinePoint(position);
        break;
      case LayerEvents.AddCurveLine:
        stateService.setEventName(LayerEvents.AddingCurveLine);
        addLine.setNewLinePoint(position);
        break;
      case LayerEvents.AddPoint:
        stateService.setEventName(LayerEvents.MovePoint);
        const newPoint = addPoint.buildPoint(position);
        if (newPoint) {
          stateService.setSelectItem(
            newPoint.vectorId,
            VectorType.Point,
            SelectState.Select
          );
        } else {
          this.uiControl.prompt({ msg: "请先添加基准点", time: 1000 });
        }
        break;
      case LayerEvents.AddCircle:
        stateService.setEventName(LayerEvents.AddingCircle);
        addCircle.setCenter(position);
        break;
      case LayerEvents.AddText:
        stateService.setEventName(LayerEvents.MoveText);
        addText.buildText(position);
        stateService.setSelectItem(
          addText.newText.vectorId,
          VectorType.Text,
          SelectState.Select
        );
        addText.clear();
        break;
      case LayerEvents.AddSVG:
        stateService.setEventName(LayerEvents.MoveSVG);
        addSVG.buildSVG(position);
        stateService.setSelectItem(addSVG.newSVG.vectorId, VectorType.SVG, -1);
        addSVG.clear();
        break;
      case LayerEvents.AddMagnifier:
        stateService.setEventName(LayerEvents.MoveMagnifier);
        addMagnifier.buildMagnifier(position);
        stateService.setSelectItem(
          addMagnifier.newMagnifier.vectorId,
          VectorType.Magnifier,
          SelectState.Select
        );
        addMagnifier.clear();
        break;
    }
    const selectItem = stateService.getSelectItem();
    stateService.setDraggingItem(selectItem);
    // 清除上一个状态
    // 设置当前事件名称
    e.preventDefault();
    e.stopPropagation();
  }

  onMouseMove(e) {
    let X = e.offsetX || e.layerX;
    let Y = e.offsetY || e.layerY;

    if (e instanceof TouchEvent) {
      X = e.touches[0].pageX;
      Y = e.touches[0].pageY;
      //切换到缩放
      if (e.touches.length > 1) {
        //记录开始的两个触摸点的坐标
        if (!this.StorePage1 || !this.StorePage2) {
          this.onMouseUp(e);
          this.StorePage1 = { x: e.touches[0].pageX, y: e.touches[0].pageY };
          this.StorePage2 = { x: e.touches[1].pageX, y: e.touches[1].pageY };
          this.StoreMidePage = {
            x: (this.StorePage1.x + this.StorePage2.x) / 2,
            y: (this.StorePage1.y + this.StorePage2.y) / 2,
          };
          return;
        }
        const point1 = {
          x: e.touches[0].pageX,
          y: e.touches[0].pageY,
        };
        const point2 = {
          x: e.touches[1].pageX,
          y: e.touches[1].pageY,
        };

        let dis1 = mathUtil.getDistance(point1, point2) / 100;
        let dis2 = mathUtil.getDistance(this.StorePage1, this.StorePage2) / 100;
        let zoom = (coordinate.zoom * dis1) / dis2;
        this.zoomVector(this.StoreMidePage, zoom);
        mathUtil.clonePoint(this.StorePage1, point1);
        mathUtil.clonePoint(this.StorePage2, point2);
        return;
      }
    }

    let dx = X - this.lastX;
    let dy = Y - this.lastY;
    dx = dx * coordinate.ratio;
    dy = dy * coordinate.ratio;

    let position = coordinate.getXYFromScreen({
      x: X,
      y: Y,
    });
    this.mousePosition = {
      x: position.x,
      y: position.y,
    };
    const eventName = stateService.getEventName();
    if (
      !this.dragging &&
      Math.abs(X - this.startX) < minDragDis &&
      Math.abs(Y - this.startY) < minDragDis
    ) {
      return;
    }
    this.dragging = true;
    if (
      Math.abs(X - this.startX) > minDragDis ||
      Math.abs(Y - this.startY) > minDragDis
    ) {
      // 是否拖拽了
      if (eventName != null) {
        stateService.clearFocusItem();
        this.uiControl.focusVector = null;
      }
    }

    // 是否需要重绘
    let needAutoRedraw = false;
    let point = null;
    this.lastX = X;
    this.lastY = Y;
    const draggingItem = stateService.getDraggingItem();

    switch (eventName) {
      case null:
        //监控
        needAutoRedraw = listenLayer.start(position);
        let seleteItem = stateService.getSelectItem();
        if (seleteItem != null) {
          console.log("选中：" + seleteItem.vectorId);
        } else {
        }
        break;
      case LayerEvents.PanBackGround:
        stateService.clearItems();
        let center = {};
        center.x =
          coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
        center.y =
          coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
        let tempCenter = {};
        mathUtil.clonePoint(tempCenter, coordinate.center);
        mathUtil.clonePoint(coordinate.center, center);
        let inScreen = imageService.backgroundImgVertexsInScreenXY();
        if (!inScreen) {
          dataService.setGridForPan();
          needAutoRedraw = true;
        } else {
          mathUtil.clonePoint(coordinate.center, tempCenter);
        }
        break;
      case LayerEvents.AddRoad:
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.hideAll();
        elementService.setPoint(position);
        elementService.showPoint();
        if (listenLayer.modifyPoint) {
          elementService.execute(listenLayer.modifyPoint, position);
        }
        break;
      case LayerEvents.AddLine:
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.hideAll();
        elementService.setPoint(position);
        elementService.showPoint();
        if (listenLayer.modifyPoint) {
          elementService.execute(listenLayer.modifyPoint, position);
        }
        break;
      case LayerEvents.AddCurveLine:
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.hideAll();
        elementService.setPoint(position);
        elementService.showPoint();
        if (listenLayer.modifyPoint) {
          elementService.execute(listenLayer.modifyPoint, position);
        }
        break;
      case LayerEvents.AddCircle:
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.hideAll();
        elementService.setPoint(position);
        elementService.showPoint();
        if (listenLayer.modifyPoint) {
          elementService.execute(listenLayer.modifyPoint, position);
        }
        break;
      case LayerEvents.AddingRoad:
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.execute(addRoad.startInfo.position, position);
        elementService.setPoint(position);
        elementService.setNewRoad(addRoad.startInfo.position, position);
        elementService.showNewRoad();

        addRoad.setNewRoadPoint("end", position);
        addRoad.canAdd = addRoad.canAddRoadForEnd(position);
        if (!addRoad.canAdd) {
          elementService.setNewRoadState("error");
        } else {
          elementService.setNewRoadState("normal");
        }
        break;
      case LayerEvents.AddingLine:
        needAutoRedraw = true;
        let exceptLineId = null;
        let exceptPointId = null;
        if (addLine.newLine != null) {
          exceptLineId = addLine.newLine.vectorId;
          exceptPointId = addLine.newLine.endId;
        }
        listenLayer.start(position, {
          exceptLineId: exceptLineId,
          exceptPointId: exceptPointId,
        });
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }
        elementService.execute(addLine.startInfo.position, position);
        elementService.setPoint(position);
        if (addLine.newLine == null) {
          addLine.buildLine(position);
        } else {
          addLine.updateLine(position);
        }
        break;
      case LayerEvents.AddingCurveLine:
        needAutoRedraw = true;
        let exceptCurveLineId = null;
        let exceptCurvePointId = null;
        if (addLine.newLine != null) {
          exceptCurveLineId = addLine.newLine.vectorId;
          exceptCurvePointId = addLine.newLine.endId;
        }
        listenLayer.start(position, {
          exceptCurveLineId: exceptCurveLineId,
          exceptCurvePointId: exceptCurvePointId,
        });
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }
        elementService.execute(addLine.startInfo.position, position);
        elementService.setPoint(position);
        if (addLine.newLine == null) {
          addLine.buildCurveLine(position);
        } else {
          addLine.updateCurveLine(position);
        }
        break;
      case LayerEvents.AddingCircle:
        needAutoRedraw = true;
        let exceptCircleId = null;
        if (addCircle.newCircle != null) {
          exceptCircleId = addCircle.newCircle.vectorId;
        }
        listenLayer.start(position, { exceptCircleId: exceptCircleId });
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }
        elementService.execute(addCircle.center, position);
        elementService.setPoint(position);
        if (addCircle.newCircle == null) {
          addCircle.buildCircle(position);
        } else {
          addCircle.updateCircle(position);
        }
        break;
      case LayerEvents.MoveRoad:
        needAutoRedraw = true;
        //只允许拖拽一条公路
        let road = dataService.getRoad(draggingItem.vectorId);
        let start = dataService.getRoadPoint(road.startId);
        let end = dataService.getRoadPoint(road.endId);
        if (
          Object.keys(start.getParent()).length == 1 &&
          Object.keys(end.getParent()).length == 1
        ) {
          //拖拽的路只有一条
          moveRoad.moveRoad(
            draggingItem.vectorId,
            (dx * coordinate.defaultZoom) / coordinate.zoom,
            (dy * coordinate.defaultZoom) / coordinate.zoom
          );
        }
        break;
      case LayerEvents.MoveRoadPoint:
        point = dataService.getRoadPoint(draggingItem.vectorId);
        listenLayer.start(position, {
          exceptRoadPointId: draggingItem.vectorId,
          exceptRoadIds: point.parent,
        });
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        let flag = moveRoad.moveingRoadPoint(
          draggingItem.vectorId,
          position,
          listenLayer.modifyPoint
        );
        if (!flag) {
          elementService.hideAll();
        } else {
          // point = dataService.getRoadPoint(draggingItem.vectorId);
          // listenLayer.start(point, {
          //   exceptRoadPointId: draggingItem.vectorId,
          //   exceptRoadIds: point.parent,
          // });
          let otherPoint = null;
          if (
            listenLayer.modifyPoint &&
            listenLayer.modifyPoint.linkedRoadPointId
          ) {
            otherPoint = dataService.getRoadPoint(
              listenLayer.modifyPoint.linkedRoadPointId
            );
          } else if (
            listenLayer.modifyPoint &&
            listenLayer.modifyPoint.linkedRoadPointIdX
          ) {
            otherPoint = dataService.getRoadPoint(
              listenLayer.modifyPoint.linkedRoadPointIdX
            );
          } else if (
            listenLayer.modifyPoint &&
            listenLayer.modifyPoint.linkedRoadPointIdY
          ) {
            otherPoint = dataService.getRoadPoint(
              listenLayer.modifyPoint.linkedRoadPointIdY
            );
          }

          elementService.execute(otherPoint, point);
        }
        needAutoRedraw = true;
        break;
      case LayerEvents.AddCurveRoad:
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.hideAll();
        elementService.setPoint(position);
        elementService.showPoint();
        if (listenLayer.modifyPoint) {
          elementService.execute(listenLayer.modifyPoint, position);
        }
        break;
      case LayerEvents.AddingCurveRoad:
        needAutoRedraw = true;
        listenLayer.start(position);
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }

        elementService.execute(addRoad.startInfo.position, position);
        elementService.setPoint(position);
        elementService.setNewRoad(addRoad.startInfo.position, position);
        elementService.showNewRoad();

        addRoad.setNewRoadPoint("end", position);
        addRoad.canAdd = addRoad.canAddRoadForEnd(position);
        if (!addRoad.canAdd) {
          elementService.setNewRoadState("error");
        } else {
          elementService.setNewRoadState("normal");
        }
        break;
      case LayerEvents.MoveCurveRoad:
        needAutoRedraw = true;
        moveRoad.moveCurveRoad(
          draggingItem.vectorId,
          (dx * coordinate.defaultZoom) / coordinate.zoom,
          (dy * coordinate.defaultZoom) / coordinate.zoom
        );
        break;
      case LayerEvents.MoveCurveRoadPoint:
        if (!draggingItem || !draggingItem.vectorId) {
          return;
        }
        point = dataService.getCurveRoadPoint(draggingItem.vectorId);
        listenLayer.start(position, {
          exceptRoadPointId: draggingItem.vectorId,
          exceptCurveRoadId: point.parent, //不会融合，所以parent只有一个
        });
        if (listenLayer.modifyPoint) {
          position = {
            x: listenLayer.modifyPoint.x,
            y: listenLayer.modifyPoint.y,
          };
        }
        moveRoad.moveCurveRoadPoint(draggingItem.vectorId, position);
        needAutoRedraw = true;
        break;
      case LayerEvents.MoveCrossPoint:
        if (!draggingItem || !draggingItem.vectorId) {
          return;
        }
        moveRoad.moveCrossPoint(draggingItem.vectorId, position);
        needAutoRedraw = true;
        break;
      case LayerEvents.MoveEdge:
        moveRoad.moveEdge(draggingItem.vectorId, position);
        needAutoRedraw = true;
        break;
      case LayerEvents.MoveCurveEdge:
        if (listenLayer.modifyPoint) {
          moveRoad.moveCurveEdge(
            draggingItem.vectorId,
            listenLayer.modifyPoint.selectIndex,
            position
          );
        }
        needAutoRedraw = true;
        break;
      case LayerEvents.MoveLine:
        if (draggingItem != null) {
          moveLine.moveLine(
            draggingItem.vectorId,
            (dx * coordinate.defaultZoom) / coordinate.zoom,
            (dy * coordinate.defaultZoom) / coordinate.zoom
          );
          needAutoRedraw = true;
        }
        break;
      case LayerEvents.MovePoint:
        if (draggingItem != null) {
          point = dataService.getPoint(draggingItem.vectorId);
          listenLayer.start(position, {
            exceptPointId: draggingItem.vectorId,
            exceptLineId: point.parent,
          });
          if (listenLayer.modifyPoint) {
            position = {
              x: listenLayer.modifyPoint.x,
              y: listenLayer.modifyPoint.y,
            };
          }
          movePoint.movePoint(position, draggingItem.vectorId);
          needAutoRedraw = true;
        }
        break;
      case LayerEvents.MoveCurvePoint:
        if (draggingItem != null) {
          let curvePoint = dataService.getCurvePoint(draggingItem.vectorId);
          listenLayer.start(position, {
            exceptCurvePointId: draggingItem.vectorId,
            exceptCurveLineId: curvePoint.parent,
          });
          if (listenLayer.modifyPoint) {
            position = {
              x: listenLayer.modifyPoint.x,
              y: listenLayer.modifyPoint.y,
            };
          }
          movePoint.moveCurvePoint(position, draggingItem.vectorId);
          needAutoRedraw = true;
        }
        break;
      case LayerEvents.MoveCurveLine:
        if (draggingItem != null) {
          moveLine.moveCurveLine(
            draggingItem.vectorId,
            (dx * coordinate.defaultZoom) / coordinate.zoom,
            (dy * coordinate.defaultZoom) / coordinate.zoom
          );
          needAutoRedraw = true;
        }
        break;
      case LayerEvents.MoveCircle:
        if (draggingItem != null) {
          if (draggingItem.state == -1) {
            moveCircle.moveFull(
              draggingItem.vectorId,
              (dx * coordinate.defaultZoom) / coordinate.zoom,
              (dy * coordinate.defaultZoom) / coordinate.zoom
            );
          } else if (
            draggingItem.state == 0 ||
            draggingItem.state == 1 ||
            draggingItem.state == 2 ||
            draggingItem.state == 3
          ) {
            moveCircle.movePoint(
              position,
              draggingItem.vectorId,
              draggingItem.state
            );
          } else {
            debugger;
          }
          needAutoRedraw = true;
        }
        break;
      case LayerEvents.MoveText:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveText.moveFullText(position, draggingItem.vectorId);
        }
        break;
      case LayerEvents.MoveSVG:
        needAutoRedraw = true;
        if (draggingItem != null) {
          if (draggingItem.state == -1) {
            moveSVG.moveFullSVG(position, draggingItem.vectorId);
          } else {
            moveSVG.movePoint(
              position,
              draggingItem.vectorId,
              draggingItem.state
            );
          }
        }
        break;
      case LayerEvents.MoveMagnifier:
        needAutoRedraw = true;
        if (draggingItem != null) {
          moveMagnifier.moveFullMagnifier(position, draggingItem.vectorId);
        }
        break;
    }

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

  onMouseUp(e) {
    // 右键
    if (e.button == 2) {
      this.dragging = false;
      return;
    }
    let X = e.offsetX || e.layerX;
    let Y = e.offsetY || e.layerY;

    if (e instanceof TouchEvent) {
      X = this.lastX;
      Y = this.lastY;
      this.StorePage1 = null;
      this.StorePage2 = null;
      this.StoreMidePage = null;
      if (e.touches.length > 1) {
        this.dragging = false;
        return;
      }
    }

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

    if (!this.dragging && selectItem) {
      focusItem = {
        vectorId: selectItem.vectorId,
        type: selectItem.type,
        cursor: { x: this.lastX, y: this.lastY },
      };
      stateService.setFocusItem(focusItem);
      this.uiControl.focusVector = focusItem;
      stateService.clearDraggingItem();
    } else {
      this.uiControl.focusVector = null;
    }
    this.dragging = false;
    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.focusVector = null;
        this.uiControl.currentUI = null;
        break;
      case LayerEvents.MoveRoadPoint:
        if (!draggingItem || !draggingItem.vectorId) {
          break;
        }
        needAutoRedraw = true;
        elementService.hideAll();
        let point = dataService.getRoadPoint(draggingItem.vectorId);
        if (point) {
          listenLayer.start(point, {
            exceptPointId: draggingItem.vectorId,
            exceptRoadIds: point.parent,
          });
          if (
            listenLayer.modifyPoint &&
            listenLayer.modifyPoint.hasOwnProperty("linkedRoadPointId")
          ) {
            moveRoad.moveTo(
              draggingItem.vectorId,
              listenLayer.modifyPoint.linkedRoadPointId
            );
          } else if (
            listenLayer.modifyPoint &&
            (listenLayer.modifyPoint.linkedRoadPointIdX ||
              listenLayer.modifyPoint.linkedRoadPointIdY)
          ) {
            mathUtil.clonePoint(point, listenLayer.modifyPoint);
          } else if (
            listenLayer.modifyPoint &&
            listenLayer.modifyPoint.hasOwnProperty("linkedRoadId")
          ) {
            point = roadPointService.create({
              x: listenLayer.modifyPoint.x,
              y: listenLayer.modifyPoint.y,
            });
            roadService.splitRoad(
              listenLayer.modifyPoint.linkedRoadId,
              point.vectorId,
              "start"
            );
            moveRoad.moveTo(draggingItem.vectorId, point.vectorId);
          } else if (moveRoad.splitRoadId != null) {
            roadService.splitRoad(
              moveRoad.splitRoadId,
              draggingItem.vectorId,
              "start"
            );
          }
          //draggingItem.vectorId所在的墙面与其他墙角相交
          moveRoad.updateForAbsorbRoadPoints();
          let parent = point.getParent();
          for (let key in parent) {
            roadService.setLanes(key);
          }
          this.history.save();
        }
        break;
      // case LayerEvents.AddRoad:
      //   addRoad.setNewRoadPoint("start", position);
      //   break;
      case LayerEvents.AddingRoad:
        needAutoRedraw = true;
        if (addRoad.canAdd) {
          addRoad.buildRoad();
          this.history.save();
          elementService.hideAll();
        }
        break;
      case LayerEvents.AddingLine:
        needAutoRedraw = true;
        addLine.finish(position);
        this.updateForLocation();
        addLine.clearVectorData();
        this.history.save();
        elementService.hideAll();
        break;
      case LayerEvents.AddingCurveLine:
        needAutoRedraw = true;
        addLine.finishCurveLine(position);
        addLine.clearVectorData();
        this.history.save();
        elementService.hideAll();
        break;
      case LayerEvents.AddingCircle:
        needAutoRedraw = true;
        addCircle.finish(position);
        addCircle.clear();
        this.history.save();
        elementService.hideAll();
        break;
      case LayerEvents.MoveText:
        needAutoRedraw = true;
        this.history.save();
        elementService.hideAll();
        break;
      case LayerEvents.MoveSVG:
        needAutoRedraw = true;
        this.history.save();
        elementService.hideAll();
        break;
      case LayerEvents.MoveMagnifier:
        needAutoRedraw = true;
        this.history.save();
        elementService.hideAll();
        break;
      case LayerEvents.MoveSVG:
        needAutoRedraw = true;
        this.history.save();
        elementService.hideAll();
        break;
      case LayerEvents.AddingCurveRoad:
        needAutoRedraw = true;
        if (addRoad.canAdd) {
          addRoad.buildCurveRoad();
          this.history.save();
          elementService.hideAll();
        }
        break;
      case LayerEvents.MoveRoad:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveCurveRoad:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveCurveRoadPoint:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveCrossPoint:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveEdge:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveCurveEdge:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveLine:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MovePoint:
        needAutoRedraw = true;
        if (draggingItem && draggingItem.vectorId) {
          movePoint.finish(draggingItem.vectorId);
          uiService.setPointCategory(VectorCategory.Point.NormalPoint);
        }
        this.history.save();
        break;
      case LayerEvents.MoveCurvePoint:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveCurveLine:
        needAutoRedraw = true;
        this.history.save();
        break;
      case LayerEvents.MoveCircle:
        needAutoRedraw = true;
        this.history.save();
        break;
    }

    this.setEventName("mouseUp");
    stateService.clearDraggingItem();
    if (needAutoRedraw) {
      this.renderer.autoRedraw();
    }
  }

  onWheel(e) {
    e.preventDefault();
    const type = e.type;
    if (type == "DOMMouseScroll" || type == "mousewheel") {
      // 当在canvas用滚轮滚动时
      const delta = e.wheelDelta
        ? (e.wheelDelta / 120) * 20
        : (-(e.detail || 0) / 3) * 20;
      const zoom = coordinate.zoom + delta;
      let X = e.offsetX || e.layerX;
      let Y = e.offsetY || e.layerY;
      this.zoomVector(
        {
          x: X,
          y: Y,
        },
        zoom
      );
    }
  }

  zoomVector(position, zoom) {
    if (zoom < minZoom || zoom > maxZoom) {
      return;
    }

    let tempCenter = {};
    mathUtil.clonePoint(tempCenter, coordinate.center);
    let tempZoom = coordinate.zoom;
    coordinate.updateZoom(position, zoom);

    let inScreen = imageService.backgroundImgVertexsInScreenXY();
    if (!inScreen) {
      dataService.setGridForZoom();
      this.renderer.autoRedraw();
    } else {
      mathUtil.clonePoint(coordinate.center, tempCenter);
      coordinate.zoom = tempZoom;
    }
  }

  //测试用
  onKeydown(e) {
    let focusItem = stateService.getFocusItem();
    let dir = "left";
    if (focusItem) {
      console.log("键盘(foucus有效)：" + e.code);
      if (e.code == "Delete") {
        //删除
        const road = dataService.getRoad(focusItem.vectorId);
        roadService.subtraRoadFromIntersect(road.startId, focusItem.vectorId);
        roadService.subtraRoadFromIntersect(road.endId, focusItem.vectorId);
        //dataService.deleteCrossPoint()
        dataService.deleteRoad(focusItem.vectorId);
        this.renderer.autoRedraw();
        this.history.save();
      }
      //加宽
      else if (e.code == "KeyA") {
        let road = dataService.getRoad(focusItem.vectorId);
        if (road) {
          roadService.updateForWidth(road.vectorId, road.leftWidth + 50, dir);
        } else {
          road = dataService.getCurveRoad(focusItem.vectorId);
          curveRoadService.updateForWidth(
            road.vectorId,
            road.leftWidth + 50,
            dir
          );
        }

        this.renderer.autoRedraw();
        this.history.save();
      }
      //变窄
      else if (e.code == "KeyB") {
        let road = dataService.getRoad(focusItem.vectorId);
        if (road) {
          roadService.updateForWidth(road.vectorId, road.leftWidth - 25, dir);
        } else {
          road = dataService.getCurveRoad(focusItem.vectorId);
          curveRoadService.updateForWidth(
            road.vectorId,
            road.leftWidth - 25,
            dir
          );
        }
        this.renderer.autoRedraw();
        this.history.save();
      }
      //添加左车道
      else if (e.code == "KeyQ") {
        let road = dataService.getRoad(focusItem.vectorId);
        if (road) {
          roadService.updateForAddSubtractLanesCount(
            focusItem.vectorId,
            road.leftDrivewayCount + 1,
            "left"
          );
        } else {
          road = dataService.getCurveRoad(focusItem.vectorId);
          curveRoadService.updateForAddSubtractLanesCount(
            road,
            road.leftDrivewayCount + 1, //rightDrivewayCount
            "left"
          );
        }
        this.renderer.autoRedraw();
        this.history.save();
      }
      //减少左车道
      else if (e.code == "KeyW") {
        let road = dataService.getRoad(focusItem.vectorId);
        if (road) {
          roadService.updateForAddSubtractLanesCount(
            focusItem.vectorId,
            road.leftDrivewayCount - 1,
            "left"
          );
        } else {
          road = dataService.getCurveRoad(focusItem.vectorId);
          curveRoadService.updateForAddSubtractLanesCount(
            road,
            road.leftDrivewayCount - 1, //rightDrivewayCount
            "left"
          );
        }
        this.renderer.autoRedraw();
        this.history.save();
      }
      //添加右车道
      else if (e.code == "KeyE") {
        let road = dataService.getRoad(focusItem.vectorId);
        if (road) {
          roadService.updateForAddSubtractLanesCount(
            focusItem.vectorId,
            road.rightDrivewayCount + 1,
            "right"
          );
        } else {
          road = dataService.getCurveRoad(focusItem.vectorId);
          curveRoadService.updateForAddSubtractLanesCount(
            road,
            road.rightDrivewayCount + 1, //rightDrivewayCount
            "right"
          );
        }
        this.renderer.autoRedraw();
        this.history.save();
      }
      //减少右车道
      else if (e.code == "KeyR") {
        let road = dataService.getRoad(focusItem.vectorId);
        if (road) {
          roadService.updateForAddSubtractLanesCount(
            focusItem.vectorId,
            road.rightDrivewayCount - 1,
            "right"
          );
        } else {
          road = dataService.getCurveRoad(focusItem.vectorId);
          curveRoadService.updateForAddSubtractLanesCount(
            road,
            road.rightDrivewayCount - 1, //rightDrivewayCount
            "right"
          );
        }
        this.renderer.autoRedraw();
        this.history.save();
      }
      //弯路添加控制点
      else if (e.code == "KeyT") {
        const curveRoad = dataService.getCurveRoad(focusItem.vectorId);
        let index = mathUtil.getIndexForCurvesPoints(
          this.mousePosition,
          curveRoad.points
        );
        if (index != -1) {
          curveRoadService.addCPoint(curveRoad, this.mousePosition, index);
        } else {
          const dis1 = mathUtil.getDistance(
            curveRoad.points[0],
            this.mousePosition
          );
          const dis2 = mathUtil.getDistance(
            curveRoad.points[curveRoad.points.length - 1],
            this.mousePosition
          );
          if (dis1 > dis2) {
            curveRoadService.addCPoint(
              curveRoad,
              this.mousePosition,
              curveRoad.points.length - 2
            );
          } else {
            curveRoadService.addCPoint(curveRoad, this.mousePosition, 1);
          }
        }
        this.renderer.autoRedraw();
        this.history.save();
      }
      //弯路删除控制点
      else if (e.code == "KeyY") {
        const curvePoint = dataService.getCurveRoadPoint(focusItem.vectorId);
        const curveRoad = dataService.getCurveRoad(curvePoint.parent);
        curveRoadService.subCPoint(curveRoad, curvePoint.getIndex());
        this.renderer.autoRedraw();
        this.history.save();
      }
    } else {
      console.log("键盘(foucus无效)：" + e.code);
    }
  }

  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.Road) {
          stateService.setEventName(LayerEvents.MoveRoad);
        } else if (selectItem.type == VectorType.RoadPoint) {
          stateService.setEventName(LayerEvents.MoveRoadPoint);
        } else if (selectItem.type == VectorType.CurveRoad) {
          stateService.setEventName(LayerEvents.MoveCurveRoad);
        } else if (selectItem.type == VectorType.CurveRoadPoint) {
          stateService.setEventName(LayerEvents.MoveCurveRoadPoint);
        } else if (selectItem.type == VectorType.CrossPoint) {
          stateService.setEventName(LayerEvents.MoveCrossPoint);
        } else if (selectItem.type == VectorType.RoadEdge) {
          stateService.setEventName(LayerEvents.MoveEdge);
        } else if (selectItem.type == VectorType.CurveRoadEdge) {
          stateService.setEventName(LayerEvents.MoveCurveEdge);
        } else if (selectItem.type == VectorType.Point) {
          stateService.setEventName(LayerEvents.MovePoint);
        } else if (selectItem.type == VectorType.Line) {
          stateService.setEventName(LayerEvents.MoveLine);
        } else if (selectItem.type == VectorType.CurvePoint) {
          stateService.setEventName(LayerEvents.MoveCurvePoint);
        } else if (selectItem.type == VectorType.CurveLine) {
          stateService.setEventName(LayerEvents.MoveCurveLine);
        } else if (selectItem.type == VectorType.Circle) {
          stateService.setEventName(LayerEvents.MoveCircle);
        } else if (selectItem.type == VectorType.Text) {
          stateService.setEventName(LayerEvents.MoveText);
        } else if (selectItem.type == VectorType.Magnifier) {
          stateService.setEventName(LayerEvents.MoveMagnifier);
        } else if (selectItem.type == VectorType.SVG) {
          stateService.setEventName(LayerEvents.MoveSVG);
        }
      }
    } else if (eventType == "mouseUp") {
      if (eventName == LayerEvents.AddingRoad) {
        if (Settings.isMobile) {
          stateService.clearEventName();
          this.exit();
        } else {
          stateService.setEventName(LayerEvents.AddRoad);
        }
      } else if (eventName == LayerEvents.AddingLine) {
        if (Settings.isMobile) {
          stateService.clearEventName();
          this.exit();
          uiService.setLineCategory(VectorCategory.Line.NormalLine);
        } else {
          stateService.setEventName(LayerEvents.AddLine);
        }
      } else if (eventName == LayerEvents.AddingCurveRoad) {
        if (Settings.isMobile) {
          stateService.clearEventName();
          this.exit();
        } else {
          stateService.setEventName(LayerEvents.AddCurveRoad);
        }
      } else if (eventName == LayerEvents.AddLine) {
        stateService.setEventName(LayerEvents.AddingLine);
      } else {
        stateService.clearEventName();
      }
    }
  }

  exit() {
    stateService.clear();
    this.uiControl.clearUI();
    this.uiControl.focusVector = null;
    this.uiControl.currentUI = null;
  }

  stopAddVector() {
    let eventName = stateService.getEventName();
    if (
      eventName != LayerEvents.AddingRoad &&
      eventName != LayerEvents.AddingLine
    ) {
      stateService.clearEventName();
    } else if (eventName == LayerEvents.AddingRoad) {
      stateService.setEventName(LayerEvents.AddRoad);
    } else if (eventName == LayerEvents.AddingLine) {
      stateService.setEventName(LayerEvents.AddLine);
    }
    addLine.clear(); //之前会保留category
    this.uiControl.clearUI();
    elementService.hideAll();
    this.renderer.autoRedraw();
  }

  initLocation() {
    Settings.baseLineId = null;
    this.uiControl.graphicStateUI.canAngleLocationMode = false;
    this.uiControl.graphicStateUI.canAllLocationMode = false;
    this.uiControl.graphicStateUI.existsBaseLine = false;
  }

  //更新定位信息
  updateForLocation() {
    if (Settings.baseLineId) {
      this.uiControl.graphicStateUI.canAngleLocationMode = true;
      this.uiControl.graphicStateUI.canAllLocationMode = true;
      this.uiControl.graphicStateUI.existsBaseLine = true;
    } else {
      this.uiControl.graphicStateUI.canAngleLocationMode = false;
      this.uiControl.graphicStateUI.canAllLocationMode = false;
      this.uiControl.graphicStateUI.existsBaseLine = false;
    }
  }
}