@devexperts/dxcharts-lite 1.0.2 → 2.0.1

package/dist/chart/canvas/canvas-bounds-container.js

@@ -3,4 +3,818 @@
  * 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 F,Subject as E}from"rxjs";import{distinctUntilChanged as z,map as k}from"rxjs/operators";import{arrayCompare as Y,arrayRemove2 as K,flat as Z,moveInArrayMutable as H,reorderArray as G}from"../utils/array.utils";import{isMobile as W}from"../utils/device/browser.utils";import{calcTimeLabelBounds as q}from"../components/navigation_map/navigation-map.model";import{calculateSymbolHeight as $}from"../utils/canvas/canvas-font-measure-tool.utils";import{YAxisBoundsContainer as J}from"./y-axis-bounds.container";export const CHART_UUID="CHART";class s{}s.CANVAS="CANVAS",s.N_MAP="N_MAP",s.X_AXIS="X_AXIS",s.N_MAP_KNOT_L="N_MAP_KNOT_L",s.N_MAP_KNOT_R="N_MAP_KNOT_R",s.N_MAP_BTN_L="N_MAP_BTN_L",s.N_MAP_BTN_R="N_MAP_BTN_R",s.N_MAP_SLIDER_WINDOW="N_MAP_SLIDER_WINDOW",s.N_MAP_CHART="N_MAP_CHART",s.N_MAP_LABEL_R="N_MAP_LABEL_R",s.N_MAP_LABEL_L="N_MAP_LABEL_L",s.PANE_UUID=c=>"PANE_"+c,s.PANE_UUID_Y_AXIS=(c,t=0)=>"PANE_"+c+"_Y_AXIS_"+t,s.PANE_UUID_RESIZER=c=>"PANE_"+c+"_RESIZER",s.ALL_PANES="ALL_PANES",s.CHART_WITH_Y_AXIS="CHART_WITH_Y_AXIS",s.EVENTS="EVENTS",s.CHART=s.PANE_UUID(CHART_UUID),s.Y_AXIS=s.PANE_UUID_Y_AXIS(CHART_UUID);export{s as CanvasElement};export const DEFAULT_BOUNDS={x:0,y:0,pageX:0,pageY:0,width:0,height:0};const Q=20,j=35,I=15,V=1.5,M=W()?8*V:8,tt=1e-6;export class CanvasBoundsContainer{get graphsHeightRatio(){return this._graphsHeightRatio}constructor(t,e,i,h,n){this.config=t,this.eventBus=e,this.canvasModel=i,this.formatterFactory=h,this.bounds={},this.canvasOnPageLocation={x:0,y:0,pageX:0,pageY:0,width:0,height:0},this.panesOrder=[],this.panesOrderChangedSubject=new E,this.xAxisHeight=void 0,this.yAxisWidths={right:[0],left:[0]},this.leftRatio=0,this.rightRatio=0,this.boundsChangedSubject=new E,this.barResizerChangedSubject=new E,this._graphsHeightRatio={chart:1},this.graphsHeightRatioChangedSubject=new E,this.boundsChangedSubscriptions={},n.canvasResized.subscribe(r=>{let a=r;a||(a=this.canvasModel.canvas.getBoundingClientRect()),this.updateCanvasOnPageLocation(a),this.recalculateBounds()}),this.yAxisBoundsContainer=new J(this.config,this.canvasModel)}updateYAxisWidths(){const t=this.yAxisBoundsContainer.getYAxisWidths();this.setYAxisWidths(t)}addPaneBounds(t,e){if(this.panesOrder.indexOf(t)===-1){if(this.panesOrder.push(t),e!==void 0){const i=this.panesOrder.indexOf(t);H(this.panesOrder,i,e)}this.recalculatePanesHeightRatios(),this.panesOrderChangedSubject.next(this.panesOrder)}}overrideChartHeightRatios(t){const e=Object.assign(Object.assign({},this.graphsHeightRatio),t),i=Object.values(e).reduce((h,n)=>h+n,0);Math.abs(i-1)<tt?(this._graphsHeightRatio=e,this.recalculateBounds()):console.error(`Result ratio should be equal 1, but equal ${i}`)}movePaneUp(t){const e=this.panesOrder.indexOf(t);e!==-1&&(H(this.panesOrder,e,e-1),this.recalculateBounds(),this.eventBus.fireDraw(),this.panesOrderChangedSubject.next(this.panesOrder))}movePaneDown(t){const e=this.panesOrder.indexOf(t);e!==-1&&(H(this.panesOrder,e,e+1),this.recalculateBounds(),this.eventBus.fireDraw(),this.panesOrderChangedSubject.next(this.panesOrder))}reorderPanes(t){this.panesOrder=G(this.panesOrder,t),this.recalculateBounds(),this.panesOrderChangedSubject.next(this.panesOrder)}removedPaneBounds(t){K(this.panesOrder,t),delete this.graphsHeightRatio[t],delete this.bounds[s.PANE_UUID(t)],this.yAxisWidths.left.concat(this.yAxisWidths.right).forEach((e,i)=>delete this.bounds[s.PANE_UUID_Y_AXIS(t,i)]),delete this.bounds[s.PANE_UUID_RESIZER(t)],this.recalculatePanesHeightRatios(),this.panesOrderChangedSubject.next(this.panesOrder)}recalculateBounds(){const t=this.canvasOnPageLocation.width,e=this.canvasOnPageLocation.height,i=this.config.components.paneResizer.height,h=this.getBounds(s.CANVAS);h.x=0,h.y=0,h.width=t,h.height=e;const n=this.getYAxisWidth(),r=this.getNavMapBounds(h),a=this.getXAxisBounds(r,h),o=e-a.height-r.height,l=n.left.reduce((u,_)=>u+_,0),f=n.right.reduce((u,_)=>u+_,0),g=0,O=h.width-f,A=g+l,b=0,m=h.width-l-f;let p=b;this.panesOrder.forEach((u,_)=>{var N;const x=this.graphsHeightRatio[this.panesOrder[_]],B=this.config.components.paneResizer.visible;B&&(_!==0?v(this.bounds,s.PANE_UUID_RESIZER(u),0,p,h.width,i,this.canvasOnPageLocation):v(this.bounds,s.PANE_UUID_RESIZER(u),0,0,0,0,this.canvasOnPageLocation));const C=v(this.bounds,s.PANE_UUID(u),A,B?p+i:p,m,B?o*x-this.config.components.paneResizer.height:o*x,this.canvasOnPageLocation);if(this.config.components.yAxis.visible){const S=this.yAxisBoundsContainer.extentsOrder.get(u);if(S===void 0)return;const T=B?p+i:p,U=B?o*x-i:o*x;let X=A-((N=n.left[0])!==null&&N!==void 0?N:0),D=O;S.left.forEach((L,y)=>{var w;v(this.bounds,s.PANE_UUID_Y_AXIS(u,L),X,T,n.left[y],U,this.canvasOnPageLocation),X-=(w=n.left[y+1])!==null&&w!==void 0?w:0}),S.right.forEach((L,y)=>{v(this.bounds,s.PANE_UUID_Y_AXIS(u,L),D,T,n.right[y],U,this.canvasOnPageLocation),D+=n.right[y]})}else v(this.bounds,s.PANE_UUID_Y_AXIS(u),0,0,0,0,this.canvasOnPageLocation);p=C.y+C.height});const d=this.getBounds(s.ALL_PANES);d.x=A,d.y=b,d.width=m,d.height=p;const P=this.getBounds(s.CHART_WITH_Y_AXIS),R=this.getBounds(s.PANE_UUID(CHART_UUID));this.getEventsBounds(R),this.copyBounds(R,P),P.width=h.width,this.recalculateNavigationMapElementBounds(),this.updateAllBoundsPageCoordinates(),this.notifyBoundsSubscribers()}updateCanvasOnPageLocation(t){this.canvasOnPageLocation=Object.assign(Object.assign({},this.canvasOnPageLocation),{x:t.x,y:t.y,width:t.width,height:t.height})}updateAllBoundsPageCoordinates(){for(const t of Object.keys(this.bounds)){const e=this.bounds[t];e.pageX=e.x+this.canvasOnPageLocation.x,e.pageY=e.y+this.canvasOnPageLocation.y}}getEventsBounds(t){const e=this.getBounds(s.EVENTS);return this.config.components.events.visible?(e.x=0,e.y=t.y+t.height-this.config.components.events.height,e.width=t.width,e.height=this.config.components.events.height):this.applyDefaultBounds(e),e}getNavMapBounds(t){const e=this.getBounds(s.N_MAP);return this.config.components.navigationMap.visible?(e.x=0,e.y=t.height-j,e.width=t.width,e.height=j):this.applyDefaultBounds(e),e}getXAxisBounds(t,e){const i=this.getBounds(s.X_AXIS);return this.config.components.xAxis.visible?(i.x=0,i.y=e.height-this.getXAxisHeight()-t.height,i.width=e.width,i.height=this.getXAxisHeight()):this.applyDefaultBounds(i),i}getXAxisHeight(){var t,e;if(!this.xAxisHeight){const i=this.config.components.xAxis.fontSize+"px "+this.config.components.xAxis.fontFamily,h=$(i,this.canvasModel.ctx);this.xAxisHeight=h+((t=this.config.components.xAxis.padding.top)!==null&&t!==void 0?t:0)+((e=this.config.components.xAxis.padding.bottom)!==null&&e!==void 0?e:0)}return this.xAxisHeight}setYAxisWidths(t){(!Y(this.yAxisWidths.left,t.left)||!Y(this.yAxisWidths.right,t.right))&&(this.yAxisWidths=t,this.recalculateBounds())}setXAxisHeight(t){t!==this.xAxisHeight&&(this.xAxisHeight=t,this.recalculateBounds())}setPanesOrder(t){this.panesOrder=t,this.recalculateBounds()}getYAxisWidth(){return this.config.components.yAxis.visible?this.yAxisWidths:{right:[0],left:[0]}}recalculatePanesHeightRatios(){this.calculateGraphsHeightRatios(),this.recalculateBounds()}calculateGraphsHeightRatios(){let t=this.graphsHeightRatio[CHART_UUID];const e=[];e.push(...this.panesOrder.filter(g=>g!==CHART_UUID)),this.panesOrder.forEach(g=>{this.graphsHeightRatio[g]===0&&delete this.graphsHeightRatio[g]});const i=e.map(g=>this.graphsHeightRatio[g]===void 0?void 0:this.graphsHeightRatio[g]),h=i.filter(g=>g!==void 0).length,n=i.filter(g=>g===void 0).length;let r=0,a=0,o=1,l=0;n>0&&([o,l]=it(e.length),t*=o),h===0&&(t=1-l*n),a=1-t-l*n,i.forEach(g=>{g&&(a-=g*o)}),r=a/(e.length+1);const f=i.map(g=>g?g*o+r:l+r);t+=r,this._graphsHeightRatio={},this.graphsHeightRatio[CHART_UUID]=t,f.forEach((g,O)=>{const A=e[O];this.graphsHeightRatio[A]=g})}recalculateNavigationMapElementBounds(){var t,e,i,h;if(this.config.components.navigationMap.visible){const n=this.getBounds(s.N_MAP),{height:r,width:a}=this.config.components.navigationMap.knots,o=r!=null?r:0,l=W()?a*V:a!=null?a:0,f=o?n.y+(n.height-o)/2:n.y,g=(e=(t=this.config.components.navigationMap)===null||t===void 0?void 0:t.timeLabels)===null||e===void 0?void 0:e.visible,O=x=>q(this.canvasModel.ctx,x,this.formatterFactory,this.config)[0],A=Z((h=(i=this.mainCandleSeries)===null||i===void 0?void 0:i.getSeriesInViewport())!==null&&h!==void 0?h:[]),b=g&&A.length?O(A[0].candle.timestamp):0,m=g&&A.length?O(A[A.length-1].candle.timestamp):0,p=Math.max(b,m);if(g){const x=this.getBounds(s.N_MAP_LABEL_L);x.x=n.x,x.y=n.y,x.width=p,x.height=n.height;const B=this.getBounds(s.N_MAP_LABEL_R);B.x=n.x+n.width-p,B.y=n.y,B.width=p,B.height=n.height}const d=this.getBounds(s.N_MAP_BTN_L);d.x=n.x+p,d.y=n.y,d.width=I,d.height=n.height;const P=this.getBounds(s.N_MAP_BTN_R);P.x=n.x+n.width-I-p,P.y=n.y,P.width=I,P.height=n.height;const R=this.getBounds(s.N_MAP_KNOT_L);R.x=(P.x-d.x-d.width)*this.leftRatio+d.x+d.width,R.y=f,R.width=l!=null?l:M,R.height=o!=null?o:n.height;const u=this.getBounds(s.N_MAP_KNOT_R);u.x=(P.x-d.x-d.width)*this.rightRatio+d.x+d.width-M,u.y=f,u.width=l!=null?l:M,u.height=o!=null?o:n.height;const _=this.getBounds(s.N_MAP_SLIDER_WINDOW);_.x=R.x+R.width,_.y=n.y,_.width=u.x-_.x,_.height=n.height;const N=this.getBounds(s.N_MAP_CHART);N.x=d.x+d.width,N.y=n.y,N.width=P.x-N.x,N.height=n.height}}isVolumesInSeparatePane(){return this.config.components.volumes.visible&&this.config.components.volumes.showSeparately}getBounds(t){return this.bounds[t]===void 0&&(this.bounds[t]=this.copyOf(DEFAULT_BOUNDS)),this.bounds[t]}getCanvasOnPageLocation(){return this.canvasOnPageLocation}getBoundsPanes(){return this.panesOrder.reduce((t,e)=>Object.assign(Object.assign({},t),{[e]:this.bounds[s.PANE_UUID(e)]}),{})}getBoundsHitTest(t,e=DEFAULT_HIT_TEST_OPTIONS){const{extensionX:i,extensionY:h,wholePage:n}=Object.assign(Object.assign({},DEFAULT_HIT_TEST_OPTIONS),e);return n?(r,a)=>{const o=this.getBounds(t);return r>o.pageX-i&&r<o.pageX+o.width+i&&a>o.pageY-h&&a<o.pageY+o.height+h}:(r,a)=>{const o=this.getBounds(t);return r>o.x-i&&r<o.x+o.width+i&&a>o.y-h&&a<o.y+o.height+h}}static hitTestOf(t,e=DEFAULT_HIT_TEST_OPTIONS){const{extensionX:i,extensionY:h,wholePage:n}=Object.assign(Object.assign({},DEFAULT_HIT_TEST_OPTIONS),e);return n?(r,a)=>r>t.pageX-i&&r<t.pageX+t.width+i&&a>t.pageY-h&&a<t.pageY+t.height+h:(r,a)=>r>t.x-i&&r<t.x+t.width+i&&a>t.y-h&&a<t.y+t.height+h}isChartBoundsAvailable(){const t=this.getBounds(s.CANVAS);return t.width>0&&t.height>0}resizePaneVertically(t,e){const i=this.panesOrder.indexOf(t),h=this.getBounds(s.PANE_UUID_RESIZER(t));this.doResizePaneVertically(i,h.y-e),this.barResizerChangedSubject.next()}doResizePaneVertically(t,e){const i=t-1,h=this.getBounds(s.ALL_PANES).height,n=this.config.components.paneResizer.height+Q,r=h*this.graphsHeightRatio[this.panesOrder[t]],a=h*this.graphsHeightRatio[this.panesOrder[i]],o=r+e>n,l=a-e>n;if(o&&l){const f=e/h;this.graphsHeightRatio[this.panesOrder[t]]+=f,this.graphsHeightRatio[this.panesOrder[i]]-=f,this.recalculateBounds()}}notifyBoundsSubscribers(){Object.keys(this.boundsChangedSubscriptions).forEach(t=>{this.boundsChangedSubscriptions[t].next(this.getBounds(t))}),this.boundsChangedSubject.next()}observeBoundsChanged(t){let e=this.boundsChangedSubscriptions[t];return e||(e=new F(this.getBounds(t)),this.boundsChangedSubscriptions[t]=e),e.pipe(k(i=>this.copyOf(i)),z((i,h)=>this.sameBounds(i,h)))}observeAnyBoundsChanged(){return this.boundsChangedSubject.asObservable()}copyOf(t){return Object.assign({},t)}copyBounds(t,e){e.x=t.x,e.y=t.y,e.width=t.width,e.height=t.height}sameBounds(t,e){return t.x===e.x&&t.y===e.y&&t.width===e.width&&t.height===e.height}applyDefaultBounds(t){this.copyBounds(DEFAULT_BOUNDS,t)}setMainCandleSeries(t){this.mainCandleSeries=t}}const et={0:1,1:.8,2:.6,3:.5,4:.4,5:.2},it=c=>{var t;const e=(t=et[c])!==null&&t!==void 0?t:.4,i=(1-e)/c;return[e,i]};export const isInBounds=(c,t)=>c.x>t.x&&c.x<t.x+t.width&&c.y>t.y&&c.y<t.y+t.height,isInVerticalBounds=(c,t)=>c>t.y&&c<t.y+t.height;const v=(c,t,e,i,h,n,r)=>{const a=c[t];if(a)return a.x=e,a.y=i,a.pageX=e+r.x,a.pageY=i+r.y,a.width=h,a.height=n,a;const o={x:e,y:i,pageX:e+r.x,pageY:i+r.y,width:h,height:n};return c[t]=o,o};export const limitYToBounds=(c,t)=>Math.min(Math.max(c,t.y),t.y+t.height),DEFAULT_HIT_TEST_OPTIONS={extensionX:0,extensionY:0,wholePage:!1},areBoundsChanged=(c,t)=>c.width===t.width&&c.height===t.height;
+import { BehaviorSubject, Subject } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { arrayCompare, arrayRemove2, flat, moveInArrayMutable, reorderArray } from '../utils/array.utils';
+import { isMobile } from '../utils/device/browser.utils';
+import { calcTimeLabelBounds } from '../components/navigation_map/navigation-map.model';
+import { calculateSymbolHeight } from '../utils/canvas/canvas-font-measure-tool.utils';
+import { YAxisBoundsContainer } from './y-axis-bounds.container';
+export const CHART_UUID = 'CHART';
+class CanvasElement {
+}
+CanvasElement.CANVAS = 'CANVAS';
+CanvasElement.N_MAP = 'N_MAP';
+CanvasElement.X_AXIS = 'X_AXIS';
+CanvasElement.N_MAP_KNOT_L = 'N_MAP_KNOT_L';
+CanvasElement.N_MAP_KNOT_R = 'N_MAP_KNOT_R';
+CanvasElement.N_MAP_BTN_L = 'N_MAP_BTN_L';
+CanvasElement.N_MAP_BTN_R = 'N_MAP_BTN_R';
+CanvasElement.N_MAP_SLIDER_WINDOW = 'N_MAP_SLIDER_WINDOW';
+CanvasElement.N_MAP_CHART = 'N_MAP_CHART';
+CanvasElement.N_MAP_LABEL_R = 'N_MAP_LABEL_R';
+CanvasElement.N_MAP_LABEL_L = 'N_MAP_LABEL_L';
+CanvasElement.PANE_UUID = (uuid) => 'PANE_' + uuid;
+CanvasElement.PANE_UUID_Y_AXIS = (uuid, idx = 0) => 'PANE_' + uuid + '_Y_AXIS_' + idx;
+CanvasElement.PANE_UUID_RESIZER = (uuid) => 'PANE_' + uuid + '_RESIZER';
+CanvasElement.ALL_PANES = 'ALL_PANES';
+CanvasElement.CHART_WITH_Y_AXIS = 'CHART_WITH_Y_AXIS';
+CanvasElement.EVENTS = 'EVENTS';
+/**
+ * @deprecated - use CanvasElement.PANE_UUID(CHART_UUID) instead
+ */
+CanvasElement.CHART = CanvasElement.PANE_UUID(CHART_UUID);
+/**
+ * @deprecated - use CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID) instead
+ */
+CanvasElement.Y_AXIS = CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID);
+export { CanvasElement };
+export const DEFAULT_BOUNDS = { x: 0, y: 0, pageX: 0, pageY: 0, width: 0, height: 0 };
+const DEFAULT_MIN_PANE_HEIGHT = 20;
+const N_MAP_H = 35;
+const N_MAP_BUTTON_W = 15;
+const KNOTS_W_MOBILE_MULTIPLIER = 1.5;
+const N_MAP_KNOT_W = isMobile() ? 8 * KNOTS_W_MOBILE_MULTIPLIER : 8;
+/**
+ * we need to check that: heightRatios - 1 <  0.000001 after calculations between decimals
+ */
+const PRECISION_DIFFERENCE = 0.000001;
+/**
+ * This component listens EVENT_DRAW and recalculates bounds of canvas chart elements.
+ * {@link getBounds} method will always give actual placement of element you want.
+ *
+ * NOTE: this class was designed exclusively for {@link getBounds} method
+ * 	     please think twice when adding additional logic here (does it affect element bounds? or it's smth else)
+ */
+export class CanvasBoundsContainer {
+    get graphsHeightRatio() {
+        return this._graphsHeightRatio;
+    }
+    constructor(config, eventBus, canvasModel, formatterFactory, chartResizeHandler) {
+        this.config = config;
+        this.eventBus = eventBus;
+        this.canvasModel = canvasModel;
+        this.formatterFactory = formatterFactory;
+        // holds all canvas element bounds
+        this.bounds = {};
+        // position of canvas on the whole page
+        this.canvasOnPageLocation = { x: 0, y: 0, pageX: 0, pageY: 0, width: 0, height: 0 };
+        // holds ordered "top to bottom" array of panes UUID's (studies in past)
+        this.panesOrder = [];
+        this.panesOrderChangedSubject = new Subject();
+        // both will be calculated based on font/content size
+        this.xAxisHeight = undefined;
+        this.yAxisWidths = {
+            right: [0],
+            left: [0],
+        };
+        this.leftRatio = 0;
+        this.rightRatio = 0;
+        this.boundsChangedSubject = new Subject();
+        this.barResizerChangedSubject = new Subject();
+        this._graphsHeightRatio = { chart: 1 };
+        this.graphsHeightRatioChangedSubject = new Subject();
+        this.boundsChangedSubscriptions = {};
+        chartResizeHandler.canvasResized.subscribe(bcr => {
+            let calculatedBCR = bcr;
+            if (!calculatedBCR) {
+                calculatedBCR = this.canvasModel.canvas.getBoundingClientRect();
+            }
+            this.updateCanvasOnPageLocation(calculatedBCR);
+            this.recalculateBounds();
+        });
+        this.yAxisBoundsContainer = new YAxisBoundsContainer(this.config, this.canvasModel);
+    }
+    updateYAxisWidths() {
+        const widths = this.yAxisBoundsContainer.getYAxisWidths();
+        this.setYAxisWidths(widths);
+    }
+    /**
+     * Adds a pane to the list of panes and recalculates the height ratios of all panes.
+     * @param {string} uuid - The unique identifier of the pane to be added.
+     * @param {number} [order] - The order in which the pane should be added. If not provided, the pane will be added to the end of the list.
+     */
+    addPaneBounds(uuid, order) {
+        if (this.panesOrder.indexOf(uuid) === -1) {
+            this.panesOrder.push(uuid);
+            if (order !== undefined) {
+                const idx = this.panesOrder.indexOf(uuid);
+                moveInArrayMutable(this.panesOrder, idx, order);
+            }
+            this.recalculatePanesHeightRatios();
+            this.panesOrderChangedSubject.next(this.panesOrder);
+        }
+    }
+    /**
+     * Overrides the height ratios of the chart with the provided height ratios.
+     * @param {Record<string, number>} heightRatios - An object containing the height ratios to be set.
+     * @returns {void}
+     * @throws {Error} If the sum of the height ratios is not equal to 1.
+     
+    */
+    overrideChartHeightRatios(heightRatios) {
+        const resultRatio = Object.assign(Object.assign({}, this.graphsHeightRatio), heightRatios);
+        const ratioSum = Object.values(resultRatio).reduce((sum, ratio) => sum + ratio, 0);
+        if (Math.abs(ratioSum - 1) < PRECISION_DIFFERENCE) {
+            this._graphsHeightRatio = resultRatio;
+            this.recalculateBounds();
+        }
+        else {
+            console.error(`Result ratio should be equal 1, but equal ${ratioSum}`);
+        }
+    }
+    /**
+     * Moves a pane up in the panesOrder array.
+     * @param {string} uuid - The unique identifier of the pane to be moved.
+     * @returns {void}
+     */
+    movePaneUp(uuid) {
+        const idx = this.panesOrder.indexOf(uuid);
+        if (idx !== -1) {
+            moveInArrayMutable(this.panesOrder, idx, idx - 1);
+            this.recalculateBounds();
+            this.eventBus.fireDraw();
+            this.panesOrderChangedSubject.next(this.panesOrder);
+        }
+    }
+    /**
+     * Moves the pane down in the panesOrder array.
+     * @param {string} uuid - The unique identifier of the pane to be moved.
+     * @returns {void}
+     */
+    movePaneDown(uuid) {
+        const idx = this.panesOrder.indexOf(uuid);
+        if (idx !== -1) {
+            moveInArrayMutable(this.panesOrder, idx, idx + 1);
+            this.recalculateBounds();
+            this.eventBus.fireDraw();
+            this.panesOrderChangedSubject.next(this.panesOrder);
+        }
+    }
+    /**
+     * Reorders current panes according to newPanesOrder
+     * if element in newPanesOrder doesn't exist in real panes order - it will ignored
+     * Example:
+     * 	panesOrder: ['1', '2', '3']
+     * 	newPanesOrder: ['3', '1']
+     * 	result: ['3', '2', '1']
+     */
+    reorderPanes(newPanesOrder) {
+        this.panesOrder = reorderArray(this.panesOrder, newPanesOrder);
+        this.recalculateBounds();
+        this.panesOrderChangedSubject.next(this.panesOrder);
+    }
+    /**
+     * Removes the bounds of a pane with the given uuid from the canvas element.
+     * @param {string} uuid - The uuid of the pane to remove.
+     * @returns {void}
+     */
+    removedPaneBounds(uuid) {
+        arrayRemove2(this.panesOrder, uuid);
+        delete this.graphsHeightRatio[uuid];
+        delete this.bounds[CanvasElement.PANE_UUID(uuid)];
+        this.yAxisWidths.left
+            .concat(this.yAxisWidths.right)
+            .forEach((_, idx) => delete this.bounds[CanvasElement.PANE_UUID_Y_AXIS(uuid, idx)]);
+        delete this.bounds[CanvasElement.PANE_UUID_RESIZER(uuid)];
+        this.recalculatePanesHeightRatios();
+        this.panesOrderChangedSubject.next(this.panesOrder);
+    }
+    /**
+     * Recalculates the bounds of the chart elements based on the current configuration and canvas size.
+     * The function updates the bounds of the canvas, the main chart, the panes, the y-axis, and the chart with y-axis.
+     * It also updates the navigation map element bounds, all bounds page coordinates, and notifies the bounds subscribers.
+     * @function
+     * @name recalculateBounds
+     * @memberof ChartWidget
+     * @returns {void}
+     */
+    recalculateBounds() {
+        const canvasW = this.canvasOnPageLocation.width;
+        const canvasH = this.canvasOnPageLocation.height;
+        const paneResizerHeight = this.config.components.paneResizer.height;
+        // whole canvas bounds
+        const canvas = this.getBounds(CanvasElement.CANVAS);
+        canvas.x = 0;
+        canvas.y = 0;
+        canvas.width = canvasW;
+        canvas.height = canvasH;
+        const yAxisWidths = this.yAxisWidths;
+        const nMap = this.getNavMapBounds(canvas);
+        const xAxis = this.getXAxisBounds(nMap, canvas);
+        const chartHeight = canvasH - xAxis.height - nMap.height;
+        const totalYAxisWidthLeft = yAxisWidths.left.reduce((sum, width) => sum + width, 0);
+        const totalYAxisWidthRight = yAxisWidths.right.reduce((sum, width) => sum + width, 0);
+        // main chart
+        const yAxisXLeft = 0;
+        const yAxisXRight = canvas.width - totalYAxisWidthRight;
+        const paneXStart = yAxisXLeft + totalYAxisWidthLeft;
+        const initialY = 0;
+        const chartWidth = canvas.width - totalYAxisWidthLeft - totalYAxisWidthRight;
+        let nextY = initialY;
+        // panes
+        this.panesOrder.forEach((uuid, index) => {
+            var _a;
+            const paneHeightRatio = this.graphsHeightRatio[this.panesOrder[index]];
+            const resizerVisible = this.config.components.paneResizer.visible;
+            if (resizerVisible) {
+                if (index !== 0) {
+                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_RESIZER(uuid), 0, nextY, canvas.width, paneResizerHeight, this.canvasOnPageLocation);
+                }
+                else {
+                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_RESIZER(uuid), 0, 0, 0, 0, this.canvasOnPageLocation);
+                }
+            }
+            const paneBounds = upsertBounds(this.bounds, CanvasElement.PANE_UUID(uuid), paneXStart, resizerVisible ? nextY + paneResizerHeight : nextY, chartWidth, resizerVisible
+                ? chartHeight * paneHeightRatio - this.config.components.paneResizer.height
+                : chartHeight * paneHeightRatio, this.canvasOnPageLocation);
+            // y axis
+            if (this.config.components.yAxis.visible) {
+                const extents = this.yAxisBoundsContainer.extentsOrder.get(uuid);
+                if (extents === undefined) {
+                    return;
+                }
+                const y = resizerVisible ? nextY + paneResizerHeight : nextY;
+                const height = resizerVisible
+                    ? chartHeight * paneHeightRatio - paneResizerHeight
+                    : chartHeight * paneHeightRatio;
+                let startXLeft = paneXStart - ((_a = yAxisWidths.left[0]) !== null && _a !== void 0 ? _a : 0); // we need to provide right to left order on the left y-axis side
+                let startXRight = yAxisXRight;
+                extents.left.forEach((extentIdx, i) => {
+                    var _a;
+                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_Y_AXIS(uuid, extentIdx), startXLeft, y, yAxisWidths.left[i], height, this.canvasOnPageLocation);
+                    startXLeft -= (_a = yAxisWidths.left[i + 1]) !== null && _a !== void 0 ? _a : 0;
+                });
+                extents.right.forEach((extentIdx, i) => {
+                    upsertBounds(this.bounds, CanvasElement.PANE_UUID_Y_AXIS(uuid, extentIdx), startXRight, y, yAxisWidths.right[i], height, this.canvasOnPageLocation);
+                    startXRight += yAxisWidths.right[i];
+                });
+            }
+            else {
+                upsertBounds(this.bounds, CanvasElement.PANE_UUID_Y_AXIS(uuid), 0, 0, 0, 0, this.canvasOnPageLocation);
+            }
+            nextY = paneBounds.y + paneBounds.height;
+        });
+        const allPanesBounds = this.getBounds(CanvasElement.ALL_PANES);
+        allPanesBounds.x = paneXStart;
+        allPanesBounds.y = initialY;
+        allPanesBounds.width = chartWidth;
+        allPanesBounds.height = nextY;
+        // chart with Y axis
+        const chartWithYAxis = this.getBounds(CanvasElement.CHART_WITH_Y_AXIS);
+        const chartBounds = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        this.getEventsBounds(chartBounds);
+        this.copyBounds(chartBounds, chartWithYAxis);
+        chartWithYAxis.width = canvas.width;
+        this.recalculateNavigationMapElementBounds();
+        this.updateAllBoundsPageCoordinates();
+        this.notifyBoundsSubscribers();
+    }
+    /**
+     * Updates the canvasOnPageLocation property with the provided PickedDOMRect object.
+     * @param {PickedDOMRect} bcr - The PickedDOMRect object containing the new values for x, y, width, and height.
+     * @private
+     */
+    updateCanvasOnPageLocation(bcr) {
+        this.canvasOnPageLocation = Object.assign(Object.assign({}, this.canvasOnPageLocation), { x: bcr.x, y: bcr.y, width: bcr.width, height: bcr.height });
+    }
+    /**
+     * Updates the page coordinates of all bounds.
+     * @private
+     */
+    updateAllBoundsPageCoordinates() {
+        for (const name of Object.keys(this.bounds)) {
+            const bound = this.bounds[name];
+            bound.pageX = bound.x + this.canvasOnPageLocation.x;
+            bound.pageY = bound.y + this.canvasOnPageLocation.y;
+        }
+    }
+    /**
+     * Returns the bounds of the events component.
+     * @private
+     * @param {Bounds} chartPane - The bounds of the chart pane.
+     * @returns {Bounds} - The bounds of the events component.
+     */
+    getEventsBounds(chartPane) {
+        const events = this.getBounds(CanvasElement.EVENTS);
+        if (this.config.components.events.visible) {
+            events.x = 0;
+            events.y = chartPane.y + chartPane.height - this.config.components.events.height;
+            events.width = chartPane.width;
+            events.height = this.config.components.events.height;
+        }
+        else {
+            this.applyDefaultBounds(events);
+        }
+        return events;
+    }
+    /**
+     * Returns the bounds of the navigation map element.
+     * @param {Bounds} canvas - The bounds of the canvas element.
+     * @returns {Bounds} - The bounds of the navigation map element.
+     * @private
+     */
+    getNavMapBounds(canvas) {
+        const nMap = this.getBounds(CanvasElement.N_MAP);
+        if (this.config.components.navigationMap.visible) {
+            nMap.x = 0;
+            nMap.y = canvas.height - N_MAP_H;
+            nMap.width = canvas.width;
+            nMap.height = N_MAP_H;
+        }
+        else {
+            this.applyDefaultBounds(nMap);
+        }
+        return nMap;
+    }
+    /**
+     * Returns the bounds of the X axis based on the provided parameters.
+     * @private
+     * @param {Bounds} nMap - The bounds of the nMap.
+     * @param {Bounds} canvas - The bounds of the canvas.
+     * @returns {Bounds} - The bounds of the X axis.
+     */
+    getXAxisBounds(nMap, canvas) {
+        const xAxis = this.getBounds(CanvasElement.X_AXIS);
+        if (this.config.components.xAxis.visible) {
+            xAxis.x = 0;
+            xAxis.y = canvas.height - this.getXAxisHeight() - nMap.height;
+            xAxis.width = canvas.width;
+            xAxis.height = this.getXAxisHeight();
+        }
+        else {
+            this.applyDefaultBounds(xAxis);
+        }
+        return xAxis;
+    }
+    /**
+     * Calculates the height of the X axis based on the font size, font family and padding values.
+     * If the height has already been calculated, it returns the cached value.
+     * @returns {number} The height of the X axis.
+     */
+    getXAxisHeight() {
+        var _a, _b;
+        if (!this.xAxisHeight) {
+            const font = this.config.components.xAxis.fontSize + 'px ' + this.config.components.xAxis.fontFamily;
+            const fontHeight = calculateSymbolHeight(font, this.canvasModel.ctx);
+            this.xAxisHeight =
+                fontHeight +
+                    ((_a = this.config.components.xAxis.padding.top) !== null && _a !== void 0 ? _a : 0) +
+                    ((_b = this.config.components.xAxis.padding.bottom) !== null && _b !== void 0 ? _b : 0);
+        }
+        return this.xAxisHeight;
+    }
+    /**
+     * Sets the width of the Y axis.
+     *
+     * @param {YAxisWidths} yAxisWidths - The width of the Y axis.
+     * @returns {void}
+     */
+    setYAxisWidths(yAxisWidths) {
+        if (!arrayCompare(this.yAxisWidths.left, yAxisWidths.left) ||
+            !arrayCompare(this.yAxisWidths.right, yAxisWidths.right)) {
+            this.yAxisWidths = yAxisWidths;
+            this.recalculateBounds();
+        }
+    }
+    /**
+     *
+     * Sets the height of the X axis.
+     * @param {number} xAxisHeight - The height of the X axis.
+     * @returns {void}
+     */
+    setXAxisHeight(xAxisHeight) {
+        if (xAxisHeight !== this.xAxisHeight) {
+            this.xAxisHeight = xAxisHeight;
+            this.recalculateBounds();
+        }
+    }
+    /**
+     * Sets the order of the panes.
+     * @param {string[]} panesOrder - An array of strings representing the order of the panes.
+     * @returns {void}
+     */
+    setPanesOrder(panesOrder) {
+        this.panesOrder = panesOrder;
+        this.recalculateBounds();
+    }
+    /**
+     * Recalculates the height ratios of the panes by calling the calculateGraphsHeightRatios() and recalculateBounds() methods.
+     */
+    recalculatePanesHeightRatios() {
+        this.calculateGraphsHeightRatios();
+        this.recalculateBounds();
+    }
+    /**
+     * Calculates the height ratios of the graphs in the chart.
+     * It first gets the height ratio of the main chart and then calculates the height ratios of the other graphs.
+     * It then calculates the free space available for the other graphs and distributes it among them based on their previous height ratios.
+     * If there are new graphs added, it calculates their height ratios based on the number of new graphs and the total number of graphs.
+     * @private
+     */
+    calculateGraphsHeightRatios() {
+        let chartRatio = this.graphsHeightRatio[CHART_UUID];
+        // NOTE: pec stands for panesExceptMainChart
+        const pec = [];
+        pec.push(...this.panesOrder.filter(p => p !== CHART_UUID));
+        this.panesOrder.forEach(pane => {
+            if (this.graphsHeightRatio[pane] === 0) {
+                delete this.graphsHeightRatio[pane];
+            }
+        });
+        const pecRatios = pec.map(graph => this.graphsHeightRatio[graph] === undefined ? undefined : this.graphsHeightRatio[graph]);
+        const oldPecNumber = pecRatios.filter(ratio => ratio !== undefined).length;
+        const newPecNumber = pecRatios.filter(ratio => ratio === undefined).length;
+        let freeRatioForPec = 0;
+        let freeRatio = 0;
+        let ratioForOldPec = 1;
+        let ratioForNewPec = 0;
+        if (newPecNumber > 0) {
+            [ratioForOldPec, ratioForNewPec] = getHeightRatios(pec.length);
+            chartRatio *= ratioForOldPec;
+        }
+        if (oldPecNumber === 0) {
+            chartRatio = 1 - ratioForNewPec * newPecNumber;
+        }
+        freeRatio = 1 - chartRatio - ratioForNewPec * newPecNumber;
+        pecRatios.forEach(ratio => {
+            if (ratio) {
+                freeRatio -= ratio * ratioForOldPec;
+            }
+        });
+        freeRatioForPec = freeRatio / (pec.length + 1);
+        const proportions = pecRatios.map(ratio => ratio ? ratio * ratioForOldPec + freeRatioForPec : ratioForNewPec + freeRatioForPec);
+        chartRatio += freeRatioForPec;
+        this._graphsHeightRatio = {};
+        this.graphsHeightRatio[CHART_UUID] = chartRatio;
+        proportions.forEach((ratio, index) => {
+            const name = pec[index];
+            this.graphsHeightRatio[name] = ratio;
+        });
+    }
+    /**
+     * Recalculates the bounds of the navigation map elements based on the current configuration and viewport.
+     * If the navigation map is visible, it calculates the bounds of the following elements:
+     * - Navigation map
+     * - Time labels
+     * - Left and right buttons
+     * - Knots
+     * - Slider
+     * - Chart
+     *
+     * The bounds of each element are calculated based on the current viewport and configuration values.
+     * If the time labels are visible, it calculates the width of the left and right time labels based on the first and last visible candle timestamps.
+     * The width of the time labels is used to calculate the position and size of the left and right buttons, as well as the position of the knots.
+     * The position and size of the knots are calculated based on the left and right ratios, which represent the position of the knots relative to the left and right buttons.
+     * The position and size of the slider and chart are calculated based on the position and size of the knots and buttons.
+     */
+    recalculateNavigationMapElementBounds() {
+        var _a, _b, _c, _d;
+        if (this.config.components.navigationMap.visible) {
+            const nMap = this.getBounds(CanvasElement.N_MAP);
+            const { height, width } = this.config.components.navigationMap.knots;
+            const knotHeightFromConfig = height !== null && height !== void 0 ? height : 0;
+            const knotWidthFromConfig = isMobile() ? width * KNOTS_W_MOBILE_MULTIPLIER : width !== null && width !== void 0 ? width : 0;
+            const knotY = !knotHeightFromConfig ? nMap.y : nMap.y + (nMap.height - knotHeightFromConfig) / 2;
+            // time labels
+            const timeLabelsVisible = (_b = (_a = this.config.components.navigationMap) === null || _a === void 0 ? void 0 : _a.timeLabels) === null || _b === void 0 ? void 0 : _b.visible;
+            const calcLabelBounds = (timestamp) => {
+                return calcTimeLabelBounds(this.canvasModel.ctx, timestamp, this.formatterFactory, this.config)[0];
+            };
+            const candleSource = flat((_d = (_c = this.mainCandleSeries) === null || _c === void 0 ? void 0 : _c.getSeriesInViewport()) !== null && _d !== void 0 ? _d : []);
+            const leftTimeLabelWidth = timeLabelsVisible && candleSource.length ? calcLabelBounds(candleSource[0].candle.timestamp) : 0;
+            const rightTimeLabelWidth = timeLabelsVisible && candleSource.length
+                ? calcLabelBounds(candleSource[candleSource.length - 1].candle.timestamp)
+                : 0;
+            const timeLabelWidth = Math.max(leftTimeLabelWidth, rightTimeLabelWidth);
+            if (timeLabelsVisible) {
+                const nMapLabelL = this.getBounds(CanvasElement.N_MAP_LABEL_L);
+                nMapLabelL.x = nMap.x;
+                nMapLabelL.y = nMap.y;
+                nMapLabelL.width = timeLabelWidth;
+                nMapLabelL.height = nMap.height;
+                const nMapLabelR = this.getBounds(CanvasElement.N_MAP_LABEL_R);
+                nMapLabelR.x = nMap.x + nMap.width - timeLabelWidth;
+                nMapLabelR.y = nMap.y;
+                nMapLabelR.width = timeLabelWidth;
+                nMapLabelR.height = nMap.height;
+            }
+            // buttons left and right
+            const nMapBtnL = this.getBounds(CanvasElement.N_MAP_BTN_L);
+            nMapBtnL.x = nMap.x + timeLabelWidth;
+            nMapBtnL.y = nMap.y;
+            nMapBtnL.width = N_MAP_BUTTON_W;
+            nMapBtnL.height = nMap.height;
+            const nMapBtnR = this.getBounds(CanvasElement.N_MAP_BTN_R);
+            nMapBtnR.x = nMap.x + nMap.width - N_MAP_BUTTON_W - timeLabelWidth;
+            nMapBtnR.y = nMap.y;
+            nMapBtnR.width = N_MAP_BUTTON_W;
+            nMapBtnR.height = nMap.height;
+            // knots
+            // Left drag button
+            const knotL = this.getBounds(CanvasElement.N_MAP_KNOT_L);
+            knotL.x = (nMapBtnR.x - nMapBtnL.x - nMapBtnL.width) * this.leftRatio + nMapBtnL.x + nMapBtnL.width;
+            knotL.y = knotY;
+            knotL.width = knotWidthFromConfig !== null && knotWidthFromConfig !== void 0 ? knotWidthFromConfig : N_MAP_KNOT_W;
+            knotL.height = knotHeightFromConfig !== null && knotHeightFromConfig !== void 0 ? knotHeightFromConfig : nMap.height;
+            // Right drag button
+            const knotR = this.getBounds(CanvasElement.N_MAP_KNOT_R);
+            knotR.x =
+                (nMapBtnR.x - nMapBtnL.x - nMapBtnL.width) * this.rightRatio +
+                    nMapBtnL.x +
+                    nMapBtnL.width -
+                    N_MAP_KNOT_W;
+            knotR.y = knotY;
+            knotR.width = knotWidthFromConfig !== null && knotWidthFromConfig !== void 0 ? knotWidthFromConfig : N_MAP_KNOT_W;
+            knotR.height = knotHeightFromConfig !== null && knotHeightFromConfig !== void 0 ? knotHeightFromConfig : nMap.height;
+            // slider
+            const slider = this.getBounds(CanvasElement.N_MAP_SLIDER_WINDOW);
+            slider.x = knotL.x + knotL.width;
+            slider.y = nMap.y;
+            slider.width = knotR.x - slider.x;
+            slider.height = nMap.height;
+            // chart
+            const nMapChart = this.getBounds(CanvasElement.N_MAP_CHART);
+            nMapChart.x = nMapBtnL.x + nMapBtnL.width;
+            nMapChart.y = nMap.y;
+            nMapChart.width = nMapBtnR.x - nMapChart.x;
+            nMapChart.height = nMap.height;
+        }
+    }
+    /**
+     * Checks if the volumes are set to be visible and if they should be shown in a separate pane
+     *
+     * @returns {boolean} - Returns true if the volumes are set to be visible and if they should be shown in a separate pane, otherwise returns false
+     */
+    isVolumesInSeparatePane() {
+        return this.config.components.volumes.visible && this.config.components.volumes.showSeparately;
+    }
+    /**
+     * Gets current canvas element bounds.
+     * @param {string} el - CanvasElement.ELEMENT_NAME
+     * @return {Bounds} bounds of element
+     */
+    getBounds(el) {
+        if (this.bounds[el] === undefined) {
+            this.bounds[el] = this.copyOf(DEFAULT_BOUNDS);
+        }
+        return this.bounds[el];
+    }
+    /**
+     * Returns the position of CANVAS on whole page.
+     * Use it to calculate relative coordinates for mouse movement hit test - crosstool for example.
+     */
+    getCanvasOnPageLocation() {
+        return this.canvasOnPageLocation;
+    }
+    /**
+     * Gets current panes bounds.
+     */
+    getBoundsPanes() {
+        return this.panesOrder.reduce((acc, uuid) => (Object.assign(Object.assign({}, acc), { [uuid]: this.bounds[CanvasElement.PANE_UUID(uuid)] })), {});
+    }
+    /**
+     * Gets hit-test fn for canvas element.
+     * @param {string} el - CanvasElement.ELEMENT_NAME
+     * @param {boolean} reverse - reverses the hit test condition
+     * @param {number} extensionX - extended hitBoundsTest in horizontal direction
+     * @param {number} extensionY - extended hitBoundsTest in vertical direction
+     * @param wholePage
+     * @return {HitBoundsTest} hit-test fn
+     */
+    getBoundsHitTest(el, options = DEFAULT_HIT_TEST_OPTIONS) {
+        const { extensionX, extensionY, wholePage } = Object.assign(Object.assign({}, DEFAULT_HIT_TEST_OPTIONS), options);
+        if (wholePage) {
+            return (x, y) => {
+                const bounds = this.getBounds(el);
+                const hit = x > bounds.pageX - extensionX &&
+                    x < bounds.pageX + bounds.width + extensionX &&
+                    y > bounds.pageY - extensionY &&
+                    y < bounds.pageY + bounds.height + extensionY;
+                return hit;
+            };
+        }
+        else {
+            return (x, y) => {
+                const bounds = this.getBounds(el);
+                const hit = x > bounds.x - extensionX &&
+                    x < bounds.x + bounds.width + extensionX &&
+                    y > bounds.y - extensionY &&
+                    y < bounds.y + bounds.height + extensionY;
+                return hit;
+            };
+        }
+    }
+    /**
+     * Returns a function that tests if a given point is inside a given bounds object.
+     * @param {Bounds} bounds - The bounds object to test against.
+     * @param {Object} options - An object containing options for the hit test.
+     * @param {number} [options.extensionX=0] - The amount of extension in the x-axis.
+     * @param {number} [options.extensionY=0] - The amount of extension in the y-axis.
+     * @param {boolean} [options.wholePage=false] - Whether to test against the whole page or just the bounds object.
+     * @returns {HitBoundsTest} - A function that takes in x and y coordinates and returns true if the point is inside the bounds object.
+     */
+    static hitTestOf(bounds, options = DEFAULT_HIT_TEST_OPTIONS) {
+        const { extensionX, extensionY, wholePage } = Object.assign(Object.assign({}, DEFAULT_HIT_TEST_OPTIONS), options);
+        if (!wholePage) {
+            return (x, y) => {
+                const hit = x > bounds.x - extensionX &&
+                    x < bounds.x + bounds.width + extensionX &&
+                    y > bounds.y - extensionY &&
+                    y < bounds.y + bounds.height + extensionY;
+                return hit;
+            };
+        }
+        else {
+            return (x, y) => {
+                const hit = x > bounds.pageX - extensionX &&
+                    x < bounds.pageX + bounds.width + extensionX &&
+                    y > bounds.pageY - extensionY &&
+                    y < bounds.pageY + bounds.height + extensionY;
+                return hit;
+            };
+        }
+    }
+    /**
+     * This method indicates whether it's possible to render the chart, in particular if its width and height > 0.
+     */
+    isChartBoundsAvailable() {
+        const canvasBounds = this.getBounds(CanvasElement.CANVAS);
+        return canvasBounds.width > 0 && canvasBounds.height > 0;
+    }
+    /**
+     * Resizes a pane vertically.
+     * @param {string} uuid - The unique identifier of the pane.
+     * @param {number} y - The amount of pixels to resize the pane by.
+     * @returns {void}
+     */
+    resizePaneVertically(uuid, y) {
+        const idx = this.panesOrder.indexOf(uuid);
+        const bounds = this.getBounds(CanvasElement.PANE_UUID_RESIZER(uuid));
+        this.doResizePaneVertically(idx, bounds.y - y);
+        this.barResizerChangedSubject.next();
+    }
+    /**
+     * Resizes a pane vertically based on the provided index and delta in pixels.
+     * @param {number} idx - The index of the pane to be resized.
+     * @param {number} yDeltaPixels - The delta in pixels to resize the pane.
+     * @returns {void}
+     */
+    doResizePaneVertically(idx, yDeltaPixels) {
+        const prevPaneIdx = idx - 1;
+        const allPanesHeight = this.getBounds(CanvasElement.ALL_PANES).height;
+        const minAllowedPaneHeight = this.config.components.paneResizer.height + DEFAULT_MIN_PANE_HEIGHT;
+        const resultPaneHeight = allPanesHeight * this.graphsHeightRatio[this.panesOrder[idx]];
+        const dependResultPaneHeight = allPanesHeight * this.graphsHeightRatio[this.panesOrder[prevPaneIdx]];
+        // check if changes fit allowed minimal pane height
+        const fitPane = resultPaneHeight + yDeltaPixels > minAllowedPaneHeight;
+        const fitDependPane = dependResultPaneHeight - yDeltaPixels > minAllowedPaneHeight;
+        if (fitPane && fitDependPane) {
+            // convert pixels to percent
+            const yDeltaPercent = yDeltaPixels / allPanesHeight;
+            this.graphsHeightRatio[this.panesOrder[idx]] += yDeltaPercent;
+            this.graphsHeightRatio[this.panesOrder[prevPaneIdx]] -= yDeltaPercent;
+            this.recalculateBounds();
+        }
+    }
+    /**
+     * Notifies all subscribers about bounds changes
+     * @function
+     * @name notifyBoundsSubscribers
+     * @returns {void}
+     */
+    notifyBoundsSubscribers() {
+        Object.keys(this.boundsChangedSubscriptions).forEach(el => {
+            const subject = this.boundsChangedSubscriptions[el];
+            subject.next(this.getBounds(el));
+        });
+        this.boundsChangedSubject.next();
+    }
+    /**
+     * Subscribe to element bounds changes.
+     * Multiple subscriptions will share the same subject.
+     * @param el - element name
+     */
+    observeBoundsChanged(el) {
+        let sub = this.boundsChangedSubscriptions[el];
+        if (!sub) {
+            sub = new BehaviorSubject(this.getBounds(el));
+            this.boundsChangedSubscriptions[el] = sub;
+        }
+        return sub.pipe(map(b => this.copyOf(b)), distinctUntilChanged((b1, b2) => this.sameBounds(b1, b2)));
+    }
+    /**
+     * Returns an observable that emits when the bounds of the object change.
+     * @returns {Observable} An observable that emits when the bounds of the object change.
+     */
+    observeAnyBoundsChanged() {
+        return this.boundsChangedSubject.asObservable();
+    }
+    /**
+     * Creates a copy of the provided bounds object.
+     *
+     * @private
+     * @param {Bounds} bounds - The bounds object to be copied.
+     * @returns {Bounds} - A new bounds object with the same properties as the original.
+     */
+    copyOf(bounds) {
+        return Object.assign({}, bounds);
+    }
+    /**
+     * Copies the values of the `from` object to the `to` object.
+     * @param {Bounds} from - The object to copy the values from.
+     * @param {Bounds} to - The object to copy the values to.
+     */
+    copyBounds(from, to) {
+        to.x = from.x;
+        to.y = from.y;
+        to.width = from.width;
+        to.height = from.height;
+    }
+    /**
+     * Checks if two Bounds objects have the same x, y, width and height values.
+     * @param {Bounds} b1 - The first Bounds object to compare.
+     * @param {Bounds} b2 - The second Bounds object to compare.
+     * @returns {boolean} - Returns true if both Bounds objects have the same x, y, width and height values, otherwise returns false.
+     */
+    sameBounds(b1, b2) {
+        return b1.x === b2.x && b1.y === b2.y && b1.width === b2.width && b1.height === b2.height;
+    }
+    /**
+     * Applies default bounds to the provided bounds object.
+     * @param {Bounds} bounds - The bounds object to apply default bounds to.
+     * @returns {void}
+     * @private
+     */
+    applyDefaultBounds(bounds) {
+        this.copyBounds(DEFAULT_BOUNDS, bounds);
+    }
+    /**
+     * Sets the main candle series for the CanvasBoundsContainer.
+     * @param {CandleSeriesModel} candleSeries - The candle series to be set as the main candle series.
+     * @returns {void}
+     * @deprecated This method should be removed as candleSeries is not a part of CanvasBoundsContainer.
+     */
+    setMainCandleSeries(candleSeries) {
+        this.mainCandleSeries = candleSeries;
+    }
+}
+// paneCounter=chartHeightRatio: 0=1, 1=0.8, 2=0.6, 3=0.5, 4=0.4, 5=0.4
+const DEFAULT_RATIOS = {
+    0: 1,
+    1: 0.8,
+    2: 0.6,
+    3: 0.5,
+    4: 0.4,
+    5: 0.2,
+};
+// NOTE: pec stands for panes except main chart
+const getHeightRatios = (pecLength) => {
+    var _a;
+    const chartHeightRatio = (_a = DEFAULT_RATIOS[pecLength]) !== null && _a !== void 0 ? _a : 0.4;
+    const singlePecHeightRatio = (1 - chartHeightRatio) / pecLength;
+    return [chartHeightRatio, singlePecHeightRatio];
+};
+export const isInBounds = (point, bounds) => point.x > bounds.x && point.x < bounds.x + bounds.width && point.y > bounds.y && point.y < bounds.y + bounds.height;
+export const isInVerticalBounds = (y, bounds) => y > bounds.y && y < bounds.y + bounds.height;
+const upsertBounds = (storage, uuid, x, y, width, height, canvasOnPageLocation) => {
+    const existing = storage[uuid];
+    if (existing) {
+        existing.x = x;
+        existing.y = y;
+        existing.pageX = x + canvasOnPageLocation.x;
+        existing.pageY = y + canvasOnPageLocation.y;
+        existing.width = width;
+        existing.height = height;
+        return existing;
+    }
+    const newly = {
+        x,
+        y,
+        pageX: x + canvasOnPageLocation.x,
+        pageY: y + canvasOnPageLocation.y,
+        width,
+        height,
+    };
+    storage[uuid] = newly;
+    return newly;
+};
+export const limitYToBounds = (y, bounds) => Math.min(Math.max(y, bounds.y), bounds.y + bounds.height);
+export const DEFAULT_HIT_TEST_OPTIONS = {
+    extensionX: 0,
+    extensionY: 0,
+    wholePage: false,
+};
+export const areBoundsChanged = (prev, next) => {
+    return prev.width === next.width && prev.height === next.height;
+};