diff --git a/frontend/playwright/data/render-wasm/get-file-frame-strokes-opacity.json b/frontend/playwright/data/render-wasm/get-file-frame-strokes-opacity.json new file mode 100644 index 0000000000..36e807b1f1 --- /dev/null +++ b/frontend/playwright/data/render-wasm/get-file-frame-strokes-opacity.json @@ -0,0 +1,4853 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~ueba8fa2e-4140-8084-8005-448635d7a724", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 13", + "~:revn": 1, + "~:modified-at": "~m1770796980389", + "~:vern": 0, + "~:id": "~u3ef988d9-9ecf-8021-8007-8e3278ab57a3", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data", + "0013-fix-component-path", + "0013-clear-invalid-strokes-and-fills", + "0014-fix-tokens-lib-duplicate-ids", + "0014-clear-components-nil-objects", + "0015-fix-text-attrs-blank-strings", + "0015-clean-shadow-color", + "0016-copy-fills-from-position-data-to-text-node" + ] + }, + "~:version": 67, + "~:project-id": "~u02e9633d-4ce7-80da-8007-70b9afc79817", + "~:created-at": "~m1770796973741", + "~:backend": "legacy-db", + "~:data": { + "~:pages": [ + "~u3ef988d9-9ecf-8021-8007-8e3278ab57a4" + ], + "~:pages-index": { + "~u3ef988d9-9ecf-8021-8007-8e3278ab57a4": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~udc94224b-9b94-8052-8007-8e3279f43898", + "~udc94224b-9b94-8052-8007-8e3279f43899", + "~udc94224b-9b94-8052-8007-8e3279f4389a", + "~udc94224b-9b94-8052-8007-8e3279f4389b", + "~udc94224b-9b94-8052-8007-8e3279f4389c", + "~udc94224b-9b94-8052-8007-8e3279f4389d", + "~udc94224b-9b94-8052-8007-8e3279f4389e", + "~udc94224b-9b94-8052-8007-8e3279f4389f", + "~udc94224b-9b94-8052-8007-8e3279f438a0", + "~udc94224b-9b94-8052-8007-8e3279f438a1", + "~udc94224b-9b94-8052-8007-8e3279f438a2", + "~udc94224b-9b94-8052-8007-8e3279f438a3", + "~udc94224b-9b94-8052-8007-8e3279f438a4", + "~udc94224b-9b94-8052-8007-8e3279f438a5", + "~udc94224b-9b94-8052-8007-8e3279f438a6", + "~udc94224b-9b94-8052-8007-8e3279f438a7", + "~udc94224b-9b94-8052-8007-8e3279f438a8", + "~udc94224b-9b94-8052-8007-8e3279f438a9", + "~udc94224b-9b94-8052-8007-8e3279f438aa", + "~udc94224b-9b94-8052-8007-8e3279f438ab", + "~udc94224b-9b94-8052-8007-8e3279f438ac", + "~udc94224b-9b94-8052-8007-8e3279f438ad", + "~udc94224b-9b94-8052-8007-8e3279f438ae", + "~udc94224b-9b94-8052-8007-8e3279f438af", + "~udc94224b-9b94-8052-8007-8e3279f438b0", + "~udc94224b-9b94-8052-8007-8e3279f438b1", + "~udc94224b-9b94-8052-8007-8e3279f46c48", + "~udc94224b-9b94-8052-8007-8e3279f46c49", + "~udc94224b-9b94-8052-8007-8e3279f46c4a", + "~udc94224b-9b94-8052-8007-8e3279f46c4b", + "~udc94224b-9b94-8052-8007-8e3279f46c4c", + "~udc94224b-9b94-8052-8007-8e3279f46c4d", + "~udc94224b-9b94-8052-8007-8e3279f46c4e", + "~udc94224b-9b94-8052-8007-8e3279f46c4f", + "~udc94224b-9b94-8052-8007-8e3279f46c50", + "~udc94224b-9b94-8052-8007-8e3279f46c51", + "~udc94224b-9b94-8052-8007-8e3279f46c52", + "~udc94224b-9b94-8052-8007-8e3279f46c53", + "~udc94224b-9b94-8052-8007-8e3279f46c54", + "~udc94224b-9b94-8052-8007-8e3279f46c55", + "~udc94224b-9b94-8052-8007-8e3279f46c56", + "~udc94224b-9b94-8052-8007-8e3279f46c57", + "~udc94224b-9b94-8052-8007-8e3279f46c58", + "~udc94224b-9b94-8052-8007-8e3279f46c59", + "~udc94224b-9b94-8052-8007-8e3279f46c5a", + "~udc94224b-9b94-8052-8007-8e3279f46c5b" + ] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c4b": { + "~#shape": { + "~:y": 2233.99995642214, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 7176.00014339518, + "~:y": 2233.99995642214 + } + }, + { + "~#point": { + "~:x": 8312.00014339518, + "~:y": 2233.99995642214 + } + }, + { + "~#point": { + "~:x": 8312.00014339518, + "~:y": 3751.99995642214 + } + }, + { + "~#point": { + "~:x": 7176.00014339518, + "~:y": 3751.99995642214 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c4b", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 7176.00014339518, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 7176.00014339518, + "~:y": 2233.99995642214, + "~:width": 1136, + "~:height": 1518, + "~:x1": 7176.00014339518, + "~:y1": 2233.99995642214, + "~:x2": 8312.00014339518, + "~:y2": 3751.99995642214 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438ab": { + "~#shape": { + "~:y": 7577.99990389801, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 2763.99995106668, + "~:y": 7577.99990389801 + } + }, + { + "~#point": { + "~:x": 3899.99995106668, + "~:y": 7577.99990389801 + } + }, + { + "~#point": { + "~:x": 3899.99995106668, + "~:y": 9095.99990389801 + } + }, + { + "~#point": { + "~:x": 2763.99995106668, + "~:y": 9095.99990389801 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438ab", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 2763.99995106668, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 2763.99995106668, + "~:y": 7577.99990389801, + "~:width": 1136, + "~:height": 1518, + "~:x1": 2763.99995106668, + "~:y1": 7577.99990389801, + "~:x2": 3899.99995106668, + "~:y2": 9095.99990389801 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c4a": { + "~#shape": { + "~:y": 602.999995249267, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 10026.000531694, + "~:y": 602.999995249267 + } + }, + { + "~#point": { + "~:x": 11162.000531694, + "~:y": 602.999995249267 + } + }, + { + "~#point": { + "~:x": 11162.000531694, + "~:y": 2120.99999524927 + } + }, + { + "~#point": { + "~:x": 10026.000531694, + "~:y": 2120.99999524927 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c4a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 10026.000531694, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 10026.000531694, + "~:y": 602.999995249267, + "~:width": 1136, + "~:height": 1518, + "~:x1": 10026.000531694, + "~:y1": 602.999995249267, + "~:x2": 11162.000531694, + "~:y2": 2120.99999524927 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438aa": { + "~#shape": { + "~:y": 5946.99988168998, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 5614.0002172952, + "~:y": 5946.99988168998 + } + }, + { + "~#point": { + "~:x": 6750.0002172952, + "~:y": 5946.99988168998 + } + }, + { + "~#point": { + "~:x": 6750.0002172952, + "~:y": 7464.99988168998 + } + }, + { + "~#point": { + "~:x": 5614.0002172952, + "~:y": 7464.99988168998 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438aa", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 5614.0002172952, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 5614.0002172952, + "~:y": 5946.99988168998, + "~:width": 1136, + "~:height": 1518, + "~:x1": 5614.0002172952, + "~:y1": 5946.99988168998, + "~:x2": 6750.0002172952, + "~:y2": 7464.99988168998 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c49": { + "~#shape": { + "~:y": 597.999993155458, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 8595.99959200111, + "~:y": 597.999993155458 + } + }, + { + "~#point": { + "~:x": 9731.99959200111, + "~:y": 597.999993155458 + } + }, + { + "~#point": { + "~:x": 9731.99959200111, + "~:y": 2115.99999315546 + } + }, + { + "~#point": { + "~:x": 8595.99959200111, + "~:y": 2115.99999315546 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c49", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 8595.99959200111, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 8595.99959200111, + "~:y": 597.999993155458, + "~:width": 1136, + "~:height": 1518, + "~:x1": 8595.99959200111, + "~:y1": 597.999993155458, + "~:x2": 9731.99959200111, + "~:y2": 2115.99999315546 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a9": { + "~#shape": { + "~:y": 5941.99991011375, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 4183.00001002417, + "~:y": 5941.99991011375 + } + }, + { + "~#point": { + "~:x": 5319.00001002417, + "~:y": 5941.99991011375 + } + }, + { + "~#point": { + "~:x": 5319.00001002417, + "~:y": 7459.99991011375 + } + }, + { + "~#point": { + "~:x": 4183.00001002417, + "~:y": 7459.99991011375 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a9", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 4183.00001002417, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 4183.00001002417, + "~:y": 5941.99991011375, + "~:width": 1136, + "~:height": 1518, + "~:x1": 4183.00001002417, + "~:y1": 5941.99991011375, + "~:x2": 5319.00001002417, + "~:y2": 7459.99991011375 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c48": { + "~#shape": { + "~:y": 579.999984887378, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 7165.00012444247, + "~:y": 579.999984887378 + } + }, + { + "~#point": { + "~:x": 8301.00012444247, + "~:y": 579.999984887378 + } + }, + { + "~#point": { + "~:x": 8301.00012444247, + "~:y": 2097.99998488738 + } + }, + { + "~#point": { + "~:x": 7165.00012444247, + "~:y": 2097.99998488738 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c48", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 7165.00012444247, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 7165.00012444247, + "~:y": 579.999984887378, + "~:width": 1136, + "~:height": 1518, + "~:x1": 7165.00012444247, + "~:y1": 579.999984887378, + "~:x2": 8301.00012444247, + "~:y2": 2097.99998488738 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a8": { + "~#shape": { + "~:y": 5923.99990184567, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 2753.00005418428, + "~:y": 5923.99990184567 + } + }, + { + "~#point": { + "~:x": 3889.00005418428, + "~:y": 5923.99990184567 + } + }, + { + "~#point": { + "~:x": 3889.00005418428, + "~:y": 7441.99990184567 + } + }, + { + "~#point": { + "~:x": 2753.00005418428, + "~:y": 7441.99990184567 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a8", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 2753.00005418428, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 2753.00005418428, + "~:y": 5923.99990184567, + "~:width": 1136, + "~:height": 1518, + "~:x1": 2753.00005418428, + "~:y1": 5923.99990184567, + "~:x2": 3889.00005418428, + "~:y2": 7441.99990184567 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c4f": { + "~#shape": { + "~:y": 4093.00017708734, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 8633.99957283692, + "~:y": 4093.00017708734 + } + }, + { + "~#point": { + "~:x": 9769.99957283693, + "~:y": 4093.00017708734 + } + }, + { + "~#point": { + "~:x": 9769.99957283693, + "~:y": 5611.00017708734 + } + }, + { + "~#point": { + "~:x": 8633.99957283692, + "~:y": 5611.00017708734 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c4f", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 8633.99957283692, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 8633.99957283692, + "~:y": 4093.00017708734, + "~:width": 1136, + "~:height": 1518, + "~:x1": 8633.99957283692, + "~:y1": 4093.00017708734, + "~:x2": 9769.99957283692, + "~:y2": 5611.00017708734 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438af": { + "~#shape": { + "~:y": 9437.0000024929, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 4221.99999085999, + "~:y": 9437.0000024929 + } + }, + { + "~#point": { + "~:x": 5357.99999085999, + "~:y": 9437.0000024929 + } + }, + { + "~#point": { + "~:x": 5357.99999085999, + "~:y": 10955.0000024929 + } + }, + { + "~#point": { + "~:x": 4221.99999085999, + "~:y": 10955.0000024929 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438af", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 4221.99999085999, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 4221.99999085999, + "~:y": 9437.0000024929, + "~:width": 1136, + "~:height": 1518, + "~:x1": 4221.99999085999, + "~:y1": 9437.0000024929, + "~:x2": 5357.99999085999, + "~:y2": 10955.0000024929 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c4e": { + "~#shape": { + "~:y": 4075.00007726653, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 7204.00016631344, + "~:y": 4075.00007726653 + } + }, + { + "~#point": { + "~:x": 8340.00016631344, + "~:y": 4075.00007726653 + } + }, + { + "~#point": { + "~:x": 8340.00016631344, + "~:y": 5593.00007726653 + } + }, + { + "~#point": { + "~:x": 7204.00016631344, + "~:y": 5593.00007726653 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c4e", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 7204.00016631344, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 7204.00016631344, + "~:y": 4075.00007726653, + "~:width": 1136, + "~:height": 1518, + "~:x1": 7204.00016631344, + "~:y1": 4075.00007726653, + "~:x2": 8340.00016631344, + "~:y2": 5593.00007726653 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438ae": { + "~#shape": { + "~:y": 9418.99990267208, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 2791.99997398494, + "~:y": 9418.99990267208 + } + }, + { + "~#point": { + "~:x": 3927.99997398494, + "~:y": 9418.99990267208 + } + }, + { + "~#point": { + "~:x": 3927.99997398494, + "~:y": 10936.9999026721 + } + }, + { + "~#point": { + "~:x": 2791.99997398494, + "~:y": 10936.9999026721 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438ae", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 2791.99997398494, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 2791.99997398494, + "~:y": 9418.99990267208, + "~:width": 1136, + "~:height": 1518, + "~:x1": 2791.99997398494, + "~:y1": 9418.99990267208, + "~:x2": 3927.99997398494, + "~:y2": 10936.9999026721 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c4d": { + "~#shape": { + "~:y": 2256.99996678403, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 10037.0006116819, + "~:y": 2256.99996678403 + } + }, + { + "~#point": { + "~:x": 11173.0006116819, + "~:y": 2256.99996678403 + } + }, + { + "~#point": { + "~:x": 11173.0006116819, + "~:y": 3774.99996678403 + } + }, + { + "~#point": { + "~:x": 10037.0006116819, + "~:y": 3774.99996678403 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c4d", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 10037.0006116819, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 10037.0006116819, + "~:y": 2256.99996678403, + "~:width": 1136, + "~:height": 1518, + "~:x1": 10037.0006116819, + "~:y1": 2256.99996678403, + "~:x2": 11173.0006116819, + "~:y2": 3774.99996678403 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438ad": { + "~#shape": { + "~:y": 7600.9999142599, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 5624.99980900182, + "~:y": 7600.9999142599 + } + }, + { + "~#point": { + "~:x": 6760.99980900182, + "~:y": 7600.9999142599 + } + }, + { + "~#point": { + "~:x": 6760.99980900182, + "~:y": 9118.9999142599 + } + }, + { + "~#point": { + "~:x": 5624.99980900182, + "~:y": 9118.9999142599 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438ad", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 5624.99980900182, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 5624.99980900182, + "~:y": 7600.9999142599, + "~:width": 1136, + "~:height": 1518, + "~:x1": 5624.99980900182, + "~:y1": 7600.9999142599, + "~:x2": 6760.99980900182, + "~:y2": 9118.9999142599 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c4c": { + "~#shape": { + "~:y": 2251.99993417264, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 8607.00046544601, + "~:y": 2251.99993417264 + } + }, + { + "~#point": { + "~:x": 9743.00046544601, + "~:y": 2251.99993417264 + } + }, + { + "~#point": { + "~:x": 9743.00046544601, + "~:y": 3769.99993417264 + } + }, + { + "~#point": { + "~:x": 8607.00046544601, + "~:y": 3769.99993417264 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c4c", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 8607.00046544601, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 8607.00046544601, + "~:y": 2251.99993417264, + "~:width": 1136, + "~:height": 1518, + "~:x1": 8607.00046544601, + "~:y1": 2251.99993417264, + "~:x2": 9743.00046544601, + "~:y2": 3769.99993417264 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438ac": { + "~#shape": { + "~:y": 7596.00000371883, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 4194.99990690657, + "~:y": 7596.00000371883 + } + }, + { + "~#point": { + "~:x": 5330.99990690657, + "~:y": 7596.00000371883 + } + }, + { + "~#point": { + "~:x": 5330.99990690657, + "~:y": 9114.00000371883 + } + }, + { + "~#point": { + "~:x": 4194.99990690657, + "~:y": 9114.00000371883 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438ac", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 4194.99990690657, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 4194.99990690657, + "~:y": 7596.00000371883, + "~:width": 1136, + "~:height": 1518, + "~:x1": 4194.99990690657, + "~:y1": 7596.00000371883, + "~:x2": 5330.99990690657, + "~:y2": 9114.00000371883 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a3": { + "~#shape": { + "~:y": 4037.99999319702, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 2768.00003579942, + "~:y": 4037.99999319702 + } + }, + { + "~#point": { + "~:x": 3904.00003579942, + "~:y": 4037.99999319702 + } + }, + { + "~#point": { + "~:x": 3904.00003579942, + "~:y": 5555.99999319702 + } + }, + { + "~#point": { + "~:x": 2768.00003579942, + "~:y": 5555.99999319702 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a3", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 2768.00003579942, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 2768.00003579942, + "~:y": 4037.99999319702, + "~:width": 1136, + "~:height": 1518, + "~:x1": 2768.00003579942, + "~:y1": 4037.99999319702, + "~:x2": 3904.00003579942, + "~:y2": 5555.99999319702 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a2": { + "~#shape": { + "~:y": 2220.00000478483, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 5601.00023702723, + "~:y": 2220.00000478483 + } + }, + { + "~#point": { + "~:x": 6737.00023702723, + "~:y": 2220.00000478483 + } + }, + { + "~#point": { + "~:x": 6737.00023702723, + "~:y": 3738.00000478483 + } + }, + { + "~#point": { + "~:x": 5601.00023702723, + "~:y": 3738.00000478483 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a2", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 5601.00023702723, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 5601.00023702723, + "~:y": 2220.00000478483, + "~:width": 1136, + "~:height": 1518, + "~:x1": 5601.00023702723, + "~:y1": 2220.00000478483, + "~:x2": 6737.00023702723, + "~:y2": 3738.00000478483 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a1": { + "~#shape": { + "~:y": 2215.00009424376, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 4171.00009079137, + "~:y": 2215.00009424376 + } + }, + { + "~#point": { + "~:x": 5307.00009079137, + "~:y": 2215.00009424376 + } + }, + { + "~#point": { + "~:x": 5307.00009079137, + "~:y": 3733.00009424376 + } + }, + { + "~#point": { + "~:x": 4171.00009079137, + "~:y": 3733.00009424376 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a1", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 4171.00009079137, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 4171.00009079137, + "~:y": 2215.00009424376, + "~:width": 1136, + "~:height": 1518, + "~:x1": 4171.00009079137, + "~:y1": 2215.00009424376, + "~:x2": 5307.00009079137, + "~:y2": 3733.00009424376 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a0": { + "~#shape": { + "~:y": 2196.99999442295, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 2740.00001288116, + "~:y": 2196.99999442295 + } + }, + { + "~#point": { + "~:x": 3876.00001288116, + "~:y": 2196.99999442295 + } + }, + { + "~#point": { + "~:x": 3876.00001288116, + "~:y": 3714.99999442295 + } + }, + { + "~#point": { + "~:x": 2740.00001288116, + "~:y": 3714.99999442295 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a0", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 2740.00001288116, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 2740.00001288116, + "~:y": 2196.99999442295, + "~:width": 1136, + "~:height": 1518, + "~:x1": 2740.00001288116, + "~:y1": 2196.99999442295, + "~:x2": 3876.00001288116, + "~:y2": 3714.99999442295 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a7": { + "~#shape": { + "~:y": 4035.00002246628, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 1552, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 835.999963926528, + "~:y": 4035.00002246628 + } + }, + { + "~#point": { + "~:x": 2387.99996392653, + "~:y": 4035.00002246628 + } + }, + { + "~#point": { + "~:x": 2387.99996392653, + "~:y": 5528.00002246628 + } + }, + { + "~#point": { + "~:x": 835.999963926528, + "~:y": 5528.00002246628 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a7", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 835.999963926528, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 835.999963926528, + "~:y": 4035.00002246628, + "~:width": 1552, + "~:height": 1493, + "~:x1": 835.999963926528, + "~:y1": 4035.00002246628, + "~:x2": 2387.99996392653, + "~:y2": 5528.00002246628 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1493, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a6": { + "~#shape": { + "~:y": 2151.99990620884, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 1552, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 811.000017461204, + "~:y": 2151.99990620884 + } + }, + { + "~#point": { + "~:x": 2363.0000174612, + "~:y": 2151.99990620884 + } + }, + { + "~#point": { + "~:x": 2363.0000174612, + "~:y": 3644.99990620884 + } + }, + { + "~#point": { + "~:x": 811.000017461204, + "~:y": 3644.99990620884 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a6", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 811.000017461204, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 811.000017461204, + "~:y": 2151.99990620884, + "~:width": 1552, + "~:height": 1493, + "~:x1": 811.000017461204, + "~:y1": 2151.99990620884, + "~:x2": 2363.0000174612, + "~:y2": 3644.99990620884 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1493, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a5": { + "~#shape": { + "~:y": 4061.00000355891, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 5628.99989373455, + "~:y": 4061.00000355891 + } + }, + { + "~#point": { + "~:x": 6764.99989373455, + "~:y": 4061.00000355891 + } + }, + { + "~#point": { + "~:x": 6764.99989373455, + "~:y": 5579.00000355891 + } + }, + { + "~#point": { + "~:x": 5628.99989373455, + "~:y": 5579.00000355891 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a5", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 5628.99989373455, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 5628.99989373455, + "~:y": 4061.00000355891, + "~:width": 1136, + "~:height": 1518, + "~:x1": 5628.99989373455, + "~:y1": 4061.00000355891, + "~:x2": 6764.99989373455, + "~:y2": 5579.00000355891 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438a4": { + "~#shape": { + "~:y": 4056.00009301783, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 4197.99993060416, + "~:y": 4056.00009301783 + } + }, + { + "~#point": { + "~:x": 5333.99993060416, + "~:y": 4056.00009301783 + } + }, + { + "~#point": { + "~:x": 5333.99993060416, + "~:y": 5574.00009301783 + } + }, + { + "~#point": { + "~:x": 4197.99993060416, + "~:y": 5574.00009301783 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438a4", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 4197.99993060416, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 4197.99993060416, + "~:y": 4056.00009301783, + "~:width": 1136, + "~:height": 1518, + "~:x1": 4197.99993060416, + "~:y1": 4056.00009301783, + "~:x2": 5333.99993060416, + "~:y2": 5574.00009301783 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c5b": { + "~#shape": { + "~:y": 9478.99975296286, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 10089.000328645, + "~:y": 9478.99975296286 + } + }, + { + "~#point": { + "~:x": 11225.000328645, + "~:y": 9478.99975296286 + } + }, + { + "~#point": { + "~:x": 11225.000328645, + "~:y": 10996.9997529629 + } + }, + { + "~#point": { + "~:x": 10089.000328645, + "~:y": 10996.9997529629 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c5b", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 10089.000328645, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 10089.000328645, + "~:y": 9478.99975296286, + "~:width": 1136, + "~:height": 1518, + "~:x1": 10089.000328645, + "~:y1": 9478.99975296286, + "~:x2": 11225.000328645, + "~:y2": 10996.9997529629 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f4389b": { + "~#shape": { + "~:y": 11360.9999605895, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:content": { + "~:type": "root", + "~:key": "h8bbcy47mr", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:font-id": "sourcesanspro", + "~:key": "1o4afbmew95", + "~:font-size": "200", + "~:font-weight": "400", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "sourcesanspro", + "~:text": "These three shapes should be visually equal (rect and frame with/without clipping)" + } + ], + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:key": "1avwjyujtyp", + "~:font-size": "200", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [], + "~:font-family": "sourcesanspro" + } + ] + } + ], + "~:vertical-align": "top" + }, + "~:hide-in-viewer": false, + "~:name": "These three shapes should be visually equal (rect and frame with/without clipping)", + "~:width": 8675.73601102681, + "~:type": "~:text", + "~:points": [ + { + "~#point": { + "~:x": 667.00003705989, + "~:y": 11360.9999605895 + } + }, + { + "~#point": { + "~:x": 9342.73604808669, + "~:y": 11360.9999605895 + } + }, + { + "~#point": { + "~:x": 9342.73604808669, + "~:y": 11756.3717851478 + } + }, + { + "~#point": { + "~:x": 667.00003705989, + "~:y": 11756.3717851478 + } + } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f4389b", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:position-data": [ + { + "~:y": 11610.490234375, + "~:line-height": "1.2", + "~:font-style": "normal", + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:font-size": "200", + "~:font-weight": "400", + "~:text-direction": "ltr", + "~:width": 6884.85986328125, + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:x": 667.000061035156, + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:direction": "ltr", + "~:font-family": "sourcesanspro", + "~:height": 258.98046875, + "~:text": "These three shapes should be visually equal (rect and frame with/without clipping)" + } + ], + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 667.000037059889, + "~:selrect": { + "~#rect": { + "~:x": 667.000037059889, + "~:y": 11360.9999605895, + "~:width": 8675.73601102681, + "~:height": 395.371824558355, + "~:x1": 667.000037059889, + "~:y1": 11360.9999605895, + "~:x2": 9342.7360480867, + "~:y2": 11756.3717851478 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 395.371824558355, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c5a": { + "~#shape": { + "~:y": 9473.99984242178, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 8657.99963309276, + "~:y": 9473.99984242178 + } + }, + { + "~#point": { + "~:x": 9793.99963309276, + "~:y": 9473.99984242178 + } + }, + { + "~#point": { + "~:x": 9793.99963309276, + "~:y": 10991.9998424218 + } + }, + { + "~#point": { + "~:x": 8657.99963309276, + "~:y": 10991.9998424218 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c5a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 8657.99963309276, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 8657.99963309276, + "~:y": 9473.99984242178, + "~:width": 1136, + "~:height": 1518, + "~:x1": 8657.99963309276, + "~:y1": 9473.99984242178, + "~:x2": 9793.99963309276, + "~:y2": 10991.9998424218 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f4389a": { + "~#shape": { + "~:y": 11976.0000077782, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 2928.51852662758, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 4411.00009977552, + "~:y": 11976.0000077782 + } + }, + { + "~#point": { + "~:x": 7339.5186264031, + "~:y": 11976.0000077782 + } + }, + { + "~#point": { + "~:x": 7339.5186264031, + "~:y": 14800.0845581234 + } + }, + { + "~#point": { + "~:x": 4411.00009977552, + "~:y": 14800.0845581234 + } + } + ], + "~:r2": 0, + "~:layout-item-h-sizing": "~:fix", + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:layout-item-v-sizing": "~:fix", + "~:r3": 0, + "~:blur": { + "~:id": "~u5339c9ee-d6a8-80a6-8006-b710cd2ce7d6", + "~:type": "~:layer-blur", + "~:value": 20, + "~:hidden": false + }, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f4389a", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 100, + "~:stroke-color": "#ff0202", + "~:stroke-opacity": 1 + } + ], + "~:x": 4411.00009977552, + "~:proportion": 1, + "~:shadow": [ + { + "~:color": { + "~:color": "#010101", + "~:opacity": 1 + }, + "~:spread": 0, + "~:offset-y": 200, + "~:style": "~:drop-shadow", + "~:blur": 10, + "~:hidden": false, + "~:id": "~u59bee4d9-ff40-808f-8006-b6070426becf", + "~:offset-x": 200 + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 4411.00009977552, + "~:y": 11976.0000077782, + "~:width": 2928.51852662758, + "~:height": 2824.08455034524, + "~:x1": 4411.00009977552, + "~:y1": 11976.0000077782, + "~:x2": 7339.5186264031, + "~:y2": 14800.0845581234 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 2824.08455034524, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c59": { + "~#shape": { + "~:y": 9455.99974260097, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 7228.00010449896, + "~:y": 9455.99974260097 + } + }, + { + "~#point": { + "~:x": 8364.00010449896, + "~:y": 9455.99974260097 + } + }, + { + "~#point": { + "~:x": 8364.00010449896, + "~:y": 10973.999742601 + } + }, + { + "~#point": { + "~:x": 7228.00010449896, + "~:y": 10973.999742601 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c59", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 7228.00010449896, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 7228.00010449896, + "~:y": 9455.99974260097, + "~:width": 1136, + "~:height": 1518, + "~:x1": 7228.00010449896, + "~:y1": 9455.99974260097, + "~:x2": 8364.00010449896, + "~:y2": 10973.999742601 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f43899": { + "~#shape": { + "~:y": 11975.9999310362, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 5.6843418860808e-14, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Board without clipping", + "~:width": 2928.51855624499, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 8181.99983076588, + "~:y": 11975.999956165 + } + }, + { + "~#point": { + "~:x": 11110.5183870109, + "~:y": 11975.9999059074 + } + }, + { + "~#point": { + "~:x": 11110.5184363924, + "~:y": 14800.0843679262 + } + }, + { + "~#point": { + "~:x": 8181.99988014737, + "~:y": 14800.0844181838 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:layout-item-h-sizing": "~:fix", + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:layout-item-v-sizing": "~:fix", + "~:r3": 0, + "~:blur": { + "~:id": "~u5339c9ee-d6a8-80a6-8006-b710cd2ce7d6", + "~:type": "~:layer-blur", + "~:value": 20, + "~:hidden": false + }, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f43899", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 100, + "~:stroke-color": "#ff0202", + "~:stroke-opacity": 1 + } + ], + "~:x": 8181.99985545664, + "~:proportion": 1, + "~:shadow": [ + { + "~:color": { + "~:color": "#010101", + "~:opacity": 1 + }, + "~:spread": 0, + "~:offset-y": 200, + "~:style": "~:drop-shadow", + "~:blur": 10, + "~:hidden": false, + "~:id": "~u59bee4d9-ff40-808f-8006-b6070426becf", + "~:offset-x": 200 + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 8181.99985545664, + "~:y": 11975.9999310362, + "~:width": 2928.51855624499, + "~:height": 2824.08446201884, + "~:x1": 8181.99985545664, + "~:y1": 11975.9999310362, + "~:x2": 11110.5184117016, + "~:y2": 14800.084393055 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 2824.08446201884, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c58": { + "~#shape": { + "~:y": 7638.00024247003, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 10061.0006719377, + "~:y": 7638.00024247003 + } + }, + { + "~#point": { + "~:x": 11197.0006719377, + "~:y": 7638.00024247003 + } + }, + { + "~#point": { + "~:x": 11197.0006719377, + "~:y": 9156.00024247003 + } + }, + { + "~#point": { + "~:x": 10061.0006719377, + "~:y": 9156.00024247003 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c58", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 10061.0006719377, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 10061.0006719377, + "~:y": 7638.00024247003, + "~:width": 1136, + "~:height": 1518, + "~:x1": 10061.0006719377, + "~:y1": 7638.00024247003, + "~:x2": 11197.0006719377, + "~:y2": 9156.00024247003 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f43898": { + "~#shape": { + "~:y": 11976.0000168284, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 5.6843418860808e-14, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Board with clipping", + "~:width": 2928.51855624499, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 597, + "~:y": 11976.0000419572 + } + }, + { + "~#point": { + "~:x": 3525.51855624499, + "~:y": 11975.9999916996 + } + }, + { + "~#point": { + "~:x": 3525.51860562649, + "~:y": 14800.0844537184 + } + }, + { + "~#point": { + "~:x": 597.000049381491, + "~:y": 14800.084503976 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:layout-item-h-sizing": "~:fix", + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:layout-item-v-sizing": "~:fix", + "~:r3": 0, + "~:blur": { + "~:id": "~u5339c9ee-d6a8-80a6-8006-b710cd2ce7d6", + "~:type": "~:layer-blur", + "~:value": 20, + "~:hidden": false + }, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f43898", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 100, + "~:stroke-color": "#ff0202", + "~:stroke-opacity": 1 + } + ], + "~:x": 597.000024690753, + "~:proportion": 1, + "~:shadow": [ + { + "~:color": { + "~:color": "#010101", + "~:opacity": 1 + }, + "~:spread": 0, + "~:offset-y": 200, + "~:style": "~:drop-shadow", + "~:blur": 10, + "~:hidden": false, + "~:id": "~u59bee4d9-ff40-808f-8006-b6070426becf", + "~:offset-x": 200 + } + ], + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 597.000024690753, + "~:y": 11976.0000168284, + "~:width": 2928.51855624499, + "~:height": 2824.08446201884, + "~:x1": 597.000024690753, + "~:y1": 11976.0000168284, + "~:x2": 3525.51858093574, + "~:y2": 14800.0844788472 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 2824.08446201884, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f4389f": { + "~#shape": { + "~:y": 565.999972214917, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 5590.00015703936, + "~:y": 565.999972214917 + } + }, + { + "~#point": { + "~:x": 6726.00015703936, + "~:y": 565.999972214917 + } + }, + { + "~#point": { + "~:x": 6726.00015703936, + "~:y": 2083.99997221492 + } + }, + { + "~#point": { + "~:x": 5590.00015703936, + "~:y": 2083.99997221492 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f4389f", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 5590.00015703936, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 5590.00015703936, + "~:y": 565.999972214917, + "~:width": 1136, + "~:height": 1518, + "~:x1": 5590.00015703936, + "~:y1": 565.999972214917, + "~:x2": 6726.00015703936, + "~:y2": 2083.99997221492 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f4389e": { + "~#shape": { + "~:y": 561.000000638685, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 4158.99994976834, + "~:y": 561.000000638685 + } + }, + { + "~#point": { + "~:x": 5294.99994976834, + "~:y": 561.000000638685 + } + }, + { + "~#point": { + "~:x": 5294.99994976834, + "~:y": 2079.00000063869 + } + }, + { + "~#point": { + "~:x": 4158.99994976834, + "~:y": 2079.00000063869 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f4389e", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 4158.99994976834, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 4158.99994976834, + "~:y": 561.000000638685, + "~:width": 1136, + "~:height": 1518, + "~:x1": 4158.99994976834, + "~:y1": 561.000000638685, + "~:x2": 5294.99994976834, + "~:y2": 2079.00000063869 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f4389d": { + "~#shape": { + "~:y": 542.999992370606, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 2728.99999392845, + "~:y": 542.999992370606 + } + }, + { + "~#point": { + "~:x": 3864.99999392845, + "~:y": 542.999992370606 + } + }, + { + "~#point": { + "~:x": 3864.99999392845, + "~:y": 2060.99999237061 + } + }, + { + "~#point": { + "~:x": 2728.99999392845, + "~:y": 2060.99999237061 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f4389d", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 2728.99999392845, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 2728.99999392845, + "~:y": 542.999992370606, + "~:width": 1136, + "~:height": 1518, + "~:x1": 2728.99999392845, + "~:y1": 542.999992370606, + "~:x2": 3864.99999392845, + "~:y2": 2060.99999237061 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f4389c": { + "~#shape": { + "~:y": 478, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 1552, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 811.999978669659, + "~:y": 478 + } + }, + { + "~#point": { + "~:x": 2363.99997866966, + "~:y": 478 + } + }, + { + "~#point": { + "~:x": 2363.99997866966, + "~:y": 1971 + } + }, + { + "~#point": { + "~:x": 811.999978669659, + "~:y": 1971 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f4389c", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 811.999978669659, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 811.999978669659, + "~:y": 478, + "~:width": 1552, + "~:height": 1493, + "~:x1": 811.999978669659, + "~:y1": 478, + "~:x2": 2363.99997866966, + "~:y2": 1971 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1493, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c53": { + "~#shape": { + "~:y": 5960.99974177455, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 7189.00006262799, + "~:y": 5960.99974177455 + } + }, + { + "~#point": { + "~:x": 8325.00006262799, + "~:y": 5960.99974177455 + } + }, + { + "~#point": { + "~:x": 8325.00006262799, + "~:y": 7478.99974177455 + } + }, + { + "~#point": { + "~:x": 7189.00006262799, + "~:y": 7478.99974177455 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c53", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 7189.00006262799, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 7189.00006262799, + "~:y": 5960.99974177455, + "~:width": 1136, + "~:height": 1518, + "~:x1": 7189.00006262799, + "~:y1": 5960.99974177455, + "~:x2": 8325.00006262799, + "~:y2": 7478.99974177455 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c52": { + "~#shape": { + "~:y": 9458.99999972426, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 1552, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 694.999972370234, + "~:y": 9458.99999972426 + } + }, + { + "~#point": { + "~:x": 2246.99997237023, + "~:y": 9458.99999972426 + } + }, + { + "~#point": { + "~:x": 2246.99997237023, + "~:y": 10951.9999997243 + } + }, + { + "~#point": { + "~:x": 694.999972370234, + "~:y": 10951.9999997243 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c52", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 694.999972370234, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 694.999972370234, + "~:y": 9458.99999972426, + "~:width": 1552, + "~:height": 1493, + "~:x1": 694.999972370234, + "~:y1": 9458.99999972426, + "~:x2": 2246.99997237023, + "~:y2": 10951.9999997243 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1493, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c51": { + "~#shape": { + "~:y": 7576.00000553714, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 1552, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 670.000025904909, + "~:y": 7576.00000553714 + } + }, + { + "~#point": { + "~:x": 2222.00002590491, + "~:y": 7576.00000553714 + } + }, + { + "~#point": { + "~:x": 2222.00002590491, + "~:y": 9069.00000553714 + } + }, + { + "~#point": { + "~:x": 670.000025904909, + "~:y": 9069.00000553714 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c51", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 670.000025904909, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 670.000025904909, + "~:y": 7576.00000553714, + "~:width": 1552, + "~:height": 1493, + "~:x1": 670.000025904909, + "~:y1": 7576.00000553714, + "~:x2": 2222.00002590491, + "~:y2": 9069.00000553714 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1493, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438b1": { + "~#shape": { + "~:y": 5901.99997725798, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 1552, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 670.999987113365, + "~:y": 5901.99997725798 + } + }, + { + "~#point": { + "~:x": 2222.99998711336, + "~:y": 5901.99997725798 + } + }, + { + "~#point": { + "~:x": 2222.99998711336, + "~:y": 7394.99997725798 + } + }, + { + "~#point": { + "~:x": 670.999987113365, + "~:y": 7394.99997725798 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438b1", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 670.999987113365, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 670.999987113365, + "~:y": 5901.99997725798, + "~:width": 1552, + "~:height": 1493, + "~:x1": 670.999987113365, + "~:y1": 5901.99997725798, + "~:x2": 2222.99998711336, + "~:y2": 7394.99997725798 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1493, + "~:flip-y": null + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c50": { + "~#shape": { + "~:y": 4098.00008762842, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 10064.9997801079, + "~:y": 4098.00008762842 + } + }, + { + "~#point": { + "~:x": 11200.9997801079, + "~:y": 4098.00008762842 + } + }, + { + "~#point": { + "~:x": 11200.9997801079, + "~:y": 5616.00008762842 + } + }, + { + "~#point": { + "~:x": 10064.9997801079, + "~:y": 5616.00008762842 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c50", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 10064.9997801079, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 10064.9997801079, + "~:y": 4098.00008762842, + "~:width": 1136, + "~:height": 1518, + "~:x1": 10064.9997801079, + "~:y1": 4098.00008762842, + "~:x2": 11200.9997801079, + "~:y2": 5616.00008762842 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f438b0": { + "~#shape": { + "~:y": 9441.99991303398, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 5652.99995399039, + "~:y": 9441.99991303398 + } + }, + { + "~#point": { + "~:x": 6788.99995399039, + "~:y": 9441.99991303398 + } + }, + { + "~#point": { + "~:x": 6788.99995399039, + "~:y": 10959.999913034 + } + }, + { + "~#point": { + "~:x": 5652.99995399039, + "~:y": 10959.999913034 + } + } + ], + "~:r2": 0, + "~:show-content": false, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f438b0", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:outer", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 5652.99995399039, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 5652.99995399039, + "~:y": 9441.99991303398, + "~:width": 1136, + "~:height": 1518, + "~:x1": 5652.99995399039, + "~:y1": 9441.99991303398, + "~:x2": 6788.99995399039, + "~:y2": 10959.999913034 + } + }, + "~:fills": [ + { + "~:fill-color": "#b1b2b5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c57": { + "~#shape": { + "~:y": 7632.99984364771, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 8630.99954913934, + "~:y": 7632.99984364771 + } + }, + { + "~#point": { + "~:x": 9766.99954913934, + "~:y": 7632.99984364771 + } + }, + { + "~#point": { + "~:x": 9766.99954913934, + "~:y": 9150.99984364771 + } + }, + { + "~#point": { + "~:x": 8630.99954913934, + "~:y": 9150.99984364771 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c57", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 8630.99954913934, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 8630.99954913934, + "~:y": 7632.99984364771, + "~:width": 1136, + "~:height": 1518, + "~:x1": 8630.99954913934, + "~:y1": 7632.99984364771, + "~:x2": 9766.99954913934, + "~:y2": 9150.99984364771 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c56": { + "~#shape": { + "~:y": 7615.00023210814, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "100", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 7200.0000815807, + "~:y": 7615.00023210814 + } + }, + { + "~#point": { + "~:x": 8336.0000815807, + "~:y": 7615.00023210814 + } + }, + { + "~#point": { + "~:x": 8336.0000815807, + "~:y": 9133.00023210814 + } + }, + { + "~#point": { + "~:x": 7200.0000815807, + "~:y": 9133.00023210814 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c56", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:center", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 1 + } + ], + "~:x": 7200.0000815807, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 7200.0000815807, + "~:y": 7615.00023210814, + "~:width": 1136, + "~:height": 1518, + "~:x1": 7200.0000815807, + "~:y1": 7615.00023210814, + "~:x2": 8336.0000815807, + "~:y2": 9133.00023210814 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c55": { + "~#shape": { + "~:y": 5984.00020990012, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "20", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 10050.0005919498, + "~:y": 5984.00020990012 + } + }, + { + "~#point": { + "~:x": 11186.0005919498, + "~:y": 5984.00020990012 + } + }, + { + "~#point": { + "~:x": 11186.0005919498, + "~:y": 7502.00020990012 + } + }, + { + "~#point": { + "~:x": 10050.0005919498, + "~:y": 7502.00020990012 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c55", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.2 + } + ], + "~:x": 10050.0005919498, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 10050.0005919498, + "~:y": 5984.00020990012, + "~:width": 1136, + "~:height": 1518, + "~:x1": 10050.0005919498, + "~:y1": 5984.00020990012, + "~:x2": 11186.0005919498, + "~:y2": 7502.00020990012 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~udc94224b-9b94-8052-8007-8e3279f46c54": { + "~#shape": { + "~:y": 5978.99975004263, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "60", + "~:width": 1136, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 8618.99965225694, + "~:y": 5978.99975004263 + } + }, + { + "~#point": { + "~:x": 9754.99965225694, + "~:y": 5978.99975004263 + } + }, + { + "~#point": { + "~:x": 9754.99965225694, + "~:y": 7496.99975004263 + } + }, + { + "~#point": { + "~:x": 8618.99965225694, + "~:y": 7496.99975004263 + } + } + ], + "~:r2": 0, + "~:show-content": true, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~udc94224b-9b94-8052-8007-8e3279f46c54", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [ + { + "~:stroke-style": "~:solid", + "~:stroke-alignment": "~:inner", + "~:stroke-width": 80, + "~:stroke-color": "#000000", + "~:stroke-opacity": 0.6 + } + ], + "~:x": 8618.99965225694, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 8618.99965225694, + "~:y": 5978.99975004263, + "~:width": 1136, + "~:height": 1518, + "~:x1": 8618.99965225694, + "~:y1": 5978.99975004263, + "~:x2": 9754.99965225694, + "~:y2": 7496.99975004263 + } + }, + "~:fills": [], + "~:flip-x": null, + "~:height": 1518, + "~:flip-y": null, + "~:shapes": [] + } + } + }, + "~:id": "~u3ef988d9-9ecf-8021-8007-8e3278ab57a4", + "~:name": "Page 1" + } + }, + "~:id": "~u3ef988d9-9ecf-8021-8007-8e3278ab57a3", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js index 1026bcc4a1..a4a22da636 100644 --- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js +++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js @@ -290,6 +290,24 @@ test("Renders a file with nested clipping frames", async ({ page }) => { await expect(workspace.canvas).toHaveScreenshot(); }); +test("Renders clipped frames with strokes correctly (no double painting)", async ({ + page, +}) => { + const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockGetFile( + "render-wasm/get-file-frame-strokes-opacity.json", + ); + + await workspace.goToWorkspace({ + id: "3144ac7c-a5cc-80e8-8007-8bbb29a4e56e", + pageId: "3144ac7c-a5cc-80e8-8007-8bbb29a510ac", + }); + await workspace.waitForFirstRenderWithoutUI(); + + await expect(workspace.canvas).toHaveScreenshot(); +}); + test("Renders a clipped frame with a large blur drop shadow", async ({ page, }) => { diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-shadows-applied-to-any-kind-of-shape-1.png b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-shadows-applied-to-any-kind-of-shape-1.png index af3bc2af39..3e3ed40915 100644 Binary files a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-shadows-applied-to-any-kind-of-shape-1.png and b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-shadows-applied-to-any-kind-of-shape-1.png differ diff --git a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-clipped-frames-with-strokes-correctly-no-double-painting-1.png b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-clipped-frames-with-strokes-correctly-no-double-painting-1.png new file mode 100644 index 0000000000..e8d4a136b8 Binary files /dev/null and b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-clipped-frames-with-strokes-correctly-no-double-painting-1.png differ diff --git a/render-wasm/src/render.rs b/render-wasm/src/render.rs index b1968e7e99..9a69858f7c 100644 --- a/render-wasm/src/render.rs +++ b/render-wasm/src/render.rs @@ -1024,23 +1024,28 @@ impl RenderState { } } - for stroke in shape.visible_strokes().rev() { - strokes::render( - self, - shape, - stroke, - Some(strokes_surface_id), - None, - antialias, - ); - if !fast_mode { - shadows::render_stroke_inner_shadows( + // Skip stroke rendering for clipped frames - they are drawn in render_shape_exit + // over the children. Drawing twice would cause incorrect opacity blending. + let skip_strokes = matches!(shape.shape_type, Type::Frame(_)) && shape.clip_content; + if !skip_strokes { + for stroke in shape.visible_strokes().rev() { + strokes::render( self, shape, stroke, + Some(strokes_surface_id), + None, antialias, - innershadows_surface_id, ); + if !fast_mode { + shadows::render_stroke_inner_shadows( + self, + shape, + stroke, + antialias, + innershadows_surface_id, + ); + } } } @@ -1402,6 +1407,10 @@ impl RenderState { element_strokes.to_mut().clear_fills(); element_strokes.to_mut().clear_shadows(); element_strokes.to_mut().clip_content = false; + // Frame blur is applied at the save_layer level - avoid double blur on the stroke paint + if Self::frame_clip_layer_blur(element).is_some() { + element_strokes.to_mut().set_blur(None); + } self.render_shape( &element_strokes, clip_bounds, @@ -1551,6 +1560,11 @@ impl RenderState { plain_shape_mut.clear_shadows(); plain_shape_mut.blur = None; + // Shadow rendering uses a single render_shape call with no render_shape_exit, + // so strokes must be drawn here. Disable clip_content to avoid skip_strokes + // (which defers strokes to render_shape_exit for clipped frames). + plain_shape_mut.clip_content = false; + let Some(drop_filter) = transformed_shadow.get_drop_shadow_filter() else { return; }; @@ -1660,6 +1674,158 @@ impl RenderState { } } + /// Renders element drop shadows to DropShadows surface and composites to Current. + /// Used for both normal shadow rendering and pre-layer rendering (frame_clip_layer_blur). + #[allow(clippy::too_many_arguments)] + fn render_element_drop_shadows_and_composite( + &mut self, + element: &Shape, + tree: ShapesPoolRef, + extrect: &mut Option, + clip_bounds: Option, + scale: f32, + translation: (f32, f32), + node_render_state: &NodeRenderState, + ) { + let element_extrect = extrect.get_or_insert_with(|| element.extrect(tree, scale)); + let inherited_layer_blur = match element.shape_type { + Type::Frame(_) | Type::Group(_) => element.blur, + _ => None, + }; + + for shadow in element.drop_shadows_visible() { + let paint = skia::Paint::default(); + let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint); + self.surfaces + .canvas(SurfaceId::DropShadows) + .save_layer(&layer_rec); + + self.render_drop_black_shadow( + element, + element_extrect, + shadow, + clip_bounds.clone(), + scale, + translation, + None, + ); + + if !matches!(element.shape_type, Type::Bool(_)) { + for shadow_shape_id in element.children.iter() { + let Some(shadow_shape) = tree.get(shadow_shape_id) else { + continue; + }; + if shadow_shape.hidden { + continue; + } + let nested_clip_bounds = + node_render_state.get_nested_shadow_clip_bounds(element, shadow); + + if !matches!(shadow_shape.shape_type, Type::Text(_)) { + self.render_drop_black_shadow( + shadow_shape, + &shadow_shape.extrect(tree, scale), + shadow, + nested_clip_bounds, + scale, + translation, + inherited_layer_blur, + ); + } else { + let paint = skia::Paint::default(); + let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint); + self.surfaces + .canvas(SurfaceId::DropShadows) + .save_layer(&layer_rec); + self.surfaces + .canvas(SurfaceId::DropShadows) + .scale((scale, scale)); + self.surfaces + .canvas(SurfaceId::DropShadows) + .translate(translation); + + let mut transformed_shadow: Cow = Cow::Borrowed(shadow); + transformed_shadow.to_mut().color = skia::Color::BLACK; + transformed_shadow.to_mut().blur = transformed_shadow.blur * scale; + transformed_shadow.to_mut().spread = transformed_shadow.spread * scale; + + let mut new_shadow_paint = skia::Paint::default(); + new_shadow_paint + .set_image_filter(transformed_shadow.get_drop_shadow_filter()); + new_shadow_paint.set_blend_mode(skia::BlendMode::SrcOver); + + self.with_nested_blurs_suppressed(|state| { + state.render_shape( + shadow_shape, + nested_clip_bounds, + SurfaceId::DropShadows, + SurfaceId::DropShadows, + SurfaceId::DropShadows, + SurfaceId::DropShadows, + true, + None, + Some(vec![new_shadow_paint.clone()]), + ); + }); + self.surfaces.canvas(SurfaceId::DropShadows).restore(); + } + } + } + + let mut paint = skia::Paint::default(); + paint.set_color(shadow.color); + paint.set_blend_mode(skia::BlendMode::SrcIn); + self.surfaces + .canvas(SurfaceId::DropShadows) + .draw_paint(&paint); + + self.surfaces.canvas(SurfaceId::DropShadows).restore(); + } + + if let Some(clips) = clip_bounds.as_ref() { + let antialias = element.should_use_antialias(scale); + self.surfaces.canvas(SurfaceId::Current).save(); + for (bounds, corners, transform) in clips.iter() { + let mut total_matrix = Matrix::new_identity(); + total_matrix.pre_scale((scale, scale), None); + total_matrix.pre_translate((translation.0, translation.1)); + total_matrix.pre_concat(transform); + + self.surfaces + .canvas(SurfaceId::Current) + .concat(&total_matrix); + + if let Some(corners) = corners { + let rrect = RRect::new_rect_radii(*bounds, corners); + self.surfaces.canvas(SurfaceId::Current).clip_rrect( + rrect, + skia::ClipOp::Intersect, + antialias, + ); + } else { + self.surfaces.canvas(SurfaceId::Current).clip_rect( + *bounds, + skia::ClipOp::Intersect, + antialias, + ); + } + + self.surfaces + .canvas(SurfaceId::Current) + .concat(&total_matrix.invert().unwrap_or_default()); + } + self.surfaces + .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None); + self.surfaces.canvas(SurfaceId::Current).restore(); + } else { + self.surfaces + .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None); + } + self.surfaces + .canvas(SurfaceId::DropShadows) + .clear(skia::Color::TRANSPARENT); + } + pub fn render_shape_tree_partial_uncached( &mut self, tree: ShapesPoolRef, @@ -1742,6 +1908,33 @@ impl RenderState { // If a container was flattened, it doesn't affect children visually, so we skip // the expensive enter/exit operations and process children directly if !element.can_flatten() { + // Enter focus early so shadow_before_layer can run (it needs focus_mode.is_active()) + self.focus_mode.enter(&element.id); + + // For frames with layer blur, render shadow BEFORE the layer so it doesn't get + // the layer blur (which would make it more diffused than without clipping) + let shadow_before_layer = !node_render_state.is_root() + && self.focus_mode.is_active() + && !self.options.is_fast_mode() + && !matches!(element.shape_type, Type::Text(_)) + && Self::frame_clip_layer_blur(element).is_some() + && element.drop_shadows_visible().next().is_some(); + + if shadow_before_layer { + let translation = self + .surfaces + .get_render_context_translation(self.render_area, scale); + self.render_element_drop_shadows_and_composite( + element, + tree, + &mut extrect, + clip_bounds.clone(), + scale, + translation, + &node_render_state, + ); + } + self.render_shape_enter(element, mask); } @@ -1753,180 +1946,25 @@ impl RenderState { // Skip expensive drop shadow rendering in fast mode (during pan/zoom) let skip_shadows = self.options.is_fast_mode(); + // Skip shadow block when already rendered before the layer (frame_clip_layer_blur) + let shadows_already_rendered = Self::frame_clip_layer_blur(element).is_some(); + // For text shapes, render drop shadow using text rendering logic - if !skip_shadows && !matches!(element.shape_type, Type::Text(_)) { - // Shadow rendering technique: Two-pass approach for proper opacity handling - // - // The shadow rendering uses a two-pass technique to ensure that overlapping - // shadow areas maintain correct opacity without unwanted darkening: - // - // 1. First pass: Render shadow shape in pure black (alpha channel preserved) - // - This creates the shadow silhouette with proper alpha gradients - // - The black color acts as a mask for the final shadow color - // - // 2. Second pass: Apply actual shadow color using SrcIn blend mode - // - SrcIn preserves the alpha channel from the black shadow - // - Only the color channels are replaced, maintaining transparency - // - This prevents overlapping shadows from accumulating opacity - // - // This approach is essential for complex shapes with transparency where - // multiple shadow areas might overlap, ensuring visual consistency. - let inherited_layer_blur = match element.shape_type { - Type::Frame(_) | Type::Group(_) => element.blur, - _ => None, - }; - - for shadow in element.drop_shadows_visible() { - let paint = skia::Paint::default(); - let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint); - - self.surfaces - .canvas(SurfaceId::DropShadows) - .save_layer(&layer_rec); - - // First pass: Render shadow in black to establish alpha mask - let element_extrect = - extrect.get_or_insert_with(|| element.extrect(tree, scale)); - self.render_drop_black_shadow( - element, - element_extrect, - shadow, - clip_bounds.clone(), - scale, - translation, - None, - ); - - if !matches!(element.shape_type, Type::Bool(_)) { - // Nested shapes shadowing - apply black shadow to child shapes too - for shadow_shape_id in element.children.iter() { - let Some(shadow_shape) = tree.get(shadow_shape_id) else { - continue; - }; - if shadow_shape.hidden { - continue; - } - let clip_bounds = node_render_state - .get_nested_shadow_clip_bounds(element, shadow); - - if !matches!(shadow_shape.shape_type, Type::Text(_)) { - self.render_drop_black_shadow( - shadow_shape, - &shadow_shape.extrect(tree, scale), - shadow, - clip_bounds, - scale, - translation, - inherited_layer_blur, - ); - } else { - let paint = skia::Paint::default(); - let layer_rec = - skia::canvas::SaveLayerRec::default().paint(&paint); - - self.surfaces - .canvas(SurfaceId::DropShadows) - .save_layer(&layer_rec); - self.surfaces - .canvas(SurfaceId::DropShadows) - .scale((scale, scale)); - self.surfaces - .canvas(SurfaceId::DropShadows) - .translate(translation); - - let mut transformed_shadow: Cow = Cow::Borrowed(shadow); - - transformed_shadow.to_mut().color = skia::Color::BLACK; - transformed_shadow.to_mut().blur = - transformed_shadow.blur * scale; - transformed_shadow.to_mut().spread = - transformed_shadow.spread * scale; - - let mut new_shadow_paint = skia::Paint::default(); - new_shadow_paint.set_image_filter( - transformed_shadow.get_drop_shadow_filter(), - ); - new_shadow_paint.set_blend_mode(skia::BlendMode::SrcOver); - - self.with_nested_blurs_suppressed(|state| { - state.render_shape( - shadow_shape, - clip_bounds, - SurfaceId::DropShadows, - SurfaceId::DropShadows, - SurfaceId::DropShadows, - SurfaceId::DropShadows, - true, - None, - Some(vec![new_shadow_paint.clone()]), - ); - }); - self.surfaces.canvas(SurfaceId::DropShadows).restore(); - } - } - } - - // Second pass: Apply actual shadow color using SrcIn blend mode - // This preserves the alpha channel from the black shadow while - // replacing only the color channels, preventing opacity accumulation - let mut paint = skia::Paint::default(); - paint.set_color(shadow.color); - paint.set_blend_mode(skia::BlendMode::SrcIn); - self.surfaces - .canvas(SurfaceId::DropShadows) - .draw_paint(&paint); - - self.surfaces.canvas(SurfaceId::DropShadows).restore(); - } + if !skip_shadows + && !shadows_already_rendered + && !matches!(element.shape_type, Type::Text(_)) + { + self.render_element_drop_shadows_and_composite( + element, + tree, + &mut extrect, + clip_bounds.clone(), + scale, + translation, + &node_render_state, + ); } - if let Some(clips) = clip_bounds.as_ref() { - let antialias = element.should_use_antialias(scale); - - self.surfaces.canvas(SurfaceId::Current).save(); - for (bounds, corners, transform) in clips.iter() { - let mut total_matrix = Matrix::new_identity(); - total_matrix.pre_scale((scale, scale), None); - total_matrix.pre_translate((translation.0, translation.1)); - total_matrix.pre_concat(transform); - - self.surfaces - .canvas(SurfaceId::Current) - .concat(&total_matrix); - - if let Some(corners) = corners { - let rrect = RRect::new_rect_radii(*bounds, corners); - self.surfaces.canvas(SurfaceId::Current).clip_rrect( - rrect, - skia::ClipOp::Intersect, - antialias, - ); - } else { - self.surfaces.canvas(SurfaceId::Current).clip_rect( - *bounds, - skia::ClipOp::Intersect, - antialias, - ); - } - - self.surfaces - .canvas(SurfaceId::Current) - .concat(&total_matrix.invert().unwrap_or_default()); - } - - self.surfaces - .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None); - - self.surfaces.canvas(SurfaceId::Current).restore(); - } else { - self.surfaces - .draw_into(SurfaceId::DropShadows, SurfaceId::Current, None); - } - - self.surfaces - .canvas(SurfaceId::DropShadows) - .clear(skia::Color::TRANSPARENT); - self.render_shape( element, clip_bounds.clone(),