From fea85a1c1ec7183cf7679b4d30575552a2d47003 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Wed, 8 Mar 2017 19:51:34 +0100
Subject: [PATCH] Add background to the ruler information tooltip.

Fixes #75
---
 .../src/uxbox/main/ui/workspace/canvas.cljs   | 39 ++++++++---------
 .../src/uxbox/main/ui/workspace/ruler.cljs    | 42 +++++++++++++------
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/frontend/src/uxbox/main/ui/workspace/canvas.cljs b/frontend/src/uxbox/main/ui/workspace/canvas.cljs
index e41993d56..4bf63f0a3 100644
--- a/frontend/src/uxbox/main/ui/workspace/canvas.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/canvas.cljs
@@ -245,25 +245,26 @@
                           :ctrl? ctrl?}]
                 (st/emit! (uev/mouse-event :double-click ctrl? shift?))))]
       [:div
-        (coordinates)
+       (coordinates)
+       [:div.tooltip-container
         (when tooltip
-          (cursor-tooltip tooltip))
-        [:svg.viewport {:width (* c/viewport-width zoom)
-                        :height (* c/viewport-height zoom)
-                        :ref "viewport"
-                        :class (when drawing "drawing")
-                        :on-context-menu on-context-menu
-                        :on-click on-click
-                        :on-double-click on-double-click
-                        :on-mouse-down on-mouse-down
-                        :on-mouse-up on-mouse-up}
-         [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
-          (if page
-            (canvas page zoom))
-          (if (contains? flags :grid)
-            (grid))]
-         (when (contains? flags :ruler)
-           (ruler zoom))
-         (selrect)]])))
+          (cursor-tooltip tooltip))]
+       [:svg.viewport {:width (* c/viewport-width zoom)
+                       :height (* c/viewport-height zoom)
+                       :ref "viewport"
+                       :class (when drawing "drawing")
+                       :on-context-menu on-context-menu
+                       :on-click on-click
+                       :on-double-click on-double-click
+                       :on-mouse-down on-mouse-down
+                       :on-mouse-up on-mouse-up}
+        [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
+         (when page
+           (canvas page zoom))
+         (if (contains? flags :grid)
+           (grid))]
+        (when (contains? flags :ruler)
+          (ruler zoom))
+        (selrect)]])))
 
 
diff --git a/frontend/src/uxbox/main/ui/workspace/ruler.cljs b/frontend/src/uxbox/main/ui/workspace/ruler.cljs
index 0cd2f2a35..9e22175de 100644
--- a/frontend/src/uxbox/main/ui/workspace/ruler.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/ruler.cljs
@@ -24,29 +24,42 @@
   (-> (l/key :ruler)
       (l/derive refs/workspace)))
 
-(mx/defc ruler-line
+(mx/defc ruler-text
   {:mixins [mx/static]}
   [zoom [center pt]]
   (let [distance (-> (gpt/distance (gpt/divide pt zoom)
                                    (gpt/divide center zoom))
                      (mth/precision 2))
         angle (-> (gpt/angle pt center)
-                  (mth/precision 2))]
+                  (mth/precision 2))
+        transform1 (str "translate(" (+ (:x pt) 35) "," (- (:y pt) 10) ")")
+        transform2 (str "translate(" (+ (:x pt) 25) "," (- (:y pt) 30) ")")]
     [:g
-     [:line {:x1 (:x center)
-             :y1 (:y center)
-             :x2 (:x pt)
-             :y2 (:y pt)
-             :style {:cursor "cell"}
-             :stroke-width "1"
-             :stroke "red"}]
-     [:text
-      {:transform (str "translate(" (+ (:x pt) 15) "," (- (:y pt) 10) ")")}
+     [:rect {:fill "black"
+             :fill-opacity "0.4"
+             :rx "3"
+             :ry "3"
+             :width "90"
+             :height "50"
+             :transform transform2}]
+     [:text {:transform transform1
+             :fill "white"}
       [:tspan {:x "0"}
        (str distance " px")]
       [:tspan {:x "0" :y "20"}
        (str angle "°")]]]))
 
+(mx/defc ruler-line
+  {:mixins [mx/static]}
+  [zoom [center pt]]
+  [:line {:x1 (:x center)
+          :y1 (:y center)
+          :x2 (:x pt)
+          :y2 (:y pt)
+          :style {:cursor "cell"}
+          :stroke-width "1"
+          :stroke "red"}])
+
 (mx/defc ruler
   {:mixins [mx/static mx/reactive]
    :will-unmount (fn [own]
@@ -57,6 +70,7 @@
   (letfn [(on-mouse-down [event]
             (dom/stop-propagation event)
             (st/emit! ::uev/interrupt
+                      (udw/set-tooltip nil)
                       (udw/start-ruler)))
           (on-mouse-up [event]
             (dom/stop-propagation event)
@@ -69,4 +83,8 @@
              :width c/viewport-width
              :height c/viewport-height}]
      (when-let [points (mx/react ruler-points-ref)]
-       (ruler-line zoom points))]))
+       (println points)
+       [:g
+        (ruler-line zoom points)
+        (ruler-text zoom points)])]))
+