From 444018d105868386dd10238feadf0a26dc47785d Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 5 Apr 2016 19:30:18 +0300 Subject: [PATCH] Minor refactor of scroll interaction. And move mouse wheel controller to workspace. --- src/uxbox/ui/workspace.cljs | 81 ++++++++++------------- src/uxbox/ui/workspace/canvas.cljs | 10 +-- src/uxbox/ui/workspace/canvas/scroll.cljs | 49 ++++++++++++++ 3 files changed, 86 insertions(+), 54 deletions(-) create mode 100644 src/uxbox/ui/workspace/canvas/scroll.cljs diff --git a/src/uxbox/ui/workspace.cljs b/src/uxbox/ui/workspace.cljs index 401ee43b7..74426a466 100644 --- a/src/uxbox/ui/workspace.cljs +++ b/src/uxbox/ui/workspace.cljs @@ -12,6 +12,7 @@ [uxbox.data.pages :as udp] [uxbox.data.history :as udh] [uxbox.util.lens :as ul] + [uxbox.util.dom :as dom] [uxbox.util.geom.point :as gpt] [uxbox.util.data :refer (classnames)] [uxbox.ui.core :as uuc] @@ -19,6 +20,8 @@ [uxbox.ui.mixins :as mx] [uxbox.ui.messages :as uum] [uxbox.ui.confirm] + [uxbox.ui.keyboard :as kbd] + [uxbox.ui.workspace.canvas.scroll :as scroll] [uxbox.ui.workspace.base :as uuwb] [uxbox.ui.workspace.shortcuts :as wshortcuts] [uxbox.ui.workspace.header :refer (header)] @@ -27,9 +30,7 @@ [uxbox.ui.workspace.colorpalette :refer (colorpalette)] [uxbox.ui.workspace.canvas :refer (viewport)])) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Workspace -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Workspace (defn- workspace-will-mount [own] @@ -43,49 +44,26 @@ (defn- workspace-did-mount [own] - (letfn [(handle-scroll-interaction [] - (let [stoper (->> uuc/actions-s - (rx/map :type) - (rx/filter #(empty? %)) - (rx/take 1)) - local (:rum/local own) - initial @uuwb/mouse-viewport-a] - (swap! local assoc :scrolling true) - (as-> uuwb/mouse-viewport-s $ - (rx/take-until stoper $) - (rx/subscribe $ #(on-scroll % initial) nil on-scroll-end)))) - - (on-scroll-end [] - (let [local (:rum/local own)] - (swap! local assoc :scrolling false))) - - (on-scroll [pt initial] - (let [{:keys [x y]} (gpt/subtract pt initial) - el (mx/get-ref-dom own "workspace-canvas") - cx (.-scrollLeft el) - cy (.-scrollTop el)] - (set! (.-scrollLeft el) (- cx x)) - (set! (.-scrollTop el) (- cy y))))] (let [[projectid pageid] (:rum/props own) - el (mx/get-ref-dom own "workspace-canvas") - sub1 (as-> uuc/actions-s $ - (rx/map :type $) - (rx/dedupe $) - (rx/filter #(= "ui.workspace.scroll" %) $) - (rx/on-value $ handle-scroll-interaction)) - sub2 (udp/watch-page-changes pageid)] - (set! (.-scrollLeft el) uuwb/canvas-start-scroll-x) - (set! (.-scrollTop el) uuwb/canvas-start-scroll-y) - (assoc own ::sub1 sub1 ::sub2 sub2)))) + sub1 (scroll/watch-scroll-interactions own) + sub2 (udp/watch-page-changes pageid) + dom (mx/get-ref-dom own "workspace-canvas")] + + ;; Set initial scroll position + (set! (.-scrollLeft dom) uuwb/canvas-start-scroll-x) + (set! (.-scrollTop dom) uuwb/canvas-start-scroll-y) + + (assoc own ::sub1 sub1 ::sub2 sub2))) (defn- workspace-will-unmount [own] (rs/emit! (udh/clean-page-history)) - (let [sub1 (::sub1 own) - sub2 (::sub2 own)] - (.close sub1) - (.close sub2) - (dissoc own ::sub1 ::sub2))) + + ;; Close subscriptions + (.close (::sub1 own)) + (.close (::sub2 own)) + + (dissoc own ::sub1 ::sub2)) (defn- workspace-transfer-state [old-state state] @@ -109,6 +87,15 @@ left (.-scrollLeft target)] (rx/push! uuwb/scroll-b (gpt/point left top)))) +(defn- on-wheel + [event] + (when (kbd/ctrl? event) + (dom/prevent-default event) + (dom/stop-propagation event) + (if (pos? (.-deltaY event)) + (rs/emit! (dw/increase-zoom)) + (rs/emit! (dw/decrease-zoom))))) + (defn- workspace-render [own projectid] (let [{:keys [flags zoom] :as workspace} (rum/react uuwb/workspace-l) @@ -129,21 +116,25 @@ [:main.main-content - [:section.workspace-content {:class classes :on-scroll on-scroll} + [:section.workspace-content + {:class classes + :on-scroll on-scroll + :on-wheel on-wheel} + ;; Rules (horizontal-rule zoom) (vertical-rule zoom) ;; Canvas - [:section.workspace-canvas {:ref "workspace-canvas"} + [:section.workspace-canvas + {:ref "workspace-canvas"} (viewport)]] ;; Aside (when left-sidebar? (left-sidebar)) (when right-sidebar? - (right-sidebar)) - ]]))) + (right-sidebar))]]))) (def ^:static workspace (mx/component diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs index 3e8eda04a..5e869f944 100644 --- a/src/uxbox/ui/workspace/canvas.cljs +++ b/src/uxbox/ui/workspace/canvas.cljs @@ -99,20 +99,12 @@ (on-mouse-up [event] (dom/stop-propagation event) (uuc/release-action! "ui.shape" - "ui.selrect")) - (on-wheel [event] - (when (kbd/ctrl? event) - (dom/prevent-default event) - (dom/stop-propagation event) - (if (pos? (.-deltaY event)) - (rs/emit! (dw/increase-zoom)) - (rs/emit! (dw/decrease-zoom)))))] + "ui.selrect"))] (html [:svg.viewport {:width uuwb/viewport-width :height uuwb/viewport-height :ref "viewport" :class (when drawing? "drawing") - :on-wheel on-wheel :on-mouse-down on-mouse-down :on-mouse-up on-mouse-up} [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} diff --git a/src/uxbox/ui/workspace/canvas/scroll.cljs b/src/uxbox/ui/workspace/canvas/scroll.cljs new file mode 100644 index 000000000..cbd9666cc --- /dev/null +++ b/src/uxbox/ui/workspace/canvas/scroll.cljs @@ -0,0 +1,49 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) 2015-2016 Andrey Antukh +;; Copyright (c) 2015-2016 Juan de la Cruz + +(ns uxbox.ui.workspace.canvas.scroll + (:require-macros [uxbox.util.syntax :refer [define-once]]) + (:require [beicon.core :as rx] + [lentes.core :as l] + [uxbox.rstore :as rs] + [uxbox.state :as ust] + [uxbox.data.shapes :as uds] + [uxbox.ui.core :as uuc] + [uxbox.ui.mixins :as mx] + [uxbox.ui.workspace.base :as uuwb] + [uxbox.util.geom.point :as gpt])) + +(defn watch-scroll-interactions + [own] + (letfn [(handle-scroll-interaction [] + (let [stoper (->> uuc/actions-s + (rx/map :type) + (rx/filter #(empty? %)) + (rx/take 1)) + local (:rum/local own) + initial @uuwb/mouse-viewport-a] + (swap! local assoc :scrolling true) + (as-> uuwb/mouse-viewport-s $ + (rx/take-until stoper $) + (rx/subscribe $ #(on-scroll % initial) nil on-scroll-end)))) + + (on-scroll-end [] + (let [local (:rum/local own)] + (swap! local assoc :scrolling false))) + + (on-scroll [pt initial] + (let [{:keys [x y]} (gpt/subtract pt initial) + el (mx/get-ref-dom own "workspace-canvas") + cx (.-scrollLeft el) + cy (.-scrollTop el)] + (set! (.-scrollLeft el) (- cx x)) + (set! (.-scrollTop el) (- cy y))))] + (as-> uuc/actions-s $ + (rx/map :type $) + (rx/dedupe $) + (rx/filter #(= "ui.workspace.scroll" %) $) + (rx/on-value $ handle-scroll-interaction))))