diff --git a/frontend/src/uxbox/main/data/workspace/selection.cljs b/frontend/src/uxbox/main/data/workspace/selection.cljs index 10d634899..b3564e961 100644 --- a/frontend/src/uxbox/main/data/workspace/selection.cljs +++ b/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 #{})))))) diff --git a/frontend/src/uxbox/main/ui/workspace/shapes.cljs b/frontend/src/uxbox/main/ui/workspace/shapes.cljs index a2a64fc46..0d4ff2006 100644 --- a/frontend/src/uxbox/main/ui/workspace/shapes.cljs +++ b/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] diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index 839512ba1..e7468850f 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/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