Expose access to mouse-events in barplot settings

Author: pverscha

dist/unipept-visualizations.js

@@ -106,6 +106,30 @@ export declare class BarplotSettings extends Settings {
      * corresponding entry in the barplot's legend.
      */
     highlightOnHover: boolean;
+    /**
+     * This function is called when the user's pointer starts to move over an item in the barplot. By default, this
+     * function does not do anything, but it can be overwritten if requested.
+     */
+    mouseIn: (bars: Bar[], barIndex: number, itemIndex: number, mousePosition: {
+        x: number;
+        y: number;
+    }) => void;
+    /**
+     * This function is called when the user's pointer that was already over an item in the barplot moves. By default,
+     * this function does not do anything, but it can be overwritten if requested.
+     */
+    mouseMove: (bars: Bar[], barIndex: number, itemIndex: number, mousePosition: {
+        x: number;
+        y: number;
+    }) => void;
+    /**
+     * This function is called when the user's pointer moves out of an item (that it was previously already pointing
+     * to). By default this function does not do anything, but it can be overwritten if requested.
+     */
+    mouseOut: (bars: Bar[], barIndex: number, itemIndex: number, mousePosition: {
+        x: number;
+        y: number;
+    }) => void;
     /**
      * Returns the html to use as tooltip for current mouse position. This tooltip provides information to the user
      * about the node that's currently hovered by the mouse cursor.

dist/unipept-visualizations.js.map

@@ -1,6 +1,6 @@
 {
     "name": "unipept-visualizations",
-    "version": "2.2.2",
+    "version": "2.2.3",
     "description": "The Unipept visualisation library",
     "homepage": "https://github.com/unipept/unipept-visualizations",
     "bugs": "https://github.com/unipept/unipept-visualizations/issues",

dist/visualizations/barplot/BarplotSettings.d.ts

@@ -285,12 +285,12 @@ export default class Barplot {
                 this.mouseIn(event, d.barIndex, itemIdx, (event.target! as HTMLElement).parentElement!);
             })
             .on("mousemove", (event: MouseEvent, d: any) => {
-                const selectedItem = this.data[d.barIndex].items.find((item: BarItem) => item.label === d.title)!;
-                this.mouseMove(event, selectedItem, (event.target! as HTMLElement).parentElement!);
+                const itemIdx = this.data[d.barIndex].items.findIndex((item: BarItem) => item.label === d.title)!;
+                this.mouseMove(event, d.barIndex, itemIdx, (event.target! as HTMLElement).parentElement!);
             })
             .on("mouseout", (event: MouseEvent, d: any) => {
-                const selectedItem = this.data[d.barIndex].items.find((item: BarItem) => item.label === d.title)!;
-                this.mouseOut(event, selectedItem, (event.target! as HTMLElement).parentElement!);
+                const itemIdx = this.data[d.barIndex].items.findIndex((item: BarItem) => item.label === d.title)!;
+                this.mouseOut(event, d.barIndex, itemIdx, (event.target! as HTMLElement).parentElement!);
             });
 
         // Add x-axis
@@ -372,6 +372,8 @@ export default class Barplot {
     private mouseIn(event: MouseEvent, barIndex: number, itemIndex: number, targetElement: EventTarget) {
         const d = this.data[barIndex].items[itemIndex];
 
+        this.settings.mouseIn(this.data, barIndex, itemIndex, {x: event.pageX, y: event.pageY});
+
         if (this.settings.enableTooltips && this.tooltip) {
             this.tooltip.html(this.settings.getTooltip(this.data, barIndex, itemIndex))
                 .style("top", (event.pageY + 10) + "px")
@@ -384,23 +386,27 @@ export default class Barplot {
             d3.selectAll(".barplot-item").classed("barplot-item-highlighted", true);
             // Except for the current element, we want this one to stand out of the rest
             d3.selectAll(`g[data-bar-item="${d.label}"]`).classed("barplot-item-highlighted", false);
-            
+
             // Also select the legend entry with the same label and highlight the corresponding rectangle
             d3.selectAll(".legend-item").classed("legend-item-highlighted", true);
 
             d3.selectAll(`g[data-legend-entry="${d.label}"]`).classed("legend-item-highlighted", false);
         }
     }
 
-    private mouseMove(event: MouseEvent, d: BarItem, targetElement: EventTarget) {
+    private mouseMove(event: MouseEvent, barIndex: number, itemIndex: number, targetElement: EventTarget) {
+        this.settings.mouseMove(this.data, barIndex, itemIndex, {x: event.pageX, y: event.pageY})
+
         if (this.settings.enableTooltips && this.tooltip) {
             this.tooltip
                 .style("top", (event.pageY + 10) + "px")
                 .style("left", (event.pageX + 10) + "px");
         }
     }
 
-    private mouseOut(event: MouseEvent, d: BarItem, targetElement: EventTarget) {
+    private mouseOut(event: MouseEvent, barIndex: number, itemIndex: number, targetElement: EventTarget) {
+        this.settings.mouseOut(this.data, barIndex, itemIndex, {x: event.pageX, y: event.pageY})
+
         if (this.settings.enableTooltips && this.tooltip) {
             this.tooltip.style("visibility", "hidden");
         }

package-lock.json

@@ -140,6 +140,24 @@ export class BarplotSettings extends Settings {
      */
     highlightOnHover: boolean = true;
 
+    /**
+     * This function is called when the user's pointer starts to move over an item in the barplot. By default, this
+     * function does not do anything, but it can be overwritten if requested.
+     */
+    mouseIn: (bars: Bar[], barIndex: number, itemIndex: number, mousePosition: { x: number, y: number }) => void = () => {};
+
+    /**
+     * This function is called when the user's pointer that was already over an item in the barplot moves. By default,
+     * this function does not do anything, but it can be overwritten if requested.
+     */
+    mouseMove: (bars: Bar[], barIndex: number, itemIndex: number, mousePosition: { x: number, y: number }) => void = () => {};
+
+    /**
+     * This function is called when the user's pointer moves out of an item (that it was previously already pointing
+     * to). By default this function does not do anything, but it can be overwritten if requested.
+     */
+    mouseOut: (bars: Bar[], barIndex: number, itemIndex: number, mousePosition: { x: number, y: number }) => void = () => {};
+
     /**
      * Returns the html to use as tooltip for current mouse position. This tooltip provides information to the user
      * about the node that's currently hovered by the mouse cursor.