Skip to content

Commit

Permalink
feat: toggle force simulation
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiensonqin
tiensonqin committed Feb 5, 2024
1 parent 80bf4a9 commit 51b90a6
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 40 deletions.
85 changes: 47 additions & 38 deletions src/main/frontend/components/page.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
[medley.core :as medley]
[promesa.core :as p]
[reitit.frontend.easy :as rfe]
[rum.core :as rum]))
[rum.core :as rum]
[frontend.extensions.graph.pixi :as pixi]))

(defn- get-page-name
[state]
Expand Down Expand Up @@ -552,6 +553,21 @@
(defonce *charge-strength (atom -600))
(defonce *charge-range (atom 600))

(rum/defcs simulation-switch < rum/reactive
[state]
(let [*simulation-paused? pixi/*simulation-paused?]
[:div.flex.flex-col.mb-2
[:p {:title "Pause simulation"}
"Pause simulation"]
(ui/toggle
(rum/react *simulation-paused?)
(fn []
(let [paused? @*simulation-paused?]
(if paused?
(pixi/resume-simulation!)
(pixi/stop-simulation!))))
true)]))

(rum/defc ^:large-vars/cleanup-todo graph-filters < rum/reactive
[graph settings forcesettings n-hops]
(let [{:keys [journal? orphan-pages? builtin-pages? excluded-pages?]
Expand All @@ -575,8 +591,8 @@
(let [new-settings (assoc settings key value)]
(config-handler/set-config! :graph/settings new-settings)))
set-forcesetting! (fn [key value]
(let [new-forcesettings (assoc forcesettings key value)]
(config-handler/set-config! :graph/forcesettings new-forcesettings)))
(let [new-forcesettings (assoc forcesettings key value)]
(config-handler/set-config! :graph/forcesettings new-forcesettings)))
search-graph-filters (state/sub :search/graph-filters)
focus-nodes (rum/react *focus-nodes)]
[:div.absolute.top-4.right-4.graph-filters
Expand Down Expand Up @@ -691,49 +707,42 @@
open?
[:div
[:p.text-sm.opacity-70.px-4
(let [;; c1 (count (:nodes graph))
;; s1 (if (> c1 1) "s" "")
c2 (count (:links graph))
s2 (if (> c2 1) "s" "")
]
;; (util/format "%d page%s, %d link%s" c1 s1 c2 s2)
(let [c2 (count (:links graph))
s2 (if (> c2 1) "s" "")]
(util/format "%d link%s" c2 s2))]
[:div.p-6
(simulation-switch)

[:div.flex.flex-col.mb-2
[:p {:title "Link Distance"}
[:p {:title "Link Distance"}
"Link Distance"]
(ui/tippy {:html [:div.pr-3 link-dist]}
(ui/slider (/ link-dist 10)
{:min 1 ;; 10
:max 18 ;; 180
;; :on-change #(reset! *link-dist (int %))}))]
:on-change #(let [value (int %)]
(reset! *link-dist (* value 10))
(set-forcesetting! :link-dist (* value 10)))}))]
;; :on-change #(let [value (util/evalue %)]
;; (reset! *link-dist value)
;; (set-forcesetting! :link-dist value))}))]
(ui/tippy {:html [:div.pr-3 link-dist]}
(ui/slider (/ link-dist 10)
{:min 1 ;; 10
:max 18 ;; 180
:on-change #(let [value (int %)]
(reset! *link-dist (* value 10))
(set-forcesetting! :link-dist (* value 10)))}))]
[:div.flex.flex-col.mb-2
[:p {:title "Charge Strength"}
[:p {:title "Charge Strength"}
"Charge Strength"]
(ui/tippy {:html [:div.pr-3 charge-strength]}
(ui/slider (/ charge-strength 100)
{:min -10 ;;-1000
:max 10 ;;1000
:on-change #(let [value (int %)]
(reset! *charge-strength (* value 100))
(set-forcesetting! :charge-strength (* value 100)))}))]
(ui/tippy {:html [:div.pr-3 charge-strength]}
(ui/slider (/ charge-strength 100)
{:min -10 ;;-1000
:max 10 ;;1000
:on-change #(let [value (int %)]
(reset! *charge-strength (* value 100))
(set-forcesetting! :charge-strength (* value 100)))}))]
[:div.flex.flex-col.mb-2
[:p {:title "Charge Range"}
[:p {:title "Charge Range"}
"Charge Range"]
(ui/tippy {:html [:div.pr-3 charge-range]}
(ui/slider (/ charge-range 100)
{:min 5 ;;500
:max 40 ;;4000
:on-change #(let [value (int %)]
(reset! *charge-range (* value 100))
(set-forcesetting! :charge-range (* value 100)))}))]

(ui/tippy {:html [:div.pr-3 charge-range]}
(ui/slider (/ charge-range 100)
{:min 5 ;;500
:max 40 ;;4000
:on-change #(let [value (int %)]
(reset! *charge-range (* value 100))
(set-forcesetting! :charge-range (* value 100)))}))]

[:a.opacity-70.opacity-100 {:on-click (fn []
(swap! *graph-forcereset? not)
Expand Down
20 changes: 18 additions & 2 deletions src/main/frontend/extensions/graph/pixi.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@

(defonce *graph-instance (atom nil))
(defonce *simulation (atom nil))
(defonce *simulation-paused?
(atom false))

(def Graph (gobj/get graphology "Graph"))

Expand Down Expand Up @@ -113,7 +115,20 @@
(when-let [instance (:pixi @*graph-instance)]
(.destroy instance)
(reset! *graph-instance nil)
(reset! *simulation nil)))
(reset! *simulation nil))
(reset! *simulation-paused? false))

(defn stop-simulation!
[]
(when-let [^js simulation @*simulation]
(.stop simulation)
(reset! *simulation-paused? true)))

(defn resume-simulation!
[]
(when-let [^js simulation @*simulation]
(.restart simulation))
(reset! *simulation-paused? false))

(defn- update-position!
[node obj]
Expand Down Expand Up @@ -161,7 +176,8 @@
#_:clj-kondo/ignore
(when-let [node (.get nodes node-key)]
(when-let [s @*simulation]
(when-not (.-active event)
(when-not (or (.-active event)
@*simulation-paused?)
(-> (.alphaTarget s 0.3)
(.restart))
(js/setTimeout #(.alphaTarget s 0) 2000))
Expand Down

0 comments on commit 51b90a6

Please sign in to comment.