From 3dffb9c8a04b63c1cc50af0c46e0e663468509bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Fri, 20 Aug 2021 15:48:10 +0200
Subject: [PATCH] :sparkles: Enable line caps in component sync and svg upload

---
 common/src/app/common/pages/common.cljc        |  2 ++
 .../app/main/data/workspace/svg_upload.cljs    | 18 +++++++++++++++---
 frontend/src/app/main/ui/shapes/attrs.cljs     |  6 +++---
 .../sidebar/options/menus/stroke.cljs          |  3 ++-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc
index 8a99ac3f3..d97c9f05c 100644
--- a/common/src/app/common/pages/common.cljc
+++ b/common/src/app/common/pages/common.cljc
@@ -37,6 +37,8 @@
    :stroke-style          :stroke-group
    :stroke-width          :stroke-group
    :stroke-alignment      :stroke-group
+   :stroke-cap-start      :stroke-group
+   :stroke-cap-end        :stroke-group
    :rx                    :radius-group
    :ry                    :radius-group
    :r1                    :radius-group
diff --git a/frontend/src/app/main/data/workspace/svg_upload.cljs b/frontend/src/app/main/data/workspace/svg_upload.cljs
index 2bcd77ec2..3193b549d 100644
--- a/frontend/src/app/main/data/workspace/svg_upload.cljs
+++ b/frontend/src/app/main/data/workspace/svg_upload.cljs
@@ -95,7 +95,11 @@
                                  (d/parse-double))))))
 
 (defn setup-stroke [shape]
-  (let [shape
+  (let [stroke-linecap (-> (or (get-in shape [:svg-attrs :stroke-linecap])
+                               (get-in shape [:svg-attrs :style :stroke-linecap]))
+                           ((d/nilf str/trim))
+                           ((d/nilf keyword)))
+        shape
         (cond-> shape
           (uc/color? (get-in shape [:svg-attrs :stroke]))
           (-> (update :svg-attrs dissoc :stroke)
@@ -113,8 +117,16 @@
           (get-in shape [:svg-attrs :style :stroke-width])
           (-> (update-in [:svg-attrs :style] dissoc :stroke-width)
               (assoc :stroke-width (-> (get-in shape [:svg-attrs :style :stroke-width])
-                                       (d/parse-double)))))]
-    (if (d/any-key? shape :stroke-color :stroke-opacity :stroke-width)
+                                       (d/parse-double))))
+
+          (and stroke-linecap (= (:type shape) :path))
+          (-> (update-in [:svg-attrs :style] dissoc :stroke-linecap)
+              (cond->
+                (#{:round :square} stroke-linecap)
+                (assoc :stroke-cap-start stroke-linecap
+                       :stroke-cap-end   stroke-linecap))))]
+
+    (if (d/any-key? shape :stroke-color :stroke-opacity :stroke-width :stroke-cap-start :stroke-cap-end)
       (merge {:stroke-style :svg} shape)
       shape)))
 
diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs
index 85ac6e16e..f347e9bb6 100644
--- a/frontend/src/app/main/ui/shapes/attrs.cljs
+++ b/frontend/src/app/main/ui/shapes/attrs.cljs
@@ -125,20 +125,20 @@
               ;; for inner or outer strokes.
               (and (spec/stroke-caps-line (:stroke-cap-start shape))
                    (= (:stroke-cap-start shape) (:stroke-cap-end shape))
-                   (= (:stroke-alignment shape) :center))
+                   (not (#{:inner :outer} (:stroke-alignment shape))))
               (assoc :strokeLinecap (:stroke-cap-start shape))
 
               ;; For other cap types we use markers.
               (and (or (spec/stroke-caps-marker (:stroke-cap-start shape))
                        (and (spec/stroke-caps-line (:stroke-cap-start shape))
                             (not= (:stroke-cap-start shape) (:stroke-cap-end shape))))
-                   (= (:stroke-alignment shape) :center))
+                   (not (#{:inner :outer} (:stroke-alignment shape))))
               (assoc :markerStart (str "url(#marker-" render-id "-" (name (:stroke-cap-start shape))))
 
               (and (or (spec/stroke-caps-marker (:stroke-cap-end shape))
                        (and (spec/stroke-caps-line (:stroke-cap-end shape))
                             (not= (:stroke-cap-start shape) (:stroke-cap-end shape))))
-                   (= (:stroke-alignment shape) :center))
+                   (not (#{:inner :outer} (:stroke-alignment shape))))
               (assoc :markerEnd (str "url(#marker-" render-id "-" (name (:stroke-cap-end shape)))))]
 
         (obj/merge! attrs (clj->js stroke-attrs)))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
index 543d55f52..a5698e4c0 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@@ -74,7 +74,8 @@
                 (tr "workspace.options.stroke"))
 
         show-options (not= (:stroke-style values :none) :none)
-        show-caps    (and show-caps (= (:stroke-alignment values) :center))
+        show-caps    (and show-caps
+                          (not (#{:inner :outer} (:stroke-alignment values))))
 
         start-caps-state (mf/use-state {:open? false
                                         :top 0