Handle json parsing error and add on error callback.

package.json

@@ -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",

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"
@@ -640,6 +641,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) {

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();

src/components/ScaffoldVuer.vue

@@ -2209,6 +2209,11 @@ export default {
         }
       }
     },
+    downloadErrorCallback: function() {
+      return (error) => {
+        this.$emit('on-error', error);
+      }
+    },
     setURLFinishCallback: function (options) {
       return () => {
         this.localAnnotationsList.length = 0;
@@ -2368,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,

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();