@abi-software/scaffoldvuer 0.1.56 → 0.1.58

package/src/components/ScaffoldVuer.vue

@@ -37,8 +37,8 @@
         v-if="displayWarning"
         v-popover:warningPopover
         class="el-icon-warning warning-icon"
-        @mouseover="showToolitip(6)"
-        @mouseout="hideToolitip(6)"
+        @mouseover="showHelpText(6)"
+        @mouseout="hideHelpText(6)"
       >
         <span class="warning-text">Beta</span>
       </i>
@@ -52,10 +52,9 @@
         popper-class="scaffold-popper right-popper non-selectable"
       />
       <tree-controls
-        ref="treeControl"
+        ref="treeControls"
         v-popover:checkBoxPopover
         :help-mode="helpMode"
-        :module="$module"
         :show-colour-picker="showColourPicker"
         @object-selected="objectSelected"
         @object-hovered="objectHovered"
@@ -158,8 +157,8 @@
             icon="zoomIn"
             class="icon-button zoomIn"
             @click.native="zoomIn()"
-            @mouseover.native="showToolitip(0)"
-            @mouseout.native="hideToolitip(0)"
+            @mouseover.native="showHelpText(0)"
+            @mouseout.native="hideHelpText(0)"
           />
         </el-popover>
         <el-popover
@@ -175,8 +174,8 @@
             icon="zoomOut"
             class="icon-button zoomOut"
             @click.native="zoomOut()"
-            @mouseover.native="showToolitip(1)"
-            @mouseout.native="hideToolitip(1)"
+            @mouseover.native="showHelpText(1)"
+            @mouseout.native="hideHelpText(1)"
           />
         </el-popover>
         <el-popover
@@ -196,8 +195,8 @@
             icon="fitWindow"
             class="icon-button fitWindow"
             @click.native="fitWindow()"
-            @mouseover.native="showToolitip(2)"
-            @mouseout.native="hideToolitip(2)"
+            @mouseover.native="showHelpText(2)"
+            @mouseout.native="hideHelpText(2)"
           />
         </el-popover>
       </div>
@@ -235,8 +234,8 @@
           icon="changeBckgd"
           class="icon-button background-colour"
           :class="{ open: drawerOpen, close: !drawerOpen }"
-          @mouseover.native="showToolitip(3)"
-          @mouseout.native="hideToolitip(3)"
+          @mouseover.native="showHelpText(3)"
+          @mouseout.native="hideHelpText(3)"
         />
       </el-popover>
     </div>
@@ -481,7 +480,8 @@ export default {
         region: "",
         visible: false,
         x: 200,
-        y: 200
+        y: 200,
+        external: false,
       },
       fileFormat: "metadata",
     };
@@ -560,10 +560,11 @@ export default {
     this.availableBackground = ["white", "black", "lightskyblue"];
   },
   mounted: function() {
+    this.$refs.treeControls.setModule(this.$module);
     let eventNotifier = new EventNotifier();
     eventNotifier.subscribe(this, this.eventNotifierCallback);
     this.$module.addNotifier(eventNotifier);
-    this.$module.addOrganPartAddedCallback(this.organsAdded);
+    this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
     this.$module.initialiseRenderer(this.$refs.display);
     this.toggleRendering(this.render);
     this.ro = new ResizeObserver(this.adjustLayout).observe(
@@ -578,10 +579,11 @@ export default {
   },
   methods: {
     /**
-     * This is called when a new organ is read into the scene.
+     * This is called when a new zinc object is read into the scene.
      */
-    organsAdded: function() {
+    zincObjectAdded: function(zincObject) {
       this.loading = false;
+      this.$emit("zinc-object-added", zincObject);
     },
     /**
      * This is called when Change backgspeedround colour button
@@ -703,7 +705,7 @@ export default {
     viewRegion: function(names) {
       const rootRegion = this.$module.scene.getRootRegion();
       const groups = Array.isArray(names) ? names : [names];
-      const objects = findObjectsWithNames(rootRegion, groups, "");
+      const objects = findObjectsWithNames(rootRegion, groups, "", true);
       let box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
       if (box) {
         if (this.$module.isSyncControl()) {
@@ -765,6 +767,7 @@ export default {
     /**
      * Callback when a region is selected/highlighted.
      * It will also update other controls.
+     * 
      */
     eventNotifierCallback: function(event) {
       const names = [];
@@ -781,13 +784,18 @@ export default {
         });
         zincObjects = event.zincObjects;
       }
+      /*
+       * Event Type 1: Selected
+       * Event Type 2: Highlighted
+       * Event Type 1: Move
+       */
       if (event.eventType == 1) {
-        if (this.$refs.treeControl) {
+        if (this.$refs.treeControls) {
           if (names.length > 0) {
-            //this.$refs.treeControl.changeActiveByNames(names, region, false);
-            this.$refs.treeControl.updateActiveUI(zincObjects);
+            //this.$refs.treeControls.changeActiveByNames(names, region, false);
+            this.$refs.treeControls.updateActiveUI(zincObjects);
           } else {
-            this.$refs.treeControl.removeActive(true)
+            this.$refs.treeControls.removeActive(true)
           }
         }
         // Triggers when an object has been selected
@@ -795,12 +803,12 @@ export default {
       } else if (event.eventType == 2) {
         this.tData.visible = false;
        // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
-        if (this.$refs.treeControl) {
+        if (this.$refs.treeControls) {
           if (names.length > 0) {
-            //this.$refs.treeControl.changeHoverByNames(names, region, false);
-            this.$refs.treeControl.updateHoverUI(zincObjects);
+            //this.$refs.treeControls.changeHoverByNames(names, region, false);
+            this.$refs.treeControls.updateHoverUI(zincObjects);
           } else {
-            this.$refs.treeControl.removeHover(true);
+            this.$refs.treeControls.removeHover(true);
           }
         }
         if ((event.identifiers.length > 0) && event.identifiers[0]) {
@@ -808,6 +816,7 @@ export default {
             ? event.identifiers[0].data.id
             : event.identifiers[0].data.group;
           if (event.identifiers[0].coords) {
+            this.tData.external = false;
             this.tData.visible = true;
             this.tData.label = id;
             if (event.identifiers[0].data.region)
@@ -889,12 +898,12 @@ export default {
     changeActiveByName: function(names, region, propagate) {
       const isArray = Array.isArray(names);
       if (names === undefined || (isArray && names.length === 0)) {
-        this.$refs.treeControl.removeActive(propagate);
+        this.$refs.treeControls.removeActive(propagate);
       } else {
         let array = names;
         if (!isArray)
           array = [array];
-        this.$refs.treeControl.changeActiveByNames(array, region, propagate);
+        this.$refs.treeControls.changeActiveByNames(array, region, propagate);
       }
     },
     /**
@@ -905,12 +914,12 @@ export default {
     changeHighlightedByName: function(names, region, propagate) {
       const isArray = Array.isArray(names);
       if (names === undefined || (isArray && names.length === 0)) {
-        this.$refs.treeControl.removeHover(propagate);
+        this.$refs.treeControls.removeHover(propagate);
       } else {
         let array = names;
         if (!isArray)
           array = [array];
-        this.$refs.treeControl.changeHoverByNames(array, region, propagate);
+        this.$refs.treeControls.changeHoverByNames(array, region, propagate);
       }
     },
     /**
@@ -938,24 +947,82 @@ export default {
         });
       }
     },
+    /**
+     * Callback function used by showRegionTooltip in the case when the tooltip
+     * is out of view.
+     */
+    showRegionTooltipCallback: function(name) {
+      const instance = this;
+      return function() {
+        instance.$module.zincRenderer.removePostRenderCallbackFunction(instance.$_regionTooltipCallback);
+        instance.showRegionTooltip(name, false);
+      }
+    },
+    /**
+     * Display the tooltip. Reset view if the tooltip is not
+     * in view.
+     */
+    showRegionTooltip: function(name, resetView) {
+      if (name && this.$module.scene) {
+        const rootRegion = this.$module.scene.getRootRegion();
+        const groups = [name];
+        const objects = findObjectsWithNames(rootRegion, groups, "", true);
+        if (objects.length > 0) {
+          let coords = objects[0].getClosestVertexDOMElementCoords(this.$module.scene);
+          if (coords) {
+            //The coords is not in view, view all if resetView flag is true
+            if (!coords.inView) {
+              this.hideRegionTooltip();
+              if (resetView) {
+                this.$module.scene.viewAll();
+                //Use the post render callback to make sure the scene has been updated
+                //before getting the position of the tooltip.
+                this.$_regionTooltipCallback = 
+                  this.$module.zincRenderer.addPostRenderCallbackFunction(
+                    this.showRegionTooltipCallback(name)
+                  );
+              }
+              return;
+            } else {
+              this.tData.external = true;
+              this.tData.visible = true;
+              this.tData.label = name;
+              this.tData.x = coords.position.x;
+              this.tData.y = coords.position.y;
+              const regionPath = objects[0].getRegion().getFullPath();
+              if (regionPath)
+                this.tData.region = regionPath;
+              else
+                this.tData.region = "Root";
+            }
+          }
+        } else {
+          this.hideRegionTooltip();
+        }
+      }
+    },
+    hideRegionTooltip: function() {
+      this.tData.visible = false;
+      this.tData.region = "Root";
+    },
     /**
      * This is called when mouse cursor enters supported elements
      * with help tootltips.
      */
-    showToolitip: function(tooltipNumber) {
+    showHelpText: function(helpTextNumber) {
       if (!this.inHelp) {
-        this.tooltipWait = setTimeout(() => {
-          this.hoverVisabilities[tooltipNumber].value = true;
+        this.helpTextWait = setTimeout(() => {
+          this.hoverVisabilities[helpTextNumber].value = true;
         }, 500);
       }
     },
     /**
      * This is called when mouse cursor exits supported element..
      */
-    hideToolitip: function(tooltipNumber) {
+    hideHelpText: function(helpTextNumber) {
       if (!this.inHelp) {
-        this.hoverVisabilities[tooltipNumber].value = false;
-        clearTimeout(this.tooltipWait);
+        this.hoverVisabilities[helpTextNumber].value = false;
+        clearTimeout(this.helpTextWait);
       }
     },
     /**
@@ -998,7 +1065,7 @@ export default {
           if (options.visibility) {
             // Some UIs may not be ready at this time.
             this.$nextTick(() => {
-              this.$refs.treeControl.setState(options.visibility);
+              this.$refs.treeControls.setState(options.visibility);
             });
           }
         }
@@ -1023,8 +1090,8 @@ export default {
         viewport: undefined,
         visibility: undefined,
       };
-      if (this.$refs.treeControl)
-        state.visibility = this.$refs.treeControl.getState();
+      if (this.$refs.treeControls)
+        state.visibility = this.$refs.treeControls.getState();
       if (this.$module.scene) {
         let zincCameraControls = this.$module.scene.getZincCameraControls();
         state.viewport = zincCameraControls.getCurrentViewport();
@@ -1053,7 +1120,7 @@ export default {
                   .getZincCameraControls()
                   .setCurrentCameraSettings(state.viewport);
               if (state.visibility)
-                this.$refs.treeControl.setState(state.visibility);
+                this.$refs.treeControls.setState(state.visibility);
             } else {
               this.$module.setFinishDownloadCallback(
                 this.setURLFinishCallback({
@@ -1083,8 +1150,8 @@ export default {
         let visibility =
           state && state.visibility ? state.visibility : undefined;
         this._currentURL = newValue;
-        if (this.$refs.treeControl)
-          this.$refs.treeControl.clear();
+        if (this.$refs.treeControls)
+          this.$refs.treeControls.clear();
         this.loading = true;
         this.isReady = false;
         this.$module.setFinishDownloadCallback(
@@ -1157,6 +1224,9 @@ export default {
     },
     syncControlCallback: function() {
       const payload = this.$module.NDCCameraControl.getPanZoom();
+      if (this.tData.visible) {
+        this.showRegionTooltip(this.tData.label);
+      }
       this.$emit("scaffold-navigated", payload);
     },
     /** 

package/src/components/TreeControls.vue

@@ -21,7 +21,7 @@
           :data="treeData"
           :default-checked-keys="['__r/']"
           :expand-on-click-node="false"
-          :renderAfterExpand="false"
+          :render-after-expand="false"
           @check="checkChanged"
         >
           <span
@@ -35,7 +35,7 @@
             @mouseover="changeHoverByNode(data, true)"
           >
             <el-color-picker
-              v-if="data.primitives"
+              v-if="data.isPrimitives"
               :class="{ 'show-picker': showColourPicker }"
               :value="getColour(data)"
               size="small"
@@ -92,13 +92,6 @@ const nameSorting = (a, b) => {
 export default {
   name: "TreeControls",
   props: {
-    /**
-     * @ignore
-     */
-    module: {
-      type: Object,
-      default: undefined,
-    },
     /**
      * Enable/disable colour picker
      */
@@ -122,22 +115,6 @@ export default {
       },
     },
   },
-  created: function () {
-    this.module.sceneData.geometries.forEach(zincObject => {
-      this.zincObjectAdded(zincObject);
-    });
-    this.module.sceneData.lines.forEach(zincObject => {
-      this.zincObjectAdded(zincObject);
-    });
-    this.module.sceneData.glyphsets.forEach(zincObject => {
-      this.zincObjectAdded(zincObject);
-    });
-    this.module.sceneData.pointsets.forEach(zincObject => {
-      this.zincObjectAdded(zincObject);
-    });
-    this.module.addOrganPartAddedCallback(this.zincObjectAdded);
-    this.__nodeNumbers = 1;
-  },
   destroyed: function () {
     this.sortedPrimitiveGroups = undefined;
   },
@@ -146,8 +123,7 @@ export default {
       //The following block prevent duplicate graphics with the same name
       for (let i = 0; i < parentContainer.length; i++) {
         if (parentContainer[i].id === item.id) {
-          if (item.primitives && parentContainer[i].primitives) {
-            parentContainer[i].primitives.push(...item.primitives);
+          if (item.isPrimitives && parentContainer[i].isPrimitives) {
             return;
           }
         }
@@ -165,10 +141,10 @@ export default {
     // '__r/'
     findOrCreateRegion: function (data, paths, prefix) {
       //check if root region has been set
-      if (!this.treeData[0].region && this.module && this.module.scene) {
-        this.treeData[0].region = this.module.scene.getRootRegion();
+      if ((this.treeData[0].regionPath === undefined) && this.$module && this.$module.scene) {
+        this.treeData[0].regionPath = "";
+        this.treeData[0].isRegion = true;
       }
-
       if (paths.length > 0) {
         const _paths = [...paths];
         let childRegion = data.children.find(
@@ -177,12 +153,12 @@ export default {
         const path = prefix + "/" + paths[0];
         const id = "__r" + path;
         if (!childRegion) {
-          const region = this.treeData[0].region.findChildFromPath(path);
           childRegion = {
             label: _paths[0],
             id: id,
             children: [],
-            region: region,
+            regionPath: path,
+            isRegion: true,
           };
           this.addTreeItem(data.children, childRegion);
         }
@@ -232,7 +208,7 @@ export default {
             const child = {
               label: zincObject.groupName,
               id: id,
-              primitives: [zincObject],
+              isPrimitives: true,
               regionPath: zincObject.region.getFullPath(),
             };
             this.addTreeItem(regionData.children, child);
@@ -241,15 +217,19 @@ export default {
       }
     },
     checkChanged: function (node, data) {
-      const isRegion = node.region;
-      const isPrimitives = node.primitives;
+      const isRegion = node.isRegion;
+      const isPrimitives = node.isPrimitives;
       const isChecked = data.checkedKeys.includes(node.id);
-      if (isRegion)
-        isChecked ? node.region.showAllPrimitives() : node.region.hideAllPrimitives();
-      if (isPrimitives)
-        node.primitives.forEach(primitive => {
+      const region = this.$module.scene.getRootRegion().findChildFromPath(node.regionPath);
+      if (isRegion) {
+        isChecked ? region.showAllPrimitives() : region.hideAllPrimitives();
+      }
+      if (isPrimitives) {
+        const primitives = region.findObjectsWithGroupName(node.label);
+        primitives.forEach(primitive => {
           primitive.setVisibility(isChecked);
         });
+      }
     },
     updateActiveUI: function (primitives) {
       this.active.length = 0;
@@ -280,27 +260,31 @@ export default {
      * Select a region by its name.
      */
     changeActiveByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.module.scene.getRootRegion();
+      const rootRegion = this.$module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(rootRegion, names,
-        regionPath);
+        regionPath, true);
       this.changeActiveByPrimitives(targetObjects, propagate);
     },
     /**
      * Hover a region by its name.
      */
     changeHoverByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.module.scene.getRootRegion();
+      const rootRegion = this.$module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(rootRegion, names,
-        regionPath);
+        regionPath, true);
       this.changeHoverByPrimitives(targetObjects, propagate);
     },
     changeActiveByNode: function (node, propagate) {
-      if (node.primitives)
-        this.changeActiveByPrimitives(node.primitives, propagate);
+      if (node.isPrimitives) {
+        const targetObjects = this.getZincObjectsFromNode(node, false);
+        this.changeActiveByPrimitives(targetObjects, propagate);
+      }
     },
     changeHoverByNode: function (node, propagate) {
-      if (node.primitives)
-        this.changeHoverByPrimitives(node.primitives, propagate);
+      if (node.isPrimitives) {
+        const targetObjects = this.getZincObjectsFromNode(node, false);
+        this.changeHoverByPrimitives(targetObjects, propagate);
+      }
     },
     /**
      * Unselect the current selected region.
@@ -328,8 +312,10 @@ export default {
       this.$emit("object-selected", undefined);
     },
     getColour: function (nodeData) {
+      //Do not need to check for primitives as this is checked on the template
       if (nodeData) {
-        let graphic = nodeData.primitives[0];
+        const targetObjects = this.getZincObjectsFromNode(nodeData, false);
+        let graphic = targetObjects[0];
         if (graphic) {
           let hex = graphic.getColourHex();
           if (hex) return "#" + hex;
@@ -337,19 +323,43 @@ export default {
       }
       return "#FFFFFF";
     },
+    getZincObjectsFromNode: function(node, transverse) {
+      const rootRegion = this.$module.scene.getRootRegion();
+      return findObjectsWithNames(rootRegion, node.label,
+        node.regionPath, transverse);
+    },
+    //Set this right at the beginning.
+    setModule: function (moduleIn) {
+      this.$module = moduleIn;
+      this.$module.primitiveData.geometries.forEach(zincObject => {
+        this.zincObjectAdded(zincObject);
+      });
+      this.$module.primitiveData.lines.forEach(zincObject => {
+        this.zincObjectAdded(zincObject);
+      });
+      this.$module.primitiveData.glyphsets.forEach(zincObject => {
+        this.zincObjectAdded(zincObject);
+      });
+      this.$module.primitiveData.pointsets.forEach(zincObject => {
+        this.zincObjectAdded(zincObject);
+      });
+      this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
+      this.__nodeNumbers = 1;
+    },
     setColour: function (nodeData, value) {
-      if (nodeData && nodeData.primitives) {
-        nodeData.primitives.forEach(primitive => {
+      if (nodeData && nodeData.isPrimitives) {
+        const targetObjects = this.getZincObjectsFromNode(nodeData, false);
+        targetObjects.forEach(primitive => {
           let hexString = value.replace("#", "0x");
           primitive.setColourHex(hexString);
         });
       }
     },
     viewAll: function () {
-      this.module.viewAll();
+      this.$module.viewAll();
     },
     visibilityToggle: function (item, event) {
-      this.module.changeOrganPartsVisibility(item, event);
+      this.$module.changeOrganPartsVisibility(item, event);
       if (event == false) {
         if (this.activeRegion === item) {
           this.removeActive(true);
@@ -366,9 +376,15 @@ export default {
     setTreeVisibility: function(node, list) {
       let flag = false;
       if (list.includes(node.id)) flag = true;
-      if (node.region) node.region.setVisibility(flag);
-      if (node.primitives) node.primitives.forEach(primitive => primitive.setVisibility(flag))
-      if (node.children) node.children.forEach(child => this.setTreeVisibility(child, list));
+      const region = this.$module.scene.getRootRegion().findChildFromPath(node.regionPath);
+      if (node.isRegion)
+        region.setVisibility(flag);
+      if (node.isPrimitives) {
+        const primitives = region.findObjectsWithGroupName(node.label);
+        primitives.forEach(primitive => primitive.setVisibility(flag))
+      }
+      if (node.children)
+        node.children.forEach(child => this.setTreeVisibility(child, list));
     },
     checkAllKeys: function () {
       const keysList = [];

package/src/scripts/RendererModule.js

@@ -10,8 +10,8 @@ const createRenderer = function () {
   const localContainer = document.createElement( 'div' );
   let localRenderer = undefined;;
   localContainer.style.height = "100%";
+  const Zinc = require('zincjs');
   if (WEBGL.isWebGLAvailable()) {
-    const Zinc = require('zincjs');
     localRenderer = new Zinc.Renderer(localContainer, window);
     Zinc.defaultMaterialColor = 0xFFFF9C;
     localRenderer.initialiseVisualisation();
@@ -20,7 +20,7 @@ const createRenderer = function () {
     const warning = WEBGL.getWebGLErrorMessage();
     localContainer.appendChild(warning);
   }
-  return {"renderer":localRenderer, "container":localContainer};
+  return {Zinc, "renderer":localRenderer, "container":localContainer};
 }
 
 const RendererModule = function()  {
@@ -264,6 +264,7 @@ RendererModule.prototype.getPlayRate = function(value) {
 RendererModule.prototype.initialiseRenderer = function(displayAreaIn) {
   if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
     let returnedValue = createRenderer();
+    this.Zinc = returnedValue["Zinc"];
     this.zincRenderer = returnedValue["renderer"];
     this.rendererContainer = returnedValue["container"];
   }

package/src/scripts/graphicsHighlight.js

@@ -60,7 +60,7 @@ exports.GraphicsHighlight = function() {
   }
   
   this.setHighlighted = function(objects) {
-    const previousHighlightedObjects = currentHighlightedObjects;
+    const previousHighlightedObjects = [...currentHighlightedObjects];
     _this.resetHighlighted();
     // Selected object cannot be highlighted
     const array = getUnmatchingObjects(objects, currentSelectedObjects);
@@ -75,9 +75,9 @@ exports.GraphicsHighlight = function() {
 
   this.setSelected = function(objects) {
     // first find highlighted object that are not selected
-    const previousHSelectedObjects = currentSelectedObjects;
+    const previousHSelectedObjects = [...currentSelectedObjects];
     const array = getUnmatchingObjects(currentHighlightedObjects, objects);
-    currentHighlightedObjects = array;
+    _this.resetHighlighted();
     _this.resetSelected();
     const fullList = getFullListOfObjects(objects);
     for (let i = 0; i < fullList.length; i++) {