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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.8.1-beta.4",
+  "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.3-beta.3",
+    "@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/ScaffoldVuer.vue

@@ -314,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>
@@ -976,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.
@@ -1120,9 +1130,9 @@ export default {
           regionPath = regionPath.slice(0, -1);
         }
         annotation.region = regionPath;
-        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
+        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});
     },
@@ -1220,9 +1230,9 @@ export default {
         if (this.offlineAnnotationEnabled) {
           annotation.group = this._editingZincObject.groupName;;
           annotation.region = this._editingZincObject.region.getFullPath();
-          this.offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
+          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));
         }
       }
     },
@@ -1242,9 +1252,9 @@ 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 = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || [];
             this.offlineAnnotations = this.offlineAnnotations.filter(offline => offline.item.id !== annotation.item.id);
-            sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotations));
+            sessionStorage.setItem('anonymous-annotation', JSON.stringify(this.offlineAnnotations));
           }
         }
       }
@@ -2023,7 +2033,7 @@ export default {
     addAnnotationFeature: async function () {
       let drawnFeatures;
       if (this.offlineAnnotationEnabled) {
-        this.offlineAnnotations = JSON.parse(sessionStorage.getItem('offline-annotation')) || [];
+        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);
@@ -2258,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);
@@ -2302,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;
       };
     },
@@ -2330,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;
     },
@@ -2349,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,
           });
@@ -2420,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/vite.web-component.js

@@ -0,0 +1,36 @@
+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;
+})