@abi-software/scaffoldvuer 1.21.0 → 1.21.1-beta.2

package/src/scripts/OrgansRenderer.js

@@ -148,15 +148,11 @@ const OrgansSceneData = function() {
   }
 
 	const preRenderUpdateCallback = function() {
-		return function() {
-      preRenderTimeUpdate();
-		}
+    preRenderTimeUpdate();
   }
 
   const postRenderUpdateCallback = function() {
-		return function() {
-      postRenderSelectedCoordinatesUpdate();
-		}
+    postRenderSelectedCoordinatesUpdate();
 	}
 
 	/**
@@ -431,237 +427,206 @@ const OrgansSceneData = function() {
     }
 	}
 
-	  /**
-		 * New organs geometry has been added to the scene, add UIs and make
-		 * sure the viewport is correct.
-		 */
-	  const _addOrganPartCallback = function(systemName, partName, useDefautColour) {
-	    return function(zincObject) {
-	    	addOrganPart(systemName, partName, useDefautColour, zincObject);
-	    }
-	  }
+  /**
+   * New organs geometry has been added to the scene, add UIs and make
+   * sure the viewport is correct.
+   */
+  const _addOrganPartCallback = function(systemName, partName, useDefautColour) {
+    return function(zincObject) {
+      addOrganPart(systemName, partName, useDefautColour, zincObject);
+    }
+  }
 
-	  /**
-		 * Organs geometry has been removed to the scene.
-		 */
-	  const _removeOrganPartCallback = function(systemName, partName, useDefautColour) {
-	    return function(zincObject) {
-	    	removeOrganPart(systemName, partName, useDefautColour, zincObject);
-	    }
-	  }
+  /**
+   * Organs geometry has been removed to the scene.
+   */
+  const _removeOrganPartCallback = function(systemName, partName, useDefautColour) {
+    return function(zincObject) {
+      removeOrganPart(systemName, partName, useDefautColour, zincObject);
+    }
+  }
 
-	  const downloadCompletedCallback = function() {
-		  return function() {
-			  _this.settingsChanged();
-			  _this.sceneData.timeVarying = _this.scene.isTimeVarying();
-        if (finishDownloadCallback)
-          finishDownloadCallback();
-		  }
-	  }
+  const downloadCompletedCallback = function() {
+    return function() {
+      _this.settingsChanged();
+      _this.sceneData.timeVarying = _this.scene.isTimeVarying();
+      if (finishDownloadCallback)
+        finishDownloadCallback();
+    }
+  }
 
-		//The payload can either be a zinc object when the loading is successful or
-		//an object containg the details of error message on failure.
-		//We only use it to handle an error
-	  const singleItemFinishCallback = function() {
-      return function(payload) {
-
-				if (payload?.type === "Error") {
-					if (downloadErrorCallback) {
-						const error = {
-							xhr: payload.xhr,
-							type: "download-error",
-						};
-						downloadErrorCallback(error);
-					}
-				}
+  //The payload can either be a zinc object when the loading is successful or
+  //an object containg the details of error message on failure.
+  //We only use it to handle an error
+  const singleItemFinishCallback = function() {
+    return function(payload) {
+      if (payload?.type === "Error") {
+        if (downloadErrorCallback) {
+          const error = {
+            xhr: payload.xhr,
+            type: "download-error",
+          };
+          downloadErrorCallback(error);
+        }
       }
-	  }
+    }
+  }
 
-	  /**
-		 * Toggle data field displays. Data fields displays flow/pressure and      <button @click="play">Play</button>
-		 * other activities of the organs.
-		 */
-	  this.updateFieldvisibility = function(dataFields, value) {
-      for ( let i = 0; i < dataFields.length; i ++ ) {
-        if (value != i) {
-          const geometryName = dataFields[i].PartName;
-          _this.changeOrganPartsVisibility(geometryName, false);
-        }
+  /**
+   * Toggle data field displays. Data fields displays flow/pressure and      <button @click="play">Play</button>
+   * other activities of the organs.
+   */
+  this.updateFieldvisibility = function(dataFields, value) {
+    for ( let i = 0; i < dataFields.length; i ++ ) {
+      if (value != i) {
+        const geometryName = dataFields[i].PartName;
+        _this.changeOrganPartsVisibility(geometryName, false);
       }
-      if (value > -1) {
-        const partName = dataFields[value].PartName;
-        if ((_this.scene.findGeometriesWithGroupName(partName).length > 0) ||
-          (_this.scene.findGlyphsetsWithGroupName(partName).length > 0)) {
-          _this.changeOrganPartsVisibility(partName, true);
-        } else {
-          const partDetails = getOrganDetails(dataFields[value].SystemName, partName);
-          if (partDetails != undefined) {
-            _this.scene.loadMetadataURL(modelsLoader.getOrgansDirectoryPrefix() + "/" + partDetails.meta);
-          }
+    }
+    if (value > -1) {
+      const partName = dataFields[value].PartName;
+      if ((_this.scene.findGeometriesWithGroupName(partName).length > 0) ||
+        (_this.scene.findGlyphsetsWithGroupName(partName).length > 0)) {
+        _this.changeOrganPartsVisibility(partName, true);
+      } else {
+        const partDetails = getOrganDetails(dataFields[value].SystemName, partName);
+        if (partDetails != undefined) {
+          _this.scene.loadMetadataURL(modelsLoader.getOrgansDirectoryPrefix() + "/" + partDetails.meta);
         }
-	    }
-	  }
-
-	  /**
-		 * Return an array containing name(s) of species that also contains the
-		 * currently displayed organs.
-		 *
-		 * @returns {Array} containing species name
-		 */
-	  this.getAvailableSpecies = function(currentSpecies, currentSystem, currentPart) {
-	    const availableSpecies = new Array();
-	    availableSpecies.push("none");
-	    const keysArray = Object.keys(organsFileMap);
-	    for (index in keysArray) {
-	      const species = keysArray[index];
-	      if (species != currentSpecies) {
-	        if (organsFileMap[species].hasOwnProperty(currentSystem) &&
-	            organsFileMap[species][currentSystem].hasOwnProperty(currentPart)) {
-	          availableSpecies.push(species);
-	        }
-	      }
-	    }
-	    return availableSpecies;
-	  }
-
-		/**
-		 * Return the center and size of the cuurrent viewing scene
-		 */
-		this.getCentreAndSize = function() {
-			const vector = new THREE.Vector3();
-			const boundingBox = this.scene.getBoundingBox();
-			boundingBox.getCenter(vector);
-			const centre = [vector.x, vector.y, vector.z];
-			boundingBox.getSize(vector);
-			const size = [vector.x, vector.y, vector.z];
-			return {centre, size};
-		}
+      }
+    }
+  }
 
-	  const setSceneData = function(speciesName, systemName, partName, organsDetails) {
-      _this.sceneData.nerveMapIsActive = false;
-      _this.sceneData.nerveMap = undefined;
-      _this.sceneData.metaURL = "";
-      _this.sceneData.viewURL = "";
-      _this.sceneData.currentSpecies = speciesName;
-      _this.sceneData.currentSystem = systemName;
-			_this.sceneData.currentPart = partName;
-			_this.sceneData.currentTime = 0.0;
-			_this.sceneData.timeVarying = false;
-      // This is used as title
-      let name = "";
-      if (speciesName)
-        name = speciesName + "/";
-      if (systemName)
-        name = systemName + "/";
-      if (partName)
-        name = partName;
-      _this.sceneData.currentName = name;
-	  }
+  /**
+   * Return an array containing name(s) of species that also contains the
+   * currently displayed organs.
+   *
+   * @returns {Array} containing species name
+   */
+  this.getAvailableSpecies = function(currentSpecies, currentSystem, currentPart) {
+    const availableSpecies = new Array();
+    availableSpecies.push("none");
+    const keysArray = Object.keys(organsFileMap);
+    for (index in keysArray) {
+      const species = keysArray[index];
+      if (species != currentSpecies) {
+        if (organsFileMap[species].hasOwnProperty(currentSystem) &&
+            organsFileMap[species][currentSystem].hasOwnProperty(currentPart)) {
+          availableSpecies.push(species);
+        }
+      }
+    }
+    return availableSpecies;
+  }
 
-	  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL, clearFirst, options) {
-		  if (_this.zincRenderer) {
-			  if (partName && (_this.sceneData.metaURL !== url)) {
-			      setSceneData(speciesName, systemName, partName, undefined);
-			      const name = _this.sceneData.currentName;
-			      let organScene = _this.zincRenderer.getSceneByName(name);
-			      if (organScene) {
-              if (clearFirst)
-			    	    organScene.clearAll();
-			      } else {
-			    	  organScene = _this.zincRenderer.createScene(name);
-			      }
-						_this.selectObjectOnPick = true;
-			      for (let i = 0; i < sceneChangedCallbacks.length;i++) {
-			    	  sceneChangedCallbacks[i](_this.sceneData);
-			      }
-			      if (viewURL && viewURL != "") {
-			    	  _this.sceneData.viewURL = viewURL;
-				      organScene.loadViewURL(_this.sceneData.viewURL);
-			      } else {
-			    	  _this.sceneData.viewURL = undefined;
-            }
-			      _this.sceneData.metaURL = url;
-						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
-			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
-						organScene.loadMetadataURL(url, singleItemFinishCallback(), downloadCompletedCallback(), options);
-			      _this.scene = organScene;
-			      _this.zincRenderer.setCurrentScene(organScene);
-			      _this.graphicsHighlight.reset();
-			      const zincCameraControl = organScene.getZincCameraControls();
-			      zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
-			      zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
-			      zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
-			  }
-		  }
-	  }
+  /**
+   * Return the center and size of the cuurrent viewing scene
+   */
+  this.getCentreAndSize = function() {
+    const vector = new THREE.Vector3();
+    const boundingBox = this.scene.getBoundingBox();
+    boundingBox.getCenter(vector);
+    const centre = [vector.x, vector.y, vector.z];
+    boundingBox.getSize(vector);
+    const size = [vector.x, vector.y, vector.z];
+    return {centre, size};
+  }
 
-    this.loadGLTFFromURL = function(url, partName, clearFirst) {
-		  if (_this.zincRenderer) {
-			  if (partName && (_this.sceneData.metaURL !== url)) {
-			      setSceneData(undefined, undefined, partName, undefined);
-			      const name = _this.sceneData.currentName;
-			      let organScene = _this.zincRenderer.getSceneByName(name);
-			      if (organScene) {
-              if (clearFirst)
-			    	    organScene.clearAll();
-			      } else {
-			    	  organScene = _this.zincRenderer.createScene(name);
-			      }
-			      for (let i = 0; i < sceneChangedCallbacks.length;i++) {
-			    	  sceneChangedCallbacks[i](_this.sceneData);
-			      }
-  	    	  _this.sceneData.viewURL = undefined;
-			      _this.sceneData.metaURL = url;
-						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
-			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
-						organScene.loadGLTF(url, undefined, downloadCompletedCallback());
-			      _this.scene = organScene;
-			      _this.zincRenderer.setCurrentScene(organScene);
-			      _this.graphicsHighlight.reset();
-			      const zincCameraControl = organScene.getZincCameraControls();
-			      zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
-			      zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
-			      zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
-			  }
-		  }
-	  }
+  const setSceneData = function(speciesName, systemName, partName, organsDetails) {
+    _this.sceneData.nerveMapIsActive = false;
+    _this.sceneData.nerveMap = undefined;
+    _this.sceneData.metaURL = "";
+    _this.sceneData.viewURL = "";
+    _this.sceneData.currentSpecies = speciesName;
+    _this.sceneData.currentSystem = systemName;
+    _this.sceneData.currentPart = partName;
+    _this.sceneData.currentTime = 0.0;
+    _this.sceneData.timeVarying = false;
+    // This is used as title
+    let name = "";
+    if (speciesName)
+      name = speciesName + "/";
+    if (systemName)
+      name = systemName + "/";
+    if (partName)
+      name = partName;
+    _this.sceneData.currentName = name;
+  }
 
-	  this.alignCameraWithSelectedObject = function(transitionTime) {
-	    const objects = _this.graphicsHighlight.getSelected();
-	    if (objects && objects[0] && objects[0].userData) {
-	      _this.scene.alignObjectToCameraView(objects[0].userData, transitionTime);
-	    }
-	  }
+  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL, clearFirst, options) {
+    if (_this.zincRenderer) {
+      if (partName && (_this.sceneData.metaURL !== url)) {
+          setSceneData(speciesName, systemName, partName, undefined);
+          const name = _this.sceneData.currentName;
+          let organScene = _this.zincRenderer.getSceneByName(name);
+          if (organScene) {
+            if (clearFirst)
+              organScene.clearAll();
+          } else {
+            organScene = _this.zincRenderer.createScene(name);
+          }
+          _this.selectObjectOnPick = true;
+          for (let i = 0; i < sceneChangedCallbacks.length;i++) {
+            sceneChangedCallbacks[i](_this.sceneData);
+          }
+          if (viewURL && viewURL != "") {
+            _this.sceneData.viewURL = viewURL;
+            organScene.loadViewURL(_this.sceneData.viewURL);
+          } else {
+            _this.sceneData.viewURL = undefined;
+          }
+          _this.sceneData.metaURL = url;
+          organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
+          organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
+          organScene.loadMetadataURL(url, singleItemFinishCallback(), downloadCompletedCallback(), options);
+          _this.scene = organScene;
+          _this.zincRenderer.setCurrentScene(organScene);
+          _this.graphicsHighlight.reset();
+          const zincCameraControl = organScene.getZincCameraControls();
+          zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
+          zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
+          zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
+      }
+    }
+  }
 
-	  this.exportSettings = function() {
-		  const settings = {};
-		  settings.name = _this.instanceName;
-		  if (_this.sceneData.currentSystem)
-			  settings.system = _this.sceneData.currentSystem;
-		  if (_this.sceneData.currentSpecies)
-			  settings.species  = _this.sceneData.currentSpecies;
-		  if (_this.sceneData.currentPart)
-			  settings.part = _this.sceneData.currentPart;
-		  settings.metaURL = _this.sceneData.metaURL;
-		  if (_this.sceneData.viewURL)
-			  settings.viewURL = _this.sceneData.viewURL;
-		  settings.dialog = "Organ Viewer";
-		  return settings;
-	  }
+  this.loadGLTFFromURL = function(url, partName, clearFirst) {
+    if (_this.zincRenderer) {
+      if (partName && (_this.sceneData.metaURL !== url)) {
+          setSceneData(undefined, undefined, partName, undefined);
+          const name = _this.sceneData.currentName;
+          let organScene = _this.zincRenderer.getSceneByName(name);
+          if (organScene) {
+            if (clearFirst)
+              organScene.clearAll();
+          } else {
+            organScene = _this.zincRenderer.createScene(name);
+          }
+          for (let i = 0; i < sceneChangedCallbacks.length;i++) {
+            sceneChangedCallbacks[i](_this.sceneData);
+          }
+          _this.sceneData.viewURL = undefined;
+          _this.sceneData.metaURL = url;
+          organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
+          organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
+          organScene.loadGLTF(url, undefined, downloadCompletedCallback());
+          _this.scene = organScene;
+          _this.zincRenderer.setCurrentScene(organScene);
+          _this.graphicsHighlight.reset();
+          const zincCameraControl = organScene.getZincCameraControls();
+          zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
+          zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
+          zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
+      }
+    }
+  }
 
-	  this.importSettings = function(settings) {
-		  if (settings && (settings.dialog == this.typeName)) {
-			  _this.setName(settings.name);
-			  if (settings.metaURL !== undefined && settings.metaURL != "") {
-				  _this.loadOrgansFromURL(settings.metaURL, settings.species,
-					  settings.system, settings.part, settings.viewURL, true);
-			  } else {
-				  _this.loadOrgans(settings.species, settings.system, settings.part);
-			  }
-			  return true;
-		  }
-		  return false;
-	  }
+  this.alignCameraWithSelectedObject = function(transitionTime) {
+    const objects = _this.graphicsHighlight.getSelected();
+    if (objects && objects[0] && objects[0].userData) {
+      _this.scene.alignObjectToCameraView(objects[0].userData, transitionTime);
+    }
+  }
 
 	/**
 	 * initialise loading of the html layout for the organs panel, this is
@@ -669,16 +634,18 @@ const OrgansSceneData = function() {
 	 *
 	 * @async
 	 */
-	 const initialise = function() {
-	   _this.initialiseRenderer(undefined);
+	 this.initialise = async function(displayAreaIn) {
+	   await _this.initialiseRenderer(displayAreaIn);
 	   if (_this.zincRenderer) {
-       _this.zincRenderer.addPreRenderCallbackFunction(preRenderUpdateCallback());
-       _this.zincRenderer.addPostRenderCallbackFunction(postRenderUpdateCallback());
+       _this.zincRenderer.addPreRenderCallbackFunction(() => {
+          preRenderUpdateCallback();
+        });
+       _this.zincRenderer.addPostRenderCallbackFunction(() => {
+        postRenderUpdateCallback()
+      });
      }
   }
 
-	initialise();
-
 }
 
 OrgansViewer.prototype = Object.create(RendererModule.prototype);

package/src/scripts/RendererModule.js

@@ -11,14 +11,14 @@ import { objectsToZincObjects } from "./Utilities";
  * @param {String} elementID - id of the target dom element.
  * @returns {Zinc.Renderer}
  */
-const createRenderer = function () {
+const createRenderer = async function () {
   const localContainer = document.createElement( 'div' );
   let localRenderer = undefined;;
   localContainer.style.height = "100%";
   if (WEBGL.isWebGLAvailable()) {
     localRenderer = new Zinc.Renderer(localContainer, window);
     Zinc.defaultMaterialColor = 0xFFFF9C;
-    localRenderer.initialiseVisualisation();
+    await localRenderer.initialiseVisualisation();
     localRenderer.playAnimation = false;
   } else {
     const warning = WEBGL.getWebGLErrorMessage();
@@ -279,9 +279,9 @@ RendererModule.prototype.getPlayRate = function(value) {
  *  and picker for the 3D renderer.
  *
  */
-RendererModule.prototype.initialiseRenderer = function(displayAreaIn) {
+RendererModule.prototype.initialiseRenderer = async function(displayAreaIn) {
   if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
-    let returnedValue = createRenderer();
+    let returnedValue = await createRenderer();
     this.Zinc = returnedValue["Zinc"];
     this.zincRenderer = returnedValue["renderer"];
     this.rendererContainer = returnedValue["container"];

package/src/scripts/Utilities.js

@@ -306,12 +306,23 @@ export const getObjectsFromAnnotations = (scene, annotations) => {
 
 const getCoordinatesForAnnotationFeature = (zincObject) => {
   const mesh = zincObject.getMorph();
+  const coords = [];
+  let vIndex = 0;
+  if (zincObject.isPointset) {
+    const positionArray = mesh.pointPositions;
+    for (let i = 0; i < zincObject.drawRange; i++) {
+      coords.push([
+        positionArray[vIndex++],
+        positionArray[vIndex++],
+        positionArray[vIndex++],
+      ]);
+    }
+    return coords;
+  }
   let attr = 'position';
   if (zincObject.isLines2) {
     attr = 'instanceStart';
   }
-  const coords = [];
-  let vIndex = 0;
   const position = mesh.geometry.getAttribute( attr );
   for (let i = 0; i < zincObject.drawRange; i++) {
     coords.push([