🐛 Fix some problems with scroll into view for layers

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

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 {}

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}

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))

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]