@devexperts/dxcharts-lite 1.0.2 → 2.0.0

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

@@ -3,4 +3,22 @@
  * 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{setLineWidth as s}from"../data-series.drawer";import{buildLinePath as l}from"./data-series-drawers.utils";export class LinearDrawer{constructor(){}draw(i,e,r,n){e.forEach((a,h)=>{var o;const t=r.getPaintConfig(h);s(i,t.lineWidth,r,n,t.hoveredLineWidth),i.strokeStyle=(o=n.singleColor)!==null&&o!==void 0?o:t.color,this.drawLinePath(i,a,r.view)})}drawLinePath(i,e,r){i.beginPath(),l(e,i,r),i.stroke()}}
+import { setLineWidth } from '../data-series.drawer';
+import { buildLinePath } from './data-series-drawers.utils';
+export class LinearDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, drawerConfig) {
+        allPoints.forEach((points, idx) => {
+            var _a;
+            const config = model.getPaintConfig(idx);
+            setLineWidth(ctx, config.lineWidth, model, drawerConfig, config.hoveredLineWidth);
+            ctx.strokeStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            this.drawLinePath(ctx, points, model.view);
+        });
+    }
+    drawLinePath(ctx, points, view) {
+        ctx.beginPath();
+        buildLinePath(points, ctx, view);
+        ctx.stroke();
+    }
+}

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

@@ -3,4 +3,22 @@
  * 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 PointsDrawer{constructor(){}draw(o,a,i,l){a.forEach((e,s)=>{var n;const t=i.getPaintConfig(s),c=t.lineWidth;o.fillStyle=(n=l.singleColor)!==null&&n!==void 0?n:t.color,o.lineWidth=1,e.forEach(r=>{o.beginPath();const f=i.view.toX(r.centerUnit),h=i.view.toY(r.close);o.arc(f,h,c,0,Math.PI*2),o.fill()})})}}
+export class PointsDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, drawerConfig) {
+        allPoints.forEach((points, idx) => {
+            var _a;
+            const config = model.getPaintConfig(idx);
+            const radius = config.lineWidth;
+            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            ctx.lineWidth = 1;
+            points.forEach(p => {
+                ctx.beginPath();
+                const x = model.view.toX(p.centerUnit);
+                const y = model.view.toY(p.close);
+                ctx.arc(x, y, radius, 0, Math.PI * 2);
+                ctx.fill();
+            });
+        });
+    }
+}

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

@@ -3,4 +3,10 @@
  * 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 RectangularToolDrawer{draw(){}}
+export class RectangularToolDrawer {
+    // private lastDrawnTimelineX: number = -1;
+    // private regularZoneOpacity: number = 0.3;
+    // private lastZoneOpacity: number = 0.4;
+    // constructor(private chartModel: ChartModel, private chartBoundsContainer: CanvasBoundsContainer) {}
+    draw() { }
+}

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

@@ -3,4 +3,28 @@
  * 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{calculateSymbolHeight as y,calculateTextWidth as u}from"../../utils/canvas/canvas-font-measure-tool.utils";export class TextDrawer{constructor(t){this.config=t}draw(t,r,o,l){t.save(),r.forEach((a,f)=>{var e;const s=o.getPaintConfig(f);t.fillStyle=(e=l.singleColor)!==null&&e!==void 0?e:s.color;const i=s.lineWidth+"px "+this.config.components.yAxis.fontFamily;t.font=i,a.forEach(n=>{const c=o.getTextForPoint(n),g=u(c,t,i),h=y(i,t),v=o.view.toX(n.centerUnit)-g/2,x=o.view.toY(n.close)+h;t.fillText(c,v,x)})}),t.restore()}}
+import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
+export class TextDrawer {
+    constructor(config) {
+        this.config = config;
+    }
+    draw(ctx, allPoints, model, drawerConfig) {
+        ctx.save();
+        allPoints.forEach((points, idx) => {
+            var _a;
+            const config = model.getPaintConfig(idx);
+            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            const font = config.lineWidth + 'px ' + this.config.components.yAxis.fontFamily;
+            ctx.font = font;
+            points.forEach(p => {
+                const text = model.getTextForPoint(p);
+                const textWidth = calculateTextWidth(text, ctx, font);
+                const textHeight = calculateSymbolHeight(font, ctx);
+                const x = model.view.toX(p.centerUnit) - textWidth / 2;
+                const y = model.view.toY(p.close) + textHeight;
+                ctx.fillText(text, x, y);
+            });
+        });
+        ctx.restore();
+    }
+}

package/dist/chart/drawers/data-series-drawers/trend-histogram.drawer.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{flat as v}from"../../utils/array.utils";import{floor as c}from"../../utils/math.utils";export class TrendHistogramDrawer{constructor(){}draw(o,e,s){const f=s.view.toY(0),h=v(e),i=[[],[]];h.forEach((n,r,t)=>{i[n.close<this.previousValue(t,r)?1:0].push(n)}),i.forEach((n,r)=>{const t=s.getPaintConfig(r);o.strokeStyle=r===0?t.color:t.aditionalColor||"#FF00FF",o.lineWidth=t.lineWidth,o.beginPath(),n.forEach(l=>{const a=s.view.toX(l.centerUnit),u=s.view.toY(l.close);o.moveTo(a,c(f)),o.lineTo(a,c(u))}),o.stroke()})}previousValue(o,e){do e--;while(e>=0&&!isFinite(o[e]&&o[e].close));return o[e]?o[e].close:Number.NaN}}
+import { flat } from '../../utils/array.utils';
+import { floor } from '../../utils/math.utils';
+export class TrendHistogramDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model) {
+        const zero = model.view.toY(0);
+        // here I do flat, thinks that there is no more that 1 series
+        const allPointsFlat = flat(allPoints);
+        const items = [[], []];
+        allPointsFlat.forEach((item, idx, array) => {
+            items[item.close < this.previousValue(array, idx) ? 1 : 0].push(item);
+        });
+        items.forEach((points, idx) => {
+            // odd width is crucial to draw histogram without antialiasing
+            const config = model.getPaintConfig(idx);
+            ctx.strokeStyle = idx === 0 ? config.color : config.aditionalColor || '#FF00FF';
+            ctx.lineWidth = config.lineWidth;
+            ctx.beginPath();
+            points.forEach(p => {
+                const x = model.view.toX(p.centerUnit);
+                const y = model.view.toY(p.close);
+                ctx.moveTo(x, floor(zero));
+                ctx.lineTo(x, floor(y));
+            });
+            ctx.stroke();
+        });
+    }
+    //weird but works
+    previousValue(arr, idx) {
+        do {
+            idx--;
+        } while (idx >= 0 && !isFinite(arr[idx] && arr[idx].close));
+        return arr[idx] ? arr[idx].close : Number.NaN;
+    }
+}

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

@@ -3,4 +3,25 @@
  * 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 TriangleDrawer{constructor(){}draw(o,e,n,l){e.forEach((s,c)=>{var i;const r=n.getPaintConfig(c);o.fillStyle=(i=l.singleColor)!==null&&i!==void 0?i:r.color,s.forEach(a=>{const t=n.view.toX(a.centerUnit),f=n.view.toY(a.close);this.drawCandleTriangle(o,t,f,r.lineWidth)})})}drawCandleTriangle(o,e,n,l){o.beginPath(),o.moveTo(e-l/2,n),o.lineTo(e,n-l),o.lineTo(e+l/2,n),o.fill()}}
+export class TriangleDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, drawerConfig) {
+        allPoints.forEach((points, idx) => {
+            var _a;
+            const config = model.getPaintConfig(idx);
+            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            points.forEach(p => {
+                const x = model.view.toX(p.centerUnit);
+                const y = model.view.toY(p.close);
+                this.drawCandleTriangle(ctx, x, y, config.lineWidth);
+            });
+        });
+    }
+    drawCandleTriangle(ctx, x, y, triangleWidth) {
+        ctx.beginPath();
+        ctx.moveTo(x - triangleWidth / 2, y);
+        ctx.lineTo(x, y - triangleWidth);
+        ctx.lineTo(x + triangleWidth / 2, y);
+        ctx.fill();
+    }
+}

package/dist/chart/drawers/data-series.drawer.d.ts

@@ -3,11 +3,11 @@
  * 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 { DynamicModelDrawer } from '../components/dynamic-objects/dynamic-objects.drawer';
 import { PaneManager } from '../components/pane/pane-manager.component';
 import { Bounds } from '../model/bounds.model';
-import { DataSeriesModel, VisualSeriesPoint } from '../model/data-series.model';
 import { CanvasModel } from '../model/canvas.model';
-import { Drawer } from './drawing-manager';
+import { DataSeriesModel, VisualSeriesPoint } from '../model/data-series.model';
 export interface ChartDrawerConfig {
     singleColor?: string;
     forceBold?: number;
@@ -26,14 +26,12 @@ export declare const transformToTwoDimension: (points: VisualSeriesPoint[] | Vis
  *
  * (may support multiple layers in future)
  */
-export declare class DataSeriesDrawer implements Drawer {
+export declare class DataSeriesDrawer implements DynamicModelDrawer<DataSeriesModel> {
     private paneManager;
-    private canvasModel;
     private readonly seriesDrawers;
-    constructor(paneManager: PaneManager, canvasModel: CanvasModel, seriesDrawers: Record<string, SeriesDrawer>);
-    draw(): void;
+    constructor(paneManager: PaneManager, seriesDrawers: Record<string, SeriesDrawer>);
+    draw(canvasModel: CanvasModel, model: DataSeriesModel, paneUUID?: string): void;
     drawSeries(ctx: CanvasRenderingContext2D, series: DataSeriesModel): void;
-    getCanvasIds(): Array<string>;
 }
 export declare const clipToBounds: (ctx: CanvasRenderingContext2D, bounds: Bounds) => void;
 export declare const setLineWidth: (ctx: CanvasRenderingContext2D, lineWidth: number, dataSeries: DataSeriesModel, drawerConfig: ChartDrawerConfig, seriesSelectedWidth?: number) => void;

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

@@ -3,4 +3,59 @@
  * 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{flatMap as i}from"../utils/array.utils";export const transformToTwoDimension=r=>Array.isArray(r[0])?r:[r];export class DataSeriesDrawer{constructor(e,t,a){this.paneManager=e,this.canvasModel=t,this.seriesDrawers=a}draw(){const e=this.canvasModel.ctx;i(Object.values(this.paneManager.paneComponents),t=>t.yExtentComponents).forEach(t=>{e.save(),clipToBounds(e,t.getBounds()),t.dataSeries.forEach(a=>this.drawSeries(e,a)),e.restore()})}drawSeries(e,t){if(t.config.visible){const a=t.config.type,s=this.seriesDrawers[a];if(s){const o=t.getSeriesInViewport(t.scaleModel.xStart-1,t.scaleModel.xEnd+1);o&&o.length>=1&&s.draw(e,o,t,{})}else console.error(`Data series drawer with type ${a} isn't registered!`)}}getCanvasIds(){return[this.canvasModel.canvasId]}}export const clipToBounds=(r,e)=>{r.beginPath(),r.rect(e.x,e.y,e.width,e.height),r.clip(),r.closePath()},setLineWidth=(r,e,t,a,s=e)=>{a.forceBold?r.lineWidth=a.forceBold:t.hovered?r.lineWidth=s:r.lineWidth=e};
+export const transformToTwoDimension = (points) => (Array.isArray(points[0]) ? points : [points]);
+/**
+ * Basic data series drawer.
+ * Have multiple paint tools: linear, histogram, points, text above/below candle and others.
+ *
+ * (may support multiple layers in future)
+ */
+export class DataSeriesDrawer {
+    constructor(paneManager, seriesDrawers) {
+        this.paneManager = paneManager;
+        this.seriesDrawers = seriesDrawers;
+    }
+    draw(canvasModel, model, paneUUID) {
+        const ctx = canvasModel.ctx;
+        const pane = paneUUID && this.paneManager.panes[paneUUID];
+        if (model) {
+            ctx.save();
+            pane && clipToBounds(ctx, pane.getBounds());
+            this.drawSeries(ctx, model);
+            ctx.restore();
+        }
+    }
+    drawSeries(ctx, series) {
+        if (series.config.visible) {
+            const paintTool = series.config.type;
+            const drawer = this.seriesDrawers[paintTool];
+            if (drawer) {
+                const viewportSeries = series.getSeriesInViewport(series.scale.xStart - 1, series.scale.xEnd + 1);
+                if (viewportSeries && viewportSeries.length >= 1) {
+                    // +- 1 to correctly draw points which are partly inside bounds
+                    drawer.draw(ctx, viewportSeries, series, {});
+                }
+            }
+            else {
+                console.error(`Data series drawer with type ${paintTool} isn't registered!`);
+            }
+        }
+    }
+}
+export const clipToBounds = (ctx, bounds) => {
+    ctx.beginPath();
+    ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
+    ctx.clip();
+    ctx.closePath();
+};
+export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSelectedWidth = lineWidth) => {
+    if (drawerConfig.forceBold) {
+        ctx.lineWidth = drawerConfig.forceBold;
+    }
+    else if (dataSeries.hovered) {
+        ctx.lineWidth = seriesSelectedWidth;
+    }
+    else {
+        ctx.lineWidth = lineWidth;
+    }
+};

package/dist/chart/drawers/drawing-manager.d.ts

@@ -6,7 +6,7 @@
 import EventBus from '../events/event-bus';
 import { ChartResizeHandler } from '../inputhandlers/chart-resize.handler';
 export declare const HIT_TEST_PREFIX = "HIT_TEST_";
-declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "VOLUMES", "UNDERLAY_VOLUMES_AREA", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DRAWINGS", "DATA_SERIES", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
+declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "UNDERLAY_VOLUMES_AREA", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DYNAMIC_OBJECTS", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
 export type DrawerType = typeof drawerTypes[number];
 /**
  * Manages the drawing process.

package/dist/chart/drawers/drawing-manager.js

@@ -3,4 +3,180 @@
  * 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{EVENT_DRAW as h}from"../events/events";import{MIN_SUPPORTED_CANVAS_SIZE as t}from"../model/canvas.model";import{arrayIntersect as w,reorderArray as o}from"../utils/array.utils";import{animationFrameThrottled as E}from"../utils/perfomance/request-animation-frame-throttle.utils";import{uuid as d}from"../utils/uuid.utils";export const HIT_TEST_PREFIX="HIT_TEST_";const I=["MAIN_BACKGROUND","MAIN_CLEAR","HIT_TEST_CLEAR","YAXIS_CLEAR","SERIES_CLEAR","OVER_SERIES_CLEAR","HIT_TEST_DRAWINGS","GRID","VOLUMES","UNDERLAY_VOLUMES_AREA","X_AXIS","Y_AXIS","HIGH_LOW","DRAWINGS","DATA_SERIES","N_MAP_CHART","PL_CHART","WATERMARK","EMPTY_CHART","OFFLINE_CHART","LABELS","EVENTS","HIT_TEST_EVENTS","ZERO_LINE","PL_ZERO_LINE_BACKGROUND","CROSS_TOOL"];export class DrawingManager{constructor(i,r){this.chartResizeHandler=r,this.drawingOrder=[],this.drawersMap={},this.canvasIdsList=[],this.animFrameId=`draw_${d()}`,this.drawHitTestCanvas=()=>{this.drawingOrder.forEach(e=>{e.indexOf(HIT_TEST_PREFIX)!==-1&&this.drawersMap[e].draw()})},i.on(h,e=>{r.wasResized()&&(this.canvasIdsList&&(e&&e.length!==0?this.canvasIdsList=this.canvasIdsList.concat(e):this.canvasIdsList=void 0),E(this.animFrameId,()=>{this.forceDraw(this.canvasIdsList),this.canvasIdsList=[],this.drawHitTestCanvas()}))})}redrawCanvasesImmediate(){this.chartResizeHandler.fireUpdates(),this.forceDraw()}drawLastBar(){this.drawingOrder.forEach(i=>{if(i.indexOf(HIT_TEST_PREFIX)===-1){const r=this.drawersMap[i];r.drawLastBar&&r.drawLastBar()}})}forceDraw(i){this.isDrawable()&&this.drawingOrder.forEach(r=>{if(r.indexOf(HIT_TEST_PREFIX)===-1){const e=this.drawersMap[r];if(!i||i.length===0){e.draw();return}w(i,e.getCanvasIds()).length&&e.draw()}})}isDrawable(){var i,r,e,s;return((r=(i=this.chartResizeHandler.previousBCR)===null||i===void 0?void 0:i.height)!==null&&r!==void 0?r:0)>t.width&&((s=(e=this.chartResizeHandler.previousBCR)===null||e===void 0?void 0:e.width)!==null&&s!==void 0?s:0)>t.height}drawHitTestOnly(){this.drawHitTestCanvas()}addDrawer(i,r=d()){this.drawingOrder.indexOf(r)===-1&&this.drawingOrder.push(r),this.drawersMap[r]=i}addDrawerAfter(i,r,e){this.addDrawer(i,r);const s=this.drawingOrder.indexOf(r);this.drawingOrder.splice(s,1);const a=this.drawingOrder.indexOf(e);this.drawingOrder.splice(a+1,0,r),this.reorderDrawers(this.drawingOrder)}addDrawerBefore(i,r,e){this.addDrawer(i,r);const s=this.drawingOrder.indexOf(e);if(s!==-1){const a=this.drawingOrder.indexOf(r);return this.drawingOrder.splice(a,1),this.drawingOrder.splice(s,0,r),this.reorderDrawers(this.drawingOrder),!0}return!1}getDrawerByName(i){return this.drawersMap[i]}getNameByDrawer(i){for(const r in this.drawersMap)if(this.drawersMap[r]===i)return r}removeDrawerByName(i){const r=this.drawersMap[i];this.removeDrawer(r)}removeDrawer(i){Object.keys(this.drawersMap).forEach(r=>{if(this.drawersMap[r]===i){delete this.drawersMap[r];const e=this.drawingOrder.indexOf(r);e!==-1&&this.drawingOrder.splice(e,1)}})}reorderDrawers(i){this.drawingOrder=o(this.drawingOrder,i)}}export class DynamicDrawerType{static paneResizer(i){return`PANE_RESIZER_${i}`}}
+import { EVENT_DRAW } from '../events/events';
+import { MIN_SUPPORTED_CANVAS_SIZE } from '../model/canvas.model';
+import { arrayIntersect, reorderArray } from '../utils/array.utils';
+import { animationFrameThrottled } from '../utils/performance/request-animation-frame-throttle.utils';
+import { uuid } from '../utils/uuid.utils';
+export const HIT_TEST_PREFIX = 'HIT_TEST_';
+const drawerTypes = [
+    'MAIN_BACKGROUND',
+    'MAIN_CLEAR',
+    'HIT_TEST_CLEAR',
+    'YAXIS_CLEAR',
+    'SERIES_CLEAR',
+    'OVER_SERIES_CLEAR',
+    'HIT_TEST_DRAWINGS',
+    'GRID',
+    'UNDERLAY_VOLUMES_AREA',
+    'X_AXIS',
+    'Y_AXIS',
+    'HIGH_LOW',
+    'DYNAMIC_OBJECTS',
+    'N_MAP_CHART',
+    'PL_CHART',
+    'WATERMARK',
+    'EMPTY_CHART',
+    'OFFLINE_CHART',
+    'LABELS',
+    'EVENTS',
+    'HIT_TEST_EVENTS',
+    'ZERO_LINE',
+    'PL_ZERO_LINE_BACKGROUND',
+    'CROSS_TOOL',
+];
+/**
+ * Manages the drawing process.
+ * Can re-order drawers to make one be on top of the other.
+ */
+export class DrawingManager {
+    constructor(eventBus, chartResizeHandler) {
+        this.chartResizeHandler = chartResizeHandler;
+        this.drawingOrder = [];
+        this.drawersMap = {};
+        this.canvasIdsList = [];
+        this.animFrameId = `draw_${uuid()}`;
+        // eventBus.on(EVENT_DRAW_LAST_CANDLE, () => animationFrameThrottled(this.animFrameId + 'last', () => this.drawLastBar()));
+        this.drawHitTestCanvas = () => {
+            this.drawingOrder.forEach(drawer => {
+                if (drawer.indexOf(HIT_TEST_PREFIX) !== -1) {
+                    this.drawersMap[drawer].draw();
+                }
+            });
+        };
+        eventBus.on(EVENT_DRAW, (canvasIds) => {
+            if (chartResizeHandler.wasResized()) {
+                // if we fire bus.fireDraw() without arguments(undefined) we need to keep canvasIdsList empty
+                if (this.canvasIdsList) {
+                    if (canvasIds && canvasIds.length !== 0) {
+                        this.canvasIdsList = this.canvasIdsList.concat(canvasIds);
+                    }
+                    else {
+                        // make this undefined until the end of frame - this will redraw everything
+                        this.canvasIdsList = undefined;
+                    }
+                }
+                animationFrameThrottled(this.animFrameId, () => {
+                    this.forceDraw(this.canvasIdsList);
+                    this.canvasIdsList = [];
+                    this.drawHitTestCanvas();
+                });
+            }
+        });
+    }
+    /**
+     * Updates canvases' sizes and executes redraw without animation frame.
+     * This is required for multi-chart canvas update synchronization.
+     * If all canvases update in separate animation frames - we see visual lag. Instead we should do all updates and then redraw.
+     * @doc-tags tricky,canvas,resize
+     */
+    redrawCanvasesImmediate() {
+        this.chartResizeHandler.fireUpdates();
+        this.forceDraw();
+    }
+    drawLastBar() {
+        this.drawingOrder.forEach(drawerName => {
+            if (drawerName.indexOf(HIT_TEST_PREFIX) === -1) {
+                const drawer = this.drawersMap[drawerName];
+                drawer.drawLastBar && drawer.drawLastBar();
+            }
+        });
+    }
+    forceDraw(canvasIds) {
+        if (!this.isDrawable()) {
+            return;
+        }
+        this.drawingOrder.forEach(drawerName => {
+            if (drawerName.indexOf(HIT_TEST_PREFIX) === -1) {
+                const drawer = this.drawersMap[drawerName];
+                // draw if not canvas specified
+                if (!canvasIds || canvasIds.length === 0) {
+                    drawer.draw();
+                    return;
+                }
+                // draw if at least 1 canvas is touched (intersection)
+                if (arrayIntersect(canvasIds, drawer.getCanvasIds()).length) {
+                    drawer.draw();
+                }
+            }
+        });
+    }
+    /**
+     * Indicates whether it is possible to draw chart or not.
+     * @returns {boolean} true if chart is drawable
+     */
+    isDrawable() {
+        var _a, _b, _c, _d;
+        return (((_b = (_a = this.chartResizeHandler.previousBCR) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0) > MIN_SUPPORTED_CANVAS_SIZE.width &&
+            ((_d = (_c = this.chartResizeHandler.previousBCR) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0) > MIN_SUPPORTED_CANVAS_SIZE.height);
+    }
+    drawHitTestOnly() {
+        this.drawHitTestCanvas();
+    }
+    addDrawer(drawer, name = uuid()) {
+        this.drawingOrder.indexOf(name) === -1 && this.drawingOrder.push(name);
+        this.drawersMap[name] = drawer;
+    }
+    addDrawerAfter(drawer, newDrawerName, drawerToPutAfterName) {
+        this.addDrawer(drawer, newDrawerName);
+        const newDrawerIdx = this.drawingOrder.indexOf(newDrawerName);
+        this.drawingOrder.splice(newDrawerIdx, 1);
+        const idx = this.drawingOrder.indexOf(drawerToPutAfterName);
+        this.drawingOrder.splice(idx + 1, 0, newDrawerName);
+        this.reorderDrawers(this.drawingOrder);
+    }
+    addDrawerBefore(drawer, newDrawerName, drawerToPutBeforeName) {
+        this.addDrawer(drawer, newDrawerName);
+        const idx = this.drawingOrder.indexOf(drawerToPutBeforeName);
+        if (idx !== -1) {
+            const newDrawerIdx = this.drawingOrder.indexOf(newDrawerName);
+            this.drawingOrder.splice(newDrawerIdx, 1);
+            this.drawingOrder.splice(idx, 0, newDrawerName);
+            this.reorderDrawers(this.drawingOrder);
+            return true;
+        }
+        return false;
+    }
+    getDrawerByName(name) {
+        return this.drawersMap[name];
+    }
+    getNameByDrawer(drawer) {
+        for (const drawerName in this.drawersMap) {
+            if (this.drawersMap[drawerName] === drawer) {
+                return drawerName;
+            }
+        }
+    }
+    removeDrawerByName(name) {
+        const drawer = this.drawersMap[name];
+        this.removeDrawer(drawer);
+    }
+    removeDrawer(drawer) {
+        Object.keys(this.drawersMap).forEach(name => {
+            if (this.drawersMap[name] === drawer) {
+                delete this.drawersMap[name];
+                const drawerIdx = this.drawingOrder.indexOf(name);
+                drawerIdx !== -1 && this.drawingOrder.splice(drawerIdx, 1);
+            }
+        });
+    }
+    reorderDrawers(newOrder) {
+        this.drawingOrder = reorderArray(this.drawingOrder, newOrder);
+    }
+}
+// use this to create dynamic names
+export class DynamicDrawerType {
+    static paneResizer(id) {
+        return `PANE_RESIZER_${id}`;
+    }
+}

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

@@ -3,4 +3,40 @@
  * 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{flatMap as s}from"../utils/array.utils";import{clipToBounds as n}from"./data-series.drawer";export class HTDataSeriesDrawer{constructor(o,a,t){this.seriesDrawers=o,this.canvasModel=a,this.paneManager=t}draw(){const o=this.canvasModel.ctx;s(Object.values(this.paneManager.paneComponents),a=>a.yExtentComponents).forEach(a=>{o.save(),n(o,a.getBounds()),a.dataSeries.forEach(t=>this.drawSeries(o,t)),o.restore()})}drawSeries(o,a){if(a.config.visible){const t=a.config.type,e=this.seriesDrawers[t];if(e){const r={singleColor:this.canvasModel.idToColor(a.id),forceBold:7};e.draw(o,a.getSeriesInViewport(a.scaleModel.xStart-1,a.scaleModel.xEnd+1),a,r)}}}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { clipToBounds } from './data-series.drawer';
+/***
+ * HitTest Chart drawer. It's used to draw hit test for chart types on the hit-test canvas.
+ */
+export class HTDataSeriesDrawer {
+    constructor(seriesDrawers, canvasModel, paneManager) {
+        this.seriesDrawers = seriesDrawers;
+        this.canvasModel = canvasModel;
+        this.paneManager = paneManager;
+    }
+    draw() {
+        const ctx = this.canvasModel.ctx;
+        this.paneManager.yExtents.forEach(comp => {
+            ctx.save();
+            clipToBounds(ctx, comp.getBounds());
+            comp.dataSeries.forEach(series => this.drawSeries(ctx, series));
+            ctx.restore();
+        });
+    }
+    drawSeries(ctx, series) {
+        if (series.config.visible) {
+            const paintTool = series.config.type;
+            const drawer = this.seriesDrawers[paintTool];
+            if (drawer) {
+                const drawConfig = {
+                    singleColor: this.canvasModel.idToColor(series.id),
+                    forceBold: 7,
+                };
+                // +- 1 to correctly draw points which are partly inside bounds
+                drawer.draw(ctx, series.getSeriesInViewport(series.scale.xStart - 1, series.scale.xEnd + 1), series, drawConfig);
+            }
+        }
+    }
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

package/dist/chart/events/event-bus.js

@@ -3,4 +3,76 @@
  * 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{Subject as h}from"rxjs";import{arrayRemove as r}from"../utils/array.utils";import{EVENT_DRAW as u}from"./events";export default class d{constructor(){this.UNKNOWN_ARR=[],this.handlers={},this.muted=!1,this.unsub=(t,s)=>{const i=this.handlers[t];i!==void 0&&r.call(i,s)},this.add=(t,s,i)=>(s in this.handlers?t.call(this.handlers[s],i):this.handlers[s]=[i],this.unsub.bind(this,s,i)),this.on=(t,s)=>this.add(this.UNKNOWN_ARR.push,t,s),this.observe=t=>{const s=new h,i=s.next.bind(s),n=s.unsubscribe.bind(s);return this.on(t,i),s.unsubscribe=()=>{this.unsub(t,i),n()},s.asObservable()},this.onPrior=(t,s)=>this.add(this.UNKNOWN_ARR.unshift,t,s),this.off=this.unsub,this.fire=(t,...s)=>{var i;if(!this.muted){const n=(i=this.handlers[t])!==null&&i!==void 0?i:[];let e;for(e=0,n.length;e<n.length;e++)n[e].apply(null,s)}},this.fireAsync=(t,s)=>{if(!this.muted)return window.setTimeout(this.fire.bind(this,t,s),0)},this.setMuted=t=>{this.muted=t},this.clear=()=>{this.handlers={}}}fireDraw(t){this.fire(u,t)}}
+import { Subject } from 'rxjs';
+import { arrayRemove } from '../utils/array.utils';
+import { EVENT_DRAW } from './events';
+/**
+ * Event bus for chart.
+ * @doc-tags core-components
+ */
+export default class EventBus {
+    constructor() {
+        this.UNKNOWN_ARR = [];
+        /** Registered event handlers. */
+        this.handlers = {};
+        /** State which can enable / disable events processing. */
+        this.muted = false;
+        this.unsub = (type, fn) => {
+            const handler = this.handlers[type];
+            handler !== undefined && arrayRemove.call(handler, fn);
+        };
+        this.add = (method, type, fn) => {
+            if (type in this.handlers) {
+                method.call(this.handlers[type], fn);
+            }
+            else {
+                this.handlers[type] = [fn];
+            }
+            return this.unsub.bind(this, type, fn);
+        };
+        this.on = (type, fn) => this.add(this.UNKNOWN_ARR.push, type, fn);
+        this.observe = (type) => {
+            const result = new Subject();
+            const subjectFn = result.next.bind(result);
+            const originalUnsubscribe = result.unsubscribe.bind(result);
+            this.on(type, subjectFn);
+            result.unsubscribe = () => {
+                this.unsub(type, subjectFn);
+                originalUnsubscribe();
+            };
+            return result.asObservable();
+        };
+        this.onPrior = (type, fn) => this.add(this.UNKNOWN_ARR.unshift, type, fn);
+        this.off = this.unsub;
+        this.fire = (type, ...args) => {
+            var _a;
+            if (!this.muted) {
+                const arr = (_a = this.handlers[type]) !== null && _a !== void 0 ? _a : [];
+                let i;
+                for (i = 0, arr.length; i < arr.length; i++) {
+                    // call each handler with arguments
+                    const fn = arr[i];
+                    fn.apply(null, args);
+                }
+            }
+        };
+        this.fireAsync = (type, event) => {
+            if (!this.muted) {
+                return window.setTimeout(this.fire.bind(this, type, event), 0);
+            }
+        };
+        this.setMuted = (val) => {
+            this.muted = val;
+        };
+        this.clear = () => {
+            this.handlers = {};
+        };
+    }
+    /**
+     * Triggers the draw event for the specified canvas IDs.
+     * @param {Array<string>} canvasIds - An optional array of canvas IDs to trigger the draw event for.
+     */
+    fireDraw(canvasIds) {
+        this.fire(EVENT_DRAW, canvasIds);
+    }
+}

package/dist/chart/events/events.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 const EVENT_RESIZED="resized_local",EVENT_DRAW="draw",EVENT_DRAW_LAST_CANDLE="draw_last_candle";
+export const EVENT_RESIZED = 'resized_local';
+export const EVENT_DRAW = 'draw';
+export const EVENT_DRAW_LAST_CANDLE = 'draw_last_candle';

package/dist/chart/inputhandlers/candle-tap.handler.js

@@ -3,4 +3,49 @@
  * 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{ChartBaseElement as i}from"../model/chart-base-element";import{map as l,distinctUntilChanged as r}from"rxjs/operators";export class CandleTapHandler extends i{constructor(t,c,e,n){super(),e.observeTouchStart().pipe(l(o=>n.components.chart.highlightActiveCandle?o:void 0),r()).subscribe(o=>{o&&this.setCandleAsActive(o,t,c)})}setCandleAsActive(t,c,e){if(t.touches.length===1){const n=t.touches.item(0);if(n!==null){const o=this.getTouchXPosition(n,c),s=e.candleFromX(o);s&&e.mainCandleSeries.setActiveCandle(s)}}}getTouchXPosition(t,c){const e=c.getBoundingClientRect(),n=document.body.scrollLeft||document.documentElement.scrollLeft;return t.pageX-e.left-n}}
+import { ChartBaseElement } from '../model/chart-base-element';
+import { map, distinctUntilChanged } from 'rxjs/operators';
+export class CandleTapHandler extends ChartBaseElement {
+    constructor(mainCanvasParent, chartModel, canvasInputListeners, config) {
+        super();
+        canvasInputListeners
+            .observeTouchStart()
+            .pipe(map(e => (config.components.chart.highlightActiveCandle ? e : undefined)), distinctUntilChanged())
+            .subscribe(e => {
+            if (e) {
+                this.setCandleAsActive(e, mainCanvasParent, chartModel);
+            }
+        });
+    }
+    /**
+     * Sets the candle as active when a touch event occurs on the chart.
+     * @param {TouchEvent} e - The touch event that occurred on the chart.
+     * @param {Element} mainCanvasParent - The parent element of the main canvas.
+     * @param {ChartModel} chartModel - The chart model object.
+     */
+    setCandleAsActive(e, mainCanvasParent, chartModel) {
+        if (e.touches.length === 1) {
+            const touch = e.touches.item(0);
+            if (touch !== null) {
+                const xTouchPosition = this.getTouchXPosition(touch, mainCanvasParent);
+                const candle = chartModel.candleFromX(xTouchPosition);
+                if (candle) {
+                    chartModel.mainCandleSeries.setActiveCandle(candle);
+                }
+            }
+        }
+    }
+    // TO DO: check if this body calculations can potentially works wrong in widget
+    /**
+     * Calculates the X position of a touch event relative to the main canvas parent element.
+     * @param {Touch} touch - The touch event object.
+     * @param {Element} mainCanvasParent - The parent element of the main canvas.
+     * @returns {number} - The X position of the touch event relative to the main canvas parent element.
+     * @todo Check if this body calculations can potentially work incorrectly in the widget.
+     */
+    getTouchXPosition(touch, mainCanvasParent) {
+        const rect = mainCanvasParent.getBoundingClientRect();
+        const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
+        return touch.pageX - rect.left - scrollLeft;
+    }
+}