Merge branch 'overlay-init' into 'main'

ensure overlay existing

See merge request chartwerk/core!25

src/index.ts

@@ -32,6 +32,7 @@ import * as d3 from 'd3';
 import first from 'lodash/first';
 import last from 'lodash/last';
 import debounce from 'lodash/debounce';
+import isNil from 'lodash/isNil';
 
 
 const DEFAULT_TICK_COUNT = 4;
@@ -331,10 +332,9 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
       this.initBrush();
       this.initPan();
     }
+    this.ensureOverlayExisting();
 
     setTimeout(() => {
-      this.overlay = this.chartContainer.select('.overlay');
-
       this.overlay
         .on('mouseover', this.onMouseOver.bind(this))
         .on('mouseout', this.onMouseOut.bind(this))
@@ -352,6 +352,22 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     }, 0);
   }
 
+  protected ensureOverlayExisting(): void {
+    this.overlay = this.chartContainer.select('.overlay');
+    // init cumstom overlay to handle all events
+    if(this.overlay.empty()) {
+      this.overlay = this.chartContainer.append('rect')
+        .attr('class', 'overlay')
+        .attr('width', this.width)
+        .attr('height', this.height)
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('pointer-events', 'all')
+        .attr('cursor', 'crosshair')
+        .attr('fill', 'none');
+    }
+  }
+
   protected initBrush(): void {
     const isBrushActive = this.options.mouseZoomEvent.isActive;
     if(isBrushActive === false) {
@@ -415,18 +431,6 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     ) {
       return;
     }
-    if(this.options.mouseZoomEvent.isActive === false) {
-      // init cumstom overlay to handle all events
-      this.overlay = this.chartContainer.append('rect')
-        .attr('class', 'overlay')
-        .attr('width', this.width)
-        .attr('height', this.height)
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('pointer-events', 'all')
-        .attr('cursor', 'crosshair')
-        .attr('fill', 'none');
-    }
 
     this.initScaleX = this.state.xScale.copy();
     this.initScaleY = this.state.yScale.copy();