@devexperts/dxcharts-lite 2.5.0 → 2.5.2

package/dist/chart/canvas/canvas-chart-html.js

@@ -6,13 +6,13 @@
 export default (devexpertsPromoLink) => '<div data-element="chartResizer" style="position: relative; min-height: 20px; height: 100%; width: 100%; touch-action: manipulation; z-index: 0;">\n' +
     '\t<div data-element="chartContainer" style="position: absolute; height: 100%; width: 100%;" class="chart chartArea--graph">\n' +
     '\t\t<div data-element="canvasArea" style="position: relative; height: 100%; width: 100%; touch-action: manipulation;">\n' +
-    '\t\t\t<canvas data-element="snapshotCanvas" style="z-index: 0"></canvas>\n' +
-    '\t\t\t<canvas data-element="backgroundCanvas" style="z-index: 1"></canvas>\n' +
-    '\t\t\t<canvas data-element="mainCanvas" style="z-index: 2"></canvas>\n' +
-    '\t\t\t<canvas data-element="dynamicObjectsCanvas" style="z-index: 3"></canvas>\n' +
-    '\t\t\t<canvas data-element="yAxisLabelsCanvas" style="z-index: 4"></canvas>\n' +
-    '\t\t\t<canvas data-element="crossToolCanvas" style="z-index: 5"></canvas>\n' +
-    '\t\t\t<canvas data-element="hitTestCanvas" style="z-index: 6"></canvas>\n' +
+    '\t\t\t<canvas data-element="snapshotCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="backgroundCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="mainCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="yAxisLabelsCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="dynamicObjectsCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="crossToolCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="hitTestCanvas"></canvas>\n' +
     `${devexpertsPromoLink
         ? '\t\t\t<p style="position: absolute; visibility: hidden;">If you have any suggestions or are experiencing any issues, please feel free to contact us at <a href="https://devexperts.com/dxcharts/">devexperts.com</a></p>\n'
         : ''}` +

package/dist/chart/components/pane/pane-hit-test.controller.js

@@ -41,7 +41,7 @@ export class PaneHitTestController {
      * @returns {void}
      */
     onHover(model) {
-        this.allDataSeries.forEach(d => (d.hovered = d.htId === (model === null || model === void 0 ? void 0 : model.htId)));
+        this.allDataSeries.forEach(d => (d.highlighted = d.htId === (model === null || model === void 0 ? void 0 : model.htId)));
         this.canvasModel.fireDraw();
     }
     onMouseDown(model) {

package/dist/chart/components/volumes/volumes.component.d.ts

@@ -58,5 +58,5 @@ export declare class VolumesComponent extends ChartBaseElement {
      * @returns {void}
      */
     setVisible(visible?: boolean): void;
-    private addVolumesToDynamicObjects;
+    private syncVolumesDynamicObject;
 }

package/dist/chart/components/volumes/volumes.component.js

@@ -25,7 +25,7 @@ export class VolumesComponent extends ChartBaseElement {
         this.addChildEntity(volumesModel);
         this.separateVolumes = new SeparateVolumesComponent(chartComponent, drawingManager, config, volumesModel, paneManager);
         this.volumesDrawer = new VolumesDrawer(config, this.volumesModel, chartComponent.chartModel, () => { var _a, _b; return (this.config.components.volumes.showSeparately ? (_b = (_a = this.separateVolumes.pane) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : scale : scale); }, this.volumesColorByChartTypeMap, () => true);
-        config.components.volumes.visible && this.addVolumesToDynamicObjects();
+        config.components.volumes.visible && this.syncVolumesDynamicObject();
         this.addChildEntity(this.separateVolumes);
         this.registerDefaultVolumeColorResolvers();
         this.volumeVisibilityChangedSubject.next(config.components.volumes.visible);
@@ -58,6 +58,7 @@ export class VolumesComponent extends ChartBaseElement {
                 this.separateVolumes.deactiveSeparateVolumes();
             }
             this.volumeIsSeparateModeChangedSubject.next(separate);
+            this.syncVolumesDynamicObject();
         }
     }
     /**
@@ -84,9 +85,6 @@ export class VolumesComponent extends ChartBaseElement {
     setVisible(visible = true) {
         this.config.components.volumes.visible = visible;
         this.volumeVisibilityChangedSubject.next(visible);
-        visible
-            ? this.addVolumesToDynamicObjects()
-            : this.dynamicObjectsComponent.model.removeObject(this.volumesModel.id);
         if (this.config.components.volumes.showSeparately) {
             if (visible) {
                 this.separateVolumes.activateSeparateVolumes();
@@ -98,19 +96,28 @@ export class VolumesComponent extends ChartBaseElement {
             }
         }
         this.canvasBoundsContainer.recalculatePanesHeightRatios();
+        this.syncVolumesDynamicObject();
         this.canvasModel.fireDraw();
     }
-    addVolumesToDynamicObjects() {
-        // check if the volumes dynamic object is already added
-        const position = this.dynamicObjectsComponent.model.getObjectPosition(this.volumesModel.id);
-        if (position !== -1) {
+    syncVolumesDynamicObject() {
+        const visible = this.config.components.volumes.visible;
+        if (!visible) {
+            this.dynamicObjectsComponent.model.removeObject(this.volumesModel.id);
             return;
         }
-        this.dynamicObjectsComponent.model.addObject({
+        const paneId = this.config.components.volumes.showSeparately ? VOLUMES_UUID : CHART_UUID;
+        const volumesDynamicObject = {
             id: this.volumesModel.id,
-            paneId: this.config.components.volumes.showSeparately ? VOLUMES_UUID : CHART_UUID,
+            paneId,
             drawer: this.volumesDrawer,
             model: this.volumesModel,
-        });
+        };
+        // check if the volumes dynamic object is already added
+        const position = this.dynamicObjectsComponent.model.getObjectPosition(this.volumesModel.id);
+        if (position === -1) {
+            this.dynamicObjectsComponent.model.addObject(volumesDynamicObject);
+            return;
+        }
+        this.dynamicObjectsComponent.model.updateObject(volumesDynamicObject);
     }
 }

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

@@ -12,6 +12,7 @@ import { LabelsGroups } from './price_labels/y-axis-labels.model';
 import { YAxisScaleHandler } from './y-axis-scale.handler';
 import { YAxisModel } from './y-axis.model';
 import { merge as mergeObj } from '../../utils/merge.utils';
+import { cloneUnsafe } from '../../utils/object.utils';
 /**
  * Y axis component. Contains all Y axis related logic.
  */
@@ -28,7 +29,8 @@ export class YAxisComponent extends ChartBaseElement {
         this.extentIdx = extentIdx;
         this.labelsColorByChartTypeMap = {};
         this.axisTypeSetSubject = new Subject();
-        this.state = mergeObj(initialState !== null && initialState !== void 0 ? initialState : {}, config.components.yAxis, {
+        const initialStateCopy = initialState ? cloneUnsafe(initialState) : {};
+        this.state = mergeObj(initialStateCopy, config.components.yAxis, {
             overrideExisting: false,
             addIfMissing: true,
         });

package/dist/chart/drawers/chart-type-drawers/area.drawer.js

@@ -23,7 +23,7 @@ export class AreaDrawer {
             else {
                 ctx.strokeStyle = model.colors.areaTheme.lineColor;
             }
-            if (model.hovered) {
+            if (model.highlighted) {
                 ctx.lineWidth = this.config.selectedWidth;
             }
             else {

package/dist/chart/drawers/data-series.drawer.js

@@ -47,7 +47,7 @@ export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSel
     if (drawerConfig.forceBold) {
         ctx.lineWidth = drawerConfig.forceBold;
     }
-    else if (dataSeries.hovered) {
+    else if (dataSeries.highlighted) {
         ctx.lineWidth = lineWidth !== seriesSelectedWidth ? lineWidth + 1 : seriesSelectedWidth;
     }
     else {

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

@@ -16,8 +16,6 @@ export declare class MainCanvasTouchHandler extends ChartBaseElement {
     private canvasInputListeners;
     private mainCanvasParent;
     private touchedCandleIndexes;
-    private pinchDistance;
-    private isDraggable;
     constructor(chartAreaPanHandler: ChartAreaPanHandler, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, mainCanvasParent: Element);
     /**
      * Activates canvas input listeners for touch start and touch move events.

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

@@ -4,7 +4,6 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { ChartBaseElement } from '../model/chart-base-element';
-const MIN_PINCH_DISTANCE = 30;
 /**
  * Handles chart touch events.
  */
@@ -17,10 +16,6 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
         this.mainCanvasParent = mainCanvasParent;
         // 2 candles indexes touched by 2 fingers when pinching
         this.touchedCandleIndexes = [0, 0];
-        // number of px between touch events
-        this.pinchDistance = 0;
-        // used when maximum zoom in/out reached, can't use deactivate because it unsubscribes from all touch events
-        this.isDraggable = true;
     }
     /**
      * Activates canvas input listeners for touch start and touch move events.
@@ -39,7 +34,6 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      */
     handleTouchStartEvent(e) {
         if (e.touches.length === 2) {
-            this.isDraggable = true;
             this.chartAreaPanHandler.deactivate();
             // @ts-ignore
             // TODO rework this
@@ -89,16 +83,6 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
      * @returns {void}
      */
     pinchHandler(candleIndexes, touchPositions) {
-        const diff = Math.abs(touchPositions[0]) - Math.abs(touchPositions[1]);
-        const pinchDistance = Math.abs(diff);
-        const zoomIn = pinchDistance > this.pinchDistance;
-        if (this.scale.isMaxZoomXReached(zoomIn)) {
-            this.isDraggable = false;
-        }
-        if (!this.isDraggable || pinchDistance < MIN_PINCH_DISTANCE) {
-            return;
-        }
-        this.pinchDistance = pinchDistance;
         const first = (touchPositions[0] * candleIndexes[1] - touchPositions[1] * candleIndexes[0]) /
             (touchPositions[0] - touchPositions[1]);
         const last = first +

package/dist/chart/model/data-series.model.d.ts

@@ -48,7 +48,7 @@ export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint
     id: string;
     htId: number;
     name: string;
-    hovered: boolean;
+    highlighted: boolean;
     yAxisLabelProvider: DataSeriesYAxisLabelsProvider;
     readonly config: DataSeriesConfig;
     scale: ScaleModel;

package/dist/chart/model/data-series.model.js

@@ -72,7 +72,7 @@ export class DataSeriesModel extends ChartBaseElement {
         this.id = id;
         this.htId = htId;
         this.name = '';
-        this.hovered = false;
+        this.highlighted = false;
         this._dataPoints = [];
         this.pricePrecisions = [2];
         /**

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

@@ -25,6 +25,10 @@ export interface ScaleHistoryItem {
 export declare const getDefaultHighLowWithIndex: () => HighLowWithIndex;
 export type ViewportPercent = number;
 type Constraints = (initialState: ViewportModelState, state: ViewportModelState) => ViewportModelState;
+export interface ZoomReached {
+    max: boolean;
+    min: boolean;
+}
 /**
  * The ScaleModel class represents the state of a chart's scale, including the current viewport, zoom level, and auto-scaling settings.
  * It extends the ViewportModel class, which provides the underlying implementation for handling viewports and zoom levels.
@@ -41,16 +45,13 @@ export declare class ScaleModel extends ViewportModel {
     private canvasAnimation;
     scaleInversedSubject: Subject<boolean>;
     beforeStartAnimationSubject: Subject<void>;
-    history: ScaleHistoryItem[];
     autoScaleModel: AutoScaleViewportSubModel;
     zoomXYRatio: ZoomXToZoomYRatio;
-    offsets: ChartConfigComponentsOffsets;
-    xConstraints: Constraints[];
-    maxZoomReached: {
-        zoomIn: boolean;
-        zoomOut: boolean;
-    };
+    zoomReached: ZoomReached;
     readonly state: ChartScale;
+    history: ScaleHistoryItem[];
+    offsets: ChartConfigComponentsOffsets;
+    private xConstraints;
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
     protected doActivate(): void;
     protected doDeactivate(): void;
@@ -86,7 +87,10 @@ export declare class ScaleModel extends ViewportModel {
     zoomXToEnd(zoomIn: boolean, zoomSensitivity: number): void;
     haltAnimation(): void;
     private zoomXTo;
-    isMaxZoomXReached(zoomIn: boolean): boolean;
+    calculateZoomReached(zoomX: Unit, zoomIn?: boolean): {
+        max: boolean;
+        min: boolean;
+    };
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * (you need to fire DRAW event after this)

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

@@ -7,10 +7,9 @@ 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 { zoomConstraint } from './scaling/constrait.functions';
 import { changeXToKeepRatio, changeYToKeepRatio, ratioFromZoomXY } from './scaling/lock-ratio.model';
 import { moveXStart, moveYStart } from './scaling/move-chart.functions';
-import { ViewportModel, compareStates } from './scaling/viewport.model';
+import { ViewportModel, calculateZoom, compareStates, } from './scaling/viewport.model';
 import { zoomXToEndViewportCalculator, zoomXToPercentViewportCalculator } from './scaling/x-zooming.functions';
 export const getDefaultHighLowWithIndex = () => ({
     high: Number.NEGATIVE_INFINITY,
@@ -37,11 +36,11 @@ 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 };
         // TODO rework, make a new history based on units
         this.history = [];
-        this.zoomXYRatio = 0;
         this.xConstraints = [];
-        this.maxZoomReached = { zoomIn: false, zoomOut: false };
         this.scalePostProcessor = (initialState, state) => {
             // for now <s>reduceRight<s/> reduce bcs ChartModel#getZoomConstrait should be invoked first
             // if we will need more complex order handling -> add some managing
@@ -50,16 +49,12 @@ export class ScaleModel extends ViewportModel {
         this.state = cloneUnsafe(config.scale);
         this.autoScaleModel = new AutoScaleViewportSubModel(this);
         this.offsets = this.config.components.offsets;
-        this.addXConstraint((initialState, state) => {
-            const { maxZoomReached, newState } = zoomConstraint(initialState, state, this.config.components.chart, this.getBounds);
-            this.maxZoomReached = maxZoomReached;
-            return newState;
-        });
     }
     doActivate() {
         super.doActivate();
         this.scaleInversedSubject = new Subject();
         this.beforeStartAnimationSubject = new Subject();
+        this.zoomReached = this.calculateZoomReached(this.export().zoomX);
         this.addRxSubscription(this.scaleInversedSubject.subscribe(() => {
             this.fireChanged();
         }));
@@ -107,7 +102,7 @@ export class ScaleModel extends ViewportModel {
         this.beforeStartAnimationSubject.next();
         const state = this.export();
         zoomXToPercentViewportCalculator(this, state, viewportPercent, zoomSensitivity, zoomIn);
-        this.zoomXTo(state, disabledAnimations);
+        this.zoomXTo(state, zoomIn, disabledAnimations);
     }
     /**
      * Zooms the X axis of the chart relativly to the end of the data range.
@@ -121,7 +116,7 @@ export class ScaleModel extends ViewportModel {
         this.beforeStartAnimationSubject.next();
         const state = this.export();
         zoomXToEndViewportCalculator(this, state, zoomSensitivity, zoomIn);
-        this.zoomXTo(state, this.config.scale.disableAnimations);
+        this.zoomXTo(state, zoomIn, this.config.scale.disableAnimations);
     }
     haltAnimation() {
         var _a;
@@ -130,9 +125,13 @@ export class ScaleModel extends ViewportModel {
             this.doAutoScale();
         }
     }
-    zoomXTo(state, forceNoAnimation) {
+    zoomXTo(state, zoomIn, forceNoAnimation) {
         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) {
+            return;
+        }
         if (this.state.lockPriceToBarRatio) {
             changeYToKeepRatio(constrainedState, this.zoomXYRatio);
         }
@@ -146,8 +145,19 @@ export class ScaleModel extends ViewportModel {
             startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
         }
     }
-    isMaxZoomXReached(zoomIn) {
-        return (this.maxZoomReached.zoomIn && zoomIn) || (this.maxZoomReached.zoomOut && !zoomIn);
+    calculateZoomReached(zoomX, zoomIn = true) {
+        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 };
+        }
+        return { max: false, min: false };
     }
     /**
      * Moves the viewport to exactly xStart..xEnd place.
@@ -160,8 +170,16 @@ export class ScaleModel extends ViewportModel {
     setXScale(xStart, xEnd, forceNoAnimation = true) {
         const initialState = this.export();
         const zoomX = this.calculateZoomX(xStart, xEnd);
+        if (initialState.xStart === xStart && initialState.xEnd === xEnd && initialState.zoomX > 0) {
+            return;
+        }
         const state = Object.assign(Object.assign({}, initialState), { zoomX, xStart, xEnd });
         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) {
+            return;
+        }
         if (this.state.lockPriceToBarRatio) {
             changeYToKeepRatio(constrainedState, this.zoomXYRatio);
         }
@@ -178,6 +196,9 @@ export class ScaleModel extends ViewportModel {
     }
     setYScale(yStart, yEnd, fire = false) {
         const initialState = this.export();
+        if (initialState.yStart === yStart && initialState.yEnd === yEnd && initialState.zoomY > 0) {
+            return;
+        }
         super.setYScale(yStart, yEnd, fire);
         const state = this.export();
         const constrainedState = this.scalePostProcessor(initialState, state);

package/dist/chart/model/scaling/constrait.functions.d.ts

@@ -3,8 +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/.
  */
-import { ChartConfigComponentsChart } from '../../chart.config';
-import { Bounds, BoundsProvider } from '../bounds.model';
+import { Bounds } from '../bounds.model';
 import VisualCandle from '../visual-candle';
 import { ViewportModelState } from './viewport.model';
 /**
@@ -27,15 +26,3 @@ export declare const candleEdgesConstrait: (state: ViewportModelState, visualCan
     zoomY: number;
     inverseY: boolean;
 };
-/**
- * This function limits minimum and maximum chart viewport dependening on visible x-units
- * @returns
- * @doc-tags viewport,zoom,scaling
- */
-export declare const zoomConstraint: (_: ViewportModelState, state: ViewportModelState, chartConfig: ChartConfigComponentsChart, boundsProvider: BoundsProvider) => {
-    newState: ViewportModelState;
-    maxZoomReached: {
-        zoomIn: boolean;
-        zoomOut: boolean;
-    };
-};

package/dist/chart/model/scaling/constrait.functions.js

@@ -4,7 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { at } from '../../utils/array.utils';
-import { calculateZoom, pixelsToUnits } from './viewport.model';
+import { pixelsToUnits } from './viewport.model';
 /**
  * Return constraited state that handled zooming and moving chart near first/last candles
  * this and other constraits that works with state should mutate and return state
@@ -35,31 +35,3 @@ export const candleEdgesConstrait = (state, visualCandlesCoordinates, candleLimi
     newState.xEnd = normalizedXEnd;
     return newState;
 };
-/**
- * This function limits minimum and maximum chart viewport dependening on visible x-units
- * @returns
- * @doc-tags viewport,zoom,scaling
- */
-export const zoomConstraint = (_, state, chartConfig, boundsProvider) => {
-    const newState = Object.assign({}, state);
-    const bounds = boundsProvider();
-    // 1 - is an average candle width: newXEnd - newXStart = avg candles amount in the viewport
-    const avgCandlesInViewport = newState.xEnd - newState.xStart;
-    const minViewportReached = avgCandlesInViewport < chartConfig.minCandles;
-    const maxCandlesInViewport = bounds.width / chartConfig.minWidth;
-    const maxViewportReached = avgCandlesInViewport > maxCandlesInViewport;
-    // rules work only if chart is shown
-    if (bounds.width > 0) {
-        if (maxViewportReached) {
-            newState.xStart = newState.xEnd - maxCandlesInViewport;
-            newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
-            return { newState, maxZoomReached: { zoomOut: true, zoomIn: false } };
-        }
-        if (minViewportReached) {
-            newState.xStart = newState.xEnd - chartConfig.minCandles;
-            newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
-            return { newState, maxZoomReached: { zoomOut: false, zoomIn: true } };
-        }
-    }
-    return { newState, maxZoomReached: { zoomOut: false, zoomIn: false } };
-};