zincjs 1.20.1-beta.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "1.20.1-beta.3",
+  "version": "2.0.0",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "main": "build/zinc.js",
   "directories": {
@@ -17,11 +17,14 @@
   ],
   "scripts": {
     "build-bundle": "vite build",
-    "test": "npm --prefix ./test install && npm --prefix ./test run test-ci",
+    "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"
   },
@@ -42,25 +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-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",
+    "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",
     "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

@@ -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) => {

package/src/primitives/textureSlides.js

@@ -420,8 +420,9 @@ const TextureSlides = function (textureIn) {
 
   this.setMask = (maskTextureIn) => {
     maskTexture = maskTextureIn;
+    maskEnabled = maskTexture ? true : false;
     this.setUniformsValue("mask", maskTexture);
-    this.setUniformsValue("maskEnabled", maskTexture ? true : false);
+    this.setUniformsValue("maskEnabled", maskEnabled);
   }
 
   this.hideEdges = () => {

package/src/sceneLoader.js

@@ -84,7 +84,7 @@ const 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)
@@ -115,26 +115,28 @@ const 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
@@ -173,23 +175,35 @@ const 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.
@@ -549,17 +563,6 @@ const 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.
    *
@@ -572,11 +575,21 @@ const 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);
+      });
     }
   }
 
@@ -971,29 +984,30 @@ const 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);
+      });
   }
 }
 

package/src/utilities.js

@@ -87,23 +87,20 @@ function getBoundingBox(mesh, cachedBox, b1, v1, v2) {
 //Convenient function
 function loadExternalFile(url, data, callback, errorCallback) {
     // Set up an asynchronous request
-    const request = new XMLHttpRequest();
-    request.open('GET', resolveURL(url), true);
-
-    // Hook the event that gets called as the request progresses
-    request.onreadystatechange = () => {
-        // If the request is "DONE" (completed or failed)
-        if (request.readyState == 4) {
-            // If we got HTTP status 200 (OK)
-            if (request.status == 200) {
-                callback(request.responseText, data)
-            } else { // Failed
-                errorCallback(url);
-            }
-        }
-    };
-
-    request.send(null);
+  fetch(resolveURL(url))
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.text();
+  })
+  .then((responseText) => {
+    callback(responseText, data);
+  })
+  .catch((error) => {
+    console.error(`Fetch string payload retrieval failed for: ${requestURL}`, error);
+    errorCallback(url);
+  });
 }
 
 function loadExternalFiles(urls, callback, errorCallback) {