Merge pull request 'onclick' (#19) from onclick-event-#15 into main

Reviewed-on: #19

src/index.ts

@@ -30,8 +30,6 @@ import { palette } from './colors';
 
 import * as d3 from 'd3';
 
-import first from 'lodash/first';
-import last from 'lodash/last';
 import debounce from 'lodash/debounce';
 
 
@@ -156,6 +154,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
   protected abstract onMouseOver(): void;
   protected abstract onMouseOut(): void;
   protected abstract onMouseMove(): void;
+  protected abstract onMouseClick(): void;
   public abstract renderSharedCrosshair(values: { x?: number, y?: number }): void;
   public abstract hideSharedCrosshair(): void;
 
@@ -327,12 +326,21 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     // TODO: refactor for a new mouse/scroll events
     const panKeyEvent = this.options.mousePanEvent.keyEvent;
     const isPanActive = this.options.mousePanEvent.isActive;
-    if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) {
-      this.initPan();
-      this.initBrush();
+    const isBrushActive = this.options.mouseZoomEvent.isActive;
+    if(panKeyEvent === KeyEvent.MAIN) {
+      if(isPanActive) {
+        this.initPan();
+      }
+      if(isBrushActive) {
+        this.initBrush();
+      }
     } else {
-      this.initBrush();
-      this.initPan();
+      if(isBrushActive) {
+        this.initBrush();
+      }
+      if(isPanActive) {
+        this.initPan();
+      }
     }
     this.ensureOverlayExisting();
 
@@ -341,6 +349,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
         .on('mouseover', this.onMouseOver.bind(this))
         .on('mouseout', this.onMouseOut.bind(this))
         .on('mousemove', this.onMouseMove.bind(this))
+        .on('click', this.onMouseClick.bind(this))
         .on('dblclick', () => {
           d3.event.stopPropagation();
           // TODO: add the same check as we have in line-pod
@@ -372,10 +381,6 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
   }
 
   protected initBrush(): void {
-    const isBrushActive = this.options.mouseZoomEvent.isActive;
-    if(isBrushActive === false) {
-      return;
-    }
     switch(this.options.mouseZoomEvent.orientation) {
       case BrushOrientation.VERTICAL:
         this.brush = d3.brushY();

src/models/options.ts

@@ -230,4 +230,10 @@ export class CoreOptions<O extends Options> {
       this._options.eventsCallbacks.mouseOut();
     }
   }
+
+  callbackMouseClick(event): void {
+    if(has(this._options.eventsCallbacks, 'mouseClick')) {
+      this._options.eventsCallbacks.mouseClick(event);
+    }
+  }
 }

src/types.ts

@@ -22,6 +22,7 @@ export type Options = {
     panningEnd?: (range: AxisRange[]) => void,
     zoomOut?: (centers: {x: number, y: number}) => void,
     mouseMove?: (evt: any) => void,
+    mouseClick?: (evt: any) => void,
     mouseOut?: () => void,
     onLegendClick?: (idx: number) => void,
     onLegendLabelClick?: (idx: number) => void,