Merge pull request #136 from alan-wu/create-labels

Add local annotations capability
ABI-Software · Jul 10, 2024 · b920a22 · b920a22
2 parents dc9b217 + 3b425c6
commit b920a22
Show file tree

Hide file tree

Showing 15 changed files with 1,409 additions and 1,238 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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/map-utilities": "^0.0.0-beta.4",
+    "@abi-software/map-utilities": "^1.0.0",
     "@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.9.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

diff --git a/src/App.vue b/src/App.vue
@@ -27,10 +27,12 @@
         :view-u-r-l="viewURL"
         :format="format"
         :marker-labels="markerLabels"
+        :enableLocalAnnotations="false"
         @open-map="openMap"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
         @scaffold-navigated="onNavigated"
+        @user-primitives-updated="userPrimitivesUpdated"
         @timeChanged="updateCurrentTime"
         @zinc-object-added="objectAdded"
         @vue:mounted="viewerMounted"
@@ -114,9 +116,6 @@
           <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">
@@ -138,6 +137,25 @@
           </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">
@@ -297,6 +315,7 @@ 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'
@@ -305,6 +324,18 @@ 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: {
@@ -317,6 +348,7 @@ export default {
     Popover,
     Row,
     Switch,
+    Upload,
     ElIconFolderOpened,
     ElIconSetting,
     DropZone,
@@ -327,7 +359,7 @@ export default {
   data: function () {
     return {
       consoleOn: true,
-      createPoints: false,
+      createLinesWithNormal: false,
       url: undefined,
       input: undefined,
       displayUI: true,
@@ -342,30 +374,15 @@ export default {
       tumbleOn: false,
       tumbleDirection: [1.0, 0.0],
       showColourPicker: true,
-      markerCluster: true,
+      markerCluster: false,
       minimapSettings: {
         x_offset: 16,
         y_offset: 50,
         width: 128,
         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: "",
@@ -389,7 +406,6 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      coordinatesClicked: [],
       auto: NaN
     };
   },
@@ -400,6 +416,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,
@@ -426,15 +464,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 () {
@@ -449,14 +480,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;
       }
@@ -530,6 +573,9 @@ export default {
     viewModelClicked: function (location) {
       this.input = location;
     },
+    userPrimitivesUpdated: function (event) {
+      console.log(event);
+    },
     screenCapture: function () {
       this.$refs.scaffold.captureScreenshot("capture.png");
     },
@@ -601,40 +647,37 @@ 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");
       }
+      if (this.consoleOn) console.log(data);
     },
-    changeMarkers: function () {
-      this.markerLabels = {"left atrium": 3, "epicardium": 4 , "stomach": 5};
-    },
+
     onNavigated: function (data) {
       this.zoom = data.zoom;
       this.pos[0] = data.target[0];
@@ -828,4 +871,9 @@ body {
 svg.map-icon {
   color: $app-primary-color;
 }
+
+input[type="file"] {
+  display: none;
+}
+
 </style>