@devexperts/dxcharts-lite 2.5.6 → 2.5.8

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

@@ -31,6 +31,7 @@ export declare class YAxisScaleHandler extends ChartBaseElement {
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
     private dblClickCallback;
+    private touches;
     private dblTapCallback;
     constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);
     protected doActivate(): void;

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

@@ -39,7 +39,15 @@ export class YAxisScaleHandler extends ChartBaseElement {
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(false);
         };
         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
             let zoomYMult;
             if (absoluteYDelta < 0) {
@@ -88,9 +96,18 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 this.bus.fireDraw();
             }));
             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;
+            }));
         }
     }
 }

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

@@ -22,6 +22,7 @@ import { VisualYAxisLabel, YAxisLabelsProvider } from './price_labels/y-axis-lab
 import { YAxisScaleHandler } from './y-axis-scale.handler';
 import { YAxisModel } from './y-axis.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string;
 /**
  * Y axis component. Contains all Y axis related logic.
@@ -35,12 +36,13 @@ export declare class YAxisComponent extends ChartBaseElement {
     private cursors;
     paneUUID: string;
     extentIdx: number;
+    private chartResizeHandler;
     private labelsColorByChartTypeMap;
     yAxisScaleHandler: YAxisScaleHandler;
     model: YAxisModel;
     axisTypeSetSubject: Subject<PriceAxisType>;
     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);
     /**
      * Registers default label color resolvers for different chart types.
      * @private

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

@@ -17,7 +17,7 @@ import { cloneUnsafe } from '../../utils/object.utils';
  * Y axis component. Contains all Y axis related logic.
  */
 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();
         this.eventBus = eventBus;
         this.config = config;
@@ -27,6 +27,7 @@ export class YAxisComponent extends ChartBaseElement {
         this.cursors = cursors;
         this.paneUUID = paneUUID;
         this.extentIdx = extentIdx;
+        this.chartResizeHandler = chartResizeHandler;
         this.labelsColorByChartTypeMap = {};
         this.axisTypeSetSubject = new Subject();
         /* This function assigns a callback to be executed when a double-click event is detected.
@@ -50,7 +51,7 @@ export class YAxisComponent extends ChartBaseElement {
         this.yAxisScaleHandler = new YAxisScaleHandler(eventBus, this.state, chartPanComponent, scale, canvasInputListeners, canvasBoundsContainer, canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(paneUUID, extentIdx)), hitTestCanvasModel);
         this.addChildEntity(this.yAxisScaleHandler);
         //#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);
         this.updateCursor();
         this.registerDefaultLabelColorResolvers();

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

@@ -6,6 +6,7 @@
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DataSeriesModel } from '../../model/data-series.model';
@@ -21,6 +22,6 @@ export declare class YAxisModel extends ChartBaseElement {
     labelsGenerator: NumericYAxisLabelsGenerator;
     baseLabelsModel: YAxisBaseLabelsModel;
     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;
 }

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

@@ -8,7 +8,7 @@ import { NumericYAxisLabelsGenerator } from './numeric-y-axis-labels.generator';
 import { FancyYAxisLabelsModel } from './price_labels/y-axis-labels.model';
 import { YAxisBaseLabelsModel } from './y-axis-base-labels.model';
 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();
         this.paneUUID = paneUUID;
         this.state = state;
@@ -17,7 +17,7 @@ export class YAxisModel extends ChartBaseElement {
         this.labelsGenerator = new NumericYAxisLabelsGenerator(null, dataSeriesProvider, scale, valueFormatter, () => this.state.type, state.labelHeight);
         this.baseLabelsModel = new YAxisBaseLabelsModel(scale, this.labelsGenerator, this.canvasBoundsContainer, paneUUID, extentIdx);
         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);
     }
     doActivate() {

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

@@ -7,6 +7,7 @@ import { ChartBaseElement } from '../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
 import { ScaleModel } from '../model/scale.model';
 import { ChartAreaPanHandler } from '../components/chart/chart-area-pan.handler';
+import { HitBoundsTest } from '../canvas/canvas-bounds-container';
 /**
  * Handles chart touch events.
  */
@@ -15,8 +16,9 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
     private scale;
     private canvasInputListeners;
     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);
     /**
      * Activates canvas input listeners for touch start and touch move events.
      * @protected

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

@@ -8,12 +8,13 @@ import { ChartBaseElement } from '../model/chart-base-element';
  * Handles chart touch events.
  */
 export class MainCanvasTouchHandler extends ChartBaseElement {
-    constructor(chartAreaPanHandler, scale, canvasInputListeners, mainCanvasParent) {
+    constructor(chartAreaPanHandler, scale, canvasInputListeners, mainCanvasParent, hitTest) {
         super();
         this.chartAreaPanHandler = chartAreaPanHandler;
         this.scale = scale;
         this.canvasInputListeners = canvasInputListeners;
         this.mainCanvasParent = mainCanvasParent;
+        this.hitTest = hitTest;
         // 2 candles indexes touched by 2 fingers when pinching
         this.touchedCandleIndexes = [0, 0];
     }
@@ -23,8 +24,8 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     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)));
     }
     /**
@@ -88,7 +89,7 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
         const last = first +
             ((candleIndexes[0] - candleIndexes[1]) / (touchPositions[0] - touchPositions[1])) *
                 this.scale.getBounds().width;
-        if (first >= last) {
+        if (first >= last || touchPositions[0] === touchPositions[1]) {
             return;
         }
         this.scale.setXScale(first, last);

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

@@ -25,8 +25,8 @@ export declare const getDefaultHighLowWithIndex: () => HighLowWithIndex;
 export type ViewportPercent = number;
 type Constraints = (initialState: ViewportModelState, state: ViewportModelState) => ViewportModelState;
 export interface ZoomReached {
-    max: boolean;
-    min: boolean;
+    zoomIn: boolean;
+    zoomOut: boolean;
 }
 /**
  * The ScaleModel class represents the state of a chart's scale, including the current viewport, zoom level, and auto-scaling settings.
@@ -86,8 +86,8 @@ export declare class ScaleModel extends ViewportModel {
     haltAnimation(): void;
     private zoomXTo;
     calculateZoomReached(zoomX: Unit, zoomIn?: boolean): {
-        max: boolean;
-        min: boolean;
+        zoomIn: boolean;
+        zoomOut: boolean;
     };
     /**
      * Moves the viewport to exactly xStart..xEnd place.

package/dist/chart/model/scale.model.js

@@ -36,7 +36,7 @@ export class ScaleModel extends ViewportModel {
         this.scaleInversedSubject = new Subject();
         // y-axis component needs this subject in order to halt prev animation if axis type is percent
         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
         this.history = [];
         this.xConstraints = [];
@@ -128,7 +128,7 @@ export class ScaleModel extends ViewportModel {
         const initialStateCopy = Object.assign({}, state);
         const constrainedState = this.scalePostProcessor(initialStateCopy, state);
         this.zoomReached = this.calculateZoomReached(constrainedState.zoomX, zoomIn);
-        if (this.zoomReached.max || this.zoomReached.min) {
+        if (this.zoomReached.zoomIn || this.zoomReached.zoomOut) {
             return;
         }
         if (this.state.lockPriceToBarRatio) {
@@ -148,15 +148,17 @@ export class ScaleModel extends ViewportModel {
         const chartWidth = this.getBounds().width;
         const delta = 0.001; // zoom values are very precise and should be compared with some precision delta
         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 };
     }
     /**
      * Moves the viewport to exactly xStart..xEnd place.
@@ -176,7 +178,7 @@ export class ScaleModel extends ViewportModel {
         const constrainedState = this.scalePostProcessor(initialState, state);
         const zoomIn = constrainedState.xEnd - constrainedState.xStart < initialState.xEnd - initialState.xStart;
         this.zoomReached = this.calculateZoomReached(zoomX, zoomIn);
-        if (this.zoomReached.max || this.zoomReached.min) {
+        if (this.zoomReached.zoomIn || this.zoomReached.zoomOut) {
             return;
         }
         if (this.state.lockPriceToBarRatio) {
@@ -212,7 +214,7 @@ export class ScaleModel extends ViewportModel {
     }
     setLockedYScale(yStart, yEnd, fire = false, initialState) {
         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;
         }
         super.setYScale(yStart, yEnd, fire);

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

@@ -3,4 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
+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;

package/dist/chart/utils/color.utils.js

@@ -5,8 +5,12 @@
  */
 const HEX_COLOR_REGEXP = /^(#)([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
 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 = [];
     if (match) {
         colors = match.slice(2, 5);