diff --git a/frontend/.gitignore b/frontend/.gitignore index dd3776ebd..8db9cb52a 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -11,3 +11,4 @@ node_modules/ /blob-report/ /playwright/.cache/ /playwright/**/visual-specs/**/*.png +/playwright/**/render-wasm-specs/**/*.png diff --git a/frontend/playwright.config.js b/frontend/playwright.config.js index 8360cb456..25d6c93cb 100644 --- a/frontend/playwright.config.js +++ b/frontend/playwright.config.js @@ -53,6 +53,18 @@ export default defineConfig({ toHaveScreenshot: { maxDiffPixelRatio: 0.005 }, }, }, + { + name: "render-wasm", + use: { + ...devices["Desktop Chrome"], + viewport: { width: 1920, height: 1080 }, // Add custom viewport size + deviceScaleFactor: 2, + }, + testDir: "./playwright/ui/render-wasm-specs", + expect: { + toHaveScreenshot: { maxDiffPixelRatio: 0.005 }, + }, + }, ], /* Run your local dev server before starting the tests */ diff --git a/frontend/playwright/data/render-wasm/get-file-shapes-fills.json b/frontend/playwright/data/render-wasm/get-file-shapes-fills.json new file mode 100644 index 000000000..3ba50cba2 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-shapes-fills.json @@ -0,0 +1,1047 @@ +{ + "~: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": "Fills", + "~:revn": 33, + "~:modified-at": "~m1749212476332", + "~:vern": 0, + "~:id": "~u1ebcea38-f1bf-8101-8006-4c8ec4a9bffe", + "~: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", + "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" + ] + }, + "~:version": 67, + "~:project-id": "~u53a7ff09-2228-81d3-8006-4b5ea964593b", + "~:created-at": "~m1749212114638", + "~:data": { + "~:pages": [ + "~u1ebcea38-f1bf-8101-8006-4c8ec4a9bfff" + ], + "~:pages-index": { + "~u1ebcea38-f1bf-8101-8006-4c8ec4a9bfff": { + "~: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": [ + "~u1636bde2-eab8-8056-8006-4c8ecac1c462", + "~u1636bde2-eab8-8056-8006-4c8f2836420e", + "~u1636bde2-eab8-8056-8006-4c8f6da5ee8f", + "~u1636bde2-eab8-8056-8006-4c8eccbd715d", + "~u1636bde2-eab8-8056-8006-4c8f0db998ca", + "~u1636bde2-eab8-8056-8006-4c8ef9e55f47", + "~ua359bc9e-34eb-808a-8006-4c8fc9d9fd54", + "~u532a36f0-2a4e-80b8-8006-4c8ff6d28e47" + ] + } + }, + "~u532a36f0-2a4e-80b8-8006-4c8ff6d28e47": { + "~#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": "~bAQAAAAAAAAAAAAAAAAAAAAAAAADfEBJEKATkQwMAAADg1AREdITjQ28u+kP3fe5D4NQERJy3A0QDAAAAiJIMRD0wEERiQUVEPOInRHsEO0RGcQ5EAwAAAJTHMESeAOpD3xASRCgE5EPfEBJEKATkQw==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 519.0000360585204, + "~:y": 455.9999889055738 + } + }, + { + "~#point": { + "~:x": 753.0000180987242, + "~:y": 455.9999889055738 + } + }, + { + "~#point": { + "~:x": 753.0000180987242, + "~:y": 614.9999902292648 + } + }, + { + "~#point": { + "~:x": 519.0000360585204, + "~:y": 614.9999902292648 + } + } + ], + "~: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": "~u532a36f0-2a4e-80b8-8006-4c8ff6d28e47", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": null, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 519.0000360585204, + "~:y": 455.9999889055738, + "~:width": 233.9999820402038, + "~:height": 159.00000132369098, + "~:x1": 519.0000360585204, + "~:y1": 455.9999889055738, + "~:x2": 753.0000180987242, + "~:y2": 614.9999902292648 + } + }, + "~:fills": [ + { + "~:fill-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:linear", + "~:stops": [ + { + "~:color": "#0054ff", + "~:offset": 0, + "~:opacity": 1 + }, + { + "~:color": "#ff0077", + "~:offset": 1, + "~:opacity": 1 + } + ] + } + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~u1636bde2-eab8-8056-8006-4c8eccbd715d": { + "~#shape": { + "~:y": 379, + "~: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": 164, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 100.00000000000001, + "~:y": 379 + } + }, + { + "~#point": { + "~:x": 264, + "~:y": 379 + } + }, + { + "~#point": { + "~:x": 264, + "~:y": 525 + } + }, + { + "~#point": { + "~:x": 100.00000000000001, + "~:y": 525 + } + } + ], + "~: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": "~u1636bde2-eab8-8056-8006-4c8eccbd715d", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 100, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 100, + "~:y": 379, + "~:width": 164, + "~:height": 146, + "~:x1": 100, + "~:y1": 379, + "~:x2": 264, + "~:y2": 525 + } + }, + "~:fills": [ + { + "~:fill-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:linear", + "~:stops": [ + { + "~:color": "#003fff", + "~:offset": 0, + "~:opacity": 1 + }, + { + "~:color": "#ff007f", + "~:offset": 1, + "~:opacity": 0.5277777777777778 + } + ] + } + } + ], + "~:flip-x": null, + "~:height": 146, + "~:flip-y": null + } + }, + "~ua359bc9e-34eb-808a-8006-4c8fc9d9fd54": { + "~#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": "~bAQAAAAAAAAAAAAAAAAAAAAAAAADe0BBEUQh0QwMAAADflANE6AhzQ26u90P3fYRD35QDRDlvnUMDAAAAiFILRHtgtkNhAUREecTlQ3rEOUSM4rJDAwAAAJOHL0SfAIBD3tAQRFEIdEPe0BBEUQh0Qw==" + }, + "~:name": "Path", + "~:width": null, + "~:type": "~:path", + "~:points": [ + { + "~#point": { + "~:x": 513.9999890900604, + "~:y": 244.00000416436282 + } + }, + { + "~#point": { + "~:x": 747.9999711302642, + "~:y": 244.00000416436282 + } + }, + { + "~#point": { + "~:x": 747.9999711302642, + "~:y": 403.00000548805383 + } + }, + { + "~#point": { + "~:x": 513.9999890900604, + "~:y": 403.00000548805383 + } + } + ], + "~: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": "~ua359bc9e-34eb-808a-8006-4c8fc9d9fd54", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": null, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 513.9999890900604, + "~:y": 244.00000416436285, + "~:width": 233.9999820402038, + "~:height": 159.000001323691, + "~:x1": 513.9999890900604, + "~:y1": 244.00000416436285, + "~:x2": 747.9999711302642, + "~:y2": 403.00000548805383 + } + }, + "~:fills": [ + { + "~:fill-opacity": 1, + "~:fill-image": { + "~:id": "~u1ebcea38-f1bf-8101-8006-4c8fd68e7c84", + "~:width": 872, + "~:height": 1400, + "~:mtype": "image/jpeg", + "~:name": "Aptenodytes_forsteri_-Snow_Hill_Island,_Antarctica_-adults_and_juvenile-8.jpg", + "~:keep-aspect-ratio": true + } + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null + } + }, + "~u1636bde2-eab8-8056-8006-4c8f0db998ca": { + "~#shape": { + "~:y": 194, + "~: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": 164, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 307, + "~:y": 194 + } + }, + { + "~#point": { + "~:x": 471, + "~:y": 194 + } + }, + { + "~#point": { + "~:x": 471, + "~:y": 340 + } + }, + { + "~#point": { + "~:x": 307, + "~:y": 340 + } + } + ], + "~: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": "~u1636bde2-eab8-8056-8006-4c8f0db998ca", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 307, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 307, + "~:y": 194, + "~:width": 164, + "~:height": 146, + "~:x1": 307, + "~:y1": 194, + "~:x2": 471, + "~:y2": 340 + } + }, + "~:fills": [ + { + "~:fill-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0.5, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:radial", + "~:stops": [ + { + "~:color": "#003fff", + "~:offset": 0.32, + "~:opacity": 1 + }, + { + "~:color": "#ff007f", + "~:offset": 1, + "~:opacity": 0.5277777777777778 + } + ] + } + } + ], + "~:flip-x": null, + "~:height": 146, + "~:flip-y": null + } + }, + "~u1636bde2-eab8-8056-8006-4c8f6da5ee8f": { + "~#shape": { + "~:y": 564, + "~: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": 164, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 307, + "~:y": 564 + } + }, + { + "~#point": { + "~:x": 471, + "~:y": 564 + } + }, + { + "~#point": { + "~:x": 471, + "~:y": 710 + } + }, + { + "~#point": { + "~:x": 307, + "~:y": 710 + } + } + ], + "~: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": "~u1636bde2-eab8-8056-8006-4c8f6da5ee8f", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 307, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 307, + "~:y": 564, + "~:width": 164, + "~:height": 146, + "~:x1": 307, + "~:y1": 564, + "~:x2": 471, + "~:y2": 710 + } + }, + "~:fills": [ + { + "~:fill-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0.5, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:radial", + "~:stops": [ + { + "~:color": "#000000", + "~:offset": 0.49, + "~:opacity": 0 + }, + { + "~:color": "#000000", + "~:offset": 1, + "~:opacity": 0.38333333333333336 + } + ] + } + }, + { + "~:fill-opacity": 1, + "~:fill-image": { + "~:id": "~u1ebcea38-f1bf-8101-8006-4c8f579da49c", + "~:width": 872, + "~:height": 1400, + "~:mtype": "image/jpeg", + "~:name": "Aptenodytes_forsteri_-Snow_Hill_Island,_Antarctica_-adults_and_juvenile-8.jpg", + "~:keep-aspect-ratio": true + } + } + ], + "~:flip-x": null, + "~:height": 146, + "~:flip-y": null + } + }, + "~u1636bde2-eab8-8056-8006-4c8f2836420e": { + "~#shape": { + "~:y": 379, + "~: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": 164, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 307, + "~:y": 379 + } + }, + { + "~#point": { + "~:x": 471, + "~:y": 379 + } + }, + { + "~#point": { + "~:x": 471, + "~:y": 525 + } + }, + { + "~#point": { + "~:x": 307, + "~:y": 525 + } + } + ], + "~: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": "~u1636bde2-eab8-8056-8006-4c8f2836420e", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 307, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 307, + "~:y": 379, + "~:width": 164, + "~:height": 146, + "~:x1": 307, + "~:y1": 379, + "~:x2": 471, + "~:y2": 525 + } + }, + "~:fills": [ + { + "~:fill-opacity": 1, + "~:fill-image": { + "~:id": "~u1ebcea38-f1bf-8101-8006-4c8f579da49c", + "~:width": 872, + "~:height": 1400, + "~:mtype": "image/jpeg", + "~:name": "Aptenodytes_forsteri_-Snow_Hill_Island,_Antarctica_-adults_and_juvenile-8.jpg", + "~:keep-aspect-ratio": true + } + } + ], + "~:flip-x": null, + "~:height": 146, + "~:flip-y": null + } + }, + "~u1636bde2-eab8-8056-8006-4c8ecac1c462": { + "~#shape": { + "~:y": 194, + "~: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": 164, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 100.00000000000001, + "~:y": 194 + } + }, + { + "~#point": { + "~:x": 264, + "~:y": 194 + } + }, + { + "~#point": { + "~:x": 264, + "~:y": 340 + } + }, + { + "~#point": { + "~:x": 100.00000000000001, + "~:y": 340 + } + } + ], + "~: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": "~u1636bde2-eab8-8056-8006-4c8ecac1c462", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 100, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 100, + "~:y": 194, + "~:width": 164, + "~:height": 146, + "~:x1": 100, + "~:y1": 194, + "~:x2": 264, + "~:y2": 340 + } + }, + "~:fills": [ + { + "~:fill-color": "#003fff", + "~:fill-opacity": 0.5 + } + ], + "~:flip-x": null, + "~:height": 146, + "~:flip-y": null + } + }, + "~u1636bde2-eab8-8056-8006-4c8ef9e55f47": { + "~#shape": { + "~:y": 564, + "~: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": 164, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 100.00000000000001, + "~:y": 564 + } + }, + { + "~#point": { + "~:x": 264, + "~:y": 564 + } + }, + { + "~#point": { + "~:x": 264, + "~:y": 710 + } + }, + { + "~#point": { + "~:x": 100.00000000000001, + "~:y": 710 + } + } + ], + "~: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": "~u1636bde2-eab8-8056-8006-4c8ef9e55f47", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 100, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 100, + "~:y": 564, + "~:width": 164, + "~:height": 146, + "~:x1": 100, + "~:y1": 564, + "~:x2": 264, + "~:y2": 710 + } + }, + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 0.2 + }, + { + "~:fill-color-gradient": { + "~:start-x": 0.5, + "~:start-y": 0, + "~:end-x": 0.5, + "~:end-y": 1, + "~:width": 1, + "~:type": "~:linear", + "~:stops": [ + { + "~:color": "#003fff", + "~:offset": 0, + "~:opacity": 1 + }, + { + "~:color": "#ff007f", + "~:offset": 1, + "~:opacity": 0.5277777777777778 + } + ] + } + } + ], + "~:flip-x": null, + "~:height": 146, + "~:flip-y": null + } + } + }, + "~:id": "~u1ebcea38-f1bf-8101-8006-4c8ec4a9bfff", + "~:name": "Page 1" + } + }, + "~:id": "~u1ebcea38-f1bf-8101-8006-4c8ec4a9bffe", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/get-file-shapes-groups-boards.json b/frontend/playwright/data/render-wasm/get-file-shapes-groups-boards.json new file mode 100644 index 000000000..c82afce71 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-shapes-groups-boards.json @@ -0,0 +1,1089 @@ +{ + "~: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": "Shapes, Boards & Groups", + "~:revn": 18, + "~:modified-at": "~m1749133354832", + "~:vern": 0, + "~:id": "~u53a7ff09-2228-81d3-8006-4b5eac177245", + "~: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", + "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" + ] + }, + "~:version": 67, + "~:project-id": "~u53a7ff09-2228-81d3-8006-4b5ea964593b", + "~:created-at": "~m1749132397698", + "~:data": { + "~:pages": [ + "~u53a7ff09-2228-81d3-8006-4b5eac177246" + ], + "~:pages-index": { + "~u53a7ff09-2228-81d3-8006-4b5eac177246": { + "~: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": [ + "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~ub3609732-7b40-80dd-8006-4b5f1195932c", + "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fd" + ] + } + }, + "~ub3609732-7b40-80dd-8006-4b5f0cf6c012": { + "~#shape": { + "~:y": 61, + "~: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": 90, + "~:type": "~:circle", + "~:points": [ + { + "~#point": { + "~:x": 916.9999580383301, + "~:y": 61 + } + }, + { + "~#point": { + "~:x": 1006.9999580383301, + "~:y": 61 + } + }, + { + "~#point": { + "~:x": 1006.9999580383301, + "~:y": 149 + } + }, + { + "~#point": { + "~:x": 916.9999580383301, + "~:y": 149 + } + } + ], + "~: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": "~ub3609732-7b40-80dd-8006-4b5f0cf6c012", + "~:parent-id": "~ub3609732-7b40-80dd-8006-4b5f1195932c", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 916.9999580383301, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 916.9999580383301, + "~:y": 61, + "~:width": 90, + "~:height": 88, + "~:x1": 916.9999580383301, + "~:y1": 61, + "~:x2": 1006.9999580383301, + "~:y2": 149 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 88, + "~:flip-y": null + } + }, + "~ub3609732-7b40-80dd-8006-4b5ee7503d34": { + "~#shape": { + "~:y": 96.25051809431667, + "~:transform": { + "~#matrix": { + "~:a": 0.7071067811864666, + "~:b": -0.7071067811866283, + "~:c": 0.7071067811866287, + "~:d": 0.7071067811864662, + "~:e": -6.821210263296962E-13, + "~:f": -8.526512829121202E-13 + } + }, + "~:rotation": 315, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 100.00004392689823, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 318.99997908942305, + "~:y": 141.71068550598807 + } + }, + { + "~#point": { + "~:x": 389.71068826904013, + "~:y": 70.99997632635848 + } + }, + { + "~#point": { + "~:x": 438.5010405885363, + "~:y": 119.79032864584667 + } + }, + { + "~#point": { + "~:x": 367.790331408919, + "~:y": 190.50103782547617 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 0.7071067811864663, + "~:b": 0.7071067811866284, + "~:c": -0.7071067811866288, + "~:d": 0.7071067811864667, + "~:e": -1.2058310082703872E-13, + "~:f": 1.0852479074422117E-12 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub3609732-7b40-80dd-8006-4b5ee7503d34", + "~:parent-id": "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~:frame-id": "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~:strokes": [], + "~:x": 328.75048787553044, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 328.75048787553044, + "~:y": 96.25051809431667, + "~:width": 100.00004392689823, + "~:height": 68.99997796320113, + "~:x1": 328.75048787553044, + "~:y1": 96.25051809431667, + "~:x2": 428.75053180242867, + "~:y2": 165.2504960575178 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": true, + "~:height": 68.99997796320113, + "~:flip-y": true + } + }, + "~ub3609732-7b40-80dd-8006-4b5eaef6c61b": { + "~#shape": { + "~:y": 25.000003555024136, + "~: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, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Board", + "~:width": 422.00003286409583, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 272.9999938713979, + "~:y": 25.000003555024136 + } + }, + { + "~#point": { + "~:x": 695.0000267354937, + "~:y": 25.000003555024136 + } + }, + { + "~#point": { + "~:x": 695.0000267354937, + "~:y": 382.0000004666714 + } + }, + { + "~#point": { + "~:x": 272.9999938713979, + "~:y": 382.0000004666714 + } + } + ], + "~:r2": 0, + "~:layout-item-h-sizing": "~:fix", + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-item-v-sizing": "~:fix", + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 272.9999938713979, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 272.9999938713979, + "~:y": 25.000003555024136, + "~:width": 422.00003286409583, + "~:height": 356.99999691164726, + "~:x1": 272.9999938713979, + "~:y1": 25.000003555024136, + "~:x2": 695.0000267354937, + "~:y2": 382.0000004666714 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 356.99999691164726, + "~:flip-y": null, + "~:shapes": [ + "~ub3609732-7b40-80dd-8006-4b5eb6d6b8ba", + "~ub3609732-7b40-80dd-8006-4b5eb4b9233b", + "~ub3609732-7b40-80dd-8006-4b5ee7503d34" + ] + } + }, + "~ub3609732-7b40-80dd-8006-4b5eb4b9233b": { + "~#shape": { + "~:y": 77.99998235703063, + "~: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": 111.99998664856003, + "~:type": "~:circle", + "~:points": [ + { + "~#point": { + "~:x": 519.0000252723696, + "~:y": 77.99998235703063 + } + }, + { + "~#point": { + "~:x": 631.0000119209296, + "~:y": 77.99998235703063 + } + }, + { + "~#point": { + "~:x": 631.0000119209296, + "~:y": 183.9999949932127 + } + }, + { + "~#point": { + "~:x": 519.0000252723696, + "~:y": 183.9999949932127 + } + } + ], + "~: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": "~ub3609732-7b40-80dd-8006-4b5eb4b9233b", + "~:parent-id": "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~:frame-id": "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~:strokes": [], + "~:x": 519.0000252723697, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 519.0000252723697, + "~:y": 77.99998235703063, + "~:width": 111.99998664856003, + "~:height": 106.00001263618208, + "~:x1": 519.0000252723697, + "~:y1": 77.99998235703063, + "~:x2": 631.0000119209298, + "~:y2": 183.9999949932127 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 106.00001263618208, + "~:flip-y": null + } + }, + "~ub3609732-7b40-80dd-8006-4b5eb6d6b8ba": { + "~#shape": { + "~:y": 266.99998360878504, + "~: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": 96.99999421834946, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 318.9999945759773, + "~:y": 266.99998360878504 + } + }, + { + "~#point": { + "~:x": 415.9999887943268, + "~:y": 266.99998360878504 + } + }, + { + "~#point": { + "~:x": 415.9999887943268, + "~:y": 343.9999790191847 + } + }, + { + "~#point": { + "~:x": 318.9999945759773, + "~:y": 343.9999790191847 + } + } + ], + "~:r2": 20, + "~: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": 20, + "~:r1": 20, + "~:id": "~ub3609732-7b40-80dd-8006-4b5eb6d6b8ba", + "~:parent-id": "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~:frame-id": "~ub3609732-7b40-80dd-8006-4b5eaef6c61b", + "~:strokes": [], + "~:x": 318.9999945759773, + "~:proportion": 1, + "~:r4": 20, + "~:selrect": { + "~#rect": { + "~:x": 318.9999945759773, + "~:y": 266.99998360878504, + "~:width": 96.99999421834946, + "~:height": 76.99999541039966, + "~:x1": 318.9999945759773, + "~:y1": 266.99998360878504, + "~:x2": 415.9999887943268, + "~:y2": 343.9999790191847 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 76.99999541039966, + "~:flip-y": null + } + }, + "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fd": { + "~#shape": { + "~:y": 64.1025296964562, + "~:transform": { + "~#matrix": { + "~:a": 0.8660253929828814, + "~:b": -0.5000000187088454, + "~:c": 0.5000000101884137, + "~:d": 0.866025397902155, + "~:e": 1.3642420526593924E-12, + "~:f": 4.547473508864641E-13 + } + }, + "~:rotation": 330, + "~:index": 3, + "~:name": "Group", + "~:width": 178.00005759344003, + "~:type": "~:group", + "~:points": [ + { + "~#point": { + "~:x": 1102.9999918341623, + "~:y": 122.00000530482339 + } + }, + { + "~#point": { + "~:x": 1257.1524913336161, + "~:y": 32.999995025044484 + } + }, + { + "~#point": { + "~:x": 1357.152513948974, + "~:y": 206.205122909205 + } + }, + { + "~#point": { + "~:x": 1203.0000144495198, + "~:y": 295.20513318898395 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 0.8660253979021553, + "~:b": 0.5000000187088455, + "~:c": -0.5000000101884138, + "~:d": 0.8660253929828816, + "~:e": -9.54094586412817E-13, + "~:f": -1.0759438051124644E-12 + } + }, + "~:id": "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fd", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1141.076224094848, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 1141.076224094848, + "~:y": 64.1025296964562, + "~:width": 178.00005759344003, + "~:height": 200.0000688211158, + "~:x1": 1141.076224094848, + "~:y1": 64.1025296964562, + "~:x2": 1319.076281688288, + "~:y2": 264.102598517572 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 200.0000688211158, + "~:flip-y": null, + "~:shapes": [ + "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fe", + "~ub3609732-7b40-80dd-8006-4b5f1b3cd0ff" + ] + } + }, + "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fe": { + "~#shape": { + "~:y": 177.75216304418154, + "~:transform": { + "~#matrix": { + "~:a": 0.8660253493492736, + "~:b": -0.5000000942844571, + "~:c": 0.49999995856927626, + "~:d": 0.8660254277044768, + "~:e": 1.0913936421275139E-11, + "~:f": 5.6843418860808015E-12 + } + }, + "~:rotation": 330, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 108.99991328201122, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 1154.9999992024932, + "~:y": 211.49990454997567 + } + }, + { + "~#point": { + "~:x": 1249.3966053964355, + "~:y": 156.99998036799627 + } + }, + { + "~#point": { + "~:x": 1297.896562493645, + "~:y": 241.0043942983914 + } + }, + { + "~#point": { + "~:x": 1203.4999562997027, + "~:y": 295.5043184803708 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 0.8660254277044886, + "~:b": 0.500000094284464, + "~:c": -0.4999999585692831, + "~:d": 0.8660253493492854, + "~:e": -6.609575749640357E-12, + "~:f": -1.0379753407366116E-11 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fe", + "~:parent-id": "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fd", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1171.9483242070637, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 1171.9483242070637, + "~:y": 177.75216304418154, + "~:width": 108.99991328201122, + "~:height": 96.99997276000408, + "~:x1": 1171.9483242070637, + "~:y1": 177.75216304418154, + "~:x2": 1280.948237489075, + "~:y2": 274.7521358041856 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 96.99997276000408, + "~:flip-y": null + } + }, + "~ub3609732-7b40-80dd-8006-4b5f1b3cd0ff": { + "~#shape": { + "~:y": 49.605113090800444, + "~:transform": { + "~#matrix": { + "~:a": 0.8660254038912871, + "~:b": -0.49999999981493426, + "~:c": 0.5000000101884137, + "~:d": 0.8660253979021553, + "~:e": 5.229594535194337E-12, + "~:f": 1.1368683772161603E-12 + } + }, + "~:rotation": 330, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Ellipse", + "~:width": 89.99987703479155, + "~:type": "~:circle", + "~:points": [ + { + "~#point": { + "~:x": 1179.0000899316829, + "~:y": 77.9999537231875 + } + }, + { + "~#point": { + "~:x": 1256.9422027632731, + "~:y": 33.000046307504476 + } + }, + { + "~#point": { + "~:x": 1300.9421531153894, + "~:y": 109.21020333191314 + } + }, + { + "~#point": { + "~:x": 1223.0000402838, + "~:y": 154.21011074759622 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 0.8660253979021547, + "~:b": 0.4999999998149339, + "~:c": -0.5000000101884133, + "~:d": 0.8660254038912866, + "~:e": -3.960527488017644E-12, + "~:f": -3.599354162179205E-12 + } + }, + "~:id": "~ub3609732-7b40-80dd-8006-4b5f1b3cd0ff", + "~:parent-id": "~ub3609732-7b40-80dd-8006-4b5f1b3cd0fd", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 1194.9711830061403, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 1194.9711830061403, + "~:y": 49.605113090800444, + "~:width": 89.99987703479155, + "~:height": 87.99993087349986, + "~:x1": 1194.9711830061403, + "~:y1": 49.605113090800444, + "~:x2": 1284.971060040932, + "~:y2": 137.6050439643003 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 87.99993087349986, + "~:flip-y": null + } + }, + "~ub3609732-7b40-80dd-8006-4b5f1195932c": { + "~#shape": { + "~:y": 61, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:index": 3, + "~:name": "Group", + "~:width": 178, + "~:type": "~:group", + "~:points": [ + { + "~#point": { + "~:x": 828.9999580383301, + "~:y": 61 + } + }, + { + "~#point": { + "~:x": 1006.9999580383301, + "~:y": 61 + } + }, + { + "~#point": { + "~:x": 1006.9999580383301, + "~:y": 261 + } + }, + { + "~#point": { + "~:x": 828.9999580383301, + "~:y": 261 + } + } + ], + "~: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": "~ub3609732-7b40-80dd-8006-4b5f1195932c", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 828.9999580383301, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 828.9999580383301, + "~:y": 61, + "~:width": 178, + "~:height": 200, + "~:x1": 828.9999580383301, + "~:y1": 61, + "~:x2": 1006.9999580383301, + "~:y2": 261 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 200, + "~:flip-y": null, + "~:shapes": [ + "~ub3609732-7b40-80dd-8006-4b5f0ab291ed", + "~ub3609732-7b40-80dd-8006-4b5f0cf6c012" + ] + } + }, + "~ub3609732-7b40-80dd-8006-4b5f0ab291ed": { + "~#shape": { + "~:y": 164, + "~: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": 109, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 828.9999580383301, + "~:y": 164 + } + }, + { + "~#point": { + "~:x": 937.9999580383301, + "~:y": 164 + } + }, + { + "~#point": { + "~:x": 937.9999580383301, + "~:y": 261 + } + }, + { + "~#point": { + "~:x": 828.9999580383301, + "~:y": 261 + } + } + ], + "~: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": "~ub3609732-7b40-80dd-8006-4b5f0ab291ed", + "~:parent-id": "~ub3609732-7b40-80dd-8006-4b5f1195932c", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 828.9999580383301, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 828.9999580383301, + "~:y": 164, + "~:width": 109, + "~:height": 97, + "~:x1": 828.9999580383301, + "~:y1": 164, + "~:x2": 937.9999580383301, + "~:y2": 261 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 97, + "~:flip-y": null + } + } + }, + "~:id": "~u53a7ff09-2228-81d3-8006-4b5eac177246", + "~:name": "Page 1" + } + }, + "~:id": "~u53a7ff09-2228-81d3-8006-4b5eac177245", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/render-wasm/penguins.jpg b/frontend/playwright/data/render-wasm/penguins.jpg new file mode 100644 index 000000000..96b69f133 Binary files /dev/null and b/frontend/playwright/data/render-wasm/penguins.jpg differ diff --git a/frontend/playwright/ui/pages/BasePage.js b/frontend/playwright/ui/pages/BasePage.js index 155d7150b..24439482a 100644 --- a/frontend/playwright/ui/pages/BasePage.js +++ b/frontend/playwright/ui/pages/BasePage.js @@ -23,6 +23,29 @@ export class BasePage { ); } + static async mockAsset(page, assetId, assetFilename, options) { + const url = `**/assets/by-file-media-id/${assetId}`; + + return page.route(url, (route) => + route.fulfill({ + path: `playwright/data/${assetFilename}`, + status: 200, + ...options, + }), + ); + } + + static async mockConfigFlags(page, flags) { + const url = "**/js/config.js?ts=*"; + return await page.route(url, (route) => + route.fulfill({ + status: 200, + contentType: "application/javascript", + body: `var penpotFlags = "${flags.join(" ")}";`, + }), + ); + } + #page = null; constructor(page) { @@ -38,14 +61,11 @@ export class BasePage { } async mockConfigFlags(flags) { - const url = "**/js/config.js?ts=*"; - return await this.page.route(url, (route) => - route.fulfill({ - status: 200, - contentType: "application/javascript", - body: `var penpotFlags = "${flags.join(" ")}";`, - }), - ); + return BasePage.mockConfigFlags(this.page, flags); + } + + 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 new file mode 100644 index 000000000..1aa3502fe --- /dev/null +++ b/frontend/playwright/ui/pages/WasmWorkspacePage.js @@ -0,0 +1,24 @@ +import { expect } from "@playwright/test"; +import { WorkspacePage } from "./WorkspacePage"; + +export class WasmWorkspacePage extends WorkspacePage { + static async init(page) { + await super.init(page); + await WorkspacePage.mockConfigFlags(page, [ + "enable-feature-render-wasm", + "enable-render-wasm-dpr", + ]); + } + + constructor(page) { + super(page); + this.canvas = page.getByTestId("canvas-wasm-shapes"); + } + + async waitForCanvasRender() { + // FIXME: temp workaround. We will need to wait for set-objects to fully finish + await expect(this.pageName).toHaveText("Page 1"); + await this.canvas.waitFor({ state: "visible" }); + await this.page.waitForTimeout(3000); + } +} diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 9f2844692..55898cb57 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -178,6 +178,10 @@ export class WorkspacePage extends BaseWebSocketPage { ); } + async mockGetFile(jsonFile) { + await this.mockRPC(/get\-file\?/, jsonFile); + } + async setupFileWithComments() { await this.mockRPC( "get-comment-threads?file-id=*", diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js new file mode 100644 index 000000000..f3c9b0962 --- /dev/null +++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js @@ -0,0 +1,50 @@ +import { test, expect } from "@playwright/test"; +import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; + +test.beforeEach(async ({ page }) => { + await WasmWorkspacePage.init(page); + await WasmWorkspacePage.mockConfigFlags(page, [ + "enable-feature-render-wasm", + "enable-render-wasm-dpr", + ]); +}); + +test("Renders a file with basic shapes, boards and groups", async ({ + page, +}) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile("render-wasm/get-file-shapes-groups-boards.json"); + + await workspace.goToWorkspace({ + id: "53a7ff09-2228-81d3-8006-4b5eac177245", + pageId: "53a7ff09-2228-81d3-8006-4b5eac177246", + }); + await workspace.waitForCanvasRender(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); + +test("Renders a file with solid, gradient and image fills", async ({ + page, +}) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockAsset( + "1ebcea38-f1bf-8101-8006-4c8fd68e7c84", + "render-wasm/penguins.jpg", + ); + await workspace.mockAsset( + "1ebcea38-f1bf-8101-8006-4c8f579da49c", + "render-wasm/penguins.jpg", + ); + await workspace.mockGetFile("render-wasm/get-file-shapes-fills.json"); + + await workspace.goToWorkspace({ + id: "1ebcea38-f1bf-8101-8006-4c8ec4a9bffe", + pageId: "1ebcea38-f1bf-8101-8006-4c8ec4a9bfff", + }); + await workspace.waitForCanvasRender(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index 0f49c833e..8af9d6ab3 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs @@ -361,6 +361,7 @@ :viewport-ref viewport-ref}])] [:canvas {:id "render" + :data-testid "canvas-wasm-shapes" :ref canvas-ref :class (stl/css :render-shapes) :key (dm/str "render" page-id)