zincjs 2.4.1-beta.3 → 2.4.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "2.4.1-beta.3",
+  "version": "2.4.1-beta.4",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",

package/src/loaders/GLTFToZincJSLoader.js

@@ -123,13 +123,16 @@ const GLTFToZincJSLoader = function () {
    * @param {String} url - URL to the GLTF file
    * @param {Function} finishCallback - Callback function which will be called
    * once the glyphset is succssfully load in.
+   * @param {Function} isCancelled - Optional function returning true if this
+   * load has been cancelled, the loaded content will be discarded.
    */
-  this.load = (scene, region, url, finishCallback, allCompletedCallback, options) => {
+  this.load = (scene, region, url, finishCallback, allCompletedCallback, options, isCancelled) => {
     const path = url.substring(0, url.lastIndexOf("/") + 1);
     const filename = url.substring(url.lastIndexOf("/") + 1, url.length);
     const loader = new GLTFLoader().setPath(path);
 
     loader.load( filename, function ( gltf ) {
+      if (isCancelled && isCancelled()) return;
       console.log(gltf)
       _this.parseGLTFObjects(gltf.scene, region, 0, finishCallback);
       _this.setCamera(scene);

package/src/loaders/JSONLoader.js

@@ -302,7 +302,7 @@ Object.assign( JSONLoader.prototype, {
 
 					}
 
-					const attribute = new Float32BufferAttribute( array, 3 );
+					const attribute = new BufferAttribute( array, 3 );
 					attribute.name = json.morphTargets[ i ].name;
 					morphPositions.push( attribute );
 
@@ -321,7 +321,7 @@ Object.assign( JSONLoader.prototype, {
 						const srcNormals = json.morphNormals[ i ].normals;
 						const array = Float32Array.from( srcNormals );
 
-						const attribute = new Float32BufferAttribute( array, 3 );
+						const attribute = new BufferAttribute( array, 3 );
 						attribute.name = morphPositions[ i ].name;
 						morphNormals[ i ] = attribute;
 

package/src/loaders/primitivesLoader.js

@@ -124,7 +124,7 @@ const IndexedSourcesHandler = function(urlIn, crossOrigin, onDownloadedCallback)
       if (data) {
         processItemDownloaded(item);
       } else {
-        processItemError(error);
+        processItemError(item);
       }
     } else if (downloading) {
       //quene it up

package/src/primitives/glyphset.js

@@ -22,6 +22,8 @@ const Glyphset = function () {
   let axis2s = undefined;
   let axis3s = undefined;
   let positions = undefined;
+  //Glyph geometry loaded after dispose is discarded
+  let disposed = false;
   let scales = undefined;
   let colors = undefined;
   let labels = undefined;
@@ -149,6 +151,7 @@ const Glyphset = function () {
    * geometry is loaded.
    */
   this.load = (glyphsetData, glyphURL, finishCallback, isInline, displayLabels) => {
+    disposed = false;
     axis1s = glyphsetData.axis1;
     axis2s = glyphsetData.axis2;
     axis3s = glyphsetData.axis3;
@@ -856,6 +859,10 @@ const Glyphset = function () {
 
   var meshloader = (finishCallback, displayLabels) => {
     return (geometry, materials) => {
+      if (disposed) {
+        geometry.dispose();
+        return;
+      }
       this.geometry.copy(geometry);
       this.geometry.computeBoundingSphere();
       this.geometry.computeBoundingBox();
@@ -1063,6 +1070,7 @@ const Glyphset = function () {
    * Clear this glyphset and its list of glyphs which will release them from the memory.
    */
   this.dispose = () => {
+    disposed = true;
     for (let i = glyphList.length - 1; i >= 0; i--) {
       glyphList[i].dispose();
     }

package/src/primitives/lod.js

@@ -26,6 +26,8 @@ const LOD = function (parent) {
   this._loader = undefined;
   //The owning Zinc Object
   this._parent = parent;
+  //Levels loaded after dispose are discarded
+  this._disposed = false;
 
   /*
    * Add a level of LOD at the specified distance
@@ -182,6 +184,7 @@ const LOD = function (parent) {
   }
 
   this.dispose = () => {
+    this._disposed = true;
     this.levels.forEach((level) => {
       if (level.morph && level.morph.geometry) {
         level.morph.geometry.dispose();
@@ -212,6 +215,10 @@ const LOD = function (parent) {
  */
   this.lodLoader = function (distance) {
     return (geometryIn) => {
+      if (this._disposed) {
+        geometryIn.dispose();
+        return;
+      }
       const material = this._material;
       const options = {
         localTimeEnabled: this._parent.timeEnabled,

package/src/primitives/texturePrimitive.js

@@ -70,4 +70,16 @@ const TexturePrimitive = function (textureIn) {
 
 TexturePrimitive.prototype = Object.create(ZincObject.prototype);
 TexturePrimitive.prototype.constructor = TexturePrimitive;
+
+/**
+ * Free the textures and the other allocated memory.
+ */
+TexturePrimitive.prototype.dispose = function() {
+  const textures = new Set(this.textureList);
+  if (this.texture) textures.add(this.texture);
+  textures.forEach(texture => texture.dispose());
+  this.texture = undefined;
+  this.textureList = [];
+  ZincObject.prototype.dispose.call(this);
+}
 export { TexturePrimitive };

package/src/primitives/textureSlides.js

@@ -277,6 +277,11 @@ const TextureSlides = function (textureIn) {
       if (slide.material)
         slide.material.dispose();
     });
+    if (maskTexture) {
+      maskTexture.dispose();
+      maskTexture = undefined;
+      maskEnabled = false;
+    }
     TexturePrimitive.prototype.dispose.call(this);
     this.boundingBoxUpdateRequired = true;
   }

package/src/primitives/zincObject.js

@@ -565,6 +565,10 @@ ZincObject.prototype.getBoundingBox = function() {
 ZincObject.prototype.dispose = function() {
   //multilayyers
   this._lod.dispose();
+  if (this.marker) {
+    this.marker.dispose();
+    this.marker = undefined;
+  }
   this.animationGroup = undefined;
   this.mixer = undefined;
   this.morph = undefined;

package/src/region.js

@@ -445,13 +445,18 @@ let Region = function (parentIn, sceneIn) {
    */
   this.clear = transverse => {
     if (transverse) {
-      children.forEach(childRegion => childRegion.clear(transverse));
+      children.forEach(childRegion => {
+        childRegion.clear(transverse);
+        group.remove(childRegion.getGroup());
+      });
     }
     zincObjects.forEach(zincObject => {
       group.remove(zincObject.getGroup());
       zincObject.dispose();
     });
-    children = [];
+    if (transverse) {
+      children = [];
+    }
     zincObjects = [];
   }
 

package/src/scene.js

@@ -1025,7 +1025,7 @@ const Scene = function (containerIn, rendererIn) {
     rootRegion.clear(true);
     this.clearZincObjectAddedCallbacks();
     this.clearZincObjectRemovedCallbacks();
-    sceneLoader.toBeDwonloaded = 0;
+    sceneLoader.cancelPendingLoads();
     if (zincCameraControls) {
       zincCameraControls.calculateMaxAllowedDistance(this);
     }

package/src/sceneLoader.js

@@ -27,7 +27,30 @@ const SceneLoader = function (sceneIn) {
   this.progressMap = {};
   let viewLoaded = false;
   let errorDownload = false;
+  //Incremented when pending loads are cancelled, loads requested
+  //before the increment are discarded once they complete.
+  let generation = 0;
   const primitivesLoader = new PrimitivesLoader();
+
+  /**
+   * Cancel all pending downloads, objects from the cancelled downloads
+   * will be discarded instead of being added into the scene once they
+   * arrive.
+   */
+  this.cancelPendingLoads = () => {
+    generation++;
+    this.toBeDownloaded = 0;
+    this.progressMap = {};
+    viewLoaded = false;
+    errorDownload = false;
+  }
+
+  //Return a function which returns true if the loads requested before
+  //this call have been cancelled.
+  const createStaleCheck = () => {
+    const requestGeneration = generation;
+    return () => requestGeneration !== generation;
+  }
   /**
    * This function returns a three component array, which contains
    * [totalsize, totalLoaded and errorDownload] of all the downloads happening
@@ -62,7 +85,9 @@ const SceneLoader = function (sceneIn) {
   }
 
   this.onError = finishCallback => {
+    const isStale = createStaleCheck();
     return xhr => {
+      if (isStale()) return;
       this.toBeDownloaded = this.toBeDownloaded - 1;
       errorDownload = true;
       console.error(`There is an issue with external resource ${xhr?.responseURL ? ": " +  xhr?.responseURL: ""}.`);
@@ -116,6 +141,7 @@ const SceneLoader = function (sceneIn) {
   this.loadViewURL = (url, finishCallback) => {
     this.toBeDownloaded += 1;
     const requestURL = url;
+    const isStale = createStaleCheck();
     fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -124,6 +150,7 @@ const SceneLoader = function (sceneIn) {
         return response.json();
       })
       .then((viewData) => {
+        if (isStale()) return;
         scene.setupMultipleViews("default", { "default" : viewData });
         scene.resetView();
         viewLoaded = true;
@@ -176,6 +203,7 @@ const SceneLoader = function (sceneIn) {
    */
   this.loadFromViewURL = (targetRegion, jsonFilePrefix, finishCallback) => {
     const requestURL = jsonFilePrefix + "_view.json";
+    const isStale = createStaleCheck();
     fetch(requestURL)
     .then((response) => {
       if (!response.ok) {
@@ -184,6 +212,7 @@ const SceneLoader = function (sceneIn) {
       return response.json();
     })
     .then((viewData) => {
+      if (isStale()) return;
       scene.loadView(viewData);
       const urls = [];
       const filename_prefix = jsonFilePrefix + "_";
@@ -209,7 +238,12 @@ const SceneLoader = function (sceneIn) {
   //Internal loader for a regular zinc geometry.
   const linesloader = (region, localTimeEnabled, localMorphColour, groupName,
     anatomicalId, renderOrder, lod, tubeLines, finishCallback) => {
+      const isStale = createStaleCheck();
       return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       const newLines = tubeLines ? new TubeLines() : new Lines();
       let material = undefined;
       if (materials && materials[0]) {
@@ -276,7 +310,9 @@ const SceneLoader = function (sceneIn) {
   }
 
   const glyphsetloader = (region, glyphurl, groupName, finishCallback, options) => {
+    const isStale = createStaleCheck();
     return (data) => {
+      if (isStale()) return;
       let glyphsetData = data;
       if (typeof glyphsetData === 'string' || glyphsetData instanceof String) {
         glyphsetData = JSON.parse(data);
@@ -292,6 +328,7 @@ const SceneLoader = function (sceneIn) {
       newGlyphset.setDuration(scene.getDuration());
       newGlyphset.groupName = groupName;
       let myCallback = () => {
+        if (isStale()) return;
         --this.toBeDownloaded;
         if (finishCallback != undefined && (typeof finishCallback == 'function'))
           finishCallback(newGlyphset);
@@ -358,7 +395,12 @@ const SceneLoader = function (sceneIn) {
 
   //Internal loader for zinc pointset.
   const pointsetloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
+    const isStale = createStaleCheck();
     return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       const newPointset = new Pointset();
       let material = new THREE.PointsMaterial(
         {
@@ -554,7 +596,12 @@ const SceneLoader = function (sceneIn) {
       }
       if (newTexture) {
         newTexture.groupName = groupName;
+        const isStale = createStaleCheck();
         let myCallback = () => {
+          if (isStale()) {
+            newTexture.dispose();
+            return;
+          }
           //Add zincObject after it has sort out all the required download
           region.addZincObject(newTexture);
           --this.toBeDownloaded;
@@ -582,6 +629,7 @@ const SceneLoader = function (sceneIn) {
       loadTexture(region, undefined, url, groupName, finishCallback, options);
     } else {
       const requestURL = url;
+      const isStale = createStaleCheck();
       fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -591,6 +639,7 @@ const SceneLoader = function (sceneIn) {
         return response.json().then((textureData) => ({ textureData, referenceURL }));
       })
       .then(({textureData, referenceURL}) => {
+        if (isStale()) return;
         loadTexture(region, referenceURL, textureData, groupName, finishCallback, options);
       })
       .catch((error) => {
@@ -662,7 +711,12 @@ const SceneLoader = function (sceneIn) {
     options,
     finishCallback
   ) => {
+    const isStale = createStaleCheck();
     return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       let material = undefined;
       if (materials && materials[0]) {
         material = materials[0];
@@ -831,7 +885,8 @@ const SceneLoader = function (sceneIn) {
    */
   this.loadGLTF = (region, url, finishCallback, allCompletedCallback, options) => {
     const loader = new GLTFToZincJSLoader();
-    loader.load(scene, region, url, finishCallback, allCompletedCallback, options);
+    loader.load(scene, region, url, finishCallback, allCompletedCallback, options,
+      createStaleCheck());
   }
 
   let loadRegions = (currentRegion, referenceURL, regions, callback) => {
@@ -993,6 +1048,7 @@ const SceneLoader = function (sceneIn) {
     */
   this.loadMetadataURL = (targetRegion, url, finishCallback, allCompletedCallback, options) => {
     const requestURL = url;
+    const isStale = createStaleCheck();
     fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -1002,6 +1058,7 @@ const SceneLoader = function (sceneIn) {
         return response.json().then((metadata) => ({ metadata, referenceURL }));
       })
       .then(({metadata, referenceURL}) => {
+        if (isStale()) return;
         scene.resetMetadata();
         scene.resetDuration();
         viewLoaded = false;

package/src/texture/texture.js

@@ -70,6 +70,16 @@ Texture.prototype.loadFromImages = async function (srcArrays) {
   return
 }
 
+/**
+ * Free the memory allocated for this texture.
+ */
+Texture.prototype.dispose = function () {
+  if (this.impl) {
+    this.impl.dispose();
+    this.impl = undefined;
+  }
+}
+
 /**
  * Return true if the texture is ready for consumption.
  *

package/src/texture/textureArray.js

@@ -121,4 +121,13 @@ const TextureArray = function () {
 }
 
 TextureArray.prototype = Object.create(Texture.prototype);
+
+/**
+ * Free the memory allocated for this texture array.
+ */
+TextureArray.prototype.dispose = function () {
+  Texture.prototype.dispose.call(this);
+  this.imageData = undefined;
+}
+
 export { TextureArray };