zincjs 1.20.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "1.20.1",
+  "version": "2.0.0",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "main": "build/zinc.js",
   "directories": {
@@ -12,18 +12,19 @@
     "README.md",
     "src/*",
     "build/zinc.js",
-    "build/zinc.frontend.js",
     "build/zinc.js.map",
-    "webpack.config.js"
+    "vite.config.js"
   ],
   "scripts": {
-    "build-bundle": "webpack --config webpack.frontend.js; webpack --config webpack.backend.js",
-    "build-backend": "webpack --config webpack.backend.js",
-    "test": "npm --prefix ./test install && npm --prefix ./test run test-ci",
+    "build-bundle": "vite build",
+    "test-watch": "vitest",
+    "test": "vitest run --reporter=junit --outputFile=test-results.xml",
+    "test-standard": "vitest run",
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
     "jsdoc": "jsdoc -c jsdoc_conf.json",
     "version": "npm run build-bundle;npm run jsdoc;npm run changelog; git add CHANGELOG.md docs",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
+    "release:major": "npm version major;  npm publish",
     "release:minor": "npm version minor; npm publish",
     "release:patch": "npm version patch;  npm publish"
   },
@@ -44,27 +45,23 @@
   },
   "homepage": "http://alan-wu.github.io/ZincJS/",
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
+    "@vitest/coverage-v8": "^1.6.1",
     "auto-changelog": "^2.4.0",
-    "babel-loader": "^9.1.3",
-    "babel-preset-minify": "^0.5.1",
-    "file-loader": "^6.2.0",
+    "chai": "^4.1.0",
+    "gl": "^6.0.2",
+    "happy-dom": "^20.10.6",
     "jsdoc": "^4.0.2",
-    "raw-loader": "^4.0.2",
-    "webpack": "^5.90.3",
-    "webpack-cli": "^5.1.4",
+    "msw": "^2.14.6",
+    "vite": "^5.0.10",
+    "vite-plugin-node-polyfills": "^0.28.0",
+    "vitest": "^1.6.1",
     "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
     "css-element-queries": "^1.2.2",
     "lodash": "^4.17.19",
-    "nifti-reader-js": "^0.8.0",
-    "promise-polyfill": "^8.1.3",
+    "nifti-reader-js": "0.8.0",
     "three": "^0.130.1",
-    "three-spritetext": "1.6.2",
-    "url-loader": "^4.1.1",
-    "url-polyfill": "^1.1.7",
-    "webworkify-webpack": "^2.1.5"
+    "three-spritetext": "1.6.2"
   }
 }

package/src/controls.js

@@ -1,5 +1,5 @@
-const THREE = require('three');
-const resolveURL = require('./utilities').resolveURL;
+import * as THREE from 'three';
+import { resolveURL } from './utilities';
 
 /**
  * Object with containg viewport information used in ZincJS.
@@ -851,18 +851,24 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    * @param {requestCallback} finishCallback - The callback once the path is load.
    */
 	this.loadPathURL = (path_url, finishCallback) => {
-		const xmlhttp = new XMLHttpRequest();
-		xmlhttp.onreadystatechange = () => {
-		    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-		        const pathData = JSON.parse(xmlhttp.responseText);
-		        this.loadPath(pathData);
-	          if (finishCallback != undefined && (typeof finishCallback == 'function'))
-	            finishCallback();
-		    }
-		}
-		const requestURL = resolveURL(path_url);
-		xmlhttp.open("GET", requestURL, true);
-		xmlhttp.send();
+    const requestURL = resolveURL(path_url);
+    fetch(requestURL)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((pathData) => {
+      this.loadPath(pathData);
+      if (finishCallback !== undefined && typeof finishCallback === 'function') {
+        finishCallback();
+      }
+    })
+    .catch((error) => {
+      console.error(`Failed to load path asset from: ${requestURL}`, error);
+    });
+
 	}
 
   /**
@@ -1593,7 +1599,7 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
 	const renderer = rendererIn;
 	const callbackFunction = callbackFunctionIn;
 	const hoverCallbackFunction = hoverCallbackFunctionIn;
-	const enabled = true;
+	let enabled = true;
 	const raycaster = new THREE.Raycaster();
 	raycaster.params.Line.threshold = 0.1;
 	raycaster.params.Points.threshold = 1;
@@ -1607,11 +1613,11 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
 	let pickableObjects = undefined;
 
 	this.enable = () => {
-		enable = true;
+		enabled = true;
 	}
 
 	this.disable = () => {
-		enable = false;
+		enabled = false;
 	}
 
 	this.getIntersectsObject = (zincCamera) => {
@@ -2095,11 +2101,13 @@ const NDCCameraControl = function () {
   }
 };
 
-exports.Viewport = Viewport
-exports.CameraControls = CameraControls
-exports.SmoothCameraTransition = SmoothCameraTransition
-exports.RotateCameraTransition = RotateCameraTransition
-exports.RayCaster = RayCaster
-exports.CameraAutoTumble = CameraAutoTumble
-exports.StereoEffect = StereoEffect
-exports.NDCCameraControl = NDCCameraControl
+export {
+  Viewport,
+  CameraControls,
+  SmoothCameraTransition,
+  RotateCameraTransition,
+  RayCaster,
+  CameraAutoTumble,
+  StereoEffect,
+  NDCCameraControl
+}

package/src/geometryCSG.js

@@ -1,11 +1,13 @@
-const THREE = require('three');
-const ThreeBSP = require('./three-js-csg')(THREE);
-const Geometry = require('./primitives/geometry').Geometry;
-const work = require('webworkify-webpack');
-const Promise = require('promise-polyfill').default;
-//const work = undefined;
+import * as THREE from 'three';
+import { ThreeBSPWrapper } from './three-js-csg';
+import { Geometry } from './primitives/geometry';
+import GeometryWorker from './workers/geometryCSG.worker.js?worker';
+import { GeometryCSGInternal } from './workers/geometryCSGInternal';
+
+const ThreeBSP = ThreeBSPWrapper(THREE);
 const JSONLoader = THREE.BufferGeometryLoader;
 
+
 const GeometryCSG = function (hostIn) {
   //ZincGeoemtry of the main geometry
   let host = undefined;
@@ -15,7 +17,7 @@ const GeometryCSG = function (hostIn) {
   let worker = undefined;
   let onProgress = false;
   let myResolve = undefined;
-  
+
   var createGeometryFromJSON = json => {
 	  const material = host.getMorph().material.clone();
 	  material.morphTargets = false;
@@ -28,7 +30,7 @@ const GeometryCSG = function (hostIn) {
 	  newGeometry.setMorph(mesh);
 	  return newGeometry;
   }
-  
+
   var workerEventHandler = ev => {
 	  switch (ev.data.action) {
 	  	case 'message':
@@ -45,13 +47,13 @@ const GeometryCSG = function (hostIn) {
 	    	throw 'Cannot handle specified action.';
     }
   }
-    
+
   var initialise = hostIn => {
 	  if (work !== undefined) {
-		worker = work(require.resolve('./workers/geometryCSG.worker.js'));
+		  worker = new GeometryWorker();
 	  }
 	  if (!worker) {
-	    core = new (require('./workers/geometryCSGInternal').GeometryCSGInternal)(hostIn);
+	    core = new GeometryCSGInternal(hostIn);
 	  } else {
 		if (hostIn && hostIn.isGeometry) {
 		  let mesh = hostIn.getMorph();
@@ -63,14 +65,14 @@ const GeometryCSG = function (hostIn) {
 		}
 	  }
   }
-  
+
   this.getHostGeometry = () => {
 	const tempCSG = new ThreeBSP(host.getMorph());
     return new createZincGeometry(tempCSG);
   }
-  
+
   this.getGeometry = () => host;
-  
+
   const createZincGeometry = csgMesh => {
 		const material = host.getMorph().material.clone();
 		material.morphTargets = false;
@@ -81,11 +83,11 @@ const GeometryCSG = function (hostIn) {
 	    newGeometry.setMorph(newMesh);
 	    return newGeometry;
   }
-  
+
   this.setCSG = CSG => {
 	  core.setCSG(CSG);
-  } 
-  
+  }
+
   const sendToWork = (guestGeometry, action, resolve, reject) => {
 	  if (!onProgress) {
 		  let mesh = guestGeometry.getMorph();
@@ -97,7 +99,7 @@ const GeometryCSG = function (hostIn) {
 		  reject("On progress");
 	  }
   }
-  
+
   this.intersect = guestGeometry => {
 	  return new Promise((resolve, reject) => {
 		  if (worker) {
@@ -110,7 +112,7 @@ const GeometryCSG = function (hostIn) {
 		  }
 	  });
 	};
-  
+
   this.subtract = guestGeometry => {
 	  return new Promise((resolve, reject) => {
 		  if (worker) {
@@ -123,7 +125,7 @@ const GeometryCSG = function (hostIn) {
 		  }
 	  });
   }
-  
+
   this.union = guestGeometry => {
 	  return new Promise((resolve, reject) => {
 		  if (worker) {
@@ -136,13 +138,13 @@ const GeometryCSG = function (hostIn) {
 		  }
 	  });
   }
-  
+
   this.terminateWorker = () => {
 	  if (worker)
 		  worker.terminate();
   }
-  
+
   initialise(hostIn);
 };
 
-exports.GeometryCSG = GeometryCSG;
+export { GeometryCSG };

package/src/glyphsetCSG.js

@@ -1,11 +1,13 @@
-const THREE = require('three');
-const ThreeBSP = require('./three-js-csg')(THREE);
-const Glyphset = require('./primitives/glyphset').Glyphset;
+import * as THREE from 'three';
+import { ThreeBSPWrapper } from './three-js-csg';
+import { Glyphset } from './primitives/glyphset';
+
+const ThreeBSP = ThreeBSPWrapper(THREE);
 
 /**
  * Provides an object which takes in a glyphset, convert it into a CSG and further
  * action such as intersect with another geometry may be performed.
- * 
+ *
  * @class
  * @author Alan Wu
  * @return {GlyphsetCSG}
@@ -16,17 +18,17 @@ const GlyphsetCSG = function (hostIn) {
 	  host = hostIn;
   const hostCSGs = new Array();
   const currentIntersect = undefined;
-  
+
   this.setGlyphset = hostIn => {
 	  if (hostIn && hostIn.isGlyphset)
 		  host = hostIn;
 	  hostCSG = undefined;
   }
-  
+
   this.getGlyphset = () => {
 	  return host;
   }
-  
+
   const prepareCSGForGlyphs = () => {
 	  return glyph => {
 		  const mesh = glyph.getMesh();
@@ -42,7 +44,7 @@ const GlyphsetCSG = function (hostIn) {
 		  }
 	  };
   };
-  
+
   const prepareCSG = guestGeometry => {
 	  if (host && guestGeometry && guestGeometry.getMorph()) {
 	      if (hostCSGs.length == 0) {
@@ -53,11 +55,11 @@ const GlyphsetCSG = function (hostIn) {
 	  }
 	  return undefined;
   };
-  
+
   this.intersect = guestGeometry => {
 	  const guestCSG = prepareCSG(guestGeometry);
 	  if ((hostCSGs.length > 0) && guestCSG) {
-		const glyphset = new (require('./primitives/glyphset').Glyphset)();
+		const glyphset = new Glyphset();
 		for (let i = 0; i < hostCSGs.length; i++) {
 			const hostCSG = hostCSGs[i];
 		    const intersect = hostCSG.csg.intersect(guestCSG);
@@ -72,13 +74,13 @@ const GlyphsetCSG = function (hostIn) {
 			    glyph.setLabel(hostCSG.label);
 		    }
 		}
-	    const newCSG = new GlyphsetCSG(glyphset);	
+	    const newCSG = new GlyphsetCSG(glyphset);
 	    return newCSG;
 	  }
 
 	  return undefined;
   }
-  
+
 };
 
-exports.GlyphsetCSG = GlyphsetCSG;
+export { GlyphsetCSG };

package/src/loaders/GLTFToZincJSLoader.js

@@ -1,6 +1,8 @@
-const THREE = require('three');
-
-const GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader;
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { Geometry } from '../primitives/geometry';
+import { Lines } from '../primitives/lines';
+import { Pointset } from '../primitives/pointset';
 
 const GLTFToZincJSLoader = function () {
 
@@ -24,11 +26,11 @@ const GLTFToZincJSLoader = function () {
       } else {
         let zincGeometry = undefined;
         if (object.type === "Mesh") {
-          zincGeometry = new (require('../primitives/geometry').Geometry)();
+          zincGeometry = new Geometry();
         } else if (object.type === "LineSegments") {
-          zincGeometry = new (require('../primitives/lines').Lines)();
+          zincGeometry = new Lines();
         } else if (object.type === "Points") {
-          zincGeometry = new (require('../primitives/pointset').Pointset)();
+          zincGeometry = new Pointset();
         }
         if (zincGeometry) {
           let localTimeEnabled = false;
@@ -63,7 +65,7 @@ const GLTFToZincJSLoader = function () {
 
   /**
    * Load GLTF into this scene object.
-   * 
+   *
    * @param {String} url - URL to the GLTF file
    * @param {Function} finishCallback - Callback function which will be called
    * once the glyphset is succssfully load in.
@@ -72,7 +74,7 @@ const GLTFToZincJSLoader = function () {
     const path = url.substring(0, url.lastIndexOf("/") + 1);
     const filename = url.substring(url.lastIndexOf("/") + 1, url.length);
     const loader = new GLTFLoader().setPath(path);
-    
+
     loader.load( filename, function ( gltf ) {
       console.log(gltf)
       _this.parseGLTFObjects(gltf.scene, region, 0, finishCallback);
@@ -83,4 +85,4 @@ const GLTFToZincJSLoader = function () {
   }
 }
 
-exports.GLTFToZincJSLoader = GLTFToZincJSLoader;
+export { GLTFToZincJSLoader };

package/src/loaders/JSONLoader.js

@@ -1,17 +1,17 @@
-var THREE = require('three');
-
-var Loader = require('../three/Loader').Loader;
-var LoaderUtils = THREE.LoaderUtils;
-var AnimationClip = THREE.AnimationClip;
-var Vector3 = THREE.Vector3;
-var Vector4 = THREE.Vector4;
-var Color = THREE.Color;
-var Vector2 = THREE.Vector2;
-var Face3 = require('../three/Geometry').Face3;
-var Geometry = require('../three/Geometry').Geometry;
-var FileLoader = THREE.FileLoader;
-var DefaultLoadingManager = THREE.DefaultLoadingManager;
-var VideoHandler = require('../videoHandler').VideoHandler;
+import * as THREE from 'three';
+import { Face3 } from '../three/Geometry';
+import { Geometry } from '../three/Geometry';
+import { Loader } from '../three/Loader';
+import { VideoHandler } from '../videoHandler';
+
+const AnimationClip = THREE.AnimationClip;
+const Color = THREE.Color;
+const DefaultLoadingManager = THREE.DefaultLoadingManager;
+const FileLoader = THREE.FileLoader;
+const LoaderUtils = THREE.LoaderUtils;
+const Vector2 = THREE.Vector2;
+const Vector3 = THREE.Vector3;
+const Vector4 = THREE.Vector4;
 
 /**
  * @author mrdoob / http://mrdoob.com/

package/src/loaders/niftiReader.js

@@ -141,9 +141,6 @@ function convertNiftiToUint8Array(niftiHeader, niftiImage) {
     default: throw new Error("Unsupported NIfTI data type");
   }
 
-  const slope = niftiHeader.scl_slope || 1.0;
-  const intercept = niftiHeader.scl_inter || 0.0;
-
   let min = Infinity;
   let max = -Infinity;
 

package/src/loaders/primitivesLoader.js

@@ -1,5 +1,5 @@
-const JSONLoader = require('./JSONLoader').JSONLoader;
-const THREE = require('three');
+import { JSONLoader } from './JSONLoader';
+import * as THREE from 'three';
 const FileLoader = THREE.FileLoader;
 
 const mergeGlyphData = (glyphData) => {
@@ -174,7 +174,7 @@ const MultiSourcesHandler = function(numberIn, onLoadCallback, options) {
   }
 }
 
-exports.PrimitivesLoader = function () {
+const PrimitivesLoader = function () {
   let concurrentDownloads = 0;
   const MAX_DOWNLOAD = 20;
   this.crossOrigin = "Anonymous";
@@ -304,3 +304,4 @@ exports.PrimitivesLoader = function () {
 
 }
 
+export { PrimitivesLoader };

package/src/minimap.js

@@ -1,14 +1,14 @@
-const THREE = require('three');
+import * as THREE from 'three';
 
 /**
  * This provide a full scale minimap. It will always
  * display the whole map.
- * 
+ *
  * @class
  * @author Alan Wu
  * @return {Minimap}
  */
-exports.Minimap = function (sceneIn) {
+const Minimap = function (sceneIn) {
   let targetScene = sceneIn;
   this.camera = new THREE.OrthographicCamera(
     -0.5, 0.5, 0.5, -0.5, 0.01, 10);
@@ -24,7 +24,7 @@ exports.Minimap = function (sceneIn) {
   ] );
   let positionAttributes = new THREE.BufferAttribute( vertices, 3 );
   geometry.setAttribute( 'position', positionAttributes);
-  var material = new THREE.MeshBasicMaterial( { color: 0x333333, 
+  var material = new THREE.MeshBasicMaterial( { color: 0x333333,
     depthTest: false,
     depthWrite: false,
     opacity: 0.5,
@@ -88,3 +88,5 @@ exports.Minimap = function (sceneIn) {
     }
   }
 }
+
+export { Minimap };

package/src/primitives/augmentShader.js

@@ -2,7 +2,7 @@
 /**
  * Provide additional shaders to render time dependent color.
  */
-exports.augmentMorphColor = function() {
+const augmentMorphColor = function() {
     return function(shader) {
         shader.vertexShader = shader.vertexShader.replace(
             '#include <color_pars_vertex>',
@@ -24,3 +24,5 @@ exports.augmentMorphColor = function() {
         );
     };
 }
+
+export { augmentMorphColor };

package/src/primitives/geometry.js

@@ -1,5 +1,7 @@
-const THREE = require('three');
-const toBufferGeometry = require('../utilities').toBufferGeometry;
+import * as THREE from 'three';
+import { toBufferGeometry } from '../utilities';
+import { augmentMorphColor } from './augmentShader';
+import { ZincObject} from './zincObject';
 
 const createMeshForGeometry =  (geometryIn, materialIn, options) => {
   // First copy the geometry
@@ -40,7 +42,7 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
     }
     //material = PhongToToon(material);
     if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
-      material.onBeforeCompile = (require("./augmentShader").augmentMorphColor)();
+      material.onBeforeCompile = augmentMorphColor();
     }
   } else {
     let videoTexture = geometry._video.createCanvasVideoTexture();
@@ -54,27 +56,27 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
     });
     this.videoHandler = geometry._video;
   }
-  return new THREE.Mesh(geometry, material); 
+  return new THREE.Mesh(geometry, material);
 }
 
 /**
  * Provides an object which stores geometry and provides method which controls its animations.
  * This is created when a valid json file containging geometry is read into a {@link Zinc.Scene}
  * object.
- * 
+ *
  * @class
  * @author Alan Wu
  * @return {Geometry}
  */
 const Geometry = function () {
-  (require('./zincObject').ZincObject).call(this);
+  ZincObject.call(this);
 	// THREE.Geometry or THREE.BufferGeometry
 	this.videoHandler = undefined;
   this.isGeometry = true;
 
   /**
    * Create the mesh for rendering
-   * 
+   *
    * @param {THREE.Geomtry} geometryIn - Geometry to be rendered.
    * @param {THREE.Material} materialIn - Material to be set for the geometry.
    * @param {Object} options - Provide various options
@@ -89,7 +91,7 @@ const Geometry = function () {
     //Skip if there is a morph already
 		if (this.morph && this.morph.geometry && (geometryIn != undefined))
 			return;
-		const mesh = createMeshForGeometry(geometryIn, materialIn, options); 
+		const mesh = createMeshForGeometry(geometryIn, materialIn, options);
 		this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
 	}
 
@@ -114,7 +116,7 @@ const Geometry = function () {
 		            new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
 		        ]);
 		}
-		geometry.uvsNeedUpdate = true;	
+		geometry.uvsNeedUpdate = true;
 	}
 
   /**
@@ -124,10 +126,10 @@ const Geometry = function () {
   this.checkTransparentMesh = function() {
     this._lod.checkTransparentMesh();
   }
-	
+
 	/**
 	 * Set wireframe display for this geometry.
-	 * 
+	 *
 	 * @param {Boolean} wireframe - Flag to turn on/off wireframe display.
 	 */
 	this.setWireframe = wireframe => {
@@ -157,9 +159,9 @@ const Geometry = function () {
       }
     }
   }
-	
+
 
 }
 
-Geometry.prototype = Object.create((require('./zincObject').ZincObject).prototype);
-exports.Geometry = Geometry;
+Geometry.prototype = Object.create(ZincObject.prototype);
+export { Geometry };

package/src/primitives/glyph.js

@@ -1,4 +1,6 @@
-const THREE = require('three');
+import * as THREE from 'three';
+import { Label } from './label';
+import { ZincObject } from './zincObject';
 
 /**
  * Zinc representation of glyph graphic, it contains the colours,
@@ -13,7 +15,7 @@ const THREE = require('three');
  * @return {Glyph}
  */
 const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
-  (require('./zincObject').ZincObject).call(this);
+  ZincObject.call(this);
   let material = undefined;
   if (materialIn) {
     material = materialIn.clone();
@@ -80,7 +82,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
       label = undefined;
     }
     if (labelString && (typeof labelString === 'string' || labelString instanceof String)) {
-      label = new (require('./label').Label)(labelString, colour);
+      label = new Label(labelString, colour);
       label.setPosition(_position[0], _position[1], _position[2]);
       const sprite = label.getSprite();
       sprite.material.alphaTest = 0.5;
@@ -180,5 +182,5 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
   }
 }
 
-Glyph.prototype = Object.create((require('./zincObject').ZincObject).prototype);
-exports.Glyph = Glyph;
+Glyph.prototype = Object.create(ZincObject.prototype);
+export { Glyph };