@abi-software/flatmapvuer 0.5.4 → 0.5.5-beta.1

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.4",
+  "version": "0.5.5-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -24,9 +24,9 @@
       }
     },
     "@abi-software/svg-sprite": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/@abi-software/svg-sprite/-/svg-sprite-0.1.15.tgz",
-      "integrity": "sha512-xkEdNL8l2WsH8VR21aMJo49xXYmbPp049JHnw4+FSPhQgrikX8YLBfpl7nSHHePDCToD7cax3fK2ZV7dSxKHfg==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@abi-software/svg-sprite/-/svg-sprite-0.3.0.tgz",
+      "integrity": "sha512-BU04RCF9iP2ncRQTHeXGX/bO41eDeybaiUcadIeuU2I0npSkun5rQdLroocH4FgMaygi2jOl+YObmg5tNdU8SA==",
       "requires": {
         "core-js": "^3.6.5",
         "svg-inline-loader": "^0.8.2",
@@ -11887,7 +11887,7 @@
     "simple-html-tokenizer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
-      "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4="
+      "integrity": "sha512-Mc/gH3RvlKvB/gkp9XwgDKEWrSYyefIJPGG8Jk1suZms/rISdUuVEMx5O1WBnTWaScvxXDvGJrZQWblUmQHjkQ=="
     },
     "simple-swizzle": {
       "version": "0.2.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.4",
+  "version": "0.5.5-beta.1",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "^2.3.3-b.4",
-    "@abi-software/svg-sprite": "^0.1.14",
+    "@abi-software/svg-sprite": "^0.3.0",
     "core-js": "^3.3.2",
     "css-element-queries": "^1.2.2",
     "current-script-polyfill": "^1.0.0",

package/src/App.vue

@@ -26,11 +26,11 @@
   
     <MultiFlatmapVuer ref="multi" :availableSpecies="availableSpecies" 
       @resource-selected="FlatmapSelected" :minZoom="minZoom"
-      @pan-zoom-callback="panZoomcallback"
+      @pan-zoom-callback="panZoomcallback" @open-map="openMap"
       @ready="FlatmapReady" :featureInfo="featureInfo" :searchable="searchable"
       :layerControl="layerControl"
       :initial="initial" :pathControls="pathControls" :helpMode="helpMode"
-      :displayMinimap="true" :flatmapAPI="flatmapAPI"/>
+      :displayMinimap="true" :enableOpenMapUI="true" :flatmapAPI="flatmapAPI"/>
   </div>
 </template>
 
@@ -79,6 +79,9 @@ export default {
     panZoomcallback: function(payload) {
       this.payload = payload
     },
+    openMap: function (map) {
+      console.log(map)
+    },
     fetchSuggestions: function(term, cb) {
       if (term === "") {
         cb([]);

package/src/components/FlatmapVuer.vue

@@ -245,13 +245,30 @@
           <i class="el-icon-arrow-left"></i>
         </div>
       </div>
+      <el-popover
+        ref="open-map-popover"
+        placement="top-start"
+        width="128"
+        :append-to-body="false"
+        trigger="click"
+        popper-class="open-map-popper non-selectable"
+      >
+        <el-row v-for="item in openMapOptions" :key="item.key">
+          <el-button
+            type="primary"
+            plain
+            @click="$emit('open-map', item.key)"
+          >
+            {{item.display}}
+          </el-button>
+        </el-row>
+      </el-popover>
       <el-popover
         ref="backgroundPopover"
         placement="top-start"
         width="175"
         :appendToBody="false"
         trigger="click"
-
         popper-class="background-popper"
       >
         <el-row class="backgroundText">Organs display</el-row>
@@ -280,24 +297,50 @@
           />
         </el-row>
       </el-popover>
-      <el-popover
-        content="Change settings"
-        placement="right"
-        v-model="hoverVisibilities[3].value"
-        :appendToBody="false"
-        trigger="manual"
-        popper-class="flatmap-popper right-popper"
+      <div
+        class="settings-group"
+        :class="{ open: drawerOpen, close: !drawerOpen }"
       >
-        <map-svg-icon
-          v-popover:backgroundPopover
-          icon="changeBckgd"
-          class="icon-button background-colour"
-          :class="{ open: drawerOpen, close: !drawerOpen }"
-          slot="reference"
-          @mouseover.native="showToolitip(3)"
-          @mouseout.native="hideToolitip(3)"
-        />
-      </el-popover>
+        <el-row>
+          <el-popover
+            v-model="hoverVisibilities[8].value"
+            content="Open new map"
+            placement="right"
+            :append-to-body="false"
+            trigger="manual"
+            popper-class="flatmap-popper right-popper"
+          >
+            <map-svg-icon
+              v-if="enableOpenMapUI && openMapOptions.length > 0"
+              slot="reference"
+              v-popover:open-map-popover
+              icon="openMap"
+              class="icon-button"
+              @mouseover.native="showToolitip(8)"
+              @mouseout.native="hideToolitip(8)"
+            />
+          </el-popover>
+        </el-row>
+        <el-row>
+          <el-popover
+            content="Change settings"
+            placement="right"
+            v-model="hoverVisibilities[3].value"
+            :appendToBody="false"
+            trigger="manual"
+            popper-class="flatmap-popper right-popper"
+          >
+            <map-svg-icon
+              v-popover:backgroundPopover
+              icon="changeBckgd"
+              class="icon-button"
+              slot="reference"
+              @mouseover.native="showToolitip(3)"
+              @mouseout.native="hideToolitip(3)"
+            />
+          </el-popover>
+        </el-row>
+      </div>
       <Tooltip
         ref="tooltip"
         class="tooltip"
@@ -316,6 +359,7 @@ import SelectionsGroup from "./SelectionsGroup.vue";
 import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 import SvgLegends from "./legends/SvgLegends";
 import {
+  Button,
   Col,
   Loading,
   Radio,
@@ -328,6 +372,7 @@ import flatmapMarker from "../icons/flatmap-marker";
 import {FlatmapQueries} from "../services/flatmapQueries.js";
 
 locale.use(lang);
+Vue.use(Button);
 Vue.use(Col);
 Vue.use(Loading.directive);
 Vue.use(Radio);
@@ -911,6 +956,33 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * Flag to determine rather open map UI should be
+     * presented or not.
+     */
+    enableOpenMapUI: {
+      type: Boolean,
+      default: false,
+    },
+    openMapOptions: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            display: "Open AC Map",
+            key: "AC"
+          },
+          {
+            display: "Open FC Map",
+            key: "FC"
+          },
+          {
+            display: "Open 3D Human Map",
+            key: "3D"
+          },
+        ]
+      },
+    },
     isLegacy: {
       type: Boolean,
       default: false
@@ -975,7 +1047,8 @@ export default {
         { value: false },
         { value: false },
         { value: false },
-        { value: false }
+        { value: false },
+        { value: false },
       ],
       isFC: false,
       inHelp: false,
@@ -1278,16 +1351,16 @@ export default {
   padding-left: 8px;
 }
 
-.background-colour {
+.settings-group {
   bottom: 16px;
   position: absolute;
   transition: all 1s ease;
-}
-.background-colour.open {
-  left: 322px;
-}
-.background-colour.close {
-  left: 24px;
+  &.open {
+    left: 322px;
+  }
+  &.close {
+    left: 24px;
+  }
 }
 
 ::v-deep .background-popper {
@@ -1308,6 +1381,34 @@ export default {
   }
 }
 
+::v-deep .open-map-popper {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #ffffff;
+  border: 1px solid $app-primary-color;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
+  width: 178px;
+  min-width: 178px;
+
+  .el-row ~ .el-row {
+    margin-top: 8px;
+  }
+
+  .el-button {
+    padding-top:5px;
+    padding-bottom:5px;
+  }
+
+  &.el-popper[x-placement^="top"] {
+    .popper__arrow {
+      border-top-color: $app-primary-color !important;
+      &:after {
+        border-top-color: #fff !important;
+      }
+    }
+  }
+}
+
 .backgroundText {
   color: rgb(48, 49, 51);
   font-size: 14px;

package/src/components/MultiFlatmapVuer.vue

@@ -37,10 +37,13 @@
       :latestChangesMessage="item.latestChangesMessage"
       :isLegacy="item.isLegacy"
       :ref="key"
+      :enableOpenMapUI="enableOpenMapUI"
+      :openMapOptions="openMapOptions"
       @view-latest-map="viewLatestMap"
       @resource-selected="FlatmapSelected"
       @ready="FlatmapReady"
       @pan-zoom-callback="panZoomCallback"
+      @open-map="$emit('open-map', $event)"
       :featureInfo="featureInfo"
       :minZoom="minZoom"
       :pathControls="pathControls"
@@ -377,6 +380,17 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * Flag to determine rather open map UI should be
+     * presented or not.
+     */
+    enableOpenMapUI: {
+      type: Boolean,
+      default: false,
+    },
+    openMapOptions: {
+      type: Array
+    },
     availableSpecies: {
       type: Object,
       default: function() {