@abi-software/scaffoldvuer 1.2.1 → 1.3.0

package/src/components/ScaffoldVuer.vue

@@ -14,9 +14,10 @@
       :visible="tData.visible"
       :x="tData.x"
       :y="tData.y"
-      :annotationDisplay="viewingMode === 'Annotation' && tData.active === true"
+      :annotationDisplay="annotationDisplay"
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
+      @confirm-delete="confirmDelete($event)"
     />
     <div
       id="organsDisplayArea"
@@ -26,78 +27,21 @@
       @keydown.66="backgroundChangeCallback"
     />
     <div v-show="displayUI && !isTransitioning">
-      <div
-        class="bottom-draw-control"
-        v-if="viewingMode === 'Annotation' && userInformation"
-      >
-        <el-popover
-          content="Comment"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          ref="commentPopover"
-          :visible="hoverVisibilities[9].value"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="comment"
-              class="icon-button shape"
-              :class="[createData.shape === '' ? 'active' : '']"
-              @click="toggleDrawing('')"
-              @mouseover="showHelpText(9)"
-              @mouseout="hideHelpText(9)"
-            />
-          </template>
-        </el-popover>
-        <el-popover
-          content="Draw Point"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          ref="drawPointPopover"
-          :visible="hoverVisibilities[10].value"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="drawPoint"
-              class="icon-button shape"
-              :class="[createData.shape === 'Point' ? 'active' : '']"
-              @click="toggleDrawing('Point')"
-              @mouseover="showHelpText(10)"
-              @mouseout="hideHelpText(10)"
-            />
-          </template>
-        </el-popover>
-        <el-popover
-          content="Draw Line"
-          placement="top"
-          :teleported="false"
-          trigger="manual"
-          width="80"
-          popper-class="flatmap-popper"
-          ref="drawLinePopover"
-          :visible="hoverVisibilities[11].value"
-        >
-          <template #reference>
-            <map-svg-icon
-              icon="drawLine"
-              class="icon-button shape"
-              :class="[createData.shape === 'Line' ? 'active' : '']"
-              @click="toggleDrawing('Line')"
-              @mouseover="showHelpText(11)"
-              @mouseout="hideHelpText(11)"
-            />
-          </template>
-        </el-popover>
-      </div>
+      <DrawToolbar
+        v-if="viewingMode === 'Annotation' && (userInformation || enableLocalAnnotations)"
+        :toolbarOptions="toolbarOptions"
+        :activeDrawTool="activeDrawTool"
+        :activeDrawMode="activeDrawMode"
+        :hoverVisibilities=hoverVisibilities
+        @clickToolbar="toggleDrawing"
+        @showTooltip="showHelpText"
+        @hideTooltip="hideHelpText"
+        ref="toolbarPopover"
+      />
       <el-popover
         v-if="displayWarning"
         ref="warningPopover"
-        :visible="hoverVisibilities[6].value"
+        :visible="hoverVisibilities[7].value"
         :content="warningMessage"
         placement="right"
         width="max-content"
@@ -108,8 +52,8 @@
           <div
             v-if="displayWarning"
             class="message-icon warning-icon"
-            @mouseover="showHelpText(6)"
-            @mouseout="hideHelpText(6)"
+            @mouseover="showHelpText(7)"
+            @mouseout="hideHelpText(7)"
           >
             <el-icon><el-icon-warning-filled /></el-icon>
             <span class="message-text">Beta</span>
@@ -118,7 +62,7 @@
       </el-popover>
       <el-popover
         v-if="displayLatestChanges"
-        :visible="hoverVisibilities[7].value"
+        :visible="hoverVisibilities[8].value"
         :content="latestChangesMessage"
         placement="right"
         :teleported="false"
@@ -130,8 +74,8 @@
           <div
             v-if="displayLatestChanges && latestChangesMessage"
             class="el-icon-warning message-icon latest-changesicon"
-            @mouseover="showHelpText(7)"
-            @mouseout="hideHelpText(7)"
+            @mouseover="showHelpText(8)"
+            @mouseout="hideHelpText(8)"
           >
             <el-icon><el-icon-warning-filled /></el-icon>
             <span class="message-text">What's new?</span>
@@ -139,7 +83,7 @@
         </template>
       </el-popover>
       <el-popover
-        :visible="hoverVisibilities[5].value"
+        :visible="hoverVisibilities[6].value"
         content="Change region visibility"
         placement="right"
         width="max-content"
@@ -149,9 +93,8 @@
         ref="regionVisibilityPopover"
       >
         <template #reference>
-          <tree-controls
-            ref="treeControls"
-            :help-mode="helpMode"
+          <ScaffoldTreeControls
+            ref="scaffoldTreeControls"
             :isReady="isReady"
             :show-colour-picker="showColourPicker"
             @object-selected="objectSelected"
@@ -161,13 +104,17 @@
         </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"
         ref="sliderPopover"
         width="max-content"
-        :visible="hoverVisibilities[4].value"
+        :visible="hoverVisibilities[5].value"
         content="Move the slider to animate the region"
         placement="top"
         :teleported="false"
@@ -383,7 +330,7 @@
       >
         <el-row>
           <el-popover
-            :visible="hoverVisibilities[8].value"
+            :visible="hoverVisibilities[3].value"
             content="Open new map"
             placement="right"
             :teleported="false"
@@ -398,15 +345,15 @@
                 ref="openMapRef"
                 icon="openMap"
                 class="icon-button open-map-button"
-                @mouseover="showHelpText(8)"
-                @mouseout="hideHelpText(8)"
+                @mouseover="showHelpText(3)"
+                @mouseout="hideHelpText(3)"
               />
             </template>
           </el-popover>
         </el-row>
         <el-row>
           <el-popover
-            :visible="hoverVisibilities[3].value"
+            :visible="hoverVisibilities[4].value"
             content="Change background color"
             placement="right"
             width="max-content"
@@ -420,8 +367,8 @@
                 ref="backgroundIconRef"
                 icon="changeBckgd"
                 class="icon-button"
-                @mouseover="showHelpText(3)"
-                @mouseout="hideHelpText(3)"
+                @mouseover="showHelpText(4)"
+                @mouseout="hideHelpText(4)"
               />
             </template>
           </el-popover>
@@ -441,11 +388,14 @@ import {
 } from '@element-plus/icons-vue'
 import PrimitiveControls from "./PrimitiveControls.vue";
 import ScaffoldTooltip from "./ScaffoldTooltip.vue";
-import TreeControls from "./TreeControls.vue";
+import ScaffoldTreeControls from "./ScaffoldTreeControls.vue";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
+import { DrawToolbar } from '@abi-software/map-utilities'
+import '@abi-software/map-utilities/dist/style.css'
 import {
   addUserAnnotationWithFeature,
   annotationFeaturesToPrimitives,
+  getDeletableObjects,
   getDrawnAnnotations,
   getEditableLines,
   getObjectsFromAnnotations,
@@ -495,10 +445,11 @@ export default {
     MapSvgSpriteColor,
     PrimitiveControls,
     ScaffoldTooltip,
-    TreeControls,
     ElIconWarningFilled,
     ElIconArrowDown,
     ElIconArrowLeft,
+    DrawToolbar,
+    ScaffoldTreeControls
   },
   setup(props) {
     const annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
@@ -719,12 +670,20 @@ export default {
       type: String,
       default: "https://mapcore-demo.org/current/flatmap/v3/"
     },
+    /**
+     * Enable local annotations
+     */
+     enableLocalAnnotations: {
+      type: Boolean,
+      default: false
+    },
   },
   provide() {
     return {
       flatmapAPI: this.flatmapAPI,
       scaffoldUrl: this.url,
       $annotator: this.annotator,
+      boundingDims: this.boundingDims,
     };
   },
   data: function () {
@@ -739,6 +698,7 @@ export default {
         y: 0,
         editingIndex: -1,
         faceIndex: -1,
+        toBeDeleted: false,
       },
       currentTime: 0.0,
       timeVarying: false,
@@ -753,15 +713,16 @@ export default {
         { value: false, ref: 'zoomInPopover' }, // 0
         { value: false, ref: 'zoomOutPopover' }, // 1
         { value: false, ref: 'zoomFitPopover' }, // 2
-        { value: false, ref: 'settingsPopover' }, // 3
-        { value: false, ref: 'sliderPopover' }, // 4
-        { value: false, ref: 'regionVisibilityPopover' }, // 5
-        { value: false, ref: 'warningPopover' }, // 6
-        { value: false, ref: 'whatsNewPopover' }, // 7
-        { value: false, ref: 'openMapPopover' }, // 8
-        { value: false, ref: 'commentPopover' }, //9
-        { value: false, ref: 'drawPointPopover' }, //10
-        { value: false, ref: 'drawLinePopover' }, //11
+        { value: false, ref: 'openMapPopover' }, // 3
+        { value: false, ref: 'settingsPopover' }, // 4
+        { value: false, ref: 'sliderPopover' }, // 5
+        { value: false, ref: 'regionVisibilityPopover' }, // 6
+        { value: false, ref: 'warningPopover' }, // 7
+        { value: false, ref: 'whatsNewPopover' }, // 8
+        { 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,
@@ -822,6 +783,19 @@ export default {
       openMapRef: undefined,
       backgroundIconRef: undefined,
       userInformation: undefined,
+      toolbarOptions: [
+        "Delete",
+        "Edit",
+        "Point",
+        "LineString",
+      ],
+      activeDrawTool: undefined,
+      activeDrawMode: undefined,
+      localAnnotationsList: markRaw([]),
+      boundingDims: {
+        centre: [0, 0, 0],
+        size:[1, 1, 1],
+      },
     };
   },
   watch: {
@@ -923,11 +897,12 @@ export default {
   mounted: function () {
     this.openMapRef = shallowRef(this.$refs.openMapRef);
     this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef);
-    this.$refs.treeControls.setModule(this.$module);
+    this.$refs.scaffoldTreeControls.setModule(this.$module);
     let eventNotifier = new EventNotifier();
     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(
@@ -947,6 +922,10 @@ export default {
   },
   computed: {
     ...mapState(useMainStore,  ['userToken']),
+    annotationDisplay: function() {
+      return this.viewingMode === 'Annotation' && this.tData.active === true &&
+        (this.activeDrawMode === 'Edit' || this.activeDrawMode === 'Delete');
+    }
   },
   methods: {
     /**
@@ -975,6 +954,38 @@ 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) {
+      if (this.$module.scene) {
+        // zincObjectAdded will be alled in sequential callback
+        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.
+        if (objects.length === 0) {
+          this.$_searchIndex.removeZincObject(zincObject, zincObject.uuid);
+          this.removeFromLocalAnnotationList(regionPath, groupName);
+        }
+      }
+    },
     /**
      * Internal only.
      * Add regions to search index.
@@ -1037,10 +1048,42 @@ export default {
      * Function to clear current scene, the tree controls and the search index.
      */
     clearScene: function () {
-      if (this.$refs.treeControls) this.$refs.treeControls.clear();
+      if (this.$refs.scaffoldTreeControls) this.$refs.scaffoldTreeControls.clear();
       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);
+      }
+      this.$emit('userPrimitivesUpdated', {region, group, zincObject});
+    },
+    /**
+     * @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.
@@ -1053,10 +1096,10 @@ export default {
             payload.region,
             payload.group,
             this.createData.points,
-            undefined,
+            payload.group,
             0x0022ee,
           );
-        } else if (payload.shape === "Line") {
+        } else if (payload.shape === "LineString") {
           object = this.$module.scene.createLines(
             payload.region,
             payload.group,
@@ -1065,17 +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;
-            addUserAnnotationWithFeature(this.annotator, this.userToken, this._editingZincObject,
-              region, group, this.url, "Position Updated");
+            this.addAndEditAnnotations(region, group, this._editingZincObject, "Position Updated");
           }
         }
         if (object) {
-          addUserAnnotationWithFeature(this.annotator, this.userToken, object.zincObject,
-            payload.region, payload.group, this.url, "Create");
+          this.addAndEditAnnotations(payload.region, payload.group, object.zincObject, "Create");
           object.zincObject.isEditable = true;
           this.tData.region = payload.region;
           this.tData.label = payload.group;
@@ -1084,6 +1125,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;
@@ -1091,6 +1136,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;
@@ -1100,6 +1146,25 @@ export default {
         this._tempPoint = undefined;
       }
     },
+    /**
+     * Internal only.
+     * 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);
+        }
+      }
+      this.cancelCreate();
+    },  
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
         if (val) {
@@ -1191,12 +1256,15 @@ export default {
      *
      * @vuese
      */
-    toggleDrawing: function (shapeName) {
-      if (shapeName === this.createData.shape) {
-        this.createData.shape = "";
+    toggleDrawing: function (type, icon) {
+      this.createData.toBeDeleted = false;
+      if (type === 'mode') {
+        this.activeDrawMode = icon;
+        this.createData.shape = '';
         this.$module.selectObjectOnPick = true;
-      } else {
-        this.createData.shape = shapeName;
+      } else if (type === 'tool') {
+        this.activeDrawTool = icon;
+        this.createData.shape = this.activeDrawTool;
         this.$module.selectObjectOnPick = false;
       }
     },
@@ -1258,7 +1326,7 @@ export default {
     },
     createEditTemporaryLines: function(worldCoords) {
       if (worldCoords) {
-        if (this.createData.shape === "Line" || this.createData.editingIndex > -1) {
+        if (this.createData.shape === "LineString" || this.createData.editingIndex > -1) {
           if (this.createData.points.length === 1)  {
             if (this._tempLine) {
               const positionAttribute = this._tempLine.geometry.getAttribute( 'position' );
@@ -1277,7 +1345,7 @@ export default {
         if (data[0].extraData.worldCoords) {
           if (this.createData.shape === "Point") {
             this.drawPoint(data[0].extraData.worldCoords, data);
-          } else if (this.createData.shape === "Line" ||
+          } else if (this.createData.shape === "LineString" ||
             this.createData.editingIndex > -1) {
             this.drawLine(data[0].extraData.worldCoords, data);
           }
@@ -1285,19 +1353,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);
+        }
       }
     },    
     /**
@@ -1327,7 +1404,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) {
@@ -1338,13 +1416,27 @@ 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;
+            }
+          }
+          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);
           }
-          this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
         }
       } else {
         this.showRegionTooltipWithAnnotations(event.identifiers, true, true);
@@ -1362,89 +1454,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.treeControls) {
-            if (names.length > 0) {
-              //this.$refs.treeControls.changeActiveByNames(names, region, false);
-              this.$refs.treeControls.updateActiveUI(zincObjects);
-              this.updatePrimitiveControls(zincObjects);
-            } else {
-              this.hideRegionTooltip();
-              this.$refs.treeControls.removeActive(false);
+      if (!(this.createData.toBeConfirmed || this.createData.toBeDeleted)) {
+        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.treeControls) {
-            if (names.length > 0) {
-              //this.$refs.treeControls.changeHoverByNames(names, region, false);
-              this.$refs.treeControls.updateHoverUI(zincObjects);
-            } else {
-              this.$refs.treeControls.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);
         }
       }
     },
@@ -1521,11 +1614,11 @@ export default {
     changeActiveByName: function (names, region, propagate) {
       const isArray = Array.isArray(names);
       if (names === undefined || (isArray && names.length === 0)) {
-        this.$refs.treeControls.removeActive(propagate);
+        this.$refs.scaffoldTreeControls.removeActive(propagate);
       } else {
         let array = names;
         if (!isArray) array = [array];
-        this.$refs.treeControls.changeActiveByNames(array, region, propagate);
+        this.$refs.scaffoldTreeControls.changeActiveByNames(array, region, propagate);
       }
     },
     /**
@@ -1536,11 +1629,11 @@ export default {
     changeHighlightedByName: function (names, region, propagate) {
       const isArray = Array.isArray(names);
       if (names === undefined || (isArray && names.length === 0)) {
-        this.$refs.treeControls.removeHover(propagate);
+        this.$refs.scaffoldTreeControls.removeHover(propagate);
       } else {
         let array = names;
         if (!isArray) array = [array];
-        this.$refs.treeControls.changeHoverByNames(array, region, propagate);
+        this.$refs.scaffoldTreeControls.changeHoverByNames(array, region, propagate);
       }
     },
     /**
@@ -1565,26 +1658,11 @@ export default {
       const activePopoverObj = this.hoverVisibilities[this.helpModeActiveIndex];
 
       if (activePopoverObj) {
+        const popoverRefsId = activePopoverObj?.refs;
         const popoverRefId = activePopoverObj?.ref;
-        const popoverRef = this.$refs[popoverRefId];
-
-        if (popoverRef) {
-          // Open pathway drawer if the tooltip is inside or beside
-          const { parentElement, nextElementSibling } = popoverRef.$el;
-          const isPathwayContainer = (element) => {
-            return element && (
-              element.classList.contains('pathway-container') ||
-              element.classList.contains('pathway-location')
-            );
-          };
-
-          if (
-            isPathwayContainer(parentElement) ||
-            isPathwayContainer(nextElementSibling)
-          ) {
-            this.drawerOpen = true;
-          }
-        } else {
+        const popoverRef = this.$refs[popoverRefsId ? popoverRefsId : popoverRefId];
+
+        if (!popoverRef) {
           // skip the unavailable tooltips
           this.helpModeActiveIndex += 1;
         }
@@ -1807,6 +1885,10 @@ export default {
               }
             }
           });
+        } else if (this.viewingMode === "Exploration") {
+          this.activeDrawTool = undefined;
+          this.activeDrawMode = undefined;
+          this.createData.shape = "";
         }
         if ((this.viewingMode === "Exploration") ||
           (this.viewingMode === "Annotation") &&
@@ -1974,10 +2056,11 @@ export default {
           if (options.visibility) {
             // Some UIs may not be ready at this time.
             this.$nextTick(() => {
-              this.$refs.treeControls.setState(options.visibility);
+              this.$refs.scaffoldTreeControls.setState(options.visibility);
             });
           }
         }
+        this.localAnnotationsList.length = 0;
         this.updateSettingsfromScene();
         this.$module.updateTime(0.01);
         this.$module.updateTime(0);
@@ -1986,8 +2069,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;
       };
     },
@@ -2004,8 +2095,8 @@ export default {
         viewport: undefined,
         visibility: undefined,
       };
-      if (this.$refs.treeControls)
-        state.visibility = this.$refs.treeControls.getState();
+      if (this.$refs.scaffoldTreeControls)
+        state.visibility = this.$refs.scaffoldTreeControls.getState();
       if (this.$module.scene) {
         let zincCameraControls = this.$module.scene.getZincCameraControls();
         state.viewport = zincCameraControls.getCurrentViewport();
@@ -2034,7 +2125,7 @@ export default {
                   .getZincCameraControls()
                   .setCurrentCameraSettings(state.viewport);
               if (state.visibility)
-                this.$refs.treeControls.setState(state.visibility);
+                this.$refs.scaffoldTreeControls.setState(state.visibility);
             } else {
               this.$module.setFinishDownloadCallback(
                 this.setURLFinishCallback({
@@ -2056,6 +2147,45 @@ 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) {
+        //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.
+        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
@@ -2070,7 +2200,7 @@ export default {
         let visibility =
           state && state.visibility ? state.visibility : undefined;
         this._currentURL = newValue;
-        if (this.$refs.treeControls) this.$refs.treeControls.clear();
+        if (this.$refs.scaffoldTreeControls) this.$refs.scaffoldTreeControls.clear();
         this.loading = true;
         this.timeVarying = false;
         this.isReady = false;
@@ -2124,12 +2254,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) {
@@ -2328,17 +2460,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;
 }
@@ -2452,15 +2573,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 {