public-fuse/src/view/case/draw/board/editCAD/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 { stateService } from "../Service/StateService.js";
import { floorplanService } from "../Service/FloorplanService.js";
import { historyService } from "../Service/HistoryService.js";
import { elementService } from "../Service/ElementService";
import { mathUtil } from "../MathUtil.js";
import { wallService } from "../Service/WallService.js";
import { tagService } from "../Service/TagService.js";
import { tableService } from "../Service/TableService.js";
import Constant from "../Constant";
import { addWall } from "../Controls/AddWall";
import { floorplanData } from "../FloorplanData.js";
import { signService } from "../Service/SignService.js";
import { customImageService } from "../Service/CustomImageService.js";
import mitt from "mitt";
import { history } from "../History/History.js";
import { iconService } from "../Service/IconService.js";
import { bgImageService } from "../Service/BgImageService.js";

export default class UIControl {
  constructor(layer) {
    this.layer = layer;
    this.bus = mitt();
    this.selectUI = null;
    this.appendData = null;

    // this.bus.emit('')
  }

  //点击左侧栏后，更新事件
  updateEventNameForSelectUI() {
    elementService.hideAll();
    //正在添加tag的时候，需要先删除
    const eventName = stateService.getEventName();
    // if (eventName == LayerEvents.AddTag) {
    //     let item = stateService.getDraggingItem()
    //     if (item && item.type == VectorType.Tag) {
    //         floorplanService.deleteTag(item.vectorId)
    //     }
    // }
    // stateService.clearItems()
    if (this.selectUI == UIEvents.Wall) {
      stateService.setEventName(LayerEvents.AddWall);
    } else if (this.selectUI == UIEvents.Table) {
      stateService.setEventName(LayerEvents.AddTable);
    } else if (this.selectUI == UIEvents.Rectangle) {
      stateService.setEventName(LayerEvents.AddRectangle);
    } else if (this.selectUI == UIEvents.Circle) {
      stateService.setEventName(LayerEvents.AddCircle);
    } else if (this.selectUI == UIEvents.Arrow) {
      stateService.setEventName(LayerEvents.AddArrow);
    } else if (this.selectUI == UIEvents.Icon) {
      stateService.setEventName(LayerEvents.AddIcon);
    } else if (this.selectUI == UIEvents.Tag) {
      stateService.setEventName(LayerEvents.AddTag);
    } else if (
      this.selectUI == UIEvents.Cigaret ||
      this.selectUI == UIEvents.FirePoint ||
      this.selectUI == UIEvents.LeftFootPrint ||
      this.selectUI == UIEvents.RightFootPrint ||
      this.selectUI == UIEvents.LeftShoePrint ||
      this.selectUI == UIEvents.RightShoePrint ||
      this.selectUI == UIEvents.FingerPrint ||
      this.selectUI == UIEvents.DeadBody ||
      this.selectUI == UIEvents.BloodStain
    ) {
      stateService.setEventName(LayerEvents.AddSign);
    }
  }

  /**
   * @param {*} type 部件类型
   * @param {*} name 属性名称
   * @param {*} value 属性值
   */
  async setAttributes(type, name, value) {
    let item = stateService.getFocusItem();
    let flag = true;
    switch (name) {
      case "delete":
        this.deleteItem();
        break;
      case 'update':
        if(type == VectorType.Tag){
            const tag = floorplanService.getTag(item.vectorId)
            if(value.hasOwnProperty('version')){
              value.color&&tag.setColor(value.color)
              value.fontSize&&tag.setFontSize(value.fontSize)
              value.text&&tag.setValue(value.text)
            }
            else{
                tag.setValue(value)
            }
        }
        else if(type == VectorType.Arrow){
            const arrow = floorplanService.getArrow(item.vectorId)
            if(value.hasOwnProperty('version')){
                arrow.setColor(value.color)
            }
        }
        else if(type == VectorType.Wall){
            const wall = floorplanService.getWall(item.vectorId)
            if(value.hasOwnProperty('version')){
                wall.setColor(value.color)
            }
        }
        else if(type == VectorType.Rectangle){
            const rectangle = floorplanService.getRectangle(item.vectorId)
            if(value.hasOwnProperty('version')){
                rectangle.setColor(value.color)
            }
        }
        else if(type == VectorType.Circle){
            const circle = floorplanService.getCircle(item.vectorId)
            if(value.hasOwnProperty('version')){
                circle.setColor(value.color)
            }
        }
        else if(type == VectorType.Table){
            const table = floorplanService.getTable(item.vectorId)
            if(value.hasOwnProperty('version')){
                table.setValue(value.content)
            }
            else{
                table.setValue(value)
            }
        }
        else if(type == VectorType.Title){
            if(value.hasOwnProperty('version')){
                floorplanService.updateTitle(value.text);
            }
            else{
                floorplanService.updateTitle(value);
            }
        }
        else if(type == VectorType.Compass){
          if(value.hasOwnProperty('version')){
            floorplanService.updateCompass(value.rotate)
            flag = value.save
          }
          else{
            floorplanService.updateCompass(value)
          }
        }
        else if(type == VectorType.CustomImage){
          const customImage = floorplanService.getCustomImage(item.vectorId)
          if(value.hasOwnProperty('rotate')){
            customImage.setAngle(value.rotate)
            flag = value.save
          }
          else if(value.hasOwnProperty('scale')){
            customImage.setScale(value.scale)
            flag = value.save
          }
          else if(value.hasOwnProperty('ratio')){
            customImage.setRatio(floor.customImages[key].ratio)
          }
        }
        else if(type == VectorType.BgImage){
          const bgImage = floorplanService.getBgImage()
          if(value.hasOwnProperty('scale')){
            bgImage.setScale(value.scale)
            flag = value.save
          }
        }
        else if(signService.isSign(type)){
          const sign = floorplanService.getSign(item.vectorId)
          if(value.hasOwnProperty('rotate')){
            sign.setAngle(value.rotate)
            flag = value.save
          }
          else if(value.hasOwnProperty('scale')){
            sign.setScale(value.scale)
            flag = value.save
          }
        }
        break;
      case "upload":
        if(type == VectorType.CustomImage){
          const customImage = await customImageService.createCustomImage(value.url,{
            x:0,
            y:0
          })

          //stateService.setEventName(LayerEvents.MoveCustomImage);
          let focusItem = {
            vectorId: customImage.vectorId,
            type: VectorType.CustomImage,
          };
          stateService.setFocusItem(focusItem);
          this.showAttributes(focusItem);
        }  
        else if(type == VectorType.BgImage){
          const bgImage = await bgImageService.createBgImage(value.url)
          //stateService.setEventName(LayerEvents.MoveBgImage);
          let focusItem = {
            vectorId: bgImage.vectorId,
            type: VectorType.BgImage,
          };
          stateService.setFocusItem(focusItem);
          this.showAttributes(focusItem);
        }
        break;
    }
    if(flag){
      history.save();
    }
    //stateService.clearFocusItem();
    this.layer.renderer.autoRedraw();
  }

  showAttributes(item) {
    let type = item.type;
    let value = null;

    if(signService.isSign(type)){
      const sign = floorplanService.getSign(item.vectorId);
      if (!sign) {
        return;
      }
      value = {
          version:'2.0',
          type: type,
          rotate:sign.angle,
          scale:sign.scale
      };
    }
    else{
      switch (item.type) {
        case VectorType.Tag:
          const tag = floorplanService.getTag(item.vectorId);
          if (!tag) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              text:tag.value,
              color: tag.color,
              fontSize: tag.fontSize,
          };
          break;
        case VectorType.Table:
          const table = floorplanService.getTable(item.vectorId);
          if (!table) {
            return;
          }
          const cellIds = table.cells;
          let content = [];
          for (let i = 0; i < cellIds.length; ++i) {
            for (let j = 0; j < cellIds[i].length; ++j) {
              const cell = floorplanService.getCell(cellIds[i][j]);
              content.push({
                width: cell.width,
                height: cell.height,
                value: cell.value,
                colIndex: cell.colIndex,
                rowIndex: cell.rowIndex,
              });
            }
          }
          value = {
              version:'2.0',
              type: type,
              content: content,
          };
          break;
        case VectorType.Title:
          const title = floorplanService.getTitle();
          if (!title) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              text: title.value,
          };
          break;
        case VectorType.Compass:
          const compass = floorplanService.getCompass();
          if (!compass) {
            return;
          }
          value = compass.angle;
          break;
        case VectorType.CustomImage:
          const customImage = floorplanService.getCustomImage(item.vectorId);
          if (!customImage) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              url: customImage.url,
              rotate:customImage.angle,
              ratio:customImage.ratio,
              scale:customImage.scale
          };
          break;
        case VectorType.BgImage:
          const bgImage = floorplanService.getBgImage(item.vectorId);
          if (!bgImage) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              url: bgImage.url,
              scale:bgImage.scale
          };
          break;
        case VectorType.Circle:
          const circle = floorplanService.getCircle(item.vectorId);
          if (!circle) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              color: circle.color,
          };
          break;
        case VectorType.Rectangle:
          const rectangle = floorplanService.getRectangle(item.vectorId);
          if (!rectangle) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              color: rectangle.color,
          };
          break;
        case VectorType.Wall:
          const wall = floorplanService.getWall(item.vectorId);
          if (!wall) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              color: wall.color,
          };
          break;
        case VectorType.Arrow:
          const arrow = floorplanService.getArrow(item.vectorId);
          if (!arrow) {
            return;
          }
          value = {
              version:'2.0',
              type: type,
              color: arrow.color,
          };
          break;
      }
    }
    
    this.bus.emit("showAttribute", {
      type: type,
      value: value,
    });
  }

  clearUI() {
    this.selectUI = null;
    this.bus.emit("hideAttribute");
    this.bus.emit("hideUI");
  }

  deleteItem() {
    let item = stateService.getFocusItem();
    if (item) {
      if (item.type == VectorType.Wall) {
        floorplanService.deleteWall(item.vectorId);
      } else if (item.type == VectorType.Rectangle) {
        floorplanService.deleteRectangle(item.vectorId);
      } else if (item.type == VectorType.Circle) {
        floorplanService.deleteCircle(item.vectorId);
      } else if (item.type == VectorType.Arrow) {
        floorplanService.deleteArrow(item.vectorId);
      } else if (item.type == VectorType.Icon) {
        iconService.deleteIcon(item.vectorId);
      } else if (item.type == VectorType.Tag) {
        floorplanService.deleteTag(item.vectorId);
      } else if (item.type == VectorType.Table) {
        floorplanService.deleteTable(item.vectorId);
      } else if (signService.isSign(item.type)) {
        floorplanService.deleteSign(item.vectorId);
      } else if (item.type == VectorType.WallCorner) {
        wallService.deleteWallCorner(item.vectorId);
      } else if (item.type == VectorType.CustomImage) {
        floorplanService.deleteCustomImage(item.vectorId);
      } else if (item.type == VectorType.BgImage) {
        floorplanService.deleteBgImage();
      }
      history.save();
      this.layer.renderer.autoRedraw();
    }
  }

  getSignTypeForUI() {
    if (this.selectUI == UIEvents.Cigaret) {
      return VectorType.Cigaret;
    } else if (this.selectUI == UIEvents.FirePoint) {
      return VectorType.FirePoint;
    } else if (this.selectUI == UIEvents.LeftFootPrint) {
      return VectorType.LeftFootPrint;
    } else if (this.selectUI == UIEvents.RightFootPrint) {
      return VectorType.RightFootPrint;
    } else if (this.selectUI == UIEvents.LeftShoePrint) {
      return VectorType.LeftShoePrint;
    } else if (this.selectUI == UIEvents.RightShoePrint) {
      return VectorType.RightShoePrint;
    } else if (this.selectUI == UIEvents.FingerPrint) {
      return VectorType.FingerPrint;
    } else if (this.selectUI == UIEvents.DeadBody) {
      return VectorType.DeadBody;
    } else if (this.selectUI == UIEvents.BloodStain) {
      return VectorType.BloodStain;
    }
  }

  exportJSON() {
    const json = {
      version: floorplanData.version,
      floors: floorplanData.floors,
      currentId: floorplanService.getCurrentId(),
    };
    return json;
  }

  exportImg(canvas,filename, callback){
    coordinate.setRatio(3)
    canvas.width = canvas.width * coordinate.ratio
    canvas.height = canvas.height * coordinate.ratio
    this.layer.renderer.autoRedraw()
    setTimeout(() => {
      let blobImg = this.downloadCadImg(canvas, filename)
      // 完成callback传出blob  
      callback(blobImg)
      
      canvas.width = canvas.width / coordinate.ratio
      canvas.height = canvas.height / coordinate.ratio
      coordinate.setRatio(1)
      this.layer.renderer.autoRedraw()
    },100)

  }

  downloadCadImg(canvas, filename) {
    
    // 图片导出为 png 格式
    var type = "png";
    var imgData = canvas.toDataURL(type, 1);

    //let blobImg = this.base64ToBlob(imgData);
    

    // 加工image data，替换mime type
    let blobImg  = imgData.replace(this._fixType(type), 'image/octet-stream')
    return blobImg;
    // 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;
  }

  base64ToBlob(base64) {
    let arr = base64.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }

  //截图
  menu_screenShot(fileName) {
    // this.menu_flex();
    // this.layer.stopAddVector()
    // setTimeout(function(){
    //     this.downloadCadImg(this.layer.canvas,fileName)
    // }.bind(this),100)

    this.layer.stopAddVector();
    return this.downloadCadImg(this.layer.canvas, fileName);
  }

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

  initTopTable(value) {
    let center = {
      x: 770,
      y: 200,
    };
    center = coordinate.getXYFromScreen(center);
    let table = tableService.createTable(center);
    table.setValue(value);
    this.layer.renderer.autoRedraw();
  }

  initDownTable(value) {
    let center = {
      x: 770,
      y: 520,
    };
    center = coordinate.getXYFromScreen(center);
    let table = tableService.createTable(center);
    table.setValue(value);
    this.layer.renderer.autoRedraw();
  }
  /******************************************************************************************************************************************************************/
}