@devexperts/dxcharts-lite 2.5.5 → 2.5.7

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)));
     }
     /**

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

@@ -7,7 +7,6 @@ import { Subject } from 'rxjs';
 import { ChartConfigComponentsOffsets, ChartScale, FullChartConfig } from '../chart.config';
 import { CanvasAnimation } from '../animation/canvas-animation';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
-import { ZoomXToZoomYRatio } from './scaling/lock-ratio.model';
 import { Price, Unit, ViewportModel, ViewportModelState, Zoom } from './scaling/viewport.model';
 import { BoundsProvider } from './bounds.model';
 export interface HighLowWithIndex {
@@ -26,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.
@@ -46,7 +45,6 @@ export declare class ScaleModel extends ViewportModel {
     scaleInversedSubject: Subject<boolean>;
     beforeStartAnimationSubject: Subject<void>;
     autoScaleModel: AutoScaleViewportSubModel;
-    zoomXYRatio: ZoomXToZoomYRatio;
     zoomReached: ZoomReached;
     readonly state: ChartScale;
     history: ScaleHistoryItem[];
@@ -88,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.
@@ -101,6 +99,7 @@ export declare class ScaleModel extends ViewportModel {
      */
     setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
     setYScale(yStart: Unit, yEnd: Unit, fire?: boolean): void;
+    private setLockedYScale;
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
      * Works without animation.
@@ -165,10 +164,6 @@ export declare class ScaleModel extends ViewportModel {
      * @param value - If true, the price-to-bar ratio will be locked. If false, it will not be locked.
      */
     setLockPriceToBarRatio(value?: boolean): void;
-    /**
-     * Recalculates the zoom X/Y ratio based on the current zoom levels.
-     */
-    recalculateZoomXYRatio(): void;
 }
 /**
  * The SyncedByXScaleModel class extends the ScaleModel class and adds support for synchronization with other ScaleModel instance, so both instances maintain the same X-axis bounds.

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

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { startViewportModelAnimation } from '../animation/viewport-model-animation';
 import { cloneUnsafe } from '../utils/object.utils';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
-import { changeXToKeepRatio, changeYToKeepRatio, ratioFromZoomXY } from './scaling/lock-ratio.model';
+import { changeXToKeepRatio, changeYToKeepRatio } from './scaling/lock-ratio.model';
 import { moveXStart, moveYStart } from './scaling/move-chart.functions';
 import { ViewportModel, calculateZoom, compareStates, } from './scaling/viewport.model';
 import { zoomXToEndViewportCalculator, zoomXToPercentViewportCalculator } from './scaling/x-zooming.functions';
@@ -36,8 +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.zoomXYRatio = 0;
-        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 = [];
@@ -129,11 +128,11 @@ 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) {
-            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(initialStateCopy, constrainedState);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
@@ -149,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.
@@ -177,11 +178,11 @@ 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) {
-            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(initialState, constrainedState);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
@@ -199,21 +200,30 @@ export class ScaleModel extends ViewportModel {
         if (initialState.yStart === yStart && initialState.yEnd === yEnd && initialState.zoomY > 0) {
             return;
         }
+        if (this.state.lockPriceToBarRatio) {
+            this.setLockedYScale(yStart, yEnd, fire, initialState);
+            return;
+        }
         super.setYScale(yStart, yEnd, fire);
         const state = this.export();
         const constrainedState = this.scalePostProcessor(initialState, state);
-        if (this.state.lockPriceToBarRatio) {
-            changeXToKeepRatio(constrainedState, this.zoomXYRatio);
-            this.setXScale(constrainedState.xStart, constrainedState.xEnd);
-            // TODO: rewrite logic for applying constraints to consider both axes, now constraints on Y may not work correctly
-            return;
+        if (this.state.auto) {
+            this.autoScaleModel.doAutoYScale(constrainedState);
         }
-        else {
-            if (this.state.auto) {
-                this.autoScaleModel.doAutoYScale(constrainedState);
-            }
-            this.apply(constrainedState);
+        this.apply(constrainedState);
+    }
+    setLockedYScale(yStart, yEnd, fire = false, initialState) {
+        const zoomIn = yEnd < initialState.yEnd;
+        if ((this.zoomReached.zoomOut && zoomIn === false) || (this.zoomReached.zoomIn && zoomIn === true)) {
+            return;
         }
+        super.setYScale(yStart, yEnd, fire);
+        const state = this.export();
+        const constrainedState = this.scalePostProcessor(initialState, state);
+        changeXToKeepRatio(initialState, constrainedState);
+        this.zoomReached = this.calculateZoomReached(constrainedState.zoomX, zoomIn);
+        this.apply(constrainedState);
+        this.fireChanged();
     }
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
@@ -342,17 +352,8 @@ export class ScaleModel extends ViewportModel {
             this.state.lockPriceToBarRatio = false;
             return;
         }
-        if (value) {
-            this.recalculateZoomXYRatio();
-        }
         this.state.lockPriceToBarRatio = value;
     }
-    /**
-     * Recalculates the zoom X/Y ratio based on the current zoom levels.
-     */
-    recalculateZoomXYRatio() {
-        this.zoomXYRatio = ratioFromZoomXY(this.zoomX, this.zoomY);
-    }
 }
 /**
  * The SyncedByXScaleModel class extends the ScaleModel class and adds support for synchronization with other ScaleModel instance, so both instances maintain the same X-axis bounds.

package/dist/chart/model/scaling/lock-ratio.model.d.ts

@@ -10,13 +10,13 @@ export declare const zoomXToZoomY: (zoomX: Zoom, ratio: ZoomXToZoomYRatio) => Zo
 export declare const zoomYToZoomX: (zoomY: Zoom, ratio: ZoomXToZoomYRatio) => Zoom;
 /**
  * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export declare const changeYToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+export declare const changeYToKeepRatio: (prevState: ViewportModelState, newState: ViewportModelState) => void;
 /**
  *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export declare const changeXToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+export declare const changeXToKeepRatio: (prevState: ViewportModelState, newState: ViewportModelState) => void;

package/dist/chart/model/scaling/lock-ratio.model.js

@@ -8,30 +8,36 @@ export const zoomXToZoomY = (zoomX, ratio) => zoomX / ratio;
 export const zoomYToZoomX = (zoomY, ratio) => zoomY * ratio;
 /**
  * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export const changeYToKeepRatio = (state, zoomXYRatio) => {
-    const prevZoomY = state.zoomY;
-    state.zoomY = zoomXToZoomY(state.zoomX, zoomXYRatio);
-    const zoomYMult = state.zoomY / prevZoomY;
-    const lastYHeight = state.yEnd - state.yStart;
-    const newYHeight = lastYHeight * zoomYMult;
-    const delta = newYHeight - lastYHeight;
-    state.yEnd = state.yEnd + delta / 2;
-    state.yStart = state.yStart - delta / 2;
+export const changeYToKeepRatio = (prevState, newState) => {
+    const prevZoomX = prevState.zoomX;
+    const prevZoomY = prevState.zoomY;
+    const prevZoomXY = ratioFromZoomXY(prevZoomX, prevZoomY);
+    const prevYHeight = prevState.yEnd - prevState.yStart;
+    // recalculate zoomY
+    newState.zoomY = zoomXToZoomY(newState.zoomX, prevZoomXY);
+    const zoomYMult = newState.zoomY / prevZoomY;
+    const newYHeight = prevYHeight * zoomYMult;
+    const delta = newYHeight - prevYHeight;
+    newState.yEnd = newState.yEnd + delta / 2;
+    newState.yStart = newState.yStart - delta / 2;
 };
 /**
  *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
- * @param state
- * @param zoomXYRatio
+ * @param prevState
+ * @param newState
  */
-export const changeXToKeepRatio = (state, zoomXYRatio) => {
-    const prevZoomX = state.zoomX;
-    state.zoomX = zoomYToZoomX(state.zoomY, zoomXYRatio);
-    const zoomXMult = state.zoomX / prevZoomX;
-    const lastXWidth = state.xEnd - state.xStart;
-    const newXWidth = lastXWidth * zoomXMult;
-    const delta = newXWidth - lastXWidth;
-    state.xStart = state.xStart - delta;
+export const changeXToKeepRatio = (prevState, newState) => {
+    const prevZoomX = prevState.zoomX;
+    const prevZoomY = prevState.zoomY;
+    const prevZoomXY = ratioFromZoomXY(prevZoomX, prevZoomY);
+    const prevXWidth = prevState.xEnd - prevState.xStart;
+    // recalculate zoomX
+    newState.zoomX = zoomYToZoomX(newState.zoomY, prevZoomXY);
+    const zoomXMult = newState.zoomX / prevZoomX;
+    const newXWidth = prevXWidth * zoomXMult;
+    const delta = newXWidth - prevXWidth;
+    newState.xStart = newState.xStart - delta;
 };

package/dist/chart/model/scaling/viewport.model.js

@@ -287,7 +287,12 @@ export class ViewportModel extends ChartBaseElement {
      * @returns {boolean} - Returns true if the viewport is valid, false otherwise.
      */
     isViewportValid() {
-        return this.xStart !== this.xEnd && this.yStart !== this.yEnd && isFinite(this.yStart) && isFinite(this.yEnd) && this.zoomX > 0 && this.zoomY > 0;
+        return (this.xStart !== this.xEnd &&
+            this.yStart !== this.yEnd &&
+            isFinite(this.yStart) &&
+            isFinite(this.yEnd) &&
+            this.zoomX > 0 &&
+            this.zoomY > 0);
     }
 }
 export const compareStates = (a, b) => !keys(a).some(k => a[k] !== b[k]);

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);