Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -12,6 +12,13 @@
 
 ### :heart: Community contributions by (Thank you!)
 
+## 1.18.1
+
+### :bug: Bugs fixed
+
+- Fix problems with imported SVG shadows [Taiga #4922](https://tree.taiga.io/project/penpot/issue/4922)
+- Fix problems with imported SVG embedded images and transforms [Taiga #4639](https://tree.taiga.io/project/penpot/issue/4639)
+
 ## 1.18.0
 
 ### :sparkles: New features

backend/src/app/http/debug.clj

@@ -17,6 +17,7 @@
    [app.rpc.commands.binfile :as binf]
    [app.rpc.commands.files-create :refer [create-file]]
    [app.rpc.commands.profile :as profile]
+   [app.storage :as-alias sto]
    [app.util.blob :as blob]
    [app.util.template :as tmpl]
    [app.util.time :as dt]

backend/src/app/loggers/mattermost.clj

@@ -19,7 +19,7 @@
    [promesa.exec :as px]
    [promesa.exec.csp :as sp]))
 
-(defonce enabled (atom false))
+(defonce enabled (atom true))
 
 (defn- send-mattermost-notification!
   [cfg {:keys [id public-uri] :as report}]

backend/src/app/main.clj

@@ -286,7 +286,8 @@
    :app.http.debug/routes
    {::db/pool         (ig/ref ::db/pool)
     ::wrk/executor    (ig/ref ::wrk/executor)
-    ::session/manager (ig/ref ::session/manager)}
+    ::session/manager (ig/ref ::session/manager)
+    ::sto/storage     (ig/ref ::sto/storage)}
 
    ::http.ws/routes
    {::db/pool         (ig/ref ::db/pool)

backend/src/app/rpc.clj

@@ -129,7 +129,7 @@
 
 (defn- wrap-metrics
   "Wrap service method with metrics measurement."
-  [{:keys [metrics ::metrics-id]} f mdata]
+  [{:keys [::mtx/metrics ::metrics-id]} f mdata]
   (let [labels (into-array String [(::sv/name mdata)])]
     (fn [cfg params]
       (let [tp (dt/tpoint)]

docker/images/files/nginx-entrypoint.sh

@@ -20,7 +20,7 @@ update_flags /var/www/app/js/config.js
 #########################################
 
 export PENPOT_BACKEND_URI=${PENPOT_BACKEND_URI:-http://penpot-backend:6060};
-export PENPOT_EXPORTER_URI=${PENPOT_EXPORTER_URI:-http://penpot-exporter};
+export PENPOT_EXPORTER_URI=${PENPOT_EXPORTER_URI:-http://penpot-exporter:6061};
 
 envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI" < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf
 

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

@@ -181,7 +181,7 @@
     (-> (update-in [:svg-attrs :style] dissoc :mix-blend-mode)
         (assoc :blend-mode (-> (get-in shape [:svg-attrs :style :mix-blend-mode]) keyword)))))
 
-(defn create-raw-svg [name frame-id svg-data {:keys [attrs] :as data}]
+(defn create-raw-svg [name frame-id svg-data {:keys [tag attrs] :as data}]
   (let [{:keys [x y width height offset-x offset-y]} svg-data]
     (-> {:id (uuid/next)
          :type :svg-raw
@@ -191,6 +191,7 @@
          :height height
          :x x
          :y y
+         :hidden (= tag :defs)
          :content (cond-> data
                     (map? data) (update :attrs usvg/clean-attrs))}
         (assoc :svg-attrs attrs)
@@ -388,7 +389,7 @@
             disp-matrix (str (gmt/translate-matrix displacement))
             element-data (-> element-data
                              (assoc :tag :g)
-                             (update :attrs dissoc :x :y :width :height :href :xlink:href)
+                             (update :attrs dissoc :x :y :width :height :href :xlink:href :transform)
                              (update :attrs usvg/add-transform disp-matrix)
                              (assoc :content [use-data]))]
         (parse-svg-element frame-id svg-data element-data unames))
@@ -419,7 +420,7 @@
                         hidden (assoc :hidden true))
 
                 children (cond->> (:content element-data)
-                           (or (= tag :g) (= tag :svg))
+                           (contains? usvg/parent-tags tag)
                            (mapv #(usvg/inherit-attributes attrs %)))]
             [shape children]))))))
 
@@ -469,12 +470,12 @@
        (rx/map (fn [uri]
                  (merge
                    {:file-id file-id
-                    :is-local true}
+                    :is-local true
+                    :url uri}
                    (if (str/starts-with? uri "data:")
                      {:name "image"
                       :content (data-uri->blob uri)}
-                     {:name (extract-name uri)
+                     {:name (extract-name uri)}))))
-                      :url uri}))))
        (rx/mapcat (fn [uri-data]
                     (->> (rp/command! (if (contains? uri-data :content)
                                         :upload-file-media-object
@@ -577,12 +578,9 @@
                             (pcb/add-object new-shape))
 
               changes
-              (reduce (fn [changes [index new-child]]
+              (reduce (fn [changes new-child]
-                        (-> changes
+                        (-> changes (pcb/add-object new-child)))
-                            (pcb/add-object new-child)
+                      changes new-children)
-                            (pcb/change-parent (:parent-id new-child) [new-child] index)))
-                      changes
-                      (d/enumerate new-children))
 
               changes (pcb/resize-parents changes
                                           (->> changes

frontend/src/app/main/ui/releases/v1_18.cljs

@@ -39,7 +39,7 @@
          [:img {:src "images/features/1.18-spacing.gif" :border "0" :alt "Spacing management"}]]
         [:div.modal-right
          [:div.modal-title
-          [:h2 "Spacing management for Flex layoutFlex-Layout"]]
+          [:h2 "Spacing management for Flex layout"]]
          [:div.modal-content
           [:p "Managing Flex Layout spacing is much more intuitive now. Visualize paddings, margins and gaps and drag to resize them."]
           [:p "And not only that, when creating Flex layouts, the spacing is predicted, helping you to maintain your design composition."]]

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

@@ -67,6 +67,14 @@
         shape-without-blur (dissoc shape :blur)
         shape-without-shadows (assoc shape :shadow [])
 
+
+        filter-str
+        (when (and (or (cph/group-shape? shape)
+                       (cph/frame-shape? shape)
+                       (cph/svg-raw-shape? shape))
+                   (not disable-shadows?))
+          (filters/filter-str filter-id shape))
+
         wrapper-props
         (-> (obj/clone props)
             (obj/without ["shape" "children" "disable-shadows?"])
@@ -79,11 +87,8 @@
           (= :group type)
           (attrs/add-style-attrs shape render-id)
 
-          (and (or (cph/group-shape? shape)
+          (some? filter-str)
-                   (cph/frame-shape? shape)
+          (obj/set! "filter" filter-str))
-                   (cph/svg-raw-shape? shape))
-               (not disable-shadows?))
-          (obj/set! "filter" (filters/filter-str filter-id shape)))
 
         svg-group? (and (contains? shape :svg-attrs) (= :group type))
 

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

@@ -64,6 +64,16 @@
                   (or transform-filter?
                       transform-mask?)  (merge bounds)))
 
+          ;; Fixes race condition with dynamic modifiers forcing redraw this properties before
+          ;; the effect triggers
+          attrs
+          (cond-> attrs
+            (or (= tag :filter) (= tag :mask))
+            (merge {:data-old-x (:x attrs)
+                    :data-old-y (:y attrs)
+                    :data-old-width (:width attrs)
+                    :data-old-height (:height attrs)}))
+
           [wrapper wrapper-props] (if (= tag :mask)
                                     ["g" #js {:className "svg-mask-wrapper"
                                               :transform (str transform)}]

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

@@ -100,10 +100,8 @@
 
         opts  #js {:shape shape :thumbnail? thumbnail?}
 
-        svg-leaf? (and (= :svg-raw (:type shape)) (string? (:content shape)))
-
         [wrapper wrapper-props]
-        (if svg-leaf?
+        (if (= :svg-raw (:type shape))
           [mf/Fragment nil]
           ["g" #js {:className "workspace-shape-wrapper"}])]
 

frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs

@@ -181,11 +181,14 @@
 
             (or (= (dom/get-tag-name node) "mask")
                 (= (dom/get-tag-name node) "filter"))
-            (do
+            (let [old-x      (dom/get-attribute node "data-old-x")
-              (dom/set-attribute! node "x" (dom/get-attribute node "data-old-x"))
+                  old-y      (dom/get-attribute node "data-old-y")
-              (dom/set-attribute! node "y" (dom/get-attribute node "data-old-y"))
+                  old-width  (dom/get-attribute node "data-old-width")
-              (dom/set-attribute! node "width" (dom/get-attribute node "data-old-width"))
+                  old-height (dom/get-attribute node "data-old-height")]
-              (dom/set-attribute! node "height" (dom/get-attribute node "data-old-height"))
+              (dom/set-attribute! node "x" old-x)
+              (dom/set-attribute! node "y" old-y)
+              (dom/set-attribute! node "width" old-width)
+              (dom/set-attribute! node "height" old-height)
 
               (dom/remove-attribute! node "data-old-x")
               (dom/remove-attribute! node "data-old-y")

frontend/src/app/util/svg.cljs

@@ -389,7 +389,8 @@
     :mask-type})
 
 (defonce inheritable-props
-  [:clip-rule
+  [:style
+   :clip-rule
    :color
    :color-interpolation
    :color-interpolation-filters
@@ -458,6 +459,12 @@
     :feTile
     :feTurbulence})
 
+(def parent-tags
+  #{:g
+    :svg
+    :text
+    :tspan})
+
 ;; By spec: https://www.w3.org/TR/SVG11/single-page.html#struct-GElement
 (defonce svg-group-safe-tags
   #{:animate