use rest of options

src/index.ts

@@ -330,8 +330,8 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
 
   protected addEvents(): void {
     // TODO: refactor for a new mouse/scroll events
-    const panKeyEvent = this.options.zoomEvents.mouse.pan.keyEvent;
+    const panKeyEvent = this.coreOptions.mousePanEvent.keyEvent;
-    const isPanActive = this.options.zoomEvents.mouse.pan.isActive;
+    const isPanActive = this.coreOptions.mousePanEvent.isActive;
     if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) {
       this.initPan();
       this.initBrush();
@@ -348,11 +348,11 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
   }
 
   protected initBrush(): void {
-    const isBrushActive = this.options.zoomEvents.mouse.zoom.isActive;
+    const isBrushActive = this.coreOptions.mouseZoomEvent.isActive;
     if(isBrushActive === false) {
       return;
     }
-    switch(this.options.zoomEvents.mouse.zoom.orientation) {
+    switch(this.coreOptions.mouseZoomEvent.orientation) {
       case BrushOrientation.VERTICAL:
         this.brush = d3.brushY();
         break;
@@ -366,7 +366,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
       default:
         this.brush = d3.brushX();
     }
-    const keyEvent = this.options.zoomEvents.mouse.zoom.keyEvent;
+    const keyEvent = this.coreOptions.mouseZoomEvent.keyEvent;
     this.brush.extent([
         [0, 0],
         [this.width, this.height]
@@ -404,13 +404,13 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
 
   protected initPan(): void {
     if(
-      this.options.zoomEvents.mouse.pan.isActive === false &&
+      this.coreOptions.mousePanEvent.isActive === false &&
-      this.options.zoomEvents.scroll.pan.isActive === false &&
+      this.coreOptions.scrollPanEvent.isActive === false &&
-      this.options.zoomEvents.scroll.zoom.isActive === false
+      this.coreOptions.scrollZoomEvent.isActive === false
     ) {
       return;
     }
-    if(this.options.zoomEvents.mouse.zoom.isActive === false) {
+    if(this.coreOptions.mouseZoomEvent.isActive === false) {
       // init cumstom overlay to handle all events
       this.customOverlay = this.chartContainer.append('rect')
         .attr('class', 'custom-overlay')
@@ -446,7 +446,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
   }
 
   protected renderLegend(): void {
-    if(this.options.renderLegend === false) {
+    if(this.coreOptions.allOptions.renderLegend === false) {
       return;
     }
     if(!this.coreSeries.isSeriesAvailable) {
@@ -530,12 +530,12 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
 
   private disableScrollForward(event: any): boolean {
     return event.sourceEvent.wheelDelta > 0
-        && this.options.zoomEvents.scroll.pan.direction === ScrollPanDirection.FORWARD;
+        && this.coreOptions.scrollPanEvent.direction === ScrollPanDirection.FORWARD;
   }
 
   private disableScrollBackward(event: any): boolean {
     return event.sourceEvent.wheelDelta < 0
-        && this.options.zoomEvents.scroll.pan.direction === ScrollPanDirection.BACKWARD;
+        && this.coreOptions.scrollPanEvent.direction === ScrollPanDirection.BACKWARD;
   }
 
   protected onPanning(): void {
@@ -549,14 +549,10 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
     }
     this.rescaleMetricAndAxis(event);
 
-    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panning !== undefined) {
+    this.coreOptions.callbackPanning({
-      this.options.eventsCallbacks.panning({
       ranges: [this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange],
       d3Event: event
     });
-    } else {
-      console.log('on panning, but there is no callback');
-    }
   }
 
   public rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void {
@@ -575,8 +571,8 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
   protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void {
     // rescale metrics and axis on mouse and scroll panning
     const eventType = event.sourceEvent.type; // 'wheel' or 'mousemove'
-    const scrollPanOptions = this.options.zoomEvents.scroll.pan;
+    const scrollPanOptions = this.coreOptions.scrollPanEvent;
-    const scrollZoomOptions = this.options.zoomEvents.scroll.zoom;
+    const scrollZoomOptions = this.coreOptions.scrollZoomEvent;
     // TODO: maybe use switch and move it to onPanning
     if(eventType === 'wheel') {
       if(scrollPanOptions.isActive === true && this.isD3EventKeyEqualOption(event, scrollPanOptions.keyEvent)) {
@@ -609,7 +605,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
       return;
     }
 
-    const panOrientation = this.options.zoomEvents.mouse.pan.orientation;
+    const panOrientation = this.coreOptions.mousePanEvent.orientation;
     if(panOrientation === PanOrientation.HORIZONTAL || panOrientation === PanOrientation.BOTH) {
       this.rescaleAxisX(event.transform.x);
     }
@@ -642,7 +638,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
   }
 
   protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void {
-    const scrollPanOptions = this.options.zoomEvents.scroll.pan;
+    const scrollPanOptions = this.coreOptions.scrollPanEvent;
     // TODO: event.transform.y / x depends on mouse position, so we use hardcoded const, which should be removed
     const transformStep = scrollPanOptions.panStep;
     const scrollPanOrientation = scrollPanOptions.orientation;
@@ -659,7 +655,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
       case ScrollPanOrientation.VERTICAL:
         // @ts-ignore
         let signY = Math.sign(event.transform.y);
-        if(this.options.axis.y.invert === true) {
+        if(this.coreOptions.axis.y.invert === true) {
           signY = -signY;
         }
         let rangeY = this.state.yValueRange;
@@ -683,16 +679,12 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
     this.isPanning = false;
     this.deltaYTransform = 0;
     this.onMouseOut();
-    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panningEnd !== undefined) {
+    this.coreOptions.callbackPanningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
-      this.options.eventsCallbacks.panningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
-    } else {
-      console.log('on panning end, but there is no callback');
-    }
   }
 
   protected onBrush(): void {
     const selection = d3.event.selection;
-    if(this.options.zoomEvents.mouse.zoom.orientation !== BrushOrientation.SQUARE || selection === null) {
+    if(this.coreOptions.mouseZoomEvent.orientation !== BrushOrientation.SQUARE || selection === null) {
       return;
     }
     const selectionAtts = this.getSelectionAttrs(selection);
@@ -748,7 +740,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
 
     let xRange: [number, number];
     let yRange: [number, number];
-    switch(this.options.zoomEvents.mouse.zoom.orientation) {
+    switch(this.coreOptions.mouseZoomEvent.orientation) {
       case BrushOrientation.HORIZONTAL:
         const startTimestamp = this.xScale.invert(extent[0]);
         const endTimestamp = this.xScale.invert(extent[1]);
@@ -788,11 +780,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
         this.brushStartSelection = null;
     }
 
-    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomIn !== undefined) {
+    this.coreOptions.callbackZoomIn([xRange, yRange]);
-      this.options.eventsCallbacks.zoomIn([xRange, yRange]);
-    } else {
-      console.log('zoom in, but there is no callback');
-    }
   }
 
   protected zoomOut(): void {
@@ -802,11 +790,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
       x: xAxisMiddleValue,
       y: yAxisMiddleValue
     }
-    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) {
+    this.coreOptions.callbackZoomOut(centers);
-      this.options.eventsCallbacks.zoomOut(centers);
-    } else {
-      console.log('zoom out, but there is no callback');
-    }
   }
 
   // TODO: move to State
@@ -837,10 +821,10 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
   }
 
   getd3TimeRangeEvery(count: number): d3.TimeInterval {
-    if(this.options.timeInterval === undefined || this.options.timeInterval.timeFormat === undefined) {
+    if(this.coreOptions.allOptions.timeInterval.timeFormat === undefined) {
       return d3.timeMinute.every(count);
     }
-    switch(this.options.timeInterval.timeFormat) {
+    switch(this.coreOptions.allOptions.timeInterval.timeFormat) {
       case TimeFormat.SECOND:
         return d3.utcSecond.every(count);
       case TimeFormat.MINUTE:
@@ -902,9 +886,9 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
       const interval = this.coreSeries.visibleSeries[0].datapoints[1][0] - this.coreSeries.visibleSeries[0].datapoints[0][0];
       return interval;
     }
-    if(this.options.timeInterval !== undefined && this.options.timeInterval.count !== undefined) {
+    if(this.coreOptions.allOptions.timeInterval.count !== undefined) {
       //TODO: timeFormat to timestamp
-      return this.options.timeInterval.count * MILISECONDS_IN_MINUTE;
+      return this.coreOptions.allOptions.timeInterval.count * MILISECONDS_IN_MINUTE;
     }
     return MILISECONDS_IN_MINUTE;
   }

src/models/options.ts

@@ -4,7 +4,7 @@ import {
   CrosshairOptions, CrosshairOrientation,
   ZoomEvents, MouseZoomEvent, MousePanEvent, DoubleClickEvent, ScrollZoomEvent, ScrollPanEvent,
   ScrollPanOrientation, ScrollPanDirection, PanOrientation, KeyEvent, BrushOrientation,
-  Margin, TimeFormat,
+  Margin, TimeFormat, AxisRange,
 } from '../types';
 
 import lodashDefaultsDeep from 'lodash/defaultsDeep';
@@ -180,4 +180,28 @@ export class CoreOptions<O extends Options> {
       this._options.eventsCallbacks.onLegendLabelClick(idx);
     }
   }
+
+  callbackPanning(event: { ranges: AxisRange[], d3Event: any }): void {
+    if(has(this._options.eventsCallbacks, 'panning')) {
+      this._options.eventsCallbacks.panning(event);
+    }
+  }
+
+  callbackPanningEnd(ranges: AxisRange[]): void {
+    if(has(this._options.eventsCallbacks, 'panningEnd')) {
+      this._options.eventsCallbacks.panningEnd(ranges);
+    }
+  }
+
+  callbackZoomIn(ranges: AxisRange[]): void {
+    if(has(this._options.eventsCallbacks, 'zoomIn')) {
+      this._options.eventsCallbacks.zoomIn(ranges);
+    }
+  }
+
+  callbackZoomOut(centers: { x: number, y: number }): void {
+    if(has(this._options.eventsCallbacks, 'zoomOut')) {
+      this._options.eventsCallbacks.zoomOut(centers);
+    }
+  }
 }