when the pointer is outside the frame, filter out the winning values that are further than the euclidian distance

this solves the weirdness of pointer selection detailed in #1777 (comment)

Author: Fil

src/interactions/pointer.js

@@ -132,11 +132,17 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, render, ...op
 
       // Select the closest point to the mouse in the current facet; for
       // pointerX or pointerY, the orthogonal component of the distance is
-      // squashed, selecting primarily on the dominant dimension. Return the
-      // usual euclidian distance to determine the winner across facets.
+      // squashed, selecting primarily on the dominant dimension. Across facets,
+      // use the euclidian distance to determine the winner. The current facet’s
+      // surface includes the frame, margins and pointer radius.
       function pointermove(event) {
         if (state.sticky || (event.pointerType === "mouse" && event.buttons === 1)) return; // dragging
         let [xp, yp] = pointof(event);
+        const hw = dimensions.width / 2;
+        const hh = dimensions.height / 2;
+        const offFrame =
+          (kx !== 1 && fx && Math.abs(xp - (fx(index.fx) + hw)) > hw + maxRadius) ||
+          (ky !== 1 && fy && Math.abs(yp - (fy(index.fy) + hh)) > hh + maxRadius);
         (xp -= tx), (yp -= ty); // correct for facets and band scales
         let ii = null;
         let ri = maxRadius * maxRadius;
@@ -146,7 +152,13 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, render, ...op
           const rj = dx * dx + dy * dy;
           if (rj <= ri) (ii = j), (ri = rj);
         }
-        update(ii, ii != null && Math.hypot(px(ii) - xp, py(ii) - yp));
+        if (ii != null) {
+          const dx = px(ii) - xp;
+          const dy = py(ii) - yp;
+          ri = dx * dx + dy * dy;
+          if (offFrame && ri > maxRadius * maxRadius) ii = null;
+        }
+        update(ii, ri);
       }
 
       function pointerdown(event) {

test/output/tipFacetX.svg

@@ -237,3 +237,22 @@ export async function tipTransform() {
     marks: [Plot.dotX([0, 0.1, 0.3, 1], {fill: Plot.identity, r: 10, frameAnchor: "middle", tip: true})]
   });
 }
+
+export async function tipFacetX() {
+  const data = d3.range(100).map((i) => ({f: i > 60 || i % 2 ? "b" : "a", x: i, y: i / 10}));
+  return Plot.plot({
+    inset: 10,
+    y: {domain: [0, 7]},
+    marks: [
+      Plot.frame(),
+      Plot.dot(data, {fy: "f", x: "x", y: "y", tip: "x", fill: "f"}),
+      Plot.dot(
+        [
+          {f: "a", y: 3},
+          {f: "b", y: 1}
+        ],
+        {fy: "f", x: 90, y: "y", r: 30, fill: "f", fillOpacity: 0.1, stroke: "currentColor", strokeDasharray: 4}
+      )
+    ]
+  });
+}