@abi-software/scaffoldvuer 1.6.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.2.0",
+    "@abi-software/map-utilities": "^1.3.0",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
@@ -54,7 +54,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",

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/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

@@ -308,7 +308,7 @@
               </template>
             </div>
             <el-row class="viewing-mode-description">
-              {{ viewingModes[viewingMode] }}
+              {{ modeDescription }}
             </el-row>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -805,7 +805,7 @@ export default {
       viewingMode: "Exploration",
       viewingModes: {
         "Exploration": "View and explore detailed visualization of 3D scaffolds",
-        "Annotation": "View internal identifiers of features",
+        "Annotation": ['View feature annotations', 'Add, comment on and view feature annotations'],
       },
       openMapRef: undefined,
       backgroundIconRef: undefined,
@@ -918,24 +918,6 @@ export default {
       }
       this.previousMarkerLabels = markRaw({...labels});
     },
-    annotationDisplay: function(value) {
-      if (this.annotationSidebar) {
-        if (value) {
-          const region = this.tData.region ? this.tData.region +"/" : "";
-          const annotationEntry = {
-            "featureId": region + this.tData.label,
-            "resourceId": this.url,
-            "resource": this.url,
-          };
-          this.$emit('annotation-open', {annotationEntry: annotationEntry,
-            commitCallback: this.commitAnnotationEvent});
-        } else {
-          if (!this.createData.toBeConfirmed || !this.createData.toBeDeleted) {
-            this.$emit("annotation-close");
-          }
-        }
-      }
-    }
   },
   beforeCreate: function () {
     this.$module = new OrgansViewer();
@@ -977,7 +959,17 @@ export default {
     annotationDisplay: function() {
       return this.viewingMode === 'Annotation' && this.tData.active === true &&
         (this.activeDrawMode !== "Point" && this.activeDrawMode !== 'LineString');
-    }
+    },
+    modeDescription: function () {
+      let description = this.viewingModes[this.viewingMode];
+      if (this.viewingMode === 'Annotation') {
+        if (this.userInformation) {
+          return description[1]
+        }
+        return description[0]
+      };
+      return description;
+    },
   },
   methods: {
     /**
@@ -1337,6 +1329,7 @@ export default {
         this.createData.shape = '';
         this.$module.selectObjectOnPick = true;
       } else if (type === 'tool') {
+        if (this.annotationDisplay) return;
         this.activeDrawTool = icon;
         this.createData.shape = this.activeDrawTool ? this.activeDrawTool : '';
         this.$module.selectObjectOnPick = false;
@@ -2209,6 +2202,11 @@ export default {
         }
       }
     },
+    downloadErrorCallback: function() {
+      return (error) => {
+        this.$emit('on-error', error);
+      }
+    },
     setURLFinishCallback: function (options) {
       return () => {
         this.localAnnotationsList.length = 0;
@@ -2368,6 +2366,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/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;
+})