zincjs 1.8.0 → 1.8.2

package/package.json

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

package/src/controls.js

@@ -70,6 +70,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 	this.touchZoomDistanceEnd = 0;
 	this.directionalLight = 0;
 	this.scrollRate = 50;
+	this.pixelHeight = 1;
 	let duration = 6000;
   let enabled = true;
 	let inbuildTime = 0;
@@ -224,6 +225,25 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
         viewports[defaultViewport]);
 	}
 
+	this.getVisibleHeightAtZDepth = ( depth ) => {
+		// compensate for cameras not positioned at z=0
+		const cameraOffset = this.cameraObject.position.z;
+		if ( depth < cameraOffset ) depth -= cameraOffset;
+		else depth += cameraOffset;
+	
+		// vertical fov in radians
+		const vFOV = this.cameraObject.fov * Math.PI / 180; 
+	
+		// Math.abs to ensure the result is always positive
+		return 2 * Math.tan( vFOV / 2 ) * Math.abs( depth );
+	};
+
+	this.calculateHeightPerPixelAtZeroDepth = ( wHeight ) => {
+		const height = this.getVisibleHeightAtZDepth(0);
+		this.pixelHeight = height / wHeight;
+		return this.pixelHeight;
+	}
+
   /**
    * Get normalised coordinates from windows coordinates.
    * 
@@ -329,20 +349,22 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 
 	const onDocumentMouseMove = event => {
     updateRect(false);
-		this.pointer_x = event.clientX - rect.left;
-		this.pointer_y = event.clientY - rect.top;
-    if (currentMode === MODE.MINIMAP) {
-      let minimapCoordinates = this.scene.getNormalisedMinimapCoordinates(this.renderer, event);
-      if (minimapCoordinates) {
-        let translation = this.scene.getMinimapDiffFromNormalised(
-          minimapCoordinates.x, minimapCoordinates.y);
-        translateViewport(translation);
-      }
-    } else {
-      if ((this._state === STATE.NONE) && (zincRayCaster !== undefined)) {
-        zincRayCaster.move(this, event.clientX, event.clientY, this.renderer);
-      }
-    }
+		if (rect) {
+			this.pointer_x = event.clientX - rect.left;
+			this.pointer_y = event.clientY - rect.top;
+			if (currentMode === MODE.MINIMAP) {
+				let minimapCoordinates = this.scene.getNormalisedMinimapCoordinates(this.renderer, event);
+				if (minimapCoordinates) {
+					let translation = this.scene.getMinimapDiffFromNormalised(
+						minimapCoordinates.x, minimapCoordinates.y);
+					translateViewport(translation);
+				}
+			} else {
+				if ((this._state === STATE.NONE) && (zincRayCaster !== undefined)) {
+					zincRayCaster.move(this, event.clientX, event.clientY, this.renderer);
+				}
+			}
+		}
 	}
 	
 	const onDocumentMouseUp = event => {
@@ -987,6 +1009,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 		} else {
 			this.cameraObject.lookAt( this.cameraObject.target );
 		}
+
 		return updated;
 	};
 	
@@ -1476,7 +1499,7 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
 	const enabled = true;
 	const raycaster = new THREE.Raycaster();
 	raycaster.params.Line.threshold = 0.1;
-	raycaster.params.Points.threshold = 0.1;
+	raycaster.params.Points.threshold = 1;
   const mouse = new THREE.Vector2();
   let awaiting = false;
   let lastHoveredDate = new Date();

package/src/primitives/pointset.js

@@ -85,6 +85,19 @@ const Pointset = function () {
       this.morph.material.needsUpdate = true;
     }
   }
+
+    /**
+   * 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) {
+        this.morph.sizePerPixel = cameraControls.pixelHeight;
+      }
+      Pointset.prototype.render.call(this, delta, playAnimation, cameraControls, options);
+    }
 }
 
 Pointset.prototype = Object.create((require('./zincObject').ZincObject).prototype);

package/src/scene.js

@@ -111,10 +111,12 @@ exports.Scene = function (containerIn, rendererIn) {
 
   //called from Renderer when panel has been resized
   this.onWindowResize = () => {
-    this.camera.aspect = getDrawingWidth() / getDrawingHeight();
+    const wHeight = getDrawingHeight();
+    this.camera.aspect = getDrawingWidth() / wHeight;
     this.camera.updateProjectionMatrix();
     this.minimapScissor.updateRequired = true;
     zincCameraControls.onResize();
+    zincCameraControls.calculateHeightPerPixelAtZeroDepth(wHeight);
   }
 
   /**
@@ -196,6 +198,7 @@ exports.Scene = function (containerIn, rendererIn) {
     if (boundingBox) {
       const viewport = zincCameraControls.getViewportFromBoundingBox(boundingBox, 1.0);
       zincCameraControls.setCurrentCameraSettings(viewport);
+      zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
       markerCluster.markerUpdateRequired = true;
     }
   }
@@ -594,6 +597,9 @@ exports.Scene = function (containerIn, rendererIn) {
 			  if (0 == sceneLoader.toBeDownloaded) {
 				  zincCameraControls.setTime(currentTime);
 				  options.ndcToBeUpdated = zincCameraControls.update(0);
+          if (options.ndcToBeUpdated) {
+            zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+          }
           rootRegion.setMorphTime(currentTime, true);
           rootRegion.renderGeometries(0, 0, playAnimation, zincCameraControls, options, true);
 			  } else {
@@ -606,6 +612,9 @@ exports.Scene = function (containerIn, rendererIn) {
 	  } else {
 		  if (0 == sceneLoader.toBeDownloaded) {
         options.ndcToBeUpdated = zincCameraControls.update(delta);
+        if (options.ndcToBeUpdated) {
+          zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+        }
         rootRegion.renderGeometries(playRate, delta, playAnimation, zincCameraControls, options, true);
 		  } else {
 			  zincCameraControls.update(0);

package/src/sceneLoader.js

@@ -422,6 +422,7 @@ exports.SceneLoader = function (sceneIn) {
           scene.viewAll();
         if (allCompletedCallback != undefined && (typeof allCompletedCallback == 'function'))
           allCompletedCallback();
+        
       }
     };
   };

package/src/three/Points.js

@@ -26,6 +26,7 @@ class Points extends Object3D {
 
 		this.geometry = geometry;
 		this.material = material;
+		this.sizePerPixel = 1;
 
 		this.updateMorphTargets();
 
@@ -64,7 +65,7 @@ class Points extends Object3D {
 		_inverseMatrix.copy( matrixWorld ).invert();
 		_ray.copy( raycaster.ray ).applyMatrix4( _inverseMatrix );
 
-		const localThreshold = threshold / ( ( this.scale.x + this.scale.y + this.scale.z ) / 3 );
+		const localThreshold = threshold / ( ( this.scale.x + this.scale.y + this.scale.z ) / 3 ) * this.material.size * this.sizePerPixel;
 		const localThresholdSq = localThreshold * localThreshold;
 
 		if ( geometry.isBufferGeometry ) {