Merge pull request #241 from uxbox/fixes_hover_shapes

Fixes hover on shapes

frontend/src/uxbox/main/ui/workspace/shapes/frame.cljs

@@ -9,7 +9,6 @@
 
 (ns uxbox.main.ui.workspace.shapes.frame
   (:require
-   [clojure.set :as set]
    [rumext.alpha :as mf]
    [uxbox.common.data :as d]
    [uxbox.main.constants :as c]
@@ -17,7 +16,7 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
    [uxbox.main.ui.workspace.shapes.common :as common]
-   [uxbox.main.ui.workspace.shapes.outline :refer [outline]]
+   [uxbox.main.data.workspace.selection :as dws]
    [uxbox.main.ui.shapes.frame :as frame]
    [uxbox.common.geom.matrix :as gmt]
    [uxbox.common.geom.point :as gpt]
@@ -44,6 +43,20 @@
                (recur (first ids) (rest ids))
                false))))))
 
+(defn use-mouse-over
+  [{:keys [id] :as shape}]
+  (mf/use-callback
+   (mf/deps shape)
+   (fn []
+     (st/emit! (dws/change-hover-state id true)))))
+
+(defn use-mouse-out
+  [{:keys [id] :as shape}]
+  (mf/use-callback
+   (mf/deps shape)
+   (fn []
+     (st/emit! (dws/change-hover-state id false)))))
+
 (defn frame-wrapper-factory
   [shape-wrapper]
   (let [frame-shape (frame/frame-shape shape-wrapper)]
@@ -60,10 +73,6 @@
             selected? (mf/deref selected-iref)
             zoom (mf/deref refs/selected-zoom)
 
-            selected-shape? (or (mf/deref refs/selected-shapes) #{})
-            hover? (or (mf/deref refs/current-hover) #{})
-            outline? (set/union selected-shape? hover?)
-
             on-mouse-down   (mf/use-callback (mf/deps shape)
                                              #(common/on-mouse-down % shape))
             on-context-menu (mf/use-callback (mf/deps shape)
@@ -105,14 +114,12 @@
                                (* zoom (:y label-pos))
                                ")")
                    ;; User may also select the frame with single click in the label
-                   :on-click on-double-click}
+                   :on-click on-double-click
+                   :on-mouse-over (use-mouse-over shape)
+                   :on-mouse-out (use-mouse-out shape)}
             (:name shape)]
            [:*
             [:& frame-shape
              {:shape shape
-              :children children}]
+              :children children}]]])))))
-
-            [:g.outlines
-             (for [child (filter (comp outline? :id) children)]
-               [:& outline {:shape (geom/transform-shape child)}])]]])))))
 

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

@@ -9,6 +9,7 @@
 
 (ns uxbox.main.ui.workspace.viewport
   (:require
+   [clojure.set :as set]
    [cuerdas.core :as str]
    [beicon.core :as rx]
    [goog.events :as events]
@@ -33,10 +34,12 @@
    [uxbox.main.ui.workspace.snap-points :refer [snap-points]]
    [uxbox.main.ui.workspace.snap-distances :refer [snap-distances]]
    [uxbox.main.ui.workspace.frame-grid :refer [frame-grid]]
+   [uxbox.main.ui.workspace.shapes.outline :refer [outline]]
    [uxbox.common.math :as mth]
    [uxbox.util.dom :as dom]
    [uxbox.util.dom.dnd :as dnd]
    [uxbox.util.object :as obj]
+   [uxbox.common.geom.shapes :as gsh]
    [uxbox.common.geom.point :as gpt]
    [uxbox.util.perf :as perf]
    [uxbox.common.uuid :as uuid])
@@ -130,6 +133,19 @@
          [:& shape-wrapper {:shape item
                             :key (:id item)}]))]))
 
+(mf/defc shape-outlines []
+  (let [selected-shape? (or (mf/deref refs/selected-shapes) #{})
+        hover? (or (mf/deref refs/current-hover) #{})
+        outline? (set/union selected-shape? hover?)
+        data    (mf/deref refs/workspace-data)
+        shapes (->> data :objects vals (filter (comp outline? :id)))
+        current-transform (mf/deref refs/current-transform)]
+    (when (nil? current-transform)
+      [:g.outlines
+       (for [shape shapes]
+         [:& outline {:key (str "outline-" (:id shape))
+                      :shape (gsh/transform-shape shape)}])])))
+
 (mf/defc viewport
   [{:keys [page local layout] :as props}]
   (let [{:keys [drawing-tool
@@ -416,6 +432,8 @@
      [:g
       [:& frames {:key (:id page)}]
 
+      [:& shape-outlines]
+
       (when (seq selected)
         [:& selection-handlers {:selected selected
                                 :zoom zoom