zincjs 1.20.1 → 2.0.0

package/src/sceneLoader.js

@@ -1,11 +1,16 @@
-const THREE = require('three');
-const resolveURL = require('./utilities').resolveURL;
-const createNewURL = require('./utilities').createNewURL;
-const isRegionGroup = require('./utilities').isRegionGroup;
-
-const STLLoader = require('./loaders/STLLoader').STLLoader;
-const OBJLoader = require('./loaders/OBJLoader').OBJLoader;
-const PrimitivesLoader = require('./loaders/primitivesLoader').PrimitivesLoader;
+import * as THREE from 'three';
+import { GLTFToZincJSLoader } from './loaders/GLTFToZincJSLoader';
+import { OBJLoader } from './loaders/OBJLoader';
+import { PrimitivesLoader } from './loaders/primitivesLoader';
+import { STLLoader } from './loaders/STLLoader';
+import { Geometry } from './primitives/geometry';
+import { Glyphset } from './primitives/glyphset';
+import { Lines } from './primitives/lines';
+import { Pointset } from './primitives/pointset';
+import { TextureSlides } from './primitives/textureSlides';
+import { TubeLines } from './primitives/tubeLines';
+import { createNewURL, isRegionGroup, resolveURL } from './utilities';
+import Zinc from './zinc';
 
 /**
  * A helper class to help with reading / importing primitives and
@@ -16,7 +21,7 @@ const PrimitivesLoader = require('./loaders/primitivesLoader').PrimitivesLoader;
  * @author Alan Wu
  * @return {SceneLoader}
  */
-exports.SceneLoader = function (sceneIn) {
+const SceneLoader = function (sceneIn) {
   const scene = sceneIn;
   this.toBeDownloaded = 0;
   this.progressMap = {};
@@ -79,7 +84,7 @@ exports.SceneLoader = function (sceneIn) {
       const promises = [];
       for (const [key, value] of Object.entries(views.Entries)) {
         if (referenceURL) {
-          newURL = createNewURL(value, referenceURL);
+          const newURL = createNewURL(value, referenceURL);
           promises.push(new Promise((resolve, reject) => {
             // Add parameters if we are sent them
             fetch(newURL)
@@ -110,26 +115,28 @@ exports.SceneLoader = function (sceneIn) {
    */
   this.loadViewURL = (url, finishCallback) => {
     this.toBeDownloaded += 1;
-    const xmlhttp = new XMLHttpRequest();
-    xmlhttp.onreadystatechange = () => {
-      if (xmlhttp.readyState == 4) {
-        if(xmlhttp.status == 200) {
-          const viewData = JSON.parse(xmlhttp.responseText);
-          scene.setupMultipleViews("default", { "default" : viewData });
-          scene.resetView();
-          viewLoaded = true;
-          --this.toBeDownloaded;
-          if (finishCallback != undefined && (typeof finishCallback == 'function'))
-            finishCallback();
-        } else {
-          (this.onError(finishCallback))({responseURL: url});
+    const requestURL = resolveURL(url);
+    fetch(requestURL)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
-      }
+        return response.json();
+      })
+      .then((viewData) => {
+        scene.setupMultipleViews("default", { "default" : viewData });
+        scene.resetView();
+        viewLoaded = true;
+        --this.toBeDownloaded;
+        if (finishCallback !== undefined && typeof finishCallback === 'function') {
+          finishCallback();
+        }
+      })
+      .catch((error) => {
+        console.error(`Fetch failed for URL: ${requestURL}`, error);
+        (this.onError(finishCallback))({ responseURL: requestURL });
+      });
     }
-    const requestURL = resolveURL(url);
-    xmlhttp.open("GET", requestURL, true);
-    xmlhttp.send();
-  }
 
 /**
    * Load a legacy model(s) format with the provided URLs and parameters. This only loads the geometry
@@ -142,8 +149,8 @@ exports.SceneLoader = function (sceneIn) {
     this.toBeDownloaded += number;
     for (let i = 0; i < number; i++) {
       const filename = urls[i];
-      let colour = require('./zinc').defaultMaterialColor;
-      let opacity = require('./zinc').defaultOpacity;
+      let colour = Zinc.defaultMaterialColor;
+      let opacity = Zinc.defaultOpacity;
       if (colours != undefined && colours[i] != undefined)
         colour = colours[i] ? true : false;
       if (opacities != undefined && opacities[i] != undefined)
@@ -168,30 +175,42 @@ exports.SceneLoader = function (sceneIn) {
    * @deprecated
    */
   this.loadFromViewURL = (targetRegion, jsonFilePrefix, finishCallback) => {
-    const xmlhttp = new XMLHttpRequest();
-    xmlhttp.onreadystatechange = () => {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        const viewData = JSON.parse(xmlhttp.responseText);
-        scene.loadView(viewData);
-        const urls = [];
-        const filename_prefix = jsonFilePrefix + "_";
-        for (let i = 0; i < viewData.numberOfResources; i++) {
-          const filename = filename_prefix + (i + 1) + ".json";
-          urls.push(filename);
-        }
-        this.loadModelsURL(targetRegion, urls, viewData.colour, viewData.opacity, viewData.timeEnabled, viewData.morphColour, finishCallback);
-      }
-    }
     const requestURL = resolveURL(jsonFilePrefix + "_view.json");
-    xmlhttp.open("GET", requestURL, true);
-    xmlhttp.send();
+    fetch(requestURL)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((viewData) => {
+      scene.loadView(viewData);
+      const urls = [];
+      const filename_prefix = jsonFilePrefix + "_";
+      for (let i = 0; i < viewData.numberOfResources; i++) {
+        const filename = filename_prefix + (i + 1) + ".json";
+        urls.push(filename);
+      }
+      this.loadModelsURL(
+        targetRegion,
+        urls,
+        viewData.colour,
+        viewData.opacity,
+        viewData.timeEnabled,
+        viewData.morphColour,
+        finishCallback
+      );
+    })
+    .catch((error) => {
+      console.error(`Failed to load view data from: ${requestURL}`, error);
+    });
   }
 
   //Internal loader for a regular zinc geometry.
   const linesloader = (region, localTimeEnabled, localMorphColour, groupName,
     anatomicalId, renderOrder, lod, tubeLines, finishCallback) => {
       return (geometry, materials) => {
-      const newLines = tubeLines ? new (require('./primitives/tubeLines').TubeLines)() : new (require('./primitives/lines').Lines)();
+      const newLines = tubeLines ? new TubeLines() : new Lines();
       let material = undefined;
       if (materials && materials[0]) {
         material = new THREE.LineBasicMaterial({color:materials[0].color.clone()});
@@ -267,7 +286,7 @@ exports.SceneLoader = function (sceneIn) {
       let anatomicalId = (options && options.anatomicalId) ? options.anatomicalId : undefined;
       let displayLabels = (options && options.displayLabels) ? options.displayLabels : undefined;
       let renderOrder = (options && "renderOrder" in options) ? options.renderOrder : undefined;
-      const newGlyphset = new (require('./primitives/glyphset').Glyphset)();
+      const newGlyphset = new Glyphset();
       newGlyphset.setDuration(scene.getDuration());
       newGlyphset.groupName = groupName;
       let myCallback = () => {
@@ -338,7 +357,7 @@ exports.SceneLoader = function (sceneIn) {
   //Internal loader for zinc pointset.
   const pointsetloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
     return (geometry, materials) => {
-      const newPointset = new (require('./primitives/pointset').Pointset)();
+      const newPointset = new Pointset();
       let material = new THREE.PointsMaterial({ alphaTest: 0.5, size: 10, sizeAttenuation: false });
       if (materials && materials[0]) {
         if (1.0 > materials[0].opacity) {
@@ -378,8 +397,8 @@ exports.SceneLoader = function (sceneIn) {
    */
   this.loadSTL = (region, url, groupName, finishCallback) => {
     this.toBeDownloaded += 1;
-    const colour = require('./zinc').defaultMaterialColor;
-    const opacity = require('./zinc').defaultOpacity;
+    const colour = Zinc.defaultMaterialColor;
+    const opacity = Zinc.defaultOpacity;
     const loader = new STLLoader();
     loader.crossOrigin = "Anonymous";
     loader.load(resolveURL(url), meshloader(region, colour, opacity, false,
@@ -397,8 +416,8 @@ exports.SceneLoader = function (sceneIn) {
    */
   this.loadOBJ = (region, url, groupName, finishCallback) => {
     this.toBeDownloaded += 1;
-    const colour = require('./zinc').defaultMaterialColor;
-    const opacity = require('./zinc').defaultOpacity;
+    const colour = Zinc.defaultMaterialColor;
+    const opacity = Zinc.defaultOpacity;
     const loader = new OBJLoader();
     loader.crossOrigin = "Anonymous";
     loader.load(resolveURL(url), meshloader(region, colour, opacity, false,
@@ -420,8 +439,8 @@ exports.SceneLoader = function (sceneIn) {
    */
   const loadSurfaceURL = (region ,url, timeEnabled, morphColour, groupName, finishCallback, options) => {
     this.toBeDownloaded += 1;
-    const colour = require('./zinc').defaultMaterialColor;
-    const opacity = require('./zinc').defaultOpacity;
+    const colour = Zinc.defaultMaterialColor;
+    const opacity = Zinc.defaultOpacity;
     let localTimeEnabled = 0;
     let isInline = (options && options.isInline) ? options.isInline : false;
     let fileFormat = (options && options.fileFormat) ? options.fileFormat : undefined;
@@ -525,7 +544,7 @@ exports.SceneLoader = function (sceneIn) {
         }
       }
       if (textureData.type === "slides") {
-        newTexture = new (require('./primitives/textureSlides').TextureSlides)();
+        newTexture = new TextureSlides();
       }
       if (newTexture) {
         newTexture.groupName = groupName;
@@ -544,17 +563,6 @@ exports.SceneLoader = function (sceneIn) {
     }
   };
 
-
-  //Load a glyphset into this scene.
-  const onLoadTextureReady = (region, xmlhttp, groupName, finishCallback, options) => {
-    return () => {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        const textureData = JSON.parse(xmlhttp.responseText);
-        loadTexture(region, xmlhttp.responseURL, textureData, groupName, finishCallback, options);
-      }
-    };
-  };
-
   /**
    * Load a texture into this scene object.
    *
@@ -567,11 +575,21 @@ exports.SceneLoader = function (sceneIn) {
     if (isInline) {
       loadTexture(region, undefined, url, groupName, finishCallback, options);
     } else {
-      const xmlhttp = new XMLHttpRequest();
-      xmlhttp.onreadystatechange = onLoadTextureReady(region, xmlhttp,
-        groupName, finishCallback, options);
-      xmlhttp.open("GET", resolveURL(url), true);
-      xmlhttp.send();
+      const requestURL = resolveURL(url);
+      fetch(requestURL)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const referenceURL = response.url || (new URL(requestURL)).href;
+        return response.json().then((textureData) => ({ textureData, referenceURL }));
+      })
+      .then(({textureData, referenceURL}) => {
+        loadTexture(region, referenceURL, textureData, groupName, finishCallback, options);
+      })
+      .catch((error) => {
+        console.error(`Fetch failed for texture URL: ${requestURL}`, error);
+      });
     }
   }
 
@@ -607,7 +625,7 @@ exports.SceneLoader = function (sceneIn) {
     options.opacity = opacity;
     options.localTimeEnabled = localTimeEnabled;
     options.localMorphColour = localMorphColour
-    const newGeometry = new (require('./primitives/geometry').Geometry)();
+    const newGeometry = new Geometry();
     newGeometry.createMesh(geometryIn, materialIn, options);
     if (newGeometry.getMorph()) {
       newGeometry.setName(groupName);
@@ -804,8 +822,8 @@ exports.SceneLoader = function (sceneIn) {
    * once the glyphset is succssfully load in.
    */
   this.loadGLTF = (region, url, finishCallback, allCompletedCallback, options) => {
-    const GLTFToZincJSLoader = new (require('./loaders/GLTFToZincJSLoader').GLTFToZincJSLoader)();
-    GLTFToZincJSLoader.load(scene, region, url, finishCallback, allCompletedCallback, options);
+    const loader = new GLTFToZincJSLoader();
+    loader.load(scene, region, url, finishCallback, allCompletedCallback, options);
   }
 
   let loadRegions = (currentRegion, referenceURL, regions, callback) => {
@@ -966,28 +984,31 @@ exports.SceneLoader = function (sceneIn) {
     * for each glyphset and geometry that has been written in.
     */
   this.loadMetadataURL = (targetRegion, url, finishCallback, allCompletedCallback, options) => {
-    const xmlhttp = new XMLHttpRequest();
     const requestURL = resolveURL(url);
-    xmlhttp.onreadystatechange = () => {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+    fetch(requestURL)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const referenceURL = response.url || (new URL(requestURL)).href;
+        return response.json().then((metadata) => ({ metadata, referenceURL }));
+      })
+      .then(({metadata, referenceURL}) => {
         scene.resetMetadata();
         scene.resetDuration();
         viewLoaded = false;
-        let referenceURL = xmlhttp.responseURL;
-        if (referenceURL === undefined)
-          referenceURL = (new URL(requestURL)).href;
-        const metadata = JSON.parse(xmlhttp.responseText);
         if (Array.isArray(metadata)) {
           loadVersionOne(targetRegion, metadata, referenceURL, finishCallback, allCompletedCallback, options);
         } else if (typeof metadata === "object" && metadata !== null) {
-          if (metadata.Version == "2.0") {
+          if (metadata.Version === "2.0") {
             loadVersionTwo(targetRegion, metadata, referenceURL, finishCallback, allCompletedCallback);
           }
         }
-      }
-    }
-
-    xmlhttp.open("GET", requestURL, true);
-    xmlhttp.send();
+      })
+      .catch((error) => {
+        console.error(`Fetch failed for URL: ${requestURL}`, error);
+      });
   }
 }
+
+export { SceneLoader };

package/src/shaders/rgbVolumeRender.js

@@ -1,5 +1,4 @@
-const THREE = require('three');
-
+import * as THREE from 'three';
 const glslVersion = null;
 
 const fs =
@@ -76,7 +75,7 @@ void main()
 }
 `;
 
-const vs = 
+const vs =
 `
 varying vec4 diffuse, ambientGlobal, ambient;
 uniform vec4 texture_scaling;
@@ -112,7 +111,9 @@ const getUniforms = function() {
   }
 };
 
-exports.fs = fs;
-exports.vs = vs;
-exports.glslVersion = glslVersion;
-exports.getUniforms = getUniforms;
+export {
+  fs,
+  vs,
+  glslVersion,
+  getUniforms
+}

package/src/shaders/textureArray.js

@@ -1,4 +1,4 @@
-const THREE = require('three');
+import * as THREE from 'three';
 
 const glslVersion = THREE.GLSL3;
 
@@ -23,7 +23,7 @@ void main() {
 }
 `;
 
-const vs = 
+const vs =
 `
 out vec3 vUw;
 uniform float depth;
@@ -44,8 +44,9 @@ const getUniforms = function() {
   };
 }
 
-
-exports.fs = fs;
-exports.vs = vs;
-exports.glslVersion = glslVersion;
-exports.getUniforms = getUniforms;
+export {
+  fs,
+  vs,
+  glslVersion,
+  getUniforms
+}

package/src/shaders/textureSlide.js

@@ -1,5 +1,4 @@
-const THREE = require('three');
-
+import * as THREE from 'three';
 const glslVersion = THREE.GLSL3;
 
 const fs =
@@ -92,7 +91,9 @@ const getUniforms = function() {
   };
 }
 
-exports.fs = fs;
-exports.vs = vs;
-exports.glslVersion = glslVersion;
-exports.getUniforms = getUniforms;
+export {
+  fs,
+  vs,
+  glslVersion,
+  getUniforms
+}

package/src/shaders/volumeRender.js

@@ -1,5 +1,4 @@
-const THREE = require('three');
-
+import * as THREE from 'three';
 const glslVersion = null;
 
 const fs =
@@ -237,7 +236,7 @@ const fs =
   }
 `;
 
-const vs = 
+const vs =
 `
   varying vec4 v_nearpos;
   varying vec4 v_farpos;
@@ -281,7 +280,9 @@ const getUniforms = function() {
   }
 };
 
-exports.fs = fs;
-exports.vs = vs;
-exports.glslVersion = glslVersion;
-exports.getUniforms = getUniforms;
+export {
+  fs,
+  vs,
+  glslVersion,
+  getUniforms
+}

package/src/shaders/volumeRender_old.js

@@ -1,5 +1,4 @@
-const THREE = require('three');
-
+import * as THREE from 'three';
 const glslVersion = null;
 
 const fs =
@@ -237,7 +236,7 @@ const fs =
   }
 `;
 
-const vs = 
+const vs =
 `
   varying vec4 v_nearpos;
   varying vec4 v_farpos;
@@ -281,7 +280,9 @@ const getUniforms = function() {
   }
 };
 
-exports.fs = fs;
-exports.vs = vs;
-exports.glslVersion = glslVersion;
-exports.getUniforms = getUniforms;
+export {
+  fs,
+  vs,
+  glslVersion,
+  getUniforms
+}

package/src/shaders/volumeTexture.js

@@ -1,5 +1,4 @@
-const THREE = require('three');
-
+import * as THREE from 'three';
 const glslVersion = THREE.GLSL3;
 
 const fs =
@@ -51,7 +50,7 @@ void main(void) {
 	// Step 4: Starting from the entry point, march the ray through the volume
 	// and sample it
 	vec3 p = transformed_eye + t_hit.x * ray_dir;
-  p.z = p.z * depth; 
+  p.z = p.z * depth;
 	for (float t = t_hit.x; t < t_hit.y; t += dt) {
 		// Step 4.1: Sample the volume, and color it by the transfer function.
 		// Note that here we don't use the opacity from the transfer function,
@@ -73,7 +72,7 @@ void main(void) {
 }
 `;
 
-const vs = 
+const vs =
 `
 uniform vec3 volume_scale;
 
@@ -101,7 +100,9 @@ const getUniforms = function() {
   }
 };
 
-exports.fs = fs;
-exports.vs = vs;
-exports.glslVersion = glslVersion;
-exports.getUniforms = getUniforms;
+export {
+  fs,
+  vs,
+  glslVersion,
+  getUniforms
+}

package/src/texture/texture.js

@@ -1,9 +1,9 @@
-const THREE = require('three');
+import * as THREE from 'three';
 
 /**
  * Base texture object for importing images and turning them into
  * texures unit that can be used by other texture primitives.
- * 
+ *
  * @class
  * @author Alan Wu
  * @return {Texture}
@@ -21,11 +21,11 @@ const Texture = function () {
 
 /**
  * Read an image from src.
- * 
+ *
  * @async
  * @param {Image} img - An image object.
  * @param {String} src - Source location of the image.
- * 
+ *
  * @return {Promise} img on resolve.
  */
 Texture.prototype.loadImage = function (img, src) {
@@ -45,12 +45,12 @@ Texture.prototype.loadImage = function (img, src) {
   */
 /**
  * Read an image from src and turn it into Uint8Array.
- * 
+ *
  * @async
  * @param {Image} img - An image object.
  * @param {String} src - Source location of the image.
  * @param {Canvas} canvas - Canvas html element used for the conversion.
- * 
+ *
  * @return {IMAGE_UNIT8_RETURN}
  */
 Texture.prototype.imageToUint8Array = async function (instance, img, src, canvas) {
@@ -72,7 +72,7 @@ Texture.prototype.loadFromImages = async function (srcArrays) {
 
 /**
  * Return true if the texture is ready for consumption.
- * 
+ *
  * @return {Boolean}
  */
 Texture.prototype.isReady = function () {
@@ -83,7 +83,7 @@ Texture.prototype.isReady = function () {
 
 /**
  * Return true if  the texture is ready for consumption, otherwise false.
- * 
+ *
  * @return {Boolean}
  */
 Texture.prototype.getMaterial = function () {
@@ -98,4 +98,4 @@ Texture.prototype.getMaterial = function () {
   }
 }
 
-exports.Texture = Texture;
+export { Texture };

package/src/texture/textureArray.js

@@ -1,4 +1,5 @@
-const THREE = require('three');
+import * as THREE from 'three';
+import { Texture } from './texture';
 
 /**
  * Texture array object for holding array of images into
@@ -9,7 +10,7 @@ const THREE = require('three');
  * @return {TextureArray}
  */
 const TextureArray = function () {
-  (require('./texture').Texture).call(this);
+  Texture.call(this);
   this.isTextureArray = true;
 
 
@@ -112,5 +113,5 @@ const TextureArray = function () {
   }
 }
 
-TextureArray.prototype = Object.create((require('./texture').Texture).prototype);
-exports.TextureArray = TextureArray;
+TextureArray.prototype = Object.create(Texture.prototype);
+export { TextureArray };

package/src/three/Loader.js

@@ -1,5 +1,3 @@
-var THREE = require('three');
-
 import {
 	NoBlending,
 	NormalBlending,

package/src/three/Points.js

@@ -83,7 +83,7 @@ class Points extends Object3D {
 				for ( let i = start, il = end; i < il; i ++ ) {
 
 					const a = index.getX( i );
-          
+
           calculatePosition( this, positionAttribute, morphPosition, a );
 
 					testPoint( _position, a, localThresholdSq, matrixWorld, raycaster, intersects, this );
@@ -96,7 +96,7 @@ class Points extends Object3D {
 				const end = Math.min( positionAttribute.count, ( drawRange.start + drawRange.count ) );
 
 				for ( let i = start, l = end; i < l; i ++ ) {
-          
+
           calculatePosition( this, positionAttribute, morphPosition, i );
 
 					testPoint( _position, i, localThresholdSq, matrixWorld, raycaster, intersects, this );