I’m designing node-editor type GUI (think Apple’s Quartz Composer) using reagent to render SVG and I’m trying to figure out how to represent the data. There will be draggable boxes with little round sockets, which can be connected by dragging lines between them. This means I need to track individual socket coordinates in order to render lines between them. Ideally, I’d leave that information in the DOM and access it using something like a standard DOM (.getBoundingClientRect socket-element) only when re-rendering the connections. The problem here is: how do I get socket-element (the :circle) if I render boxes this way: (defn box [b] [:g [:rect …] (for [s (:sockets b)] [:circle {… s ...}])]

or maybe I should track coordinates inside the atom of everything and swap! them whenever boxes change?

but I still need to get the real coordinates, whuch are calculated by svg after applying all transforms etc.

@nooga: you can select these circles using standard document.querySelector inside :component-did-mount

ah ok, so I just give them html ids then?

ids or some data- attributes. Maybe React refs can be used here but i'm not sure it can be used with lists

thanks, I’ll give it a try

hi, changed a bunch of stuff and now i’m getting "Uncaught Error: Assert failed: Could not find ReactDOMServer”. Using re-frame + figwheel. Can’t find the cause, any idea?

theres no stack trace. just points to reagents server.cljs file

What version of reagent are you using?

fixed. but not sure how it resulted in that error message. I had a problem with logic in a ui function which returned an empty vector

actually still getting the error message but app is running fine as far as i can tell

version 0.6.0-alpha

Out of curiosity try using reagent 0.5.1, doing a clean, then restarting figwheel

i think this fixes it but its not out yet: https://github.com/reagent-project/reagent/commit/f76bce6a2f559deaec6f392203add9521cb7c197

I have a component that contains a button and an input, how do I set focus on the input from the button onClick event handler?

(reagent/dom-node this) + some js interop may be of use

@afhammad: ^

@rafd what is this?

@afhammad: here is an example using (reagent/dom-node this): https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/draggable

@afhammad: https://github.com/reagent-project/reagent/issues/5 (note: cloact is the former name of reagent

you many need to use a type-3 reagent component

wish i could help more but just got hit with a migraine

thanks @gadfly361 @rafd. all the examples i see are from within component-did-mount, it seems like the only way to access the dom node, which makes it tricky to access from a different element (i.e the button being clicked)