mirror of
https://github.com/penpot/penpot.git
synced 2025-12-11 22:14:05 +01:00
🐛 Render shadows on nested shapes
This commit is contained in:
Elena Torro
committed by
Belén Albeza
Belén Albeza
parent
c6b907d05c
commit
1b50c13c4d
@@ -0,0 +1,146 @@
|
|||||||
|
{
|
||||||
|
"~:features": {
|
||||||
|
"~#set": [
|
||||||
|
"fdata/path-data",
|
||||||
|
"plugins/runtime",
|
||||||
|
"design-tokens/v1",
|
||||||
|
"variants/v1",
|
||||||
|
"layout/grid",
|
||||||
|
"styles/v2",
|
||||||
|
"fdata/objects-map",
|
||||||
|
"render-wasm/v1",
|
||||||
|
"components/v2",
|
||||||
|
"fdata/shape-data-type"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"~:team-id": "~u6bd7c17d-4f59-815e-8006-5c1f6882469a",
|
||||||
|
"~: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": "group_with_text_shadows",
|
||||||
|
"~:revn": 31,
|
||||||
|
"~:modified-at": "~m1762430368134",
|
||||||
|
"~:vern": 0,
|
||||||
|
"~:id": "~u58c5cc60-d124-81bd-8007-0f30f1ac452a",
|
||||||
|
"~: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",
|
||||||
|
"0004-clean-shadow-color",
|
||||||
|
"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",
|
||||||
|
"0016-copy-fills-from-position-data-to-text-node"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"~:version": 67,
|
||||||
|
"~:project-id": "~u6bd7c17d-4f59-815e-8006-5c1f68846e43",
|
||||||
|
"~:created-at": "~m1762273747633",
|
||||||
|
"~:backend": "legacy-db",
|
||||||
|
"~:data": {
|
||||||
|
"~:pages": [
|
||||||
|
"~u58c5cc60-d124-81bd-8007-0f30f1ac452b"
|
||||||
|
],
|
||||||
|
"~:pages-index": {
|
||||||
|
"~u58c5cc60-d124-81bd-8007-0f30f1ac452b": {
|
||||||
|
"~:objects": {
|
||||||
|
"~#penpot/objects-map/v2": {
|
||||||
|
"~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",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,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~u457f223c-eff4-8043-8007-1186366cf83f\"]]]",
|
||||||
|
"~u457f223c-eff4-8043-8007-1186366cf83f": "[\"~#shape\",[\"^ \",\"~:y\",1127.9999542236328,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:index\",3,\"~:name\",\"Text shadow\",\"~:width\",937.0000171528263,\"~:type\",\"~:group\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",1127.9999542236328]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1127.9999542236328]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1434.9999937907205]],[\"^:\",[\"^ \",\"~:x\",182,\"~:y\",1434.9999937907205]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:blocked\",false,\"~:proportion\",1,\"~:shadow\",[[\"^ \",\"~:color\",[\"^ \",\"^I\",\"#d276ff\",\"~:opacity\",1],\"~:spread\",1,\"~:offset-y\",4,\"~:style\",\"~:drop-shadow\",\"~:blur\",0,\"~:hidden\",false,\"^B\",\"~u376e6303-a232-8017-8004-908433a7d495\",\"~:offset-x\",4]],\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",1127.9999542236328,\"^6\",937.0000171528263,\"~:height\",307.0000395670877,\"~:x1\",182,\"~:y1\",1127.9999542236328,\"~:x2\",1119.0000171528263,\"~:y2\",1434.9999937907205]],\"~:fills\",[],\"~:flip-x\",false,\"^T\",307.0000395670877,\"~:flip-y\",false,\"~:shapes\",[\"~u457f223c-eff4-8043-8007-1186366cf840\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~u457f223c-eff4-8043-8007-1186366cf842\"]]]",
|
||||||
|
"~u22590301-48da-807a-8007-0f30f2c3c7a3": "[\"~#shape\",[\"^ \",\"~:y\",565.9999791979773,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:index\",3,\"~:name\",\"Text shadow\",\"~:width\",937.0000171528263,\"~:type\",\"~:group\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",565.9999791979773]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",565.9999791979773]],[\"^:\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",873.0000187650649]],[\"^:\",[\"^ \",\"~:x\",182,\"~:y\",873.0000187650649]]],\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:blocked\",false,\"~:proportion\",1,\"~:shadow\",[[\"^ \",\"~:color\",[\"^ \",\"^I\",\"#166ada\",\"~:opacity\",1],\"~:spread\",40,\"~:offset-y\",4,\"~:style\",\"~:drop-shadow\",\"~:blur\",50,\"~:hidden\",false,\"^B\",\"~u376e6303-a232-8017-8004-908433a7d495\",\"~:offset-x\",4]],\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",565.9999791979773,\"^6\",937.0000171528263,\"~:height\",307.0000395670876,\"~:x1\",182,\"~:y1\",565.9999791979773,\"~:x2\",1119.0000171528263,\"~:y2\",873.0000187650649]],\"~:fills\",[],\"~:flip-x\",false,\"^T\",307.0000395670876,\"~:flip-y\",false,\"~:shapes\",[\"~u22590301-48da-807a-8007-0f30f2c3c7a4\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~udbebc08f-fd4a-800a-8007-11852f2de796\"]]]",
|
||||||
|
"~u22590301-48da-807a-8007-0f30f2c3c7a7": "[\"~#shape\",[\"^ \",\"~:y\",782.9999720950955,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-height\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"7hmohksim0\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"~:typography-ref-id\",null,\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2fc3qdybqwr\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:typography-ref-file\",null,\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the text body\"]],\"^<\",null,\"^=\",\"none\",\"~:text-align\",\"left\",\"^>\",\"gfont-karla\",\"^8\",\"29emf8fbblr\",\"^?\",\"0\",\"^@\",\"500\",\"^A\",null,\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"500\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^H\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Example of UI design, flex + grid layouts, prototyping, light + dark mode colors, typographies and components.\",\"~:width\",702.99999999999,\"^7\",\"^I\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",782.9999720950955]],[\"^Q\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",782.9999720950955]],[\"^Q\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",824.9999708433805]],[\"^Q\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",824.9999708433805]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a7\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:position-data\",[[\"^ \",\"~:y\",824.1999486982821,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"~:y1\",0.4000000059604645,\"^O\",662.6312866210938,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"~:x2\",662.6312866210938,\"~:direction\",\"ltr\",\"^H\",\"Karla\",\"~:height\",40.79999923706055,\"^I\",\"Example of UI design, flex + grid layouts, \"],[\"^ \",\"~:y\",866.199954032898,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"^[\",42.400001525878906,\"^O\",615.8500366210938,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"^10\",0,\"^11\",83.20000457763672,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^12\",615.8500366210938,\"^13\",\"ltr\",\"^H\",\"Karla\",\"^14\",40.80000305175781,\"^I\",\"prototyping, light + dark mode colors, \"],[\"^ \",\"~:y\",908.199954032898,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"^[\",84.4000015258789,\"^O\",503.13751220703125,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"^10\",0,\"^11\",125.20000457763672,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^12\",503.13751220703125,\"^13\",\"ltr\",\"^H\",\"Karla\",\"^14\",40.80000305175781,\"^I\",\"typographies and components.\"]],\"~:frame-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:strokes\",[],\"~:x\",415.99998795994475,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",782.9999720950955,\"^O\",702.99999999999,\"^14\",41.999998748285066,\"^10\",415.99998795994475,\"^[\",782.9999720950955,\"^12\",1118.9999879599347,\"^11\",824.9999708433805]],\"^E\",[],\"~:flip-x\",null,\"^14\",41.999998748285066,\"~:flip-y\",null]]",
|
||||||
|
"~u22590301-48da-807a-8007-0f30f2c3c7a6": "[\"~#shape\",[\"^ \",\"~:y\",840.0000141561163,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"dxn5loqivn\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:typography-ref-id\",null,\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"11x47j94xkq\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:typography-ref-file\",null,\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is just another text at the bottom\"]],\"^<\",null,\"^=\",\"none\",\"~:text-align\",\"left\",\"^>\",\"gfont-karla\",\"^8\",\"1rfpnyrk4it\",\"^?\",\"35\",\"^@\",\"500\",\"^A\",null,\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"500\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"^H\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Version 1. June 2024\",\"~:width\",702.99999999999,\"^7\",\"^I\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.9999879599491,\"~:y\",840.0000141561163]],[\"^Q\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",840.0000141561163]],[\"^Q\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",873.000022023929]],[\"^Q\",[\"^ \",\"~:x\",415.9999879599491,\"~:y\",873.000022023929]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:hidden\",false,\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a6\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:position-data\",[[\"^ \",\"~:y\",881.199900329113,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"35px\",\"^@\",\"500\",\"~:y1\",0.4000000059604645,\"^O\",323.5187683105469,\"^C\",\"none solid rgb(94, 24, 175)\",\"^D\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^E\",[[\"^ \",\"^F\",\"#5E18AF\",\"^G\",1]],\"~:x2\",323.5187683105469,\"~:direction\",\"ltr\",\"^H\",\"Karla\",\"~:height\",40.79999923706055,\"^I\",\"Version 1. June 2024\"]],\"~:frame-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:strokes\",[],\"~:x\",415.9999879599491,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.9999879599491,\"~:y\",840.0000141561163,\"^O\",702.99999999999,\"^15\",33.000007867812656,\"^11\",415.9999879599491,\"^10\",840.0000141561163,\"^13\",1118.999987959939,\"^12\",873.000022023929]],\"^E\",[],\"~:flip-x\",null,\"^15\",33.000007867812656,\"~:flip-y\",null]]",
|
||||||
|
"~u22590301-48da-807a-8007-0f30f2c3c7a5": "[\"~#shape\",[\"^ \",\"~:y\",782.9999810452875,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",-2.842170943040401E-14,\"~:p2\",0,\"~:p3\",-2.842170943040401E-14,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"description\",\"~:layout-align-items\",\"~:start\",\"~:width\",703.0000076883839,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",782.9999810452875]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",782.9999810452875]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",873.0000080957647]],[\"^J\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",873.0000080957647]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",15,\"~:column-gap\",15],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:layout-item-v-sizing\",\"^M\",\"~:layout-justify-content\",\"^C\",\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a5\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",416.00000946444237,\"~:blocked\",false,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",416.00000946444237,\"~:y\",782.9999810452875,\"^D\",703.0000076883839,\"~:height\",90.00002705047712,\"~:x1\",416.00000946444237,\"~:y1\",782.9999810452875,\"~:x2\",1119.0000171528263,\"~:y2\",873.0000080957647]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",90.00002705047712,\"~:flip-y\",null,\"~:shapes\",[\"~u22590301-48da-807a-8007-0f30f2c3c7a6\",\"~u22590301-48da-807a-8007-0f30f2c3c7a7\"]]]",
|
||||||
|
"~u22590301-48da-807a-8007-0f30f2c3c7a4": "[\"~#shape\",[\"^ \",\"~:y\",565.9999637007554,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"8gvslj04p9\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:typography-ref-id\",null,\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2eqbmpbto3f\",\"~:font-size\",\"60\",\"~:font-weight\",\"700\",\"~:typography-ref-file\",null,\"~:font-variant-id\",\"700\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#805ad5\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the title\"]],\"^<\",null,\"^=\",\"none\",\"~:text-align\",\"left\",\"^>\",\"gfont-karla\",\"^8\",\"yl00fqu977\",\"^?\",\"60\",\"^@\",\"700\",\"^A\",null,\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^B\",\"700\",\"^C\",\"none\",\"^D\",\"0\",\"^E\",[[\"^ \",\"^F\",\"#805ad5\",\"^G\",1]],\"^H\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Sales dashboard example\",\"~:width\",428.000002264963,\"^7\",\"^I\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",386.99999294062314,\"~:y\",565.9999637007555]],[\"^Q\",[\"^ \",\"~:x\",814.9999952055861,\"~:y\",565.9999637007555]],[\"^Q\",[\"^ \",\"~:x\",814.9999952055861,\"~:y\",638.0000023244937]],[\"^Q\",[\"^ \",\"~:x\",386.99999294062314,\"~:y\",638.0000023244937]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:hidden\",false,\"~:id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a4\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:position-data\",[[\"^ \",\"~:y\",601.1998026371002,\"^;\",\"normal\",\"^=\",\"none\",\"^?\",\"60px\",\"^@\",\"700\",\"~:y1\",0.800000011920929,\"^O\",736.3812866210938,\"^C\",\"none solid rgb(128, 90, 213)\",\"^D\",\"normal\",\"~:x\",306.9999465942383,\"~:x1\",0,\"~:y2\",71.20000153779984,\"^E\",[[\"^ \",\"^F\",\"#805ad5\",\"^G\",1]],\"~:x2\",736.3812866210938,\"~:direction\",\"ltr\",\"^H\",\"Karla\",\"~:height\",70.4000015258789,\"^I\",\"Sales dashboard example\"]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",386.9999929406232,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",386.9999929406232,\"~:y\",565.9999637007554,\"^O\",428.000002264963,\"^11\",72.00003862373819,\"^Y\",386.9999929406232,\"^X\",565.9999637007554,\"^[\",814.9999952055862,\"^Z\",638.0000023244936]],\"^E\",[],\"~:flip-x\",null,\"^11\",72.00003862373819,\"~:flip-y\",null]]",
|
||||||
|
"~udbebc08f-fd4a-800a-8007-11852f2de796": "[\"~#shape\",[\"^ \",\"~:y\",704.9999632537276,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",123,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",704.9999632537276]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",704.9999632537276]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",758.9999020993622]],[\"^<\",[\"^ \",\"~:x\",182,\"~:y\",758.9999020993622]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:constraints-v\",\"~:scale\",\"~:constraints-h\",\"^B\",\"~:r1\",0,\"~:id\",\"~udbebc08f-fd4a-800a-8007-11852f2de796\",\"~:parent-id\",\"~u22590301-48da-807a-8007-0f30f2c3c7a3\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",704.9999632537276,\"^8\",123,\"~:height\",53.999938845634574,\"~:x1\",182,\"~:y1\",704.9999632537276,\"~:x2\",305,\"~:y2\",758.9999020993622]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#476fe7\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^M\",53.999938845634574,\"~:flip-y\",null]]",
|
||||||
|
"~u457f223c-eff4-8043-8007-1186366cf841": "[\"~#shape\",[\"^ \",\"~:y\",1344.9999721046204,\"~:hide-fill-on-export\",false,\"~:layout-gap-type\",\"~:multiple\",\"~:layout-padding\",[\"^ \",\"~:p1\",-2.842170943040401E-14,\"~:p2\",0,\"~:p3\",-2.842170943040401E-14,\"~:p4\",0],\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:layout-wrap-type\",\"~:nowrap\",\"~:layout\",\"~:flex\",\"~:hide-in-viewer\",true,\"~:name\",\"description\",\"~:layout-align-items\",\"~:start\",\"~:width\",703.0000076883839,\"~:layout-padding-type\",\"~:simple\",\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",1344.9999721046204]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1344.9999721046204]],[\"^J\",[\"^ \",\"~:x\",1119.0000171528263,\"~:y\",1434.9999937907205]],[\"^J\",[\"^ \",\"~:x\",416.0000094644423,\"~:y\",1434.9999937907205]]],\"~:show-content\",true,\"~:layout-item-h-sizing\",\"~:auto\",\"~:proportion-lock\",false,\"~:layout-gap\",[\"^ \",\"~:row-gap\",15,\"~:column-gap\",15],\"~:transform-inverse\",[\"^:\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:layout-item-v-sizing\",\"^M\",\"~:layout-justify-content\",\"^C\",\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:layout-flex-dir\",\"~:column\",\"~:layout-align-content\",\"~:stretch\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",416.0000094644424,\"~:blocked\",false,\"~:proportion\",1,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",416.0000094644424,\"~:y\",1344.9999721046204,\"^D\",703.0000076883839,\"~:height\",90.00002168610013,\"~:x1\",416.0000094644424,\"~:y1\",1344.9999721046204,\"~:x2\",1119.0000171528263,\"~:y2\",1434.9999937907205]],\"~:fills\",[],\"~:flip-x\",null,\"^16\",90.00002168610013,\"~:flip-y\",null,\"~:shapes\",[\"~u457f223c-eff4-8043-8007-1186366cf843\",\"~u457f223c-eff4-8043-8007-1186366cf844\"]]]",
|
||||||
|
"~u457f223c-eff4-8043-8007-1186366cf840": "[\"~#shape\",[\"^ \",\"~:y\",1127.9999542236328,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-width\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"8gvslj04p9\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2eqbmpbto3f\",\"~:font-size\",\"60\",\"~:font-weight\",\"700\",\"~:font-variant-id\",\"700\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#805ad5\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the title\"]],\"^<\",\"none\",\"~:text-align\",\"left\",\"^=\",\"gfont-karla\",\"^8\",\"yl00fqu977\",\"^>\",\"60\",\"^?\",\"700\",\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^@\",\"700\",\"^A\",\"none\",\"^B\",\"0\",\"^C\",[[\"^ \",\"^D\",\"#805ad5\",\"^E\",1]],\"^F\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Sales dashboard example\",\"~:width\",428.000002264963,\"^7\",\"^G\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",386.9999929406231,\"~:y\",1127.9999542236328]],[\"^O\",[\"^ \",\"~:x\",814.999995205586,\"~:y\",1127.9999542236328]],[\"^O\",[\"^ \",\"~:x\",814.999995205586,\"~:y\",1199.9999928474213]],[\"^O\",[\"^ \",\"~:x\",386.9999929406231,\"~:y\",1199.9999928474213]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:hidden\",false,\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf840\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:position-data\",[[\"^ \",\"~:y\",1163.1997547745723,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"60px\",\"^?\",\"700\",\"~:y1\",0.800000011920929,\"^M\",736.3812866210938,\"^A\",\"none solid rgb(128, 90, 213)\",\"^B\",\"normal\",\"~:x\",306.9999465942383,\"~:x1\",0,\"~:y2\",71.20000153779984,\"^C\",[[\"^ \",\"^D\",\"#805ad5\",\"^E\",1]],\"~:x2\",736.3812866210938,\"~:direction\",\"ltr\",\"^F\",\"Karla\",\"~:height\",70.4000015258789,\"^G\",\"Sales dashboard example\"]],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",386.9999929406232,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",386.9999929406232,\"~:y\",1127.9999542236328,\"^M\",428.000002264963,\"^[\",72.00003862378844,\"^W\",386.9999929406232,\"^V\",1127.9999542236328,\"^Y\",814.9999952055862,\"^X\",1199.9999928474213]],\"^C\",[],\"~:flip-x\",null,\"^[\",72.00003862378844,\"~:flip-y\",null]]",
|
||||||
|
"~u457f223c-eff4-8043-8007-1186366cf843": "[\"~#shape\",[\"^ \",\"~:y\",1401.999989181772,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"dxn5loqivn\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"1.2\",\"^;\",\"normal\",\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"11x47j94xkq\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is just another text at the bottom\"]],\"^<\",\"none\",\"~:text-align\",\"left\",\"^=\",\"gfont-karla\",\"^8\",\"1rfpnyrk4it\",\"^>\",\"35\",\"^?\",\"500\",\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^@\",\"500\",\"^A\",\"none\",\"^B\",\"0\",\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^F\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Version 1. June 2024\",\"~:width\",702.99999999999,\"^7\",\"^G\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.99998795994907,\"~:y\",1401.999989181772]],[\"^O\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",1401.999989181772]],[\"^O\",[\"^ \",\"~:x\",1118.999987959939,\"~:y\",1434.9999970495846]],[\"^O\",[\"^ \",\"~:x\",415.99998795994907,\"~:y\",1434.9999970495846]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:hidden\",false,\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf843\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:position-data\",[[\"^ \",\"~:y\",1443.1998753547687,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"~:y1\",0.4000000059604645,\"^M\",323.5187683105469,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"~:x2\",323.5187683105469,\"~:direction\",\"ltr\",\"^F\",\"Karla\",\"~:height\",40.79999923706055,\"^G\",\"Version 1. June 2024\"]],\"~:frame-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:strokes\",[],\"~:x\",415.99998795994907,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.99998795994907,\"~:y\",1401.999989181772,\"^M\",702.99999999999,\"^13\",33.000007867812656,\"^[\",415.99998795994907,\"^Z\",1401.999989181772,\"^11\",1118.999987959939,\"^10\",1434.9999970495846]],\"^C\",[],\"~:flip-x\",null,\"^13\",33.000007867812656,\"~:flip-y\",null]]",
|
||||||
|
"~u457f223c-eff4-8043-8007-1186366cf842": "[\"~#shape\",[\"^ \",\"~:y\",1266.9999993145393,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",123,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",182,\"~:y\",1266.9999993145393]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",1266.9999993145393]],[\"^<\",[\"^ \",\"~:x\",305,\"~:y\",1320.999938160174]],[\"^<\",[\"^ \",\"~:x\",182,\"~:y\",1320.999938160174]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:constraints-v\",\"~:scale\",\"~:constraints-h\",\"^B\",\"~:r1\",0,\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf842\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf83f\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",182,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",182,\"~:y\",1266.9999993145393,\"^8\",123,\"~:height\",53.99993884563446,\"~:x1\",182,\"~:y1\",1266.9999993145393,\"~:x2\",305,\"~:y2\",1320.9999381601738]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#476fe7\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^M\",53.99993884563446,\"~:flip-y\",null]]",
|
||||||
|
"~u457f223c-eff4-8043-8007-1186366cf844": "[\"~#shape\",[\"^ \",\"~:y\",1345.0000691910636,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:auto-height\",\"~:content\",[\"^ \",\"~:type\",\"root\",\"~:key\",\"7hmohksim0\",\"~:children\",[[\"^ \",\"^7\",\"paragraph-set\",\"^9\",[[\"^ \",\"~:line-height\",\"1.2\",\"~:font-style\",\"normal\",\"^9\",[[\"^ \",\"^:\",\"\",\"^;\",\"normal\",\"~:text-transform\",\"none\",\"~:font-id\",\"gfont-karla\",\"^8\",\"2fc3qdybqwr\",\"~:font-size\",\"35\",\"~:font-weight\",\"500\",\"~:font-variant-id\",\"500\",\"~:text-decoration\",\"none\",\"~:letter-spacing\",\"0\",\"~:fills\",[[\"^ \",\"~:fill-color\",\"#5E18AF\",\"~:fill-opacity\",1]],\"~:font-family\",\"Karla\",\"~:text\",\"This is the text body\"]],\"^<\",\"none\",\"~:text-align\",\"left\",\"^=\",\"gfont-karla\",\"^8\",\"29emf8fbblr\",\"^>\",\"0\",\"^?\",\"500\",\"~:text-direction\",\"ltr\",\"^7\",\"paragraph\",\"^@\",\"500\",\"^A\",\"none\",\"^B\",\"0\",\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^F\",\"Karla\"]]]],\"~:vertical-align\",\"\"],\"~:hide-in-viewer\",false,\"~:name\",\"Example of UI design, flex + grid layouts, prototyping, light + dark mode colors, typographies and components.\",\"~:width\",702.99999999999,\"^7\",\"^G\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",1345.0000691910636]],[\"^O\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",1345.0000691910636]],[\"^O\",[\"^ \",\"~:x\",1118.9999879599347,\"~:y\",1387.0000679393486]],[\"^O\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",1387.0000679393486]]],\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:page-id\",\"~u4d2e83b3-f32c-80ca-8004-85fe278b278d\",\"~:constraints-v\",\"~:top\",\"~:constraints-h\",\"~:left\",\"~:id\",\"~u457f223c-eff4-8043-8007-1186366cf844\",\"~:parent-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:position-data\",[[\"^ \",\"~:y\",1386.2000457942502,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"~:y1\",0.4000000059604645,\"^M\",662.6312866210938,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"~:x1\",0,\"~:y2\",41.19999924302101,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"~:x2\",662.6312866210938,\"~:direction\",\"ltr\",\"^F\",\"Karla\",\"~:height\",40.79999923706055,\"^G\",\"Example of UI design, flex + grid layouts, \"],[\"^ \",\"~:y\",1428.200051128866,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"^Y\",42.400001525878906,\"^M\",615.8500366210938,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"^Z\",0,\"^[\",83.20000457763672,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^10\",615.8500366210938,\"^11\",\"ltr\",\"^F\",\"Karla\",\"^12\",40.80000305175781,\"^G\",\"prototyping, light + dark mode colors, \"],[\"^ \",\"~:y\",1470.200051128866,\"^;\",\"normal\",\"^<\",\"none\",\"^>\",\"35px\",\"^?\",\"500\",\"^Y\",84.4000015258789,\"^M\",503.13751220703125,\"^A\",\"none solid rgb(94, 24, 175)\",\"^B\",\"normal\",\"~:x\",416.00003051766544,\"^Z\",0,\"^[\",125.20000457763672,\"^C\",[[\"^ \",\"^D\",\"#5E18AF\",\"^E\",1]],\"^10\",503.13751220703125,\"^11\",\"ltr\",\"^F\",\"Karla\",\"^12\",40.80000305175781,\"^G\",\"typographies and components.\"]],\"~:frame-id\",\"~u457f223c-eff4-8043-8007-1186366cf841\",\"~:strokes\",[],\"~:x\",415.99998795994475,\"~:blocked\",false,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",415.99998795994475,\"~:y\",1345.0000691910636,\"^M\",702.99999999999,\"^12\",41.99999874828518,\"^Z\",415.99998795994475,\"^Y\",1345.0000691910636,\"^10\",1118.9999879599347,\"^[\",1387.0000679393488]],\"^C\",[],\"~:flip-x\",null,\"^12\",41.99999874828518,\"~:flip-y\",null]]"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~u58c5cc60-d124-81bd-8007-0f30f1ac452b",
|
||||||
|
"~:name": "Page 1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~u58c5cc60-d124-81bd-8007-0f30f1ac452a",
|
||||||
|
"~:options": {
|
||||||
|
"~:components-v2": true,
|
||||||
|
"~:base-font-size": "16px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -407,6 +407,22 @@ test("Renders a file with texts with breaking words", async ({
|
|||||||
await expect(workspace.canvas).toHaveScreenshot();
|
await expect(workspace.canvas).toHaveScreenshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("Renders a file with group with text with inherited shadows", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspace = new WasmWorkspacePage(page);
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
await workspace.mockGetFile("render-wasm/get-file-group-with-shadows.json");
|
||||||
|
|
||||||
|
await workspace.goToWorkspace({
|
||||||
|
id: "58c5cc60-d124-81bd-8007-0f30f1ac452a",
|
||||||
|
pageId: "58c5cc60-d124-81bd-8007-0f30f1ac452b",
|
||||||
|
});
|
||||||
|
|
||||||
|
await workspace.waitForFirstRender();
|
||||||
|
await expect(workspace.canvas).toHaveScreenshot();
|
||||||
|
});
|
||||||
|
|
||||||
test.skip("Updates text alignment edition - part 1", async ({ page }) => {
|
test.skip("Updates text alignment edition - part 1", async ({ page }) => {
|
||||||
const workspace = new WasmWorkspacePage(page);
|
const workspace = new WasmWorkspacePage(page);
|
||||||
await workspace.setupEmptyFile();
|
await workspace.setupEmptyFile();
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
@@ -101,8 +101,9 @@ impl NodeRenderState {
|
|||||||
/// Calculates the clip bounds for shadow rendering of a given shape.
|
/// Calculates the clip bounds for shadow rendering of a given shape.
|
||||||
///
|
///
|
||||||
/// This function determines the clipping region that should be applied when rendering a
|
/// This function determines the clipping region that should be applied when rendering a
|
||||||
/// shadow for a shape element. It uses the shadow bounds but calculates the
|
/// shadow for a shape element. For frames, it uses the shadow bounds to clip nested
|
||||||
/// transformation center based on the original shape, not the shadow bounds.
|
/// shadows. For groups, it returns the existing clip bounds since groups should not
|
||||||
|
/// constrain nested shadows based on their selection rectangle bounds.
|
||||||
///
|
///
|
||||||
/// # Parameters
|
/// # Parameters
|
||||||
///
|
///
|
||||||
@@ -123,18 +124,22 @@ impl NodeRenderState {
|
|||||||
"Shape must be a Frame or Group for nested shadow clip bounds calculation"
|
"Shape must be a Frame or Group for nested shadow clip bounds calculation"
|
||||||
);
|
);
|
||||||
|
|
||||||
let bounds = element.get_selrect_shadow_bounds(shadow);
|
match &element.shape_type {
|
||||||
let mut transform = element.transform;
|
Type::Frame(_) => {
|
||||||
transform.post_translate(element.center());
|
let bounds = element.get_selrect_shadow_bounds(shadow);
|
||||||
transform.pre_translate(-element.center());
|
let mut transform = element.transform;
|
||||||
|
transform.post_translate(element.center());
|
||||||
|
transform.pre_translate(-element.center());
|
||||||
|
|
||||||
let corners = match &element.shape_type {
|
let corners = match &element.shape_type {
|
||||||
Type::Rect(data) => data.corners,
|
Type::Frame(data) => data.corners,
|
||||||
Type::Frame(data) => data.corners,
|
_ => None,
|
||||||
_ => None,
|
};
|
||||||
};
|
|
||||||
|
|
||||||
Some((bounds, corners, transform))
|
Some((bounds, corners, transform))
|
||||||
|
}
|
||||||
|
_ => self.clip_bounds,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -234,6 +239,7 @@ pub(crate) struct RenderState {
|
|||||||
// Frames contained in groups must reset this nested_fills stack pushing a new empty vector.
|
// Frames contained in groups must reset this nested_fills stack pushing a new empty vector.
|
||||||
pub nested_fills: Vec<Vec<Fill>>,
|
pub nested_fills: Vec<Vec<Fill>>,
|
||||||
pub nested_blurs: Vec<Option<Blur>>, // FIXME: why is this an option?
|
pub nested_blurs: Vec<Option<Blur>>, // FIXME: why is this an option?
|
||||||
|
pub nested_shadows: Vec<Vec<Shadow>>,
|
||||||
pub show_grid: Option<Uuid>,
|
pub show_grid: Option<Uuid>,
|
||||||
pub focus_mode: FocusMode,
|
pub focus_mode: FocusMode,
|
||||||
pub touched_ids: HashSet<Uuid>,
|
pub touched_ids: HashSet<Uuid>,
|
||||||
@@ -304,6 +310,7 @@ impl RenderState {
|
|||||||
pending_tiles: PendingTiles::new_empty(),
|
pending_tiles: PendingTiles::new_empty(),
|
||||||
nested_fills: vec![],
|
nested_fills: vec![],
|
||||||
nested_blurs: vec![],
|
nested_blurs: vec![],
|
||||||
|
nested_shadows: vec![],
|
||||||
show_grid: None,
|
show_grid: None,
|
||||||
focus_mode: FocusMode::new(),
|
focus_mode: FocusMode::new(),
|
||||||
touched_ids: HashSet::default(),
|
touched_ids: HashSet::default(),
|
||||||
@@ -453,6 +460,31 @@ impl RenderState {
|
|||||||
self.focus_mode.set_shapes(shapes);
|
self.focus_mode.set_shapes(shapes);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fn get_inherited_drop_shadows(&self) -> Option<Vec<skia_safe::Paint>> {
|
||||||
|
let drop_shadows: Vec<&Shadow> = self
|
||||||
|
.nested_shadows
|
||||||
|
.iter()
|
||||||
|
.flat_map(|shadows| shadows.iter())
|
||||||
|
.filter(|shadow| !shadow.hidden() && shadow.style() == crate::shapes::ShadowStyle::Drop)
|
||||||
|
.collect();
|
||||||
|
|
||||||
|
if drop_shadows.is_empty() {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
|
||||||
|
Some(
|
||||||
|
drop_shadows
|
||||||
|
.into_iter()
|
||||||
|
.map(|shadow| {
|
||||||
|
let mut paint = skia_safe::Paint::default();
|
||||||
|
let filter = shadow.get_drop_shadow_filter();
|
||||||
|
paint.set_image_filter(filter);
|
||||||
|
paint
|
||||||
|
})
|
||||||
|
.collect(),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
#[allow(clippy::too_many_arguments)]
|
#[allow(clippy::too_many_arguments)]
|
||||||
pub fn render_shape(
|
pub fn render_shape(
|
||||||
&mut self,
|
&mut self,
|
||||||
@@ -575,7 +607,12 @@ impl RenderState {
|
|||||||
});
|
});
|
||||||
|
|
||||||
let text_content = text_content.new_bounds(shape.selrect());
|
let text_content = text_content.new_bounds(shape.selrect());
|
||||||
let drop_shadows = shape.drop_shadow_paints();
|
let mut drop_shadows = shape.drop_shadow_paints();
|
||||||
|
|
||||||
|
if let Some(inherited_shadows) = self.get_inherited_drop_shadows() {
|
||||||
|
drop_shadows.extend(inherited_shadows);
|
||||||
|
}
|
||||||
|
|
||||||
let inner_shadows = shape.inner_shadow_paints();
|
let inner_shadows = shape.inner_shadow_paints();
|
||||||
let blur_filter = shape.image_filter(1.);
|
let blur_filter = shape.image_filter(1.);
|
||||||
let count_inner_strokes = shape.count_visible_inner_strokes();
|
let count_inner_strokes = shape.count_visible_inner_strokes();
|
||||||
@@ -612,14 +649,14 @@ impl RenderState {
|
|||||||
|
|
||||||
if let Some(parent_shadows) = parent_shadows {
|
if let Some(parent_shadows) = parent_shadows {
|
||||||
if !shape.has_visible_strokes() {
|
if !shape.has_visible_strokes() {
|
||||||
for shadow in &parent_shadows {
|
for shadow in parent_shadows {
|
||||||
text::render(
|
text::render(
|
||||||
Some(self),
|
Some(self),
|
||||||
None,
|
None,
|
||||||
&shape,
|
&shape,
|
||||||
&mut paragraphs_with_shadows,
|
&mut paragraphs_with_shadows,
|
||||||
text_drop_shadows_surface_id.into(),
|
text_drop_shadows_surface_id.into(),
|
||||||
Some(shadow),
|
Some(&shadow),
|
||||||
blur_filter.as_ref(),
|
blur_filter.as_ref(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -875,6 +912,7 @@ impl RenderState {
|
|||||||
// being incorrectly applied to new frames
|
// being incorrectly applied to new frames
|
||||||
self.nested_fills.clear();
|
self.nested_fills.clear();
|
||||||
self.nested_blurs.clear();
|
self.nested_blurs.clear();
|
||||||
|
self.nested_shadows.clear();
|
||||||
// reorder by distance to the center.
|
// reorder by distance to the center.
|
||||||
self.current_tile = None;
|
self.current_tile = None;
|
||||||
self.render_in_progress = true;
|
self.render_in_progress = true;
|
||||||
@@ -923,7 +961,10 @@ impl RenderState {
|
|||||||
// other already drawn elements.
|
// other already drawn elements.
|
||||||
if let Type::Group(group) = element.shape_type {
|
if let Type::Group(group) = element.shape_type {
|
||||||
let fills = &element.fills;
|
let fills = &element.fills;
|
||||||
|
let shadows = &element.shadows;
|
||||||
self.nested_fills.push(fills.to_vec());
|
self.nested_fills.push(fills.to_vec());
|
||||||
|
self.nested_shadows.push(shadows.to_vec());
|
||||||
|
|
||||||
if group.masked {
|
if group.masked {
|
||||||
let paint = skia::Paint::default();
|
let paint = skia::Paint::default();
|
||||||
let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
|
let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
|
||||||
@@ -1005,6 +1046,7 @@ impl RenderState {
|
|||||||
Type::Frame(_) | Type::Group(_) => {
|
Type::Frame(_) | Type::Group(_) => {
|
||||||
self.nested_fills.pop();
|
self.nested_fills.pop();
|
||||||
self.nested_blurs.pop();
|
self.nested_blurs.pop();
|
||||||
|
self.nested_shadows.pop();
|
||||||
}
|
}
|
||||||
_ => {}
|
_ => {}
|
||||||
}
|
}
|
||||||
@@ -1269,6 +1311,7 @@ impl RenderState {
|
|||||||
if shadow_shape.hidden {
|
if shadow_shape.hidden {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
let clip_bounds = node_render_state
|
let clip_bounds = node_render_state
|
||||||
.get_nested_shadow_clip_bounds(element, shadow);
|
.get_nested_shadow_clip_bounds(element, shadow);
|
||||||
|
|
||||||
@@ -1382,7 +1425,6 @@ impl RenderState {
|
|||||||
if element.is_recursive() {
|
if element.is_recursive() {
|
||||||
let children_clip_bounds =
|
let children_clip_bounds =
|
||||||
node_render_state.get_children_clip_bounds(element, None);
|
node_render_state.get_children_clip_bounds(element, None);
|
||||||
|
|
||||||
let mut children_ids: Vec<_> = element.children_ids_iter(false).collect();
|
let mut children_ids: Vec<_> = element.children_ids_iter(false).collect();
|
||||||
|
|
||||||
// Z-index ordering on Layouts
|
// Z-index ordering on Layouts
|
||||||
|
|||||||
Reference in New Issue
Block a user