From 47a8da43dcbfce918ea9ae7c08404a0575a1144b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 16 Sep 2020 09:00:14 +0200 Subject: [PATCH] :tada: Display selection and controls in color for components --- .../src/app/main/ui/workspace/selection.cljs | 53 ++++++++++++------- .../ui/workspace/shapes/interactions.cljs | 3 +- .../app/main/ui/workspace/shapes/outline.cljs | 7 +-- .../src/app/main/ui/workspace/viewport.cljs | 8 ++- 4 files changed, 46 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/selection.cljs b/frontend/src/app/main/ui/workspace/selection.cljs index 87539d4bb..eb73c081d 100644 --- a/frontend/src/app/main/ui/workspace/selection.cljs +++ b/frontend/src/app/main/ui/workspace/selection.cljs @@ -34,10 +34,11 @@ (def resize-point-circle-radius 10) (def resize-point-rect-size 8) (def resize-side-height 8) -(def selection-rect-color "#1FDEA7") +(def selection-rect-color-normal "#1FDEA7") +(def selection-rect-color-component "#00E0FF") (def selection-rect-width 1) -(mf/defc selection-rect [{:keys [transform rect zoom]}] +(mf/defc selection-rect [{:keys [transform rect zoom color]}] (let [{:keys [x y width height]} rect] [:rect.main {:x x @@ -45,7 +46,7 @@ :width width :height height :transform transform - :style {:stroke selection-rect-color + :style {:stroke color :stroke-width (/ selection-rect-width zoom) :fill "transparent"}}])) @@ -125,7 +126,7 @@ :on-mouse-down on-rotate}])) (mf/defc resize-point-handler - [{:keys [cx cy zoom position on-resize transform rotation]}] + [{:keys [cx cy zoom position on-resize transform rotation color]}] (let [{cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform) rot-square (case position :top-left 0 @@ -139,7 +140,7 @@ :vectorEffect "non-scaling-stroke" } :fill "#FFFFFF" - :stroke "#1FDEA7" + :stroke color :cx cx' :cy cy'}] @@ -173,6 +174,7 @@ [props] (let [shape (obj/get props "shape") zoom (obj/get props "zoom") + color (obj/get props "color") on-resize (obj/get props "on-resize") on-rotate (obj/get props "on-rotate") current-transform (mf/deref refs/current-transform) @@ -186,8 +188,10 @@ ;; Selection rect [:& selection-rect {:rect selrect :transform transform - :zoom zoom}] - [:& outline {:shape (geom/transform-shape shape)}] + :zoom zoom + :color color}] + [:& outline {:shape (geom/transform-shape shape) + :color color}] ;; Handlers (for [{:keys [type position props]} (handlers-for-selection selrect)] @@ -197,7 +201,8 @@ :on-rotate on-rotate :on-resize (partial on-resize position) :transform transform - :rotation (:rotation shape)} + :rotation (:rotation shape) + :color color} props (map->obj (merge common-props props))] (case type :rotation (when (not= :frame (:type shape)) [:> rotation-handler props]) @@ -206,7 +211,7 @@ ;; --- Selection Handlers (Component) (mf/defc path-edition-selection-handlers - [{:keys [shape modifiers zoom] :as props}] + [{:keys [shape modifiers zoom color] :as props}] (letfn [(on-mouse-down [event index] (dom/stop-propagation event) ;; TODO: this need code ux refactor @@ -240,26 +245,26 @@ :key index :on-mouse-down #(on-mouse-down % index) :fill "#ffffff" - :stroke "#1FDEA7" + :stroke color :style {:cursor cur/move-pointer}}]))]))) ;; TODO: add specs for clarity (mf/defc text-edition-selection-handlers - [{:keys [shape zoom] :as props}] + [{:keys [shape zoom color] :as props}] (let [{:keys [x y width height]} shape] [:g.controls [:rect.main {:x x :y y :transform (geom/transform-matrix shape) :width width :height height - :style {:stroke "#1FDEA7" + :style {:stroke color :stroke-width "0.5" :stroke-opacity "1" :fill "transparent"}}]])) (mf/defc multiple-selection-handlers - [{:keys [shapes selected zoom] :as props}] + [{:keys [shapes selected zoom color] :as props}] (let [shape (geom/selection-rect shapes) shape-center (geom/center shape) on-resize (fn [current-position initial-position event] @@ -272,13 +277,14 @@ [:* [:& controls {:shape shape :zoom zoom + :color color :on-resize on-resize :on-rotate on-rotate}] (when (debug? :selection-center) [:circle {:cx (:x shape-center) :cy (:y shape-center) :r 5 :fill "yellow"}])])) (mf/defc single-selection-handlers - [{:keys [shape zoom] :as props}] + [{:keys [shape zoom color] :as props}] (let [shape-id (:id shape) shape (geom/transform-shape shape) shape' (if (debug? :simple-selection) (geom/selection-rect [shape]) shape) @@ -293,6 +299,7 @@ [:* [:& controls {:shape shape' :zoom zoom + :color color :on-rotate on-rotate :on-resize on-resize}]])) @@ -304,7 +311,11 @@ shapes (->> (mf/deref (refs/objects-by-id selected)) (remove nil?)) num (count shapes) - {:keys [id type] :as shape} (first shapes)] + {:keys [id type] :as shape} (first shapes) + + color (if (or (> num 1) (nil? (:shape-ref shape))) + selection-rect-color-normal + selection-rect-color-component)] (cond (zero? num) nil @@ -312,18 +323,22 @@ (> num 1) [:& multiple-selection-handlers {:shapes shapes :selected selected - :zoom zoom}] + :zoom zoom + :color color}] (and (= type :text) (= edition (:id shape))) [:& text-edition-selection-handlers {:shape shape - :zoom zoom}] + :zoom zoom + :color color}] (and (or (= type :path) (= type :curve)) (= edition (:id shape))) [:& path-edition-selection-handlers {:shape shape - :zoom zoom}] + :zoom zoom + :color color}] :else [:& single-selection-handlers {:shape shape - :zoom zoom}]))) + :zoom zoom + :color color}]))) diff --git a/frontend/src/app/main/ui/workspace/shapes/interactions.cljs b/frontend/src/app/main/ui/workspace/shapes/interactions.cljs index ab6d79d4d..fb36edad8 100644 --- a/frontend/src/app/main/ui/workspace/shapes/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/interactions.cljs @@ -158,7 +158,8 @@ :zoom zoom}] (when dest-shape - [:& outline {:shape dest-shape}])]))) + [:& outline {:shape dest-shape + :color "#31EFB8"}])]))) (mf/defc interaction-handle diff --git a/frontend/src/app/main/ui/workspace/shapes/outline.cljs b/frontend/src/app/main/ui/workspace/shapes/outline.cljs index 1b7efbd3f..361636e44 100644 --- a/frontend/src/app/main/ui/workspace/shapes/outline.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/outline.cljs @@ -22,6 +22,7 @@ [props] (let [zoom (mf/deref refs/selected-zoom) shape (unchecked-get props "shape") + color (unchecked-get props "color") transform (gsh/transform-matrix shape) {:keys [id x y width height]} shape @@ -31,7 +32,7 @@ "rect") common {:fill "transparent" - :stroke "#31EFB8" + :stroke color :strokeWidth (/ 1 zoom) :pointerEvents "none" :transform transform} @@ -42,10 +43,10 @@ :cy (+ y (/ height 2)) :rx (/ width 2) :ry (/ height 2)} - + (:curve :path) {:d (path/render-path shape)} - + {:x x :y y :width width diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 72a64ed16..74957a7e5 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -133,12 +133,16 @@ hover (or (unchecked-get props "hover") #{}) outline? (set/union selected hover) shapes (->> (vals objects) (filter (comp outline? :id))) - transform (mf/deref refs/current-transform)] + transform (mf/deref refs/current-transform) + color (if (or (> (count shapes) 1) (nil? (:shape-ref (first shapes)))) + "#31EFB8" + "#00E0FF")] (when (nil? transform) [:g.outlines (for [shape shapes] [:& outline {:key (str "outline-" (:id shape)) - :shape (gsh/transform-shape shape)}])]))) + :shape (gsh/transform-shape shape) + :color color}])]))) (mf/defc frames {::mf/wrap [mf/memo]