diff --git a/src/index.ts b/src/index.ts index e763f1b..e048e9a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -44,7 +44,7 @@ abstract class ChartwerkPod { protected options: CoreOptions; protected d3Node?: d3.Selection; - protected customOverlay?: d3.Selection; + protected overlay?: d3.Selection; protected crosshair?: d3.Selection; protected brush?: d3.BrushBehavior; protected zoom?: any; @@ -66,7 +66,7 @@ abstract class ChartwerkPod { 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 { 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 { } 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 { 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;