@abi-software/scaffoldvuer 1.6.0 → 1.6.2-wc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.6.0",
+  "version": "1.6.2-wc",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -9,6 +9,7 @@
   "scripts": {
     "serve": "vite --host --force",
     "build-bundle": "vite build",
+    "build-wc": "vite build -c vite.web-component.js",
     "build-static": "vite build -c vite.static-build.js",
     "vuese-gen": "node vuese-generator.js",
     "vuese-watch": "node vuese-generator.js watch",
@@ -54,7 +55,7 @@
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.11.4"
+    "zincjs": "^1.11.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
@@ -70,7 +71,8 @@
     "vite": "^5.0.10",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vitepress": "^1.0.0-rc.42",
-    "vue-docgen-api": "^4.79.2"
+    "vue-docgen-api": "^4.79.2",
+    "vue-web-component-wrapper": "^1.6.9"
   },
   "eslintConfig": {
     "root": true,

package/src/App.vue

@@ -29,6 +29,7 @@
         :marker-labels="markerLabels"
         :enableLocalAnnotations="false"
         @open-map="openMap"
+        @on-error="onError"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
         @scaffold-navigated="onNavigated"
@@ -184,6 +185,9 @@
           <el-col :span="auto">
             <el-switch v-model="renderInfoOn" active-text="Renderer Info" active-color="#8300bf" />
           </el-col>
+          <el-button size="small" @click="PrintViewport()">
+              Print Viewport
+            </el-button>
         </el-row>
 
         <template v-if="renderInfoOn && rendererInfo">
@@ -597,6 +601,10 @@ export default {
         this.$refs.scaffold.getDynamicSelectedCoordinates();
       this.rendererInfo = this.$refs.scaffold.getRendererInfo();
     },
+    PrintViewport: function() {
+      const scene = this.$refs.scaffold.$module.scene;
+      console.log(scene.getZincCameraControls().getCurrentViewport());
+    },
     fetchSuggestions: function (term, cb) {
       if (term === "" || !this.$refs.scaffold) {
         cb([]);
@@ -640,6 +648,17 @@ export default {
         }
       });
     },
+    onError: function(payload) {
+      if (payload?.type === "download-error") {
+        const dropZone = this.$refs.dropzone;
+        if (dropZone) {
+          const realFilename = dropZone.findRealFilename(payload.xhr.responseURL);
+          if (realFilename) {
+            console.error(`External Resource ${realFilename}`);
+          }
+        }
+      }
+    },
     onReady: function () {
       if (this.consoleOn) console.log(this.$refs.scaffold)
       if (this.readyCallback) {

package/src/ScaffoldVuer-wc.js

@@ -1,11 +1,19 @@
-import Vue from 'vue'
-import vueCustomElement from 'vue-custom-element';
+import { defineCustomElementSFC } from 'vue-web-component-wrapper';
+import { createPinia, setActivePinia } from "pinia";
+import { useMainStore } from '@/store/index'
 
-Vue.use(vueCustomElement);
+import ScaffoldVuerComponent from "./components/ScaffoldVuer.vue";
 
-import ScaffoldVuer from "./components/ScaffoldVuer.vue";
+setActivePinia(createPinia());
+const mainStore = useMainStore();
+const token = document.cookie.split("; ").find((row) => row.startsWith("user-token"));
+if (mainStore && token) {
+  mainStore.setUserToken(token.split("=")[1]);
+}
 
-Vue.customElement("scaffoldvuer-wc", ScaffoldVuer);
+const ScaffoldVuer = defineCustomElementSFC(ScaffoldVuerComponent, { shadowRoot: false });
+
+customElements.define("scaffoldvuer-wc", ScaffoldVuer);
 
 /*
 const wrappedElement = wrap(Vue, ScaffoldVuer);

package/src/app/DropZone.vue

@@ -13,6 +13,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { markRaw } from 'vue';
 import { SimpleDropzone } from "simple-dropzone";
 import path from "path";
 
@@ -26,7 +27,8 @@ export default {
   name: "DropZone",
   data: function () {
     return {
-      objectURLs: [],
+      objectURLs: markRaw([]),
+      filesMapping: markRaw({}),
     };
   },
   mounted: function () {
@@ -39,6 +41,9 @@ export default {
     });
   },
   methods: {
+    findRealFilename: function(objectURL) {
+      return this.filesMapping[objectURL]
+    },
     processTextureFile: function(textureData, flatarray) {
       if (textureData && textureData.images && textureData.images.source) {
         const images = textureData.images.source;
@@ -50,6 +55,7 @@ export default {
             const objectURL = URL.createObjectURL(flatarray[index][1]);
             this.objectURLs.push(objectURL);
             textureData.images.source[i] = objectURL;
+            this.filesMapping[objectURL] = images[i];
           }
         }
         const content = JSON.stringify(textureData);
@@ -65,6 +71,7 @@ export default {
           const re = new RegExp(key, "g");
           content = content.replace(re, objectURL);
           this.objectURLs.push(objectURL);
+          this.filesMapping[objectURL] = key;
         }
       }
       const data = JSON.parse(content);
@@ -93,7 +100,8 @@ export default {
     },
     revokeURLs: function () {
       this.objectURLs.forEach(objectURL => URL.revokeObjectURL(objectURL));
-      this.objectURLs = [];    
+      this.objectURLs.length = 0;
+      this.filesMapping = markRaw({});
     },
     localDrop: function (fileMap) {
       this.revokeURLs();

package/src/components/ScaffoldVuer.vue

@@ -1338,7 +1338,7 @@ export default {
         this.$module.selectObjectOnPick = true;
       } else if (type === 'tool') {
         this.activeDrawTool = icon;
-        this.createData.shape = this.activeDrawTool;
+        this.createData.shape = this.activeDrawTool ? this.activeDrawTool : '';
         this.$module.selectObjectOnPick = false;
       }
     },
@@ -1544,6 +1544,16 @@ export default {
           });
           zincObjects = event.zincObjects;
         }
+        let id = undefined;
+        let regionPath = undefined;
+        if (event.identifiers.length > 0 && event.identifiers[0]) {
+          id = event.identifiers[0].data.id
+                ? event.identifiers[0].data.id
+                : event.identifiers[0].data.group;
+          if (event.identifiers[0].data.region) {
+            regionPath = event.identifiers[0].data.region;
+          }
+        }
         /*
         * Event Type 1: Selected
         * Event Type 2: Highlighted
@@ -1551,6 +1561,8 @@ export default {
         */
         if (event.eventType == 1) {
           if (this.viewingMode === 'Annotation') {
+            this.tData.label = id;
+            this.tData.region = regionPath;
             this.activateAnnotationMode(names, event);
           } else {
             if (this.$refs.scaffoldTreeControls) {
@@ -1566,7 +1578,7 @@ export default {
             //identifiers.
             if (event.identifiers.length === 1) {
               this.lastSelected.isSearch = false;
-              this.lastSelected.region = event.identifiers[0].data.region;
+              this.lastSelected.region = regionPath;
               this.lastSelected.group = event.identifiers[0].data.group;
             } else if (event.identifiers.length === 0) {
               this.lastSelected.isSearch = false;
@@ -1590,21 +1602,13 @@ export default {
               }
             }
             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.active = false;
-                if (!this.annotationSidebar) {
+                if (this.viewingMode !== "Annotation" ||  !this.annotationSidebar) {
                   this.tData.visible = true;
                 }
                 this.tData.label = id;
-                if (event.identifiers[0].data.region) {
-                  this.tData.region = event.identifiers[0].data.region;
-                }
-                else {
-                  this.tData.region = undefined;
-                }
+                this.tData.region = regionPath;
                 this.tData.x = event.identifiers[0].coords.x;
                 this.tData.y = event.identifiers[0].coords.y;
                 this.createEditTemporaryLines(event.identifiers);
@@ -2205,6 +2209,11 @@ export default {
         }
       }
     },
+    downloadErrorCallback: function() {
+      return (error) => {
+        this.$emit('on-error', error);
+      }
+    },
     setURLFinishCallback: function (options) {
       return () => {
         this.localAnnotationsList.length = 0;
@@ -2364,6 +2373,9 @@ export default {
         this.isReady = false;
         this.$_searchIndex.removeAll();
         this.hideRegionTooltip();
+        this.$module.setDownloadErrorCallback(
+          this.downloadErrorCallback()
+        );
         this.$module.setFinishDownloadCallback(
           this.setURLFinishCallback({
             background: state?.background,

package/src/scripts/OrgansRenderer.js

@@ -40,6 +40,7 @@ const OrgansSceneData = function() {
   const organPartAddedCallbacks = new Array();
 	const organPartRemovedCallbacks = new Array();
   let finishDownloadCallback = undefined;
+	let downloadErrorCallback = undefined;
 	const modelsLoader = ModelsLoaderIn;
   this.NDCCameraControl = undefined;
 	_this.typeName = "Organ Viewer";
@@ -187,6 +188,16 @@ const OrgansSceneData = function() {
     finishDownloadCallback = undefined;
   }
 
+
+  this.setDownloadErrorCallback = function(callback) {
+    if (typeof(callback === "function"))
+      downloadErrorCallback = callback;
+  }
+
+  this.unsetDownloadErrorCallback = function() {
+    downloadErrorCallback = undefined;
+  }
+
   this.getNamedObjectsToScreenCoordinates = function(name, camera) {
     const vector = new THREE.Vector3();
     vector.setFromMatrixPosition( obj.matrixWorld );
@@ -435,11 +446,22 @@ const OrgansSceneData = function() {
           finishDownloadCallback();
 		  }
 	  }
-	  
-	  const singleItemDownloadCompletedCallback = function(systemName, partName, useDefautColour) {
-      return function(geometry) {
-        addOrganPart(systemName, partName, useDefautColour, geometry);
-        _this.settingsChanged();
+
+		//The payload can either be a zinc object when the loading is successful or
+		//an object containg the details of error message on failure.
+		//We only use it to handle an error 
+	  const singleItemFinishCallback = function() {
+      return function(payload) {
+
+				if (payload?.type === "Error") {
+					if (downloadErrorCallback) {
+						const error = {
+							xhr: payload.xhr,
+							type: "download-error",
+						};
+						downloadErrorCallback(error);
+					}
+				}
       }
 	  }
 	  
@@ -549,7 +571,7 @@ const OrgansSceneData = function() {
 			      _this.sceneData.metaURL = url;
 						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
 			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
-						organScene.loadMetadataURL(url, undefined, downloadCompletedCallback());	      
+						organScene.loadMetadataURL(url, singleItemFinishCallback(), downloadCompletedCallback());
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();

package/src/scripts/Search.js

@@ -150,7 +150,6 @@ export class SearchIndex
       let results = undefined;
       if (text.length > 2 && ["'", '"'].includes(text.slice(0, 1))) {
           text = text.replaceAll(text.slice(0, 1), '')
-          console.log(text)
           results = this._searchEngine.search(text, {prefix: true, combineWith: 'AND'})
       } else if (text.length > 1) {
           results = this._searchEngine.search(text, {prefix: true})

package/vite.web-component.js

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite'
+import rootConfig from './vite.config.js'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import vue from '@vitejs/plugin-vue'
+
+// defineWorkspace provides a nice type hinting DX
+export default defineConfig((configEnv) => {
+  const config = rootConfig(configEnv);
+  config.css.extract = false
+  config.plugins.push(
+    nodePolyfills({
+      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
+      include: ['path']
+    })
+  );
+ // config.plugins.push(
+ //   cssInjectedByJsPlugin()
+ // );
+  config.plugins[0] = vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.includes('scaffoldvuer-wc')
+      }
+    }
+  }),
+  config.build = {
+    lib: {
+      entry: './src/ScaffoldVuer-wc.js',
+      name: 'scaffoldvuer-wc',
+      // the proper extensions will be added
+      fileName: 'scaffoldvuer-wc'
+    },
+  }
+
+  return config;
+})