From 950367b055a9e608e96cd5056a20d73b1fdd88db Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 11 Oct 2021 08:35:01 +0200 Subject: [PATCH] :bug: Fix path stroke is not working properly with high thickness --- CHANGES.md | 1 + frontend/src/app/main/ui/shapes/attrs.cljs | 21 ++++++++++++--------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 63c4b1e2b7..4d18f210c6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -35,6 +35,7 @@ - Fix problem with lines and inside/outside stroke [Taiga #2146](https://tree.taiga.io/project/penpot/issue/2146) - Add stroke width in selection calculation [Taiga #2146](https://tree.taiga.io/project/penpot/issue/2146) - Fix shift+wheel to horizontal scrolling in MacOS [#1217](https://github.com/penpot/penpot/issues/1217) +- Fix path stroke is not working properly with high thickness [Taiga #2154](https://tree.taiga.io/project/penpot/issue/2154) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index 973a155a4b..e9ca5a9669 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/frontend/src/app/main/ui/shapes/attrs.cljs @@ -14,12 +14,14 @@ [rumext.alpha :as mf])) (defn- stroke-type->dasharray - [style] - (case style - :mixed "5,5,1,5" - :dotted "5,5" - :dashed "10,10" - nil)) + [width style] + (let [values (case style + :mixed [5 5 1 5] + :dotted [5 5] + :dashed [10 10] + nil)] + + (->> values (map #(+ % width)) (str/join ",")))) (defn- truncate-side [shape ra-attr rb-attr dimension-attr] @@ -102,10 +104,11 @@ (defn add-stroke [attrs shape render-id] (let [stroke-style (:stroke-style shape :none) - stroke-color-gradient-id (str "stroke-color-gradient_" render-id)] + stroke-color-gradient-id (str "stroke-color-gradient_" render-id) + stroke-width (:stroke-width shape 1)] (if (not= stroke-style :none) (let [stroke-attrs - (cond-> {:strokeWidth (:stroke-width shape 1)} + (cond-> {:strokeWidth stroke-width} (:stroke-color-gradient shape) (assoc :stroke (str/format "url(#%s)" stroke-color-gradient-id)) @@ -118,7 +121,7 @@ (assoc :strokeOpacity (:stroke-opacity shape nil)) (not= stroke-style :svg) - (assoc :strokeDasharray (stroke-type->dasharray stroke-style)) + (assoc :strokeDasharray (stroke-type->dasharray stroke-width stroke-style)) ;; For simple line caps we use svg stroke-line-cap attribute. This ;; only works if all caps are the same and we are not using the tricks