@abi-software/scaffoldvuer 0.1.53-wc-1 → 0.1.54-beta.2

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.53-wc",
+  "version": "0.1.54-beta.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -15645,11 +15645,6 @@
         "webpack-merge": "^4.2.2"
       }
     },
-    "vue-custom-element": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/vue-custom-element/-/vue-custom-element-3.3.0.tgz",
-      "integrity": "sha512-ePuy1EDDJd9/piwXLwsCyMQ964HsdhXPzypM9OX0r4JBa20EVN28U7RXeTWwXkoFKim/b3sP7xT2NEM0Di6tUQ=="
-    },
     "vue-docgen-api": {
       "version": "4.47.0",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.47.0.tgz",
@@ -17197,9 +17192,9 @@
       }
     },
     "zincjs": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.0.3.tgz",
-      "integrity": "sha512-S4ajnPitOO8VD6i9MpLXW4s9p1SBj1hQSxTnIbT6GwHUSDhGXCjkNPSqXhX4Ki/q6/48mbz2hLdDBBJY7qkkxA==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.0.6.tgz",
+      "integrity": "sha512-2fbss7FugYU0hnvmJJhq3y1rybFYgUH6jsjaqs3vNuLEdCcvPPqzgDEYrgUFoV1Rc8FhwIMwk2mJPhNLQvztcQ==",
       "requires": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.53-wc-1",
+  "version": "0.1.54-beta.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -10,11 +10,10 @@
     "serve": "vue-cli-service serve --port 8081",
     "lint": "vue-cli-service lint --ext .js,.vue src",
     "build-bundle": "vue-cli-service build --target lib --name scaffoldvuer ./src/components/index.js",
-    "build-wc": "vue-cli-service build --target lib --name scaffoldvuer-wc ./src/ScaffoldVuer-wc.js --mode production --env bundle",
     "styleguide": "vue-cli-service styleguidist",
     "styleguide:build": "vue-cli-service styleguidist:build"
   },
-  "main": "./dist/scaffoldvuer-wc.umd.min.js",
+  "main": "./dist/scaffoldvuer.common.js",
   "files": [
     "dist/*",
     "src/*",
@@ -32,10 +31,9 @@
     "lodash": "^4.17.21",
     "query-string": "^6.11.1",
     "vue": "^2.6.10",
-    "vue-custom-element": "^3.3.0",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^1.0.3"
+    "zincjs": "^1.0.6"
   },
   "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,7 @@ export default {
       rendererInfo: undefined,
       zoom: 1,
       pos: [0, 0],
+      format: "metadata",
       sceneSettings: [],
     };
   },
@@ -366,10 +368,9 @@ export default {
       console.log("ready")
       this.$refs.dropzone.revokeURLs();
       //const names = ["left ventricle.mesh2d", "right ventricle.mesh2d"];
-      //this.$refs.scaffold.changeActiveByName(names, "", true);
+      //this.$refs.scaffold.changeActiveByName(names, "", false);
     },
     onSelected: function(data) {
-      console.log(data)
       if (data && (data.length > 0) && data[0].data.group) {
         delete this.$route.query["viewURL"];
         this.$router.replace({
@@ -382,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) {
@@ -405,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/ScaffoldVuer.vue

@@ -339,7 +339,7 @@ export default {
      */
     displayWarning: {
       type: Boolean,
-      default: false
+      default: true
     },
     /**
      * Warning message for the hovered over text
@@ -354,7 +354,7 @@ export default {
      */
     displayMarkers: {
       type: Boolean,
-      default: false
+      default: true
     },
     /**
      * 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;