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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.8.0",
+  "version": "1.8.1-beta.1",
   "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.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/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 || offlineAnnotationEnabled)"
         :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' && offlineAnnotationEnabled" 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,
+      offlineAnnotationEnabled: false,
+      offlineAnnotations: 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.offlineAnnotations.length; i++) {
+        const annotation = this.offlineAnnotations[i];
         if (annotation.region === regionPath &&
           annotation.group === groupName) {
-          this.localAnnotationsList.splice(i, 1);
+          this.offlineAnnotations.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.offlineAnnotationEnabled) {
+            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.offlineAnnotationEnabled) {
         annotation.group = group;
         let regionPath = region;
         if (regionPath.slice(-1) === "/") {
           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.removeFromLocalAnnotationList(regionPath, group);
-        this.localAnnotationsList.push(annotation);
+        this.removeFromOfflineAnnotation(regionPath, group);
+        this.offlineAnnotations.push(annotation);
+        sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
       }
       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.offlineAnnotationEnabled) {
+            sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
+          }
         }
       }
       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.offlineAnnotationEnabled) {
         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.offlineAnnotations = annotations;
+    },
+    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);
+      } 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.offlineAnnotationEnabled = false;
+            } else {
+              this.authorisedUser = undefined;
+              this.offlineAnnotationEnabled = 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,9 @@ export default {
         if (options.background) {
           this.backgroundChangeCallback(options.background);
         }
+        if (options.offlineAnnotations) {
+          sessionStorage.setItem('offline-annotation', options.offlineAnnotations);
+        }
         if (options.viewingMode) {
           this.changeViewingMode(options.viewingMode);
         }
@@ -2209,7 +2244,7 @@ export default {
     },
     setURLFinishCallback: function (options) {
       return () => {
-        this.localAnnotationsList.length = 0;
+        this.offlineAnnotations.length = 0;
         this.updateSettingsfromScene();
         this.$module.updateTime(0.01);
         this.$module.updateTime(0);
@@ -2258,6 +2293,9 @@ export default {
       if (this.lastSelected && this.lastSelected.group) {
         state.search = {...this.lastSelected};
       }
+      if (this.offlineAnnotationEnabled) {
+        state.offlineAnnotations = sessionStorage.getItem('offline-annotation');
+      }
       return state;
     },
     /**
@@ -2277,6 +2315,7 @@ export default {
             background: state.background,
             viewingMode: this.viewingMode,
             search: state.search,
+            offlineAnnotations: state.offlineAnnotations,
           });
         } else {
           if (state.background || state.search || state.viewport || state.viewingMode || state.visibility) {
@@ -2290,6 +2329,7 @@ export default {
                   viewport: state.viewport,
                   visibility: state.visibility,
                   search: state.search,
+                  offlineAnnotations: state.offlineAnnotations,
                 })
               );
             }
@@ -2309,23 +2349,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 offlineAnnotationEnabled is set to true.
      *
      * @public
      */
-     getLocalAnnotations: function () {
-      return [...this.localAnnotationsList];
+    getOfflineAnnotations: function () {
+      return [...this.offlineAnnotations];
     },
     /**
      * Import local annotations. The annotations will only
-     * be imported when enableLocalAnnotations is set to
+     * be imported when offlineAnnotationEnabled is set to
      * true;
      *
      * @public
      * @arg {Array} `annotationsList`
      */
-     importLocalAnnotations: function (annotationsList) {
-      if (this.enableLocalAnnotations) {
+    importOfflineAnnotations: function (annotationsList) {
+      if (this.offlineAnnotationEnabled) {
         //Make sure the annotations are encoded correctly
         annotationsList.forEach(annotation => {
           const group = annotation.group;
@@ -2342,8 +2382,9 @@ export default {
         annotationFeaturesToPrimitives(this.$module.scene, featuresList);
         //Make a local non-reactive copy.
         annotationsList.forEach((annotation) => {
-          this.localAnnotationsList.push({...annotation});
+          this.offlineAnnotations.push({...annotation});
         });
+        sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
       }
     },
 
@@ -2378,6 +2419,7 @@ export default {
             viewURL: this.viewURL,
             viewport: state?.viewport,
             visibility: state?.visibility,
+            offlineAnnotations: state?.offlineAnnotations,
           })
         );
         if (this.fileFormat === "gltf") {

package/src/components.d.ts

@@ -7,6 +7,7 @@ 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']
@@ -19,6 +20,7 @@ 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']
@@ -26,6 +28,9 @@ 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/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;
-})