@devexperts/dxcharts-lite 1.0.2 → 2.0.1

package/dist/chart/components/chart/data-series.high-low-provider.js

@@ -3,4 +3,37 @@
  * 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 const createHighLowOffsetCalculator=e=>t=>{const{top:c,bottom:s}=e(),o=t.high-t.low,n=o===0?1:o,r=n*c/100,l=n*s/100,a=t.low-l,f=t.high+r;return{low:a,high:f}},createCandlesOffsetProvider=(e,t)=>{const c=createHighLowOffsetCalculator(e);return{isHighLowActive:()=>!0,calculateHighLow:s=>{const o=t.calculateHighLow(s);return c(o)}}};
+/**
+ * Constraint on top of high low provider - makes additional offset bounds.
+ * @doc-tags viewport,scaling
+ * @param offsetsProvider
+ * @doc-tags viewport,scaling,offsets
+ */
+export const createHighLowOffsetCalculator = (offsetsProvider) => (highLow) => {
+    const { top, bottom } = offsetsProvider();
+    const _height = highLow.high - highLow.low;
+    // TODO what should we do if height is 0?
+    const height = _height === 0 ? 1 : _height;
+    const offsetTop = (height * top) / 100;
+    const offsetBottom = (height * bottom) / 100;
+    const low = highLow.low - offsetBottom;
+    const high = highLow.high + offsetTop;
+    return { low, high };
+};
+/**
+ * Constraint on top of high low provider - makes additional offset bounds.
+ * @doc-tags viewport,scaling
+ * @param offsetsProvider
+ * @param highLowProvider
+ * @doc-tags viewport,scaling,offsets
+ */
+export const createCandlesOffsetProvider = (offsetsProvider, highLowProvider) => {
+    const offsetsCalculator = createHighLowOffsetCalculator(offsetsProvider);
+    return {
+        isHighLowActive: () => true,
+        calculateHighLow: (state) => {
+            const highLow = highLowProvider.calculateHighLow(state);
+            return offsetsCalculator(highLow);
+        },
+    };
+};

package/dist/chart/components/chart/fake-candles.js

@@ -3,4 +3,100 @@
  * 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{nameDirection as u}from"../../model/candle.model";import{VisualSeriesPoint as g}from"../../model/data-series.model";import C from"../../model/visual-candle";import{firstOf as N,lastOf as w}from"../../utils/array.utils";import{round as h}from"../../utils/math.utils";const m=60;export const fakeVisualCandle=(n,t,o,e,l=m)=>{const r=fakeCandle(n,e,l);r.volume=o;let s;if(t.length===0)s=0;else if(e>=t.length){const c=t[t.length-1],f=(e-(t.length-1))*o;s=c.centerUnit+f}else{const c=t[0],f=-e*o;s=c.centerUnit-f}return new C(s,o,r.open,r.close,r.lo,r.hi,u(r.open,r.close),r)},fakeVisualPoint=(n,t,o,e,l=m)=>{const r=fakeDataPoint(n,e,l);let s;if(t.length===0)s=0;else if(e>=t.length){const c=t[t.length-1],f=(e-(t.length-1))*o;s=c.centerUnit+f}else{const c=t[0],f=-e*o;s=c.centerUnit-f}return new g(s,r.close)},fakeCandle=(n,t,o=m)=>({hi:NaN,lo:NaN,open:NaN,close:NaN,timestamp:i(n,t,o),volume:NaN,expansion:!0,idx:t}),fakeDataPoint=(n,t,o=m)=>({close:NaN,timestamp:i(n,t,o)});function i(n,t,o=m){var e,l;const r=h(t);if(n.length===0)return 0;const s=w(n);if(r>=n.length&&s)return p(s,n.length-1,r,o);const c=N(n);return r<0&&c?p(c,0,r,o):(l=(e=n[r])===null||e===void 0?void 0:e.timestamp)!==null&&l!==void 0?l:0}const p=(n,t,o,e=m)=>n.timestamp+(o-(t!=null?t:0))*e;
+import { nameDirection } from '../../model/candle.model';
+import { VisualSeriesPoint } from '../../model/data-series.model';
+import VisualCandle from '../../model/visual-candle';
+import { firstOf, lastOf } from '../../utils/array.utils';
+import { round } from '../../utils/math.utils';
+const DEFAULT_PERIOD = 60; // 1 minute
+/**
+ * Generates fake candle for left and right "out of data range" zones.
+ * Requires period to calculate the fake timestamp.
+ * The timestamp won't take session breaks or holidays into account.
+ */
+export const fakeVisualCandle = (dataPoints, visualCandles, candleWidth, index, period = DEFAULT_PERIOD) => {
+    const candle = fakeCandle(dataPoints, index, period);
+    // in case we have equivolume
+    candle.volume = candleWidth;
+    let x;
+    if (visualCandles.length === 0) {
+        x = 0;
+    }
+    else if (index >= visualCandles.length) {
+        const lastCandle = visualCandles[visualCandles.length - 1];
+        const candlesCountInBetween = index - (visualCandles.length - 1);
+        const offsetFromLast = candlesCountInBetween * candleWidth;
+        x = lastCandle.centerUnit + offsetFromLast;
+    }
+    else {
+        const firstCandle = visualCandles[0];
+        const candlesCountInBetween = -index;
+        const offsetFromFirst = candlesCountInBetween * candleWidth;
+        x = firstCandle.centerUnit - offsetFromFirst;
+    }
+    return new VisualCandle(x, candleWidth, candle.open, candle.close, candle.lo, candle.hi, nameDirection(candle.open, candle.close), candle);
+};
+export const fakeVisualPoint = (dataPoints, visualPoints, meanDataWidth, index, period = DEFAULT_PERIOD) => {
+    const candle = fakeDataPoint(dataPoints, index, period);
+    let x;
+    if (visualPoints.length === 0) {
+        x = 0;
+    }
+    else if (index >= visualPoints.length) {
+        const lastCandle = visualPoints[visualPoints.length - 1];
+        const candlesCountInBetween = index - (visualPoints.length - 1);
+        const offsetFromLast = candlesCountInBetween * meanDataWidth;
+        x = lastCandle.centerUnit + offsetFromLast;
+    }
+    else {
+        const firstCandle = visualPoints[0];
+        const candlesCountInBetween = -index;
+        const offsetFromFirst = candlesCountInBetween * meanDataWidth;
+        x = firstCandle.centerUnit - offsetFromFirst;
+    }
+    return new VisualSeriesPoint(x, candle.close);
+};
+export const fakeCandle = (candles, index, period = DEFAULT_PERIOD) => {
+    const t = getTimestampOfIndex(candles, index, period);
+    return {
+        hi: NaN,
+        lo: NaN,
+        open: NaN,
+        close: NaN,
+        timestamp: t,
+        volume: NaN,
+        expansion: true,
+        idx: index,
+    };
+};
+export const fakeDataPoint = (candles, index, period = DEFAULT_PERIOD) => {
+    const t = getTimestampOfIndex(candles, index, period);
+    return {
+        close: NaN,
+        timestamp: t,
+    };
+};
+/**
+ * Returns the timestamp of a given index in an array of candles.
+ * @param {Candle[]} candles - An array of candles.
+ * @param {Index} index - The index of the candle to get the timestamp from.
+ * @param {number} [period=DEFAULT_PERIOD] - The period of the candles in milliseconds.
+ * @returns {Timestamp} The timestamp of the candle at the given index or 0 if the array is empty or the index is out of bounds.
+ */
+function getTimestampOfIndex(candles, index, period = DEFAULT_PERIOD) {
+    var _a, _b;
+    const _index = round(index);
+    if (candles.length === 0) {
+        return 0;
+    }
+    const lastCandle = lastOf(candles);
+    if (_index >= candles.length && lastCandle) {
+        return fakeTimestamp(lastCandle, candles.length - 1, _index, period);
+    }
+    const firstCandle = firstOf(candles);
+    if (_index < 0 && firstCandle) {
+        return fakeTimestamp(firstCandle, 0, _index, period);
+    }
+    return (_b = (_a = candles[_index]) === null || _a === void 0 ? void 0 : _a.timestamp) !== null && _b !== void 0 ? _b : 0;
+}
+const fakeTimestamp = (candle, candleIdx, index, period = DEFAULT_PERIOD) => candle.timestamp + (index - (candleIdx !== null && candleIdx !== void 0 ? candleIdx : 0)) * period;

package/dist/chart/components/chart/price.formatter.js

@@ -3,4 +3,38 @@
  * 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{unitToPercent as a}from"../../model/scaling/viewport.model";import{PriceIncrementsUtils as s}from"../../utils/price-increments.utils";export const createRegularPriceFormatter=t=>r=>{let e;if(typeof r=="number")e=r;else if(typeof r=="string")e=Number(r);else return"\u2014";const[n]=t.dataSeries;if(n!==void 0){const i=s.getPricePrecision(e,n.pricePrecisions);return e.toFixed(i)}return`${e}`},createPercentFormatter=t=>(r,e)=>{const[n]=t.dataSeries;let i=r;const o=e!=null?e:n;o!==void 0&&(i=a(r,o.getBaseLine()));const c=i.toFixed(s.DEFAULT_PRECISION).replace("-","\u2212")+" %";return c==="\u22120.00 %"?"0.00 %":c},createYExtentFormatters=t=>({percent:createPercentFormatter(t),regular:createRegularPriceFormatter(t)});
+import { unitToPercent } from '../../model/scaling/viewport.model';
+import { PriceIncrementsUtils } from '../../utils/price-increments.utils';
+export const createRegularPriceFormatter = (extent) => (value) => {
+    let checkedValue;
+    if (typeof value === 'number') {
+        checkedValue = value;
+    }
+    else if (typeof value === 'string') {
+        checkedValue = Number(value);
+    }
+    else {
+        return '—';
+    }
+    const [mainDataSeries] = extent.dataSeries;
+    if (mainDataSeries !== undefined) {
+        const precision = PriceIncrementsUtils.getPricePrecision(checkedValue, mainDataSeries.pricePrecisions);
+        return checkedValue.toFixed(precision);
+    }
+    return `${checkedValue}`;
+};
+export const createPercentFormatter = (extent) => (value, dataSeries) => {
+    const [mainDataSeries] = extent.dataSeries;
+    let valueUnit = value;
+    const series = dataSeries !== null && dataSeries !== void 0 ? dataSeries : mainDataSeries;
+    if (series !== undefined) {
+        valueUnit = unitToPercent(value, series.getBaseline());
+    }
+    // always apply default precision for percent
+    const formatted = valueUnit.toFixed(PriceIncrementsUtils.DEFAULT_PRECISION).replace('-', '−') + ' %';
+    return formatted === '−0.00 %' ? '0.00 %' : formatted;
+};
+export const createYExtentFormatters = (extent) => ({
+    percent: createPercentFormatter(extent),
+    regular: createRegularPriceFormatter(extent),
+});

package/dist/chart/components/chart/secondary-chart-colors-pool.js

@@ -3,4 +3,71 @@
  * 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{cloneUnsafe as a}from"../../utils/object.utils";export class SecondaryChartColorsPool{constructor(e){this.config=e,this.usedChartColors={},this.symbolsToColorKeys={},this.secondaryChartColorsPool=this.createColorPool(this.config.colors.secondaryChartTheme),this.usedChartColors=Object.keys(this.secondaryChartColorsPool).reduce((o,s)=>Object.assign(Object.assign({},o),{[s]:0}),{})}createColorPool(e){return e.reduce((o,s,r)=>(o[`color${r}`]=Object.assign(Object.assign({},a(this.config.colors)),{lineTheme:Object.assign({},s.lineTheme),areaTheme:Object.assign({},s.areaTheme)}),o),{})}takeColorFromPool(e){let o=Number.MAX_SAFE_INTEGER,s="";for(const[r,t]of Object.entries(this.usedChartColors))t<o&&(o=t,s=r);return this.usedChartColors[s]=this.usedChartColors[s]+1,this.symbolsToColorKeys[e]=s,this.secondaryChartColorsPool[s]}addColorToPool(e){const o=this.symbolsToColorKeys[e];this.usedChartColors[o]&&(this.usedChartColors[o]=this.usedChartColors[o]-1)}updateColorConfig(e,o){var s,r;const t=this.secondaryChartColorsPool[this.usedChartColors[e]];if(t){const l=o;this.secondaryChartColorsPool[this.usedChartColors[e]]=Object.assign(Object.assign({},o),{lineTheme:Object.assign(t.lineTheme,(s=l.lineTheme)!==null&&s!==void 0?s:{}),areaTheme:Object.assign(t.areaTheme,(r=l.areaTheme)!==null&&r!==void 0?r:{})})}}}
+import { cloneUnsafe } from '../../utils/object.utils';
+export class SecondaryChartColorsPool {
+    constructor(config) {
+        this.config = config;
+        this.usedChartColors = {};
+        this.symbolsToColorKeys = {};
+        this.secondaryChartColorsPool = this.createColorPool(this.config.colors.secondaryChartTheme);
+        this.usedChartColors = Object.keys(this.secondaryChartColorsPool).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: 0 })), {});
+    }
+    /**
+     * Creates a color pool object based on the provided color array
+     * @param {SecondaryChartTheme[]} colorArray - An array of SecondaryChartTheme objects
+     * @returns {Object} - An object containing a key-value pair for each color in the colorArray
+     * The key is a string in the format "colorX" where X is the index of the color in the array
+     * The value is an object containing the FullChartColors for the color, with lineTheme and areaTheme properties
+     */
+    createColorPool(colorArray) {
+        return colorArray.reduce((acc, item, index) => {
+            acc[`color${index}`] = Object.assign(Object.assign({}, cloneUnsafe(this.config.colors)), { lineTheme: Object.assign({}, item.lineTheme), areaTheme: Object.assign({}, item.areaTheme) });
+            return acc;
+        }, {});
+    }
+    /**
+     * Takes a color from the secondaryChartColorsPool and assigns it to a symbol.
+     * @param {string} symbol - The symbol to assign the color to.
+     * @returns {string} The color assigned to the symbol.
+     */
+    takeColorFromPool(symbol) {
+        let minColors = Number.MAX_SAFE_INTEGER;
+        let minColorKey = '';
+        for (const [key, value] of Object.entries(this.usedChartColors)) {
+            if (value < minColors) {
+                minColors = value;
+                minColorKey = key;
+            }
+        }
+        this.usedChartColors[minColorKey] = this.usedChartColors[minColorKey] + 1;
+        this.symbolsToColorKeys[symbol] = minColorKey;
+        return this.secondaryChartColorsPool[minColorKey];
+    }
+    /**
+     * Adds a color to the chart color pool.
+     *
+     * @param {string} symbol - The symbol of the color to be added.
+     *
+     * @returns {void}
+     */
+    addColorToPool(symbol) {
+        const key = this.symbolsToColorKeys[symbol];
+        if (this.usedChartColors[key]) {
+            this.usedChartColors[key] = this.usedChartColors[key] - 1;
+        }
+    }
+    /**
+     * Updates the color configuration for a given symbol in the chart.
+     * @param {string} symbol - The symbol for which the color configuration needs to be updated.
+     * @param {CandleSeriesColors} config - The new color configuration for the symbol.
+     * @returns {void}
+     */
+    updateColorConfig(symbol, config) {
+        var _a, _b;
+        const existColorConfig = this.secondaryChartColorsPool[this.usedChartColors[symbol]];
+        if (existColorConfig) {
+            const colors = config;
+            this.secondaryChartColorsPool[this.usedChartColors[symbol]] = Object.assign(Object.assign({}, config), { lineTheme: Object.assign(existColorConfig.lineTheme, (_a = colors.lineTheme) !== null && _a !== void 0 ? _a : {}), areaTheme: Object.assign(existColorConfig.areaTheme, (_b = colors.areaTheme) !== null && _b !== void 0 ? _b : {}) });
+        }
+    }
+}

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

@@ -3,4 +3,88 @@
  * 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{ClearCanvasDrawer as p}from"../../drawers/clear-canvas.drawer";import{CompositeDrawer as c}from"../../drawers/composite.drawer";import{ChartBaseElement as d}from"../../model/chart-base-element";import{CrossToolDrawer as w}from"./cross-tool.drawer";import{CrossToolModel as C}from"./cross-tool.model";import{CrossAndLabelsDrawerType as o}from"./types/cross-and-labels.drawer";import{NoneDrawerType as m}from"./types/none.drawer";export class CrossToolComponent extends d{constructor(s,e,t,a,n,i,l){super(),this.config=s,this.crossToolCanvasModel=e,this.canvasBoundsContainer=t,this.drawingManager=a,this.paneManager=n,this.crossToolTypeDrawers={},this.model=new C(s.components.crossTool,this.crossToolCanvasModel,i,l),this.addChildEntity(this.model);const T=new p(this.crossToolCanvasModel);this.registerDefaultDrawerTypes();const h=new w(this.model,this.crossToolCanvasModel,this.crossToolTypeDrawers),r=new c;r.addDrawer(T,"CLEAR_CANVAS"),r.addDrawer(h,"CROSS_TOOL_DRAWER"),this.drawingManager.addDrawer(r,"CROSS_TOOL")}registerDefaultDrawerTypes(){this.registerCrossToolTypeDrawer("cross-and-labels",new o(this.config,this.canvasBoundsContainer,this.paneManager,()=>!0)),this.registerCrossToolTypeDrawer("just-labels",new o(this.config,this.canvasBoundsContainer,this.paneManager,()=>!0,!0)),this.registerCrossToolTypeDrawer("none",new m)}setVisible(s){this.model.setType(s?"cross-and-labels":"none")}setType(s){this.model.setType(s)}observeCrossToolChanged(){return this.model.currentHoverSubject}setMagnetTarget(s){this.config.components.crossTool.magnetTarget=s}registerCrossToolTypeDrawer(s,e){this.crossToolTypeDrawers[s]=e}}
+import { ClearCanvasDrawer } from '../../drawers/clear-canvas.drawer';
+import { CompositeDrawer } from '../../drawers/composite.drawer';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { CrossToolDrawer } from './cross-tool.drawer';
+import { CrossToolModel } from './cross-tool.model';
+import { CrossAndLabelsDrawerType } from './types/cross-and-labels.drawer';
+import { NoneDrawerType } from './types/none.drawer';
+/**
+ * Default bundled chart cross tool.
+ */
+export class CrossToolComponent extends ChartBaseElement {
+    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer) {
+        super();
+        this.config = config;
+        this.crossToolCanvasModel = crossToolCanvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.drawingManager = drawingManager;
+        this.paneManager = paneManager;
+        this.crossToolTypeDrawers = {};
+        this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, crossEventProducer, hoverProducer);
+        this.addChildEntity(this.model);
+        const clearCanvasDrawer = new ClearCanvasDrawer(this.crossToolCanvasModel);
+        this.registerDefaultDrawerTypes();
+        const crossToolDrawer = new CrossToolDrawer(this.model, this.crossToolCanvasModel, this.crossToolTypeDrawers);
+        const compositeDrawer = new CompositeDrawer();
+        compositeDrawer.addDrawer(clearCanvasDrawer, 'CLEAR_CANVAS');
+        compositeDrawer.addDrawer(crossToolDrawer, 'CROSS_TOOL_DRAWER');
+        this.drawingManager.addDrawer(compositeDrawer, 'CROSS_TOOL');
+    }
+    /**
+     * Registers default drawer types for the chart.
+     * @private
+     * @function
+     * @name registerDefaultDrawerTypes
+     *
+     * @returns {void}
+     */
+    registerDefaultDrawerTypes() {
+        this.registerCrossToolTypeDrawer('cross-and-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true));
+        this.registerCrossToolTypeDrawer('just-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true, true));
+        this.registerCrossToolTypeDrawer('none', new NoneDrawerType());
+    }
+    //#region public methods
+    /**
+     * Sets the cross tool visibility.
+     * @param visible
+     */
+    setVisible(visible) {
+        this.model.setType(visible ? 'cross-and-labels' : 'none');
+    }
+    /**
+     * Sets the crosstool type.
+     * - cross-and-labels - both the crosshair and X/Y labels
+     * - only-labels - only the X/Y label
+     * - none
+     * @param type
+     */
+    setType(type) {
+        this.model.setType(type);
+    }
+    /**
+     * Returns an Observable that emits the current hover subject.
+     */
+    observeCrossToolChanged() {
+        return this.model.currentHoverSubject;
+    }
+    /**
+     * Sets magnet target for cross tool.
+     * Supported only for 'cross-and-labels' type.
+     * Default magnet target is none.
+     * @param target
+     */
+    setMagnetTarget(target) {
+        this.config.components.crossTool.magnetTarget = target;
+    }
+    /**
+     * Adds a new drawer type for cross tool, so you can add your own implementation of cross tool
+     * (or override existing)
+     * @param drawerName - an unique drawer type name
+     * @param drawerImpl - CrossToolTypeDrawer object
+     */
+    registerCrossToolTypeDrawer(drawerName, drawerImpl) {
+        this.crossToolTypeDrawers[drawerName] = drawerImpl;
+    }
+}

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

@@ -3,4 +3,35 @@
  * 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 class CrossToolDrawer{constructor(o,s,r){this.model=o,this.crossToolCanvasModel=s,this.crossToolTypeDrawers=r}draw(){const o=this.crossToolTypeDrawers[this.model.type];o?this.model.currentHover&&o.draw(this.crossToolCanvasModel.ctx,this.model.currentHover):console.error(`No cross tool drawer type registered for drawer type ${this.model.type}`)}getCanvasIds(){return[this.crossToolCanvasModel.canvasId]}}
+export class CrossToolDrawer {
+    constructor(model, crossToolCanvasModel, crossToolTypeDrawers) {
+        this.model = model;
+        this.crossToolCanvasModel = crossToolCanvasModel;
+        this.crossToolTypeDrawers = crossToolTypeDrawers;
+    }
+    /**
+     * Draws the cross tool on the canvas.
+     * @function
+     * @name draw
+     * @memberof CrossToolCanvasView
+     * @instance
+     * @returns {void}
+     */
+    draw() {
+        const drawer = this.crossToolTypeDrawers[this.model.type];
+        if (drawer) {
+            this.model.currentHover && drawer.draw(this.crossToolCanvasModel.ctx, this.model.currentHover);
+        }
+        else {
+            console.error(`No cross tool drawer type registered for drawer type ${this.model.type}`);
+        }
+    }
+    /**
+     * Returns an array of string containing the canvas ID of the crossToolCanvasModel.
+     *
+     * @returns {Array<string>} An array of string containing the canvas ID of the crossToolCanvasModel.
+     */
+    getCanvasIds() {
+        return [this.crossToolCanvasModel.canvasId];
+    }
+}

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

@@ -3,4 +3,110 @@
  * 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{BehaviorSubject as c}from"rxjs";import{ChartBaseElement as o}from"../../model/chart-base-element";import{CHART_UUID as i}from"../../canvas/canvas-bounds-container";export class CrossToolModel extends o{get currentHover(){return this.currentHoverSubject.getValue()}set currentHover(e){this.currentHoverSubject.next(e)}constructor(e,r,t,s){super(),this.config=e,this.crossToolCanvasModel=r,this.crossEventProducer=t,this.hoverProducer=s,this.currentHoverSubject=new c(null),this.type="cross-and-labels",this.type=e.type}setType(e){this.type=e}doActivate(){super.doActivate(),this.addRxSubscription(this.hoverProducer.hoverSubject.subscribe(e=>{this.crossEventProducer.crossSubject.getValue()!==null&&e!==null?this.updateHover(e):this.currentHover=null,this.fireDraw()}))}fireDraw(){this.type!=="none"&&this.crossToolCanvasModel.fireDraw()}updateHover(e,r=this.config.magnetTarget){if(this.currentHover===null?this.currentHover={x:e.x,y:0,time:e.timeFormatted,paneId:e.paneId}:(this.currentHover.x=e.x,this.currentHover.time=e.timeFormatted),e.candleHover&&e.paneId===i)switch(r){case"O":this.currentHover.y=e.candleHover.openY;break;case"C":this.currentHover.y=e.candleHover.closeY;break;case"H":this.currentHover.y=e.candleHover.highY;break;case"L":this.currentHover.y=e.candleHover.lowY;break;case"OHLC":this.currentHover.y=e.candleHover.closestOHLCY;break;case"none":this.currentHover.y=e.y;break}else this.currentHover.y=e.y;this.currentHoverSubject.next(this.currentHover)}}
+import { BehaviorSubject } from 'rxjs';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { CHART_UUID } from '../../canvas/canvas-bounds-container';
+export class CrossToolModel extends ChartBaseElement {
+    get currentHover() {
+        return this.currentHoverSubject.getValue();
+    }
+    set currentHover(value) {
+        this.currentHoverSubject.next(value);
+    }
+    constructor(config, crossToolCanvasModel, crossEventProducer, hoverProducer) {
+        super();
+        this.config = config;
+        this.crossToolCanvasModel = crossToolCanvasModel;
+        this.crossEventProducer = crossEventProducer;
+        this.hoverProducer = hoverProducer;
+        // the main hover object which will be presented on UI
+        this.currentHoverSubject = new BehaviorSubject(null);
+        this.type = 'cross-and-labels';
+        this.type = config.type;
+    }
+    /**
+     * Sets the type of the CrossTool object.
+     *
+     * @param {CrossToolType} type - The type of the CrossTool object.
+     * @returns {void}
+     */
+    setType(type) {
+        this.type = type;
+    }
+    /**
+     * Method to activate the cross tool.
+     * It subscribes to the canvasInputListener's mouse move event and fires the draw event.
+     * It also subscribes to the eventBus's hover and close hover events and updates the hover and fires the draw event accordingly.
+     * It also subscribes to the chartModel's candlesSetSubject and timeZoneModel's observeTimeZoneChanged events and recalculates the cross tool X formatter.
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(this.hoverProducer.hoverSubject.subscribe(hover => {
+            if (this.crossEventProducer.crossSubject.getValue() !== null && hover !== null) {
+                this.updateHover(hover);
+            }
+            else {
+                this.currentHover = null;
+            }
+            this.fireDraw();
+        }));
+    }
+    /**
+     * This method is used to fire the draw event of the crossToolCanvasModel if the type is not 'none'.
+     * @private
+     */
+    fireDraw() {
+        if (this.type !== 'none') {
+            this.crossToolCanvasModel.fireDraw();
+        }
+    }
+    /**
+     * Updates the current hover position with the provided hover object.
+     * @param {Object} hover - The hover object containing the x and y coordinates and time formatted.
+     * @param {number} hover.x - The x coordinate of the hover.
+     * @param {number} hover.y - The y coordinate of the hover.
+     * @param {string} hover.timeFormatted - The formatted time of the hover.
+     * @param {Object} hover.candleHover - The candle hover object containing the open, close, high, low and closestOHLCY coordinates.
+     * @param {number} hover.candleHover.openY - The y coordinate of the open price of the candle.
+     * @param {number} hover.candleHover.closeY - The y coordinate of the close price of the candle.
+     * @param {number} hover.candleHover.highY - The y coordinate of the high price of the candle.
+     * @param {number} hover.candleHover.lowY - The y coordinate of the low price of the candle.
+     * @param {number} hover.candleHover.closestOHLCY - The y coordinate of the closest OHLC price of the candle.
+     * @returns {void}
+     */
+    updateHover(hover, magnetTarget = this.config.magnetTarget) {
+        if (this.currentHover === null) {
+            this.currentHover = { x: hover.x, y: 0, time: hover.timeFormatted, paneId: hover.paneId };
+        }
+        else {
+            this.currentHover.x = hover.x;
+            this.currentHover.time = hover.timeFormatted;
+        }
+        if (hover.candleHover && hover.paneId === CHART_UUID) {
+            switch (magnetTarget) {
+                case 'O':
+                    this.currentHover.y = hover.candleHover.openY;
+                    break;
+                case 'C':
+                    this.currentHover.y = hover.candleHover.closeY;
+                    break;
+                case 'H':
+                    this.currentHover.y = hover.candleHover.highY;
+                    break;
+                case 'L':
+                    this.currentHover.y = hover.candleHover.lowY;
+                    break;
+                case 'OHLC':
+                    this.currentHover.y = hover.candleHover.closestOHLCY;
+                    break;
+                case 'none':
+                    this.currentHover.y = hover.y;
+                    break;
+            }
+        }
+        else {
+            this.currentHover.y = hover.y;
+        }
+        this.currentHoverSubject.next(this.currentHover);
+    }
+}

package/dist/chart/components/cross_tool/types/cross-and-labels.drawer.js

@@ -3,4 +3,140 @@
  * 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{CanvasElement as v}from"../../../canvas/canvas-bounds-container";import{avoidAntialiasing as w,drawRoundedRect as B}from"../../../utils/canvas/canvas-drawing-functions.utils";import{priceLabelDrawersMap as S}from"../../y_axis/price_labels/price-label.drawer";export class CrossAndLabelsDrawerType{constructor(o,s,t,e=()=>!0,i){this.config=o,this.canvasBoundsContainer=s,this.paneManager=t,this.crossDrawPredicate=e,this.noLines=i}draw(o,s){this.crossDrawPredicate()&&w(o,()=>this.drawCrossTool(o,s))}drawCrossTool(o,s){var t,e,i,a,l;const n=this.canvasBoundsContainer.getBounds(v.ALL_PANES),d=this.canvasBoundsContainer.getBoundsHitTest(v.ALL_PANES,{extensionY:1e-4}),g=(t=this.config.components.xAxis.padding.top)!==null&&t!==void 0?t:0,r=(i=this.config.components.yAxis.typeConfig[(e=this.config.components.crossTool.yLabel.type)!==null&&e!==void 0?e:"badge"])===null||i===void 0?void 0:i.paddings,p=(a=r==null?void 0:r.start)!==null&&a!==void 0?a:0,c=(l=this.paneManager.paneComponents[s.paneId])===null||l===void 0?void 0:l.ht;if(d(s.x,n.y)){const x={start:[n.x,s.y],end:[n.x+n.width+p,s.y]},f={start:[s.x,n.y],end:[s.x,n.y+n.height+g]},u=c==null?void 0:c(s.x,s.y);this.noLines||(o.strokeStyle=this.config.colors.crossTool.lineColor,o.setLineDash(this.config.components.crossTool.lineDash),o.beginPath(),u&&(o.moveTo(...x.start),o.lineTo(...x.end)),o.moveTo(...f.start),o.lineTo(...f.end),o.stroke()),u&&this.drawYLabel(o,s),this.drawXLabel(o,s)}}drawXLabel(o,s){var t,e,i,a,l;const n=this.config.components.crossTool.xLabel.padding,d=this.config.components.crossTool.xLabel.margin,g=this.config.colors.crossTool;if(this.config.components.xAxis.visible){o.font=this.config.components.xAxis.fontSize+"px "+this.config.components.xAxis.fontFamily;const r=s.x,p=s.time,c=o.measureText(p).width,x=this.config.components.xAxis.fontSize,f=this.canvasBoundsContainer.getBounds(v.X_AXIS);o.save(),o.fillStyle=g.labelBoxColor;const u=(t=n==null?void 0:n.left)!==null&&t!==void 0?t:0,T=(e=n==null?void 0:n.right)!==null&&e!==void 0?e:0,h=(i=n==null?void 0:n.top)!==null&&i!==void 0?i:0,y=(a=n==null?void 0:n.bottom)!==null&&a!==void 0?a:0,b=(l=d==null?void 0:d.top)!==null&&l!==void 0?l:0,m=c+u+T,L=x+h+y,C=Math.max(r-m/2,0),A=f.y+b;B(o,C,A,m,L),o.fillStyle=g.labelTextColor;const P=Math.max(r-c/2,u),_=f.y+b+x+h-1;o.fillText(p,P,_),o.restore()}}drawYLabel(o,s){var t,e;const i=this.config.components.crossTool.yLabel.padding,a=this.config.colors.crossTool;if(this.config.components.yAxis.visible){const l=this.paneManager.paneComponents[s.paneId],n=s.y;if(!l)return;for(const d of l.yExtentComponents){const g=d.regularValueFromY(n),r=d.valueFormatter(g),p=this.canvasBoundsContainer.getBounds(v.PANE_UUID_Y_AXIS(l.uuid,d.idx)),c=S[this.config.components.crossTool.yLabel.type];c(o,p,r,n,{textColor:a.labelTextColor,bgColor:a.labelBoxColor,paddingBottom:i==null?void 0:i.bottom,paddingEnd:i==null?void 0:i.end,paddingTop:i==null?void 0:i.top},(e=(t=d.yAxisComponent)===null||t===void 0?void 0:t.state)!==null&&e!==void 0?e:this.config.components.yAxis,this.config.colors.yAxis,!0)}}}}
+import { CanvasElement } from '../../../canvas/canvas-bounds-container';
+import { avoidAntialiasing, drawRoundedRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
+import { priceLabelDrawersMap } from '../../y_axis/price_labels/price-label.drawer';
+export class CrossAndLabelsDrawerType {
+    constructor(config, canvasBoundsContainer, paneManager, crossDrawPredicate = () => true, noLines) {
+        this.config = config;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.paneManager = paneManager;
+        this.crossDrawPredicate = crossDrawPredicate;
+        this.noLines = noLines;
+    }
+    /**
+     * Draws a cross tool on a canvas context and its labels if the crossDrawPredicate is true.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {CrossToolHover} hover - The hover object containing information about the cross tool's position.
+     */
+    draw(ctx, hover) {
+        if (this.crossDrawPredicate()) {
+            avoidAntialiasing(ctx, () => this.drawCrossTool(ctx, hover));
+        }
+    }
+    /**
+     * This is a protected method called `drawCrossTool` that takes two parameters: `ctx` of type `CanvasRenderingContext2D` and `hover` of type `CrossToolHover`.
+     * The method draws a cross tool on the canvas using the provided context. It first gets the bounds of all panes and the hit test bounds of all panes. It then gets the top padding of the x-axis from the configuration and the left padding of the y-axis from the configuration based on the type of y-label.
+     * If the hit test bounds of all panes contain the hover coordinates, it draws a horizontal line and a vertical line using the provided coordinates and the bounds of all panes. It sets the stroke style to the line color from the configuration and sets the line dash to the line dash from the configuration. It then begins a new path, moves to the start of the horizontal line, draws a line to the end of the horizontal line, moves to the start of the vertical line, and draws a line to the end of the vertical line. Finally, it strokes the path.
+     */
+    drawCrossTool(ctx, hover) {
+        var _a, _b, _c, _d, _e;
+        const allPanes = this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES);
+        // extension is need for allPanes.y to fit into hit test
+        const allPanesHT = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES, { extensionY: 0.0001 });
+        const xAxisTopPadding = (_a = this.config.components.xAxis.padding.top) !== null && _a !== void 0 ? _a : 0;
+        const padding = (_c = this.config.components.yAxis.typeConfig[(_b = this.config.components.crossTool.yLabel.type) !== null && _b !== void 0 ? _b : 'badge']) === null || _c === void 0 ? void 0 : _c.paddings;
+        const yAxisLeftPadding = (_d = padding === null || padding === void 0 ? void 0 : padding.start) !== null && _d !== void 0 ? _d : 0;
+        // we want to draw hover even if y coordinate is beyond chart
+        // Example: snap option is turned on, and chart is scrolled down, so it's not visible
+        const paneHT = (_e = this.paneManager.panes[hover.paneId]) === null || _e === void 0 ? void 0 : _e.ht;
+        if (allPanesHT(hover.x, allPanes.y)) {
+            const horizontalLineCoords = {
+                start: [allPanes.x, hover.y],
+                end: [allPanes.x + allPanes.width + yAxisLeftPadding, hover.y],
+            };
+            const verticalLineCoords = {
+                start: [hover.x, allPanes.y],
+                end: [hover.x, allPanes.y + allPanes.height + xAxisTopPadding],
+            };
+            const allowHorizontal = paneHT === null || paneHT === void 0 ? void 0 : paneHT(hover.x, hover.y);
+            if (!this.noLines) {
+                ctx.strokeStyle = this.config.colors.crossTool.lineColor;
+                ctx.setLineDash(this.config.components.crossTool.lineDash);
+                ctx.beginPath();
+                // don't draw horizontal line if it's not in hit test
+                if (allowHorizontal) {
+                    ctx.moveTo(...horizontalLineCoords.start);
+                    ctx.lineTo(...horizontalLineCoords.end);
+                }
+                ctx.moveTo(...verticalLineCoords.start);
+                ctx.lineTo(...verticalLineCoords.end);
+                ctx.stroke();
+            }
+            allowHorizontal && this.drawYLabel(ctx, hover);
+            this.drawXLabel(ctx, hover);
+        }
+    }
+    /**
+     * Draws the X axis label for the cross tool on the canvas.
+     * @param {CanvasRenderingContext2D} ctx - The 2D rendering context for the canvas.
+     * @param {CrossToolHover} hover - The hover object containing the x and y coordinates of the cross tool.
+     * @returns {void}
+     */
+    drawXLabel(ctx, hover) {
+        var _a, _b, _c, _d, _e;
+        const xLabelPadding = this.config.components.crossTool.xLabel.padding;
+        const xLabelMargin = this.config.components.crossTool.xLabel.margin;
+        const crossToolColors = this.config.colors.crossTool;
+        // X axis label same for all
+        if (this.config.components.xAxis.visible) {
+            ctx.font = this.config.components.xAxis.fontSize + 'px ' + this.config.components.xAxis.fontFamily;
+            // X hover
+            const x = hover.x;
+            const labelText = hover.time;
+            const width = ctx.measureText(labelText).width;
+            const fontHeight = this.config.components.xAxis.fontSize;
+            // box
+            const xAxis = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+            ctx.save();
+            ctx.fillStyle = crossToolColors.labelBoxColor;
+            const xLabelPaddingLeft = (_a = xLabelPadding === null || xLabelPadding === void 0 ? void 0 : xLabelPadding.left) !== null && _a !== void 0 ? _a : 0;
+            const xLabelPaddingRight = (_b = xLabelPadding === null || xLabelPadding === void 0 ? void 0 : xLabelPadding.right) !== null && _b !== void 0 ? _b : 0;
+            const xLabelPaddingTop = (_c = xLabelPadding === null || xLabelPadding === void 0 ? void 0 : xLabelPadding.top) !== null && _c !== void 0 ? _c : 0;
+            const xLabelPaddingBottom = (_d = xLabelPadding === null || xLabelPadding === void 0 ? void 0 : xLabelPadding.bottom) !== null && _d !== void 0 ? _d : 0;
+            const xLabelMarginTop = (_e = xLabelMargin === null || xLabelMargin === void 0 ? void 0 : xLabelMargin.top) !== null && _e !== void 0 ? _e : 0;
+            const boxWidth = width + xLabelPaddingLeft + xLabelPaddingRight;
+            const boxHeight = fontHeight + xLabelPaddingTop + xLabelPaddingBottom;
+            const xBoxPos = Math.max(x - boxWidth / 2, 0);
+            const yBoxPos = xAxis.y + xLabelMarginTop;
+            drawRoundedRect(ctx, xBoxPos, yBoxPos, boxWidth, boxHeight);
+            // label
+            ctx.fillStyle = crossToolColors.labelTextColor;
+            const xTextPos = Math.max(x - width / 2, xLabelPaddingLeft);
+            const yTextPos = xAxis.y + xLabelMarginTop + fontHeight + xLabelPaddingTop - 1; // -1 for vertical adjustment
+            ctx.fillText(labelText, xTextPos, yTextPos);
+            ctx.restore();
+        }
+    }
+    /**
+     * Draws the Y-axis label on the canvas context at the given point.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {Point} point - The point where the label should be drawn.
+     * @returns {void}
+     */
+    drawYLabel(ctx, point) {
+        const yLabelPadding = this.config.components.crossTool.yLabel.padding;
+        const crossToolColors = this.config.colors.crossTool;
+        // Y axis label different for main chart pane and the rest panes
+        if (this.config.components.yAxis.visible) {
+            const pane = this.paneManager.panes[point.paneId];
+            const y = point.y;
+            if (!pane) {
+                return;
+            }
+            for (const extent of pane.yExtentComponents) {
+                const price = extent.regularValueFromY(y);
+                const label = extent.valueFormatter(price);
+                const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(pane.uuid, extent.idx));
+                const drawYLabel = priceLabelDrawersMap[this.config.components.crossTool.yLabel.type];
+                drawYLabel(ctx, bounds, label, y, {
+                    textColor: crossToolColors.labelTextColor,
+                    bgColor: crossToolColors.labelBoxColor,
+                    paddingBottom: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.bottom,
+                    paddingEnd: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.end,
+                    paddingTop: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.top,
+                }, extent.yAxis.state, this.config.colors.yAxis, true);
+            }
+        }
+    }
+}

package/dist/chart/components/cross_tool/types/none.drawer.js

@@ -3,4 +3,6 @@
  * 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 class NoneDrawerType{draw(){}}
+export class NoneDrawerType {
+    draw() { }
+}