From 935a1dfb5c29411ce51ec49d4a2d49b709c9d779 Mon Sep 17 00:00:00 2001 From: vargburz Date: Mon, 23 May 2022 19:45:10 +0300 Subject: [PATCH] use rest of options --- src/index.ts | 76 +++++++++++++++++-------------------------- src/models/options.ts | 26 ++++++++++++++- 2 files changed, 55 insertions(+), 47 deletions(-) diff --git a/src/index.ts b/src/index.ts index 9f47c38..722a729 100644 --- a/src/index.ts +++ b/src/index.ts @@ -330,8 +330,8 @@ abstract class ChartwerkPod { protected addEvents(): void { // TODO: refactor for a new mouse/scroll events - const panKeyEvent = this.options.zoomEvents.mouse.pan.keyEvent; - const isPanActive = this.options.zoomEvents.mouse.pan.isActive; + const panKeyEvent = this.coreOptions.mousePanEvent.keyEvent; + const isPanActive = this.coreOptions.mousePanEvent.isActive; if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) { this.initPan(); this.initBrush(); @@ -348,11 +348,11 @@ abstract class ChartwerkPod { } 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 { 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 { protected initPan(): void { if( - this.options.zoomEvents.mouse.pan.isActive === false && - this.options.zoomEvents.scroll.pan.isActive === false && - this.options.zoomEvents.scroll.zoom.isActive === false + this.coreOptions.mousePanEvent.isActive === false && + this.coreOptions.scrollPanEvent.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 { } 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 { 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 { } this.rescaleMetricAndAxis(event); - if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panning !== undefined) { - 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'); - } + this.coreOptions.callbackPanning({ + ranges: [this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange], + d3Event: event + }); } public rescaleMetricAndAxis(event: d3.D3ZoomEvent): void { @@ -575,8 +571,8 @@ abstract class ChartwerkPod { protected onPanningRescale(event: d3.D3ZoomEvent): 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 scrollZoomOptions = this.options.zoomEvents.scroll.zoom; + const scrollPanOptions = this.coreOptions.scrollPanEvent; + 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 { 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 { } protected onScrollPanningRescale(event: d3.D3ZoomEvent): 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 { 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 { this.isPanning = false; this.deltaYTransform = 0; this.onMouseOut(); - if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panningEnd !== undefined) { - this.options.eventsCallbacks.panningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]); - } else { - console.log('on panning end, but there is no callback'); - } + this.coreOptions.callbackPanningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]); } 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 { 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 { this.brushStartSelection = null; } - if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomIn !== undefined) { - this.options.eventsCallbacks.zoomIn([xRange, yRange]); - } else { - console.log('zoom in, but there is no callback'); - } + this.coreOptions.callbackZoomIn([xRange, yRange]); } protected zoomOut(): void { @@ -802,11 +790,7 @@ abstract class ChartwerkPod { x: xAxisMiddleValue, y: yAxisMiddleValue } - if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) { - this.options.eventsCallbacks.zoomOut(centers); - } else { - console.log('zoom out, but there is no callback'); - } + this.coreOptions.callbackZoomOut(centers); } // TODO: move to State @@ -837,10 +821,10 @@ abstract class ChartwerkPod { } 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 { 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; } diff --git a/src/models/options.ts b/src/models/options.ts index 0bdf129..299fed0 100644 --- a/src/models/options.ts +++ b/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 { 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); + } + } }