johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🐛 Fix nested fills for shapes with svg attrs

Browse Source
This commit is contained in:
Alejandro Alonso
2025-10-28 11:29:47 +01:00
parent f64105ad08
commit 14d5de29da
9 changed files with 2240 additions and 1331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

874
frontend/playwright/data/render-wasm/get-file-svg-attrs.json
View File

@@ -26,8 +26,8 @@
"~:has-media-trimmed": false, "~:has-media-trimmed": false,
"~:comment-thread-seqn": 0, "~:comment-thread-seqn": 0,
"~:name": "New File 4", "~:name": "New File 4",
"~:revn": 77, "~:revn": 112,
"~:modified-at": "~m1761287975462", "~:modified-at": "~m1761647475453",
"~:vern": 0, "~:vern": 0,
"~:id": "~u4732f3e3-7a1a-807e-8006-ff76066e631d", "~:id": "~u4732f3e3-7a1a-807e-8006-ff76066e631d",
"~:is-shared": false, "~:is-shared": false,
@@ -203,6 +203,10 @@
"~:height": 0.01, "~:height": 0.01,
"~:flip-y": null, "~:flip-y": null,
"~:shapes": [ "~:shapes": [
"~u4c0c14a2-498a-80b9-8007-05d95610598f",
"~u4c0c14a2-498a-80b9-8007-05d956105992",
"~u4c0c14a2-498a-80b9-8007-05d956105994",
"~u4c0c14a2-498a-80b9-8007-05d956105996",
"~u0ae05ee2-98e5-8097-8007-00802f748d0f", "~u0ae05ee2-98e5-8097-8007-00802f748d0f",
"~ud816a747-c6fa-8005-8006-ffa56576e28e", "~ud816a747-c6fa-8005-8006-ffa56576e28e",
"~uc9348056-5090-8016-8006-ff760a55bce0", "~uc9348056-5090-8016-8006-ff760a55bce0",
@@ -566,6 +570,584 @@
"~:flip-y": null "~:flip-y": null
} }
}, },
"~u4c0c14a2-498a-80b9-8007-05d95610598f": {
"~#shape": {
"~:y": 932.999954550034,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:name": "Graphics / Solid / gem.svg",
"~:width": 85.9999515116215,
"~:type": "~:group",
"~:svg-attrs": {
},
"~:points": [
{
"~#point": {
"~:x": 762.000043265266,
"~:y": 932.999954550034
}
},
{
"~#point": {
"~:x": 847.999994776888,
"~:y": 932.999954550034
}
},
{
"~#point": {
"~:x": 847.999994776888,
"~:y": 1036.99998470998
}
},
{
"~#point": {
"~:x": 762.000043265266,
"~:y": 1036.99998470998
}
}
],
"~:layout-item-h-sizing": "~:fix",
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:exports": [
{
"~:type": "~:svg",
"~:suffix": "",
"~:scale": 1
}
],
"~:layout-item-v-sizing": "~:fix",
"~:constraints-v": "~:scale",
"~:constraints-h": "~:scale",
"~:id": "~u4c0c14a2-498a-80b9-8007-05d95610598f",
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 762.000043265266,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 762.000043265266,
"~:y": 932.999954550034,
"~:width": 85.9999515116215,
"~:height": 104.00003015995,
"~:x1": 762.000043265266,
"~:y1": 932.999954550034,
"~:x2": 847.999994776888,
"~:y2": 1036.99998470998
}
},
"~:fills": [],
"~:flip-x": false,
"~:height": 104.00003015995,
"~:flip-y": false,
"~:shapes": [
"~u4c0c14a2-498a-80b9-8007-05d956105990"
]
}
},
"~u4c0c14a2-498a-80b9-8007-05d956105992": {
"~#shape": {
"~:y": 1095.99998134318,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:index": 1,
"~:name": "Group - no svg",
"~:width": 171.999930211738,
"~:type": "~:group",
"~:points": [
{
"~#point": {
"~:x": 749.000032888887,
"~:y": 1095.99998134318
}
},
{
"~#point": {
"~:x": 920.999963100625,
"~:y": 1095.99998134318
}
},
{
"~#point": {
"~:x": 920.999963100625,
"~:y": 1248.99998756293
}
},
{
"~#point": {
"~:x": 749.000032888887,
"~:y": 1248.99998756293
}
}
],
"~:layout-item-h-sizing": "~:fix",
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:layout-item-v-sizing": "~:fix",
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105992",
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 749.000032888887,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 749.000032888887,
"~:y": 1095.99998134318,
"~:width": 171.999930211738,
"~:height": 153.000006219747,
"~:x1": 749.000032888887,
"~:y1": 1095.99998134318,
"~:x2": 920.999963100625,
"~:y2": 1248.99998756293
}
},
"~:fills": [],
"~:flip-x": false,
"~:height": 153.000006219747,
"~:flip-y": false,
"~:shapes": [
"~u4c0c14a2-498a-80b9-8007-05d956105993"
]
}
},
"~u4c0c14a2-498a-80b9-8007-05d956105993": {
"~#shape": {
"~:y": null,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:content": {
"~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAABoDUVEKmmJRAMAAAAobkVEwCeJRPUIRkQAAIlEW6xGRAAAiUQCAAAAAAAAAAAAAAAAAAAAAAAAAGHUWkQAAIlEAwAAAMh3W0QAAIlElRJcRKkmiURVc1xEKmmJRAIAAAAAAAAAAAAAAAAAAAAAAAAAWNtlRM7Ij0QDAAAAi21mRJkrkER/XmZE9bOQRBi7ZUQzD5FEAgAAAAAAAAAAAAAAAAAAAAAAAAASP1JEO8ubRAMAAAAs3FFE5wCcRJFSUUQEIJxEXsBQRAQgnEQDAAAALC5QRAQgnESRpE9E5wCcRKtBT0Q7y5tEAgAAAAAAAAAAAAAAAAAAAAAAAAClxTtEMw+RRAMAAAAYIDtE9bOQRDITO0SZK5BEZaU7RM7Ij0QCAAAAAAAAAAAAAAAAAAAAAAAAAGgNRUQqaYlEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAKUlIRHIUi0QDAAAANgJIREgvi0Tc7kdEll+LRAIcSEQphYtEAgAAAAAAAAAAAAAAAAAAAAAAAAAd7kxEZIePRAIAAAAAAAAAAAAAAAAAAAAAAAAATJFARGULkEQDAAAAJzlARJQOkERZ9D9EJzSQRFn0P0RFYZBEAwAAAFn0P0RjjpBEJzlARN6ykERMkUBEJbeQRAIAAAAAAAAAAAAAAAAAAAAAAAAAUbFQROZikUQDAAAA7LlQROZikUSsxFBE5mKRREXNUETmYpFEAgAAAAAAAAAAAAAAAAAAAAAAAABK7WBEJbeQRAMAAABwRWFE9bOQRD2KYURjjpBEPYphREVhkEQDAAAAPYphRCc0kERwRWFErA+QRErtYERlC5BEAgAAAAAAAAAAAAAAAAAAAAAAAACgklREZoiPRAIAAAAAAAAAAAAAAAAAAAAAAAAAu2RZRECGi0QDAAAA4ZFZRK5gi0SHfllESC+LRJQ3WUSJFYtEAwAAAKHwWES1+4pEu41YRBEAi0SHUVhERSCLRAIAAAAAAAAAAAAAAAAAAAAAAAAAXsBQROI2j0QCAAAAAAAAAAAAAAAAAAAAAAAAADYvSUQuH4tEAwAAAALzSET6/opEHJBIRLP6ikQpSUhEchSLRAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
},
"~:name": "svg-path",
"~:width": null,
"~:type": "~:path",
"~:svg-attrs": {
},
"~:points": [
{
"~#point": {
"~:x": 749.000032888887,
"~:y": 1095.99998134318
}
},
{
"~#point": {
"~:x": 920.999963100625,
"~:y": 1095.99998134318
}
},
{
"~#point": {
"~:x": 920.999963100625,
"~:y": 1248.99998756293
}
},
{
"~#point": {
"~:x": 749.000032888887,
"~:y": 1248.99998756293
}
}
],
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:svg-transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105993",
"~:parent-id": "~u4c0c14a2-498a-80b9-8007-05d956105992",
"~:svg-viewbox": {
"~#rect": {
"~:x": -0.015998707497255,
"~:y": 24,
"~:width": 511.997475772526,
"~:height": 456.1,
"~:x1": -0.015998707497255,
"~:y1": 24,
"~:x2": 511.981477065028,
"~:y2": 480.1
}
},
"~:svg-defs": {
},
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": null,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 749.000032888887,
"~:y": 1095.99998134318,
"~:width": 171.999930211738,
"~:height": 153.000006219747,
"~:x1": 749.000032888887,
"~:y1": 1095.99998134318,
"~:x2": 920.999963100625,
"~:y2": 1248.99998756293
}
},
"~:fills": [],
"~:flip-x": null,
"~:height": null,
"~:flip-y": null
}
},
"~u4c0c14a2-498a-80b9-8007-05d956105990": {
"~#shape": {
"~:y": 932.999954550034,
"~:hide-fill-on-export": false,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:grow-type": "~:fixed",
"~:hide-in-viewer": false,
"~:name": "Board",
"~:width": 85.9999515116215,
"~:type": "~:frame",
"~:points": [
{
"~#point": {
"~:x": 762.000043265266,
"~:y": 932.999954550034
}
},
{
"~#point": {
"~:x": 847.999994776888,
"~:y": 932.999954550034
}
},
{
"~#point": {
"~:x": 847.999994776888,
"~:y": 1036.99998470998
}
},
{
"~#point": {
"~:x": 762.000043265266,
"~:y": 1036.99998470998
}
}
],
"~:r2": 0,
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:r3": 0,
"~:constraints-v": "~:scale",
"~:constraints-h": "~:scale",
"~:r1": 0,
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105990",
"~:parent-id": "~u4c0c14a2-498a-80b9-8007-05d95610598f",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 762.000043265266,
"~:proportion": 1,
"~:r4": 0,
"~:selrect": {
"~#rect": {
"~:x": 762.000043265266,
"~:y": 932.999954550034,
"~:width": 85.9999515116215,
"~:height": 104.00003015995,
"~:x1": 762.000043265266,
"~:y1": 932.999954550034,
"~:x2": 847.999994776888,
"~:y2": 1036.99998470998
}
},
"~:fills": [
{
"~:fill-color": "#B1B2B5",
"~:fill-opacity": 1
}
],
"~:flip-x": null,
"~:height": 104.00003015995,
"~:flip-y": null,
"~:shapes": [
"~u4c0c14a2-498a-80b9-8007-05d956105991"
]
}
},
"~u4c0c14a2-498a-80b9-8007-05d956105991": {
"~#shape": {
"~:y": null,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:content": {
"~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAADRrTtEAHNmRAMAAADQzTxEAO1kRJyaPkQAAGREAoFARAAAZEQCAAAAAAAAAAAAAAAAAAAAAAAAAP+AfEQAAGREAwAAAGNnfkQAAGREGhqARIDmZEQaqoBEAHNmRAIAAAAAAAAAAAAAAAAAAAAAAAAAGaqORIE5hkQDAAAAsYOPRAFgh0RLbY9EgfaIRBl6jkSBBopEAgAAAAAAAAAAAAAAAAAAAAAAAAA19GJEggaqRAMAAADNzWFEgqaqRDU0YERCA6tEA4FeREIDq0QDAAAAz81cREIDq0Q3NFtEgqaqRM8NWkSCBqpEAgAAAAAAAAAAAAAAAAAAAAAAAADSDSBEgQaKRAMAAAAFIR5EgfaIRJ/6HUQBYIdE0q0fRIE5hkQCAAAAAAAAAAAAAAAAAAAAAAAAANGtO0QAc2ZEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAz01FRIBmcEQDAAAAm3pERIAGcUQBQUREgCZyRGfHRESABnNEAgAAAAAAAAAAAAAAAAAAAAAAAAADIVNEgXaFRAIAAAAAAAAAAAAAAAAAAAAAAAAAN1QuRAEAh0QDAAAA0k0tRIEJh0QEgSxEgXmHRASBLEQBAIhEAwAAAASBLESBhohE0k0tREHziEQ3VC5EAQCJRAIAAAAAAAAAAAAAAAAAAAAAAAAAN1ReRAEAi0QDAAAAz21eRAEAi0TPjV5EAQCLRGenXkQBAItEAgAAAAAAAAAAAAAAAAAAAAAAAACyU4dEAQCJRAMAAADm1odEgfaIREw9iESBhohETD2IRAEAiEQDAAAATD2IRIF5h0Tm1odEwQyHRLJTh0QBAIdEAgAAAAAAAAAAAAAAAAAAAAAAAAAB4WlEgXmFRAIAAAAAAAAAAAAAAAAAAAAAAAAAmTp4RAANc0QDAAAAAcF4RAAtckRlh3hEgAZxRDW0d0QAbXBEAwAAAAHhdkQA029Embp1RADtb0RlB3VEAK1wRAIAAAAAAAAAAAAAAAAAAAAAAAAAA4FeRIGGhEQCAAAAAAAAAAAAAAAAAAAAAAAAAJv6R0SApnBEAwAAAGdHR0SA5m9EASFGRADNb0TPTUVEgGZwRAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
},
"~:name": "svg-path",
"~:width": null,
"~:type": "~:path",
"~:svg-attrs": {
},
"~:points": [
{
"~#point": {
"~:x": 634.000009763648,
"~:y": 912.000036892255
}
},
{
"~#point": {
"~:x": 1145.99693622248,
"~:y": 912.000036892255
}
},
{
"~#point": {
"~:x": 1145.99693622248,
"~:y": 1368.10014563497
}
},
{
"~#point": {
"~:x": 634.000009763648,
"~:y": 1368.10014563497
}
}
],
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:constraints-v": "~:top",
"~:svg-transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:constraints-h": "~:left",
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105991",
"~:parent-id": "~u4c0c14a2-498a-80b9-8007-05d956105990",
"~:svg-viewbox": {
"~#rect": {
"~:x": -0.015998707497255,
"~:y": 24,
"~:width": 511.997475772526,
"~:height": 456.1,
"~:x1": -0.015998707497255,
"~:y1": 24,
"~:x2": 511.981477065028,
"~:y2": 480.1
}
},
"~:svg-defs": {
},
"~:frame-id": "~u4c0c14a2-498a-80b9-8007-05d956105990",
"~:strokes": [],
"~:x": null,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 634.000009763648,
"~:y": 912.000036892255,
"~:width": 511.996926458828,
"~:height": 456.100108742714,
"~:x1": 634.000009763648,
"~:y1": 912.000036892255,
"~:x2": 1145.99693622248,
"~:y2": 1368.10014563497
}
},
"~:fills": [],
"~:flip-x": null,
"~:height": null,
"~:flip-y": null
}
},
"~u4c0c14a2-498a-80b9-8007-05d956105996": {
"~#shape": {
"~:y": 953.999939524329,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:index": 1,
"~:name": "Group",
"~:width": 51.0000002384186,
"~:type": "~:group",
"~:points": [
{
"~#point": {
"~:x": 571.999962133859,
"~:y": 953.999939524329
}
},
{
"~#point": {
"~:x": 622.999962372278,
"~:y": 953.999939524329
}
},
{
"~#point": {
"~:x": 622.999962372278,
"~:y": 1001.99988516489
}
},
{
"~#point": {
"~:x": 571.999962133859,
"~:y": 1001.99988516489
}
}
],
"~:layout-item-h-sizing": "~:fix",
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:layout-item-v-sizing": "~:fix",
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105996",
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 571.999962133859,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 571.999962133859,
"~:y": 953.999939524329,
"~:width": 51.0000002384186,
"~:height": 47.999945640564,
"~:x1": 571.999962133859,
"~:y1": 953.999939524329,
"~:x2": 622.999962372278,
"~:y2": 1001.99988516489
}
},
"~:fills": [],
"~:flip-x": false,
"~:height": 47.999945640564,
"~:flip-y": false,
"~:shapes": [
"~u4c0c14a2-498a-80b9-8007-05d956105997"
]
}
},
"~uc9348056-5090-8016-8006-ff760a55bce2": { "~uc9348056-5090-8016-8006-ff760a55bce2": {
"~#shape": { "~#shape": {
"~:y": null, "~:y": null,
@@ -690,6 +1272,90 @@
"~:flip-y": null "~:flip-y": null
} }
}, },
"~u4c0c14a2-498a-80b9-8007-05d956105997": {
"~#shape": {
"~:y": 953.999939524329,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:grow-type": "~:fixed",
"~:hide-in-viewer": false,
"~:name": "Rectangle",
"~:width": 51.0000002384186,
"~:type": "~:rect",
"~:points": [
{
"~#point": {
"~:x": 571.999962133859,
"~:y": 953.999939524329
}
},
{
"~#point": {
"~:x": 622.999962372278,
"~:y": 953.999939524329
}
},
{
"~#point": {
"~:x": 622.999962372278,
"~:y": 1001.99988516489
}
},
{
"~#point": {
"~:x": 571.999962133859,
"~:y": 1001.99988516489
}
}
],
"~:r2": 0,
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:r3": 0,
"~:r1": 0,
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105997",
"~:parent-id": "~u4c0c14a2-498a-80b9-8007-05d956105996",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 571.999962133859,
"~:proportion": 1,
"~:r4": 0,
"~:selrect": {
"~#rect": {
"~:x": 571.999962133859,
"~:y": 953.999939524329,
"~:width": 51.0000002384186,
"~:height": 47.999945640564,
"~:x1": 571.999962133859,
"~:y1": 953.999939524329,
"~:x2": 622.999962372278,
"~:y2": 1001.99988516489
}
},
"~:fills": [],
"~:flip-x": null,
"~:height": 47.999945640564,
"~:flip-y": null
}
},
"~uc9348056-5090-8016-8006-ff760a55bce3": { "~uc9348056-5090-8016-8006-ff760a55bce3": {
"~#shape": { "~#shape": {
"~:y": null, "~:y": null,
@@ -814,6 +1480,101 @@
"~:flip-y": null "~:flip-y": null
} }
}, },
"~u4c0c14a2-498a-80b9-8007-05d956105994": {
"~#shape": {
"~:y": 1094.99997425023,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:name": "Graphics - SVG",
"~:width": 171.999991246594,
"~:type": "~:group",
"~:svg-attrs": {
},
"~:points": [
{
"~#point": {
"~:x": 508.000014168975,
"~:y": 1094.99997425023
}
},
{
"~#point": {
"~:x": 680.000005415569,
"~:y": 1094.99997425023
}
},
{
"~#point": {
"~:x": 680.000005415569,
"~:y": 1247.99998046997
}
},
{
"~#point": {
"~:x": 508.000014168975,
"~:y": 1247.99998046997
}
}
],
"~:layout-item-h-sizing": "~:fix",
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:exports": [
{
"~:type": "~:svg",
"~:suffix": "",
"~:scale": 1
}
],
"~:layout-item-v-sizing": "~:fix",
"~:constraints-v": "~:scale",
"~:constraints-h": "~:scale",
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105994",
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 508.000014168975,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 508.000014168975,
"~:y": 1094.99997425023,
"~:width": 171.999991246594,
"~:height": 153.000006219747,
"~:x1": 508.000014168975,
"~:y1": 1094.99997425023,
"~:x2": 680.000005415569,
"~:y2": 1247.99998046997
}
},
"~:fills": [],
"~:flip-x": false,
"~:height": 153.000006219747,
"~:flip-y": false,
"~:shapes": [
"~u4c0c14a2-498a-80b9-8007-05d956105995"
]
}
},
"~uc9348056-5090-8016-8006-ff760a55bce0": { "~uc9348056-5090-8016-8006-ff760a55bce0": {
"~#shape": { "~#shape": {
"~:y": null, "~:y": null,
@@ -938,6 +1699,115 @@
"~:flip-y": null "~:flip-y": null
} }
}, },
"~u4c0c14a2-498a-80b9-8007-05d956105995": {
"~#shape": {
"~:y": null,
"~:transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:rotation": 0,
"~:content": {
"~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAABozQhEKkmJRAMAAAAoLglEwAeJRPXICUQA4IhEXGwKRADgiEQCAAAAAAAAAAAAAAAAAAAAAAAAAGKUHkQA4IhEAwAAAMk3H0QA4IhEltIfRKkGiURWMyBEKkmJRAIAAAAAAAAAAAAAAAAAAAAAAAAAWZspRM6oj0QDAAAAjC0qRJkLkER/HipE9ZOQRBl7KUQz75BEAgAAAAAAAAAAAAAAAAAAAAAAAAAT/xVEO6ubRAMAAAAsnBVE5+CbRJISFUQEAJxEX4AURAQAnEQDAAAALO4TRAQAnESSZBNE5+CbRKsBE0Q7q5tEAgAAAAAAAAAAAAAAAAAAAAAAAABKC/9DM++QRAMAAAAwwP1D9ZOQRGSm/UOZC5BEysr+Q86oj0QCAAAAAAAAAAAAAAAAAAAAAAAAAGjNCEQqSYlEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAKQkMRHL0ikQDAAAANsILREgPi0TcrgtElj+LRAPcC0QoZYtEAgAAAAAAAAAAAAAAAAAAAAAAAAAerhBEZGePRAIAAAAAAAAAAAAAAAAAAAAAAAAATVEERGXrj0QDAAAAJ/kDRJTuj0RatANEJhSQRFq0A0RFQZBEAwAAAFq0A0RjbpBEJ/kDRN6SkERNUQREJZeQRAIAAAAAAAAAAAAAAAAAAAAAAAAAUnEUROVCkUQDAAAA7HkUROVCkUSshBRE5UKRREWNFETlQpFEAgAAAAAAAAAAAAAAAAAAAAAAAABKrSREJZeQRAMAAABxBSVE9ZOQRD5KJURjbpBEPkolREVBkEQDAAAAPkolRCYUkERxBSVEq++PREqtJERl649EAgAAAAAAAAAAAAAAAAAAAAAAAACgUhhEZmiPRAIAAAAAAAAAAAAAAAAAAAAAAAAAvCQdREBmi0QDAAAA4lEdRK1Ai0SIPh1ESA+LRJX3HESJ9YpEAwAAAKKwHES124pEu00cRBHgikSIERxERQCLRAIAAAAAAAAAAAAAAAAAAAAAAAAAX4AUROIWj0QCAAAAAAAAAAAAAAAAAAAAAAAAADbvDEQu/4pEAwAAAAOzDET63opEHFAMRLPaikQpCQxEcvSKRAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
},
"~:name": "svg-path",
"~:width": null,
"~:type": "~:path",
"~:svg-attrs": {
},
"~:points": [
{
"~#point": {
"~:x": 508.000014168975,
"~:y": 1094.99997425023
}
},
{
"~#point": {
"~:x": 680.000005415569,
"~:y": 1094.99997425023
}
},
{
"~#point": {
"~:x": 680.000005415569,
"~:y": 1247.99998046997
}
},
{
"~#point": {
"~:x": 508.000014168975,
"~:y": 1247.99998046997
}
}
],
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:svg-transform": {
"~#matrix": {
"~:a": 1,
"~:b": 0,
"~:c": 0,
"~:d": 1,
"~:e": 0,
"~:f": 0
}
},
"~:id": "~u4c0c14a2-498a-80b9-8007-05d956105995",
"~:parent-id": "~u4c0c14a2-498a-80b9-8007-05d956105994",
"~:svg-viewbox": {
"~#rect": {
"~:x": -0.015998707497255,
"~:y": 24,
"~:width": 511.997475772526,
"~:height": 456.1,
"~:x1": -0.015998707497255,
"~:y1": 24,
"~:x2": 511.981477065028,
"~:y2": 480.1
}
},
"~:svg-defs": {
},
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": null,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 508.000014168975,
"~:y": 1094.99997425023,
"~:width": 171.999991246594,
"~:height": 153.000006219747,
"~:x1": 508.000014168975,
"~:y1": 1094.99997425023,
"~:x2": 680.000005415569,
"~:y2": 1247.99998046997
}
},
"~:fills": [],
"~:flip-x": null,
"~:height": null,
"~:flip-y": null
}
},
"~uc9348056-5090-8016-8006-ff760a55bce1": { "~uc9348056-5090-8016-8006-ff760a55bce1": {
"~#shape": { "~#shape": {
"~:y": null, "~:y": null,

BIN
frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-paths-and-svg-attrs-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 40 KiB

17
frontend/src/app/render_wasm/api.cljs
View File

@@ -777,8 +777,19 @@
rotation (get shape :rotation) rotation (get shape :rotation)
transform (get shape :transform) transform (get shape :transform)
;; Groups from imported SVG's can have their own fills ;; If the shape comes from an imported SVG (we know this because
fills (get shape :fills) ;; 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 (let [base-fills (get shape :fills)]
(if (and ^boolean (contains? shape :svg-attrs)
^boolean (or ^boolean (= :svg-raw type)
^boolean (= :group type))
^boolean (empty? base-fills))
[{:fill-color "#000000" :fill-opacity 1}]
base-fills))
strokes (if (= type :group) strokes (if (= type :group)
[] (get shape :strokes)) [] (get shape :strokes))
@@ -815,7 +826,7 @@
(when (and (some? content) (when (and (some? content)
(or (= type :path) (or (= type :path)
(= type :bool))) (= type :bool)))
(when (seq svg-attrs) (when (some? svg-attrs)
(set-shape-path-attrs svg-attrs)) (set-shape-path-attrs svg-attrs))
(set-shape-path-content content)) (set-shape-path-content content))
(when (and (some? content) (= type :svg-raw)) (when (and (some? content) (= type :svg-raw))

15
render-wasm/src/render.rs
View File

@@ -248,6 +248,7 @@ pub(crate) struct RenderState {
// without their own fill definitions. This is necessary because in SVG, a group's `fill` // without their own fill definitions. This is necessary because in SVG, a group's `fill`
// can affect its child elements if they don't specify one themselves. If the planned // can affect its child elements if they don't specify one themselves. If the planned
// migration to remove group-level fills is completed, this code should be removed. // migration to remove group-level fills is completed, this code should be removed.
// Frames contained in groups must reset this nested_fills stack pushing a new empty vector.
pub nested_fills: Vec<Vec<Fill>>, pub nested_fills: Vec<Vec<Fill>>,
pub nested_blurs: Vec<Option<Blur>>, // FIXME: why is this an option? pub nested_blurs: Vec<Option<Blur>>, // FIXME: why is this an option?
pub show_grid: Option<Uuid>, pub show_grid: Option<Uuid>,
@@ -766,7 +767,11 @@ impl RenderState {
if shape.fills.is_empty() if shape.fills.is_empty()
&& !matches!(shape.shape_type, Type::Group(_)) && !matches!(shape.shape_type, Type::Group(_))
&& !shape.svg_attrs.fill_none && !matches!(shape.shape_type, Type::Frame(_))
&& !shape
.svg_attrs
.as_ref()
.is_some_and(|attrs| attrs.fill_none)
{ {
if let Some(fills_to_render) = self.nested_fills.last() { if let Some(fills_to_render) = self.nested_fills.last() {
let fills_to_render = fills_to_render.clone(); let fills_to_render = fills_to_render.clone();
@@ -994,6 +999,10 @@ impl RenderState {
} }
} }
if let Type::Frame(_) = element.shape_type {
self.nested_fills.push(Vec::new());
}
let mut paint = skia::Paint::default(); let mut paint = skia::Paint::default();
paint.set_blend_mode(element.blend_mode().into()); paint.set_blend_mode(element.blend_mode().into());
paint.set_alpha_f(element.opacity()); paint.set_alpha_f(element.opacity());
@@ -1065,12 +1074,10 @@ impl RenderState {
} }
} }
} }
if let Type::Group(_) = element.shape_type {
self.nested_fills.pop();
}
match element.shape_type { match element.shape_type {
Type::Frame(_) | Type::Group(_) => { Type::Frame(_) | Type::Group(_) => {
self.nested_fills.pop();
self.nested_blurs.pop(); self.nested_blurs.pop();
} }
_ => {} _ => {}

14
render-wasm/src/render/strokes.rs
View File

@@ -17,7 +17,7 @@ fn draw_stroke_on_rect(
rect: &Rect, rect: &Rect,
selrect: &Rect, selrect: &Rect,
corners: &Option<Corners>, corners: &Option<Corners>,
svg_attrs: &SvgAttrs, svg_attrs: Option<&SvgAttrs>,
scale: f32, scale: f32,
shadow: Option<&ImageFilter>, shadow: Option<&ImageFilter>,
blur: Option<&ImageFilter>, blur: Option<&ImageFilter>,
@@ -53,7 +53,7 @@ fn draw_stroke_on_circle(
stroke: &Stroke, stroke: &Stroke,
rect: &Rect, rect: &Rect,
selrect: &Rect, selrect: &Rect,
svg_attrs: &SvgAttrs, svg_attrs: Option<&SvgAttrs>,
scale: f32, scale: f32,
shadow: Option<&ImageFilter>, shadow: Option<&ImageFilter>,
blur: Option<&ImageFilter>, blur: Option<&ImageFilter>,
@@ -130,7 +130,7 @@ pub fn draw_stroke_on_path(
path: &Path, path: &Path,
selrect: &Rect, selrect: &Rect,
path_transform: Option<&Matrix>, path_transform: Option<&Matrix>,
svg_attrs: &SvgAttrs, svg_attrs: Option<&SvgAttrs>,
scale: f32, scale: f32,
shadow: Option<&ImageFilter>, shadow: Option<&ImageFilter>,
blur: Option<&ImageFilter>, blur: Option<&ImageFilter>,
@@ -217,7 +217,7 @@ fn handle_stroke_caps(
selrect: &Rect, selrect: &Rect,
canvas: &skia::Canvas, canvas: &skia::Canvas,
is_open: bool, is_open: bool,
svg_attrs: &SvgAttrs, svg_attrs: Option<&SvgAttrs>,
scale: f32, scale: f32,
blur: Option<&ImageFilter>, blur: Option<&ImageFilter>,
antialias: bool, antialias: bool,
@@ -389,7 +389,7 @@ fn draw_image_stroke_in_container(
let canvas = render_state.surfaces.canvas(SurfaceId::Strokes); let canvas = render_state.surfaces.canvas(SurfaceId::Strokes);
let container = &shape.selrect; let container = &shape.selrect;
let path_transform = shape.to_path_transform(); let path_transform = shape.to_path_transform();
let svg_attrs = &shape.svg_attrs; let svg_attrs = shape.svg_attrs.as_ref();
// Save canvas and layer state // Save canvas and layer state
let mut pb = skia::Paint::default(); let mut pb = skia::Paint::default();
@@ -529,7 +529,7 @@ pub fn render(
.canvas(surface_id.unwrap_or(surface_id.unwrap_or(SurfaceId::Strokes))); .canvas(surface_id.unwrap_or(surface_id.unwrap_or(SurfaceId::Strokes)));
let selrect = shape.selrect; let selrect = shape.selrect;
let path_transform = shape.to_path_transform(); let path_transform = shape.to_path_transform();
let svg_attrs = &shape.svg_attrs; let svg_attrs = shape.svg_attrs.as_ref();
if !matches!(shape.shape_type, Type::Text(_)) if !matches!(shape.shape_type, Type::Text(_))
&& shadow.is_none() && shadow.is_none()
@@ -603,7 +603,7 @@ pub fn render_text_paths(
.surfaces .surfaces
.canvas(surface_id.unwrap_or(SurfaceId::Strokes)); .canvas(surface_id.unwrap_or(SurfaceId::Strokes));
let selrect = &shape.selrect; let selrect = &shape.selrect;
let svg_attrs = &shape.svg_attrs; let svg_attrs = shape.svg_attrs.as_ref();
let mut paint: skia_safe::Handle<_> = let mut paint: skia_safe::Handle<_> =
stroke.to_text_stroked_paint(false, selrect, svg_attrs, scale, antialias); stroke.to_text_stroked_paint(false, selrect, svg_attrs, scale, antialias);

8
render-wasm/src/shapes.rs
View File

@@ -176,7 +176,7 @@ pub struct Shape {
pub opacity: f32, pub opacity: f32,
pub hidden: bool, pub hidden: bool,
pub svg: Option<skia::svg::Dom>, pub svg: Option<skia::svg::Dom>,
pub svg_attrs: SvgAttrs, pub svg_attrs: Option<SvgAttrs>,
pub shadows: Vec<Shadow>, pub shadows: Vec<Shadow>,
pub layout_item: Option<LayoutItem>, pub layout_item: Option<LayoutItem>,
pub extrect: OnceCell<math::Rect>, pub extrect: OnceCell<math::Rect>,
@@ -203,7 +203,7 @@ impl Shape {
hidden: false, hidden: false,
blur: None, blur: None,
svg: None, svg: None,
svg_attrs: SvgAttrs::default(), svg_attrs: None,
shadows: Vec::with_capacity(1), shadows: Vec::with_capacity(1),
layout_item: None, layout_item: None,
extrect: OnceCell::new(), extrect: OnceCell::new(),
@@ -1093,9 +1093,11 @@ impl Shape {
if let Some(path_transform) = self.to_path_transform() { if let Some(path_transform) = self.to_path_transform() {
skia_path.transform(&path_transform); skia_path.transform(&path_transform);
} }
if self.svg_attrs.fill_rule == FillRule::Evenodd { if let Some(svg_attrs) = &self.svg_attrs {
if svg_attrs.fill_rule == FillRule::Evenodd {
skia_path.set_fill_type(skia::PathFillType::EvenOdd); skia_path.set_fill_type(skia::PathFillType::EvenOdd);
} }
}
Some(skia_path) Some(skia_path)
} else { } else {
None None

8
render-wasm/src/shapes/strokes.rs
View File

@@ -161,7 +161,7 @@ impl Stroke {
pub fn to_paint( pub fn to_paint(
&self, &self,
rect: &Rect, rect: &Rect,
svg_attrs: &SvgAttrs, svg_attrs: Option<&SvgAttrs>,
scale: f32, scale: f32,
antialias: bool, antialias: bool,
) -> skia::Paint { ) -> skia::Paint {
@@ -177,6 +177,7 @@ impl Stroke {
paint.set_stroke_width(width); paint.set_stroke_width(width);
paint.set_anti_alias(antialias); paint.set_anti_alias(antialias);
if let Some(svg_attrs) = svg_attrs {
if svg_attrs.stroke_linecap == StrokeLineCap::Round { if svg_attrs.stroke_linecap == StrokeLineCap::Round {
paint.set_stroke_cap(skia::paint::Cap::Round); paint.set_stroke_cap(skia::paint::Cap::Round);
} }
@@ -184,6 +185,7 @@ impl Stroke {
if svg_attrs.stroke_linejoin == StrokeLineJoin::Round { if svg_attrs.stroke_linejoin == StrokeLineJoin::Round {
paint.set_stroke_join(skia::paint::Join::Round); paint.set_stroke_join(skia::paint::Join::Round);
} }
}
if self.style != StrokeStyle::Solid { if self.style != StrokeStyle::Solid {
let path_effect = match self.style { let path_effect = match self.style {
@@ -227,7 +229,7 @@ impl Stroke {
&self, &self,
is_open: bool, is_open: bool,
rect: &Rect, rect: &Rect,
svg_attrs: &SvgAttrs, svg_attrs: Option<&SvgAttrs>,
scale: f32, scale: f32,
antialias: bool, antialias: bool,
) -> skia::Paint { ) -> skia::Paint {
@@ -251,7 +253,7 @@ impl Stroke {
&self, &self,
is_open: bool, is_open: bool,
rect: &Rect, rect: &Rect,
svg_attrs: &SvgAttrs, svg_attrs: Option<&SvgAttrs>,
scale: f32, scale: f32,
antialias: bool, antialias: bool,
) -> skia::Paint { ) -> skia::Paint {

18
render-wasm/src/shapes/svg_attrs.rs
View File

@@ -1,3 +1,5 @@
use crate::wasm::svg_attrs::{RawFillRule, RawStrokeLineCap, RawStrokeLineJoin};
#[derive(Debug, Clone, PartialEq, Copy, Default)] #[derive(Debug, Clone, PartialEq, Copy, Default)]
pub enum FillRule { pub enum FillRule {
#[default] #[default]
@@ -47,3 +49,19 @@ impl Default for SvgAttrs {
} }
} }
} }
impl SvgAttrs {
pub fn from_raw(
fill_rule: u8,
stroke_linecap: u8,
stroke_linejoin: u8,
fill_none: bool,
) -> Self {
Self {
fill_rule: RawFillRule::from(fill_rule).into(),
stroke_linecap: RawStrokeLineCap::from(stroke_linecap).into(),
stroke_linejoin: RawStrokeLineJoin::from(stroke_linejoin).into(),
fill_none,
}
}
}

15
render-wasm/src/wasm/svg_attrs.rs
View File

@@ -1,6 +1,6 @@
use macros::ToJs; use macros::ToJs;
use crate::shapes::{FillRule, StrokeLineCap, StrokeLineJoin}; use crate::shapes::{FillRule, StrokeLineCap, StrokeLineJoin, SvgAttrs};
use crate::{with_current_shape_mut, STATE}; use crate::{with_current_shape_mut, STATE};
#[derive(PartialEq, ToJs)] #[derive(PartialEq, ToJs)]
@@ -84,12 +84,11 @@ pub extern "C" fn set_shape_svg_attrs(
fill_none: bool, fill_none: bool,
) { ) {
with_current_shape_mut!(state, |shape: &mut Shape| { with_current_shape_mut!(state, |shape: &mut Shape| {
let fill_rule = RawFillRule::from(fill_rule); shape.svg_attrs = Some(SvgAttrs::from_raw(
shape.svg_attrs.fill_rule = fill_rule.into(); fill_rule,
let stroke_linecap = RawStrokeLineCap::from(stroke_linecap); stroke_linecap,
shape.svg_attrs.stroke_linecap = stroke_linecap.into(); stroke_linejoin,
let stroke_linejoin = RawStrokeLineJoin::from(stroke_linejoin); fill_none,
shape.svg_attrs.stroke_linejoin = stroke_linejoin.into(); ));
shape.svg_attrs.fill_none = fill_none;
}); });
} }