Pull request #5392: [DXCF-5752] [Native mobile] Baseline chart type -…

… crosshair appears on baseline changing // init

Merge in DXCHARTS/dxchart5 from bugfix/DXCF-5752-native-mobile-baseline-chart-type-crosshair-appears-on-baseline-changing to master

* commit 'f5b3ab37bc66f5ca364d99ef82f75f9ea17634e2':
  [DXCF-5752] [Native mobile] Baseline chart type - crosshair appears on baseline changing // remove copy headers
  [DXCF-5752] [Native mobile] Baseline chart type - crosshair appears on baseline changing // init

GitOrigin-RevId: 1221e90aa6ae6ee73af1acff621c3729c4b0dd86

src/chart/bootstrap.ts

@@ -519,6 +519,7 @@ export default class ChartBootstrap {
 			paneManager,
 			this.crossEventProducer,
 			this.hoverProducer,
+			this.chartComponent.baselineModel,
 		);
 
 		this.chartComponents.push(this.crossToolComponent);

src/chart/components/cross_tool/cross-tool.component.ts

@@ -10,6 +10,7 @@ import { CompositeDrawer } from '../../drawers/composite.drawer';
 import { DrawingManager } from '../../drawers/drawing-manager';
 import { CrossEventProducerComponent } from '../../inputhandlers/cross-event-producer.component';
 import { HoverProducerComponent } from '../../inputhandlers/hover-producer.component';
+import { BaselineModel } from '../../model/baseline.model';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { PaneManager } from '../pane/pane-manager.component';
@@ -32,16 +33,18 @@ export class CrossToolComponent extends ChartBaseElement {
 		private canvasBoundsContainer: CanvasBoundsContainer,
 		private drawingManager: DrawingManager,
 		private paneManager: PaneManager,
-		crossEventProducer: CrossEventProducerComponent,
-		hoverProducer: HoverProducerComponent,
+		private crossEventProducer: CrossEventProducerComponent,
+		private hoverProducer: HoverProducerComponent,
+		private baselineModel: BaselineModel,
 	) {
 		super();
 		this.model = new CrossToolModel(
 			config.components.crossTool,
 			this.crossToolCanvasModel,
-			crossEventProducer,
-			hoverProducer,
+			this.crossEventProducer,
+			this.hoverProducer,
 			this.canvasBoundsContainer,
+			this.baselineModel,
 		);
 		this.addChildEntity(this.model);
 		const clearCanvasDrawer = new ClearCanvasDrawer(this.crossToolCanvasModel);

src/chart/components/cross_tool/cross-tool.model.ts

@@ -11,6 +11,7 @@ import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasBoundsContainer, CanvasElement, CHART_UUID } from '../../canvas/canvas-bounds-container';
 import { isMobile } from '../../utils/device/browser.utils';
+import { BaselineModel } from '../../model/baseline.model';
 
 export type CrossToolType = 'cross-and-labels' | 'only-labels' | 'none' | string;
 
@@ -37,6 +38,7 @@ export class CrossToolModel extends ChartBaseElement {
 		private crossEventProducer: CrossEventProducerComponent,
 		private hoverProducer: HoverProducerComponent,
 		private canvasBoundsContainer: CanvasBoundsContainer,
+		private baselineModel: BaselineModel,
 	) {
 		super();
 	}
@@ -67,6 +69,30 @@ export class CrossToolModel extends ChartBaseElement {
 				this.fireDraw();
 			}),
 		);
+		// don't change mobile crosstool hover and position if baseline is being dragged
+		this.addRxSubscription(
+			this.baselineModel.dragPredicate.subscribe(isDragging => {
+				if (!isMobile()) {
+					return;
+				}
+
+				if (isDragging) {
+					this.hoverProducer.deactivate();
+				} else {
+					// set the crosstool position before baseline drag happened to keep hover the same
+					const crossToolInfo = this.crossEventProducer.crossToolTouchInfo;
+					// if cross tool is on chart - update hover with it's coordinates
+					if (crossToolInfo.isSet) {
+						this.crossEventProducer.crossSubject.next([
+							crossToolInfo.temp.x,
+							crossToolInfo.temp.y,
+							CHART_UUID,
+						]);
+					}
+					this.hoverProducer.activate();
+				}
+			}),
+		);
 	}
 
 	/**

src/chart/inputhandlers/hover-producer.component.ts

@@ -204,6 +204,8 @@ export class HoverProducerComponent extends ChartBaseElement {
 					this.longTouchActivatedSubject.next(false);
 					this.crossEventProducer.fireCrossClose();
 					this.crossEventProducer.crossToolHover = null;
+					this.crossEventProducer.crossToolTouchInfo.isSet = false;
+					return;
 				}
 
 				if (!this.crossEventProducer.crossToolTouchInfo.isSet) {

src/chart/model/baseline.model.ts

@@ -19,6 +19,7 @@ import { ChartPanComponent } from '../components/pan/chart-pan.component';
 import { CanvasModel } from './canvas.model';
 import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
 import { Bounds } from './bounds.model';
+import { BehaviorSubject } from 'rxjs';
 
 export const BASELINE_RESIZER_UUID = 'BASELINE_RESIZER';
 
@@ -28,6 +29,8 @@ export const BASELINE_RESIZER_UUID = 'BASELINE_RESIZER';
  */
 export class BaselineModel extends ChartBaseElement {
 	public readonly resizerBounds: Bounds = { x: 0, y: 0, pageX: 0, pageY: 0, height: 0, width: 0 };
+	public readonly dragPredicate = new BehaviorSubject<boolean>(false);
+
 	// the position of a baseline in percents relatively to chart height
 	public baselineYPercents: number = 50;
 	public ht: HitBoundsTest = CanvasBoundsContainer.hitTestOf(this.resizerBounds, {
@@ -78,8 +81,14 @@ export class BaselineModel extends ChartBaseElement {
 		});
 	}
 
-	private dragStartCb = () => this.chartPanComponent.deactivatePanHandlers();
-	private dragEndCb = () => this.chartPanComponent.activateChartPanHandlers();
+	private dragStartCb = () => {
+		this.chartPanComponent.deactivatePanHandlers();
+		this.dragPredicate.next(true);
+	};
+	private dragEndCb = () => {
+		this.chartPanComponent.activateChartPanHandlers();
+		this.dragPredicate.next(false);
+	};
 
 	private dragTickCb = (dragInfo: DragInfo): void => {
 		const { delta: yDelta } = dragInfo;