From 5a73a4f198f4f6f2f4a229e57de67cb004a7e149 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 16 Feb 2016 19:54:04 +0200 Subject: [PATCH] Move the mouse stream generation under viewport. --- src/uxbox/ui/workspace.cljs | 2 +- src/uxbox/ui/workspace/canvas.cljs | 137 ++++++++++++++------- src/uxbox/ui/workspace/canvas/draw.cljs | 25 ++-- src/uxbox/ui/workspace/canvas/selrect.cljs | 7 +- src/uxbox/util/dom.cljs | 6 +- 5 files changed, 113 insertions(+), 64 deletions(-) diff --git a/src/uxbox/ui/workspace.cljs b/src/uxbox/ui/workspace.cljs index 9231db94f4..4c532d53e5 100644 --- a/src/uxbox/ui/workspace.cljs +++ b/src/uxbox/ui/workspace.cljs @@ -26,7 +26,7 @@ (defn- coordenates-render [own] - (let [{:keys [x y]} (rum/react wb/mouse-position)] + (let [{:keys [x y]} (rum/react wb/mouse-canvas-a)] (html [:div {:style {:position "absolute" :left "50px" :top "25px"}} [:span (str "| x=" x " | y=" y " |")]]))) diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs index f846a11465..a67e566f6a 100644 --- a/src/uxbox/ui/workspace/canvas.cljs +++ b/src/uxbox/ui/workspace/canvas.cljs @@ -108,44 +108,41 @@ ;; Canvas ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -(defn- canvas-did-mount - [own] - (letfn [(on-mousemove [event page] - (let [wpt (gpt/point (.-clientX event) (.-clientY event)) - 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) +;; (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)))) - cpt (gpt/subtract wpt brect) - event {:id (:id page) - :ctrl (kbd/ctrl? event) - :shift (kbd/shift? event) - :window-coords wpt - :canvas-coords cpt}] +;; (defn- canvas-will-unmount +;; [own] +;; (let [key (::eventkey own) +;; [page] (:rum/props own)] +;; (events/unlistenByKey key) +;; (dissoc own ::eventkey))) - (println "brect:" brect) - (swap! wb/bounding-rect assoc (:id page) brect) - (rx/push! wb/mouse-b event)))] - - ;; TODO: update properly the bounding rect. - (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)] - (swap! wb/bounding-rect dissoc (:id page)) - (events/unlistenByKey key) - (dissoc own ::eventkey))) - -(defn- canvas-transfer-state - [old-own own] - (let [key (::eventkey old-own)] - (assoc own ::eventkey key))) +;; (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}] @@ -160,11 +157,11 @@ shapes-selected (filter (comp workspace-selected :id) shapes) shapes-notselected (filter (comp not workspace-selected :id) shapes)] (html - [:svg#page-canvas.page-canvas {:x wb/document-start-x - :y wb/document-start-y - :ref (str "canvas" id) - :width width - :height height} + [:svg.page-canvas {:x wb/document-start-x + :y wb/document-start-y + :ref (str "canvas" id) + :width width + :height height} (background) (grid 1) [:svg.page-layout {} @@ -173,15 +170,14 @@ (for [item (reverse (sequence xf (:shapes page)))] (-> (shape item workspace-selected) (rum/with-key (str (:id item))))) - (selrect) (draw-area)]]]))) (def canvas (mx/component {:render canvas-render - :did-mount canvas-did-mount - :will-unmount canvas-will-unmount - :transfer-state canvas-transfer-state + ;; :did-mount canvas-did-mount + ;; :will-unmount canvas-will-unmount + ;; :transfer-state canvas-transfer-state :name "canvas" :mixins [mx/static rum/reactive]})) @@ -208,16 +204,65 @@ (html [:svg.viewport {:width wb/viewport-width :height wb/viewport-height + :ref "viewport" :class (when drawing? "drawing") :on-mouse-down on-mouse-down :on-mouse-up on-mouse-up} [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} (if page (canvas page)) - (ruler)]])))) + (ruler) + (selrect)]])))) + +(defn- viewport-did-mount + [own] + (letfn [(translate-point-to-viewport [pt] + (let [viewport (mx/get-ref-dom own "viewport") + brect (.getBoundingClientRect viewport) + brect (gpt/point (.-left brect) (.-top brect))] + (gpt/subtract pt brect))) + + (translate-point-to-canvas [pt] + (let [viewport (mx/get-ref-dom own "viewport") + canvas (dom/get-element-by-class "page-canvas" viewport) + brect (.getBoundingClientRect canvas) + brect (gpt/point (.-left brect) (.-top brect))] + (gpt/subtract pt brect))) + + (on-mousemove [event page] + (let [wpt (gpt/point (.-clientX event) + (.-clientY event)) + vppt (translate-point-to-viewport wpt) + cvpt (translate-point-to-canvas wpt) + event {:ctrl (kbd/ctrl? event) + :shift (kbd/shift? event) + :window-coords wpt + :viewport-coords vppt + :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)))) + +(defn- viewport-will-unmount + [own] + (let [key (::eventkey own) + [page] (:rum/props own)] + (events/unlistenByKey key) + (dissoc own ::eventkey))) + +(defn- viewport-transfer-state + [old-own own] + (let [key (::eventkey old-own)] + (assoc own ::eventkey key))) + (def viewport (mx/component {:render viewport-render :name "viewport" + :did-mount viewport-did-mount + :will-unmount viewport-will-unmount + :transfer-state viewport-transfer-state :mixins [rum/reactive]})) diff --git a/src/uxbox/ui/workspace/canvas/draw.cljs b/src/uxbox/ui/workspace/canvas/draw.cljs index 449b69c55b..cb386ab98f 100644 --- a/src/uxbox/ui/workspace/canvas/draw.cljs +++ b/src/uxbox/ui/workspace/canvas/draw.cljs @@ -43,23 +43,24 @@ (define-once :drawing-subscriptions (letfn [(init-shape [shape] - (let [{:keys [x y] :as point} (gpt/subtract @wb/mouse-position - @wb/scroll-a) + (let [{:keys [x y] :as point} @wb/mouse-canvas-a shape (sh/-initialize shape {:x1 x :y1 y :x2 x :y2 y})] + (println "start" point) (reset! +drawing-shape+ shape) (reset! +drawing-position+ (assoc point :lock false)) - (as-> wb/interactions-b $ - (rx/filter #(not= % :shape/movement) $) - (rx/take 1 $) - (rx/take-until $ wb/mouse-s) - (rx/with-latest-from vector wb/mouse-ctrl-s $) - (rx/subscribe $ on-value nil on-complete)))) + (let [stoper (->> wb/interactions-b + (rx/filter #(not= % :shape/movement)) + (rx/take 1))] + (as-> wb/mouse-canvas-s $ + (rx/take-until stoper $) + (rx/with-latest-from vector wb/mouse-ctrl-s $) + (rx/subscribe $ on-value nil on-complete))))) - (on-value [[pos ctrl?]] - (let [point (gpt/subtract pos @wb/scroll-a)] - (reset! +drawing-position+ (assoc point :lock ctrl?)))) + (on-value [[point ctrl?]] + (println "on-value" ctrl? point) + (reset! +drawing-position+ (assoc point :lock ctrl?))) (on-complete [] (let [shape @+drawing-shape+ @@ -71,7 +72,7 @@ (reset! +drawing-shape+ nil))) (init-icon [shape] - (let [{:keys [x y]} (gpt/subtract @wb/mouse-position @wb/scroll-a) + (let [{:keys [x y]} @wb/mouse-canvas-a props {:x1 x :y1 y :x2 (+ x 100) :y2 (+ y 100)} shape (sh/-initialize shape props)] (rs/emit! (dw/add-shape shape) diff --git a/src/uxbox/ui/workspace/canvas/selrect.cljs b/src/uxbox/ui/workspace/canvas/selrect.cljs index 25f12c0a84..18af2a191c 100644 --- a/src/uxbox/ui/workspace/canvas/selrect.cljs +++ b/src/uxbox/ui/workspace/canvas/selrect.cljs @@ -60,7 +60,7 @@ (define-once :selrect-subscriptions (letfn [(on-value [pos] - (let [pos (gpt/add pos @wb/scroll-a)] + (let [pos' (gpt/add pos @wb/scroll-a)] (swap! selrect-pos assoc :current pos))) (on-complete [] @@ -72,9 +72,10 @@ (let [stoper (->> wb/interactions-b (rx/filter #(not= % :draw/selrect)) (rx/take 1)) - pos (gpt/add @wb/mouse-a @wb/scroll-a)] + pos @wb/mouse-viewport-a] (reset! selrect-pos {:start pos :current pos}) - (as-> wb/mouse-s $ + + (as-> wb/mouse-viewport-s $ (rx/take-until stoper $) (rx/subscribe $ on-value nil on-complete))))] diff --git a/src/uxbox/util/dom.cljs b/src/uxbox/util/dom.cljs index 87cf270f25..c2c689012d 100644 --- a/src/uxbox/util/dom.cljs +++ b/src/uxbox/util/dom.cljs @@ -2,8 +2,10 @@ (:require [goog.dom :as dom])) (defn get-element-by-class - [^string classname] - (dom/getElementByClass classname)) + ([classname] + (dom/getElementByClass classname)) + ([classname node] + (dom/getElementByClass classname node))) (defn stop-propagation [e]