@devexperts/dxcharts-lite 2.4.5 → 2.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/chart/bootstrap.js +1 -1
  2. package/dist/chart/chart.config.d.ts +4 -10
  3. package/dist/chart/chart.config.js +0 -2
  4. package/dist/chart/components/chart/chart-area-pan.handler.d.ts +8 -1
  5. package/dist/chart/components/chart/chart-area-pan.handler.js +40 -30
  6. package/dist/chart/components/chart/chart.model.d.ts +0 -1
  7. package/dist/chart/components/chart/chart.model.js +0 -1
  8. package/dist/chart/components/dran-n-drop_helper/drag-n-drop.component.d.ts +1 -1
  9. package/dist/chart/components/dran-n-drop_helper/drag-n-drop.component.js +20 -15
  10. package/dist/chart/components/dynamic-objects/dynamic-objects.model.d.ts +6 -3
  11. package/dist/chart/components/dynamic-objects/dynamic-objects.model.js +14 -3
  12. package/dist/chart/components/hit-test/hit-test.component.d.ts +3 -1
  13. package/dist/chart/components/hit-test/hit-test.component.js +6 -1
  14. package/dist/chart/components/pan/chart-pan.component.d.ts +1 -0
  15. package/dist/chart/components/pan/chart-pan.component.js +3 -0
  16. package/dist/chart/components/pane/extent/y-extent-component.d.ts +2 -0
  17. package/dist/chart/components/pane/pane.component.js +2 -1
  18. package/dist/chart/components/resizer/bar-resizer.component.js +6 -5
  19. package/dist/chart/components/x_axis/x-axis-scale.handler.js +1 -1
  20. package/dist/chart/components/y_axis/price_labels/y-axis-labels.model.d.ts +1 -3
  21. package/dist/chart/components/y_axis/price_labels/y-axis-labels.model.js +1 -3
  22. package/dist/chart/components/y_axis/y-axis-scale.handler.js +4 -6
  23. package/dist/chart/components/y_axis/y-axis.component.d.ts +1 -1
  24. package/dist/chart/components/y_axis/y-axis.component.js +6 -3
  25. package/dist/chart/inputhandlers/main-canvas-touch.handler.d.ts +1 -6
  26. package/dist/chart/inputhandlers/main-canvas-touch.handler.js +1 -6
  27. package/dist/chart/inputlisteners/canvas-input-listener.component.d.ts +0 -14
  28. package/dist/chart/inputlisteners/canvas-input-listener.component.js +1 -35
  29. package/dist/chart/model/candle-series.model.d.ts +10 -1
  30. package/dist/chart/model/candle-series.model.js +20 -2
  31. package/dist/chart/model/data-series.model.js +5 -3
  32. package/dist/chart/utils/timezone.utils.js +3 -3
  33. package/dist/dxchart.min.js +4 -4
  34. package/package.json +1 -1
@@ -127,7 +127,7 @@ export default class ChartBootstrap {
127
127
  this.chartPanComponent = chartPanComponent;
128
128
  this.chartComponents.push(chartPanComponent);
129
129
  this.userInputListenerComponents.push(chartPanComponent.chartAreaPanHandler);
130
- const hitTestComponent = new HitTestComponent(hitTestCanvasModel, canvasAnimation);
130
+ const hitTestComponent = new HitTestComponent(hitTestCanvasModel, canvasAnimation, eventBus);
131
131
  this.hitTestComponent = hitTestComponent;
132
132
  this.chartComponents.push(hitTestComponent);
133
133
  const paneManager = new PaneManager(chartBaseModel, this.dynamicObjectsCanvasModel, this.userInputListenerComponents, eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, this.cursorHandler, this.crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, this.hitTestCanvasModel);
@@ -237,18 +237,12 @@ export interface ChartScale {
237
237
  /**
238
238
  * Value is related to zoom event (zooming chart via mouse wheel)
239
239
  * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
240
+ * This value is also related to touchpad.
241
+ * Touchpad sensitivity is dynamic, and based on delta distance event:
242
+ * - if distance is small, zoom sencitivity is minimal, which allows you to zoom in/out on the chart and view each candle in details
243
+ * - if distance is big, zoom sencitivity is becomes close to the config value below, which allows you to zoom in/out on the chart and quickly change zoom with big sensitivity
240
244
  */
241
245
  wheel: number;
242
- /**
243
- * Value is related to pinch touchpad event (zooming chart via touchpad)
244
- * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
245
- */
246
- pinch: number;
247
- /**
248
- * Value is related to glide touchpad event (scrolling chart via touchpad)
249
- * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
250
- */
251
- glide: number;
252
246
  };
253
247
  /**
254
248
  * Defines how much items (candles) will be in viewport when chart applies basic scale
@@ -43,8 +43,6 @@ export const getDefaultConfig = () => ({
43
43
  inverse: false,
44
44
  zoomSensitivity: {
45
45
  wheel: 0.25,
46
- pinch: 0.05,
47
- glide: 0.05,
48
46
  },
49
47
  defaultViewportItems: 100,
50
48
  disableAnimations: false,
@@ -17,6 +17,10 @@ export interface ChartWheelEvent {
17
17
  readonly originalEvent: WheelEvent;
18
18
  readonly candleIdx: number;
19
19
  }
20
+ interface ChartPanningOptions {
21
+ horizontal: boolean;
22
+ vertical: boolean;
23
+ }
20
24
  /**
21
25
  * ChartAreaPanHandler is a class that handles the panning and zooming of the chart area.
22
26
  * It extends the ChartBaseElement class and has the following properties:
@@ -51,7 +55,8 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
51
55
  private currentPoint;
52
56
  xDraggedCandlesDelta: number;
53
57
  lastXStart: number;
54
- wheelTrottleTime: number;
58
+ wheelThrottleTime: number;
59
+ chartPanningOptions: ChartPanningOptions;
55
60
  constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, mainCanvasParent: Element, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent, hitTestCanvasModel: HitTestCanvasModel);
56
61
  /**
57
62
  * It observes the wheel event on all panes of the canvas and throttles it to the specified time.
@@ -70,6 +75,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
70
75
  * @returns {void}
71
76
  */
72
77
  protected doActivate(): void;
78
+ private calculateDynamicSesitivity;
73
79
  /**
74
80
  * Registers a handler for panning the chart along the Y-axis.
75
81
  * @param {ScaleModel} scaleModel - The scale model of the extent.
@@ -89,3 +95,4 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
89
95
  * @doc-tags chart-core,auto-scale,y-axis
90
96
  */
91
97
  export declare const shouldDisableAutoScale: (point: Point, config: Required<AutoScaleDisableOnDrag>) => boolean;
98
+ export {};
@@ -3,15 +3,15 @@
3
3
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
4
4
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
5
5
  */
6
- import { merge, animationFrameScheduler } from 'rxjs';
7
- import { throttleTime } from 'rxjs/operators';
6
+ import { animationFrameScheduler } from 'rxjs';
7
+ import { throttleTime, filter } from 'rxjs/operators';
8
8
  import { VIEWPORT_ANIMATION_ID } from '../../animation/canvas-animation';
9
9
  import { CanvasElement } from '../../canvas/canvas-bounds-container';
10
10
  import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
11
11
  import { ChartBaseElement } from '../../model/chart-base-element';
12
12
  import { pixelsToUnits } from '../../model/scaling/viewport.model';
13
13
  import { deviceDetector } from '../../utils/device/device-detector.utils';
14
- import { getTouchpadSensitivity, touchpadDetector } from '../../utils/device/touchpad.utils';
14
+ import { getTouchpadSensitivity } from '../../utils/device/touchpad.utils';
15
15
  import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
16
16
  import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
17
17
  /**
@@ -50,7 +50,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
50
50
  // number of candles delta changed during X dragging: 1, 5 or -3 for ex.
51
51
  this.xDraggedCandlesDelta = 0;
52
52
  this.lastXStart = 0;
53
- this.wheelTrottleTime = 15; // in ms
53
+ this.wheelThrottleTime = 15; // in ms
54
+ this.chartPanningOptions = { horizontal: true, vertical: true };
54
55
  /**
55
56
  * It observes the wheel event on all panes of the canvas and throttles it to the specified time.
56
57
  * It then calculates the zoom sensitivity based on whether the event was triggered by a touchpad or not.
@@ -104,7 +105,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
104
105
  onDragTick: this.onXDragTick,
105
106
  onDragEnd: this.onXDragEnd,
106
107
  }, this.canvasInputListener, this.chartPanComponent, {
107
- disableChartPanning: false,
108
+ dragPredicate: () => this.chartPanningOptions.horizontal,
108
109
  });
109
110
  this.addChildEntity(dragNDropXComponent);
110
111
  //#endregion
@@ -119,37 +120,33 @@ export class ChartAreaPanHandler extends ChartBaseElement {
119
120
  //#region hit tests
120
121
  const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
121
122
  //#endregion
122
- this.addRxSubscription(merge(this.canvasInputListener.observeWheel(allPanesHitTest), this.canvasInputListener.observePinch(allPanesHitTest))
123
- .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
124
- .subscribe(e => {
125
- const isTouchpad = touchpadDetector(e);
126
- const zoomSensitivity = isTouchpad
127
- ? getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.pinch)
128
- : this.config.scale.zoomSensitivity.wheel;
129
- this.zoomXHandler(e, zoomSensitivity);
130
- }));
131
123
  this.addRxSubscription(this.canvasInputListener
132
- .observeScrollGesture()
133
- .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
134
- .subscribe((e) => {
135
- let direction = -1;
124
+ .observeWheel(allPanesHitTest)
125
+ .pipe(filter(() => this.chartPanningOptions.horizontal && this.chartPanningOptions.vertical), throttleTime(this.wheelThrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
126
+ .subscribe(e => {
136
127
  const device = deviceDetector();
137
- if (device === 'apple' || device === 'mobile') {
138
- direction = 1;
128
+ const direction = device === 'apple' || device === 'mobile' ? 1 : -1;
129
+ const deltaX = 0 + e.deltaX * direction;
130
+ const deltaY = 0 + e.deltaY * -direction;
131
+ if (e.ctrlKey) {
132
+ const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
133
+ this.zoomXHandler(e, zoomSensitivity);
134
+ this.bus.fireDraw();
135
+ return;
136
+ }
137
+ // also works for geasture touchpad vertical case
138
+ if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
139
+ const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
140
+ this.zoomXHandler(e, zoomSensitivity);
141
+ this.bus.fireDraw();
139
142
  }
140
- let deltaX = 0;
141
- let deltaY = 0;
142
- deltaX += e.deltaX * direction;
143
- deltaY += e.deltaY * -direction;
143
+ // also works for geasture touchpad horizontal case
144
144
  if (deltaX !== 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
145
145
  const unitsDelta = pixelsToUnits(deltaX, this.scale.zoomX);
146
146
  this.scale.moveXStart(this.scale.xStart - unitsDelta);
147
+ this.bus.fireDraw();
148
+ return;
147
149
  }
148
- else if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
149
- const zoomSensitivity = getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.glide);
150
- this.zoomXHandler(e, zoomSensitivity);
151
- }
152
- this.bus.fireDraw();
153
150
  }));
154
151
  this.addRxSubscription(this.chartPanComponent.chartBaseModel.dataPrependSubject
155
152
  .asObservable()
@@ -159,6 +156,17 @@ export class ChartAreaPanHandler extends ChartBaseElement {
159
156
  this.touchHandler.activate();
160
157
  this.addSubscription(this.touchHandler.deactivate.bind(this.touchHandler));
161
158
  }
159
+ calculateDynamicSesitivity(e, maxSensitivity) {
160
+ // max delta distance that touchpad can provide
161
+ const MAX_POSSIBLE_DELTA = 100;
162
+ // get max delta
163
+ const delta = Math.max(Math.abs(e.deltaY), Math.abs(e.deltaX));
164
+ // calculate sensitivity for max delta based on touchpad it's distance
165
+ const caclulatedSensitivity = (maxSensitivity * delta) / MAX_POSSIBLE_DELTA;
166
+ // adjust sencitivity for percent axis type
167
+ const zoomSensitivity = getTouchpadSensitivity(this.config.components.yAxis.type, caclulatedSensitivity);
168
+ return zoomSensitivity;
169
+ }
162
170
  /**
163
171
  * Registers a handler for panning the chart along the Y-axis.
164
172
  * @param {ScaleModel} scaleModel - The scale model of the extent.
@@ -173,6 +181,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
173
181
  this.canvasAnimation.forceStopAnimation(VIEWPORT_ANIMATION_ID);
174
182
  this.currentPoint = { x: 0, y: 0 };
175
183
  lastYStart = scale.yStart;
184
+ // Stop redrawing hit test
185
+ this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
176
186
  };
177
187
  const onYDragTick = (dragInfo) => {
178
188
  const { delta: absoluteDelta } = dragInfo;
@@ -196,7 +206,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
196
206
  onDragStart: onYDragStart,
197
207
  onDragEnd: onYDragEnd,
198
208
  }, this.canvasInputListener, this.chartPanComponent, {
199
- disableChartPanning: false,
209
+ dragPredicate: () => this.chartPanningOptions.vertical,
200
210
  });
201
211
  this.addChildEntity(dragNDropYComponent);
202
212
  return dragNDropYComponent;
@@ -46,7 +46,6 @@ export declare class ChartModel extends ChartBaseElement {
46
46
  candleSeries: Array<CandleSeriesModel>;
47
47
  get mainCandleSeries(): CandleSeriesModel;
48
48
  get secondaryCandleSeries(): Array<CandleSeriesModel>;
49
- readonly nextCandleTimeStampSubject: Subject<void>;
50
49
  readonly chartTypeChanged: Subject<BarType>;
51
50
  readonly mainInstrumentChangedSubject: Subject<ChartInstrument>;
52
51
  readonly offsetsChanged: Subject<void>;
@@ -47,7 +47,6 @@ export class ChartModel extends ChartBaseElement {
47
47
  this.prevChartWidth = 0;
48
48
  this.prevYWidth = 0;
49
49
  this.candleSeries = [];
50
- this.nextCandleTimeStampSubject = new Subject();
51
50
  this.chartTypeChanged = new Subject();
52
51
  this.mainInstrumentChangedSubject = new Subject();
53
52
  this.offsetsChanged = new Subject();
@@ -12,7 +12,7 @@ export interface DragInfo {
12
12
  draggedPixels: number;
13
13
  }
14
14
  export interface DragComponentOptions {
15
- disableChartPanning: boolean;
15
+ dragPredicate: () => boolean;
16
16
  }
17
17
  export interface DragNDropComponentCallbacks {
18
18
  onDragStart?: (point: Point) => void;
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { ChartBaseElement } from '../../model/chart-base-element';
7
7
  export const defaultDragComponentOptions = {
8
- disableChartPanning: true,
8
+ dragPredicate: () => true,
9
9
  };
10
10
  export class DragNDropComponent extends ChartBaseElement {
11
11
  constructor(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions) {
@@ -18,25 +18,30 @@ export class DragNDropComponent extends ChartBaseElement {
18
18
  this.dragging = false;
19
19
  this.draggedPixels = 0;
20
20
  this.onDragStart = (point) => {
21
- this.dragging = true;
22
- this.draggedPixels = 0;
23
- this.dragCallbacks.onDragStart && this.dragCallbacks.onDragStart(point);
24
- this.dragComponentOptions.disableChartPanning && this.chartPanComponent.deactivatePanHandlers();
21
+ if (this.dragComponentOptions.dragPredicate()) {
22
+ this.dragging = true;
23
+ this.draggedPixels = 0;
24
+ this.dragCallbacks.onDragStart && this.dragCallbacks.onDragStart(point);
25
+ }
25
26
  };
26
27
  this.onDragTick = (yDelta) => {
27
- if (this.dragging) {
28
- this.draggedPixels += yDelta;
29
- this.dragCallbacks.onDragTick({
30
- delta: yDelta,
31
- draggedPixels: this.draggedPixels,
32
- });
28
+ if (this.dragComponentOptions.dragPredicate()) {
29
+ if (this.dragging) {
30
+ this.draggedPixels += yDelta;
31
+ this.dragCallbacks.onDragTick({
32
+ delta: yDelta,
33
+ draggedPixels: this.draggedPixels,
34
+ });
35
+ }
33
36
  }
34
37
  };
35
38
  this.onDragEnd = () => {
36
- if (this.dragging) {
37
- this.dragging = false;
38
- this.dragCallbacks.onDragEnd && this.dragCallbacks.onDragEnd(this.draggedPixels);
39
- this.dragComponentOptions.disableChartPanning && this.chartPanComponent.activateChartPanHandlers();
39
+ if (this.dragComponentOptions.dragPredicate()) {
40
+ if (this.dragging) {
41
+ this.dragging = false;
42
+ this.dragCallbacks.onDragEnd && this.dragCallbacks.onDragEnd(this.draggedPixels);
43
+ this.chartPanComponent.activateChartPanHandlers();
44
+ }
40
45
  }
41
46
  };
42
47
  }
@@ -34,15 +34,18 @@ export declare class DynamicObjectsModel extends ChartBaseElement {
34
34
  /**
35
35
  * Adds an object from outside chart-core into model
36
36
  * @param obj
37
- * @param paneId
38
37
  */
39
38
  addObject(obj: DynamicObject): void;
40
39
  /**
41
40
  * Removes an object from model
42
- * @param model
43
- * @param paneId
41
+ * @param id
44
42
  */
45
43
  removeObject(id: DynamicObjectId): void;
44
+ /**
45
+ * Updates an object
46
+ * @param obj
47
+ */
48
+ updateObject(obj: DynamicObject): void;
46
49
  /**
47
50
  * Moves the object inside the associated LinkedList to the specified position
48
51
  */
@@ -47,7 +47,6 @@ export class DynamicObjectsModel extends ChartBaseElement {
47
47
  /**
48
48
  * Adds an object from outside chart-core into model
49
49
  * @param obj
50
- * @param paneId
51
50
  */
52
51
  addObject(obj) {
53
52
  var _a;
@@ -63,8 +62,7 @@ export class DynamicObjectsModel extends ChartBaseElement {
63
62
  }
64
63
  /**
65
64
  * Removes an object from model
66
- * @param model
67
- * @param paneId
65
+ * @param id
68
66
  */
69
67
  removeObject(id) {
70
68
  const objInfo = this.getObjectInfoById(id);
@@ -81,6 +79,19 @@ export class DynamicObjectsModel extends ChartBaseElement {
81
79
  }
82
80
  this.setDynamicObjects(this.objects);
83
81
  }
82
+ /**
83
+ * Updates an object
84
+ * @param obj
85
+ */
86
+ updateObject(obj) {
87
+ const objInfo = this.getObjectInfoById(obj.id);
88
+ if (!objInfo) {
89
+ return;
90
+ }
91
+ const [oldObj] = objInfo;
92
+ this.removeObject(oldObj.id);
93
+ this.addObject(obj);
94
+ }
84
95
  /**
85
96
  * Moves the object inside the associated LinkedList to the specified position
86
97
  */
@@ -4,11 +4,13 @@
4
4
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
5
5
  */
6
6
  import { CanvasAnimation } from '../../animation/canvas-animation';
7
+ import EventBus from '../../events/event-bus';
7
8
  import { ChartBaseElement } from '../../model/chart-base-element';
8
9
  import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
9
10
  export declare class HitTestComponent extends ChartBaseElement {
10
11
  private hitTestCanvasModel;
11
12
  private canvasAnimation;
12
- constructor(hitTestCanvasModel: HitTestCanvasModel, canvasAnimation: CanvasAnimation);
13
+ private eventBus;
14
+ constructor(hitTestCanvasModel: HitTestCanvasModel, canvasAnimation: CanvasAnimation, eventBus: EventBus);
13
15
  protected doActivate(): void;
14
16
  }
@@ -3,12 +3,14 @@
3
3
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
4
4
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
5
5
  */
6
+ import { distinctUntilChanged } from 'rxjs/operators';
6
7
  import { ChartBaseElement } from '../../model/chart-base-element';
7
8
  export class HitTestComponent extends ChartBaseElement {
8
- constructor(hitTestCanvasModel, canvasAnimation) {
9
+ constructor(hitTestCanvasModel, canvasAnimation, eventBus) {
9
10
  super();
10
11
  this.hitTestCanvasModel = hitTestCanvasModel;
11
12
  this.canvasAnimation = canvasAnimation;
13
+ this.eventBus = eventBus;
12
14
  }
13
15
  doActivate() {
14
16
  super.doActivate();
@@ -16,5 +18,8 @@ export class HitTestComponent extends ChartBaseElement {
16
18
  const animationInProgress = this.canvasAnimation.animationInProgressSubject.getValue();
17
19
  this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(!animationInProgress);
18
20
  }));
21
+ this.addRxSubscription(this.hitTestCanvasModel.hitTestDrawersPredicateSubject
22
+ .pipe(distinctUntilChanged((prev, cur) => prev !== cur && prev === true && cur === false))
23
+ .subscribe(() => this.eventBus.fireDraw([this.hitTestCanvasModel.canvasId])));
19
24
  }
20
25
  }
@@ -51,4 +51,5 @@ export declare class ChartPanComponent extends ChartBaseElement {
51
51
  * Deactivates all the pan handlers of the chart.
52
52
  */
53
53
  deactivatePanHandlers(): void;
54
+ setChartPanningOptions(horizontal: boolean, vertical: boolean): void;
54
55
  }
@@ -54,4 +54,7 @@ export class ChartPanComponent extends ChartBaseElement {
54
54
  deactivatePanHandlers() {
55
55
  this.chartPanComponents.forEach(c => c.deactivate());
56
56
  }
57
+ setChartPanningOptions(horizontal, vertical) {
58
+ this.chartAreaPanHandler.chartPanningOptions = { horizontal, vertical };
59
+ }
57
60
  }
@@ -4,6 +4,7 @@
4
4
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
5
5
  */
6
6
  import { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
7
+ import { YAxisConfig } from '../../../chart.config';
7
8
  import { Bounds } from '../../../model/bounds.model';
8
9
  import { CanvasModel } from '../../../model/canvas.model';
9
10
  import { ChartBaseElement } from '../../../model/chart-base-element';
@@ -23,6 +24,7 @@ export interface YExtentCreationOptions {
23
24
  cursor: string;
24
25
  paneFormatters: YExtentFormatters;
25
26
  increment: number | null;
27
+ initialYAxisState: YAxisConfig;
26
28
  }
27
29
  export declare class YExtentComponent extends ChartBaseElement {
28
30
  paneUUID: string;
@@ -119,10 +119,11 @@ export class PaneComponent extends ChartBaseElement {
119
119
  const chartPaneId = CanvasElement.PANE_UUID(this.uuid);
120
120
  const getBounds = () => this.canvasBoundsContainer.getBounds(chartPaneId);
121
121
  const scaleModel = (_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : new SyncedByXScaleModel(this.mainScale, this.config, getBounds, this.canvasAnimation);
122
+ const initialYAxisState = options === null || options === void 0 ? void 0 : options.initialYAxisState;
122
123
  const [unsub, dragNDrop] = this.createYPanHandler(this.uuid, scaleModel);
123
124
  // creating partially resolved constructor except formatter & dataSeriesProvider - bcs it's not possible to provide formatter
124
125
  // before y-extent is created
125
- const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx, this.hitTestCanvasModel);
126
+ const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx, this.hitTestCanvasModel, initialYAxisState);
126
127
  const yExtentComponent = new YExtentComponent(this.uuid, extentIdx, this, this.chartBaseModel, this.canvasBoundsContainer, this.hitTestController, this.dynamicObjectsCanvasModel, scaleModel, createYAxisComponent, dragNDrop);
127
128
  yExtentComponent.addSubscription(unsub);
128
129
  yExtentComponent.addSubscription(this.addCursors(extentIdx, yExtentComponent.yAxis));
@@ -73,10 +73,12 @@ export class BarResizerComponent extends ChartBaseElement {
73
73
  const fixedMode = this.config.components.paneResizer.fixedMode;
74
74
  if (!fixedMode) {
75
75
  const dragNDropYComponent = new DragNDropYComponent(this.hitTest, {
76
- onDragTick: callIfPredicateTrue(this.onYDragTick, this.dragPredicate),
77
- onDragStart: callIfPredicateTrue(this.onYDragStart, this.dragPredicate),
78
- onDragEnd: callIfPredicateTrue(this.onYDragEnd, this.dragPredicate)
79
- }, this.canvasInputListener, this.chartPanComponent);
76
+ onDragTick: this.onYDragTick,
77
+ onDragStart: this.onYDragStart,
78
+ onDragEnd: this.onYDragEnd
79
+ }, this.canvasInputListener, this.chartPanComponent, {
80
+ dragPredicate: this.dragPredicate,
81
+ });
80
82
  this.addChildEntity(dragNDropYComponent);
81
83
  if (this.config.animation.paneResizer.enabled) {
82
84
  this.addRxSubscription(this.canvasInputListener
@@ -148,4 +150,3 @@ export class BarResizerComponent extends ChartBaseElement {
148
150
  }
149
151
  }
150
152
  }
151
- const callIfPredicateTrue = (fun, predicate) => (...args) => predicate() && fun(...args);
@@ -51,7 +51,7 @@ export class XAxisScaleHandler extends ChartBaseElement {
51
51
  onDragTick: this.onXDragTick,
52
52
  onDragEnd: this.onXDragEnd,
53
53
  }, this.canvasInputListener, this.chartPanComponent, {
54
- disableChartPanning: false,
54
+ dragPredicate: () => chartPanComponent.chartAreaPanHandler.chartPanningOptions.horizontal,
55
55
  });
56
56
  this.addChildEntity(dragNDropXComponent);
57
57
  }
@@ -65,11 +65,9 @@ export declare class FancyYAxisLabelsModel extends ChartBaseElement {
65
65
  /**
66
66
  * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.
67
67
  * It calls the parent method doActivate() and adds a new Rx subscription to the merge of the following observables:
68
- * - chartModel.observeCandlesChanged()
69
68
  * - canvasBoundsContainer.observeBoundsChanged(CanvasElement.CHART)
70
- * - chartModel.nextCandleTimeStampSubject
71
69
  * - canvasBoundsContainer.barResizerChangedSubject
72
- * - chartModel.scale.changed
70
+ * - scale changed
73
71
  * When any of these observables emit a new value, the updateLabels() method is called.
74
72
  * @protected
75
73
  */
@@ -48,11 +48,9 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
48
48
  /**
49
49
  * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.
50
50
  * It calls the parent method doActivate() and adds a new Rx subscription to the merge of the following observables:
51
- * - chartModel.observeCandlesChanged()
52
51
  * - canvasBoundsContainer.observeBoundsChanged(CanvasElement.CHART)
53
- * - chartModel.nextCandleTimeStampSubject
54
52
  * - canvasBoundsContainer.barResizerChangedSubject
55
- * - chartModel.scale.changed
53
+ * - scale changed
56
54
  * When any of these observables emit a new value, the updateLabels() method is called.
57
55
  * @protected
58
56
  */
@@ -68,13 +68,12 @@ export class YAxisScaleHandler extends ChartBaseElement {
68
68
  };
69
69
  // drag to Y-scale and double click to auto scale
70
70
  if (config.customScale) {
71
- const dragPredicate = () => config.type !== 'percent' && config.visible;
72
71
  const dragNDropYComponent = new DragNDropYComponent(hitTest, {
73
- onDragTick: callIfPredicateTrue(this.onYDragTick, dragPredicate),
74
- onDragStart: callIfPredicateTrue(this.onYDragStart, dragPredicate),
75
- onDragEnd: callIfPredicateTrue(this.onYDragEnd, dragPredicate),
72
+ onDragTick: this.onYDragTick,
73
+ onDragStart: this.onYDragStart,
74
+ onDragEnd: this.onYDragEnd,
76
75
  }, canvasInputListener, panning, {
77
- disableChartPanning: false,
76
+ dragPredicate: () => panning.chartAreaPanHandler.chartPanningOptions.vertical && config.type !== 'percent' && config.visible,
78
77
  });
79
78
  this.addChildEntity(dragNDropYComponent);
80
79
  }
@@ -88,4 +87,3 @@ export class YAxisScaleHandler extends ChartBaseElement {
88
87
  }
89
88
  }
90
89
  }
91
- const callIfPredicateTrue = (fun, predicate) => (...args) => predicate() && fun(...args);
@@ -40,7 +40,7 @@ export declare class YAxisComponent extends ChartBaseElement {
40
40
  model: YAxisModel;
41
41
  axisTypeSetSubject: Subject<PriceAxisType>;
42
42
  readonly state: YAxisConfig;
43
- constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel);
43
+ constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel, initialState?: YAxisConfig);
44
44
  /**
45
45
  * Registers default label color resolvers for different chart types.
46
46
  * @private
@@ -6,17 +6,17 @@
6
6
  import { Subject } from 'rxjs';
7
7
  import { CanvasElement } from '../../canvas/canvas-bounds-container';
8
8
  import { ChartBaseElement } from '../../model/chart-base-element';
9
- import { cloneUnsafe } from '../../utils/object.utils';
10
9
  import { uuid } from '../../utils/uuid.utils';
11
10
  import { resolveColorForArea, resolveColorForBar, resolveColorForBaseLine, resolveColorForCandle, resolveColorForHistogram, resolveColorForLine, resolveColorForScatterPlot, resolveColorForTrendAndHollow, resolveDefaultColorForLabel, } from './label-color.functions';
12
11
  import { LabelsGroups } from './price_labels/y-axis-labels.model';
13
12
  import { YAxisScaleHandler } from './y-axis-scale.handler';
14
13
  import { YAxisModel } from './y-axis.model';
14
+ import { merge as mergeObj } from '../../utils/merge.utils';
15
15
  /**
16
16
  * Y axis component. Contains all Y axis related logic.
17
17
  */
18
18
  export class YAxisComponent extends ChartBaseElement {
19
- constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel) {
19
+ constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, initialState) {
20
20
  super();
21
21
  this.eventBus = eventBus;
22
22
  this.config = config;
@@ -28,7 +28,10 @@ export class YAxisComponent extends ChartBaseElement {
28
28
  this.extentIdx = extentIdx;
29
29
  this.labelsColorByChartTypeMap = {};
30
30
  this.axisTypeSetSubject = new Subject();
31
- this.state = cloneUnsafe(config.components.yAxis);
31
+ this.state = mergeObj(initialState !== null && initialState !== void 0 ? initialState : {}, config.components.yAxis, {
32
+ overrideExisting: false,
33
+ addIfMissing: true,
34
+ });
32
35
  //#region init yAxisScaleHandler
33
36
  this.yAxisScaleHandler = new YAxisScaleHandler(eventBus, this.state, chartPanComponent, scale, canvasInputListeners, canvasBoundsContainer, canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(paneUUID, extentIdx)), auto => scale.autoScale(auto), hitTestCanvasModel);
34
37
  this.addChildEntity(this.yAxisScaleHandler);
@@ -31,12 +31,7 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
31
31
  * Handles touch move event
32
32
  * @param {TouchEvent} e - The touch event object
33
33
  * @returns {void}
34
-
35
- private handleTouchMoveEvent(e: TouchEvent): void {
36
- if (e.touches.length === 2) {
37
- this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
38
- }
39
- }*/
34
+ */
40
35
  private handleTouchMoveEvent;
41
36
  /**
42
37
  * Gets candle positions touched by user in pixels.
@@ -41,12 +41,7 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
41
41
  * Handles touch move event
42
42
  * @param {TouchEvent} e - The touch event object
43
43
  * @returns {void}
44
-
45
- private handleTouchMoveEvent(e: TouchEvent): void {
46
- if (e.touches.length === 2) {
47
- this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
48
- }
49
- }*/
44
+ */
50
45
  handleTouchMoveEvent(e) {
51
46
  if (e.touches.length === 2) {
52
47
  this.pinchHandler(this.touchedCandleIndexes, this.getXPositions(e));
@@ -51,8 +51,6 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
51
51
  private longTouchStartSubject;
52
52
  private longTouchEndSubject;
53
53
  private contextMenuSubject;
54
- private pinchSubject;
55
- private scrollGestureSubject;
56
54
  private fastTouchScroll;
57
55
  mouseLeavesCanvasSubject: Subject<boolean>;
58
56
  dragStartPoint: Point;
@@ -242,18 +240,6 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
242
240
  * @returns {Observable<WheelEvent>} - An Observable that emits WheelEvent objects.
243
241
  */
244
242
  observeWheel(hitBoundsTest?: HitBoundsTest): Observable<WheelEvent>;
245
- /**
246
- * Returns an Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
247
- * @param {HitBoundsTest} hitBoundsTest - A function that takes the current point's x and y coordinates as arguments and returns a boolean indicating whether the point is within the desired bounds.
248
- * @returns {Observable<WheelEvent>} - An Observable that emits WheelEvent when a pinch event occurs and the hitBoundsTest function returns true for the current point.
249
- */
250
- observePinch(hitBoundsTest?: HitBoundsTest): Observable<WheelEvent>;
251
- /**
252
- * Returns an Observable that emits a WheelEvent whenever a scroll gesture is detected.
253
- * The Observable is created from a Subject that is subscribed to by the component's template.
254
- * @returns {Observable<WheelEvent>} An Observable that emits a WheelEvent whenever a scroll gesture is detected.
255
- */
256
- observeScrollGesture(): Observable<WheelEvent>;
257
243
  /**
258
244
  * Returns an Observable that emits TouchEvent when a touchstart event occurs within the bounds of the current point.
259
245
  * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the touch event occurred within the bounds of the current point.