Browse Source

Orientation for zoom scrolling

merge-requests/10/head
Alexander Velikiy 3 years ago
parent
commit
37f3675b03
  1. 2
      dist/index.d.ts
  2. 2
      dist/index.js
  3. 4
      dist/state.d.ts
  4. 1
      dist/types.d.ts
  5. 2
      package-lock.json
  6. 2
      package.json
  7. 40
      src/index.ts
  8. 6
      src/state.ts
  9. 1
      src/types.ts

2
dist/index.d.ts vendored

@ -75,6 +75,8 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
protected onPanning(): void; protected onPanning(): void;
rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void; rescaleMetricAndAxis(event: d3.D3ZoomEvent<any, any>): void;
protected onPanningRescale(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 onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void;
protected onPanningEnd(): void; protected onPanningEnd(): void;
protected onBrush(): void; protected onBrush(): void;

2
dist/index.js vendored

File diff suppressed because one or more lines are too long

4
dist/state.d.ts vendored

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

1
dist/types.d.ts vendored

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

2
package-lock.json generated

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

2
package.json

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

40
src/index.ts

@ -71,6 +71,7 @@ const DEFAULT_OPTIONS: Options = {
zoom: { zoom: {
isActive: true, isActive: true,
keyEvent: KeyEvent.MAIN, keyEvent: KeyEvent.MAIN,
orientation: PanOrientation.BOTH,
}, },
pan: { pan: {
isActive: false, isActive: false,
@ -648,7 +649,27 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
return; return;
} }
if(scrollZoomOptions.isActive === true && this.isD3EventKeyEqualOption(event, scrollZoomOptions.keyEvent)) { 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 { } else {
const isPanActive = this.options.zoomEvents.mouse.pan.isActive; const isPanActive = this.options.zoomEvents.mouse.pan.isActive;
@ -659,13 +680,23 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
const panOrientation = this.options.zoomEvents.mouse.pan.orientation; const panOrientation = this.options.zoomEvents.mouse.pan.orientation;
if(panOrientation === PanOrientation.HORIZONTAL || panOrientation === PanOrientation.BOTH) { if(panOrientation === PanOrientation.HORIZONTAL || panOrientation === PanOrientation.BOTH) {
this.state.transform = { x: event.transform.x }; this.rescaleAxisX(event.transform.x);
}
if(panOrientation === PanOrientation.VERTICAL || panOrientation === PanOrientation.BOTH) {
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); const rescaleX = this.d3.event.transform.rescaleX(this.initScaleX);
this.xAxisElement.call(this.d3.axisBottom(this.xScale).scale(rescaleX)); this.xAxisElement.call(this.d3.axisBottom(this.xScale).scale(rescaleX));
this.state.xValueRange = [rescaleX.invert(0), rescaleX.invert(this.width)]; this.state.xValueRange = [rescaleX.invert(0), rescaleX.invert(this.width)];
} }
if(panOrientation === PanOrientation.VERTICAL || panOrientation === PanOrientation.BOTH) {
this.state.transform = { y: event.transform.y }; rescaleAxisY(transformY: number): void {
this.state.transform = { y: transformY };
const rescaleY = this.d3.event.transform.rescaleY(this.initScaleY); const rescaleY = this.d3.event.transform.rescaleY(this.initScaleY);
this.yAxisElement.call(this.d3.axisLeft(this.yScale).scale(rescaleY)); this.yAxisElement.call(this.d3.axisLeft(this.yScale).scale(rescaleY));
this.state.yValueRange = [rescaleY.invert(0), rescaleY.invert(this.height)]; this.state.yValueRange = [rescaleY.invert(0), rescaleY.invert(this.height)];
@ -678,7 +709,6 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
this.y1AxisElement.selectAll('text').attr('x', 5); this.y1AxisElement.selectAll('text').attr('x', 5);
} }
} }
}
protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void { protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void {
const scrollPanOptions = this.options.zoomEvents.scroll.pan; const scrollPanOptions = this.options.zoomEvents.scroll.pan;

6
src/state.ts

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

1
src/types.ts

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

Loading…
Cancel
Save