From 4f16ea2d2d6c6db4e008e9bf22352eb72c3e0342 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 9 Oct 2024 17:18:08 +0200 Subject: [PATCH 1/5] :bug: Fix problem with stroke and filter ordering in frames --- CHANGES.md | 1 + frontend/src/app/main/ui/shapes/frame.cljs | 44 ++++++++++++------- frontend/src/app/main/ui/shapes/shape.cljs | 21 ++++----- .../app/main/ui/workspace/shapes/frame.cljs | 5 +-- 4 files changed, 43 insertions(+), 28 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index c97a3ff68..cbc50808c 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -30,6 +30,7 @@ - Fix problem with go back button on error page [Taiga #8887](https://tree.taiga.io/project/penpot/issue/8887) - Fix problem with shadows in text for Safari [Taiga #8770](https://tree.taiga.io/project/penpot/issue/8770) - Fix a regression with feedback form subject and content limits [Taiga #8908](https://tree.taiga.io/project/penpot/issue/8908) +- Fix problem with stroke and filter ordering in frames [Github #5058](https://github.com/penpot/penpot/issues/5058) ## 2.2.1 diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 291c27130..05191e8f5 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/frontend/src/app/main/ui/shapes/frame.cljs @@ -15,6 +15,7 @@ [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.custom-stroke :refer [shape-fills shape-strokes]] + [app.main.ui.shapes.filters :as filters] [app.util.debug :as dbg] [app.util.object :as obj] [rumext.v2 :as mf])) @@ -65,6 +66,11 @@ render-id (mf/use-ctx muc/render-id) + filter-id-blur (dm/fmt "filter-blur-%" render-id) + filter-id-shadows (dm/fmt "filter-shadow-%" render-id) + filter-str-blur (filters/filter-str filter-id-blur shape) + filter-str-shadows (filters/filter-str filter-id-shadows shape) + x (dm/get-prop shape :x) y (dm/get-prop shape :y) w (dm/get-prop shape :width) @@ -86,29 +92,37 @@ :className "frame-background"}))) path? (some? (.-d props))] - [:* - [:g {:clip-path (when-not ^boolean show-content? - (frame-clip-url shape render-id)) - ;; A frame sets back normal fill behavior (default - ;; transparent). It may have been changed to default black - ;; if a shape coming from an imported SVG file is - ;; rendered. See main.ui.shapes.attrs/add-style-attrs. - :fill "none" - :opacity opacity} + ;; We need to separate blur from shadows because the blur is applied to the strokes + ;; while the shadows have to be placed *under* the stroke (for example, the inner shadows) + ;; and the shadows needs to be applied only to the content (without the stroke) + [:g {:filter filter-str-blur} + [:defs + [:& filters/filters {:shape (dissoc shape :blur) :filter-id filter-id-shadows}] + [:& filters/filters {:shape (assoc shape :shadow []) :filter-id filter-id-blur}]] - [:& shape-fills {:shape shape} - (if ^boolean path? - [:> :path props] - [:> :rect props])] + ;; This need to be separated in two layers so the clip doesn't affect the shadow filters + ;; otherwise the shadow will be clipped and not visible + [:g {:filter filter-str-shadows} + [:g {:clip-path (when-not ^boolean show-content? (frame-clip-url shape render-id)) + ;; A frame sets back normal fill behavior (default + ;; transparent). It may have been changed to default black + ;; if a shape coming from an imported SVG file is + ;; rendered. See main.ui.shapes.attrs/add-style-attrs. + :fill "none" + :opacity opacity} - children] + [:& shape-fills {:shape shape} + (if ^boolean path? + [:> :path props] + [:> :rect props])] + + children]] [:& shape-strokes {:shape shape} (if ^boolean path? [:> :path props] [:> :rect props])]])) - (mf/defc frame-thumbnail-image {::mf/wrap-props false} [props] diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index bfb37d711..ba69c5753 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/frontend/src/app/main/ui/shapes/shape.cljs @@ -56,7 +56,6 @@ (let [shape (unchecked-get props "shape") children (unchecked-get props "children") pointer-events (unchecked-get props "pointer-events") - disable-shadows? (unchecked-get props "disable-shadows?") shape-id (dm/get-prop shape :id) preview-blend-mode-ref @@ -67,7 +66,6 @@ type (dm/get-prop shape :type) render-id (h/use-render-id) - filter-id (dm/str "filter-" render-id) styles (-> (obj/create) (obj/set! "pointerEvents" pointer-events) (cond-> (not (cfh/frame-shape? shape)) @@ -82,18 +80,16 @@ shape-without-blur (dissoc shape :blur) shape-without-shadows (assoc shape :shadow []) + filter-id (dm/str "filter-" render-id) filter-str - (when (and (or (cfh/group-shape? shape) - (cfh/frame-shape? shape) - (cfh/svg-raw-shape? shape)) - (not disable-shadows?)) + (when (or (cfh/group-shape? shape) + (cfh/svg-raw-shape? shape)) (filters/filter-str filter-id shape)) wrapper-props (-> (obj/clone props) (obj/unset! "shape") (obj/unset! "children") - (obj/unset! "disable-shadows?") (obj/set! "ref" ref) (obj/set! "id" (dm/fmt "shape-%" shape-id)) (obj/set! "style" styles)) @@ -130,9 +126,14 @@ [:defs [:& defs/svg-defs {:shape shape :render-id render-id}] - [:& filters/filters {:shape shape :filter-id filter-id}] - [:& filters/filters {:shape shape-without-blur :filter-id (dm/fmt "filter-shadow-%" render-id)}] - [:& filters/filters {:shape shape-without-shadows :filter-id (dm/fmt "filter-blur-%" render-id)}] + + ;; The filters for frames should be setup inside the container. + (when-not (cfh/frame-shape? shape) + [:* + [:& filters/filters {:shape shape :filter-id filter-id}] + [:& filters/filters {:shape shape-without-blur :filter-id (dm/fmt "filter-shadow-%" render-id)}] + [:& filters/filters {:shape shape-without-shadows :filter-id (dm/fmt "filter-blur-%" render-id)}]]) + [:& frame/frame-clip-def {:shape shape :render-id render-id}] ;; Text fills need to be defined afterwards because they are specified per text-block diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index be793c755..346c5616b 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -8,7 +8,6 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.files.helpers :as cfh] [app.common.geom.shapes.bounds :as gsb] [app.common.math :as mth] [app.common.thumbnails :as thc] @@ -45,7 +44,7 @@ (refs/children-objects shape-id)) childs (mf/deref childs-ref)] - [:& shape-container {:shape shape :ref ref :disable-shadows? (cfh/is-direct-child-of-root? shape)} + [:& shape-container {:shape shape :ref ref} [:& frame-shape {:shape shape :childs childs}] (when *assert* [:& wsd/shape-debug {:shape shape}])])))) @@ -187,7 +186,7 @@ (fdm/use-dynamic-modifiers objects (mf/ref-val content-ref) modifiers) - [:& shape-container {:shape shape :disable-shadows? thumbnail?} + [:& shape-container {:shape shape} [:g.frame-container {:id (dm/str "frame-container-" frame-id) :key "frame-container" From 302672f5b0c9198209c77a521ba765e40487b167 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 9 Oct 2024 17:30:22 +0200 Subject: [PATCH 2/5] :bug: Fix problem with hover layers when hidden/blocked --- CHANGES.md | 1 + frontend/src/app/main/ui/workspace/sidebar/layer_item.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index cbc50808c..7585439d6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -31,6 +31,7 @@ - Fix problem with shadows in text for Safari [Taiga #8770](https://tree.taiga.io/project/penpot/issue/8770) - Fix a regression with feedback form subject and content limits [Taiga #8908](https://tree.taiga.io/project/penpot/issue/8908) - Fix problem with stroke and filter ordering in frames [Github #5058](https://github.com/penpot/penpot/issues/5058) +- Fix problem with hover layers when hidden/blocked [Github #5074](https://github.com/penpot/penpot/issues/5074) ## 2.2.1 diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 124ee6f48..b5a212c4f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -230,6 +230,10 @@ } } + .layer-row:hover .element-actions.selected & { + opacity: $op-10; + } + .layer-row.highlight &, .layer-row:hover & { display: flex; From ecc93d9246f8d6fa5e2c5deb106b2a7c17cf70dc Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 10 Oct 2024 10:29:19 +0200 Subject: [PATCH 3/5] :bug: Fix problem with precision on boolean calculation --- CHANGES.md | 1 + common/src/app/common/geom/shapes/path.cljc | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7585439d6..ee9234f58 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -32,6 +32,7 @@ - Fix a regression with feedback form subject and content limits [Taiga #8908](https://tree.taiga.io/project/penpot/issue/8908) - Fix problem with stroke and filter ordering in frames [Github #5058](https://github.com/penpot/penpot/issues/5058) - Fix problem with hover layers when hidden/blocked [Github #5074](https://github.com/penpot/penpot/issues/5074) +- Fix problem with precision on boolean calculation [Taig #8482](https://tree.taiga.io/project/penpot/issue/8482) ## 2.2.1 diff --git a/common/src/app/common/geom/shapes/path.cljc b/common/src/app/common/geom/shapes/path.cljc index aaaf9dc3e..c9863d9f3 100644 --- a/common/src/app/common/geom/shapes/path.cljc +++ b/common/src/app/common/geom/shapes/path.cljc @@ -852,8 +852,10 @@ (defn ray-overlaps? [ray-point {selrect :selrect}] - (and (>= (:y ray-point) (:y1 selrect)) - (<= (:y ray-point) (:y2 selrect)))) + (and (or (> (:y ray-point) (:y1 selrect)) + (mth/almost-zero? (- (:y ray-point) (:y1 selrect)))) + (or (< (:y ray-point) (:y2 selrect)) + (mth/almost-zero? (- (:y ray-point) (:y2 selrect)))))) (defn content->geom-data [content] From fbb3271c81102810a03f5b0d5426fdade4f3dd81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eero=20Pitk=C3=A4nen?= Date: Thu, 10 Oct 2024 10:09:53 +0300 Subject: [PATCH 4/5] :bug: Fix dragging path points by returning closest point instead of only the distance --- frontend/src/app/main/data/workspace/path/edition.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/data/workspace/path/edition.cljs b/frontend/src/app/main/data/workspace/path/edition.cljs index a91532b0a..36af8c593 100644 --- a/frontend/src/app/main/data/workspace/path/edition.cljs +++ b/frontend/src/app/main/data/workspace/path/edition.cljs @@ -160,7 +160,7 @@ selected-points (dm/get-in state [:workspace-local :edit-path id :selected-points] #{}) - start-position (apply min #(gpt/distance start-position %) selected-points) + start-position (apply min-key #(gpt/distance start-position %) selected-points) content (st/get-path state :content) points (upg/content->points content)] From a3a5fe056d6dd026eebf5c55ab5458f50543b16b Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 10 Oct 2024 11:18:31 +0200 Subject: [PATCH 5/5] :books: Update changelog --- CHANGES.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index ee9234f58..bf855fb2e 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -13,6 +13,7 @@ ### :heart: Community contributions (Thank you!) - All our plugins beta testers :heart:. +- Fix problem when translating multiple path points by @eeropic [#4459](https://github.com/penpot/penpot/issues/4459) ### :sparkles: New features @@ -32,7 +33,8 @@ - Fix a regression with feedback form subject and content limits [Taiga #8908](https://tree.taiga.io/project/penpot/issue/8908) - Fix problem with stroke and filter ordering in frames [Github #5058](https://github.com/penpot/penpot/issues/5058) - Fix problem with hover layers when hidden/blocked [Github #5074](https://github.com/penpot/penpot/issues/5074) -- Fix problem with precision on boolean calculation [Taig #8482](https://tree.taiga.io/project/penpot/issue/8482) +- Fix problem with precision on boolean calculation [Taiga #8482](https://tree.taiga.io/project/penpot/issue/8482) +- Fix problem when translating multiple path points [Github #4459](https://github.com/penpot/penpot/issues/4459) ## 2.2.1 @@ -178,7 +180,7 @@ time being. ### :boom: Breaking changes & Deprecations -### :heart: Community contributions (Thank you!) +### :heart: Communityq contributions (Thank you!) ### :sparkles: New features