Adding initial tooltip support

frontend/resources/styles/main/partials/workspace-canvas.scss

@@ -46,6 +46,16 @@
     }
   }
 
+  .cursor-tooltip {
+    background-color: $color-dark-bg;
+    border-radius: $br-small;
+    color: $color-white;
+    font-size: $fs14;
+    padding: 3px 8px;
+    transition: none;
+    text-align: center;
+  }
+
   .workspace-canvas {
     height: calc(100vh - 50px);
     overflow: scroll;

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

@@ -204,6 +204,17 @@
   []
   (ResetZoom.))
 
+;; --- Set tooltip
+
+(defrecord SetTooltip [text]
+  ptk/UpdateEvent
+  (update [_ state]
+    (assoc-in state [:workspace :tooltip] text)))
+
+(defn set-tooltip
+  [text]
+  (SetTooltip. text))
+
 ;; --- Initialize Alignment Index
 
 (declare initialize-alignment?)

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

@@ -119,6 +119,9 @@
        (rx/map :window-coords)
        (rx/share)))
 
+(defonce mouse-absolute-a
+  (rx/to-atom mouse-absolute-s))
+
 (defonce mouse-ctrl-s
   (->> mouse-s
        (rx/map :ctrl)

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

@@ -55,6 +55,17 @@
     [:span {:alt "y"}
      (str "Y: " (:y coords "-"))]]))
 
+(mx/defc cursor-tooltip
+  {:mixins [mx/reactive mx/static]}
+  [tooltip]
+  (let [coords (mx/react wb/mouse-absolute-a)]
+   [:span.cursor-tooltip
+    {:style
+     {:position "fixed"
+      :left (str (+ (:x coords) 5) "px")
+      :top (str (- (:y coords) 25) "px")}}
+    tooltip]))
+
 ;; --- Canvas
 
 (mx/defc canvas
@@ -153,6 +164,7 @@
         page (mx/react wb/page-ref)
         flags (:flags workspace)
         drawing? (:drawing workspace)
+        tooltip (:tooltip workspace)
         zoom (or (:zoom workspace) 1)]
     (letfn [(on-mouse-down [event]
               (dom/stop-propagation event)
@@ -188,6 +200,8 @@
                 (rx/push! wb/events-b [:mouse/double-click opts])))]
       [:div
         (coordinates)
+        (when tooltip
+          (cursor-tooltip tooltip))
         [:svg.viewport {:width (* c/viewport-width zoom)
                         :height (* c/viewport-height zoom)
                         :ref "viewport"

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

@@ -81,7 +81,12 @@
   (letfn [(on-click [event]
             (dom/stop-propagation event)
             (swap! drawing-shape drop-last-point)
+            (st/emit! (udw/set-tooltip nil))
             (rx/push! drawing-stoper true))
+          (on-mouse-enter [event]
+            (st/emit! (udw/set-tooltip "Click to close the path")))
+          (on-mouse-leave [event]
+            (st/emit! (udw/set-tooltip nil)))
           (drop-last-point [shape]
             (let [points (:points shape)
                   points (vec (butlast points))]
@@ -94,7 +99,9 @@
          [:circle.close-bezier {:cx x
                    :cy y
                    :r 5
-                   :on-click on-click}])])))
+                   :on-click on-click
+                   :on-mouse-enter on-mouse-enter
+                   :on-mouse-leave on-mouse-leave}])])))
 
 ;; --- Drawing Initialization