pointer should compose with an existing render transform (#1616)

* pointer should compose with an existing render transform

closes #1614

* add test

* unify render composition

* remove tipDotRender test

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

src/interactions/pointer.js

@@ -1,9 +1,10 @@
 import {pointer as pointof} from "d3";
+import {composeRender} from "../mark.js";
 import {applyFrameAnchor} from "../style.js";
 
 const states = new WeakMap();
 
-function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, ...options} = {}) {
+function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, render, ...options} = {}) {
   maxRadius = +maxRadius;
   // When px or py is used, register an extra channel that the pointer
   // interaction can use to control which point is focused; this allows pointing
@@ -16,7 +17,10 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, ...options} =
     y,
     channels,
     ...options,
-    render(index, scales, values, dimensions, context, next) {
+    // Unlike other composed transforms, the render transform must be the
+    // outermost render function because it will re-render dynamically in
+    // response to pointer events.
+    render: composeRender(function (index, scales, values, dimensions, context, next) {
       const svg = context.ownerSVGElement;
 
       // Isolate state per-pointer, per-plot; if the pointer is reused by
@@ -157,7 +161,7 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, ...options} =
       svg.addEventListener("pointerleave", pointerleave);
 
       return render(null);
-    }
+    }, render)
   };
 }
 

src/mark.js

@@ -83,7 +83,6 @@ export class Mark {
       }
     }
     if (render != null) {
-      if (typeof render !== "function") throw new TypeError(`invalid render transform: ${render}`);
       this.render = composeRender(render, this.render);
     }
   }
@@ -136,9 +135,15 @@ export function marks(...marks) {
   return marks;
 }
 
-function composeRender(r1, r2) {
-  return function () {
-    return r1.call(this, ...arguments, r2.bind(this));
+export function composeRender(r1, r2) {
+  if (r1 == null) return r2 === null ? undefined : r2;
+  if (r2 == null) return r1 === null ? undefined : r1;
+  if (typeof r1 !== "function") throw new TypeError(`invalid render transform: ${r1}`);
+  if (typeof r2 !== "function") throw new TypeError(`invalid render transform: ${r2}`);
+  return function (i, s, v, d, c, next) {
+    return r1.call(this, i, s, v, d, c, (i, s, v, d, c) => {
+      return r2.call(this, i, s, v, d, c, next); // preserve this
+    });
   };
 }