zincjs 1.6.0 → 1.8.0

package/package.json

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

package/src/assets/mapMarker.svg

@@ -1,11 +1,34 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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="#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>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="365" height="560" viewBox="0 0 365 560" xml:space="preserve">
+<desc>Created with Fabric.js 5.2.4</desc>
+<defs>
+</defs>
+<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
+<g transform="matrix(0 0 0 0 0 0)" id="808ed283-2524-440f-88ae-3bdb47bb5749"  >
+</g>
+<g transform="matrix(1 0 0 1 182.5 280)" id="db30413d-5bff-4b98-ab59-464497ee199e"  >
+<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke"  x="-182.5" y="-280" rx="0" ry="0" width="365" height="560" />
+</g>
+<g transform="matrix(0 0 0 0 0 97.5)"  >
+<g style=""   >
+</g>
+</g>
+<g transform="matrix(0 0 0 0 0 97.5)"  >
+<g style=""   >
+</g>
+</g>
+<g transform="matrix(0.99 0 0 0.99 182.5 280)"  >
+<g style="" vector-effect="non-scaling-stroke"   >
+		<g transform="matrix(1 0 0 1 0 0)"  >
+<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke"  x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
+</g>
+		<g transform="matrix(1 0 0 1 0 0)"  >
+<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,89,116); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-182.9, -279.85)" d="M 182.9 551.7 C 182.9 551.8000000000001 183.1 552 183.1 552 C 183.1 552 358.3 283 358.3 194.6 C 358.3 64.5 269.5 7.900000000000006 182.9 7.699999999999989 C 96.3 7.9 7.5 64.5 7.5 194.6 C 7.5 283 182.8 552 182.8 552 C 182.8 552 182.9 551.7 182.9 551.7 z M 122.2 187.2 C 122.2 153.6 149.4 126.39999999999999 183 126.39999999999999 C 216.6 126.39999999999999 243.8 153.6 243.8 187.2 C 243.8 220.79999999999998 216.5 248 182.9 248 C 149.4 248 122.2 220.8 122.2 187.2 z" stroke-linecap="round" />
+</g>
+		<g transform="matrix(3.82 0 0 3.82 0 -100.77)"  >
+<circle style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  cx="0" cy="0" r="35" />
+</g>
+</g>
+</g>
+</svg>

package/src/primitives/marker.js

@@ -4,7 +4,7 @@ markerImage.src = require("../assets/mapMarker.svg");
 const texture = new THREE.Texture();
 texture.image = markerImage;
 texture.needsUpdate = true;
-const size = [0.017, 0.025, 1];
+const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
   map: texture,
   alphaTest: 0.5,
@@ -12,7 +12,8 @@ const spriteMaterial = new THREE.SpriteMaterial({
   depthTest: false,
   depthWrite: false,
   sizeAttenuation: false
-}); 
+});
+const createNewSpriteText = require('../utilities').createNewSpriteText;
 
 /**
  * A special graphics type with a tear drop shape.
@@ -33,6 +34,8 @@ const Marker = function(zincObject) {
   this.isMarker = true;
   let enabled = false;
   this.ndc = new THREE.Vector3();
+  let number = undefined;
+  let label = undefined;
 
 	let initialise = () => {             
     sprite = new THREE.Sprite(spriteMaterial);
@@ -93,12 +96,38 @@ const Marker = function(zincObject) {
       sprite.clear();
       sprite = undefined;
     }
+    if (label) {
+      label.material.map.dispose();
+      label.material.dispose();
+      label = undefined;
+    }
   }
 
   this.isEnabled = () => {
     return enabled;
   }
 
+  this.setNumber = (numberIn) => {
+    if (!numberIn || (number != numberIn)) {
+      //remove label
+      if (label) {
+        this.morph.remove(label);
+        label.material.map.dispose();
+        label.material.dispose();
+        label = undefined;
+      }
+    }
+    if (!label && numberIn) {
+      label = createNewSpriteText(numberIn, 0.012, "black", "Asap", 50, 500);
+      this.morph.add(label);
+    }
+    number = numberIn;
+  }
+
+  this.getNumber = () => {
+    return number ? number : 1;
+  }
+
   /**
    * Set the visibility of this Geometry.
    * 

package/src/primitives/markerCluster.js

@@ -1,5 +1,4 @@
 const THREE = require('three');
-const SpriteText = require('three-spritetext').default;
 const markerImage = new Image(128, 128);
 markerImage.src = require("../assets/mapMarkerOrange.svg");
 const texture = new THREE.Texture();
@@ -14,18 +13,7 @@ const spriteMaterial = new THREE.SpriteMaterial({
   depthWrite: false,
   sizeAttenuation: false
 });
-
-const createNewLabel = (text, height, colour, font, pixel, weight) => {
-  const sprite = new SpriteText(text, height, colour, font, pixel, weight);
-  sprite.material.sizeAttenuation = false;
-  sprite.material.alphaTest = 0.5;
-  sprite.material.transparent = true;
-  sprite.material.depthWrite = false;
-  sprite.material.depthTest = false;
-  sprite.center.set(0.5, -1.2);
-  sprite.renderOrder = 10000;
-  return sprite;
-}
+const createNewSpriteText = require('../utilities').createNewSpriteText;
 
 /**
  * A special graphics type with a tear drop shape.
@@ -93,25 +81,25 @@ const MarkerCluster = function(sceneIn) {
       "group": localGroup,
       "marker": sprite,
       "label": undefined,
-      "length": 0,
+      "number": 0,
       "min": [0, 0, 0],
       "max": [1, 1, 1],
     };
   }
 
-  const activateSpriteForCluster = (sprite, cluster, length) => {
+  const activateSpriteForCluster = (sprite, cluster, number) => {
     sprite.group.visible = true;
     sprite.group.position.set(
       cluster.coords[0], cluster.coords[1], cluster.coords[2]
     );
-    if (sprite.label === undefined || (length !== sprite.length)) {
+    if (sprite.label === undefined || (number !== sprite.number)) {
       if (sprite.label) {
         sprite.group.remove(sprite.label);
         sprite.label.material.map.dispose();
         sprite.label.material.dispose();
       }
-      sprite.label = createNewLabel(length, 0.012, "black", "Asap", 50, 500);
-      sprite.length = length;
+      sprite.label = createNewSpriteText(number, 0.012, "black", "Asap", 50, 500);
+      sprite.number = number;
       sprite.group.add(sprite.label);
     }
     sprite.min = cluster.min;
@@ -122,16 +110,18 @@ const MarkerCluster = function(sceneIn) {
     let currentIndex = 0;
     clusters.forEach((cluster) => {
       const length = cluster.members.length;
+      let number = 0;
       if (length === 1) {
         cluster.members[0].setVisibility(true);
       } else {
         cluster.members.forEach((marker) => {
+          number += marker.getNumber();
           marker.setVisibility(false);
         });
         if (!sprites[currentIndex]) {
           sprites.push(createNewSprite(currentIndex));
         }
-        activateSpriteForCluster(sprites[currentIndex], cluster, length);
+        activateSpriteForCluster(sprites[currentIndex], cluster, number);
         currentIndex++;
       }
     });

package/src/primitives/texturePrimitive.js

@@ -25,7 +25,6 @@ const TexturePrimitive = function (textureIn) {
         const texture = new (require('../texture/textureArray').TextureArray)();
         const imgArray = [];
         textureData.images.source.forEach(img => {
-          console.log(resolveURL(img))
           imgArray.push(resolveURL(img));
         });
         const _this = this;

package/src/primitives/zincObject.js

@@ -41,6 +41,7 @@ const ZincObject = function() {
   this.userData = {};
   this.videoHandler = undefined;
   this.marker = undefined;
+  this.markerNumber = undefined;
   this.markerUpdateRequired = true;
   this.closestVertexIndex = -1;
   this.boundingBoxUpdateRequired = true;
@@ -251,7 +252,6 @@ ZincObject.prototype.setMorphTime = function(time) {
   }
   if (timeChanged) {
     this.boundingBoxUpdateRequired = true;
-    const morph = this._lod.getCurrentMorph();
     this._lod.updateMorphColorAttribute(true);
     if (this.timeEnabled)
       this.markerUpdateRequired = true;
@@ -548,6 +548,7 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
         this.marker.enable();
         this.group.add(this.marker.morph);
       }
+      this.marker.setNumber(this.markerNumber);
       if (options && options.camera && (ndcToBeUpdated ||
         options.markerCluster.markerUpdateRequired)) {
         this.marker.updateNDC(options.camera.cameraObject);
@@ -619,7 +620,7 @@ ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
  * 
  * @return {Boolean} 
  */
- ZincObject.prototype.setMarkerMode = function(mode) {
+ ZincObject.prototype.setMarkerMode = function(mode, options) {
   if (mode !== this.markerMode) {
     if (mode === "on" || mode === "off") {
       this.markerMode = mode;
@@ -630,6 +631,9 @@ ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
       this.region.pickableUpdateRequired = true;
     }
   }
+  if (options) {
+    this.markerNumber = options.number;
+  }
 }
 
 //Update the geometry and colours depending on the morph.

package/src/region.js

@@ -321,7 +321,11 @@ let Region = function (parentIn, sceneIn) {
       if (zincObject === zincObjects[i]) {
         group.remove(zincObject.getGroup());
         zincObjects.splice(i, 1);
+        if (scene) {
+          scene.triggerObjectRemovedCallback(zincObject);
+        }
         zincObject.dispose();
+        this.pickableUpdateRequired = true;
         return;
       }
     }
@@ -750,16 +754,18 @@ let Region = function (parentIn, sceneIn) {
     //process markers visibility and size, as long as there are more than
     //one entry in markersList is greater than 1, markers have been enabled.
     if (options && (playAnimation === false) &&
-      options?.markerCluster?.markerUpdateRequired) {
-      const markerDepths = Object.values(options.markersList)
-        .map((marker) => marker.ndc.z);
-      if (markerDepths.length > 1) {
-        const min = Math.min(...markerDepths);
-        const max = Math.max(...markerDepths);
-        allObjects.forEach(zincObject => {
-          zincObject.processMarkerVisual(min, max);
-        });
-      }
+      options.markerCluster?.markerUpdateRequired) {
+      /** 
+        const markerDepths = Object.values(options.markersList)
+          .map((marker) => marker.ndc.z);
+        if (markerDepths.length > 1) {
+          const min = Math.min(...markerDepths);
+          const max = Math.max(...markerDepths);
+          allObjects.forEach(zincObject => {
+            zincObject.processMarkerVisual(min, max);
+          });
+        }
+      */
       options.markerCluster.calculate();
     }
   }

package/src/scene.js

@@ -39,6 +39,8 @@ exports.Scene = function (containerIn, rendererIn) {
   let minimap = undefined;
   let zincObjectAddedCallbacks = {};
   let zincObjectAddedCallbacks_id = 0;
+  let zincObjectRemovedCallbacks = {};
+  let zincObjectRemovedCallbacks_id = 0;
   const scene = new THREE.Scene();
   const rootRegion = new (require('./region').Region)(undefined, this);
   scene.add(rootRegion.getGroup());
@@ -968,6 +970,7 @@ exports.Scene = function (containerIn, rendererIn) {
     markerCluster.clear();
     rootRegion.clear(true);
     this.clearZincObjectAddedCallbacks();
+    this.clearZincObjectRemovedCallbacks();
     sceneLoader.toBeDwonloaded = 0;
     if (zincCameraControls) {
       zincCameraControls.calculateMaxAllowedDistance(this);
@@ -1126,6 +1129,18 @@ exports.Scene = function (containerIn, rendererIn) {
 		zincObjectAddedCallbacks[zincObjectAddedCallbacks_id] = callbackFunction;
 		return zincObjectAddedCallbacks_id;
 	}
+
+	/**
+	 * Add a callback function which will be called everytime zinc object is removed.
+	 * @param {Function} callbackFunction - callbackFunction to be added.
+	 * 
+	 * @return {Number}
+	 */
+	this.addZincObjectRemovedCallbacks = callbackFunction => {
+		zincObjectRemovedCallbacks_id = zincObjectRemovedCallbacks_id + 1;
+		zincObjectRemovedCallbacks[zincObjectRemovedCallbacks_id] = callbackFunction;
+		return zincObjectRemovedCallbacks_id;
+	}
 	
 	/**
 	 * Remove a callback function that is previously added to the scene.
@@ -1137,6 +1152,16 @@ exports.Scene = function (containerIn, rendererIn) {
 		}
 	}
 
+	/**
+	 * Remove a callback function that is previously added to the scene.
+	 * @param {Number} id - identifier of the previously added callback function.
+	 */
+	this.removeZincObjectRemovedCallbacks = id => {
+		if (id in zincObjectRemovedCallbacks_id) {
+   			delete zincObjectRemovedCallbacks[id];
+		}
+	}
+
   /**
 	 * Clear all zinc object callback function
 	 */
@@ -1145,6 +1170,14 @@ exports.Scene = function (containerIn, rendererIn) {
     zincObjectAddedCallbacks_id = 0;
 	}
 
+  /**
+	 * Clear all zinc object callback function
+	 */
+	this.clearZincObjectRemovedCallbacks = () => {
+		zincObjectRemovedCallbacks = {};
+    zincObjectRemovedCallbacks_id = 0;
+	}
+
   /**
 	 * Used to trigger zinc object added callback
 	 */
@@ -1156,6 +1189,17 @@ exports.Scene = function (containerIn, rendererIn) {
     }
   }
 
+  /**
+	 * Used to trigger zinc object removed callback
+	 */
+  this.triggerObjectRemovedCallback= (zincObject) => {
+    for (let key in zincObjectRemovedCallbacks) {
+      if (zincObjectRemovedCallbacks.hasOwnProperty(key)) {
+        zincObjectRemovedCallbacks[key](zincObject);
+      }
+    }
+  }
+
   /*
 	 * Add temporary points to the scene which can be removed
    * with clearTemporaryPrimitives method.

package/src/utilities.js

@@ -1,5 +1,6 @@
 const THREE = require('three');
 const THREEGeometry = require('./three/Geometry').Geometry;
+const SpriteText = require('three-spritetext').default;
 
 function resolveURL(url) {
 	let actualURL = url;
@@ -439,6 +440,17 @@ function getCircularTexture() {
   return texture;
 }
 
+function createNewSpriteText(text, height, colour, font, pixel, weight) {
+  const sprite = new SpriteText(text, height, colour, font, pixel, weight);
+  sprite.material.sizeAttenuation = false;
+  sprite.material.alphaTest = 0.5;
+  sprite.material.transparent = true;
+  sprite.material.depthWrite = false;
+  sprite.material.depthTest = false;
+  sprite.center.set(0.5, -1.2);
+  sprite.renderOrder = 10000;
+  return sprite;
+}
 
 exports.getBoundingBox = getBoundingBox;
 exports.createNewURL = createNewURL;
@@ -448,3 +460,4 @@ exports.resolveURL = resolveURL;
 exports.loadExternalFile = loadExternalFile;
 exports.loadExternalFiles = loadExternalFiles;
 exports.PhongToToon = PhongToToon;
+exports.createNewSpriteText = createNewSpriteText;

package/src/zinc.js

@@ -18,6 +18,7 @@ const Zinc = function() {
   this.Glyph = require('./primitives/glyph').Glyph;
   this.Glyphset = require('./primitives/glyphset').Glyphset;
   this.Pointset = require('./primitives/pointset').Pointset;
+  this.Label = require('./primitives/label').Label;
   this.Lines = require('./primitives/lines').Lines;
   this.TextureArray = require('./texture/textureArray').TextureArray;
   this.TextureSlides = require('./primitives/textureSlides').TextureSlides;