@devexperts/dxcharts-lite 2.7.29 → 2.7.30

package/dist/chart/components/cross_tool/cross-tool.model.d.ts

@@ -38,6 +38,7 @@ export declare class CrossToolModel extends ChartBaseElement {
      * @returns {void}
      */
     setType(type: CrossToolType): void;
+    private shouldKeepXForMobileTouchCrosshair;
     /**
      * Method to activate the cross tool.
      * It subscribes to the hoverProducer's hover event and updates the crosstool.

package/dist/chart/components/cross_tool/cross-tool.model.js

@@ -35,6 +35,11 @@ export class CrossToolModel extends ChartBaseElement {
     setType(type) {
         this.config.type = type;
     }
+    shouldKeepXForMobileTouchCrosshair() {
+        return (isMobile() &&
+            this.hoverProducer.longTouchActivatedSubject.getValue() &&
+            this.crossEventProducer.crossSubject.getValue() !== null);
+    }
     /**
      * Method to activate the cross tool.
      * It subscribes to the hoverProducer's hover event and updates the crosstool.
@@ -100,7 +105,9 @@ export class CrossToolModel extends ChartBaseElement {
      */
     updateCrossTool(hover, magnetTarget = this.config.magnetTarget, discrete = this.config.discrete) {
         var _a;
-        const x = discrete ? this.chartModel.toX((_a = this.chartModel.candleFromX(hover.x, true).idx) !== null && _a !== void 0 ? _a : 0) : hover.x;
+        const x = discrete && !this.shouldKeepXForMobileTouchCrosshair()
+            ? this.chartModel.toX((_a = this.chartModel.candleFromX(hover.x, true).idx) !== null && _a !== void 0 ? _a : 0)
+            : hover.x;
         if (this.currentHover === null) {
             this.currentHover = { x, y: 0, time: hover.timeFormatted, paneId: hover.paneId };
         }

package/dist/chart/components/y_axis/price_labels/price-label.drawer.js

@@ -66,7 +66,7 @@ export function drawLabel(ctx, yAxisDescriptionsCtx, backgroundCtx, bounds, pane
     }
     const lineY = (_e = visualLabel.lineY) !== null && _e !== void 0 ? _e : visualLabel.y;
     const _drawLine = () => showLine &&
-        avoidAntialiasing(ctx, () => drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1, visualLabel.lineDash));
+        avoidAntialiasing(ctx, () => { var _a; return drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1, (_a = visualLabel.lineDash) !== null && _a !== void 0 ? _a : [], visualLabel.lineCap); });
     const _drawLabel = () => drawLabel(ctx, bounds, replaceMinusSign(text), centralY, visualLabel, config, colors.yAxis, false);
     const drawLineLabel = () => {
         _drawLine();

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

@@ -166,9 +166,12 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
      * @returns {LabelGroup} - A new LabelGroup object with updated label coordinates.
      */
     updateLabelsCoordinates(labels, points) {
-        return Object.assign(Object.assign({}, labels), { labels: labels.labels.map((label, idx) => (Object.assign(Object.assign({}, label), { 
-                // save original y
-                lineY: label.y, y: points[idx] }))) });
+        return Object.assign(Object.assign({}, labels), { labels: labels.labels.map((label, idx) => {
+                var _a;
+                return (Object.assign(Object.assign({}, label), { 
+                    // Keep connector Y at the price level when the Y-axis price label box was shifted to avoid overlap
+                    lineY: (_a = label.lineY) !== null && _a !== void 0 ? _a : label.y, y: points[idx] }));
+            }) });
     }
     /**
      * Returns an Observable that emits a void value whenever the labels position is recalculated.

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

@@ -3,13 +3,14 @@
  * 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 { YAxisConfig, FullChartColors } from '../../chart.config';
+import { YAxisConfig, FullChartColors, YAxisLabelAppearanceType, YAxisLabelMode } from '../../chart.config';
 import { Bounds } from '../../model/bounds.model';
 export interface YAxisLabelDrawProps {
     ctx: CanvasRenderingContext2D;
     bounds: Bounds;
     text: string;
     centralY: number;
+    lineY?: number;
     config: YAxisLabelDrawConfig;
     subGroupId?: number;
 }
@@ -26,6 +27,12 @@ export interface YAxisLabelDrawConfig {
     paddingStart?: number;
     rounded?: boolean;
     lineDash?: Array<number>;
+    /** When set (e.g. `round` with short dash gaps), strokes render as dotted segments. */
+    lineCap?: CanvasLineCap;
+    /** Overrides chart-wide `components.yAxis.labels.settings.drawings.mode` for this label (e.g. drawings). */
+    yAxisLabelMode?: YAxisLabelMode;
+    /** Overrides chart-wide `components.yAxis.labels.settings.drawings.type` for this label (e.g. drawings). */
+    yAxisLabelType?: YAxisLabelAppearanceType;
 }
 export declare const DEFAULT_PRICE_LABEL_PADDING = 4;
 /**

package/dist/chart/components/y_axis/y-axis-labels.drawer.js

@@ -8,7 +8,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 { getFontFromConfig } from '../../chart.config';
+import { getFontFromConfig, } from '../../chart.config';
 import { drawPriceLabel, drawRoundedRect } from '../../utils/canvas/canvas-drawing-functions.utils';
 import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
 import { getLabelTextColorByBackgroundColor } from '../../utils/canvas/canvas-text-functions.utils';

package/dist/chart/inputhandlers/hover-producer.component.d.ts

@@ -130,6 +130,10 @@ export declare class HoverProducerComponent extends ChartBaseElement {
      */
     fireLastCross(): void;
     setLongTouchCrosshairSuppressed(value: boolean): void;
+    /**
+     * Resets the current crosshair/touch state back to the default mobile idle state.
+     */
+    resetCrossTool(clearMobile?: boolean): void;
     /**
      * Registers a hover producer part with the given id.
      *

package/dist/chart/inputhandlers/hover-producer.component.js

@@ -134,7 +134,7 @@ export class HoverProducerComponent extends ChartBaseElement {
             this.paneManager.chartPanComponent.setChartPanningOptions(false, false);
         }));
         this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(event => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const { clientX, clientY } = event.changedTouches[0];
             const { fixed, temp } = this.crossEventProducer.crossToolTouchInfo;
             const x = clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
@@ -142,28 +142,32 @@ export class HoverProducerComponent extends ChartBaseElement {
             // common tap without moving, hide crosstool
             if (this.crossEventProducer.crossToolTouchInfo.isCommonTap &&
                 !checkChartIsMoving(x, temp.x, y, temp.y)) {
-                this.paneManager.chartPanComponent.setChartPanningOptions(true, true);
-                this.longTouchActivatedSubject.next(false);
-                this.crossEventProducer.fireCrossClose();
-                this.crossEventProducer.crossToolHover = null;
-                this.crossEventProducer.crossToolTouchInfo.isSet = false;
+                this.resetCrossTool();
                 return;
             }
             if (!this.crossEventProducer.crossToolTouchInfo.isSet) {
                 this.crossEventProducer.crossToolTouchInfo.isSet = true;
-                // previous fixed goes to temporary to prevent crosstool jumps outside the candle on candle update tick
+                const crossToolHover = this.crossEventProducer.crossToolHover;
+                const anchorX = (_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : x;
+                const anchorY = (_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : y;
                 this.crossEventProducer.crossToolTouchInfo.temp = {
-                    x: this.crossEventProducer.crossToolTouchInfo.fixed.x,
-                    y: this.crossEventProducer.crossToolTouchInfo.fixed.y,
+                    x: anchorX,
+                    y: anchorY,
                 };
                 this.crossEventProducer.crossToolTouchInfo.fixed = {
-                    x,
-                    y,
+                    x: anchorX,
+                    y: anchorY,
                 };
-                this.crossEventProducer.crossToolTouchInfo.isSet = true;
+                const paneId = (_e = (_c = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.paneId) !== null && _c !== void 0 ? _c : (_d = this.paneManager.getPaneIfHit({ x: anchorX, y: anchorY })) === null || _d === void 0 ? void 0 : _d.uuid) !== null && _e !== void 0 ? _e : '';
+                const hover = crossToolHover !== null && crossToolHover !== void 0 ? crossToolHover : this.hover;
+                if (!hover) {
+                    return;
+                }
+                this.crossEventProducer.crossToolHover = Object.assign(Object.assign({}, hover), { x: anchorX, y: anchorY, paneId });
+                this.crossEventProducer.crossSubject.next([anchorX, anchorY, paneId]);
             }
             else {
-                const pane = (_b = (_a = this.crossEventProducer.crossToolHover) === null || _a === void 0 ? void 0 : _a.paneId) !== null && _b !== void 0 ? _b : 'CHART';
+                const pane = (_g = (_f = this.crossEventProducer.crossToolHover) === null || _f === void 0 ? void 0 : _f.paneId) !== null && _g !== void 0 ? _g : 'CHART';
                 const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(pane));
                 const paneYStart = paneBounds.y + 5;
                 const paneYEnd = paneBounds.y + paneBounds.height - 5;
@@ -172,6 +176,13 @@ export class HoverProducerComponent extends ChartBaseElement {
                 const newX = fixed.x < 0 ? 0 : fixed.x > paneBounds.width ? paneBounds.width : (fixed.x += xDiff);
                 const newY = fixed.y < paneYStart ? paneYStart : fixed.y > paneYEnd ? paneYEnd : (fixed.y += yDiff);
                 this.crossEventProducer.crossToolTouchInfo.fixed = { x: newX, y: newY };
+                this.crossEventProducer.crossToolTouchInfo.temp = { x: newX, y: newY };
+                const hover = (_h = this.crossEventProducer.crossToolHover) !== null && _h !== void 0 ? _h : this.hover;
+                if (!hover) {
+                    return;
+                }
+                this.crossEventProducer.crossToolHover = Object.assign(Object.assign({}, hover), { x: newX, y: newY, paneId: pane });
+                this.crossEventProducer.crossSubject.next([newX, newY, pane]);
             }
         }));
         //#endregion
@@ -236,9 +247,16 @@ export class HoverProducerComponent extends ChartBaseElement {
      * @param {VisualCandle} candle - The VisualCandle object to create the hover from.
      */
     updateHover(candle) {
+        var _a, _b;
         const updatedHover = this.createHoverFromCandle(candle);
         if (this.hover && updatedHover) {
-            const hover = Object.assign(Object.assign({}, updatedHover), { x: this.hover.x, y: this.hover.y });
+            const shouldKeepSetTouchCrosshair = isMobile() &&
+                this.longTouchActivatedSubject.getValue() &&
+                this.crossEventProducer.crossSubject.getValue() !== null;
+            const crossToolHover = this.crossEventProducer.crossToolHover;
+            const hoverX = shouldKeepSetTouchCrosshair ? ((_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : this.hover.x) : this.hover.x;
+            const hoverY = shouldKeepSetTouchCrosshair ? ((_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : this.hover.y) : this.hover.y;
+            const hover = Object.assign(Object.assign({}, updatedHover), { x: hoverX, y: hoverY });
             this.fireHover(hover);
         }
     }
@@ -293,6 +311,21 @@ export class HoverProducerComponent extends ChartBaseElement {
     setLongTouchCrosshairSuppressed(value) {
         this.longTouchCrosshairSuppressed = value;
     }
+    /**
+     * Resets the current crosshair/touch state back to the default mobile idle state.
+     */
+    resetCrossTool(clearMobile = false) {
+        this.paneManager.chartPanComponent.setChartPanningOptions(true, true);
+        this.longTouchActivatedSubject.next(false);
+        this.crossEventProducer.fireCrossClose();
+        this.crossEventProducer.crossToolHover = null;
+        this.crossEventProducer.crossToolTouchInfo.isSet = false;
+        if (clearMobile) {
+            this.crossEventProducer.crossToolTouchInfo.isCommonTap = false;
+            this.crossEventProducer.crossToolTouchInfo.fixed = { x: 0, y: 0 };
+            this.crossEventProducer.crossToolTouchInfo.temp = { x: 0, y: 0 };
+        }
+    }
     /**
      * Registers a hover producer part with the given id.
      *

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

@@ -7,7 +7,7 @@ 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 { Price, Unit, ViewportModel, ViewportModelState, Zoom } from './scaling/viewport.model';
+import { Price, Unit, ViewportModel, ViewportModelState, XScale, YScale, Zoom } from './scaling/viewport.model';
 import { BoundsProvider } from './bounds.model';
 import VisualCandle from './visual-candle';
 export interface HighLowWithIndex {
@@ -16,11 +16,7 @@ export interface HighLowWithIndex {
     highIdx: number;
     lowIdx: number;
 }
-export interface ScaleHistoryItem {
-    xStart: Unit;
-    xEnd: Unit;
-    yStart: Unit;
-    yEnd: Unit;
+export interface ScaleHistoryItem extends XScale, YScale {
 }
 export declare const getDefaultHighLowWithIndex: () => HighLowWithIndex;
 export type ViewportPercent = number;

package/dist/chart/model/scaling/viewport.model.d.ts

@@ -57,6 +57,8 @@ export interface ViewportModelState {
     zoomY: Zoom;
     inverseY: boolean;
 }
+export type XScale = Pick<ViewportModelState, 'xStart' | 'xEnd'>;
+export type YScale = Pick<ViewportModelState, 'yStart' | 'yEnd'>;
 /**
  * Abstract viewport model.
  * Viewport has 4 coordinates: xStart, xEnd, yStart and yEnd - all stored in {@link Unit}.

package/dist/chart/utils/__tests__/canvas-lower-hover-strip.utils.test.d.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2019 - 2026 Devexperts Solutions IE Limited
+ * 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 {};

package/dist/chart/utils/__tests__/canvas-lower-hover-strip.utils.test.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 - 2026 Devexperts Solutions IE Limited
+ * 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 { isCanvasPointInLowerHoverStrip } from '../canvas-lower-hover-strip.utils';
+const baseBounds = () => ({
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    width: 1000,
+    height: 1000,
+});
+describe('canvas-lower-hover-strip.utils', () => {
+    it('returns true for a point in the lower strip (bottom offset 0)', () => {
+        const b = baseBounds();
+        expect(isCanvasPointInLowerHoverStrip({ x: 500, y: 900 }, b, 0)).toBe(true);
+    });
+    it('returns false for a point in the upper area', () => {
+        const b = baseBounds();
+        expect(isCanvasPointInLowerHoverStrip({ x: 500, y: 100 }, b, 0)).toBe(false);
+    });
+    it('shifts the strip when bottomOffsetPx is non-zero', () => {
+        const b = baseBounds();
+        const yAtStripStartNoOffset = b.height * 0.85 + 10;
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartNoOffset - 1 }, b, 0)).toBe(false);
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartNoOffset }, b, 0)).toBe(true);
+        const bottomOffset = 50;
+        const yAtStripStartWithOffset = b.height * 0.85 - bottomOffset + 10;
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartWithOffset - 1 }, b, bottomOffset)).toBe(false);
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartWithOffset }, b, bottomOffset)).toBe(true);
+    });
+});

package/dist/chart/utils/canvas/canvas-drawing-functions.utils.d.ts

@@ -46,7 +46,7 @@ export declare function drawPriceLabel(ctx: CanvasRenderingContext2D, x0: number
  *
  * @returns {void}
  */
-export declare function drawLine(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, thickness?: number, lineDash?: Array<number>): void;
+export declare function drawLine(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, thickness?: number, lineDash?: Array<number>, lineCap?: CanvasLineCap): void;
 /**
  * Try to avoid anti-aliasing
  */

package/dist/chart/utils/canvas/canvas-drawing-functions.utils.js

@@ -109,10 +109,13 @@ export function drawPriceLabel(ctx, x0, y0, x1, y1, x2, y2, _width, rounded, ali
  *
  * @returns {void}
  */
-export function drawLine(ctx, x0, y0, x1, y1, thickness = 1, lineDash = []) {
+export function drawLine(ctx, x0, y0, x1, y1, thickness = 1, lineDash = [], lineCap) {
     ctx.save();
     ctx.setLineDash(lineDash);
     ctx.lineWidth = thickness;
+    if (lineCap !== undefined) {
+        ctx.lineCap = lineCap;
+    }
     ctx.beginPath();
     ctx.moveTo(x0, y0);
     ctx.lineTo(x1, y1);

package/dist/chart/utils/canvas-lower-hover-strip.utils.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2019 - 2026 Devexperts Solutions IE Limited
+ * 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 { Bounds } from '../model/bounds.model';
+export interface CanvasPointerPoint {
+    readonly x: number;
+    readonly y: number;
+}
+/**
+ * Canvas-space hit test for the lower band (time scale / volume strip).
+ * Reusable for any UI that should react when the pointer is near the bottom of the chart.
+ *
+ * Rectangle matches the Figma hover region (full width, lower ~15% of canvas height plus offsets).
+ */
+export declare function isCanvasPointInLowerHoverStrip(point: CanvasPointerPoint, canvasBounds: Bounds, bottomOffsetPx: number): boolean;

package/dist/chart/utils/canvas-lower-hover-strip.utils.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2019 - 2026 Devexperts Solutions IE Limited
+ * 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/.
+ */
+/**
+ * Canvas-space hit test for the lower band (time scale / volume strip).
+ * Reusable for any UI that should react when the pointer is near the bottom of the chart.
+ *
+ * Rectangle matches the Figma hover region (full width, lower ~15% of canvas height plus offsets).
+ */
+export function isCanvasPointInLowerHoverStrip(point, canvasBounds, bottomOffsetPx) {
+    const rectX = 0;
+    const rectY = canvasBounds.height * 0.85 - bottomOffsetPx + 10;
+    const rectWidth = canvasBounds.width;
+    const rectHeight = canvasBounds.height * 0.15 + bottomOffsetPx + 10;
+    const dx = point.x - rectX;
+    const dy = point.y - rectY;
+    return dx >= 0 && dx < rectWidth && dy >= 0 && dy < rectHeight;
+}