github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-26 19:58:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move the mouse stream generation under viewport.

Browse Source
This commit is contained in:
Andrey Antukh 2016-02-16 19:54:04 +02:00
parent c7a38113a1
commit 5a73a4f198
5 changed files with 113 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/uxbox/ui/workspace.cljs
View File

@ -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 " |")]])))

137
src/uxbox/ui/workspace/canvas.cljs
View File

@ -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]}))

25
src/uxbox/ui/workspace/canvas/draw.cljs
View File

@ -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)

7
src/uxbox/ui/workspace/canvas/selrect.cljs
View File

@ -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))))]

6
src/uxbox/util/dom.cljs
View File

@ -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]