zincjs 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "main": "build/zinc.js",
   "directories": {

package/src/loaders/primitivesLoader.js

@@ -1,4 +1,137 @@
 const JSONLoader = require('./JSONLoader').JSONLoader;
+const THREE = require('three');
+const FileLoader = THREE.FileLoader;
+
+const mergeGeometries = (geometries) => {
+  const merge = (geometry1, geometry2) => {
+    geometry1.merge(geometry2);
+  }
+
+  if (geometries && geometries.length > 0) {
+    while (geometries.length > 1) {
+      const geometry2 = geometries.splice(1,1);
+      merge(geometries[0], geometry2[0]);
+    }
+    return geometries[0];
+  }
+  return undefined;
+}
+
+const IndexedSourcesHandler = function(urlIn, crossOrigin, onDownloadedCallback) {
+  const allData = [];
+  const loader = new FileLoader();
+  const jsonLoader = new JSONLoader();
+  loader.crossOrigin = crossOrigin;
+  const url = urlIn;
+  const onDownloaded = onDownloadedCallback;
+  let data = undefined;
+  let downloading = false;
+  let finished = false;
+  let error = undefined;
+  const items = [];
+
+  const processItemDownloaded = (item) => {
+    const modelData = data[item.index];
+    if (modelData) {
+      let obj = jsonLoader.parse( modelData );
+      item.onLoad(obj.geometry, obj.materials);
+    } else {
+      processItemError(item, {responseURL: url});
+    }
+  }
+
+  const processItemError = (item) => {
+    if (item.onError) {
+      if (!error) {
+        error = {responseURL: url};
+      }
+      item.onError(error);
+    }
+  }
+
+  this.downloadCompleted = (args) => {
+    try {
+      data = JSON.parse(args[0]);
+      downloading = false;
+      finished = true;
+      if (Array.isArray(data)) {
+        items.forEach(item => processItemDownloaded(item));
+      } else {
+        items.forEach(item => processItemError(item));
+      }
+    } catch {
+      items.forEach(item => processItemError(item));
+    }
+  }
+
+  const errorHandling = () => {
+    return xhr => {
+      error = xhr;
+      finished = true;
+      downloading = false;
+      items.forEach((item) => {
+        processItemError(item);
+      });
+    }
+  }
+
+  const progressHandling = () => {
+    return xhr => {
+      items.forEach((item) => {
+        if (item.onProgress) {
+          item.onProgress(xhr);
+        }
+      });
+    }
+  }
+
+  this.load = (index, onLoad, onProgress, onError) => {
+    const item = {
+      index,
+      onLoad,
+      onProgress,
+      onError,
+    };
+    if (finished) {
+      if (data) {
+        processItemDownloaded(item);
+      } else {
+        processItemError(error);
+      }
+    } else if (downloading) {
+      //quene it up
+      items.push(item);
+    } else {
+      items.push(item);
+      downloading = true;
+      loader.load(url, onDownloaded, progressHandling, errorHandling);
+    }
+  }
+}
+
+const MultiSourcesHandler = function(numberIn, onLoadCallback) {
+  const allData = [];
+  const number = numberIn;
+  const onLoad = onLoadCallback;
+  let totalDownloaded = 0;
+
+  this.itemDownloaded = (order, args) => {
+    allData[order]= args;
+    totalDownloaded++;
+    if (totalDownloaded == number) {
+      const materials = allData[0][1];
+      const geometries = allData.map((data) => data[0]);
+      //All geometries will be merged into the first one
+      const geometry = mergeGeometries(geometries);
+      for (let i = 1; i < number; i++) {
+        allData[order][0].dispose();
+        allData[order][1].forEach((material) => material.dispose());
+      }
+      onLoad(geometry, materials);
+    }
+  }
+
+}
 
 exports.PrimitivesLoader = function () {
   let concurrentDownloads = 0;
@@ -6,41 +139,97 @@ exports.PrimitivesLoader = function () {
   this.crossOrigin = "Anonymous";
   const loader = new JSONLoader();
   const waitingList = [];
+  //URL to loader pair
+  const indexedLoaders = {};
 
-  this.load = (url, onLoad, onProgress, onError) => {
-    if (MAX_DOWNLOAD > concurrentDownloads) {
+  //Load the first file then the rest will be handled separately
+  const loadFromMultipleSources = (urls, onLoad, onProgress, onError, options) => {
+    const number = urls.length;
+    const msHandler = new MultiSourcesHandler(number, onLoad);
+    //The order here will give us hint on the sequence on merging the primitives
+    let order = 0;
+    urls.forEach((url) => {
+      const newOptions = options ? {...options} : {};
+      newOptions.msHandler = msHandler;
+      newOptions.order = order;
+      order++;
+      loadFromSingleSource(url, onLoad, onProgress, onError, newOptions);
+    });
+  }
+
+  const handleIndexedSource = (url, onLoad, onProgress, onError, options) => {
+    const newOptions = options ? {...options} : {};
+    let indexedLoader = indexedLoaders[url];
+    if (!indexedLoader) {
+      const onLoadCallback = new onFinally(undefined, this, newOptions);
       ++concurrentDownloads;
-      loader.crossOrigin = this.crossOrigin;
-      const onLoadCallback = new onFinally(onLoad, this);
-      const onErrorCallback = new onFinally(onError, this);
-      loader.load(url, onLoadCallback, onProgress, onErrorCallback);
+      indexedLoader = new IndexedSourcesHandler(url, this.crossOrigin, onLoadCallback);
+      indexedLoaders[url] = indexedLoader;
+    }
+    newOptions.isHandler = indexedLoader;
+    indexedLoader.load(options.index, onLoad, onProgress, onError);
+  }
+
+  const loadFromSingleSource = (url, onLoad, onProgress, onError, options) => {
+    if (MAX_DOWNLOAD > concurrentDownloads) {
+      if (options && (options.index !== undefined) ) {
+        handleIndexedSource(url, onLoad, onProgress, onError, options);
+      } else {
+        //Standard loading
+        ++concurrentDownloads;
+        const onLoadCallback = new onFinally(onLoad, this, options);
+        const onErrorCallback = new onFinally(onError, this, options);
+        loader.crossOrigin = this.crossOrigin;
+        loader.load(url, onLoadCallback, onProgress, onErrorCallback);
+      }
     } else {
       waitingList.push({
         url,
         onLoad,
         onProgress,
-        onError
+        onError,
+        options,
       });
     }
   }
 
+  this.load = (url, onLoad, onProgress, onError, options) => {
+    if (Array.isArray(url)) {
+      loadFromMultipleSources(url, onLoad, onProgress, onError, options);
+    } else {
+      loadFromSingleSource(url, onLoad, onProgress, onError, options);
+    }
+  }
+
   this.loadFromWaitingList = () => {
     const item = waitingList.shift();
-    if (item)
-      this.load(item.url, item.onLoad, item.onProgress, item.onError);
+    if (item) {
+      this.load(item.url, item.onLoad, item.onProgress, item.onError, item.options);
+    } else {
+      for (let key in indexedLoaders) {
+        if (indexedLoaders.hasOwnProperty(key)) {
+          delete indexedLoaders[key];
+        }
+      }
+    }
   }
 
-  const onFinally = function(callback, loader) {
+  const onFinally = function(callback, loader, options) {
     return (...args) => {
       --concurrentDownloads;
-      if (callback) {
-        callback(...args);
+      if (options?.msHandler) {
+        options.msHandler.itemDownloaded(options.order, args);
+      } else if (options?.isHandler) {
+        options.isHandler.downloadCompleted(args);
+      } else {
+        if (callback) {
+          callback(...args);
+        }
       }
       loader.loadFromWaitingList();
     }
   }
 
-
   this.parse = data => {
     return loader.parse(data);
   }

package/src/primitives/lod.js

@@ -71,7 +71,7 @@ const LOD = function (parent) {
     }
   }
 
-  this.addLevelFromURL = (loader, level, url, preload) => {
+  this.addLevelFromURL = (loader, level, url, index, preload) => {
     this._loader = loader;
     const distance = this.calculateDistance(level);
     const levelObject = {
@@ -80,6 +80,7 @@ const LOD = function (parent) {
       loaded: false,
       loading: false,
       url: url,
+      index: index,
     };
     let l;
     for (l = 0; l < this.levels.length; l++) {
@@ -100,7 +101,7 @@ const LOD = function (parent) {
       !level.loading) {
       level.loading = true;
       this._loader.load(level.url, this.lodLoader(level.distance),
-        undefined, undefined);
+        undefined, undefined, {index: level.index});
     }
     return (level.morph === undefined);
   }

package/src/primitives/zincObject.js

@@ -1,5 +1,6 @@
 const THREE = require('three');
 const createBufferGeometry = require('../utilities').createBufferGeometry;
+const resolveURL = require('../utilities').resolveURL;
 
 let uniqueiId = 0;
 
@@ -664,12 +665,11 @@ ZincObject.prototype.render = function(delta, playAnimation,
   this.updateMarker(playAnimation, options);
 }
 
-
 /**
  * Add lod from an url into the lod object.
  */
-ZincObject.prototype.addLOD = function(loader, level, url, preload) {
-  this._lod.addLevelFromURL(loader, level, url, preload);
+ZincObject.prototype.addLOD = function(loader, level, url, index, preload) {
+  this._lod.addLevelFromURL(loader, level, url, index, preload);
 }
 
 /**
@@ -679,7 +679,7 @@ ZincObject.prototype.addVertices = function(coords) {
   let mesh = this.getMorph();
   let geometry = undefined;
   if (!mesh) {
-    geometry = createBufferGeometry((coords.length + 500), coords);
+    geometry = createBufferGeometry(500, coords);
     this.drawRange = coords.length;
   } else {
     if (this.drawRange > -1) {
@@ -713,6 +713,11 @@ ZincObject.prototype.setPosition = function(x, y, z) {
   }
 }
 
+ZincObject.prototype.loadAdditionalSources = function(primitivesLoader, sources) {
+  primitivesLoader.load(resolveURL(filename), meshloader(region, colour, opacity, localTimeEnabled, localMorphColour, undefined, undefined,
+    undefined, undefined, finishCallback), this.onProgress(filename), this.onError(finishCallback));
+}
+
 /**
  * Set the objects scale.
  * 

package/src/sceneLoader.js

@@ -59,6 +59,7 @@ exports.SceneLoader = function (sceneIn) {
     return xhr => {
       this.toBeDownloaded = this.toBeDownloaded - 1;
       errorDownload = true;
+      console.error(`There is an issue with one of the external resource: ${xhr?.responseURL}.`);
       if (finishCallback) {
         finishCallback();
       }
@@ -182,7 +183,8 @@ exports.SceneLoader = function (sceneIn) {
   }
 
   //Internal loader for a regular zinc geometry.
-  const linesloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, lod, finishCallback) => {
+  const linesloader = (region, localTimeEnabled, localMorphColour, groupName,
+    anatomicalId, renderOrder, lod, finishCallback) => {
     return (geometry, materials) => {
       const newLines = new (require('./primitives/lines').Lines)();
       let material = undefined;
@@ -198,7 +200,6 @@ exports.SceneLoader = function (sceneIn) {
       let options = {};
       options.localTimeEnabled = localTimeEnabled;
       options.localMorphColour = localMorphColour;
-
       if (newLines) {
         newLines.createLineSegment(geometry, material, options);
         newLines.setName(groupName);
@@ -206,9 +207,11 @@ exports.SceneLoader = function (sceneIn) {
         newLines.setRenderOrder(renderOrder);
         region.addZincObject(newLines);
         newLines.setDuration(scene.getDuration());
+        console.log(lod)
         if (lod && lod.levels) {
           for (const [key, value] of Object.entries(lod.levels)) {
-            newLines.addLOD(primitivesLoader, key, value.URL, lod.preload);
+            
+            newLines.addLOD(primitivesLoader, key, value.URL, value.Index, lod.preload);
           }
         }
       }
@@ -240,12 +243,13 @@ exports.SceneLoader = function (sceneIn) {
 	  if (morphColour != undefined)
 		  localMorphColour = morphColour ? true : false;
     if (isInline) {
-      var object = primitivesLoader.parse( url );
+      let object = primitivesLoader.parse( url );
       (linesloader(region, localTimeEnabled, localMorphColour, groupName, anatomicalId,
         renderOrder, options.lod, finishCallback))( object.geometry, object.materials );
     } else {
       primitivesLoader.load(url, linesloader(region, localTimeEnabled, localMorphColour, groupName, 
-        anatomicalId, renderOrder, options.lod, finishCallback), this.onProgress(url), this.onError(finishCallback));
+        anatomicalId, renderOrder, options.lod, finishCallback), this.onProgress(url), this.onError(finishCallback),
+        options.loaderOptions);
     }
   }
 
@@ -389,7 +393,8 @@ exports.SceneLoader = function (sceneIn) {
         loader = new OBJLoader();
         loader.crossOrigin = "Anonymous";
         loader.load(url, objloader(region, colour, opacity, localTimeEnabled,
-          localMorphColour, groupName, anatomicalId, finishCallback), this.onProgress(url), this.onError);
+          localMorphColour, groupName, anatomicalId, finishCallback), this.onProgress(url), this.onError,
+          options.loaderOptions);
         return;
       }
     }
@@ -400,7 +405,8 @@ exports.SceneLoader = function (sceneIn) {
     } else {
       loader.crossOrigin = "Anonymous";
       primitivesLoader.load(url, meshloader(region, colour, opacity, localTimeEnabled,
-        localMorphColour, groupName, anatomicalId, renderOrder, options, finishCallback), this.onProgress(url), this.onError(finishCallback));
+        localMorphColour, groupName, anatomicalId, renderOrder, options, finishCallback),
+        this.onProgress(url), this.onError(finishCallback), options.loaderOptions);
     }
   };
 
@@ -454,7 +460,7 @@ exports.SceneLoader = function (sceneIn) {
     } else {
       primitivesLoader.load(url, pointsetloader(region, localTimeEnabled, localMorphColour,
         groupName, anatomicalId, renderOrder, finishCallback),
-        this.onProgress(url), this.onError(finishCallback));
+        this.onProgress(url), this.onError(finishCallback), options.loaderOptions);
     }
   }
 
@@ -613,7 +619,7 @@ exports.SceneLoader = function (sceneIn) {
       zincGeometry.setRenderOrder(renderOrder);
       if (options.lod && options.lod.levels) {
         for (const [key, value] of Object.entries(options.lod.levels)) {
-          zincGeometry.addLOD(primitivesLoader, key, value.URL, options.lod.preload);
+          zincGeometry.addLOD(primitivesLoader, key, value.URL, value.Index, options.lod.preload);
         }
       }
       --this.toBeDownloaded;
@@ -660,9 +666,10 @@ exports.SceneLoader = function (sceneIn) {
       let newURL = undefined;
       let isInline = false;
       if (item.URL) {
+        //Convert it into an array
         newURL = item.URL;
         if (referenceURL)
-          newURL = createNewURL(item.URL, referenceURL);
+          newURL = createNewURL(newURL, referenceURL);
       } else if (item.Inline) {
         newURL = item.Inline.URL;
         isInline = true;
@@ -674,6 +681,7 @@ exports.SceneLoader = function (sceneIn) {
         for (const [key, value] of Object.entries(item.LOD.Levels)) {
           lod.levels[key] = {};
           lod.levels[key]["URL"] = createNewURL(value.URL, referenceURL);
+          lod.levels[key]["Index"] = value.Index;
         }
       }
       let groupName = item.GroupName;
@@ -682,6 +690,9 @@ exports.SceneLoader = function (sceneIn) {
       }
 
       let options = {
+        loaderOptions: {
+          index: item.Index,
+        },
         isInline: isInline,
         fileFormat: item.FileFormat,
         anatomicalId: item.AnatomicalId,

package/src/three/Geometry.js

@@ -17,6 +17,7 @@ import {
 const _m1 = new Matrix4();
 const _obj = new Object3D();
 const _offset = new Vector3();
+const _temp = new Vector3();
 
 function Geometry() {
 
@@ -648,6 +649,71 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 	},
 
+	mergeMorph: function ( geometry, matrix ) {
+
+		const m = this.morphTargets.length,
+			morphTargets1 = this.morphTargets,
+			morphTargets2 = geometry.morphTargets,
+			n = this.morphColors.length,
+			morphColors1 = this.morphColors,
+			morphColors2 = geometry.morphColors;
+
+    if ( m > 0 && m == morphTargets2.length) {
+
+			for ( let i = 0, l = morphTargets1.length; i < l; i ++ ) {
+
+				const morphTarget1 = morphTargets1[ i ];
+				const morphTarget2 = morphTargets2[ i ];
+
+				for ( let k = 0, kl = morphTarget2.vertices.length; k < kl; k ++ ) {
+
+					const vertex = morphTarget2.vertices[ k ];
+		
+					const vertexCopy = vertex.clone();
+		
+					if ( matrix !== undefined ) vertexCopy.applyMatrix4( matrix );
+		
+					morphTarget1.vertices.push( vertexCopy );
+		
+				}
+
+				if ( morphTarget1.normals && morphTarget2.normals ) {
+					
+					for ( let k = 0; k < morphTarget2.normals.length; k = k + 3) {
+
+						_temp.set(morphTarget2.normals2[k], morphTarget2.normals2[k + 1], morphTarget2.normals2[k + 2]);
+			
+						if ( matrix !== undefined ) _temp.applyMatrix4( matrix );
+			
+						morphTarget1.normals.push(_temp.x, _temp.y, _temp.z);
+			
+					}
+
+				}
+
+			}
+
+		}
+
+		if ( n > 0 && n == morphColors2.length) {
+
+			for ( let i = 0, l = morphColors1.length; i < l; i ++ ) {
+
+				const morphColor1 = morphColors1[ i ];
+				const morphColor2 = morphColors2[ i ];
+
+				for ( let k = 0, kl = morphColor2.colors; k < kl; k ++ ) {
+
+					morphColor1.colors.push( morphColor2.colors[ k ].clone() );
+		
+				}
+
+			}
+
+		}
+
+	},
+
 	merge: function ( geometry, matrix, materialIndexOffset = 0 ) {
 
 		if ( ! ( geometry && geometry.isGeometry ) ) {
@@ -661,6 +727,7 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 		const vertexOffset = this.vertices.length,
 			vertices1 = this.vertices,
 			vertices2 = geometry.vertices,
+			normals2 = geometry.normals,
 			faces1 = this.faces,
 			faces2 = geometry.faces,
 			colors1 = this.colors,
@@ -686,6 +753,16 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 		}
 
+		for ( let i = 0; i < normals2.length; i = i + 3) {
+
+			_temp.set(normals2[i], normals2[i + 1], normals2[i + 2]);
+
+			if ( matrix !== undefined ) _temp.applyMatrix4( matrix );
+
+			this.normals.push(_temp.x, _temp.y, _temp.z);
+
+		}
+
 		// colors
 
 		for ( let i = 0, il = colors2.length; i < il; i ++ ) {
@@ -765,6 +842,8 @@ Geometry.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 		}
 
+		this.mergeMorph( geometry, matrix );
+
 	},
 
 	mergeMesh: function ( mesh ) {

package/src/utilities.js

@@ -19,16 +19,31 @@ function resolveURL(url) {
 }
 
 function createNewURL(target, reference) {
-  let newURL = (new URL(target, reference)).href;
-  //Make sure the target url does not contain parameters
-  if (target && target.split("?").length < 2) {
-    const paramsStrings = reference.split("?");
-    //There are parameters, add them to the target
-    if (paramsStrings.length === 2) {
-      newURL = newURL + "?" + paramsStrings[1];
+  const getNewURL = (target, reference) => {
+    try {
+      let newURL = (new URL(target, reference)).href;
+      //Make sure the target url does not contain parameters
+      if (target && target.split("?").length < 2) {
+        const paramsStrings = reference.split("?");
+        //There are parameters, add them to the target
+        if (paramsStrings.length === 2) {
+          newURL = newURL + "?" + paramsStrings[1];
+        }
+      }
+      return newURL;
+    } catch {
+      console.error(`There is an issue creting the url link with: ${target}.` );
     }
   }
-  return newURL;
+  if (!Array.isArray(target)) {
+    return getNewURL(target, reference);
+  } else {
+    const urls = [];
+    target.forEach((url) => {
+      urls.push(getNewURL(url, reference));
+    });
+    return urls;
+  }
 }
 
 /*