🐛 Fix some problems with scroll into view for layers

This commit is contained in:
alonso.torres 2022-02-01 13:36:12 +01:00
parent e352c70013
commit 8d4612c683
5 changed files with 21 additions and 17 deletions

View file

@ -300,7 +300,7 @@
(mf/deps thread comments-map) (mf/deps thread comments-map)
(fn [] (fn []
(when-let [node (mf/ref-val ref)] (when-let [node (mf/ref-val ref)]
(.scrollIntoViewIfNeeded ^js node)))) (dom/scroll-into-view-if-needed! node))))
(when (some? comment) (when (some? comment)
[:div.thread-content [:div.thread-content

View file

@ -180,12 +180,17 @@
:name (:name item)})] :name (:name item)})]
(mf/use-effect (mf/use-effect
(mf/deps selected) (mf/deps selected? selected)
(fn [] (fn []
(let [subid (let [single? (= (count selected) 1)
(when (and (= (count selected) 1) selected?) node (mf/ref-val dref)
(ts/schedule-on-idle
#(.scrollIntoView (mf/ref-val dref) #js {:block "nearest", :behavior "smooth"})))] subid
(when (and single? selected?)
(ts/schedule
100
#(dom/scroll-into-view! node #js {:block "nearest", :behavior "smooth"})))]
#(when (some? subid) #(when (some? subid)
(rx/dispose! subid))))) (rx/dispose! subid)))))
@ -247,6 +252,7 @@
{::mf/wrap [#(mf/memo % =)]} {::mf/wrap [#(mf/memo % =)]}
[{:keys [objects] :as props}] [{:keys [objects] :as props}]
(let [selected (mf/deref refs/selected-shapes) (let [selected (mf/deref refs/selected-shapes)
selected (hooks/use-equal-memo selected)
root (get objects uuid/zero)] root (get objects uuid/zero)]
[:ul.element-list [:ul.element-list
[:& hooks/sortable-container {} [:& hooks/sortable-container {}

View file

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.common (ns app.main.ui.workspace.sidebar.options.common
(:require (:require
[app.util.dom :as dom]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(mf/defc advanced-options [{:keys [visible? children]}] (mf/defc advanced-options [{:keys [visible? children]}]
@ -15,7 +16,7 @@
(fn [] (fn []
(when-let [node (mf/ref-val ref)] (when-let [node (mf/ref-val ref)]
(when visible? (when visible?
(.scrollIntoViewIfNeeded ^js node))))) (dom/scroll-into-view-if-needed! node)))))
(when visible? (when visible?
[:div.advanced-options-wrapper {:ref ref} [:div.advanced-options-wrapper {:ref ref}

View file

@ -107,7 +107,7 @@
(fn [] (fn []
(when selected? (when selected?
(let [node (mf/ref-val dref)] (let [node (mf/ref-val dref)]
(.scrollIntoViewIfNeeded ^js node))))) (dom/scroll-into-view-if-needed! node)))))
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps (:edition @local)) (mf/deps (:edition @local))

View file

@ -407,22 +407,19 @@
(defn scroll-into-view! (defn scroll-into-view!
([^js element] ([^js element]
(when (some? element) (scroll-into-view! element false))
(.scrollIntoView element false)))
([^js element scroll-top] ([^js element options]
(when (some? element) (when (some? element)
(.scrollIntoView element scroll-top)))) (.scrollIntoView element options))))
(defn scroll-into-view-if-needed! (defn scroll-into-view-if-needed!
([^js element] ([^js element]
(.log js/console "SCROLL INTO VIEW" element) (scroll-into-view-if-needed! element false))
(when (some? element)
(.scrollIntoViewIfNeeded ^js element false)))
([^js element scroll-top] ([^js element options]
(when (some? element) (when (some? element)
(.scrollIntoViewIfNeeded ^js element scroll-top)))) (.scrollIntoViewIfNeeded ^js element options))))
(defn is-in-viewport? (defn is-in-viewport?
[^js element] [^js element]