diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index f65abba07..7677ba445 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -300,7 +300,7 @@ (mf/deps thread comments-map) (fn [] (when-let [node (mf/ref-val ref)] - (.scrollIntoViewIfNeeded ^js node)))) + (dom/scroll-into-view-if-needed! node)))) (when (some? comment) [:div.thread-content diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 6d3fff53d..6fbc68a26 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -180,12 +180,17 @@ :name (:name item)})] (mf/use-effect - (mf/deps selected) + (mf/deps selected? selected) (fn [] - (let [subid - (when (and (= (count selected) 1) selected?) - (ts/schedule-on-idle - #(.scrollIntoView (mf/ref-val dref) #js {:block "nearest", :behavior "smooth"})))] + (let [single? (= (count selected) 1) + node (mf/ref-val dref) + + subid + (when (and single? selected?) + (ts/schedule + 100 + #(dom/scroll-into-view! node #js {:block "nearest", :behavior "smooth"})))] + #(when (some? subid) (rx/dispose! subid))))) @@ -247,6 +252,7 @@ {::mf/wrap [#(mf/memo % =)]} [{:keys [objects] :as props}] (let [selected (mf/deref refs/selected-shapes) + selected (hooks/use-equal-memo selected) root (get objects uuid/zero)] [:ul.element-list [:& hooks/sortable-container {} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs index 733fd420b..7e42847e2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.common (:require + [app.util.dom :as dom] [rumext.alpha :as mf])) (mf/defc advanced-options [{:keys [visible? children]}] @@ -15,7 +16,7 @@ (fn [] (when-let [node (mf/ref-val ref)] (when visible? - (.scrollIntoViewIfNeeded ^js node))))) + (dom/scroll-into-view-if-needed! node))))) (when visible? [:div.advanced-options-wrapper {:ref ref} diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index e60ef6601..cbc66fdc7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -107,7 +107,7 @@ (fn [] (when selected? (let [node (mf/ref-val dref)] - (.scrollIntoViewIfNeeded ^js node))))) + (dom/scroll-into-view-if-needed! node))))) (mf/use-layout-effect (mf/deps (:edition @local)) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 6aab30c07..b202fab0f 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -407,22 +407,19 @@ (defn scroll-into-view! ([^js element] - (when (some? element) - (.scrollIntoView element false))) + (scroll-into-view! element false)) - ([^js element scroll-top] + ([^js element options] (when (some? element) - (.scrollIntoView element scroll-top)))) + (.scrollIntoView element options)))) (defn scroll-into-view-if-needed! ([^js element] - (.log js/console "SCROLL INTO VIEW" element) - (when (some? element) - (.scrollIntoViewIfNeeded ^js element false))) + (scroll-into-view-if-needed! element false)) - ([^js element scroll-top] + ([^js element options] (when (some? element) - (.scrollIntoViewIfNeeded ^js element scroll-top)))) + (.scrollIntoViewIfNeeded ^js element options)))) (defn is-in-viewport? [^js element]