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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.52-beta.2",
+  "version": "0.1.52-beta.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "vue": "^2.6.10",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^0.50.0-beta.1"
+    "zincjs": "^1.0.0-alpha-3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
@@ -47,8 +47,9 @@
     "node-sass": "^4.14.1",
     "raw-loader": "^0.5.1",
     "sass-loader": "^8.0.2",
+    "simple-dropzone": "^0.8.1",
     "vue-cli-plugin-styleguidist": "^4.32.2",
-    "vue-styleguidist": "^4.38.1",
+    "vue-styleguidist": "^4.44.22",
     "vue-template-compiler": "^2.6.10",
     "webpack-node-externals": "^2.5.2"
   },

package/src/App.vue

@@ -4,23 +4,29 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap"
     >
-    <ScaffoldVuer
-      ref="scaffold"
-      class="vuer"
-      :display-u-i="displayUI"
-      :url="url"
-      :help-mode="helpMode"
-      :display-minimap="displayMinimap"
-      :display-markers="displayMarkers"
-      :minimap-settings="minimapSettings"
-      :show-colour-picker="showColourPicker"
-      :render="render"
-      :region="region"
-      :view-u-r-l="viewURL"
-      @scaffold-selected="onSelected"
-      @scaffold-navigated="onNavigated"
-      @timeChanged="updateCurrentTime"
-    />
+    <drop-zone
+      ref="dropzone"
+      @files-drop="onFilesDrop"
+    >
+      <ScaffoldVuer
+        ref="scaffold"
+        class="vuer"
+        :display-u-i="displayUI"
+        :url="url"
+        :help-mode="helpMode"
+        :display-minimap="displayMinimap"
+        :display-markers="displayMarkers"
+        :minimap-settings="minimapSettings"
+        :show-colour-picker="showColourPicker"
+        :render="render"
+        :region="region"
+        :view-u-r-l="viewURL"
+        @on-ready="onReady"
+        @scaffold-selected="onSelected"
+        @scaffold-navigated="onNavigated"
+        @timeChanged="updateCurrentTime"
+      />
+    </drop-zone>
     <el-popover
       placement="bottom"
       trigger="click"
@@ -88,7 +94,7 @@
             Capture
           </el-button>
         </el-row>
-        <el-row :gutter="20">
+        <el-row :gutter="10">
           <el-button
             size="mini"
             @click="saveSettings()"
@@ -104,6 +110,12 @@
           <el-button
             size="mini"
             @click="exportGLB()"
+          >
+            Export GLB
+          </el-button>
+          <el-button
+            size="mini"
+            @click="exportGLTF()"
           >
             Export GLTF
           </el-button>
@@ -225,6 +237,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import { ScaffoldVuer } from "./components/index.js";
+import DropZone from "./components/DropZone.vue";
 import ModelsTable from "./components/ModelsTable.vue";
 import Vue from "vue";
 import { Button, Col, Icon, Input, InputNumber, Popover, Row, Switch } from "element-ui";
@@ -241,32 +254,10 @@ Vue.use(Popover);
 Vue.use(Row);
 Vue.use(Switch);
 
-/*
-const alignToObject = function(cameracontrol, scene) {
-  var object = scene.findGeometriesWithGroupName("Endocardium of left atrium")[0];
-  const boundingBox = object.getBoundingBox();
-  if (boundingBox) {
-    const radius = boundingBox.min.distanceTo(boundingBox.max)/2.0;
-    const centreX = (boundingBox.min.x + boundingBox.max.x) / 2.0;
-    const centreY = (boundingBox.min.y + boundingBox.max.y) / 2.0;
-    const centreZ = (boundingBox.min.z + boundingBox.max.z) / 2.0;
-    const clip_factor = 8.0;
-    const endingViewport = cameracontrol.getViewportFromCentreAndRadius(centreX, centreY, centreZ, radius, 40, radius * clip_factor );
-    const startingViewport = cameracontrol.getCurrentViewport();
-    cameracontrol.cameraTransition(startingViewport, endingViewport, 1500);
-    cameracontrol.enableCameraTransition();
-  }
-  setTimeout(function(){ tumble(cameracontrol) }, 2000);
-}
-
-const tumble = function(cameracontrol) {
-  cameracontrol.enableAutoTumble();
-  cameracontrol.autoTumble([1.0, 0.0], Math.PI / 2, true);
-}
-*/
 export default {
   name: "App",
   components: {
+    DropZone,
     ScaffoldVuer,
     ModelsTable
   },
@@ -277,10 +268,10 @@ export default {
       displayUI: true,
       selectedCoordinates: undefined,
       helpMode: false,
-      displayMarkers: true,
+      displayMarkers: false,
       syncMode: false,
       currentTime: 0,
-      displayMinimap: true,
+      displayMinimap: false,
       tumbleOn: false,
       showColourPicker: true,
       minimapSettings: {
@@ -315,7 +306,6 @@ export default {
       this.$refs.scaffold.toggleSyncControl(val);
     }
   },
-
   mounted: function() {
     this._sceneSettings = [];
     this.selectedCoordinates = this.$refs.scaffold.getDynamicSelectedCoordinates();
@@ -371,6 +361,9 @@ export default {
         cameracontrol.stopAutoTumble();
       }
     },
+    onReady: function() {
+      this.$refs.dropzone.revokeURLs();
+    },
     onSelected: function(data) {
       if (data && data[0].data.group) {
         delete this.$route.query["viewURL"];
@@ -380,16 +373,22 @@ export default {
       }
     },
     onNavigated: function(data) {
-      console.log(data)
       this.zoom = data.zoom;
       this.pos[0] = data.target[0];
       this.pos[1] = data.target[1];
     },
+    onFilesDrop: function(metaURL) {
+      this.input = metaURL;
+    },
     parseInput: function() {
-      if (this.$route.query.url !== this.input)
+      if (this.$route.query.url !== this.input) {
+        const queries = {...this.$route.query};
+        if (this.input && this.input !== "")
+          queries.url = this.input;
         this.$router.replace({
           query: { ...this.$route.query, url: this.input }
         });
+      }
     },
     updateCurrentTime: function(val) {
       this.currentTime = val;

package/src/components/DropZone.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    ref="dropEl"
+    class="dropzone"
+  >
+    <slot />
+    <input
+      ref="fileInput"
+      type="file"
+    >
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { SimpleDropzone } from "simple-dropzone";
+import path from "path";
+
+export default {
+  name: "DropZone",
+  data: function () {
+    return {
+      objectURLs: [],
+    };
+  },
+  mounted: function () {
+    const dropCtrl = new SimpleDropzone(
+      this.$refs.dropEl,
+      this.$refs.fileInput
+    );
+    dropCtrl.on("drop", ({ files }) => {
+      this.localDrop(files);
+    });
+  },
+  methods: {
+    createObjectURLs: function (text, list) {
+      let content = text;
+      for (const [key, file] of Object.entries(list)) {
+        if (content.includes(key)) {
+          const objectURL = URL.createObjectURL(file);
+          content = content.replace(key, objectURL);
+          this.objectURLs.push(objectURL);
+        }
+      }
+      let blob = new Blob([content], { type: "application/json" });
+      const metaURL = URL.createObjectURL(blob);
+      this.objectURLs.push(metaURL);
+      this.$emit("files-drop", metaURL);
+    },
+    revokeURLs: function () {
+      this.objectURLs.forEach(objectURL => URL.revokeObjectURL(objectURL));
+      this.objectURLs = [];    
+    },
+    localDrop: function (fileMap) {
+      const dataMaps = {};
+      let list = {};
+      let metadata = undefined;
+      const flatarray = Array.from(fileMap);
+      let rootPath = "";
+      for (let i = 0; i < flatarray.length; i++) {
+        if (flatarray[i][1].name.includes("metadata.json")) {
+          rootPath = flatarray[i][0].replace(flatarray[i][1].name, "");
+          metadata = { rootPath, file: flatarray[i][1] };
+          break;
+        }
+      }
+      if (metadata) {
+        flatarray.forEach(([filePath, file]) => {
+          if (file.name.match(/\.(json)$/)) {
+            const relativePath = path.relative(rootPath, filePath);
+            list[relativePath] = file;
+          }
+        });
+        const metaFileURL = URL.createObjectURL(metadata.file);
+        fetch(metaFileURL)
+          .then((response) => response.text())
+          .then((text) => this.createObjectURLs(text, list));
+        URL.revokeObjectURL(metaFileURL);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.dropzone {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/ScaffoldTooltip.vue

@@ -0,0 +1,117 @@
+<template>
+  <div :style="position" class="tooltipContainer">
+    <el-popover
+      ref="tooltip"
+      v-model="display"
+      placement="top"
+      :append-to-body="false"
+      trigger="manual"
+      popper-class="tooltip-popper non-selectable"
+    >
+      <div>{{ label }}</div>
+      <i v-popover:tooltip />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Popover } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Popover);
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "ScaffoldTooltip",
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    x: {
+      type: Number,
+      default: 200,
+    },
+    y: {
+      type: Number,
+      default: 200,
+    },
+  },
+  data: function () {
+    return {
+      display: false,
+    };
+  },
+  computed: {
+    position: function () {
+      return { left: this.x + "px", top: this.y - 30 + "px" };
+    },
+  },
+  watch: {
+    label: {
+      handler: function () {
+        if (this.visible && this.label && this.label !== "")
+          this.display = true;
+        else this.display = false;
+      },
+      immediate: true,
+    },
+    visible: {
+      handler: function () {
+        if (this.visible && this.label && this.label !== "")
+          this.display = true;
+        else this.display = false;
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/popover";
+
+::v-deep .tooltip-popper {
+  padding: 2px 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  color: $app-primary-color;
+  background-color: #fff;
+  border: 1px solid $app-primary-color;
+  border-radius: 4px;
+  white-space: nowrap;
+  min-width: unset;
+  pointer-events: none;
+
+  &.el-popper[x-placement^="top"] {
+    .popper__arrow {
+      border-top-color: $app-primary-color !important;
+      &:after {
+        border-top-color: #fff !important;
+      }
+    }
+  }
+}
+
+.tooltipContainer {
+  position: absolute;
+  height: 50px;
+  z-index: 2;
+}
+
+::v-deep .non-selectable {
+  user-select: none;
+  pointer-events: none;
+}
+</style>

package/src/components/ScaffoldVuer.vue

@@ -8,6 +8,12 @@
     element-loading-background="rgba(0, 0, 0, 0.3)"
   >
     <map-svg-sprite-color />
+    <scaffold-tooltip
+      :label="tData.label"
+      :visible="tData.visible"
+      :x="tData.x"
+      :y="tData.y"
+    />
     <div
       id="organsDisplayArea"
       ref="display"
@@ -44,8 +50,8 @@
         trigger="manual"
         popper-class="scaffold-popper right-popper non-selectable"
       />
-      <TraditionalControls
-        ref="traditionalControl"
+      <tree-controls
+        ref="treeControl"
         v-popover:checkBoxPopover
         :help-mode="helpMode"
         :module="$module"
@@ -55,7 +61,7 @@
         @drawer-toggled="drawerToggled"
       />
       <div class="opacity-box">
-        <OpacityControls ref="opacityControl" />
+        <opacity-controls ref="opacityControl" />
       </div>
       <el-popover
         v-if="sceneData.timeVarying"
@@ -240,7 +246,8 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import OpacityControls from "./OpacityControls";
-import TraditionalControls from "./TraditionalControls";
+import ScaffoldTooltip from "./ScaffoldTooltip";
+import TreeControls from "./TreeControls";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 
 import {
@@ -275,15 +282,16 @@ const EventNotifier = require("../scripts/eventNotifier").EventNotifier;
  * A vue component of the scaffold viewer.
  *
  * @requires ./OpacityControls.vue
- * @requires ./TraditionalControls.vue
+ * @requires ./TreeControls.vue
  */
 export default {
   name: "ScaffoldVuer",
   components: {
-    OpacityControls,
     MapSvgIcon,
     MapSvgSpriteColor,
-    TraditionalControls
+    OpacityControls,
+    ScaffoldTooltip,
+    TreeControls,
   },
   props: {
     /**
@@ -458,7 +466,14 @@ export default {
         }
       ],
       currentSpeed: 1,
-      timeStamps: {}
+      timeStamps: {},
+      defaultCheckedKeys: [],
+      tData: {
+        label: "",
+        visible: false,
+        x: 200,
+        y: 200
+      }
     };
   },
   watch: {
@@ -723,39 +738,47 @@ export default {
      */
     eventNotifierCallback: function(event) {
       if (event.eventType == 1) {
-        if (this.$refs.traditionalControl) {
+        if (this.$refs.treeControl) {
           if (event.identifiers[0]) {
             let id = event.identifiers[0].data.id
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
-            this.$refs.traditionalControl.changeActiveByName(id, true);
+            let region = event.identifiers[0].data.region;
+            this.$refs.treeControl.changeActiveByName(id, region, true);
           } else {
-            this.$refs.traditionalControl.removeActive(true);
+            this.$refs.treeControl.removeActive(true);
           }
         }
-        /**
-         * Triggers when an object has been selected
-         *
-         * @property {array} identifiers array of identifiers
-         * of selected object.
-         */
+        // Triggers when an object has been selected
         this.$emit("scaffold-selected", event.identifiers);
       } else if (event.eventType == 2) {
-        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.$refs.traditionalControl.changeHoverByName(id, true);
-          } else this.$refs.traditionalControl.removeHover(true);
+        this.tData.visible = false;
+        if (event.identifiers[0]) {
+          let id = event.identifiers[0].data.id
+            ? event.identifiers[0].data.id
+            : event.identifiers[0].data.group;
+          if (event.identifiers[0].coords) {
+            this.tData.visible = true;
+            this.tData.label = id;
+            this.tData.x = event.identifiers[0].coords.x;
+            this.tData.y =event.identifiers[0].coords.y;
+          }
+          if (this.$refs.treeControl) {
+            let region = event.identifiers[0].data.region;
+            this.$refs.treeControl.changeHoverByName(id, region, true);
+          } else {
+            this.$refs.treeControl.removeHover(true);
+          }
         }
-        /**
-         * Triggers when an object has been highlighted
-         *
-         * @property {array} identifiers array of identifiers
-         * of highlighted object.
-         */
+        // Triggers when an object has been highlighted
         this.$emit("scaffold-highlighted", event.identifiers);
+      } else if (event.eventType == 3)  { //MOVE
+        if (event.identifiers[0]) {
+          if (event.identifiers[0].coords) {
+            this.tData.x = event.identifiers[0].coords.x;
+            this.tData.y = event.identifiers[0].coords.y;
+          }
+        }
       }
     },
     /**
@@ -796,8 +819,8 @@ export default {
       if (object !== this.selectedObject) {
         this.selectedObject = object;
         this.$refs.opacityControl.setObject(this.selectedObject);
-        if (object) this.$module.setSelectedByZincObject(object, propagate);
-        else this.$module.setSelectedByObjects([], propagate);
+        if (object) this.$module.setSelectedByZincObject(object, undefined, propagate);
+        else this.$module.setSelectedByObjects([], undefined, propagate);
       }
     },
     /**
@@ -808,31 +831,31 @@ export default {
     objectHovered: function(object, propagate) {
       if (object !== this.hoveredObject) {
         this.hoveredObject = object;
-        if (object) this.$module.setHighlightedByZincObject(object, propagate);
-        else this.$module.setHighlightedByObjects([], propagate);
+        if (object) this.$module.setHighlightedByZincObject(object, undefined, propagate);
+        else this.$module.setHighlightedByObjects([], undefined, propagate);
       }
     },
     /**
      * Set the selected by name.
      *
-     * @param {name} name Name of the region
+     * @param {name} name Name of the group
      */
-    changeActiveByName: function(name, propagate) {
+    changeActiveByName: function(name, region, propagate) {
       if (name === undefined)
-        this.$refs.traditionalControl.removeActive(propagate);
+        this.$refs.treeControl.removeActive(propagate);
       else
-        this.$refs.traditionalControl.changeActiveByName(name, propagate);
+        this.$refs.treeControl.changeActiveByName(name, region, propagate);
     },
     /**
      * Set the highlighted by name.
      *
-     * @param {name} name Name of the region
+     * @param {name} name Name of the group
      */
-    changeHighlightedByName: function(name, propagate) {
+    changeHighlightedByName: function(name, region, propagate) {
       if (name === undefined)
-        this.$refs.traditionalControl.removeHover(propagate);
+        this.$refs.treeControl.removeHover(propagate);
       else
-        this.$refs.traditionalControl.changeHoverByName(name, propagate);
+        this.$refs.treeControl.changeHoverByName(name, region, propagate);
     },
     /**
      * Start the animation.
@@ -919,7 +942,7 @@ export default {
           if (options.visibility) {
             // Some UIs may not be ready at this time.
             this.$nextTick(() => {
-              this.$refs.traditionalControl.setState(options.visibility);
+              this.$refs.treeControl.setState(options.visibility);
             });
           }
         }
@@ -927,6 +950,7 @@ export default {
         this.$module.updateTime(0.01);
         this.$module.updateTime(0);
         this.$module.unsetFinishDownloadCallback();
+        this.$emit("on-ready");
         this.isReady = true;
       };
     },
@@ -942,8 +966,8 @@ export default {
         viewport: undefined,
         visibility: undefined
       };
-      if (this.$refs.traditionalControl)
-        state.visibility = this.$refs.traditionalControl.getState();
+      if (this.$refs.treeControl)
+        state.visibility = this.$refs.treeControl.getState();
       if (this.$module.scene) {
         let zincCameraControls = this.$module.scene.getZincCameraControls();
         state.viewport = zincCameraControls.getCurrentViewport();
@@ -971,7 +995,7 @@ export default {
                   .getZincCameraControls()
                   .setCurrentCameraSettings(state.viewport);
               if (state.visibility)
-                this.$refs.traditionalControl.setState(state.visibility);
+                this.$refs.treeControl.setState(state.visibility);
             } else {
               this.$module.setFinishDownloadCallback(
                 this.setURLFinishCallback({
@@ -1000,8 +1024,8 @@ export default {
         let visibility =
           state && state.visibility ? state.visibility : undefined;
         this._currentURL = newValue;
-        if (this.$refs.traditionalControl)
-          this.$refs.traditionalControl.clear();
+        if (this.$refs.treeControl)
+          this.$refs.treeControl.clear();
         this.loading = true;
         this.isReady = false;
         this.$module.setFinishDownloadCallback(