improve cursor scroll

This commit is contained in:
llcc
2022-05-05 09:41:28 +08:00
parent fba44bbef2
commit a73bc7da0d
4 changed files with 20 additions and 16 deletions

View File

@@ -314,7 +314,7 @@
(defn mobile-bar-commands
[parent-id]
(let [viewport-fn (fn [] (when-let [input (gdom/getElement parent-id)]
(util/scroll-editor-cursor input :move-to-one-quarter? true)
(util/scroll-editor-cursor input :to-vw-one-quarter? true)
(.focus input)))]
(zipmap mobile-bar-icons-keywords
[(mobile-bar-command editor-handler/cycle-todo! "checkbox" true)

View File

@@ -1681,7 +1681,8 @@
(move-nodes blocks))
(when-let [input-id (state/get-edit-input-id)]
(when-let [input (gdom/getElement input-id)]
(.focus input))))
(.focus input)
(js/setTimeout #(util/scroll-editor-cursor input) 100))))
(let [ids (state/get-selection-block-ids)]
(when (seq ids)
(let [lookup-refs (map (fn [id] [:block/uuid id]) ids)

View File

@@ -19,8 +19,8 @@
(js/setTimeout #(keyboards-handler/esc-save! state) 100)
(when-let [element (gdom/getElement id)]
(util/scroll-editor-cursor element :to-vw-center? true)
(.focus element)))
(.focus element)
(js/setTimeout #(util/scroll-editor-cursor element :to-vw-center? true) 50)))
state)
(defn did-remount!

View File

@@ -1341,44 +1341,47 @@
(def keyboard-height (atom nil))
#?(:cljs
(defn scroll-editor-cursor
[^js/HTMLElement el & {:keys [to-vw-one-quarter? to-vw-center?]}]
[^js/HTMLElement el & {:keys [to-vw-one-quarter?]}]
(when (and el (native-platform?))
(let [box-rect (.getBoundingClientRect el)
box-top (.-top box-rect)
box-bottom (.-bottom box-rect)
header-height (-> (gdom/getElementByClass "cp__header")
.-clientHeight)
main-node (app-scroll-container-node)
scroll-top (.-scrollTop main-node)
current-pos (get-selection-start el)
cursor-top (some-> (gdom/getElement "mock-text")
mock-text (some-> (gdom/getElement "mock-text")
gdom/getChildren
array-seq
(nth-safe current-pos)
.-offsetTop)
(nth-safe current-pos))
offset-top (and mock-text (.-offsetTop mock-text))
offset-height (and mock-text (.-offsetHeight mock-text))
cursor-y (if cursor-top (+ cursor-top box-top) box-bottom)
cursor-y (if offset-top (+ offset-top box-top offset-height 2) box-bottom)
vw-height (or (.-height js/window.visualViewport)
(.-clientHeight js/document.documentElement))
;; mobile toolbar height: 40px
scroll (- cursor-y (- vw-height (+ @keyboard-height 40)))]
(cond
(and to-vw-one-quarter? (> cursor-y (* vw-height 0.4)))
(set! (.-scrollTop main-node) (+ scroll-top (- cursor-y (/ vw-height 4))))
(and to-vw-center? (> cursor-y (/ vw-height 2)))
(.scrollBy main-node (bean/->js {:top (- cursor-y (/ vw-height 2))}))
(and (< cursor-y (+ header-height offset-height 4)) ;; 4 is top+bottom padding for per line
(>= cursor-y header-height))
(.scrollBy main-node (bean/->js {:top (- (+ offset-height 4))}))
(and (< cursor-y 86) (>= cursor-y 62))
(.scrollBy main-node (bean/->js {:top -24}))
(< cursor-y 56)
(< cursor-y header-height)
(let [_ (.scrollIntoView el true)
main-node (app-scroll-container-node)
scroll-top (.-scrollTop main-node)]
(set! (.-scrollTop main-node) (- scroll-top (/ vw-height 4))))
(> scroll 0)
(set! (.-scrollTop main-node) (+ scroll-top 24))
(set! (.-scrollTop main-node) (+ scroll-top scroll))
:else
nil)))))