diff --git a/src/uxbox/ui/workspace/canvas/ruler.cljs b/src/uxbox/ui/workspace/canvas/ruler.cljs index fe126eb7d..eb8fc48af 100644 --- a/src/uxbox/ui/workspace/canvas/ruler.cljs +++ b/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 - [[x1 y1] [x2 y2]] - (let [dx (- x1 x2) - dy (- y1 y2)] - (-> (mth/sqrt (+ (mth/pow dx 2) (mth/pow dy 2))) - (mth/precision 2)))) +(defn- resolve-position + [own [x y]] + (let [overlay (mx/get-ref-dom own "overlay") + brect (.getBoundingClientRect overlay)] + [(- x (.-left brect)) + (- y (.-top brect))])) (defn- get-position [own event] (let [x (.-clientX event) - y (.-clientY event) - overlay (mx/get-ref-dom own "overlay") - brect (.getBoundingClientRect overlay)] - [(- x (.-left brect)) - (- y (.-top brect))])) + y (.-clientY event)] + (resolve-position own [x y]))) (defn- on-mouse-down [own local event] (dom/stop-propagation event) (let [pos (get-position own event)] - (swap! local assoc - :active true - :pos1 pos - :pos2 pos))) + (reset! local {:active true :pos1 pos :pos2 pos}))) (defn- on-mouse-up [own local event] (dom/stop-propagation event) - (swap! local assoc - :active false - :pos1 nil - :pos2 nil)) + (reset! local {:active false})) -(defn- on-mouse-move - [own local event] - (when (:active @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) +(defn- overlay-render + [own local] + (let [[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 - [:line {:x1 x1 - :y1 y1 - :x2 x2 - :y2 y2 - :style {:cursor "cell"} - :stroke-width "2" - :stroke "red"}] - [:text {:x (+ x2 15) :y y2} - [:tspan (str distance)]]])]))) + [:g + [:line {:x1 x1 :y1 y1 :x2 x2 :y2 y2 + :style {:cursor "cell"} + :stroke-width "2" + :stroke "red"}] + [:text {:x (+ x2 15) :y y2} + [:tspan (str distance)]]])]))) + +(defn- overlay-will-mount + [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