Plot.plot defines update, not Plot.mark

Author: Fil

src/facet.js

@@ -67,7 +67,7 @@ class Facet extends Mark {
     }
     return {index, channels: [...channels, ...subchannels]};
   }
-  render(index, scales, channels, dimensions, axes) {
+  render(index, scales, channels, dimensions, axes, update) {
     const {marks, marksChannels, marksIndex, marksIndexByFacet} = this;
     const {fx, fy} = scales;
     const fyMargins = fy && {marginTop: 0, marginBottom: 0, height: fy.bandwidth()};
@@ -84,7 +84,7 @@ class Facet extends Mark {
               .data(domain)
               .join("g")
               .attr("transform", ky => `translate(0,${fy(ky)})`)
-              .append((_, i) => (i === j ? axis1 : axis2).render(null, scales, null, fyDimensions));
+              .append((_, i) => (i === j ? axis1 : axis2).render(null, scales, null, fyDimensions, null, update));
           }
           if (fx && axes.x) {
             const domain = fx.domain();
@@ -96,7 +96,7 @@ class Facet extends Mark {
               .data(domain)
               .join("g")
               .attr("transform", kx => `translate(${fx(kx)},0)`)
-              .append((_, i) => (i === j ? axis1 : axis2).render(null, scales, null, fxDimensions));
+              .append((_, i) => (i === j ? axis1 : axis2).render(null, scales, null, fxDimensions, null, update));
           }
         })
         .call(g => g.selectAll()
@@ -110,7 +110,9 @@ class Facet extends Mark {
                   marksFacetIndex[i],
                   scales,
                   marksChannels[i],
-                  subdimensions
+                  subdimensions,
+                  null,
+                  update
                 );
                 if (node != null) this.appendChild(node);
               }

src/mark.js

@@ -45,20 +45,6 @@ export class Mark {
       })
     };
   }
-  update(g, values) {
-    // 🌶 this doesn't work in node
-    if (typeof window === 'undefined') return;
-    // 🌶 async (to allow setting up the initial values)
-    // todo: let the plot inform of the update method
-    const all = (this.values || (this.values = values)); // keep initial values
-    setTimeout(() => {
-      const svg = g.ownerSVGElement;
-      if (svg.value === values) values = all; // reset
-      console.log(values);
-      svg.value = values;
-        svg.dispatchEvent(new CustomEvent('input'));
-    }, 1);
-  }
 }
 
 // TODO Type coercion?

src/marks/bar.js

@@ -46,20 +46,21 @@ export class AbstractBar extends Mark {
     this.rx = number(rx);
     this.ry = number(ry);
   }
-  render(I, scales, channels, dimensions) {
+  render(I, scales, channels, dimensions, axes, update) {
     const {rx, ry} = this;
     const {color} = scales;
     const {z: Z, title: L, fill: F, stroke: S, picker: J} = channels;
     const index = filter(I, ...this._positions(channels), F, S);
     if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
+    const values = J && J.flat();
     const node = create("svg:g")
         .call(applyIndirectStyles, this)
         .call(this._transform, scales)
         .call(g => g.selectAll()
           .data(index)
           .join("rect")
             .call(J ? rect => rect
-              .on("click", (event, i) => super.update(event.currentTarget, J[i]))
+              .on("click", (event, i) => update(values, J[i]))
               : () => {}
             )
             .call(applyDirectStyles, this)
@@ -73,8 +74,7 @@ export class AbstractBar extends Mark {
             .call(ry != null ? rect => rect.attr("ry", ry) : () => {})
             .call(title(L)))
       .node();
-    console.log({J});
-    if (J) this.update(node, J.flat());
+    if (values) update(values, values);
     return node;
   }
   _x({x}, {x: X}, {marginLeft}) {

src/marks/rect.js

@@ -55,19 +55,23 @@ export class Rect extends Mark {
   render(
     I,
     {x, y, color},
-    {x1: X1, y1: Y1, x2: X2, y2: Y2, z: Z, title: L, fill: F, stroke: S, picker: J}
+    {x1: X1, y1: Y1, x2: X2, y2: Y2, z: Z, title: L, fill: F, stroke: S, picker: J},
+    dimensions,
+    axes,
+    update
   ) {
     const {rx, ry} = this;
     const index = filter(I, X1, Y2, X2, Y2, F, S);
     if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
+    const values = J && J.flat();
     const node = create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y)
         .call(g => g.selectAll()
           .data(index)
           .join("rect")
             .call(J ? rect => rect
-              .on("click", (event, i) => super.update(event.currentTarget, J[i]))
+              .on("click", (event, i) => update(values, J[i]))
               : () => {}
             )
             .call(applyDirectStyles, this)
@@ -81,7 +85,7 @@ export class Rect extends Mark {
             .attr("stroke", S && (i => color(S[i])))
             .call(title(L)))
       .node();
-    if (J) this.update(node, J.flat());
+    if (values) update(values, values);
     return node;
   }
 }

src/plot.js

@@ -82,11 +82,19 @@ export function plot(options = {}) {
         if (typeof style === "string") this.style = style;
         else Object.assign(this.style, style);
       });
+  
+  function update(values, sel) {
+    const node = svg.node();
+    node.value = (node.value === sel) ? values : sel;
+    if (typeof window === 'undefined') return;
+    console.log(node.value);
+    node.dispatchEvent(new CustomEvent('input'));
+  }
 
   for (const mark of marks) {
     const channels = markChannels.get(mark);
     const index = markIndex.get(mark);
-    const node = mark.render(index, scales, channels, dimensions, axes);
+    const node = mark.render(index, scales, channels, dimensions, axes, update);
     if (node != null) svg.append(() => node);
   }