I am trying to override onload function of document and Image in ClojureScript. I think that set! should be possible to do it, but i am not getting any success. Relevant code is as follows :
(defn load-image [img-path]
(let [img (js/Image.)]
(do (set! (.-src img) img-path)
img)))
(defn add-img-canvas [img-path width height]
(let [img (load-image img-path)]
(set! (.-onload img)
(fn [] ;; This function is never called.
(let [canvas (get-scaled-canvas img width height)]
(do (pr-str canvas)
(swap! game-state :canvas canvas)))))))
(defn hello-world []
(let [count (atom 1)]
(fn []
[:div
[:h1 (:text #game-state)]
[:div (do (swap! count inc) (str "count is " #count))]
[:canvas (:canvas #game-state)]])))
(reagent/render-component [hello-world]
(. js/document (getElementById "app")))
(set! (.-onload js/document)
(fn [] ;; This function is also never called.
(add-img-canvas (:img-src game-state) 100 130)))
;;(. js/document onload)
Anonymous functions in add-img-canvas is not getting called. What am i doing wrong ?
I think it may be down to the difference between document.onload vs window.onload. The latter does work as expected.
See this for more details between the two.
Related
My Reagent component ist a simple div that has a component-did-mount and a component-did-update hook. It draws notes using vexflow.
(defn note-bar [notes]
(reagent/create-class
{:display-name "Note Bar"
:reagent-render (fn [notes]
^{:key notes} ;; force update
[:div#note-bar])
:component-did-mount (fn [this]
(draw-system-with-chord notes))
:component-did-update (fn [this]
(draw-system-with-chord notes))}))
It is used like this.
(defn exercise-one []
(let [note (re-frame/subscribe [:exercise-one/note])]
[:div
[note-bar/note-bar #note]
[other]
[components]]))
My event code is the following.
(defn store-exercise-one-note [db [_ note]]
(assoc-in db [:exercise-one :note-bar :note] note))
(re-frame/reg-event-db
:exercise-one/store-note
store-exercise-one-note)
(defn query-exercise-one-note [db]
(or (get-in db [:exercise-one :note-bar :note])
[{:octave 4 :key :c}]))
(re-frame/reg-sub
:exercise-one/note
query-exercise-one-note)
I verified that the app-db value changes using 10x. Yet the note bar only displays a different note when Hot Reloading kicks in. I believe this is due to the component-did-update hook not being called.
My question is, is this the right way to bind a JavaScript library that renders something? If so, why does my component not update?
The following fixed the component. See the documentation about form-3 components here
(defn note-bar [notes]
(reagent/create-class
{:display-name "Note Bar"
:reagent-render (fn [notes]
^{:key notes} ;; force update
[:div#note-bar])
:component-did-mount (fn []
(draw-system-with-chord notes))
:component-did-update (fn [this]
(let [new-notes (rest (reagent/argv this))]
(apply draw-system-with-chord new-notes)))}))
This has been bugging me for days. I have a web app that lets the user open documents from their local machine. I'm using the FileReader API for the first time.
It works correctly except for one use case.
Open a document file.
Programmatically create a new document, overwriting the existing one.
Open the same file as above.
When this sequence is executed, the second attempt fails silently (except that the file is not loaded).
Here is an example Reagent program (created from the figwheel-main template) that illustrates the problem.
(ns a-bad-button.core
(:require [reagent.core :as r]))
(def app-state-ratom (r/atom nil))
(defn new-doc []
{:doc-text "Some MINIMAL text to play with."})
(defn add-new-button
[aps]
(fn [aps]
[:input.tree-demo--button
{:type "button"
:value "New"
:on-click #(reset! aps (new-doc))}]))
(defn load-doc-data!
[aps file-data]
(swap! aps assoc :doc-text file-data))
(defn handle-file-open-selection
[aps evt]
(let [js-file-reader (js/FileReader.)]
(set! (.-onload js-file-reader)
(fn [evt] (load-doc-data! aps (-> evt .-target .-result))))
(.readAsText js-file-reader (aget (.-files (.-target evt)) 0))))
(defn add-open-button
[aps]
(fn [aps]
[:div
[:input {:type "file" :id "file-open-id"
:style {:display "none"}
:on-change #(handle-file-open-selection aps %)}]
[:input {:type "button"
:value "Open"
:on-click #(.click (.getElementById js/document "file-open-id"))}]]))
(defn a-bad-button
[aps]
(fn [aps]
[:div
[:h4 "A Bad Button"]
[:p#doc-text-p (or (:doc-text #aps) "Loaded text will go here.")]
[add-new-button aps]
[add-open-button aps]]))
(defn mount! [el]
(reset! app-state-ratom (new-doc))
(r/render-component [a-bad-button app-state-ratom] el))
(defn mount-app-element []
(when-let [el (.getElementById js/document "app")]
(mount! el)))
(mount-app-element)
(defn ^:after-load on-reload []
(mount-app-element))
With println debugging messages, it appears that execution reaches the :on-click handler in the add-open-button function, but the handler, handle-file-open-selection, is never reached or executed.
The failure occurs on Safari, Opera, Brave, and Vivaldi browsers. Files open as expected on Firefox.
Has anyone seen this before and fixed it?
Similar questions:
Filereader - upload same file again not working
FileReader onload not getting fired when selecting same file in Chrome
Basically, the problem is that onChange will not trigger when selecting the same file. One workaround is to set the value of the file input before the file browser opens to something like "", to always trigger an onChange event. In your case, it could look like changing your handle-file-open-selection function to:
(defn handle-file-open-selection
[aps evt]
(let [js-file-reader (js/FileReader.)]
(set! (.-onload js-file-reader)
(fn [evt]
(load-doc-data! aps (-> evt .-target .-result))))
(.readAsText js-file-reader (aget (.-files (.-target evt)) 0))
;; add this
(set! (.-value (.getElementById js/document "file-open-id")) "")
))
I have some code:
(defn second-panel []
[:div
[:h1 "Hello "]
])
(defn root-container []
(second-panel)
(let [name (re-frame/subscribe [::subs/name])]
[:div
[:h1 "Hello from " #name]
]))
but only the root-container component renders. Why is my second-panel function not rendering?
You have to add (second-panel) to your div. The return value of (second-panel) is currently ignored.
(defn root-container []
(let [name (re-frame/subscribe [::subs/name])]
[:div
(second-panel)
[:h1 "Hello from " #name]
]))
The correct solution to returning multiple virtual DOM elements from a function without wrapping them in a container element is to use a Fragment. In reagent this is handled by the :<> special keyword.
(defn second-panel []
[:div
[:h1 "Hello "]])
(defn root-container []
(let [name (re-frame/subscribe [::subs/name])]
[:<>
[second-panel]
[:div
[:h1 "Hello from " #name]
]]))
;; or, with the nested let. both variants are fine.
(defn root-container []
[:<>
[second-panel]
(let [name (re-frame/subscribe [::subs/name])]
[:div
[:h1 "Hello from " #name]
])])
There is also a different in (second-panel) and [second-panel] since (second-panel) will actually call the function directly which means it will not behave like a regular reagent function but instead become part of the caller. You should prefer the [second-panel] notation for all "component" type functions.
I have this reagent component that uses setInterval to change its state:
(defn foo []
(let [value (atom 1)]
(js/setInterval (fn [] (reset! value (rand-int 100)) (println #value)) 1000)
(fn []
[:p #value])))
I can see the value being printed, a different one each time, but the html doesn't change. Why is that?
And the answer is that I should have been using a reagent.core/atom instead of an atom.
Consider the following Reagent components:
(defn sub-compo [n]
(let [state (r/atom {:colors (cycle [:red :green])})]
(fn []
[:div {:style {:color (-> #state :colors first)}
:on-mouse-move #(swap! state update :colors rest)}
"a very colorful representation of our number " n "."])))
(defn compo []
(let [state (r/atom {:n 0})]
(fn []
[:div {:on-click #(swap! state update :n inc)}
"Number is " (#state :n) "."
[sub-compo (#state :n)]])))
I tried to make up an example, in which a sub component should depend on the state of its parent component. However the sub component should have an internal state as well. The above does not work properly. When the state in compo changes sub-compo is not initialized a new.
Which would be the way to go here, in order to let sub-compo be in sync with comp? Whenever the state of comp changes sub-comp should actually be initialized anew, meaning it's color state is set to the initial value again.
Here's a solution that does at least what I want. It uses a cursor and a watch. But maybe there is a simpler way to do so, anyways:
(defn sub-compo [n]
(let [init-state {:colors (cycle [:red :green])}
state (r/atom init-state)]
(add-watch n :my (fn []
(reset! state init-state)))
(fn []
[:div {:style {:color (-> #state :colors first)}
:on-mouse-move #(swap! state update :colors rest)}
"a very colorful representation of our number " #n "."])))
(defn compo []
(let [state (r/atom {:n 0})]
(fn []
[:div {:on-click #(swap! state update :n inc)}
"Number is " (#state :n) "."
[sub-compo (r/cursor state [:n])]])))
The above does not work properly. When the state in compo changes
sub-compo is not initialized a new.
This is because the inner function of sub-compo needs to receive the argument n as well.
Whenever the state of comp changes sub-comp should actually be
initialized anew, meaning it's color state is set to the initial value
again.
You could use :component-will-receive-props for this.
This worked for me:
(defn sub-compo [n]
(let [init {:colors (cycle [:red :green])}
state (r/atom init)]
(r/create-class
{:component-will-receive-props
(fn [this [_ n]]
(reset! state init))
:reagent-render
(fn [n]
[:div {:style {:color (-> #state :colors first)}
:on-mouse-move #(swap! state update :colors rest)}
"a very colorful representation of our number " n "."])})))