Add an interaction layer to prevent duplicated listeners and support hovering over cursor (#6)

arothuis · fnando · commit 742a2ff1381e · 2018-04-02T11:47:03.000-03:00
diff --git a/__snapshots__/sparkline_test.js.snap-shot b/__snapshots__/sparkline_test.js.snap-shot
@@ -4,15 +4,15 @@ exports['renders svg for empty values array 1'] = "<svg width=\"100\" height=\"3
 
 exports['renders svg for 1-item array 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"></svg>"
 
-exports['renders interactive svg 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"-1000\" x2=\"-1000\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"-1000\" cy=\"-1000\" r=\"2\"></circle></svg>"
+exports['renders interactive svg 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"-1000\" x2=\"-1000\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"-1000\" cy=\"-1000\" r=\"2\"></circle><rect width=\"100\" height=\"30\" style=\"fill:transparent;stroke:transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
 
-exports['updates interactive svg when mouse moves 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"96\" x2=\"96\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"96\" cy=\"4\" r=\"2\"></circle></svg>"
+exports['renders svg with custom cursor 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"3\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle><rect width=\"100\" height=\"30\" style=\"fill:transparent;stroke:transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
 
-exports['renders interactive svg based on the nearest edge 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle></svg>"
+exports['renders svg with custom spot 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M6 15 L 6 15 L 94 5\" fill=\"none\"></path><path d=\"M6 15 L 6 15 L 94 5 V 30 L 6 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"6\" x2=\"6\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"6\" cy=\"15\" r=\"3\"></circle><rect width=\"100\" height=\"30\" style=\"fill:transparent;stroke:transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
 
-exports['renders interactive svg based on the nearest edge 2'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"96\" x2=\"96\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"96\" cy=\"4\" r=\"2\"></circle></svg>"
+exports['updates interactive svg when mouse moves 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 26 L 4 26 L 50 15 L 96 4\" fill=\"none\"></path><path d=\"M4 26 L 4 26 L 50 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"96\" x2=\"96\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"96\" cy=\"4\" r=\"2\"></circle><rect width=\"100\" height=\"30\" style=\"fill:transparent;stroke:transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
 
-exports['renders svg with custom cursor 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"3\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle></svg>"
+exports['renders interactive svg based on the nearest edge 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"4\" x2=\"4\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"4\" cy=\"15\" r=\"2\"></circle><rect width=\"100\" height=\"30\" style=\"fill:transparent;stroke:transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
 
-exports['renders svg with custom spot 1'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M6 15 L 6 15 L 94 5\" fill=\"none\"></path><path d=\"M6 15 L 6 15 L 94 5 V 30 L 6 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"6\" x2=\"6\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"6\" cy=\"15\" r=\"3\"></circle></svg>"
+exports['renders interactive svg based on the nearest edge 2'] = "<svg width=\"100\" height=\"30\" stroke-width=\"2\"><path d=\"M4 15 L 4 15 L 96 4\" fill=\"none\"></path><path d=\"M4 15 L 4 15 L 96 4 V 30 L 4 30 Z\" stroke=\"none\"></path><line class=\"sparkline--cursor\" x1=\"96\" x2=\"96\" y1=\"0\" y2=\"30\" stroke-width=\"2\"></line><circle class=\"sparkline--spot\" cx=\"96\" cy=\"4\" r=\"2\"></circle><rect width=\"100\" height=\"30\" style=\"fill:transparent;stroke:transparent\" class=\"sparkline--interaction-layer\"></rect></svg>"
 
diff --git a/package.json b/package.json
@@ -9,9 +9,9 @@
   "main": "dist/sparkline.js",
   "module": "src/sparkline.js",
   "scripts": {
-    "test": "mocha --require babel-core/register 'test/**/*_test.js'",
+    "test": "mocha --require babel-core/register \"test/**/*_test.js\"",
     "js:dist:expanded": "webpack",
-    "js:dist:minified": "NODE_ENV=production webpack",
+    "js:dist:minified": "env NODE_ENV=production webpack",
     "dist": "yarn test && yarn js:dist:expanded && yarn js:dist:minified"
   },
   "description": "Generate SVG sparklines with JavaScript without any external dependency.",
diff --git a/src/sparkline.js b/src/sparkline.js
@@ -151,7 +151,15 @@ export function sparkline(svg, entries, options) {
   svg.appendChild(cursor);
   svg.appendChild(spot);
 
-  svg.addEventListener("mouseout", event => {
+  const interactionLayer = buildElement("rect", {
+    width: svg.attributes.width.value,
+    height: svg.attributes.height.value,
+    style: "fill:transparent;stroke:transparent",
+    class: "sparkline--interaction-layer",
+  });
+  svg.appendChild(interactionLayer);
+
+  interactionLayer.addEventListener("mouseout", event => {
     cursor.setAttribute("x1", offscreen);
     cursor.setAttribute("x2", offscreen);
 
@@ -162,7 +170,7 @@ export function sparkline(svg, entries, options) {
     }
   });
 
-  svg.addEventListener("mousemove", event => {
+  interactionLayer.addEventListener("mousemove", event => {
     const mouseX = event.offsetX;
 
     let nextDataPoint = datapoints.find(entry => {
diff --git a/test/sparkline_test.js b/test/sparkline_test.js
@@ -53,7 +53,7 @@ describe("sparkline", () => {
     });
 
     event.offsetX = 49;
-    svg.dispatchEvent(event);
+    svg.querySelector(".sparkline--interaction-layer").dispatchEvent(event);
 
     snapshot(svg.outerHTML);
   });
@@ -68,7 +68,7 @@ describe("sparkline", () => {
     });
 
     event.offsetX = 49;
-    svg.dispatchEvent(event);
+    svg.querySelector(".sparkline--interaction-layer").dispatchEvent(event);
 
     snapshot(svg.outerHTML);
   });
@@ -83,7 +83,7 @@ describe("sparkline", () => {
     });
 
     event.offsetX = 100;
-    svg.dispatchEvent(event);
+    svg.querySelector(".sparkline--interaction-layer").dispatchEvent(event);
 
     snapshot(svg.outerHTML);
   });
@@ -98,11 +98,11 @@ describe("sparkline", () => {
     });
 
     event.offsetX = 40;
-    svg.dispatchEvent(event);
+    svg.querySelector(".sparkline--interaction-layer").dispatchEvent(event);
     snapshot(svg.outerHTML);
 
     event.offsetX = 80;
-    svg.dispatchEvent(event);
+    svg.querySelector(".sparkline--interaction-layer").dispatchEvent(event);
     snapshot(svg.outerHTML);
   });
 
@@ -117,7 +117,7 @@ describe("sparkline", () => {
     });
 
     event.offsetX = 25;
-    svg.dispatchEvent(event);
+    svg.querySelector(".sparkline--interaction-layer").dispatchEvent(event);
 
     assert.deepEqual(call[0], event);
     assert.deepEqual(call[1].value, 5);
@@ -136,7 +136,7 @@ describe("sparkline", () => {
       cancelable: true
     });
 
-    svg.dispatchEvent(event);
+    svg.querySelector(".sparkline--interaction-layer").dispatchEvent(event);
 
     assert.deepEqual(call[0], event);
   });
