Refactoring scrolling viewport

frontend/src/uxbox/main/ui/workspace.cljs

@@ -47,18 +47,11 @@
   [own]
   (let [[projectid pageid] (:rum/args own)
         dom (mx/ref-node own "workspace-canvas")
-        scroll-to-center (fn []
-            ;; Set page scroll position
-            (let [viewport-width (.-offsetWidth dom)
-                  viewport-height (.-offsetHeight dom)
-                  page-width (get-in @wb/page-ref [:metadata :width])
-                  page-height (get-in @wb/page-ref [:metadata :height])]
-              (set! (.-scrollLeft dom) (- (* (+ 1200 (/ page-width 2)) @wb/zoom-ref) (/ viewport-width 2)))
-              (set! (.-scrollTop dom) (- (* (+ 1200 (/ page-height 2)) @wb/zoom-ref) (/ viewport-height 2)))))
+        scroll-to-page-center #(scroll/scroll-to-page-center dom @wb/page-ref)
         sub1 (scroll/watch-scroll-interactions own)
-        sub2 (rx/subscribe wb/page-id-ref-s scroll-to-center)]
+        sub2 (rx/subscribe wb/page-id-ref-s scroll-to-page-center)]
 
-    (scroll-to-center)
+    (scroll-to-page-center)
 
     (st/emit! (udp/watch-page-changes pageid)
               (udu/watch-page-changes pageid)
@@ -95,24 +88,16 @@
 (defn- on-wheel
   [own event]
   (when (kbd/ctrl? event)
-    (let [prev-zoom @wb/zoom-ref]
+    (let [prev-zoom @wb/zoom-ref
+          dom (mx/ref-node own "workspace-canvas")
+          scroll-position (scroll/get-current-position-absolute dom)
+          mouse-point @wb/mouse-viewport-a]
       (dom/prevent-default event)
       (dom/stop-propagation event)
       (if (pos? (.-deltaY event))
         (st/emit! (dw/increase-zoom))
         (st/emit! (dw/decrease-zoom)))
-
-      (let [
-          dom (mx/ref-node own "workspace-canvas")
-          scroll-position (gpt/divide @wb/scroll-a prev-zoom)
-          mouse-position (gpt/divide @wb/mouse-viewport-a prev-zoom)
-          viewport-offset-x (* (- (:x mouse-position) (:x scroll-position)) prev-zoom)
-          viewport-offset-y (* (- (:y mouse-position) (:y scroll-position)) prev-zoom)
-          new-scroll-position-x (- (* (:x mouse-position) @wb/zoom-ref) viewport-offset-x)
-          new-scroll-position-y (- (* (:y mouse-position) @wb/zoom-ref) viewport-offset-y)
-        ]
-        (set! (.-scrollLeft dom) new-scroll-position-x )
-        (set! (.-scrollTop dom) new-scroll-position-y)))))
+      (scroll/scroll-to-point dom mouse-point scroll-position))))
 
 (defn- workspace-render
   [own]

frontend/src/uxbox/main/ui/workspace/base.cljs

@@ -65,6 +65,8 @@
   (-> (l/in [:workspace :zoom])
       (l/derive st/state)))
 
+(def zoom-ref-s (rx/from-atom zoom-ref))
+
 (def alignment-ref
   (letfn [(getter [flags]
             (and (contains? flags :grid-indexed)

frontend/src/uxbox/main/ui/workspace/scroll.cljs

@@ -44,3 +44,54 @@
     (let [stream (->> (rx/map first rlocks/stream)
                       (rx/filter #(= % :workspace/scroll)))]
       (rx/subscribe stream on-start))))
+
+(defn set-scroll-position
+  [dom position]
+  (set! (.-scrollLeft dom) (:x position))
+  (set! (.-scrollTop dom) (:y position)))
+
+(defn set-scroll-center
+  [dom center]
+  (let [viewport-width (.-offsetWidth dom)
+        viewport-height (.-offsetHeight dom)
+        position-x (- (* (:x center) @wb/zoom-ref) (/ viewport-width 2))
+        position-y (- (* (:y center) @wb/zoom-ref) (/ viewport-height 2))
+        position (gpt/point position-x position-y)]
+    (set-scroll-position dom position)))
+
+(defn scroll-to-page-center
+  [dom page]
+  (let [page-width (get-in page [:metadata :width])
+        page-height (get-in page [:metadata :height])
+        center (gpt/point (+ 1200 (/ page-width 2)) (+ 1200 (/ page-height 2)))]
+    (set-scroll-center dom center)))
+
+(defn get-current-center
+  [dom]
+  (let [viewport-width (.-offsetWidth dom)
+        viewport-height (.-offsetHeight dom)
+        scroll-left (.-scrollLeft dom)
+        scroll-top (.-scrollTop dom)]
+    (gpt/point
+     (+ (/ viewport-width 2) scroll-left)
+     (+ (/ viewport-height 2) scroll-top))))
+
+(defn get-current-center-absolute
+  [dom]
+  (gpt/divide (get-current-center dom) @wb/zoom-ref))
+
+(defn get-current-position
+  [dom]
+  (let [scroll-left (.-scrollLeft dom)
+        scroll-top (.-scrollTop dom)]
+    (gpt/point scroll-left scroll-top)))
+
+(defn get-current-position-absolute
+  [dom]
+    (gpt/divide (get-current-position dom) @wb/zoom-ref))
+
+(defn scroll-to-point
+  [dom point position]
+  (let [viewport-offset (gpt/subtract point position)
+        new-scroll-position (gpt/subtract (gpt/multiply point @wb/zoom-ref) (gpt/multiply viewport-offset @wb/zoom-ref))]
+    (set-scroll-position dom new-scroll-position)))