Merge branch 'scroll-direction-option' into 'main'

Scroll direction option

See merge request chartwerk/core!13

dist/index.d.ts

@@ -2,7 +2,7 @@
 import VueChartwerkPodMixin from './VueChartwerkPodMixin';
 import { PodState } from './state';
 import { Grid } from './components/grid';
-import { Margin, TimeSerie, Options, TickOrientation, TimeFormat, BrushOrientation, AxisFormat, CrosshairOrientation, SvgElementAttributes, KeyEvent, PanOrientation, yAxisOrientation, ScrollPanOrientation, AxisOption } from './types';
+import { Margin, TimeSerie, Options, TickOrientation, TimeFormat, BrushOrientation, AxisFormat, CrosshairOrientation, SvgElementAttributes, KeyEvent, PanOrientation, yAxisOrientation, ScrollPanOrientation, ScrollPanDirection, AxisOption } from './types';
 import { palette } from './colors';
 import * as d3 from 'd3';
 declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
@@ -72,6 +72,8 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     protected renderYLabel(): void;
     protected renderXLabel(): void;
     protected renderNoDataPointsMessage(): void;
+    private disableScrollForward;
+    private disableScrollBackward;
     protected onPanning(): void;
     rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void;
     protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void;
@@ -107,4 +109,4 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     protected get rectClipId(): string;
     isOutOfChart(): boolean;
 }
-export { ChartwerkPod, VueChartwerkPodMixin, Margin, TimeSerie, Options, TickOrientation, TimeFormat, BrushOrientation, PanOrientation, AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, KeyEvent, palette };
+export { ChartwerkPod, VueChartwerkPodMixin, Margin, TimeSerie, Options, TickOrientation, TimeFormat, BrushOrientation, PanOrientation, AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, ScrollPanDirection, KeyEvent, palette };

dist/types.d.ts

@@ -93,6 +93,7 @@ export declare type Options = {
                 keyEvent?: KeyEvent;
                 panStep?: number;
                 orientation?: ScrollPanOrientation;
+                direction?: ScrollPanDirection;
             };
         };
     };
@@ -148,6 +149,11 @@ export declare enum ScrollPanOrientation {
     VERTICAL = "vertical",
     HORIZONTAL = "horizontal"
 }
+export declare enum ScrollPanDirection {
+    FORWARD = "forward",
+    BACKWARD = "backward",
+    BOTH = "both"
+}
 export declare enum AxisFormat {
     TIME = "time",
     NUMERIC = "numeric",

src/index.ts

@@ -18,6 +18,7 @@ import {
   PanOrientation,
   yAxisOrientation,
   ScrollPanOrientation,
+  ScrollPanDirection,
   AxisOption,
   SvgElParams,
 } from './types';
@@ -82,6 +83,7 @@ const DEFAULT_OPTIONS: Options = {
         keyEvent: KeyEvent.SHIFT,
         panStep: DEFAULT_SCROLL_PAN_STEP,
         orientation: ScrollPanOrientation.HORIZONTAL,
+        direction: ScrollPanDirection.BOTH,
       },
     },
   },
@@ -608,11 +610,25 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
       .text('No data points');
   }
 
+  private disableScrollForward(event: any): boolean {
+    return event.sourceEvent.wheelDelta > 0
+        && this.options.zoomEvents.scroll.pan.direction === ScrollPanDirection.FORWARD;
+  }
+
+  private disableScrollBackward(event: any): boolean {
+    return event.sourceEvent.wheelDelta < 0
+        && this.options.zoomEvents.scroll.pan.direction === ScrollPanDirection.BACKWARD;
+  }
+
   protected onPanning(): void {
     const event = this.d3.event;
     if(event.sourceEvent === null || event.sourceEvent === undefined) {
       return;
     }
+    if (event.sourceEvent.type === 'wheel'
+        && (this.disableScrollBackward(event) || this.disableScrollForward(event))) {
+      return;
+    }
     this.rescaleMetricAndAxis(event);
 
     if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panning !== undefined) {
@@ -1111,6 +1127,6 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
 export {
   ChartwerkPod, VueChartwerkPodMixin,
   Margin, TimeSerie, Options, TickOrientation, TimeFormat, BrushOrientation, PanOrientation,
-  AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, KeyEvent,
+  AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, ScrollPanDirection, KeyEvent,
   palette
 };

src/types.ts

@@ -85,6 +85,7 @@ export type Options = {
         keyEvent?: KeyEvent;
         panStep?: number;
         orientation?: ScrollPanOrientation;
+        direction?: ScrollPanDirection;
       },
     },
   }
@@ -140,6 +141,11 @@ export enum ScrollPanOrientation {
   VERTICAL = 'vertical',
   HORIZONTAL = 'horizontal',
 }
+export enum ScrollPanDirection  {
+  FORWARD = 'forward',
+  BACKWARD = 'backward',
+  BOTH = 'both',
+}
 export enum AxisFormat {
   TIME = 'time',
   NUMERIC = 'numeric',
@@ -177,4 +183,4 @@ export type SvgElParams = {
   width: number,
   xScale: d3.ScaleLinear<number, number>,
   yScale: d3.ScaleLinear<number, number>,
-}
+}