@abi-software/scaffoldvuer 1.8.0 → 1.8.1-beta.0

package/package.json

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

package/src/App.vue

@@ -27,7 +27,6 @@
         :view-u-r-l="viewURL"
         :format="format"
         :marker-labels="markerLabels"
-        :enableLocalAnnotations="false"
         @open-map="openMap"
         @on-error="onError"
         @on-ready="onReady"
@@ -140,7 +139,7 @@
 
         <el-row :gutter="20" justify="center" align="middle">
           <el-col :span="auto">
-            <el-button size="small" @click="exportLocalAnnotations()">
+            <el-button size="small" @click="exportOfflineAnnotations()">
               Export Annotations
             </el-button>
           </el-col>
@@ -151,7 +150,7 @@
                   id="annotations-upload"
                   type="file"
                   accept="application/json"
-                  @change="importLocalAnnotations" 
+                  @change="importOfflineAnnotations" 
                 />
               </el-button>
           </el-col>
@@ -491,16 +490,16 @@ export default {
         hrefElement.remove();
       });
     },
-    exportLocalAnnotations: function() {
-      const annotations = this.$refs.scaffold.getLocalAnnotations();
+    exportOfflineAnnotations: function() {
+      const annotations = this.$refs.scaffold.getOfflineAnnotations();
       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);
+      this.$refs.scaffold.importOfflineAnnotations(annotationsList);
     },
-    importLocalAnnotations: function() {
+    importOfflineAnnotations: function() {
       const selectedFile = document.getElementById("annotations-upload").files[0];
       const reader = new FileReader();
       reader.onload = this.onReaderLoad;

package/src/components/ScaffoldTreeControls.vue

@@ -155,6 +155,17 @@ export default {
         return data;
       }
     },
+    removeRegion: function (label) {
+      if (this.treeData[0].children) {
+        for (let i = 0; i < this.treeData[0].children.length; i++) {
+          if (this.treeData[0].children[i].label === label) {
+            this.treeData[0].children.splice(i, 1);
+            this.nodeNumbers--;
+            return;
+          }
+        }
+      }
+    },
     /**
      * This is called when a new zinc object is read into the scene.
      */

package/src/components/ScaffoldVuer.vue

@@ -29,7 +29,7 @@
     />
     <div v-show="displayUI && !isTransitioning">
       <DrawToolbar
-        v-if="viewingMode === 'Annotation' && (userInformation || enableLocalAnnotations)"
+        v-if="viewingMode === 'Annotation' && (authorisedUser || offlineAnnotate)"
         :toolbarOptions="toolbarOptions"
         :activeDrawTool="activeDrawTool"
         :activeDrawMode="activeDrawMode"
@@ -310,6 +310,9 @@
             <el-row class="viewing-mode-description">
               {{ modeDescription }}
             </el-row>
+            <el-row v-if="viewingMode === 'Annotation' && offlineAnnotate" class="viewing-mode-description">
+              (Offline annotate)
+            </el-row>
           </el-row>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText"> Change background </el-row>
@@ -698,13 +701,6 @@ export default {
       type: String,
       default: "https://mapcore-demo.org/current/flatmap/v3/"
     },
-    /**
-     * Enable local annotations
-     */
-     enableLocalAnnotations: {
-      type: Boolean,
-      default: false
-    },
   },
   provide() {
     return {
@@ -809,16 +805,18 @@ export default {
       },
       openMapRef: undefined,
       backgroundIconRef: undefined,
-      userInformation: undefined,
+      offlineAnnotate: false,
+      offlineAnnotation: markRaw([]),
+      authorisedUser: undefined,
       toolbarOptions: [
         "Delete",
         "Edit",
         "Point",
         "LineString",
       ],
+      existDrawnFeatures: markRaw([]), // Store all exist drawn features
       activeDrawTool: undefined,
       activeDrawMode: undefined,
-      localAnnotationsList: markRaw([]),
       boundingDims: {
         centre: [0, 0, 0],
         size:[1, 1, 1],
@@ -963,7 +961,7 @@ export default {
     modeDescription: function () {
       let description = this.viewingModes[this.viewingMode];
       if (this.viewingMode === 'Annotation') {
-        if (this.userInformation) {
+        if (this.authorisedUser) {
           return description[1]
         }
         return description[0]
@@ -1005,12 +1003,12 @@ export default {
      * 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];
+    removeFromOfflineAnnotation: function(regionPath, groupName) {
+      for (let i = 0; i < this.offlineAnnotation.length; i++) {
+        const annotation = this.offlineAnnotation[i];
         if (annotation.region === regionPath &&
           annotation.group === groupName) {
-          this.localAnnotationsList.splice(i, 1);
+          this.offlineAnnotation.splice(i, 1);
           return;
         }
       }
@@ -1028,7 +1026,9 @@ export default {
         //Remove relevant objects from the rest of the app.
         if (objects.length === 0) {
           this.$_searchIndex.removeZincObject(zincObject, zincObject.uuid);
-          this.removeFromLocalAnnotationList(regionPath, groupName);
+          if (this.offlineAnnotate) {
+            this.removeFromOfflineAnnotation(regionPath, groupName);
+          }
         }
       }
     },
@@ -1109,16 +1109,20 @@ export default {
     addAndEditAnnotations: function (region, group, zincObject, comment) {
       const annotation = addUserAnnotationWithFeature(this.annotator, this.userToken, zincObject,
         region, group, this.url, comment);
-      if (this.enableLocalAnnotations) {
+      this.existDrawnFeatures = markRaw(this.existDrawnFeatures.filter(feature => feature.id !== annotation.item.id));
+      this.existDrawnFeatures.push(annotation.feature);
+      if (this.offlineAnnotate) {
         annotation.group = group;
         let regionPath = region;
         if (regionPath.slice(-1) === "/") {
           regionPath = regionPath.slice(0, -1);
         }
         annotation.region = regionPath;
+        this.offlineAnnotation = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
         //Remove previous entry if there is matching region and group
-        this.removeFromLocalAnnotationList(regionPath, group);
-        this.localAnnotationsList.push(annotation);
+        this.removeFromOfflineAnnotation(regionPath, group);
+        this.offlineAnnotation.push(annotation);
+        sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotation));
       }
       this.$emit('userPrimitivesUpdated', {region, group, zincObject});
     },
@@ -1206,16 +1210,19 @@ export default {
      * Confirm delete of user created primitive.
      * This is only called from callback.
      */
-    confirmDelete: function() {
+    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);
+          this.existDrawnFeatures = markRaw(this.existDrawnFeatures.filter(feature => feature.id !== annotation.item.id));
+          const childRegion = this.$module.scene.getRootRegion().findChildFromPath(regionPath);
           childRegion.removeZincObject(this._editingZincObject);
+          if (this.offlineAnnotate) {
+            sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotation));
+          }
         }
       }
       this.cancelCreate();
@@ -1329,7 +1336,6 @@ export default {
         this.createData.shape = '';
         this.$module.selectObjectOnPick = true;
       } else if (type === 'tool') {
-        if (this.annotationDisplay) return;
         this.activeDrawTool = icon;
         this.createData.shape = this.activeDrawTool ? this.activeDrawTool : '';
         this.$module.selectObjectOnPick = false;
@@ -1475,7 +1481,7 @@ export default {
       }
     },
     activateAnnotationMode: function(names, event) {
-      if (this.userInformation || this.enableLocalAnnotations) {
+      if (this.authorisedUser || this.offlineAnnotate) {
         this.createData.toBeDeleted = false;
         if ((this.createData.shape !== "") || (this.createData.editingIndex > -1)) {
           // Create new shape bsaed on current settings
@@ -1964,6 +1970,41 @@ export default {
       this.hideRegionTooltip();
       return false;
     },
+    clearAnnotationFeature: function () {
+      const annotations = this.getOfflineAnnotations();
+      const featureGroups = this.existDrawnFeatures.map(feature => decodeURIComponent(feature.id).split("/").pop());
+      featureGroups.forEach((name) => {
+        const zincObject = this.$module.scene.findObjectsWithGroupName(name, false);
+        if (zincObject && zincObject.length) {
+          const regionPath = zincObject[0].region.getFullPath() + "/";
+          const childRegion = this.$module.scene.getRootRegion().findChildFromPath(regionPath);
+          childRegion.removeZincObject(zincObject[0]);
+        }
+      })
+      this.$refs.scaffoldTreeControls.removeRegion('__annotation');
+      // Offline annotations are removed when switch viewing mode
+      // Restore data in case need to save settings, doesn't affect anything
+      this.offlineAnnotation = annotations;
+    },
+    addAnnotationFeature: async function () {
+      let drawnFeatures;
+      if (this.offlineAnnotate) {
+        this.offlineAnnotation = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
+        drawnFeatures = this.offlineAnnotation.filter((offline) => offline.resource === this.url).map(offline => offline.feature);
+      } else {
+        drawnFeatures = [];
+        const drawn = await getDrawnAnnotations(this.annotator, this.userToken, this.url);
+        if (drawn && drawn.features) {
+          drawnFeatures = [...drawn.features];
+        }
+        const drawnEncode = await getDrawnAnnotations(this.annotator, this.userToken, encodeURIComponent(this.url));
+        if (drawnEncode && drawnEncode.features) {
+          drawnFeatures = [...drawnFeatures, ...drawnEncode.features];
+        }
+      }
+      this.existDrawnFeatures = markRaw(drawnFeatures);
+      annotationFeaturesToPrimitives(this.$module.scene, drawnFeatures);
+    },
     /**
      * Callback on viewing mode change
      * Optional, can be used to update the view mode.
@@ -1973,35 +2014,26 @@ export default {
         if (modeName) {
           this.viewingMode = modeName;
         }
+        this.clearAnnotationFeature();
         if (this.viewingMode === "Annotation") {
-          let authenticated = false;
-          if (this.userInformation) {
-            authenticated = true;
-          }
-          this.userInformation = undefined;
+          this.loading = true;
           this.annotator.authenticate(this.userToken).then((userData) => {
             if (userData.name && userData.email && userData.canUpdate) {
-              this.userInformation = userData;
-              //Only draw annotations stored in the server on initial authentication
-              if (!authenticated) {
-                getDrawnAnnotations(this.annotator, this.userToken, this.url).then((payload) => {
-                  if (payload && payload.features) {
-                    annotationFeaturesToPrimitives(this.$module.scene, payload.features);
-                  }
-                });
-                //Support previously supported encoded resource
-                getDrawnAnnotations(this.annotator, this.userToken, encodeURIComponent(this.url)).then((payload) => {
-                  if (payload && payload.features) {
-                    annotationFeaturesToPrimitives(this.$module.scene, payload.features);
-                  }
-                });
-              }
+              this.authorisedUser = userData;
+              this.offlineAnnotate = false;
+            } else {
+              this.authorisedUser = undefined;
+              this.offlineAnnotate = true;
             }
+            this.addAnnotationFeature();
+            this.loading = false;
           });
-        } else if (this.viewingMode === "Exploration") {
-          this.activeDrawTool = undefined;
-          this.activeDrawMode = undefined;
-          this.createData.shape = "";
+        } else {
+          if (this.viewingMode === "Exploration") {
+            this.activeDrawTool = undefined;
+            this.activeDrawMode = undefined;
+            this.createData.shape = "";
+          }
         }
         if ((this.viewingMode === "Exploration") ||
           (this.viewingMode === "Annotation") &&
@@ -2189,6 +2221,11 @@ export default {
         if (options.background) {
           this.backgroundChangeCallback(options.background);
         }
+        if (options.offlineAnnotation) {
+          if (options.offlineAnnotation.expiry > new Date().getTime()) {
+            sessionStorage.setItem('offline-annotation', options.offlineAnnotation.value);
+          }
+        }
         if (options.viewingMode) {
           this.changeViewingMode(options.viewingMode);
         }
@@ -2209,7 +2246,7 @@ export default {
     },
     setURLFinishCallback: function (options) {
       return () => {
-        this.localAnnotationsList.length = 0;
+        this.offlineAnnotation.length = 0;
         this.updateSettingsfromScene();
         this.$module.updateTime(0.01);
         this.$module.updateTime(0);
@@ -2258,6 +2295,16 @@ export default {
       if (this.lastSelected && this.lastSelected.group) {
         state.search = {...this.lastSelected};
       }
+      if (this.offlineAnnotate) {
+        if (!sessionStorage.getItem('offline-annotation-expiry')) {
+          const expiry = new Date().getTime() + 24 * 60 * 60 * 1000;
+          sessionStorage.setItem('offline-annotation-expiry', expiry);
+        }
+        state.offlineAnnotation = {
+          expiry: sessionStorage.getItem('offline-annotation-expiry'),
+          value: sessionStorage.getItem('offline-annotation'),
+        };
+      }
       return state;
     },
     /**
@@ -2277,6 +2324,7 @@ export default {
             background: state.background,
             viewingMode: this.viewingMode,
             search: state.search,
+            offlineAnnotation: state.offlineAnnotation,
           });
         } else {
           if (state.background || state.search || state.viewport || state.viewingMode || state.visibility) {
@@ -2290,6 +2338,7 @@ export default {
                   viewport: state.viewport,
                   visibility: state.visibility,
                   search: state.search,
+                  offlineAnnotation: state.offlineAnnotation,
                 })
               );
             }
@@ -2309,23 +2358,23 @@ export default {
     /**
      * Return a copy of the local annotations list.
      * This list is used for storing user created annotation
-     * when enableLocalAnnotations is set to true.
+     * when offlineAnnotate is set to true.
      *
      * @public
      */
-     getLocalAnnotations: function () {
-      return [...this.localAnnotationsList];
+    getOfflineAnnotations: function () {
+      return [...this.offlineAnnotation];
     },
     /**
      * Import local annotations. The annotations will only
-     * be imported when enableLocalAnnotations is set to
+     * be imported when offlineAnnotate is set to
      * true;
      *
      * @public
      * @arg {Array} `annotationsList`
      */
-     importLocalAnnotations: function (annotationsList) {
-      if (this.enableLocalAnnotations) {
+    importOfflineAnnotations: function (annotationsList) {
+      if (this.offlineAnnotate) {
         //Make sure the annotations are encoded correctly
         annotationsList.forEach(annotation => {
           const group = annotation.group;
@@ -2342,8 +2391,9 @@ export default {
         annotationFeaturesToPrimitives(this.$module.scene, featuresList);
         //Make a local non-reactive copy.
         annotationsList.forEach((annotation) => {
-          this.localAnnotationsList.push({...annotation});
+          this.offlineAnnotation.push({...annotation});
         });
+        sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotation));
       }
     },
 
@@ -2378,6 +2428,7 @@ export default {
             viewURL: this.viewURL,
             viewport: state?.viewport,
             visibility: state?.visibility,
+            offlineAnnotation: state?.offlineAnnotation,
           })
         );
         if (this.fileFormat === "gltf") {

package/vite.web-component.js

@@ -1,36 +0,0 @@
-import { defineConfig } from 'vite'
-import rootConfig from './vite.config.js'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
-import vue from '@vitejs/plugin-vue'
-
-// defineWorkspace provides a nice type hinting DX
-export default defineConfig((configEnv) => {
-  const config = rootConfig(configEnv);
-  config.css.extract = false
-  config.plugins.push(
-    nodePolyfills({
-      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
-      include: ['path']
-    })
-  );
- // config.plugins.push(
- //   cssInjectedByJsPlugin()
- // );
-  config.plugins[0] = vue({
-    template: {
-      compilerOptions: {
-        isCustomElement: (tag) => tag.includes('scaffoldvuer-wc')
-      }
-    }
-  }),
-  config.build = {
-    lib: {
-      entry: './src/ScaffoldVuer-wc.js',
-      name: 'scaffoldvuer-wc',
-      // the proper extensions will be added
-      fileName: 'scaffoldvuer-wc'
-    },
-  }
-
-  return config;
-})