@abi-software/scaffoldvuer 1.8.1-isan.0 → 1.9.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.8.1-isan.0",
+  "version": "1.9.0-beta.0",
   "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.5.0-beta.0",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
@@ -54,7 +54,7 @@
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.12.4"
+    "zincjs": "^1.13.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -156,6 +156,36 @@
           </el-col>
         </el-row>
 
+        <el-row :gutter="20" justify="center" align="middle">
+          <el-col :span="auto">
+            <el-button size="small" @click="() => fitBoundingBox=!fitBoundingBox">
+              {{ fitBoundingBox ? 'Unfit' : 'Fit' }} BoundingBox
+            </el-button>
+          </el-col>
+          <el-col :span="auto">
+            <el-button-group>
+              <el-button size="small" @click="createAxisDisplay('axes', fitBoundingBox)">
+                Create Axes CoordSystem
+              </el-button>
+            </el-button-group>
+          </el-col>
+          <el-col :span="auto">
+            <el-button-group>
+              <el-button size="small" @click="enableAxisDisplay(true, false)">
+                Enable CoordSystem
+              </el-button>
+              <el-button size="small" @click="enableAxisDisplay(true, true )">
+                Enable MiniAxes CoordSystem
+              </el-button>
+            </el-button-group>
+          </el-col>
+          <el-col :span="auto">
+              <el-button size="small" @click="enableAxisDisplay(false, false)">
+                Disable CoordSystem
+              </el-button>
+          </el-col>
+        </el-row>
+
         <el-row justify="center" align="middle">
           <el-col>
             <el-row :gutter="20" justify="center" align="middle">
@@ -417,6 +447,7 @@ export default {
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
       auto: NaN,
       annotator: markRaw(new AnnotationService(`https://mapcore-demo.org/devel/flatmap/v4/annotator`)),
+      fitBoundingBox: false
     };
   },
   watch: {
@@ -472,6 +503,12 @@ export default {
     this.$refs.dropzone.revokeURLs();
   },
   methods: {
+    enableAxisDisplay: function (enable, miniaxes) {
+      this.$refs.scaffold.enableAxisDisplay(enable, miniaxes);
+    },
+    createAxisDisplay: function (type, fitBoundingBox) {
+      this.$refs.scaffold.createAxisDisplay(fitBoundingBox);
+    },
     exportGLTF: function () {
       this.$refs.scaffold.exportGLTF(false).then((data) => {
         const filename = 'export' + JSON.stringify(new Date()) + '.gltf';

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: "",
@@ -130,7 +139,7 @@ export default {
   data: function () {
     return {
       display: false,
-      annotationEntry: [],
+      annotationEntry: { },
       ElIconDelete: shallowRef(ElIconDelete),
     };
   },
@@ -151,16 +160,18 @@ export default {
         this.display = true;
         if (this.annotationDisplay) {
           const region = this.region ? this.region +"/" : "";
-          this.annotationEntry.push({
+          this.annotationEntry = {
             "featureId": region + this.label,
             "resourceId": this.scaffoldUrl,
             "resource": this.scaffoldUrl,
-          });
+            "feature": this.annotationFeature,
+            "offline": this.offlineAnnotationEnabled,
+          };
         }
       }
       else {
         this.display = false;
-        this.annotationEntry = [];
+        this.annotationEntry = { };
       }
     },
     hideTriggered: function() {

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()"
     />
@@ -311,7 +314,7 @@
               {{ modeDescription }}
             </el-row>
             <el-row v-if="viewingMode === 'Annotation' && offlineAnnotationEnabled" class="viewing-mode-description">
-              (Offline annotate)
+              (Anonymous annotate)
             </el-row>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
@@ -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,
@@ -970,6 +976,16 @@ export default {
     },
   },
   methods: {
+    enableAxisDisplay: function (enable, miniaxes) {
+      if (this.$module.scene) {
+        this.$module.scene.enableAxisDisplay(enable, miniaxes);
+      }
+    },
+    createAxisDisplay: function (fit) {
+      if (this.$module.scene) {
+        this.$module.scene.createAxisDisplay(fit);
+      }
+    },
     /**
      * @public
      * Call this to manually add a zinc object into the current scene.
@@ -1020,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);
-          }
         }
       }
     },
@@ -1118,11 +1130,9 @@ export default {
           regionPath = regionPath.slice(0, -1);
         }
         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 = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
         this.offlineAnnotations.push(annotation);
-        sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
+        sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
       }
       this.$emit('userPrimitivesUpdated', {region, group, zincObject});
     },
@@ -1205,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('anonymous-annotation')) || [];
+          this.offlineAnnotations.push(annotation);
+          sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
+        }
+      }
+    },
     /**
      * Internal only.
      * Confirm delete of user created primitive.
@@ -1221,7 +1252,9 @@ export default {
           const childRegion = this.$module.scene.getRootRegion().findChildFromPath(regionPath);
           childRegion.removeZincObject(this._editingZincObject);
           if (this.offlineAnnotationEnabled) {
-            sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
+            this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
+            this.offlineAnnotations = this.offlineAnnotations.filter(offline => offline.item.id !== annotation.item.id);
+            sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
           }
         }
       }
@@ -1562,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) {
@@ -1951,17 +1992,20 @@ export default {
             );
           } else {
             const region = this.tData.region ? this.tData.region +"/" : "";
-            const annotationEntry = [{
+            const annotationEntry = {
               "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;
           }
@@ -1989,8 +2033,10 @@ export default {
     addAnnotationFeature: async function () {
       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);
+        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
+        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);
@@ -2222,7 +2268,7 @@ export default {
           this.backgroundChangeCallback(options.background);
         }
         if (options.offlineAnnotations) {
-          sessionStorage.setItem('offline-annotation', options.offlineAnnotations);
+          sessionStorage.setItem('anonymous-annotation', options.offlineAnnotations);
         }
         if (options.viewingMode) {
           this.changeViewingMode(options.viewingMode);
@@ -2266,6 +2312,8 @@ export default {
         this.boundingDims.centre = centre;
         this.boundingDims.size = size;
         this.$nextTick(() => this.restoreSettings(options) );
+        //this.$module.scene.createAxisDisplay(false);
+        //this.$module.scene.enableAxisDisplay(true, true);
         this.isReady = true;
       };
     },
@@ -2294,7 +2342,7 @@ export default {
         state.search = {...this.lastSelected};
       }
       if (this.offlineAnnotationEnabled) {
-        state.offlineAnnotations = sessionStorage.getItem('offline-annotation');
+        state.offlineAnnotations = sessionStorage.getItem('anonymous-annotation');
       }
       return state;
     },
@@ -2313,7 +2361,7 @@ export default {
             viewport: state.viewport,
             visibility: state.visibility,
             background: state.background,
-            viewingMode: this.viewingMode,
+            viewingMode: state.viewingMode,
             search: state.search,
             offlineAnnotations: state.offlineAnnotations,
           });
@@ -2384,7 +2432,7 @@ export default {
         annotationsList.forEach((annotation) => {
           this.offlineAnnotations.push({...annotation});
         });
-        sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
+        sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
       }
     },
 

package/src/scripts/Utilities.js

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