gs-bim-air 3.0.3 → 3.0.5

package/src/viewerWrapper/commands/showEditStyle/commandShowEditStyle.ts

@@ -1,358 +0,0 @@
-import { CameraMouse } from "gs-bim-air-core/gsDevFx/operators/cameraMouse";
-import { CommandComponent } from "../commandComponent";
-
-import { ComponentPreSelector } from "gs-bim-air-core/gsDevFx/operators/componentPreSelector";
-import { TreeNodeObject } from "gs-bim-air-core/gsDevFx/objects/treeNodeObject";
-import longanModelApi from "../../../api/longanModelApi";
-import { ComponentSelector } from "gs-bim-air-core/gsDevFx/operators/componentSelector";
-import { Message } from "element-ui";
-import * as Commands from "gs-bim-air-core/commands";
-
-export enum EditStyleType {
-  Color,
-  Image,
-  unsetStyle,
-}
-export default class CommandShowEditStyle extends Commands.CommandShowEditStyle {
-  // edtiType: EditStyleType = EditStyleType.Color;
-  // typeName = "CommandShowEditStyle";
-
-  // componentPreSelector: ComponentPreSelector = null;
-
-  // private _styleColor: [number, number, number, number];
-
-  // public fileName: string = "";
-  // public imgBlob: ArrayBuffer = null;
-  // public imgWidth: number = 0;
-  // public imgHeight: number = 0;
-  // public imgType = "jpg";
-
-  // public uvScale: [number, number] = [1, 1];
-
-  // _updateType = null;
-
-  component: CommandComponent;
-
-  constructor() {
-    super();
-  }
-
-  // get styleColor() {
-  //   return this._styleColor;
-  // }
-
-  // set styleColor(color) {
-  //   this._styleColor = color;
-  // }
-
-  begin() {
-    this.component = new CommandComponent(this, () => import("./showEditStyle.vue"));
-    this.component.show();
-
-    // // 接口加前缀为viewer.options.modelService
-    // longanModelApi.viewer = this.viewer;
-
-    // // this._updateType = this.viewer.updateType;
-    // // this.viewer.updateType = Longan.UpdateType.Synchronization;
-
-    // // this.viewer.selectionManager.clearAllSelectionAndHighlight();
-    // this.viewer.updateDisplay();
-
-    // this.component.show();
-    // this.viewer.operatorManager.clear();
-
-    // this.viewer.operatorManager.add(new CameraMouse());
-
-    // this.componentPreSelector = new ComponentPreSelector();
-    // this.viewer.operatorManager.add(this.componentPreSelector);
-
-    // let componentSelector = this.viewer.operatorManager.find("ComponentSelector") as ComponentSelector;
-    // if (!componentSelector) {
-    //   componentSelector = new ComponentSelector();
-    // }
-    // componentSelector.isMultiSelect = true;
-    // this.viewer.operatorManager.add(componentSelector);
-
-    // this.addSetMaterialEvent();
-    super.begin();
-  }
-
-  end() {
-    // this.viewer.operatorManager.clear();
-    // this.viewer.updateType = this._updateType;
-    // this.viewer.asynUpdateView();
-    // this.viewer.updateDisplay();
-    // this.hide();
-    this.component.hide();
-
-    super.end();
-  }
-
-  // interrupt() {
-  //   this.viewer.operatorManager.clear();
-  //   super.interrupt();
-  // }
-
-  // restore() {
-  //   this.viewer.operatorManager.clear();
-  //   super.restore();
-  // }
-
-  // addSetMaterialEvent() {
-  //   // if (this.componentPreSelector) {
-  //   //   this.componentPreSelector.lButtonDown.add(() => {
-  //   //     let segmentObject = this.componentPreSelector.preHighlightObject;
-  //   //     if (!segmentObject) {
-  //   //       return;
-  //   //     }
-  //   //     let treeNode =
-  //   //       this.viewer.structureTreeManager.getTreeNodeObjectByNodeKey(
-  //   //         segmentObject.nodeKey
-  //   //       );
-  //   //     let apiPath = treeNode.apiPath;
-  //   //     console.log("apiPath:", apiPath);
-  //   //     let guid = uuid();
-  //   //     let preStyleName = "style " + segmentObject.name + " ";
-  //   //     let styleName = preStyleName + guid;
-  //   //     // 该segmentObject是否已经添加过style.
-  //   //     let existStyleName = this.searchExitedStyleName(
-  //   //       segmentObject,
-  //   //       preStyleName
-  //   //     );
-  //   //     if (existStyleName) {
-  //   //       styleName = existStyleName;
-  //   //     }
-  //   //     // 根据color,image数据创建material.
-  //   //     if (this._styleColor || this.imgBlob) {
-  //   //       let material = new Material(this.viewer, styleName);
-  //   //       switch (this.edtiType) {
-  //   //         case EditStyleType.Color:
-  //   //           material.setColor(
-  //   //             this.styleColor[0],
-  //   //             this.styleColor[1],
-  //   //             this.styleColor[2],
-  //   //             this.styleColor[3]
-  //   //           );
-  //   //           this.viewer.materialManager.override([segmentObject], material);
-  //   //           break;
-  //   //         case EditStyleType.Image:
-  //   //           material.setImage(
-  //   //             this.fileName,
-  //   //             this.imgBlob,
-  //   //             this.imgWidth,
-  //   //             this.imgHeight,
-  //   //             this.imgType,
-  //   //             this.uvScale
-  //   //           );
-  //   //           material.Image.mipMap = true;
-  //   //           this.viewer.materialManager.override([segmentObject], material);
-  //   //           break;
-  //   //         case EditStyleType.unsetStyle:
-  //   //           console.log("clear");
-  //   //           // this.viewer.materialManager.clearOverride([segmentObject]);
-  //   //           this.viewer.materialManager.reset([segmentObject]);
-  //   //           break;
-  //   //         default:
-  //   //           break;
-  //   //       }
-  //   //       this.viewer.updateDisplay();
-  //   //       // if (this._styleColor) {
-  //   //       //     material.setColor(this.styleColor[0], this.styleColor[1], this.styleColor[2], this.styleColor[3])
-  //   //       // } else {
-  //   //       //     // material.unsetColor();
-  //   //       // }
-  //   //       // if (this.imgBlob) {
-  //   //       //     material.setImage(this.fileName, this.imgBlob, this.imgWidth, this.imgHeight, this.imgType);
-  //   //       // } else {
-  //   //       //     // material.unsetImage();
-  //   //       // }
-  //   //       // this.viewer.materialManager.override([segmentObject], material);
-  //   //     }
-  //   //     // 后台调用修改材质的API
-  //   //     let modelId = segmentObject.modelId;
-  //   //     let version = 0;
-  //   //     IDB.getInstance(modelId).del(modelId + "?v=" + version);
-  //   //     let condition = "";
-  //   //     switch (this.edtiType) {
-  //   //       case EditStyleType.Color:
-  //   //         this.editServerModelColor(modelId, apiPath, condition, styleName);
-  //   //         break;
-  //   //       case EditStyleType.Image:
-  //   //         this.editServerModelImage(modelId, apiPath, condition, styleName);
-  //   //         break;
-  //   //       case EditStyleType.unsetStyle:
-  //   //         if (existStyleName) {
-  //   //           this.editServerModelUnsetImage(
-  //   //             modelId,
-  //   //             apiPath,
-  //   //             condition,
-  //   //             styleName
-  //   //           );
-  //   //         }
-  //   //         break;
-  //   //       default:
-  //   //         break;
-  //   //     }
-  //   //     this.componentPreSelector.clearPreSelect();
-  //   //   });
-  //   // } else {
-  //   //   console.log("this.componentPreSelector is null");
-  //   // }
-  // }
-
-  // searchExitedStyleName(segmentObject: TreeNodeObject, styleName: string): string {
-  //   let result: string = null;
-  //   // if (segmentObject.segment.styles) {
-  //   //   segmentObject.segment.styles.items.forEach((style) => {
-  //   //     if (style.segment.name.indexOf(styleName) !== -1) {
-  //   //       result = style.segment.name;
-  //   //       console.log("该segmentObject已经添加过了style:", result);
-  //   //       return result;
-  //   //     }
-  //   //   });
-  //   // }
-
-  //   return result;
-  // }
-
-  // resetComponentColor() {
-  //   let selectedObjects = this.viewer.selectionManager.selectedObjects;
-  //   if (selectedObjects && selectedObjects.length > 0) {
-  //     for (let i = 0; i < selectedObjects.length; i++) {
-  //       let selectedObject = selectedObjects[i];
-  //       selectedObject.unsetColor();
-  //       selectedObject.unHighlight();
-  //     }
-  //     this.viewer.styleManager.updateAllStyle();
-  //   } else {
-  //     Message.warning("请先选择要设置颜色的构件");
-  //   }
-  // }
-
-  // applyComponentColor() {
-  //   let selectedObjects = this.viewer.selectionManager.selectedObjects;
-  //   if (selectedObjects && selectedObjects.length > 0) {
-  //     for (let i = 0; i < selectedObjects.length; i++) {
-  //       let selectedObject = selectedObjects[i];
-
-  //       selectedObject.setColor(this.styleColor[0], this.styleColor[1], this.styleColor[2], this.styleColor[3]);
-  //       selectedObject.unHighlight();
-  //     }
-  //     this.viewer.styleManager.updateAllStyle();
-  //   } else {
-  //     Message.warning("请先选择要设置颜色的构件");
-  //   }
-  // }
-
-  // public editServerModelColor(
-  //   modelId: string,
-  //   // version: number,
-  //   // id: string,
-  //   apiPath: string,
-  //   condition: string,
-  //   styleName: string
-  // ) {
-  //   let color = this.styleColor;
-
-  //   let setStyleOPS;
-  //   if (this.styleColor) {
-  //     let colorStr =
-  //       "faces=(r=" +
-  //       (color[0] / 255).toFixed(2) +
-  //       ",g=" +
-  //       (color[1] / 255).toFixed(2) +
-  //       ",b=" +
-  //       (color[2] / 255).toFixed(2) +
-  //       ",a=" +
-  //       color[3] +
-  //       ")";
-  //     setStyleOPS = [
-  //       {
-  //         op: "setColor",
-  //         condition: condition,
-  //         value: colorStr,
-  //         styleName: styleName,
-  //       },
-  //     ];
-
-  //     let data = [
-  //       {
-  //         path: apiPath,
-  //         ops: setStyleOPS,
-  //       },
-  //     ];
-  //     longanModelApi.setStyle(modelId, data);
-  //     //   .then(() => {
-  //     //     // console.log("------------", modelId + "?v=" + version + "_" + id);
-  //     //     IDB.getInstance(modelId).del(modelId + "?v=" + version + "_" + id);
-  //     //   });
-  //   }
-  // }
-
-  // public editServerModelImage(modelId: string, apiPath: string, condition: string, styleName: string) {
-  //   let setStyleOPS;
-  //   if (this.imgBlob) {
-  //     let imageByteArray = new Uint8Array(this.imgBlob);
-  //     let byteArray = Array.from(imageByteArray);
-  //     // console.log(byteArray);
-
-  //     let options =
-  //       "name=" + this.fileName + ",format=" + this.imgType + ",data size=" + this.imgBlob.byteLength + ",local";
-
-  //     options += ",scale='" + this.uvScale[0] + "," + this.uvScale[1] + "'";
-
-  //     setStyleOPS = [
-  //       {
-  //         op: "setImage",
-  //         condition: condition,
-  //         width: this.imgWidth,
-  //         height: this.imgHeight,
-  //         name: this.fileName,
-  //         data: byteArray,
-  //         options: options,
-  //         styleName: styleName,
-  //       },
-  //     ];
-
-  //     let data = [
-  //       {
-  //         path: apiPath,
-  //         ops: setStyleOPS,
-  //       },
-  //     ];
-
-  //     longanModelApi.setStyle(modelId, data).then(() => {
-  //       // IDB.getInstance(modelId).del(modelId + "?v=" + version + "_" + id);
-  //     });
-  //   }
-  // }
-
-  // public editServerModelUnsetImage(
-  //   modelId: string,
-  //   // version: number,
-  //   // id: string,
-  //   apiPath: string,
-  //   condition: string,
-  //   styleName: string
-  // ) {
-  //   let setStyleOPS;
-  //   setStyleOPS = [
-  //     {
-  //       op: "remove",
-  //       condition: condition,
-  //       styleName: styleName,
-  //     },
-  //   ];
-
-  //   let data = [
-  //     {
-  //       path: apiPath,
-  //       ops: setStyleOPS,
-  //     },
-  //   ];
-
-  //   longanModelApi.setStyle(modelId, data).then(() => {
-  //     //   IDB.getInstance(modelId).del(modelId + "?v=" + version + "_" + id);
-  //   });
-  // }
-}

package/src/viewerWrapper/commands/showEditStyle/showEditStyle.vue

@@ -1,339 +0,0 @@
-<template>
-  <div class="showEditStyle">
-    <div class="colorSelect">
-      <div class="color">颜色:</div>
-      <div>
-        <el-color-picker
-          v-model="styleColor"
-          @change="colorChange"
-          :show-alpha="true"
-          style="height: 30px"></el-color-picker>
-      </div>
-      <el-divider></el-divider>
-      <!-- <div class="row">
-        <span>贴图：</span>
-        <el-button type="text" @click="uploadFileClick" v-show="!imageSrc">
-          <i class="el-icon-plus"></i>
-          上传
-          <input type="file" ref="upload" :accept="acceptFileType" v-show="false" @change="uploadFileChange()" />
-        </el-button>
-      </div>
-    </div>
-    <div class="image-wrapper" v-show="imageSrc">
-      <el-image :src="imageSrc"></el-image>
-      <div class="button-wrapper">
-        <i class="el-icon-close" @click="deleteUploadFileClick"></i>
-      </div> -->
-    </div>
-
-    <div class="bottom">
-      <!-- <el-button type="primary" @click="deleteStyle">删除选中构件样式</el-button> -->
-      <el-button @click="cancelEdit">取消</el-button>
-      <el-button type="primary" @click="applyEdit">应用</el-button>
-      <el-button type="primary" @click="saveEdit">保存</el-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import store from "../../../store";
-import fileType from "../../../utils/fileType";
-import { fileToBase64 } from "../../../utils/fileUtility";
-import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
-import CommandShowEditStyle, { EditStyleType } from "./commandShowEditStyle";
-import { Image as ElImage, ColorPicker } from "element-ui";
-import { modelService } from "../../../api/modelService";
-import { Viewer } from "gs-bim-air-core/gsDevFx/viewer";
-Vue.use(ElImage);
-Vue.use(ColorPicker);
-
-@Component({
-  components: {},
-})
-export default class ShowEditStyle extends Vue {
-  @Prop() componentData;
-  @Inject() getViewer;
-
-  styleColor = "rgba(65,174,251,1)";
-  acceptFileType = fileType.acceptFileType(fileType.image);
-  imageSrc = "";
-
-  get commandData() {
-    return (
-      this.componentData || {
-        position: [0, 0, 0],
-      }
-    );
-  }
-
-  get viewer(): Viewer {
-    return this.getViewer();
-  }
-
-  colorChange(color: string) {
-    //color是rgba(65,174,251,1)格式
-    localStorage.setItem("styleColor", color);
-    let commandShowEditStyle = this.viewer.process.commandManager.currentCommand as CommandShowEditStyle;
-    if (color !== "null" && color) {
-      let colorArr = color.replace("rgba(", "").replace(")", "").split(",");
-      commandShowEditStyle.styleColor = colorArr.map(Number) as [number, number, number, number];
-    } else {
-      commandShowEditStyle.styleColor = null;
-    }
-
-    commandShowEditStyle.edtiType = EditStyleType.Color;
-  }
-
-  cancelEdit() {
-    let commandShowEditStyle = this.viewer.process.commandManager.currentCommand as CommandShowEditStyle;
-    commandShowEditStyle.resetComponentColor();
-  }
-
-  applyEdit() {
-    // if (this.isEmpty(this.form.x) || this.isEmpty(this.form.y) || this.isEmpty(this.form.z)) {
-    //   return this.$message.warning("输入框的值不能为空");
-    // }
-    // if (this.type == TransformType.Scale) {
-    //   if (this.form.x <= 0 || this.form.y <= 0 || this.form.z <= 0) {
-    //     return this.$message.warning("缩放值必须大于0");
-    //   }
-    // } else if (this.type == TransformType.Rotate) {
-    //   if (!this.rotateValidate()) {
-    //     return this.$message.warning("旋转角度必须在0~360°之间");
-    //   }
-    // }
-    // this.viewer.panelManager.getPanelByName<positionPanel>("positionPanel").saveTransform(this.type, this.form);
-    let commandShowEditStyle = this.viewer.process.commandManager.currentCommand as CommandShowEditStyle;
-    commandShowEditStyle.applyComponentColor();
-  }
-
-  saveEdit() {
-    let selectedObjects = this.viewer.selectionManager.selectedObjects;
-    let promises = [];
-    selectedObjects.forEach((treeNode) => {
-      let p = modelService.setEditInfos(treeNode.modelId, {
-        type: treeNode.isComponent ? "component" : "node",
-        key: treeNode.path,
-        operator: "color",
-        value: {
-          color: treeNode.color,
-        },
-      });
-      promises.push(p);
-    });
-    Promise.all(promises).then(() => {
-      this.$message.success("保存成功");
-    });
-  }
-
-  uploadFileClick() {
-    let commandShowEditStyle = this.viewer.process.commandManager.currentCommand as CommandShowEditStyle;
-
-    (this.$refs.upload as any).click();
-  }
-
-  uploadFileChange() {
-    console.log("uploadFile-----");
-
-    let file = (this.$refs.upload as HTMLInputElement).files[0];
-    fileToBase64(file).then((result: any) => {
-      let data = result.data;
-      let fileName = result.name;
-      let names = fileName.split(".");
-      fileName = names[0];
-
-      let byteString = atob(data.split(",")[1]);
-
-      let ab = new ArrayBuffer(byteString.length);
-      let ia = new Uint8Array(ab);
-      for (let i = 0; i < byteString.length; i++) {
-        ia[i] = byteString.charCodeAt(i);
-      }
-      let format = "jpg";
-      format = this.checkPhotoFormat(ia);
-
-      this.imageSrc = data;
-      let canvas = document.createElement("canvas");
-      let context = canvas.getContext("2d");
-      let img = new Image();
-      img.src = data;
-
-      img.onload = () => {
-        canvas.width = img.width;
-        canvas.height = img.height;
-
-        let commandShowEditStyle = this.viewer.process.commandManager.currentCommand as CommandShowEditStyle;
-        commandShowEditStyle.fileName = fileName;
-        commandShowEditStyle.imgBlob = ab;
-        commandShowEditStyle.imgWidth = img.width;
-        commandShowEditStyle.imgHeight = img.height;
-        commandShowEditStyle.imgType = format;
-
-        commandShowEditStyle.edtiType = EditStyleType.Image;
-        this.setData();
-      };
-    });
-  }
-
-  checkPhotoFormat(ia: Uint8Array): string {
-    let format = "jpg";
-
-    let a = ia[0];
-    let b = ia[1];
-    let c = ia[2];
-    let d = ia[3];
-
-    if (a === 255 && b === 216 && c === 255) {
-      format = "jpg";
-    } else if (a === 137 && b === 80 && c === 78 && d === 71) {
-      format = "png";
-    } else if (a === 71 && b === 73 && c === 70) {
-      format = "gif";
-    } else if (a === 66 && b === 77) {
-      format = "bmp";
-    }
-
-    return format;
-  }
-
-  deleteUploadFileClick() {
-    this.imageSrc = "";
-    (this.$refs.upload as any).value = "";
-
-    let commandShowEditStyle = this.viewer.process.commandManager.currentCommand as CommandShowEditStyle;
-    commandShowEditStyle.imgBlob = null;
-  }
-
-  deleteStyle() {
-    let commandShowEditStyle = this.viewer.process.commandManager.currentCommand as CommandShowEditStyle;
-    commandShowEditStyle.edtiType = EditStyleType.unsetStyle;
-  }
-
-  setData() {
-    this.$emit("setData", {
-      icon: "yansebianji",
-      title: "颜色编辑",
-      bottom: "10px",
-      right: "10px",
-    });
-  }
-
-  mounted() {
-    this.setData();
-    let localColor = localStorage.getItem("styleColor");
-    if (localColor === "null") {
-      this.styleColor = "rgba(65,174,251,1)";
-    } else {
-      this.styleColor = localColor;
-    }
-    this.colorChange(this.styleColor);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../../assets/scss/site";
-@import "../../../assets/theme/handle.scss";
-.showEditStyle {
-  color: $gs-primary-fontColor;
-  // background-color: $model-theme-light;
-  // min-width: 250px;
-  height: 100%;
-  min-height: 50px;
-  // text-align: left;
-  border-radius: 0 0 4px 4px;
-  font-size: 14px;
-  .content {
-    padding: 10px;
-    height: calc(100% - 49px);
-    box-sizing: border-box;
-    overflow: auto;
-    .colorSelect {
-      display: flex;
-      justify-content: flex-start;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-      .color {
-        line-height: 44px;
-        padding-right: 10px;
-      }
-      :deep(.el-color-picker__trigger) {
-        border: none;
-      }
-    }
-  }
-}
-
-.input-row {
-  text-align: left;
-  padding: 5px 0;
-  color: $gs-primary-fontColor;
-  span {
-    display: inline-block;
-
-    &:first-child {
-      width: 40px;
-      text-align: right;
-    }
-
-    &:last-child {
-      padding-left: 20px;
-    }
-  }
-}
-
-.edit-image-wrapper {
-  .imgArea {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    .name {
-      line-height: 40px;
-      padding-right: 10px;
-    }
-  }
-}
-
-.image-wrapper {
-  max-width: 200px;
-  max-height: 120px;
-  // display: flex;
-  // justify-content: rotatePoint;
-  // align-items: rotatePoint;
-  position: relative;
-  margin: auto;
-
-  .el-image {
-    width: auto;
-    height: auto;
-    max-width: 200px;
-    max-height: 120px;
-  }
-}
-
-.button-wrapper {
-  // display: flex;
-  // justify-content: rotatePoint;
-  // align-items: rotatePoint;
-  // margin-left: 10px;
-  position: absolute;
-  cursor: pointer;
-  right: 5px;
-  top: 5px;
-
-  i {
-    cursor: pointer;
-    color: red;
-    font-size: 16px;
-  }
-}
-
-.bottom {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px;
-  border-top: 1px solid rgba(255, 255, 255, 0.15);
-}
-.el-button--text {
-  color: $gs-primary-active;
-}
-</style>