Merge pull request #4095 from penpot/alotor-bufixes-14

Bug fixing

common/src/app/common/geom/shapes/bounds.cljc

@@ -111,6 +111,7 @@
 
          shadow-width
          (->> (:shadow shape)
+              (remove :hidden)
               (map #(case (:style % :drop-shadow)
                       :drop-shadow (+ (mth/abs (:offset-x %)) (* (:spread %) 2) (* (:blur %) 2) 10)
                       0))
@@ -118,6 +119,7 @@
 
          shadow-height
          (->> (:shadow shape)
+              (remove :hidden)
               (map #(case (:style % :drop-shadow)
                       :drop-shadow (+ (mth/abs (:offset-y %)) (* (:spread %) 2) (* (:blur %) 2) 10)
                       0))

common/src/app/common/geom/shapes/transforms.cljc

@@ -140,6 +140,28 @@
 
        (gmt/translate (gpt/negate shape-center)))))
 
+(defn inverse-transform-matrix
+  ([shape]
+   (inverse-transform-matrix shape nil))
+
+  ([shape params]
+   (inverse-transform-matrix shape params (or (gco/shape->center shape) (gpt/point 0 0))))
+
+  ([{:keys [flip-x flip-y transform-inverse] :as shape} {:keys [no-flip]} shape-center]
+   (-> (gmt/matrix)
+       (gmt/translate shape-center)
+
+       (cond-> (and flip-x no-flip)
+         (gmt/scale (gpt/point -1 1)))
+
+       (cond-> (and flip-y no-flip)
+         (gmt/scale (gpt/point 1 -1)))
+
+       (cond-> (some? transform-inverse)
+         (gmt/multiply transform-inverse))
+
+       (gmt/translate (gpt/negate shape-center)))))
+
 (defn transform-str
   ([shape]
    (transform-str shape nil))
@@ -152,21 +174,6 @@
      (dm/str (transform-matrix shape params))
      "")))
 
-;; FIXME: performance
-(defn inverse-transform-matrix
-  ([shape]
-   (let [shape-center (or (gco/shape->center shape)
-                          (gpt/point 0 0))]
-     (inverse-transform-matrix shape shape-center)))
-  ([{:keys [flip-x flip-y] :as shape} center]
-   (-> (gmt/matrix)
-       (gmt/translate center)
-       (cond->
-        flip-x (gmt/scale (gpt/point -1 1))
-        flip-y (gmt/scale (gpt/point 1 -1)))
-       (gmt/multiply (:transform-inverse shape (gmt/matrix)))
-       (gmt/translate (gpt/negate center)))))
-
 ;; FIXME: move to geom rect?
 (defn transform-rect
   "Transform a rectangles and changes its attributes"

common/src/app/common/geom/snap.cljc

@@ -15,15 +15,16 @@
 
 (defn rect->snap-points
   [rect]
-  (let [x (dm/get-prop rect :x)
+  (when (some? rect)
-        y (dm/get-prop rect :y)
+    (let [x (dm/get-prop rect :x)
-        w (dm/get-prop rect :width)
+          y (dm/get-prop rect :y)
-        h (dm/get-prop rect :height)]
+          w (dm/get-prop rect :width)
-    #{(gpt/point x y)
+          h (dm/get-prop rect :height)]
-      (gpt/point (+ x w) y)
+      #{(gpt/point x y)
-      (gpt/point (+ x w) (+ y h))
+        (gpt/point (+ x w) y)
-      (gpt/point x (+ y h))
+        (gpt/point (+ x w) (+ y h))
-      (grc/rect->center rect)}))
+        (gpt/point x (+ y h))
+        (grc/rect->center rect)})))
 
 (defn- frame->snap-points
   [frame]

common/src/app/common/text.cljc

@@ -53,6 +53,9 @@
 (def text-transform-attrs
   [:text-transform])
 
+(def text-fills
+  [:fills])
+
 (def shape-attrs
   [:grow-type])
 
@@ -70,7 +73,8 @@
    text-font-attrs
    text-spacing-attrs
    text-decoration-attrs
-   text-transform-attrs))
+   text-transform-attrs
+   text-fills))
 
 (def text-all-attrs (d/concat-set shape-attrs root-attrs paragraph-attrs text-node-attrs))
 
@@ -240,6 +244,21 @@
              (run! #(.appendCodePoint sb (int %)) (subvec cpoints start end))
              (.toString sb))))
 
+(defn- fix-gradients
+  "Conversion from draft doesn't convert correctly the fills gradient types. This
+  function change the type from string to keyword of the gradient type"
+  [data]
+  (letfn [(fix-type [type]
+            (cond-> type
+              (string? type) keyword))
+
+          (update-fill [fill]
+            (d/update-in-when fill [:fill-color-gradient :type] fix-type))
+
+          (update-all-fills [fills]
+            (mapv update-fill fills))]
+    (d/update-when data :fills update-all-fills)))
+
 (defn convert-from-draft
   [content]
   (letfn [(extract-text [cpoints part]
@@ -247,7 +266,9 @@
                   end   (inc (first (last part)))
                   text  (code-points->text cpoints start end)
                   attrs (second (first part))]
-              (assoc attrs :text text)))
+              (-> attrs
+                  (fix-gradients)
+                  (assoc :text text))))
 
           (split-texts [text styles]
             (let [cpoints  (text->code-points text)
@@ -264,7 +285,8 @@
             (let [key    (get block :key)
                   text   (get block :text)
                   styles (get block :inlineStyleRanges)
-                  data   (get block :data)]
+                  data   (->> (get block :data)
+                              fix-gradients)]
               (-> data
                   (assoc :key key)
                   (assoc :type "paragraph")

frontend/src/app/main/data/exports.cljs

@@ -10,6 +10,7 @@
    [app.main.data.modal :as modal]
    [app.main.data.workspace.persistence :as dwp]
    [app.main.data.workspace.state-helpers :as wsh]
+   [app.main.refs :as refs]
    [app.main.repo :as rp]
    [app.main.store :as st]
    [app.util.dom :as dom]
@@ -166,6 +167,13 @@
                         :wait true}]
         (rx/concat
          (rx/of ::dwp/force-persist)
+
+         ;; Wait the persist to be succesfull
+         (->> (rx/from-atom refs/persistence-state {:emit-current-value? true})
+              (rx/filter #(or (nil? %) (= :saved %)))
+              (rx/first)
+              (rx/timeout 400 (rx/empty)))
+
          (->> (rp/cmd! :export params)
               (rx/mapcat (fn [{:keys [id filename]}]
                            (->> (rp/cmd! :export {:cmd :get-resource :blob? true :id id})

frontend/src/app/main/data/workspace/notifications.cljs

@@ -83,6 +83,7 @@
                              ;; position changes.
                              (->> stream
                                   (rx/filter mse/pointer-event?)
+                                  (rx/filter #(= :viewport (mse/get-pointer-source %)))
                                   (rx/pipe (rxs/throttle 100))
                                   (rx/map #(handle-pointer-send file-id (:pt %)))))
 

frontend/src/app/main/refs.cljs

@@ -591,3 +591,6 @@
 
 (def updating-library
   (l/derived :updating-library st/state))
+
+(def persistence-state
+  (l/derived (comp :status :workspace-persistence) st/state))

frontend/src/app/main/ui/components/copy_button.scss

@@ -57,6 +57,7 @@
   width: 100%;
   height: fit-content;
   text-align: left;
+  border: 1px solid transparent;
   .icon-btn {
     position: absolute;
     display: flex;

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

@@ -8,7 +8,10 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.files.helpers :as cfh]
+   [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.text :as gst]
    [app.config :as cf]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.gradients :as grad]
@@ -28,7 +31,12 @@
         fills      (get shape :fills [])
 
         selrect    (dm/get-prop shape :selrect)
+
+        bounds     (when (cfh/text-shape? shape)
+                     (gst/shape->rect shape))
+
         metadata   (get shape :metadata)
+
         x          (dm/get-prop selrect :x)
         y          (dm/get-prop selrect :y)
         width      (dm/get-prop selrect :width)
@@ -62,32 +70,50 @@
                       (obj/set! pat-props "patternTransform" transform)
                       pat-props)]
 
-    (for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
+    (for [[obj-index obj] (d/enumerate (or (:position-data shape) [shape]))]
-      [:* {:key (dm/str shape-index)}
+      [:* {:key (dm/str obj-index)}
-       (for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))]
+       (for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))]
          (when (some? (:fill-color-gradient value))
            (let [gradient  (:fill-color-gradient value)
+
+                 from-p (-> (gpt/point (+ x (* width (:start-x gradient)))
+                                       (+ y (* height (:start-y gradient)))))
+                 to-p   (-> (gpt/point (+ x (* width (:end-x gradient)))
+                                       (+ y (* height (:end-y gradient)))))
+
+                 gradient
+                 (cond-> gradient
+                   (some? bounds)
+                   (assoc
+                    :start-x (/ (- (:x from-p) (:x bounds)) (:width bounds))
+                    :start-y (/ (- (:y from-p) (:y bounds)) (:height bounds))
+                    :end-x   (/ (- (:x to-p) (:x bounds)) (:width bounds))
+                    :end-y   (/ (- (:y to-p) (:y bounds)) (:height bounds))))
+
                  props #js {:id (dm/str "fill-color-gradient-" render-id "-" fill-index)
                             :key (dm/str fill-index)
                             :gradient gradient
-                            :shape shape}]
+                            :shape obj}]
-             (case (:type gradient)
+             (case (d/name (:type gradient))
-               :linear [:> grad/linear-gradient props]
+               "linear" [:> grad/linear-gradient props]
-               :radial [:> grad/radial-gradient props]))))
+               "radial" [:> grad/radial-gradient props]))))
 
 
-       (let [fill-id (dm/str "fill-" shape-index "-" render-id)]
+       (let [fill-id (dm/str "fill-" obj-index "-" render-id)]
          [:> :pattern (-> (obj/clone pat-props)
                           (obj/set! "id" fill-id)
-                          (cond-> has-image?
+                          (cond-> (and has-image? (nil? bounds))
                             (-> (obj/set! "width" (* width no-repeat-padding))
-                                (obj/set! "height" (* height no-repeat-padding)))))
+                                (obj/set! "height" (* height no-repeat-padding))))
+                          (cond-> (some? bounds)
+                            (-> (obj/set! "width" (:width bounds))
+                                (obj/set! "height" (:height bounds)))))
           [:g
-           (for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))]
+           (for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))]
              (let [style (attrs/get-fill-style value fill-index render-id type)
                    props #js {:key (dm/str fill-index)
-                              :width width
+                              :width (d/nilv (:width bounds) width)
-                              :height height
+                              :height (d/nilv (:height bounds) height)
                               :style style}]
                (if (:fill-image value)
                  (let [uri (cf/resolve-file-media (:fill-image value))

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -93,7 +93,7 @@
                               :textTransform text-transform
                               :color (if (and show-text? (not gradient?)) text-color "transparent")
                               :background (when (and show-text? gradient?) text-color)
-                              :caretColor (or text-color "black")
+                              :caretColor (if (and (not gradient?) text-color) text-color "black")
                               :overflowWrap "initial"
                               :lineBreak "auto"
                               :whiteSpace "break-spaces"

frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs

@@ -79,11 +79,9 @@
             [:span {:class (stl/css-case :color-value-wrapper true
                                          :gradient-name (:gradient color))}
              (if (:gradient color)
-               [:& cbn/color-name {:color color
+               [:& cbn/color-name {:color color :size 80}]
-                                   :size 80}]
                (case format
-                 :hex [:& cbn/color-name {:color color
+                 :hex [:& cbn/color-name {:color color}]
-                                          :size 80}]
                  :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
                          [:* (str/fmt "%s, %s, %s, %s" r g b a)])
                  :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
@@ -105,8 +103,7 @@
            [:span {:class (stl/css-case :color-value-wrapper true
                                         :gradient-name (:gradient color))}
             (if (:gradient color)
-              [:& cbn/color-name {:color color
+              [:& cbn/color-name {:color color}]
-                                  :size 80}]
               (case format
                 :hex [:& cbn/color-name {:color color
                                          :size 80}]

frontend/src/app/main/ui/viewer/inspect/attributes/common.scss

@@ -58,6 +58,11 @@
   }
 }
 
+.name-opacity {
+  display: flex;
+  align-items: baseline;
+}
+
 .color-name-wrapper {
   @include titleTipography;
   @include flexColumn;
@@ -113,8 +118,11 @@
 .color-value-wrapper {
   @include inspectValue;
   text-transform: uppercase;
-  max-width: $s-124;
+  max-width: $s-80;
   padding-right: $s-8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   &.gradient-name {
     text-transform: none;
   }

frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.util.code-gen.style-css :as css]
@@ -19,9 +20,10 @@
 (mf/defc geometry-block
   [{:keys [objects shape]}]
   [:*
-   (for [property properties]
+   (for [[idx property] (d/enumerate properties)]
      (when-let [value (css/get-css-value objects shape property)]
-       [:div {:class (stl/css :geometry-row)}
+       [:div {:key (dm/str "block-" idx "-" (d/name property))
+              :class (stl/css :geometry-row)}
         [:div {:class (stl/css :global/attr-label)} (d/name property)]
         [:div {:class (stl/css :global/attr-value)}
          [:& copy-button {:data (css/get-css-property objects shape property)}

frontend/src/app/main/ui/viewer/inspect/attributes/text.scss

@@ -30,7 +30,6 @@
 }
 
 .attributes-content-row {
-  width: $s-252;
   max-width: $s-252;
   min-height: calc($s-2 + $s-32);
   border-radius: $br-8;
@@ -39,7 +38,7 @@
   .content {
     @include titleTipography;
     width: 100%;
-    padding: 0;
+    padding: $s-4 0;
     color: var(--color-foreground-secondary);
   }
 

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -11,7 +11,7 @@
 }
 .asset-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax($s-112, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr));
   grid-auto-rows: $s-112;
   max-width: 100%;
   gap: $s-4;

frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs

@@ -56,10 +56,6 @@
                         :values measure-values
                         :shape shape}]
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids [(:id shape)]
@@ -81,6 +77,10 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
      [:& fill-menu {:ids ids
                     :type type
                     :values (select-keys shape fill-attrs)}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs

@@ -58,10 +58,6 @@
                         :values measure-values
                         :shape shape}]
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids [(:id shape)]
@@ -83,6 +79,10 @@
                              :is-grid-parent? is-grid-parent?
                              :shape shape}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
      [:& fill-menu {:ids ids
                     :type type
                     :values (select-keys shape fill-attrs)}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -65,10 +65,6 @@
 
      [:& component-menu {:shapes [shape]}]
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids [(:id shape)]
@@ -91,6 +87,9 @@
          :is-layout-container? is-layout-container?
          :shape shape}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
 
      [:& fill-menu {:ids ids
                     :type type

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -72,9 +72,6 @@
      [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
      [:& component-menu {:shapes [shape]}] ;;remove this in components-v2
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids [(:id shape)]
@@ -96,6 +93,9 @@
          :is-grid-parent? is-grid-parent?
          :values layout-item-values}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
+
      (when-not (empty? fill-ids)
        [:& fill-menu {:type type :ids fill-ids :values fill-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs

@@ -58,10 +58,6 @@
                         :values measure-values
                         :shape shape}]
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids [(:id shape)]
@@ -83,6 +79,10 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
      [:& fill-menu {:ids ids
                     :type type
                     :values fill-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -364,9 +364,6 @@
      (when-not (empty? components)
        [:& component-menu {:shapes components}])
 
-     (when-not (or (empty? constraint-ids) ^boolean is-layout-child?)
-       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids layout-container-ids
@@ -383,6 +380,9 @@
          :is-grid-parent? is-grid-parent?
          :values layout-item-values}])
 
+     (when-not (or (empty? constraint-ids) ^boolean is-layout-child?)
+       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
+
      (when-not (empty? text-ids)
        [:& ot/text-menu {:type type :ids text-ids :values text-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs

@@ -57,10 +57,6 @@
                         :values measure-values
                         :shape shape}]
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids [(:id shape)]
@@ -82,6 +78,10 @@
                              :is-grid-parent? is-grid-parent?
                              :shape shape}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
      [:& fill-menu {:ids ids
                     :type type
                     :values (select-keys shape fill-attrs)}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -60,10 +60,6 @@
                         :values measure-values
                         :shape shape}]
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu {:ids ids
-                             :values constraint-values}])
-
      [:& layout-container-menu
       {:type type
        :ids ids
@@ -85,6 +81,10 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}])
+
      [:& fill-menu {:ids ids
                     :type type
                     :values fill-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs

@@ -129,10 +129,6 @@
                           :values measure-values
                           :shape shape}]
 
-       (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-         [:& constraints-menu {:ids ids
-                               :values constraint-values}])
-
        [:& layout-container-menu
         {:type type
          :ids [(:id shape)]
@@ -154,6 +150,10 @@
            :is-grid-parent? is-grid-parent?
            :shape shape}])
 
+       (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+         [:& constraints-menu {:ids ids
+                               :values constraint-values}])
+
        [:& fill-menu {:ids ids
                       :type type
                       :values fill-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs

@@ -93,11 +93,6 @@
        :values (select-keys shape measure-attrs)
        :shape shape}]
 
-     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
-       [:& constraints-menu
-        {:ids ids
-         :values (select-keys shape constraint-attrs)}])
-
      [:& layout-container-menu
       {:type type
        :ids [(:id shape)]
@@ -119,6 +114,11 @@
          :is-grid-parent? is-grid-parent?
          :shape shape}])
 
+     (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?)
+       [:& constraints-menu
+        {:ids ids
+         :values (select-keys shape constraint-attrs)}])
+
      [:& text-menu
       {:ids ids
        :type type

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

@@ -118,7 +118,7 @@
            :on-pointer-up on-pointer-up}]])
 
 (mf/defc gradient-handler-transformed
-  [{:keys [from-p to-p width-p from-color to-color zoom editing transform
+  [{:keys [from-p to-p width-p from-color to-color zoom editing
            on-change-start on-change-finish on-change-width]}]
   (let [moving-point (mf/use-var nil)
         angle (+ 90 (gpt/angle from-p to-p))
@@ -151,7 +151,7 @@
           (reset! moving-point nil))]
 
     (mf/use-effect
-     (mf/deps @moving-point from-p to-p width-p transform)
+     (mf/deps @moving-point from-p to-p width-p)
      (fn []
        (let [subs (->> st/stream
                        (rx/filter mse/pointer-event?)
@@ -159,18 +159,17 @@
                        (rx/map mse/get-pointer-position)
                        (rx/subs!
                         (fn [pt]
-                          (let [pt (gpt/transform pt transform)]
+                          (case @moving-point
-                            (case @moving-point
+                            :from-p  (when on-change-start (on-change-start pt))
-                              :from-p  (when on-change-start (on-change-start pt))
+                            :to-p    (when on-change-finish (on-change-finish pt))
-                              :to-p    (when on-change-finish (on-change-finish pt))
+                            :width-p (when on-change-width
-                              :width-p (when on-change-width
+                                       (let [width-v (gpt/unit (gpt/to-vec from-p width-p))
-                                         (let [width-v (gpt/unit (gpt/to-vec from-p width-p))
+                                             distance (gpt/point-line-distance pt from-p to-p)
-                                               distance (gpt/point-line-distance pt from-p to-p)
+                                             new-width-p (gpt/add
-                                               new-width-p (gpt/add
+                                                          from-p
-                                                            from-p
+                                                          (gpt/multiply width-v (gpt/point distance)))]
-                                                            (gpt/multiply width-v (gpt/point distance)))]
+                                         (on-change-width new-width-p)))
-                                           (on-change-width new-width-p)))
+                            nil))))]
-                              nil)))))]
          (fn [] (rx/dispose! subs)))))
     [:g.gradient-handlers
      [:defs
@@ -296,7 +295,6 @@
       :width-p (when (= :radial (:type gradient)) width-p)
       :from-color {:value start-color :opacity start-opacity}
       :to-color {:value end-color :opacity end-opacity}
-      :transform transform
       :zoom zoom
       :on-change-start on-change-start
       :on-change-finish on-change-finish