Add coords debugging component.

frontend/uxbox/ui/util.cljs

@@ -29,5 +29,11 @@
         dom-node  (.findDOMNode js/ReactDOM ref-node)]
     (.-value dom-node)))
 
+(defn get-ref-dom
+  [own ref]
+  (let [component (-> own :rum/react-component)
+        ref-node (aget (.-refs component) ref)]
+    (.findDOMNode js/ReactDOM ref-node)))
+
 
 (def mount rum/mount)

frontend/uxbox/ui/workspace/base.cljs

@@ -4,7 +4,10 @@
             [uxbox.rstore :as rs]
             [uxbox.state :as s]
             [uxbox.data.projects :as dp]
-            [uxbox.util.lens :as ul]))
+            [uxbox.util.lens :as ul]
+            [uxbox.ui.util :as util]
+            [goog.events :as events])
+  (:import goog.events.EventType))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Lenses
@@ -31,13 +34,67 @@
 ;; Streams
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defonce scroll-bus (rx/bus))
+;; Scroll
-(defonce top-scroll-s (rx/dedupe (rx/map :top scroll-bus)))
+
-(defonce left-scroll-s (rx/dedupe (rx/map :left scroll-bus)))
+(defonce ^:private scroll-bus (rx/bus))
+(defonce scroll-s (rx/dedupe scroll-bus))
+
+(defonce top-scroll-s
+  (->> scroll-bus
+       (rx/map :top)
+       (rx/dedupe)))
+
+(defonce left-scroll-s
+  (->> scroll-bus
+       (rx/map :left)
+       (rx/dedupe)))
 
 (defonce top-scroll (rx/to-atom top-scroll-s))
 (defonce left-scroll (rx/to-atom left-scroll-s))
 
+;; Mouse pos
+
+;; (defn- coords-delta
+;;   [[old new]]
+;;   (let [[oldx oldy] old
+;;         [newx newy] new]
+;;     [(* 2 (- newx oldx))
+;;      (* 2 (- newy oldy))]))
+
+;; (def ^{:doc "A stream of mouse coordinate deltas as `[dx dy]` vectors."}
+;;   delta
+;;   (s/map coords-delta (s/partition 2 client-position)))
+
+;; DEBUG
+;; (rx/on-value (rx/dedupe scroll-bus)
+;;              (fn [event]
+;;                (println event)))
+
+(defonce mouse-bus (rx/bus))
+(defonce mouse-s (rx/dedupe mouse-bus))
+(defonce mouse-position (rx/to-atom (rx/throttle 50 mouse-s)))
+
+(def mouse-mixin
+  {:did-mount
+   (fn [own]
+     (let [canvas (util/get-ref-dom own "canvas")
+           key (events/listen js/document EventType.MOUSEMOVE
+                             (fn [event]
+                               (let [brect (.getBoundingClientRect canvas)
+                                     offset-x (.-left brect)
+                                     offset-y (.-top brect)
+                                     x (.-clientX event)
+                                     y (.-clientY event)]
+                                 (rx/push! mouse-bus [(- x offset-x)
+                                                      (- y offset-y)]))))]
+       (assoc own ::eventkey key)))
+
+   :did-unmount
+   (fn [own]
+     (let [key (::eventkey own)]
+       (events/unlistenByKey key)
+       (dissoc own ::eventkey)))})
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Constants
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/uxbox/ui/workspace/workarea.cljs

@@ -14,11 +14,9 @@
 ;; Coordinates Debug
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defonce canvas-coordinates (atom [1 1]))
-
 (defn coordenates-render
   []
-  (let [[x y] (rum/react canvas-coordinates)]
+  (let [[x y] (rum/react wb/mouse-position)]
     (html
      [:div
       {:style {:position "absolute" :left "80px" :top "20px"}}
@@ -162,6 +160,7 @@
      [:svg#page-canvas
       {:x wb/document-start-x
        :y wb/document-start-y
+       :ref "canvas"
        :width page-width
        :height page-height
        ;; :on-mouse-down cs/on-mouse-down
@@ -182,7 +181,7 @@
   (util/component
    {:render canvas-render
     :name "canvas"
-    :mixins [rum/reactive]}))
+    :mixins [rum/reactive wb/mouse-mixin]}))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Viewport