🐛 Fix outline leaking on grouping shapes.

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

@@ -299,10 +299,13 @@
         (rx/of (dwc/commit-changes rchanges uchanges {:commit-local? true})
                (select-shapes selected))))))
 
-(defn change-hover-state [id value]
-  (ptk/reify ::change-hover-state
-    ptk/UpdateEvent
-    (update [_ state]
-      (-> state
-          (update-in [:workspace-local :hover] #(if (nil? %) #{} %))
-          (update-in [:workspace-local :hover] (comp (if value conj disj)) id)))))
+(defn change-hover-state
+  [id value]
+  (letfn [(update-hover [items]
+            (if value
+              (conj items id)
+              (disj items id)))]
+    (ptk/reify ::change-hover-state
+      ptk/UpdateEvent
+      (update [_ state]
+        (update-in state [:workspace-local :hover] (fnil update-hover #{}))))))

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

@@ -54,17 +54,17 @@
       (and (identical? n-shape o-shape)
            (identical? n-frame o-frame)))))
 
-(defn use-mouse-over
+(defn use-mouse-enter
   [{:keys [id] :as shape}]
   (mf/use-callback
-   (mf/deps shape)
+   (mf/deps id)
    (fn []
      (st/emit! (dws/change-hover-state id true)))))
 
-(defn use-mouse-out
+(defn use-mouse-leave
   [{:keys [id] :as shape}]
   (mf/use-callback
-   (mf/deps shape)
+   (mf/deps id)
    (fn []
      (st/emit! (dws/change-hover-state id false)))))
 
@@ -78,14 +78,19 @@
         opts #js {:shape shape
                   :frame frame}
         alt? (mf/use-state false)
-        on-mouse-over (use-mouse-over shape)
-        on-mouse-out (use-mouse-out shape)]
+        on-mouse-enter (use-mouse-enter shape)
+        on-mouse-leave (use-mouse-leave shape)]
 
     (hooks/use-stream ms/keyboard-alt #(reset! alt? %))
 
+    (mf/use-effect
+     (fn []
+       (fn []
+         (on-mouse-leave))))
+
     (when (and shape (not (:hidden shape)))
-      [:g.shape-wrapper {:on-mouse-over on-mouse-over
-                         :on-mouse-out on-mouse-out
+      [:g.shape-wrapper {:on-mouse-enter on-mouse-enter
+                         :on-mouse-leave on-mouse-leave
                          :style {:cursor (if @alt? cur/duplicate nil)}}
        (case (:type shape)
          :curve [:> path/path-wrapper opts]

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

@@ -120,9 +120,9 @@
   {::mf/wrap-props false}
   [props]
   (let [objects   (unchecked-get props "objects")
-        selected? (or (mf/deref refs/selected-shapes) #{})
-        hover?    (or (mf/deref refs/current-hover) #{})
-        outline?  (set/union selected? hover?)
+        selected  (or (unchecked-get props "selected") #{})
+        hover     (or (unchecked-get props "hover") #{})
+        outline?  (set/union selected hover)
         shapes    (->> (vals objects) (filter (comp outline? :id)))
         transform (mf/deref refs/current-transform)]
     (when (nil? transform)
@@ -132,9 +132,12 @@
                       :shape (gsh/transform-shape shape)}])])))
 
 (mf/defc frames
-  {:wrap [mf/memo]}
-  []
-  (let [data    (mf/deref refs/workspace-data)
+  {::mf/wrap [mf/memo]
+   ::mf/wrap-props false}
+  [props]
+  (let [data     (mf/deref refs/workspace-data)
+        hover    (unchecked-get props "hover")
+        selected (unchecked-get props "selected")
         objects (:objects data)
         root    (get objects uuid/zero)
         shapes  (->> (:shapes root)
@@ -149,7 +152,9 @@
           [:& shape-wrapper {:shape item
                              :key (:id item)}]))]
 
-     [:& shape-outlines {:objects objects}]]))
+     [:& shape-outlines {:objects objects
+                         :selected selected
+                         :hover hover}]]))
 
 (mf/defc viewport
   [{:keys [page local layout] :as props}]
@@ -435,7 +440,9 @@
       :on-drop on-drop}
 
      [:g
-      [:& frames {:key (:id page)}]
+      [:& frames {:key (:id page)
+                  :hover (:hover local)
+                  :selected (:selected selected)}]
 
       (when (seq selected)
         [:& selection-handlers {:selected selected