zincjs 1.1.0 → 1.3.0

package/package.json

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

package/src/assets/mapMarker.svg

@@ -4,7 +4,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">
 <g>
-	<path fill="#00AEEF" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9
+	<path fill="#005974" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9
 		C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8
 		c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>
 </g>

package/src/primitives/marker.js

@@ -91,13 +91,14 @@ const Marker = function(zincObject) {
    */ 
   this.dispose = () => {
     if (this.morph) {
-      this.morph.dispose();
+      this.morph.clear();
     }
     if (spriteMaterial) {
       spriteMaterial.dispose();
     }
     if (sprite) {
-      sprite.dispose();
+      sprite.clear();
+      sprite = undefined;
     }
   }
 

package/src/primitives/textureSlides.js

@@ -14,61 +14,125 @@ const shader = require("../shaders/textureSlide.js");
 const TextureSlides = function (textureIn) {
   (require('./texturePrimitive').TexturePrimitive).call(this, textureIn);
   this.isTextureSlides = true;
-  
+  const textureSettings = [];
+  const idTextureMap = {};
+  this.morph = new THREE.Group();
+  this.morph.userData = this;
+  const alpha = 1.0;
+
   /**
     @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 itself is an {THREE.PlanGeometry} object.
+   * The slides themselves are {THREE.PlanGeometry} objects.
    * 
    * @param {SLIDE_SETTINGS} slideSettings - An array to each slide settings.
    */
   this.createSlides = slideSettings => {
-    if (!this.morph) this.morph = new THREE.Group();
+    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.
+   */
+  setUniformSlideSettingsOfMesh = (mesh, settings) => {
+    const material = mesh.material;
+    const uniforms = material.uniforms;
+    switch (settings.direction) {
+      case "x":
+        uniforms.direction.value = 1;
+        uniforms.slide.value.set(settings.value, 0, 0);
+        break;
+      case "y":
+        uniforms.direction.value = 2;
+        uniforms.slide.value.set(0, settings.value, 0);
+        break;
+      case "z":
+        uniforms.direction.value = 3;
+        uniforms.slide.value.set(0, 0, 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()) {
-      slideSettings.forEach(slide => {
-        if (slide.direction && slide.value) {
-          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;
-          switch(slide.direction) {
-            case "x":
-              uniforms.slide.value.set(slide.value, 0, 0);
-              break;
-            case "y":
-              uniforms.slide.value.set(0, slide.value, 0);
-              break;
-            case "z":
-              uniforms.slide.value.set(0, 0, slide.value);
-              break;
-            default:
-              break;
-          }
-          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 );
-          this.morph.add(mesh);
-        }
-      });
-      this.boundingBoxUpdateRequired = true;
+      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;
+        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);
+        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);
+        return slideSettings;
+      }
     }
   }
 
+  /**
+   * Return a copy of texture settings used by this object.
+   *
+   * @return {SLIDE_SETTINGS} - Returned the list of settings..
+   */
+  this.getTextureSettings = () => {
+    return [...textureSettings];
+  }
+
   /**
    * Get  the array of slides, return them in an array
    *
@@ -82,19 +146,35 @@ const TextureSlides = function (textureIn) {
   /**
    * Remove a slide, this will dispose the slide and its material.
    *
-   * @param {Slide} slide - An array to each slide settings.
+   * @param {Slide} slide - Slide to be remvoed
    */
   this.removeSlide = slide => {
-    if (slide && this.morph) {
-      if (this.morph.getObjectById(slide.id)) {
+    if (slide) {
+      this.removeSlideWithId(slide.id);
+    }
+  }
+
+  /**
+    * Remove a slide, this will dispose the slide and its material.
+    *
+    * @param {Number} id - id of slide to be remvoed
+    */
+  this.removeSlideWithId = id => {
+    if (this.morph && id in idTextureMap && idTextureMap[id]) {
+      if (this.morph.getObjectById(id)) {
+        const slide = idTextureMap[id];
         this.morph.remove(slide);
-        slide.disppose();
+        slide.clear();
         if (slide.geometry)
           slide.geometry.dispose();
         if (slide.material)
           slide.material.dispose();
         this.boundingBoxUpdateRequired = true;
       }
+      const index = textureSettings.findIndex(item => item.id === id);
+      if (index > -1) {
+        textureSettings.splice(index);
+      }
     }
   }
 
@@ -102,7 +182,7 @@ const TextureSlides = function (textureIn) {
    * Clean up all internal objects.
    */
   this.dispose = () => {
-    this.morph.children.forEach(slide=> {
+    this.morph.children.forEach(slide => {
       if (slide.geometry)
         slide.geometry.dispose();
       if (slide.material)
@@ -119,10 +199,11 @@ const TextureSlides = function (textureIn) {
    * 
    * @return {THREE.Box3}.
    */
-  this.getBoundingBox = function() {
+  this.getBoundingBox = function () {
     if (this.morph && this.morph.children && this.morph.visible &&
       this.boundingBoxUpdateRequired) {
-      this.morph.children.forEach(slide=> {
+      this.cachedBoundingBox.makeEmpty();
+      this.morph.children.forEach(slide => {
         const value = slide.material.uniforms.slide.value;
         this.cachedBoundingBox.expandByPoint(value);
       });
@@ -134,6 +215,5 @@ const TextureSlides = function (textureIn) {
   }
 }
 
-
 TextureSlides.prototype = Object.create((require('./texturePrimitive').TexturePrimitive).prototype);
 exports.TextureSlides = TextureSlides;

package/src/primitives/zincObject.js

@@ -50,6 +50,7 @@ const ZincObject = function() {
   this.anatomicalId = undefined;
   this.region = undefined;
   this.animationClip = undefined;
+  this.markerMode = "inherited";
   this.uuid = getUniqueId();
 }
 
@@ -311,7 +312,7 @@ ZincObject.prototype.isTimeVarying = function() {
  * 
  */
 ZincObject.prototype.getVisibility = function() {
-  return this.morph.visible;
+  return this.morph ? this.morph.visible : false;
 }
 
 /**
@@ -565,12 +566,27 @@ ZincObject.prototype.dispose = function() {
   this.groupName = undefined;
 }
 
+/**
+ * Check if marker is enabled based on the objects settings with 
+ * the provided scene options.
+ * 
+ * @return {Boolean} 
+ */
+ZincObject.prototype.markerIsEnabled = function(options) {
+  if (this.markerMode === "on" || (options && options.displayMarkers &&
+    (this.markerMode === "inherited"))) {
+      
+      return true;
+  }
+  return false;
+}
+
 /**
  * Update the marker's position and size based on current viewport. 
  */
 ZincObject.prototype.updateMarker = function(playAnimation, options) {
   if ((playAnimation == false) &&
-    (options && options.displayMarkers))
+    (this.markerIsEnabled(options)))
   {
     if (this.groupName) {
       if (!this.marker) {
@@ -645,6 +661,29 @@ ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
   }
 }
 
+/**
+ * Set marker mode for this zinc object which determine rather the
+ * markers should be displayed or not.
+ *
+ * @param {string} mode - There are three options:
+ * "on" - marker is enabled regardless of settings of scene
+ * "off" - marker is disabled regardless of settings of scene
+ * "inherited" - Marker settings on scene will determine the visibility
+ *  of the marker.
+ * 
+ * @return {Boolean} 
+ */
+ ZincObject.prototype.setMarkerMode = function(mode) {
+  if (mode !== this.markerMode) {
+    if (mode === "on" || mode === "off") {
+      this.markerMode = mode;
+    } else {
+      this.markerMode = "inherited";
+    }
+    if (this.region) this.region.pickableUpdateRequired = true;
+  }
+}
+
 //Update the geometry and colours depending on the morph.
 ZincObject.prototype.render = function(delta, playAnimation, options) {
   if (playAnimation == true)

package/src/region.js

@@ -338,23 +338,19 @@ let Region = function (parentIn) {
   /**
    * Get all pickable objects.
    */
-  this.getPickableThreeJSObjects = (objectsList, pickMarkers, transverse) => {
+  this.getPickableThreeJSObjects = (objectsList,  transverse) => {
     zincObjects.forEach(zincObject => {
       if (zincObject.morph && zincObject.morph.visible) {
-        if (pickMarkers) {
-          let marker = zincObject.marker;
-          if (marker && marker.isEnabled()) {
-            objectsList.push(marker.morph);
-          }
-        } else {
-          objectsList.push(zincObject.morph);
+        let marker = zincObject.marker;
+        if (marker && marker.isEnabled()) {
+          objectsList.push(marker.morph);
         }
+        objectsList.push(zincObject.morph);
       }
     });
     if (transverse) {
       children.forEach(childRegion => {
-        childRegion.getPickableThreeJSObjects(objectsList, pickMarkers,
-          transverse);
+        childRegion.getPickableThreeJSObjects(objectsList, transverse);
       });
     }
     this.pickableUpdateRequired = false;

package/src/scene.js

@@ -867,8 +867,7 @@ exports.Scene = function (containerIn, rendererIn) {
    */
   this.updatePickableThreeJSObjects = () => {
     pickableObjectsList.splice(0, pickableObjectsList.length);
-    rootRegion.getPickableThreeJSObjects(pickableObjectsList,
-      this.displayMarkers, true);
+    rootRegion.getPickableThreeJSObjects(pickableObjectsList, true);
     this.forcePickableObjectsUpdate = false;
   }
 

package/src/shaders/textureSlide.js

@@ -28,16 +28,17 @@ const vs =
 out vec3 vUw;
 uniform float depth;
 uniform vec3 slide;
+uniform int direction;
 
 void main() {
 
   vec3 slidePos = position.xyz;
 
-  if (slide.x > 0.0)
+  if (direction == 1)
     slidePos = vec3(slide.x, position.x, position.y);
-  if (slide.y > 0.0)
+  if (direction == 2)
     slidePos = vec3(position.x, slide.y, position.y);
-  if (slide.z > 0.0)
+  if (direction == 3)
     slidePos = vec3(position.x, position.y, slide.z);
 
   gl_Position = projectionMatrix * modelViewMatrix * vec4( slidePos, 1.0 );
@@ -51,7 +52,8 @@ const getUniforms = function() {
   return {
     diffuse: { value: undefined },
     depth: { value: 1 },
-    slide: { value: new THREE.Vector3( 0, 0, 1 ) }
+    slide: { value: new THREE.Vector3( 0, 0, 1 ) },
+    direction: {value: 1},
   };
 }