@abi-software/scaffoldvuer 0.1.52 → 0.1.53-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.52",
+  "version": "0.1.53-beta.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "vue": "^2.6.10",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^1.0.0"
+    "zincjs": "^1.0.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

package/src/App.vue

@@ -338,6 +338,7 @@ export default {
         })
     },
     saveSettings: function() {
+      const state = this.$refs.scaffold.getState();
       this._sceneSettings.push(this.$refs.scaffold.getState());
     },
     restoreSettings: function() {
@@ -362,10 +363,13 @@ export default {
       }
     },
     onReady: function() {
+      console.log("ready")
       this.$refs.dropzone.revokeURLs();
+      const names = ["left ventricle.mesh2d", "right ventricle.mesh2d"];
+      this.$refs.scaffold.changeActiveByName(names, "", false);
     },
     onSelected: function(data) {
-      if (data && data[0].data.group) {
+      if (data && (data.length > 0) && data[0].data.group) {
         delete this.$route.query["viewURL"];
         this.$router.replace({
           query: { ...this.$route.query, region: data[0].data.group }

package/src/components/ScaffoldTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="position" class="tooltipContainer">
+  <div :style="position" class="region-tooltip">
     <el-popover
       ref="tooltip"
       v-model="display"
@@ -82,45 +82,45 @@ export default {
 <style scoped lang="scss">
 @import "~element-ui/packages/theme-chalk/src/popover";
 
-::v-deep .tooltip-popper {
-  padding: 2px 6px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  font-size: 16px;
-  color: $app-primary-color;
-  background-color: #fff;
-  border: 1px solid $app-primary-color;
-  border-radius: 4px;
-  white-space: nowrap;
-  min-width: unset;
-  pointer-events: none;
+.region-tooltip {
+  position: absolute;
+  height: 50px;
+  z-index: 2;
+  ::v-deep .tooltip-popper {
+    padding: 2px 6px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    font-size: 16px;
+    color: $app-primary-color;
+    background-color: #fff;
+    border: 1px solid $app-primary-color;
+    border-radius: 4px;
+    white-space: nowrap;
+    min-width: unset;
+    pointer-events: none;
+    top: -15px!important;
 
-  &.el-popper[x-placement^="top"] {
-    .popper__arrow {
-      border-top-color: $app-primary-color !important;
-      &:after {
-        border-top-color: #fff !important;
+    &.el-popper[x-placement^="top"] {
+      .popper__arrow {
+        border-top-color: $app-primary-color !important;
+        &:after {
+          border-top-color: #fff !important;
+        }
       }
     }
-  }
 
-  &.el-popper[x-placement^="bottom"] {
-    .popper__arrow {
-      border-bottom-color: $app-primary-color !important;
-      &:after {
-        border-bottom-color: #fff !important;
+    &.el-popper[x-placement^="bottom"] {
+      .popper__arrow {
+        border-bottom-color: $app-primary-color !important;
+        &:after {
+          border-bottom-color: #fff !important;
+        }
       }
     }
   }
-}
 
-.tooltipContainer {
-  position: absolute;
-  height: 50px;
-  z-index: 2;
-}
-
-::v-deep .non-selectable {
-  user-select: none;
-  pointer-events: none;
+  ::v-deep .non-selectable {
+    user-select: none;
+    pointer-events: none;
+  }
 }
 </style>

package/src/components/ScaffoldVuer.vue

@@ -249,7 +249,7 @@ import OpacityControls from "./OpacityControls";
 import ScaffoldTooltip from "./ScaffoldTooltip";
 import TreeControls from "./TreeControls";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
-
+import { findObjectsWithNames } from "../scripts/utilities.js";
 import {
   Col,
   Loading,
@@ -535,8 +535,8 @@ export default {
   beforeCreate: function() {
     this.$module = new OrgansViewer();
     this.isReady = false;
-    this.selectedObject = undefined;
-    this.hoveredObject = undefined;
+    this.selectedObjects = [];
+    this.hoveredObjects = [];
     this.currentBackground = "white";
     this._currentURL = undefined;
     this.availableBackground = ["white", "black", "lightskyblue"];
@@ -682,8 +682,10 @@ export default {
     /**
      * Focus on named region
      */
-    viewRegion: function(name) {
-      let objects = this.findObjectsWithGroupName(name);
+    viewRegion: function(names) {
+      const rootRegion = this.$module.scene.getRootRegion();
+      const groups = Array.isArray(names) ? names : [names];
+      const objects = findObjectsWithNames(rootRegion, groups, "");
       let box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
       if (box) {
         if (this.$module.isSyncControl()) {
@@ -744,14 +746,22 @@ export default {
      * It will also update other controls.
      */
     eventNotifierCallback: function(event) {
+      const names = [];
+      const region = undefined;
+      if (event.eventType == 1 || event.eventType == 2) {
+        event.identifiers.forEach(identifier => {
+          if (identifier) {
+            let id = identifier.data.id
+              ? identifier.data.id
+              : identifier.data.group;
+            names.push(id);
+          }
+        });
+      }
       if (event.eventType == 1) {
         if (this.$refs.treeControl) {
-          if (event.identifiers[0]) {
-            let id = event.identifiers[0].data.id
-              ? event.identifiers[0].data.id
-              : event.identifiers[0].data.group;
-            let region = event.identifiers[0].data.region;
-            this.$refs.treeControl.changeActiveByName(id, region, true);
+          if (names.length > 0) {
+            this.$refs.treeControl.changeActiveByNames(names, region, false);
           } else {
             this.$refs.treeControl.removeActive(true);
           }
@@ -760,28 +770,29 @@ export default {
         this.$emit("scaffold-selected", event.identifiers);
       } else if (event.eventType == 2) {
         this.tData.visible = false;
-        const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
-        if (event.identifiers[0]) {
+       // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
+        if (this.$refs.treeControl) {
+          if (names.length > 0) {
+            this.$refs.treeControl.changeHoverByNames(names, region, false);
+          } else {
+            this.$refs.treeControl.removeHover(true);
+          }
+        }
+        if ((event.identifiers.length > 0) && event.identifiers[0]) {
           let id = event.identifiers[0].data.id
             ? event.identifiers[0].data.id
             : event.identifiers[0].data.group;
           if (event.identifiers[0].coords) {
             this.tData.visible = true;
             this.tData.label = id;
-            this.tData.x = event.identifiers[0].coords.x - offsets.left;
-            this.tData.y = event.identifiers[0].coords.y - offsets.top;
-          }
-          if (this.$refs.treeControl) {
-            let region = event.identifiers[0].data.region;
-            this.$refs.treeControl.changeHoverByName(id, region, true);
-          } else {
-            this.$refs.treeControl.removeHover(true);
+            this.tData.x = event.identifiers[0].coords.x;
+            this.tData.y  = event.identifiers[0].coords.y;
           }
         }
         // Triggers when an object has been highlighted
         this.$emit("scaffold-highlighted", event.identifiers);
       } else if (event.eventType == 3)  { //MOVE
-        if (event.identifiers[0]) {
+        if ((event.identifiers.length > 0) && event.identifiers[0]) {
           if (event.identifiers[0].coords) {
             const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
             this.tData.x = event.identifiers[0].coords.x - offsets.left;
@@ -796,8 +807,8 @@ export default {
      * @public
      */
     getCoordinatesOfSelected: function() {
-      if (this.selectedObject) {
-        return this.$module.scene.getObjectsScreenXY([this.selectedObject]);
+      if (this.selectedObjects && this.selectedObjects.length > 0) {
+        return this.$module.scene.getObjectsScreenXY([this.selectedObjects]);
       }
       return undefined;
     },
@@ -824,47 +835,54 @@ export default {
      *
      * @param {object} object Zinc object
      */
-    objectSelected: function(object, propagate) {
-      if (object !== this.selectedObject) {
-        this.selectedObject = object;
-        this.$refs.opacityControl.setObject(this.selectedObject);
-        if (object) this.$module.setSelectedByZincObject(object, undefined, propagate);
-        else this.$module.setSelectedByObjects([], undefined, propagate);
-      }
+    objectSelected: function(objects, propagate) {
+      this.selectedObjects = objects;
+      if (this.selectedObjects)
+        this.$refs.opacityControl.setObject(this.selectedObjects[0]);
+      if (objects) this.$module.setSelectedByZincObjects(objects, undefined, propagate);
+      else this.$module.setSelectedByObjects([], undefined, propagate);
     },
     /**
      * A callback used by children components. Set the highlighted zinc object
      *
      * @param {object} object Zinc object
      */
-    objectHovered: function(object, propagate) {
-      if (object !== this.hoveredObject) {
-        this.hoveredObject = object;
-        if (object) this.$module.setHighlightedByZincObject(object, undefined, propagate);
-        else this.$module.setHighlightedByObjects([], undefined, propagate);
-      }
+    objectHovered: function(objects, propagate) {
+      this.hoveredObjects = objects;
+      if (objects) this.$module.setHighlightedByZincObjects(objects, undefined, propagate);
+      else this.$module.setHighlightedByObjects([], undefined, propagate);
     },
     /**
      * Set the selected by name.
      *
-     * @param {name} name Name of the group
+     * @param {} name Name of the group
      */
-    changeActiveByName: function(name, region, propagate) {
-      if (name === undefined)
+    changeActiveByName: function(names, region, propagate) {
+      const isArray = Array.isArray(names);
+      if (names === undefined || (isArray && names.length === 0)) {
         this.$refs.treeControl.removeActive(propagate);
-      else
-        this.$refs.treeControl.changeActiveByName(name, region, propagate);
+      } else {
+        let array = names;
+        if (!isArray)
+          array = [array];
+        this.$refs.treeControl.changeActiveByNames(array, region, propagate);
+      }
     },
     /**
      * Set the highlighted by name.
      *
      * @param {name} name Name of the group
      */
-    changeHighlightedByName: function(name, region, propagate) {
-      if (name === undefined)
+    changeHighlightedByName: function(names, region, propagate) {
+      const isArray = Array.isArray(names);
+      if (names === undefined || (isArray && names.length === 0)) {
         this.$refs.treeControl.removeHover(propagate);
-      else
-        this.$refs.treeControl.changeHoverByName(name, region, propagate);
+      } else {
+        let array = names;
+        if (!isArray)
+          array = [array];
+        this.$refs.treeControl.changeHoverByNames(array, region, propagate);
+      }
     },
     /**
      * Start the animation.
@@ -1104,8 +1122,12 @@ export default {
       const payload = this.$module.NDCCameraControl.getPanZoom();
       this.$emit("scaffold-navigated", payload);
     },
-    toggleSyncControl: function(flag) {
-      this.$module.toggleSyncControl(flag);
+    /** 
+     * Rotate mode - "none", "horizontal", "vertical", "free" but
+     * it will be ignored if flag is set to false.
+     */
+    toggleSyncControl: function(flag, rotateMode) {
+      this.$module.toggleSyncControl(flag, rotateMode);
       this.$module.setSyncControlCallback(this.syncControlCallback);
     }
   }

package/src/components/TreeControls.vue

@@ -17,7 +17,7 @@
           default-expand-all
           node-key="id"
           show-checkbox
-          :check-strictly="true"
+          :check-strictly="false"
           :data="treeData"
           :default-checked-keys="['__r/']"
           :expand-on-click-node="false"
@@ -27,14 +27,8 @@
             slot-scope="{ node, data }"
             class="region-tree-node"
             :class="{
-              activeItem: 
-                (active.group === data.label && 
-                  ((active.regionPath === data.regionPath) || 
-                  active.regionPath === undefined)),
-              hoverItem: 
-                (hover.group === data.label && 
-                  ((hover.regionPath === data.regionPath) || 
-                  hover.regionPath === undefined))
+              activeItem: nodeIsActive(data),
+              hoverItem: nodeIsHover(data),
             }"
             @click="changeActiveByNode(data, true)"
             @mouseover="changeHoverByNode(data, true)"
@@ -68,6 +62,7 @@ import Vue from "vue";
 import { Checkbox, CheckboxGroup, ColorPicker, Row, Tree } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
+import { createListFromPrimitives, extractAllIds, findObjectsWithNames } from "../scripts/utilities.js";
 
 const orderBy = require("lodash/orderBy");
 const uniq = require("lodash/uniq");
@@ -90,12 +85,6 @@ const nameSorting = (a, b) => {
   return 0;
 };
 
-const extractAllIds = (item, list) => {
-  list.push(item.id);
-  if (item.children)
-    item.children.forEach(child => extractAllIds(child, list));
-}
-
 /**
  * A vue component for toggling visibility of various regions.
  */
@@ -117,8 +106,8 @@ export default {
   data: function () {
     return {
       treeData: [{ label: "Root", id: "__r/", children: [] }],
-      active: {group: "", regionPath: undefined},
-      hover: {group: "", regionPath: undefined},
+      active: [{group: "", regionPath: undefined}],
+      hover: [{group: "", regionPath: undefined}],
       myPopperClass: "hide-scaffold-colour-popup",
       drawerOpen: true,
     };
@@ -201,6 +190,28 @@ export default {
         return data;
       }
     },
+    nodeIsActive: function(data) {
+      for (let i = 0; i < this.active.length; i++) {
+        let item = this.active[i];
+        if (item.group === data.label && 
+          ((item.regionPath === item.regionPath) || 
+          item.regionPath === undefined)) {
+          return true;
+        }
+      }
+      return false;
+    },
+    nodeIsHover: function(data) {
+      for (let i = 0; i < this.hover.length; i++) {
+        let item = this.hover[i];
+        if (item.group === data.label && 
+          ((item.regionPath === item.regionPath) || 
+          item.regionPath === undefined)) {
+          return true;
+        }
+      }
+      return false;
+    },
     /**
      * This is called when a new organ is read into the scene.
      */
@@ -228,30 +239,37 @@ export default {
       }
     },
     checkChanged: function (node, data) {
-      let checked = data.checkedKeys.includes(node.id);
-      if (node.region) node.region.setVisibility(checked);
-      if (node.primitives) {
-        node.primitives.forEach(primitive => {
-          primitive.setVisibility(checked);
-        });
-      }
+      const rootRegion = this.module.scene.getRootRegion();
+      rootRegion.hideAllChildren();
+      data.checkedNodes.forEach(localNode => {
+        if (localNode.region) localNode.region.setVisibility(true);
+        if (localNode.primitives) {
+          localNode.primitives.forEach(primitive => {
+            primitive.setVisibility(true);
+          });
+        }
+      });
+      data.halfCheckedNodes.forEach(localNode => {
+        if (localNode.region) localNode.region.setVisibility(true);
+      });
     },
-    changeActiveByPrimitive: function (primitive, propagate) {
-      if (primitive && primitive.getVisibility()) {
-        this.active.group = primitive.groupName;
-        this.active.regionPath = primitive.region.getFullPath();
-        console.log(this.active)
-        this.$emit("object-selected", primitive, propagate);
+    changeActiveByPrimitives: function (primitives, propagate) {
+      if (primitives && primitives.length > 0) {
+        this.active = [];
+        const list = createListFromPrimitives(primitives);
+        this.active.push(...list);
+        this.$emit("object-selected", primitives, propagate);
       } else {
         this.removeActive(propagate);
       }
       this.removeHover(propagate);
     },
-    changeHoverByPrimitive: function (primitive, propagate) {
-      if (primitive) {
-        this.hover.group = primitive.groupName;
-        this.hover.regionPath = primitive.region.getFullPath();
-        this.$emit("object-hovered", primitive, propagate);
+    changeHoverByPrimitives: function (primitives, propagate) {
+      if (primitives && primitives.length > 0) {
+        this.hover = [];
+        const list = createListFromPrimitives(primitives);
+        this.hover.push(...list);
+        this.$emit("object-hovered", primitives, propagate);
       } else {
         this.removeHover(propagate);
       }
@@ -259,43 +277,41 @@ export default {
     /**
      * Select a region by its name.
      */
-    changeActiveByName: function (name, regionPath, propagate) {
+    changeActiveByNames: function (names, regionPath, propagate) {
       const rootRegion = this.module.scene.getRootRegion();
-      const targetRegion = rootRegion.findChildFromPath(regionPath);
-      let targetObject = this.getFirstZincObjectWithGroupName(targetRegion, name);
-      this.changeActiveByPrimitive(targetObject, propagate);
+      const targetObjects = findObjectsWithNames(rootRegion, names,
+        regionPath);
+      this.changeActiveByPrimitives(targetObjects, propagate);
     },
     /**
      * Hover a region by its name.
      */
-    changeHoverByName: function (name, regionPath, propagate) {
+    changeHoverByNames: function (names, regionPath, propagate) {
       const rootRegion = this.module.scene.getRootRegion();
-      const targetRegion = rootRegion.findChildFromPath(regionPath);
-      let targetObject = this.getFirstZincObjectWithGroupName(targetRegion, name);
-      this.changeHoverByPrimitive(targetObject, propagate);
+      const targetObjects = findObjectsWithNames(rootRegion, names,
+        regionPath);
+      this.changeHoverByPrimitives(targetObjects, propagate);
     },
     changeActiveByNode: function (node, propagate) {
       if (node.primitives)
-        this.changeActiveByPrimitive(node.primitives[0], propagate);
+        this.changeActiveByPrimitives(node.primitives, propagate);
     },
     changeHoverByNode: function (node, propagate) {
       if (node.primitives)
-        this.changeHoverByPrimitive(node.primitives[0], propagate);
+        this.changeHoverByPrimitives(node.primitives, propagate);
     },
     /**
      * Unselect the current selected region.
      */
     removeActive: function (propagate) {
-      this.active.group = "";
-      this.active.regionPath = undefined;
+      this.active = [];
       this.$emit("object-selected", undefined, propagate);
     },
     /**
      * Unselect the current hover region.
      */
     removeHover: function (propagate) {
-      this.hover.group = "";
-      this.hover.regionPath = undefined;
+      this.hover = [];
       this.$emit("object-hovered", undefined, propagate);
     },
     /**
@@ -309,19 +325,6 @@ export default {
       this.$refs.regionTree.updateKeyChildren( "__r/", []);
       this.$emit("object-selected", undefined);
     },
-    getFirstZincObjectWithGroupName: function (region, name) {
-      if (region) {
-        let array = region.findGeometriesWithGroupName(name);
-        if (array.length > 0) return array[0];
-        array = region.findGlyphsetsWithGroupName(name);
-        if (array.length > 0) return array[0];
-        array = region.findLinesWithGroupName(name);
-        if (array.length > 0) return array[0];
-        array = region.findPointsetsWithGroupName(name);
-        if (array.length > 0) return array[0];
-      }
-      return undefined;
-    },
     getColour: function (nodeData) {
       if (nodeData) {
         let graphic = nodeData.primitives[0];
@@ -333,12 +336,11 @@ export default {
       return "#FFFFFF";
     },
     setColour: function (nodeData, value) {
-      if (nodeData) {
-        let graphic = nodeData.primitives[0];
-        if (graphic) {
+      if (nodeData && nodeData.primitives) {
+        nodeData.primitives.forEach(primitive => {
           let hexString = value.replace("#", "0x");
-          graphic.setColourHex(hexString);
-        }
+          primitive.setColourHex(hexString);
+        });
       }
     },
     viewAll: function () {

package/src/scripts/RendererModule.js

@@ -103,9 +103,17 @@ RendererModule.prototype.setHighlightedByObjects = function(
 }
 
 
-RendererModule.prototype.setHighlightedByZincObject = function(
-  zincObject, coords, propagateChanges) {
-    return this.setHighlightedByObjects([zincObject ? zincObject.morph : undefined], coords,propagateChanges);
+RendererModule.prototype.setHighlightedByZincObjects = function(
+  zincObjects, coords, propagateChanges) {
+    let morphs = [];
+    if (zincObjects) {
+      zincObjects.forEach(zincObject => {
+        if (zincObject && zincObject.morph)
+          morphs.push(zincObject.morph);
+      });
+    }
+
+    return this.setHighlightedByObjects(morphs, coords,propagateChanges);
 }
 
 RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
@@ -160,10 +168,17 @@ RendererModule.prototype.setSelectedByObjects = function(
   return changed;
 }
 
-RendererModule.prototype.setSelectedByZincObject = function(
-  zincObject, coords, propagateChanges) {
-  return this.setSelectedByObjects([zincObject ? zincObject.morph : undefined],
-    coords, propagateChanges);
+RendererModule.prototype.setSelectedByZincObjects = function(
+  zincObjects, coords, propagateChanges) {
+  let morphs = [];
+  if (zincObjects) {
+    zincObjects.forEach(zincObject => {
+      if (zincObject && zincObject.morph)
+        morphs.push(zincObject.morph);
+    });
+  }
+
+  return this.setSelectedByObjects(morphs, coords, propagateChanges);
 }
 
 const addGlyphToArray = function(objects) {

package/src/scripts/organsRenderer.js

@@ -84,14 +84,16 @@ const OrgansSceneData = function() {
 		_this.sceneData.currentTime = currentTime / duration * 100.0;
   }
 
-  this.toggleSyncControl = (flag) => {
+  this.toggleSyncControl = (flag, rotateMode) => {
     let cameraControl = this.scene.getZincCameraControls();
     if (flag) {
       cameraControl.resetView();
       this.NDCCameraControl = cameraControl.enableSyncControl();
+      cameraControl.setRotationMode(rotateMode);
     } else {
       cameraControl.disableSyncControl();
       this.NDCCameraControl = undefined;
+      cameraControl.setRotationMode("free");
     }
   }
 
@@ -225,7 +227,7 @@ const OrgansSceneData = function() {
           if (idObject.object.name)
             _this.setSelectedByObjects([idObject.object], coords, true);
           else
-            _this.setSelectedByZincObject(idObject.object.userData.getGlyphset(),
+            _this.setSelectedByZincObjects(idObject.object.userData.getGlyphset(),
               coords, true);
         } else {
           _this.setSelectedByObjects([idObject.object], coords, true);

package/src/scripts/utilities.js

@@ -0,0 +1,34 @@
+export const createListFromPrimitives = primitives => {
+  const list = [];
+  if (primitives) {
+    primitives.forEach(primitive => {
+      if (primitive && primitive.getVisibility()) {
+        list.push({
+          group: primitive.groupName,
+          regionPath: primitive.region.getFullPath()
+        });
+      }
+    });
+  }
+  return list;
+}
+
+export const extractAllIds = (item, list) => {
+  list.push(item.id);
+  if (item.children)
+    item.children.forEach(child => extractAllIds(child, list));
+}
+
+export const findObjectsWithNames = (rootRegion, names, regionPath) => {
+  let targetRegion = rootRegion;
+  const targetObjects = [];
+  if (regionPath)
+    targetRegion = rootRegion.findChildFromPath(regionPath);
+  if (targetRegion) {
+    names.forEach(name => {
+      const temp = targetRegion.findObjectsWithGroupName(name, true);
+      targetObjects.push(...temp);
+    });
+  }
+  return targetObjects;
+}