🐛 Fix show outline with rounded corners on rects

CHANGES.md

@@ -24,6 +24,8 @@
 - 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 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
 

frontend/src/app/main/ui/shapes/attrs.cljs

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

frontend/src/app/main/ui/workspace/viewport/outline.cljs

@@ -10,6 +10,7 @@
    [app.common.exceptions :as ex]
    [app.common.geom.shapes :as gsh]
    [app.main.ui.hooks :as hooks]
+   [app.main.ui.shapes.attrs :as attrs]
    [app.util.object :as obj]
    [app.util.path.format :as upf]
    [clojure.set :as set]
@@ -34,12 +35,16 @@
             (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)
                        :circle "ellipse"
                        :path "path"
-                       "rect")
+                       (if path? "path" "rect"))
 
         common {:fill "none"
                 :stroke color
@@ -61,7 +66,10 @@
                 {:x (:x selrect)
                  :y (:y 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))]))