🎉 Improve svg import

frontend/src/app/render_wasm/api.cljs

@@ -33,7 +33,7 @@
    [app.render-wasm.performance :as perf]
    [app.render-wasm.serializers :as sr]
    [app.render-wasm.serializers.color :as sr-clr]
-   [app.render-wasm.svg-fills :as svg-fills]
+   [app.render-wasm.svg-filters :as svg-filters]
    ;; FIXME: rename; confunsing name
    [app.render-wasm.wasm :as wasm]
    [app.util.debug :as dbg]
@@ -909,7 +909,8 @@
 (defn set-object
   [objects shape]
   (perf/begin-measure "set-object")
-  (let [id           (dm/get-prop shape :id)
+  (let [shape        (svg-filters/apply-svg-derived shape)
+        id           (dm/get-prop shape :id)
         type         (dm/get-prop shape :type)
 
         parent-id    (get shape :parent-id)
@@ -923,14 +924,7 @@
         rotation     (get shape :rotation)
         transform    (get shape :transform)
 
-        ;; If the shape comes from an imported SVG (we know this because
-        ;; it has the :svg-attrs attribute) and it does not have its
-        ;; own fill, we set a default black fill. This fill will be
-        ;; inherited by child nodes and emulates the behavior of
-        ;; standard SVG, where a node without an explicit fill
-        ;; defaults to black.
-        fills        (svg-fills/resolve-shape-fills shape)
-
+        fills        (get shape :fills)
         strokes      (if (= type :group)
                        [] (get shape :strokes))
         children     (get shape :shapes)
@@ -974,7 +968,7 @@
       (set-shape-svg-attrs svg-attrs))
     (when (and (some? content) (= type :svg-raw))
       (set-shape-svg-raw-content (get-static-markup shape)))
-    (when (some? shadows) (set-shape-shadows shadows))
+    (set-shape-shadows shadows)
     (when (= type :text)
       (set-shape-grow-type grow-type))
 

frontend/src/app/render_wasm/shape.cljs

@@ -14,7 +14,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.refs :as refs]
    [app.render-wasm.api :as api]
-   [app.render-wasm.svg-fills :as svg-fills]
+   [app.render-wasm.svg-filters :as svg-filters]
    [app.render-wasm.wasm :as wasm]
    [beicon.v2.core :as rx]
    [cljs.core :as c]
@@ -130,7 +130,11 @@
 (defn- set-wasm-attr!
   [shape k]
   (when wasm/context-initialized?
-    (let [v  (get shape k)
+    (let [shape (case k
+                  :svg-attrs (svg-filters/apply-svg-derived (assoc shape :svg-attrs (get shape :svg-attrs)))
+                  (:fills :blur :shadow) (svg-filters/apply-svg-derived shape)
+                  shape)
+          v  (get shape k)
           id (get shape :id)]
       (case k
         :parent-id
@@ -163,8 +167,7 @@
         (api/set-shape-transform v)
 
         :fills
-        (let [fills (svg-fills/resolve-shape-fills shape)]
-          (into [] (api/set-shape-fills id fills false)))
+        (api/set-shape-fills id v false)
 
         :strokes
         (into [] (api/set-shape-strokes id v false))
@@ -222,8 +225,12 @@
           v])
 
         :svg-attrs
-        (when (cfh/path-shape? shape)
-          (api/set-shape-svg-attrs v))
+        (do
+          (api/set-shape-svg-attrs v)
+          ;; Always update fills/blur/shadow to clear previous state if filters disappear          
+          (api/set-shape-fills id (:fills shape) false)
+          (api/set-shape-blur (:blur shape))
+          (api/set-shape-shadows (:shadow shape)))
 
         :masked-group
         (when (cfh/mask-shape? shape)

frontend/src/app/render_wasm/svg_fills.cljs

@@ -74,6 +74,30 @@
                             :width (max 0.01 (or (dm/get-prop shape :width) 1))
                             :height (max 0.01 (or (dm/get-prop shape :height) 1))}))))
 
+(defn- apply-svg-transform
+  "Applies SVG transform to a point if present."
+  [pt svg-transform]
+  (if svg-transform
+    (gpt/transform pt svg-transform)
+    pt))
+
+(defn- apply-viewbox-transform
+  "Transforms a point from viewBox space to selrect space."
+  [pt viewbox rect]
+  (if viewbox
+    (let [{svg-x :x svg-y :y svg-width :width svg-height :height} viewbox
+          rect-width (max 0.01 (dm/get-prop rect :width))
+          rect-height (max 0.01 (dm/get-prop rect :height))
+          origin-x (or (dm/get-prop rect :x) (dm/get-prop rect :x1) 0)
+          origin-y (or (dm/get-prop rect :y) (dm/get-prop rect :y1) 0)
+          scale-x (/ rect-width svg-width)
+          scale-y (/ rect-height svg-height)
+          ;; Transform from viewBox space to selrect space
+          transformed-x (+ origin-x (* (- (dm/get-prop pt :x) svg-x) scale-x))
+          transformed-y (+ origin-y (* (- (dm/get-prop pt :y) svg-y) scale-y))]
+      (gpt/point transformed-x transformed-y))
+    pt))
+
 (defn- normalize-point
   [pt units shape]
   (if (= units "userspaceonuse")
@@ -81,9 +105,16 @@
           width (max 0.01 (dm/get-prop rect :width))
           height (max 0.01 (dm/get-prop rect :height))
           origin-x (or (dm/get-prop rect :x) (dm/get-prop rect :x1) 0)
-          origin-y (or (dm/get-prop rect :y) (dm/get-prop rect :y1) 0)]
-      (gpt/point (/ (- (dm/get-prop pt :x) origin-x) width)
-                 (/ (- (dm/get-prop pt :y) origin-y) height)))
+          origin-y (or (dm/get-prop rect :y) (dm/get-prop rect :y1) 0)
+          svg-transform (:svg-transform shape)
+          viewbox (:svg-viewbox shape)
+          ;; For userSpaceOnUse, coordinates are in SVG user space
+          ;; We need to transform them to shape space before normalizing
+          pt-after-svg-transform (apply-svg-transform pt svg-transform)
+          transformed-pt (apply-viewbox-transform pt-after-svg-transform viewbox rect)
+          normalized-x (/ (- (dm/get-prop transformed-pt :x) origin-x) width)
+          normalized-y (/ (- (dm/get-prop transformed-pt :y) origin-y) height)]
+      (gpt/point normalized-x normalized-y))
     pt))
 
 (defn- normalize-attrs
@@ -257,18 +288,25 @@
                              (parse-gradient-stop node))))
                    vec)]
     (when (seq stops)
-      (let [[center radius-point]
+      (let [[center point-x point-y]
             (let [points (apply-gradient-transform [(gpt/point cx cy)
-                                                    (gpt/point (+ cx r) cy)]
+                                                    (gpt/point (+ cx r) cy)
+                                                    (gpt/point cx (+ cy r))]
                                                    transform)]
               (map #(normalize-point % units shape) points))
-            radius (gpt/distance center radius-point)]
+            radius-x (gpt/distance center point-x)
+            radius-y (gpt/distance center point-y)
+            ;; Prefer Y as the base radius so width becomes the X/Y ratio.
+            base-radius (if (pos? radius-y) radius-y radius-x)
+            radius-point (if (pos? radius-y) point-y point-x)
+            width (let [safe-radius (max base-radius 1.0e-6)]
+                    (/ radius-x safe-radius))]
         {:type :radial
          :start-x (dm/get-prop center :x)
          :start-y (dm/get-prop center :y)
          :end-x (dm/get-prop radius-point :x)
          :end-y (dm/get-prop radius-point :y)
-         :width radius
+         :width width
          :stops stops}))))
 
 (defn- svg-gradient->fill

frontend/src/app/render_wasm/svg_filters.cljs

@@ -0,0 +1,98 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.render-wasm.svg-filters
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.common.svg :as csvg]
+   [app.common.uuid :as uuid]
+   [app.render-wasm.svg-fills :as svg-fills]))
+
+(def ^:private drop-shadow-tags
+  #{:feOffset :feGaussianBlur :feColorMatrix})
+
+(defn- find-filter-element
+  "Finds a filter element by tag in filter content."
+  [filter-content tag]
+  (some #(when (= tag (:tag %)) %) filter-content))
+
+(defn- find-filter-def
+  [shape]
+  (let [filter-attr (or (dm/get-in shape [:svg-attrs :filter])
+                        (dm/get-in shape [:svg-attrs :style :filter]))
+        svg-defs    (dm/get-prop shape :svg-defs)]
+    (when (and filter-attr svg-defs)
+      (let [filter-ids (csvg/extract-ids filter-attr)]
+        (some #(get svg-defs %) filter-ids)))))
+
+(defn- build-blur
+  [gaussian-blur]
+  (when gaussian-blur
+    {:id (uuid/next)
+     :type :layer-blur
+     ;; For layer blur the value matches stdDeviation directly
+     :value (-> (dm/get-in gaussian-blur [:attrs :stdDeviation])
+                (d/parse-double 0))
+     :hidden false}))
+
+(defn- build-drop-shadow
+  [filter-content drop-shadow-elements]
+  (let [offset-elem (find-filter-element filter-content :feOffset)]
+    (when (and offset-elem (seq drop-shadow-elements))
+      (let [blur-elem  (find-filter-element drop-shadow-elements :feGaussianBlur)
+            dx         (-> (dm/get-in offset-elem [:attrs :dx])
+                           (d/parse-double 0))
+            dy         (-> (dm/get-in offset-elem [:attrs :dy])
+                           (d/parse-double 0))
+            blur-value (if blur-elem
+                         (-> (dm/get-in blur-elem [:attrs :stdDeviation])
+                             (d/parse-double 0)
+                             (* 2))
+                         0)]
+        [{:id (uuid/next)
+          :style :drop-shadow
+          :offset-x dx
+          :offset-y dy
+          :blur blur-value
+          :spread 0
+          :hidden false
+          ;; TODO: parse feColorMatrix to extract color/opacity
+          :color {:color "#000000" :opacity 1}}]))))
+
+(defn apply-svg-filters
+  "Derives native blur/shadow from SVG filter definitions when the shape does
+  not already have them. The SVG attributes are left untouched so SVG fallback
+  rendering keeps working the same way as gradient fills."
+  [shape]
+  (let [existing-blur   (:blur shape)
+        existing-shadow (:shadow shape)]
+    (if-let [filter-def (find-filter-def shape)]
+      (let [content              (:content filter-def)
+            gaussian-blur        (find-filter-element content :feGaussianBlur)
+            drop-shadow-elements (filter #(contains? drop-shadow-tags (:tag %)) content)
+            blur                 (or existing-blur (build-blur gaussian-blur))
+            shadow               (if (seq existing-shadow)
+                                   existing-shadow
+                                   (build-drop-shadow content drop-shadow-elements))]
+        (cond-> shape
+          blur (assoc :blur blur)
+          (seq shadow) (assoc :shadow shadow)))
+      shape)))
+
+(defn apply-svg-derived
+  "Applies SVG-derived effects (fills, blur, shadows) uniformly.
+  - Keeps user fills if present; otherwise derives from SVG.
+  - Converts SVG filters into native blur/shadow when needed.
+  - Always returns shape with :fills (possibly []) and blur/shadow keys."
+  [shape]
+  (let [shape' (apply-svg-filters shape)
+        fills  (or (svg-fills/resolve-shape-fills shape') [])]
+    (assoc shape'
+           :fills fills
+           :blur (:blur shape')
+           :shadow (:shadow shape'))))
+

frontend/test/frontend_tests/svg_fills_test.cljs

@@ -42,6 +42,37 @@
 (deftest skips-when-no-svg-fill
   (is (nil? (svg-fills/svg-fill->fills {:svg-attrs {:fill "none"}}))))
 
+(def elliptical-shape
+  {:selrect {:x 0 :y 0 :width 200 :height 100}
+   :svg-attrs {:style {:fill "url(#grad-ellipse)"}}
+   :svg-defs {"grad-ellipse"
+              {:tag :radialGradient
+               :attrs {:id "grad-ellipse"
+                       :gradientUnits "userSpaceOnUse"
+                       :cx "50"
+                       :cy "50"
+                       :r "50"
+                       :gradientTransform "matrix(2 0 0 1 0 0)"}
+               :content [{:tag :stop
+                          :attrs {:offset "0"
+                                  :style "stop-color:#000000;stop-opacity:1"}}
+                         {:tag :stop
+                          :attrs {:offset "1"
+                                  :style "stop-color:#ffffff;stop-opacity:1"}}]}}})
+
+(deftest builds-elliptical-radial-gradient-with-transform
+  (let [fills (svg-fills/svg-fill->fills elliptical-shape)
+        gradient (get-in (first fills) [:fill-color-gradient])]
+    (testing "ellipse from gradientTransform is preserved"
+      (is (= 1 (count fills)))
+      (is (= :radial (:type gradient)))
+      (is (= 0.5 (:start-x gradient)))
+      (is (= 0.5 (:start-y gradient)))
+      (is (= 0.5 (:end-x gradient)))
+      (is (= 1.0 (:end-y gradient)))
+      ;; Scaling the X axis in the gradientTransform should reflect on width.
+      (is (= 1.0 (:width gradient))))))
+
 (deftest resolve-shape-fills-prefers-existing-fills
   (let [fills [{:fill-color "#ff00ff" :fill-opacity 0.75}]
         resolved (svg-fills/resolve-shape-fills {:fills fills})]

frontend/test/frontend_tests/svg_filters_test.cljs

@@ -0,0 +1,49 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns frontend-tests.svg-filters-test
+  (:require
+   [app.render-wasm.svg-filters :as svg-filters]
+   [cljs.test :refer [deftest is testing]]))
+
+(def sample-filter-shape
+  {:svg-attrs {:filter "url(#simple-filter)"}
+   :svg-defs {"simple-filter"
+              {:tag :filter
+               :content [{:tag :feOffset :attrs {:dx "2" :dy "3"}}
+                         {:tag :feGaussianBlur :attrs {:stdDeviation "4"}}]}}})
+
+(deftest derives-blur-and-shadow-from-svg-filter
+  (let [shape  (svg-filters/apply-svg-filters sample-filter-shape)
+        blur   (:blur shape)
+        shadow (:shadow shape)]
+    (testing "layer blur derived from feGaussianBlur"
+      (is (= :layer-blur (:type blur)))
+      (is (= 4.0 (:value blur))))
+    (testing "drop shadow derived from filter chain"
+      (is (= [{:style :drop-shadow
+               :offset-x 2.0
+               :offset-y 3.0
+               :blur 8.0
+               :spread 0
+               :hidden false
+               :color {:color "#000000" :opacity 1}}]
+             (map #(dissoc % :id) shadow))))
+    (testing "svg attrs remain intact"
+      (is (= "url(#simple-filter)" (get-in shape [:svg-attrs :filter]))))))
+
+(deftest keeps-existing-native-filters
+  (let [existing {:blur {:id :existing :type :layer-blur :value 1.0}
+                  :shadow [{:id :shadow :style :drop-shadow}]}
+        shape    (svg-filters/apply-svg-filters (merge sample-filter-shape existing))]
+    (is (= (:blur existing) (:blur shape)))
+    (is (= (:shadow existing) (:shadow shape)))))
+
+(deftest skips-when-no-filter-definition
+  (let [shape {:svg-attrs {:fill "#fff"}}
+        result (svg-filters/apply-svg-filters shape)]
+    (is (= shape result))))
+