zincjs 1.16.2 → 1.16.3

package/package.json

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

package/src/primitives/textureVolume.js

@@ -0,0 +1,317 @@
+const THREE = require('three');
+const shader = require("../shaders/volumeRender.js");
+/**
+ * Provides a class which create a texture stacks in a block
+ * with shaders allowing slices of texture to be displayed.
+ *
+ * @param {TextureArray} textureIn - An object of texture array
+ * holding texture information.
+ *
+ * @class
+ * @author Alan Wu
+ * @return {TextureSlides}
+ */
+const TextureSlides = function (textureIn) {
+  (require('./texturePrimitive.js').TexturePrimitive).call(this, textureIn);
+  this.isTextureVolume = true;
+  const textureSettings = [];
+  this.morph = new THREE.Group();
+  this.group = this.morph;
+  this.morph.userData = this;
+  let edgesLine = undefined;
+  let flipY = true;
+
+  /**
+    @typedef SLIDE_SETTINGS
+    @type {Set}
+    @property {String} direction - the value must be x, y or z, specify the
+    direction the slide should be facing.
+    @property {Number} value - Normalised value of the location on direction.
+    @property {String} id - ID of the mesh, it is only available if the settings
+    is returned from {@link TextureSlides.createSlide} or
+    {@link TextureSlides.getTextureSettings}.
+   */
+  /**
+   * Create the slides required for visualisation based on the slide settings.
+   * The slides themselves are {THREE.PlanGeometry} objects.
+   *
+   * @param {SLIDE_SETTINGS} slideSettings - An array to each slide settings.
+   */
+  this.createSlides = slideSettings => {
+    slideSettings.forEach(slide => this.createSlide(slide));
+  }
+
+  /**
+   * Set the value of the uniforms for a specific mesh in this
+   * texture slide object.
+   *
+   * @param {THREE.Mesh} mesh - Mesh to be modified
+   * @param {SLIDE_SETTINGS} slideSettings - Slide settings.
+   */
+  const setUniformSlideSettingsOfMesh = (mesh, settings) => {
+    const material = mesh.material;
+    const uniforms = material.uniforms;
+    mesh.rotation.x = 0;
+    mesh.rotation.y = 0;
+    mesh.rotation.z = 0;
+    mesh.position.x = 0;
+    mesh.position.y = 0;
+    mesh.position.z = 0;
+    switch (settings.direction) {
+      case "x":
+        const rotation = -Math.PI / 2;
+        mesh.rotation.y = rotation;
+        uniforms.direction.value = 1;
+        uniforms.slide.value.set(settings.value, 0, 0);
+        mesh.position.x = settings.value;
+        break;
+      case "y":
+        mesh.rotation.x = Math.PI / 2;
+        uniforms.direction.value = 2;
+        uniforms.slide.value.set(0, settings.value, 0);
+        mesh.position.y = settings.value;
+        break;
+      case "z":
+        uniforms.direction.value = 3;
+        uniforms.slide.value.set(0, 0, settings.value);
+        mesh.position.z = settings.value;
+        break;
+      default:
+        break;
+    }
+    material.needsUpdate = true;
+    this.boundingBoxUpdateRequired = true;
+  }
+
+  /**
+   * Modify the mesh based on a setting
+   *
+   * @param {SLIDE_SETTINGS} settings - s.
+   */
+  this.modifySlideSettings = (settings) => {
+    if (settings && settings.id &&
+      settings.id in idTextureMap &&
+      idTextureMap[settings.id]) {
+      setUniformSlideSettingsOfMesh(idTextureMap[settings.id], settings);
+    }
+  }
+
+  /**
+   * Create a slide required for visualisation based on the slide settings.
+   * The slide itself is an {THREE.PlanGeometry} object.
+   *
+   * @param {SLIDE_SETTINGS} settings -settings of the slide to be created.
+   * @return {SLIDE_SETTINGS} - Returned settings, it includes the newly
+   * created mesh's id.
+   */
+  this.createSlide = settings => {
+    if (this.texture && this.texture.isTextureArray && this.texture.isReady()) {
+      if (settings && settings.direction && settings.value !== undefined) {
+        const geometry = new THREE.PlaneGeometry(1, 1);
+        geometry.translate(0.5, 0.5, 0);
+        const uniforms = shader.getUniforms();
+        uniforms.diffuse.value = this.texture.impl;
+        uniforms.depth.value = this.texture.size.depth;
+        uniforms.flipY.value = flipY;
+
+        const options = {
+          fs: shader.fs,
+          vs: shader.vs,
+          uniforms: uniforms,
+          glslVersion: shader.glslVersion,
+          side: THREE.DoubleSide,
+          transparent: false
+        };
+        const material = this.texture.getMaterial(options);
+        material.needsUpdate = true;
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.name = this.groupName;
+        mesh.userData = this;
+        const slideSettings = {
+          value: settings.value,
+          direction: settings.direction,
+          id: mesh.id,
+        };
+        textureSettings.push(slideSettings);
+        setUniformSlideSettingsOfMesh(mesh, slideSettings);
+        idTextureMap[mesh.id] = mesh;
+        this.morph.add(mesh);
+        this.boundingBoxUpdateRequired = true;
+        return slideSettings;
+      }
+    }
+  }
+
+  /**
+   * Return a copy of texture settings used by this object.
+   *
+   * @return {SLIDE_SETTINGS} - Returned the list of settings.
+   */
+  this.getTextureSettings = () => {
+    return [...textureSettings];
+  }
+
+  /**
+   * Return a copy of texture settings with corresponding id used by this object.
+   *
+   * @return {SLIDE_SETTINGS} - Returned a copy of settings with corresponding id.
+   */
+  this.getTextureSettingsWithId = (id) => {
+    for (let i = 0; i < textureSettings.length; i++) {
+      if (id === textureSettings[i].id) {
+        return {...textureSettings[i]};
+      }
+    }
+  }
+
+  /**
+   * Get  the array of slides, return them in an array
+   *
+   * @return {Array} - Return an array of {@link THREE.Object)
+   */
+  this.getSlides = () => {
+    if (this.morph) return [...this.morph.children];
+    return [];
+  }
+
+  /**
+   * Clean up all internal objects.
+   */
+  this.dispose = () => {
+    this.morph.children.forEach(slide => {
+      if (slide.geometry)
+        slide.geometry.dispose();
+      if (slide.material)
+        slide.material.dispose();
+    });
+    (require('./texturePrimitive.js').TexturePrimitive).prototype.dispose.call(this);
+    this.boundingBoxUpdateRequired = true;
+  }
+
+  //Expand the boundingbox with slide settings
+  const expandBoxWithSettings = (box, settings, vector) => {
+    if (settings) {
+      switch (settings.direction.value) {
+        case 1:
+          vector.copy(settings.slide.value);
+          box.expandByPoint(vector);
+          vector.setY(1.0);
+          vector.setZ(1.0);
+          box.expandByPoint(vector);
+          break;
+        case 2:
+          vector.copy(settings.slide.value);
+          box.expandByPoint(vector);
+          vector.setX(1.0);
+          vector.setZ(1.0);
+          box.expandByPoint(vector);
+          break;
+        case 3:
+          vector.copy(settings.slide.value);
+          box.expandByPoint(vector);
+          vector.setX(1.0);
+          vector.setY(1.0);
+          box.expandByPoint(vector);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  /**
+   * Get the bounding box of this slides.
+   * It uses the max and min of the slides position and the
+   * transformation to calculate the position of the box.
+   *
+   * @return {THREE.Box3}.
+   */
+  this.getBoundingBox = () => {
+    if (this.morph && this.morph.children && this.morph.visible &&
+      this.boundingBoxUpdateRequired) {
+      this.cachedBoundingBox.makeEmpty();
+      const vector = new THREE.Vector3(0, 0, 0);
+      this.morph.children.forEach(slide => {
+        expandBoxWithSettings(this.cachedBoundingBox, slide.material.uniforms,
+          vector);
+      });
+      this.morph.updateMatrixWorld (true, true);
+      this.cachedBoundingBox.applyMatrix4(this.morph.matrixWorld);
+      this.boundingBoxUpdateRequired = false;
+    }
+    return this.cachedBoundingBox;
+  }
+
+  this.applyTransformation = (rotation, position, scale) => {
+    const matrix = new THREE.Matrix4();
+    matrix.set(
+      rotation[0],
+      rotation[1],
+      rotation[2],
+      0,
+      rotation[3],
+      rotation[4],
+      rotation[5],
+      0,
+      rotation[6],
+      rotation[7],
+      rotation[8],
+      0,
+      0,
+      0,
+      0,
+      0
+    );
+    const quaternion = new THREE.Quaternion().setFromRotationMatrix(matrix);
+    this.morph.position.set(...position);
+    this.morph.quaternion.copy( quaternion );
+    this.morph.scale.set(...scale);
+    this.morph.updateMatrix();
+    this.boundingBoxUpdateRequired = true;
+  }
+
+  this.setRenderOrder = (order) => {
+    //multiilayers
+    this.morph.renderOrder = order;
+  }
+
+  this.initialise = (textureData, finishCallback) => {
+    if (textureData) {
+      const locations = textureData.locations;
+      if (locations && locations.length > 0) {
+        this.applyTransformation(locations[0].orientation,
+          locations[0].position, locations[0].scale);
+        if ("flipY" in locations[0]) {
+          flipY = locations[0].flipY;
+        }
+      }
+      this.createSlides(textureData.settings.slides);
+      if (finishCallback != undefined && (typeof finishCallback == 'function')) {
+        finishCallback(this);
+      }
+    }
+  }
+
+  this.showEdges = (color) => {
+    if (!edgesLine) {
+      const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+      geometry.translate(0.5, 0.5, 0.5);
+      const edges = new THREE.EdgesGeometry( geometry );
+      edgesLine = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color } ) );
+      this.group.add( edgesLine );
+    } else {
+      edgesLine.material.color = color;
+    }
+    edgesLine.visible = true;
+  }
+
+  this.hideEdges = () => {
+    if (edgesLine) {
+      edgesLine.visible = false;
+    }
+  }
+}
+
+TextureSlides.prototype = Object.create((require('./texturePrimitive.js').TexturePrimitive).prototype);
+TextureSlides.prototype.constructor = TextureSlides;
+exports.TextureSlides = TextureSlides;

package/src/primitives/zincObject.js

@@ -11,7 +11,7 @@ const getUniqueId = function () {
 /**
  * Provides the base object for other primitive types.
  * This class contains multiple base methods.
- * 
+ *
  * @class
  * @author Alan Wu
  * @return {ZincObject}
@@ -33,7 +33,7 @@ const ZincObject = function() {
   this.mixer = undefined;
   this.animationGroup = undefined;
 	/**
-	 * Total duration of the animation, this value interacts with the 
+	 * Total duration of the animation, this value interacts with the
 	 * {@link Renderer#playRate} to produce the actual duration of the
 	 * animation. Actual time in second = duration / playRate.
 	 */
@@ -69,7 +69,7 @@ const ZincObject = function() {
 
 /**
  * Set the duration of the animation of this object.
- * 
+ *
  * @param {Number} durationIn - Duration of the animation.
  */
 ZincObject.prototype.setDuration = function(durationIn) {
@@ -81,7 +81,7 @@ ZincObject.prototype.setDuration = function(durationIn) {
 
 /**
  * Get the duration of the animation of this object.
- * 
+ *
  * @return {Number}
  */
 ZincObject.prototype.getDuration = function() {
@@ -99,7 +99,7 @@ ZincObject.prototype.setRegion = function(region) {
 
 /**
  * Get the region this object belongs to.
- * 
+ *
  * @return {Region}
  */
 ZincObject.prototype.getRegion = function() {
@@ -107,8 +107,8 @@ ZincObject.prototype.getRegion = function() {
 }
 
 /**
- * Get the threejs object3D. 
- * 
+ * Get the threejs object3D.
+ *
  * @return {Object}
  */
  ZincObject.prototype.getMorph = function() {
@@ -117,8 +117,8 @@ ZincObject.prototype.getRegion = function() {
 }
 
 /**
- * Get the threejs object3D. 
- * 
+ * Get the threejs object3D.
+ *
  * @return {Object}
  */
  ZincObject.prototype.getGroup = function() {
@@ -126,7 +126,7 @@ ZincObject.prototype.getRegion = function() {
 }
 
 /**
- * Set the internal threejs object3D. 
+ * Set the internal threejs object3D.
  */
  ZincObject.prototype.setMorph = function(mesh) {
   this.morph = mesh;
@@ -147,7 +147,7 @@ ZincObject.prototype.checkTransparentMesh = function() {
 
 /**
  * Set the mesh function for zincObject.
- * 
+ *
  * @param {THREE.Mesh} mesh - Mesh to be set for this zinc object.
  * @param {Boolean} localTimeEnabled - A flag to indicate either the mesh is
  * time dependent.
@@ -201,7 +201,7 @@ ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour
 
 /**
  * Set isPickable for this ZincObject.
- * 
+ *
  * @param {String} isPickable - Boolean to enable object pick.
  */
 ZincObject.prototype.setIsPickable = function(isPickable) {
@@ -213,7 +213,7 @@ ZincObject.prototype.setIsPickable = function(isPickable) {
 
 /**
  * Set the anatomicalId for this ZincObject.
- * 
+ *
  * @param {String} anatomicalId - Id to be set.
  */
 ZincObject.prototype.setAnatomicalId = function(anatomicalId) {
@@ -222,7 +222,7 @@ ZincObject.prototype.setAnatomicalId = function(anatomicalId) {
 
 /**
  * Set the name for this ZincObject.
- * 
+ *
  * @param {String} groupNameIn - Name to be set.
  */
 ZincObject.prototype.setName = function(groupNameIn) {
@@ -231,9 +231,9 @@ ZincObject.prototype.setName = function(groupNameIn) {
 }
 
 /**
- * Get the local time of this geometry, it returns a value between 
+ * Get the local time of this geometry, it returns a value between
  * 0 and the duration.
- * 
+ *
  * @return {Number}
  */
 ZincObject.prototype.getCurrentTime = function() {
@@ -247,7 +247,7 @@ ZincObject.prototype.getCurrentTime = function() {
 
 /**
  * Set the local time of this geometry.
- * 
+ *
  * @param {Number} time - Can be any value between 0 to duration.
  */
 ZincObject.prototype.setMorphTime = function(time) {
@@ -264,7 +264,7 @@ ZincObject.prototype.setMorphTime = function(time) {
       this.mixer.update( 0.0 );
     }
   } else {
-    let newTime = time; 
+    let newTime = time;
     if (time > this.duration)
       newTime = this.duration;
     else if (0 > time)
@@ -286,7 +286,7 @@ ZincObject.prototype.setMorphTime = function(time) {
 
 /**
  * Check if the geometry is time varying.
- * 
+ *
  * @return {Boolean}
  */
 ZincObject.prototype.isTimeVarying = function() {
@@ -297,7 +297,7 @@ ZincObject.prototype.isTimeVarying = function() {
 
 /**
  * Get the visibility of this Geometry.
- * 
+ *
  */
 ZincObject.prototype.getVisibility = function() {
   return this.visible;
@@ -305,8 +305,8 @@ ZincObject.prototype.getVisibility = function() {
 
 /**
  * Set the visibility of this Geometry.
- * 
- * @param {Boolean} visible - a boolean flag indicate the visibility to be set 
+ *
+ * @param {Boolean} visible - a boolean flag indicate the visibility to be set
  */
 ZincObject.prototype.setVisibility = function(visible) {
   if (visible !== this.visible) {
@@ -319,8 +319,8 @@ ZincObject.prototype.setVisibility = function(visible) {
 /**
  * Set the opacity of this Geometry. This function will also set the isTransparent
  * flag according to the provided alpha value.
- * 
- * @param {Number} alpah - Alpha value to set for this geometry, 
+ *
+ * @param {Number} alpah - Alpha value to set for this geometry,
  * can be any value between from 0 to 1.0.
  */
 ZincObject.prototype.setAlpha = function(alpha) {
@@ -337,7 +337,7 @@ ZincObject.prototype.setAlpha = function(alpha) {
  * The rendering will be culled if it is outside of the frustrum
  * when this flag is set to true, it should be set to false if
  * morphing is enabled.
- * 
+ *
  * @param {Boolean} flag - Set frustrum culling on/off based on this flag.
  */
 ZincObject.prototype.setFrustumCulled = function(flag) {
@@ -348,7 +348,7 @@ ZincObject.prototype.setFrustumCulled = function(flag) {
 /**
  * Set rather a zinc object should be displayed using per vertex colour or
  * not.
- * 
+ *
  * @param {Boolean} vertexColors - Set display with vertex color on/off.
  */
 ZincObject.prototype.setVertexColors = function(vertexColors) {
@@ -359,7 +359,7 @@ ZincObject.prototype.setVertexColors = function(vertexColors) {
 
 /**
  * Get the colour of the mesh.
- * 
+ *
  * @return {THREE.Color}
  */
 ZincObject.prototype.getColour = function() {
@@ -367,10 +367,10 @@ ZincObject.prototype.getColour = function() {
     return this._lod._material.color;
 	return undefined;
 }
-  
+
 /**
  * Set the colour of the mesh.
- * 
+ *
  * @param {THREE.Color} colour - Colour to be set for this geometry.
  */
 ZincObject.prototype.setColour = function(colour) {
@@ -379,7 +379,7 @@ ZincObject.prototype.setColour = function(colour) {
 
 /**
  * Set the colour of the mesh.
- * 
+ *
  * @param {THREE.Color} colour - Colour to be set for this geometry.
  */
 ZincObject.prototype.setGreyScale = function(flag) {
@@ -406,7 +406,7 @@ ZincObject.prototype.setGreyScale = function(flag) {
 
 /**
  * Get the colour of the mesh in hex string form.
- * 
+ *
  * @return {String}
  */
 ZincObject.prototype.getColourHex = function() {
@@ -419,7 +419,7 @@ ZincObject.prototype.getColourHex = function() {
 
 /**
  * Set the colour of the mesh using hex in string form.
- * 
+ *
  * @param {String} hex - The colour value in hex form.
  */
 ZincObject.prototype.setColourHex = function(hex) {
@@ -431,7 +431,7 @@ ZincObject.prototype.setColourHex = function(hex) {
 
 /**
  * Set the emissive rgb of the mesh using rgb.
- * 
+ *
  * @param {String} colour - The colour value in rgb form.
  */
 ZincObject.prototype.setEmissiveRGB = function(colour) {
@@ -446,7 +446,7 @@ ZincObject.prototype.setEmissiveRGB = function(colour) {
 
 /**
  * Set the material of the geometry.
- * 
+ *
  * @param {THREE.Material} material - Material to be set for this geometry.
  */
 ZincObject.prototype.setMaterial = function(material) {
@@ -455,17 +455,17 @@ ZincObject.prototype.setMaterial = function(material) {
 
 /**
  * Get the index of the closest vertex to centroid.
- * 
+ *
  * @return {Number} - integer index in the array
  */
 ZincObject.prototype.getClosestVertexIndex = function() {
   let closestIndex = -1;
   const morph = this.getMorph();
-  if (morph && morph.geoemtry) {
+  if (morph && morph.geometry) {
     let position = morph.geometry.attributes.position;
-    this._b1.setFromBufferAttribute(position);
-    this._b1.getCenter(this._v1);
     if (position) {
+      this._b1.setFromBufferAttribute(position);
+      this._b1.getCenter(this._v1);
       let distance = -1;
       let currentDistance = 0;
       for (let i = 0; i < position.count; i++) {
@@ -485,7 +485,7 @@ ZincObject.prototype.getClosestVertexIndex = function() {
 
 /**
  * Get the  closest vertex to centroid.
- * 
+ *
  * @return {THREE.Vector3}
  */
 ZincObject.prototype.getClosestVertex = function(applyMatrixWorld) {
@@ -516,14 +516,15 @@ ZincObject.prototype.getClosestVertex = function(applyMatrixWorld) {
       return applyMatrixWorld ? position.applyMatrix4(morph.matrixWorld) : position;
     }
   }
+  //Matrix world has already been applied
   this.getBoundingBox();
   position.copy(this.center);
-  return applyMatrixWorld ? position.applyMatrix4(this.morph.matrixWorld) : position;
+  return position;
 }
 
 /**
  * Get the bounding box of this geometry.
- * 
+ *
  * @return {THREE.Box3}.
  */
 ZincObject.prototype.getBoundingBox = function() {
@@ -558,13 +559,13 @@ ZincObject.prototype.dispose = function() {
 }
 
 /**
- * Check if marker is enabled based on the objects settings with 
+ * Check if marker is enabled based on the objects settings with
  * the provided scene options.
- * 
- * @return {Boolean} 
+ *
+ * @return {Boolean}
  */
 ZincObject.prototype.markerIsRequired = function(options) {
-  if (this.visible && 
+  if (this.visible &&
     (this.markerMode === "on" || (options && options.displayMarkers &&
     (this.markerMode === "inherited")))) {
       return true;
@@ -573,7 +574,7 @@ ZincObject.prototype.markerIsRequired = function(options) {
 }
 
 /**
- * Update the marker's position and size based on current viewport. 
+ * Update the marker's position and size based on current viewport.
  */
 ZincObject.prototype.updateMarker = function(playAnimation, options) {
   if ((playAnimation == false) &&
@@ -594,7 +595,7 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
       }
       if (!this.marker.isEnabled()) {
         if (options.markersList &&
-          (!(this.marker.uuid in options.markersList))) {    
+          (!(this.marker.uuid in options.markersList))) {
             ndcToBeUpdated = true;
           options.markersList[this.marker.uuid] = this.marker;
         }
@@ -647,7 +648,7 @@ ZincObject.prototype.setRenderOrder = function(renderOrder) {
 
 /**
  * Get the windows coordinates.
- * 
+ *
  * @return {Object} - position and rather the closest vertex is on screen.
  */
 ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
@@ -675,8 +676,8 @@ ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
  * "off" - marker is disabled regardless of settings of scene
  * "inherited" - Marker settings on scene will determine the visibility
  *  of the marker.
- * 
- * @return {Boolean} 
+ *
+ * @return {Boolean}
  */
  ZincObject.prototype.setMarkerMode = function(mode, options) {
   if (mode !== this.markerMode) {
@@ -764,7 +765,9 @@ ZincObject.prototype.setPosition = function(x, y, z) {
   const group = this.getGroup();
   if (group) {
     group.position.set(x, y, z);
+    group.matrixWorldNeedsUpdate = true;
     group.updateMatrix();
+    group.updateWorldMatrix(true, true);
     this.boundingBoxUpdateRequired = true;
   }
 }