@abi-software/scaffoldvuer 0.1.3 → 0.1.5-1.beta.2

package/src/scripts/RendererModule.js

@@ -0,0 +1,261 @@
+const THREE = require('zincjs').THREE;
+
+/**
+ * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
+ * @param {String} elementID - id of the target dom element.
+ * @returns {Zinc.Renderer}
+ */
+const createRenderer = function () {
+  const WEBGL = require('./WebGL').WEBGL;
+  const localContainer = document.createElement( 'div' );
+  let localRenderer = undefined;;
+  localContainer.style.height = "100%";
+  if (WEBGL.isWebGLAvailable()) {
+    const Zinc = require('zincjs');
+    localRenderer = new Zinc.Renderer(localContainer, window);
+    Zinc.defaultMaterialColor = 0xFFFF9C;
+    localRenderer.initialiseVisualisation();
+    localRenderer.playAnimation = false;
+  } else {
+    const warning = WEBGL.getWebGLErrorMessage();
+    localContainer.appendChild(warning);
+  }
+  return {"renderer":localRenderer, "container":localContainer};
+}
+
+const RendererModule = function()  {
+  (require('./BaseModule').BaseModule).call(this);
+  this.scene = undefined;
+  this.rendererContainer = undefined;
+  this.displayArea = undefined;
+  this.graphicsHighlight = new (require("./graphicsHighlight").GraphicsHighlight)();
+  this.zincRenderer = null;
+  this.selectedScreenCoordinates = new THREE.Vector3();
+  this.selectedCenter = undefined;
+}
+
+RendererModule.prototype = Object.create((require('./BaseModule').BaseModule).prototype);
+
+/**
+ * This function will get the the first intersected object with name or
+ * the first glyph object with name.
+ */
+RendererModule.prototype.getIntersectedObject = function(intersects) {
+	if (intersects) {
+		for (let i = 0; i < intersects.length; i++) {
+			if (intersects[i] !== undefined) {
+				if (intersects[i].object &&
+            intersects[i].object.userData && 
+            intersects[i].object.userData.isZincObject && 
+            (intersects[i].object.name || 
+            intersects[i].object.userData.isMarker))
+					return intersects[i];
+			}
+		}
+	}
+	return undefined;
+}
+
+RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
+    const annotations = [];
+    for (var i = 0; i < objects.length; i++) {
+    	const zincObject = objects[i].userData;
+      let annotation = undefined;
+      if (zincObject) {
+        if (zincObject.isGlyph || zincObject.isGlyphset) {
+          const glyphset = zincObject;
+          if (zincObject.isGlyph)
+            glyphset = zincObject.getGlyphset();
+          annotation = glyphset.userData ? glyphset.userData[0] : undefined;
+          if (annotation && annotation.data) {
+            if (objects[i].name && objects[i].name != "")
+              annotation.data.id = objects[i].name;
+            else
+              annotation.data.id = glyphset.groupName;
+          }
+        } else {
+          annotation = zincObject.userData ? zincObject.userData[0] : undefined;
+          if (annotation && annotation.data){
+            annotation.data.id = objects[i].name;
+          }
+        }
+      }
+      annotations[i] = annotation;
+    }
+	return annotations;
+}
+
+RendererModule.prototype.setHighlightedByObjects = function(objects, propagateChanges) {
+  const changed = this.graphicsHighlight.setHighlighted(objects);
+  if (changed && propagateChanges) {
+    const eventType = require("./eventNotifier").EVENT_TYPE.HIGHLIGHTED;
+    const annotations = this.getAnnotationsFromObjects(objects);
+    this.publishChanges(annotations, eventType);
+  }
+  return changed;
+}
+
+
+RendererModule.prototype.setHighlightedByZincObject = function(
+  zincObject, propagateChanges) {
+    return this.setHighlightedByObjects([zincObject ? zincObject.morph : undefined], propagateChanges);
+}
+
+RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
+  if (zincObjects && (zincObjects.length > 0)) {
+    const boundingBox = this.scene.getBoundingBoxOfZincObjects(zincObjects);
+    let newSelectedCenter = new THREE.Vector3();
+    boundingBox.getCenter(newSelectedCenter);
+    if (this.selectedCenter == undefined)
+      this.selectedCenter = newSelectedCenter;
+    else {
+      this.selectedCenter.x = newSelectedCenter.x;
+      this.selectedCenter.y = newSelectedCenter.y;
+    }
+  } else {
+    this.selectedCenter = undefined;
+  }
+}
+
+RendererModule.prototype.objectsToZincObjects = function(objects) {
+  const zincObjects = [];
+  for (let i = 0; i < objects.length; i++) {
+    let zincObject = objects[i].userData;
+    if (zincObject) {
+      if (zincObject.isGlyph || zincObject.isGlyphset) {
+        let glyphset = zincObject;
+        if (zincObject.isGlyph)
+          glyphset = zincObject.getGlyphset();
+        zincObjects. push(glyphset);
+      } else {
+        zincObjects. push(zincObject);
+      }
+    }
+  }
+  return zincObjects;
+}
+
+
+RendererModule.prototype.setSelectedByObjects = function(
+  objects, propagateChanges) {
+  const changed = this.graphicsHighlight.setSelected(objects);
+  if (changed) {
+    const zincObjects = this.objectsToZincObjects(objects);
+    this.setupLiveCoordinates(zincObjects);
+    if (propagateChanges) {
+      const eventType = require("./eventNotifier").EVENT_TYPE.SELECTED;
+      const annotations = this.getAnnotationsFromObjects(objects);
+      this.publishChanges(annotations, eventType);
+    }
+  }
+  return changed;
+}
+
+RendererModule.prototype.setSelectedByZincObject = function(
+  zincObject, propagateChanges) {
+  return this.setSelectedByObjects([zincObject ? zincObject.morph : undefined], propagateChanges);
+}
+
+const addGlyphToArray = function(objects) {
+  return function(glyph) {
+    objects.push(glyph.getMesh());
+  }
+}
+
+RendererModule.prototype.findObjectsByGroupName = function(groupName) {
+  const geometries = this.scene.findGeometriesWithGroupName(groupName);
+  const objects = [];
+  for (let i = 0; i < geometries.length; i ++ ) {
+    objects.push(geometries[i].morph);
+  }
+  const glyphsets = this.scene.findGlyphsetsWithGroupName(groupName);
+  for (let i = 0; i < glyphsets.length; i ++ ) {
+    glyphsets[i].forEachGlyph(addGlyphToArray(objects));
+  }
+  
+  return objects;
+}
+
+RendererModule.prototype.setHighlightedByGroupName = function(groupName, propagateChanges) {
+  const objects = this.findObjectsByGroupName(groupName);
+  return this.setHighlightedByObjects(objects, propagateChanges);
+}
+
+RendererModule.prototype.setSelectedByGroupName = function(groupName, propagateChanges) {
+  const objects = this.findObjectsByGroupName(groupName);
+  return this.setSelectedByObjects(objects, propagateChanges);
+}
+
+RendererModule.prototype.changeBackgroundColour = function(backgroundColourString) {
+  const colour = new THREE.Color(backgroundColourString);
+  if (this.zincRenderer) {
+    let internalRenderer = this.zincRenderer.getThreeJSRenderer();
+    internalRenderer.setClearColor( colour, 1 );
+  }
+}
+
+RendererModule.prototype.resetView = function() {
+  if (this.zincRenderer)
+    this.zincRenderer.resetView();
+}
+  
+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;
+}
+
+/**
+* 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;
+}
+  
+  /** Initialise everything in the renderer, including the 3D renderer,
+ *  and picker for the 3D renderer.
+ * 
+ */
+RendererModule.prototype.initialiseRenderer = function(displayAreaIn) {
+  if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
+    let returnedValue = createRenderer();
+    this.zincRenderer = returnedValue["renderer"];
+    this.rendererContainer = returnedValue["container"];
+  }
+  if (displayAreaIn) {
+    this.displayArea = displayAreaIn;
+    this.displayArea.appendChild( this.rendererContainer );
+    if (this.zincRenderer)
+      this.zincRenderer.animate();
+  }
+}
+
+RendererModule.prototype.destroy = function() {
+  if (this.zincRenderer) {
+    this.zincRenderer.dispose();
+    this.zincRenderer.getThreeJSRenderer().dispose();
+    this.zincRenderer = undefined;
+  }
+  (require('./BaseModule').BaseModule).prototype.destroy.call( this );
+}
+
+exports.RendererModule = RendererModule;

package/src/scripts/WebGL.js

@@ -0,0 +1,94 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+exports.WEBGL = {
+
+	isWebGLAvailable: function () {
+
+		try {
+
+			var canvas = document.createElement( 'canvas' );
+			return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	},
+
+	isWebGL2Available: function () {
+
+		try {
+
+			var canvas = document.createElement( 'canvas' );
+			return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	},
+
+	getWebGLErrorMessage: function () {
+
+		return this.getErrorMessage( 1 );
+
+	},
+
+	getWebGL2ErrorMessage: function () {
+
+		return this.getErrorMessage( 2 );
+
+	},
+
+	getErrorMessage: function ( version ) {
+
+		var names = {
+			1: 'WebGL',
+			2: 'WebGL 2'
+		};
+
+		var contexts = {
+			1: window.WebGLRenderingContext,
+			2: window.WebGL2RenderingContext
+		};
+
+		var message = 'This module requires <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#008">$1</a> support but your $0 does not seem to support it.';
+
+		var element = document.createElement( 'div' );
+		element.id = 'webglmessage';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '20px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		if ( contexts[ version ] ) {
+
+			message = message.replace( '$0', 'graphics card' );
+
+		} else {
+
+			message = message.replace( '$0', 'browser' );
+
+		}
+
+		message = message.replace( '$1', names[ version ] );
+
+		element.innerHTML = message;
+
+		return element;
+
+	}
+
+};

package/src/scripts/annotation.js

@@ -0,0 +1,5 @@
+exports.annotation = function() {
+  this.type = "anatomical";
+  this.data = undefined;
+  this.isAnnotation = true;
+}

package/src/scripts/eventNotifier.js

@@ -0,0 +1,65 @@
+const EVENT_TYPE = { ALL: 0, SELECTED: 1, HIGHLIGHTED: 2 };
+
+const SelectionEvent = function(eventTypeIn, identifiersIn) {
+  this.eventType = eventTypeIn;
+  this.identifiers = identifiersIn;
+}
+
+const returnFullID = function(sourceId) {
+  //return full annotations with all different name
+}
+  
+const Subscription = function(subscriberIn, callbackIn, eventType) {
+  this.targetedID = [];
+  const subscriber = subscriberIn;
+  const callback = callbackIn;
+  this.targetEventType = eventType;
+  const _this = this;
+
+  if (eventType === undefined)
+    this.targetEventType = EVENT_TYPE.ALL;
+  
+  this.getEventType = function() {
+    return eventType;
+  }
+  
+  this.notify = function(source, eventType, ids) {
+    if (source !== subscriber && (_this.targetEventType ===  EVENT_TYPE.ALL ||
+        _this.targetEventType === eventType)) {
+      //should support different type of id e.g lyph, name, fmas...
+      //need a function that finds all relavant ids
+      const event = new SelectionEvent(eventType, ids);
+      callback(event);
+    }
+  }
+}
+
+exports.EventNotifier = function() {
+  const subscriptions = [];
+  
+  this.publish = function(source, eventType, id) {
+    for (let i = 0; i < subscriptions.length;i++) {
+      subscriptions[i].notify(source, eventType, id);
+    }
+  }
+  
+  this.subscribe = function(subscriber, callbackFunction, eventType) {
+    if (typeof callbackFunction === "function") {
+      const subscription = new Subscription(subscriber, callbackFunction, eventType);
+      subscriptions.push(subscription);
+      return subscription;
+    }
+    return undefined;
+  }
+  
+  this.unsubscribe = function(subscription) {
+    for (let i = 0; i < subscriptions.length;i++) {
+      if (subscription === subscriptions[i]) {
+        subscriptions.splice(i, 1);
+        return;
+      }
+    }
+  }
+}  
+
+exports.EVENT_TYPE = EVENT_TYPE;

package/src/scripts/graphicsHighlight.js

@@ -0,0 +1,132 @@
+var THREE = require('zincjs').THREE;
+
+/**
+ * This module manages highlighted and selected objects in 3D modules. 
+ * 
+ * @class
+ * @returns {exports.GraphicsHighlight}
+ */
+exports.GraphicsHighlight = function() {
+  let currentHighlightedObjects = [];
+  let currentSelectedObjects = [];
+  this.highlightColour = 0x0000FF;
+  this.selectColour = 0x00FF00;
+  this.originalColour = 0x000000;
+  const _this = this;
+
+  const isDifferent = function(array1, array2) {
+    if ((array1.length == 0) && (array2.length == 0))
+      return false; 
+    for (let i = 0; i < array1.length; i++) {
+      let matched = false;
+      for (let j = 0; j < array2.length; j++) {
+        if (array1[i] === array2[j]) {
+          matched = true;
+        }
+      }
+      if (!matched)
+        return true;
+    }
+    for (let i = 0; i < array2.length; i++) {
+      let matched = false;
+      for (let j = 0; j < array1.length; j++) {
+        if (array2[i] === array1[j]) {
+          matched = true;
+        }
+      }
+      if (!matched)
+        return true;
+    }
+    return false;
+  }
+  
+  const getUnmatchingObjects = function(objectsArray1, objectsArray2) {
+    const unmatchingObjects = [];
+    if (objectsArray2.length == 0)
+      return objectsArray1;
+    for (let i = 0; i < objectsArray1.length; i++) {
+      let matched = false;
+      for (let j = 0; j < objectsArray2.length; j++) {
+        if (objectsArray1[i] === objectsArray2[j]) {
+          matched = true;
+        }
+      }
+      if (!matched)
+        unmatchingObjects.push(objectsArray1[i]);
+    }
+    return unmatchingObjects;
+  }
+  
+  this.setHighlighted = function(objects) {
+    const previousHighlightedObjects = currentHighlightedObjects;
+    _this.resetHighlighted();
+    // Selected object cannot be highlighted
+    const array = getUnmatchingObjects(objects, currentSelectedObjects);
+    const fullList = getFullListOfObjects(array);
+    for (let i = 0; i < fullList.length; i++) {
+      if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
+        fullList[i].material.emissive.setHex(_this.highlightColour);
+    }
+    currentHighlightedObjects = array;
+    return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
+  }
+
+  this.setSelected = function(objects) {
+    // first find highlighted object that are not selected
+    const previousHSelectedObjects = currentSelectedObjects;
+    const array = getUnmatchingObjects(currentHighlightedObjects, objects);
+    currentHighlightedObjects = array;
+    _this.resetSelected();
+    const fullList = getFullListOfObjects(objects);
+    for (let i = 0; i < fullList.length; i++) {
+    	if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
+        fullList[i].material.emissive.setHex(_this.selectColour);
+    }
+    currentSelectedObjects = objects;
+    return isDifferent(currentSelectedObjects, previousHSelectedObjects);
+  }
+
+  const getFullListOfObjects = function(objects) {
+    let fullList = [];
+    for (let i = 0; i < objects.length; i++) {
+      if (objects[i].material)
+        fullList.push(objects[i]);
+    }
+    return fullList;
+  }
+  
+  this.resetHighlighted = function() {
+    const fullList = getFullListOfObjects(currentHighlightedObjects);
+    for (let i = 0; i < fullList.length; i++) {
+      if (fullList[i] && fullList[i].material) {
+        if (fullList[i].material.emissive)
+          fullList[i].material.emissive.setHex(_this.originalColour);
+        if (fullList[i].material.depthFunc)
+          fullList[i].material.depthFunc = THREE.LessEqualDepth;
+      }
+    }
+    currentHighlightedObjects = [];
+  }
+  
+  this.resetSelected = function() {
+    const fullList = getFullListOfObjects(currentSelectedObjects);
+    for (let i = 0; i < fullList.length; i++) {
+    	if (fullList[i] && fullList[i].material) {
+    		if (fullList[i].material.emissive)
+          fullList[i].material.emissive.setHex(_this.originalColour);
+    		if (fullList[i].material.depthFunc)
+          fullList[i].material.depthFunc = THREE.LessEqualDepth;
+    	}
+    }
+    currentSelectedObjects = [];
+  }
+  
+  this.getSelected = function() {
+    return currentSelectedObjects;
+  }
+  
+  this.reset = function() {
+    _this.resetSelected();
+    _this.resetHighlighted();
+  }
+}