@abi-software/scaffoldvuer 0.1.52-beta.5 → 0.1.53-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.52-beta.5",
+  "version": "0.1.53-beta.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,9 +22,9 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/svg-sprite": "^0.1.14",
+    "@abi-software/svg-sprite": "^0.1.15",
     "axios": "^0.21.2",
-    "core-js": "^3.3.2",
+    "core-js": "^3.22.5",
     "current-script-polyfill": "^1.0.0",
     "element-ui": "^2.13.0",
     "google-spreadsheet": "^3.1.15",
@@ -33,7 +33,7 @@
     "vue": "^2.6.10",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^1.0.0-alpha-3"
+    "zincjs": "^1.0.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

package/src/App.vue

@@ -21,6 +21,7 @@
         :render="render"
         :region="region"
         :view-u-r-l="viewURL"
+        :format="format"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
         @scaffold-navigated="onNavigated"
@@ -288,6 +289,8 @@ export default {
       rendererInfo: undefined,
       zoom: 1,
       pos: [0, 0],
+      format: "metadata",
+      sceneSettings: [],
     };
   },
   watch: {
@@ -307,7 +310,6 @@ export default {
     }
   },
   mounted: function() {
-    this._sceneSettings = [];
     this.selectedCoordinates = this.$refs.scaffold.getDynamicSelectedCoordinates();
     this.rendererInfo = this.$refs.scaffold.getRendererInfo();
   },
@@ -338,11 +340,12 @@ export default {
         })
     },
     saveSettings: function() {
-      this._sceneSettings.push(this.$refs.scaffold.getState());
+      const state = this.$refs.scaffold.getState();
+      this.sceneSettings.push(this.$refs.scaffold.getState());
     },
     restoreSettings: function() {
-      if (this._sceneSettings.length > 0)
-        this.$refs.scaffold.setState(this._sceneSettings.pop());
+      if (this.sceneSettings.length > 0)
+        this.$refs.scaffold.setState(this.sceneSettings.pop());
     },
     viewModelClicked: function(location) {
       this.input = location;
@@ -362,10 +365,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 }
@@ -377,8 +383,10 @@ export default {
       this.pos[0] = data.target[0];
       this.pos[1] = data.target[1];
     },
-    onFilesDrop: function(metaURL) {
-      this.input = metaURL;
+    onFilesDrop: function(payload) {
+      if (payload.format == "gltf") this.format = "gltf";
+      else this.format = "metadata";
+      this.input = payload.url;
     },
     parseInput: function() {
       if (this.$route.query.url !== this.input) {
@@ -400,6 +408,11 @@ export default {
         this.url =
           "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json";
       }
+      if (this.url.includes(".gltf") || this.url.includes(".glb")) {
+        this.format = "gltf";
+      } else if (this.url.includes(".json")) {
+        this.format = "metadata";
+      }
       this.input = this.url;
       if (query.region) {
         this.region = query.region;

package/src/components/DropZone.vue

@@ -33,7 +33,7 @@ export default {
     });
   },
   methods: {
-    createObjectURLs: function (text, list) {
+    createMetadataObjectURLs: function (text, list) {
       let content = text;
       for (const [key, file] of Object.entries(list)) {
         if (content.includes(key)) {
@@ -45,7 +45,14 @@ export default {
       let blob = new Blob([content], { type: "application/json" });
       const metaURL = URL.createObjectURL(blob);
       this.objectURLs.push(metaURL);
-      this.$emit("files-drop", metaURL);
+      this.$emit("files-drop", { url: metaURL, format : "metadata" } );
+    },
+    createGLTFURL: function (content, binary) {
+      let type =  binary ? 'model/gltf+binary' : 'model/gltf+json';
+      let blob = new Blob([content], { type });
+      const gltfURL = URL.createObjectURL(blob);
+      this.objectURLs.push(gltfURL);
+      this.$emit("files-drop", { url: gltfURL, format : "gltf" });
     },
     revokeURLs: function () {
       this.objectURLs.forEach(objectURL => URL.revokeObjectURL(objectURL));
@@ -55,6 +62,8 @@ export default {
       const dataMaps = {};
       let list = {};
       let metadata = undefined;
+      let gltf = undefined;
+      let binary = false;
       const flatarray = Array.from(fileMap);
       let rootPath = "";
       for (let i = 0; i < flatarray.length; i++) {
@@ -63,6 +72,16 @@ export default {
           metadata = { rootPath, file: flatarray[i][1] };
           break;
         }
+        if (flatarray[i][1].name.includes(".glb")) {
+          gltf = { rootPath, file: flatarray[i][1] };
+          binary = true;
+          break;
+        }
+        if (flatarray[i][1].name.includes(".gltf")) {
+          gltf = { rootPath, file: flatarray[i][1] };
+          binary = false;
+          break;
+        }
       }
       if (metadata) {
         flatarray.forEach(([filePath, file]) => {
@@ -74,9 +93,12 @@ export default {
         const metaFileURL = URL.createObjectURL(metadata.file);
         fetch(metaFileURL)
           .then((response) => response.text())
-          .then((text) => this.createObjectURLs(text, list));
+          .then((text) => this.createMetadataObjectURLs(text, list));
         URL.revokeObjectURL(metaFileURL);
       }
+      if (gltf) {
+        this.createGLTFURL(gltf.file, binary);
+      }
     },
   },
 };

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,
@@ -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)
@@ -535,8 +549,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 +696,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 +760,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 +784,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 +821,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 +849,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.
@@ -971,9 +1003,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();
@@ -993,6 +1026,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
           });
@@ -1029,6 +1063,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;
@@ -1045,13 +1080,18 @@ 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.displayMinimap = this.displayMinimap;
         this.updateMinimapScissor();
@@ -1068,9 +1108,8 @@ export default {
     },
     /**
      * Callback when drawer is toggled.
-     *
      */
-    drawerToggled: function(flag) {
+    drawerToggled: function(flag) {pppp
       this.drawerOpen = flag;
       this.adjustLayout();
     },
@@ -1104,8 +1143,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);
     }
   }