From 4a1c7ab2c9a51f69fc38e3c73bc13f5cb6512b31 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 18 Dec 2015 11:18:00 +0200 Subject: [PATCH] Add coords debugging component. --- frontend/uxbox/ui/util.cljs | 6 +++ frontend/uxbox/ui/workspace/base.cljs | 65 +++++++++++++++++++++-- frontend/uxbox/ui/workspace/workarea.cljs | 7 ++- 3 files changed, 70 insertions(+), 8 deletions(-) diff --git a/frontend/uxbox/ui/util.cljs b/frontend/uxbox/ui/util.cljs index a8f1d10083..96b9c23a26 100644 --- a/frontend/uxbox/ui/util.cljs +++ b/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) diff --git a/frontend/uxbox/ui/workspace/base.cljs b/frontend/uxbox/ui/workspace/base.cljs index d8d53d2ac2..911d35cf6a 100644 --- a/frontend/uxbox/ui/workspace/base.cljs +++ b/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)) -(defonce top-scroll-s (rx/dedupe (rx/map :top scroll-bus))) -(defonce left-scroll-s (rx/dedupe (rx/map :left scroll-bus))) +;; Scroll + +(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 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/uxbox/ui/workspace/workarea.cljs b/frontend/uxbox/ui/workspace/workarea.cljs index 9b519da60e..3ec1cad3d7 100644 --- a/frontend/uxbox/ui/workspace/workarea.cljs +++ b/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