@abi-software/scaffoldvuer 1.2.1 → 1.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.2.1",
+  "version": "1.3.0-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.1.0",
+    "@abi-software/map-utilities": "^0.0.0-beta.4",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.8.3"
+    "zincjs": "^1.8.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -27,6 +27,7 @@
         :view-u-r-l="viewURL"
         :format="format"
         :marker-labels="markerLabels"
+        :enableLocalAnnotations="true"
         @open-map="openMap"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
@@ -64,80 +65,96 @@
         </el-row>
 
         <el-row :gutter="20" justify="center" align="middle">
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-switch v-model="displayUI" active-text="UI" />
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-switch v-model="displayMarkers" active-text="Markers" active-icon-class="el-icon-location"
               active-color="#8300bf" />
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-switch v-model="markerCluster" active-text="Marker Cluster" active-icon-class="el-icon-location"
               active-color="#8300bf" />
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-switch v-model="displayMinimap" active-text="Minimap" active-icon-class="el-icon-discover"
               active-color="#8300bf" />
           </el-col>
         </el-row>
 
         <el-row :gutter="20" justify="center" align="middle">
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-switch v-model="tumbleOn" active-text="Tumble" active-color="#8300bf" />
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-row>
               <el-col :span="8"> x: </el-col>
               <el-col :span="16">
                 <el-input-number class="tumble-direction" controls-position="right" v-model="tumbleDirection[0]" :min="-1.0"
-                  :max="1.0" :controls="false" placeholder="Please input" label="x" @change="autoTumble" />
+                  :max="1.0" :controls="false" placeholder="Please input" aria-label="x" @change="autoTumble" />
               </el-col>
             </el-row>
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-row>
               <el-col :span="8"> y: </el-col>
               <el-col :span="16">
                 <el-input-number class="tumble-direction" controls-position="right" v-model="tumbleDirection[1]" :min="-1.0"
-                  :max="1.0" :controls="false" placeholder="Please input" label="y" @change="autoTumble" />
+                  :max="1.0" :controls="false" placeholder="Please input" aria-label="y" @change="autoTumble" />
               </el-col>
             </el-row>
           </el-col>
         </el-row>
 
         <el-row :gutter="20" justify="center" align="middle">
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-button size="small" @click="helpMode = !helpMode">
               Help Mode
             </el-button>
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-button size="small" @click="screenCapture()"> Capture </el-button>
           </el-col>
-          <el-col span="auto">
-            <el-button size="small" @click="changeMarkers"> Change Markers </el-button>
-          </el-col>
         </el-row>
 
         <el-row :gutter="20" justify="center" align="middle">
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-button size="small" @click="saveSettings()">
               Save Settings
             </el-button>
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-button size="small" @click="restoreSettings()">
               Restore Settings
             </el-button>
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-button size="small" @click="exportGLB()"> Export GLB </el-button>
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-button size="small" @click="exportGLTF()"> Export GLTF </el-button>
           </el-col>
         </el-row>
 
+        <el-row :gutter="20" justify="center" align="middle">
+          <el-col :span="auto">
+            <el-button size="small" @click="exportLocalAnnotations()">
+              Export Annotations
+            </el-button>
+          </el-col>
+          <el-col :span="auto">
+              <el-button size="small">
+                <label for="annotations-upload">Import Annotations</label>
+                <input
+                  id="annotations-upload"
+                  type="file"
+                  accept="application/json"
+                  @change="importLocalAnnotations" 
+                />
+              </el-button>
+          </el-col>
+        </el-row>
+
         <el-row justify="center" align="middle">
           <el-col>
             <el-row :gutter="20" justify="center" align="middle">
@@ -147,35 +164,35 @@
             </el-row>
             <el-row :gutter="20" justify="center" align="middle" v-if="syncMode">
               <el-col :span="8">
-                <el-input-number v-model="zoom" :min="1.0" :controls="false" placeholder="Please input" label="zoom" />
+                <el-input-number v-model="zoom" :min="1.0" :controls="false" placeholder="Please input" aria-label="zoom" />
               </el-col>
               <el-col :span="8">
-                <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[0]" :min="-1.0" :max="1.0" :controls="false" placeholder="Please input" aria-label="x" />
               </el-col>
               <el-col :span="8">
-                <el-input-number v-model="pos[1]" :min="-1.0" :max="1.0" :controls="false" label="y" />
+                <el-input-number v-model="pos[1]" :min="-1.0" :max="1.0" :controls="false" aria-label="y" />
               </el-col>
             </el-row>
           </el-col>
         </el-row>
 
         <el-row :gutter="20" justify="center" align="middle">
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-switch v-model="render" active-text="Rendering" active-color="#8300bf" />
           </el-col>
-          <el-col span="auto">
+          <el-col :span="auto">
             <el-switch v-model="renderInfoOn" active-text="Renderer Info" active-color="#8300bf" />
           </el-col>
         </el-row>
 
         <template v-if="renderInfoOn && rendererInfo">
           <el-row :gutter="20" justify="center" align="middle">
-            <el-col v-for="(value, name) in rendererInfo.memory" :key="name" span="auto">
+            <el-col v-for="(value, name) in rendererInfo.memory" :key="name" :span="auto">
               {{ name }} : {{ value }}
             </el-col>
           </el-row>
           <el-row :gutter="20" justify="center" align="middle">
-            <el-col v-for="(value, name) in rendererInfo.render" :key="name" span="auto">
+            <el-col v-for="(value, name) in rendererInfo.render" :key="name" :span="auto">
               {{ name }} : {{ value }}
             </el-col>
           </el-row>
@@ -189,41 +206,41 @@
               </el-col>
             </el-row>
             <el-row :gutter="20" justify="center" align="middle">
-              <el-col span="auto">
+              <el-col :span="auto">
                 <el-button size="small" @click="featureTextureVolume(false)">
                   Texture volume
                 </el-button>
               </el-col>
-              <el-col span="auto">
+              <el-col :span="auto">
                 <el-button size="small" @click="featureTextureSlides(false)">
                   Texture slides
                 </el-button>
               </el-col>
-              <el-col span="auto">
+              <el-col :span="auto">
                 <el-button size="small" @click="featureTextureVolume(true)">
                   Body volume
                 </el-button>
               </el-col>
-              <el-col span="auto">
+              <el-col :span="auto">
                 <el-button size="small" @click="featureTextureSlides(true)">
                   Body slides
                 </el-button>
               </el-col>
-              <el-col span="auto">
+              <el-col :span="auto">
                 <el-button size="small" @click="featureArmSlides(true)">
                   Arm slides
                 </el-button>
               </el-col>
             </el-row>
             <el-row :gutter="20" justify="center" align="middle">
-              <el-col span="auto">
+              <el-col :span="auto">
                 <el-switch
                   v-model="onClickMarkers"
                   active-text="Markers On Selection"
                   active-color="#8300bf"
                 />
               </el-col>
-              <el-col span="auto">
+              <el-col :span="auto">
                 <el-switch
                   v-model="wireframe"
                   active-text="Wireframe"
@@ -297,13 +314,27 @@ import {
   ElInputNumber as InputNumber,
   ElPopover as Popover,
   ElRow as Row,
+  ElUpload as Upload,
   ElSwitch as Switch,
 } from "element-plus";
 import { useRoute, useRouter } from 'vue-router'
-import HelpModeDialog from './components/HelpModeDialog.vue';
+import { HelpModeDialog } from '@abi-software/map-utilities'
+import '@abi-software/map-utilities/dist/style.css'
 
 let texture_prefix = undefined;
 
+const writeTextFile = (filename, data) => {
+  let dataStr =
+    "data:text/json;charset=utf-8," +
+    encodeURIComponent(JSON.stringify(data));
+  let hrefElement = document.createElement("a");
+  document.body.append(hrefElement);
+  hrefElement.download = filename;
+  hrefElement.href = dataStr;
+  hrefElement.click();
+  hrefElement.remove();
+} 
+
 export default {
   name: "app",
   components: {
@@ -316,6 +347,7 @@ export default {
     Popover,
     Row,
     Switch,
+    Upload,
     ElIconFolderOpened,
     ElIconSetting,
     DropZone,
@@ -326,7 +358,7 @@ export default {
   data: function () {
     return {
       consoleOn: true,
-      createPoints: false,
+      createLinesWithNormal: true,
       url: undefined,
       input: undefined,
       displayUI: true,
@@ -341,7 +373,7 @@ export default {
       tumbleOn: false,
       tumbleDirection: [1.0, 0.0],
       showColourPicker: true,
-      markerCluster: true,
+      markerCluster: false,
       minimapSettings: {
         x_offset: 16,
         y_offset: 50,
@@ -349,22 +381,7 @@ export default {
         height: 128,
         align: "top-right",
       },
-      markerLabels: {
-        "body proper": 9,
-        "Spinal cord": 8,
-        "lung": 11,
-        "stomach": 12,
-        "urinary bladder": 11,
-        "Brainstem": 11,
-        "heart": 9,
-        "skin epidermis": 5,
-        "Diaphragm": 7,
-        "colon": 9,
-        "vagus nerve": 3,
-        "myenteric nerve plexus": 2,
-        "esophagus": 1,
-        "urethra": 3
-      },
+      markerLabels: { },
       render: true,
       region: "",
       viewURL: "",
@@ -388,7 +405,7 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      coordinatesClicked: [],
+      auto: NaN
     };
   },
   watch: {
@@ -398,6 +415,28 @@ export default {
     tumbleOn: function () {
       this.autoTumble();
     },
+    markerCluster: function(val) {
+      if (val) {
+        this.markerLabels = {
+          "body proper": 9,
+          "Spinal cord": 8,
+          "lung": 11,
+          "stomach": 12,
+          "urinary bladder": 11,
+          "Brainstem": 11,
+          "heart": 9,
+          "skin epidermis": 5,
+          "Diaphragm": 7,
+          "colon": 9,
+          "vagus nerve": 3,
+          "myenteric nerve plexus": 2,
+          "esophagus": 1,
+          "urethra": 3
+        };
+      } else {
+        this.markerLabels = { };
+      }
+    },
     "route.query": {
       handler: "parseQuery",
       deep: true,
@@ -424,15 +463,8 @@ export default {
   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();
+        const filename = 'export' + JSON.stringify(new Date()) + '.gltf';
+        writeTextFile(filename, data);
       });
     },
     exportGLB: function () {
@@ -447,14 +479,26 @@ export default {
         hrefElement.remove();
       });
     },
+    exportLocalAnnotations: function() {
+      const annotations = this.$refs.scaffold.getLocalAnnotations();
+      const filename = 'scaffoldAnnotations' + JSON.stringify(new Date()) + '.json';
+      writeTextFile(filename, annotations);
+    },
+    onReaderLoad: function(event) {
+      const annotationsList = JSON.parse(event.target.result);
+      this.$refs.scaffold.importLocalAnnotations(annotationsList);
+    },
+    importLocalAnnotations: function() {
+      const selectedFile = document.getElementById("annotations-upload").files[0];
+      const reader = new FileReader();
+      reader.onload = this.onReaderLoad;
+      reader.readAsText(selectedFile);
+    },
     objectAdded: function (zincObject) {
       if (this.consoleOn) {
         console.log(zincObject)
         console.log(this.$refs.scaffold.$module.scene.getBoundingBox())
       }
-      if (this._objects.length === 0) {
-        zincObject.setMarkerMode("on");
-      }
       if (zincObject.isGeometry) {
         zincObject._lod._material.wireframe = this.wireframe;
       }
@@ -599,40 +643,36 @@ export default {
       }
       this.scaffoldRef = this.$refs.scaffold;
     },
-    addLines: function (coord) {
-      if (this.coordinatesClicked.length === 1) {
+    addLinesWithNormal: function (coord, normal) {
+      if (coord && normal) {
+        const newCoords = [
+          coord[0] + normal.x * 1000,
+          coord[1] + normal.y * 1000,
+          coord[2] + normal.z * 1000,
+        ];
         const returned = this.$refs.scaffold.$module.scene.createLines(
-            "test",
-            "lines",
-            [this.coordinatesClicked[0], coord],
-            0x00ee22,
-          );
-          this.coordinatesClicked.length = 0;
-          if (this.consoleOn) console.log(returned);
-      } else {
-        this.coordinatesClicked.push(coord);
+          "test",
+          "lines",
+          [newCoords, coord],
+          0x00ee22,
+        );
+        returned.zincObject.isEditable = true;
+        if (this.consoleOn) console.log(returned);
       }
     },
     onSelected: function (data) {
       if (data && data.length > 0 && data[0].data.group) {
-        if (this.consoleOn) console.log(data[0]);
-        if (this.createPoints && data[0].extraData.worldCoords) {
-          const returned = this.$refs.scaffold.$module.scene.createPoints(
-            "test",
-            "points",
-            [data[0].extraData.worldCoords],
-            undefined,
-            0x0022ee,
-          );
+        if (this.consoleOn) console.log(data[0], data[0].extraData.intersected);
+        if (this.createLinesWithNormal && data[0].extraData.worldCoords &&
+          data[0].extraData.intersected?.face) {
+          this.addLinesWithNormal(data[0].extraData.worldCoords, data[0].extraData.intersected.face.normal)
         }
         delete this.route.query["viewURL"];
-        this.$refs.scaffold.showRegionTooltipWithAnnotations(data, false, true);
+        //this.$refs.scaffold.showRegionTooltipWithAnnotations(data, false, true);
         if (this.onClickMarkers) this.$refs.scaffold.setMarkerModeForObjectsWithName(data[0].data.group, "on");
       }
     },
-    changeMarkers: function () {
-      this.markerLabels = {"left atrium": 3, "epicardium": 4 , "stomach": 5};
-    },
+
     onNavigated: function (data) {
       this.zoom = data.zoom;
       this.pos[0] = data.target[0];
@@ -826,4 +866,9 @@ body {
 svg.map-icon {
   color: $app-primary-color;
 }
+
+input[type="file"] {
+  display: none;
+}
+
 </style>