🐛 Fix issue with guides over shape handlers

This commit is contained in:
alonso.torres 2022-03-11 15:29:30 +01:00
parent a0c0ab1871
commit aa6f82c31f
3 changed files with 167 additions and 86 deletions

View file

@ -1,5 +1,15 @@
# CHANGELOG # 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 ## 1.12.1-beta
### :boom: Breaking changes ### :boom: Breaking changes

View file

@ -249,15 +249,30 @@
:edition edition :edition edition
:zoom zoom}]) :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? (when show-selection-handlers?
[:& selection/selection-handlers [:& selection/selection-handlers
{:selected selected {:selected selected
:shapes selected-shapes :shapes selected-shapes
:zoom zoom :zoom zoom
:edition edition :edition edition
:disable-handlers (or drawing-tool edition @space?) :disable-handlers (or drawing-tool edition @space?)}])
:on-move-selected on-move-selected
:on-context-menu on-menu-selected}])
(when show-measures? (when show-measures?
[:& msr/measurement [:& msr/measurement
@ -363,16 +378,7 @@
:viewport-ref viewport-ref}] :viewport-ref viewport-ref}]
(when show-rules? (when show-rules?
[:* [:& rules/rules
[:& rules/rules {:zoom zoom
{:zoom zoom :vbox vbox
:vbox vbox :selected-shapes selected-shapes}])]]]))
:selected-shapes selected-shapes}]
[:& guides/viewport-guides
{:zoom zoom
:vbox vbox
:hover-frame frame-parent
:modifiers modifiers
:disabled-guides? disabled-guides?}]])]]]))

View file

@ -176,8 +176,7 @@
:cx cx' :cx cx'
:cy cy' :cy cy'
:style {:fill (if (debug? :resize-handler) "red" "none") :style {:fill (if (debug? :resize-handler) "red" "none")
:cursor cursor}}] :cursor cursor}}])]))
)]))
(mf/defc resize-side-handler (mf/defc resize-side-handler
"The side handler is always rendered horizontally and then rotated" "The side handler is always rendered horizontally and then rotated"
@ -217,14 +216,37 @@
:width final-width :width final-width
:height final-height})) :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} {::mf/wrap-props false}
[props] [props]
(let [{:keys [overflow-text] :as shape} (obj/get props "shape") (let [{:keys [overflow-text] :as shape} (obj/get props "shape")
zoom (obj/get props "zoom") zoom (obj/get props "zoom")
color (obj/get props "color") 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-resize (obj/get props "on-resize")
on-rotate (obj/get props "on-rotate") on-rotate (obj/get props "on-rotate")
disable-handlers (obj/get props "disable-handlers") disable-handlers (obj/get props "disable-handlers")
@ -240,15 +262,6 @@
(when (not (#{:move :rotate} current-transform)) (when (not (#{:move :rotate} current-transform))
[:g.controls {:pointer-events (if disable-handlers "none" "visible")} [: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 ;; Handlers
(for [{:keys [type position props]} (handlers-for-selection selrect shape zoom)] (for [{:keys [type position props]} (handlers-for-selection selrect shape zoom)]
(let [common-props {:key (str (name type) "-" (name position)) (let [common-props {:key (str (name type) "-" (name position))
@ -267,10 +280,9 @@
:resize-side [:> resize-side-handler props])))]))) :resize-side [:> resize-side-handler props])))])))
;; --- Selection Handlers (Component) ;; --- Selection Handlers (Component)
;; TODO: add specs for clarity
(mf/defc text-edition-selection-handlers (mf/defc text-edition-selection
[{:keys [shape color] :as props}] [{:keys [shape color zoom] :as props}]
(let [{:keys [x y width height]} shape] (let [{:keys [x y width height]} shape]
[:g.controls [:g.controls
[:rect.main {:x x :y y [:rect.main {:x x :y y
@ -279,12 +291,12 @@
:height height :height height
:pointer-events "visible" :pointer-events "visible"
:style {:stroke color :style {:stroke color
:stroke-width "0.5" :stroke-width (/ 0.5 zoom)
:stroke-opacity "1" :stroke-opacity "1"
:fill "none"}}]])) :fill "none"}}]]))
(mf/defc multiple-selection-handlers (mf/defc multiple-handlers
[{:keys [shapes selected zoom color disable-handlers on-move-selected on-context-menu] :as props}] [{:keys [shapes selected zoom color disable-handlers] :as props}]
(let [shape (mf/use-memo (let [shape (mf/use-memo
(mf/deps shapes) (mf/deps shapes)
#(->> shapes #(->> shapes
@ -292,8 +304,6 @@
(geom/selection-rect) (geom/selection-rect)
(geom/setup {:type :rect}))) (geom/setup {:type :rect})))
shape-center (geom/center-shape shape)
on-resize on-resize
(fn [current-position _initial-position event] (fn [current-position _initial-position event]
(when (dom/left-mouse? event) (when (dom/left-mouse? event)
@ -306,33 +316,41 @@
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/start-rotate shapes))))] (st/emit! (dw/start-rotate shapes))))]
[:* [:& controls-handlers
[:& controls {:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disable-handlers disable-handlers
:on-move-selected on-move-selected :on-resize on-resize
:on-resize on-resize :on-rotate on-rotate}]))
:on-rotate on-rotate
:on-context-menu on-context-menu}]
(when (debug? :selection-center) (mf/defc multiple-selection
[:circle {:cx (:x shape-center) :cy (:y shape-center) :r 5 :fill "yellow"}])])) [{: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 [:& controls-selection
[{:keys [shape zoom color disable-handlers on-move-selected on-context-menu] :as props}] {: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) (let [shape-id (:id shape)
shape (geom/transform-shape shape {:round-coords? false}) shape (geom/transform-shape shape {:round-coords? false})
shape' (if (debug? :simple-selection)
(geom/setup {:type :rect} (geom/selection-rect [shape]))
shape)
on-resize on-resize
(fn [current-position _initial-position event] (fn [current-position _initial-position event]
(when (dom/left-mouse? event) (when (dom/left-mouse? event)
(dom/stop-propagation 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 on-rotate
(fn [event] (fn [event]
@ -340,18 +358,29 @@
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/start-rotate [shape]))))] (st/emit! (dw/start-rotate [shape]))))]
[:& controls {:shape shape' [:& controls-handlers
:zoom zoom {:shape shape
:color color :zoom zoom
:on-rotate on-rotate :color color
:on-resize on-resize :disable-handlers disable-handlers
:disable-handlers disable-handlers :on-rotate on-rotate
:on-move-selected on-move-selected :on-resize on-resize}]))
:on-context-menu on-context-menu}]))
(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]} {::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) (let [num (count shapes)
{:keys [type] :as shape} (first shapes) {:keys [type] :as shape} (first shapes)
@ -363,28 +392,64 @@
nil nil
(> num 1) (> num 1)
[:& multiple-selection-handlers {:shapes shapes [:& multiple-selection
:selected selected {:shapes shapes
:zoom zoom :zoom zoom
:color color :color color
:disable-handlers disable-handlers :disable-handlers disable-handlers
:on-move-selected on-move-selected :on-move-selected on-move-selected
:on-context-menu on-context-menu}] :on-context-menu on-context-menu}]
(and (= type :text) (and (= type :text) (= edition (:id shape)))
(= edition (:id shape))) [:& text-edition-selection
[:& text-edition-selection-handlers {:shape shape {:shape shape
:zoom zoom :zoom zoom
:color color}] :color color}]
(= edition (:id shape)) (= edition (:id shape))
[:& path-editor {:zoom zoom nil
:shape shape}]
:else :else
[:& single-selection-handlers {:shape shape [:& single-selection
:zoom zoom {:shape shape
:color color :zoom zoom
:disable-handlers disable-handlers :color color
:on-move-selected on-move-selected :disable-handlers disable-handlers
:on-context-menu on-context-menu}]))) :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}])))