@abi-software/mapintegratedvuer 1.22.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -58,18 +58,18 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.19.0",
-    "@abi-software/map-side-bar": "2.19.0",
-    "@abi-software/map-utilities": "1.12.0",
+    "@abi-software/flatmapvuer": "1.21.0",
+    "@abi-software/map-side-bar": "2.20.0",
+    "@abi-software/map-utilities": "1.14.0",
     "@abi-software/plotvuer": "1.3.0",
-    "@abi-software/scaffoldvuer": "2.0.0",
-    "@abi-software/simulationvuer": "4.3.0",
+    "@abi-software/scaffoldvuer": "2.1.0",
+    "@abi-software/simulationvuer": "4.4.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.4.0",
     "@element-plus/icons-vue": "^2.3.2",
     "@vitejs/plugin-vue": "^6.0.8",
-    "css-element-queries": "^1.2.3",
     "element-plus": "^2.14.5",
+    "html-to-image": "^1.11.13",
     "marked": "^8.0.1",
     "mitt": "^3.0.1",
     "pinia": "^4.0.3",

package/src/assets/header-icon.scss

@@ -16,9 +16,15 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  top: 4px;
-  right: 12px;
-  gap: 10px;
+  align-items: center;
+  top: 0;
+  right: 1rem;
+  gap: 8px;
+  height: 31px; // header has 1px border
+
+  svg.map-icon {
+    margin: 0;
+  }
 }
 
 .icon-group {

package/src/components/ContentBar.vue

@@ -1,100 +1,113 @@
 <template>
   <div>
     <div class="toolbar-flex-container">
-      <el-select
-        v-if="entries.length > 1"
-        :teleported="false"
-        :model-value="entry.id"
-        placeholder="Select"
-        class="select-box"
-        popper-class="viewer_dropdown"
-        @change="viewerChanged($event)"
-      >
-        <el-option
-          v-for="entry in entries"
-          :key="entry.id"
-          :label="getTitle(entry)"
-          :value="entry.id"
-        />
-      </el-select>
-      <div v-else class="toolbar-title shrink">
-        {{ getEntryTitle(entry) }}
+      <div class="toolbar-left shrink">
+        <el-select
+          v-if="entries.length > 1"
+          :teleported="false"
+          :model-value="entry.id"
+          placeholder="Select"
+          class="select-box"
+          popper-class="viewer_dropdown"
+          @change="viewerChanged($event)"
+        >
+          <el-option
+            v-for="entry in entries"
+            :key="entry.id"
+            :label="getTitle(entry)"
+            :value="entry.id"
+          />
+        </el-select>
+        <div v-else class="toolbar-title shrink">
+          {{ getEntryTitle(entry) }}
+        </div>
+        <el-button
+          v-if="hasSourceInfo"
+          round
+          size="small"
+          class="source-chip shrink"
+          @click="openSourceInfo"
+        >
+          {{ getSourceTitle }}
+        </el-button>
       </div>
-      <el-button
-        v-if="hasSourceInfo"
-        round
-        size="small"
-        class="source-chip shrink"
-        @click="openSourceInfo"
-      >
-        {{ getSourceTitle }}
-      </el-button>
-      <div class="information-group shrink">
+
+      <div class="toolbar-right shrink">
+        <div class="information-group shrink">
+          <el-popover
+            placement="bottom"
+            :teleported="false"
+            trigger="manual"
+            :width="setPopperWidth(slot.id)"
+            :offset="0"
+            popper-class="context-card-popover"
+            :popper-options="popperOptions"
+            :visible="contextCardVisible"
+          >
+            <template #default v-if="contextCardEntry">
+              <flatmap-context-card
+                class="flatmap-context-card"
+                v-if="contextCardEntry.type == 'Flatmap' || contextCardEntry.type == 'MultiFlatmap'"
+                :mapImpProv="contextCardEntry.mapImpProv"
+              />
+              <context-card
+                v-if="contextCardEntry.type.toLowerCase() == 'scaffold'"
+                :entry="contextCardEntry"
+                :envVars="envVars"
+                class="context-card"
+                @context-ready="contextCardVisible = true"
+                @scaffold-view-clicked="$emit('scaffold-view-clicked', $event)"
+              />
+            </template>
+            <template #reference>
+              <div v-show="contextCardEntry">
+                <div
+                  v-show="contextCardVisible"
+                  class="information"
+                  @click="contextCardVisible = false"
+                >
+                  Hide information
+                  <el-icon><el-icon-arrow-up /></el-icon>
+                </div>
+                <div
+                  v-show="!contextCardVisible"
+                  class="information"
+                  @click="contextCardVisible = true"
+                >
+                  Show information
+                  <el-icon><el-icon-arrow-down /></el-icon>
+                </div>
+              </div>
+            </template>
+          </el-popover>
+        </div>
+        <ScreenshotPopover
+          v-if="captureScreenshot"
+          :disabled="!viewerReady"
+          class="screenshot-button"
+          tooltip="Download screenshot of this view"
+          :capture="onCaptureScreenshot"
+          :getTarget="getScreenshotTarget"
+        />
         <el-popover
-          placement="bottom"
+          class="tooltip"
+          content="Close and remove"
+          placement="bottom-end"
+          :show-after="helpDelay"
           :teleported="false"
-          trigger="manual"
-          :width="setPopperWidth(slot.id)"
-          :offset="0"
-          popper-class="context-card-popover"
-          :popper-options="popperOptions"
-          :visible="contextCardVisible"
+          trigger="hover"
+          popper-class="header-popper"
         >
-          <template #default v-if="contextCardEntry">
-            <flatmap-context-card
-              class="flatmap-context-card"
-              v-if="contextCardEntry.type == 'Flatmap' || contextCardEntry.type == 'MultiFlatmap'"
-              :mapImpProv="contextCardEntry.mapImpProv"
-            />
-            <context-card
-              v-if="contextCardEntry.type.toLowerCase() == 'scaffold'"
-              :entry="contextCardEntry"
-              :envVars="envVars"
-              class="context-card"
-              @context-ready="contextCardVisible = true"
-              @scaffold-view-clicked="$emit('scaffold-view-clicked', $event)"
-            />
-          </template>
           <template #reference>
-            <div v-show="contextCardEntry">
-              <div
-                v-show="contextCardVisible"
-                class="information"
-                @click="contextCardVisible = false"
-              >
-                Hide information
-                <el-icon><el-icon-arrow-up /></el-icon>
-              </div>
-              <div
-                v-show="!contextCardVisible"
-                class="information"
-                @click="contextCardVisible = true"
-              >
-                Show information
-                <el-icon><el-icon-arrow-down /></el-icon>
-              </div>
-            </div>
+            <map-svg-icon
+              icon="close-no-bk"
+              class="header-icon rightmost"
+              v-show="activeView !== 'singlepanel' && (entry.mode !== 'main' || allClosable)"
+              @click="closeAndRemove()"
+            />
           </template>
         </el-popover>
       </div>
-      <el-popover
-        class="tooltip"
-        content="Close and remove"
-        placement="bottom-end"
-        :show-after="helpDelay"
-        :teleported="false"
-        trigger="hover"
-        popper-class="header-popper"
-      >
-        <template #reference>
-          <map-svg-icon
-            icon="close-no-bk"
-            class="header-icon rightmost"
-            v-show="activeView !== 'singlepanel' && (entry.mode !== 'main' || allClosable)"
-            @click="closeAndRemove()"
-          />
-        </template>
-      </el-popover>
     </div>
   </div>
 </template>
@@ -108,6 +121,7 @@ import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import ContextCard from './ContextCard.vue';
 import FlatmapContextCard from './FlatmapContextCard.vue';
+import ScreenshotPopover from './ScreenshotPopover.vue';
 import { ArrowDown as ElIconArrowDown, ArrowUp as ElIconArrowUp } from '@element-plus/icons-vue';
 import tagging from '../services/tagging';
 
@@ -119,9 +133,31 @@ export default {
     ContextCard,
     FlatmapContextCard,
     MapSvgIcon,
+    ScreenshotPopover,
   },
   props: {
     entry: Object,
+    /**
+     * Async function capturing a screenshot of this view.
+     */
+    captureScreenshot: {
+      type: Function,
+      default: undefined,
+    },
+    /**
+     * Function returning the element captured, used for size preview.
+     */
+    getScreenshotTarget: {
+      type: Function,
+      default: undefined,
+    },
+    /**
+     * Whether the viewer's content has finished loading.
+     */
+    viewerReady: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {
@@ -202,6 +238,19 @@ export default {
     },
   },
   methods: {
+    onCaptureScreenshot: async function (options) {
+      const result = await this.captureScreenshot(options);
+
+      // GA Tracking
+      tagging.sendEvent({
+        event: 'interaction_event',
+        event_name: 'portal_maps_screenshot',
+        category: `png_${options.scale}x`,
+        location: 'pane_header',
+      });
+
+      return result;
+    },
     closeAndRemove: function () {
       this.splitFlowStore.closeSlot({ id: this.entry.id, entries: this.entries });
       EventBus.emit('RemoveEntryRequest', this.entry.id);
@@ -269,7 +318,7 @@ export default {
           target: value,
         });
         this.$nextTick(() => {
-          setTimeout(() => {
+          this._chooserTimer = setTimeout(() => {
             this.$emit('chooser-changed');
           }, 1200);
         });
@@ -316,6 +365,9 @@ export default {
   mounted: function () {
     this.setupScaffoldContextCard();
   },
+  beforeUnmount: function () {
+    clearTimeout(this._chooserTimer);
+  },
 };
 </script>
 
@@ -327,19 +379,38 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   flex-wrap: nowrap;
   width: 100%;
+  gap: 16px;
 
   .shrink {
     flex-shrink: 1;
     min-width: 0;
   }
 
-  .information-group {
-    margin-left: auto;
-    margin-right: 12px;
+  .toolbar-left,
+  .toolbar-right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     height: 100%;
+    gap: 8px;
+  }
+
+  .toolbar-left {
+    justify-content: flex-start;
+  }
+
+  .toolbar-right {
+    justify-content: flex-end;
+    margin-left: auto;
     position: relative;
+    margin-right: 1rem; // same as header toolbar
+  }
+
+  .information-group {
+    height: 100%;
   }
 
   .toolbar-title {
@@ -396,12 +467,14 @@ export default {
       color: $lightGrey;
     }
   }
+
   i .select-box :deep(.el-input__icon) {
     color: rgb(48, 49, 51);
     height: 24px;
     padding-left: 8px;
     padding-right: 8px;
   }
+
   .text {
     margin-left: 8px;
     margin-top: 7px;
@@ -412,6 +485,7 @@ export default {
     user-select: none;
     line-height: 18px;
   }
+
   .title {
     width: 140px;
     color: $app-primary-color;
@@ -428,8 +502,6 @@ export default {
 
   .source-chip {
     padding: 4px !important;
-    margin-left: 2px;
-    margin-right: 2px;
     background-color: $app-primary-color;
     border-color: $app-primary-color;
     color: #fff;
@@ -455,6 +527,10 @@ export default {
     flex-shrink: 0;
   }
 
+  .screenshot-button {
+    flex-shrink: 0;
+  }
+
   .information {
     font-size: 12px;
     margin-top: 0;
@@ -466,6 +542,10 @@ export default {
     cursor: pointer;
     line-height: normal;
   }
+
+  svg.map-icon {
+    margin: 0;
+  }
 }
 
 .viewer_dropdown {

package/src/components/ContentVuer.vue

@@ -10,6 +10,9 @@
       ref="contentBar"
       @chooser-changed="onResize"
       @scaffold-view-clicked="scaffoldViewClicked"
+      :captureScreenshot="captureScreenshot"
+      :getScreenshotTarget="getScreenshotElement"
+      :viewerReady="viewerReady"
       @vue:mounted="setPanesBoundary"
     />
     <!--
@@ -31,6 +34,7 @@
           @flatmap-provenance-ready="flatmapProvenanceReady"
           @resource-selected="resourceSelected"
           @species-changed="speciesChanged"
+          @viewer-ready="viewerReady = $event"
         />
       </Suspense>
     </div>
@@ -42,7 +46,9 @@ import { defineAsyncComponent } from 'vue';
 import ContentBar from './ContentBar.vue';
 import { mapStores } from 'pinia';
 import { useEntriesStore } from '../stores/entries';
+import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
+import { captureElement, findLegends } from '../services/screenshot';
 
 const Flatmap = defineAsyncComponent(() => import('./viewers/Flatmap.vue'));
 const MapIframe = defineAsyncComponent(() => import('./viewers/Iframe.vue'));
@@ -87,6 +93,38 @@ export default {
     getState: function () {
       return this.$refs.viewer?.getState();
     },
+    /**
+     * Capture this pane and download it.
+     * The header bar is included only if `toolbar` is set.
+     * @param {Object} options - { scale, legend, toolbar }
+     */
+    captureScreenshot: function (options = {}) {
+      const scale = options.scale || this.settingsStore.screenshot.scale;
+      const legend = options.legend || this.settingsStore.screenshot.legend;
+      const toolbar = options.toolbar ?? this.settingsStore.screenshot.toolbar;
+      const title = this.$refs.contentBar?.getEntryTitle(this.entry) || this.entry.type;
+      return captureElement(this.getScreenshotElement({ legend, toolbar }), {
+        scale,
+        legend,
+        toolbar,
+        title,
+        viewers: [this],
+      });
+    },
+    hasLegend: function () {
+      return findLegends(this.$refs.container).length > 0;
+    },
+    /**
+     * The whole pane when the header bar is included, otherwise only the viewer.
+     * @param {Object} options - { legend, toolbar }
+     */
+    getScreenshotElement: function (options = {}) {
+      const { legend, toolbar } = options;
+      return toolbar && legend !== 'only' ? this.$el : this.$refs.container;
+    },
+    getScreenshotSources: function (pixelRatio) {
+      return this.$refs.viewer?.getScreenshotSources?.(pixelRatio) || [];
+    },
     resourceSelected: function (payload) {
       this.$emit('resource-selected', payload);
     },
@@ -168,10 +206,12 @@ export default {
     return {
       mouseHovered: false,
       activeSpecies: 'Rat',
+      // Viewers without a ready event are considered ready immediately
+      viewerReady: !['Flatmap', 'MultiFlatmap', 'Scaffold'].includes(this.entry.type),
     };
   },
   computed: {
-    ...mapStores(useEntriesStore, useSplitFlowStore),
+    ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore),
     viewerType() {
       switch (this.entry.type) {
         case 'MapIframe':

package/src/components/ContextCard.vue

@@ -7,7 +7,7 @@
         class="context-card"
       >
         <div class="card-left">
-          <img :src="banner" class="context-image" />
+          <img :crossorigin="crossorigin" :src="banner" class="context-image" />
         </div>
         <div class="card-right scrollbar">
           <div>
@@ -54,7 +54,11 @@
               </div>
               <template v-for="(view, i) in contextData.views" :key="i + '_1'">
                 <div @click="openViewFile(view)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)" />
+                  <img
+                    :crossorigin="crossorigin"
+                    class="view-image"
+                    :src="getFileFromPath(view.thumbnail)"
+                  />
                   <div class="view-description">{{ view.description }}</div>
                 </div>
                 <div class="padding" />
@@ -72,6 +76,7 @@
                       :style="'background-color:' + sample.color"
                     ></div>
                     <img
+                      :crossorigin="crossorigin"
                       class="key-image"
                       v-else-if="sample.thumbnail"
                       :src="getFileFromPath(sample.thumbnail)"
@@ -99,7 +104,11 @@
               </div>
               <template v-for="(view, i) in contextData.views" :key="i + '_1'">
                 <span @click="viewClicked(view, i)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)" />
+                  <img
+                    :crossorigin="crossorigin"
+                    class="view-image"
+                    :src="getFileFromPath(view.thumbnail)"
+                  />
                   <div class="view-description">
                     {{ view.description }}
                     <i class="el-icon-warning-outline info"></i>
@@ -171,6 +180,9 @@ export default {
     CopyToClipboard,
   },
   mixins: [S3Bucket],
+  inject: {
+    crossorigin: { default: 'anonymous' },
+  },
   props: {
     /**
      * Object containing information for

package/src/components/DatasetHeader.vue

@@ -18,7 +18,7 @@
         class="dataset-card"
         ref="card"
       >
-        <img :src="entry.datasetImage" class="image" />
+        <img :crossorigin="crossorigin" :src="entry.datasetImage" class="image" />
         <div style="padding: 14px">
           <span class="dataset-description">{{ entry.datasetDescription }}</span>
           <div>
@@ -33,6 +33,9 @@
 <script>
 export default {
   name: 'DatasetHeader',
+  inject: {
+    crossorigin: { default: 'anonymous' },
+  },
   props: {
     /**
      * Object containing information for

package/src/components/DialogToolbarContent.vue

@@ -231,6 +231,15 @@
           />
         </template>
       </el-popover>
+      <ScreenshotPopover
+        v-if="captureScreenshot"
+        title="Download screenshot of all views"
+        tooltip="Download screenshot"
+        :capture="onCaptureScreenshot"
+        :getTarget="getScreenshotTarget"
+        :disabled="!mapLoaded"
+        shortcut
+      />
       <el-popover
         v-if="permalinkRef"
         ref="linkPopover"
@@ -463,7 +472,7 @@
           <el-icon
             ref="globalSettingRef"
             :disabled="!mapLoaded"
-            class="header-icon"
+            class="header-icon global-settings-icon"
             :class="{ disabled: !mapLoaded }"
           >
             <el-icon-more-filled />
@@ -476,13 +485,14 @@
 
 <script>
 import { shallowRef } from 'vue';
-import EventBus from './EventBus';
+import EventBus, { onEvents } from './EventBus';
 import { mapStores } from 'pinia';
 import { useEntriesStore } from '../stores/entries';
 import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { MapSvgIcon, MapSvgSpriteColor } from '@abi-software/svg-sprite';
 import SearchControls from './SearchControls.vue';
+import ScreenshotPopover from './ScreenshotPopover.vue';
 import { CopyDocument as ElIconCopyDocument } from '@element-plus/icons-vue';
 import tagging from '../services/tagging';
 
@@ -494,6 +504,7 @@ export default {
   components: {
     MapSvgIcon,
     MapSvgSpriteColor,
+    ScreenshotPopover,
     SearchControls,
   },
   props: {
@@ -511,6 +522,20 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * Async function capturing a screenshot of all visible views.
+     */
+    captureScreenshot: {
+      type: Function,
+      default: undefined,
+    },
+    /**
+     * Function returning the element captured, used for size preview.
+     */
+    getScreenshotTarget: {
+      type: Function,
+      default: undefined,
+    },
   },
   inject: ['showGlobalSettings'],
   computed: {
@@ -703,6 +728,19 @@ export default {
         this.getShareLink(false);
       }
     },
+    onCaptureScreenshot: async function (options) {
+      const result = await this.captureScreenshot(options);
+
+      // GA Tracking
+      tagging.sendEvent({
+        event: 'interaction_event',
+        event_name: 'portal_maps_screenshot',
+        category: `png_${options.scale}x`,
+        location: options.source === 'shortcut' ? 'keyboard_shortcut' : 'map_toolbar',
+      });
+
+      return result;
+    },
     getShareLink: function (withAnnotation) {
       this.displayShareOptions = false;
       this.loadingLink = true;
@@ -745,8 +783,10 @@ export default {
     this.permalinkRef = shallowRef(this.$refs.permalinkRef);
     this.globalSettingRef = shallowRef(this.$refs.globalSettingRef);
 
-    EventBus.on('mapLoaded', () => {
-      this.mapLoaded = true;
+    this._offBus = onEvents({
+      mapLoaded: () => {
+        this.mapLoaded = true;
+      },
     });
 
     document.addEventListener('fullscreenchange', this.onFullscreenEsc);
@@ -754,6 +794,7 @@ export default {
     this.loadGlobalSettings();
   },
   unmounted: function () {
+    this._offBus?.();
     document.removeEventListener('fullscreenchange', this.onFullscreenEsc);
   },
 };