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

package/src/scripts/RendererModule.js

@@ -1,10 +1,10 @@
-import WEBGL from './WebGL';
+import GPU_SUPPORT from './WebGL';
 import Zinc from 'zincjs';
 const THREE = Zinc.THREE;
 import { BaseModule } from './BaseModule';
-import { EVENT_TYPE } from "./EventNotifier";
-import GraphicsHighlight from "./GraphicsHighlight";
-import { objectsToZincObjects } from "./Utilities";
+import { EVENT_TYPE } from './EventNotifier';
+import GraphicsHighlight from './GraphicsHighlight';
+import { objectsToZincObjects } from './Utilities';
 
 /**
  * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
@@ -12,22 +12,29 @@ import { objectsToZincObjects } from "./Utilities";
  * @returns {Zinc.Renderer}
  */
 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;
-    await localRenderer.initialiseVisualisation();
-    localRenderer.playAnimation = false;
-  } else {
-    const warning = WEBGL.getWebGLErrorMessage();
+  const localContainer = document.createElement('div');
+  let localRenderer = undefined;
+  localContainer.style.height = '100%';
+  if (await GPU_SUPPORT.isRendererSupported()) {
+    try {
+      localRenderer = new Zinc.Renderer(localContainer, window);
+      Zinc.defaultMaterialColor = 0xffff9c;
+      await localRenderer.initialiseVisualisation();
+      localRenderer.playAnimation = false;
+    } catch (error) {
+      //Device or context creation can still fail after the support check.
+      console.error('Failed to initialise the renderer.', error);
+      localRenderer = undefined;
+    }
+  }
+  if (!localRenderer) {
+    const warning = GPU_SUPPORT.getErrorMessage();
     localContainer.appendChild(warning);
   }
-  return {Zinc, "renderer":localRenderer, "container":localContainer};
-}
+  return { Zinc, renderer: localRenderer, container: localContainer };
+};
 
-const RendererModule = function()  {
+const RendererModule = function () {
   BaseModule.call(this);
   this.scene = undefined;
   this.rendererContainer = undefined;
@@ -39,20 +46,18 @@ const RendererModule = function()  {
   this.selectedCenter = undefined;
   this.liveUpdatesObjects = undefined;
   this.ignorePreviousSelected = false;
-}
+};
 
 RendererModule.prototype = Object.create(BaseModule.prototype);
 
-RendererModule.prototype.getIntersectedObject = function(intersects) {
-	if (intersects) {
-    const typeMap = intersects.map(intersect => {
-      if (intersect && intersect.object &&
-        intersect.object.userData) {
+RendererModule.prototype.getIntersectedObject = function (intersects) {
+  if (intersects) {
+    const typeMap = intersects.map((intersect) => {
+      if (intersect && intersect.object && intersect.object.userData) {
         if (intersect.object.userData.isMarker) {
           return 1;
-        } else if (intersect.object.name &&
-          intersect.object.userData.isZincObject) {
-          if (intersect.object.name === "_Unnamed") {
+        } else if (intersect.object.name && intersect.object.userData.isZincObject) {
+          if (intersect.object.name === '_Unnamed') {
             return 3;
           } else {
             return 2;
@@ -68,14 +73,13 @@ RendererModule.prototype.getIntersectedObject = function(intersects) {
     }
     //Proritise objects that is not called _Unnamed
     i = typeMap.indexOf(2);
-    i = (i > -1) ? i : typeMap.indexOf(3);
+    i = i > -1 ? i : typeMap.indexOf(3);
     return intersects[i];
-	}
-	return undefined;
-}
-
+  }
+  return undefined;
+};
 
-RendererModule.prototype.getAnnotationsFromObjects = function(objects, extraData) {
+RendererModule.prototype.getAnnotationsFromObjects = function (objects, extraData) {
   const annotations = [];
   for (var i = 0; i < objects.length; i++) {
     const zincObject = objects[i].userData;
@@ -90,7 +94,7 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects, extraData
         if (annotation && annotation.data) {
           if (extraData && 'instanceId' in extraData) {
             annotation.data.id = glyphset.getLabel(extraData.instanceId);
-          } else if (objects[i].name && objects[i].name != "") {
+          } else if (objects[i].name && objects[i].name != '') {
             annotation.data.id = objects[i].name;
           } else {
             annotation.data.id = glyphset.groupName;
@@ -98,7 +102,7 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects, extraData
         }
       } else {
         annotation = zincObject.userData ? zincObject.userData.annotation : undefined;
-        if (annotation && annotation.data){
+        if (annotation && annotation.data) {
           annotation.data.id = objects[i].name;
         }
       }
@@ -108,20 +112,24 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects, extraData
         annotation.data.zincObject = zincObject;
       }
     }
-    if (annotation)
-      annotations.push(annotation);
+    if (annotation) annotations.push(annotation);
   }
-	return annotations;
-}
+  return annotations;
+};
 
-RendererModule.prototype.setHighlightedByObjects = function(
-  objects, coords, extraData, propagateChanges) {
+RendererModule.prototype.setHighlightedByObjects = function (
+  objects,
+  coords,
+  extraData,
+  propagateChanges,
+) {
   const zincObjects = objectsToZincObjects(objects);
   const changed = this.graphicsHighlight.setHighlighted(objects);
+  //Some highlights are applied to THREE.js materials directly
+  if (changed) this.zincRenderer?.invalidate?.();
   if (propagateChanges) {
     let eventType = EVENT_TYPE.MOVE;
-    if (changed)
-      eventType = EVENT_TYPE.HIGHLIGHTED;
+    if (changed) eventType = EVENT_TYPE.HIGHLIGHTED;
     const annotations = this.getAnnotationsFromObjects(objects, extraData);
     if (annotations.length > 0) {
       annotations[0].coords = coords;
@@ -130,25 +138,27 @@ RendererModule.prototype.setHighlightedByObjects = function(
     this.publishChanges(annotations, eventType, zincObjects);
   }
   return changed;
-}
+};
 
+RendererModule.prototype.setHighlightedByZincObjects = function (
+  zincObjects,
+  coords,
+  extraData,
+  propagateChanges,
+) {
+  let morphs = [];
+  if (zincObjects) {
+    zincObjects.forEach((zincObject) => {
+      if (zincObject && zincObject.getMorph()) morphs.push(zincObject.getMorph());
+    });
+  }
 
-RendererModule.prototype.setHighlightedByZincObjects = function(
-  zincObjects, coords, extraData, propagateChanges) {
-    let morphs = [];
-    if (zincObjects) {
-      zincObjects.forEach(zincObject => {
-        if (zincObject && zincObject.getMorph())
-          morphs.push(zincObject.getMorph());
-      });
-    }
-
-    return this.setHighlightedByObjects(morphs, coords, extraData, propagateChanges);
-}
+  return this.setHighlightedByObjects(morphs, coords, extraData, propagateChanges);
+};
 
-RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
+RendererModule.prototype.setupLiveCoordinates = function (zincObjects) {
   this.liveUpdatesObjects = zincObjects;
-  if (zincObjects && (zincObjects.length > 0)) {
+  if (zincObjects && zincObjects.length > 0) {
     const boundingBox = this.scene.getBoundingBoxOfZincObjects(zincObjects);
     let newSelectedCenter = new THREE.Vector3();
     if (boundingBox) {
@@ -164,14 +174,19 @@ RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
   } else {
     this.selectedCenter = undefined;
   }
-}
+};
 
-
-RendererModule.prototype.setSelectedByObjects = function(
-  objects, coords, extraData, propagateChanges) {
-  let changed = false;
+RendererModule.prototype.setSelectedByObjects = function (
+  objects,
+  coords,
+  extraData,
+  propagateChanges,
+) {
+  let changed;
   if (this.selectObjectOnPick) {
     changed = this.graphicsHighlight.setSelected(objects);
+    //Some highlights are applied to THREE.js materials directly
+    if (changed) this.zincRenderer?.invalidate?.();
   } else {
     changed = true;
   }
@@ -191,13 +206,17 @@ RendererModule.prototype.setSelectedByObjects = function(
     }
   }
   return changed;
-}
+};
 
-RendererModule.prototype.setSelectedByZincObjects = function(
-  zincObjects, coords, extraData, propagateChanges) {
+RendererModule.prototype.setSelectedByZincObjects = function (
+  zincObjects,
+  coords,
+  extraData,
+  propagateChanges,
+) {
   let morphs = [];
   if (zincObjects) {
-    zincObjects.forEach(zincObject => {
+    zincObjects.forEach((zincObject) => {
       if (zincObject) {
         const morph = zincObject.getMorph();
         if (morph) {
@@ -208,101 +227,93 @@ RendererModule.prototype.setSelectedByZincObjects = function(
   }
 
   return this.setSelectedByObjects(morphs, coords, extraData, propagateChanges);
-}
+};
 
-const addGlyphToArray = function(objects) {
-  return function(glyph) {
-    objects.push(glyph.getMesh());
-  }
-}
+// Unused function, but keep it for reference.
+// const addGlyphToArray = function (objects) {
+//   return function (glyph) {
+//     objects.push(glyph.getMesh());
+//   };
+// };
 
-RendererModule.prototype.findObjectsByGroupName = function(groupName) {
+RendererModule.prototype.findObjectsByGroupName = function (groupName) {
   return this.scene.findObjectsWithGroupName(groupName);
-}
+};
 
-RendererModule.prototype.setHighlightedByGroupName = function(groupName, propagateChanges) {
+RendererModule.prototype.setHighlightedByGroupName = function (groupName, propagateChanges) {
   const objects = this.findObjectsByGroupName(groupName);
   return this.setHighlightedByObjects(objects, undefined, {}, propagateChanges);
-}
+};
 
-RendererModule.prototype.setSelectedByGroupName = function(groupName, propagateChanges) {
+RendererModule.prototype.setSelectedByGroupName = function (groupName, propagateChanges) {
   const objects = this.findObjectsByGroupName(groupName);
   return this.setSelectedByObjects(objects, undefined, {}, propagateChanges);
-}
+};
 
-RendererModule.prototype.changeBackgroundColour = function(backgroundColourString) {
+RendererModule.prototype.changeBackgroundColour = function (backgroundColourString) {
   const colour = new THREE.Color(backgroundColourString);
   if (this.zincRenderer) {
     let internalRenderer = this.zincRenderer.getThreeJSRenderer();
-    internalRenderer.setClearColor( colour, 1 );
+    internalRenderer.setClearColor(colour, 1);
   }
-}
+};
 
-RendererModule.prototype.resetView = function() {
-  if (this.zincRenderer)
-    this.zincRenderer.resetView();
-}
+RendererModule.prototype.resetView = function () {
+  if (this.zincRenderer) this.zincRenderer.resetView();
+};
 
-RendererModule.prototype.viewAll = function() {
-  if (this.zincRenderer)
-    this.zincRenderer.viewAll();
-}
+RendererModule.prototype.viewAll = function () {
+  if (this.zincRenderer) this.zincRenderer.viewAll();
+};
 
 /**
  * Start the animation and let the renderer to processs with
  * time progression
  */
-RendererModule.prototype.playAnimation = function(flag) {
-  if (this.zincRenderer)
-    this.zincRenderer.playAnimation = flag;
-}
+RendererModule.prototype.playAnimation = function (flag) {
+  if (this.zincRenderer) this.zincRenderer.playAnimation = flag;
+};
 
 /**
-* Set the speed of playback
-*/
-RendererModule.prototype.setPlayRate = function(value) {
-  if (this.zincRenderer)
-    this.zincRenderer.setPlayRate(value);
-}
+ * Set the speed of playback
+ */
+RendererModule.prototype.setPlayRate = function (value) {
+  if (this.zincRenderer) this.zincRenderer.setPlayRate(value);
+};
 
 /**
-* Get the speed of playback
-*/
-RendererModule.prototype.getPlayRate = function(value) {
-  if (this.zincRenderer)
-    return this.zincRenderer.getPlayRate();
-  else
-    return 0.0;
-}
+ * Get the speed of playback
+ */
+RendererModule.prototype.getPlayRate = function (_value) {
+  if (this.zincRenderer) return this.zincRenderer.getPlayRate();
+  else return 0.0;
+};
 
-  /** Initialise everything in the renderer, including the 3D renderer,
+/** Initialise everything in the renderer, including the 3D renderer,
  *  and picker for the 3D renderer.
  *
  */
-RendererModule.prototype.initialiseRenderer = async function(displayAreaIn) {
+RendererModule.prototype.initialiseRenderer = async function (displayAreaIn) {
   if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
     let returnedValue = await createRenderer();
-    this.Zinc = returnedValue["Zinc"];
-    this.zincRenderer = returnedValue["renderer"];
-    this.rendererContainer = returnedValue["container"];
+    this.Zinc = returnedValue['Zinc'];
+    this.zincRenderer = returnedValue['renderer'];
+    this.rendererContainer = returnedValue['container'];
   }
   if (displayAreaIn) {
     this.displayArea = displayAreaIn;
-    this.displayArea.appendChild( this.rendererContainer );
-    if (this.zincRenderer)
-      this.zincRenderer.animate();
+    this.displayArea.appendChild(this.rendererContainer);
+    if (this.zincRenderer) this.zincRenderer.animate();
   }
-}
+};
 
-RendererModule.prototype.destroy = function() {
+RendererModule.prototype.destroy = function () {
   if (this.zincRenderer) {
     this.zincRenderer.dispose();
     this.zincRenderer.getThreeJSRenderer().dispose();
     this.zincRenderer = undefined;
   }
-  BaseModule.prototype.destroy.call( this );
-}
+  BaseModule.prototype.destroy.call(this);
+};
 
-export {
-  RendererModule
-}
+export { RendererModule };