@devexperts/dxcharts-lite - npm Package Compare versions

Comparing version 2.5.6 to 2.5.7

dist/chart/bootstrap.js

@@ -133,3 +133,3 @@ /*
         this.chartComponents.push(hitTestComponent);
-        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);
+        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, this.chartResizeHandler);
         this.paneManager = paneManager;
@@ -136,0 +136,0 @@ const mainPane = this.paneManager.panes[CHART_UUID];

dist/chart/canvas/canvas-bounds-container.d.ts

@@ -331,2 +331,23 @@ /*
     setMainCandleSeries(candleSeries: CandleSeriesModel): void;
+    /**
+     * Returns the effective width of the Y axis.
+     *
+     * @function
+     * @name getEffectiveYAxisWidth
+     * @returns {number} The effective width of the Y axis.
+     */
+    getEffectiveYAxisWidth(): number;
+    /**
+     * Returns the effective width of the chart.
+     *
+     * @function
+     * @returns {number} The effective width of the chart.
+     */
+    getEffectiveChartWidth(): number;
+    /**
+     * Returns the effective height of the chart.
+     *
+     * @returns {number} The effective height of the chart.
+     */
+    getEffectiveChartHeight(): number;
 }
@@ -333,0 +354,0 @@ export declare const getHeightRatios: (pecLength: number) => [number, number];

dist/chart/canvas/canvas-bounds-container.js

@@ -827,2 +827,32 @@ /*
     }
+    /**
+     * Returns the effective width of the Y axis.
+     *
+     * @function
+     * @name getEffectiveYAxisWidth
+     * @returns {number} The effective width of the Y axis.
+     */
+    getEffectiveYAxisWidth() {
+        const yAxis = this.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID));
+        return yAxis.width;
+    }
+    /**
+     * Returns the effective width of the chart.
+     *
+     * @function
+     * @returns {number} The effective width of the chart.
+     */
+    getEffectiveChartWidth() {
+        const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        return chart.width;
+    }
+    /**
+     * Returns the effective height of the chart.
+     *
+     * @returns {number} The effective height of the chart.
+     */
+    getEffectiveChartHeight() {
+        const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        return chart.height;
+    }
 }
@@ -829,0 +859,0 @@ // paneCounter=chartHeightRatio: 0=1, 1=0.8, 2=0.6, 3=0.5, 4=0.4, 5=0.4

dist/chart/chart.js

@@ -103,3 +103,4 @@ /*
     setChartType(type) {
-        this.chartComponent.setChartType(type);
+        this.data.setChartType(type);
+        this.yAxis.updateOrderedLabels();
     }
@@ -106,0 +107,0 @@ createPane() {

dist/chart/components/chart/chart.model.d.ts

@@ -177,23 +177,2 @@ /*
     /**
-     * Returns the effective width of the Y axis.
-     *
-     * @function
-     * @name getEffectiveYAxisWidth
-     * @returns {number} The effective width of the Y axis.
-     */
-    getEffectiveYAxisWidth(): number;
-    /**
-     * Returns the effective width of the chart.
-     *
-     * @function
-     * @returns {number} The effective width of the chart.
-     */
-    getEffectiveChartWidth(): number;
-    /**
-     * Returns the effective height of the chart.
-     *
-     * @returns {number} The effective height of the chart.
-     */
-    getEffectiveChartHeight(): number;
-    /**
      * Updates the offsets of the chart components and redraws the chart.
@@ -200,0 +179,0 @@ * @param {Partial<ChartConfigComponentsOffsets>} offsets - The new offsets to be applied to the chart components.

dist/chart/components/chart/chart.model.js

@@ -106,4 +106,4 @@ /*
         if (nextCB.width > MIN_SUPPORTED_CANVAS_SIZE.width && nextCB.height > MIN_SUPPORTED_CANVAS_SIZE.height) {
-            const nextChartWidth = this.getEffectiveChartWidth();
-            const nextYAxisWidth = this.getEffectiveYAxisWidth();
+            const nextChartWidth = this.canvasBoundsContainer.getEffectiveChartWidth();
+            const nextYAxisWidth = this.canvasBoundsContainer.getEffectiveYAxisWidth();
             if (this.prevChartWidth === 0) {
@@ -425,32 +425,2 @@ this.scale.isViewportValid() ? this.scale.recalculateZoom() : this.doBasicScale();
     /**
-     * Returns the effective width of the Y axis.
-     *
-     * @function
-     * @name getEffectiveYAxisWidth
-     * @returns {number} The effective width of the Y axis.
-     */
-    getEffectiveYAxisWidth() {
-        const yAxis = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID));
-        return yAxis.width;
-    }
-    /**
-     * Returns the effective width of the chart.
-     *
-     * @function
-     * @returns {number} The effective width of the chart.
-     */
-    getEffectiveChartWidth() {
-        const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
-        return chart.width;
-    }
-    /**
-     * Returns the effective height of the chart.
-     *
-     * @returns {number} The effective height of the chart.
-     */
-    getEffectiveChartHeight() {
-        const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
-        return chart.height;
-    }
-    /**
      * Updates the offsets of the chart components and redraws the chart.
@@ -687,3 +657,3 @@ * @param {Partial<ChartConfigComponentsOffsets>} offsets - The new offsets to be applied to the chart components.
     getMaxCandlesFitLength() {
-        return floor(this.getEffectiveChartWidth() / this.config.components.chart.minWidth);
+        return floor(this.canvasBoundsContainer.getEffectiveChartWidth() / this.config.components.chart.minWidth);
     }
@@ -690,0 +660,0 @@ /**

dist/chart/components/pan/chart-pan.component.js

@@ -6,2 +6,3 @@ /*
  */
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
@@ -24,3 +25,3 @@ import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
         this.addChildEntity(this.chartAreaPanHandler);
-        this.mainCanvasTouchHandler = new MainCanvasTouchHandler(this.chartAreaPanHandler, this.mainScale, this.canvasInputListener, this.mainCanvasParent);
+        this.mainCanvasTouchHandler = new MainCanvasTouchHandler(this.chartAreaPanHandler, this.mainScale, this.canvasInputListener, this.mainCanvasParent, this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES));
         this.addChildEntity(this.mainCanvasTouchHandler);
@@ -27,0 +28,0 @@ }

dist/chart/components/pane/pane-manager.component.d.ts

@@ -26,2 +26,3 @@ /*
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 export declare class PaneManager extends ChartBaseElement {
@@ -44,2 +45,3 @@ private chartBaseModel;
     private hitTestCanvasModel;
+    private chartResizeHandler;
     panes: Record<string, PaneComponent>;
@@ -55,3 +57,3 @@ paneRemovedSubject: Subject<PaneComponent>;
     get panesOrder(): string[];
-    constructor(chartBaseModel: ChartBaseModel<'candle'>, dynamicObjectsCanvasModel: CanvasModel, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, hitTestCanvasModel: HitTestCanvasModel);
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, dynamicObjectsCanvasModel: CanvasModel, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, hitTestCanvasModel: HitTestCanvasModel, chartResizeHandler: ChartResizeHandler);
     private addBounds;
@@ -58,0 +60,0 @@ /**

dist/chart/components/pane/pane-manager.component.js

@@ -23,3 +23,3 @@ /*
     }
-    constructor(chartBaseModel, dynamicObjectsCanvasModel, userInputListenerComponents, eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, cursorHandler, crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, hitTestCanvasModel) {
+    constructor(chartBaseModel, dynamicObjectsCanvasModel, userInputListenerComponents, eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, cursorHandler, crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, hitTestCanvasModel, chartResizeHandler) {
         super();
@@ -42,2 +42,3 @@ this.chartBaseModel = chartBaseModel;
         this.hitTestCanvasModel = hitTestCanvasModel;
+        this.chartResizeHandler = chartResizeHandler;
         this.panes = {};
@@ -100,3 +101,3 @@ this.paneRemovedSubject = new Subject();
         }
-        const paneComponent = new PaneComponent(this.chartBaseModel, this.mainCanvasModel, this.yAxisLabelsCanvasModel, this.dynamicObjectsCanvasModel, this.hitTestController, this.config, this.mainScale, this.drawingManager, this.chartPanComponent, this.canvasInputListener, this.canvasAnimation, this.cursorHandler, this.eventBus, this.canvasBoundsContainer, uuid, this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, this.hitTestCanvasModel, options);
+        const paneComponent = new PaneComponent(this.chartBaseModel, this.mainCanvasModel, this.yAxisLabelsCanvasModel, this.dynamicObjectsCanvasModel, this.hitTestController, this.config, this.mainScale, this.drawingManager, this.chartPanComponent, this.canvasInputListener, this.canvasAnimation, this.cursorHandler, this.eventBus, this.canvasBoundsContainer, uuid, this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, this.hitTestCanvasModel, this.chartResizeHandler, options);
         // TODO: is resizer should be added always?
@@ -103,0 +104,0 @@ if (this.config.components.paneResizer.visible) {

dist/chart/components/pane/pane.component.d.ts

@@ -28,2 +28,3 @@ /*
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 export declare class PaneComponent extends ChartBaseElement {
@@ -48,2 +49,3 @@ chartBaseModel: ChartBaseModel<'candle'>;
     private hitTestCanvasModel;
+    private chartResizeHandler;
     /**
@@ -59,3 +61,3 @@ * Pane hit test (without Y-Axis and resizer)
     mainExtent: YExtentComponent;
-    constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, hitTestCanvasModel: HitTestCanvasModel, options?: AtLeastOne<YExtentCreationOptions>);
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, hitTestCanvasModel: HitTestCanvasModel, chartResizeHandler: ChartResizeHandler, options?: AtLeastOne<YExtentCreationOptions>);
     /**
@@ -62,0 +64,0 @@ * Method that activates the canvas bounds container and recalculates the zoom Y of the scale model.

dist/chart/components/pane/pane.component.js

@@ -28,3 +28,3 @@ /*
     }
-    constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, hitTestCanvasModel, options) {
+    constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, hitTestCanvasModel, chartResizeHandler, options) {
         super();
@@ -49,2 +49,3 @@ this.chartBaseModel = chartBaseModel;
         this.hitTestCanvasModel = hitTestCanvasModel;
+        this.chartResizeHandler = chartResizeHandler;
         this.yExtentComponents = [];
@@ -130,3 +131,3 @@ this.getYAxisBounds = () => {
         // before y-extent is created
-        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);
+        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, this.chartResizeHandler, initialYAxisState);
         const yExtentComponent = new YExtentComponent(this.uuid, extentIdx, this, this.chartBaseModel, this.canvasBoundsContainer, this.hitTestController, this.dynamicObjectsCanvasModel, scaleModel, createYAxisComponent, dragNDrop);
@@ -133,0 +134,0 @@ yExtentComponent.addSubscription(unsub);

dist/chart/components/x_axis/x-axis-scale.handler.d.ts

@@ -7,3 +7,3 @@ /*
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
+import { CanvasBoundsContainer, HitBoundsTest } from '../../canvas/canvas-bounds-container';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
@@ -25,2 +25,3 @@ import { ScaleModel } from '../../model/scale.model';
     private chartModel;
+    private hitTest;
     private hitTestCanvasModel;
@@ -31,4 +32,5 @@ lastXStart: Unit;
     private dblClickCallback;
+    private touches;
     private dblTapCallback;
-    constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel, hitTestCanvasModel: HitTestCanvasModel);
+    constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);
     /**
@@ -35,0 +37,0 @@ * This method is used to activate the canvas input listener and add a subscription to it.

dist/chart/components/x_axis/x-axis-scale.handler.js

@@ -14,3 +14,3 @@ /*
 export class XAxisScaleHandler extends ChartBaseElement {
-    constructor(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, chartModel, hitTestCanvasModel) {
+    constructor(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, chartModel, hitTest, hitTestCanvasModel) {
         super();
@@ -22,2 +22,3 @@ this.scale = scale;
         this.chartModel = chartModel;
+        this.hitTest = hitTest;
         this.hitTestCanvasModel = hitTestCanvasModel;
@@ -55,3 +56,3 @@ this.lastXStart = 0;
         this.dblTapCallback = () => chartModel.doBasicScale();
-        const dragNDropXComponent = new DragNDropXComponent(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS), {
+        const dragNDropXComponent = new DragNDropXComponent(hitTest, {
             onDragStart: this.onXDragStart,
@@ -75,10 +76,17 @@ onDragTick: this.onXDragTick,
         super.doActivate();
-        this.addRxSubscription(this.canvasInputListener
-            .observeDbClick(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS))
-            .subscribe(() => this.dblClickCallback()));
-        this.addRxSubscription(this.canvasInputListener
-            .observeDbTap(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS))
-            .subscribe(() => this.dblTapCallback()));
+        this.addRxSubscription(this.canvasInputListener.observeDbClick(this.hitTest).subscribe(() => this.dblClickCallback()));
+        this.addRxSubscription(this.canvasInputListener.observeDbTap(this.hitTest).subscribe(() => {
+            var _a;
+            // apply dbl tap only if single finger taps are made
+            if (this.touches && ((_a = this.touches) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+                this.touches = undefined;
+                return;
+            }
+            this.dblTapCallback();
+        }));
+        this.addRxSubscription(this.canvasInputListener.observeTouchStart(this.hitTest).subscribe(e => {
+            this.touches = e.touches;
+        }));
         this.addRxSubscription(this.chartModel.candlesPrependSubject.subscribe(({ prependedCandlesWidth }) => (this.lastXStart += prependedCandlesWidth)));
     }
 }

dist/chart/components/x_axis/x-axis.component.js

@@ -53,3 +53,3 @@ /*
         xAxisCompositeDrawer.addDrawer(this.xAxisLabelsDrawer);
-        this.xAxisScaleHandler = new XAxisScaleHandler(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, this.chartComponent.chartModel, hitTestCanvasModel);
+        this.xAxisScaleHandler = new XAxisScaleHandler(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, this.chartComponent.chartModel, canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS), hitTestCanvasModel);
         this.addChildEntity(this.xAxisScaleHandler);
@@ -56,0 +56,0 @@ cursorHandler.setCursorForCanvasEl(CanvasElement.X_AXIS, config.components.xAxis.cursor);

dist/chart/components/y_axis/price_labels/y-axis-labels.model.d.ts

@@ -16,2 +16,3 @@ /*
 import { YAxisLabelDrawConfig } from '../y-axis-labels.drawer';
+import { ChartResizeHandler } from '../../../inputhandlers/chart-resize.handler';
 export type YAxisVisualLabelType = 'badge' | 'rectangle' | 'plain';
@@ -57,2 +58,3 @@ export interface VisualYAxisLabel extends YAxisLabelDrawConfig {
     private updateYAxisWidth;
+    private chartResizeHandler;
     orderedLabels: LabelGroup[];
@@ -66,3 +68,3 @@ /**
     private animFrameId;
-    constructor(eventBus: EventBus, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, state: YAxisConfig, canvasModel: CanvasModel, paneUUID: string, updateYAxisWidth: () => void);
+    constructor(eventBus: EventBus, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, state: YAxisConfig, canvasModel: CanvasModel, paneUUID: string, updateYAxisWidth: () => void, chartResizeHandler: ChartResizeHandler);
     /**
@@ -69,0 +71,0 @@ * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.

dist/chart/components/y_axis/price_labels/y-axis-labels.model.js

@@ -6,3 +6,4 @@ /*
  */
-import { merge, Subject } from 'rxjs';
+import { animationFrameScheduler, merge, Subject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
 import { CanvasElement } from '../../../canvas/canvas-bounds-container';
@@ -30,3 +31,3 @@ import { ChartBaseElement } from '../../../model/chart-base-element';
 export class FancyYAxisLabelsModel extends ChartBaseElement {
-    constructor(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, updateYAxisWidth) {
+    constructor(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, updateYAxisWidth, chartResizeHandler) {
         super();
@@ -40,2 +41,3 @@ this.eventBus = eventBus;
         this.updateYAxisWidth = updateYAxisWidth;
+        this.chartResizeHandler = chartResizeHandler;
         this.orderedLabels = [];
@@ -62,3 +64,3 @@ /**
         super.doActivate();
-        this.addRxSubscription(merge(this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)), this.canvasBoundsContainer.barResizerChangedSubject, this.scale.changed).subscribe(() => {
+        this.addRxSubscription(merge(this.canvasBoundsContainer.barResizerChangedSubject, this.scale.changed, merge(this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)), this.chartResizeHandler.canvasResized).pipe(throttleTime(50, animationFrameScheduler, { trailing: true, leading: true }))).subscribe(() => {
             this.updateLabels();
@@ -65,0 +67,0 @@ }));

dist/chart/components/y_axis/y-axis-scale.handler.d.ts

@@ -34,2 +34,3 @@ /*
     private dblClickCallback;
+    private touches;
     private dblTapCallback;
@@ -36,0 +37,0 @@ constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);

dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -42,3 +42,11 @@ /*
         this.onYDragTick = (dragInfo) => {
-            const { delta: absoluteYDelta } = dragInfo;
+            let { delta: absoluteYDelta } = dragInfo;
+            // check how many touch events are at the axis
+            // if multitouch - take the first two and apply delta the following way:
+            // the touch above keeps the initial delta because top => bottom gesture
+            // the touch below has the reversed delta because the gesture is bottom => top
+            if (this.touches && this.touches.length > 1) {
+                const top = Math.min(this.touches[0].clientY, this.touches[1].clientY);
+                absoluteYDelta = top === this.touches[0].clientY ? absoluteYDelta : -absoluteYDelta;
+            }
             // 1/3..3
@@ -92,7 +100,16 @@ let zoomYMult;
             this.addRxSubscription(this.canvasInputListener.observeDbTap(this.hitTest).subscribe(() => {
+                var _a;
+                // apply dbl tap only if single finger taps are made
+                if (this.touches && ((_a = this.touches) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+                    this.touches = undefined;
+                    return;
+                }
                 this.dblTapCallback();
                 this.bus.fireDraw();
             }));
+            this.addRxSubscription(this.canvasInputListener.observeTouchStart(this.hitTest).subscribe(e => {
+                this.touches = e.touches;
+            }));
         }
     }
 }

dist/chart/components/y_axis/y-axis.component.d.ts

@@ -25,2 +25,3 @@ /*
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string;
@@ -39,2 +40,3 @@ /**
     extentIdx: number;
+    private chartResizeHandler;
     private labelsColorByChartTypeMap;
@@ -45,3 +47,3 @@ yAxisScaleHandler: YAxisScaleHandler;
     readonly state: YAxisConfig;
-    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);
+    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, chartResizeHandler: ChartResizeHandler, initialState?: YAxisConfig);
     /**
@@ -48,0 +50,0 @@ * Registers default label color resolvers for different chart types.

dist/chart/components/y_axis/y-axis.component.js

@@ -20,3 +20,3 @@ /*
 export class YAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, initialState) {
+    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, chartResizeHandler, initialState) {
         super();
@@ -31,2 +31,3 @@ this.eventBus = eventBus;
         this.extentIdx = extentIdx;
+        this.chartResizeHandler = chartResizeHandler;
         this.labelsColorByChartTypeMap = {};
@@ -55,3 +56,3 @@ this.axisTypeSetSubject = new Subject();
         //#endregion
-        this.model = new YAxisModel(this.paneUUID, eventBus, this.state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx);
+        this.model = new YAxisModel(this.paneUUID, eventBus, this.state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx, this.chartResizeHandler);
         this.addChildEntity(this.model);
@@ -58,0 +59,0 @@ this.updateCursor();

dist/chart/components/y_axis/y-axis.model.d.ts

@@ -9,2 +9,3 @@ /*
 import EventBus from '../../events/event-bus';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 import { CanvasModel } from '../../model/canvas.model';
@@ -25,4 +26,4 @@ import { ChartBaseElement } from '../../model/chart-base-element';
     fancyLabelsModel: FancyYAxisLabelsModel;
-    constructor(paneUUID: string, eventBus: EventBus, state: YAxisConfig, canvasBoundsContainer: CanvasBoundsContainer, canvasModel: CanvasModel, scale: ScaleModel, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, extentIdx: number);
+    constructor(paneUUID: string, eventBus: EventBus, state: YAxisConfig, canvasBoundsContainer: CanvasBoundsContainer, canvasModel: CanvasModel, scale: ScaleModel, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, extentIdx: number, chartResizeHandler: ChartResizeHandler);
     protected doActivate(): void;
 }

dist/chart/components/y_axis/y-axis.model.js

@@ -11,3 +11,3 @@ /*
 export class YAxisModel extends ChartBaseElement {
-    constructor(paneUUID, eventBus, state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx) {
+    constructor(paneUUID, eventBus, state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx, chartResizeHandler) {
         super();
@@ -21,3 +21,3 @@ this.paneUUID = paneUUID;
         this.addChildEntity(this.baseLabelsModel);
-        this.fancyLabelsModel = new FancyYAxisLabelsModel(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, () => this.canvasBoundsContainer.updateYAxisWidths());
+        this.fancyLabelsModel = new FancyYAxisLabelsModel(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, () => this.canvasBoundsContainer.updateYAxisWidths(), chartResizeHandler);
         this.addChildEntity(this.fancyLabelsModel);
@@ -24,0 +24,0 @@ }

dist/chart/inputhandlers/main-canvas-touch.handler.d.ts

@@ -10,2 +10,3 @@ /*
 import { ChartAreaPanHandler } from '../components/chart/chart-area-pan.handler';
+import { HitBoundsTest } from '../canvas/canvas-bounds-container';
 /**
@@ -19,4 +20,5 @@ * Handles chart touch events.
     private mainCanvasParent;
+    private hitTest;
     private touchedCandleIndexes;
-    constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element);
+    constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element, hitTest: HitBoundsTest);
     /**
@@ -23,0 +25,0 @@ * Activates canvas input listeners for touch start and touch move events.

dist/chart/inputhandlers/main-canvas-touch.handler.js

@@ -11,3 +11,3 @@ /*
 export class MainCanvasTouchHandler extends ChartBaseElement {
-    constructor(chartAreaPanHandler, scale, canvasInputListeners, mainCanvasParent) {
+    constructor(chartAreaPanHandler, scale, canvasInputListeners, mainCanvasParent, hitTest) {
         super();
@@ -18,2 +18,3 @@ this.chartAreaPanHandler = chartAreaPanHandler;
         this.mainCanvasParent = mainCanvasParent;
+        this.hitTest = hitTest;
         // 2 candles indexes touched by 2 fingers when pinching
@@ -28,4 +29,4 @@ this.touchedCandleIndexes = [0, 0];
     doActivate() {
-        this.addRxSubscription(this.canvasInputListeners.observeTouchStart().subscribe(e => this.handleTouchStartEvent(e)));
-        this.addRxSubscription(this.canvasInputListeners.observeTouchMove().subscribe(e => this.handleTouchMoveEvent(e)));
+        this.addRxSubscription(this.canvasInputListeners.observeTouchStart(this.hitTest).subscribe(e => this.handleTouchStartEvent(e)));
+        this.addRxSubscription(this.canvasInputListeners.observeTouchMove(this.hitTest).subscribe(e => this.handleTouchMoveEvent(e)));
         this.addRxSubscription(this.canvasInputListeners.observeTouchEndDocument().subscribe(e => this.handleTouchEndEvent(e)));
@@ -32,0 +33,0 @@ }

dist/chart/model/scale.model.d.ts

@@ -28,4 +28,4 @@ /*
 export interface ZoomReached {
-    max: boolean;
-    min: boolean;
+    zoomIn: boolean;
+    zoomOut: boolean;
 }
@@ -90,4 +90,4 @@ /**
     calculateZoomReached(zoomX: Unit, zoomIn?: boolean): {
-        max: boolean;
-        min: boolean;
+        zoomIn: boolean;
+        zoomOut: boolean;
     };
@@ -94,0 +94,0 @@ /**

dist/chart/model/scale.model.js

@@ -39,3 +39,3 @@ /*
         this.beforeStartAnimationSubject = new Subject();
-        this.zoomReached = { min: false, max: false };
+        this.zoomReached = { zoomIn: false, zoomOut: false };
         // TODO rework, make a new history based on units
@@ -132,3 +132,3 @@ this.history = [];
         this.zoomReached = this.calculateZoomReached(constrainedState.zoomX, zoomIn);
-        if (this.zoomReached.max || this.zoomReached.min) {
+        if (this.zoomReached.zoomIn || this.zoomReached.zoomOut) {
             return;
@@ -153,11 +153,13 @@ }
         if (chartWidth > 0) {
-            const maxZoomReached = zoomX - calculateZoom(this.config.components.chart.minCandles, chartWidth) <= delta;
-            // max zoom reached and trying to zoom in further
-            const maxZoomDisabled = maxZoomReached && zoomIn;
-            const minZoomReached = zoomX - calculateZoom(chartWidth / this.config.components.chart.minWidth, chartWidth) >= delta;
-            // min zoom reached and trying to zoom out further
-            const minZoomDisabled = minZoomReached && !zoomIn;
-            return { max: maxZoomDisabled, min: minZoomDisabled };
+            const maxZoomIn = calculateZoom(this.config.components.chart.minCandles, chartWidth);
+            const maxZoomInReached = zoomX !== maxZoomIn && zoomX - maxZoomIn <= delta;
+            // max zoom in reached and trying to zoom in further
+            const maxZoomInDisabled = maxZoomInReached && zoomIn;
+            const maxZoomOut = calculateZoom(chartWidth / this.config.components.chart.minWidth, chartWidth);
+            const maxZoomOutReached = zoomX - maxZoomOut >= delta;
+            // max zoom out reached and trying to zoom out further
+            const maxZoomOutDisabled = maxZoomOutReached && !zoomIn;
+            return { zoomIn: maxZoomInDisabled, zoomOut: maxZoomOutDisabled };
         }
-        return { max: false, min: false };
+        return { zoomIn: false, zoomOut: false };
     }
@@ -182,3 +184,3 @@ /**
         this.zoomReached = this.calculateZoomReached(zoomX, zoomIn);
-        if (this.zoomReached.max || this.zoomReached.min) {
+        if (this.zoomReached.zoomIn || this.zoomReached.zoomOut) {
             return;
@@ -219,3 +221,3 @@ }
         const zoomIn = yEnd < initialState.yEnd;
-        if ((this.zoomReached.min && zoomIn === false) || (this.zoomReached.max && zoomIn === true)) {
+        if ((this.zoomReached.zoomOut && zoomIn === false) || (this.zoomReached.zoomIn && zoomIn === true)) {
             return;
@@ -222,0 +224,0 @@ }

dist/chart/utils/color.utils.d.ts

@@ -6,2 +6,5 @@ /*
  */
+export declare const isHex: (color: string) => RegExpExecArray | null;
+export declare const isRgb: (color: string) => RegExpExecArray | null;
+export declare const isRgba: (color: string) => RegExpExecArray | null;
 export declare function toRGBA(color: string, alpha: number): string;

dist/chart/utils/color.utils.js

@@ -8,4 +8,8 @@ /*
 const RGB_COLOR_REGEXP = /^\s*(rgba?)\s*[(]\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*[\d.]+\s*)?[)]\s*$/i;
+const RGBA_COLOR_REGEXP = /^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/;
+export const isHex = (color) => HEX_COLOR_REGEXP.exec(color);
+export const isRgb = (color) => RGB_COLOR_REGEXP.exec(color);
+export const isRgba = (color) => RGBA_COLOR_REGEXP.exec(color);
 function parseColor(color) {
-    const match = HEX_COLOR_REGEXP.exec(color) || RGB_COLOR_REGEXP.exec(color);
+    const match = isHex(color) || isRgb(color);
     let colors = [];
@@ -12,0 +16,0 @@ if (match) {

package.json

 {
   "name": "@devexperts/dxcharts-lite",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "description": "DXCharts Lite",
@@ -5,0 +5,0 @@ "author": "Devexperts Solutions IE Limited",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1748796

increased by0.29%

Lines of code

32004

increased by0.19%

No dependency changes