@abi-software/scaffoldvuer 1.8.1-beta.1 → 1.8.1-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.8.1-beta.1",
+  "version": "1.8.1-beta.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/ScaffoldTooltip.vue

@@ -26,6 +26,7 @@
           ref="annotationTooltip"
           :annotationDisplay="true"
           :annotationEntry="annotationEntry"
+          @annotation="$emit('confirm-comment', $event)"
         />
         <div v-if="createData.toBeDeleted" class="delete-container">
           <el-row>
@@ -104,6 +105,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    annotationFeature: {
+      type: Object,
+      default: {},
+    },
+    offlineAnnotationEnabled: {
+      type: Boolean,
+      default: false,
+    },
     region: {
       type: String,
       default: "",
@@ -155,6 +164,8 @@ export default {
             "featureId": region + this.label,
             "resourceId": this.scaffoldUrl,
             "resource": this.scaffoldUrl,
+            "feature": this.annotationFeature,
+            "offline": this.offlineAnnotationEnabled,
           };
         }
       }

package/src/components/ScaffoldVuer.vue

@@ -15,8 +15,11 @@
       :x="tData.x"
       :y="tData.y"
       :annotationDisplay="annotationDisplay"
+      :annotationFeature="annotationFeature"
+      :offlineAnnotationEnabled="offlineAnnotationEnabled"
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
+      @confirm-comment="confirmComment($event)"
       @confirm-delete="confirmDelete()"
       @tooltip-hide="onTooltipHide()"
     />
@@ -399,9 +402,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 {
+  createNewAnnotationsWithFeatures,
   addUserAnnotationWithFeature,
   annotationFeaturesToPrimitives,
-  getDeletableObjects,
+  getEditableObjects,
   getDrawnAnnotations,
   getEditableLines,
   getObjectsFromAnnotations,
@@ -805,6 +809,7 @@ export default {
       },
       openMapRef: undefined,
       backgroundIconRef: undefined,
+      annotationFeature: {},
       offlineAnnotationEnabled: false,
       offlineAnnotations: markRaw([]),
       authorisedUser: undefined,
@@ -1020,15 +1025,11 @@ export default {
     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);
-          if (this.offlineAnnotationEnabled) {
-            this.removeFromOfflineAnnotation(regionPath, groupName);
-          }
         }
       }
     },
@@ -1119,8 +1120,6 @@ export default {
         }
         annotation.region = regionPath;
         this.offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
-        //Remove previous entry if there is matching region and group
-        this.removeFromOfflineAnnotation(regionPath, group);
         this.offlineAnnotations.push(annotation);
         sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
       }
@@ -1205,6 +1204,25 @@ export default {
         this.$emit("annotation-close");
       }
     },
+    /**
+     * Internal only.
+     * Confirm delete of user created primitive.
+     * This is only called from callback.
+     */
+    confirmComment: function (payload) {
+      if (this._editingZincObject?.isEditable) {
+        let annotation = payload
+        this.existDrawnFeatures = markRaw(this.existDrawnFeatures.filter(feature => feature.id !== annotation.item.id));
+        this.existDrawnFeatures.push(payload.feature);
+        if (this.offlineAnnotationEnabled) {
+          annotation.group = this._editingZincObject.groupName;;
+          annotation.region = this._editingZincObject.region.getFullPath();
+          this.offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
+          this.offlineAnnotations.push(annotation);
+          sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
+        }
+      }
+    },
     /**
      * Internal only.
      * Confirm delete of user created primitive.
@@ -1221,6 +1239,8 @@ export default {
           const childRegion = this.$module.scene.getRootRegion().findChildFromPath(regionPath);
           childRegion.removeZincObject(this._editingZincObject);
           if (this.offlineAnnotationEnabled) {
+            this.offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
+            this.offlineAnnotations = this.offlineAnnotations.filter(offline => offline.item.id !== annotation.item.id);
             sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
           }
         }
@@ -1493,6 +1513,14 @@ export default {
             }
           }
         } else {
+          const zincObject = getEditableObjects(event);
+          this._editingZincObject = zincObject;
+          if (zincObject) {
+            const regionPath = this._editingZincObject.region.getFullPath() + "/";
+            const group = this._editingZincObject.groupName;
+            this.annotationFeature = createNewAnnotationsWithFeatures(this._editingZincObject, 
+              regionPath, group, this.url, '').feature;
+          }
           //Make sure the tooltip is displayed with annotaion mode
           if (this.activeDrawMode === "Edit") {
             const editing = getEditableLines(event);
@@ -1501,10 +1529,8 @@ export default {
                 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 !== "Point" && this.activeDrawMode !== "LineString") {
@@ -1955,6 +1981,8 @@ export default {
               "featureId": region + this.tData.label,
               "resourceId": this.url,
               "resource": this.url,
+              "feature": this.annotationFeature,
+              "offline": this.offlineAnnotationEnabled,
             };
             this.$emit('annotation-open', {
               annotationEntry: annotationEntry,
@@ -1962,6 +1990,7 @@ export default {
               confirmCreate: this.confirmCreate,
               cancelCreate: this.cancelCreate,
               confirmDelete: this.confirmDelete,
+              confirmComment: this.confirmComment
             });
             return;
           }

package/src/components.d.ts

@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    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']
@@ -20,7 +19,6 @@ declare module 'vue' {
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
     ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
-    ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -28,9 +26,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']

package/src/scripts/Utilities.js

@@ -47,7 +47,7 @@ export const getEditableLines = (event) => {
   return undefined;
 }
 
-export const getDeletableObjects = (event) => {
+export const getEditableObjects = (event) => {
   const zincObjects = event.zincObjects;
   if (zincObjects.length > 0 && zincObjects[0]) {
     const zincObject = zincObjects[0];
@@ -289,7 +289,7 @@ const getCoordinatesForAnnotationFeature = (zincObject) => {
   return coords;
 }
 
-const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl, comment) => {
+export const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl, comment) => {
   let type = undefined;
   if (zincObject.isPointset) {
     type = "MultiPoint";