From 2f9452416043aa167c74d2e8ba9696d5f4df43fb Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 19 Jun 2024 11:50:44 +1200
Subject: [PATCH 01/24] Add local annotation mode and delete button.

---
 src/App.vue                        |  1 +
 src/components/ScaffoldTooltip.vue | 50 ++++++++++++++++--
 src/components/ScaffoldVuer.vue    | 84 ++++++++++++++++++------------
 src/scripts/Utilities.js           | 44 ++++++++++++++--
 4 files changed, 139 insertions(+), 40 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 485bad5..1b4786a 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/components/ScaffoldTooltip.vue b/src/components/ScaffoldTooltip.vue
index 6b6fdd6..18b6f10 100644
--- a/src/components/ScaffoldTooltip.vue
+++ b/src/components/ScaffoldTooltip.vue
@@ -19,7 +19,7 @@
           :createData="createData"
           @confirm-create="$emit('confirm-create', $event)"
           @cancel-create="$emit('cancel-create')"
-        /> 
+        />
         <Tooltip
           class="p-tooltip"
           v-show="annotationDisplay && !createData.toBeConfirmed"
@@ -27,14 +27,37 @@
           :annotationDisplay="true"
           :annotationEntry="annotationEntry"
         />
+        <div v-if="createData.toBeDeleted" class="delete-container">
+          <el-row>
+            <el-col :span="12">Delete this feature?</el-col>
+            <el-col :span="2">
+              <el-button
+                class="delete-button"
+                :icon="ElIconDelete"
+                @click="$emit('confirm-delete')"
+                >
+                  Delete
+              </el-button>
+            </el-col>
+          </el-row>
+        </div>
       </template>
     </el-popover>
   </div>
 </template>
 
 <script>
+import { shallowRef } from 'vue';
 /* eslint-disable no-alert, no-console */
-import { ElPopover as Popover } from "element-plus";
+import {
+  ElCol as Col,
+  ElIcon as Icon,
+  ElPopover as Popover,
+  ElRow as Row,
+} from "element-plus";
+import {
+  Delete as ElIconDelete,
+} from '@element-plus/icons-vue'
 import CreateTooltiipContent from "./CreateTooltipContent.vue";
 import { mapState } from 'pinia';
 import { useMainStore } from "@/store/index";
@@ -47,8 +70,12 @@ import '@abi-software/map-utilities/dist/style.css'
 export default {
   name: "ScaffoldTooltip",
   components: {
+    Col,
     CreateTooltiipContent,
+    ElIconDelete,
+    Icon,
     Popover,
+    Row,
     Tooltip,
   },
   props: {
@@ -96,7 +123,8 @@ export default {
   data: function () {
     return {
       display: false,
-      annotationEntry: { }
+      annotationEntry: { },
+      ElIconDelete: shallowRef(ElIconDelete),
     };
   },
   computed: {
@@ -206,5 +234,21 @@ export default {
       display:none;
     }
   }
+
+  .delete-container {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    .delete-button {
+      pointer-events: auto;
+      cursor: pointer;
+      margin-left:8px;
+      height: 24px !important;
+      color: $app-primary-color;
+      &:hover {
+        background-color: var(--el-color-primary-light-9);
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index ae9698d..87af6d8 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -14,9 +14,10 @@
       :visible="tData.visible"
       :x="tData.x"
       :y="tData.y"
-      :annotationDisplay="viewingMode === 'Annotation' && tData.active === true && activeDrawMode === 'Edit'"
+      :annotationDisplay="annotationDisplay"
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
+      @confirm-delete="confirmDelete($event)"
     />
     <div
       id="organsDisplayArea"
@@ -27,7 +28,7 @@
     />
     <div v-show="displayUI && !isTransitioning">
       <DrawToolbar
-        v-if="viewingMode === 'Annotation' && userInformation"
+        v-if="viewingMode === 'Annotation' && (userInformation || enableLocalAnnotations)"
         :toolbarOptions="toolbarOptions"
         :activeDrawTool="activeDrawTool"
         :activeDrawMode="activeDrawMode"
@@ -388,8 +389,10 @@ import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 import { DrawToolbar } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 import {
+  addLabelToObject,
   addUserAnnotationWithFeature,
   annotationFeaturesToPrimitives,
+  getDeletableObjects,
   getDrawnAnnotations,
   getEditableLines,
   getObjectsFromAnnotations,
@@ -664,6 +667,13 @@ export default {
       type: String,
       default: "https://mapcore-demo.org/current/flatmap/v3/"
     },
+    /**
+     * Enable local annotations
+     */
+     enableLocalAnnotations: {
+      type: Boolean,
+      default: false
+    },
   },
   provide() {
     return {
@@ -684,6 +694,7 @@ export default {
         y: 0,
         editingIndex: -1,
         faceIndex: -1,
+        toBeDeleted: false,
       },
       currentTime: 0.0,
       timeVarying: false,
@@ -707,6 +718,7 @@ export default {
         { value: false, refs: 'toolbarPopover', ref: 'editPopover' }, // 9
         { value: false, refs: 'toolbarPopover', ref: 'pointPopover' }, // 10
         { value: false, refs: 'toolbarPopover', ref: 'lineStringPopover' }, // 11
+        { value: false, refs: 'toolbarPopover', ref: 'deletePopover' }, // 11
       ],
       inHelp: false,
       helpModeActiveIndex: this.helpModeInitialIndex,
@@ -768,12 +780,14 @@ export default {
       backgroundIconRef: undefined,
       userInformation: undefined,
       toolbarOptions: [
+        "Delete",
         "Edit",
         "Point",
         "LineString",
       ],
       activeDrawTool: undefined,
       activeDrawMode: undefined,
+      createdList: markRaw([])
     };
   },
   watch: {
@@ -899,6 +913,10 @@ export default {
   },
   computed: {
     ...mapState(useMainStore,  ['userToken']),
+    annotationDisplay: function() {
+      return this.viewingMode === 'Annotation' && this.tData.active === true &&
+        (this.activeDrawMode === 'Edit' || this.activeDrawMode === 'Delete');
+    }
   },
   methods: {
     /**
@@ -1008,6 +1026,7 @@ export default {
             undefined,
             0x0022ee,
           );
+          addLabelToObject(object.zincObject, this.createData.points[0], payload.group);
         } else if (payload.shape === "LineString") {
           object = this.$module.scene.createLines(
             payload.region,
@@ -1021,13 +1040,19 @@ export default {
               payload.editingIndex);
             const region = this._editingZincObject.region.getFullPath() + "/";
             const group = this._editingZincObject.groupName;
-            addUserAnnotationWithFeature(this.annotator, this.userToken, this._editingZincObject,
+            const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, this._editingZincObject,
               region, group, this.url, "Position Updated");
           }
         }
         if (object) {
-          addUserAnnotationWithFeature(this.annotator, this.userToken, object.zincObject,
+          const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, object.zincObject,
             payload.region, payload.group, this.url, "Create");
+          //Store the object in a local list
+          if (this.enableLocalAnnotations) {
+            annotation.group = payload.group;
+            annotation.region = payload.region;
+            this.createdList.push(annotation);
+          }
           object.zincObject.isEditable = true;
           this.tData.region = payload.region;
           this.tData.label = payload.group;
@@ -1043,6 +1068,7 @@ export default {
       this.createData.editingIndex = -1;
       this.createData.faceIndex = -1;
       this.tData.visible = false;
+      this.createData.toBeDeleted = false;
       if (this._tempLine) {
         this.$module.scene.removeTemporaryPrimitive(this._tempLine);
         this._tempLine = undefined;
@@ -1144,12 +1170,13 @@ export default {
      * @vuese
      */
     toggleDrawing: function (type, icon) {
+      this.createData.toBeDeleted = false;
       if (type === 'mode') {
-        this.activeDrawMode = icon
+        this.activeDrawMode = icon;
         this.createData.shape = '';
         this.$module.selectObjectOnPick = true;
       } else if (type === 'tool') {
-        this.activeDrawTool = icon
+        this.activeDrawTool = icon;
         this.createData.shape = this.activeDrawTool;
         this.$module.selectObjectOnPick = false;
       }
@@ -1281,7 +1308,8 @@ export default {
       }
     },
     activateAnnotationMode: function(names, event) {
-      if (this.userInformation) {
+      if (this.userInformation || this.enableLocalAnnotations) {
+        this.createData.toBeDeleted = false;
         if ((this.createData.shape !== "") || (this.createData.editingIndex > -1)) {
           // Create new shape bsaed on current settings
           if (names.length > 0) {
@@ -1292,11 +1320,19 @@ export default {
             }
           }
         } else {
-          //Make sure the tooltip is displayed with annotation mode
-          const editing = getEditableLines(event);
-          if (editing) {
-            this.activateEditingMode(editing.zincObject, editing.faceIndex,
-              editing.vertexIndex, editing.point);
+          //Make sure the tooltip is displayed with annotaion mode
+          if (this.activeDrawMode === "Edit") {
+            const editing = getEditableLines(event);
+            if (editing) {
+              this.activateEditingMode(editing.zincObject, editing.faceIndex,
+                editing.vertexIndex, editing.point);
+            }
+          } else if (this.activeDrawMode === "Delete") {
+            const zincObject = getDeletableObjects(event);
+            if (zincObject) {
+              this.createData.toBeDeleted = true;
+              this._editingZincObject = zincObject;
+            }
           }
           this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
         }
@@ -1746,6 +1782,10 @@ export default {
               }
             }
           });
+        } else if (this.viewingMode === "Exploration") {
+          this.activeDrawTool = undefined;
+          this.activeDrawMode = undefined;
+          this.createData.shape = "";
         }
         if ((this.viewingMode === "Exploration") ||
           (this.viewingMode === "Annotation") &&
@@ -2267,17 +2307,6 @@ export default {
   padding-left: 8px;
 }
 
-.bottom-draw-control {
-  background-color: var(--el-color-primary-light-9);
-  padding: 4px 4px 2px 4px;
-  border-style: solid;
-  border-color: var(--el-color-primary-light-5);
-  border-radius: 1rem;
-  position: absolute;
-  right: calc(50vw - 100px);;
-  bottom: 16px;
-}
-
 :deep(.non-selectable) {
   user-select: none;
 }
@@ -2391,15 +2420,6 @@ export default {
     border: none;
     outline: none;
   }
-
-  &.shape {
-    margin-left: 4px;
-    margin-right: 4px;
-    color: var(--el-color-primary-light-5)!important;
-    &.active {
-      color: var(--el-color-primary)!important;
-    }
-  }
 }
 
 .bottom-right-control {
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index 6076e8d..15bee42 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -1,4 +1,4 @@
-import { THREE } from 'zincjs';
+import { Label, THREE } from 'zincjs';
 
 export const createListFromPrimitives = (primitives, list) => {
   if (primitives) {
@@ -47,6 +47,17 @@ export const getEditableLines = (event) => {
   return undefined;
 }
 
+export const getDeletableObjects = (event) => {
+  const zincObjects = event.zincObjects;
+  if (zincObjects.length > 0 && zincObjects[0]) {
+    const zincObject = zincObjects[0];
+    if (zincObject.isEditable) {
+      return zincObject;
+    }
+  }
+  return undefined;
+}
+
 export const moveLine = (zincObject, faceIndex, unit) => {
   if (zincObject && unit !== 0.0) {
     if (zincObject.isEditable && zincObject.isLines2) {
@@ -276,9 +287,9 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
  * Add/Update drawn annotations to the server.
  */
 export const addUserAnnotationWithFeature = (service, userToken, zincObject, region, group, scaffoldUrl, action) => {
-  if (service && service.currentUser) {
-    const annotation = createNewAnnotationsWithFeatures(zincObject, region, group, scaffoldUrl, action);
-    if (annotation) {
+  const annotation = createNewAnnotationsWithFeatures(zincObject, region, group, scaffoldUrl, action);
+  if (annotation) {
+    if (service && service.currentUser) {
       annotation.creator = {...service.currentUser};
       if (!annotation.creator.orcid) annotation.creator.orcid = '0000-0000-0000-0000';
       service.addAnnotation(userToken, annotation)
@@ -291,6 +302,7 @@ export const addUserAnnotationWithFeature = (service, userToken, zincObject, reg
         console.log('There is a problem with the submission, please try again later');
       })
     }
+    return annotation;
   }
 }
 
@@ -322,6 +334,7 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
           undefined,
           0x0022ee,
         );
+        addLabelToObject(object.zincObject, geometry.coordinates, group);
       } else if (geometry.type === "MultiLineString") {
         object = scene.createLines(
           region,
@@ -333,4 +346,25 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
       if (object) object.zincObject.isEditable = true;
     });
   }
-}
\ No newline at end of file
+}
+
+/*
+ * Add a label at the specified local and put it 
+ * into the object's group
+ */
+const addLabelToObject = (zincObject, coords, groupName) => {
+  if (groupName) {
+    const colour = new THREE.Color(0x222222);
+    const label = new Label(groupName, colour);
+    label.setPosition(coords[0], coords[1], coords[2]);
+    const sprite  = label.getSprite();
+    sprite.material.sizeAttenuation = false;
+    sprite.material.alphaTest = 0.5;
+    sprite.material.transparent = true;
+    sprite.material.depthWrite = false;
+    sprite.material.depthTest = false;
+    zincObject.group.add(sprite);
+  }
+}
+
+export { addLabelToObject }

From 6bcbcf67ed8dc3cac6263b7fa45061644bb2ad96 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 19 Jun 2024 21:47:13 +1200
Subject: [PATCH 02/24] Implement codes to safely remove zinc objects from
 region.

---
 src/components/ScaffoldTreeControls.vue | 19 +++++++++++
 src/components/ScaffoldVuer.vue         | 43 +++++++++++++++++++++++++
 src/scripts/OrgansRenderer.js           | 28 ++++++++++++++--
 src/scripts/Search.js                   | 16 +++++++++
 src/scripts/Utilities.js                |  7 +++-
 5 files changed, 110 insertions(+), 3 deletions(-)

diff --git a/src/components/ScaffoldTreeControls.vue b/src/components/ScaffoldTreeControls.vue
index 98d5017..8588aca 100644
--- a/src/components/ScaffoldTreeControls.vue
+++ b/src/components/ScaffoldTreeControls.vue
@@ -175,6 +175,24 @@ export default {
         }
       }
     },
+    zincObjectRemoved: function(zincObject) {
+      console.log(zincObject)
+      const group = zincObject.groupName;
+      const objects = zincObject.region.findObjectsWithGroupName(group, false);
+      if (objects.length === 0) {
+        const paths = zincObject.region.getFullSeparatedPath();
+        const regionData = this.findOrCreateRegion(this.treeData[0], paths, "");
+        if (regionData.children) {
+          for (let i = 0; i < regionData.children.length; i++) {
+            if (regionData.children[i].label === group) {
+              regionData.children.splice(i, 1);
+              this.__nodeNumbers--;
+              return;
+            }
+          }
+        }
+      }
+    },
     checkChanged: function (node, data) {
       const isRegion = node.isRegion;
       const isPrimitives = node.isPrimitives;
@@ -325,6 +343,7 @@ export default {
         this.zincObjectAdded(zincObject);
       });
       this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
+      this.$module.addOrganPartRemovedCallback(this.zincObjectRemoved);
     },
     setColourField: function (treeData, nodeData = undefined) {
       treeData
diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 87af6d8..f2f74a7 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -894,6 +894,7 @@ export default {
     eventNotifier.subscribe(this, this.eventNotifierCallback);
     this.$module.addNotifier(eventNotifier);
     this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
+    this.$module.addOrganPartRemovedCallback(this.zincObjectRemoved);
     this.$module.initialiseRenderer(this.$refs.display);
     this.toggleRendering(this.render);
     this.ro = new ResizeObserver(this.adjustLayout).observe(
@@ -945,6 +946,30 @@ export default {
       //@arg The object added to the sceene
       this.$emit("zinc-object-added", zincObject);
     },
+    /**
+     * Internal only.
+     * This is called when a zinc object is removed.
+     */
+     zincObjectRemoved: function (zincObject) {
+      if (this.$module.scene) {
+        // zincObjectAdded will be alled in sequential callback
+        const regionPath = zincObject.region.getFullPath() + "/";
+        const group = zincObject.groupName;
+        const objects = zincObject.region.findObjectsWithGroupName(group, false);
+        //Remove relevant objects from the rest of the app.
+        if (objects.length === 0) {
+          this.$_searchIndex.removeZincObject(zincObject, zincObject.uuid);
+          for (let i = 0; i < this.createdList.length; i++) {
+            const annotation = this.createdList[i];
+            if (annotation.region === regionPath &&
+              annotation.group === group) {
+              this.createdList.splice(i, 1);
+              return;
+            }
+          }
+        }
+      }
+    },
     /**
      * Internal only.
      * Add regions to search index.
@@ -1078,6 +1103,24 @@ export default {
         this._tempPoint = undefined;
       }
     },
+    /**
+     * @vuese
+     * Confirm delete of user created primitive.
+     * This is only called from callback.
+     */
+     confirmDelete: function() {
+      if (this._editingZincObject?.isEditable) {
+        const regionPath = this._editingZincObject.region.getFullPath() + "/";
+        const group = this._editingZincObject.groupName;
+        const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken,
+          this._editingZincObject, regionPath, group, this.url, "Deleted");
+        if (annotation) {
+          const childRegion = this.$module.scene.getRootRegion().
+            findChildFromPath(regionPath);
+          childRegion.removeZincObject(this._editingZincObject);
+        }
+      }
+    },  
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
         if (val) {
diff --git a/src/scripts/OrgansRenderer.js b/src/scripts/OrgansRenderer.js
index 56abfd2..8e9b1da 100644
--- a/src/scripts/OrgansRenderer.js
+++ b/src/scripts/OrgansRenderer.js
@@ -38,6 +38,7 @@ const OrgansSceneData = function() {
 	const timeChangedCallbacks = new Array();
 	const sceneChangedCallbacks = new Array();
   const organPartAddedCallbacks = new Array();
+	const organPartRemovedCallbacks = new Array();
   let finishDownloadCallback = undefined;
 	const modelsLoader = ModelsLoaderIn;
   this.NDCCameraControl = undefined;
@@ -172,6 +173,11 @@ const OrgansSceneData = function() {
       organPartAddedCallbacks.push(callback);
   }
 
+	this.addOrganPartRemovedCallback = function(callback) {
+    if (typeof(callback === "function"))
+      organPartRemovedCallbacks.push(callback);
+  }
+
   this.setFinishDownloadCallback = function(callback) {
     if (typeof(callback === "function"))
       finishDownloadCallback = callback;
@@ -393,6 +399,12 @@ const OrgansSceneData = function() {
 		zincObject.userData["annotation"] = annotation;
 	}
 
+	const removeOrganPart = function(systemName, partName, useDefautColour, zincObject) {
+    for (let i = 0; i < organPartRemovedCallbacks.length;i++) {
+      organPartRemovedCallbacks[i](zincObject);
+    }
+	}
+
 	  /**
 		 * New organs geometry has been added to the scene, add UIs and make
 		 * sure the viewport is correct.
@@ -402,6 +414,16 @@ const OrgansSceneData = function() {
 	    	addOrganPart(systemName, partName, useDefautColour, zincObject);
 	    }
 	  }
+
+	  /**
+		 * Organs geometry has been removed to the scene.
+		 */
+	  const _removeOrganPartCallback = function(systemName, partName, useDefautColour) {
+	    return function(zincObject) {
+				console.log("removed")
+	    	removeOrganPart(systemName, partName, useDefautColour, zincObject);
+	    }
+	  }
 	  
 	  const downloadCompletedCallback = function() {
 		  return function() {
@@ -511,7 +533,8 @@ const OrgansSceneData = function() {
             }
 			      _this.sceneData.metaURL = url;
 						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
-			      organScene.loadMetadataURL(url, undefined, downloadCompletedCallback());	      
+			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
+						organScene.loadMetadataURL(url, undefined, downloadCompletedCallback());	      
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();
@@ -541,7 +564,8 @@ const OrgansSceneData = function() {
   	    	  _this.sceneData.viewURL = undefined;
 			      _this.sceneData.metaURL = url;
 						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
-			      organScene.loadGLTF(url, undefined, downloadCompletedCallback());
+			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
+						organScene.loadGLTF(url, undefined, downloadCompletedCallback());
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();
diff --git a/src/scripts/Search.js b/src/scripts/Search.js
index 292422f..93ab68a 100644
--- a/src/scripts/Search.js
+++ b/src/scripts/Search.js
@@ -76,6 +76,22 @@ export class SearchIndex
         this.zincObjects.push(zincObject);
     }
 
+    removeZincObject(zincObject, id)
+    //=======================
+    {
+        const path = zincObject.getRegion().getFullPath();
+        const fullPath = path ? `${path}/${zincObject.groupName}` : zincObject.groupName;
+        const item = { path: fullPath, name: zincObject.groupName, id };
+        this._searchEngine.remove(item, {fields: ['path', 'name']});
+        for (let i = 0; i < this.zincObjects.length; i++) {
+          if (id === this.zincObjects[i].uuid) {
+            this.zincObjects.splice(i, 1);
+            return;
+          }
+        }
+        
+    }
+
     addRegion(region, id)
     //=======================
     {
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index 15bee42..984d539 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -279,6 +279,10 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
         }
       },
     }
+    if (comment === "Deleted") {
+      userAnnotation.feature = undefined;
+    }
+
     return userAnnotation;
   }
 }
@@ -286,7 +290,8 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
 /*
  * Add/Update drawn annotations to the server.
  */
-export const addUserAnnotationWithFeature = (service, userToken, zincObject, region, group, scaffoldUrl, action) => {
+export const addUserAnnotationWithFeature = (service, userToken, zincObject,
+  region, group, scaffoldUrl, action) => {
   const annotation = createNewAnnotationsWithFeatures(zincObject, region, group, scaffoldUrl, action);
   if (annotation) {
     if (service && service.currentUser) {

From ac8f5dc23d6709836197f4cb3dcffe42569dad29 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 20 Jun 2024 11:31:15 +1200
Subject: [PATCH 03/24] Add the ability to import and export local annotations.

---
 src/components/ScaffoldVuer.vue | 71 ++++++++++++++++++++++++++-------
 src/scripts/Utilities.js        |  4 +-
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index f2f74a7..a562810 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -787,7 +787,7 @@ export default {
       ],
       activeDrawTool: undefined,
       activeDrawMode: undefined,
-      createdList: markRaw([])
+      localAnnotationsList: markRaw([])
     };
   },
   watch: {
@@ -946,27 +946,35 @@ export default {
       //@arg The object added to the sceene
       this.$emit("zinc-object-added", zincObject);
     },
+    /**
+     * Internal only.
+     * Remove an entry matching region and group from
+     * local annotation list.
+     */
+    removeFromLocalAnnotationList: function(regionPath, groupName) {
+      for (let i = 0; i < this.localAnnotationsList.length; i++) {
+        const annotation = this.localAnnotationsList[i];
+        if (annotation.region === regionPath &&
+          annotation.group === groupName) {
+          this.localAnnotationsList.splice(i, 1);
+          return;
+        }
+      }
+    },
     /**
      * Internal only.
      * This is called when a zinc object is removed.
      */
-     zincObjectRemoved: function (zincObject) {
+    zincObjectRemoved: function (zincObject) {
       if (this.$module.scene) {
         // zincObjectAdded will be alled in sequential callback
         const regionPath = zincObject.region.getFullPath() + "/";
-        const group = zincObject.groupName;
-        const objects = zincObject.region.findObjectsWithGroupName(group, false);
+        const groupName = zincObject.groupName;
+        const objects = zincObject.region.findObjectsWithGroupName(groupName, false);
         //Remove relevant objects from the rest of the app.
         if (objects.length === 0) {
           this.$_searchIndex.removeZincObject(zincObject, zincObject.uuid);
-          for (let i = 0; i < this.createdList.length; i++) {
-            const annotation = this.createdList[i];
-            if (annotation.region === regionPath &&
-              annotation.group === group) {
-              this.createdList.splice(i, 1);
-              return;
-            }
-          }
+          this.removeFromLocalAnnotationList(regionPath, groupName);
         }
       }
     },
@@ -1074,9 +1082,11 @@ export default {
             payload.region, payload.group, this.url, "Create");
           //Store the object in a local list
           if (this.enableLocalAnnotations) {
+            //Remove previous entry if there is matching region and group
+            this.removeFromLocalAnnotationList(payload.region, payload.group);
             annotation.group = payload.group;
             annotation.region = payload.region;
-            this.createdList.push(annotation);
+            this.localAnnotationsList.push(annotation);
           }
           object.zincObject.isEditable = true;
           this.tData.region = payload.region;
@@ -1086,6 +1096,10 @@ export default {
       }
       this.cancelCreate();
     },
+    /**
+     * Internal only.
+     * Cancel create workflows. Reset all relevant UIs and data.
+     */
     cancelCreate: function() {
       this.createData.points.length = 0;
       this.createData.toBeConfirmed = false;
@@ -1104,7 +1118,7 @@ export default {
       }
     },
     /**
-     * @vuese
+     * Internal only.
      * Confirm delete of user created primitive.
      * This is only called from callback.
      */
@@ -1120,6 +1134,7 @@ export default {
           childRegion.removeZincObject(this._editingZincObject);
         }
       }
+      this.cancelCreate();
     },  
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
@@ -2000,6 +2015,7 @@ export default {
             });
           }
         }
+        this.localAnnotationsList.length = 0;
         this.updateSettingsfromScene();
         this.$module.updateTime(0.01);
         this.$module.updateTime(0);
@@ -2078,6 +2094,33 @@ export default {
     exportGLTF: function (binary) {
       return this.$module.scene.exportGLTF(binary);
     },
+    /**
+     * Return a copy of the local annotations list.
+     * This list is used for storing user created annotation
+     * when enableLocalAnnotations is set to true.
+     *
+     * @vuese
+     */
+     getLocalAnnotations: function () {
+      return [...this.localAnnotationsList];
+    },
+    /**
+     * Import local annotations. The annotations will only
+     * be imported when enableLocalAnnotations is set to
+     * true;
+     *
+     * @vuese
+     */
+     importLocalAnnotations: function (annotationsList) {
+      if (this.enableLocalAnnotations) {
+        const featuresList = annotationsList.map((annotation) => annotation.feature);
+        annotationFeaturesToPrimitives(this.$module.scene, featuresList);
+        //Make a local non-reactive copy.
+        annotationsList.forEach((annotation) => {
+          this.localAnnotationsList.push({...annotation});
+        });
+      }
+    },
     /**
      * Function used for reading in new scaffold metadata and a custom
      * viewport. This function will ignore the state prop and
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index 984d539..9335b35 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -339,7 +339,7 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
           undefined,
           0x0022ee,
         );
-        addLabelToObject(object.zincObject, geometry.coordinates, group);
+        addLabelToObject(object.zincObject, geometry.coordinates[0], group);
       } else if (geometry.type === "MultiLineString") {
         object = scene.createLines(
           region,
@@ -359,7 +359,7 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
  */
 const addLabelToObject = (zincObject, coords, groupName) => {
   if (groupName) {
-    const colour = new THREE.Color(0x222222);
+    const colour = new THREE.Color(0x0022ee);
     const label = new Label(groupName, colour);
     label.setPosition(coords[0], coords[1], coords[2]);
     const sprite  = label.getSprite();

From 7d78b7fa2c1c5a767b4cfd2a8ecc673656ab7c50 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 20 Jun 2024 14:09:51 +1200
Subject: [PATCH 04/24] Update demo to include local import and export of
 annotations.

---
 package-lock.json        |  8 ++---
 package.json             |  2 +-
 src/App.vue              | 64 ++++++++++++++++++++++++++++++++++------
 src/components.d.ts      |  1 +
 src/scripts/Utilities.js |  4 ++-
 5 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 212837d..ce5609f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "vue": "^3.4.15",
         "vue-router": "^4.2.5",
         "vue3-component-svg-sprite": "^0.0.1",
-        "zincjs": "^1.6.0"
+        "zincjs": "^1.8.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.6.2",
@@ -8545,9 +8545,9 @@
       }
     },
     "node_modules/zincjs": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.6.0.tgz",
-      "integrity": "sha512-DivECiavVIAGe2DETbyD7+3urvhDDN0Lc06G942rJZtU+KO2mY/st5ygXrRf/9CD2YebZLwBmOlsC1ijd2FewA==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.0.tgz",
+      "integrity": "sha512-MMH3s3jdDsVVrW4YDah0x5fWc5V/4a2JMKOTTTavuwNE8RvSFVDgM4YBul/lseq4hAV2ZkWkHMPwi4N2qM+Nbg==",
       "dependencies": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",
diff --git a/package.json b/package.json
index 886d0a8..dd245a9 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.6.0"
+    "zincjs": "^1.8.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
diff --git a/src/App.vue b/src/App.vue
index 1b4786a..15aed15 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -139,6 +139,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">
@@ -298,6 +317,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'
@@ -306,6 +326,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: {
@@ -318,6 +350,7 @@ export default {
     Popover,
     Row,
     Switch,
+    Upload,
     ElIconFolderOpened,
     ElIconSetting,
     DropZone,
@@ -462,15 +495,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 () {
@@ -485,6 +511,21 @@ 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)
@@ -868,4 +909,9 @@ body {
 svg.map-icon {
   color: $app-primary-color;
 }
+
+input[type="file"] {
+  display: none;
+}
+
 </style>
diff --git a/src/components.d.ts b/src/components.d.ts
index 0ea73c3..e22d482 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -35,6 +35,7 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     LinesControls: typeof import('./components/LinesControls.vue')['default']
     OpacityControls: typeof import('./components/OpacityControls.vue')['default']
     PointsControls: typeof import('./components/PointsControls.vue')['default']
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index 9335b35..2bf8968 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -339,7 +339,9 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
           undefined,
           0x0022ee,
         );
-        addLabelToObject(object.zincObject, geometry.coordinates[0], group);
+        geometry.coordinates.forEach((coordinates) => {
+          addLabelToObject(object.zincObject, coordinates, group);
+        });
       } else if (geometry.type === "MultiLineString") {
         object = scene.createLines(
           region,

From 2b3a1df4f6ea698fb17180d6a48428989b31a2a9 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 20 Jun 2024 17:28:20 +1200
Subject: [PATCH 05/24] Improve useabilityof picking and creation tool.

---
 src/components/ScaffoldVuer.vue | 178 +++++++++++++++++---------------
 1 file changed, 94 insertions(+), 84 deletions(-)

diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index a562810..0cee65b 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -1324,19 +1324,28 @@ export default {
       }
     },
     drawPoint: function(coords, data) {
-      this.createData.points.length = 0;
-      this.createData.points.push(coords);
-      this.showRegionTooltipWithAnnotations(data, true, true);
-      this.createData.toBeConfirmed = true;
-    },
-    drawLine: function(coords, data) {
-      if (this.createData.points.length === 1) {
+      if (this.createData.toBeConfirmed === false) {
+        this.createData.points.length = 0;
         this.createData.points.push(coords);
-        this.showRegionTooltipWithAnnotations(data, true, true);
-        this.createData.toBeConfirmed = true;
-      } else {
+        this.showRegionTooltipWithAnnotations(data, true, false);
+        this.tData.x = 50;
+        this.tData.y = 200;
         this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
-        this.createData.points.push(coords);
+        this.createData.toBeConfirmed = true;
+      }
+    },
+    drawLine: function(coords, data) {
+      if (this.createData.toBeConfirmed === false) {
+        if (this.createData.points.length === 1) {
+          this.createData.points.push(coords);
+          this.showRegionTooltipWithAnnotations(data, true, false);
+          this.tData.x = 50;
+          this.tData.y = 200;
+          this.createData.toBeConfirmed = true;
+        } else {
+          this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
+          this.createData.points.push(coords);
+        }
       }
     },    
     /**
@@ -1410,89 +1419,90 @@ export default {
      *
      */
     eventNotifierCallback: function (event) {
-      const names = [];
-      let zincObjects = [];
-      if (event.eventType == 1 || event.eventType == 2) {
-        event.identifiers.forEach((identifier) => {
-          if (identifier) {
-            let id = identifier.data.id
-              ? identifier.data.id
-              : identifier.data.group;
-            names.push(id);
-          }
-        });
-        zincObjects = event.zincObjects;
-      }
-      /*
-       * Event Type 1: Selected
-       * Event Type 2: Highlighted
-       * Event Type 3: Move
-       */
-      if (event.eventType == 1) {
-        if (this.viewingMode === 'Annotation') {
-          this.activateAnnotationMode(names, event);
-
-        } else {
-          if (this.$refs.scaffoldTreeControls) {
-            if (names.length > 0) {
-              //this.$refs.scaffoldTreeControls.changeActiveByNames(names, region, false);
-              this.$refs.scaffoldTreeControls.updateActiveUI(zincObjects);
-              this.updatePrimitiveControls(zincObjects);
-            } else {
-              this.hideRegionTooltip();
-              this.$refs.scaffoldTreeControls.removeActive(false);
+      if (!this.createData.toBeConfirmed) {
+        const names = [];
+        let zincObjects = [];
+        if (event.eventType == 1 || event.eventType == 2) {
+          event.identifiers.forEach((identifier) => {
+            if (identifier) {
+              let id = identifier.data.id
+                ? identifier.data.id
+                : identifier.data.group;
+              names.push(id);
             }
-          }
-          //Emit when an object is selected
-          //@arg Identifier of selected objects
-          this.$emit("scaffold-selected", event.identifiers);
+          });
+          zincObjects = event.zincObjects;
         }
-      } else if (event.eventType == 2) {
-        if (this.selectedObjects.length === 0) {
-          this.hideRegionTooltip();
-          // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
-          if (this.$refs.scaffoldTreeControls) {
-            if (names.length > 0) {
-              //this.$refs.scaffoldTreeControls.changeHoverByNames(names, region, false);
-              this.$refs.scaffoldTreeControls.updateHoverUI(zincObjects);
-            } else {
-              this.$refs.scaffoldTreeControls.removeHover(true);
+        /*
+        * Event Type 1: Selected
+        * Event Type 2: Highlighted
+        * Event Type 3: Move
+        */
+        if (event.eventType == 1) {
+          if (this.viewingMode === 'Annotation') {
+            this.activateAnnotationMode(names, event);
+          } else {
+            if (this.$refs.scaffoldTreeControls) {
+              if (names.length > 0) {
+                //this.$refs.scaffoldTreeControls.changeActiveByNames(names, region, false);
+                this.$refs.scaffoldTreeControls.updateActiveUI(zincObjects);
+                this.updatePrimitiveControls(zincObjects);
+              } else {
+                this.hideRegionTooltip();
+                this.$refs.scaffoldTreeControls.removeActive(false);
+              }
             }
+            //Emit when an object is selected
+            //@arg Identifier of selected objects
+            this.$emit("scaffold-selected", event.identifiers);
           }
-          if (event.identifiers.length > 0 && 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.active = false;
-              this.tData.visible = true;
-              this.tData.label = id;
-              if (event.identifiers[0].data.region) {
-                this.tData.region = event.identifiers[0].data.region;
+        } else if (event.eventType == 2) {
+          if (this.selectedObjects.length === 0) {
+            this.hideRegionTooltip();
+            // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
+            if (this.$refs.scaffoldTreeControls) {
+              if (names.length > 0) {
+                //this.$refs.scaffoldTreeControls.changeHoverByNames(names, region, false);
+                this.$refs.scaffoldTreeControls.updateHoverUI(zincObjects);
+              } else {
+                this.$refs.scaffoldTreeControls.removeHover(true);
               }
-              else {
-                this.tData.region = undefined;
+            }
+            if (event.identifiers.length > 0 && 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.active = false;
+                this.tData.visible = true;
+                this.tData.label = id;
+                if (event.identifiers[0].data.region) {
+                  this.tData.region = event.identifiers[0].data.region;
+                }
+                else {
+                  this.tData.region = undefined;
+                }
+                this.tData.x = event.identifiers[0].coords.x;
+                this.tData.y = event.identifiers[0].coords.y;
+                this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
               }
-              this.tData.x = event.identifiers[0].coords.x;
-              this.tData.y = event.identifiers[0].coords.y;
-              this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
             }
+            //Emit when an object is highlighted
+            //@arg Identifier of selected objects
+            this.$emit("scaffold-highlighted", event.identifiers);
           }
-          //Emit when an object is highlighted
-          //@arg Identifier of selected objects
-          this.$emit("scaffold-highlighted", event.identifiers);
-        }
-      } else if (event.eventType == 3) {
-        //MOVE
-        if (event.identifiers.length > 0 && event.identifiers[0]) {
-          if (event.identifiers[0].coords) {
-            const offsets =
-              this.$refs.scaffoldContainer.getBoundingClientRect();
-            this.tData.x = event.identifiers[0].coords.x - offsets.left;
-            this.tData.y = event.identifiers[0].coords.y - offsets.top;
+        } else if (event.eventType == 3) {
+          //MOVE
+          if (event.identifiers.length > 0 && event.identifiers[0]) {
+            if (event.identifiers[0].coords) {
+              const offsets =
+                this.$refs.scaffoldContainer.getBoundingClientRect();
+              this.tData.x = event.identifiers[0].coords.x - offsets.left;
+              this.tData.y = event.identifiers[0].coords.y - offsets.top;
+              this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
+            }
             this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
           }
-          this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
         }
       }
     },

From 65236b0ef8d71396b73fd3ec14ebba1ca98bb532 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Fri, 21 Jun 2024 11:07:30 +1200
Subject: [PATCH 06/24] Fix points picking.

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ce5609f..6aa94e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "vue": "^3.4.15",
         "vue-router": "^4.2.5",
         "vue3-component-svg-sprite": "^0.0.1",
-        "zincjs": "^1.8.0"
+        "zincjs": "^1.8.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.6.2",
@@ -8545,9 +8545,9 @@
       }
     },
     "node_modules/zincjs": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.0.tgz",
-      "integrity": "sha512-MMH3s3jdDsVVrW4YDah0x5fWc5V/4a2JMKOTTTavuwNE8RvSFVDgM4YBul/lseq4hAV2ZkWkHMPwi4N2qM+Nbg==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.1.tgz",
+      "integrity": "sha512-FJd5h6M7K4swuQWY1ZLK9yUOiCsLnZ300WLZxW3MxxXba3tZWuYJ94vFKOe+cZ9Hlylb0Y8T8wn3KF3V6CWwYg==",
       "dependencies": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",
diff --git a/package.json b/package.json
index dd245a9..518e31b 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.8.0"
+    "zincjs": "^1.8.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

From bb90436dba2b17f57cfe0b5b65e8549495aaf4ec Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Mon, 24 Jun 2024 12:42:13 +1200
Subject: [PATCH 07/24] Improve useability.

---
 src/components/ScaffoldTooltip.vue | 14 ++++++++++++--
 src/components/ScaffoldVuer.vue    | 24 ++++++++++++++++--------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/ScaffoldTooltip.vue b/src/components/ScaffoldTooltip.vue
index 18b6f10..2cb25c2 100644
--- a/src/components/ScaffoldTooltip.vue
+++ b/src/components/ScaffoldTooltip.vue
@@ -29,8 +29,8 @@
         />
         <div v-if="createData.toBeDeleted" class="delete-container">
           <el-row>
-            <el-col :span="12">Delete this feature?</el-col>
-            <el-col :span="2">
+            <el-col :span="10">Delete this feature?</el-col>
+            <el-col :span="7">
               <el-button
                 class="delete-button"
                 :icon="ElIconDelete"
@@ -39,6 +39,14 @@
                   Delete
               </el-button>
             </el-col>
+            <el-col :span="6">
+              <el-button
+                class="delete-button"
+                @click="$emit('cancel-create')"
+                >
+                  Dismiss
+              </el-button>
+            </el-col>
           </el-row>
         </div>
       </template>
@@ -243,6 +251,8 @@ export default {
       pointer-events: auto;
       cursor: pointer;
       margin-left:8px;
+      padding-left: 8px;
+      padding-right: 8px;
       height: 24px !important;
       color: $app-primary-color;
       &:hover {
diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 0cee65b..7330662 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -1401,7 +1401,13 @@ export default {
               this._editingZincObject = zincObject;
             }
           }
-          this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
+          if (this.activeDrawMode === "Edit" || this.activeDrawMode === "Delete") {
+            this.showRegionTooltipWithAnnotations(event.identifiers, true, false);
+            this.tData.x = 50;
+            this.tData.y = 200;
+          } else {
+            this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
+          }
         }
       } else {
         this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
@@ -1419,7 +1425,7 @@ export default {
      *
      */
     eventNotifierCallback: function (event) {
-      if (!this.createData.toBeConfirmed) {
+      if (!(this.createData.toBeConfirmed || this.createData.toBeDeleted)) {
         const names = [];
         let zincObjects = [];
         if (event.eventType == 1 || event.eventType == 2) {
@@ -2199,12 +2205,14 @@ export default {
      * Callback using ResizeObserver.
      */
     adjustLayout: function () {
-      let width = this.$refs.scaffoldContainer.clientWidth;
-      this.minimisedSlider = width < 812;
-      if (this.minimisedSlider) {
-        this.sliderPosition = this.drawerOpen ? "right" : "left";
-      } else {
-        this.sliderPosition = "";
+      if (this.$refs.scaffoldContainer) {
+        let width = this.$refs.scaffoldContainer.clientWidth;
+        this.minimisedSlider = width < 812;
+        if (this.minimisedSlider) {
+          this.sliderPosition = this.drawerOpen ? "right" : "left";
+        } else {
+          this.sliderPosition = "";
+        }
       }
     },
     toggleRendering: function (flag) {

From 91593e4112224efad4df724894cf82d77fd6a91d Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Mon, 24 Jun 2024 13:08:14 +1200
Subject: [PATCH 08/24] Hide markers by default.

---
 src/App.vue         | 51 ++++++++++++++++++++++-----------------------
 src/components.d.ts |  5 ++++-
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d6b54af..c00e7c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -115,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">
@@ -376,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,
@@ -384,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: "",
@@ -434,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,
@@ -496,9 +500,6 @@ export default {
         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;
       }
@@ -674,9 +675,7 @@ export default {
         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];
diff --git a/src/components.d.ts b/src/components.d.ts
index 8aa6816..0ea73c3 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CreateTooltipContent: typeof import('./components/CreateTooltipContent.vue')['default']
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
@@ -29,9 +30,11 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     LinesControls: typeof import('./components/LinesControls.vue')['default']
     OpacityControls: typeof import('./components/OpacityControls.vue')['default']
     PointsControls: typeof import('./components/PointsControls.vue')['default']

From c6f39c8338d983abb5e3ea538f85e1371d011081 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Mon, 1 Jul 2024 11:26:57 +1200
Subject: [PATCH 09/24] Remove comments.

---
 src/components/ScaffoldTreeControls.vue | 1 -
 src/scripts/OrgansRenderer.js           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/ScaffoldTreeControls.vue b/src/components/ScaffoldTreeControls.vue
index 8588aca..6535d35 100644
--- a/src/components/ScaffoldTreeControls.vue
+++ b/src/components/ScaffoldTreeControls.vue
@@ -176,7 +176,6 @@ export default {
       }
     },
     zincObjectRemoved: function(zincObject) {
-      console.log(zincObject)
       const group = zincObject.groupName;
       const objects = zincObject.region.findObjectsWithGroupName(group, false);
       if (objects.length === 0) {
diff --git a/src/scripts/OrgansRenderer.js b/src/scripts/OrgansRenderer.js
index 8e9b1da..8bd0593 100644
--- a/src/scripts/OrgansRenderer.js
+++ b/src/scripts/OrgansRenderer.js
@@ -420,7 +420,6 @@ const OrgansSceneData = function() {
 		 */
 	  const _removeOrganPartCallback = function(systemName, partName, useDefautColour) {
 	    return function(zincObject) {
-				console.log("removed")
 	    	removeOrganPart(systemName, partName, useDefautColour, zincObject);
 	    }
 	  }

From 27a703ace2538130d6e6bc7365d4ad26c8148488 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Mon, 1 Jul 2024 20:48:39 +1200
Subject: [PATCH 10/24] Improve picking and transformation tool.

---
 src/components/ScaffoldVuer.vue           | 15 +++-
 src/components/TransformationControls.vue | 94 ++++++++++++++++++-----
 src/scripts/OrgansRenderer.js             | 21 ++++-
 src/scripts/RendererModule.js             | 23 +++---
 4 files changed, 121 insertions(+), 32 deletions(-)

diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 07e5706..17ebfe1 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -680,6 +680,7 @@ export default {
       flatmapAPI: this.flatmapAPI,
       scaffoldUrl: this.url,
       $annotator: this.annotator,
+      boundingDims: this.boundingDims,
     };
   },
   data: function () {
@@ -787,7 +788,11 @@ export default {
       ],
       activeDrawTool: undefined,
       activeDrawMode: undefined,
-      localAnnotationsList: markRaw([])
+      localAnnotationsList: markRaw([]),
+      boundingDims: {
+        centre: [0, 0, 0],
+        size:[1, 1, 1],
+      },
     };
   },
   watch: {
@@ -2040,8 +2045,16 @@ export default {
         //Emit when all objects have been loaded
         this.$emit("on-ready");
         this.setMarkers();
+        //Create a bounding box.
         this._boundingBoxGeo = this.$module.scene.addBoundingBoxPrimitive(
           "_helper", "boundingBox", 0x40E0D0, 0.15);
+        //Create planes.
+        this._slides = this.$module.scene.addSlicesPrimitive(
+          "_helper", ["x-plane", "y-plane", "z-plane"], [0xFF5555, 0x55FF55, 0x5555FF],
+          0.5);
+        const {centre, size} = this.$module.getCentreAndSize();
+        this.boundingDims.centre = centre;
+        this.boundingDims.size = size;
         this.isReady = true;
       };
     },
diff --git a/src/components/TransformationControls.vue b/src/components/TransformationControls.vue
index 79341a9..0708594 100644
--- a/src/components/TransformationControls.vue
+++ b/src/components/TransformationControls.vue
@@ -1,46 +1,81 @@
 <template>
   <el-container class="transformation-container">
     <el-main class="slides-block">
-      <el-row>
-        <el-col :offset="0" :span="8">
-          Position:
-        </el-col>
-      </el-row>
-      <el-row class="">
-        <el-col :offset="3" :span="1">
+      <el-row class="tool-row">
+        <el-col :offset="0" :span="6">
           x:
         </el-col>
-        <el-col :span="3">
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="x"
+            :step="0.01"
+            :min="min[0]"
+            :max="max[0]"
+            :show-tooltip="false"
+            @input="modifyPosition()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
           <el-input-number
             v-model="x"
-            :step="1"
+            :step="0.01"
+            :min="min[0]"
+            :max="max[0]"
             :controls="false"
             class="input-box number-input"
-            @change="modifyPosition"
+            @change="modifyPosition()"
           />
         </el-col>
-        <el-col :offset="3" :span="1">
+      </el-row>
+      <el-row class="tool-row">
+        <el-col :offset="0" :span="6">
           y:
         </el-col>
-        <el-col :span="3">
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="y"
+            :step="0.01"
+            :min="min[1]"
+            :max="max[1]"
+            :show-tooltip="false"
+            @input="modifyPosition()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
           <el-input-number
             v-model="y"
-            :step="1"
+            :step="0.01"
+            :min="min[1]"
+            :max="max[1]"
             :controls="false"
             class="input-box number-input"
-            @change="modifyPosition"
+            @change="modifyPosition()"
           />
         </el-col>
-        <el-col :offset="3" :span="1">
+      </el-row>
+      <el-row class="tool-row">
+        <el-col :offset="0" :span="6">
           z:
         </el-col>
-        <el-col :span="3">
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="z"
+            :step="0.01"
+            :min="min[2]"
+            :max="max[2]"
+            :show-tooltip="false"
+            @input="modifyPosition()"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
           <el-input-number
             v-model="z"
-            :step="1"
+            :step="0.01"
+            :min="min[2]"
+            :max="max[2]"
             :controls="false"
             class="input-box number-input"
-            @change="modifyPosition"
+            @change="modifyPosition()"
           />
         </el-col>
       </el-row>
@@ -95,14 +130,37 @@ export default {
     InputNumber,
     Main,
   },
+  inject: ['boundingDims'],
   data: function () {
     return {
       x: 0,
       y: 0,
       z: 0,
       scale: 1,
+      min: [0, 0, 0],
+      max: [1, 1, 1],
     };
   },
+  watch: {
+    boundingDims: {
+      handler: function (value) {
+        const centre = value.centre;
+        const size = value.size;
+        this.min = [
+          centre[0] - size[0],
+          centre[1] - size[1],
+          centre[2] - size[2]
+        ];
+        this.max = [
+          centre[0] + size[0],
+          centre[1] + size[1],
+          centre[2] + size[2]
+        ];
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   mounted: function () {
     this._zincObject = undefined;
   },
diff --git a/src/scripts/OrgansRenderer.js b/src/scripts/OrgansRenderer.js
index 8bd0593..e7162af 100644
--- a/src/scripts/OrgansRenderer.js
+++ b/src/scripts/OrgansRenderer.js
@@ -149,9 +149,9 @@ const OrgansSceneData = function() {
 		}
 	}
 	
-	 /**
-		 * Add a callback which will be called when time has changed
-		 */
+	/**
+	 * Add a callback which will be called when time has changed
+	 */
 	this.addTimeChangedCallback = function(callback) {
 	  if (typeof(callback === "function"))
 	    timeChangedCallbacks.push(callback);
@@ -249,6 +249,7 @@ const OrgansSceneData = function() {
 			};
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
+				extraData.threeID = idObject.object?.id;
         if (idObject.object.userData.isGlyph) { 
           if (idObject.object.name) {
             _this.setSelectedByObjects([idObject.object], coords,
@@ -285,6 +286,7 @@ const OrgansSceneData = function() {
 			}
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
+				extraData.threeID = idObject.object?.id;
         _this.displayArea.style.cursor = "pointer";
         _this.setHighlightedByObjects([idObject.object], coords, extraData, true);
         return;
@@ -486,6 +488,19 @@ const OrgansSceneData = function() {
 	    }
 	    return availableSpecies;
 	  }
+
+		/**
+		 * Return the center and size of the cuurrent viewing scene
+		 */
+		this.getCentreAndSize = function() {
+			const vector = new THREE.Vector3();
+			const boundingBox = this.scene.getBoundingBox();
+			boundingBox.getCenter(vector);
+			const centre = [vector.x, vector.y, vector.z];
+			boundingBox.getSize(vector);
+			const size = [vector.x, vector.y, vector.z];
+			return {centre, size};
+		}
 	  
 	  const setSceneData = function(speciesName, systemName, partName, organsDetails) {
       _this.sceneData.nerveMapIsActive = false;
diff --git a/src/scripts/RendererModule.js b/src/scripts/RendererModule.js
index 84ef388..b8300d1 100644
--- a/src/scripts/RendererModule.js
+++ b/src/scripts/RendererModule.js
@@ -44,17 +44,19 @@ RendererModule.prototype = Object.create(BaseModule.prototype);
 RendererModule.prototype.getIntersectedObject = function(intersects) {
 	if (intersects) {
     const typeMap = intersects.map(intersect => {
-        if (intersect && intersect.object &&
-          intersect.object.userData) {
-          if (intersect.object.userData.isMarker) {
-            return 1;
-          } else if (intersect.object.name && 
-            intersect.object.userData.isZincObject) {
-            return 2;
-          }
+      
+      if (intersect && intersect.object &&
+        intersect.object.userData) {
+        if (intersect.object.userData.isMarker) {
+          return 1;
+        } else if (intersect.object.name && 
+          intersect.object.userData.isZincObject) {
+          return 2;
         }
-        return 0;
+      }
+      return 0;
     });
+    //prioritise markers
     let i = typeMap.indexOf(1);
     i = (i > -1) ? i : typeMap.indexOf(2);
     return intersects[i];
@@ -71,8 +73,9 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
     if (zincObject) {
       if (zincObject.isGlyph || zincObject.isGlyphset) {
         let glyphset = zincObject;
-        if (zincObject.isGlyph)
+        if (zincObject.isGlyph) {
           glyphset = zincObject.getGlyphset();
+        }
         annotation = glyphset.userData ? glyphset.userData.annotation : undefined;
         if (annotation && annotation.data) {
           if (objects[i].name && objects[i].name != "")

From 9de179df6e88b8c6ead13211b1bfb34fba2d46ac Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 3 Jul 2024 14:41:46 +1200
Subject: [PATCH 11/24] Fix an issue with annotation tool.

---
 package-lock.json                    |  8 +++---
 package.json                         |  2 +-
 src/App.vue                          | 43 +++++++++++++---------------
 src/components/PrimitiveControls.vue |  2 +-
 src/components/ScaffoldVuer.vue      | 20 +++++++++++--
 src/scripts/RendererModule.js        |  1 -
 src/scripts/Utilities.js             |  5 +++-
 7 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ce5f13..0f5b487 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "vue": "^3.4.15",
         "vue-router": "^4.2.5",
         "vue3-component-svg-sprite": "^0.0.1",
-        "zincjs": "^1.8.3"
+        "zincjs": "^1.8.4"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.6.2",
@@ -7986,9 +7986,9 @@
       }
     },
     "node_modules/zincjs": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.3.tgz",
-      "integrity": "sha512-jSeSNahPEpoF81R4wb3MBvjshBh4s7hKUgJVCclferkPmIGyKxcfy1qUnMPPxJBitoDkys2jlEA1EiySBOZqPA==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.4.tgz",
+      "integrity": "sha512-uKACAEdGgEnxp/wqQ9GZhckvP1kjKkK1EeN365ft9EVjUdHmOB7Bu0TK60zPk0dFkuXySWPPkbwaLnD7B2jfKA==",
       "dependencies": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",
diff --git a/package.json b/package.json
index 9bc53c3..d033994 100644
--- a/package.json
+++ b/package.json
@@ -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.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
diff --git a/src/App.vue b/src/App.vue
index c00e7c1..1427741 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -358,7 +358,7 @@ export default {
   data: function () {
     return {
       consoleOn: true,
-      createPoints: false,
+      createLinesWithNormal: true,
       url: undefined,
       input: undefined,
       displayUI: true,
@@ -405,7 +405,6 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      coordinatesClicked: [],
       auto: NaN
     };
   },
@@ -644,34 +643,32 @@ 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,
+        ];
+        console.log(coord, newCoords)
         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",
+          [coord, newCoords],
+          0x00ee22,
+        );
+        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");
       }
     },
diff --git a/src/components/PrimitiveControls.vue b/src/components/PrimitiveControls.vue
index f389c55..e675f02 100644
--- a/src/components/PrimitiveControls.vue
+++ b/src/components/PrimitiveControls.vue
@@ -110,7 +110,7 @@ export default {
       this.isPointset = false;
       this.isTextureSlides = false;
       this.isLines = false;
-      this.activeName  = "oControls";
+      this.activeName  = "trControls";
       if (object) {
         if (object.isTextureSlides) {
           this.isTextureSlides = true;
diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 17ebfe1..0cf66b0 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -973,7 +973,7 @@ export default {
     zincObjectRemoved: function (zincObject) {
       if (this.$module.scene) {
         // zincObjectAdded will be alled in sequential callback
-        const regionPath = zincObject.region.getFullPath() + "/";
+        const regionPath = zincObject.region.getFullPath();
         const groupName = zincObject.groupName;
         const objects = zincObject.region.findObjectsWithGroupName(groupName, false);
         //Remove relevant objects from the rest of the app.
@@ -1090,7 +1090,11 @@ export default {
             //Remove previous entry if there is matching region and group
             this.removeFromLocalAnnotationList(payload.region, payload.group);
             annotation.group = payload.group;
-            annotation.region = payload.region;
+            let regionPath = payload.region; 
+            if (regionPath.slice(-1) === "/") {
+              regionPath = regionPath.slice(0, -1);
+            }
+            annotation.region = regionPath;
             this.localAnnotationsList.push(annotation);
           }
           object.zincObject.isEditable = true;
@@ -2142,6 +2146,18 @@ export default {
      */
      importLocalAnnotations: function (annotationsList) {
       if (this.enableLocalAnnotations) {
+        //Make sure the annotations are encoded correctly
+        annotationsList.forEach(annotation => {
+          const group = annotation.group;
+          const region = annotation.region;
+          let fullName = region.slice(-1) === "/" ? region : region + "/";
+          const noSlash = fullName.slice(0, -1);
+          annotation.region = noSlash; 
+          fullName = fullName + group;
+          const featureID = encodeURIComponent(fullName);
+          annotation.item.id = featureID;
+          annotation.feature.id = featureID;
+        });
         const featuresList = annotationsList.map((annotation) => annotation.feature);
         annotationFeaturesToPrimitives(this.$module.scene, featuresList);
         //Make a local non-reactive copy.
diff --git a/src/scripts/RendererModule.js b/src/scripts/RendererModule.js
index b8300d1..1ebbd97 100644
--- a/src/scripts/RendererModule.js
+++ b/src/scripts/RendererModule.js
@@ -44,7 +44,6 @@ RendererModule.prototype = Object.create(BaseModule.prototype);
 RendererModule.prototype.getIntersectedObject = function(intersects) {
 	if (intersects) {
     const typeMap = intersects.map(intersect => {
-      
       if (intersect && intersect.object &&
         intersect.object.userData) {
         if (intersect.object.userData.isMarker) {
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index 2bf8968..0ff3c6d 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -257,7 +257,10 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
   }
   if (type) {
     const coords = getCoordinatesForAnnotationFeature(zincObject);
-    const featureID = encodeURIComponent(region + group);
+    //Check if region ends with a slash
+    let fullName = region.slice(-1) === "/" ? region : region + "/";
+    fullName = fullName + group;
+    const featureID = encodeURIComponent(fullName);
     const userAnnotation = {
       resource: encodeURIComponent(scaffoldUrl),
       item: {

From 4155430479f1c48d2eed6b628cbf3eb0a9ad0404 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 3 Jul 2024 17:23:52 +1200
Subject: [PATCH 12/24] Improve line sliding controls.

---
 src/App.vue                               |  1 +
 src/components/LinesControls.vue          | 74 ++++++++++++++---------
 src/components/TransformationControls.vue |  2 +
 src/scripts/Utilities.js                  | 11 ++++
 4 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1427741..f613ca9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -657,6 +657,7 @@ export default {
           [coord, newCoords],
           0x00ee22,
         );
+        returned.zincObject.isEditable = true;
         if (this.consoleOn) console.log(returned);
       }
     },
diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index eecbeea..d8b85ae 100644
--- a/src/components/LinesControls.vue
+++ b/src/components/LinesControls.vue
@@ -27,23 +27,21 @@
           />
         </el-col>
       </el-row>
-      <el-row v-if="createData.faceIndex > -1">
-        <el-col :offset="0" :span="4">
-          <el-button :icon="ElIconArrowLeft" @click="onMoveClick(-unit)"/>
-        </el-col>
-        <el-col :offset="3" :span="3">
-          Move
+      <el-row v-if="currentIndex > -1 && distance > 0">
+        <el-col :offset="0" :span="6">
+          Move:
         </el-col>
-        <el-col :offset="0" :span="7">
-          <el-input-number
-            v-model="unit"
-            :controls="false"
-            class="input-box number-input"
+        <el-col :offset="0" :span="16">
+          <el-slider
+            v-model="adjust"
+            :step="0.01"
+            :min="-3"
+            :max="3"
+            :show-tooltip="false"
+            @input="onSliding()"
+            @change="reset()"
           />
         </el-col>
-        <el-col :offset="2" :span="2">
-          <el-button :icon="ElIconArrowRight" @click="onMoveClick(unit)"/>
-        </el-col>
       </el-row>
     </el-main>
   </el-container>
@@ -55,6 +53,7 @@
 // limited support to line width
 import { shallowRef } from 'vue';
 import {
+  getLineDistance,
   moveLine,
 } from "../scripts/Utilities.js";
 import {
@@ -63,14 +62,8 @@ import {
   ElContainer as Container,
   ElInputNumber as InputNumber,
   ElMain as Main,
-  ElSelect as Select,
   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.
@@ -83,11 +76,7 @@ export default {
     Container,
     InputNumber,
     Main,
-    Select,
     Slider,
-    Option,
-    ElIconArrowLeft,
-    ElIconArrowRight,
   },
   props: {
     createData: {
@@ -96,26 +85,51 @@ export default {
   },
   data: function () {
     return {
+      adjust: 0,
+      pAdjust: 0,
+      distance: 0,
       width: 1,
-      unit: 0.1,
-      ElIconArrowLeft: shallowRef(ElIconArrowLeft),
-      ElIconArrowRight: shallowRef(ElIconArrowRight),
+      currentIndex: 0,
     };
   },
+  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);
+    onSliding: function() {
+      const diff = (this.pAdjust - this.adjust) * this.distance;
+      moveLine(this._zincObject, this.currentIndex, diff);
+      this.pAdjust = this.adjust;
+    },
+    reset: function() {
+      this.adjust = 0;
+      this.pAdjust = 0;
     },
     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;
+        
       }
     },
     modifyWidth: function () {
diff --git a/src/components/TransformationControls.vue b/src/components/TransformationControls.vue
index 0708594..09059d0 100644
--- a/src/components/TransformationControls.vue
+++ b/src/components/TransformationControls.vue
@@ -117,6 +117,7 @@ import {
   ElContainer as Container,
   ElInputNumber as InputNumber,
   ElMain as Main,
+  ElSlider as Slider,
 } from "element-plus";
 
 /**
@@ -129,6 +130,7 @@ export default {
     Container,
     InputNumber,
     Main,
+    Slider,
   },
   inject: ['boundingDims'],
   data: function () {
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index 0ff3c6d..d94516c 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -58,6 +58,17 @@ export const getDeletableObjects = (event) => {
   return undefined;
 }
 
+export const getLineDistance = (zincObject, faceIndex) => {
+  if (zincObject?.isEditable && zincObject?.isLines2) {
+    if (faceIndex > -1) {
+      const v = zincObject.getVerticesByFaceIndex(faceIndex);
+      let d = [v[0][0] - v[1][0], v[0][1] - v[1][1], v[0][2] - v[1][2]];
+      return Math.sqrt(d[0] * d[0] + d[1] * d[1] + d[2] * d[2]);
+    }
+  }
+  return 0;
+}
+
 export const moveLine = (zincObject, faceIndex, unit) => {
   if (zincObject && unit !== 0.0) {
     if (zincObject.isEditable && zincObject.isLines2) {

From a35f6f89c13bb4020a03649c14839f2c125c32cf Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 3 Jul 2024 20:19:11 +1200
Subject: [PATCH 13/24] Add UI to extend Line2 primitive.

---
 src/App.vue                      |  3 +--
 src/components/LinesControls.vue | 31 +++++++++++++++++++++++++++----
 src/scripts/Utilities.js         | 17 +++++++++++------
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f613ca9..df81c77 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -650,11 +650,10 @@ export default {
           coord[1] + normal.y * 1000,
           coord[2] + normal.z * 1000,
         ];
-        console.log(coord, newCoords)
         const returned = this.$refs.scaffold.$module.scene.createLines(
           "test",
           "lines",
-          [coord, newCoords],
+          [newCoords, coord],
           0x00ee22,
         );
         returned.zincObject.isEditable = true;
diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index d8b85ae..c6fcd53 100644
--- a/src/components/LinesControls.vue
+++ b/src/components/LinesControls.vue
@@ -38,7 +38,23 @@
             :min="-3"
             :max="3"
             :show-tooltip="false"
-            @input="onSliding()"
+            @input="onMoveSliding()"
+            @change="reset()"
+          />
+        </el-col>
+      </el-row>
+      <el-row v-if="currentIndex > -1 && distance > 0">
+        <el-col :offset="0" :span="6">
+          Length:
+        </el-col>
+        <el-col :offset="0" :span="16">
+          <el-slider
+            v-model="length"
+            :step="0.01"
+            :min="-1"
+            :max="1"
+            :show-tooltip="false"
+            @input="onLengthSliding()"
             @change="reset()"
           />
         </el-col>
@@ -54,7 +70,7 @@
 import { shallowRef } from 'vue';
 import {
   getLineDistance,
-  moveLine,
+  moveAndExtendLine,
 } from "../scripts/Utilities.js";
 import {
   ElButton as Button,
@@ -87,6 +103,7 @@ export default {
     return {
       adjust: 0,
       pAdjust: 0,
+      length: 0,
       distance: 0,
       width: 1,
       currentIndex: 0,
@@ -107,14 +124,20 @@ export default {
     this._zincObject = undefined;
   },
   methods: {
-    onSliding: function() {
+    onLengthSliding: function() {
+      const dist = Math.pow(10, this.length) * this.distance;
+      moveAndExtendLine(this._zincObject, this.currentIndex, dist, true);
+    },
+    onMoveSliding: function() {
       const diff = (this.pAdjust - this.adjust) * this.distance;
-      moveLine(this._zincObject, this.currentIndex, diff);
+      moveAndExtendLine(this._zincObject, this.currentIndex, diff, false);
       this.pAdjust = this.adjust;
     },
     reset: function() {
       this.adjust = 0;
       this.pAdjust = 0;
+      this.length = 0;
+      this.distance = getLineDistance(this._zincObject, this.currentIndex);
     },
     setObject: function (object) {
       this.currentIndex = -1;
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index d94516c..e18ffaf 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -62,24 +62,29 @@ export const getLineDistance = (zincObject, faceIndex) => {
   if (zincObject?.isEditable && zincObject?.isLines2) {
     if (faceIndex > -1) {
       const v = zincObject.getVerticesByFaceIndex(faceIndex);
-      let d = [v[0][0] - v[1][0], v[0][1] - v[1][1], v[0][2] - v[1][2]];
+      let d = [v[1][0] - v[0][0], v[1][1] - v[0][1], v[1][2] - v[0][2]];
       return Math.sqrt(d[0] * d[0] + d[1] * d[1] + d[2] * d[2]);
     }
   }
   return 0;
 }
-
-export const moveLine = (zincObject, faceIndex, unit) => {
+ 
+//Move or extend a line
+export const moveAndExtendLine = (zincObject, faceIndex, unit, extendOnly) => {
   if (zincObject && unit !== 0.0) {
     if (zincObject.isEditable && zincObject.isLines2) {
       if (faceIndex > -1) {
         const v = zincObject.getVerticesByFaceIndex(faceIndex);
-        let d = [v[0][0] - v[1][0], v[0][1] - v[1][1], v[0][2] - v[1][2]];
+        let d = [v[1][0] - v[0][0], v[1][1] - v[0][1], v[1][2] - v[0][2]];
         const mag = Math.sqrt(d[0] * d[0] + d[1] * d[1] + d[2] * d[2]);
         for (let i = 0; i < 3; i++) {
           d[i] = d[i] / mag * unit;
-          v[0][i] = v[0][i] + d[i];
-          v[1][i] = v[1][i] + d[i];
+          if (!extendOnly) {
+            v[0][i] = v[0][i] + d[i];
+            v[1][i] = v[1][i] + d[i];
+          } else {
+            v[1][i] = v[0][i] + d[i];
+          }
         }
         zincObject.editVertice(v, faceIndex * 2);
         zincObject.boundingBoxUpdateRequired = true;

From b75354fbeebd9528c11c13addf63a6df5bcaa91f Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 4 Jul 2024 10:01:35 +1200
Subject: [PATCH 14/24] Update length controls to allow input number.

---
 src/components/LinesControls.vue | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index c6fcd53..0330b69 100644
--- a/src/components/LinesControls.vue
+++ b/src/components/LinesControls.vue
@@ -47,9 +47,9 @@
         <el-col :offset="0" :span="6">
           Length:
         </el-col>
-        <el-col :offset="0" :span="16">
+        <el-col :offset="0" :span="10">
           <el-slider
-            v-model="length"
+            v-model="lengthScale"
             :step="0.01"
             :min="-1"
             :max="1"
@@ -58,6 +58,14 @@
             @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>
     </el-main>
   </el-container>
@@ -103,8 +111,8 @@ export default {
     return {
       adjust: 0,
       pAdjust: 0,
-      length: 0,
-      distance: 0,
+      lengthScale: 0,
+      newDistance: 0, 
       width: 1,
       currentIndex: 0,
     };
@@ -124,9 +132,17 @@ export default {
     this._zincObject = undefined;
   },
   methods: {
+    onLengthInput: function() {
+      if (this.newDistance !== 0) {
+        this.distance = this.newDistance;
+        moveAndExtendLine(this._zincObject, this.currentIndex, this.newDistance, true);
+      } else {
+        this.newDistance = this.distance;
+      }
+    },
     onLengthSliding: function() {
-      const dist = Math.pow(10, this.length) * this.distance;
-      moveAndExtendLine(this._zincObject, this.currentIndex, dist, true);
+      this.newDistance = Math.pow(10, this.lengthScale) * this.distance;
+      moveAndExtendLine(this._zincObject, this.currentIndex, this.newDistance, true);
     },
     onMoveSliding: function() {
       const diff = (this.pAdjust - this.adjust) * this.distance;
@@ -136,8 +152,9 @@ export default {
     reset: function() {
       this.adjust = 0;
       this.pAdjust = 0;
-      this.length = 0;
+      this.lengthScale = 0;
       this.distance = getLineDistance(this._zincObject, this.currentIndex);
+      this.newDistance = this.distance;
     },
     setObject: function (object) {
       this.currentIndex = -1;

From 4d6704c8b41b74294c43a8bab8bb84055eefc327 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 4 Jul 2024 14:56:38 +1200
Subject: [PATCH 15/24] Allow line edit index to be changed using the UI.

---
 src/components/LinesControls.vue | 46 +++++++++++++++++++++++++++++---
 src/scripts/Utilities.js         |  5 ++--
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index 0330b69..4bcebb2 100644
--- a/src/components/LinesControls.vue
+++ b/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,6 +27,26 @@
           />
         </el-col>
       </el-row>
+      <el-row v-if="currentIndex > -1">
+        <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 Line {{ 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 v-if="currentIndex > -1 && distance > 0">
         <el-col :offset="0" :span="6">
           Move:
@@ -88,7 +108,10 @@ import {
   ElMain as Main,
   ElSlider as Slider,
 } 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.
  */
@@ -101,6 +124,8 @@ export default {
     InputNumber,
     Main,
     Slider,
+    ElIconArrowLeft,
+    ElIconArrowRight,
   },
   props: {
     createData: {
@@ -115,6 +140,8 @@ export default {
       newDistance: 0, 
       width: 1,
       currentIndex: 0,
+      ElIconArrowLeft: shallowRef(ElIconArrowLeft),
+      ElIconArrowRight: shallowRef(ElIconArrowRight),
     };
   },
   watch: {
@@ -132,6 +159,18 @@ export default {
     this._zincObject = undefined;
   },
   methods: {
+    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;
@@ -169,7 +208,6 @@ export default {
       } else {
         this._zincObject = undefined;
         this.linewidth = 10;
-        
       }
     },
     modifyWidth: function () {
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index e18ffaf..9619c9a 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -62,8 +62,9 @@ export const getLineDistance = (zincObject, faceIndex) => {
   if (zincObject?.isEditable && zincObject?.isLines2) {
     if (faceIndex > -1) {
       const v = zincObject.getVerticesByFaceIndex(faceIndex);
-      let d = [v[1][0] - v[0][0], v[1][1] - v[0][1], v[1][2] - v[0][2]];
-      return Math.sqrt(d[0] * d[0] + d[1] * d[1] + d[2] * d[2]);
+      if (v && v.length > 1) {
+        return getDistance(v[1], v[0]);
+      }
     }
   }
   return 0;

From dab8a143dc4c4f8dd18ad8f0f84db9c85d20f132 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Mon, 8 Jul 2024 13:59:28 +1200
Subject: [PATCH 16/24] Improve points and lines primitive tools. Changes are
 now stored in annotations.

---
 package-lock.json                    |   8 +-
 package.json                         |   2 +-
 src/components/LinesControls.vue     | 100 +++++++++---------
 src/components/PointsControls.vue    | 147 ++++++++++++++++++++++++++-
 src/components/PrimitiveControls.vue |  12 ++-
 src/components/ScaffoldVuer.vue      |  62 +++++++----
 src/scripts/Search.js                |   2 +-
 src/scripts/Utilities.js             |  53 +++++-----
 src/store/index.js                   |   2 +-
 9 files changed, 283 insertions(+), 105 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0f5b487..c675335 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "vue": "^3.4.15",
         "vue-router": "^4.2.5",
         "vue3-component-svg-sprite": "^0.0.1",
-        "zincjs": "^1.8.4"
+        "zincjs": "^1.8.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.6.2",
@@ -7986,9 +7986,9 @@
       }
     },
     "node_modules/zincjs": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.4.tgz",
-      "integrity": "sha512-uKACAEdGgEnxp/wqQ9GZhckvP1kjKkK1EeN365ft9EVjUdHmOB7Bu0TK60zPk0dFkuXySWPPkbwaLnD7B2jfKA==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.5.tgz",
+      "integrity": "sha512-N1ObKH6A5VvgDym8poimbCQMGzB5fNYk7/XjBToFKW7OXClg0QRK77Pn1w4guiNql7VZwHQs74ByQMv9/d6PfQ==",
       "dependencies": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",
diff --git a/package.json b/package.json
index d033994..6f3aae7 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.8.4"
+    "zincjs": "^1.8.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index 4bcebb2..ba493de 100644
--- a/src/components/LinesControls.vue
+++ b/src/components/LinesControls.vue
@@ -27,7 +27,7 @@
           />
         </el-col>
       </el-row>
-      <el-row v-if="currentIndex > -1">
+      <template v-if="currentIndex > -1 && distance > 0">
         <el-col :offset="0" :span="4">
           <el-button
             size='small'
@@ -46,47 +46,47 @@
             @click="changeIndex(true)"
           />
         </el-col>
-      </el-row>
-      <el-row v-if="currentIndex > -1 && distance > 0">
-        <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 v-if="currentIndex > -1 && distance > 0">
-        <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>
+        <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>
@@ -142,6 +142,7 @@ export default {
       currentIndex: 0,
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
+      edited: false,
     };
   },
   watch: {
@@ -174,18 +175,21 @@ export default {
     onLengthInput: function() {
       if (this.newDistance !== 0) {
         this.distance = this.newDistance;
-        moveAndExtendLine(this._zincObject, this.currentIndex, this.newDistance, true);
+        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;
-      moveAndExtendLine(this._zincObject, this.currentIndex, this.newDistance, true);
+      this.edited = moveAndExtendLine(
+        this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
     },
     onMoveSliding: function() {
-      const diff = (this.pAdjust - this.adjust) * this.distance;
-      moveAndExtendLine(this._zincObject, this.currentIndex, diff, false);
+      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() {
@@ -194,6 +198,10 @@ export default {
       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) {
       this.currentIndex = -1;
diff --git a/src/components/PointsControls.vue b/src/components/PointsControls.vue
index def3e8d..b03f7de 100644
--- a/src/components/PointsControls.vue
+++ b/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;
diff --git a/src/components/PrimitiveControls.vue b/src/components/PrimitiveControls.vue
index e675f02..625cc50 100644
--- a/src/components/PrimitiveControls.vue
+++ b/src/components/PrimitiveControls.vue
@@ -12,7 +12,7 @@
             :zincObject="zincObject"
             ref="opacityControls" />
         </el-collapse-item>
-        <el-collapse-item title="Transformation" name="trControls">
+        <el-collapse-item v-show="!isEditable" title="Transformation" name="trControls">
           <transformation-controls
             class="transformation-controls"
             ref="transformationControls" />
@@ -25,13 +25,17 @@
         <el-collapse-item v-show="isPointset" title="Points" name="pControls">
           <points-controls
             class="pointset-controls"
-            ref="pointsetControls" />
+            ref="pointsetControls"
+            @primitivesUpdated="$emit('primitivesUpdated', $event)"
+          />
         </el-collapse-item>
         <el-collapse-item v-show="isLines" title="Lines" name="lControls">
           <lines-controls
             class="lines-controls"
             ref="linesControls"
-            :createData="createData" />
+            :createData="createData"
+            @primitivesUpdated="$emit('primitivesUpdated', $event)"
+          />
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -91,6 +95,7 @@ export default {
       isLines: false,
       drawerOpen: true,
       zincObject: undefined,
+      isEditable: false,
     };
   },
   methods: {
@@ -107,6 +112,7 @@ export default {
       } else {
         this.zincObject = undefined;
       }
+      this.isEditable = this.zincObject?.isEditable ? true : false;
       this.isPointset = false;
       this.isTextureSlides = false;
       this.isLines = false;
diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 0cf66b0..91c0b54 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -104,7 +104,11 @@
         </template>
       </el-popover>
       <div class="primitive-controls-box">
-        <primitive-controls ref="primitiveControls" :createData="createData"/>
+        <primitive-controls
+          ref="primitiveControls"
+          :createData="createData"
+          @primitivesUpdated="primitivesUpdated"
+        />
       </div>
       <el-popover
         v-if="timeVarying"
@@ -389,7 +393,6 @@ import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 import { DrawToolbar } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 import {
-  addLabelToObject,
   addUserAnnotationWithFeature,
   annotationFeaturesToPrimitives,
   getDeletableObjects,
@@ -1049,6 +1052,38 @@ export default {
       if (this.$_searchIndex) this.$_searchIndex.removeAll();
       if (this.$module.scene) this.$module.scene.clearAll();
     },
+    /**
+     * @vuese
+     * Add and edit local annotations
+     */
+    addAndEditAnnotations: function (region, group, zincObject, comment) {
+      const annotation =addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
+        region, group, this.url, comment);
+      if (this.enableLocalAnnotations) {
+        annotation.group = group;
+        let regionPath = region; 
+        if (regionPath.slice(-1) === "/") {
+          regionPath = regionPath.slice(0, -1);
+        }
+        annotation.region = regionPath;
+        //Remove previous entry if there is matching region and group
+        this.removeFromLocalAnnotationList(regionPath, group);
+        this.localAnnotationsList.push(annotation);
+      }
+    },
+    /**
+     * @vuese
+     * Callback for when primitives have been update using primitive controls.
+     * This is only called from callback.
+     */
+    primitivesUpdated: function(object) {
+      if (object.isZincObject && object.isEditable) {
+        const group = object.groupName;
+        const region = object.region.getFullPath();
+        this.addAndEditAnnotations(region, group, object, "Position Updated");
+      }
+
+    },
     /**
      * @vuese
      * Confirm creation of new primitive. This is only called from callback.
@@ -1061,10 +1096,9 @@ export default {
             payload.region,
             payload.group,
             this.createData.points,
-            undefined,
+            payload.group,
             0x0022ee,
           );
-          addLabelToObject(object.zincObject, this.createData.points[0], payload.group);
         } else if (payload.shape === "LineString") {
           object = this.$module.scene.createLines(
             payload.region,
@@ -1074,29 +1108,15 @@ export default {
           );
         } else if (payload.editingIndex > -1) {
           if (this._editingZincObject) {
-            this._editingZincObject.editVertice([this.createData.points[1]],
+            this._editingZincObject.editVertices([this.createData.points[1]],
               payload.editingIndex);
             const region = this._editingZincObject.region.getFullPath() + "/";
             const group = this._editingZincObject.groupName;
-            const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, this._editingZincObject,
-              region, group, this.url, "Position Updated");
+            this.addAndEditAnnotations(region, group, this._editingZincObject, "Position Updated");
           }
         }
         if (object) {
-          const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, object.zincObject,
-            payload.region, payload.group, this.url, "Create");
-          //Store the object in a local list
-          if (this.enableLocalAnnotations) {
-            //Remove previous entry if there is matching region and group
-            this.removeFromLocalAnnotationList(payload.region, payload.group);
-            annotation.group = payload.group;
-            let regionPath = payload.region; 
-            if (regionPath.slice(-1) === "/") {
-              regionPath = regionPath.slice(0, -1);
-            }
-            annotation.region = regionPath;
-            this.localAnnotationsList.push(annotation);
-          }
+          this.addAndEditAnnotations(payload.region, payload.group, object.zincObject, "Create");
           object.zincObject.isEditable = true;
           this.tData.region = payload.region;
           this.tData.label = payload.group;
diff --git a/src/scripts/Search.js b/src/scripts/Search.js
index 93ab68a..3cb6344 100644
--- a/src/scripts/Search.js
+++ b/src/scripts/Search.js
@@ -142,7 +142,7 @@ export class SearchIndex
       }
       result["zincObjects"] = createUnqiuesFromObjects(zincObjects);
       return result;
-    } 
+    }
 
     search(text) {
         const results = this._searchEngine.search(text, {prefix: true});
diff --git a/src/scripts/Utilities.js b/src/scripts/Utilities.js
index 9619c9a..d808510 100644
--- a/src/scripts/Utilities.js
+++ b/src/scripts/Utilities.js
@@ -58,6 +58,29 @@ export const getDeletableObjects = (event) => {
   return undefined;
 }
 
+export const movePoint = (zincObject, index, diff) => {
+  if (zincObject?.isEditable && zincObject?.isPointset) {
+    let found = false;
+    for (let i = 0; i < 3 && !found; i++) {
+      if (diff[i] !== 0) {
+        found = true;
+      }
+    }
+    if (found && index > -1) {
+      const v = zincObject.getVerticesByIndex(index);
+      if (v) {
+        v[0] = v[0] + diff[0];
+        v[1] = v[1] + diff[1];
+        v[2] = v[2] + diff[2];
+      }
+      zincObject.editVertices([v], index);
+      zincObject.boundingBoxUpdateRequired = true;
+      return true;
+    }
+  }
+  return false;
+}
+
 export const getLineDistance = (zincObject, faceIndex) => {
   if (zincObject?.isEditable && zincObject?.isLines2) {
     if (faceIndex > -1) {
@@ -87,12 +110,13 @@ export const moveAndExtendLine = (zincObject, faceIndex, unit, extendOnly) => {
             v[1][i] = v[0][i] + d[i];
           }
         }
-        zincObject.editVertice(v, faceIndex * 2);
+        zincObject.editVertices(v, faceIndex * 2);
         zincObject.boundingBoxUpdateRequired = true;
+        return true;
       }
     }
   }
-  return undefined;
+  return false;
 }
 
 export const updateBoundingBox = (geometry, scene) => {
@@ -356,12 +380,9 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
           region,
           group,
           geometry.coordinates,
-          undefined,
+          group,
           0x0022ee,
         );
-        geometry.coordinates.forEach((coordinates) => {
-          addLabelToObject(object.zincObject, coordinates, group);
-        });
       } else if (geometry.type === "MultiLineString") {
         object = scene.createLines(
           region,
@@ -375,23 +396,3 @@ export const annotationFeaturesToPrimitives = (scene, features)  => {
   }
 }
 
-/*
- * Add a label at the specified local and put it 
- * into the object's group
- */
-const addLabelToObject = (zincObject, coords, groupName) => {
-  if (groupName) {
-    const colour = new THREE.Color(0x0022ee);
-    const label = new Label(groupName, colour);
-    label.setPosition(coords[0], coords[1], coords[2]);
-    const sprite  = label.getSprite();
-    sprite.material.sizeAttenuation = false;
-    sprite.material.alphaTest = 0.5;
-    sprite.material.transparent = true;
-    sprite.material.depthWrite = false;
-    sprite.material.depthTest = false;
-    zincObject.group.add(sprite);
-  }
-}
-
-export { addLabelToObject }
diff --git a/src/store/index.js b/src/store/index.js
index 5bdc25f..8a505d0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -21,4 +21,4 @@ export const useMainStore = defineStore('main', {
       this.userProfile.token = value
     },
   }
-})
\ No newline at end of file
+})

From d95efabeaa97de90b19ae7d1ba7d3b9819611b63 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Mon, 8 Jul 2024 14:09:24 +1200
Subject: [PATCH 17/24] Increment version to beta.

---
 package-lock.json   | 4 ++--
 package.json        | 2 +-
 src/components.d.ts | 4 ----
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c675335..776fa48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.2.1",
+  "version": "1.3.0-beta.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/scaffoldvuer",
-      "version": "1.2.1",
+      "version": "1.3.0-beta.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@abi-software/map-utilities": "^0.0.0-beta.4",
diff --git a/package.json b/package.json
index 6f3aae7..c6f2c1e 100644
--- 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",
diff --git a/src/components.d.ts b/src/components.d.ts
index 0ea73c3..58b7433 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CreateTooltipContent: typeof import('./components/CreateTooltipContent.vue')['default']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
@@ -30,9 +29,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     LinesControls: typeof import('./components/LinesControls.vue')['default']

From 849b5516de74c040f60e390c39f2290ed54de807 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Tue, 9 Jul 2024 13:53:46 +1200
Subject: [PATCH 18/24] Expose more information on selected event.

---
 src/App.vue                       |  4 ++++
 src/components/LinesControls.vue  | 38 ++++++++++++++++---------------
 src/components/PointsControls.vue |  2 ++
 src/components/ScaffoldVuer.vue   |  6 ++---
 src/scripts/OrgansRenderer.js     |  3 ++-
 src/scripts/RendererModule.js     |  6 ++++-
 6 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index df81c77..8fc33a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,7 @@
         @on-ready="onReady"
         @scaffold-selected="onSelected"
         @scaffold-navigated="onNavigated"
+        @user-primitives-updated="userPrimitivesUpdated"
         @timeChanged="updateCurrentTime"
         @zinc-object-added="objectAdded"
         @vue:mounted="viewerMounted"
@@ -572,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");
     },
diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index ba493de..7382ed4 100644
--- a/src/components/LinesControls.vue
+++ b/src/components/LinesControls.vue
@@ -28,24 +28,26 @@
         </el-col>
       </el-row>
       <template v-if="currentIndex > -1 && distance > 0">
-        <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 Line {{ currentIndex + 1}}
-        </el-col>
-        <el-col :offset="2" :span="2">
-          <el-button
-            size='small'
-            :icon="ElIconArrowRight"
-            @click="changeIndex(true)"
-          />
-        </el-col>
+        <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 Line {{ 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">
             Move:
diff --git a/src/components/PointsControls.vue b/src/components/PointsControls.vue
index b03f7de..0410bb0 100644
--- a/src/components/PointsControls.vue
+++ b/src/components/PointsControls.vue
@@ -134,6 +134,7 @@ import {
   ElContainer as Container,
   ElInputNumber as InputNumber,
   ElMain as Main,
+  ElRow as Row,
   ElSelect as Select,
   ElSlider as Slider,
   ElOption as Option,
@@ -155,6 +156,7 @@ export default {
     Main,
     Select,
     Slider,
+    Row,
     Option,
     ElIconArrowLeft,
     ElIconArrowRight,
diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 91c0b54..39dc340 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -1057,7 +1057,7 @@ export default {
      * Add and edit local annotations
      */
     addAndEditAnnotations: function (region, group, zincObject, comment) {
-      const annotation =addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
+      const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
         region, group, this.url, comment);
       if (this.enableLocalAnnotations) {
         annotation.group = group;
@@ -1070,6 +1070,7 @@ export default {
         this.removeFromLocalAnnotationList(regionPath, group);
         this.localAnnotationsList.push(annotation);
       }
+      this.$emit('userPrimitivesUpdated', {region, group, zincObject});
     },
     /**
      * @vuese
@@ -1082,7 +1083,6 @@ export default {
         const region = object.region.getFullPath();
         this.addAndEditAnnotations(region, group, object, "Position Updated");
       }
-
     },
     /**
      * @vuese
@@ -1799,7 +1799,7 @@ export default {
      * Setting liveUpdates to true will update the tooltip location
      * at every rendering loop.
      */
-    showRegionTooltipWithObjects: function (label, zincObjects, regionPath, resetView, liveUpdates) {
+    showRegionTooltipWithObjects: function (label, zincObjects, regionPath, resetView, liveUpdates) 
       if (label && zincObjects && zincObjects.length > 0 && this.$module.scene) {
         return this.displayTooltipOfObjects(
           label,
diff --git a/src/scripts/OrgansRenderer.js b/src/scripts/OrgansRenderer.js
index e7162af..0032e50 100644
--- a/src/scripts/OrgansRenderer.js
+++ b/src/scripts/OrgansRenderer.js
@@ -245,7 +245,8 @@ const OrgansSceneData = function() {
 					intersected ? intersected.point.y : 0,
 					intersected ? intersected.point.z : 0,
 				],
-				intersected,
+				intersected: intersected,
+				intersects: intersects,
 			};
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
diff --git a/src/scripts/RendererModule.js b/src/scripts/RendererModule.js
index 1ebbd97..30c0d16 100644
--- a/src/scripts/RendererModule.js
+++ b/src/scripts/RendererModule.js
@@ -37,6 +37,7 @@ const RendererModule = function()  {
   this.selectedScreenCoordinates = new THREE.Vector3();
   this.selectedCenter = undefined;
   this.liveUpdatesObjects = undefined;
+  this.ignorePreviousSelected = false;
 }
 
 RendererModule.prototype = Object.create(BaseModule.prototype);
@@ -88,6 +89,9 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
           annotation.data.id = objects[i].name;
         }
       }
+      if (annotation) {
+        annotation.data.zincObject = zincObject;
+      }
     }
     if (annotation)
       annotations.push(annotation);
@@ -174,7 +178,7 @@ RendererModule.prototype.setSelectedByObjects = function(
   } else {
     changed = true;
   }
-  if (changed) {
+  if (changed || this.ignorePreviousSelected) {
     const zincObjects = this.objectsToZincObjects(objects);
     if (this.selectObjectOnPick) {
       this.setupLiveCoordinates(zincObjects);

From c302d69a53a4c8202612be37dc14116f3c751123 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Tue, 9 Jul 2024 14:21:11 +1200
Subject: [PATCH 19/24] Expose more information on selected event.

---
 src/App.vue                       |  4 ++++
 src/components/LinesControls.vue  | 38 ++++++++++++++++---------------
 src/components/PointsControls.vue |  2 ++
 src/components/ScaffoldVuer.vue   |  4 ++--
 src/scripts/OrgansRenderer.js     |  3 ++-
 src/scripts/RendererModule.js     |  6 ++++-
 6 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index df81c77..8fc33a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,7 @@
         @on-ready="onReady"
         @scaffold-selected="onSelected"
         @scaffold-navigated="onNavigated"
+        @user-primitives-updated="userPrimitivesUpdated"
         @timeChanged="updateCurrentTime"
         @zinc-object-added="objectAdded"
         @vue:mounted="viewerMounted"
@@ -572,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");
     },
diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index ba493de..7382ed4 100644
--- a/src/components/LinesControls.vue
+++ b/src/components/LinesControls.vue
@@ -28,24 +28,26 @@
         </el-col>
       </el-row>
       <template v-if="currentIndex > -1 && distance > 0">
-        <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 Line {{ currentIndex + 1}}
-        </el-col>
-        <el-col :offset="2" :span="2">
-          <el-button
-            size='small'
-            :icon="ElIconArrowRight"
-            @click="changeIndex(true)"
-          />
-        </el-col>
+        <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 Line {{ 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">
             Move:
diff --git a/src/components/PointsControls.vue b/src/components/PointsControls.vue
index b03f7de..0410bb0 100644
--- a/src/components/PointsControls.vue
+++ b/src/components/PointsControls.vue
@@ -134,6 +134,7 @@ import {
   ElContainer as Container,
   ElInputNumber as InputNumber,
   ElMain as Main,
+  ElRow as Row,
   ElSelect as Select,
   ElSlider as Slider,
   ElOption as Option,
@@ -155,6 +156,7 @@ export default {
     Main,
     Select,
     Slider,
+    Row,
     Option,
     ElIconArrowLeft,
     ElIconArrowRight,
diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 91c0b54..15df890 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -1057,7 +1057,7 @@ export default {
      * Add and edit local annotations
      */
     addAndEditAnnotations: function (region, group, zincObject, comment) {
-      const annotation =addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
+      const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
         region, group, this.url, comment);
       if (this.enableLocalAnnotations) {
         annotation.group = group;
@@ -1070,6 +1070,7 @@ export default {
         this.removeFromLocalAnnotationList(regionPath, group);
         this.localAnnotationsList.push(annotation);
       }
+      this.$emit('userPrimitivesUpdated', {region, group, zincObject});
     },
     /**
      * @vuese
@@ -1082,7 +1083,6 @@ export default {
         const region = object.region.getFullPath();
         this.addAndEditAnnotations(region, group, object, "Position Updated");
       }
-
     },
     /**
      * @vuese
diff --git a/src/scripts/OrgansRenderer.js b/src/scripts/OrgansRenderer.js
index e7162af..0032e50 100644
--- a/src/scripts/OrgansRenderer.js
+++ b/src/scripts/OrgansRenderer.js
@@ -245,7 +245,8 @@ const OrgansSceneData = function() {
 					intersected ? intersected.point.y : 0,
 					intersected ? intersected.point.z : 0,
 				],
-				intersected,
+				intersected: intersected,
+				intersects: intersects,
 			};
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
diff --git a/src/scripts/RendererModule.js b/src/scripts/RendererModule.js
index 1ebbd97..30c0d16 100644
--- a/src/scripts/RendererModule.js
+++ b/src/scripts/RendererModule.js
@@ -37,6 +37,7 @@ const RendererModule = function()  {
   this.selectedScreenCoordinates = new THREE.Vector3();
   this.selectedCenter = undefined;
   this.liveUpdatesObjects = undefined;
+  this.ignorePreviousSelected = false;
 }
 
 RendererModule.prototype = Object.create(BaseModule.prototype);
@@ -88,6 +89,9 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
           annotation.data.id = objects[i].name;
         }
       }
+      if (annotation) {
+        annotation.data.zincObject = zincObject;
+      }
     }
     if (annotation)
       annotations.push(annotation);
@@ -174,7 +178,7 @@ RendererModule.prototype.setSelectedByObjects = function(
   } else {
     changed = true;
   }
-  if (changed) {
+  if (changed || this.ignorePreviousSelected) {
     const zincObjects = this.objectsToZincObjects(objects);
     if (this.selectObjectOnPick) {
       this.setupLiveCoordinates(zincObjects);

From 49fcabd16648632f27fb7cfbb72c59c247ef24f0 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 10 Jul 2024 14:16:06 +1200
Subject: [PATCH 20/24] Update map-utilities.

---
 package-lock.json   | 8 ++++----
 package.json        | 2 +-
 src/components.d.ts | 4 ++++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 776fa48..94bf0ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.3.0-beta.0",
       "license": "Apache-2.0",
       "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",
@@ -53,9 +53,9 @@
       }
     },
     "node_modules/@abi-software/map-utilities": {
-      "version": "0.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-0.0.0-beta.5.tgz",
-      "integrity": "sha512-OvV8l5kMLn/IOEEpYDwbN+Nhcit0txWRSCO0VMOVr4Jdq089onEDAYeuy67bnOj7jPhIcq+2cyNwM7Z5kIokQg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.0.0.tgz",
+      "integrity": "sha512-TJiDVSXrL/u2s5FiUbaX5UQiwktoCQieRTnxi//2owDyEasqjIkK0GPUaLK+Ru3VQMbNfwFUvPd2Q2extW76cA==",
       "dependencies": {
         "@abi-software/svg-sprite": "^1.0.0",
         "@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index c6f2c1e..cb7cd1c 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components.d.ts b/src/components.d.ts
index 58b7433..0ea73c3 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CreateTooltipContent: typeof import('./components/CreateTooltipContent.vue')['default']
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
@@ -29,6 +30,9 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     LinesControls: typeof import('./components/LinesControls.vue')['default']

From 5c520b048859cd035cdcf35f1463319b988b734b Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 10 Jul 2024 14:25:38 +1200
Subject: [PATCH 21/24] Fix a compilation issue.

---
 src/components/ScaffoldVuer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScaffoldVuer.vue b/src/components/ScaffoldVuer.vue
index 39dc340..15df890 100644
--- a/src/components/ScaffoldVuer.vue
+++ b/src/components/ScaffoldVuer.vue
@@ -1799,7 +1799,7 @@ export default {
      * Setting liveUpdates to true will update the tooltip location
      * at every rendering loop.
      */
-    showRegionTooltipWithObjects: function (label, zincObjects, regionPath, resetView, liveUpdates) 
+    showRegionTooltipWithObjects: function (label, zincObjects, regionPath, resetView, liveUpdates) {
       if (label && zincObjects && zincObjects.length > 0 && this.$module.scene) {
         return this.displayTooltipOfObjects(
           label,

From be1c49e516cc4be4a516e64c41bf3e930bb4ef70 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Wed, 10 Jul 2024 14:31:13 +1200
Subject: [PATCH 22/24] Update to the latest ZincJS.

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 94bf0ea..96c2211 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "vue": "^3.4.15",
         "vue-router": "^4.2.5",
         "vue3-component-svg-sprite": "^0.0.1",
-        "zincjs": "^1.8.5"
+        "zincjs": "^1.9.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.6.2",
@@ -7986,9 +7986,9 @@
       }
     },
     "node_modules/zincjs": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.8.5.tgz",
-      "integrity": "sha512-N1ObKH6A5VvgDym8poimbCQMGzB5fNYk7/XjBToFKW7OXClg0QRK77Pn1w4guiNql7VZwHQs74ByQMv9/d6PfQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.9.0.tgz",
+      "integrity": "sha512-9YG/jqjVhZECRK85ak8H0MAFU4pyjp+ZbxnHI0zs4s/dOqlhVk/KczwB6aKupjtxGGFx0HK8ujoUJH+gT6K/1w==",
       "dependencies": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",
diff --git a/package.json b/package.json
index cb7cd1c..f5a03be 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.8.5"
+    "zincjs": "^1.9.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

From 316069f79d7470a7ac33493972e67e59d3a564a7 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 11 Jul 2024 09:34:22 +1200
Subject: [PATCH 23/24] Turn create lines with normal off on demo app.

---
 src/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 8fc33a0..26a57d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -359,7 +359,7 @@ export default {
   data: function () {
     return {
       consoleOn: true,
-      createLinesWithNormal: true,
+      createLinesWithNormal: false,
       url: undefined,
       input: undefined,
       displayUI: true,
@@ -675,6 +675,7 @@ export default {
         //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);
     },
 
     onNavigated: function (data) {

From 3b425c607ccb50ae10328c2e7efe912864cf2ac1 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Thu, 11 Jul 2024 09:54:00 +1200
Subject: [PATCH 24/24] Fix an issue with an undeclared data value.

---
 src/App.vue                      | 2 +-
 src/components/LinesControls.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 26a57d7..0782460 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@
         :view-u-r-l="viewURL"
         :format="format"
         :marker-labels="markerLabels"
-        :enableLocalAnnotations="true"
+        :enableLocalAnnotations="false"
         @open-map="openMap"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
diff --git a/src/components/LinesControls.vue b/src/components/LinesControls.vue
index 7382ed4..8b3c285 100644
--- a/src/components/LinesControls.vue
+++ b/src/components/LinesControls.vue
@@ -139,6 +139,7 @@ export default {
       adjust: 0,
       pAdjust: 0,
       lengthScale: 0,
+      distance: 0,
       newDistance: 0, 
       width: 1,
       currentIndex: 0,