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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.52-beta.0",
+  "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.41.2"
+    "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,22 +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"
-      @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"
@@ -87,7 +94,7 @@
             Capture
           </el-button>
         </el-row>
-        <el-row :gutter="20">
+        <el-row :gutter="10">
           <el-button
             size="mini"
             @click="saveSettings()"
@@ -103,10 +110,52 @@
           <el-button
             size="mini"
             @click="exportGLB()"
+          >
+            Export GLB
+          </el-button>
+          <el-button
+            size="mini"
+            @click="exportGLTF()"
           >
             Export GLTF
           </el-button>
         </el-row>
+        <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"
@@ -188,9 +237,10 @@
 <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, 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";
 
@@ -199,36 +249,15 @@ Vue.use(Button);
 Vue.use(Col);
 Vue.use(Icon);
 Vue.use(Input);
+Vue.use(InputNumber);
 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
   },
@@ -239,9 +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: {
@@ -255,7 +285,9 @@ export default {
       region: "",
       viewURL: "",
       renderInfoOn: false,
-      rendererInfo: undefined
+      rendererInfo: undefined,
+      zoom: 1,
+      pos: [0, 0],
     };
   },
   watch: {
@@ -269,9 +301,11 @@ 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();
@@ -327,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"];
@@ -335,11 +372,23 @@ export default {
         });
       }
     },
+    onNavigated: function(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>