@abi-software/mapintegratedvuer 1.23.0 → 1.24.0

package/src/components/MapContent.vue

@@ -22,7 +22,7 @@
 import { computed } from 'vue';
 import Tagging from '../services/tagging.js';
 import SplitFlow from './SplitFlow.vue';
-import EventBus from './EventBus';
+import { onEvents } from './EventBus';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
@@ -33,6 +33,24 @@ import RetrieveContextCardMixin from '../mixins/RetrieveContextCardMixin.js';
 
 /**
  * Content of the app. More work flows will be added here.
+ *
+ * ## Screenshots
+ *
+ * Each viewer pane has a camera button in its header that downloads a screenshot of that pane.
+ * The camera button in the top toolbar downloads all visible panes together, including the sidebar if it is open.
+ * Screenshots are saved as PNG. Pick the resolution (1x to 4x the device pixel ratio) before downloading; higher resolutions suit printing.
+ * On-screen controls such as zoom buttons and settings panels are left out of the image.
+ * Very large outputs are reduced automatically to stay within browser canvas limits.
+ *
+ * Default screenshot settings can be set with `options.screenshot`,
+ * and screenshots can be triggered programmatically with the `captureScreenshot` method:
+ *
+ * ```js
+ * // All visible panes
+ * this.$refs.map.captureScreenshot({ scale: 3 });
+ * // A single pane, by entry id
+ * this.$refs.map.captureScreenshot({ paneId: 1, scale: 2 });
+ * ```
  */
 export default {
   name: 'MapContent',
@@ -70,6 +88,8 @@ export default {
     },
     /**
      * The options include APIs and Keys.
+     * `options.screenshot` sets the screenshot defaults,
+     * e.g. `{ scale: 2, legend: 'include', toolbar: true }`.
      */
     options: {
       type: Object,
@@ -276,6 +296,20 @@ export default {
     getState: function (anonymousAnnotations = false) {
       return this.$refs.flow.getState(anonymousAnnotations);
     },
+    /**
+     * @public
+     * Capture a screenshot and download it as PNG.
+     * Captures the pane with `paneId` (entry id) if provided,
+     * otherwise all visible panes including the sidebar.
+     * `legend` is `exclude` (default), `include` or `only`,
+     * the latter downloads only the legend panel of each pane.
+     * `toolbar` includes the header bar of each pane (default `false`).
+     * The default `scale`, `legend` and `toolbar` come from `options.screenshot`.
+     * @arg `options` { paneId, scale: Number, legend: String, toolbar: Boolean }
+     */
+    captureScreenshot: function (options = {}) {
+      return this.$refs.flow.captureScreenshot(options);
+    },
     /**
      * @public
      * Provide a way to set the current view, this is currently limited
@@ -454,51 +488,63 @@ export default {
         : null;
       this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null;
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null;
+      this.options.screenshot
+        ? this.settingsStore.updateScreenshotOptions(this.options.screenshot)
+        : null;
     }
     this.settingsStore.updateAllClosable(this.allClosable);
     this.splitFlowStore?.reset();
     this.splitFlowStore?.getAvailableTerms(this.settingsStore.sparcApi);
   },
   mounted: async function () {
-    EventBus.on('updateShareLinkRequested', (data) => {
-      /**
-       * This event emits when the share link is requested.
-       */
-      this.$emit('updateShareLinkRequested', data);
-    });
-    EventBus.on('trackEvent', (taggingData) => {
-      /**
-       * This event triggers data tracking for Google Tag Manager (GTM) related to map interactions.
-       */
-      this.$emit('trackEvent', taggingData);
+    this._offBus = onEvents({
+      updateShareLinkRequested: (data) => {
+        /**
+         * This event emits when the share link is requested.
+         */
+        this.$emit('updateShareLinkRequested', data);
+      },
+      trackEvent: (taggingData) => {
+        /**
+         * This event triggers data tracking for Google Tag Manager (GTM) related to map interactions.
+         */
+        this.$emit('trackEvent', taggingData);
+      },
+      mapLoaded: (map) => {
+        // Check if there is a search term to display
+        if (this.displaySearchFromQuery) {
+          setTimeout(() => {
+            this.$refs.flow?.onDisplaySearch({ term: this.displaySearchFromQuery });
+            this.displaySearchFromQuery = ''; // Clear after using it from first load
+          });
+        }
+        /**
+         * This event emit when the map is loaded.
+         */
+        this.$emit('mapLoaded', map);
+      },
+      // Allow other components to request opening a map via setCurrentEntry
+      SetCurrentEntry: (entry) => {
+        // Ignore requests until the flow is ready, as before
+        if (entry && this.isReady) {
+          this.setCurrentEntry(entry);
+        }
+      },
     });
     if (!this.state) {
       this.initialState = await initialState(this.startingMap, this.options.sparcApi);
+      // The component may have been unmounted while awaiting
+      if (this._unmounted) return;
     }
-    EventBus.on('mapLoaded', (map) => {
-      // Check if there is a search term to display
-      if (this.displaySearchFromQuery) {
-        setTimeout(() => {
-          this.$refs.flow.onDisplaySearch({ term: this.displaySearchFromQuery });
-          this.displaySearchFromQuery = ''; // Clear after using it from first load
-        });
-      }
-      /**
-       * This event emit when the map is loaded.
-       */
-      this.$emit('mapLoaded', map);
-    });
-    // Allow other components to request opening a map via setCurrentEntry
-    EventBus.on('SetCurrentEntry', (entry) => {
-      if (entry) {
-        this.setCurrentEntry(entry);
-      }
-    });
     this.isReady = true;
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
     this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
   },
+  beforeUnmount: function () {
+    this._unmounted = true;
+    this._offBus?.();
+  },
 };
 </script>
 

package/src/components/ResizeSensor.vue

@@ -3,22 +3,20 @@
 </template>
 
 <script>
-import ResizeSensor from 'css-element-queries/src/ResizeSensor';
-
 export default {
   name: 'ResizeSensor',
   methods: {
     activate: function () {
-      if (!this._sensor) {
-        this._sensor = new ResizeSensor(this.$refs.display, this.displayResize);
+      if (!this._observer && this.$refs.display) {
+        this._observer = new ResizeObserver(() => this.displayResize());
+        this._observer.observe(this.$refs.display);
         this.displayResize();
       }
     },
     deactivate: function () {
-      if (this._sensor) {
-        this._sensor.detach(this.$refs.display, this.displayResize);
-        delete this._sensor;
-        this._sensor = undefined;
+      if (this._observer) {
+        this._observer.disconnect();
+        this._observer = undefined;
         this.displayResize();
       }
     },
@@ -26,7 +24,7 @@ export default {
       this.$emit('resize');
     },
   },
-  unmounted() {
+  beforeUnmount() {
     this.deactivate();
   },
   activated() {