✨ Add cursor tooltips.

frontend/resources/locales.json

@@ -721,6 +721,12 @@
       "fr" : "Mettre à jour les paramètres"
     }
   },
+  "workspace.viewport.click-to-close-path": {
+    "translations": {
+      "en": "Click to close the path"
+    }
+  },
+
   "workspace.header.canvas" : {
     "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:95" ],
     "translations" : {

frontend/src/uxbox/main/data/workspace.cljs

@@ -734,9 +734,16 @@
           (rx/of (deactivate-flag flag))
           (rx/of (activate-flag flag)))))))
 
-(defn set-tooltip
-  [txt]
-  ::todo)
+;; --- Tooltip
+
+(defn assign-cursor-tooltip
+  [content]
+  (ptk/reify ::assign-cursor-tooltip
+    ptk/UpdateEvent
+    (update [_ state]
+      (if (string? content)
+        (assoc-in state [:workspace-local :tooltip] content)
+        (assoc-in state [:workspace-local :tooltip] nil)))))
 
 ;; --- Workspace Ruler
 

frontend/src/uxbox/main/ui/workspace/drawarea.cljs

@@ -24,6 +24,7 @@
    [uxbox.util.geom.matrix :as gmt]
    [uxbox.util.geom.path :as path]
    [uxbox.util.geom.point :as gpt]
+   [uxbox.util.i18n :as i18n :refer [t]]
    [uxbox.util.uuid :as uuid]))
 
 ;; --- Events
@@ -319,16 +320,23 @@
 
 (mf/defc path-draw-area
   [{:keys [shape] :as props}]
-  (letfn [(on-click [event]
-            (dom/stop-propagation event)
-            (st/emit! (dw/set-tooltip nil)
-                      close-drawing-path
-                      ::end-path-drawing))
+  (let [locale (i18n/use-locale)
 
-          (on-mouse-enter [event]
-            (st/emit! (dw/set-tooltip "Click to close the path")))
-          (on-mouse-leave [event]
-            (st/emit! (dw/set-tooltip nil)))]
+        on-click
+        (fn [event]
+          (dom/stop-propagation event)
+          (st/emit! (dw/assign-cursor-tooltip nil)
+                    close-drawing-path
+                    ::end-path-drawing))
+
+        on-mouse-enter
+        (fn [event]
+          (let [msg (t locale "workspace.viewport.click-to-close-path")]
+            (st/emit! (dw/assign-cursor-tooltip msg))))
+
+        on-mouse-leave
+        (fn [event]
+          (st/emit! (dw/assign-cursor-tooltip nil)))]
     (when-let [{:keys [x y] :as segment} (first (:segments shape))]
       [:g
        [:& shapes/shape-wrapper {:shape shape}]

frontend/src/uxbox/main/ui/workspace/ruler.cljs

@@ -56,7 +56,7 @@
   (letfn [(on-mouse-down [event]
             (dom/stop-propagation event)
             (st/emit! :interrupt
-                      (udw/set-tooltip nil)
+                      (udw/assign-cursor-tooltip nil)
                       (udw/start-ruler)))
           (on-mouse-up [event]
             (dom/stop-propagation event)

frontend/src/uxbox/main/ui/workspace/viewport.cljs

@@ -46,6 +46,16 @@
      [:span {:alt "y"}
       (str "Y: " (:y coords "-"))]]))
 
+(mf/defc cursor-tooltip
+  [{:keys [zoom tooltip] :as props}]
+  (let [coords (some-> (use-rxsub ms/mouse-position)
+                       (gpt/divide (gpt/point zoom zoom)))
+        pos-x (- (:x coords) 100)
+        pos-y (+ (:y coords) 30)]
+    [:g {:transform (str "translate(" pos-x "," pos-y ")")}
+     [:foreignObject {:width 200 :height 100 :style {:text-align "center"}}
+      [:span tooltip]]]))
+
 ;; --- Cursor tooltip
 
 (defn- get-shape-tooltip
@@ -60,17 +70,6 @@
     :circle "Drag to draw a Circle"
     nil))
 
-;; (mf/defc cursor-tooltip
-;;   {:wrap [mf/wrap-memo]}
-;;   [{:keys [tooltip]}]
-;;   (let [coords (mf/deref refs/window-mouse-position)]
-;;     [:span.cursor-tooltip
-;;      {:style
-;;       {:position "fixed"
-;;        :left (str (+ (:x coords) 5) "px")
-;;        :top (str (- (:y coords) 25) "px")}}
-;;      tooltip]))
-
 ;; --- Selection Rect
 
 (defn- selection->rect
@@ -166,6 +165,7 @@
                 zoom
                 flags
                 edition
+                tooltip
                 selected]
          :as local} (mf/deref refs/workspace-local)
         viewport-ref (mf/use-ref nil)
@@ -291,6 +291,9 @@
          (if (contains? flags :grid)
            [:& grid])]
 
+        (when tooltip
+          [:& cursor-tooltip {:zoom zoom :tooltip tooltip}])
+
         (when (contains? flags :ruler)
           [:& ruler {:zoom zoom :ruler (:ruler local)}])