From aa6f82c31feb4a46f1e0524785f75ba74371c42a Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 11 Mar 2022 15:29:30 +0100 Subject: [PATCH 1/2] :bug: Fix issue with guides over shape handlers --- CHANGES.md | 10 + .../src/app/main/ui/workspace/viewport.cljs | 38 ++-- .../main/ui/workspace/viewport/selection.cljs | 205 ++++++++++++------ 3 files changed, 167 insertions(+), 86 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 36a66f1de..a40f79448 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,5 +1,15 @@ # CHANGELOG +## 1.12.2-beta +### :boom: Breaking changes + +### :sparkles: New features + +### :bug: Bugs fixed + +- Fix issue with guides over shape handlers [Taiga #3032](https://tree.taiga.io/project/penpot/issue/3032) + + ## 1.12.1-beta ### :boom: Breaking changes diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index ffbdc7d39..5b71a42f9 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -249,15 +249,30 @@ :edition edition :zoom zoom}]) + (when show-selection-handlers? + [:& selection/selection-area + {:shapes selected-shapes + :zoom zoom + :edition edition + :disable-handlers (or drawing-tool edition @space? @ctrl?) + :on-move-selected on-move-selected + :on-context-menu on-menu-selected}]) + + (when show-rules? + [:& guides/viewport-guides + {:zoom zoom + :vbox vbox + :hover-frame frame-parent + :modifiers modifiers + :disabled-guides? disabled-guides?}]) + (when show-selection-handlers? [:& selection/selection-handlers {:selected selected :shapes selected-shapes :zoom zoom :edition edition - :disable-handlers (or drawing-tool edition @space?) - :on-move-selected on-move-selected - :on-context-menu on-menu-selected}]) + :disable-handlers (or drawing-tool edition @space?)}]) (when show-measures? [:& msr/measurement @@ -363,16 +378,7 @@ :viewport-ref viewport-ref}] (when show-rules? - [:* - [:& rules/rules - {:zoom zoom - :vbox vbox - :selected-shapes selected-shapes}] - - [:& guides/viewport-guides - {:zoom zoom - :vbox vbox - :hover-frame frame-parent - :modifiers modifiers - :disabled-guides? disabled-guides?}]])]]])) - + [:& rules/rules + {:zoom zoom + :vbox vbox + :selected-shapes selected-shapes}])]]])) diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index 0b60675a7..99c85734d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -176,8 +176,7 @@ :cx cx' :cy cy' :style {:fill (if (debug? :resize-handler) "red" "none") - :cursor cursor}}] - )])) + :cursor cursor}}])])) (mf/defc resize-side-handler "The side handler is always rendered horizontally and then rotated" @@ -217,14 +216,37 @@ :width final-width :height final-height})) -(mf/defc controls +(mf/defc controls-selection + {::mf/wrap-props false} + [props] + (let [shape (obj/get props "shape") + zoom (obj/get props "zoom") + color (obj/get props "color") + on-move-selected (obj/get props "on-move-selected") + on-context-menu (obj/get props "on-context-menu") + disable-handlers (obj/get props "disable-handlers") + + current-transform (mf/deref refs/current-transform) + + selrect (:selrect shape) + transform (geom/transform-matrix shape {:no-flip true})] + + (when (not (#{:move :rotate} current-transform)) + [:g.controls {:pointer-events (if disable-handlers "none" "visible")} + ;; Selection rect + [:& selection-rect {:rect selrect + :transform transform + :zoom zoom + :color color + :on-move-selected on-move-selected + :on-context-menu on-context-menu}]]))) + +(mf/defc controls-handlers {::mf/wrap-props false} [props] (let [{:keys [overflow-text] :as shape} (obj/get props "shape") zoom (obj/get props "zoom") color (obj/get props "color") - on-move-selected (obj/get props "on-move-selected") - on-context-menu (obj/get props "on-context-menu") on-resize (obj/get props "on-resize") on-rotate (obj/get props "on-rotate") disable-handlers (obj/get props "disable-handlers") @@ -240,15 +262,6 @@ (when (not (#{:move :rotate} current-transform)) [:g.controls {:pointer-events (if disable-handlers "none" "visible")} - - ;; Selection rect - [:& selection-rect {:rect selrect - :transform transform - :zoom zoom - :color color - :on-move-selected on-move-selected - :on-context-menu on-context-menu}] - ;; Handlers (for [{:keys [type position props]} (handlers-for-selection selrect shape zoom)] (let [common-props {:key (str (name type) "-" (name position)) @@ -267,10 +280,9 @@ :resize-side [:> resize-side-handler props])))]))) ;; --- Selection Handlers (Component) -;; TODO: add specs for clarity -(mf/defc text-edition-selection-handlers - [{:keys [shape color] :as props}] +(mf/defc text-edition-selection + [{:keys [shape color zoom] :as props}] (let [{:keys [x y width height]} shape] [:g.controls [:rect.main {:x x :y y @@ -279,12 +291,12 @@ :height height :pointer-events "visible" :style {:stroke color - :stroke-width "0.5" + :stroke-width (/ 0.5 zoom) :stroke-opacity "1" :fill "none"}}]])) -(mf/defc multiple-selection-handlers - [{:keys [shapes selected zoom color disable-handlers on-move-selected on-context-menu] :as props}] +(mf/defc multiple-handlers + [{:keys [shapes selected zoom color disable-handlers] :as props}] (let [shape (mf/use-memo (mf/deps shapes) #(->> shapes @@ -292,8 +304,6 @@ (geom/selection-rect) (geom/setup {:type :rect}))) - shape-center (geom/center-shape shape) - on-resize (fn [current-position _initial-position event] (when (dom/left-mouse? event) @@ -306,33 +316,41 @@ (dom/stop-propagation event) (st/emit! (dw/start-rotate shapes))))] - [:* - [:& controls {:shape shape - :zoom zoom - :color color - :disable-handlers disable-handlers - :on-move-selected on-move-selected - :on-resize on-resize - :on-rotate on-rotate - :on-context-menu on-context-menu}] + [:& controls-handlers + {:shape shape + :zoom zoom + :color color + :disable-handlers disable-handlers + :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 multiple-selection + [{:keys [shapes zoom color disable-handlers on-move-selected on-context-menu] :as props}] + (let [shape (mf/use-memo + (mf/deps shapes) + #(->> shapes + (map geom/transform-shape) + (geom/selection-rect) + (geom/setup {:type :rect})))] -(mf/defc single-selection-handlers - [{:keys [shape zoom color disable-handlers on-move-selected on-context-menu] :as props}] + [:& controls-selection + {:shape shape + :zoom zoom + :color color + :disable-handlers disable-handlers + :on-move-selected on-move-selected + :on-context-menu on-context-menu}])) + +(mf/defc single-handlers + [{:keys [shape zoom color disable-handlers] :as props}] (let [shape-id (:id shape) shape (geom/transform-shape shape {:round-coords? false}) - shape' (if (debug? :simple-selection) - (geom/setup {:type :rect} (geom/selection-rect [shape])) - shape) - on-resize (fn [current-position _initial-position event] (when (dom/left-mouse? event) (dom/stop-propagation event) - (st/emit! (dw/start-resize current-position #{shape-id} shape')))) + (st/emit! (dw/start-resize current-position #{shape-id} shape)))) on-rotate (fn [event] @@ -340,18 +358,29 @@ (dom/stop-propagation event) (st/emit! (dw/start-rotate [shape]))))] - [:& controls {:shape shape' - :zoom zoom - :color color - :on-rotate on-rotate - :on-resize on-resize - :disable-handlers disable-handlers - :on-move-selected on-move-selected - :on-context-menu on-context-menu}])) + [:& controls-handlers + {:shape shape + :zoom zoom + :color color + :disable-handlers disable-handlers + :on-rotate on-rotate + :on-resize on-resize}])) -(mf/defc selection-handlers +(mf/defc single-selection + [{:keys [shape zoom color disable-handlers on-move-selected on-context-menu] :as props}] + (let [shape (geom/transform-shape shape {:round-coords? false})] + + [:& controls-selection + {:shape shape + :zoom zoom + :color color + :disable-handlers disable-handlers + :on-move-selected on-move-selected + :on-context-menu on-context-menu}])) + +(mf/defc selection-area {::mf/wrap [mf/memo]} - [{:keys [shapes selected edition zoom disable-handlers on-move-selected on-context-menu] :as props}] + [{:keys [shapes edition zoom disable-handlers on-move-selected on-context-menu] :as props}] (let [num (count shapes) {:keys [type] :as shape} (first shapes) @@ -363,28 +392,64 @@ nil (> num 1) - [:& multiple-selection-handlers {:shapes shapes - :selected selected - :zoom zoom - :color color - :disable-handlers disable-handlers - :on-move-selected on-move-selected - :on-context-menu on-context-menu}] + [:& multiple-selection + {:shapes shapes + :zoom zoom + :color color + :disable-handlers disable-handlers + :on-move-selected on-move-selected + :on-context-menu on-context-menu}] - (and (= type :text) - (= edition (:id shape))) - [:& text-edition-selection-handlers {:shape shape - :zoom zoom - :color color}] + (and (= type :text) (= edition (:id shape))) + [:& text-edition-selection + {:shape shape + :zoom zoom + :color color}] (= edition (:id shape)) - [:& path-editor {:zoom zoom - :shape shape}] + nil :else - [:& single-selection-handlers {:shape shape - :zoom zoom - :color color - :disable-handlers disable-handlers - :on-move-selected on-move-selected - :on-context-menu on-context-menu}]))) + [:& single-selection + {:shape shape + :zoom zoom + :color color + :disable-handlers disable-handlers + :on-move-selected on-move-selected + :on-context-menu on-context-menu}]))) + +(mf/defc selection-handlers + {::mf/wrap [mf/memo]} + [{:keys [shapes selected edition zoom disable-handlers] :as props}] + (let [num (count shapes) + {:keys [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 + + (> num 1) + [:& multiple-handlers + {:shapes shapes + :selected selected + :zoom zoom + :color color + :disable-handlers disable-handlers}] + + (and (= type :text) (= edition (:id shape))) + nil + + (= edition (:id shape)) + [:& path-editor + {:zoom zoom + :shape shape}] + + :else + [:& single-handlers + {:shape shape + :zoom zoom + :color color + :disable-handlers disable-handlers}]))) From 53474098049d73105149f48a09f7b5ca96929202 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 11 Mar 2022 15:30:07 +0100 Subject: [PATCH 2/2] :bug: Fix problem with shift+ctrl+click to select --- CHANGES.md | 1 + frontend/src/app/main/ui/workspace/viewport/actions.cljs | 5 ++--- frontend/src/app/main/ui/workspace/viewport/hooks.cljs | 8 +++++--- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index a40f79448..dfe3d10d6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -8,6 +8,7 @@ ### :bug: Bugs fixed - Fix issue with guides over shape handlers [Taiga #3032](https://tree.taiga.io/project/penpot/issue/3032) +- Fix problem with shift+ctrl+click to select [#1671](https://github.com/penpot/penpot/issues/1671) ## 1.12.1-beta diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 0d6ca0ba8..cc2a2c5b4 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -160,14 +160,13 @@ (st/emit! (ms/->MouseEvent :click ctrl? shift? alt?)) (when (and hovering? - (not shift?) - (or ctrl? (not frame?)) + (or (not frame?) ctrl?) (not @space?) (not selected?) (not edition) (not drawing-path?) (not drawing-tool)) - (st/emit! (dw/select-shape (:id @hover))))))))) + (st/emit! (dw/select-shape (:id @hover) shift?)))))))) (defn on-double-click [hover hover-ids drawing-path? objects edition] diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 81a9352ba..f9b7ca0c2 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -170,7 +170,7 @@ (hooks/use-stream over-shapes-stream - (mf/deps page-id objects @ctrl?) + (mf/deps page-id objects) (fn [ids] (let [is-group? (fn [id] @@ -178,15 +178,17 @@ selected (mf/ref-val selected-ref) + ctrl? (mf/ref-val ctrl-ref) + remove-xfm (mapcat #(cph/get-parent-ids objects %)) remove-id? (cond-> (into #{} remove-xfm selected) :always (into (filter #(check-text-collision? objects (mf/ref-val raw-position-ref) %)) ids) - (not @ctrl?) + (not ctrl?) (into (filter #(group-empty-space? % objects ids)) ids) - @ctrl? + ctrl? (into (filter is-group?) ids)) hover-shape (->> ids