mirror of
https://github.com/penpot/penpot.git
synced 2025-05-28 06:46:10 +02:00
🐛 Fix issue with guides over shape handlers
This commit is contained in:
parent
a0c0ab1871
commit
aa6f82c31f
3 changed files with 167 additions and 86 deletions
10
CHANGES.md
10
CHANGES.md
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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?}]])]]]))
|
|
||||||
|
|
||||||
|
|
|
@ -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}])))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue