@abi-software/scaffoldvuer 0.1.50-beta-0 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.50-beta-0",
+  "version": "0.1.51",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,23 +22,22 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/svg-sprite": "^0.1.13",
-    "axios": "^0.21.1",
+    "@abi-software/svg-sprite": "^0.1.14",
+    "axios": "^0.21.2",
     "core-js": "^3.3.2",
     "current-script-polyfill": "^1.0.0",
     "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.2"
   },
   "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

@@ -100,16 +100,57 @@
           >
             Restore Settings
           </el-button>
+          <el-button
+            size="mini"
+            @click="exportGLB()"
+          >
+            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"
@@ -212,7 +253,9 @@ export default {
       },
       render: true,
       region: "",
-      viewURL: ""
+      viewURL: "",
+      renderInfoOn: false,
+      rendererInfo: undefined
     };
   },
   watch: {
@@ -232,8 +275,34 @@ export default {
   mounted: function() {
     this._sceneSettings = [];
     this.selectedCoordinates = this.$refs.scaffold.getDynamicSelectedCoordinates();
+    this.rendererInfo = this.$refs.scaffold.getRendererInfo();
   },
   methods: {
+    exportGLTF: function() {
+      this.$refs.scaffold.exportGLTF(false)
+        .then(data =>{
+          let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
+          let hrefElement = document.createElement("a");
+          document.body.append(hrefElement);
+          hrefElement.download = `export.gltf`;
+          hrefElement.href = dataStr;
+          hrefElement.click();
+          hrefElement.remove();
+        })
+    },
+    exportGLB: function() {
+      this.$refs.scaffold.exportGLTF(true)
+        .then(data =>{
+          let blob = new Blob([data], {type: "octet/stream"});
+          let url = window.URL.createObjectURL(blob);
+          let hrefElement = document.createElement("a");
+          document.body.append(hrefElement);
+          hrefElement.download = `export.glb`;
+          hrefElement.href = url;
+          hrefElement.click();
+          hrefElement.remove();
+        })
+    },
     saveSettings: function() {
       this._sceneSettings.push(this.$refs.scaffold.getState());
     },
@@ -325,6 +394,12 @@ body {
 
 .options-container {
   text-align: center;
+  .el-row {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .vuer {

package/src/components/OpacityControls.vue

@@ -4,13 +4,6 @@
     ref="control"
     class="opacity-control"
   >
-    <div
-      v-if="!drawerOpen"
-      class="tab-button open"
-      @click="toggleDrawer"
-    >
-      <i class="el-icon-arrow-left" />
-    </div>
     <el-drawer
       custom-class="my-drawer"
       class="drawer-content"
@@ -52,6 +45,13 @@
         </el-main>
       </el-container>
     </el-drawer>
+    <div
+      v-if="!drawerOpen"
+      class="tab-button open"
+      @click="toggleDrawer"
+    >
+      <i class="el-icon-arrow-left" />
+    </div>
   </div>
 </template>
 
@@ -116,9 +116,6 @@ export default {
 @import "~element-ui/packages/theme-chalk/src/slider";
 
 .opacity-control {
-  position: absolute;
-  top: 255px;
-  right: 0px;
   text-align: left;
   width:300px;
 }
@@ -201,6 +198,7 @@ export default {
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
+  //transition: bottom 0.3s;
 
   &.close {
     float: left;
@@ -211,17 +209,8 @@ export default {
 
   &.open {
     position: absolute;
-    top:26px;
-  }
-
-  i {
-    margin-top: 12px;
-    color: $app-primary-color;
-    transform: scaleY(2.5);
+    bottom:26px;
   }
-}
-
-.open-tab{
 
   i {
     margin-top: 12px;

package/src/components/ScaffoldVuer.vue

@@ -7,7 +7,7 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.3)"
   >
-    <SvgSpriteColor />
+    <map-svg-sprite-color />
     <div
       id="organsDisplayArea"
       ref="display"
@@ -54,7 +54,9 @@
         @object-hovered="objectHovered"
         @drawer-toggled="drawerToggled"
       />
-      <OpacityControls ref="opacityControl" />
+      <div class="opacity-box">
+        <OpacityControls ref="opacityControl" />
+      </div>
       <el-popover
         v-if="sceneData.timeVarying"
         ref="sliderPopover"
@@ -74,13 +76,13 @@
         <el-tabs type="card">
           <el-tab-pane label="Animate scaffold">
             <el-row class="tab-content">
-              <SvgIcon
+              <map-svg-icon
                 v-if="isPlaying"
                 icon="pause"
                 class="icon-button video-button"
                 @click.native="play(false)"
               />
-              <SvgIcon
+              <map-svg-icon
                 v-else
                 icon="play"
                 class="video-button icon-button"
@@ -144,7 +146,7 @@
           trigger="manual"
           popper-class="scaffold-popper left-popper non-selectable"
         >
-          <SvgIcon
+          <map-svg-icon
             slot="reference"
             icon="zoomIn"
             class="icon-button zoomIn"
@@ -161,7 +163,7 @@
           trigger="manual"
           popper-class="scaffold-popper popper-zoomout non-selectable"
         >
-          <SvgIcon
+          <map-svg-icon
             slot="reference"
             icon="zoomOut"
             class="icon-button zoomOut"
@@ -182,7 +184,7 @@
             <br>
             window
           </div>
-          <SvgIcon
+          <map-svg-icon
             slot="reference"
             icon="fitWindow"
             class="icon-button fitWindow"
@@ -220,7 +222,7 @@
         trigger="manual"
         popper-class="scaffold-popper right-popper non-selectable"
       >
-        <SvgIcon
+        <map-svg-icon
           slot="reference"
           v-popover:backgroundPopover
           icon="changeBckgd"
@@ -239,7 +241,7 @@
 import Vue from "vue";
 import OpacityControls from "./OpacityControls";
 import TraditionalControls from "./TraditionalControls";
-import { SvgIcon, SvgSpriteColor } from "@abi-software/svg-sprite";
+import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 
 import {
   Col,
@@ -266,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.
@@ -281,8 +281,8 @@ export default {
   name: "ScaffoldVuer",
   components: {
     OpacityControls,
-    SvgIcon,
-    SvgSpriteColor,
+    MapSvgIcon,
+    MapSvgSpriteColor,
     TraditionalControls
   },
   props: {
@@ -533,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
     );
@@ -693,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.
@@ -714,14 +719,14 @@ export default {
      */
     eventNotifierCallback: function(event) {
       if (event.eventType == 1) {
-        if (this.controls) {
+        if (this.$refs.traditionalControl) {
           if (event.identifiers[0]) {
             let id = event.identifiers[0].data.id
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
-            this.controls.changeActiveByName(id);
+            this.$refs.traditionalControl.changeActiveByName(id, true);
           } else {
-            this.controls.removeActive();
+            this.$refs.traditionalControl.removeActive(true);
           }
         }
         /**
@@ -732,13 +737,13 @@ export default {
          */
         this.$emit("scaffold-selected", event.identifiers);
       } else if (event.eventType == 2) {
-        if (this.controls) {
+        if (this.$refs.traditionalControl) {
           if (event.identifiers[0]) {
             let id = event.identifiers[0].data.id
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
-            this.controls.changeHoverByName(id);
-          } else this.controls.removeHover();
+            this.$refs.traditionalControl.changeHoverByName(id, true);
+          } else this.$refs.traditionalControl.removeHover(true);
         }
         /**
          * Triggers when an object has been highlighted
@@ -779,30 +784,52 @@ export default {
         this.$module.updateTime(normalizedTime);
     },
     /**
-     * Set the selected zinc object
+     * A callback used by children components. Set the selected zinc object
      *
      * @param {object} object Zinc object
      */
-    objectSelected: function(object) {
+    objectSelected: function(object, propagate) {
       if (object !== this.selectedObject) {
         this.selectedObject = object;
         this.$refs.opacityControl.setObject(this.selectedObject);
-        if (object) this.$module.setSelectedByZincObject(object, true);
-        else this.$module.setSelectedByObjects([], true);
+        if (object) this.$module.setSelectedByZincObject(object, propagate);
+        else this.$module.setSelectedByObjects([], propagate);
       }
     },
     /**
-     * Set the highlighted zinc object
+     * A callback used by children components. Set the highlighted zinc object
      *
      * @param {object} object Zinc object
      */
-    objectHovered: function(object) {
+    objectHovered: function(object, propagate) {
       if (object !== this.hoveredObject) {
         this.hoveredObject = object;
-        if (object) this.$module.setHighlightedByZincObject(object, true);
-        else this.$module.setHighlightedByObjects([], true);
+        if (object) this.$module.setHighlightedByZincObject(object, propagate);
+        else this.$module.setHighlightedByObjects([], propagate);
       }
     },
+    /**
+     * Set the selected by name.
+     *
+     * @param {name} name Name of the region
+     */
+    changeActiveByName: function(name, propagate) {
+      if (name === undefined)
+        this.$refs.traditionalControl.removeActive(propagate);
+      else
+        this.$refs.traditionalControl.changeActiveByName(name, propagate);
+    },
+    /**
+     * Set the highlighted by name.
+     *
+     * @param {name} name Name of the region
+     */
+    changeHighlightedByName: function(name, propagate) {
+      if (name === undefined)
+        this.$refs.traditionalControl.removeHover(propagate);
+      else
+        this.$refs.traditionalControl.changeHoverByName(name, propagate);
+    },
     /**
      * Start the animation.
      *
@@ -953,6 +980,9 @@ export default {
         }
       }
     },
+    exportGLTF: function(binary) {
+      return this.$module.scene.exportGLTF(binary);
+    },
     /**
      * Function used for reading in new scaffold metadata and a custom
      * viewport. This function will ignore the state prop and
@@ -1435,4 +1465,10 @@ export default {
   text-align: left;
   font-family: "Asap", sans-serif;
 }
+
+.opacity-box {
+  right: 0px;
+  bottom:200px;
+  position:absolute;
+}
 </style>

package/src/components/TraditionalControls.vue

@@ -153,47 +153,41 @@ export default {
     /**
      * Select a region by its name.
      */
-    changeActiveByName: function(name) {
+    changeActiveByName: function(name, propagate) {
       let targetObject = this.getFirstZincObjectWithGroupName(name);
       if (targetObject && targetObject.getVisibility()) {
         this.activeRegion = name;
-        /**
-         * Triggers when an item has been selected.
-         *
-         * @property {object} target selected object.
-         */
-        this.$emit("object-selected", targetObject);
+        this.$emit("object-selected", targetObject, propagate);
+      } else {
+        this.removeActive(propagate);
       }
-      this.removeHover();
+      this.removeHover(propagate);
     },
     /**
      * Hover a region by its name.
      */
-    changeHoverByName: function(name) {
+    changeHoverByName: function(name, propagate) {
       let targetObject = this.getFirstZincObjectWithGroupName(name);
       if (targetObject) {
         this.hoverRegion = name;
-        /**
-         * Triggers when an item has been hovered over.
-         *
-         * @property {object} target hovered object.
-         */
-        this.$emit("object-hovered", targetObject);
+        this.$emit("object-hovered", targetObject, propagate);
+      } else {
+        this.removeHover(propagate);
       }
     },
     /**
      * Unselect the current selected region.
      */
-    removeActive: function() {
+    removeActive: function(propagate) {
       this.activeRegion = "";
-      this.$emit("object-selected", undefined);
+      this.$emit("object-selected", undefined, propagate);
     },
     /**
      * Unselect the current hover region.
      */
-    removeHover: function() {
+    removeHover: function(propagate) {
       this.hoverRegion = "";
-      this.$emit("object-hovered", undefined);
+      this.$emit("object-hovered", undefined, propagate);
     },
     /**
      * Reset the controls.
@@ -236,7 +230,7 @@ export default {
       }
     },
     checkboxHover: function(name) {
-      this.changeHoverByName(name);
+      this.changeHoverByName(name, true);
     },
     itemClicked: function(name, event) {
       if (
@@ -245,7 +239,7 @@ export default {
           event.target.classList.contains("el-checkbox__original")
         )
       ) {
-        this.changeActiveByName(name);
+        this.changeActiveByName(name, true);
         event.preventDefault();
       }
     },
@@ -272,10 +266,10 @@ export default {
       this.module.changeOrganPartsVisibility(item, event);
       if (event == false) {
         if (this.activeRegion === item) {
-          this.removeActive();
+          this.removeActive(true);
         }
         if (this.hoverRegion === item) {
-          this.removeHover();
+          this.removeHover(true);
         }
       }
     },

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;