Merge pull request 'roken shared crosshair #42' (#43) from broken-shared-crosshair-#42 into main

Reviewed-on: #43

src/index.ts

@@ -28,8 +28,8 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     _el: HTMLElement,
     _series: LineTimeSerie[] = [],
     _options: LineOptions = {},
-    private _markersConf?: MarkersConf, 
-    private _segmentSeries = [], 
+    private _markersConf?: MarkersConf,
+    private _segmentSeries = [],
   ) {
     super(_el, _series, _options);
     this.series = new LineSeries(_series);
@@ -53,7 +53,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       this._markersLayer = new Markers(this._markersConf, this.state);
       this._markersLayer.render(this.metricContainer);
     }
-    
+
     this._segmentsLayer = new Segments(this._segmentSeries, this.state);
     this._segmentsLayer.render(this.metricContainer);
   }
@@ -167,23 +167,14 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       .style('pointer-events', 'none');
   }
 
-  public renderSharedCrosshair(values: { x?: number, y?: number }): void {
-    this.onMouseOver(); // TODO: refactor to use it once
-    const eventX = this.state.xScale(values.x);
-    const eventY = this.state.yScale(values.y);
-    this.moveCrosshairLine(eventX, eventY);
-    const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
 
-    this.options.callbackSharedCrosshairMove({
-      datapoints: datapoints,
-      eventX, eventY
-    });
-  }
 
   public hideSharedCrosshair(): void {
     this.crosshair.style('display', 'none');
   }
 
+  // TODO: refactor to make xPosition and yPosition optional
+  //       and trough error if they are provided for wrong orientation
   moveCrosshairLine(xPosition: number, yPosition: number): void {
     this.crosshair.style('display', null);
     switch(this.options.crosshair.orientation) {
@@ -291,12 +282,10 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   getMouseObj(): MouseObj {
-
     const eventX = d3.mouse(this.chartContainer.node())[0];
     const eventY = d3.mouse(this.chartContainer.node())[1];
     const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
     const yValue = this.state.yScale.invert(eventY);
-    this.moveCrosshairLine(eventX, eventY);
 
     const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
 
@@ -311,19 +300,35 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       chartX: eventX,
       chartWidth: this.width
     };
-
   }
 
   override onMouseMove(): void {
     const obj = this.getMouseObj();
     const eventX = d3.mouse(this.chartContainer.node())[0];
     const eventY = d3.mouse(this.chartContainer.node())[1];
+
     this.moveCrosshairLine(eventX, eventY);
+
     // TODO: is shift key pressed
     // TODO: need to refactor this object
     this.options.callbackMouseMove(obj);
   }
 
+  public renderSharedCrosshair(values: { x?: number, y?: number }): void {
+    this.showCrosshair();
+    this.moveCrosshairLine(
+      values.x ? this.state.xScale(values.x) : 0,
+      values.y ? this.state.yScale(values.y) : 0
+    );
+    const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
+
+    this.options.callbackSharedCrosshairMove({
+      datapoints: datapoints,
+      eventX: values.x ? this.state.xScale(values.x) : 0,
+      eventY: values.y ? this.state.yScale(values.y) : 0
+    });
+  }
+
   override onMouseClick(): void {
     this.options.callbackMouseClick(this.getMouseObj());
   }
@@ -357,16 +362,26 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     return points;
   }
 
-  override onMouseOver(): void {
-    this.onMouseMove();
+  showCrosshair() {
     this.crosshair.style('display', null);
     this.crosshair.selectAll('.crosshair-circle')
       .style('display', null);
   }
 
+  hideCrosshair() {
+    this.crosshair.style('display', 'none');
+    this.crosshair.selectAll('.crosshair-circle')
+      .style('display', 'none');
+  }
+
+  override onMouseOver(): void {
+    this.showCrosshair();
+    this.onMouseMove();
+  }
+
   override onMouseOut(): void {
+    this.hideCrosshair();
     this.options.callbackMouseOut();
-    this.crosshair.style('display', 'none');
   }
 
   isDoubleClickActive(): boolean {