diff --git a/frontend/src/uxbox/main/ui/workspace/shapes/frame.cljs b/frontend/src/uxbox/main/ui/workspace/shapes/frame.cljs index daa178ba0..9e833ac0b 100644 --- a/frontend/src/uxbox/main/ui/workspace/shapes/frame.cljs +++ b/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}] - - [:g.outlines - (for [child (filter (comp outline? :id) children)] - [:& outline {:shape (geom/transform-shape child)}])]]]))))) + :children children}]]]))))) diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index 0924a267f..0e1a486a5 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/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