Compiling reactive SVG

[dennemark]

Hi,
I am trying to create a svg with triangulated points and want to get interactivity. I have tried multiple approaches but am getting confused.
I have the geom package, which can create hiccup-svg via convertTree.
I have a reactive variable: pts
The rdom docs say I could just use it within the $compile function. It converts the pts variable, but outputs: svg, [object Object]...etc. or if I use deref() it outputs the actual svg, but it seems to be loosing reactivity.
I also tried to do it via @thi.ng/atom, but I am not sure what advantages it would give me in this case compared to reactive and I ran into the same issues.
Since rdom offers so many different $el, $list, $replace, $tree elements, I am also confused, if I should use one of them and also which one? I guess convertTree is not equivalent to $tree.

Do reactive variables need to be within the $compile function and do they even need to be directly within the arguments or can they be living outside of it?

import * as html from "@thi.ng/hiccup-html";
import { convertTree } from "@thi.ng/hiccup-svg";
import { $compile } from "@thi.ng/rdom";
import * as geom from "@thi.ng/geom";
import * as vector from "@thi.ng/vectors";
// delaunator is an external package, it is faster than @thi.ng/geom-voronoi
import Delaunator from 'delaunator'
import { DVMesh } from "@thi.ng/geom-voronoi";
import { partition, repeatedly2d } from "@thi.ng/transducers";
import { reactive } from "@thi.ng/rstream";


const COUNT = 10
const pts = reactive([...repeatedly2d((x,y) => [x*500/COUNT-250,y*500/COUNT-250], COUNT,COUNT), [10,5],[10,75],[30,18],[40,18],[40,100]])

$compile( 
  html.div({},
        pts.map((x)=>{
          const coords = x.flatMap((pt)=>pt)
          const delaunay = new Delaunator(coords)
          const points = vector.Vec2.mapBuffer(delaunay.coords, delaunay.coords.length/2)

          return convertTree(
            geom.svgDoc(
              {width: "500px", height: "500px", viewBox: `-250 -250 500 500`,
           onmousedown: (e)=>{
               // can i also use pts.transform  here?
               pts.next(pts.deref()!.concat([Math.random()*100, Math.random()*100]))
               }
            },
              geom.group({ stroke: "red", 'stroke-width':0.1 }, [...partition(3, delaunay.triangles)].map((t) => geom.polygon(t.map((index)=>points[index]))))
            ))
        }) //.deref() shows the svg, without it I only see svg,[object, Object]
    ,
    html.h1({}, "Hello world! 👋")
  )
).mount(document.body);

[postspectacular]

Hi @dennemark — that's quite a lot of questions in one go 😉 - but I've just added some more notes which are hopefully helping...

New commit: 1d70c04

To copy from those docs:

Use $replace , $refresh or $switch to wrap any reactive values/subscriptions which produce actual HTML elements/components/subtrees (in hiccup format). See docs for these functions for details & examples. Not using any of these wrappers will result in unexpected outcomes.

Also see $wrapText, $wrapHtml or $wrapEl for DOM element related component wrappers.

The issue: If you're just placing a reactive value as child inside the component tree, like you did (i.e. not using any of these wrappers), then that value will only be auto-wrapped using $sub(), which only ever treats it as text and/or does a dumb stringification of that value (each time it changes) and therefore produces only garbage here... Both the docs for $compile() and $sub are mentioning that (i.e. $sub's using only $text() aka setting .innerText), but I'm open for suggestions how else this should/could be formulated better...

So the tl;dr version/solution for you is: Use $replace() to wrap the entire pts.map(...) to have the resulting SVG element fully replaced each time your reactive list of points changes...

import { $replace } from "@thi.ng/rdom";

$compile( 
  html.div({},
        $replace(pts.map((x)=>{ ... }))
  )
).mount(document.body);

Hope that makes more sense now! Also let me know if not... :)

[dennemark]

Wow I was so close.... now it works!

The explanation with $sub makes sense!
I realised rdom and rstream developed quite a lot, since last time I looked at it (quite a while ago).

Coming from react, I still need to translate some of the concepts.
In react I would write something like the following:

function MyComp(){
  const [pts, setPts] = useState([[0,0],[1,1]])
  useEffect(()=>{
     mount()
     return unmount()
  },[])
  return <svg ...  onClick={()=>setPts(....) }>{pts.map(.... } </svg>
}

Now in thi.ng my reactive variable is global (probably can also be local). The variable itself has its next() function equivalent to setPts, and it is convenient, since it is sitting on the variable itself.

const pts = reactive([[0,0],[1,1]])

And the $replace function could work like a component. While react allows multiple useEffects within one component, $replace has only one mount and unmount function. So composition would work a bit differently.

const MyComp = $replace(pts.map(.... return svg))

MyComp.mount(...)
MyComp.unmount(...)

$compile(MyComp).mount(document.body)

Probably I could also just make MyComp a function call and place its mount and unmount function within it, so it looks a bit more like a self contained component.

Thanks for all the links!!!

[dennemark]

Btw. the click counter on rdom could be made much simpler, but I guess it is only used as an example to show the inputTrigger function?

import { $compile, $inputTrigger } from "@thi.ng/rdom";
import { reactive } from "@thi.ng/rstream";
import { count, scan } from "@thi.ng/transducers";

// reactive value/stream setup
const clicks = reactive(true);

// button component with reactive label showing click count
$compile([
    "button",
    // $inputTrigger merely emits `true` onto the given reactive stream
    { onclick: $inputTrigger(clicks) },
    "clicks: ",
    // using transducers to transform click stream into a counter
    clicks.transform(scan(count(-1))),
]).mount(document.body);

Could also be written like this:

import { $compile } from "@thi.ng/rdom";
import { reactive } from "@thi.ng/rstream";

const clicks = reactive(0);

// button component with reactive label showing click count
$compile([
    "button",
    { onclick: ()=> count.next(count.deref()+1) }, //deref can be number or undefined here
    count
  ]).mount(document.body);

So .next() and .deref() are equivalent to react const [state, setState] = useState() with deref() being the state and next() the setState function. However careful: .getState() does not return the value, but rather what State the reactive variable is in, like idle, active etc.

Maybe it is nice to add a simple clicker as a teaser in the docs? Solid, Svelte, React all have it as their reactive example. And it only has $compile and reactive as examples, so readers do not need to investigate also the transducers or inputTrigger. Unfortuantely github does not offer a playground for the docs.