From 699ec93ca4ae5d119b27460b0254121f642585bd Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 11 Feb 2022 11:59:31 +0100
Subject: [PATCH] :sparkles: Changed radial gradients to use objectBoundingBox

---
 .../src/app/main/ui/shapes/gradients.cljs     | 53 +++++++++----------
 .../app/main/ui/workspace/colorpicker.cljs    |  5 ++
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/main/ui/shapes/gradients.cljs b/frontend/src/app/main/ui/shapes/gradients.cljs
index 6ca3abbea..bd9bca876 100644
--- a/frontend/src/app/main/ui/shapes/gradients.cljs
+++ b/frontend/src/app/main/ui/shapes/gradients.cljs
@@ -46,41 +46,40 @@
                :stop-color color
                :stop-opacity opacity}])]))
 
-
-
 (mf/defc radial-gradient [{:keys [id gradient shape]}]
-  (let [{:keys [x y width height]} (:selrect shape)
-        transform (if (= :path (:type shape))
-                    (gsh/transform-matrix shape)
-                    (gmt/matrix))
-        [x y] (if (= (:type shape) :frame) [0 0] [x y])
-        translate-vec (gpt/point (+ x (* width (:start-x gradient)))
-                                 (+ y (* height (:start-y gradient))))
+  (let [path? (= :path (:type shape))
+        shape-transform (or (when path? (:transform shape)) (gmt/matrix))
+        shape-transform-inv (or (when path? (:transform-inverse shape)) (gmt/matrix))
 
-        gradient-vec (gpt/to-vec (gpt/point (* width (:start-x gradient))
-                                            (* height (:start-y gradient)))
-                                 (gpt/point (* width (:end-x gradient))
-                                            (* height (:end-y gradient))))
+        {:keys [start-x start-y end-x end-y] gwidth :width} gradient
 
-        angle (gpt/angle gradient-vec
-                         (gpt/point 1 0))
+        gradient-vec (gpt/to-vec (gpt/point start-x start-y)
+                                 (gpt/point end-x end-y))
 
-        scale-factor-y (/ (gpt/length gradient-vec) (/ height 2))
-        scale-factor-x (* scale-factor-y (:width gradient))
+        angle (+ (gpt/angle gradient-vec) 90)
 
-        scale-vec (gpt/point (* scale-factor-y (/ height 2))
-                             (* scale-factor-x (/ width 2)))
+        bb-shape (gsh/selection-rect [shape])
 
-        transform (gmt/multiply transform
-                                (gmt/translate-matrix translate-vec)
-                                (gmt/rotate-matrix angle)
-                                (gmt/scale-matrix scale-vec))
+        ;; Paths don't have a transform in SVG because we transform the points
+        ;; we need to compensate the difference between the original rectangle
+        ;; and the transformed one. This factor is that calculation.
+        factor (if path?
+                 (/ (:height (:selrect shape)) (:height bb-shape))
+                 1.0)
 
+        transform (-> (gmt/matrix)
+                      (gmt/translate (gpt/point start-x start-y))
+                      (gmt/multiply shape-transform)
+                      (gmt/rotate angle)
+                      (gmt/scale (gpt/point gwidth factor))
+                      (gmt/multiply shape-transform-inv)
+                      (gmt/translate (gpt/negate (gpt/point start-x start-y))))
+
+        gradient-radius (gpt/length gradient-vec)
         base-props #js {:id id
-                        :cx 0
-                        :cy 0
-                        :r 1
-                        :gradientUnits "userSpaceOnUse"
+                        :cx start-x
+                        :cy start-y
+                        :r gradient-radius
                         :gradientTransform transform}
 
         include-metadata? (mf/use-ctx ed/include-metadata-ctx)
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 3f4f18a61..991e96e10 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -167,6 +167,11 @@
         (fn [color]
           (let [editing-stop (:editing-stop @state)
                 is-gradient? (some? (:gradient color))]
+
+            (if is-gradient?
+              (st/emit! (dc/start-gradient (:gradient color)))
+              (st/emit! (dc/stop-gradient)))
+
             (if (and (some? editing-stop) (not is-gradient?))
               (handle-change-color (color->components (:color color) (:opacity color)))
               (do (reset! dirty? false)