From 5cb3aa5dbc26d673f28b4ce5def887473881bb97 Mon Sep 17 00:00:00 2001
From: Pablo Alba <pablo.alba@kaleidos.net>
Date: Wed, 28 Dec 2022 08:33:38 +0100
Subject: [PATCH] :bug: Fix show outline with rounded corners on rects

---
 CHANGES.md                                    |  2 ++
 frontend/src/app/main/ui/shapes/attrs.cljs    | 32 ++++++++++---------
 .../main/ui/workspace/viewport/outline.cljs   | 14 ++++++--
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index ea72f8fe78..4b7f3dec4a 100644
--- a/CHANGES.md
+++ b/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
 
diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs
index 334f56025a..7047cb793e 100644
--- a/frontend/src/app/main/ui/shapes/attrs.cljs
+++ b/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]
diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs
index 3cba35078e..674e40bc08 100644
--- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs
+++ b/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))]))