Merge pull request #4324 from penpot/alotor-bugfix-34

Bugfixes

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

@@ -546,7 +546,10 @@
                            :layout-padding-type
                            :layout-gap
                            :layout-item-margin
-                           :layout-item-margin-type]})
+                           :layout-item-margin-type
+                           :layout-grid-cells
+                           :layout-grid-columns
+                           :layout-grid-rows]})
                  ;; We've applied the text-modifier so we can dissoc the temporary data
                  (fn [state]
                    (update state :workspace-text-modifier #(apply dissoc % ids)))

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

@@ -209,7 +209,8 @@
 
         props         #js {:id (dm/str "stroke-color-gradient-" render-id "-" index)
                            :gradient gradient
-                           :shape shape}
+                           :shape shape
+                           :force-transform (cfh/path-shape? shape)}
         stroke-image  (:stroke-image stroke)
         uri           (when stroke-image (cf/resolve-file-media stroke-image))
 
@@ -248,7 +249,8 @@
                   :width (/ w (dm/get-prop selrect :width))
                   :height (/ h (dm/get-prop selrect :height))
                   :viewBox "0 0 1 1"
-                  :preserveAspectRatio "xMidYMid slice"}
+                  :preserveAspectRatio "xMidYMid slice"
+                  :patternTransform (when (cfh/path-shape? shape) (gsh/transform-str shape))}
         [:> :image image-props]])
 
      (cond

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

@@ -30,9 +30,9 @@
 
 (mf/defc linear-gradient
   {::mf/wrap-props false}
-  [{:keys [id gradient shape]}]
+  [{:keys [id gradient shape force-transform]}]
   (let [transform (mf/with-memo [shape]
-                    (when (cfh/frame-shape? shape)
+                    (when force-transform
                       (gsh/transform-matrix shape nil (gpt/point 0.5 0.5))))
 
         metadata? (mf/use-ctx ed/include-metadata-ctx)

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

@@ -121,7 +121,10 @@
        [:& filters/filters        {:shape shape :filter-id filter-id}]
        [:& filters/filters        {:shape shape-without-blur :filter-id (dm/fmt "filter-shadow-%" render-id)}]
        [:& filters/filters        {:shape shape-without-shadows :filter-id (dm/fmt "filter-blur-%" render-id)}]
-       [:& fills/fills            {:shape shape :render-id render-id}]
+       [:& frame/frame-clip-def   {:shape shape :render-id render-id}]
-       [:& frame/frame-clip-def   {:shape shape :render-id render-id}]]
+
+       ;; Text fills need to be defined afterwards because they are specified per text-block
+       (when-not (cfh/text-shape? shape)
+         [:& fills/fills            {:shape shape :render-id render-id}])]
 
       children]]))

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

@@ -37,6 +37,7 @@
                                    (= "userSpaceOnUse" (get attrs :gradientUnits "objectBoundingBox")))
 
           transform-pattern?  (and (= :pattern tag)
+                                   (= "userSpaceOnUse" (get attrs :patternContentUnits "userSpaceOnUse"))
                                    (= "userSpaceOnUse" (get attrs :patternUnits "userSpaceOnUse")))
 
           transform-clippath? (and (= :clipPath tag)

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

@@ -21,10 +21,9 @@
         shape  (obj/get props "shape")
         code?  (obj/get props "code?")
         text   (:text node)
-        style  (when-not code?
+        style  (if (= text "")
-                 (if (= text "")
+                 (sts/generate-text-styles shape parent)
-                   (sts/generate-text-styles shape parent)
+                 (sts/generate-text-styles shape node))
-                   (sts/generate-text-styles shape node)))
         class  (when code? (:$id node))]
     [:span.text-node {:style style :class class}
      (if (= text "") "\u00A0" text)]))
@@ -36,7 +35,7 @@
         children (obj/get props "children")
         shape    (obj/get props "shape")
         code?    (obj/get props "code?")
-        style    (when-not code? (sts/generate-root-styles shape node))
+        style    (sts/generate-root-styles shape node code?)
         class  (when code? (:$id node))]
     [:div.root.rich-text
      {:style style

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

@@ -17,16 +17,18 @@
    [cuerdas.core :as str]))
 
 (defn generate-root-styles
-  [{:keys [width height]} node]
+  ([props node]
-  (let [valign (:vertical-align node "top")
+   (generate-root-styles props node false))
-        base   #js {:height (fmt/format-pixels height)
+  ([{:keys [width height]} node code?]
-                    :width  (fmt/format-pixels width)
+   (let [valign (:vertical-align node "top")
-                    :display "flex"
+         base   #js {:height (when-not code? (fmt/format-pixels height))
-                    :whiteSpace "break-spaces"}]
+                     :width  (when-not code? (fmt/format-pixels width))
-    (cond-> base
+                     :display "flex"
-      (= valign "top")     (obj/set! "alignItems" "flex-start")
+                     :whiteSpace "break-spaces"}]
-      (= valign "center")  (obj/set! "alignItems" "center")
+     (cond-> base
-      (= valign "bottom")  (obj/set! "alignItems" "flex-end"))))
+       (= valign "top")     (obj/set! "alignItems" "flex-start")
+       (= valign "center")  (obj/set! "alignItems" "center")
+       (= valign "bottom")  (obj/set! "alignItems" "flex-end")))))
 
 (defn generate-paragraph-set-styles
   [{:keys [grow-type] :as shape}]

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

@@ -13,6 +13,7 @@
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-custom-strokes]]
+   [app.main.ui.shapes.fills :as fills]
    [app.main.ui.shapes.gradients :as grad]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
@@ -103,5 +104,9 @@
               render-id (dm/str render-id "-" index)]
 
           [:& (mf/provider muc/render-id) {:key index :value render-id}
+           ;; Text fills definition. Need to be defined per-text block
+           [:defs
+            [:& fills/fills          {:shape shape :render-id render-id}]]
+
            [:& shape-custom-strokes {:shape shape :position index :render-id render-id}
             [:> :text props (:text data)]]]))]]))

frontend/src/app/util/code_gen/style_css.cljs

@@ -207,7 +207,7 @@ body {
   (let [properties
         (case (:type node)
           (:root "root")
-          (sts/generate-root-styles shape node)
+          (sts/generate-root-styles shape node true)
 
           (:paragraph-set "paragraph-set")
           (sts/generate-paragraph-set-styles shape)