zincjs 2.3.1-beta.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "2.3.1-beta.0",
+  "version": "2.4.0",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",
@@ -69,6 +69,6 @@
     "lodash": "^4.17.19",
     "nifti-reader-js": "0.8.0",
     "three": "^0.185.1",
-    "three-spritetext": "1.6.2"
+    "three-spritetext": "1.10.0"
   }
 }

package/src/primitives/label.js

@@ -20,10 +20,11 @@ const Label = function (textIn, colourIn) {
   let colour = colourIn;
   let size = 1.0;
   let fontWeight = 500;
+  const textHeight = 0.012;
   if (colourIn)
-    sprite = new SpriteText(text, 0.012, colourIn.getStyle());
+    sprite = new SpriteText(text, textHeight, colourIn.getStyle());
   else
-    sprite = new SpriteText(text, 0.012);
+    sprite = new SpriteText(text, textHeight);
   sprite.fontFace = "Asap";
   sprite.fontSize = 90;
   sprite.fontWeight = fontWeight;
@@ -34,7 +35,8 @@ const Label = function (textIn, colourIn) {
   sprite.material.sizeAttenuation = false;
   sprite.center.x = -0.05;
   sprite.center.y = 0;
-  const originalScale = [sprite.scale.x, sprite.scale.y];
+
+
 
   /**
    * Get the current position in an array containing the x, y and z
@@ -105,8 +107,7 @@ const Label = function (textIn, colourIn) {
    */
   this.setSize = sizeIn => {
     if (sizeIn > 0.0) {
-      sprite.scale.x = originalScale[0] * sizeIn;
-      sprite.scale.y = originalScale[1] * sizeIn;
+      sprite.textHeight = textHeight * sizeIn;
       size = sizeIn;
     }
   }
@@ -130,8 +131,25 @@ const Label = function (textIn, colourIn) {
    */
   this.setText = textIn => {
     if (textIn && textIn !== sprite.text) {
+      //Force teh texture to update
+      const canvas = sprite._canvas;
+      if (sprite.material && sprite.material.map) {
+        sprite.material.map.dispose();
+      }
+      if (sprite._canvas) {
+        const ctx = sprite._canvas.getContext('2d');
+        if (ctx) {
+          ctx.clearRect(0, 0, sprite._canvas.width, sprite._canvas.height);
+        }
+        sprite._canvas.width = 1;
+        sprite._canvas.height = 1;
+      }
       sprite.text = textIn;
+      sprite.textHeight = textHeight * size;
       text = textIn;
+      if (sprite.material && sprite.material.map) {
+        sprite.material.map.needsUpdate = true;
+      }
     }
   }
 

package/src/primitives/marker.js

@@ -3,11 +3,9 @@ import myImage from '../assets/mapMarker.svg';
 import { createNewSpriteText } from '../utilities';
 import { ZincObject } from './zincObject';
 
-const markerImage = new Image(128, 128);
-markerImage.src = myImage;
-const texture = new THREE.Texture();
-texture.image = markerImage;
-texture.needsUpdate = true;
+const textureLoader = new THREE.TextureLoader();
+const texture = textureLoader.load(myImage);
+texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
   map: texture,
@@ -197,6 +195,7 @@ const Marker = function(zincObject) {
     }
     if (!label && numberIn) {
       label = createNewSpriteText(numberIn, 0.012, "black", "Asap", 120, 700);
+      label.renderOrder = 10001;
       this.morph.add(label);
     }
     number = numberIn;

package/src/primitives/markerCluster.js

@@ -1,11 +1,11 @@
 import * as THREE from 'three';
 import { ZincObject } from './zincObject';
-const markerImage = new Image(128, 128);
 import mapMarkerOrange from '../assets/mapMarkerOrange.svg';
-markerImage.src = mapMarkerOrange;
-const texture = new THREE.Texture();
-texture.image = markerImage;
-texture.needsUpdate = true;
+import { createNewSpriteText } from '../utilities';
+
+const textureLoader = new THREE.TextureLoader();
+const texture = textureLoader.load(mapMarkerOrange);
+texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
   map: texture,
@@ -15,7 +15,6 @@ const spriteMaterial = new THREE.SpriteMaterial({
   depthWrite: false,
   sizeAttenuation: false
 });
-import { createNewSpriteText } from '../utilities';
 
 /**
  * A special graphics type with a tear drop shape.
@@ -46,9 +45,9 @@ const MarkerCluster = function(sceneIn) {
    *
    * @param {Number} size - size to be set.
    */
-  this.setSpriteSize = size => {
+  this.setSpriteSize = sizeIn => {
     sprite.scale.set(0.015, 0.02, 1);
-    sprite.scale.multiplyScalar(size);
+    sprite.scale.multiplyScalar(sizeIn);
   }
 
   this.clear = () => {
@@ -101,6 +100,7 @@ const MarkerCluster = function(sceneIn) {
         sprite.label.material.dispose();
       }
       sprite.label = createNewSpriteText(number, 0.012, "black", "Asap", 120, 700);
+      sprite.label.renderOrder = 10001;
       sprite.number = number;
       sprite.group.add(sprite.label);
     }

package/src/primitives/pointset.js

@@ -301,11 +301,11 @@ const Pointset = function () {
 
 
   /**
- * Turn size attenuation on/off based on the flag.
- *
- * @param {Boolean} flag - Determin either size attenuation
- * should be on or off.
- */
+  * 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;

package/src/utilities.js

@@ -742,7 +742,7 @@ function createNewSpriteText(text, height, colour, font, pixel, weight) {
   sprite.material.depthWrite = false;
   sprite.material.depthTest = false;
   sprite.center.set(0.5, -1.2);
-  sprite.renderOrder = 10000;
+  sprite.renderOrder = 10001;
   return sprite;
 }