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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.2.1-beta.0",
+  "version": "1.3.0-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -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"
@@ -114,9 +115,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 +136,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 +314,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 +323,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 +347,7 @@ export default {
     Popover,
     Row,
     Switch,
+    Upload,
     ElIconFolderOpened,
     ElIconSetting,
     DropZone,
@@ -327,7 +358,7 @@ export default {
   data: function () {
     return {
       consoleOn: true,
-      createPoints: false,
+      createLinesWithNormal: true,
       url: undefined,
       input: undefined,
       displayUI: true,
@@ -342,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,
@@ -350,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: "",
@@ -389,7 +405,6 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      coordinatesClicked: [],
       auto: NaN
     };
   },
@@ -400,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,
@@ -426,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 () {
@@ -449,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;
       }
@@ -601,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];
@@ -828,4 +866,9 @@ body {
 svg.map-icon {
   color: $app-primary-color;
 }
+
+input[type="file"] {
+  display: none;
+}
+
 </style>

package/src/components/LinesControls.vue

@@ -5,7 +5,7 @@
         <el-col :offset="0" :span="6">
           Width:
         </el-col>
-        <el-col :offset="0" :span="10">
+        <el-col :offset="0" :span="12">
           <el-slider
             v-model="width"
             class="my-slider"
@@ -16,7 +16,7 @@
             @input="modifyWidth"
           />
         </el-col>
-        <el-col :offset="0" :span="6">
+        <el-col :offset="0" :span="4">
           <el-input-number
             v-model="width"
             :step="1"
@@ -27,24 +27,66 @@
           />
         </el-col>
       </el-row>
-      <el-row v-if="createData.faceIndex > -1">
+      <template v-if="currentIndex > -1 && distance > 0">
         <el-col :offset="0" :span="4">
-          <el-button :icon="ElIconArrowLeft" @click="onMoveClick(-unit)"/>
-        </el-col>
-        <el-col :offset="3" :span="3">
-          Move
-        </el-col>
-        <el-col :offset="0" :span="7">
-          <el-input-number
-            v-model="unit"
-            :controls="false"
-            class="input-box number-input"
+          <el-button
+            size='small'
+            :disabled="currentIndex === 0"
+            :icon="ElIconArrowLeft"
+            @click="changeIndex(false)"
           />
         </el-col>
+        <el-col :offset="4" :span="9">
+          Editing Line {{ currentIndex + 1}}
+        </el-col>
         <el-col :offset="2" :span="2">
-          <el-button :icon="ElIconArrowRight" @click="onMoveClick(unit)"/>
+          <el-button
+            size='small'
+            :icon="ElIconArrowRight"
+            @click="changeIndex(true)"
+          />
         </el-col>
-      </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Move:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="adjust"
+              :step="0.01"
+              :min="-3"
+              :max="3"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            Length:
+          </el-col>
+          <el-col :offset="0" :span="10">
+            <el-slider
+              v-model="lengthScale"
+              :step="0.01"
+              :min="-1"
+              :max="1"
+              :show-tooltip="false"
+              @input="onLengthSliding()"
+              @change="reset()"
+            />
+          </el-col>
+          <el-col :offset="0" :span="6">
+            <el-input-number
+              v-model="newDistance"
+              :controls="false"
+              class="input-box number-input"
+              @change="onLengthInput"
+            />
+          </el-col>
+        </el-row>
+      </template>
     </el-main>
   </el-container>
 </template>
@@ -55,7 +97,8 @@
 // limited support to line width
 import { shallowRef } from 'vue';
 import {
-  moveLine,
+  getLineDistance,
+  moveAndExtendLine,
 } from "../scripts/Utilities.js";
 import {
   ElButton as Button,
@@ -63,15 +106,12 @@ import {
   ElContainer as Container,
   ElInputNumber as InputNumber,
   ElMain as Main,
-  ElSelect as Select,
   ElSlider as Slider,
-  ElOption as Option,
 } from "element-plus";
-import {
+import{
   ArrowLeft as ElIconArrowLeft,
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
-
 /**
  * A component to control the opacity of the target object.
  */
@@ -83,9 +123,7 @@ export default {
     Container,
     InputNumber,
     Main,
-    Select,
     Slider,
-    Option,
     ElIconArrowLeft,
     ElIconArrowRight,
   },
@@ -96,23 +134,85 @@ export default {
   },
   data: function () {
     return {
+      adjust: 0,
+      pAdjust: 0,
+      lengthScale: 0,
+      newDistance: 0, 
       width: 1,
-      unit: 0.1,
+      currentIndex: 0,
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
+      edited: false,
     };
   },
+  watch: {
+    "createData.faceIndex": {
+      handler: function (value) {
+        if (this._zincObject?.isLines2) {
+          this.currentIndex = value;
+          this.distance = getLineDistance(this._zincObject, this.currentIndex);
+        }
+      },
+      immediate: true,
+    },
+  },
   mounted: function () {
     this._zincObject = undefined;
   },
   methods: {
-    onMoveClick: function(unit) {
-      moveLine(this._zincObject, this.createData.faceIndex, unit);
+    changeIndex: function(increment) {
+      if (increment) {
+        const dist = getLineDistance(this._zincObject, this.currentIndex + 1);
+        if (dist > 0) {
+          this.currentIndex++;
+          this.reset();
+        }
+      } else {
+        this.currentIndex--;
+        this.reset();
+      }
+    },
+    onLengthInput: function() {
+      if (this.newDistance !== 0) {
+        this.distance = this.newDistance;
+        this.edited = moveAndExtendLine(
+          this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+      } else {
+        this.newDistance = this.distance;
+      }
+    },
+    onLengthSliding: function() {
+      this.newDistance = Math.pow(10, this.lengthScale) * this.distance;
+      this.edited = moveAndExtendLine(
+        this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+    },
+    onMoveSliding: function() {
+      const diff = (this.adjust - this.pAdjust) * this.distance;
+      this.edited =  moveAndExtendLine(
+        this._zincObject, this.currentIndex, diff, false) || this.edited;
+      this.pAdjust = this.adjust;
+    },
+    reset: function() {
+      this.adjust = 0;
+      this.pAdjust = 0;
+      this.lengthScale = 0;
+      this.distance = getLineDistance(this._zincObject, this.currentIndex);
+      this.newDistance = this.distance;
+      if (this.edited) {
+        this.$emit("primitivesUpdated", this._zincObject);
+        this.edited = false;
+      }
     },
     setObject: function (object) {
-      if (object.isLines) {
+      this.currentIndex = -1;
+      this.distance = 0;
+      if (object.isLines2) {
         this._zincObject = object;
         this.width = this._zincObject.getMorph().material.linewidth;
+        if (object.isEditable) {
+          this.currentIndex = 0;
+          this.distance = getLineDistance(object, this.currentIndex);
+        }
       } else {
         this._zincObject = undefined;
         this.linewidth = 10;

package/src/components/PointsControls.vue

@@ -49,13 +49,86 @@
           </el-select>
         </el-col>
       </el-row>
+      <template v-if="currentIndex > -1">
+        <el-row>
+          <el-col :offset="0" :span="4">
+            <el-button
+              size='small'
+              :disabled="currentIndex === 0"
+              :icon="ElIconArrowLeft"
+              @click="changeIndex(false)"
+            />
+          </el-col>
+          <el-col :offset="4" :span="9">
+            Editing Point {{ currentIndex + 1}}
+          </el-col>
+          <el-col :offset="2" :span="2">
+            <el-button
+              size='small'
+              :icon="ElIconArrowRight"
+              @click="changeIndex(true)"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            x:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="translation[0]"
+              :step="0.01"
+              :min="min[0]"
+              :max="max[0]"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            y:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="translation[1]"
+              :step="0.01"
+              :min="min[1]"
+              :max="max[1]"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="0" :span="6">
+            z:
+          </el-col>
+          <el-col :offset="0" :span="16">
+            <el-slider
+              v-model="translation[2]"
+              :step="0.01"
+              :min="min[2]"
+              :max="max[2]"
+              :show-tooltip="false"
+              @input="onMoveSliding()"
+              @change="reset()"
+            />
+          </el-col>
+        </el-row>
+      </template>
     </el-main>
   </el-container>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-
+import { shallowRef } from 'vue';
+import {
+  movePoint,
+} from "../scripts/Utilities.js";
 import {
   ElCol as Col,
   ElContainer as Container,
@@ -65,6 +138,10 @@ import {
   ElSlider as Slider,
   ElOption as Option,
 } from "element-plus";
+import{
+  ArrowLeft as ElIconArrowLeft,
+  ArrowRight as ElIconArrowRight,
+} from '@element-plus/icons-vue';
 
 /**
  * A component to control the opacity of the target object.
@@ -79,7 +156,10 @@ export default {
     Select,
     Slider,
     Option,
+    ElIconArrowLeft,
+    ElIconArrowRight,
   },
+  inject: ['boundingDims'],
   data: function () {
     return {
       attenuation: false,
@@ -94,17 +174,80 @@ export default {
           label: "off",
         },
       ],
+      min: [0, 0, 0],
+      max: [1, 1, 1],
+      translation: [0, 0, 0],
+      pTranslation: [0, 0, 0],
+      currentIndex: -1,
+      ElIconArrowLeft: shallowRef(ElIconArrowLeft),
+      ElIconArrowRight: shallowRef(ElIconArrowRight),
+      edited: false,
     };
   },
   mounted: function () {
     this._zincObject = undefined;
   },
+  watch: {
+    boundingDims: {
+      handler: function (value) {
+        const size = value.size;
+        this.min = [
+          -size[0] / 2,
+          -size[1] / 2,
+          -size[2] / 2,
+        ];
+        this.max = [
+          size[0] / 2,
+          size[1] / 2,
+          size[2] / 2,
+        ];
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   methods: {
+    changeIndex: function(increment) {
+      if (increment) {
+        if (this._zincObject.drawRange > this.currentIndex + 1) {
+          this.currentIndex++;
+          this.reset();
+        }
+      } else {
+        this.currentIndex--;
+        this.reset();
+      }
+    },
+    onMoveSliding: function() {
+      const diff = [
+        this.translation[0] - this.pTranslation[0],
+        this.translation[1] - this.pTranslation[1],
+        this.translation[2] - this.pTranslation[2],
+      ];
+      this.edited = movePoint(this._zincObject, this.currentIndex, diff) || this.edited;
+      for (let i = 0; i < 3; i++) {
+        this.pTranslation[i] = this.translation[i];
+      }
+    },
+    reset: function() {
+      this.translation = [0, 0, 0];
+      this.pTranslation = [0, 0, 0];
+      if (this.edited) {
+        this.$emit("primitivesUpdated", this._zincObject);
+        this.edited = false;
+      }
+    },
     setObject: function (object) {
+      this.currentIndex = -1;
       if (object.isPointset) {
         this._zincObject = object;
         this.size = this._zincObject.morph.material.size;
-        this.attenuation = this._zincObject.morph.material.sizeAttenuation
+        this.attenuation = this._zincObject.morph.material.sizeAttenuation;
+        if (object.isEditable) {
+          if (this._zincObject.drawRange > 0) {
+            this.currentIndex = 0;
+          }
+        }
       } else {
         this._zincObject = undefined;
         this.size = 10;