mirror of
https://github.com/penpot/penpot.git
synced 2026-11-09 11:30:54 +00:00
a77cb2608e
* 🐛 Normalize stored SVG attribute keys to kebab-case The v3 reader already emits kebab-case keys, but birth stored the camelCase React prop names, so import and export never converged: fill rules painted wrongly and filter defs lost their blur. Birth now normalizes every stored attribute key to kebab-case through the `svg-props` whitelist (`attrs->kebab-props`), applied on all element paths of the svg importer, on the file builder and on defs. svg-raw `:content` is kebab-ized in spelling only and keeps unknown keys, because the sidebar reads them. Non-spec attrs Penpot must keep live in `penpot-extra-attrs`, seeded with `:stroke-style`. Render boundaries translate back to camelCase for React and for the wasm props, and the shape schema declares the closed kebab contract derived from that same whitelist, so birth and validation cannot drift. Migration `0035-fix-shape-svg-attrs-and-defs` converts old files once with the birth transforms, and carries back the svg-viewbox rect normalization the withdrawn `0021` had. That old id leaves `available-migrations`, so files recording it migrate again through this one, and the binfile cleaner drops its own svg repair. Review fixes included here: `setup-opacity` and the blend mode read the stored keys, gradient stops accept `:style` as a CSS string or a map, `inherit-attributes` reads `:style` so a child's inline style beats the inherited group attr per CSS, and the svg-attrs menu shows spec spelling (`viewBox`, `class`) through `stored-attr-display-name`. Tests cover the migration, the closed svg-attr schemas and the import/export round trip; the svg-content schema test pins its sample seed, which dealt no svg-raw shape on unlucky runs. Closes #11947 AI-assisted-by: muse-spark-1.3-contributor * 🐛 Keep legacy svg node tags and transforms valid in migration 0035 The closed svg node schemas require keyword tags and map attrs, but stored files hold def and svg-raw content tags as strings, and some node `:attrs` as nil. Migration 0035 left them as they were, so the file data check that runs after migrating rejected those files and they could not be opened. `normalize-node-tree` now turns string tags into keywords and nil attrs into an empty map, at birth and in 0035. With keyword tags, the svg defs renderer applies the shape transform to user-space defs. Legacy `:svg-transform` values are plain maps, which multiply into NaN matrices. `gmt/coerce` turns them into matrices, in 0035 and in the binfile cleaner, because every v3 import decodes the transform as a plain map again. Legacy masks and gradients now render as designed in the svg renderer. The binfile test helper calls `export-files!` with the current config keys. AI-assisted-by: claude-opus-5-5 ---------
144 lines
6.2 KiB
Clojure
144 lines
6.2 KiB
Clojure
;; 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 SUBSIDIARY SL
|
|
|
|
(ns frontend-tests.svg-fills-test
|
|
(:require
|
|
[app.common.render-wasm.svg-derived :as svg-derived]
|
|
[app.main.ui.shapes.attrs :as attrs]
|
|
[app.util.object :as obj]
|
|
[cljs.test :refer [deftest is testing]]))
|
|
|
|
(def sample-shape
|
|
{:selrect {:x 100 :y 200 :width 200 :height 100}
|
|
:svg-attrs {:fill-opacity "0.5"
|
|
:style {:fill "url(#grad)"}}
|
|
:svg-defs {"grad"
|
|
{:tag :radialGradient
|
|
:attrs {:id "grad"
|
|
:gradient-units "userSpaceOnUse"
|
|
:cx "150"
|
|
:cy "250"
|
|
:r "50"}
|
|
:content [{:tag :stop
|
|
:attrs {:offset "0"
|
|
:style "stop-color:#ff0000;stop-opacity:1"}}
|
|
{:tag :stop
|
|
:attrs {:offset "1"
|
|
:style "stop-color:#00ff00;stop-opacity:0"}}]}}})
|
|
|
|
(deftest builds-gradient-fill-from-svg-defs
|
|
(let [fills (svg-derived/svg-fill->fills sample-shape)
|
|
gradient (get-in (first fills) [:fill-color-gradient])]
|
|
(testing "fallback fill is generated"
|
|
(is (= 1 (count fills))))
|
|
(testing "gradient metadata"
|
|
(is (= :radial (:type gradient)))
|
|
(is (= "#ff0000" (get-in gradient [:stops 0 :color])))
|
|
(is (= "#00ff00" (get-in gradient [:stops 1 :color]))))
|
|
(testing "opacity preserved"
|
|
(is (= 0.5 (:fill-opacity (first fills)))))))
|
|
|
|
(deftest skips-when-no-svg-fill
|
|
(is (nil? (svg-derived/svg-fill->fills {:svg-attrs {:fill "none"}}))))
|
|
|
|
;; Stored (post-0034) spelling: migration `0034` turned stop `:style`
|
|
;; strings into kebab maps via `attrs->kebab-props`. The WASM fill
|
|
;; derivation must read both spellings, or gradients lose their stops.
|
|
(def stored-shape
|
|
{:selrect {:x 100 :y 200 :width 200 :height 100}
|
|
:svg-attrs {:fill-opacity "0.5"
|
|
:style {:fill "url(#grad)"}}
|
|
:svg-defs {"grad"
|
|
{:tag :radialGradient
|
|
:attrs {:id "grad"
|
|
:gradient-units "userSpaceOnUse"
|
|
:cx "150"
|
|
:cy "250"
|
|
:r "50"}
|
|
:content [{:tag :stop
|
|
:attrs {:offset "0"
|
|
:style {:stop-color "#ff0000" :stop-opacity "1"}}}
|
|
{:tag :stop
|
|
:attrs {:offset "1"
|
|
:style {:stop-color "#00ff00" :stop-opacity "0"}}}]}}})
|
|
|
|
(deftest builds-gradient-fill-from-stored-map-styles
|
|
(let [fills (svg-derived/svg-fill->fills stored-shape)
|
|
gradient (get-in (first fills) [:fill-color-gradient])]
|
|
(is (= 1 (count fills)))
|
|
(is (= "#ff0000" (get-in gradient [:stops 0 :color])))
|
|
(is (= "#00ff00" (get-in gradient [:stops 1 :color])))))
|
|
|
|
(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"
|
|
:gradient-units "userSpaceOnUse"
|
|
:cx "50"
|
|
:cy "50"
|
|
:r "50"
|
|
:gradient-transform "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-derived/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-derived/resolve-shape-fills {:fills fills})]
|
|
(is (= fills resolved))))
|
|
|
|
(deftest resolve-shape-fills-falls-back-to-svg-fill
|
|
(let [resolved (svg-derived/resolve-shape-fills (assoc sample-shape :fills []))]
|
|
(is (= (svg-derived/svg-fill->fills sample-shape) resolved))))
|
|
|
|
(deftest resolve-shape-fills-defaults-to-black
|
|
(is (= [{:fill-color "#000000" :fill-opacity 1}]
|
|
(svg-derived/resolve-shape-fills {:type :group
|
|
:svg-attrs {}}))))
|
|
|
|
(deftest resolve-shape-fills-accepts-hex-fill
|
|
(let [fills (svg-derived/resolve-shape-fills {:fills []
|
|
:type :svg-raw
|
|
:svg-attrs {:fill "#fabada"}})]
|
|
(is (= 1 (count fills)))
|
|
(is (= "#fabada" (:fill-color (first fills))))))
|
|
|
|
;; The classic renderer funnel: stored kebab keys reach React as
|
|
;; camelCase props, so a shape renders identical props before and after
|
|
;; the kebab migration. Extra attrs keep their source spelling so React
|
|
;; passes them to the DOM silently (no unknown-prop warning).
|
|
(deftest svg-attrs-render-as-camel-props
|
|
(let [props (attrs/get-svg-props {:svg-attrs {:fill-rule "evenodd"
|
|
:stroke-width "2"
|
|
:stroke-style "dotted"
|
|
:style {:fill-opacity "0.5"}}}
|
|
"r1")]
|
|
(is (= "evenodd" (obj/get props "fillRule")))
|
|
(is (= "2" (obj/get props "strokeWidth")))
|
|
(is (= "dotted" (obj/get props "stroke-style")))
|
|
(is (nil? (obj/get props "strokeStyle")) "no camel duplicate for extras")
|
|
(is (= "0.5" (obj/get (obj/get props "style") "fillOpacity")))))
|
|
|
|
|