✨ Don't stop SVG import when an image cannot be imported

CHANGES.md

@@ -37,6 +37,7 @@
 - Add the ability to specify the attr for retrieve the email on OIDC integration [#1460](https://github.com/penpot/penpot/issues/1460)
 - Allow registration with invitation token when registration is disabled
 - Add the ability to disable standard, password login [Taiga #2999](https://tree.taiga.io/project/penpot/us/2999)
+- Don't stop SVG import when an image cannot be imported [#1531](https://github.com/penpot/penpot/issues/1531)
 
 ### :bug: Bugs fixed
 

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

@@ -70,6 +70,8 @@
                     :else (str tag))))
 
 (defn setup-fill [shape]
+  (if (some? (:fills shape))
+    shape
     (cond-> shape
       ;; Color present as attribute
       (uc/color? (str/trim (get-in shape [:svg-attrs :fill])))
@@ -93,7 +95,7 @@
       (get-in shape [:svg-attrs :style :fill-opacity])
       (-> (update-in [:svg-attrs :style] dissoc :fill-opacity)
           (assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :style :fill-opacity])
-                                               (d/parse-double))))))
+                                                 (d/parse-double)))))))
 
 (defn setup-stroke [shape]
   (let [stroke-linecap (-> (or (get-in shape [:svg-attrs :stroke-linecap])
@@ -337,6 +339,8 @@
                       (update :y - (:y origin)))
 
         rect-metadata (calculate-rect-metadata rect-data transform)]
+
+    (when (some? image-data)
       (-> {:id (uuid/next)
            :type :image
            :name name
@@ -348,7 +352,7 @@
 
           (merge rect-metadata)
           (assoc :svg-viewbox (select-keys rect [:x :y :width :height]))
-        (assoc :svg-attrs (dissoc attrs :x :y :width :height :xlink:href)))))
+          (assoc :svg-attrs (dissoc attrs :x :y :width :height :xlink:href))))))
 
 (defn parse-svg-element [frame-id svg-data element-data unames]
   (let [{:keys [tag attrs]} element-data
@@ -389,9 +393,9 @@
                         :polygon     (create-path-shape name frame-id svg-data (-> element-data usvg/polygon->path))
                         :line        (create-path-shape name frame-id svg-data (-> element-data usvg/line->path))
                         :image       (create-image-shape name frame-id svg-data element-data)
-                        #_other      (create-raw-svg name frame-id svg-data element-data)))
+                        #_other      (create-raw-svg name frame-id svg-data element-data)))]
-
+        (when (some? shape)
-            shape (assoc shape :fills [])
+          (let [shape (assoc shape :fills [])
                 shape (assoc shape :strokes [])
 
                 shape (when (some? shape)
@@ -403,7 +407,7 @@
                 children (cond->> (:content element-data)
                            (or (= tag :g) (= tag :svg))
                            (mapv #(usvg/inherit-attributes attrs %)))]
-        [shape children]))))
+            [shape children]))))))
 
 (defn add-svg-child-changes [page-id objects selected frame-id parent-id svg-data [unames changes] [index data]]
   (let [[shape children] (parse-svg-element frame-id svg-data data unames)]
@@ -448,6 +452,9 @@
                         (->> (rp/mutation! (if (contains? uri-data :content)
                                              :upload-file-media-object
                                              :create-file-media-object-from-url) uri-data)
+                             ;; When the image uploaded fail we skip the shape
+                             ;; returning `nil` will afterward not create the shape.
+                             (rx/catch #(rx/of nil))
                              (rx/map #(vector (:url uri-data) %)))))
            (rx/reduce (fn [acc [url image]] (assoc acc url image)) {})
            (rx/map #(create-svg-shapes (assoc svg-data :image-data %) position))))))

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

@@ -180,6 +180,11 @@
                           (obj/set! "fill" (obj/get svg-styles "fill"))
                           (obj/set! "fillOpacity" (obj/get svg-styles "fillOpacity")))
 
+                      (obj/contains? svg-attrs "fill")
+                      (-> styles
+                          (obj/set! "fill" (obj/get svg-attrs "fill"))
+                          (obj/set! "fillOpacity" (obj/get svg-attrs "fillOpacity")))
+
                       ;; If contains svg-attrs the origin is svg. If it's not svg origin
                       ;; we setup the default fill as transparent (instead of black)
                       (and (contains? shape :svg-attrs)
@@ -187,8 +192,11 @@
                            (empty? (:fills shape)))
                       styles
 
+                      (d/not-empty? (:fills shape))
+                      (add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0)
+
                       :else
-                      (add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0))]
+                      styles)]
 
      (-> props
          (obj/merge! svg-attrs)

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

@@ -328,7 +328,13 @@
 
         props        (cond-> props
                        (d/not-empty? (:shadow shape))
-                       (obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))]
+                       (obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))
+
+        svg-defs  (:svg-defs shape {})
+        svg-attrs (:svg-attrs shape {})
+
+        [svg-attrs svg-styles]
+        (attrs/extract-svg-attrs render-id svg-defs svg-attrs)]
 
     (cond
       url-fill?
@@ -339,6 +345,25 @@
                                 (obj/without ["fill" "fillOpacity"])))]
         (obj/set! props "fill" (dm/fmt "url(#fill-0-%)" render-id)))
 
+      (obj/contains? svg-styles "fill")
+      (let [style
+            (-> (obj/get props "style")
+                (obj/clone)
+                (obj/set! "fill" (obj/get svg-styles "fill"))
+                (obj/set! "fillOpacity" (obj/get svg-styles "fillOpacity")))]
+        (-> props
+            (obj/set! "style" style)))
+
+      (obj/contains? svg-attrs "fill")
+      (let [style
+            (-> (obj/get props "style")
+                (obj/clone)
+                (obj/set! "fill" (obj/get svg-attrs "fill"))
+                (obj/set! "fillOpacity" (obj/get svg-attrs "fillOpacity")))]
+        (-> props
+            (obj/set! "style" style)))
+
+
       (d/not-empty? (:fills shape))
       (let [fill-props
             (attrs/extract-fill-attrs (get-in shape [:fills 0]) render-id 0)