@abi-software/scaffoldvuer 0.1.50 → 0.1.52-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.50",
+  "version": "0.1.52-beta.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,23 +22,22 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/svg-sprite": "^0.1.13",
+    "@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.50.0-beta.1"
   },
   "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

@@ -18,6 +18,7 @@
       :region="region"
       :view-u-r-l="viewURL"
       @scaffold-selected="onSelected"
+      @scaffold-navigated="onNavigated"
       @timeChanged="updateCurrentTime"
     />
     <el-popover
@@ -100,16 +101,93 @@
           >
             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="2"
+          >
+            <el-switch
+              v-model="syncMode"
+              active-text="Sync Mode"
+              active-color="#8300bf"
+            />
+            <el-row v-if="syncMode">
+              <el-input-number
+                v-model="zoom"
+                :min="1.0"
+                :controls="false"
+                placeholder="Please input"
+                label="zoom"
+              />
+              <el-input-number
+                v-model="pos[0]"
+                :min="-1.0"
+                :max="1.0"
+                :controls="false"
+                placeholder="Please input"
+                label="x"
+              />
+              <el-input-number
+                v-model="pos[1]"
+                :min="-1.0"
+                :max="1.0"
+                :controls="false"
+                label="y"
+              />
+            </el-row>
+          </el-col>
+        </el-row>
+        <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"
@@ -149,7 +227,7 @@
 import { ScaffoldVuer } from "./components/index.js";
 import ModelsTable from "./components/ModelsTable.vue";
 import Vue from "vue";
-import { Button, Col, Icon, Input, Popover, Row, Switch } from "element-ui";
+import { Button, Col, Icon, Input, InputNumber, Popover, Row, Switch } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 
@@ -158,6 +236,7 @@ Vue.use(Button);
 Vue.use(Col);
 Vue.use(Icon);
 Vue.use(Input);
+Vue.use(InputNumber);
 Vue.use(Popover);
 Vue.use(Row);
 Vue.use(Switch);
@@ -199,6 +278,7 @@ export default {
       selectedCoordinates: undefined,
       helpMode: false,
       displayMarkers: true,
+      syncMode: false,
       currentTime: 0,
       displayMinimap: true,
       tumbleOn: false,
@@ -212,7 +292,11 @@ export default {
       },
       render: true,
       region: "",
-      viewURL: ""
+      viewURL: "",
+      renderInfoOn: false,
+      rendererInfo: undefined,
+      zoom: 1,
+      pos: [0, 0],
     };
   },
   watch: {
@@ -226,14 +310,43 @@ export default {
       handler: "parseQuery",
       deep: true,
       immediate: true
+    },
+    syncMode: function(val) {
+      this.$refs.scaffold.toggleSyncControl(val);
     }
   },
 
   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());
     },
@@ -266,6 +379,12 @@ export default {
         });
       }
     },
+    onNavigated: function(data) {
+      console.log(data)
+      this.zoom = data.zoom;
+      this.pos[0] = data.target[0];
+      this.pos[1] = data.target[1];
+    },
     parseInput: function() {
       if (this.$route.query.url !== this.input)
         this.$router.replace({
@@ -325,6 +444,12 @@ body {
 
 .options-container {
   text-align: center;
+  .el-row {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .vuer {

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"
@@ -76,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"
@@ -146,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"
@@ -163,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"
@@ -184,7 +184,7 @@
             <br>
             window
           </div>
-          <SvgIcon
+          <map-svg-icon
             slot="reference"
             icon="fitWindow"
             class="icon-button fitWindow"
@@ -222,7 +222,7 @@
         trigger="manual"
         popper-class="scaffold-popper right-popper non-selectable"
       >
-        <SvgIcon
+        <map-svg-icon
           slot="reference"
           v-popover:backgroundPopover
           icon="changeBckgd"
@@ -241,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,
@@ -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.
@@ -283,8 +281,8 @@ export default {
   name: "ScaffoldVuer",
   components: {
     OpacityControls,
-    SvgIcon,
-    SvgSpriteColor,
+    MapSvgIcon,
+    MapSvgSpriteColor,
     TraditionalControls
   },
   props: {
@@ -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
     );
@@ -668,7 +665,11 @@ export default {
         let objects = this.$module.scene.findObjectsWithGroupName(name);
         let box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
         if (box) {
-          this.$module.scene.viewAllWithBoundingBox(box);
+          if (this.$module.isSyncControl()) {
+            this.$module.setSyncControlZoomToBox(box);
+          } else {
+            this.$module.scene.viewAllWithBoundingBox(box);
+          }
         }
       }
     },
@@ -695,6 +696,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.
@@ -721,9 +728,9 @@ export default {
             let id = event.identifiers[0].data.id
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
-            this.$refs.traditionalControl.changeActiveByName(id);
+            this.$refs.traditionalControl.changeActiveByName(id, true);
           } else {
-            this.$refs.traditionalControl.removeActive();
+            this.$refs.traditionalControl.removeActive(true);
           }
         }
         /**
@@ -739,8 +746,8 @@ export default {
             let id = event.identifiers[0].data.id
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
-            this.$refs.traditionalControl.changeHoverByName(id);
-          } else this.$refs.traditionalControl.removeHover();
+            this.$refs.traditionalControl.changeHoverByName(id, true);
+          } else this.$refs.traditionalControl.removeHover(true);
         }
         /**
          * Triggers when an object has been highlighted
@@ -781,30 +788,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.
      *
@@ -955,6 +984,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
@@ -1011,7 +1043,6 @@ export default {
     },
     /**
      * Callback using ResizeObserver.
-    
      */
     adjustLayout: function() {
       let width = this.$refs.scaffoldContainer.clientWidth;
@@ -1035,6 +1066,14 @@ export default {
       if (this.$module.zincRenderer) {
         this.$module.zincRenderer.onWindowResize();
       }
+    },
+    syncControlCallback: function() {
+      const payload = this.$module.NDCCameraControl.getPanZoom();
+      this.$emit("scaffold-navigated", payload);
+    },
+    toggleSyncControl: function(flag) {
+      this.$module.toggleSyncControl(flag);
+      this.$module.setSyncControlCallback(this.syncControlCallback);
     }
   }
 };

package/src/components/TraditionalControls.vue

@@ -130,7 +130,6 @@ export default {
     tmpArray = uniq(tmpArray.concat(this.module.sceneData.pointset));
     this.sortedPrimitiveGroups = orderBy(tmpArray);
     this.module.addOrganPartAddedCallback(this.organsAdded);
-    this.module.graphicsHighlight.selectColour = 0x444444;
   },
   destroyed: function() {
     this.sortedPrimitiveGroups = undefined;
@@ -153,47 +152,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 +229,7 @@ export default {
       }
     },
     checkboxHover: function(name) {
-      this.changeHoverByName(name);
+      this.changeHoverByName(name, true);
     },
     itemClicked: function(name, event) {
       if (
@@ -245,7 +238,7 @@ export default {
           event.target.classList.contains("el-checkbox__original")
         )
       ) {
-        this.changeActiveByName(name);
+        this.changeActiveByName(name, true);
         event.preventDefault();
       }
     },
@@ -272,10 +265,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;