diff --git a/frontend/playwright.config.js b/frontend/playwright.config.js index b0e77301eb..7496f7f4c8 100644 --- a/frontend/playwright.config.js +++ b/frontend/playwright.config.js @@ -64,7 +64,7 @@ export default defineConfig({ snapshotPathTemplate: "{testDir}/{testFilePath}-snapshots/{arg}.png", expect: { toHaveScreenshot: { - maxDiffPixelRatio: 0.005, + maxDiffPixelRatio: 0.001, }, }, }, diff --git a/frontend/playwright/data/render-wasm/assets/ebgaramond.ttf b/frontend/playwright/data/render-wasm/assets/ebgaramond.ttf new file mode 100644 index 0000000000..f8c490b19d Binary files /dev/null and b/frontend/playwright/data/render-wasm/assets/ebgaramond.ttf differ diff --git a/frontend/playwright/data/render-wasm/assets/firacode.ttf b/frontend/playwright/data/render-wasm/assets/firacode.ttf new file mode 100644 index 0000000000..3a57209a97 Binary files /dev/null and b/frontend/playwright/data/render-wasm/assets/firacode.ttf differ diff --git a/frontend/playwright/data/render-wasm/assets/mreaves.ttf b/frontend/playwright/data/render-wasm/assets/mreaves.ttf new file mode 100644 index 0000000000..d787d46701 Binary files /dev/null and b/frontend/playwright/data/render-wasm/assets/mreaves.ttf differ diff --git a/frontend/playwright/data/render-wasm/assets/nodesto-condensed.ttf b/frontend/playwright/data/render-wasm/assets/nodesto-condensed.ttf new file mode 100644 index 0000000000..5ba2824b49 Binary files /dev/null and b/frontend/playwright/data/render-wasm/assets/nodesto-condensed.ttf differ diff --git a/frontend/playwright/data/render-wasm/get-file-blend-modes.json b/frontend/playwright/data/render-wasm/get-file-blend-modes.json new file mode 100644 index 0000000000..5db8b41763 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-blend-modes.json @@ -0,0 +1,4595 @@ +{ + "~: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": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~: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": "Blend Modes", + "~:revn": 77, + "~:modified-at": "~m1749564878395", + "~:vern": 0, + "~:id": "~uc0939f58-37bc-805d-8006-51cdf8e18e76", + "~: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", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content", + "0004-add-partial-text-touched-flags", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0004-clean-shadow-and-colors", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-opacity", + "0009-add-partial-text-touched-flags" + ] + }, + "~:version": 67, + "~:project-id": "~u53a7ff09-2228-81d3-8006-4b5ea964593b", + "~:created-at": "~m1749564227465", + "~:data": { + "~:pages": [ + "~uc0939f58-37bc-805d-8006-51cdf8e18e77" + ], + "~:pages-index": { + "~uc0939f58-37bc-805d-8006-51cdf8e18e77": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.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.0, + "~: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": [ + "~ua40b06a7-8291-8016-8006-51cdff29090d", + "~ua40b06a7-8291-8016-8006-51ce15316f2f", + "~ua40b06a7-8291-8016-8006-51ce29981ae5", + "~ua40b06a7-8291-8016-8006-51ce95ceb45c", + "~ua40b06a7-8291-8016-8006-51cec0b7d886", + "~ua40b06a7-8291-8016-8006-51cf011ebdaa", + "~ua40b06a7-8291-8016-8006-51cfc7775b96", + "~ua40b06a7-8291-8016-8006-51d018fe482c", + "~ua40b06a7-8291-8016-8006-51cfe77a3ba8", + "~ua40b06a7-8291-8016-8006-51cfff4ec08a", + "~ua40b06a7-8291-8016-8006-51cf294c69ae", + "~ua40b06a7-8291-8016-8006-51cf38fe0cfe", + "~ua40b06a7-8291-8016-8006-51ced0237745", + "~ua40b06a7-8291-8016-8006-51cedcaa3495", + "~ua40b06a7-8291-8016-8006-51cea3bdf924", + "~ua40b06a7-8291-8016-8006-51ceaec37289", + "~ua40b06a7-8291-8016-8006-51ce041bd6ac", + "~ua40b06a7-8291-8016-8006-51cfb7043b7a", + "~ua40b06a7-8291-8016-8006-51ce15316f30", + "~ua40b06a7-8291-8016-8006-51cfb1a9abf2", + "~ua40b06a7-8291-8016-8006-51ce29981ae4", + "~ua40b06a7-8291-8016-8006-51cfa96e2dbb", + "~ua40b06a7-8291-8016-8006-51ce95ceb45d", + "~ua40b06a7-8291-8016-8006-51cf95b40639", + "~ua40b06a7-8291-8016-8006-51cec0b7d887", + "~ua40b06a7-8291-8016-8006-51cf8dad1fe8", + "~ua40b06a7-8291-8016-8006-51cf011ebdab", + "~ua40b06a7-8291-8016-8006-51cf5060dd29", + "~ua40b06a7-8291-8016-8006-51cfc7775b95", + "~ua40b06a7-8291-8016-8006-51cfe77a3ba9", + "~ua40b06a7-8291-8016-8006-51d018fe482a", + "~ua40b06a7-8291-8016-8006-51cfff4f2739", + "~ua40b06a7-8291-8016-8006-51cf294c69af", + "~ua40b06a7-8291-8016-8006-51cf498a8953", + "~ua40b06a7-8291-8016-8006-51cfc7775b94", + "~ua40b06a7-8291-8016-8006-51cfe77a3baa", + "~ua40b06a7-8291-8016-8006-51d018fe482b", + "~ua40b06a7-8291-8016-8006-51cfff4f273a", + "~ua40b06a7-8291-8016-8006-51cf38fe0cff", + "~ua40b06a7-8291-8016-8006-51cf64d90820", + "~ua40b06a7-8291-8016-8006-51ced0237746", + "~ua40b06a7-8291-8016-8006-51cf565b4e8f", + "~ua40b06a7-8291-8016-8006-51cedcaa3496", + "~ua40b06a7-8291-8016-8006-51cf5cb4b66b", + "~ua40b06a7-8291-8016-8006-51cea3bdf925", + "~ua40b06a7-8291-8016-8006-51cf9e2d56d9", + "~ua40b06a7-8291-8016-8006-51ceaec3728a", + "~ua40b06a7-8291-8016-8006-51cfa3d9a62a" + ] + } + }, + "~ua40b06a7-8291-8016-8006-51cf38fe0cfe": { + "~#shape": { + "~:y": 620, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.99996829032898, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1479.9999783039075, + "~:y": 620 + } + }, + { + "~#point": { + "~:x": 1612.9999465942365, + "~:y": 620 + } + }, + { + "~#point": { + "~:x": 1612.9999465942365, + "~:y": 753 + } + }, + { + "~#point": { + "~:x": 1479.9999783039075, + "~:y": 753 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cf38fe0cfe", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1479.9999783039075, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1479.9999783039075, + "~:y": 620, + "~:width": 132.99996829032898, + "~:height": 133, + "~:x1": 1479.9999783039075, + "~:y1": 620, + "~:x2": 1612.9999465942365, + "~:y2": 753 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf38fe0cff": { + "~#shape": { + "~:y": 687, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:exclusion", + "~:name": "Rectangle", + "~:width": 132.99991279836104, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1546.9999744296538, + "~:y": 687 + } + }, + { + "~#point": { + "~:x": 1679.9998872280148, + "~:y": 687 + } + }, + { + "~#point": { + "~:x": 1679.9998872280148, + "~:y": 820 + } + }, + { + "~#point": { + "~:x": 1546.9999744296538, + "~:y": 820 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf38fe0cff", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1546.9999744296538, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1546.9999744296538, + "~:y": 687, + "~:width": 132.99991279836104, + "~:height": 133, + "~:x1": 1546.9999744296538, + "~:y1": 687, + "~:x2": 1679.9998872280148, + "~:y2": 820 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ce95ceb45d": { + "~#shape": { + "~:y": 363.00001335144043, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:color-burn", + "~:name": "Rectangle", + "~:width": 132.99993658065796, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1000.0000162124634, + "~:y": 363.00001335144043 + } + }, + { + "~#point": { + "~:x": 1132.9999527931213, + "~:y": 363.00001335144043 + } + }, + { + "~#point": { + "~:x": 1132.9999527931213, + "~:y": 496.00001335144043 + } + }, + { + "~#point": { + "~:x": 1000.0000162124634, + "~:y": 496.00001335144043 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51ce95ceb45d", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1000.0000162124634, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1000.0000162124634, + "~:y": 363.00001335144043, + "~:width": 132.99993658065796, + "~:height": 133, + "~:x1": 1000.0000162124634, + "~:y1": 363.00001335144043, + "~:x2": 1132.9999527931213, + "~:y2": 496.00001335144043 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ce95ceb45c": { + "~#shape": { + "~:y": 296.00001335144043, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.99993658065796, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 932.9999871253967, + "~:y": 296.00001335144043 + } + }, + { + "~#point": { + "~:x": 1065.9999237060547, + "~:y": 296.00001335144043 + } + }, + { + "~#point": { + "~:x": 1065.9999237060547, + "~:y": 429.00001335144043 + } + }, + { + "~#point": { + "~:x": 932.9999871253967, + "~:y": 429.00001335144043 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51ce95ceb45c", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 932.9999871253967, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 932.9999871253967, + "~:y": 296.00001335144043, + "~:width": 132.99993658065796, + "~:height": 133, + "~:x1": 932.9999871253967, + "~:y1": 296.00001335144043, + "~:x2": 1065.9999237060547, + "~:y2": 429.00001335144043 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfb7043b7a": { + "~#shape": { + "~:y": 381.00000381469727, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.9999841451645, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 208.0000078678131, + "~:y": 381.00000381469727 + } + }, + { + "~#point": { + "~:x": 340.9999920129776, + "~:y": 381.00000381469727 + } + }, + { + "~#point": { + "~:x": 340.9999920129776, + "~:y": 514.0000038146973 + } + }, + { + "~#point": { + "~:x": 208.0000078678131, + "~:y": 514.0000038146973 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 0.5, + "~:id": "~ua40b06a7-8291-8016-8006-51cfb7043b7a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 208.0000078678131, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 208.0000078678131, + "~:y": 381.00000381469727, + "~:width": 132.9999841451645, + "~:height": 133, + "~:x1": 208.0000078678131, + "~:y1": 381.00000381469727, + "~:x2": 340.9999920129776, + "~:y2": 514.0000038146973 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfff4f273a": { + "~#shape": { + "~:y": 1054.9999718368053, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:color", + "~:name": "Rectangle", + "~:width": 132.99996829032898, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 755.000010490419, + "~:y": 1054.9999718368053 + } + }, + { + "~#point": { + "~:x": 887.9999787807479, + "~:y": 1054.9999718368053 + } + }, + { + "~#point": { + "~:x": 887.9999787807479, + "~:y": 1187.9999718368053 + } + }, + { + "~#point": { + "~:x": 755.000010490419, + "~:y": 1187.9999718368053 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfff4f273a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 755.000010490419, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 755.000010490419, + "~:y": 1054.9999718368053, + "~:width": 132.99996829032898, + "~:height": 133, + "~:x1": 755.000010490419, + "~:y1": 1054.9999718368053, + "~:x2": 887.9999787807479, + "~:y2": 1187.9999718368053 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfa96e2dbb": { + "~#shape": { + "~:y": 380.9999885559082, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:multiply", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 748.0000076293945, + "~:y": 380.9999885559082 + } + }, + { + "~#point": { + "~:x": 881.0000076293945, + "~:y": 380.9999885559082 + } + }, + { + "~#point": { + "~:x": 881.0000076293945, + "~:y": 513.9999885559082 + } + }, + { + "~#point": { + "~:x": 748.0000076293945, + "~:y": 513.9999885559082 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfa96e2dbb", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 748.0000076293945, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 748.0000076293945, + "~:y": 380.9999885559082, + "~:width": 133, + "~:height": 133, + "~:x1": 748.0000076293945, + "~:y1": 380.9999885559082, + "~:x2": 881.0000076293945, + "~:y2": 513.9999885559082 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfff4f2739": { + "~#shape": { + "~:y": 1028.9999394118786, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:color", + "~:name": "Rectangle", + "~:width": 132.99996829032898, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 733.000019550324, + "~:y": 1028.9999394118786 + } + }, + { + "~#point": { + "~:x": 865.999987840653, + "~:y": 1028.9999394118786 + } + }, + { + "~#point": { + "~:x": 865.999987840653, + "~:y": 1161.9999394118786 + } + }, + { + "~#point": { + "~:x": 733.000019550324, + "~:y": 1161.9999394118786 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfff4f2739", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 733.000019550324, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 733.000019550324, + "~:y": 1028.9999394118786, + "~:width": 132.99996829032898, + "~:height": 133, + "~:x1": 733.000019550324, + "~:y1": 1028.9999394118786, + "~:x2": 865.999987840653, + "~:y2": 1161.9999394118786 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf95b40639": { + "~#shape": { + "~:y": 380.99999809265137, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:color-burn", + "~:name": "Rectangle", + "~:width": 132.99992072583007, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1016.0000183582259, + "~:y": 380.99999809265137 + } + }, + { + "~#point": { + "~:x": 1148.999939084056, + "~:y": 380.99999809265137 + } + }, + { + "~#point": { + "~:x": 1148.999939084056, + "~:y": 513.9999980926514 + } + }, + { + "~#point": { + "~:x": 1016.0000183582259, + "~:y": 513.9999980926514 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf95b40639", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1016.0000183582259, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1016.0000183582259, + "~:y": 380.99999809265137, + "~:width": 132.99992072583007, + "~:height": 133, + "~:x1": 1016.0000183582259, + "~:y1": 380.99999809265137, + "~:x2": 1148.999939084056, + "~:y2": 513.9999980926514 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf9e2d56d9": { + "~#shape": { + "~:y": 376.0000059604704, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:lighten", + "~:name": "Rectangle", + "~:width": 132.99996829032898, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1288.9999544620514, + "~:y": 376.0000059604704 + } + }, + { + "~#point": { + "~:x": 1421.9999227523804, + "~:y": 376.0000059604704 + } + }, + { + "~#point": { + "~:x": 1421.9999227523804, + "~:y": 509.0000376701414 + } + }, + { + "~#point": { + "~:x": 1288.9999544620514, + "~:y": 509.0000376701414 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf9e2d56d9", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1288.9999544620514, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1288.9999544620514, + "~:y": 376.0000059604704, + "~:width": 132.99996829032898, + "~:height": 133.00003170967102, + "~:x1": 1288.9999544620514, + "~:y1": 376.0000059604704, + "~:x2": 1421.9999227523804, + "~:y2": 509.0000376701414 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133.00003170967102, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfc7775b96": { + "~#shape": { + "~:y": 962, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 121.99999380111694, + "~:y": 962 + } + }, + { + "~#point": { + "~:x": 254.99999380111694, + "~:y": 962 + } + }, + { + "~#point": { + "~:x": 254.99999380111694, + "~:y": 1095 + } + }, + { + "~#point": { + "~:x": 121.99999380111694, + "~:y": 1095 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cfc7775b96", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 121.99999380111694, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 121.99999380111694, + "~:y": 962, + "~:width": 133, + "~:height": 133, + "~:x1": 121.99999380111694, + "~:y1": 962, + "~:x2": 254.99999380111694, + "~:y2": 1095 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cedcaa3496": { + "~#shape": { + "~:y": 687.0000152587891, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:soft-light", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 724.000011920929, + "~:y": 687.0000152587891 + } + }, + { + "~#point": { + "~:x": 857.000011920929, + "~:y": 687.0000152587891 + } + }, + { + "~#point": { + "~:x": 857.000011920929, + "~:y": 820.0000152587891 + } + }, + { + "~#point": { + "~:x": 724.000011920929, + "~:y": 820.0000152587891 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cedcaa3496", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 724.000011920929, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 724.000011920929, + "~:y": 687.0000152587891, + "~:width": 133, + "~:height": 133, + "~:x1": 724.000011920929, + "~:y1": 687.0000152587891, + "~:x2": 857.000011920929, + "~:y2": 820.0000152587891 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfc7775b94": { + "~#shape": { + "~:y": 1055.0000324249268, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:hue", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 210.99998998641968, + "~:y": 1055.0000324249268 + } + }, + { + "~#point": { + "~:x": 343.9999899864197, + "~:y": 1055.0000324249268 + } + }, + { + "~#point": { + "~:x": 343.9999899864197, + "~:y": 1188.0000324249268 + } + }, + { + "~#point": { + "~:x": 210.99998998641968, + "~:y": 1188.0000324249268 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfc7775b94", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 210.99998998641968, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 210.99998998641968, + "~:y": 1055.0000324249268, + "~:width": 133, + "~:height": 133, + "~:x1": 210.99998998641968, + "~:y1": 1055.0000324249268, + "~:x2": 343.9999899864197, + "~:y2": 1188.0000324249268 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51d018fe482b": { + "~#shape": { + "~:y": 1046.0000324249268, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:luminosity", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1028.9999327659607, + "~:y": 1046.0000324249268 + } + }, + { + "~#point": { + "~:x": 1161.9999327659607, + "~:y": 1046.0000324249268 + } + }, + { + "~#point": { + "~:x": 1161.9999327659607, + "~:y": 1179.0000324249268 + } + }, + { + "~#point": { + "~:x": 1028.9999327659607, + "~:y": 1179.0000324249268 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51d018fe482b", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1028.9999327659607, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1028.9999327659607, + "~:y": 1046.0000324249268, + "~:width": 133, + "~:height": 133, + "~:x1": 1028.9999327659607, + "~:y1": 1046.0000324249268, + "~:x2": 1161.9999327659607, + "~:y2": 1179.0000324249268 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cedcaa3495": { + "~#shape": { + "~:y": 620.0000152587891, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 657.000011920929, + "~:y": 620.0000152587891 + } + }, + { + "~#point": { + "~:x": 790.000011920929, + "~:y": 620.0000152587891 + } + }, + { + "~#point": { + "~:x": 790.000011920929, + "~:y": 753.0000152587891 + } + }, + { + "~#point": { + "~:x": 657.000011920929, + "~:y": 753.0000152587891 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cedcaa3495", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 657.000011920929, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 657.000011920929, + "~:y": 620.0000152587891, + "~:width": 133, + "~:height": 133, + "~:x1": 657.000011920929, + "~:y1": 620.0000152587891, + "~:x2": 790.000011920929, + "~:y2": 753.0000152587891 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfc7775b95": { + "~#shape": { + "~:y": 1029, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:hue", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 188.99999380111694, + "~:y": 1029 + } + }, + { + "~#point": { + "~:x": 321.99999380111694, + "~:y": 1029 + } + }, + { + "~#point": { + "~:x": 321.99999380111694, + "~:y": 1162 + } + }, + { + "~#point": { + "~:x": 188.99999380111694, + "~:y": 1162 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfc7775b95", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 188.99999380111694, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 188.99999380111694, + "~:y": 1029, + "~:width": 133, + "~:height": 133, + "~:x1": 188.99999380111694, + "~:y1": 1029, + "~:x2": 321.99999380111694, + "~:y2": 1162 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51d018fe482a": { + "~#shape": { + "~:y": 1020, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:luminosity", + "~:name": "Rectangle", + "~:width": 132.99993658065796, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1007.0000319480907, + "~:y": 1020 + } + }, + { + "~#point": { + "~:x": 1139.9999685287487, + "~:y": 1020 + } + }, + { + "~#point": { + "~:x": 1139.9999685287487, + "~:y": 1153 + } + }, + { + "~#point": { + "~:x": 1007.0000319480907, + "~:y": 1153 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51d018fe482a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1007.0000319480907, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1007.0000319480907, + "~:y": 1020, + "~:width": 132.99993658065796, + "~:height": 133, + "~:x1": 1007.0000319480907, + "~:y1": 1020, + "~:x2": 1139.9999685287487, + "~:y2": 1153 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfb1a9abf2": { + "~#shape": { + "~:y": 377.99999237060547, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:darken", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 475.99999237060547, + "~:y": 377.99999237060547 + } + }, + { + "~#point": { + "~:x": 608.9999923706055, + "~:y": 377.99999237060547 + } + }, + { + "~#point": { + "~:x": 608.9999923706055, + "~:y": 510.99999237060547 + } + }, + { + "~#point": { + "~:x": 475.99999237060547, + "~:y": 510.99999237060547 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfb1a9abf2", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 475.99999237060547, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 475.99999237060547, + "~:y": 377.99999237060547, + "~:width": 133, + "~:height": 133, + "~:x1": 475.99999237060547, + "~:y1": 377.99999237060547, + "~:x2": 608.9999923706055, + "~:y2": 510.99999237060547 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf498a8953": { + "~#shape": { + "~:y": 712.9999523162842, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:difference", + "~:name": "Rectangle", + "~:width": 132.99988108872617, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1290.9999830126974, + "~:y": 712.9999523162842 + } + }, + { + "~#point": { + "~:x": 1423.9998641014236, + "~:y": 712.9999523162842 + } + }, + { + "~#point": { + "~:x": 1423.9998641014236, + "~:y": 845.9999523162842 + } + }, + { + "~#point": { + "~:x": 1290.9999830126974, + "~:y": 845.9999523162842 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf498a8953", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1290.9999830126974, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1290.9999830126974, + "~:y": 712.9999523162842, + "~:width": 132.99988108872617, + "~:height": 133, + "~:x1": 1290.9999830126974, + "~:y1": 712.9999523162842, + "~:x2": 1423.9998641014236, + "~:y2": 845.9999523162842 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51d018fe482c": { + "~#shape": { + "~:y": 953, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.99993658065796, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 940.0000028610241, + "~:y": 953 + } + }, + { + "~#point": { + "~:x": 1072.999939441682, + "~:y": 953 + } + }, + { + "~#point": { + "~:x": 1072.999939441682, + "~:y": 1086 + } + }, + { + "~#point": { + "~:x": 940.0000028610241, + "~:y": 1086 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51d018fe482c", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 940.0000028610241, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 940.0000028610241, + "~:y": 953, + "~:width": 132.99993658065796, + "~:height": 133, + "~:x1": 940.0000028610241, + "~:y1": 953, + "~:x2": 1072.999939441682, + "~:y2": 1086 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ce15316f30": { + "~#shape": { + "~:y": 364, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:darken", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 459, + "~:y": 364 + } + }, + { + "~#point": { + "~:x": 592, + "~:y": 364 + } + }, + { + "~#point": { + "~:x": 592, + "~:y": 497 + } + }, + { + "~#point": { + "~:x": 459, + "~:y": 497 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51ce15316f30", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 459, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 459, + "~:y": 364, + "~:width": 133, + "~:height": 133, + "~:x1": 459, + "~:y1": 364, + "~:x2": 592, + "~:y2": 497 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ce15316f2f": { + "~#shape": { + "~:y": 297, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 392, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 525, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 525, + "~:y": 430 + } + }, + { + "~#point": { + "~:x": 392, + "~:y": 430 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51ce15316f2f", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 392, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 392, + "~:y": 297, + "~:width": 133, + "~:height": 133, + "~:x1": 392, + "~:y1": 297, + "~:x2": 525, + "~:y2": 430 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf294c69ae": { + "~#shape": { + "~:y": 620, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.99996829032898, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1200.9999477863294, + "~:y": 620 + } + }, + { + "~#point": { + "~:x": 1333.9999160766583, + "~:y": 620 + } + }, + { + "~#point": { + "~:x": 1333.9999160766583, + "~:y": 753 + } + }, + { + "~#point": { + "~:x": 1200.9999477863294, + "~:y": 753 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cf294c69ae", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1200.9999477863294, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1200.9999477863294, + "~:y": 620, + "~:width": 132.99996829032898, + "~:height": 133, + "~:x1": 1200.9999477863294, + "~:y1": 620, + "~:x2": 1333.9999160766583, + "~:y2": 753 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf565b4e8f": { + "~#shape": { + "~:y": 705.0000066757202, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:overlay", + "~:name": "Rectangle", + "~:width": 132.99999999999244, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 471.00003004074625, + "~:y": 705.0000066757202 + } + }, + { + "~#point": { + "~:x": 604.0000300407387, + "~:y": 705.0000066757202 + } + }, + { + "~#point": { + "~:x": 604.0000300407387, + "~:y": 838.0000700950623 + } + }, + { + "~#point": { + "~:x": 471.00003004074625, + "~:y": 838.0000700950623 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf565b4e8f", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 471.00003004074625, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 471.00003004074625, + "~:y": 705.0000066757202, + "~:width": 132.99999999999244, + "~:height": 133.00006341934204, + "~:x1": 471.00003004074625, + "~:y1": 705.0000066757202, + "~:x2": 604.0000300407387, + "~:y2": 838.0000700950623 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133.00006341934204, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cdff29090d": { + "~#shape": { + "~:y": 297, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 123, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 256, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 256, + "~:y": 430 + } + }, + { + "~#point": { + "~:x": 123, + "~:y": 430 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cdff29090d", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 123, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 123, + "~:y": 297, + "~:width": 133, + "~:height": 133, + "~:x1": 123, + "~:y1": 297, + "~:x2": 256, + "~:y2": 430 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf294c69af": { + "~#shape": { + "~:y": 687, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:difference", + "~:name": "Rectangle", + "~:width": 132.99996829032898, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1267.99995470047, + "~:y": 687 + } + }, + { + "~#point": { + "~:x": 1400.999922990799, + "~:y": 687 + } + }, + { + "~#point": { + "~:x": 1400.999922990799, + "~:y": 820 + } + }, + { + "~#point": { + "~:x": 1267.99995470047, + "~:y": 820 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf294c69af", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1267.99995470047, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1267.99995470047, + "~:y": 687, + "~:width": 132.99996829032898, + "~:height": 133, + "~:x1": 1267.99995470047, + "~:y1": 687, + "~:x2": 1400.999922990799, + "~:y2": 820 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ce041bd6ac": { + "~#shape": { + "~:y": 364, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 190, + "~:y": 364 + } + }, + { + "~#point": { + "~:x": 323, + "~:y": 364 + } + }, + { + "~#point": { + "~:x": 323, + "~:y": 497 + } + }, + { + "~#point": { + "~:x": 190, + "~:y": 497 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 0.5, + "~:id": "~ua40b06a7-8291-8016-8006-51ce041bd6ac", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 190, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 190, + "~:y": 364, + "~:width": 133, + "~:height": 133, + "~:x1": 190, + "~:y1": 364, + "~:x2": 323, + "~:y2": 497 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfe77a3baa": { + "~#shape": { + "~:y": 1054.9999537467957, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:saturation", + "~:name": "Rectangle", + "~:width": 132.99996829032898, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 479.00001049041896, + "~:y": 1054.9999537467957 + } + }, + { + "~#point": { + "~:x": 611.9999787807479, + "~:y": 1054.9999537467957 + } + }, + { + "~#point": { + "~:x": 611.9999787807479, + "~:y": 1187.9999537467957 + } + }, + { + "~#point": { + "~:x": 479.00001049041896, + "~:y": 1187.9999537467957 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfe77a3baa", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 479.00001049041896, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 479.00001049041896, + "~:y": 1054.9999537467957, + "~:width": 132.99996829032898, + "~:height": 133, + "~:x1": 479.00001049041896, + "~:y1": 1054.9999537467957, + "~:x2": 611.9999787807479, + "~:y2": 1187.9999537467957 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfa3d9a62a": { + "~#shape": { + "~:y": 383.00002670288086, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:screen", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1559.9999475479126, + "~:y": 383.00002670288086 + } + }, + { + "~#point": { + "~:x": 1692.9999475479126, + "~:y": 383.00002670288086 + } + }, + { + "~#point": { + "~:x": 1692.9999475479126, + "~:y": 516.0000267028809 + } + }, + { + "~#point": { + "~:x": 1559.9999475479126, + "~:y": 516.0000267028809 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfa3d9a62a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1559.9999475479126, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1559.9999475479126, + "~:y": 383.00002670288086, + "~:width": 133, + "~:height": 133, + "~:x1": 1559.9999475479126, + "~:y1": 383.00002670288086, + "~:x2": 1692.9999475479126, + "~:y2": 516.0000267028809 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf011ebdaa": { + "~#shape": { + "~:y": 620, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.99993658065796, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 939.0000100135767, + "~:y": 620 + } + }, + { + "~#point": { + "~:x": 1071.9999465942346, + "~:y": 620 + } + }, + { + "~#point": { + "~:x": 1071.9999465942346, + "~:y": 753 + } + }, + { + "~#point": { + "~:x": 939.0000100135767, + "~:y": 753 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cf011ebdaa", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 939.0000100135767, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 939.0000100135767, + "~:y": 620, + "~:width": 132.99993658065796, + "~:height": 133, + "~:x1": 939.0000100135767, + "~:y1": 620, + "~:x2": 1071.9999465942346, + "~:y2": 753 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfff4ec08a": { + "~#shape": { + "~:y": 961.9999394118786, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.99996829029874, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 666.0000050067864, + "~:y": 961.9999394118786 + } + }, + { + "~#point": { + "~:x": 798.9999732970851, + "~:y": 961.9999394118786 + } + }, + { + "~#point": { + "~:x": 798.9999732970851, + "~:y": 1094.9999394118786 + } + }, + { + "~#point": { + "~:x": 666.0000050067864, + "~:y": 1094.9999394118786 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cfff4ec08a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 666.0000050067864, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 666.0000050067864, + "~:y": 961.9999394118786, + "~:width": 132.99996829029874, + "~:height": 133, + "~:x1": 666.0000050067864, + "~:y1": 961.9999394118786, + "~:x2": 798.9999732970851, + "~:y2": 1094.9999394118786 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf5cb4b66b": { + "~#shape": { + "~:y": 704.0000343322754, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:soft-light", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 740.0000348091125, + "~:y": 704.0000343322754 + } + }, + { + "~#point": { + "~:x": 873.0000348091125, + "~:y": 704.0000343322754 + } + }, + { + "~#point": { + "~:x": 873.0000348091125, + "~:y": 837.0000343322754 + } + }, + { + "~#point": { + "~:x": 740.0000348091125, + "~:y": 837.0000343322754 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf5cb4b66b", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 740.0000348091125, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 740.0000348091125, + "~:y": 704.0000343322754, + "~:width": 133, + "~:height": 133, + "~:x1": 740.0000348091125, + "~:y1": 704.0000343322754, + "~:x2": 873.0000348091125, + "~:y2": 837.0000343322754 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ceaec3728a": { + "~#shape": { + "~:y": 363.00001335144043, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:screen", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1537.9999437332153, + "~:y": 363.00001335144043 + } + }, + { + "~#point": { + "~:x": 1670.9999437332153, + "~:y": 363.00001335144043 + } + }, + { + "~#point": { + "~:x": 1670.9999437332153, + "~:y": 496.00001335144043 + } + }, + { + "~#point": { + "~:x": 1537.9999437332153, + "~:y": 496.00001335144043 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51ceaec3728a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1537.9999437332153, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1537.9999437332153, + "~:y": 363.00001335144043, + "~:width": 133, + "~:height": 133, + "~:x1": 1537.9999437332153, + "~:y1": 363.00001335144043, + "~:x2": 1670.9999437332153, + "~:y2": 496.00001335144043 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf011ebdab": { + "~#shape": { + "~:y": 687, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:hard-light", + "~:name": "Rectangle", + "~:width": 132.99993658065796, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1006.0000314712524, + "~:y": 687 + } + }, + { + "~#point": { + "~:x": 1138.9999680519104, + "~:y": 687 + } + }, + { + "~#point": { + "~:x": 1138.9999680519104, + "~:y": 820 + } + }, + { + "~#point": { + "~:x": 1006.0000314712524, + "~:y": 820 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf011ebdab", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1006.0000314712524, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1006.0000314712524, + "~:y": 687, + "~:width": 132.99993658065796, + "~:height": 133, + "~:x1": 1006.0000314712524, + "~:y1": 687, + "~:x2": 1138.9999680519104, + "~:y2": 820 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf8dad1fe8": { + "~#shape": { + "~:y": 704.0000438690186, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:color-dodge", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 208.00000619888306, + "~:y": 704.0000438690186 + } + }, + { + "~#point": { + "~:x": 341.00000619888306, + "~:y": 704.0000438690186 + } + }, + { + "~#point": { + "~:x": 341.00000619888306, + "~:y": 837.0000438690186 + } + }, + { + "~#point": { + "~:x": 208.00000619888306, + "~:y": 837.0000438690186 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf8dad1fe8", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 208.00000619888306, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 208.00000619888306, + "~:y": 704.0000438690186, + "~:width": 133, + "~:height": 133, + "~:x1": 208.00000619888306, + "~:y1": 704.0000438690186, + "~:x2": 341.00000619888306, + "~:y2": 837.0000438690186 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfe77a3ba8": { + "~#shape": { + "~:y": 962.0000433921814, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 132.99996829029874, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 390.0000026226006, + "~:y": 962.0000433921814 + } + }, + { + "~#point": { + "~:x": 522.9999709128994, + "~:y": 962.0000433921814 + } + }, + { + "~#point": { + "~:x": 522.9999709128994, + "~:y": 1095.0000433921814 + } + }, + { + "~#point": { + "~:x": 390.0000026226006, + "~:y": 1095.0000433921814 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cfe77a3ba8", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 390.0000026226006, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 390.0000026226006, + "~:y": 962.0000433921814, + "~:width": 132.99996829029874, + "~:height": 133, + "~:x1": 390.0000026226006, + "~:y1": 962.0000433921814, + "~:x2": 522.9999709128994, + "~:y2": 1095.0000433921814 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ceaec37289": { + "~#shape": { + "~:y": 296.00001335144043, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1470.9999437332153, + "~:y": 296.00001335144043 + } + }, + { + "~#point": { + "~:x": 1603.9999437332153, + "~:y": 296.00001335144043 + } + }, + { + "~#point": { + "~:x": 1603.9999437332153, + "~:y": 429.00001335144043 + } + }, + { + "~#point": { + "~:x": 1470.9999437332153, + "~:y": 429.00001335144043 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51ceaec37289", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1470.9999437332153, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1470.9999437332153, + "~:y": 296.00001335144043, + "~:width": 133, + "~:height": 133, + "~:x1": 1470.9999437332153, + "~:y1": 296.00001335144043, + "~:x2": 1603.9999437332153, + "~:y2": 429.00001335144043 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cfe77a3ba9": { + "~#shape": { + "~:y": 1029.0000433921814, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:saturation", + "~:name": "Rectangle", + "~:width": 132.9999999999925, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 456.99997615814823, + "~:y": 1029.0000433921814 + } + }, + { + "~#point": { + "~:x": 589.9999761581407, + "~:y": 1029.0000433921814 + } + }, + { + "~#point": { + "~:x": 589.9999761581407, + "~:y": 1162.0000433921814 + } + }, + { + "~#point": { + "~:x": 456.99997615814823, + "~:y": 1162.0000433921814 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cfe77a3ba9", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 456.99997615814823, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 456.99997615814823, + "~:y": 1029.0000433921814, + "~:width": 132.9999999999925, + "~:height": 133, + "~:x1": 456.99997615814823, + "~:y1": 1029.0000433921814, + "~:x2": 589.9999761581407, + "~:y2": 1162.0000433921814 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf5060dd29": { + "~#shape": { + "~:y": 713.0000324249268, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:hard-light", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1027.9999351501465, + "~:y": 713.0000324249268 + } + }, + { + "~#point": { + "~:x": 1160.9999351501465, + "~:y": 713.0000324249268 + } + }, + { + "~#point": { + "~:x": 1160.9999351501465, + "~:y": 846.0000324249268 + } + }, + { + "~#point": { + "~:x": 1027.9999351501465, + "~:y": 846.0000324249268 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf5060dd29", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1027.9999351501465, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1027.9999351501465, + "~:y": 713.0000324249268, + "~:width": 133, + "~:height": 133, + "~:x1": 1027.9999351501465, + "~:y1": 713.0000324249268, + "~:x2": 1160.9999351501465, + "~:y2": 846.0000324249268 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cec0b7d887": { + "~#shape": { + "~:y": 687.0000152587891, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:color-dodge", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 191.00001192092896, + "~:y": 687.0000152587891 + } + }, + { + "~#point": { + "~:x": 324.00001192092896, + "~:y": 687.0000152587891 + } + }, + { + "~#point": { + "~:x": 324.00001192092896, + "~:y": 820.0000152587891 + } + }, + { + "~#point": { + "~:x": 191.00001192092896, + "~:y": 820.0000152587891 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cec0b7d887", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 191.00001192092896, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 191.00001192092896, + "~:y": 687.0000152587891, + "~:width": 133, + "~:height": 133, + "~:x1": 191.00001192092896, + "~:y1": 687.0000152587891, + "~:x2": 324.00001192092896, + "~:y2": 820.0000152587891 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ced0237746": { + "~#shape": { + "~:y": 687.0000152587891, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:overlay", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 455.00001192092896, + "~:y": 687.0000152587891 + } + }, + { + "~#point": { + "~:x": 588.000011920929, + "~:y": 687.0000152587891 + } + }, + { + "~#point": { + "~:x": 588.000011920929, + "~:y": 820.0000152587891 + } + }, + { + "~#point": { + "~:x": 455.00001192092896, + "~:y": 820.0000152587891 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51ced0237746", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 455.00001192092896, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 455.00001192092896, + "~:y": 687.0000152587891, + "~:width": 133, + "~:height": 133, + "~:x1": 455.00001192092896, + "~:y1": 687.0000152587891, + "~:x2": 588.000011920929, + "~:y2": 820.0000152587891 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cec0b7d886": { + "~#shape": { + "~:y": 620.0000152587891, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 124.00000429153442, + "~:y": 620.0000152587891 + } + }, + { + "~#point": { + "~:x": 257.0000042915344, + "~:y": 620.0000152587891 + } + }, + { + "~#point": { + "~:x": 257.0000042915344, + "~:y": 753.0000152587891 + } + }, + { + "~#point": { + "~:x": 124.00000429153442, + "~:y": 753.0000152587891 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cec0b7d886", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 124.00000429153442, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 124.00000429153442, + "~:y": 620.0000152587891, + "~:width": 133, + "~:height": 133, + "~:x1": 124.00000429153442, + "~:y1": 620.0000152587891, + "~:x2": 257.0000042915344, + "~:y2": 753.0000152587891 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ced0237745": { + "~#shape": { + "~:y": 620.0000152587891, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 388.00001192092896, + "~:y": 620.0000152587891 + } + }, + { + "~#point": { + "~:x": 521.000011920929, + "~:y": 620.0000152587891 + } + }, + { + "~#point": { + "~:x": 521.000011920929, + "~:y": 753.0000152587891 + } + }, + { + "~#point": { + "~:x": 388.00001192092896, + "~:y": 753.0000152587891 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51ced0237745", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 388.00001192092896, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 388.00001192092896, + "~:y": 620.0000152587891, + "~:width": 133, + "~:height": 133, + "~:x1": 388.00001192092896, + "~:y1": 620.0000152587891, + "~:x2": 521.000011920929, + "~:y2": 753.0000152587891 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ce29981ae5": { + "~#shape": { + "~:y": 297, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 661, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 794, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 794, + "~:y": 430 + } + }, + { + "~#point": { + "~:x": 661, + "~:y": 430 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51ce29981ae5", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 661, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 661, + "~:y": 297, + "~:width": 133, + "~:height": 133, + "~:x1": 661, + "~:y1": 297, + "~:x2": 794, + "~:y2": 430 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cea3bdf925": { + "~#shape": { + "~:y": 363.00001335144043, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:lighten", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1268.9999437332153, + "~:y": 363.00001335144043 + } + }, + { + "~#point": { + "~:x": 1401.9999437332153, + "~:y": 363.00001335144043 + } + }, + { + "~#point": { + "~:x": 1401.9999437332153, + "~:y": 496.00001335144043 + } + }, + { + "~#point": { + "~:x": 1268.9999437332153, + "~:y": 496.00001335144043 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cea3bdf925", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1268.9999437332153, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1268.9999437332153, + "~:y": 363.00001335144043, + "~:width": 133, + "~:height": 133, + "~:x1": 1268.9999437332153, + "~:y1": 363.00001335144043, + "~:x2": 1401.9999437332153, + "~:y2": 496.00001335144043 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51ce29981ae4": { + "~#shape": { + "~:y": 364, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:multiply", + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 728, + "~:y": 364 + } + }, + { + "~#point": { + "~:x": 861, + "~:y": 364 + } + }, + { + "~#point": { + "~:x": 861, + "~:y": 497 + } + }, + { + "~#point": { + "~:x": 728, + "~:y": 497 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51ce29981ae4", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 728, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 728, + "~:y": 364, + "~:width": 133, + "~:height": 133, + "~:x1": 728, + "~:y1": 364, + "~:x2": 861, + "~:y2": 497 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cea3bdf924": { + "~#shape": { + "~:y": 296.00001335144043, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 133, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1201.9999437332153, + "~:y": 296.00001335144043 + } + }, + { + "~#point": { + "~:x": 1334.9999437332153, + "~:y": 296.00001335144043 + } + }, + { + "~#point": { + "~:x": 1334.9999437332153, + "~:y": 429.00001335144043 + } + }, + { + "~#point": { + "~:x": 1201.9999437332153, + "~:y": 429.00001335144043 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ua40b06a7-8291-8016-8006-51cea3bdf924", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1201.9999437332153, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1201.9999437332153, + "~:y": 296.00001335144043, + "~:width": 133, + "~:height": 133, + "~:x1": 1201.9999437332153, + "~:y1": 296.00001335144043, + "~:x2": 1334.9999437332153, + "~:y2": 429.00001335144043 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + }, + "~ua40b06a7-8291-8016-8006-51cf64d90820": { + "~#shape": { + "~:y": 710.9999618530273, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:blend-mode": "~:exclusion", + "~:name": "Rectangle", + "~:width": 132.99996829029874, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1565.999957084684, + "~:y": 710.9999618530273 + } + }, + { + "~#point": { + "~:x": 1698.9999253749827, + "~:y": 710.9999618530273 + } + }, + { + "~#point": { + "~:x": 1698.9999253749827, + "~:y": 843.9999618530273 + } + }, + { + "~#point": { + "~:x": 1565.999957084684, + "~:y": 843.9999618530273 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:opacity": 1, + "~:id": "~ua40b06a7-8291-8016-8006-51cf64d90820", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1565.999957084684, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1565.999957084684, + "~:y": 710.9999618530273, + "~:width": 132.99996829029874, + "~:height": 133, + "~:x1": 1565.999957084684, + "~:y1": 710.9999618530273, + "~:x2": 1698.9999253749827, + "~:y2": 843.9999618530273 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 133, + "~:flip-y": null + } + } + }, + "~:id": "~uc0939f58-37bc-805d-8006-51cdf8e18e77", + "~:name": "Page 1" + } + }, + "~:id": "~uc0939f58-37bc-805d-8006-51cdf8e18e76", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/get-file-multiple-fills.json b/frontend/playwright/data/render-wasm/get-file-multiple-fills.json new file mode 100644 index 0000000000..a182967562 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-multiple-fills.json @@ -0,0 +1,633 @@ +{ + "~: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": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~: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": "Multiple fills", + "~:revn": 19, + "~:modified-at": "~m1749564220299", + "~:vern": 0, + "~:id": "~uc0939f58-37bc-805d-8006-51cd3a51c255", + "~: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", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content", + "0004-add-partial-text-touched-flags", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0004-clean-shadow-and-colors", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-opacity", + "0009-add-partial-text-touched-flags" + ] + }, + "~:version": 67, + "~:project-id": "~u53a7ff09-2228-81d3-8006-4b5ea964593b", + "~:created-at": "~m1749564032332", + "~:data": { + "~:pages": [ + "~uc0939f58-37bc-805d-8006-51cd3a51c256" + ], + "~:pages-index": { + "~uc0939f58-37bc-805d-8006-51cd3a51c256": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.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.0, + "~: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": [ + "~ub688a894-3697-80d3-8006-51cd477981bc", + "~ub688a894-3697-80d3-8006-51cd5504e381", + "~ub688a894-3697-80d3-8006-51cd5de7c5f3", + "~ub688a894-3697-80d3-8006-51cd67bc1de9" + ] + } + }, + "~ub688a894-3697-80d3-8006-51cd477981bc": { + "~#shape": { + "~:y": 297, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 153, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 239, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 392, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 392, + "~:y": 441 + } + }, + { + "~#point": { + "~:x": 239, + "~:y": 441 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub688a894-3697-80d3-8006-51cd477981bc", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 239, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 239, + "~:y": 297, + "~:width": 153, + "~:height": 144, + "~:x1": 239, + "~:y1": 297, + "~:x2": 392, + "~:y2": 441 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 1 + }, + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 144, + "~:flip-y": null + } + }, + "~ub688a894-3697-80d3-8006-51cd5504e381": { + "~#shape": { + "~:y": 297, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 153, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 442, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 595, + "~:y": 297 + } + }, + { + "~#point": { + "~:x": 595, + "~:y": 441 + } + }, + { + "~#point": { + "~:x": 442, + "~:y": 441 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub688a894-3697-80d3-8006-51cd5504e381", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 442, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 442, + "~:y": 297, + "~:width": 153, + "~:height": 144, + "~:x1": 442, + "~:y1": 297, + "~:x2": 595, + "~:y2": 441 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 0.5 + }, + { + "~:fill-color": "#003fff", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 144, + "~:flip-y": null + } + }, + "~ub688a894-3697-80d3-8006-51cd5de7c5f3": { + "~#shape": { + "~:y": 476.99998474121094, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 153, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 239, + "~:y": 476.99998474121094 + } + }, + { + "~#point": { + "~:x": 392, + "~:y": 476.99998474121094 + } + }, + { + "~#point": { + "~:x": 392, + "~:y": 620.9999847412109 + } + }, + { + "~#point": { + "~:x": 239, + "~:y": 620.9999847412109 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub688a894-3697-80d3-8006-51cd5de7c5f3", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 239, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 239, + "~:y": 476.99998474121094, + "~:width": 153, + "~:height": 144, + "~:x1": 239, + "~:y1": 476.99998474121094, + "~:x2": 392, + "~:y2": 620.9999847412109 + } + }, + "~:fills": [ + { + "~:fill-color": "#ff0000", + "~:fill-opacity": 0.5 + }, + { + "~:fill-color-gradient": { + "~:stops": [ + { + "~:color": "#003fff", + "~:offset": 0, + "~:opacity": 1 + }, + { + "~:color": "#003fff", + "~:offset": 1, + "~:opacity": 0 + } + ], + "~:width": 1, + "~:type": "~:linear", + "~:start-x": 0.5, + "~:end-y": 1, + "~:end-x": 0.5, + "~:start-y": 0 + } + } + ], + "~:flip-x": null, + "~:height": 144, + "~:flip-y": null + } + }, + "~ub688a894-3697-80d3-8006-51cd67bc1de9": { + "~#shape": { + "~:y": 476.99998474121094, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 153, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 442, + "~:y": 476.99998474121094 + } + }, + { + "~#point": { + "~:x": 595, + "~:y": 476.99998474121094 + } + }, + { + "~#point": { + "~:x": 595, + "~:y": 620.9999847412109 + } + }, + { + "~#point": { + "~:x": 442, + "~:y": 620.9999847412109 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub688a894-3697-80d3-8006-51cd67bc1de9", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 442, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 442, + "~:y": 476.99998474121094, + "~:width": 153, + "~:height": 144, + "~:x1": 442, + "~:y1": 476.99998474121094, + "~:x2": 595, + "~:y2": 620.9999847412109 + } + }, + "~:fills": [ + { + "~:fill-color-gradient": { + "~:stops": [ + { + "~:color": "#010512", + "~:offset": 0, + "~:opacity": 0 + }, + { + "~:color": "#010512", + "~:offset": 1, + "~:opacity": 1 + } + ], + "~:width": 1, + "~:type": "~:radial", + "~:start-x": 0.5, + "~:end-y": 1, + "~:end-x": 0.5, + "~:start-y": 0.5 + }, + "~:fill-opacity": 0.5 + }, + { + "~:fill-image": { + "~:mtype": "image/jpeg", + "~:name": "Aptenodytes_forsteri_-Snow_Hill_Island,_Antarctica_-adults_and_juvenile-8.jpg", + "~:keep-aspect-ratio": true, + "~:width": 872, + "~:id": "~uc0939f58-37bc-805d-8006-51cda84a405a", + "~:height": 1400 + }, + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 144, + "~:flip-y": null + } + } + }, + "~:id": "~uc0939f58-37bc-805d-8006-51cd3a51c256", + "~:name": "Page 1" + } + }, + "~:id": "~uc0939f58-37bc-805d-8006-51cd3a51c255", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/get-file-multiple-strokes.json b/frontend/playwright/data/render-wasm/get-file-multiple-strokes.json new file mode 100644 index 0000000000..f4c1ec7801 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-multiple-strokes.json @@ -0,0 +1,538 @@ +{ + "~: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": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~: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": "Multiple strokes", + "~:revn": 16, + "~:modified-at": "~m1749564011553", + "~:vern": 0, + "~:id": "~uc0939f58-37bc-805d-8006-51cc78297208", + "~: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", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content", + "0004-add-partial-text-touched-flags", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0004-clean-shadow-and-colors", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-opacity", + "0009-add-partial-text-touched-flags" + ] + }, + "~:version": 67, + "~:project-id": "~u53a7ff09-2228-81d3-8006-4b5ea964593b", + "~:created-at": "~m1749563833517", + "~:data": { + "~:pages": [ + "~uc0939f58-37bc-805d-8006-51cc78297209" + ], + "~:pages-index": { + "~uc0939f58-37bc-805d-8006-51cc78297209": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.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.0, + "~: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": [ + "~ub688a894-3697-80d3-8006-51cc8a55c2fd", + "~ub688a894-3697-80d3-8006-51ccce062cb3", + "~ub688a894-3697-80d3-8006-51ccfa2e6eeb" + ] + } + }, + "~ub688a894-3697-80d3-8006-51cc8a55c2fd": { + "~#shape": { + "~:y": 334, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 147, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 199, + "~:y": 334 + } + }, + { + "~#point": { + "~:x": 346, + "~:y": 334 + } + }, + { + "~#point": { + "~:x": 346, + "~:y": 464 + } + }, + { + "~#point": { + "~:x": 199, + "~:y": 464 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub688a894-3697-80d3-8006-51cc8a55c2fd", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#0000ff", + "~:stroke-opacity": 0.5, + "~:stroke-alignment": "~:outer", + "~:stroke-width": 20 + }, + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#ff0000", + "~:stroke-opacity": 1, + "~:stroke-alignment": "~:center", + "~:stroke-width": 5 + }, + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#000000", + "~:stroke-opacity": 1, + "~:stroke-alignment": "~:inner", + "~:stroke-width": 10 + } + ], + "~:x": 199, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 199, + "~:y": 334, + "~:width": 147, + "~:height": 130, + "~:x1": 199, + "~:y1": 334, + "~:x2": 346, + "~:y2": 464 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 130, + "~:flip-y": null + } + }, + "~ub688a894-3697-80d3-8006-51ccce062cb3": { + "~#shape": { + "~:y": 334, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Ellipse", + "~:width": 130, + "~:type": "~:circle", + "~:points": [ + { + "~#point": { + "~:x": 512.9999961853027, + "~:y": 334 + } + }, + { + "~#point": { + "~:x": 642.9999961853027, + "~:y": 334 + } + }, + { + "~#point": { + "~:x": 642.9999961853027, + "~:y": 459 + } + }, + { + "~#point": { + "~:x": 512.9999961853027, + "~:y": 459 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~ub688a894-3697-80d3-8006-51ccce062cb3", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#0000ff", + "~:stroke-opacity": 0.5, + "~:stroke-alignment": "~:outer", + "~:stroke-width": 20 + }, + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#ff0000", + "~:stroke-opacity": 1, + "~:stroke-alignment": "~:center", + "~:stroke-width": 5 + }, + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#000000", + "~:stroke-opacity": 1, + "~:stroke-alignment": "~:inner", + "~:stroke-width": 10 + } + ], + "~:x": 512.9999961853027, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 512.9999961853027, + "~:y": 334, + "~:width": 130, + "~:height": 125, + "~:x1": 512.9999961853027, + "~:y1": 334, + "~:x2": 642.9999961853027, + "~:y2": 459 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 125, + "~:flip-y": null + } + }, + "~ub688a894-3697-80d3-8006-51ccfa2e6eeb": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAACm6Y9DAAAJRAMAAADAyXlD4wIQRCW0I0NPCiJE9sBWQzqOK0QDAAAA4+aEQyUSNUS++9dDuQojRDj3xUPoxhlEAwAAALLys0MYgxBEpumPQwAACUSm6Y9DAAAJRA==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 198.9999999038273, + "~:y": 547.9999675750732 + } + }, + { + "~#point": { + "~:x": 401.00001319474995, + "~:y": 547.9999675750732 + } + }, + { + "~#point": { + "~:x": 401.00001319474995, + "~:y": 696.9999543199095 + } + }, + { + "~#point": { + "~:x": 198.9999999038273, + "~:y": 696.9999543199095 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~ub688a894-3697-80d3-8006-51ccfa2e6eeb", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#0000ff", + "~:stroke-opacity": 0.5, + "~:stroke-alignment": "~:outer", + "~:stroke-width": 20 + }, + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#ff0000", + "~:stroke-opacity": 1, + "~:stroke-alignment": "~:center", + "~:stroke-width": 5 + }, + { + "~:stroke-style": "~:solid", + "~:stroke-color": "#000000", + "~:stroke-opacity": 1, + "~:stroke-alignment": "~:inner", + "~:stroke-width": 10 + } + ], + "~:x": null, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 198.9999999038273, + "~:y": 547.9999675750732, + "~:width": 202.00001329092265, + "~:height": 148.9999867448363, + "~:x1": 198.9999999038273, + "~:y1": 547.9999675750732, + "~:x2": 401.00001319474995, + "~:y2": 696.9999543199095 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + } + }, + "~:id": "~uc0939f58-37bc-805d-8006-51cc78297209", + "~:name": "Page 1" + } + }, + "~:id": "~uc0939f58-37bc-805d-8006-51cc78297208", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/get-file-text-custom-fonts.json b/frontend/playwright/data/render-wasm/get-file-text-custom-fonts.json new file mode 100644 index 0000000000..3bbc2f87bb --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-text-custom-fonts.json @@ -0,0 +1,486 @@ +{ + "~: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": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~: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": "Text: Custom Fonts", + "~:revn": 13, + "~:modified-at": "~m1750151641034", + "~:vern": 0, + "~:id": "~u434b0541-fa2f-802f-8006-59827d964a9b", + "~: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", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content", + "0004-clean-shadow-and-colors", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-opacity", + "0009-add-partial-text-touched-flags" + ] + }, + "~:version": 67, + "~:project-id": "~u53a7ff09-2228-81d3-8006-4b5ea964593b", + "~:created-at": "~m1750081311326", + "~:data": { + "~:pages": [ + "~u434b0541-fa2f-802f-8006-59827d964a9c" + ], + "~:pages-index": { + "~u434b0541-fa2f-802f-8006-59827d964a9c": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.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.0, + "~: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": [ + "~u7d85a63e-18e7-809f-8006-59827fe8501e", + "~u7d85a63e-18e7-809f-8006-59833ef5fcef" + ] + } + }, + "~u7d85a63e-18e7-809f-8006-59827fe8501e": { + "~#shape": { + "~:y": 451.9999962296588, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:key": "xgmgu1frox", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:font-id": "custom-7d85a63e-18e7-809f-8006-5983057a9b7c", + "~:key": "ee7vl7klqs", + "~:font-size": "72", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:font-variant-id": "normal-400", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"Nodesto Caps Condensed\"", + "~:text": "Penpot & Dragons" + } + ], + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "center", + "~:font-id": "custom-7d85a63e-18e7-809f-8006-5983057a9b7c", + "~:key": "17bt2f4evfs", + "~:font-size": "72", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "normal-400", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"Nodesto Caps Condensed\"" + } + ] + } + ], + "~:vertical-align": "top" + }, + "~:hide-in-viewer": false, + "~:name": "Penpot & Dragons", + "~:width": 403.99995992417394, + "~:type": "~:text", + "~:points": [ + { + "~#point": { + "~:x": 744.0000211580308, + "~:y": 451.9999962296588 + } + }, + { + "~#point": { + "~:x": 1147.9999810822046, + "~:y": 451.9999962296588 + } + }, + { + "~#point": { + "~:x": 1147.9999810822046, + "~:y": 537.9999971833331 + } + }, + { + "~#point": { + "~:x": 744.0000211580308, + "~:y": 537.9999971833331 + } + } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u7d85a63e-18e7-809f-8006-59827fe8501e", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:x": 744.0000211580307, + "~:selrect": { + "~#rect": { + "~:x": 744.0000211580307, + "~:y": 451.9999962296588, + "~:width": 403.99995992417394, + "~:height": 86.00000095367432, + "~:x1": 744.0000211580307, + "~:y1": 451.9999962296588, + "~:x2": 1147.9999810822046, + "~:y2": 537.9999971833331 + } + }, + "~:flip-x": null, + "~:height": 86.00000095367432, + "~:flip-y": null + } + }, + "~u7d85a63e-18e7-809f-8006-59833ef5fcef": { + "~#shape": { + "~:y": 537.9999971833331, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:key": "xgmgu1frox", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:font-id": "custom-7d85a63e-18e7-809f-8006-59832d696634", + "~:key": "ee7vl7klqs", + "~:font-size": "36", + "~:font-weight": "500", + "~:typography-ref-file": null, + "~:font-variant-id": "normal-500", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"Mr Eaves SC Remake\"", + "~:text": "Lorem Ipsum Dolors Sit Amet" + } + ], + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "center", + "~:font-id": "custom-7d85a63e-18e7-809f-8006-59832d696634", + "~:key": "17bt2f4evfs", + "~:font-size": "0", + "~:font-weight": "500", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "normal-500", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"Mr Eaves SC Remake\"" + } + ] + } + ], + "~:vertical-align": "top" + }, + "~:hide-in-viewer": false, + "~:name": "Penpot & Dragons", + "~:width": 466.0000131576671, + "~:type": "~:text", + "~:points": [ + { + "~#point": { + "~:x": 712.9999941849438, + "~:y": 537.9999971833331 + } + }, + { + "~#point": { + "~:x": 1179.0000073426108, + "~:y": 537.9999971833331 + } + }, + { + "~#point": { + "~:x": 1179.0000073426108, + "~:y": 580.9999976601703 + } + }, + { + "~#point": { + "~:x": 712.9999941849438, + "~:y": 580.9999976601703 + } + } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u7d85a63e-18e7-809f-8006-59833ef5fcef", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:x": 712.9999941849437, + "~:selrect": { + "~#rect": { + "~:x": 712.9999941849437, + "~:y": 537.9999971833331, + "~:width": 466.0000131576671, + "~:height": 43.00000047683716, + "~:x1": 712.9999941849437, + "~:y1": 537.9999971833331, + "~:x2": 1179.0000073426108, + "~:y2": 580.9999976601703 + } + }, + "~:flip-x": null, + "~:height": 43.00000047683716, + "~:flip-y": null + } + } + }, + "~:id": "~u434b0541-fa2f-802f-8006-59827d964a9c", + "~:name": "Page 1" + } + }, + "~:id": "~u434b0541-fa2f-802f-8006-59827d964a9b", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/get-file-text-google-fonts.json b/frontend/playwright/data/render-wasm/get-file-text-google-fonts.json new file mode 100644 index 0000000000..3cd2ddce0d --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-text-google-fonts.json @@ -0,0 +1,420 @@ +{ + "~: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": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~: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": "Text: Google Fonts", + "~:revn": 9, + "~:modified-at": "~m1750150559868", + "~:vern": 0, + "~:id": "~u434b0541-fa2f-802f-8006-5981e47bd732", + "~: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", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content", + "0004-clean-shadow-and-colors", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-opacity", + "0009-add-partial-text-touched-flags" + ] + }, + "~:version": 67, + "~:project-id": "~u53a7ff09-2228-81d3-8006-4b5ea964593b", + "~:created-at": "~m1750081154582", + "~:data": { + "~:pages": [ + "~u434b0541-fa2f-802f-8006-5981e47bd733" + ], + "~:pages-index": { + "~u434b0541-fa2f-802f-8006-5981e47bd733": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.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.0, + "~: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": [ + "~u83b40135-4e19-8020-8006-598226885685" + ] + } + }, + "~u83b40135-4e19-8020-8006-598226885685": { + "~#shape": { + "~:y": 399.99997901916055, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~:type": "root", + "~:key": "u3udm63y8h", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:font-id": "gfont-eb-garamond", + "~:key": "hjb7822r9z", + "~:font-size": "36", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"EB Garamond\"", + "~:text": "This is an example text" + } + ], + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-eb-garamond", + "~:key": "2dka2139qgl", + "~:font-size": "36", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"EB Garamond\"" + }, + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:font-id": "gfont-eb-garamond", + "~:key": "26bngh5on3d", + "~:font-size": "36", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"EB Garamond\"", + "~:text": "with " + }, + { + "~:line-height": "", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:font-id": "gfont-fira-code", + "~:key": "23oemgkf8le", + "~:font-size": "36", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"Fira Code\"", + "~:text": "Google Fonts" + } + ], + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "gfont-fira-code", + "~:key": "1dxk7oihnqh", + "~:font-size": "36", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "\"Fira Code\"" + } + ] + } + ], + "~:vertical-align": "top" + }, + "~:hide-in-viewer": false, + "~:name": "This is an example textwith Google Fonts", + "~:width": 325.00011493483566, + "~:type": "~:text", + "~:points": [ + { + "~#point": { + "~:x": 680.9999634764606, + "~:y": 399.9999790191605 + } + }, + { + "~#point": { + "~:x": 1006.0000784112963, + "~:y": 399.9999790191605 + } + }, + { + "~#point": { + "~:x": 1006.0000784112963, + "~:y": 658.0000126361805 + } + }, + { + "~#point": { + "~:x": 680.9999634764606, + "~:y": 658.0000126361805 + } + } + ], + "~:layout-item-h-sizing": "~:fix", + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u83b40135-4e19-8020-8006-598226885685", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:x": 680.9999634764606, + "~:selrect": { + "~#rect": { + "~:x": 680.9999634764606, + "~:y": 399.99997901916055, + "~:width": 325.00011493483566, + "~:height": 258.00003361702, + "~:x1": 680.9999634764606, + "~:y1": 399.99997901916055, + "~:x2": 1006.0000784112963, + "~:y2": 658.0000126361806 + } + }, + "~:flip-x": null, + "~:height": 258.00003361702, + "~:flip-y": null + } + } + }, + "~:id": "~u434b0541-fa2f-802f-8006-5981e47bd733", + "~:name": "Page 1" + } + }, + "~:id": "~u434b0541-fa2f-802f-8006-5981e47bd732", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/get-font-variants-custom-fonts.json b/frontend/playwright/data/render-wasm/get-font-variants-custom-fonts.json new file mode 100644 index 0000000000..5df269f70d --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-font-variants-custom-fonts.json @@ -0,0 +1,106 @@ +[ + { + "~:font-style": "normal", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-5983057a9b7c", + "~:font-weight": 400, + "~:ttf-file-id": "~u69e76833-0816-49fa-8c7b-4b97c71c6f1a", + "~:modified-at": "~m1750081452108", + "~:otf-file-id": "~uf7ea405b-73be-40d7-8ce4-fbf734696997", + "~:id": "~u434b0541-fa2f-802f-8006-5983078ad50e", + "~:woff1-file-id": "~uaef0b0c5-56de-47c7-bd99-fb5e249ccef9", + "~:created-at": "~m1750081452108", + "~:font-family": "Nodesto Caps Condensed" + }, + { + "~:font-style": "italic", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-5983057a9b7c", + "~:font-weight": 400, + "~:ttf-file-id": "~uc45955ee-8c16-47ce-a89e-1a2faadb4178", + "~:modified-at": "~m1750081452589", + "~:otf-file-id": "~ucc0a799d-34ed-4829-a0de-6d7efec8202c", + "~:id": "~u434b0541-fa2f-802f-8006-59830795b436", + "~:woff1-file-id": "~u9940a178-833e-4a4c-8bc3-64ee09472ea6", + "~:created-at": "~m1750081452589", + "~:font-family": "Nodesto Caps Condensed" + }, + { + "~:font-style": "normal", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-5983057a9b7c", + "~:font-weight": 700, + "~:ttf-file-id": "~u5c59fbdc-46de-456f-8da6-0dcd916e95c1", + "~:modified-at": "~m1750081452631", + "~:otf-file-id": "~uadde63b1-c9f4-484a-bf1c-1121b77d751d", + "~:id": "~u434b0541-fa2f-802f-8006-598307a05c77", + "~:woff1-file-id": "~ucea20394-48af-41a0-8d0f-ada497a5ffe3", + "~:created-at": "~m1750081452631", + "~:font-family": "Nodesto Caps Condensed" + }, + { + "~:font-style": "italic", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-5983057a9b7c", + "~:font-weight": 700, + "~:ttf-file-id": "~u5060a5c4-c7c3-44ea-aa0e-5797d6647ec0", + "~:modified-at": "~m1750081452674", + "~:otf-file-id": "~u1646d986-88d1-4904-910d-663da9e35eef", + "~:id": "~u434b0541-fa2f-802f-8006-598307a94233", + "~:woff1-file-id": "~ue7691712-70d1-49d9-a596-7b4ac495ff15", + "~:created-at": "~m1750081452674", + "~:font-family": "Nodesto Caps Condensed" + }, + { + "~:font-style": "normal", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-59831351af03", + "~:font-weight": 700, + "~:ttf-file-id": "~u3ccf58ee-731c-402f-8b26-5b5049abbe7f", + "~:modified-at": "~m1750081469706", + "~:otf-file-id": "~u96293106-78ff-4683-b819-c1c4c1e44705", + "~:id": "~u434b0541-fa2f-802f-8006-5983185366a8", + "~:woff1-file-id": "~uaf7a782a-c96b-4926-a08a-c6a81a1726dc", + "~:created-at": "~m1750081469706", + "~:font-family": "Bookinsanity Remake" + }, + { + "~:font-style": "normal", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-59831351af03", + "~:font-weight": 400, + "~:ttf-file-id": "~u78583622-dc5d-4780-990f-85afb4ad59e9", + "~:modified-at": "~m1750081469774", + "~:otf-file-id": "~ua5eb4175-91d0-4c61-a471-2d5d0648f8a6", + "~:id": "~u434b0541-fa2f-802f-8006-5983185cde2d", + "~:woff1-file-id": "~u0fcf15c2-59c5-4566-9dc9-9acaf280a518", + "~:created-at": "~m1750081469774", + "~:font-family": "Bookinsanity Remake" + }, + { + "~:font-style": "italic", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-59831351af03", + "~:font-weight": 400, + "~:ttf-file-id": "~u517f4e27-b83f-4a6f-8753-8acaabc49ee9", + "~:modified-at": "~m1750081469812", + "~:otf-file-id": "~u12fe845f-afd2-453d-9ac6-6a899487ba9f", + "~:id": "~u434b0541-fa2f-802f-8006-598318671138", + "~:woff1-file-id": "~u53e0cb17-788e-4dae-aa7c-28f090f87968", + "~:created-at": "~m1750081469812", + "~:font-family": "Bookinsanity Remake" + }, + { + "~:font-style": "normal", + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~:font-id": "~u7d85a63e-18e7-809f-8006-59832d696634", + "~:font-weight": 500, + "~:ttf-file-id": "~u2d1ffeb6-e70b-4027-bbcc-910248ba45f8", + "~:modified-at": "~m1750081492609", + "~:otf-file-id": "~ubcc136ac-da48-4335-af5c-52abc4613490", + "~:id": "~u434b0541-fa2f-802f-8006-59832eb23bb4", + "~:woff1-file-id": "~u01338648-afcc-47aa-8aa7-600c9022bd9f", + "~:created-at": "~m1750081492609", + "~:font-family": "Mr Eaves SC Remake" + } +] \ No newline at end of file diff --git a/frontend/playwright/ui/pages/BasePage.js b/frontend/playwright/ui/pages/BasePage.js index f868e93bc1..e4cea55f8b 100644 --- a/frontend/playwright/ui/pages/BasePage.js +++ b/frontend/playwright/ui/pages/BasePage.js @@ -23,9 +23,41 @@ export class BasePage { ); } + static async mockFileMediaAsset(page, assetId, assetFilename, options) { + const ids = Array.isArray(assetId) ? assetId : [assetId]; + + for (const id of ids) { + const url = `**/assets/by-file-media-id/${id}`; + + await page.route(url, (route) => + route.fulfill({ + path: `playwright/data/${assetFilename}`, + status: 200, + ...options, + }), + ); + } + } + static async mockAsset(page, assetId, assetFilename, options) { const ids = Array.isArray(assetId) ? assetId : [assetId]; + for (const id of ids) { + const url = `**/assets/by-id/${id}`; + + await page.route(url, (route) => + route.fulfill({ + path: `playwright/data/${assetFilename}`, + status: 200, + ...options, + }), + ); + } + } + + static async mockFileMediaAsset(page, assetId, assetFilename, options) { + const ids = Array.isArray(assetId) ? assetId : [assetId]; + for (const id of ids) { const url = `**/assets/by-file-media-id/${id}`; @@ -68,6 +100,15 @@ export class BasePage { return BasePage.mockConfigFlags(this.page, flags); } + async mockFileMediaAsset(assetId, assetFilename, options) { + return BasePage.mockFileMediaAsset( + this.page, + assetId, + assetFilename, + options, + ); + } + async mockAsset(assetId, assetFilename, options) { return BasePage.mockAsset(this.page, assetId, assetFilename, options); } diff --git a/frontend/playwright/ui/pages/WasmWorkspacePage.js b/frontend/playwright/ui/pages/WasmWorkspacePage.js index d5a0ebbc90..07ad4f5fe9 100644 --- a/frontend/playwright/ui/pages/WasmWorkspacePage.js +++ b/frontend/playwright/ui/pages/WasmWorkspacePage.js @@ -28,4 +28,25 @@ export class WasmWorkspacePage extends WorkspacePage { return window.wasmSetObjectsFinished; }); } + + static async mockGoogleFont(page, fontSlug, assetFilename, options = {}) { + const url = new RegExp(`/internal/gfonts/font/${fontSlug}`); + return await page.route(url, (route) => + route.fulfill({ + status: 200, + path: `playwright/data/${assetFilename}`, + contentType: "application/font-ttf", + ...options, + }), + ); + } + + async mockGoogleFont(fontSlug, assetFilename, options) { + return WasmWorkspacePage.mockGoogleFont( + this.page, + fontSlug, + assetFilename, + options, + ); + } } diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js index dacff71ccf..0c99f83787 100644 --- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js +++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js @@ -30,7 +30,7 @@ test("Renders a file with solid, gradient and image fills", async ({ }) => { const workspace = new WasmWorkspacePage(page); await workspace.setupEmptyFile(); - await workspace.mockAsset( + await workspace.mockFileMediaAsset( [ "1ebcea38-f1bf-8101-8006-4c8fd68e7c84", "1ebcea38-f1bf-8101-8006-4c8f579da49c", @@ -51,7 +51,7 @@ test("Renders a file with solid, gradient and image fills", async ({ test("Renders a file with strokes", async ({ page }) => { const workspace = new WasmWorkspacePage(page); await workspace.setupEmptyFile(); - await workspace.mockAsset( + await workspace.mockFileMediaAsset( [ "202c1104-9385-81d3-8006-5074e4682cac", "202c1104-9385-81d3-8006-5074c50339b6", @@ -69,3 +69,47 @@ test("Renders a file with strokes", async ({ page }) => { await expect(workspace.canvas).toHaveScreenshot(); }); + +test("Renders a file with mutliple strokes", async ({ page }) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-file-multiple-strokes.json"); + + await workspace.goToWorkspace({ + id: "c0939f58-37bc-805d-8006-51cc78297208", + pageId: "c0939f58-37bc-805d-8006-51cc78297209", + }); + await workspace.waitForFirstRender(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); + +test("Renders a file with shapes with multiple fills", async ({ page }) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-file-multiple-fills.json"); + + await workspace.goToWorkspace({ + id: "c0939f58-37bc-805d-8006-51cd3a51c255", + pageId: "c0939f58-37bc-805d-8006-51cd3a51c256", + }); + await workspace.waitForFirstRender(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); + +// TODO: update the screenshots for this test once Taiga #11325 is fixed +// https://tree.taiga.io/project/penpot/task/11325 +test("Renders shapes taking into account blend modes", async ({ page }) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-file-blend-modes.json"); + + await workspace.goToWorkspace({ + id: "c0939f58-37bc-805d-8006-51cdf8e18e76", + pageId: "c0939f58-37bc-805d-8006-51cdf8e18e77", + }); + await workspace.waitForFirstRender(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-mutliple-strokes-1.png b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-mutliple-strokes-1.png new file mode 100644 index 0000000000..2e2d21b9a2 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-mutliple-strokes-1.png differ diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-shapes-with-multiple-fills-1.png b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-shapes-with-multiple-fills-1.png new file mode 100644 index 0000000000..d0f1076bc4 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-shapes-with-multiple-fills-1.png differ diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-shapes-taking-into-account-blend-modes-1.png b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-shapes-taking-into-account-blend-modes-1.png new file mode 100644 index 0000000000..6168df22e7 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-shapes-taking-into-account-blend-modes-1.png differ diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js b/frontend/playwright/ui/render-wasm-specs/texts.spec.js index f6cec37a86..2a8e59157c 100644 --- a/frontend/playwright/ui/render-wasm-specs/texts.spec.js +++ b/frontend/playwright/ui/render-wasm-specs/texts.spec.js @@ -9,9 +9,7 @@ test.beforeEach(async ({ page }) => { ]); }); -test("Renders a file with texts", async ({ - page, -}) => { +test("Renders a file with texts", async ({ page }) => { const workspace = new WasmWorkspacePage(page); await workspace.setupEmptyFile(); await workspace.mockGetFile("render-wasm/get-file-text.json"); @@ -24,9 +22,7 @@ test("Renders a file with texts", async ({ await expect(workspace.canvas).toHaveScreenshot(); }); -test("Updates a text font", async ({ - page, -}) => { +test("Updates a text font", async ({ page }) => { const workspace = new WasmWorkspacePage(page); await workspace.setupEmptyFile(); await workspace.mockGetFile("render-wasm/get-file-text.json"); @@ -42,4 +38,49 @@ test("Updates a text font", async ({ const boldOption = fontStyle.getByText("bold").first(); await boldOption.click(); await expect(workspace.canvas).toHaveScreenshot(); -}); \ No newline at end of file +}); + +test("Renders a file with texts that use google fonts", async ({ page }) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-file-text-google-fonts.json"); + await workspace.mockGoogleFont( + "ebgaramond", + "render-wasm/assets/ebgaramond.ttf", + ); + await workspace.mockGoogleFont("firacode", "render-wasm/assets/firacode.ttf"); + + await workspace.goToWorkspace({ + id: "434b0541-fa2f-802f-8006-5981e47bd732", + pageId: "434b0541-fa2f-802f-8006-5981e47bd733", + }); + await workspace.waitForFirstRender(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); + +test("Renders a file with texts that use custom fonts", async ({ page }) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-file-text-custom-fonts.json"); + await workspace.mockRPC( + "get-font-variants?team-id=*", + "render-wasm/get-font-variants-custom-fonts.json", + ); + await workspace.mockAsset( + "2d1ffeb6-e70b-4027-bbcc-910248ba45f8", + "render-wasm/assets/mreaves.ttf", + ); + await workspace.mockAsset( + "69e76833-0816-49fa-8c7b-4b97c71c6f1a", + "render-wasm/assets/nodesto-condensed.ttf", + ); + + await workspace.goToWorkspace({ + id: "434b0541-fa2f-802f-8006-59827d964a9b", + pageId: "434b0541-fa2f-802f-8006-59827d964a9c", + }); + await workspace.waitForFirstRender(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-that-use-custom-fonts-1.png b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-that-use-custom-fonts-1.png new file mode 100644 index 0000000000..d68867cf91 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-that-use-custom-fonts-1.png differ diff --git a/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-that-use-google-fonts-1.png b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-that-use-google-fonts-1.png new file mode 100644 index 0000000000..86ae00eb3e Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/texts.spec.js-snapshots/Renders-a-file-with-texts-that-use-google-fonts-1.png differ