@abi-software/flatmapvuer 0.2.4-beta-0 → 0.2.4-beta-4

package/src/components/FlatmapVuer.vue

@@ -6,7 +6,7 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.3)"
   >
-    <SvgSpriteColor />
+    <map-svg-sprite-color />
     <div style="height:100%;width:100%;position:relative;overflow-y:none">
       <div style="height:100%;width:100%;" ref="display"></div>
       <el-popover
@@ -37,7 +37,7 @@
           popper-class="flatmap-popper left-popper"
           v-model="hoverVisibilities[0].value"
         >
-          <SvgIcon
+          <map-svg-icon
             icon="zoomIn"
             class="icon-button zoomIn"
             slot="reference"
@@ -54,7 +54,7 @@
           popper-class="flatmap-popper popper-zoomout"
           v-model="hoverVisibilities[1].value"
         >
-          <SvgIcon
+          <map-svg-icon
             icon="zoomOut"
             class="icon-button zoomOut"
             slot="reference"
@@ -71,7 +71,7 @@
           popper-class="flatmap-popper"
           v-model="hoverVisibilities[2].value"
         >
-          <SvgIcon
+          <map-svg-icon
             icon="resetZoom"
             class="icon-button resetView"
             slot="reference"
@@ -197,7 +197,7 @@
         trigger="manual"
         popper-class="flatmap-popper right-popper"
       >
-        <SvgIcon
+        <map-svg-icon
           v-popover:backgroundPopover
           icon="changeBckgd"
           class="icon-button background-colour"
@@ -222,7 +222,7 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import Tooltip from "./Tooltip";
-import { SvgIcon, SvgSpriteColor } from "@abi-software/svg-sprite";
+import { MapSvgIcon, MapSvgSpriteColor } from "@abi-software/svg-sprite";
 import {
   Checkbox,
   CheckboxGroup,
@@ -254,8 +254,8 @@ const mapResize = map => {
 export default {
   name: "FlatmapVuer",
   components: {
-    SvgIcon,
-    SvgSpriteColor,
+    MapSvgIcon,
+    MapSvgSpriteColor,
     Tooltip
   },
   beforeCreate: function() {
@@ -338,24 +338,31 @@ export default {
         this.mapImp.showPaths(this.checkedItems);
       }
     },
+    enablePanZoomEvents: function(flag) {
+      this.mapImp.enablePanZoomEvents(flag);
+    },
     eventCallback: function() {
-      return (eventType, feature, ...args) => {
-        const label = feature.label;
-        const resource = [feature.models];
-        const taxonomy = this.entry;
-        const data = {
-          dataset: feature.dataset,
-          taxonomy: taxonomy,
-          resource: resource,
-          label: label,
-          feature: feature,
-          userData: args,
-          eventType: eventType
-        };
-        // Disable the nueron pop up for now.
-        if (feature && feature.type !== "marker")
-          this.checkAndCreatePopups(data);
-        this.$emit("resource-selected", data);
+      return (eventType, data, ...args) => {
+        if (eventType !== "pan-zoom") {
+          const label = data.label;
+          const resource = [data.models];
+          const taxonomy = this.entry;
+          const payload = {
+            dataset: data.dataset,
+            taxonomy: taxonomy,
+            resource: resource,
+            label: label,
+            feature: data,
+            userData: args,
+            eventType: eventType
+          };
+          // Disable the nueron pop up for now.
+          if (data && data.type !== "marker")
+            this.checkAndCreatePopups(data);
+          this.$emit("resource-selected", payload);
+        } else {
+          this.$emit("pan-zoom-callback", data);
+        }
       };
     },
     // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
@@ -578,6 +585,13 @@ export default {
         if (this.entry == state.entry) this._viewportToBeSet = state.viewport;
       }
     },
+    showMinimap: function(flag) {
+      if (this.mapImp)
+        this.mapImp.showMinimap(flag);
+    },
+    showPathwaysDrawer: function(flag) {
+      this.drawerOpen = flag;
+    },
     /**
      * Function to display features with annotation matching the provided term.
      */

package/src/components/MultiFlatmapVuer.vue

@@ -36,6 +36,7 @@
       :ref="key"
       @resource-selected="FlatmapSelected"
       @ready="FlatmapReady"
+      @pan-zoom-callback="panZoomCallback"
       :featureInfo="featureInfo"
       :minZoom="minZoom"
       :pathControls="pathControls"
@@ -119,6 +120,9 @@ export default {
     getCurrentFlatmap: function() {
       return this.$refs[this.activeSpecies][0];
     },
+    panZoomCallback: function(payload) {
+      this.$emit("pan-zoom-callback", payload);
+    },
     showPopup: function(featureId, node, options) {
       let map = this.getCurrentFlatmap();
       map.showPopup(featureId, node, options);