@abi-software/mapintegratedvuer 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -48,7 +48,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.1.0",
+    "@abi-software/flatmapvuer": "1.1.1",
     "@abi-software/map-side-bar": "^2.2.0",
     "@abi-software/plotvuer": "1.0.0",
     "@abi-software/scaffoldvuer": "^1.1.0",

package/src/components/ContentVuer.vue

@@ -79,19 +79,19 @@ export default {
   },
   methods: {
     flatmapProvenacneReady: function(prov) {
-      this.$refs.contentBar.setupFlatmapContextCard(prov);
+      this.$refs.contentBar?.setupFlatmapContextCard(prov);
     },
     /**
      * Toggle sync mode on/off depending on species and current state
      */
     toggleSyncMode: function () {
-      this.$refs.viewer.toggleSyncMode();
+      this.$refs.viewer?.toggleSyncMode();
     },
     getId: function () {
       return this.entry.id;
     },
     getState: function () {
-      return this.$refs.viewer.getState();
+      return this.$refs.viewer?.getState();
     },
     resourceSelected: function (payload) {
       this.$emit("resource-selected", payload);
@@ -101,32 +101,32 @@ export default {
         this.entriesStore.updateViewForEntry({id: this.entry.id, viewUrl});
       } else {
         //Manually set it as it cannot be set with reactivity
-        this.$refs.viewer.updateWithViewUrl(viewUrl);
+        this.$refs.viewer?.updateWithViewUrl(viewUrl);
       }
     },
     /**
      * Perform a local search on this contentvuer
      */
     search: function (term) {
-      return this.$refs.viewer.search(term);
+      return this.$refs.viewer?.search(term);
     },
     /**
      * Push the suggested terms into the suggestions array
      */
     searchSuggestions: function(term, suggestions) {
-      this.$refs.viewer.searchSuggestions(term, suggestions);
+      this.$refs.viewer?.searchSuggestions(term, suggestions);
     },
     setPanesBoundary: function() {
-      this.$refs.contentBar.setBoundary(this.$refs["container"][0]);
+      this.$refs.contentBar?.setBoundary(this.$refs["container"][0]);
     },
     speciesChanged: function (species) {
       this.activeSpecies = species;
     },
     receiveSynchronisedEvent: async function (data) {
-      this.$refs.viewer.receiveSynchronisedEvent(data);
+      this.$refs.viewer?.receiveSynchronisedEvent(data);
     },
     requestSynchronisedEvent: function (flag) {
-      this.$refs.viewer.requestSynchronisedEvent(flag);
+      this.$refs.viewer?.requestSynchronisedEvent(flag);
     },
     /**
      * Check if this viewer is currently visible
@@ -136,7 +136,7 @@ export default {
       return paneName !== undefined;
     },
     onResize: function () {
-      this.$refs.viewer.onResize();
+      this.$refs.viewer?.onResize();
     },
   },
   data: function () {

package/src/components/viewers/Flatmap.vue

@@ -1,39 +1,41 @@
 <template>
-  <FlatmapVuer
-    :state="entry.state"
-    :entry="entry.resource"
-    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
-    @pan-zoom-callback="flatmapPanZoomCallback"
-    :name="entry.resource"
-    style="height: 100%; width: 100%"
-    :minZoom="entry.minZoom"
-    :helpMode="helpMode"
-    :helpModeActiveItem="helpModeActiveItem"
-    :helpModeInitialIndex="-1"
-    :helpModeDialog="useHelpModeDialog"
-    @help-mode-last-item="onHelpModeLastItem"
-    @shown-tooltip="onTooltipShown"
-    @shown-map-tooltip="onMapTooltipShown"
-    :pathControls="true"
-    ref="flatmap"
-    @ready="flatmapReadyCall"
-    :displayMinimap="false"
-    :displayWarning="true"
-    :enableOpenMapUI="true"
-    :flatmapAPI="flatmapAPI"
-    :sparcAPI="apiLocation"
-    @open-map="openMap"
-    @pathway-selection-changed="onPathwaySelectionChanged"
-  />
+  <div class="viewer-container">
+    <FlatmapVuer
+      :state="entry.state"
+      :entry="entry.resource"
+      @resource-selected="flatmaprResourceSelected(entry.type, $event)"
+      @pan-zoom-callback="flatmapPanZoomCallback"
+      :name="entry.resource"
+      style="height: 100%; width: 100%"
+      :minZoom="entry.minZoom"
+      :helpMode="helpMode"
+      :helpModeActiveItem="helpModeActiveItem"
+      :helpModeInitialIndex="-1"
+      :helpModeDialog="useHelpModeDialog"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
+      :pathControls="true"
+      ref="flatmap"
+      @ready="flatmapReadyCall"
+      :displayMinimap="false"
+      :displayWarning="true"
+      :enableOpenMapUI="true"
+      :flatmapAPI="flatmapAPI"
+      :sparcAPI="apiLocation"
+      @open-map="openMap"
+      @pathway-selection-changed="onPathwaySelectionChanged"
+    />
 
-  <HelpModeDialog
-    v-if="helpMode && useHelpModeDialog"
-    ref="flatmapHelp"
-    :flatmapRef="flatmapRef"
-    :lastItem="helpModeLastItem"
-    @show-next="onHelpModeShowNext"
-    @finish-help-mode="onFinishHelpMode"
-  />
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="flatmapHelp"
+      :flatmapRef="flatmapRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+  </div>
 </template>
 
 <script>
@@ -168,6 +170,11 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.maplibregl-popup) {
   z-index: 3;
 }

package/src/components/viewers/MultiFlatmap.vue

@@ -1,40 +1,42 @@
 <template>
-  <MultiFlatmapVuer
-    :availableSpecies="availableSpecies"
-    @flatmapChanged="flatmapChanged"
-    @ready="multiFlatmapReady"
-    :state="entry.state"
-    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
-    style="height: 100%; width: 100%"
-    :initial="entry.resource"
-    :helpMode="helpMode"
-    :helpModeActiveItem="helpModeActiveItem"
-    :helpModeDialog="useHelpModeDialog"
-    @help-mode-last-item="onHelpModeLastItem"
-    @shown-tooltip="onTooltipShown"
-    @shown-map-tooltip="onMapTooltipShown"
-    ref="multiflatmap"
-    :displayMinimap="true"
-    :showStarInLegend="showStarInLegend"
-    :enableOpenMapUI="true"
-    :openMapOptions="openMapOptions"
-    :flatmapAPI="flatmapAPI"
-    :sparcAPI="apiLocation"
-    @pan-zoom-callback="flatmapPanZoomCallback"
-    @open-map="openMap"
-    @finish-help-mode="endHelp"
-    @pathway-selection-changed="onPathwaySelectionChanged"
-    @open-pubmed-url="onOpenPubmedUrl"
-  />
+  <div class="viewer-container">
+    <MultiFlatmapVuer
+      :availableSpecies="availableSpecies"
+      @flatmapChanged="flatmapChanged"
+      @ready="multiFlatmapReady"
+      :state="entry.state"
+      @resource-selected="flatmaprResourceSelected(entry.type, $event)"
+      style="height: 100%; width: 100%"
+      :initial="entry.resource"
+      :helpMode="helpMode"
+      :helpModeActiveItem="helpModeActiveItem"
+      :helpModeDialog="useHelpModeDialog"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
+      ref="multiflatmap"
+      :displayMinimap="true"
+      :showStarInLegend="showStarInLegend"
+      :enableOpenMapUI="true"
+      :openMapOptions="openMapOptions"
+      :flatmapAPI="flatmapAPI"
+      :sparcAPI="apiLocation"
+      @pan-zoom-callback="flatmapPanZoomCallback"
+      @open-map="openMap"
+      @finish-help-mode="endHelp"
+      @pathway-selection-changed="onPathwaySelectionChanged"
+      @open-pubmed-url="onOpenPubmedUrl"
+    />
 
-  <HelpModeDialog
-    v-if="helpMode && useHelpModeDialog"
-    ref="multiflatmapHelp"
-    :multiflatmapRef="multiflatmapRef"
-    :lastItem="helpModeLastItem"
-    @show-next="onHelpModeShowNext"
-    @finish-help-mode="onFinishHelpMode"
-  />
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="multiflatmapHelp"
+      :multiflatmapRef="multiflatmapRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+  </div>
 </template>
 
 <script>
@@ -430,6 +432,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.maplibregl-popup) {
   z-index: 3;
 }

package/src/components/viewers/Scaffold.vue

@@ -1,41 +1,43 @@
 <template>
-  <ScaffoldVuer
-    :state="entry.state"
-    :url="entry.resource"
-    :region="entry.region"
-    @scaffold-selected="resourceSelected(entry.type, $event, true)"
-    @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
-    @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
-    @on-ready="scaffoldIsReady"
-    @open-map="openMap"
-    ref="scaffold"
-    :background-toggle="true"
-    :traditional="true"
-    :helpMode="helpMode"
-    :helpModeActiveItem="helpModeActiveItem"
-    :helpModeDialog="useHelpModeDialog"
-    @help-mode-last-item="onHelpModeLastItem"
-    @shown-tooltip="onTooltipShown"
-    @shown-map-tooltip="onMapTooltipShown"
-    :render="visible"
-    :display-latest-message="true"
-    :warning-message="warningMessage"
-    :display-minimap="false"
-    :display-markers="false"
-    :enableOpenMapUI="true"
-    :view-u-r-l="entry.viewUrl"
-    :markerLabels="markerLabels"
-    :flatmapAPI="flatmapAPI"
-  />
+  <div class="viewer-container">
+    <ScaffoldVuer
+      :state="entry.state"
+      :url="entry.resource"
+      :region="entry.region"
+      @scaffold-selected="resourceSelected(entry.type, $event, true)"
+      @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
+      @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
+      @on-ready="scaffoldIsReady"
+      @open-map="openMap"
+      ref="scaffold"
+      :background-toggle="true"
+      :traditional="true"
+      :helpMode="helpMode"
+      :helpModeActiveItem="helpModeActiveItem"
+      :helpModeDialog="useHelpModeDialog"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
+      :render="visible"
+      :display-latest-message="true"
+      :warning-message="warningMessage"
+      :display-minimap="false"
+      :display-markers="false"
+      :enableOpenMapUI="true"
+      :view-u-r-l="entry.viewUrl"
+      :markerLabels="markerLabels"
+      :flatmapAPI="flatmapAPI"
+    />
 
-  <HelpModeDialog
-    v-if="helpMode && useHelpModeDialog"
-    ref="scaffoldHelp"
-    :scaffoldRef="scaffoldRef"
-    :lastItem="helpModeLastItem"
-    @show-next="onHelpModeShowNext"
-    @finish-help-mode="onFinishHelpMode"
-  />
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="scaffoldHelp"
+      :scaffoldRef="scaffoldRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+  </div>
 </template>
 
 <script>
@@ -206,6 +208,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.message-popper) {
   white-space: unset;
   max-width: 200px;