zincjs 1.8.3 → 1.8.5

package/package.json

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

package/src/controls.js

@@ -1517,22 +1517,31 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
 		enable = false;
 	}
 
-	const getIntersectsObject = (zincCamera, x, y) => {
-    zincCamera.getNDCFromDocumentCoords(x, y, mouse);
+	this.getIntersectsObject = (zincCamera) => {
     if (hostScene !== scene) {
       const threejsScene = scene.getThreeJSScene();
       renderer.render(threejsScene, zincCamera.cameraObject);
     }
-    raycaster.setFromCamera( mouse, zincCamera.cameraObject);
     let objects = scene.getPickableThreeJSObjects();
     //Reset pickedObjects array 
     pickedObjects.length = 0;
 		return raycaster.intersectObjects( objects, true, pickedObjects );
+	}
+
+	this.getIntersectsObjectWithOrigin = (zincCamera, origin, direction) => {
+		raycaster.set(origin, direction);
+		return this.getIntersectsObject(zincCamera);
+	}
+
+	const getIntersectsObjectWithCamera = (zincCamera, x, y) => {
+    zincCamera.getNDCFromDocumentCoords(x, y, mouse);
+		raycaster.setFromCamera(mouse, zincCamera.cameraObject);
+		return this.getIntersectsObject(zincCamera);
 	};
 	
 	this.pick = (zincCamera, x, y) => { 
 		if (enabled && renderer && scene && zincCamera && callbackFunction) {
-			getIntersectsObject(zincCamera, x, y);
+			getIntersectsObjectWithCamera(zincCamera, x, y);
 			const length = pickedObjects.length;
 			for (let i = 0; i < length; i++) {
 				let zincObject = pickedObjects[i].object ? pickedObjects[i].object.userData : undefined;
@@ -1548,7 +1557,7 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
   
   let hovered = (zincCamera, x, y) => {
     if (enabled && renderer && scene && zincCamera && hoverCallbackFunction) {
-      getIntersectsObject(zincCamera, x, y);
+      getIntersectsObjectWithCamera(zincCamera, x, y);
       lastHoveredDate.setTime(Date.now());
       if (pickedObjects.length === 0) {
         //skip hovered callback if the previous one is empty

package/src/primitives/label.js

@@ -42,8 +42,9 @@ exports.Label = function (textIn, colour) {
    * @param {Number} z - z coordinate to be set.
    */
   this.setPosition = (x, y, z) => {
-    if (sprite)
+    if (sprite) {
       sprite.position.set(x, y, z);
+    }
   }
 
   /**

package/src/primitives/lines2.js

@@ -1,5 +1,4 @@
 const THREE = require('three');
-const createBufferGeometry = require('../utilities').createBufferGeometry;
 const toBufferGeometry = require('../utilities').toBufferGeometry;
 const LineSegments2 = require("../three/line/LineSegments2").LineSegments2;
 const LineMaterial = require("../three/line/LineMaterial").LineMaterial;
@@ -115,7 +114,7 @@ const Lines2 = function () {
   /**
    * Edit Vertice in index.
    */
-  this.editVertice = function(coords, i) {
+  this.editVertices = function(coords, i) {
     if (coords && coords.length) {
       let mesh = this.getMorph();
       const maxIndex = i + coords.length - 1;
@@ -142,7 +141,6 @@ const Lines2 = function () {
     return positions;
   }
 
-
   /**
    * Add new lines to existing lines if it exists, otherwise
    * create a new one and add to it.

package/src/primitives/pointset.js

@@ -2,6 +2,7 @@ const THREE = require('three');
 const Points = require('../three/Points').Points;
 const toBufferGeometry = require('../utilities').toBufferGeometry;
 const getCircularTexture = require('../utilities').getCircularTexture;
+const Label = require('./label').Label;
 
 /**
  * Provides an object which stores points and provides method which controls its position.
@@ -15,6 +16,7 @@ const getCircularTexture = require('../utilities').getCircularTexture;
 const Pointset = function () {
   (require('./zincObject').ZincObject).call(this);
   this.isPointset = true;
+  const labelSets = [];
 
   /**
    * Create the pointsets using geometry and material.
@@ -38,16 +40,33 @@ const Pointset = function () {
     }
   }
 
+  const addLabel = (index, coord, labelText, colourHex) => {
+    if (labelText) {
+      const colour = new THREE.Color(colourHex);
+      const label = new Label(labelText, colour);
+      label.setPosition(coord[0], coord[1], coord[2]);
+      const sprite  = label.getSprite();
+      sprite.material.sizeAttenuation = false;
+      sprite.material.alphaTest = 0.5;
+      sprite.material.transparent = true;
+      sprite.material.depthWrite = false;
+      sprite.material.depthTest = false;
+      this.group.add(sprite);
+      labelSets[index] = label;
+    }
+  }
+
   /**
    * Add points to existing mesh if it exists, otherwise
    * create a new one and add to it.
    * @param {Array} coords  -An array of three components coordinates.
-   * @param {Array} labels - An array of strings, these are only added
+   * @param {Array|String} labels - An array of strings, these are only added
    * if the number of coords equals to the number labels provided.
    * @param {Number} colour - A hex value of the colour for the points
    */
   this.addPoints = (coords, labels, colour) => {
     if (coords && coords.length > 0) {
+      let current = this.drawRange - 1;
       const geometry = this.addVertices(coords);
       let mesh = this.getMorph();
       if (!mesh) {
@@ -57,6 +76,16 @@ const Pointset = function () {
         geometry.colorsNeedUpdate = true;
         this.createMesh(geometry, material, options);
       }
+      let end = current + coords.length;
+      let index = 0;
+      if ((Array.isArray(labels) && labels.length === coords.length) || 
+        (typeof labels === "string")) {
+        for (current; current + index < end;) {
+          const labelText = typeof labels === "string" ? labels : labels[index];
+          addLabel(index, coords[index], labelText, colour);
+          index++;
+        }
+      }
       if (this.region) this.region.pickableUpdateRequired = true;
     }
   }
@@ -86,18 +115,59 @@ const Pointset = function () {
     }
   }
 
-    /**
-   * Turn size attenuation on/off based on the flag.
-   * 
-   * @param {Boolean} flag - Determin either size attenuation
-   * should be on or off.
+  /**
+   * Get vertices at index
+   */
+  this.getVerticesByIndex = function(index) {
+    if (index >= 0 && this.drawRange > index) {
+      const positionAttribute = this.getMorph().geometry.getAttribute( 'position' );
+      return [ 
+        positionAttribute.getX(index),
+        positionAttribute.getY(index),
+        positionAttribute.getZ(index)
+      ];
+    }
+    return undefined;
+  }
+
+  /**
+   * Edit Vertice in index.
    */
-    this.render = (delta, playAnimation, cameraControls, options) => {
-      if (this.morph) {
-        this.morph.sizePerPixel = cameraControls.pixelHeight;
+  this.editVertices = function(coords, i) {
+    if (coords && coords.length) {
+      let mesh = this.getMorph();
+      const maxIndex = i + coords.length - 1;
+      if (!mesh || 0 > i || maxIndex >= this.drawRange) {
+        return;
+      } else {
+        const positionAttribute = mesh.geometry.getAttribute( 'position' );
+        let index = i;
+        coords.forEach(coord => {
+          const label = labelSets[index];
+          if (label) {
+            label.setPosition(coord[0], coord[1], coord[2]);
+          }
+          positionAttribute.setXYZ(index++, coord[0], coord[1], coord[2]);
+          
+        });
+        positionAttribute.needsUpdate = true;
+        this.boundingBoxUpdateRequired = true;
       }
-      Pointset.prototype.render.call(this, delta, playAnimation, cameraControls, options);
     }
+  }
+
+  /**
+ * Turn size attenuation on/off based on the flag.
+ * 
+ * @param {Boolean} flag - Determin either size attenuation
+ * should be on or off.
+ */
+  this.render = (delta, playAnimation, cameraControls, options) => {
+    if (this.morph && cameraControls) {
+      this.morph.sizePerPixel = cameraControls.pixelHeight;
+    }
+    Pointset.prototype.render.call(this, delta, playAnimation, cameraControls, options);
+  }
 }
 
 Pointset.prototype = Object.create((require('./zincObject').ZincObject).prototype);

package/src/primitives/textureSlides.js

@@ -19,7 +19,7 @@ const TextureSlides = function (textureIn) {
   this.morph = new THREE.Group();
   this.group = this.morph;
   this.morph.userData = this;
-   let flipY = true;
+  let flipY = true;
 
   /**
     @typedef SLIDE_SETTINGS
@@ -51,18 +51,30 @@ const TextureSlides = function (textureIn) {
   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 = flipY ? -Math.PI / 2 : 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;
@@ -113,6 +125,8 @@ const TextureSlides = function (textureIn) {
         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,
@@ -131,12 +145,25 @@ const TextureSlides = function (textureIn) {
   /**
    * Return a copy of texture settings used by this object.
    *
-   * @return {SLIDE_SETTINGS} - Returned the list of settings..
+   * @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
    *

package/src/scene.js

@@ -1270,13 +1270,67 @@ exports.Scene = function (containerIn, rendererIn) {
     const box = boundingBox ? boundingBox : this.getBoundingBox();
     const dim = new THREE.Vector3().subVectors(box.max, box.min);
     const boxGeo = new THREE.BoxGeometry(dim.x, dim.y, dim.z);
-    dim.addVectors(box.min, box.max).multiplyScalar( 0.5 );
     const primitive = region.createGeometryFromThreeJSGeometry(
       group, boxGeo, colour, opacity, visibility, 10000);
+    dim.addVectors(box.min, box.max).multiplyScalar( 0.5 );
     primitive.setPosition(dim.x, dim.y, dim.z);
     return primitive;
   }
 
+  /*
+	 * Create primitive based on the bounding box of scene and
+   * add to specify region and group name.
+	 */
+  this.addSlicesPrimitive = (regionPath, groups, colours, opacity,
+    visibility, boundingBox = undefined) => {
+    if (groups && groups.length >= 3 &&
+      colours && colours.length >= 3) {
+      let region = rootRegion.findChildFromPath(regionPath);
+      if (region === undefined) {
+        region = rootRegion.createChildFromPath(regionPath);
+      }
+      const box = boundingBox ? boundingBox : this.getBoundingBox();
+      const dim = new THREE.Vector3().subVectors(box.max, box.min);
+      const directions = ["x", "y", "z"];
+      const primitives = [];
+      let index = 0;
+      directions.forEach((direction) => {
+        let planeGeo = undefined;
+        switch(direction) {
+          //YZ plane
+          case "x":
+            planeGeo = new THREE.PlaneGeometry(dim.z, dim.y);
+            planeGeo.rotateY(Math.PI / 2);
+            // code block
+            break;
+          //XZ plane
+          case "y":
+            planeGeo = new THREE.PlaneGeometry(dim.x, dim.z);
+            planeGeo.rotateX(Math.PI / 2);
+            // code block
+            break;
+          //XY plane
+          case "z":
+            planeGeo = new THREE.PlaneGeometry(dim.x, dim.y);
+              // code block
+            break;
+          default:
+            break;
+        }
+        const primitive = region.createGeometryFromThreeJSGeometry(
+          groups[index], planeGeo, colours[index], opacity, visibility, 10001);
+        primitives.push(primitive);
+        index++;
+      });
+
+      dim.addVectors(box.min, box.max).multiplyScalar( 0.5 );
+      primitives.forEach((primitive) => {
+        primitive.setPosition(dim.x, dim.y, dim.z);
+      });
+      return primitives;
+    }
+  }
+
   /*
 	 * Enable marker cluster to work with markers
 	 */

package/src/shaders/textureSlide.js

@@ -34,18 +34,17 @@ uniform bool flipY;
 void main() {
 
   vec3 slidePos = position.xyz;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( position.xyz, 1.0 );
 
   if (direction == 1)
-    slidePos = vec3(slide.x, position.x, position.y);
+    slidePos = vec3(slide.x, position.y, position.x);
   if (direction == 2)
     slidePos = vec3(position.x, slide.y, position.y);
   if (direction == 3)
     slidePos = vec3(position.x, position.y, slide.z);
 
-  gl_Position = projectionMatrix * modelViewMatrix * vec4( slidePos, 1.0 );
-
-  if (flipY)
-  slidePos.y = 1.0 - slidePos.y;
+  if (flipY) 
+    slidePos.y = 1.0 - slidePos.y;
 
   vUw.xyz = vec3(slidePos.x, slidePos.y, slidePos.z * depth);