diff --git a/frontend/playwright/data/render-wasm/get-solid-shadows.json b/frontend/playwright/data/render-wasm/get-solid-shadows.json new file mode 100644 index 0000000000..85e5f2d855 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-solid-shadows.json @@ -0,0 +1,1161 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~ueba8fa2e-4140-8084-8005-448635d7a724", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 19", + "~:revn": 1, + "~:modified-at": "~m1771575061911", + "~:vern": 0, + "~:id": "~u93113137-fe66-80fb-8007-99ca9fd96841", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data", + "0013-fix-component-path", + "0013-clear-invalid-strokes-and-fills", + "0014-fix-tokens-lib-duplicate-ids", + "0014-clear-components-nil-objects", + "0015-fix-text-attrs-blank-strings", + "0015-clean-shadow-color", + "0016-copy-fills-from-position-data-to-text-node" + ] + }, + "~:version": 67, + "~:project-id": "~ueba8fa2e-4140-8084-8005-448635da32b4", + "~:created-at": "~m1771575057253", + "~:backend": "legacy-db", + "~:data": { + "~:pages": [ + "~u93113137-fe66-80fb-8007-99ca9fd96842" + ], + "~:pages-index": { + "~u93113137-fe66-80fb-8007-99ca9fd96842": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 0.01 + } + } + ], + "~: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": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~uf6d6a19f-9b44-8006-8007-99caa15c11d0", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d1", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d2", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d3", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d4", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d5", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d6", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d7", + "~uf6d6a19f-9b44-8006-8007-99caa15c11d8" + ] + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d3": { + "~#shape": { + "~:y": 316, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 24.000014555722, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 376.999997388182, + "~:y": 316 + } + }, + { + "~#point": { + "~:x": 401.000011943904, + "~:y": 316 + } + }, + { + "~#point": { + "~:x": 401.000011943904, + "~:y": 340.000015617202 + } + }, + { + "~#point": { + "~:x": 376.999997388182, + "~:y": 340.000015617202 + } + } + ], + "~:r2": 10, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 10, + "~:r1": 10, + "~:id": "~uf6d6a19f-9b44-8006-8007-99caa15c11d3", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 376.999997388182, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~ua28e6acc-48c7-80d6-8007-988d7ce4c3ba", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 2, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 10, + "~:selrect": { + "~#rect": { + "~:x": 376.999997388182, + "~:y": 316, + "~:width": 24.000014555722, + "~:height": 24.0000156172018, + "~:x1": 376.999997388182, + "~:y1": 316, + "~:x2": 401.000011943904, + "~:y2": 340.000015617202 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 24.0000156172018, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d2": { + "~#shape": { + "~:y": 372.999997713929, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 24.0000145557221, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 310.999955443065, + "~:y": 372.999997713929 + } + }, + { + "~#point": { + "~:x": 334.999969998787, + "~:y": 372.999997713929 + } + }, + { + "~#point": { + "~:x": 334.999969998787, + "~:y": 396.99998162146 + } + }, + { + "~#point": { + "~:x": 310.999955443065, + "~:y": 396.99998162146 + } + } + ], + "~: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": "~uf6d6a19f-9b44-8006-8007-99caa15c11d2", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 310.999955443065, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~ua28e6acc-48c7-80d6-8007-988d7ce4c3ba", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 0, + "~:spread": 4, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 310.999955443065, + "~:y": 372.999997713929, + "~:width": 24.0000145557221, + "~:height": 23.9999839075303, + "~:x1": 310.999955443065, + "~:y1": 372.999997713929, + "~:x2": 334.999969998787, + "~:y2": 396.99998162146 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 23.9999839075303, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d1": { + "~#shape": { + "~:y": 343.00000969424, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 24.0000145557221, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 310.999978889336, + "~:y": 343.00000969424 + } + }, + { + "~#point": { + "~:x": 334.999993445058, + "~:y": 343.00000969424 + } + }, + { + "~#point": { + "~:x": 334.999993445058, + "~:y": 367.000025311442 + } + }, + { + "~#point": { + "~:x": 310.999978889336, + "~:y": 367.000025311442 + } + } + ], + "~: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": "~uf6d6a19f-9b44-8006-8007-99caa15c11d1", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 310.999978889336, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~ua28e6acc-48c7-80d6-8007-988d7ce4c3ba", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 0, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 310.999978889336, + "~:y": 343.00000969424, + "~:width": 24.0000145557221, + "~:height": 24.0000156172019, + "~:x1": 310.999978889336, + "~:y1": 343.00000969424, + "~:x2": 334.999993445058, + "~:y2": 367.000025311442 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 24.0000156172019, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d0": { + "~#shape": { + "~:y": 316.99997126302, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 24.000014555722, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 310.999980822839, + "~:y": 316.99997126302 + } + }, + { + "~#point": { + "~:x": 334.999995378561, + "~:y": 316.99997126302 + } + }, + { + "~#point": { + "~:x": 334.999995378561, + "~:y": 340.99995517055 + } + }, + { + "~#point": { + "~:x": 310.999980822839, + "~:y": 340.99995517055 + } + } + ], + "~: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": "~uf6d6a19f-9b44-8006-8007-99caa15c11d0", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 310.999980822839, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~ua28e6acc-48c7-80d6-8007-988d7ce4c3ba", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 2, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 310.999980822839, + "~:y": 316.99997126302, + "~:width": 24.000014555722, + "~:height": 23.9999839075304, + "~:x1": 310.999980822839, + "~:y1": 316.99997126302, + "~:x2": 334.999995378561, + "~:y2": 340.99995517055 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 23.9999839075304, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d7": { + "~#shape": { + "~:y": 430.000005806352, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Ellipse", + "~:width": 24.0000147255407, + "~:type": "~:circle", + "~:points": [ + { + "~#point": { + "~:x": 310.999970438785, + "~:y": 430.000005806352 + } + }, + { + "~#point": { + "~:x": 334.999985164326, + "~:y": 430.000005806352 + } + }, + { + "~#point": { + "~:x": 334.999985164326, + "~:y": 453.999988623858 + } + }, + { + "~#point": { + "~:x": 310.999970438785, + "~:y": 453.999988623858 + } + } + ], + "~: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": "~uf6d6a19f-9b44-8006-8007-99caa15c11d7", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 310.999970438785, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u9c6321b5-aeab-809f-8007-971f9e232191", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 0, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 310.999970438785, + "~:y": 430.000005806352, + "~:width": 24.0000147255407, + "~:height": 23.9999828175062, + "~:x1": 310.999970438785, + "~:y1": 430.000005806352, + "~:x2": 334.999985164326, + "~:y2": 453.999988623858 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 23.9999828175062, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d6": { + "~#shape": { + "~:y": 403.999982791028, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Ellipse", + "~:width": 24.0000147255407, + "~:type": "~:circle", + "~:points": [ + { + "~#point": { + "~:x": 310, + "~:y": 403.999982791028 + } + }, + { + "~#point": { + "~:x": 334.000014725541, + "~:y": 403.999982791028 + } + }, + { + "~#point": { + "~:x": 334.000014725541, + "~:y": 428.000027358944 + } + }, + { + "~#point": { + "~:x": 310, + "~:y": 428.000027358944 + } + } + ], + "~: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": "~uf6d6a19f-9b44-8006-8007-99caa15c11d6", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 310, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u9c6321b5-aeab-809f-8007-971f9e232191", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 2, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 310, + "~:y": 403.999982791028, + "~:width": 24.0000147255407, + "~:height": 24.0000445679165, + "~:x1": 310, + "~:y1": 403.999982791028, + "~:x2": 334.000014725541, + "~:y2": 428.000027358944 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 24.0000445679165, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d5": { + "~#shape": { + "~:y": 373.000002389236, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 23.9999544742418, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 376.999977821987, + "~:y": 373.000002389236 + } + }, + { + "~#point": { + "~:x": 400.999932296229, + "~:y": 373.000002389236 + } + }, + { + "~#point": { + "~:x": 400.999932296229, + "~:y": 396.999986296766 + } + }, + { + "~#point": { + "~:x": 376.999977821987, + "~:y": 396.999986296766 + } + } + ], + "~:r2": 10, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 10, + "~:r1": 10, + "~:id": "~uf6d6a19f-9b44-8006-8007-99caa15c11d5", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 376.999977821987, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~ua28e6acc-48c7-80d6-8007-988d7ce4c3ba", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 0, + "~:spread": 3, + "~:hidden": false + } + ], + "~:r4": 10, + "~:selrect": { + "~#rect": { + "~:x": 376.999977821987, + "~:y": 373.000002389236, + "~:width": 23.9999544742418, + "~:height": 23.9999839075304, + "~:x1": 376.999977821987, + "~:y1": 373.000002389236, + "~:x2": 400.999932296229, + "~:y2": 396.999986296766 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 23.9999839075304, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d4": { + "~#shape": { + "~:y": 343.000003602484, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 23.9999605115606, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 376.999989391033, + "~:y": 343.000003602484 + } + }, + { + "~#point": { + "~:x": 400.999949902594, + "~:y": 343.000003602484 + } + }, + { + "~#point": { + "~:x": 400.999949902594, + "~:y": 366.999987510014 + } + }, + { + "~#point": { + "~:x": 376.999989391033, + "~:y": 366.999987510014 + } + } + ], + "~:r2": 10, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 10, + "~:r1": 10, + "~:id": "~uf6d6a19f-9b44-8006-8007-99caa15c11d4", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 376.999989391033, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~ua28e6acc-48c7-80d6-8007-988d7ce4c3ba", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 0, + "~:spread": 0, + "~:hidden": false + } + ], + "~:r4": 10, + "~:selrect": { + "~#rect": { + "~:x": 376.999989391033, + "~:y": 343.000003602484, + "~:width": 23.9999605115606, + "~:height": 23.9999839075304, + "~:x1": 376.999989391033, + "~:y1": 343.000003602484, + "~:x2": 400.999949902594, + "~:y2": 366.999987510014 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 23.9999839075304, + "~:flip-y": null + } + }, + "~uf6d6a19f-9b44-8006-8007-99caa15c11d8": { + "~#shape": { + "~:y": 462.000000956476, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Ellipse", + "~:width": 24.0000147255407, + "~:type": "~:circle", + "~:points": [ + { + "~#point": { + "~:x": 312.999977686074, + "~:y": 462.000000956476 + } + }, + { + "~#point": { + "~:x": 336.999992411615, + "~:y": 462.000000956476 + } + }, + { + "~#point": { + "~:x": 336.999992411615, + "~:y": 486.000015483653 + } + }, + { + "~#point": { + "~:x": 312.999977686074, + "~:y": 486.000015483653 + } + } + ], + "~: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": "~uf6d6a19f-9b44-8006-8007-99caa15c11d8", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 312.999977686074, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u9c6321b5-aeab-809f-8007-971f9e232191", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#de0808", + "~:opacity": 1 + }, + "~:offset-x": 30, + "~:offset-y": 0, + "~:blur": 0, + "~:spread": 3, + "~:hidden": false + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 312.999977686074, + "~:y": 462.000000956476, + "~:width": 24.0000147255407, + "~:height": 24.0000145271764, + "~:x1": 312.999977686074, + "~:y1": 462.000000956476, + "~:x2": 336.999992411615, + "~:y2": 486.000015483653 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 24.0000145271764, + "~:flip-y": null + } + } + }, + "~:id": "~u93113137-fe66-80fb-8007-99ca9fd96842", + "~:name": "Page 1" + } + }, + "~:id": "~u93113137-fe66-80fb-8007-99ca9fd96841", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/get-solid-strokes-shadows.json b/frontend/playwright/data/render-wasm/get-solid-strokes-shadows.json new file mode 100644 index 0000000000..070e659b01 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-solid-strokes-shadows.json @@ -0,0 +1,2826 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~ueba8fa2e-4140-8084-8005-448635d7a724", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 21", + "~:revn": 1, + "~:modified-at": "~m1771576427744", + "~:vern": 0, + "~:id": "~u93113137-fe66-80fb-8007-99cfd5cbf361", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data", + "0013-fix-component-path", + "0013-clear-invalid-strokes-and-fills", + "0014-fix-tokens-lib-duplicate-ids", + "0014-clear-components-nil-objects", + "0015-fix-text-attrs-blank-strings", + "0015-clean-shadow-color", + "0016-copy-fills-from-position-data-to-text-node" + ] + }, + "~:version": 67, + "~:project-id": "~ueba8fa2e-4140-8084-8005-448635da32b4", + "~:created-at": "~m1771576423215", + "~:backend": "legacy-db", + "~:data": { + "~:pages": [ + "~u93113137-fe66-80fb-8007-99cfd5cbf362" + ], + "~:pages-index": { + "~u93113137-fe66-80fb-8007-99cfd5cbf362": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 0.01 + } + } + ], + "~: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": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~ue52394cc-813d-80b9-8007-99cfd71e02c8", + "~ue52394cc-813d-80b9-8007-99cfd71e02c9", + "~ue52394cc-813d-80b9-8007-99cfd71e02ca", + "~ue52394cc-813d-80b9-8007-99cfd71e02cb", + "~ue52394cc-813d-80b9-8007-99cfd71e02cc", + "~ue52394cc-813d-80b9-8007-99cfd71e02cd", + "~ue52394cc-813d-80b9-8007-99cfd71e02ce", + "~ue52394cc-813d-80b9-8007-99cfd71e02cf", + "~ue52394cc-813d-80b9-8007-99cfd71e02d0", + "~ue52394cc-813d-80b9-8007-99cfd71e02d1", + "~ue52394cc-813d-80b9-8007-99cfd71e02d2", + "~ue52394cc-813d-80b9-8007-99cfd71e02d3", + "~ue52394cc-813d-80b9-8007-99cfd71e02d4", + "~ue52394cc-813d-80b9-8007-99cfd71e02d5", + "~ue52394cc-813d-80b9-8007-99cfd71e02d6", + "~ue52394cc-813d-80b9-8007-99cfd71e02d7", + "~ue52394cc-813d-80b9-8007-99cfd71e02d8", + "~ue52394cc-813d-80b9-8007-99cfd71e02d9", + "~ue52394cc-813d-80b9-8007-99cfd71e02da", + "~ue52394cc-813d-80b9-8007-99cfd71e02db", + "~ue52394cc-813d-80b9-8007-99cfd71e02dc", + "~ue52394cc-813d-80b9-8007-99cfd71e02dd", + "~ue52394cc-813d-80b9-8007-99cfd71e02de", + "~ue52394cc-813d-80b9-8007-99cfd71e02df" + ] + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02da": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAABcMBFAABQRAIAAAAAAAAAAAAAAAAAAAAAAAAAAPjTRQCAukMCAAAAAAAAAAAAAAAAAAAAAAAAAADQ1EX//4tE" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 6158.00012798179, + "~:y": 373 + } + }, + { + "~#point": { + "~:x": 6810.00012798179, + "~:y": 373 + } + }, + { + "~#point": { + "~:x": 6810.00012798179, + "~:y": 1120 + } + }, + { + "~#point": { + "~:x": 6158.00012798179, + "~:y": 1120 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02da", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 6158.00012798179, + "~:y": 373, + "~:width": 652, + "~:height": 747, + "~:x1": 6158.00012798179, + "~:y1": 373, + "~:x2": 6810.00012798179, + "~:y2": 1120 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02db": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 0.998897352755765, + "~:b": -0.0469476161005346, + "~:c": 0.0469476161005349, + "~:d": 0.998897352755766, + "~:e": 4.54747350886464e-13, + "~:f": 0 + } + }, + "~:rotation": 357.309110550245, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAACmVsBF1TfxRAMAAABYJsJFLZ/rRIC/3UUBgLFEgL/dRQGAsUQCAAAAAAAAAAAAAAAAAAAAAAAAADj63kVZtRtFAgAAAAAAAAAAAAAAAAAAAAAAAACmVsBF1TfxRA==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 6133.00018961173, + "~:y": 1465.25750392213 + } + }, + { + "~#point": { + "~:x": 7095.93725783569, + "~:y": 1420.00000105336 + } + }, + { + "~#point": { + "~:x": 7146.26510334951, + "~:y": 2490.81798563435 + } + }, + { + "~#point": { + "~:x": 6183.32803512555, + "~:y": 2536.07548850312 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 0.998897352755766, + "~:b": 0.0469476161005346, + "~:c": -0.0469476161005349, + "~:d": 0.998897352755766, + "~:e": -4.54245924973187e-13, + "~:f": -2.13493040521528e-14 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02db", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 6157.63263638579, + "~:y": 1442.03773355246, + "~:width": 964.000020189657, + "~:height": 1072.00002245157, + "~:x1": 6157.63263638579, + "~:y1": 1442.03773355246, + "~:x2": 7121.63265657545, + "~:y2": 2514.03775600403 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d8": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD/B+1FAQBcRAIAAAAAAAAAAAAAAAAAAAAAAAAA/0cARgCA0kMCAAAAAAAAAAAAAAAAAAAAAAAAAP+zAEb//5FE" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 7584.99974837637, + "~:y": 421.000030517579 + } + }, + { + "~#point": { + "~:x": 8236.99974837637, + "~:y": 421.000030517579 + } + }, + { + "~#point": { + "~:x": 8236.99974837637, + "~:y": 1168.00003051758 + } + }, + { + "~#point": { + "~:x": 7584.99974837637, + "~:y": 1168.00003051758 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d8", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 7584.99974837637, + "~:y": 421.000030517579, + "~:width": 652, + "~:height": 747, + "~:x1": 7584.99974837637, + "~:y1": 421.000030517579, + "~:x2": 8236.99974837637, + "~:y2": 1168.00003051758 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d9": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD/B+1F/x/nRAMAAAD/5+5F/9/hRP+TBUb//6xE/5MFRv//rEQCAAAAAAAAAAAAAAAAAAAAAAAAAP9nBUb/fxlFAgAAAAAAAAAAAAAAAAAAAAAAAAD/B+1F/x/nRA==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 7584.99974837637, + "~:y": 1384 + } + }, + { + "~#point": { + "~:x": 8548.99974837637, + "~:y": 1384 + } + }, + { + "~#point": { + "~:x": 8548.99974837637, + "~:y": 2456 + } + }, + { + "~#point": { + "~:x": 7584.99974837637, + "~:y": 2456 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d9", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 7584.99974837637, + "~:y": 1384, + "~:width": 964, + "~:height": 1072, + "~:x1": 7584.99974837637, + "~:y1": 1384, + "~:x2": 8548.99974837637, + "~:y2": 2456 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02de": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAABcMBFALBMRQIAAAAAAAAAAAAAAAAAAAAAAAAAAPjTRf//L0UCAAAAAAAAAAAAAAAAAAAAAAAAAADQ1EUAsF5F" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 6158.00012557245, + "~:y": 2815.99998762242 + } + }, + { + "~#point": { + "~:x": 6810.00012557245, + "~:y": 2815.99998762242 + } + }, + { + "~#point": { + "~:x": 6810.00012557245, + "~:y": 3562.99998762242 + } + }, + { + "~#point": { + "~:x": 6158.00012557245, + "~:y": 3562.99998762242 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02de", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 6158.00012557245, + "~:y": 2815.99998762242, + "~:width": 652, + "~:height": 747, + "~:x1": 6158.00012557245, + "~:y1": 2815.99998762242, + "~:x2": 6810.00012557245, + "~:y2": 3562.99998762242 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02df": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAABcMBFAPCHRQMAAAABUMJFAKCGRQCQ3kUA0HJFAJDeRQDQckUCAAAAAAAAAAAAAAAAAAAAAAAAAAA43kUA6JpFAgAAAAAAAAAAAAAAAAAAAAAAAAABcMBFAPCHRQ==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 6158.00012557245, + "~:y": 3884.99995710485 + } + }, + { + "~#point": { + "~:x": 7122.00012557245, + "~:y": 3884.99995710485 + } + }, + { + "~#point": { + "~:x": 7122.00012557245, + "~:y": 4956.99995710485 + } + }, + { + "~#point": { + "~:x": 6158.00012557245, + "~:y": 4956.99995710485 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02df", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 6158.00012557245, + "~:y": 3884.99995710485, + "~:width": 964, + "~:height": 1072, + "~:x1": 6158.00012557245, + "~:y1": 3884.99995710485, + "~:x2": 7122.00012557245, + "~:y2": 4956.99995710485 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02dc": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD/B+1FALBPRQIAAAAAAAAAAAAAAAAAAAAAAAAA/0cARv//MkUCAAAAAAAAAAAAAAAAAAAAAAAAAP+zAEYAsGFF" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 7584.99974596703, + "~:y": 2864.00001814 + } + }, + { + "~#point": { + "~:x": 8236.99974596703, + "~:y": 2864.00001814 + } + }, + { + "~#point": { + "~:x": 8236.99974596703, + "~:y": 3611.00001814 + } + }, + { + "~#point": { + "~:x": 7584.99974596703, + "~:y": 3611.00001814 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02dc", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 7584.99974596703, + "~:y": 2864.00001814, + "~:width": 652, + "~:height": 747, + "~:x1": 7584.99974596703, + "~:y1": 2864.00001814, + "~:x2": 8236.99974596703, + "~:y2": 3611.00001814 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02dd": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD/B+1FACCGRQMAAAD/5+5FANCERf+TBUYAMG9F/5MFRgAwb0UCAAAAAAAAAAAAAAAAAAAAAAAAAP9nBUYAGJlFAgAAAAAAAAAAAAAAAAAAAAAAAAD/B+1FACCGRQ==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 7584.99974596703, + "~:y": 3826.99989606969 + } + }, + { + "~#point": { + "~:x": 8548.99974596703, + "~:y": 3826.99989606969 + } + }, + { + "~#point": { + "~:x": 8548.99974596703, + "~:y": 4898.99989606969 + } + }, + { + "~#point": { + "~:x": 7584.99974596703, + "~:y": 4898.99989606969 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02dd", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 7584.99974596703, + "~:y": 3826.99989606969, + "~:width": 964, + "~:height": 1072, + "~:x1": 7584.99974596703, + "~:y1": 3826.99989606969, + "~:x2": 8548.99974596703, + "~:y2": 4898.99989606969 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d2": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAMExF/79hRAIAAAAAAAAAAAAAAAAAAAAAAAAAAEBzRf//3UMCAAAAAAAAAAAAAAAAAAAAAAAAAADwdEX/35RE" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 3266.99998057661, + "~:y": 443.999986701422 + } + }, + { + "~#point": { + "~:x": 3918.99998057661, + "~:y": 443.999986701422 + } + }, + { + "~#point": { + "~:x": 3918.99998057661, + "~:y": 1190.99998670142 + } + }, + { + "~#point": { + "~:x": 3266.99998057661, + "~:y": 1190.99998670142 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d2", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 3266.99998057661, + "~:y": 443.999986701422, + "~:width": 652, + "~:height": 747, + "~:x1": 3266.99998057661, + "~:y1": 443.999986701422, + "~:x2": 3918.99998057661, + "~:y2": 1190.99998670142 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d3": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 0.998897352755765, + "~:b": -0.0469476161005346, + "~:c": 0.0469476161005349, + "~:d": 0.998897352755766, + "~:e": 4.54747350886464e-13, + "~:f": 0 + } + }, + "~:rotation": 357.309110550245, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAABL/UtF1hf6RAMAAACvnE9FLn/0RH9ng0UBYLpEf2eDRQFgukQCAAAAAAAAAAAAAAAAAAAAAAAAADeihEVaJSBFAgAAAAAAAAAAAAAAAAAAAAAAAABL/UtF1hf6RA==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 3241.9999811714, + "~:y": 1536.25758217629 + } + }, + { + "~#point": { + "~:x": 4204.93704939535, + "~:y": 1491.00007930752 + } + }, + { + "~#point": { + "~:x": 4255.26489490917, + "~:y": 2561.81806388851 + } + }, + { + "~#point": { + "~:x": 3292.32782668522, + "~:y": 2607.07556675728 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 0.998897352755766, + "~:b": 0.0469476161005346, + "~:c": -0.0469476161005349, + "~:d": 0.998897352755766, + "~:e": -4.54245924973187e-13, + "~:f": -2.13493040521528e-14 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d3", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 3266.63242794546, + "~:y": 1513.03781180661, + "~:width": 964.000020189657, + "~:height": 1072.00002245157, + "~:x1": 3266.63242794546, + "~:y1": 1513.03781180661, + "~:x2": 4230.63244813512, + "~:y2": 2585.03783425818 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d0": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAMIxFAMBhRAIAAAAAAAAAAAAAAAAAAAAAAAAAALifRf//3UMCAAAAAAAAAAAAAAAAAAAAAAAAAACQoEUA4JRE" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 4486.00005873486, + "~:y": 443.999986701423 + } + }, + { + "~#point": { + "~:x": 5138.00005873486, + "~:y": 443.999986701423 + } + }, + { + "~#point": { + "~:x": 5138.00005873486, + "~:y": 1190.99998670142 + } + }, + { + "~#point": { + "~:x": 4486.00005873486, + "~:y": 1190.99998670142 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d0", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 4486.00005873486, + "~:y": 443.999986701423, + "~:width": 652, + "~:height": 747, + "~:x1": 4486.00005873486, + "~:y1": 443.999986701423, + "~:x2": 5138.00005873486, + "~:y2": 1190.99998670142 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d1": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAMIxFAADqRAMAAAAAEI5FAMDkRABQqkUA4K9EAFCqRQDgr0QCAAAAAAAAAAAAAAAAAAAAAAAAAAD4qUUA8BpFAgAAAAAAAAAAAAAAAAAAAAAAAAAAMIxFAADqRA==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 4486.00005873486, + "~:y": 1407.00004773658 + } + }, + { + "~#point": { + "~:x": 5450.00005873486, + "~:y": 1407.00004773658 + } + }, + { + "~#point": { + "~:x": 5450.00005873486, + "~:y": 2479.00004773658 + } + }, + { + "~#point": { + "~:x": 4486.00005873486, + "~:y": 2479.00004773658 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d1", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 4486.00005873486, + "~:y": 1407.00004773658, + "~:width": 964, + "~:height": 1072, + "~:x1": 4486.00005873486, + "~:y1": 1407.00004773658, + "~:x2": 5450.00005873486, + "~:y2": 2479.00004773658 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d6": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAMExFACBRRQIAAAAAAAAAAAAAAAAAAAAAAAAAAEBzRQBwNEUCAAAAAAAAAAAAAAAAAAAAAAAAAADwdEUAIGNF" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 3266.99997816727, + "~:y": 2887.00009639416 + } + }, + { + "~#point": { + "~:x": 3918.99997816727, + "~:y": 2887.00009639416 + } + }, + { + "~#point": { + "~:x": 3918.99997816727, + "~:y": 3634.00009639416 + } + }, + { + "~#point": { + "~:x": 3266.99997816727, + "~:y": 3634.00009639416 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d6", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 3266.99997816727, + "~:y": 2887.00009639416, + "~:width": 652, + "~:height": 747, + "~:x1": 3266.99997816727, + "~:y1": 2887.00009639416, + "~:x2": 3918.99997816727, + "~:y2": 3634.00009639416 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d7": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAMExFACiKRQMAAAAA8E9FANiIRQA4hEUAQHdFADiERQBAd0UCAAAAAAAAAAAAAAAAAAAAAAAAAADgg0UAIJ1FAgAAAAAAAAAAAAAAAAAAAAAAAAAAMExFACiKRQ==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 3266.99997816727, + "~:y": 3956.00006587658 + } + }, + { + "~#point": { + "~:x": 4230.99997816727, + "~:y": 3956.00006587658 + } + }, + { + "~#point": { + "~:x": 4230.99997816727, + "~:y": 5028.00006587658 + } + }, + { + "~#point": { + "~:x": 3266.99997816727, + "~:y": 5028.00006587658 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d7", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 3266.99997816727, + "~:y": 3956.00006587658, + "~:width": 964, + "~:height": 1072, + "~:x1": 3266.99997816727, + "~:y1": 3956.00006587658, + "~:x2": 4230.99997816727, + "~:y2": 5028.00006587658 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d4": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAMIxFACBRRQIAAAAAAAAAAAAAAAAAAAAAAAAAALifRQBwNEUCAAAAAAAAAAAAAAAAAAAAAAAAAACQoEUAIGNF" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 4486.00005632553, + "~:y": 2887.00009639416 + } + }, + { + "~#point": { + "~:x": 5138.00005632553, + "~:y": 2887.00009639416 + } + }, + { + "~#point": { + "~:x": 5138.00005632553, + "~:y": 3634.00009639416 + } + }, + { + "~#point": { + "~:x": 4486.00005632553, + "~:y": 3634.00009639416 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d4", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 4486.00005632553, + "~:y": 2887.00009639416, + "~:width": 652, + "~:height": 747, + "~:x1": 4486.00005632553, + "~:y1": 2887.00009639416, + "~:x2": 5138.00005632553, + "~:y2": 3634.00009639416 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02d5": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAMIxFANiGRQMAAAAAEI5FAIiFRQBQqkUAoHBFAFCqRQCgcEUCAAAAAAAAAAAAAAAAAAAAAAAAAAD4qUUA0JlFAgAAAAAAAAAAAAAAAAAAAAAAAAAAMIxFANiGRQ==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 4486.00005632553, + "~:y": 3850.00009639416 + } + }, + { + "~#point": { + "~:x": 5450.00005632553, + "~:y": 3850.00009639416 + } + }, + { + "~#point": { + "~:x": 5450.00005632553, + "~:y": 4922.00009639416 + } + }, + { + "~#point": { + "~:x": 4486.00005632553, + "~:y": 4922.00009639416 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02d5", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 4486.00005632553, + "~:y": 3850.00009639416, + "~:width": 964, + "~:height": 1072, + "~:x1": 4486.00005632553, + "~:y1": 3850.00009639416, + "~:x2": 5450.00005632553, + "~:y2": 4922.00009639416 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02ca": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD//wpEAAB2RAIAAAAAAAAAAAAAAAAAAAAAAAAAAKCTRP8/A0QCAAAAAAAAAAAAAAAAAAAAAAAAAAAAl0QAAJ9E" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 555.999938370053, + "~:y": 524.999995655115 + } + }, + { + "~#point": { + "~:x": 1207.99993837005, + "~:y": 524.999995655115 + } + }, + { + "~#point": { + "~:x": 1207.99993837005, + "~:y": 1271.99999565511 + } + }, + { + "~#point": { + "~:x": 555.999938370053, + "~:y": 1271.99999565511 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02ca", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 555.999938370053, + "~:y": 524.999995655115, + "~:width": 652, + "~:height": 747, + "~:x1": 555.999938370053, + "~:y1": 524.999995655115, + "~:x2": 1207.99993837005, + "~:y2": 1271.99999565511 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02cb": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 0.998897352755765, + "~:b": -0.0469476161005346, + "~:c": 0.0469476161005349, + "~:d": 0.998897352755766, + "~:e": 4.54747350886464e-13, + "~:f": 0 + } + }, + "~:rotation": 357.309110550245, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAArNQpE6xsCRQMAAAC7shhELp/+RP29ukQAgMRE/b26RACAxEQCAAAAAAAAAAAAAAAAAAAAAAAAAN6ov0RZNSVFAgAAAAAAAAAAAAAAAAAAAAAAAAArNQpE6xsCRQ==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 531, + "~:y": 1617.25753009482 + } + }, + { + "~#point": { + "~:x": 1493.93706822395, + "~:y": 1572.00002722605 + } + }, + { + "~#point": { + "~:x": 1544.26491373777, + "~:y": 2642.81801180705 + } + }, + { + "~#point": { + "~:x": 581.327845513821, + "~:y": 2688.07551467582 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 0.998897352755766, + "~:b": 0.0469476161005346, + "~:c": -0.0469476161005349, + "~:d": 0.998897352755766, + "~:e": -4.54245924973187e-13, + "~:f": -2.13493040521528e-14 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02cb", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 555.632446774058, + "~:y": 1594.03775972515, + "~:width": 964.000020189657, + "~:height": 1072.00002245157, + "~:x1": 555.632446774058, + "~:y1": 1594.03775972515, + "~:x2": 1519.63246696372, + "~:y2": 2666.03778217672 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02c8": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAA4N1EAAB2RAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAWRf8/A0QCAAAAAAAAAAAAAAAAAAAAAAAAAACwF0UAAJ9E" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 1774.99989445799, + "~:y": 524.999995655115 + } + }, + { + "~#point": { + "~:x": 2426.99989445799, + "~:y": 524.999995655115 + } + }, + { + "~#point": { + "~:x": 2426.99989445799, + "~:y": 1271.99999565512 + } + }, + { + "~#point": { + "~:x": 1774.99989445799, + "~:y": 1271.99999565512 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02c8", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 1774.99989445799, + "~:y": 524.999995655115, + "~:width": 652, + "~:height": 747, + "~:x1": 1774.99989445799, + "~:y1": 524.999995655115, + "~:x2": 2426.99989445799, + "~:y2": 1271.99999565512 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02c9": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAA4N1EACD0RAMAAAAAYOVEAODuRAAwK0UAALpEADArRQAAukQCAAAAAAAAAAAAAAAAAAAAAAAAAACAKkUAACBFAgAAAAAAAAAAAAAAAAAAAAAAAAAA4N1EACD0RA==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 1774.99989445799, + "~:y": 1487.99999565512 + } + }, + { + "~#point": { + "~:x": 2738.99989445799, + "~:y": 1487.99999565512 + } + }, + { + "~#point": { + "~:x": 2738.99989445799, + "~:y": 2559.99999565512 + } + }, + { + "~#point": { + "~:x": 1774.99989445799, + "~:y": 2559.99999565512 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02c9", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 0, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 1774.99989445799, + "~:y": 1487.99999565512, + "~:width": 964, + "~:height": 1072, + "~:x1": 1774.99989445799, + "~:y1": 1487.99999565512, + "~:x2": 2738.99989445799, + "~:y2": 2559.99999565512 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02ce": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD//wpEADBWRQIAAAAAAAAAAAAAAAAAAAAAAAAAAKCTRACAOUUCAAAAAAAAAAAAAAAAAAAAAAAAAAAAl0QAMGhF" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 555.999935960719, + "~:y": 2967.99998327754 + } + }, + { + "~#point": { + "~:x": 1207.99993596072, + "~:y": 2967.99998327754 + } + }, + { + "~#point": { + "~:x": 1207.99993596072, + "~:y": 3714.99998327754 + } + }, + { + "~#point": { + "~:x": 555.999935960719, + "~:y": 3714.99998327754 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02ce", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 555.999935960719, + "~:y": 2967.99998327754, + "~:width": 652, + "~:height": 747, + "~:x1": 555.999935960719, + "~:y1": 2967.99998327754, + "~:x2": 1207.99993596072, + "~:y2": 3714.99998327754 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02cf": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAD//wpEALCMRQMAAAD//xlEAGCLRQAAvkQAUHxFAAC+RABQfEUCAAAAAAAAAAAAAAAAAAAAAAAAAACgvEQAqJ9FAgAAAAAAAAAAAAAAAAAAAAAAAAD//wpEALCMRQ==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 555.999935960719, + "~:y": 4036.99995275996 + } + }, + { + "~#point": { + "~:x": 1519.99993596072, + "~:y": 4036.99995275996 + } + }, + { + "~#point": { + "~:x": 1519.99993596072, + "~:y": 5108.99995275996 + } + }, + { + "~#point": { + "~:x": 555.999935960719, + "~:y": 5108.99995275996 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02cf", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 555.999935960719, + "~:y": 4036.99995275996, + "~:width": 964, + "~:height": 1072, + "~:x1": 555.999935960719, + "~:y1": 4036.99995275996, + "~:x2": 1519.99993596072, + "~:y2": 5108.99995275996 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02cc": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAA4N1EADBWRQIAAAAAAAAAAAAAAAAAAAAAAAAAAAAWRQCAOUUCAAAAAAAAAAAAAAAAAAAAAAAAAACwF0UAMGhF" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 1774.99989204866, + "~:y": 2967.99998327754 + } + }, + { + "~#point": { + "~:x": 2426.99989204866, + "~:y": 2967.99998327754 + } + }, + { + "~#point": { + "~:x": 2426.99989204866, + "~:y": 3714.99998327754 + } + }, + { + "~#point": { + "~:x": 1774.99989204866, + "~:y": 3714.99998327754 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02cc", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 1774.99989204866, + "~:y": 2967.99998327754, + "~:width": 652, + "~:height": 747, + "~:x1": 1774.99989204866, + "~:y1": 2967.99998327754, + "~:x2": 2426.99989204866, + "~:y2": 3714.99998327754 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~ue52394cc-813d-80b9-8007-99cfd71e02cd": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAA4N1EAGCJRQMAAAAAYOVEABCIRQAwK0UAsHVFADArRQCwdUUCAAAAAAAAAAAAAAAAAAAAAAAAAACAKkUAWJxFAgAAAAAAAAAAAAAAAAAAAAAAAAAA4N1EAGCJRQ==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 1774.99989204866, + "~:y": 3930.99998327754 + } + }, + { + "~#point": { + "~:x": 2738.99989204866, + "~:y": 3930.99998327754 + } + }, + { + "~#point": { + "~:x": 2738.99989204866, + "~:y": 5002.99998327754 + } + }, + { + "~#point": { + "~:x": 1774.99989204866, + "~:y": 5002.99998327754 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~ue52394cc-813d-80b9-8007-99cfd71e02cd", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 50, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": null, + "~:proportion": 1, + "~:shadow": [ + { + "~:id": "~u660e606c-c745-80a4-8007-988b6dd9ceb1", + "~:style": "~:drop-shadow", + "~:color": { + "~:color": "#ff0000", + "~:opacity": 1 + }, + "~:offset-x": 100, + "~:offset-y": 100, + "~:blur": 40, + "~:spread": 40, + "~:hidden": false + } + ], + "~:selrect": { + "~#rect": { + "~:x": 1774.99989204866, + "~:y": 3930.99998327754, + "~:width": 964, + "~:height": 1072, + "~:x1": 1774.99989204866, + "~:y1": 3930.99998327754, + "~:x2": 2738.99989204866, + "~:y2": 5002.99998327754 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + } + }, + "~:id": "~u93113137-fe66-80fb-8007-99cfd5cbf362", + "~:name": "Page 1" + } + }, + "~:id": "~u93113137-fe66-80fb-8007-99cfd5cbf361", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } + } \ No newline at end of file diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js index 11253425c6..9a4b26809b 100644 --- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js +++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js @@ -243,6 +243,46 @@ test("Renders a file with a closed path shape with multiple segments using strok await expect(workspace.canvas).toHaveScreenshot(); }); +test("Renders solid shadows after select all and zoom to selected", async ({ + page, +}) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-solid-shadows.json"); + + await workspace.goToWorkspace({ + id: "93113137-fe66-80fb-8007-99ca9fd96841", + pageId: "93113137-fe66-80fb-8007-99ca9fd96842", + }); + await workspace.waitForFirstRender(); + + await workspace.viewport.click(); + await page.keyboard.press("ControlOrMeta+A"); + const previousRenderCount = await workspace.getRenderCount(); + await page.keyboard.press("f"); + await workspace.waitForNextRender(previousRenderCount); + + await workspace.hideUI(); + await expect(workspace.canvas).toHaveScreenshot(); +}); + +test("Renders strokes with solid shadows", async ({ + page, +}) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-solid-strokes-shadows.json"); + + await workspace.goToWorkspace({ + id: "93113137-fe66-80fb-8007-99cfd5cbf361", + pageId: "93113137-fe66-80fb-8007-99cfd5cbf362", + }); + await workspace.waitForFirstRender(); + + await workspace.hideUI(); + await expect(workspace.canvas).toHaveScreenshot(); +}); + test("Renders a file with paths and svg attrs", async ({ page }) => { const workspace = new WasmWorkspacePage(page); await workspace.setupEmptyFile(); diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-solid-shadows-after-select-all-and-zoom-to-selected-1.png b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-solid-shadows-after-select-all-and-zoom-to-selected-1.png new file mode 100644 index 0000000000..cb3c5e6135 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-solid-shadows-after-select-all-and-zoom-to-selected-1.png differ diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-strokes-with-solid-shadows-1.png b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-strokes-with-solid-shadows-1.png new file mode 100644 index 0000000000..e91a91e8ab Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-strokes-with-solid-shadows-1.png differ diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-group-with-text-with-inherited-shadows-1.png b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-group-with-text-with-inherited-shadows-1.png index f8affcad8c..c8ff437984 100644 Binary files a/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-group-with-text-with-inherited-shadows-1.png and b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-group-with-text-with-inherited-shadows-1.png differ diff --git a/render-wasm/src/render.rs b/render-wasm/src/render.rs index 4670272b88..2265ef4de7 100644 --- a/render-wasm/src/render.rs +++ b/render-wasm/src/render.rs @@ -642,6 +642,7 @@ impl RenderState { apply_to_current_surface: bool, offset: Option<(f32, f32)>, parent_shadows: Option>, + spread: Option, ) { let surface_ids = fills_surface_id as u32 | strokes_surface_id as u32 @@ -700,7 +701,14 @@ impl RenderState { canvas.translate(translation); }); - fills::render(self, shape, &shape.fills, antialias, SurfaceId::Current); + fills::render( + self, + shape, + &shape.fills, + antialias, + SurfaceId::Current, + None, + ); // Pass strokes in natural order; stroke merging handles top-most ordering internally. let visible_strokes: Vec<&Stroke> = shape.visible_strokes().collect(); @@ -710,6 +718,7 @@ impl RenderState { &visible_strokes, Some(SurfaceId::Current), antialias, + spread, ); self.surfaces.apply_mut(SurfaceId::Current as u32, |s| { @@ -1055,10 +1064,24 @@ impl RenderState { { if let Some(fills_to_render) = self.nested_fills.last() { let fills_to_render = fills_to_render.clone(); - fills::render(self, shape, &fills_to_render, antialias, fills_surface_id); + fills::render( + self, + shape, + &fills_to_render, + antialias, + fills_surface_id, + spread, + ); } } else { - fills::render(self, shape, &shape.fills, antialias, fills_surface_id); + fills::render( + self, + shape, + &shape.fills, + antialias, + fills_surface_id, + spread, + ); } // Skip stroke rendering for clipped frames - they are drawn in render_shape_exit @@ -1073,6 +1096,7 @@ impl RenderState { &visible_strokes, Some(strokes_surface_id), antialias, + spread, ); if !fast_mode { for stroke in &visible_strokes { @@ -1472,6 +1496,7 @@ impl RenderState { true, None, None, + None, ); } @@ -1626,14 +1651,10 @@ impl RenderState { return; } - if use_low_zoom_path { - let mut shadow_paint = skia::Paint::default(); - shadow_paint.set_image_filter(drop_filter); - shadow_paint.set_blend_mode(skia::BlendMode::SrcOver); - - let layer_rec = skia::canvas::SaveLayerRec::default().paint(&shadow_paint); + // blur=0 at high zoom: draw directly on DropShadows with geometric spread (no filter). + if scale > 1.0 && shadow.blur <= 0.0 { let drop_canvas = self.surfaces.canvas(SurfaceId::DropShadows); - drop_canvas.save_layer(&layer_rec); + drop_canvas.save(); drop_canvas.scale((scale, scale)); drop_canvas.translate(translation); @@ -1648,6 +1669,53 @@ impl RenderState { false, Some(shadow.offset), None, + Some(shadow.spread), + ); + }); + + self.surfaces.canvas(SurfaceId::DropShadows).restore(); + return; + } + + // Create filter with blur only (no offset, no spread - handled geometrically) + let blur_only_filter = if transformed_shadow.blur > 0.0 { + Some(skia::image_filters::blur( + (transformed_shadow.blur, transformed_shadow.blur), + None, + None, + None, + )) + } else { + None + }; + + let mut shadow_paint = skia::Paint::default(); + if let Some(blur_filter) = blur_only_filter { + shadow_paint.set_image_filter(blur_filter); + } + shadow_paint.set_blend_mode(skia::BlendMode::SrcOver); + + let layer_rec = skia::canvas::SaveLayerRec::default().paint(&shadow_paint); + + // Low zoom path: use blur filter but apply offset and spread geometrically + if use_low_zoom_path { + let drop_canvas = self.surfaces.canvas(SurfaceId::DropShadows); + drop_canvas.save_layer(&layer_rec); + drop_canvas.scale((scale, scale)); + drop_canvas.translate(translation); + + self.with_nested_blurs_suppressed(|state| { + state.render_shape( + &plain_shape, + clip_bounds, + SurfaceId::DropShadows, + SurfaceId::DropShadows, + SurfaceId::DropShadows, + SurfaceId::DropShadows, + false, + Some(shadow.offset), // Offset is geometric + None, + Some(shadow.spread), // Spread is geometric ); }); @@ -1657,7 +1725,7 @@ impl RenderState { // Adaptive downscale for large blur values (lossless GPU optimization). // Bounds above were computed from the original sigma so filter surface coverage is correct. - // Maximum downscale is 1/BLUR_DOWNSCALE_THRESHOLD (i.e. 8×): beyond that the + // Maximum downscale is 1/BLUR_DOWNSCALE_THRESHOLD (i.e. 8x): beyond that the // filter surface becomes too small and quality degrades noticeably. const MIN_BLUR_DOWNSCALE: f32 = 1.0 / BLUR_DOWNSCALE_THRESHOLD; let blur_downscale = if shadow.blur > BLUR_DOWNSCALE_THRESHOLD { @@ -1666,23 +1734,18 @@ impl RenderState { 1.0 }; + // High zoom with blur: use render_into_filter_surface to ensure blur has enough space + // Apply spread geometrically to avoid dilate filter rounding issues let filter_result = filters::render_into_filter_surface( self, bounds, blur_downscale, |state, temp_surface| { - { - let canvas = state.surfaces.canvas(temp_surface); - - let mut shadow_paint = skia::Paint::default(); - shadow_paint.set_image_filter(drop_filter); - shadow_paint.set_blend_mode(skia::BlendMode::SrcOver); - - let layer_rec = skia::canvas::SaveLayerRec::default().paint(&shadow_paint); - canvas.save_layer(&layer_rec); - } + let canvas = state.surfaces.canvas(temp_surface); + canvas.save_layer(&layer_rec); state.with_nested_blurs_suppressed(|state| { + // Apply offset and spread geometrically state.render_shape( &plain_shape, clip_bounds, @@ -1691,15 +1754,13 @@ impl RenderState { temp_surface, temp_surface, false, - Some(shadow.offset), + Some(shadow.offset), // Offset is geometric None, + Some(shadow.spread), // Spread is geometric ); }); - { - let canvas = state.surfaces.canvas(temp_surface); - canvas.restore(); - } + state.surfaces.canvas(temp_surface).restore(); }, ); @@ -1836,6 +1897,7 @@ impl RenderState { true, None, Some(vec![new_shadow_paint.clone()]), + None, ); }); self.surfaces.canvas(SurfaceId::DropShadows).restore(); @@ -2047,6 +2109,7 @@ impl RenderState { true, None, None, + None, ); self.surfaces diff --git a/render-wasm/src/render/fills.rs b/render-wasm/src/render/fills.rs index 0875fdd649..f6f8a2e4ea 100644 --- a/render-wasm/src/render/fills.rs +++ b/render-wasm/src/render/fills.rs @@ -97,6 +97,7 @@ pub fn render( fills: &[Fill], antialias: bool, surface_id: SurfaceId, + spread: Option, ) { if fills.is_empty() { return; @@ -107,7 +108,7 @@ pub fn render( let has_image_fills = fills.iter().any(|f| matches!(f, Fill::Image(_))); if has_image_fills { for fill in fills.iter().rev() { - render_single_fill(render_state, shape, fill, antialias, surface_id); + render_single_fill(render_state, shape, fill, antialias, surface_id, spread); } return; } @@ -124,7 +125,7 @@ pub fn render( |state, temp_surface| { let mut filtered_paint = paint.clone(); filtered_paint.set_image_filter(image_filter.clone()); - draw_fill_to_surface(state, shape, temp_surface, &filtered_paint); + draw_fill_to_surface(state, shape, temp_surface, &filtered_paint, spread); }, ) { return; @@ -133,7 +134,7 @@ pub fn render( } } - draw_fill_to_surface(render_state, shape, surface_id, &paint); + draw_fill_to_surface(render_state, shape, surface_id, &paint, spread); } /// Draws a single paint (with a merged shader) to the appropriate surface @@ -143,18 +144,23 @@ fn draw_fill_to_surface( shape: &Shape, surface_id: SurfaceId, paint: &Paint, + spread: Option, ) { match &shape.shape_type { Type::Rect(_) | Type::Frame(_) => { - render_state.surfaces.draw_rect_to(surface_id, shape, paint); + render_state + .surfaces + .draw_rect_to(surface_id, shape, paint, spread); } Type::Circle => { render_state .surfaces - .draw_circle_to(surface_id, shape, paint); + .draw_circle_to(surface_id, shape, paint, spread); } Type::Path(_) | Type::Bool(_) => { - render_state.surfaces.draw_path_to(surface_id, shape, paint); + render_state + .surfaces + .draw_path_to(surface_id, shape, paint, spread); } Type::Group(_) => {} _ => unreachable!("This shape should not have fills"), @@ -167,6 +173,7 @@ fn render_single_fill( fill: &Fill, antialias: bool, surface_id: SurfaceId, + spread: Option, ) { let mut paint = fill.to_paint(&shape.selrect, antialias); if let Some(image_filter) = shape.image_filter(1.) { @@ -185,6 +192,7 @@ fn render_single_fill( antialias, temp_surface, &filtered_paint, + spread, ); }, ) { @@ -194,7 +202,15 @@ fn render_single_fill( } } - draw_single_fill_to_surface(render_state, shape, fill, antialias, surface_id, &paint); + draw_single_fill_to_surface( + render_state, + shape, + fill, + antialias, + surface_id, + &paint, + spread, + ); } fn draw_single_fill_to_surface( @@ -204,6 +220,7 @@ fn draw_single_fill_to_surface( antialias: bool, surface_id: SurfaceId, paint: &Paint, + spread: Option, ) { match (fill, &shape.shape_type) { (Fill::Image(image_fill), _) => { @@ -217,15 +234,19 @@ fn draw_single_fill_to_surface( ); } (_, Type::Rect(_) | Type::Frame(_)) => { - render_state.surfaces.draw_rect_to(surface_id, shape, paint); + render_state + .surfaces + .draw_rect_to(surface_id, shape, paint, spread); } (_, Type::Circle) => { render_state .surfaces - .draw_circle_to(surface_id, shape, paint); + .draw_circle_to(surface_id, shape, paint, spread); } (_, Type::Path(_)) | (_, Type::Bool(_)) => { - render_state.surfaces.draw_path_to(surface_id, shape, paint); + render_state + .surfaces + .draw_path_to(surface_id, shape, paint, spread); } (_, Type::Group(_)) => { // Groups can have fills but they propagate them to their children diff --git a/render-wasm/src/render/shadows.rs b/render-wasm/src/render/shadows.rs index 9a0862cbff..4906714389 100644 --- a/render-wasm/src/render/shadows.rs +++ b/render-wasm/src/render/shadows.rs @@ -47,6 +47,7 @@ pub fn render_stroke_inner_shadows( Some(surface_id), filter.as_ref(), antialias, + None, // Inner shadows don't use spread ) } } @@ -106,15 +107,19 @@ fn render_shadow_paint( ) { match &shape.shape_type { Type::Rect(_) | Type::Frame(_) => { - render_state.surfaces.draw_rect_to(surface_id, shape, paint); + render_state + .surfaces + .draw_rect_to(surface_id, shape, paint, None); } Type::Circle => { render_state .surfaces - .draw_circle_to(surface_id, shape, paint); + .draw_circle_to(surface_id, shape, paint, None); } Type::Path(_) | Type::Bool(_) => { - render_state.surfaces.draw_path_to(surface_id, shape, paint); + render_state + .surfaces + .draw_path_to(surface_id, shape, paint, None); } _ => {} } diff --git a/render-wasm/src/render/strokes.rs b/render-wasm/src/render/strokes.rs index ff61502d7c..d48a41bfa9 100644 --- a/render-wasm/src/render/strokes.rs +++ b/render-wasm/src/render/strokes.rs @@ -526,6 +526,7 @@ pub fn render( strokes: &[&Stroke], surface_id: Option, antialias: bool, + spread: Option, ) { if strokes.is_empty() { return; @@ -540,6 +541,10 @@ pub fn render( // edges semi-transparent and revealing strokes underneath. if let Some(image_filter) = shape.image_filter(1.) { let mut content_bounds = shape.selrect; + // Expand for spread if provided + if let Some(s) = spread.filter(|&s| s > 0.0) { + content_bounds.outset((s, s)); + } let max_margin = strokes .iter() .map(|s| s.bounds_width(shape.is_open())) @@ -583,6 +588,7 @@ pub fn render( antialias, true, true, + spread, ); } @@ -595,12 +601,28 @@ pub fn render( // No blur or filter surface unavailable — draw strokes individually. for stroke in strokes.iter().rev() { - render_single(render_state, shape, stroke, surface_id, None, antialias); + render_single( + render_state, + shape, + stroke, + surface_id, + None, + antialias, + spread, + ); } return; } - render_merged(render_state, shape, strokes, surface_id, antialias, false); + render_merged( + render_state, + shape, + strokes, + surface_id, + antialias, + false, + spread, + ); } fn strokes_share_geometry(strokes: &[&Stroke]) -> bool { @@ -620,6 +642,7 @@ fn render_merged( surface_id: Option, antialias: bool, bypass_filter: bool, + spread: Option, ) { let representative = *strokes .last() @@ -635,6 +658,10 @@ fn render_merged( if !bypass_filter { if let Some(image_filter) = blur_filter.clone() { let mut content_bounds = shape.selrect; + // Expand for spread if provided + if let Some(s) = spread.filter(|&s| s > 0.0) { + content_bounds.outset((s, s)); + } let stroke_margin = representative.bounds_width(shape.is_open()); if stroke_margin > 0.0 { content_bounds.inset((-stroke_margin, -stroke_margin)); @@ -660,7 +687,15 @@ fn render_merged( canvas.save_layer(&layer_rec); }); - render_merged(state, shape, strokes, Some(temp_surface), antialias, true); + render_merged( + state, + shape, + strokes, + Some(temp_surface), + antialias, + true, + spread, + ); state.surfaces.apply_mut(temp_surface as u32, |surface| { surface.canvas().restore(); @@ -676,11 +711,19 @@ fn render_merged( // via SrcOver), matching the non-merged path where strokes[0] is drawn last (on top). let fills: Vec = strokes.iter().map(|s| s.fill.clone()).collect(); - let merged = merge_fills(&fills, shape.selrect); + // Expand selrect if spread is provided + let selrect = if let Some(s) = spread.filter(|&s| s > 0.0) { + let mut r = shape.selrect; + r.outset((s, s)); + r + } else { + shape.selrect + }; + + let merged = merge_fills(&fills, selrect); let scale = render_state.get_scale(); let target_surface = surface_id.unwrap_or(SurfaceId::Strokes); let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface); - let selrect = shape.selrect; let svg_attrs = shape.svg_attrs.as_ref(); let path_transform = shape.to_path_transform(); @@ -747,6 +790,7 @@ pub fn render_single( surface_id: Option, shadow: Option<&ImageFilter>, antialias: bool, + spread: Option, ) { render_single_internal( render_state, @@ -757,6 +801,7 @@ pub fn render_single( antialias, false, false, + spread, ); } @@ -770,10 +815,15 @@ fn render_single_internal( antialias: bool, bypass_filter: bool, skip_blur: bool, + spread: Option, ) { if !bypass_filter { if let Some(image_filter) = shape.image_filter(1.) { let mut content_bounds = shape.selrect; + // Expand for spread if provided + if let Some(s) = spread.filter(|&s| s > 0.0) { + content_bounds.outset((s, s)); + } let stroke_margin = stroke.bounds_width(shape.is_open()); if stroke_margin > 0.0 { content_bounds.inset((-stroke_margin, -stroke_margin)); @@ -799,6 +849,7 @@ fn render_single_internal( antialias, true, true, + spread, ); }, ) { @@ -867,7 +918,21 @@ fn render_single_internal( shape_type @ (Type::Path(_) | Type::Bool(_)) => { if let Some(path) = shape_type.path() { let is_open = path.is_open(); - let paint = stroke.to_stroked_paint(is_open, &selrect, svg_attrs, antialias); + let mut paint = + stroke.to_stroked_paint(is_open, &selrect, svg_attrs, antialias); + // Apply spread by increasing stroke width + if let Some(s) = spread.filter(|&s| s > 0.0) { + let current_width = paint.stroke_width(); + // Path stroke kinds are built differently: + // - Center uses the stroke width directly. + // - Inner/Outer use a doubled width plus clipping/clearing logic. + // Compensate spread so visual growth is comparable across kinds. + let spread_growth = match stroke.render_kind(is_open) { + StrokeKind::Center => s * 2.0, + StrokeKind::Inner | StrokeKind::Outer => s * 4.0, + }; + paint.set_stroke_width(current_width + spread_growth); + } draw_stroke_on_path( canvas, stroke, diff --git a/render-wasm/src/render/surfaces.rs b/render-wasm/src/render/surfaces.rs index 86a0f0422e..56d26a48c7 100644 --- a/render-wasm/src/render/surfaces.rs +++ b/render-wasm/src/render/surfaces.rs @@ -74,7 +74,7 @@ impl Surfaces { let margins = skia::ISize::new(extra_tile_dims.width / 4, extra_tile_dims.height / 4); let target = gpu_state.create_target_surface(width, height); - let filter = gpu_state.create_surface_with_dimensions("filter".to_string(), width, height); + let filter = gpu_state.create_surface_with_isize("filter".to_string(), extra_tile_dims); let cache = gpu_state.create_surface_with_dimensions("cache".to_string(), width, height); let current = gpu_state.create_surface_with_isize("current".to_string(), extra_tile_dims); let drop_shadows = @@ -355,24 +355,62 @@ impl Surfaces { )); } - pub fn draw_rect_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) { + pub fn draw_rect_to( + &mut self, + id: SurfaceId, + shape: &Shape, + paint: &Paint, + spread: Option, + ) { + let rect = if let Some(s) = spread.filter(|&s| s > 0.0) { + let mut r = shape.selrect; + r.outset((s, s)); + r + } else { + shape.selrect + }; if let Some(corners) = shape.shape_type.corners() { - let rrect = RRect::new_rect_radii(shape.selrect, &corners); + let rrect = RRect::new_rect_radii(rect, &corners); self.canvas_and_mark_dirty(id).draw_rrect(rrect, paint); } else { - self.canvas_and_mark_dirty(id) - .draw_rect(shape.selrect, paint); + self.canvas_and_mark_dirty(id).draw_rect(rect, paint); } } - pub fn draw_circle_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) { - self.canvas_and_mark_dirty(id) - .draw_oval(shape.selrect, paint); + pub fn draw_circle_to( + &mut self, + id: SurfaceId, + shape: &Shape, + paint: &Paint, + spread: Option, + ) { + let rect = if let Some(s) = spread.filter(|&s| s > 0.0) { + let mut r = shape.selrect; + r.outset((s, s)); + r + } else { + shape.selrect + }; + self.canvas_and_mark_dirty(id).draw_oval(rect, paint); } - pub fn draw_path_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) { + pub fn draw_path_to( + &mut self, + id: SurfaceId, + shape: &Shape, + paint: &Paint, + spread: Option, + ) { if let Some(path) = shape.get_skia_path() { - self.canvas_and_mark_dirty(id).draw_path(&path, paint); + let canvas = self.canvas_and_mark_dirty(id); + if let Some(s) = spread.filter(|&s| s > 0.0) { + // Draw path as a thick stroke to get outset (expanded) silhouette + let mut stroke_paint = paint.clone(); + stroke_paint.set_stroke_width(s * 2.0); + canvas.draw_path(&path, &stroke_paint); + } else { + canvas.draw_path(&path, paint); + } } }