From 94c7f0df983a2c2df39445c44ee6000e78944ee2 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 16 Feb 2016 20:38:04 +0200 Subject: [PATCH] Move viewport scroll pressing space. --- src/uxbox/ui/keyboard.cljs | 1 + src/uxbox/ui/workspace.cljs | 36 +++++++++++++-- src/uxbox/ui/workspace/canvas.cljs | 71 +++++++++--------------------- 3 files changed, 55 insertions(+), 53 deletions(-) diff --git a/src/uxbox/ui/keyboard.cljs b/src/uxbox/ui/keyboard.cljs index 0dfaa8f2c..85a4fb1a8 100644 --- a/src/uxbox/ui/keyboard.cljs +++ b/src/uxbox/ui/keyboard.cljs @@ -15,3 +15,4 @@ (def esc? (is-keycode? 27)) (def enter? (is-keycode? 13)) +(def space? (is-keycode? 32)) diff --git a/src/uxbox/ui/workspace.cljs b/src/uxbox/ui/workspace.cljs index 649ec957c..1bc8a8da4 100644 --- a/src/uxbox/ui/workspace.cljs +++ b/src/uxbox/ui/workspace.cljs @@ -113,28 +113,56 @@ (rs/emit! (dw/initialize projectid pageid)) own)) +(defn- workspace-handle-scroll + [el1 el2] + (letfn [(on-value [pt1 pt2] + (let [{:keys [x y]} (gpt/subtract pt1 pt2) + cx (.-scrollLeft el2) + cy (.-scrollTop el2)] + (set! (.-scrollLeft el2) (- cx x)) + (set! (.-scrollTop el2) (- cy y))))] + (let [stoper (->> wb/interactions-b + (rx/filter #(not= % :scroll/viewport)) + (rx/take 1)) + initial @wb/mouse-viewport-a] + (as-> wb/mouse-viewport-s $ + (rx/take-until stoper $) + (rx/subscribe $ #(on-value % initial)))))) + (defn- workspace-did-mount [own] ;; FIXME: this is a hack. I don't know why I need setup ;; scroll to both elements, but it does not works without ;; that horrible hack. (let [el1 (mx/get-ref-dom own "viewport-container") - el2 (mx/get-ref-dom own "workspace-canvas")] + el2 (mx/get-ref-dom own "workspace-canvas") + sub (as-> wb/interactions-b $ + (rx/dedupe $) + (rx/filter #(= :scroll/viewport %) $) + (rx/on-value $ #(workspace-handle-scroll el1 el2)))] (set! (.-scrollLeft el1) wb/canvas-start-scroll-x) (set! (.-scrollLeft el2) wb/canvas-start-scroll-x) - own)) + (assoc own ::sub sub))) (defn- workspace-transfer-state [old-state state] - (let [[projectid pageid] (:rum/props state)] + (let [[projectid pageid] (:rum/props state) + sub (::sub old-state)] (rs/emit! (dw/initialize projectid pageid)) - state)) + (assoc state ::sub sub))) + +(defn- workspace-will-unmount + [own] + (let [unsub (::sub own)] + (unsub) + (dissoc own ::sub))) (def ^:static workspace (mx/component {:render workspace-render :will-mount workspace-will-mount :did-mount workspace-did-mount + :will-unmount workspace-will-unmount :transfer-state workspace-transfer-state :name "workspace" :mixins [mx/static rum/reactive wshortcuts/mixin]})) diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs index af2ba32ee..d1af6c2a4 100644 --- a/src/uxbox/ui/workspace/canvas.cljs +++ b/src/uxbox/ui/workspace/canvas.cljs @@ -108,42 +108,6 @@ ;; Canvas ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; (defn- canvas-did-mount -;; [own] -;; (letfn [(translate-point [pt page] -;; (let [canvas (mx/get-ref-dom own (str "canvas" (:id page))) -;; brect (.getBoundingClientRect canvas) -;; brect (gpt/point (.-left brect) (.-top brect))] -;; ;; brect (gpt/add brect @wb/scroll-a)] -;; (gpt/subtract pt brect))) -;; (on-mousemove [event page] -;; (let [wpt (gpt/point (.-clientX event) -;; (.-clientY event)) -;; cpt (translate-point wpt page) -;; event {:id (:id page) -;; :ctrl (kbd/ctrl? event) -;; :shift (kbd/shift? event) -;; :window-coords wpt -;; :canvas-coords cpt}] -;; (println "on-mousemove" cpt) -;; (rx/push! wb/mouse-b event)))] -;; (let [[page] (:rum/props own) -;; key (events/listen js/document EventType.MOUSEMOVE -;; #(on-mousemove % page))] -;; (assoc own ::eventkey key)))) - -;; (defn- canvas-will-unmount -;; [own] -;; (let [key (::eventkey own) -;; [page] (:rum/props own)] -;; (events/unlistenByKey key) -;; (dissoc own ::eventkey))) - -;; (defn- canvas-transfer-state -;; [old-own own] -;; (let [key (::eventkey old-own)] -;; (assoc own ::eventkey key))) - (defn- canvas-render [own {:keys [width height id] :as page}] (let [workspace (rum/react wb/workspace-l) @@ -175,9 +139,6 @@ (def canvas (mx/component {:render canvas-render - ;; :did-mount canvas-did-mount - ;; :will-unmount canvas-will-unmount - ;; :transfer-state canvas-transfer-state :name "canvas" :mixins [mx/static rum/reactive]})) @@ -229,6 +190,14 @@ brect (gpt/point (.-left brect) (.-top brect))] (gpt/subtract pt brect))) + (on-key-down [event] + (when (kbd/space? event) + (wb/emit-interaction! :scroll/viewport))) + + (on-key-up [event] + (when (kbd/space? event) + (wb/emit-interaction! :nothing))) + (on-mousemove [event page] (let [wpt (gpt/point (.-clientX event) (.-clientY event)) @@ -241,22 +210,26 @@ :canvas-coords cvpt}] (rx/push! wb/mouse-b event)))] (let [[page] (:rum/props own) - key (events/listen js/document EventType.MOUSEMOVE - #(on-mousemove % page))] - (assoc own ::eventkey key)))) + key1 (events/listen js/document EventType.MOUSEMOVE + #(on-mousemove % page)) + key2 (events/listen js/document EventType.KEYDOWN on-key-down) + key3 (events/listen js/document EventType.KEYUP on-key-up)] + (assoc own ::key1 key1 ::key2 key2 ::key3 key3)))) (defn- viewport-will-unmount [own] - (let [key (::eventkey own) - [page] (:rum/props own)] - (events/unlistenByKey key) - (dissoc own ::eventkey))) + (let [key1 (::key1 own) + key2 (::key2 own) + key3 (::key3 own)] + (events/unlistenByKey key1) + (events/unlistenByKey key2) + (events/unlistenByKey key3) + (dissoc own ::key1 ::key2 ::key3))) (defn- viewport-transfer-state [old-own own] - (let [key (::eventkey old-own)] - (assoc own ::eventkey key))) - + (let [data (select-keys old-own [::key1 ::key2 ::key3])] + (merge own data))) (def viewport (mx/component