🐛 Import svg with exterior stroke

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

@@ -74,6 +74,7 @@
     ;; Color present as attribute
     (uc/color? (str/trim (get-in shape [:svg-attrs :fill])))
     (-> (update :svg-attrs dissoc :fill)
+        (update-in [:svg-attrs :style] dissoc :fill)
         (assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :fill])
                                              (str/trim)
                                              (uc/parse-color))))
@@ -81,17 +82,20 @@
     ;; Color present as style
     (uc/color? (str/trim (get-in shape [:svg-attrs :style :fill])))
     (-> (update-in [:svg-attrs :style] dissoc :fill)
+        (update :svg-attrs dissoc :fill)
         (assoc-in [:fills 0 :fill-color] (-> (get-in shape [:svg-attrs :style :fill])
                                              (str/trim)
                                              (uc/parse-color))))
 
     (get-in shape [:svg-attrs :fill-opacity])
     (-> (update :svg-attrs dissoc :fill-opacity)
+        (update-in [:svg-attrs :style] dissoc :fill-opacity)
         (assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :fill-opacity])
                                                (d/parse-double))))
 
     (get-in shape [:svg-attrs :style :fill-opacity])
     (-> (update-in [:svg-attrs :style] dissoc :fill-opacity)
+        (update :svg-attrs dissoc :fill-opacity)
         (assoc-in [:fills 0 :fill-opacity] (-> (get-in shape [:svg-attrs :style :fill-opacity])
                                                (d/parse-double))))))
 

frontend/src/app/main/render.cljs

@@ -362,19 +362,15 @@
 
 (mf/defc object-svg
   {::mf/wrap [mf/memo]}
-  [{:keys [objects object zoom render-texts? render-embed?]
+  [{:keys [objects object-id render-texts? render-embed?]
-    :or {zoom 1 render-embed? false}
+    :or {render-embed? false}
     :as props}]
-  (let [object (cond-> object
+  (let [object  (get objects object-id)
+        object (cond-> object
                  (:hide-fill-on-export object)
                  (assoc :fills []))
 
-        obj-id (:id object)
+        {:keys [x y width height]}  (get-object-bounds objects object-id)
-        x      (* (:x object) zoom)
-        y      (* (:y object) zoom)
-        width  (* (:width object) zoom)
-        height (* (:height object) zoom)
-
         vbox   (dm/str x " " y " " width " " height)
 
         frame-wrapper
@@ -393,7 +389,7 @@
         render-texts? (and render-texts? (d/seek (comp nil? :position-data) text-shapes))]
 
     [:& (mf/provider embed/context) {:value render-embed?}
-     [:svg {:id (dm/str "screenshot-" obj-id)
+     [:svg {:id (dm/str "screenshot-" object-id)
             :view-box vbox
             :width width
             :height height
@@ -405,7 +401,7 @@
             :style {:-webkit-print-color-adjust :exact}
             :fill "none"}
 
-      (let [shapes (cph/get-children objects obj-id)]
+      (let [shapes (cph/get-children objects object-id)]
         [:& ff/fontfaces-style {:shapes shapes}])
 
       (case (:type object)

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

@@ -6,8 +6,10 @@
 
 (ns app.main.ui.shapes.svg-defs
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.matrix :as gmt]
+   [app.common.geom.shapes :as gsh]
    [app.main.ui.shapes.filters :as f]
    [app.util.object :as obj]
    [app.util.svg :as usvg]
@@ -60,7 +62,8 @@
                   transform-gradient?   (add-matrix :gradientTransform transform)
                   transform-pattern?    (add-matrix :patternTransform transform)
                   transform-clippath?   (add-matrix :transform transform)
-                  (or transform-filter? transform-mask?) (merge bounds)))
+                  (or transform-filter?
+                      transform-mask?)  (merge bounds)))
 
           [wrapper wrapper-props] (if (= tag :mask)
                                     ["g" #js {:className "svg-mask-wrapper"
@@ -75,6 +78,16 @@
                                           :transform transform
                                           :bounds bounds}])]])))
 
+(defn svg-def-bounds [svg-def shape transform]
+  (let [{:keys [tag]} svg-def]
+    (if (or (= tag :mask) (contains? usvg/filter-tags tag))
+      (-> (gsh/make-rect (d/parse-double (get-in svg-def [:attrs :x]))
+                         (d/parse-double (get-in svg-def [:attrs :y]))
+                         (d/parse-double (get-in svg-def [:attrs :width]))
+                         (d/parse-double (get-in svg-def [:attrs :height])))
+          (gsh/transform-rect transform))
+      (f/get-filters-bounds shape))))
+
 (mf/defc svg-defs [{:keys [shape render-id]}]
   (let [svg-defs (:svg-defs shape)
 
@@ -101,5 +114,4 @@
                       :node svg-def
                       :prefix-id prefix-id
                       :transform transform
-                      :bounds (f/get-filters-bounds shape)}]))))
+                      :bounds (svg-def-bounds svg-def shape transform)}]))))
-

frontend/src/app/render.cljs

@@ -112,11 +112,9 @@
                                         (st/emit! (df/fonts-fetched fonts)))))
                             (rx/map (comp :objects second))
                             (rx/map (fn [objects]
-                                      (let [objects (render/adapt-objects-for-shape objects object-id)
+                                      (let [objects (render/adapt-objects-for-shape objects object-id)]
-                                            bounds  (render/get-object-bounds objects object-id)
-                                            object  (get objects object-id)]
                                         {:objects objects
-                                         :object (merge object bounds)}))))))
+                                         :object object-id}))))))
 
         {:keys [objects object]} (use-resource fetch-state)]
 
@@ -132,10 +130,9 @@
     (when objects
       [:& render/object-svg
        {:objects objects
-        :object object
+        :object-id object-id
         :render-embed? render-embed?
-        :render-texts? render-texts?
+        :render-texts? render-texts?}])))
-        :zoom 1}])))
 
 (mf/defc objects-svg
   [{:keys [page-id file-id object-ids render-embed? render-texts?]}]
@@ -155,16 +152,13 @@
 
     (when objects
       (for [object-id object-ids]
-        (let [objects (render/adapt-objects-for-shape objects object-id)
+        (let [objects (render/adapt-objects-for-shape objects object-id)]
-              bounds  (render/get-object-bounds objects object-id)
-              object  (merge (get objects object-id) bounds)]
           [:& render/object-svg
            {:objects objects
             :key (str object-id)
-            :object object
+            :object-id object-id
             :render-embed? render-embed?
-            :render-texts? render-texts?
+            :render-texts? render-texts?}])))))
-            :zoom 1}])))))
 
 (s/def ::page-id ::us/uuid)
 (s/def ::file-id ::us/uuid)