@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,4 +3,281 @@
  * 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{distinctUntilChanged as E}from"rxjs/operators";import{areBoundsChanged as B,CanvasElement as d}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as A}from"../../model/chart-base-element";import{defaultValueFormatter as Y}from"../../model/data-series.model";import{SyncedByXScaleModel as w}from"../../model/scale.model";import{firstOf as D,flatMap as y,lastOf as P}from"../../utils/array.utils";import{cloneUnsafe as _}from"../../utils/object.utils";import{createCandlesOffsetProvider as S}from"../chart/data-series.high-low-provider";import{GridComponent as b}from"../grid/grid.component";import{NumericYAxisLabelsGenerator as U}from"../y_axis/numeric-y-axis-labels.generator";import{YAxisScaleHandler as M}from"../y_axis/y-axis-scale.handler";import{YAxisDrawer as H}from"../y_axis/y-axis.drawer";import{createDefaultYExtentHighLowProvider as I,YExtentComponent as N}from"./extent/y-extent-component";import{YAxisBaseLabelsModel as L}from"../y_axis/y-axis-base-labels.model";export class PaneComponent extends A{get scaleModel(){return this.mainYExtentComponent.scaleModel}get dataSeries(){return y(this.yExtentComponents,t=>Array.from(t.dataSeries))}constructor(t,e,n,u,m,a,r,i,l,o,h,c,v,s,p,C){super(),this.chartBaseModel=t,this.hitTestController=e,this.config=n,this.mainScaleModel=u,this.drawingManager=m,this.chartPanComponent=a,this.mainCanvasModel=r,this.canvasInputListener=i,this.userInputListenerComponents=l,this.canvasAnimation=o,this.cursorHandler=h,this.eventBus=c,this.canvasBoundsContainer=v,this.uuid=s,this.dataSeriesCanvasModel=p,this._paneOrder=0,this.yExtentComponents=[],this.getYAxisBounds=()=>this.canvasBoundsContainer.getBounds(d.PANE_UUID_Y_AXIS(this.uuid)),this.valueFormatter=(x,f)=>this.mainYExtentComponent.valueFormatter(x,f);const g=this.createExtentComponent(C);this.mainYExtentComponent=g,this.ht=this.canvasBoundsContainer.getBoundsHitTest(d.PANE_UUID(s),{extensionY:-this.config.components.paneResizer.dragZone})}doActivate(){super.doActivate(),this.addRxSubscription(this.canvasBoundsContainer.observeBoundsChanged(d.PANE_UUID(this.uuid)).pipe(E(B)).subscribe(()=>{this.yExtentComponents.forEach(t=>t.scaleModel.recalculateZoomY()),this.dataSeriesCanvasModel.fireDraw()}))}createYAxisComponent(t,e,n,u,m){const a=_(this.config.components.yAxis),r=new U(m,void 0,n,u,()=>"regular",()=>1,a.labelHeight),i=d.PANE_UUID_Y_AXIS(t,e),l=new H(this.config,a,this.mainCanvasModel,()=>r.generateNumericLabels(),()=>this.canvasBoundsContainer.getBounds(i),()=>this.config.components.yAxis.visible,n.toY.bind(n));this.drawingManager.addDrawerAfter(l,i,"Y_AXIS"),a.type="regular";const o=new M(this.eventBus,a,this.chartPanComponent,n,this.canvasInputListener,this.canvasBoundsContainer,this.canvasBoundsContainer.getBoundsHitTest(i),c=>n.autoScale(c)),h=new L(n,r,this.canvasBoundsContainer);return h.activate(),this.userInputListenerComponents.push(o),{labelsGenerator:r,drawer:l,yAxisScaleHandler:o,state:this.config.components.yAxis,unsub:()=>{this.drawingManager.removeDrawerByName(i),h.disable()}}}createGridComponent(t,e,n){return new b(this.mainCanvasModel,e,this.config,`PANE_${t}_grid_drawer`,this.drawingManager,()=>this.canvasBoundsContainer.getBounds(d.PANE_UUID(t)),()=>this.canvasBoundsContainer.getBounds(d.PANE_UUID(t)),()=>[],()=>n.generateNumericLabels())}createYPanHandler(t,e){const n=this.chartPanComponent.chartAreaPanHandler.registerChartYPanHandler(e,this.canvasBoundsContainer.getBoundsHitTest(d.PANE_UUID(t)));return[()=>{this.chartPanComponent.chartAreaPanHandler.removeChildEntity(n),n.disable()},n]}addCursors(t){const e=d.PANE_UUID_Y_AXIS(this.uuid,t);return this.cursorHandler.setCursorForCanvasEl(e,this.config.components.yAxis.cursor),()=>this.cursorHandler.removeCursorForCanvasEl(e)}createExtentComponent(t){var e,n,u,m,a,r;const i=this.yExtentComponents.length,l=()=>this.canvasBoundsContainer.getBounds(d.PANE_UUID(this.uuid)),o=(e=t==null?void 0:t.scaleModel)!==null&&e!==void 0?e:new w(this.mainScaleModel,this.config,l,this.canvasAnimation),h=!((n=t==null?void 0:t.useDefaultYAxis)!==null&&n!==void 0)||n?this.createYAxisComponent(this.uuid,i,o,(m=(u=t==null?void 0:t.paneFormatters)===null||u===void 0?void 0:u.regular)!==null&&m!==void 0?m:Y,(a=t==null?void 0:t.increment)!==null&&a!==void 0?a:null):void 0,[c,v]=this.createYPanHandler(this.uuid,o),s=new N(this.uuid,i,this,this.chartBaseModel,this.canvasBoundsContainer,this.hitTestController,this.dataSeriesCanvasModel,o,h,v);if(s.addSubscription(c),s.addSubscription(this.addCursors(i)),t!=null&&t.paneFormatters&&s.setValueFormatters(t.paneFormatters),((r=t==null?void 0:t.useDefaultHighLow)!==null&&r!==void 0?r:!0)&&o.autoScaleModel.setHighLowProvider("default",S(()=>({top:10,bottom:10,left:0,right:0,visible:!0}),I(s))),h){const C=this.createGridComponent(this.uuid,o,h.labelsGenerator);s.addChildEntity(C)}return s.activate(),this.yExtentComponents.push(s),this.canvasBoundsContainer.updateYAxisWidths(),s}removeExtentComponent(t){t.disable(),this.yExtentComponents.splice(t.idx,1),this.yExtentComponents.forEach((e,n)=>e.idx=n),this.canvasBoundsContainer.updateYAxisWidths()}updateView(){this.yExtentComponents.forEach(t=>{var e;t.scaleModel.doAutoScale(),(e=t.yAxisComponent)===null||e===void 0||e.labelsGenerator.generateNumericLabels()}),this.canvasBoundsContainer.updateYAxisWidths(),this.eventBus.fireDraw()}mergeYExtents(){for(let t=1;t<this.yExtentComponents.length;t++){const e=this.yExtentComponents[t];e.dataSeries.forEach(n=>n.moveToExtent(this.mainYExtentComponent)),e.disable()}this.canvasBoundsContainer.updateYAxisWidths(),this.yExtentComponents=[this.mainYExtentComponent]}getBounds(){return this.mainYExtentComponent.getBounds()}hide(){this._paneOrder=this.canvasBoundsContainer.panesOrder.indexOf(this.uuid),this.canvasBoundsContainer.removedPaneBounds(this.uuid),this.eventBus.fireDraw()}show(){this.canvasBoundsContainer.addPaneBounds(this.uuid,this._paneOrder),this.eventBus.fireDraw()}createDataSeries(){var t;return(t=this.mainYExtentComponent)===null||t===void 0?void 0:t.createDataSeries()}addDataSeries(t){this.mainYExtentComponent.addDataSeries(t),this.updateView()}removeDataSeries(t){this.mainYExtentComponent.removeDataSeries(t),this.updateView()}getAxisType(){return"regular"}moveUp(){this.canvasBoundsContainer.movePaneUp(this.uuid)}moveDown(){this.canvasBoundsContainer.movePaneDown(this.uuid)}canMoveUp(){const t=D(this.canvasBoundsContainer.panesOrder);return this.uuid!==t}canMoveDown(){const t=P(this.canvasBoundsContainer.panesOrder);return this.uuid!==t}get regularFormatter(){return this.mainYExtentComponent.formatters.regular}setPaneValueFormatters(t){this.mainYExtentComponent.setValueFormatters(t)}regularValueFromY(t){return this.mainYExtentComponent.regularValueFromY(t)}}
+import { distinctUntilChanged } from 'rxjs/operators';
+import { areBoundsChanged, CanvasElement, } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { SyncedByXScaleModel } from '../../model/scale.model';
+import { firstOf, flatMap, lastOf } from '../../utils/array.utils';
+import { createCandlesOffsetProvider } from '../chart/data-series.high-low-provider';
+import { GridComponent } from '../grid/grid.component';
+import { YAxisComponent } from '../y_axis/y-axis.component';
+import { createDefaultYExtentHighLowProvider, YExtentComponent, } from './extent/y-extent-component';
+export class PaneComponent extends ChartBaseElement {
+    get scale() {
+        return this.mainExtent.scale;
+    }
+    get yAxis() {
+        return this.mainExtent.yAxis;
+    }
+    get dataSeries() {
+        return flatMap(this.yExtentComponents, c => Array.from(c.dataSeries));
+    }
+    constructor(chartBaseModel, mainCanvasModel, yAxisLabelsCanvasModel, dynamicObjectsCanvasModel, hitTestController, config, mainScale, drawingManager, chartPanComponent, canvasInputListener, canvasAnimation, cursorHandler, eventBus, canvasBoundsContainer, uuid, seriesAddedSubject, seriesRemovedSubject, options) {
+        super();
+        this.chartBaseModel = chartBaseModel;
+        this.mainCanvasModel = mainCanvasModel;
+        this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
+        this.dynamicObjectsCanvasModel = dynamicObjectsCanvasModel;
+        this.hitTestController = hitTestController;
+        this.config = config;
+        this.mainScale = mainScale;
+        this.drawingManager = drawingManager;
+        this.chartPanComponent = chartPanComponent;
+        this.canvasInputListener = canvasInputListener;
+        this.canvasAnimation = canvasAnimation;
+        this.cursorHandler = cursorHandler;
+        this.eventBus = eventBus;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.uuid = uuid;
+        this.seriesAddedSubject = seriesAddedSubject;
+        this.seriesRemovedSubject = seriesRemovedSubject;
+        this._paneOrder = 0;
+        this.yExtentComponents = [];
+        this.getYAxisBounds = () => {
+            return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.uuid));
+        };
+        this.valueFormatter = (value, dataSeries) => {
+            return this.mainExtent.valueFormatter(value, dataSeries);
+        };
+        const yExtentComponent = this.createExtentComponent(options);
+        this.mainExtent = yExtentComponent;
+        this.ht = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID(uuid), {
+            // this is needed to reduce cross event fire zone, so cross event won't be fired when hover resizer
+            // maybe we need to rework it, this isn't perfect - top and bottom panes will have small no-hover area
+            extensionY: -this.config.components.paneResizer.dragZone,
+        });
+    }
+    /**
+     * Method that activates the canvas bounds container and recalculates the zoom Y of the scale model.
+     * @protected
+     * @function
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(this.canvasBoundsContainer
+            .observeBoundsChanged(CanvasElement.PANE_UUID(this.uuid))
+            .pipe(distinctUntilChanged(areBoundsChanged))
+            .subscribe(() => {
+            this.yExtentComponents.forEach(c => c.scale.recalculateZoomY());
+            this.dynamicObjectsCanvasModel.fireDraw();
+        }));
+    }
+    toY(price) {
+        var _a, _b;
+        return (_b = (_a = this.mainExtent.mainDataSeries) === null || _a === void 0 ? void 0 : _a.view.toY(price)) !== null && _b !== void 0 ? _b : this.scale.toY(price);
+    }
+    /**
+     * Creates a new GridComponent instance with the provided parameters.
+     * @param {string} uuid - The unique identifier of the pane.
+     * @param {ScaleModel} scaleModel - The scale model used to calculate the scale of the grid.
+     * @param {NumericYAxisLabelsGenerator} yAxisLabelsGenerator - The generator used to create the labels for the y-axis.
+     * @returns {GridComponent} - The newly created GridComponent instance.
+     */
+    createGridComponent(uuid, scale, yAxisLabelsGenerator, yAxisState) {
+        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(uuid)), () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(uuid)), () => [], () => yAxisLabelsGenerator.generateNumericLabels());
+        return gridComponent;
+    }
+    /**
+     * Creates a handler for Y-axis panning of the chart.
+     * @private
+     * @param {string} uuid - The unique identifier of the chart pane.
+     * @param {ScaleModel} scaleModel - The scale model of the chart.
+     * @returns {Unsubscriber}
+     */
+    createYPanHandler(uuid, scale) {
+        const dragNDropComponent = this.chartPanComponent.chartAreaPanHandler.registerChartYPanHandler(scale, this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID(uuid)));
+        return [
+            () => {
+                this.chartPanComponent.chartAreaPanHandler.removeChildEntity(dragNDropComponent);
+                dragNDropComponent.disable();
+            },
+            dragNDropComponent,
+        ];
+    }
+    addCursors(extentIdx, yAxisComponent) {
+        const paneYAxis = CanvasElement.PANE_UUID_Y_AXIS(this.uuid, extentIdx);
+        this.cursorHandler.setCursorForCanvasEl(paneYAxis, yAxisComponent.state.cursor);
+        return () => this.cursorHandler.removeCursorForCanvasEl(paneYAxis);
+    }
+    createExtentComponent(options) {
+        var _a, _b;
+        const extentIdx = this.yExtentComponents.length;
+        const getBounds = () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(this.uuid));
+        const scaleModel = (_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : new SyncedByXScaleModel(this.mainScale, this.config, getBounds, this.canvasAnimation);
+        const [unsub, dragNDrop] = this.createYPanHandler(this.uuid, scaleModel);
+        // creating partially resolved constructor except formatter & dataSeriesProvider - bcs it's not possible to provide formatter
+        // before y-extent is created
+        const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx);
+        const yExtentComponent = new YExtentComponent(this.uuid, extentIdx, this, this.chartBaseModel, this.canvasBoundsContainer, this.hitTestController, this.dynamicObjectsCanvasModel, scaleModel, createYAxisComponent, dragNDrop);
+        yExtentComponent.addSubscription(unsub);
+        yExtentComponent.addSubscription(this.addCursors(extentIdx, yExtentComponent.yAxis));
+        (options === null || options === void 0 ? void 0 : options.paneFormatters) && yExtentComponent.setValueFormatters(options.paneFormatters);
+        const useDefaultHighLow = (_b = options === null || options === void 0 ? void 0 : options.useDefaultHighLow) !== null && _b !== void 0 ? _b : true;
+        if (useDefaultHighLow) {
+            scaleModel.autoScaleModel.setHighLowProvider('default', createCandlesOffsetProvider(() => ({ top: 10, bottom: 10, left: 0, right: 0, visible: true }), createDefaultYExtentHighLowProvider(yExtentComponent)));
+        }
+        const gridComponent = this.createGridComponent(this.uuid, scaleModel, yExtentComponent.yAxis.model.labelsGenerator, yExtentComponent.yAxis.state);
+        yExtentComponent.addChildEntity(gridComponent);
+        yExtentComponent.activate();
+        this.yExtentComponents.push(yExtentComponent);
+        this.canvasBoundsContainer.updateYAxisWidths();
+        return yExtentComponent;
+    }
+    removeExtentComponent(extentComponent) {
+        extentComponent.disable();
+        this.yExtentComponents.splice(extentComponent.idx, 1);
+        // re-index extents
+        this.yExtentComponents.forEach((c, idx) => (c.idx = idx));
+        this.canvasBoundsContainer.updateYAxisWidths();
+    }
+    /**
+     * This method updates the view by calling the doAutoScale method of the scaleModel and firing the Draw event using the eventBus.
+     * @private
+     */
+    updateView() {
+        this.yExtentComponents.forEach(c => {
+            c.scale.doAutoScale();
+            c.yAxis.model.labelsGenerator.generateNumericLabels();
+        });
+        this.canvasBoundsContainer.updateYAxisWidths();
+        this.eventBus.fireDraw();
+    }
+    /**
+     * Merges all the y-axis extents on the pane into one.
+     */
+    mergeYExtents() {
+        for (let i = 1; i < this.yExtentComponents.length; i++) {
+            const extent = this.yExtentComponents[i];
+            extent.dataSeries.forEach(s => s.moveToExtent(this.mainExtent));
+            extent.disable();
+        }
+        this.canvasBoundsContainer.updateYAxisWidths();
+        this.yExtentComponents = [this.mainExtent];
+    }
+    /**
+     * Returns the bounds of the pane component.
+     */
+    getBounds() {
+        return this.mainExtent.getBounds();
+    }
+    /**
+     * Hides the pane by removing its bounds from the canvasBoundsContainer and firing a draw event.
+     * @function
+     * @name hide
+     * @memberof PaneComponent
+     * @returns {void}
+     */
+    hide() {
+        this._paneOrder = this.canvasBoundsContainer.panesOrder.indexOf(this.uuid);
+        this.canvasBoundsContainer.removedPaneBounds(this.uuid);
+        this.eventBus.fireDraw();
+    }
+    /**
+     * Adds the bounds of the pane to the canvas bounds container and fires a draw event.
+     * @function
+     * @name show
+     * @memberof PaneComponent
+     * @returns {void}
+     */
+    show() {
+        this.canvasBoundsContainer.addPaneBounds(this.uuid, this._paneOrder);
+        this.eventBus.fireDraw();
+    }
+    /**
+     * Creates a new DataSeriesModel object.
+     * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
+     */
+    createDataSeries() {
+        var _a;
+        return (_a = this.mainExtent) === null || _a === void 0 ? void 0 : _a.createDataSeries();
+    }
+    /**
+     * Adds a new data series to the chart.
+     * @param {DataSeriesModel} series - The data series to be added.
+     * @returns {void}
+     */
+    addDataSeries(series) {
+        this.mainExtent.addDataSeries(series);
+        this.updateView();
+    }
+    /**
+     * Removes a data series from the chart.
+     *
+     * @param {DataSeriesModel} series - The data series to be removed.
+     * @returns {void}
+     */
+    removeDataSeries(series) {
+        this.mainExtent.removeDataSeries(series);
+        this.updateView();
+    }
+    // TODO hack, remove when each pane will have separate y-axis component
+    /**
+     * Returns the type of the y-axis component for the current pane.
+     *
+     * @returns {PriceAxisType} The 'regular' type of the y-axis component for the current pane.
+     *
+     */
+    getAxisType() {
+        return 'regular';
+    }
+    /**
+     * Moves the canvas bounds container up by calling the movePaneUp method with the uuid of the current object.
+     * @returns {void}
+     */
+    moveUp() {
+        this.canvasBoundsContainer.movePaneUp(this.uuid);
+    }
+    /**
+     * Moves the canvas bounds container down by calling the movePaneDown method with the uuid of the current object.
+     * @returns {void}
+     */
+    moveDown() {
+        this.canvasBoundsContainer.movePaneDown(this.uuid);
+    }
+    /**
+     * Checks if the current pane can move up.
+     * @returns {boolean} - Returns true if the current pane can move up, otherwise false.
+     */
+    canMoveUp() {
+        const firstPane = firstOf(this.canvasBoundsContainer.panesOrder);
+        return this.uuid !== firstPane;
+    }
+    /**
+     * Checks if the current pane can move down.
+     *
+     * @returns {boolean} - Returns true if the current pane is not the last one in the canvasBoundsContainer, otherwise returns false.
+     */
+    canMoveDown() {
+        const lastPane = lastOf(this.canvasBoundsContainer.panesOrder);
+        return this.uuid !== lastPane;
+    }
+    get regularFormatter() {
+        return this.mainExtent.formatters.regular;
+    }
+    /**
+     * Sets the pane value formatters for the current instance.
+     * @param {YExtentFormatters} formatters - The pane value formatters to be set.
+     */
+    setPaneValueFormatters(formatters) {
+        this.mainExtent.setValueFormatters(formatters);
+    }
+    /**
+     * Returns the regular value from Y coordinate.
+     * @param {number} y - The Y coordinate.
+     * @returns {number} - The regular value.
+     */
+    regularValueFromY(y) {
+        return this.mainExtent.regularValueFromY(y);
+    }
+}

package/dist/chart/components/resizer/bar-resizer.component.js

@@ -3,4 +3,142 @@
  * 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 v}from"rxjs";import{distinctUntilChanged as f,skip as u,startWith as C}from"rxjs/operators";import{DynamicDrawerType as s}from"../../drawers/drawing-manager";import{ChartBaseElement as b}from"../../model/chart-base-element";import{DragNDropYComponent as D}from"../dran-n-drop_helper/drag-n-drop-y.component";import{BarResizerDrawer as A}from"./bar-resizer.drawer";export class BarResizerComponent extends b{constructor(t,i,n,a,o,e,r,h,d,c,m){super(),this.id=t,this.boundsProvider=i,this.hitTest=n,this.dragTickCb=a,this.chartPanComponent=o,this.canvasModel=e,this.drawingManager=r,this.canvasInputListener=h,this.canvasAnimation=d,this.config=c,this.canvasBoundsContainer=m,this.initialY=0,this.resizeEvent$=new v,this.onYDragStart=()=>{this.config.components.crossTool.type="none",this.initialY=this.boundsProvider().y},this.onYDragEnd=()=>{this.config.components.crossTool.type="cross-and-labels",this.initialY=this.boundsProvider().y,this.canvasBoundsContainer.graphsHeightRatioChangedSubject.next(this.canvasBoundsContainer.graphsHeightRatio)},this.onYDragTick=g=>{const{delta:p,draggedPixels:l}=g;Math.abs(this.initialY-this.boundsProvider().y+l)>=0&&(this.dragTickCb(p),this.resizeEvent$.next())},this.animationId=`${this.id}_RESIZER`}doActivate(){if(super.doActivate(),!this.config.components.paneResizer.fixedMode){const n=new D(this.hitTest,{onDragTick:this.onYDragTick,onDragStart:this.onYDragStart,onDragEnd:this.onYDragEnd},this.canvasInputListener,this.chartPanComponent);this.addChildEntity(n),this.config.animation.paneResizer.enabled&&this.addRxSubscription(this.canvasInputListener.observeMouseEnter(this.hitTest,!0).pipe(C(!1),f(),u(1)).subscribe(a=>{a?this.handleHoverAnimation("appearing"):this.handleHoverAnimation("fading")}))}const i=new A(this.config,this.boundsProvider,this.canvasModel,this.canvasAnimation,this.animationId);this.drawingManager.addDrawer(i,s.paneResizer(this.id)),this.addSubscription(()=>this.drawingManager.removeDrawerByName(s.paneResizer(this.id)))}doDeactivate(){super.doDeactivate(),this.resizeEvent$.complete()}handleHoverAnimation(t){let i;this.config.animation.paneResizer.bgMode?(i=this.canvasAnimation.getColorAlphaAnimation(this.animationId),(!i||!i.animationInProgress)&&this.canvasAnimation.startColorAlphaAnimation(this.animationId,[{color:this.config.colors.paneResizer.bgHoverColor,type:t}])):(i=this.canvasAnimation.getColorTransitionAnimation(this.animationId),(!i||!i.animationInProgress)&&this.canvasAnimation.startColorTransitionAnimation(this.animationId,[{startColor:this.config.colors.paneResizer.bgColor,endColor:this.config.colors.paneResizer.bgHoverColor,type:t}],this.config.animation.paneResizer.duration)),i&&i.animationInProgress&&i.revert()}}
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, skip, startWith } from 'rxjs/operators';
+import { DynamicDrawerType } from '../../drawers/drawing-manager';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
+import { BarResizerDrawer } from './bar-resizer.drawer';
+/**
+ * Bar separator between panes.
+ * Used to resize the areas height or just draw a fixed line.
+ * Supports hover animation.
+ *
+ * @doc-tags chart-core,resizer
+ */
+export class BarResizerComponent extends ChartBaseElement {
+    constructor(id, boundsProvider, hitTest, dragTickCb, chartPanComponent, canvasModel, drawingManager, canvasInputListener, canvasAnimation, config, canvasBoundsContainer) {
+        super();
+        this.id = id;
+        this.boundsProvider = boundsProvider;
+        this.hitTest = hitTest;
+        this.dragTickCb = dragTickCb;
+        this.chartPanComponent = chartPanComponent;
+        this.canvasModel = canvasModel;
+        this.drawingManager = drawingManager;
+        this.canvasInputListener = canvasInputListener;
+        this.canvasAnimation = canvasAnimation;
+        this.config = config;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.initialY = 0;
+        this.resizeEvent$ = new Subject();
+        this.onYDragStart = () => {
+            this.config.components.crossTool.type = 'none';
+            this.initialY = this.boundsProvider().y;
+        };
+        this.onYDragEnd = () => {
+            this.config.components.crossTool.type = 'cross-and-labels';
+            this.initialY = this.boundsProvider().y;
+            this.canvasBoundsContainer.graphsHeightRatioChangedSubject.next(this.canvasBoundsContainer.graphsHeightRatio);
+        };
+        this.onYDragTick = (dragInfo) => {
+            const { delta: yDelta, draggedPixels } = dragInfo;
+            // in case cursor moves outside the bar - do not generate "tick"
+            if (Math.abs(this.initialY - this.boundsProvider().y + draggedPixels) >= 0) {
+                this.dragTickCb(yDelta);
+                this.resizeEvent$.next();
+            }
+        };
+        this.animationId = `${this.id}_RESIZER`;
+    }
+    /**
+     * This method activates the pane resizer component.
+     * It calls the parent class's doActivate method and then checks if the fixedMode property is set to false in the config object.
+     * If it is false, it creates a new DragNDropYComponent and adds it to the component list.
+     * It also adds a subscription to the canvasInputListener to observe mouse enter events and
+     * handle hover animations if the animation is enabled in the config object.
+     * Finally, it creates a new BarResizerDrawer and adds it to the drawing manager as a DynamicDrawerType.paneResizer with the current id.
+     * It also adds a subscription to remove the drawer when the component is deactivated.
+     * @protected
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+        const fixedMode = this.config.components.paneResizer.fixedMode;
+        if (!fixedMode) {
+            const dragNDropYComponent = new DragNDropYComponent(this.hitTest, {
+                onDragTick: this.onYDragTick,
+                onDragStart: this.onYDragStart,
+                onDragEnd: this.onYDragEnd,
+            }, this.canvasInputListener, this.chartPanComponent);
+            this.addChildEntity(dragNDropYComponent);
+            if (this.config.animation.paneResizer.enabled) {
+                this.addRxSubscription(this.canvasInputListener
+                    .observeMouseEnter(this.hitTest, true)
+                    .pipe(
+                // set initial pipe state to false, so animation will play for the first time only for appearing
+                startWith(false), distinctUntilChanged(), skip(1))
+                    .subscribe(enter => {
+                    if (enter) {
+                        this.handleHoverAnimation('appearing');
+                    }
+                    else {
+                        this.handleHoverAnimation('fading');
+                    }
+                }));
+            }
+        }
+        const barResizerDrawer = new BarResizerDrawer(this.config, this.boundsProvider, this.canvasModel, this.canvasAnimation, this.animationId);
+        this.drawingManager.addDrawer(barResizerDrawer, DynamicDrawerType.paneResizer(this.id));
+        this.addSubscription(() => this.drawingManager.removeDrawerByName(DynamicDrawerType.paneResizer(this.id)));
+    }
+    /**
+     * This method is called when the component is being deactivated.
+     * It calls the parent method doDeactivate() and then completes the resizeEvent$ observable.
+     * @protected
+     * @returns {void}
+     */
+    doDeactivate() {
+        super.doDeactivate();
+        this.resizeEvent$.complete();
+    }
+    /**
+     * This function handles the hover animation of a pane resizer. It takes a type parameter which can be either 'fading' or 'appearing'.
+     * If the background mode is enabled, it gets the color alpha animation from the canvasAnimation and starts the color alpha animation
+     * with the given animationId and the color and type provided in the parameter. If the background mode is not enabled, it gets the color transition
+     * animation from the canvasAnimation and starts the color transition animation with the given animationId, startColor, endColor and type
+     * provided in the parameter and the duration from the config. If there is an animation in progress, it reverts it.
+     *
+     * @param {string} type - The type of animation, can be either 'fading' or 'appearing'.
+     * @returns {void}
+     */
+    handleHoverAnimation(type) {
+        let animation;
+        if (this.config.animation.paneResizer.bgMode) {
+            animation = this.canvasAnimation.getColorAlphaAnimation(this.animationId);
+            if (!animation || !animation.animationInProgress) {
+                this.canvasAnimation.startColorAlphaAnimation(this.animationId, [
+                    {
+                        color: this.config.colors.paneResizer.bgHoverColor,
+                        type,
+                    },
+                ]);
+            }
+        }
+        else {
+            animation = this.canvasAnimation.getColorTransitionAnimation(this.animationId);
+            if (!animation || !animation.animationInProgress) {
+                this.canvasAnimation.startColorTransitionAnimation(this.animationId, [
+                    {
+                        startColor: this.config.colors.paneResizer.bgColor,
+                        endColor: this.config.colors.paneResizer.bgHoverColor,
+                        type,
+                    },
+                ], this.config.animation.paneResizer.duration);
+            }
+        }
+        if (animation && animation.animationInProgress) {
+            animation.revert();
+        }
+    }
+}

package/dist/chart/components/resizer/bar-resizer.drawer.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/.
  */
-export class BarResizerDrawer{constructor(o,i,e,n,t){this.config=o,this.boundsProvider=i,this.canvasModel=e,this.canvasAnimation=n,this.animationId=t}draw(){if(this.config.components.paneResizer.visible){const o=this.config.components.paneResizer.fixedMode,i=this.boundsProvider(),e=this.canvasModel.ctx,n=this.canvasAnimation.getColorAlphaAnimation(this.animationId),t=this.config.components.paneResizer.dragZone;!o&&n&&(e.fillStyle=n.getColor(0),e.fillRect(i.x,i.y-t,i.width,i.height+2*t)),e.fillStyle=this.config.colors.paneResizer.lineColor,this.config.animation.paneResizer.bgMode?e.fillRect(i.x,i.y,i.width,i.height):e.fillRect(i.x,i.y-t,i.width,i.height+2*t)}}getCanvasIds(){return[this.canvasModel.canvasId]}}
+export class BarResizerDrawer {
+    constructor(config, boundsProvider, canvasModel, canvasAnimation, animationId) {
+        this.config = config;
+        this.boundsProvider = boundsProvider;
+        this.canvasModel = canvasModel;
+        this.canvasAnimation = canvasAnimation;
+        this.animationId = animationId;
+    }
+    /**
+     * Draws the pane resizer on the canvas if it is visible.
+     * The resizer is drawn with a fixed mode or with an animation.
+     * The resizer's position and size are determined by the bounds provider.
+     * The yAxisWidth is calculated based on the canvas bounds container.
+     * The resizerXOffset and resizerWidthOffset are calculated based on the yAxis alignment.
+     * The resizer is filled with a color based on the animation or the config colors.
+     * If the bgMode is true, the resizer is filled without the drag zone, otherwise it is filled with the drag zone.
+     */
+    draw() {
+        if (this.config.components.paneResizer.visible) {
+            const fixedMode = this.config.components.paneResizer.fixedMode;
+            const resizer = this.boundsProvider();
+            const ctx = this.canvasModel.ctx;
+            const animation = this.canvasAnimation.getColorAlphaAnimation(this.animationId);
+            const drag = this.config.components.paneResizer.dragZone;
+            if (!fixedMode && animation) {
+                ctx.fillStyle = animation.getColor(0);
+                ctx.fillRect(resizer.x, resizer.y - drag, resizer.width, resizer.height + 2 * drag);
+            }
+            ctx.fillStyle = this.config.colors.paneResizer.lineColor;
+            if (this.config.animation.paneResizer.bgMode) {
+                ctx.fillRect(resizer.x, resizer.y, resizer.width, resizer.height);
+            }
+            else {
+                ctx.fillRect(resizer.x, resizer.y - drag, resizer.width, resizer.height + 2 * drag);
+            }
+        }
+    }
+    /**
+     * Returns an array of canvas IDs.
+     *
+     * @returns {Array<string>} An array containing the ID of the canvas model.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

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

@@ -3,4 +3,51 @@
  * 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 h}from"../../model/chart-base-element";export class SnapshotComponent extends h{constructor(n,a){super(),this.elements=n,this.canvasModel=a}doActivate(){super.doActivate()}createSnapshot(n){const a=this.canvasModel.canvas,e=this.canvasModel.ctx;if(e){e.clearRect(0,0,a.width,a.height);const t=a.width/window.devicePixelRatio,s=a.height/window.devicePixelRatio;return e.drawImage(this.elements.backgroundCanvas,0,0,t,s),e.drawImage(this.elements.mainCanvas,0,0,t,s),e.drawImage(this.elements.staticDrawingCanvas,0,0,t,s),e.drawImage(this.elements.dataSeriesCanvas,0,0,t,s),e.drawImage(this.elements.overDataSeriesCanvas,0,0,t,s),e.drawImage(this.elements.dynamicDrawingCanvas,0,0,t,s),e.drawImage(this.elements.crossToolCanvas,0,0,t,s),n&&n(e),new Promise((o,r)=>this.elements.snapshotCanvas.toBlob(i=>i?o(i):r("Blob is null")))}else return console.error("Snapshot isn't supported"),Promise.reject()}}
+import { ChartBaseElement } from '../../model/chart-base-element';
+/**
+ * Snapshot Component.
+ * Allows to copy, download and share snapshot
+ */
+export class SnapshotComponent extends ChartBaseElement {
+    constructor(elements, canvasModel) {
+        super();
+        this.elements = elements;
+        this.canvasModel = canvasModel;
+    }
+    /**
+     * Implements doActivate method.
+     * @protected
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+    }
+    /**
+     * Creates a snapshot of the canvas and returns it as a Promise of Blob object.
+     * @param {function} userDrawCallback - Optional callback function that takes a CanvasRenderingContext2D object
+     * as a parameter and allows the user to draw on the canvas before taking the snapshot.
+     * @returns {Promise<Blob>} - A Promise that resolves with a Blob object representing the snapshot of the canvas.
+     * @throws {Error} - If the snapshot isn't supported, an error is thrown.
+     */
+    createSnapshot(userDrawCallback) {
+        const snapshotCanvas = this.canvasModel.canvas;
+        const ctx = this.canvasModel.ctx;
+        if (ctx) {
+            ctx.clearRect(0, 0, snapshotCanvas.width, snapshotCanvas.height);
+            const width = snapshotCanvas.width / window.devicePixelRatio;
+            const height = snapshotCanvas.height / window.devicePixelRatio;
+            ctx.drawImage(this.elements.backgroundCanvas, 0, 0, width, height);
+            ctx.drawImage(this.elements.mainCanvas, 0, 0, width, height);
+            ctx.drawImage(this.elements.dynamicObjectsCanvas, 0, 0, width, height);
+            ctx.drawImage(this.elements.crossToolCanvas, 0, 0, width, height);
+            userDrawCallback && userDrawCallback(ctx);
+            return new Promise((resolve, fail) => this.elements.snapshotCanvas.toBlob(blob => {
+                return blob ? resolve(blob) : fail('Blob is null');
+            }));
+        }
+        else {
+            console.error("Snapshot isn't supported");
+            return Promise.reject();
+        }
+    }
+}

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

@@ -3,27 +3,23 @@
  * 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 } from '../../model/chart-base-element';
-import { BarType, FullChartConfig } from '../../chart.config';
-import { CanvasModel } from '../../model/canvas.model';
+import { FullChartConfig } from '../../chart.config';
 import { DrawingManager } from '../../drawers/drawing-manager';
-import { ScaleModel } from '../../model/scale.model';
+import { ChartBaseElement } from '../../model/chart-base-element';
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartComponent } from '../chart/chart.component';
 import { PaneManager } from '../pane/pane-manager.component';
-import { VolumeColorResolver } from './volumes.component';
+import { PaneComponent } from '../pane/pane.component';
 import { VolumesModel } from './volumes.model';
 export declare class SeparateVolumesComponent extends ChartBaseElement {
-    private canvasModel;
     private chartComponent;
     private drawingManager;
-    private config;
+    config: FullChartConfig;
     private volumesModel;
-    private readonly volumesColorByChartTypeMap;
     private paneManager;
     static UUID: string;
-    scaleModel: ScaleModel | undefined;
-    constructor(canvasModel: CanvasModel, chartComponent: ChartComponent, drawingManager: DrawingManager, config: FullChartConfig, volumesModel: VolumesModel, volumesColorByChartTypeMap: Partial<Record<BarType, VolumeColorResolver>>, paneManager: PaneManager);
+    pane: PaneComponent | undefined;
+    constructor(chartComponent: ChartComponent, drawingManager: DrawingManager, config: FullChartConfig, volumesModel: VolumesModel, paneManager: PaneManager);
     protected doActivate(): void;
     /**
      * Activates the separate volumes feature.

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

@@ -3,4 +3,66 @@
  * 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 n}from"../../model/chart-base-element";import{createCandlesOffsetProvider as d}from"../chart/data-series.high-low-provider";import{VolumesDrawer as h}from"./volumes.drawer";import{volumeFormatter as u}from"./volumes.formatter";class a extends n{constructor(o,e,t,s,r,i,l){super(),this.canvasModel=o,this.chartComponent=e,this.drawingManager=t,this.config=s,this.volumesModel=r,this.volumesColorByChartTypeMap=i,this.paneManager=l,s.components.volumes.showSeparately&&this.activateSeparateVolumes()}doActivate(){super.doActivate(),this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject.subscribe(()=>{var o,e;return!(!((o=this.scaleModel)===null||o===void 0)&&o.isViewportValid())&&((e=this.scaleModel)===null||e===void 0?void 0:e.doAutoScale(!0))})),this.addRxSubscription(this.volumesModel.volumeMax.subscribe(()=>{var o;return(o=this.scaleModel)===null||o===void 0?void 0:o.doAutoScale()}))}activateSeparateVolumes(){if(this.paneManager.paneComponents[a.UUID]===void 0){const o=this.paneManager.createPane(a.UUID,{paneFormatters:{regular:u},useDefaultHighLow:!1,increment:1}),{scaleModel:e}=o,t=d(()=>({top:10,bottom:0,left:0,right:0,visible:!0}),this.volumesModel.highLowProvider);e.autoScaleModel.setHighLowProvider("volumes",t),e.doAutoScale(!0),this.scaleModel=e;const s=new h(this.canvasModel,this.config,this.volumesModel,this.chartComponent.chartModel,e,this.volumesColorByChartTypeMap,()=>this.config.components.volumes.showSeparately);this.drawingManager.addDrawer(s,"UNDERLAY_VOLUMES_AREA")}}deactiveSeparateVolumes(){this.paneManager.removePane(a.UUID),delete this.scaleModel,this.drawingManager.removeDrawerByName("UNDERLAY_VOLUMES_AREA")}fromY(o){var e,t;return(t=(e=this.scaleModel)===null||e===void 0?void 0:e.fromY(o))!==null&&t!==void 0?t:0}}a.UUID="volumes";export{a as SeparateVolumesComponent};
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { createCandlesOffsetProvider } from '../chart/data-series.high-low-provider';
+import { volumeFormatter } from './volumes.formatter';
+class SeparateVolumesComponent extends ChartBaseElement {
+    constructor(chartComponent, drawingManager, config, volumesModel, paneManager) {
+        super();
+        this.chartComponent = chartComponent;
+        this.drawingManager = drawingManager;
+        this.config = config;
+        this.volumesModel = volumesModel;
+        this.paneManager = paneManager;
+        if (config.components.volumes.showSeparately) {
+            this.activateSeparateVolumes();
+        }
+    }
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject.subscribe(() => { var _a, _b; return !((_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.isViewportValid()) && ((_b = this.pane) === null || _b === void 0 ? void 0 : _b.scale.doAutoScale(true)); }));
+        this.addRxSubscription(this.volumesModel.volumeMax.subscribe(() => { var _a; return (_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.doAutoScale(); }));
+    }
+    /**
+     * Activates the separate volumes feature.
+     * If the pane component for separate volumes does not exist, it creates a new pane with the specified UUID and options.
+     * It then sets the high-low provider for the volumes scale model and does an auto scale.
+     * A new VolumesDrawer is created and added to the drawing manager with the specified parameters.
+     */
+    activateSeparateVolumes() {
+        if (this.paneManager.panes[SeparateVolumesComponent.UUID] === undefined) {
+            const volumePane = this.paneManager.createPane(SeparateVolumesComponent.UUID, {
+                paneFormatters: {
+                    regular: volumeFormatter,
+                },
+                useDefaultHighLow: false,
+                increment: 1,
+            });
+            this.pane = volumePane;
+            volumePane.mainExtent.yAxis.setAxisType('regular');
+            const { scale: scaleModel } = volumePane;
+            const volumesHighLowProvider = createCandlesOffsetProvider(() => ({ top: 10, bottom: 0, left: 0, right: 0, visible: true }), this.volumesModel.highLowProvider);
+            scaleModel.autoScaleModel.setHighLowProvider('volumes', volumesHighLowProvider);
+            scaleModel.doAutoScale(true);
+        }
+    }
+    /**
+     * Deactivates the separate volumes feature by removing the separate volumes pane, deleting the scale model, and removing the underlay volumes area drawer.
+     */
+    deactiveSeparateVolumes() {
+        this.paneManager.removePane(SeparateVolumesComponent.UUID);
+        delete this.pane;
+        this.drawingManager.removeDrawerByName('UNDERLAY_VOLUMES_AREA');
+    }
+    /**
+     * Converts a pixel value from the Y-axis of the scale model to the corresponding data value.
+     * @param {Pixel} y - The pixel value to convert.
+     * @returns {Unit} - The corresponding data value.
+     */
+    fromY(y) {
+        var _a, _b;
+        return (_b = (_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.fromY(y)) !== null && _b !== void 0 ? _b : 0;
+    }
+}
+SeparateVolumesComponent.UUID = 'volumes';
+export { SeparateVolumesComponent };