traffic-laser/src/graphic/Controls/UIControl.js

import { coordinate } from "../Coordinate.js";
import LayerEvents from "../enum/LayerEvents.js";
import UIEvents from "../enum/UIEvents.js";
import RoadTemplate from "../enum/RoadTemplate.js";
import RoadStructure from "../enum/RoadStructure.js";
import VectorType from "../enum/VectorType.js";
import VectorStyle from "../enum/VectorStyle.js";
import VectorWeight from "../enum/VectorWeight.js";
import GeoActions from "../enum/GeoActions.js";
import VectorEvents from "../enum/VectorEvents.js";
import SVGType from "../enum/SVGType.js";
import { stateService } from "../Service/StateService.js";
import { uiService } from "../Service/UIService.js";
import { dataService } from "../Service/DataService.js";
import { historyService } from "../Service/HistoryService.js";
import { elementService } from "../Service/ElementService";
import { lineService } from "../Service/LineService.js";
import { circleService } from "../Service/CircleService.js";
import { textService } from "../Service/TextService.js";
import { svgService } from "../Service/SVGService.js";
import { magnifierService } from "../Service/MagnifierService.js";
import { mathUtil } from "../Util/MathUtil";
import Constant from "../Constant";
// import { roomsUtil } from "../Room/RoomsUtil.js";
import { addRoad } from "../Controls/AddRoad";
import { addLine } from "./AddLine.js";
import VectorCategory from "../enum/VectorCategory.js";
// import { floorplanData } from "../VectorData.js";
import Message from "@/components/base/components/message/message.vue";
import { pointService } from "../Service/PointService.js";
import Settings from "../Settings.js";
import { addPoint } from "./AddPoint.js";
import { locationModeControl } from "./LocationModeControl.js";
import { curveRoadPointService } from "../Service/CurveRoadPointService.js";
import { roadService } from "../Service/RoadService.js";
import { curveRoadService } from "../Service/CurveRoadService.js";
import Msg from "../enum/Msg.js";

export default class UIControl {
  constructor(layer, newsletter, graphicStateUI) {
    this._prompts = [];
    this.layer = layer;
    this.newsletter = newsletter;
    this.graphicStateUI = graphicStateUI;
  }

  get selectUI() {
    return this.newsletter.selectUI;
  }

  set selectUI(selectUI) {
    this.updateEventNameForSelectUI(selectUI);
    this.newsletter.selectUI = selectUI;
  }

  get focusVector() {
    return this.newsletter.focusVector;
  }
  set focusVector(focusVector) {
    this.newsletter.focusVector = focusVector;
  }

  /**
   * 获取选中要操作的UI
   */
  get currentUI() {}

  /**
   * 设置选中要操作的UI
   */
  set currentUI(value) {
    this.selectUI = value;
  }

  clearUI() {
    this.clearCurrentUI();
    this.clearSelectUI();
  }

  clearFocusVector() {
    this.focusVector = null;
  }

  clearSelectUI() {
    this.selectUI = null;
  }

  clearCurrentUI() {
    this.currentUI = null;
  }

  //点击左侧栏后，更新事件
  updateEventNameForSelectUI(selectUI) {
    console.log(this.selectUI, selectUI);
    if (selectUI != null) {
      if (this.selectUI == selectUI) {
        return;
      } else if (this.selectUI != selectUI) {
        if (this.selectUI != null) {
          //先取消当前事件和进程
          this.layer.exit();
        }

        //执行新的事件
        if (uiService.isBelongRoad(selectUI) || selectUI == "road") {
          stateService.setEventName(LayerEvents.AddRoad);
        } else if (selectUI == UIEvents.CurveRoad) {
          stateService.setEventName(LayerEvents.AddCurveRoad);
        } else if (uiService.isBelongLine(selectUI)) {
          stateService.setEventName(LayerEvents.AddLine);
        }
        //  else if (selectUI == UIEvents.CurveLine) {
        //   stateService.setEventName(LayerEvents.AddCurveLine);
        // }
        else if (uiService.isBelongPoint(selectUI)) {
          stateService.setEventName(LayerEvents.AddPoint);
        } else if (selectUI == UIEvents.Circle) {
          stateService.setEventName(LayerEvents.AddCircle);
        } else if (selectUI == UIEvents.Text) {
          stateService.setEventName(LayerEvents.AddText);
        } else if (selectUI == UIEvents.Magnifier) {
          stateService.setEventName(LayerEvents.AddMagnifier);
        } else if (SVGType[selectUI]) {
          uiService.setSelectSVGType(selectUI);
          stateService.setEventName(LayerEvents.AddSVG);
        } else if (selectUI == UIEvents.Img) {
          stateService.setEventName(LayerEvents.Img);
        } else if (uiService.isBelongRoadTemplate(selectUI)) {
          stateService.setEventName(LayerEvents.AddRoadTemplate);
        } else if (uiService.isBelongRoadStructure(selectUI)) {
          stateService.setEventName(LayerEvents.AddRoadStructure);
        } else if (selectUI == Constant.angleLocationMode) {
          uiService.setSelectLocationMode(Constant.angleLocationMode);
          let msg = locationModeControl.setAngle();
          if (msg != Msg.OK) {
            this.prompt({ msg: msg, time: 1000 });
          } else {
            this.layer.history.save();
            this.layer.renderer.autoRedraw();
          }
        }
      }
    }
  }

  updateVectorForSelectUI(selectUI) {
    console.log("selectUI", selectUI);
    const focusItem = stateService.getFocusItem();

    // if (selectUI == VectorStyle.Bold || selectUI == VectorStyle.Thinning) {
    //   if (focusItem.type == VectorType.Line) {
    //     let Line = dataService.getLine(focusItem.vectorId);
    //     Line.setStyle(selectUI);
    //   } else if (focusItem.type == VectorType.RoadEdge) {
    //     let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
    //     if (roadEdge) {
    //       roadEdge.setStyle(selectUI);
    //     } else {
    //       roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
    //       roadEdge.setStyle(selectUI);
    //     }
    //   }
    //   this.layer.history.save();
    //   this.layer.renderer.autoRedraw();
    // }
    // else
    if (uiService.isBelongRoadEdgeStyle(selectUI)) {
      let key = null;
      if (VectorStyle[selectUI]) {
        key = "setStyle";
      } else if (VectorWeight[selectUI]) {
        key = "setWeight";
      }

      if (focusItem.type == VectorType.Line) {
        let Line = dataService.getLine(focusItem.vectorId);
        // Line.setStyle(selectUI);
        Line[key](selectUI);
      } else if (focusItem.type == VectorType.CurveLine) {
        let Line = dataService.getCurveLine(focusItem.vectorId);
        // Line.setStyle(selectUI);
        Line[key](selectUI);
      } else {
        let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
        if (roadEdge) {
          // roadEdge.setStyle(selectUI);
          roadEdge[key](selectUI);
          let crossPoint = dataService.getCrossPoint4(focusItem.vectorId);
          if (crossPoint) {
            crossPoint[key](selectUI);
          }
        } else {
          roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
          // roadEdge.setStyle(selectUI);
          roadEdge[key](selectUI);
        }
      }

      this.layer.history.save();
      this.layer.renderer.autoRedraw();
    } else if (selectUI == VectorEvents.AddLane) {
      if (focusItem && focusItem.vectorId) {
        stateService.setEventName(VectorEvents.AddLane);
      }
      // if (focusItem && focusItem.dir && focusItem.vectorId) {
      //   let road = dataService.getRoad(focusItem.vectorId);
      //   if (road) {
      //     if (focusItem.dir == "left") {
      //       roadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.leftDrivewayCount + 1,
      //         focusItem.dir
      //       );
      //     } else {
      //       roadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.rightDrivewayCount + 1,
      //         focusItem.dir
      //       );
      //     }
      //   } else {
      //     road = dataService.getCurveRoad(focusItem.vectorId);
      //     if (focusItem.dir == "left") {
      //       curveRoadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.leftDrivewayCount + 1,
      //         focusItem.dir
      //       );
      //     } else {
      //       curveRoadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.rightDrivewayCount + 1,
      //         focusItem.dir
      //       );
      //     }
      //   }
      // }
    } else if (selectUI == VectorEvents.DelLane) {
      if (focusItem && focusItem.vectorId) {
        stateService.setEventName(VectorEvents.DelLane);
      }
      // if (focusItem && focusItem.dir && focusItem.vectorId) {
      //   let road = dataService.getRoad(focusItem.vectorId);
      //   if (road) {
      //     if (focusItem.dir == "left") {
      //       roadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.leftDrivewayCount - 1,
      //         focusItem.dir
      //       );
      //     } else {
      //       roadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.rightDrivewayCount - 1,
      //         focusItem.dir
      //       );
      //     }
      //   } else {
      //     road = dataService.getCurveRoad(focusItem.vectorId);
      //     if (focusItem.dir == "left") {
      //       curveRoadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.leftDrivewayCount - 1,
      //         focusItem.dir
      //       );
      //     } else {
      //       curveRoadService.updateForAddSubtractLanesCount(
      //         road.vectorId,
      //         road.rightDrivewayCount - 1,
      //         focusItem.dir
      //       );
      //     }
      //   }
      // }
    } else if (selectUI == VectorEvents.AddCrossPoint) {
      if (focusItem && focusItem.vectorId) {
        stateService.setEventName(VectorEvents.AddCrossPoint);
      }
      // if (focusItem && focusItem.dir && focusItem.vectorId) {
      //   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);
      //     }
      //   }
      // }
    } else if (selectUI == VectorEvents.MinusCrossPoint) {
      if (focusItem && focusItem.vectorId) {
        stateService.setEventName(VectorEvents.MinusCrossPoint);
      }
      // if (focusItem && focusItem.dir && focusItem.vectorId) {
      //   const curvePoint = dataService.getCurveRoadPoint(focusItem.vectorId);
      //   const curveRoad = dataService.getCurveRoad(curvePoint.parent);
      //   curveRoadService.subCPoint(curveRoad, curvePoint.getIndex());
      // }
    } else if (selectUI == VectorEvents.AddBranchRoad) {
    } else if (selectUI == VectorEvents.AddNarrowRoad) {
    } else if (selectUI == VectorEvents.UnLock) {
      let road = dataService.getRoad(focusItem.vectorId);
      if (road) {
        roadService.convertToLines(focusItem.vectorId);
      } else {
        road = dataService.getCurveRoad(focusItem.vectorId);
        if (road) {
          curveRoadService.convertToCurveLines(focusItem.vectorId);
        }
      }
      if (road) {
        this.deleteVector(focusItem.vectorId, focusItem.type);
        this.layer.history.save();
        this.layer.renderer.autoRedraw();
      }
    }
  }

  async handleGeo(action) {
    let needAutoRedraw = false;
    const item = stateService.getFocusItem();
    if (item && item.vectorId) {
      switch (action) {
        case GeoActions.CopyAction:
          await this.copyVector(item.vectorId, item.type);
          needAutoRedraw = true;
          break;
        case GeoActions.DeleteAction:
          this.deleteVector(item.vectorId, item.type);
          needAutoRedraw = true;
          break;
      }
    }

    if (needAutoRedraw) {
      this.layer.history.save();
      this.layer.renderer.autoRedraw();
    }
  }

  //删除按钮
  deleteVector(vectorId, geoType) {
    switch (geoType) {
      case VectorType.Point:
        pointService.deletePoint(vectorId);
        break;
      case VectorType.Line:
        let line = dataService.getLine(vectorId);

        dataService.deleteLine(vectorId);
        if (vectorId == Settings.baseLineId) {
          this.layer.initLocation();
        } else if (
          line.getCategory() == VectorCategory.Line.ExtendedPositionLine ||
          line.getCategory() == VectorCategory.Line.PositionLine ||
          line.getCategory() == VectorCategory.Line.GuidePositionLine
        ) {
          let startPoint = dataService.getPoint(line.startId);
          let endPoint = dataService.getPoint(line.endId);
          if (startPoint.getCategory() != VectorCategory.Point.BasePoint) {
            pointService.deletePoint(line.startId);
          }
          if (endPoint.getCategory() != VectorCategory.Point.BasePoint) {
            pointService.deletePoint(line.endId);
          }
        }
        break;
      case VectorType.CurveLine:
        lineService.deleteCurveLine(vectorId);
        break;
      case VectorType.CurvePoint:
        const curvePoint = dataService.getCurvePoint(vectorId);
        lineService.deleteCrossPointForCurveLine(
          vectorId,
          curvePoint.getParent()
        );
        break;
      case VectorType.Circle:
        dataService.deleteCircle(vectorId);
        break;
      case VectorType.Text:
        dataService.deleteText(vectorId);
        break;
      case VectorType.Magnifier:
        dataService.deleteMagnifier(vectorId);
        break;
      case VectorType.Road:
        roadService.deleteRoadForLinked(vectorId);
        break;
      case VectorType.RoadPoint:
        const roadPoint = dataService.getRoadPoint(vectorId);
        const roadPointParent = roadPoint.getParent();
        for (let key in roadPointParent) {
          roadService.deleteRoadForLinked(key);
        }

        break;
      case VectorType.CurveRoadPoint:
        curveRoadPointService.deleteCurveRoadPoint(vectorId);
        break;
      case VectorType.CurveRoad:
        dataService.deleteCurveRoad(vectorId);
        break;
      case VectorType.SVG:
        dataService.deleteSVG(vectorId);
        break;
    }
    this.layer.exit();
    uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
    uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint);
    this.clearFocusVector();
  }

  //复制按钮
  async copyVector(vectorId, geoType) {
    let item;
    switch (geoType) {
      case VectorType.Line:
        lineService.copy(vectorId);
        break;
      case VectorType.CurveLine:
        lineService.copyCurveLine(vectorId);
        break;
      case VectorType.Circle:
        circleService.copy(vectorId);
        break;
      case VectorType.Text:
        textService.copy(vectorId);
        break;
      case VectorType.Road:
        const roadId = roadService.copyRoad(vectorId);
        item = stateService.getFocusItem();
        item.vectorId = roadId;
        break;
      case VectorType.CurveRoad:
        const curveRoadId = curveRoadService.copyCurveRoad(vectorId);
        item = stateService.getFocusItem();
        item.vectorId = curveRoadId;
        break;
      case VectorType.Magnifier:
        await magnifierService.copy(vectorId);
        break;
      case VectorType.SVG:
        svgService.copy(vectorId);
        break;
    }
  }

  //截图
  async screenShot() {
    let canvas = this.layer.canvas;
    this.menu_view_reset();
    //隐藏grid
    Settings.screenMode = true;
    dataService.setGridDisplay(false);
    this.layer.renderer.autoRedraw();
    // this.downloadCadImg(canvas, "test.jpg");
    const blob = await this.getCadBlob(canvas);
    //显示grid
    dataService.setGridDisplay(true);
    Settings.screenMode = false;
    this.layer.renderer.autoRedraw();

    return blob;
  }

  getCadBlob(canvas) {
    var type = "jpg";
    return new Promise((resolve) => canvas.toBlob(resolve, `${type}/image`));
  }

  // downloadCadImg(canvas, filename) {
  //   // 图片导出为 jpg 格式
  //   var type = "jpg";
  //   var imgData = canvas.toDataURL(type, 3);
  //   canvas.toBlob(`${type}/image`);

  //   // 加工image data，替换mime type
  //   imgData = imgData.replace(this._fixType(type), "image/octet-stream");
  //   // 下载后的图片名
  //   //var filename = 'cad_' + new Date().getTime() + '.' + type
  //   // download
  //   this.saveFile(imgData, filename);
  // }

  saveFile(data, filename) {
    var save_link = document.createElementNS(
      "http://www.w3.org/1999/xhtml",
      "a"
    );
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent("MouseEvents");
    event.initMouseEvent(
      "click",
      true,
      false,
      window,
      0,
      0,
      0,
      0,
      0,
      false,
      false,
      false,
      false,
      0,
      null
    );
    save_link.dispatchEvent(event);
  }

  _fixType(type) {
    type = type.toLowerCase().replace(/jpg/i, "jpeg");
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return "image/" + r;
  }
  /****************************************************************************针对菜单*******************************************************************************/

  //撤销
  menu_revoke() {
    this.layer.history.goPreState();

    const historyState = historyService.getHistoryState();
    this.graphicStateUI.canRevoke = historyState.pre;
    this.graphicStateUI.canRecovery = true;

    this.layer.stopAddVector();
    this.layer.renderer.autoRedraw();
  }

  //恢复
  menu_recovery() {
    this.layer.history.goNextState();

    const historyState = historyService.getHistoryState();
    this.graphicStateUI.canRecovery = historyState.next;
    this.graphicStateUI.canRevoke = true;

    this.layer.stopAddVector();
    this.layer.renderer.autoRedraw();
  }

  menu_view_reset() {
    coordinate.reSet(this.layer.canvas);
    this.layer.renderer.autoRedraw();
  }

  // value 为true则开 false则关
  menu_backgroundImg(value) {
    console.log(value);
    //
    const backgroundImg = dataService.getBackgroundImg();
    backgroundImg.setDisplay(value);

    this.graphicStateUI.showBackImage = value;
    this.layer.renderer.autoRedraw();
  }

  menu_clear(isBack) {
    dataService.clear();
    Settings.selectLocationMode = null;
    Settings.baseLineId = null;
    uiService.setSelectBasePointId(null);
    elementService.hideAll();
    this.layer.exit();
    this.layer.initLocation();
    if (!isBack) {
      this.layer.history.save();
    } else {
      historyService.clearHistoryRecord();
      this.layer.uiControl.graphicStateUI.canRevoke = false;
      this.layer.uiControl.graphicStateUI.canRecovery = false;
    }
    this.layer.renderer.autoRedraw();
  }

  /******************************************************************************************************************************************************************/

  prompt(msg) {
    this._prompts.push(
      Message.success(typeof msg === "string" ? { msg } : msg)
    );
  }

  // 进入持续添加出确认与取消框
  showConfirm() {
    this.graphicStateUI.continuedMode = true;
  }
  confirmEntry() {
    console.log("确认");
    this.graphicStateUI.continuedMode = false;
    this.layer.exit();
    this.layer.history.save();
    this.layer.renderer.autoRedraw();
    uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint);
    uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
  }
  confirmCancel() {
    console.log("取消");
    this.graphicStateUI.continuedMode = false;
    this.layer.exit();
    this.layer.history.save();
    this.layer.history.handleUndo();
    this.layer.renderer.autoRedraw();
    uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint);
    uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
  }

  // 设置默认设置
  setDefaultSetting(setting) {
    console.log("获得设置", setting);

    uiService.setRoadMidDivideWidth(
      // (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio
      setting.roadQuarantineWidth / coordinate.res
    );
    uiService.setCurveRoadMidDivideWidth(
      // (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio
      setting.roadQuarantineWidth / coordinate.res
    );
    uiService.setSingleLaneWidth(
      // (setting.singleRoadWidth / coordinate.res) * coordinate.ratio
      setting.singleRoadWidth / coordinate.res
    );
    // uiService.setLineWidth(setting.lineWidth / 1000 / coordinate.res);
    uiService.setLineWidth(setting.lineWidth);
    this.layer.renderer.autoRedraw();
  }

  // 获取默认设置
  getDefaultSetting() {
    const singleLaneWidth = uiService.getSingleLaneWidth();
    const roadMidDivideWidth = uiService.getRoadMidDivideWidth();
    const lineWidth = uiService.getLineWidth();
    return {
      singleRoadWidth: singleLaneWidth * coordinate.res,
      roadQuarantineWidth: roadMidDivideWidth * coordinate.res,
      // lineWidth: lineWidth * coordinate.res * 1000,
      lineWidth: lineWidth,
    };
  }

  hidePrompt() {
    for (let prompt of this._prompts) {
      prompt();
    }
  }
}