zincjs 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "main": "build/zinc.js",
   "directories": {
@@ -60,7 +60,7 @@
     "lodash": "^4.17.19",
     "promise-polyfill": "^8.1.3",
     "three": "^0.130.1",
-    "three-spritetext": "^1.6.2",
+    "three-spritetext": "1.6.2",
     "url-loader": "^2.1.0",
     "url-polyfill": "^1.1.7",
     "webworkify-webpack": "^2.1.5"

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/controls.js

@@ -1594,7 +1594,7 @@ const CameraAutoTumble = function (tumbleDirectionIn, tumbleRateIn, stopOnCamera
 /**
  * @author mrdoob / http://mrdoob.com/
  */
-StereoCameraZoomFixed = function () {
+const StereoCameraZoomFixed = function () {
 
 	this.type = 'StereoCamera';
 
@@ -1732,7 +1732,7 @@ const StereoEffect = function ( renderer ) {
  * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)
  */
 
-ModifiedDeviceOrientationControls = function ( object ) {
+const ModifiedDeviceOrientationControls = function ( object ) {
 
 	const scope = this;
 

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

@@ -312,7 +312,7 @@ ZincObject.prototype.isTimeVarying = function() {
  * 
  */
 ZincObject.prototype.getVisibility = function() {
-  return this.morph.visible;
+  return this.morph ? this.morph.visible : 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},
   };
 }