@abi-software/scaffoldvuer 0.1.53 → 0.1.54-beta-4

package/src/components/ScaffoldVuer.vue

@@ -354,7 +354,7 @@ export default {
      */
     displayMarkers: {
       type: Boolean,
-      default: true
+      default: false
     },
     /**
      * Show/hide minimap.
@@ -363,6 +363,13 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * Format of the input URL
+     */
+    format: {
+      type: String,
+      default: "metadata"
+    },
     /**
      * Settings for minimap position, size and alignment.
      */
@@ -473,10 +480,17 @@ export default {
         visible: false,
         x: 200,
         y: 200
-      }
+      },
+      fileFormat: "metadata",
     };
   },
   watch: {
+    format: {
+      handler: function(value) {
+        this.fileFormat = value;
+      },
+      immediate: true
+    },
     url: {
       handler: function(newValue) {
         if (this.state === undefined || this.state.url === undefined)
@@ -508,6 +522,8 @@ export default {
     },
     displayMarkers: function(val) {
       this.$module.scene.displayMarkers = val;
+      //Update pickable objects
+      this.$module.scene.forcePickableObjectsUpdate = true;
     },
     displayMinimap: function(val) {
       this.$module.scene.displayMinimap = val;
@@ -685,6 +701,7 @@ export default {
     viewRegion: function(names) {
       const rootRegion = this.$module.scene.getRootRegion();
       const groups = Array.isArray(names) ? names : [names];
+      const dist = this.$module.scene.camera.far - this.$module.scene.camera.near;
       const objects = findObjectsWithNames(rootRegion, groups, "");
       let box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
       if (box) {
@@ -692,6 +709,7 @@ export default {
           this.$module.setSyncControlZoomToBox(box);
         } else {
           this.$module.scene.viewAllWithBoundingBox(box);
+          this.$module.scene.camera.far = this.$module.scene.camera.near + dist;
         }
         return true;
       }
@@ -747,6 +765,7 @@ export default {
      */
     eventNotifierCallback: function(event) {
       const names = [];
+      let zincObjects = [];
       const region = undefined;
       if (event.eventType == 1 || event.eventType == 2) {
         event.identifiers.forEach(identifier => {
@@ -757,13 +776,15 @@ export default {
             names.push(id);
           }
         });
+        zincObjects = event.zincObjects;
       }
       if (event.eventType == 1) {
         if (this.$refs.treeControl) {
           if (names.length > 0) {
-            this.$refs.treeControl.changeActiveByNames(names, region, false);
+            //this.$refs.treeControl.changeActiveByNames(names, region, false);
+            this.$refs.treeControl.updateActiveUI(zincObjects);
           } else {
-            this.$refs.treeControl.removeActive(true);
+            this.$refs.treeControl.removeActive(true)
           }
         }
         // Triggers when an object has been selected
@@ -773,7 +794,8 @@ export default {
        // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
         if (this.$refs.treeControl) {
           if (names.length > 0) {
-            this.$refs.treeControl.changeHoverByNames(names, region, false);
+            //this.$refs.treeControl.changeHoverByNames(names, region, false);
+            this.$refs.treeControl.updateHoverUI(zincObjects);
           } else {
             this.$refs.treeControl.removeHover(true);
           }
@@ -989,9 +1011,10 @@ export default {
      */
     getState: function() {
       let state = {
+        format: this.fileFormat,
         url: this._currentURL,
         viewport: undefined,
-        visibility: undefined
+        visibility: undefined,
       };
       if (this.$refs.treeControl)
         state.visibility = this.$refs.treeControl.getState();
@@ -1011,6 +1034,7 @@ export default {
       if (state) {
         if (state.url && state.url !== this._currentURL) {
           this.setURLAndState(state.url, {
+            fileFormat: state.fileFormat,
             viewport: state.viewport,
             visibility: state.visibility
           });
@@ -1047,6 +1071,7 @@ export default {
      */
     setURLAndState: function(newValue, state) {
       if (newValue != this._currentURL) {
+        if (state && state.format) this.fileFormat = state.format;
         let viewport = state && state.viewport ? state.viewport : undefined;
         let visibility =
           state && state.visibility ? state.visibility : undefined;
@@ -1063,14 +1088,20 @@ export default {
             visibility: visibility
           })
         );
-        this.$module.loadOrgansFromURL(
-          newValue,
-          undefined,
-          undefined,
-          "scene",
-          undefined
-        );
+        if (this.fileFormat === "gltf") {
+          this.$module.loadGLTFFromURL(newValue, "scene", true);
+        } else {
+          this.$module.loadOrgansFromURL(
+            newValue,
+            undefined,
+            undefined,
+            "scene",
+            undefined,
+            true
+          );
+        }
         this.$module.scene.displayMarkers = this.displayMarkers;
+        this.$module.scene.forcePickableObjectsUpdate = true;
         this.$module.scene.displayMinimap = this.displayMinimap;
         this.updateMinimapScissor();
       }
@@ -1086,7 +1117,6 @@ export default {
     },
     /**
      * Callback when drawer is toggled.
-     *
      */
     drawerToggled: function(flag) {
       this.drawerOpen = flag;

package/src/components/TraditionalControls.vue

@@ -0,0 +1,544 @@
+<template>
+  <div
+    class="traditional-location"
+    :class="{ open: drawerOpen, close: !drawerOpen }"
+  >
+    <div class="traditional-container">
+      <el-row>
+        <el-col :span="12">
+          <div class="regions-display-text">
+            Regions
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <el-checkbox
+            v-model="checkAll"
+            class="all-checkbox"
+            :indeterminate="isIndeterminate"
+            @change="handleCheckAllChange"
+          >
+            Display all
+          </el-checkbox>
+        </el-col>
+      </el-row>
+      <el-checkbox-group
+        v-model="checkedItems"
+        size="small"
+        class="checkbox-group"
+        @change="handleCheckedItemsChange"
+      >
+        <div class="checkbox-group-inner">
+          <el-row
+            v-for="item in sortedPrimitiveGroups"
+            :key="item"
+            :label="item"
+          >
+            <div class="checkbox-container">
+              <el-checkbox
+                class="my-checkbox"
+                :label="item"
+                :checked="true"
+                :class="{ activeItem: activeRegion === item, 
+                          hoverItem: hoverRegion === item }"
+                @click.native="itemClicked(item, $event)"
+                @change="visibilityToggle(item, $event)"
+                @mouseover.native="checkboxHover(item)"
+              >
+                <el-color-picker
+                  :class="{ 'show-picker' : showColourPicker }"
+                  :value="getColour(item)"
+                  size="small"
+                  :popper-class="myPopperClass"
+                  @change="setColour(item, $event)"
+                />
+                {{ item }}
+              </el-checkbox>
+            </div>
+          </el-row>
+        </div>
+      </el-checkbox-group>
+    </div>
+    <div
+      class="drawer-button"
+      :class="{ open: drawerOpen, close: !drawerOpen }"
+      @click="toggleDrawer"
+    >
+      <i class="el-icon-arrow-left" />
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Checkbox, CheckboxGroup, ColorPicker, Row } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+const orderBy = require("lodash/orderBy");
+const uniq = require("lodash/uniq");
+locale.use(lang);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(ColorPicker);
+Vue.use(Row);
+
+/**
+ * A vue component for toggling visibility of various regions.
+ */
+export default {
+  name: "TraditionalControls",
+  props: {
+    /**
+     * @ignore
+     */
+    module: {
+      type: Object,
+      default: undefined
+    },
+    /**
+     * Enable/disable colour picker
+     */
+    showColourPicker: Boolean
+  },
+  data: function() {
+    return {
+      checkAll: true,
+      isIndeterminate: false,
+      checkedItems: [],
+      sortedPrimitiveGroups: [],
+      activeRegion: "",
+      hoverRegion: "",
+      myPopperClass: "hide-scaffold-colour-popup",
+      drawerOpen: true
+    };
+  },
+  watch: {
+    showColourPicker: {
+      immediate: true,
+      handler: function() {
+        if (this.showColourPicker) this.myPopperClass = "showPicker";
+        else this.myPopperClass = "hide-scaffold-colour-popup";
+      }
+    }
+  },
+  created: function() {
+    let tmpArray = this.module.sceneData.geometries.concat(
+      this.module.sceneData.lines
+    );
+    tmpArray = tmpArray.concat(this.module.sceneData.glyphsets);
+    tmpArray = uniq(tmpArray.concat(this.module.sceneData.pointset));
+    this.sortedPrimitiveGroups = orderBy(tmpArray);
+    this.module.addOrganPartAddedCallback(this.organsAdded);
+  },
+  destroyed: function() {
+    this.sortedPrimitiveGroups = undefined;
+  },
+  methods: {
+    /**
+     * This is called when a new organ is read into the scene.
+     */
+    organsAdded: function(name) {
+      if (name && name != "") {
+        let tmpArray = uniq(this.sortedPrimitiveGroups.concat([name]));
+        tmpArray = orderBy(tmpArray);
+        const index = tmpArray.indexOf(undefined);
+        if (index > -1) {
+          tmpArray.splice(index, 1);
+        }
+        this.sortedPrimitiveGroups = tmpArray;
+      }
+    },
+    /**
+     * Select a region by its name.
+     */
+    changeActiveByNames: function(names, propagate) {
+      let targetObject = this.getFirstZincObjectWithGroupName(name);
+      if (targetObject && targetObject.getVisibility()) {
+        this.activeRegion = name;
+        this.$emit("object-selected", targetObject, propagate);
+      } else {
+        this.removeActive(propagate);
+      }
+      this.removeHover(propagate);
+    },
+    /**
+     * Hover a region by its name.
+     */
+    changeHoverByName: function(name, propagate) {
+      let targetObject = this.getFirstZincObjectWithGroupName(name);
+      if (targetObject) {
+        this.hoverRegion = name;
+        this.$emit("object-hovered", targetObject, propagate);
+      } else {
+        this.removeHover(propagate);
+      }
+    },
+    /**
+     * Unselect the current selected region.
+     */
+    removeActive: function(propagate) {
+      this.activeRegion = "";
+      this.$emit("object-selected", undefined, propagate);
+    },
+    /**
+     * Unselect the current hover region.
+     */
+    removeHover: function(propagate) {
+      this.hoverRegion = "";
+      this.$emit("object-hovered", undefined, propagate);
+    },
+    /**
+     * Reset the controls.
+     */
+    clear: function() {
+      this.sortedPrimitiveGroups = [];
+      this.checkedItems = [];
+      this.checkAll = true;
+      this.isIndeterminate = false;
+      this.activeRegion = "";
+      this.hoverRegion = "";
+      this.$emit("object-selected", undefined);
+    },
+    getFirstZincObjectWithGroupName: function(name) {
+      if (this.module && this.module.scene) {
+        let array = this.module.scene.findGeometriesWithGroupName(name);
+        if (array.length > 0) return array[0];
+        array = this.module.scene.findGlyphsetsWithGroupName(name);
+        if (array.length > 0) return array[0];
+        array = this.module.scene.findLinesWithGroupName(name);
+        if (array.length > 0) return array[0];
+        array = this.module.scene.findPointsetsWithGroupName(name);
+        if (array.length > 0) return array[0];
+      }
+      return undefined;
+    },
+    getColour: function(name) {
+      let graphic = this.getFirstZincObjectWithGroupName(name);
+      if (graphic) {
+        let hex = graphic.getColourHex();
+        if (hex) return "#" + hex;
+      }
+      return "#FFFFFF";
+    },
+    setColour: function(name, value) {
+      let graphic = this.getFirstZincObjectWithGroupName(name);
+      if (graphic) {
+        let hexString = value.replace("#", "0x");
+        graphic.setColourHex(hexString);
+      }
+    },
+    checkboxHover: function(name) {
+      this.changeHoverByName(name, true);
+    },
+    itemClicked: function(name, event) {
+      if (
+        !(
+          event.target.classList.contains("el-checkbox__inner") ||
+          event.target.classList.contains("el-checkbox__original")
+        )
+      ) {
+        this.changeActiveByNames([name], true);
+        event.preventDefault();
+      }
+    },
+    handleCheckedItemsChange: function() {
+      let unnamed = this.checkedItems.includes(undefined) ? true: false;
+      let checkedCount = this.checkedItems.length;
+      if (unnamed)
+        checkedCount--;
+      this.checkAll = checkedCount === this.sortedPrimitiveGroups.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.sortedPrimitiveGroups.length;
+    },
+    handleCheckAllChange(val) {
+      this.checkedItems = val ? [...this.sortedPrimitiveGroups] : [];
+      this.isIndeterminate = false;
+      for (let i = 0; i < this.sortedPrimitiveGroups.length; i++) {
+        this.visibilityToggle(this.sortedPrimitiveGroups[i], this.checkAll);
+      }
+    },
+    viewAll: function() {
+      this.module.viewAll();
+    },
+    visibilityToggle: function(item, event) {
+      this.module.changeOrganPartsVisibility(item, event);
+      if (event == false) {
+        if (this.activeRegion === item) {
+          this.removeActive(true);
+        }
+        if (this.hoverRegion === item) {
+          this.removeHover(true);
+        }
+      }
+    },
+    toggleDrawer: function() {
+      this.drawerOpen = !this.drawerOpen;
+      this.$emit("drawer-toggled", this.drawerOpen);
+    },
+    getState: function() {
+      if (this.checkAll) {
+        return { checkAll: true };
+      }
+      let checkedItems = [...this.checkedItems];
+      const index = checkedItems.indexOf(undefined);
+      if (index > -1) {
+        checkedItems.splice(index, 1);
+      }
+      return { checkedItems: checkedItems };
+    },
+    setState: function(state) {
+      if (state) {
+        if (state.checkAll) {
+          this.checkedItems = [...this.sortedPrimitiveGroups];
+          for (let i = 0; i < this.sortedPrimitiveGroups.length; i++) {
+            this.module.changeOrganPartsVisibility(
+              this.sortedPrimitiveGroups[i],
+              true
+            );
+          }
+        } else if (state.checkedItems) { 
+          this.checkedItems = [...state.checkedItems];
+          for (let i = 0; i < this.sortedPrimitiveGroups.length; i++) {
+            let visible = this.checkedItems.includes(
+              this.sortedPrimitiveGroups[i]);
+            this.module.changeOrganPartsVisibility(
+              this.sortedPrimitiveGroups[i],
+              visible
+            );
+          }
+        }
+      }
+      this.handleCheckedItemsChange();
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/checkbox";
+@import "~element-ui/packages/theme-chalk/src/checkbox-group";
+@import "~element-ui/packages/theme-chalk/src/color-picker";
+@import "~element-ui/packages/theme-chalk/src/row";
+
+.checkbox-container {
+  display: flex;
+  cursor: pointer;
+}
+
+.traditional-location {
+  position: absolute;
+  bottom: 0px;
+  transition: all 1s ease;
+
+  &:focus{
+    outline: none;
+  }
+  &.open {
+    left: 0px;
+    .traditional-container {
+      opacity: 1;
+    }
+  }
+  &.close {
+    left: -298px;
+    .traditional-container {
+      pointer-events:none;
+      opacity: 0;
+    }
+  }
+}
+
+.traditional-container {
+  transition: all 1s ease;
+  float: left;
+  padding-left: 16px;
+  padding-right: 18px;
+  max-height: calc(100% - 154px);
+  text-align: left;
+  overflow: none;
+  border: 1px solid rgb(220, 223, 230);
+  padding-top: 7px;
+  padding-bottom: 16px;
+  background: #ffffff;
+}
+
+.regions-display-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.all-checkbox {
+  float: right;
+}
+
+.checkbox-group {
+  width: 260px;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+  margin-top: 6px;
+}
+
+.checkbox-group-inner {
+  padding: 18px;
+  max-height: 240px;
+  min-height: 130px;
+  overflow: auto;
+  scrollbar-color: #c0c4cc rgba(1, 1, 1, 0);
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px #c0c4cc;
+  }
+}
+
+::v-deep .el-checkbox__input {
+  &.is-indeterminate, &.is-checked {
+    .el-checkbox__inner {
+      background-color: $app-primary-color;
+      border-color: $app-primary-color;
+    }
+  }
+}
+
+::v-deep .el-color-picker__color {
+  border: 1px solid $app-primary-color;
+}
+
+::v-deep .el-checkbox__label {
+  padding-left: 5px;
+  color: $app-primary-color !important;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+.activeItem {
+  background-color: #bbb !important;
+}
+
+.my-checkbox {
+  background-color: #fff;
+  width: 100%;
+
+  ::v-deep .el-color-picker {
+    height: 16px !important;
+    top: 3px;
+  }
+
+  ::v-deep .el-color-picker__trigger {
+    margin-left: 8px;
+    margin-right: 8px;
+    padding: 0px;
+    height: 16px;
+    width: 16px;
+    border: 0px;
+  }
+
+}
+
+.hoverItem {
+  background-color: #eee !important;
+}
+
+::v-deep .el-color-picker__icon {
+  &.el-icon-arrow-down {
+    display: none;
+  }
+}
+
+::v-deep .show-picker {
+  .el-color-picker__icon {
+    &.el-icon-arrow-down {
+      display: block;
+    }
+  }
+}
+
+::v-deep .my-drawer {
+  background: rgba(0, 0, 0, 0);
+  box-shadow: none;
+}
+
+.drawer {
+  ::v-deep .el-drawer:focus {
+    outline: none;
+  }
+}
+
+.open-drawer {
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  position: absolute;
+  left: 0px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #f7faff;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.drawer-button {
+  float: left;
+  width: 20px;
+  height: 40px;
+  z-index: 8;
+  margin-top: calc(50% - 52px);
+  border: solid 1px #e4e7ed;
+  border-left: 0;
+  background-color: #ffffff;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.drawer-button {
+  i {
+    margin-top: 12px;
+    color: $app-primary-color;
+    transition-delay: 0.9s;
+  }
+  &.open {
+    i {
+      transform: rotate(0deg) scaleY(2.5);
+    }
+  }
+  &.close {
+    i {
+      transform: rotate(180deg) scaleY(2.5);   
+    }
+  }
+}
+
+.drawer-button.open i {
+  transform: rotate(0deg) scaleY(2.5);
+}
+
+.drawer-button.close i {
+  transform: rotate(180deg) scaleY(2.5);
+}
+</style>
+
+<style>
+.hide-scaffold-colour-popup {
+  display: none;
+}
+</style>
+