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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.51.beta.1",
+  "version": "0.1.51.beta.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -29,16 +29,15 @@
     "element-ui": "^2.13.0",
     "google-spreadsheet": "^3.1.15",
     "lodash": "^4.17.21",
-    "physiomeportal": "^0.4.27",
     "query-string": "^6.11.1",
     "vue": "^2.6.10",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^0.40.0"
+    "zincjs": "^0.41.0-beta.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.5.15",
     "@vue/cli-service": "^4.5.13",
     "babel-eslint": "^10.0.3",
     "babel-plugin-component": "^1.1.1",

package/src/App.vue

@@ -107,15 +107,50 @@
             Export GLTF
           </el-button>
         </el-row>
-        <el-row :gutter="20">
-          <el-row :gutter="20">
+        <el-row :gutter="30">
+          <el-col
+            :span="7"
+            :offset="4"
+          >
             <el-switch
               v-model="render"
               active-text="Rendering"
               active-color="#8300bf"
             />
-          </el-row>
+          </el-col>
+          <el-col
+            :span="8"
+            :offset="1"
+          >
+            <el-switch
+              v-model="renderInfoOn"
+              active-text="Renderer Info"
+              active-color="#8300bf"
+            />
+          </el-col>
         </el-row>
+        <template v-if="renderInfoOn && rendererInfo">
+          <el-row>
+            <el-col
+              v-for="(value, name) in rendererInfo.memory"
+              :key="name"
+              :offset="4"
+              :span="6"
+            >
+              {{ name }} : {{ value }}
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col
+              v-for="(value, name) in rendererInfo.render"
+              :key="name"
+              :offset="1"
+              :span="6"
+            >
+              {{ name }} : {{ value }}
+            </el-col>
+          </el-row>
+        </template>
         <el-input
           v-model="input"
           type="textarea"
@@ -218,7 +253,9 @@ export default {
       },
       render: true,
       region: "",
-      viewURL: ""
+      viewURL: "",
+      renderInfoOn: false,
+      rendererInfo: undefined
     };
   },
   watch: {
@@ -238,6 +275,7 @@ export default {
   mounted: function() {
     this._sceneSettings = [];
     this.selectedCoordinates = this.$refs.scaffold.getDynamicSelectedCoordinates();
+    this.rendererInfo = this.$refs.scaffold.getRendererInfo();
   },
   methods: {
     exportGLTF: function() {
@@ -356,6 +394,12 @@ body {
 
 .options-container {
   text-align: center;
+  .el-row {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .vuer {

package/src/components/ScaffoldVuer.vue

@@ -268,10 +268,8 @@ Vue.use(Slider);
 Vue.use(TabPane);
 Vue.use(Tabs);
 
-const OrgansViewer = require("physiomeportal/src/modules/organsRenderer")
-  .OrgansViewer;
-const EventNotifier = require("physiomeportal/src/utilities/eventNotifier")
-  .EventNotifier;
+const OrgansViewer = require("../scripts/organsRenderer").OrgansViewer;
+const EventNotifier = require("../scripts/eventNotifier").EventNotifier;
 
 /**
  * A vue component of the scaffold viewer.
@@ -535,7 +533,6 @@ export default {
     this.$module.addOrganPartAddedCallback(this.organsAdded);
     this.$module.initialiseRenderer(this.$refs.display);
     this.toggleRendering(this.render);
-    this.$module.toolTip = undefined;
     this.ro = new ResizeObserver(this.adjustLayout).observe(
       this.$refs.scaffoldContainer
     );
@@ -695,6 +692,12 @@ export default {
         }
       }
     },
+    getRendererInfo: function() {
+      if (this.$module.zincRenderer) {
+        return this.$module.zincRenderer.getThreeJSRenderer().info;
+      }
+      return undefined;
+    },
     /**
      * Function used to rotate the scene.
      * Also called when the associated button is pressed.

package/src/scripts/BaseModule.js

@@ -0,0 +1,80 @@
+const MODULE_CHANGE = { ALL: 0, DESTROYED: 1, NAME_CHANGED: 2, SETTINGS_CHANGED: 3 };
+
+const BaseModule = function() {
+  this.typeName = "Base Module";
+  this.instanceName = "default";
+  this.onChangedCallbacks = [];
+  /**  Notifier handle for informing other modules of any changes **/
+  this.eventNotifiers = [];
+}
+
+BaseModule.prototype.setName = function(name) {
+  if (name && this.instanceName !== name) {
+    this.instanceName = name;
+    const callbackArray = this.onChangedCallbacks.slice();
+    for (let i = 0; i < callbackArray.length; i++) {
+      callbackArray[i]( this, MODULE_CHANGE.NAME_CHANGED );
+    }
+  }
+}
+
+BaseModule.prototype.settingsChanged = function() {
+	const callbackArray = this.onChangedCallbacks.slice();
+  for (let i = 0; i < callbackArray.length; i++) {
+    callbackArray[i]( this, MODULE_CHANGE.SETTINGS_CHANGED );
+  }
+}
+
+BaseModule.prototype.exportSettings = function() {
+  const settings = {};
+  settings.dialog = this.typeName;
+  settings.name = this.instanceName;
+  return settings;
+}
+
+BaseModule.prototype.importSettings = function(settings) {
+	if (settings.dialog == this.typeName) {
+		this.setName(settings.name);
+		return true;
+	}
+	return false;
+}
+
+BaseModule.prototype.publishChanges = function(annotations, eventType) {
+  for (let i = 0; i < this.eventNotifiers.length; i++) {
+    this.eventNotifiers[i].publish(this, eventType, annotations);
+  }
+}
+
+BaseModule.prototype.getName = function() {
+  return this.instanceName;
+}
+
+BaseModule.prototype.destroy = function() {
+  //Make a temorary copy as the array may be altered during the loop
+  const callbackArray = this.onChangedCallbacks.slice();
+  for (let i = 0; i < callbackArray.length; i++) {
+    callbackArray[i]( this, MODULE_CHANGE.DESTROYED );
+  }
+
+  delete this;
+} 
+
+BaseModule.prototype.addChangedCallback = function(callback) {
+  if (this.onChangedCallbacks.includes(callback) == false)
+    this.onChangedCallbacks.push(callback);
+}
+
+BaseModule.prototype.removeChangedCallback = function(callback) {
+  const index = this.onChangedCallbacks.indexOf(callback);
+  if (index > -1) {
+    this.onChangedCallbacks.splice(index, 1);
+  }
+} 
+
+BaseModule.prototype.addNotifier = function(eventNotifier) {
+  this.eventNotifiers.push(eventNotifier);
+}
+
+exports.BaseModule = BaseModule;
+exports.MODULE_CHANGE = MODULE_CHANGE;

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;