move event handlers to overlay instead of svg itself

src/index.ts

@@ -44,7 +44,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
   protected options: CoreOptions<O>;
 
   protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
-  protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
+  protected overlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
   protected crosshair?: d3.Selection<SVGGElement, unknown, null, undefined>;
   protected brush?: d3.BrushBehavior<unknown>;
   protected zoom?: any;
@@ -66,7 +66,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
 
   protected readonly d3: typeof d3;
   protected deltaYTransform = 0;
-  // TODO: forceRerender is a hack, it will be remove someday. But we need to update state on resize 
+  // TODO: forceRerender is a hack, it will be remove someday. But we need to update state on resize
   protected debouncedRender = debounce(this.forceRerender.bind(this), 100);
   // containers
   // TODO: add better names
@@ -332,11 +332,24 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
       this.initPan();
     }
 
-    this.chartContainer
-      .on('mouseover', this.onMouseOver.bind(this))
-      .on('mouseout', this.onMouseOut.bind(this))
-      .on('mousemove', this.onMouseMove.bind(this))
-      .on('dblclick.zoom', this.zoomOut.bind(this));
+    setTimeout(() => {
+      this.overlay = this.chartContainer.select('.overlay');
+
+      this.overlay
+        .on('mouseover', this.onMouseOver.bind(this))
+        .on('mouseout', this.onMouseOut.bind(this))
+        .on('mousemove', this.onMouseMove.bind(this))
+        .on('dblclick', () => {
+          d3.event.stopPropagation();
+          // TODO: add the same check as we have in line-pod
+          this.zoomOut();
+        })
+        .on('dblclick.zoom', () => {
+          d3.event.stopPropagation();
+          // TODO: add the same check as we have in line-pod
+          this.zoomOut();
+        });
+    }, 0);
   }
 
   protected initBrush(): void {
@@ -404,8 +417,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     }
     if(this.options.mouseZoomEvent.isActive === false) {
       // init cumstom overlay to handle all events
-      this.customOverlay = this.chartContainer.append('rect')
-        .attr('class', 'custom-overlay')
+      this.overlay = this.chartContainer.append('rect')
+        .attr('class', 'overlay')
         .attr('width', this.width)
         .attr('height', this.height)
         .attr('x', 0)
@@ -447,7 +460,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     let legendRow = this.chartContainer
       .append('g')
       .attr('class', 'legend-row');
-    const series = this.series.allSeries; 
+    const series = this.series.allSeries;
     for(let idx = 0; idx < series.length; idx++) {
       let node = legendRow.selectAll('text').node();
       let rowWidth = 0;