diff --git a/src/chart/bootstrap.ts b/src/chart/bootstrap.ts index 9b57194..0011708 100755 --- a/src/chart/bootstrap.ts +++ b/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); diff --git a/src/chart/components/cross_tool/cross-tool.component.ts b/src/chart/components/cross_tool/cross-tool.component.ts index 9b2884b..05ff05b 100644 --- a/src/chart/components/cross_tool/cross-tool.component.ts +++ b/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); diff --git a/src/chart/components/cross_tool/cross-tool.model.ts b/src/chart/components/cross_tool/cross-tool.model.ts index adc2869..c74169f 100644 --- a/src/chart/components/cross_tool/cross-tool.model.ts +++ b/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(); + } + }), + ); } /** diff --git a/src/chart/inputhandlers/hover-producer.component.ts b/src/chart/inputhandlers/hover-producer.component.ts index ecd724c..5c1b710 100644 --- a/src/chart/inputhandlers/hover-producer.component.ts +++ b/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) { diff --git a/src/chart/model/baseline.model.ts b/src/chart/model/baseline.model.ts index b15c2ad..33a89cc 100644 --- a/src/chart/model/baseline.model.ts +++ b/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(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;