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 VectorType from "../enum/VectorType.js";
import GeoActions from "../enum/GeoActions.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";

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.Text) {
          stateService.setEventName(LayerEvents.AddText);
        } else if (selectUI == UIEvents.Magnifier) {
          stateService.setEventName(LayerEvents.AddMagnifier);
        } else if (selectUI == UIEvents.SVG) {
          stateService.setEventName(LayerEvents.AddSVG);
        } else if (selectUI == UIEvents.Img) {
          stateService.setEventName(LayerEvents.Img);
        }
      }
    }
  }

  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.Text:
        dataService.deleteText(vectorId);
        break;
      case VectorType.Magnifier:
        dataService.deleteMagnifier(vectorId);
        break;
    }
  }

  //复制按钮
  async copyVector(vectorId, geoType) {
    switch (geoType) {
      case VectorType.Line:
        lineService.copy(vectorId);
        break;
      case VectorType.CurveLine:
        break;
      case VectorType.Circle:
        circleService.copy(vectorId);
        break;
      case VectorType.Text:
        textService.copy(vectorId);
        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
    debugger;
    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.locationMode = 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;
  }
  confirmCancel() {
    console.log("取消");
    this.graphicStateUI.continuedMode = false;
  }

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