Merge pull request #158 from ddjnw1yu/offline-annotation

Offline annotation

Author: alan-wu

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.8.1-beta.0",
+  "version": "1.8.1-beta.3",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.4.1-beta.0",
+    "@abi-software/map-utilities": "^1.4.3-beta.3",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package.json

@@ -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,
           };
         }
       }

src/components/ScaffoldTooltip.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,8 +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,
+  getClickedObjects,
   getDeletableObjects,
   getDrawnAnnotations,
   getEditableLines,
@@ -805,6 +810,7 @@ export default {
       },
       openMapRef: undefined,
       backgroundIconRef: undefined,
+      annotationFeature: {},
       offlineAnnotationEnabled: false,
       offlineAnnotations: markRaw([]),
       authorisedUser: undefined,
@@ -1030,15 +1036,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);
-          }
         }
       }
     },
@@ -1129,8 +1131,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));
       }
@@ -1215,6 +1215,27 @@ 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) {
+        let annotation = payload
+        if (this._editingZincObject.isEditable) {
+          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.
@@ -1231,6 +1252,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));
           }
         }
@@ -1572,6 +1595,14 @@ export default {
           if (this.viewingMode === 'Annotation') {
             this.tData.label = id;
             this.tData.region = regionPath;
+            const zincObject = getClickedObjects(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;
+            }
             this.activateAnnotationMode(names, event);
           } else {
             if (this.$refs.scaffoldTreeControls) {
@@ -1965,13 +1996,16 @@ 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,
               createData: this.createData,
               confirmCreate: this.confirmCreate,
               cancelCreate: this.cancelCreate,
               confirmDelete: this.confirmDelete,
+              confirmComment: this.confirmComment
             });
             return;
           }
@@ -2000,7 +2034,9 @@ export default {
       let drawnFeatures;
       if (this.offlineAnnotationEnabled) {
         this.offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
-        drawnFeatures = this.offlineAnnotations.filter((offline) => offline.resource === this.url).map(offline => offline.feature);
+        drawnFeatures = this.offlineAnnotations.filter((offline) => {
+          return offline.resource === this.url && offline.feature.properties.drawn;
+        }).map(offline => offline.feature);
       } else {
         drawnFeatures = [];
         const drawn = await getDrawnAnnotations(this.annotator, this.userToken, this.url);

src/components/ScaffoldVuer.vue

@@ -47,6 +47,15 @@ export const getEditableLines = (event) => {
   return undefined;
 }
 
+export const getClickedObjects = (event) => {
+  const zincObjects = event.zincObjects;
+  if (zincObjects.length > 0 && zincObjects[0]) {
+    const zincObject = zincObjects[0];
+    return zincObject;
+  }
+  return undefined;
+}
+
 export const getDeletableObjects = (event) => {
   const zincObjects = event.zincObjects;
   if (zincObjects.length > 0 && zincObjects[0]) {
@@ -289,13 +298,17 @@ 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";
   } else if (zincObject.isLines2) {
     type = "MultiLineString";
+  } else {
+    type = "Feature";
   }
+  const drawn = type === "Feature" ? false : true;
+  const label = type === "Feature" ? "Feature annotation" : "Drawn annotation";
   if (type) {
     const coords = getCoordinatesForAnnotationFeature(zincObject);
     //Check if region ends with a slash
@@ -314,8 +327,8 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
       feature: {
         "id": featureID,
         "properties": {
-            "drawn": true,
-            "label": "Drawn annotation"
+            "drawn": drawn,
+            "label": label
         },
         "geometry": {
             "coordinates": coords,