Improved impl of ruler.

src/uxbox/ui/workspace/canvas/ruler.cljs

@@ -13,82 +13,91 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.dom :as dom]))
 
-;; FIXME: clear & refactor (this is a first quick & dirty impl)
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Component
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn- distance
+(defn- resolve-position
-  [[x1 y1] [x2 y2]]
+  [own [x y]]
-  (let [dx (- x1 x2)
+  (let [overlay (mx/get-ref-dom own "overlay")
-        dy (- y1 y2)]
+        brect (.getBoundingClientRect overlay)]
-    (-> (mth/sqrt (+ (mth/pow dx 2) (mth/pow dy 2)))
+    [(- x (.-left brect))
-        (mth/precision 2))))
+     (- y (.-top brect))]))
 
 (defn- get-position
   [own event]
   (let [x (.-clientX event)
-        y (.-clientY event)
+        y (.-clientY event)]
-        overlay (mx/get-ref-dom own "overlay")
+    (resolve-position own [x y])))
-        brect (.getBoundingClientRect overlay)]
-    [(- x (.-left brect))
-     (- y (.-top brect))]))
 
 (defn- on-mouse-down
   [own local event]
   (dom/stop-propagation event)
   (let [pos (get-position own event)]
-    (swap! local assoc
+    (reset! local {:active true :pos1 pos :pos2 pos})))
-           :active true
-           :pos1 pos
-           :pos2 pos)))
 
 (defn- on-mouse-up
   [own local event]
   (dom/stop-propagation event)
-  (swap! local assoc
+  (reset! local {:active false}))
-         :active false
-         :pos1 nil
-         :pos2 nil))
 
-(defn- on-mouse-move
+(defn- overlay-render
-  [own local event]
+  [own local]
-  (when (:active @local)
+  (let [[x1 y1 :as p1] (:pos1 @local)
-    (let [pos (get-position own event)]
-      (swap! local assoc :pos2 pos))))
-
-(defn overlay-render
-  [own]
-  (let [local (:rum/local own)
-        [x1 y1 :as p1] (:pos1 @local)
         [x2 y2 :as p2] (:pos2 @local)
-        distance (distance p1 p2)]
+        distance (mth/distance p1 p2)]
     (html
      [:svg {:on-mouse-down #(on-mouse-down own local %)
             :on-mouse-up #(on-mouse-up own local %)
-            :on-mouse-move #(on-mouse-move own local %)
             :ref "overlay"}
       [:rect {:style {:fill "transparent" :stroke "transparent" :cursor "cell"}
               :width wb/viewport-width
               :height wb/viewport-height}]
       (if (and (:active @local) x1 x2)
-        [:g
+          [:g
-         [:line {:x1 x1
+           [:line {:x1 x1 :y1 y1 :x2 x2 :y2 y2
-                 :y1 y1
+                   :style {:cursor "cell"}
-                 :x2 x2
+                   :stroke-width "2"
-                 :y2 y2
+                   :stroke "red"}]
-                 :style {:cursor "cell"}
+           [:text {:x (+ x2 15) :y y2}
-                 :stroke-width "2"
+            [:tspan (str distance)]]])])))
-                 :stroke "red"}]
+
-         [:text {:x (+ x2 15) :y y2}
+(defn- overlay-will-mount
-          [:tspan (str distance)]]])])))
+  [own local]
+  (letfn [(on-value [pos]
+            (swap! local assoc :pos2 pos))]
+    (as-> wb/mouse-absolute-s $
+      (rx/dedupe $)
+      (rx/filter #(:active @local) $)
+      (rx/map #(resolve-position own %) $)
+      (rx/on-value $ on-value)
+      (assoc own ::sub $))))
+
+(defn- overlay-will-unmount
+  [own]
+  (let [subscription (::sub own)]
+    (subscription)
+    (dissoc own ::sub)))
+
+(defn- overlay-transfer-state
+  [old-own own]
+  (let [sub (::sub old-own)]
+    (assoc own ::sub sub)))
+
+(def ^:static overlay
+  (mx/component
+   {:render #(overlay-render % (:rum/local %))
+    :will-mount #(overlay-will-mount % (:rum/local %))
+    :will-unmount overlay-will-unmount
+    :transfer-state overlay-transfer-state
+    :name "overlay"
+    :mixins [mx/static (mx/local)]}))
 
 (defn- ruler-render
   [own]
   (let [flags (rum/react wb/flags-l)]
     (when (contains? flags :workspace/ruler)
-      (overlay-render own))))
+      (overlay))))
 
 (def ^:static ruler
   (mx/component