gs-bim-air 3.0.3 → 3.0.5

package/src/viewerWrapper/panels/panel.ts

@@ -1,126 +0,0 @@
-import { Viewer } from "gs-bim-air-core/gsDevFx/viewer";
-import store from "../../store";
-
-export interface PanelData {
-  componentName: string;
-  data: any;
-}
-export default class Panel {
-  private _viewer: Viewer;
-  private _componentName: string;
-  private _bindComponent: () => void;
-  //   private _toggleCallback: (visible: boolean) => void = null;
-
-  protected get viewer() {
-    return this._viewer;
-  }
-
-  protected set viewer(viewer) {
-    this._viewer = viewer;
-  }
-
-  protected get componentName() {
-    return this._componentName;
-  }
-
-  protected set bindComponent(component) {
-    // this._componentName = component.toString().split("/").pop().slice(0, -10) + this.viewer.container.id;
-    // console.log("-------------", this._componentName)
-    this._bindComponent = component;
-
-    store.commit("panel/panelBindComponent", {
-      viewerId: this.viewer.container.id,
-      componentName: this._componentName,
-      component: this._bindComponent,
-    });
-  }
-
-  public get visible(): boolean {
-    return store.getters["panel/panelComponentState"](this._componentName);
-  }
-
-  public set toggleCallback(toggleCallback) {
-    store.commit("panel/setPanelToggleCallback", toggleCallback);
-  }
-
-  public get disabled(): boolean {
-    return store.getters["panel/panelComponentDisabled"](this._componentName);
-  }
-
-  public set disabled(disabled) {
-    if (disabled) {
-      this.hide();
-    }
-    store.commit("panel/setPanelComponentDisabled", {
-      componentName: this._componentName,
-      disabled,
-    });
-  }
-
-  // panelComponent:Panel;
-  // constructor(viewer: Viewer) {
-  //   this._viewer = viewer;
-  // }
-
-  constructor(panel?: any, bindComponent?: () => void) {
-    // super();
-    this.viewer = panel.viewer as Viewer;
-    this._componentName = panel.typeName + this.viewer.container.id;
-
-    this.bindComponent = bindComponent;
-    this.componentData = panel.componentData;
-    panel.updateComponentData = (data?) => {
-      if (data) {
-        this.componentData = data;
-      } else {
-        this.componentData = panel.componentData;
-      }
-    };
-
-    // this._name = "panel" + CommandComponent.nameCounter++;
-  }
-
-  public show() {
-    console.log("this._componentName", this._componentName);
-    if (this._componentName) {
-      store.commit("panel/panelShowComponent", this._componentName);
-      store.commit("setComponentZIndex", this._componentName);
-      if (this.toggleCallback) {
-        this.toggleCallback(this.visible);
-      }
-    } else {
-      console.error("请先绑定组件");
-    }
-  }
-
-  public hide() {
-    if (this._componentName) {
-      store.commit("panel/panelHideComponent", this._componentName);
-      if (this.toggleCallback) {
-        this.toggleCallback(this.visible);
-      }
-    } else {
-      console.error("请先绑定组件");
-    }
-  }
-
-  public toggle() {
-    let state = store.getters["panel/panelComponentState"](this._componentName);
-
-    if (state) {
-      this.hide();
-    } else {
-      this.show();
-    }
-    return state;
-  }
-
-  public set componentData(data) {
-    let componentData: PanelData = { componentName: this._componentName, data };
-    store.commit("panel/sendData", componentData);
-  }
-
-  public get componentData() {
-    return store.getters["panel/componentData"](this._componentName);
-  }
-}

package/src/viewerWrapper/panels/panelBindComponent.vue

@@ -1,355 +0,0 @@
-<template>
-  <div
-    class="commandDiv"
-    v-if="panelVisible"
-    @mousedown="borderMouseDown"
-    @mousemove="borderMouseMove"
-    tabindex="component"
-    ref="commandDiv"
-    :style="{
-      left,
-      right,
-      top,
-      bottom,
-      zIndex,
-      transform: left === '50%' ? 'translateX(-50%)' : 'unset',
-      background: panelStyle.background,
-      opacity: panelStyle.opacity,
-    }"
-    :class="{ 'center-class': isCenter }">
-    <div class="header" @mousedown.stop="mousedown" ref="header" v-if="isChildInit">
-      <i v-if="icon" :class="`GSBimAir icon-${icon}`"></i>
-      <span>{{ title }}</span>
-      <div class="close-button" @click.stop.prevent="closeClick">
-        <i class="icon el-icon-close" style="font-size: 16px" />
-      </div>
-    </div>
-    <slot></slot>
-    <div class="component">
-      <component
-        :is="component"
-        @setData="setData"
-        :componentData="componentData"
-        @closeClick="closeClick"
-        ref="panelComponent" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Viewer } from "gs-bim-air-core/gsDevFx/viewer";
-import { Component, Emit, Inject, Prop, Vue } from "vue-property-decorator";
-import store from "../../store";
-import panel from "../../store/panel";
-
-@Component({
-  components: {},
-})
-export default class PanelBindComponent extends Vue {
-  @Prop() component;
-  @Prop() componentName;
-  @Inject() getViewer;
-  top = "unset";
-  bottom = "unset";
-  left = "unset";
-  right = "unset";
-  title = "";
-  icon = "";
-  // zIndex = store.state.topZIndex + 1;
-  // componentName = "";
-  editingType = "";
-  isResizing = false;
-  store = store;
-  isChildInit = false;
-
-  get viewer(): Viewer {
-    return this.getViewer();
-  }
-
-  get isCenter() {
-    return this.left === "unset" && this.right === "unset";
-  }
-
-  get panelVisible() {
-    let panelComponentVisible = panel.state.panelComponentVisible;
-    return panelComponentVisible[this.componentName];
-  }
-
-  get componentData() {
-    return store.getters["panel/componentData"](this.componentName) || null;
-  }
-
-  get zIndex() {
-    let componentZIndex = store.state.componentZIndex;
-    return componentZIndex[this.componentName];
-  }
-
-  get panelStyle() {
-    return this.viewer.options.styles.panel;
-  }
-
-  @Emit("setData")
-  setData(data) {
-    this.isChildInit = true;
-    this.title = data.title || "属性板";
-    this.icon = data.icon;
-    let isAllUnset = !data.left && !data.right && !data.top && !data.buttom;
-    if (!isAllUnset) {
-      this.left = data.left || "unset";
-      this.right = data.right || "unset";
-      this.top = data.top || "unset";
-      this.bottom = data.bottom || "unset";
-    }
-
-    let odiv = this.$refs.commandDiv as HTMLDivElement;
-    odiv.style.display = "flex";
-
-    if (data.width && (this.left === "unset" || this.right === "unset")) {
-      odiv.style.width = data.width;
-    }
-    if (data.height && (this.bottom === "unset" || this.top === "unset")) {
-      odiv.style.height = data.height;
-    }
-  }
-
-  @Emit("closeClick")
-  closeClick() {
-    if ((this.$refs.panelComponent as any).closeClick) {
-      (this.$refs.panelComponent as any).closeClick();
-    }
-    // store.commit("panel/panelHideComponent", this.componentName);
-    this.viewer.panelManager.getPanelByName(this.componentName).hide();
-  }
-
-  mousedown(ev) {
-    store.commit("setComponentZIndex", this.componentName);
-
-    let odiv = this.$refs.commandDiv as HTMLDivElement; // 获取目标元素
-    let parentElement = odiv.parentElement; // 获取父元素,即viewer-wrapper
-    // 算出鼠标相对元素的位置
-    let disX = ev.clientX - odiv.offsetLeft;
-    let disY = ev.clientY - odiv.offsetTop;
-    document.onmousemove = (e) => {
-      // 鼠标按下并移动的事件
-      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-      let left = e.clientX - disX;
-      let top = e.clientY - disY;
-
-      if (left < 0) {
-        left = 0;
-      } else if (left >= parentElement.offsetWidth - odiv.offsetWidth) {
-        left = parentElement.offsetWidth - odiv.offsetWidth;
-      }
-      if (top < 0) {
-        top = 0;
-      } else if (top >= parentElement.offsetHeight - odiv.offsetHeight) {
-        top = parentElement.offsetHeight - odiv.offsetHeight;
-      }
-
-      // 移动当前元素
-      this.left = left + "px";
-      this.top = top + "px";
-      this.right = parentElement.offsetWidth - odiv.offsetWidth - left + "px";
-      this.bottom = parentElement.offsetHeight - odiv.offsetHeight - top + "px";
-
-      if (Number(this.left.replace("px", "")) <= Number(this.right.replace("px", ""))) {
-        odiv.style.width = odiv.offsetWidth + "px";
-        this.right = "unset";
-      } else {
-        odiv.style.width = odiv.offsetWidth + "px";
-        this.left = "unset";
-      }
-      e.stopPropagation();
-      e.preventDefault();
-    };
-    document.onmouseup = (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      document.onmousemove = null;
-      document.onmouseup = null;
-    };
-     ev.stopPropagation();
-    ev.preventDefault();
-  }
-
-  borderMouseMove(ev) {
-    // ev.preventDefault();
-
-    if (this.isResizing) {
-      return;
-    }
-    let odiv = this.$refs.commandDiv as HTMLDivElement; // 获取目标元素
-    let viewerId = this.viewer.container.id;
-    let wrapperElement = document.getElementById(viewerId).parentElement; // 包围
-
-    let isLeft = ev.clientX >= odiv.offsetLeft && ev.clientX <= odiv.offsetLeft + 10;
-    let isRight =
-      ev.clientX <= odiv.offsetLeft + odiv.offsetWidth && ev.clientX >= odiv.offsetLeft + odiv.offsetWidth - 10;
-    let isTop =
-      ev.clientY >= wrapperElement.offsetTop + odiv.offsetTop &&
-      ev.clientY <= wrapperElement.offsetTop + odiv.offsetTop + 10;
-    let isBottom =
-      ev.clientY <= wrapperElement.offsetTop + odiv.offsetTop + odiv.offsetHeight &&
-      ev.clientY >= wrapperElement.offsetTop + odiv.offsetTop + odiv.offsetHeight - 10;
-
-    if (isLeft && isBottom) {
-      odiv.style.cursor = "sw-resize";
-    } else if (isRight && isBottom) {
-      odiv.style.cursor = "se-resize";
-    } else if (isLeft) {
-      odiv.style.cursor = "w-resize";
-    } else if (isRight) {
-      odiv.style.cursor = "e-resize";
-    } else if (isTop) {
-      odiv.style.cursor = "n-resize";
-    } else if (isBottom) {
-      odiv.style.cursor = "s-resize";
-    } else {
-      odiv.style.cursor = "";
-    }
-    this.editingType = odiv.style.cursor;
-  }
-
-  borderMouseDown() {
-    store.commit("setComponentZIndex", this.componentName);
-
-    let odiv = this.$refs.commandDiv as HTMLDivElement; // 获取目标元素
-    let parentElement = odiv.parentElement; // 获取父元素
-    let wrapperElement = document.getElementById(this.viewer.container.id).parentElement; // 包围
-
-    // 算出鼠标相对元素的位置
-    odiv.style.width = odiv.offsetWidth + "px";
-
-    this.left = odiv.offsetLeft + "px";
-    this.right = parentElement.offsetWidth - odiv.offsetLeft - odiv.offsetWidth + "px";
-    this.top = odiv.offsetTop + "px";
-    this.bottom = parentElement.offsetHeight - odiv.offsetTop - odiv.offsetHeight + "px";
-
-    if (this.editingType) {
-      document.onmousemove = (e) => {
-        odiv.style.width = "";
-        odiv.style.height = "";
-        this.isResizing = true;
-        let bottom = parentElement.offsetHeight + wrapperElement.offsetTop - e.clientY;
-        switch (this.editingType) {
-          case "w-resize":
-            this.left = (e.clientX < 0 ? 0 : e.clientX) + "px";
-            break;
-          case "e-resize":
-            this.right = (e.clientX > parentElement.offsetWidth ? 0 : parentElement.offsetWidth - e.clientX) + "px";
-            break;
-          case "n-resize":
-            this.top = e.clientY + "px";
-            break;
-          case "s-resize":
-            this.bottom = (bottom < 0 ? 0 : bottom) + "px";
-            break;
-          case "sw-resize":
-            this.left = (e.clientX < 0 ? 0 : e.clientX) + "px";
-            this.bottom = (bottom < 0 ? 0 : bottom) + "px";
-            break;
-          case "se-resize":
-            this.right = (e.clientX > parentElement.offsetWidth ? 0 : parentElement.offsetWidth - e.clientX) + "px";
-            this.bottom = (bottom < 0 ? 0 : bottom) + "px";
-            break;
-        }
-      };
-      document.onmouseup = () => {
-        if (this.isResizing && this.left !== "unset" && this.right !== "unset") {
-          if (Number(this.left.replace("px", "")) <= Number(this.right.replace("px", ""))) {
-            odiv.style.width = odiv.offsetWidth + "px";
-            this.right = "unset";
-          } else {
-            odiv.style.width = odiv.offsetWidth + "px";
-            this.left = "unset";
-          }
-        }
-        this.isResizing = false;
-        document.onmouseup = null;
-        document.onmousemove = null;
-      };
-    }
-  }
-
-  created() {
-    if (this.viewer) {
-      // this.componentName = this.component.toString().split("/").pop().slice(0, -10) + this.viewer.container.id;
-      console.log("this.component", this.componentName);
-      store.commit("setComponentZIndex", this.componentName);
-    }
-  }
-
-  beforeDestroy() {
-    store.commit("panel/panelHideComponent", this.componentName);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/site";
-@import "../../assets/theme/handle.scss";
-
-.commandDiv {
-  position: absolute;
-  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4);
-  border-radius: 10px;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  min-height: 150px;
-  min-width: 250px;
-  display: none;
-  user-select: none;
-  .header {
-    height: 48px;
-    line-height: 48px;
-    font-size: 16px;
-    font-weight: 400;
-    color: $gs-primary-fontColor;
-    //background: #3c3f4f;
-    padding: 0 10px;
-    text-align: left;
-    cursor: move;
-    user-select: none;
-    background: $gs-primary-background;
-    // border-bottom: 1px solid #aaa;
-    border-radius: 10px 10px 0 0;
-    > i {
-      margin-right: 5px;
-    }
-
-    .close-button {
-      cursor: pointer;
-      display: inline-block;
-      width: 20px;
-      height: 48px;
-      font-size: 20px;
-      transition: 0.3s;
-      color: $gs-primary-buttonColor;
-      position: absolute;
-      right: 10px;
-
-      &:hover i {
-        color: $gs-primary-buttonColor-hover;
-      }
-
-      i {
-        margin: auto;
-        color: $gs-primary-fontColor;
-        transition: 0.3s;
-      }
-    }
-  }
-  .component {
-    position: relative;
-    height: calc(100% - 48px);
-    overflow: auto;
-  }
-}
-
-.center-class {
-  transform: translateX(-50%);
-}
-</style>