pointer dataflow (#1630)

* closes #1628

* dispatch on render

* textarea

* “debounce”

---------

Co-authored-by: Mike Bostock <mbostock@gmail.com>

Author: Fil

src/interactions/pointer.js

@@ -22,6 +22,7 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, render, ...op
     // response to pointer events.
     render: composeRender(function (index, scales, values, dimensions, context, next) {
       const svg = context.ownerSVGElement;
+      const {data} = context.getMarkState(this);
 
       // Isolate state per-pointer, per-plot; if the pointer is reused by
       // multiple marks, they will share the same state (e.g., sticky modality).
@@ -118,8 +119,9 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, render, ...op
           }
           g.replaceWith(r);
         }
-        state.roots[renderIndex] = r;
-        return (g = r);
+        state.roots[renderIndex] = g = r;
+        context.dispatchValue(i == null ? null : data[i]);
+        return r;
       }
 
       function pointermove(event) {

src/plot.d.ts

@@ -370,6 +370,9 @@ export interface Plot {
    * scales.
    */
   legend(name: ScaleName, options?: LegendOptions): SVGSVGElement | HTMLElement | undefined;
+
+  /** For interactive plots, the current value. */
+  value?: any;
 }
 
 /**

src/plot.js

@@ -153,6 +153,7 @@ export function plot(options = {}) {
   const context = createContext(options);
   const document = context.document;
   const svg = creator("svg").call(document.documentElement);
+  let figure = svg; // replaced with the figure element, if any
   context.ownerSVGElement = svg;
   context.className = className;
   context.projection = createProjection(options, subdimensions);
@@ -169,6 +170,13 @@ export function plot(options = {}) {
     return {...state, channels: {...state.channels, ...facetState?.channels}};
   };
 
+  // Allows e.g. the pointer transform to support viewof.
+  context.dispatchValue = (value) => {
+    if (figure.value === value) return;
+    figure.value = value;
+    figure.dispatchEvent(new Event("input", {bubbles: true}));
+  };
+
   // Reinitialize; for deriving channels dependent on other channels.
   const newByScale = new Set();
   for (const [mark, state] of stateByMark) {
@@ -311,7 +319,6 @@ export function plot(options = {}) {
   }
 
   // Wrap the plot in a figure with a caption, if desired.
-  let figure = svg;
   const legends = createLegends(scaleDescriptors, context, options);
   if (caption != null || legends.length > 0) {
     figure = document.createElement("figure");