@abi-software/flatmapvuer 0.3.13-beta-3 → 0.3.15

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.13-beta-2",
+  "version": "0.3.14",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1331,9 +1331,9 @@
       "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
     },
     "@mapbox/tiny-sdf": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
-      "integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
     },
     "@mapbox/unitbezier": {
       "version": "0.0.1",
@@ -2972,9 +2972,9 @@
       }
     },
     "bezier-js": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.0.tgz",
-      "integrity": "sha512-oc8fkHqG0R+dQuNiXVbPMB0cc8iDqkLAjbA2gq26QmV8tZqW9GGI7iNEX1ioRWlZperQS7v5BX03+9FLVWZbSw=="
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.3.tgz",
+      "integrity": "sha512-VPFvkyO98oCJ1Tsi+bFBrKEWLdefAj4DJVaWp3xTEsdCbunC7Pt/nTeIgu/UdskBNcmHv8TOfsgdMZb1GsICmg=="
     },
     "bfj": {
       "version": "6.1.2",
@@ -13250,9 +13250,9 @@
           "optional": true
         },
         "json5": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+          "version": "2.2.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
           "dev": true,
           "optional": true
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.3.13-beta-3",
+  "version": "0.3.15",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
@@ -21,7 +21,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.2.9",
+    "@abi-software/flatmap-viewer": "2.2.9",
     "@abi-software/svg-sprite": "^0.1.14",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",

package/src/components/FlatmapVuer.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="flatmap-container"
+    ref="flatmapContainer"
     v-loading="loading"
     element-loading-text="Loading..."
     element-loading-spinner="el-icon-loading"
@@ -56,6 +57,9 @@
           <span class="warning-text">What's new?</span>
         </i>
       </div>
+      
+      <!-- The element below is placed onto the flatmap when it is ready -->
+      <i class="el-icon-arrow-down minimap-resize" :class="{ enlarge: minimapSmall, shrink: !minimapSmall}" ref="minimapResize" v-show="minimapResizeShow" @click="closeMinimap"></i>
 
       <div class="bottom-right-control">
         <el-popover
@@ -528,6 +532,23 @@ export default {
         this.mapImp.showMarkerPopup(featureId, node, options);
       }
     },
+    closeMinimap: function(){
+      let minimapEl = this.$refs.flatmapContainer.querySelector('.maplibregl-ctrl-minimap'); // find minimap
+      if (this.minimapSmall) { //switch the classes on the minimap
+        minimapEl.classList.add('enlarge');
+        minimapEl.classList.remove('shrink');
+      } else {
+        minimapEl.classList.add('shrink');
+        minimapEl.classList.remove('enlarge');
+      }
+      this.minimapSmall = !this.minimapSmall;
+    },
+    addResizeButtonToMinimap: function(){
+      let minimapEl = this.$refs.flatmapContainer.querySelector('.maplibregl-ctrl-minimap');
+      this.$refs.minimapResize.parentNode.removeChild(this.$refs.minimapResize);
+      minimapEl.appendChild(this.$refs.minimapResize);
+      this.minimapResizeShow = true;
+    },
     setHelpMode: function(helpMode) {
       if (helpMode) {
         this.inHelp = true;
@@ -686,15 +707,7 @@ export default {
         );
         promise1.then(returnedObject => {
           this.mapImp = returnedObject;
-          this.sensor = new ResizeSensor(
-            this.$refs.display,
-            mapResize(this.mapImp)
-          );
-          this.mapImp.setBackgroundOpacity(1);
-          this.backgroundChangeCallback(this.currentBackground);
-          this.pathways = this.mapImp.pathTypes();
-          this.$emit("ready", this);
-          this.loading = false;
+          this.onFlatmapReady();
           if (this._stateToBeSet)
             this.restoreMapState(this._stateToBeSet);
           else {
@@ -707,6 +720,20 @@ export default {
           this.restoreMapState(this._stateToBeSet);
       }
     },
+    onFlatmapReady: function(){
+      // onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
+
+      this.sensor = new ResizeSensor(
+        this.$refs.display,
+        mapResize(this.mapImp)
+      );
+      this.mapImp.setBackgroundOpacity(1);
+      this.backgroundChangeCallback(this.currentBackground);
+      this.pathways = this.mapImp.pathTypes();
+      this.$emit("ready", this);
+      this.addResizeButtonToMinimap();
+      this.loading = false;
+    },
     showMinimap: function(flag) {
       if (this.mapImp)
         this.mapImp.showMinimap(flag);
@@ -861,7 +888,9 @@ export default {
       drawerOpen: true,
       tooltipContent: { featureIds: []},
       colourRadio: true,
-      outlinesRadio: true
+      outlinesRadio: true,
+      minimapResizeShow: false,
+      minimapSmall: false
     };
   },
   watch: {
@@ -1310,6 +1339,52 @@ export default {
   }
 }
 
+::v-deep .maplibregl-ctrl-minimap {
+  transform-origin: top right;
+  @media (max-width: 1250px) {
+    height: 125px !important;// important is needed here as we are over-riding the style set by the flatmap
+    width: 180px !important;
+    >>> .maplibregl-canvas .mapboxgl-canvas {
+      height: 125px !important;
+      width: 180px !important;
+    }
+  }
+  @media (min-width: 1251px) {
+    height: 190px !important;
+    width: 300px !important;
+    >>> .maplibregl-canvas .mapboxgl-canvas {
+      height: 190px !important;
+      width: 300px !important;
+    }
+  }
+  transition: all 1s ease;
+  &.shrink {
+    transform: scale(0.5); 
+    transform: scale(0.5);
+  }
+}
+
+.minimap-resize {
+  position: absolute;
+  pointer-events: all;
+  cursor: pointer;
+  top: 0;
+  right: 0;
+  padding-top: 3px; // needed as icon is offset
+  width: 20px;
+  height: 14px;
+  z-index: 9;
+  transition: all 1s ease;
+  &.shrink {
+    transform: rotate(0deg);
+  }
+  &.enlarge {
+    transform: rotate(180deg) scale(2);
+    padding-bottom: 5px; // note padding is added to the opposite side since it is rotated
+    padding-left: 5px;
+  }
+}
+
 ::v-deep .flatmap-popper {
   padding: 6px 4px;
   font-size: 12px;

package/src/components/MultiFlatmapVuer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="multi-container">
+  <div class="multi-container" ref="multiContainer">
     <div style="position:absolute;z-index:10;">
       <div class="species-display-text">
         Species
@@ -414,7 +414,7 @@ export default {
       activeSpecies: undefined,
       appendToBody: false,
       speciesList: {},
-      requireInitialisation: true,
+      requireInitialisation: true
     };
   },
   watch: {
@@ -467,7 +467,8 @@ export default {
       border: 1px solid $app-primary-color;
     }
   }
-}
+} 
+
 
 ::v-deep .flatmap_dropdown {
   min-width: 160px!important;
@@ -506,4 +507,3 @@ export default {
 
 </style>
 
-