This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-10-14
Channels
- # announcements (1)
- # beginners (13)
- # calva (2)
- # cider (43)
- # cljdoc (11)
- # clojure (16)
- # clojure-spec (10)
- # clojure-uk (6)
- # clojurescript (7)
- # code-reviews (3)
- # core-matrix (1)
- # datascript (4)
- # datomic (7)
- # devcards (4)
- # figwheel-main (12)
- # fulcro (27)
- # hoplon (1)
- # lein-figwheel (1)
- # luminus (1)
- # nrepl (23)
- # off-topic (4)
- # planck (1)
- # re-frame (8)
- # reagent (7)
- # shadow-cljs (61)
- # spacemacs (7)
- # tools-deps (19)
i'm experiencing some behavior i don't understand, maybe someone here can help. i have set up components like this:
(defn canvas [{:keys [draw] :as attrs}]
(reagent/create-class
{:component-did-update
(fn [this]
(let [canvas (reagent/dom-node this)
width (.-offsetWidth canvas)
height (.-offsetHeight canvas)
ctx (.getContext canvas "2d")
pixel-ratio (.-devicePixelRatio js/window)]
(set! (. canvas -width) width)
(set! (. canvas -height) height)
;; retina drawing code:
;; set up dimensions, reset the transform matrix to the identity
;; matrix and automatically scale up
(when (> pixel-ratio 1)
(set! (. canvas -width) (* pixel-ratio width))
(set! (. canvas -height) (* pixel-ratio height))
(set! (.. canvas -style -width) (str width "px"))
(set! (.. canvas -style -height) (str height "px"))
(.setTransform ctx 1 0 0 1 0 0)
(.scale ctx pixel-ratio pixel-ratio))
(draw ctx)))
:reagent-render
(fn []
[:canvas.highres-canvas (dissoc attrs :draw)])}))
(defn draw-progress [ctx current-time duration]
(println "draw-progress" current-time duration))
(defn current-progress [current-time duration]
(println "current-progress" current-time duration)
[canvas {:class-name "current-progress-canvas"
:draw #(draw-progress % current-time duration)}])
now when current-progress
gets new props, it prints them correctly, but draw-progress
doesn't. as if i created a closure. i don't know where i should have done that though and how to avoid it
to be clear, draw-progress prints the same values over and over again, current-progress prints the updated ones.
ok, fixed this by passing the props of current-progress to canvas directly and then using (r/argv this)
in did-update
to extract them
@arne-clojurians The problem was that current-progress
creates new function with #( )
each render and passes that to canvas
but canvas
destructures the draw
fn only when the component is created, so component-did-update
always calls the first fn
To access up to date draw
property in component-did-update
you should access it through (r/props this)
@juhoteperi aaaah true! thanks for the explanation