@devexperts/dxcharts-lite
Version:
107 lines (106 loc) • 4.72 kB
JavaScript
/*
* Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
* If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { CanvasBoundsContainer, CanvasElement, isInVerticalBounds, } from '../canvas/canvas-bounds-container';
import { ChartBaseElement } from './chart-base-element';
import { DragNDropYComponent } from '../components/dran-n-drop_helper/drag-n-drop-y.component';
import { BehaviorSubject } from 'rxjs';
export const BASELINE_RESIZER_UUID = 'BASELINE_RESIZER';
/**
* Baseline separator for baseline chart
* Used to resize baseline area on chart.
*/
export class BaselineModel extends ChartBaseElement {
constructor(chartModel, chartPanComponent, canvasModel, canvasInputListener, config, canvasBoundContainer, cursorHandler) {
super();
this.chartModel = chartModel;
this.chartPanComponent = chartPanComponent;
this.canvasModel = canvasModel;
this.canvasInputListener = canvasInputListener;
this.config = config;
this.canvasBoundContainer = canvasBoundContainer;
this.cursorHandler = cursorHandler;
this.resizerBounds = { x: 0, y: 0, pageX: 0, pageY: 0, height: 0, width: 0 };
this.dragPredicate = new BehaviorSubject(false);
// the position of a baseline in percents relatively to chart height
this.baselineYPercents = 50;
this.ht = CanvasBoundsContainer.hitTestOf(this.resizerBounds, {
extensionY: this.config.components.paneResizer.dragZone,
});
this.dragStartCb = () => {
this.chartPanComponent.deactivatePanHandlers();
this.dragPredicate.next(true);
};
this.dragEndCb = () => {
this.chartPanComponent.activateChartPanHandlers();
this.dragPredicate.next(false);
};
this.dragTickCb = (dragInfo) => {
const { delta: yDelta } = dragInfo;
const chart = this.canvasBoundContainer.getBounds(CanvasElement.CHART);
const y = this.canvasInputListener.getCurrentPoint().y;
if (yDelta !== 0 && isInVerticalBounds(y, chart)) {
this.moveBaseLine(y);
this.canvasModel.fireDraw();
}
};
const dndHelper = new DragNDropYComponent(this.ht, {
onDragTick: this.dragTickCb,
onDragStart: this.dragStartCb,
onDragEnd: this.dragEndCb,
}, canvasInputListener, chartPanComponent);
this.addChildEntity(dndHelper);
}
doActivate() {
super.doActivate();
this.addRxSubscription(this.canvasBoundContainer
.observeBoundsChanged(CanvasElement.CHART)
.subscribe(() => this.recalculateBounds()));
this.chartModel.chartTypeChanged.subscribe(type => {
if (type === 'baseline') {
this.cursorHandler.setCursorForBounds('BASELINE_RESIZER', this.resizerBounds, this.config.components.baseline.cursor, this.config.components.baseline.dragZone);
}
else {
this.cursorHandler.removeCursorForCanvasEl('BASELINE_RESIZER');
}
});
}
/**
* Recalculates the bounds of the baseline resizer based on the current chart and y-axis bounds.
* @private
* @function
* @name recalculateBounds
* @memberof ClassName
* @returns {void}
*/
recalculateBounds() {
const chart = this.canvasBoundContainer.getBounds(CanvasElement.CHART);
const yAxis = this.canvasBoundContainer.getBounds(CanvasElement.Y_AXIS);
this.resizerBounds.x = chart.x;
this.resizerBounds.width = chart.width + yAxis.width;
this.resizerBounds.height = this.config.components.baseline.height;
const relativeBaselineY = chart.y + chart.height * (this.baselineYPercents / 100);
this.resizerBounds.y = relativeBaselineY;
this.canvasBoundContainer.bounds[BASELINE_RESIZER_UUID] = this.resizerBounds;
}
/**
* Moves the baseline of the chart to the specified y coordinate.
* @param {number} y - The y coordinate to move the baseline to.
* @returns {void}
*/
moveBaseLine(y) {
const chart = this.canvasBoundContainer.getBounds(CanvasElement.CHART);
this.baselineYPercents = ((y - chart.y) * 100) / chart.height;
this.resizerBounds.y = y;
}
/**
* This method is called when the component is being deactivated.
* It calls the doDeactivate method of the parent class.
* @protected
*/
doDeactivate() {
super.doDeactivate();
}
}