diff --git a/src/index.ts b/src/index.ts index e048e9a..f936398 100644 --- a/src/index.ts +++ b/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 { 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 { }, 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 { ) { 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();