mirror of
https://github.com/logseq/logseq.git
synced 2026-04-24 22:25:01 +00:00
enhancement: slider trigger on-change after on-mouse-up
This commit is contained in:
@@ -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 node’s 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 node’s 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)
|
||||
|
||||
@@ -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]
|
||||
|
||||
Reference in New Issue
Block a user