diff --git a/examples/mouse.html b/examples/mouse_click.html similarity index 82% rename from examples/mouse.html rename to examples/mouse_click.html index 74ccd21..e1d9c43 100755 --- a/examples/mouse.html +++ b/examples/mouse_click.html @@ -16,7 +16,11 @@ let options = { renderLegend: false, usePanning: false, axis: { y: { range: [0, 50] } }, - eventsCallbacks: { mouseMove: console.log } + zoomEvents: { mouse: { + zoom: { isActive: false }, + pan: { isActive: false }, + } }, + eventsCallbacks: { mouseClick: console.log } } var pod = new LinePod( document.getElementById('chart'), diff --git a/src/index.ts b/src/index.ts index a8552d0..edba9fd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -291,10 +291,12 @@ class LinePod extends ChartwerkPod { } 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); @@ -309,20 +311,21 @@ class LinePod extends ChartwerkPod { chartX: eventX, chartWidth: this.width }; + } override onMouseMove(): void { const obj = this.getMouseObj(); - this.moveCrosshairLine(obj.x, obj.y); + 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); } - // TODO: add override - onMouseClick(): void { - const obj = this.getMouseObj(); - console.log(obj); + override onMouseClick(): void { + this.options.callbackMouseClick(this.getMouseObj()); } findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {