Move the mouse stream generation under viewport.

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

src/uxbox/ui/workspace/canvas.cljs

@@ -108,44 +108,41 @@
 ;; Canvas
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn- canvas-did-mount
+;; (defn- canvas-did-mount
-  [own]
+;;   [own]
-  (letfn [(on-mousemove [event page]
+;;   (letfn [(translate-point [pt page]
-            (let [wpt (gpt/point (.-clientX event) (.-clientY event))
+;;             (let [canvas (mx/get-ref-dom own (str "canvas" (:id page)))
-                  canvas (mx/get-ref-dom own (str "canvas" (:id page)))
+;;                   brect (.getBoundingClientRect canvas)
-                  brect (.getBoundingClientRect canvas)
+;;                   brect (gpt/point (.-left brect) (.-top brect))]
-                  brect (gpt/point (.-left brect) (.-top brect))
+;;                   ;; brect (gpt/add brect @wb/scroll-a)]
-                  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)
+;; (defn- canvas-will-unmount
-                  event {:id (:id page)
+;;   [own]
-                         :ctrl (kbd/ctrl? event)
+;;   (let [key (::eventkey own)
-                         :shift (kbd/shift? event)
+;;         [page] (:rum/props own)]
-                         :window-coords wpt
+;;     (events/unlistenByKey key)
-                         :canvas-coords cpt}]
+;;     (dissoc own ::eventkey)))
 
-              (println "brect:" brect)
+;; (defn- canvas-transfer-state
-              (swap! wb/bounding-rect assoc (:id page) brect)
+;;   [old-own own]
-              (rx/push! wb/mouse-b event)))]
+;;   (let [key (::eventkey old-own)]
-
+;;     (assoc own ::eventkey key)))
-    ;; 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-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
+     [:svg.page-canvas {:x wb/document-start-x
-                                    :y wb/document-start-y
+                        :y wb/document-start-y
-                                    :ref (str "canvas" id)
+                        :ref (str "canvas" id)
-                                    :width width
+                        :width width
-                                    :height height}
+                        :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
+    ;; :did-mount canvas-did-mount
-    :will-unmount canvas-will-unmount
+    ;; :will-unmount canvas-will-unmount
-    :transfer-state canvas-transfer-state
+    ;; :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]}))

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
+            (let [{:keys [x y] :as point} @wb/mouse-canvas-a
-                                                        @wb/scroll-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 $
+              (let [stoper (->> wb/interactions-b
-                (rx/filter #(not= % :shape/movement) $)
+                                (rx/filter #(not= % :shape/movement))
-                (rx/take 1 $)
+                                (rx/take 1))]
-                (rx/take-until $ wb/mouse-s)
+                (as-> wb/mouse-canvas-s $
-                (rx/with-latest-from vector wb/mouse-ctrl-s $)
+                  (rx/take-until stoper $)
-                (rx/subscribe $ on-value nil on-complete))))
+                  (rx/with-latest-from vector wb/mouse-ctrl-s $)
+                  (rx/subscribe $ on-value nil on-complete)))))
 
-          (on-value [[pos ctrl?]]
+          (on-value [[point ctrl?]]
-            (let [point (gpt/subtract pos @wb/scroll-a)]
+            (println "on-value" ctrl? point)
-              (reset! +drawing-position+ (assoc point :lock ctrl?))))
+            (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)

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

src/uxbox/util/dom.cljs

@@ -2,8 +2,10 @@
   (:require [goog.dom :as dom]))
 
 (defn get-element-by-class
-  [^string classname]
+  ([classname]
-  (dom/getElementByClass classname))
+   (dom/getElementByClass classname))
+  ([classname node]
+   (dom/getElementByClass classname node)))
 
 (defn stop-propagation
   [e]