Orientation for zoom scrolling

dist/index.d.ts

@@ -75,6 +75,8 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     protected onPanning(): void;
     rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void;
     protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void;
+    rescaleAxisX(transformX: number): void;
+    rescaleAxisY(transformY: number): void;
     protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void;
     protected onPanningEnd(): void;
     protected onBrush(): void;

dist/state.d.ts

@@ -34,7 +34,7 @@ export declare class PodState<T extends TimeSerie, O extends Options> {
     get transform(): {
         x?: number;
         y?: number;
-        k?: number;
+        k?: number | string;
     };
     set xValueRange(range: [number, number]);
     set yValueRange(range: [number, number]);
@@ -42,7 +42,7 @@ export declare class PodState<T extends TimeSerie, O extends Options> {
     set transform(transform: {
         x?: number;
         y?: number;
-        k?: number;
+        k?: number | string;
     });
     getMinValueY(): number;
     getMaxValueY(): number;

dist/types.d.ts

@@ -82,6 +82,7 @@ export declare type Options = {
             zoom?: {
                 isActive: boolean;
                 keyEvent?: KeyEvent;
+                orientation?: PanOrientation;
             };
             pan?: {
                 isActive: boolean;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/core",
-  "version": "0.2.0",
+  "version": "0.3.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/core",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Chartwerk core",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/index.ts

@@ -71,6 +71,7 @@ const DEFAULT_OPTIONS: Options = {
       zoom: {
         isActive: true,
         keyEvent: KeyEvent.MAIN,
+        orientation: PanOrientation.BOTH,
       },
       pan: {
         isActive: false,
@@ -648,7 +649,27 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
         return;
       }
       if(scrollZoomOptions.isActive === true && this.isD3EventKeyEqualOption(event, scrollZoomOptions.keyEvent)) {
-        this.state.transform = { k: event.transform.k };
+        const orientation = scrollZoomOptions.orientation;
+        let k;
+        switch(orientation) {
+          case PanOrientation.HORIZONTAL:
+            k = `${event.transform.k},1`;
+            this.rescaleAxisX(event.transform.x);
+            break;
+          case PanOrientation.VERTICAL:
+            k = `1,${event.transform.k}`;
+            this.rescaleAxisY(event.transform.y);
+            break;
+          case PanOrientation.BOTH:
+            k = event.transform.k;
+            this.rescaleAxisX(event.transform.x);
+            this.rescaleAxisY(event.transform.y);
+            break;
+          default:
+            throw new Error(`Unknown type of PanOrientation: ${orientation}`);
+        }
+        this.state.transform.k = k;
+        return;
       }
     } else {
       const isPanActive = this.options.zoomEvents.mouse.pan.isActive;
@@ -659,24 +680,33 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
 
     const panOrientation = this.options.zoomEvents.mouse.pan.orientation;
     if(panOrientation === PanOrientation.HORIZONTAL || panOrientation === PanOrientation.BOTH) {
-      this.state.transform = { x: event.transform.x };
-      const rescaleX = this.d3.event.transform.rescaleX(this.initScaleX);
-      this.xAxisElement.call(this.d3.axisBottom(this.xScale).scale(rescaleX));
-      this.state.xValueRange = [rescaleX.invert(0), rescaleX.invert(this.width)];
+      this.rescaleAxisX(event.transform.x);
     }
     if(panOrientation === PanOrientation.VERTICAL || panOrientation === PanOrientation.BOTH) {
-      this.state.transform = { y: event.transform.y };
-      const rescaleY = this.d3.event.transform.rescaleY(this.initScaleY);
-      this.yAxisElement.call(this.d3.axisLeft(this.yScale).scale(rescaleY));
-      this.state.yValueRange = [rescaleY.invert(0), rescaleY.invert(this.height)];
-      if(this.y1AxisElement) {
-        const rescaleY1 = this.d3.event.transform.rescaleY(this.initScaleY1);
-        this.y1AxisElement.call(this.d3.axisLeft(this.y1Scale).scale(rescaleY1));
-        this.state.y1ValueRange = [rescaleY1.invert(0), rescaleY1.invert(this.height)];
-        // TODO: y1 axis jumps on panning
-        this.y1AxisElement.selectAll('line').attr('x2', 2);
-        this.y1AxisElement.selectAll('text').attr('x', 5);
-      }
+      this.rescaleAxisY(event.transform.y);
+    }
+  }
+
+  // TODO: refactor, divide between classes
+  rescaleAxisX(transformX: number): void {
+    this.state.transform = { x: transformX };
+    const rescaleX = this.d3.event.transform.rescaleX(this.initScaleX);
+    this.xAxisElement.call(this.d3.axisBottom(this.xScale).scale(rescaleX));
+    this.state.xValueRange = [rescaleX.invert(0), rescaleX.invert(this.width)];
+  }
+
+  rescaleAxisY(transformY: number): void {
+    this.state.transform = { y: transformY };
+    const rescaleY = this.d3.event.transform.rescaleY(this.initScaleY);
+    this.yAxisElement.call(this.d3.axisLeft(this.yScale).scale(rescaleY));
+    this.state.yValueRange = [rescaleY.invert(0), rescaleY.invert(this.height)];
+    if(this.y1AxisElement) {
+      const rescaleY1 = this.d3.event.transform.rescaleY(this.initScaleY1);
+      this.y1AxisElement.call(this.d3.axisLeft(this.y1Scale).scale(rescaleY1));
+      this.state.y1ValueRange = [rescaleY1.invert(0), rescaleY1.invert(this.height)];
+      // TODO: y1 axis jumps on panning
+      this.y1AxisElement.selectAll('line').attr('x2', 2);
+      this.y1AxisElement.selectAll('text').attr('x', 5);
     }
   }
 

src/state.ts

@@ -27,7 +27,7 @@ export class PodState<T extends TimeSerie, O extends Options> {
   private _xValueRange: [number, number];
   private _yValueRange: [number, number];
   private _y1ValueRange: [number, number];
-  private _transform: { x: number, y: number, k: number } = cloneDeep(DEFAULT_TRANSFORM);
+  private _transform: { x: number, y: number, k: number | string } = cloneDeep(DEFAULT_TRANSFORM);
   private _xScale: d3.ScaleLinear<number, number>;
   private _yScale: d3.ScaleLinear<number, number>;
   private _y1Scale: d3.ScaleLinear<number, number>;
@@ -113,7 +113,7 @@ export class PodState<T extends TimeSerie, O extends Options> {
     return this._y1ValueRange;
   }
 
-  get transform(): { x?: number, y?: number, k?: number } {
+  get transform(): { x?: number, y?: number, k?: number | string } {
     return this._transform;
   }
 
@@ -132,7 +132,7 @@ export class PodState<T extends TimeSerie, O extends Options> {
     this.setY1Scale();
   }
 
-  set transform(transform: { x?: number, y?: number, k?: number }) {
+  set transform(transform: { x?: number, y?: number, k?: number | string }) {
     this._transform.x = transform.x !== undefined ? transform.x : this._transform.x;
     this._transform.y = transform.y !== undefined ? transform.y : this._transform.y;
     this._transform.k = transform.k !== undefined ? transform.k : this._transform.k;

src/types.ts

@@ -74,6 +74,7 @@ export type Options = {
       zoom?: {
         isActive: boolean;
         keyEvent?: KeyEvent;
+        orientation?: PanOrientation; // TODO: rename
       },
       pan?: {
         isActive: boolean;