diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index 531a00756..d78c78f48 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -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] @@ -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?] @@ -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 @@ -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 - [:div.flex.flex-col.mb-2 - [: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))}))] - [:div.flex.flex-col.mb-2 - [: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)))}))] - [:div.flex.flex-col.mb-2 - [: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)))}))] + (simulation-switch) + [:div.flex.flex-col.mb-2 + [: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 #(let [value (int %)] + (reset! *link-dist (* value 10)) + (set-forcesetting! :link-dist (* value 10)))}))] + [:div.flex.flex-col.mb-2 + [: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)))}))] + [:div.flex.flex-col.mb-2 + [: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)))}))] [:a.opacity-70.opacity-100 {:on-click (fn [] (swap! *graph-forcereset? not) diff --git a/src/main/frontend/extensions/graph/pixi.cljs b/src/main/frontend/extensions/graph/pixi.cljs index 4d5987f98..c922d3aba 100644 --- a/src/main/frontend/extensions/graph/pixi.cljs +++ b/src/main/frontend/extensions/graph/pixi.cljs @@ -10,6 +10,8 @@ (defonce *graph-instance (atom nil)) (defonce *simulation (atom nil)) +(defonce *simulation-paused? + (atom false)) (def Graph (gobj/get graphology "Graph")) @@ -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] @@ -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))