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 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 { 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 { ellipticService } from "../Service/EllipticService.js";
import { curveRoadPointService } from "../Service/CurveRoadPointService.js";
import { roadService } from "../Service/RoadService.js";
import { curveRoadService } from "../Service/CurveRoadService.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.currentUI = null;
    this.selectUI = 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.Elliptic) {
          stateService.setEventName(LayerEvents.AddElliptic);
        } 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);
        }
      }
    }
  }

  updateVectorForSelectUI(selectUI) {
    const focusItem = stateService.getFocusItem();
    if (uiService.isBelongRoadEdgeStyle(selectUI)) {
      let roadEdge = dataService.getRoadEdge(focusItem.vectorId);
      if (roadEdge) {
        roadEdge.setStyle(selectUI);
      } else {
        roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId);
        roadEdge.setStyle(selectUI);
      }
    } 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) {
    }
  }

  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:
        dataService.deleteLine(vectorId);
        if (vectorId == Settings.baseLineId) {
          this.layer.initLocation();
          Settings.baseLineId = null;
        }
        break;
      case VectorType.CurveLine:
        break;
      case VectorType.Circle:
        dataService.deleteCircle(vectorId);
        break;
      case VectorType.Elliptic:
        dataService.deleteElliptic(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.CurveRoad:
        dataService.deleteCurveRoad(vectorId);
        break;
    }
    this.layer.exit();
    uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
    uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint);
    this.focusVector = null;
  }

  //复制按钮
  async copyVector(vectorId, geoType) {
    let item;
    switch (geoType) {
      case VectorType.Line:
        lineService.copy(vectorId);
        break;
      case VectorType.CurveLine:
        break;
      case VectorType.Circle:
        circleService.copy(vectorId);
        break;
      case VectorType.Elliptic:
        ellipticService.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;
    }
  }

  //截图
  async screenShot() {
    let canvas = this.layer.canvas;
    this.menu_view_reset();
    //隐藏grid
    dataService.setGridDisplay(false);
    this.layer.renderer.autoRedraw();
    // this.downloadCadImg(canvas, "test.jpg");
    const blob = await this.getCadBlob(canvas);
    //显示grid
    dataService.setGridDisplay(true);
    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() {
    dataService.clear();
    Settings.selectLocationMode = null;
    Settings.baseLineId = null;
    Settings.selectBasePointId = null;
    elementService.hideAll();
    this.layer.exit();
    this.layer.initLocation();
    this.layer.history.save();
    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();
    uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
    uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint);
    this.layer.history.save();
    this.layer.renderer.autoRedraw();
  }
  confirmCancel() {
    console.log("取消");
    this.graphicStateUI.continuedMode = false;
    addPoint.deleteTestPoints();
    this.layer.exit();
    uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
    uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint);
    this.layer.history.save();
    this.layer.renderer.autoRedraw();
  }

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