Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-14 19:19:09 -05:00
Code Issues Activity

🐛 Fix show outline with rounded corners on rects

Browse source
This commit is contained in:
Pablo Alba 2022-12-28 08:33:38 +01:00
parent c86af68349
commit 5cb3aa5dbc
3 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGES.md
View file

@ -24,6 +24,8 @@
- Fix component sync when converting to path [Taiga #3642](https://tree.taiga.io/project/penpot/issue/3642) - Fix component sync when converting to path [Taiga #3642](https://tree.taiga.io/project/penpot/issue/3642)
- Fix style for team invite in deutsch [Taiga #4614](https://tree.taiga.io/project/penpot/issue/4614) - Fix style for team invite in deutsch [Taiga #4614](https://tree.taiga.io/project/penpot/issue/4614)
- Fix problem with text edition in Safari [Taiga #4046](https://tree.taiga.io/project/penpot/issue/4046) - Fix problem with text edition in Safari [Taiga #4046](https://tree.taiga.io/project/penpot/issue/4046)
- Fix show outline with rounded corners on rects [Taiga #4053](https://tree.taiga.io/project/penpot/issue/4053)
### :arrow_up: Deps updates ### :arrow_up: Deps updates

14
frontend/src/app/main/ui/shapes/attrs.cljs
View file

@ -29,12 +29,11 @@
(->> values (map #(+ % width)) (str/join ",")))) (->> values (map #(+ % width)) (str/join ","))))
(defn extract-border-radius [{:keys [x y width height] :as shape}]
(defn add-border-radius [attrs {:keys [x y width height] :as shape}]
(case (ctsr/radius-mode shape) (case (ctsr/radius-mode shape)
:radius-1 :radius-1
(let [radius (gsh/shape-corners-1 shape)] (let [radius (gsh/shape-corners-1 shape)]
(obj/merge! attrs #js {:rx radius :ry radius})) #js {:rx radius :ry radius})
:radius-4 :radius-4
(let [[r1 r2 r3 r4] (gsh/shape-corners-4 shape) (let [[r1 r2 r3 r4] (gsh/shape-corners-4 shape)
@ -42,7 +41,7 @@
right (- height r2 r3) right (- height r2 r3)
bottom (- width r3 r4) bottom (- width r3 r4)
left (- height r4 r1)] left (- height r4 r1)]
(obj/merge! attrs #js {:d (dm/str #js {:d (dm/str
"M" (+ x r1) "," y " " "M" (+ x r1) "," y " "
"h" top " " "h" top " "
"a" r2 "," r2 " 0 0 1 " r2 "," r2 " " "a" r2 "," r2 " 0 0 1 " r2 "," r2 " "
@ -52,8 +51,11 @@
"a" r4 "," r4 " 0 0 1 " (- r4) "," (- r4) " " "a" r4 "," r4 " 0 0 1 " (- r4) "," (- r4) " "
"v" (- left) " " "v" (- left) " "
"a" r1 "," r1 " 0 0 1 " r1 "," (- r1) " " "a" r1 "," r1 " 0 0 1 " r1 "," (- r1) " "
"z")})) "z")})))
attrs))
(defn add-border-radius [attrs shape]
(obj/merge! attrs (extract-border-radius shape)))
(defn add-fill (defn add-fill
([attrs fill-data render-id type] ([attrs fill-data render-id type]

14
frontend/src/app/main/ui/workspace/viewport/outline.cljs
View file

@ -10,6 +10,7 @@
[app.common.exceptions :as ex] [app.common.exceptions :as ex]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.shapes.attrs :as attrs]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.path.format :as upf] [app.util.path.format :as upf]
[clojure.set :as set] [clojure.set :as set]
@ -34,12 +35,16 @@
(or (ex/ignoring (upf/format-path (:content shape))) (or (ex/ignoring (upf/format-path (:content shape)))
""))) "")))
{:keys [x y width height selrect]} shape {:keys [x y width height selrect rx ry]} shape
border-radius-attrs (.-d (attrs/extract-border-radius shape))
path? (some? border-radius-attrs)
outline-type (case (:type shape) outline-type (case (:type shape)
:circle "ellipse" :circle "ellipse"
:path "path" :path "path"
"rect") (if path? "path" "rect"))
common {:fill "none" common {:fill "none"
:stroke color :stroke color
@ -61,7 +66,10 @@
{:x (:x selrect) {:x (:x selrect)
:y (:y selrect) :y (:y selrect)
:width (:width selrect) :width (:width selrect)
:height (:height selrect)})] :height (:height selrect)
:rx rx
:ry ry
:d border-radius-attrs})]
[:> outline-type (map->obj (merge common props))])) [:> outline-type (map->obj (merge common props))]))