Clojurians Log v2

I want to use matter in my hoplon + reveal presentation to do some rigid body demos. I’m thinking of something like the following - but I’m guessing init-matter! will fail here because the dom element doesn’t exist yet (it needs the dom element that it plans to render into) How do I structure this?

(defn init-matter!
  "Initializes matter in the provided id, returns state"
  [id]
  (let [Engine (.-Engine Matter)
        Render (.-Render Matter)
        Runner (.-Runner Matter)
        Bodies (.-Bodies Matter)
        Composite (.-Composite Matter)
        engine (.create Engine)
        runner (.create Runner)
        render (.create Render
                         #js {:element (.getElementById js/document id)
                              :engine engine
                              :wireframes false})]
    (.run Render render)
    (.run Runner runner engine)
    {:render render
     :engine engine
     :runner runner}))

(defn visualization
  []
  (let [state (init-matter! "visualization")]
    (slide
      (h/p :class (css :text-6xl) "Visualization")
      (h/div
        :style {:width "300px"
                :height "300px"}
        :id "visualization"))))

^ ended up using with-init! for this - is that wrong?

If you will add the element when first constructing the page it will be fine. If you are adding the element in a dynamic way it will be better to use when-dom or with-dom. I have an example using when-dom https://github.com/nomotosolucoes/ritmo-de-aprender/blob/main/src/aprender/view.cljs#L137

Ah interesting, thanks! What’s the difference between when-dom and with-dom?

when-dom is a function and it receives an anonymous function as argument, with-dom is a macro and you pass it forms that will be run, the macro wraps it in an function and calls when-dom. https://github.com/hoplon/hoplon/blob/master/src/hoplon/core.clj#L195-L198

ah great, thank you 🙂