From 8d4612c683de163dc456d616bdbcdad24021a9a2 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 1 Feb 2022 13:36:12 +0100
Subject: [PATCH] :bug: Fix some problems with scroll into view for layers

---
 frontend/src/app/main/ui/comments.cljs           |  2 +-
 .../app/main/ui/workspace/sidebar/layers.cljs    | 16 +++++++++++-----
 .../ui/workspace/sidebar/options/common.cljs     |  3 ++-
 .../app/main/ui/workspace/sidebar/sitemap.cljs   |  2 +-
 frontend/src/app/util/dom.cljs                   | 15 ++++++---------
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs
index f65abba074..7677ba4451 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 6d3fff53da..6fbc68a261 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 733fd420b8..7e42847e26 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 e60ef66017..cbc66fdc73 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 6aab30c07b..b202fab0ff 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]