diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index c91b53d82..3e5bbbb43 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/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] diff --git a/frontend/src/uxbox/main/ui/workspace/base.cljs b/frontend/src/uxbox/main/ui/workspace/base.cljs index 07e156ccd..8a9707d71 100644 --- a/frontend/src/uxbox/main/ui/workspace/base.cljs +++ b/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) diff --git a/frontend/src/uxbox/main/ui/workspace/scroll.cljs b/frontend/src/uxbox/main/ui/workspace/scroll.cljs index 081f5c450..e2ed258db 100644 --- a/frontend/src/uxbox/main/ui/workspace/scroll.cljs +++ b/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)))