enhancement: slider trigger on-change after on-mouse-up

This commit is contained in:
Tienson Qin
2024-02-05 11:06:47 +08:00
parent 7938022643
commit 80bf4a9cb4
2 changed files with 27 additions and 20 deletions

View File

@@ -56,22 +56,21 @@
(defn layout!
"Node forces documentation can be read in more detail here https://d3js.org/d3-force"
[nodes links link-dist charge-strength charge-range]
(let [nodes-count (count nodes)
simulation (forceSimulation nodes)]
(-> simulation
(let [simulation (forceSimulation nodes)]
(-> simulation
(.force "link"
;; The link force pushes linked nodes together or apart according to the desired link distance.
;; The strength of the force is proportional to the difference between the linked nodes distance
;; The link force pushes linked nodes together or apart according to the desired link distance.
;; The strength of the force is proportional to the difference between the linked nodes distance
;; and the target distance, similar to a spring force.
(-> (forceLink)
(.id (fn [d] (.-id d)))
(.distance link-dist)
(.links links)))
(.force "charge"
;; The many-body (or n-body) force applies mutually amongst all nodes.
;; The many-body (or n-body) force applies mutually amongst all nodes.
;; It can be used to simulate gravity or electrostatic charge.
(-> (forceManyBody)
;; The minimum distance between nodes over which this force is considered.
;; The minimum distance between nodes over which this force is considered.
;; A minimum distance establishes an upper bound on the strength of the force between two nearby nodes, avoiding instability.
(.distanceMin 1)
;; The maximum distance between nodes over which this force is considered.
@@ -80,7 +79,7 @@
;; For a cluster of nodes that is far away, the charge force can be approximated by treating the cluster as a single, larger node.
;; The theta parameter determines the accuracy of the approximation
(.theta 0.5)
;; A positive value causes nodes to attract each other, similar to gravity,
;; A positive value causes nodes to attract each other, similar to gravity,
;; while a negative value causes nodes to repel each other, similar to electrostatic charge.
(.strength charge-strength)))
(.force "collision"
@@ -90,8 +89,8 @@
(.force "x" (-> (forceX 0) (.strength 0.02)))
(.force "y" (-> (forceY 0) (.strength 0.02)))
(.force "center" (forceCenter))
;; The decay factor is akin to atmospheric friction; after the application of any forces during a tick,
;; each nodes velocity is multiplied by 1 - decay. As with lowering the alpha decay rate,
;; The decay factor is akin to atmospheric friction; after the application of any forces during a tick,
;; each nodes velocity is multiplied by 1 - decay. As with lowering the alpha decay rate,
;; less velocity decay may converge on a better solution, but risks numerical instabilities and oscillation.
(.velocityDecay 0.5))
(reset! *simulation simulation)

View File

@@ -986,16 +986,24 @@
[:div {:key "tippy"} ""])))
(rum/fragment {:key "tippy-children"} child))))
(rum/defc slider
[default-value {:keys [min max on-change]}]
[:input.cursor-pointer
{:type "range"
:value (int default-value)
:min min
:max max
:style {:width "100%"}
:on-change #(let [value (util/evalue %)]
(on-change value))}])
(rum/defcs slider < rum/reactive
{:init (fn [state]
(assoc state ::value (atom (first (:rum/args state)))))}
[state _default-value {:keys [min max on-change]}]
(let [*value (::value state)
value (rum/react *value)
value' (int value)]
(assert (int? value'))
[:input.cursor-pointer
{:type "range"
:value value'
:min min
:max max
:style {:width "100%"}
:on-change #(let [value (util/evalue %)]
(reset! *value value))
:on-mouse-up #(let [value (util/evalue %)]
(on-change value))}]))
(rum/defcs tweet-embed < (rum/local true :loading?)
[state id]