586bcc41.9d81e88d.js

js motioncanvas.io collected 2026-10-04 00:25:47 UTC 594,781 bytes, 10 lines download raw bytes

1var _____WB$wombat$assign$function_____=function(name){return (globalThis._wb_wombat && globalThis._wb_wombat.local_init && globalThis._wb_wombat.local_init(name))||globalThis[name];};if(!globalThis.__WB_pmw){globalThis.__WB_pmw=function(obj){this.__WB_source=obj;return this;}}{
2let window = _____WB$wombat$assign$function_____("window");
3let self = _____WB$wombat$assign$function_____("self");
4let document = _____WB$wombat$assign$function_____("document");
5let location = _____WB$wombat$assign$function_____("location");
6let top = _____WB$wombat$assign$function_____("top");
7let parent = _____WB$wombat$assign$function_____("parent");
8let frames = _____WB$wombat$assign$function_____("frames");
9let opener = _____WB$wombat$assign$function_____("opener");
10(self.webpackChunk_motion_canvas_docs=self.webpackChunk_motion_canvas_docs||[]).push([[3239],{4415:(t,n,e)=>{"use strict";e.r(n),e.d(n,{default:()=>d});var o=e(2784),p=e(2104),r=e(9072),c=e(6183),s=e(1930),a=e(8617),i=e(68),l=e(7708),u=e(532),m=e(7390);function d(t){var n,e,d;let{route:h}=t;const k=(0,a.RU)(h.projectId),y=k[h.reflectionId],[f]=(0,l.mN)(),w=(0,o.useMemo)((()=>{const t=[];if(!y.groups||y.kind===m.W.Project)return t;for(const n of y.groups)if(t.push({value:n.title,id:n.title,level:2}),n.children)for(const e of n.children){const n=k[e];n&&!n.hasOwnPage&&(0,l.It)(f,n)&&t.push({value:`<code>${n.name}</code>`,id:n.anchor,level:3})}return t}),[y,f]);return o.createElement(c.b,{content:{frontMatter:{},metadata:{id:y.docId,unversionedId:y.docId,version:"current",title:y.name,description:null==(n=y.comment)?void 0:n.summaryText,slug:y.url,permalink:y.url,editUrl:(null==(e=y.sources)||null==(d=e[0])?void 0:d.url)??void 0,draft:!1,tags:[],frontMatter:{},next:y.next,previous:y.previous},toc:w,assets:{}}},o.createElement(i.Y0,null,o.createElement(p.Z,null),o.createElement(u.Z,null,o.createElement(r.Z,null,o.createElement(s.Z,{reflection:y})))))}},7787:(t,n,e)=>{"use strict";e.d(n,{Z:()=>p3});var o={};e.r(o),e.d(o,{content_0_0:()=>a,content_0_10:()=>w,content_0_100:()=>tn,content_0_102:()=>en,content_0_104:()=>pn,content_0_106:()=>cn,content_0_108:()=>an,content_0_110:()=>un,content_0_112:()=>dn,content_0_114:()=>kn,content_0_116:()=>fn,content_0_118:()=>Mn,content_0_12:()=>D,content_0_120:()=>_n,content_0_122:()=>gn,content_0_124:()=>Cn,content_0_126:()=>Ln,content_0_128:()=>vn,content_0_130:()=>Nn,content_0_132:()=>An,content_0_134:()=>zn,content_0_136:()=>In,content_0_138:()=>Pn,content_0_14:()=>X,content_0_140:()=>Fn,content_0_142:()=>Vn,content_0_144:()=>qn,content_0_146:()=>On,content_0_148:()=>Hn,content_0_150:()=>Kn,content_0_152:()=>Qn,content_0_154:()=>ne,content_0_156:()=>oe,content_0_158:()=>re,content_0_16:()=>x,content_0_160:()=>se,content_0_162:()=>ie,content_0_164:()=>ue,content_0_166:()=>de,content_0_168:()=>ke,content_0_170:()=>fe,content_0_172:()=>Me,content_0_174:()=>_e,content_0_176:()=>ge,content_0_178:()=>Ce,content_0_18:()=>T,content_0_180:()=>Le,content_0_182:()=>ve,content_0_184:()=>Ne,content_0_186:()=>Ae,content_0_188:()=>ze,content_0_190:()=>Ie,content_0_192:()=>Pe,content_0_194:()=>Fe,content_0_196:()=>Ve,content_0_198:()=>qe,content_0_2:()=>l,content_0_20:()=>Z,content_0_200:()=>Oe,content_0_202:()=>He,content_0_204:()=>Ke,content_0_206:()=>Qe,content_0_208:()=>no,content_0_210:()=>oo,content_0_212:()=>ro,content_0_214:()=>so,content_0_216:()=>io,content_0_218:()=>uo,content_0_22:()=>b,content_0_220:()=>ho,content_0_222:()=>yo,content_0_224:()=>wo,content_0_226:()=>Do,content_0_228:()=>Xo,content_0_230:()=>xo,content_0_232:()=>To,content_0_234:()=>Zo,content_0_236:()=>bo,content_0_238:()=>Eo,content_0_24:()=>E,content_0_240:()=>Ro,content_0_242:()=>So,content_0_244:()=>Wo,content_0_246:()=>Go,content_0_248:()=>Uo,content_0_250:()=>jo,content_0_252:()=>Bo,content_0_254:()=>$o,content_0_256:()=>Yo,content_0_258:()=>Jo,content_0_26:()=>R,content_0_260:()=>tp,content_0_262:()=>ep,content_0_264:()=>pp,content_0_266:()=>cp,content_0_268:()=>ap,content_0_270:()=>lp,content_0_272:()=>mp,content_0_274:()=>hp,content_0_276:()=>yp,content_0_278:()=>wp,content_0_28:()=>S,content_0_280:()=>Dp,content_0_282:()=>Xp,content_0_284:()=>xp,content_0_286:()=>Tp,content_0_288:()=>Zp,content_0_290:()=>bp,content_0_292:()=>Ep,content_0_294:()=>Rp,content_0_296:()=>Sp,content_0_298:()=>Wp,content_0_30:()=>W,content_0_300:()=>Gp,content_0_302:()=>Up,content_0_304:()=>

10jp,content_0_306:()=>Bp,content_0_308:()=>$p,content_0_310:()=>Yp,content_0_312:()=>Jp,content_0_314:()=>tr,content_0_316:()=>er,content_0_318:()=>pr,content_0_32:()=>G,content_0_320:()=>cr,content_0_322:()=>ar,content_0_324:()=>lr,content_0_326:()=>mr,content_0_328:()=>hr,content_0_330:()=>yr,content_0_332:()=>wr,content_0_334:()=>Dr,content_0_336:()=>Xr,content_0_338:()=>xr,content_0_34:()=>U,content_0_340:()=>Tr,content_0_342:()=>Zr,content_0_344:()=>br,content_0_346:()=>Er,content_0_348:()=>Rr,content_0_350:()=>Sr,content_0_352:()=>Wr,content_0_354:()=>Gr,content_0_356:()=>Ur,content_0_358:()=>jr,content_0_36:()=>j,content_0_360:()=>Br,content_0_362:()=>$r,content_0_364:()=>Yr,content_0_366:()=>Jr,content_0_368:()=>tc,content_0_370:()=>ec,content_0_372:()=>pc,content_0_374:()=>cc,content_0_376:()=>ac,content_0_378:()=>lc,content_0_38:()=>B,content_0_380:()=>mc,content_0_382:()=>hc,content_0_384:()=>yc,content_0_386:()=>wc,content_0_388:()=>Dc,content_0_390:()=>Xc,content_0_392:()=>xc,content_0_394:()=>Tc,content_0_396:()=>Zc,content_0_398:()=>bc,content_0_4:()=>m,content_0_40:()=>$,content_0_400:()=>Ec,content_0_402:()=>Rc,content_0_404:()=>Sc,content_0_406:()=>Wc,content_0_408:()=>Gc,content_0_410:()=>Uc,content_0_412:()=>jc,content_0_414:()=>Bc,content_0_416:()=>$c,content_0_418:()=>Yc,content_0_42:()=>Y,content_0_420:()=>Jc,content_0_422:()=>ts,content_0_424:()=>es,content_0_426:()=>ps,content_0_428:()=>cs,content_0_430:()=>as,content_0_432:()=>ls,content_0_434:()=>ms,content_0_436:()=>hs,content_0_438:()=>ys,content_0_44:()=>J,content_0_440:()=>ws,content_0_442:()=>Ds,content_0_444:()=>Xs,content_0_446:()=>xs,content_0_448:()=>Ts,content_0_450:()=>Zs,content_0_452:()=>bs,content_0_454:()=>Es,content_0_456:()=>Rs,content_0_458:()=>Ss,content_0_46:()=>tt,content_0_460:()=>Ws,content_0_462:()=>Gs,content_0_464:()=>Us,content_0_466:()=>js,content_0_468:()=>Bs,content_0_470:()=>$s,content_0_472:()=>Ys,content_0_474:()=>Js,content_0_476:()=>ta,content_0_478:()=>ea,content_0_48:()=>et,content_0_480:()=>pa,content_0_482:()=>ca,content_0_484:()=>aa,content_0_486:()=>la,content_0_488:()=>ma,content_0_490:()=>ha,content_0_492:()=>ya,content_0_494:()=>wa,content_0_496:()=>Da,content_0_498:()=>Xa,content_0_50:()=>pt,content_0_500:()=>xa,content_0_502:()=>Ta,content_0_504:()=>Za,content_0_506:()=>ba,content_0_508:()=>Ea,content_0_510:()=>Ra,content_0_512:()=>Sa,content_0_514:()=>Wa,content_0_516:()=>Ga,content_0_518:()=>Ua,content_0_52:()=>ct,content_0_520:()=>ja,content_0_522:()=>Ba,content_0_524:()=>$a,content_0_526:()=>Ya,content_0_528:()=>Ja,content_0_530:()=>ti,content_0_532:()=>ei,content_0_534:()=>pi,content_0_536:()=>ci,content_0_538:()=>ai,content_0_54:()=>at,content_0_540:()=>li,content_0_542:()=>mi,content_0_544:()=>hi,content_0_546:()=>yi,content_0_548:()=>wi,content_0_550:()=>Di,content_0_552:()=>Xi,content_0_554:()=>xi,content_0_556:()=>Ti,content_0_558:()=>Zi,content_0_56:()=>lt,content_0_560:()=>bi,content_0_562:()=>Ei,content_0_564:()=>Ri,content_0_566:()=>Si,content_0_568:()=>Wi,content_0_570:()=>Gi,content_0_572:()=>Ui,content_0_574:()=>ji,content_0_576:()=>Bi,content_0_578:()=>$i,content_0_58:()=>mt,content_0_580:()=>Yi,content_0_582:()=>Ji,content_0_584:()=>tl,content_0_586:()=>el,content_0_588:()=>pl,content_0_590:()=>cl,content_0_592:()=>al,content_0_594:()=>ll,content_0_596:()=>ml,content_0_598:()=>hl,content_0_6:()=>h,content_0_60:()=>ht,content_0_600:()=>yl,content_0_602:()=>wl,content_0_604:()=>Dl,content_0_606:()=>Xl,content_0_608:()=>xl,content_0_610:()=>Tl,content_0_612:()=>Zl,content_0_614:()=>bl,content_0_616:()=>El,content_0_618:()=>Rl,content_0_62:()=>yt,content_0_620:()=>Sl,content_0_622:()=>Wl,content_0_624:()=>Gl,content_0_626:()=>Ul,content_0_628:()=>jl,content_0_630:()=>Bl,content_0_632:()=>$l,content_0_634:()=>Yl,content_0_636:()=>Jl,content_0_638:()=>tu,content_0_64:()=>wt,content_0_640:()=>eu,content_0_642:()=>pu,content_0_644:()=>cu,content_0_646:()=>au,content_0_648:()=>lu,content_0_650:()=>mu,content_0_652:()=>hu,content_0_654:()=>yu,content_0_656:()=>wu,content_0_658:()=>Du,content_0_66:()=>Dt,content_0_660:()=>Xu,content_0_662:()=>xu,content_0_664:()=>Tu,content_0_666:()=>Zu,content_0_668:()=>bu,content_0_670:()=>Eu,content_0_672:()=>Ru,content_0_674:()=>Su,content_0_676:()=>Wu,content_0_678:()=>Gu,content_0_68:()=>Xt,content_0_680:()=>Uu,content_0_682:()=>ju,content_0_684:()=>Bu,content_0_686:()=>$u,content_0_688:()=>Yu,content_0_690:()=>Ju,content_0_692:()=>tm,content_0_694:()=>em,content_0_696:()=>pm,content_0_698:()=>cm,content_0_70:()=>xt,content_0_700:()=>am,content_0_702:()=>lm,content_0_704:()=>mm,content_0_706:()=>hm,content_0_708:()=>ym,content_0_710:()=>wm,content_0_712:()=>Dm,content_0_714:()=>Xm,content_0_716:()=>xm,content_0_718:()=>Tm,content_0_72:()=>Tt,content_0_720:()=>Zm,content_0_722:()=>bm,content_0_724:()=>Em,content_0_726:()=>Rm,content_0_728:()=>Sm,content_0_730:()=>Wm,content_0_732:()=>Gm,content_0_734:()=>Um,content_0_736:()=>jm,content_0_738:()=>Bm,content_0_74:()=>Zt,content_0_740:()=>$m,content_0_742:()=>Ym,content_0_744:()=>Jm,content_0_746:()=>td,content_0_748:()=>ed,content_0_750:()=>pd,content_0_752:()=>cd,content_0_754:()=>ad,content_0_756:()=>ld,content_0_758:()=>md,content_0_76:()=>bt,content_0_760:()=>hd,content_0_762:()=>yd,content_0_764:()=>wd,content_0_766:()=>Dd,content_0_768:()=>Xd,content_0_770:()=>xd,content_0_772:()=>Td,content_0_774:()=>Zd,content_0_776:()=>bd,content_0_778:()=>Ed,content_0_78:()=>Et,content_0_780:()=>Rd,content_0_782:()=>Sd,content_0_784:()=>Wd,content_0_786:()=>Gd,content_0_788:()=>Ud,content_0_790:()=>jd,content_0_792:()=>Bd,content_0_794:()=>$d,content_0_796:()=>Yd,content_0_798:()=>Jd,content_0_8:()=>y,content_0_80:()=>Rt,content_0_800:()=>th,content_0_802:()=>eh,content_0_804:()=>ph,content_0_806:()=>ch,content_0_808:()=>ah,content_0_810:()=>lh,content_0_812:()=>mh,content_0_814:()=>hh,content_0_816:()=>yh,content_0_818:()=>wh,content_0_82:()=>St,content_0_820:()=>Dh,content_0_822:()=>Xh,content_0_824:()=>xh,content_0_826:()=>Th,content_0_828:()=>Zh,content_0_830:()=>bh,content_0_832:()=>Eh,content_0_834:()=>Rh,content_0_836:()=>Sh,content_0_838:()=>Wh,content_0_84:()=>Wt,content_0_840:()=>Gh,content_0_842:()=>Uh,content_0_844:()=>jh,content_0_846:()=>Bh,content_0_848:()=>$h,content_0_850:()=>Yh,content_0_852:()=>Jh,content_0_854:()=>tk,content_0_856:()=>ek,content_0_858:()=>pk,content_0_86:()=>Gt,content_0_860:()=>ck,content_0_862:()=>ak,content_0_864:()=>lk,content_0_866:()=>mk,content_0_868:()=>hk,content_0_870:()=>yk,content_0_872:()=>wk,content_0_874:()=>Dk,content_0_876:()=>Xk,content_0_878:()=>xk,content_0_88:()=>Ut,content_0_880:()=>Tk,content_0_882:()=>Zk,content_0_884:()=>bk,content_0_886:()=>Ek,content_0_888:()=>Rk,content_0_890:()=>Sk,content_0_892:()=>Wk,content_0_894:()=>Gk,content_0_896:()=>Uk,content_0_898:()=>jk,content_0_90:()=>jt,content_0_900:()=>Bk,content_0_902:()=>$k,content_0_904:()=>Yk,content_0_906:()=>Jk,content_0_908:()=>ty,content_0_910:()=>ey,content_0_912:()=>py,content_0_914:()=>cy,content_0_916:()=>ay,content_0_918:()=>ly,content_0_92:()=>Bt,content_0_920:()=>my,content_0_922:()=>hy,content_0_924:()=>yy,content_0_926:()=>wy,content_0_928:()=>Dy,content_0_930:()=>Xy,content_0_932:()=>xy,content_0_934:()=>Ty,content_0_936:()=>Zy,content_0_938:()=>by,content_0_94:()=>$t,content_0_940:()=>Ey,content_0_942:()=>Ry,content_0_944:()=>Sy,content_0_946:()=>Wy,content_0_96:()=>Yt,content_0_98:()=>Jt,content_2270_0:()=>Gy,content_2270_10:()=>Yy,content_2270_100:()=>Aw,content_2270_1000:()=>kz,content_2270_1002:()=>fz,content_2270_1004:()=>Mz,content_2270_1006:()=>_z,content_2270_1008:()=>gz,content_2270_1010:()=>Cz,content_2270_1012:()=>Lz,content_2270_1014:()=>vz,content_2270_1016:()=>Nz,content_2270_1018:()=>Az,content_2270_102:()=>zw,content_2270_1020:()=>zz,content_2270_1022:()=>Iz,content_2270_1024:()=>Pz,content_2270_1026:()=>Fz,content_2270_1028:()=>Vz,content_2270_1030:()=>qz,content_2270_1032:()=>Oz,content_2270_1034:()=>Hz,content_2270_1036:()=>Kz,content_2270_1038:()=>Qz,content_2270_104:()=>Iw,content_2270_1040:()=>nS,content_2270_1042:()=>oS,content_2270_1044:()=>rS,content_2270_1046:()=>sS,content_2270_1048:()=>iS,content_2270_1050:()=>

10uS,content_2270_1052:()=>dS,content_2270_1054:()=>kS,content_2270_1056:()=>fS,content_2270_1058:()=>MS,content_2270_106:()=>Pw,content_2270_1060:()=>_S,content_2270_1062:()=>gS,content_2270_1064:()=>CS,content_2270_1066:()=>LS,content_2270_1068:()=>vS,content_2270_1070:()=>NS,content_2270_1072:()=>AS,content_2270_1074:()=>zS,content_2270_1076:()=>IS,content_2270_1078:()=>PS,content_2270_108:()=>Fw,content_2270_1080:()=>FS,content_2270_1082:()=>VS,content_2270_1084:()=>qS,content_2270_1086:()=>OS,content_2270_1088:()=>HS,content_2270_1090:()=>KS,content_2270_1092:()=>QS,content_2270_1094:()=>nI,content_2270_1096:()=>oI,content_2270_1098:()=>rI,content_2270_110:()=>Vw,content_2270_1100:()=>sI,content_2270_1102:()=>iI,content_2270_1104:()=>uI,content_2270_1106:()=>dI,content_2270_1108:()=>kI,content_2270_1110:()=>fI,content_2270_1112:()=>MI,content_2270_1114:()=>_I,content_2270_1116:()=>gI,content_2270_1118:()=>CI,content_2270_112:()=>qw,content_2270_1120:()=>LI,content_2270_1122:()=>vI,content_2270_1124:()=>NI,content_2270_1126:()=>AI,content_2270_1128:()=>zI,content_2270_1130:()=>II,content_2270_1132:()=>PI,content_2270_1134:()=>FI,content_2270_1136:()=>VI,content_2270_1138:()=>qI,content_2270_114:()=>Ow,content_2270_1140:()=>OI,content_2270_1142:()=>HI,content_2270_1144:()=>KI,content_2270_1146:()=>QI,content_2270_1148:()=>nW,content_2270_1150:()=>oW,content_2270_1152:()=>rW,content_2270_1154:()=>sW,content_2270_1156:()=>iW,content_2270_1158:()=>uW,content_2270_116:()=>Hw,content_2270_1160:()=>dW,content_2270_1162:()=>kW,content_2270_1164:()=>fW,content_2270_1166:()=>MW,content_2270_1168:()=>_W,content_2270_1170:()=>gW,content_2270_1172:()=>CW,content_2270_1174:()=>LW,content_2270_1176:()=>vW,content_2270_1178:()=>NW,content_2270_118:()=>Kw,content_2270_1180:()=>AW,content_2270_1182:()=>zW,content_2270_1184:()=>IW,content_2270_1186:()=>PW,content_2270_1188:()=>FW,content_2270_1190:()=>VW,content_2270_1192:()=>qW,content_2270_1194:()=>OW,content_2270_1196:()=>HW,content_2270_1198:()=>KW,content_2270_12:()=>Jy,content_2270_120:()=>Qw,content_2270_1200:()=>QW,content_2270_1202:()=>nP,content_2270_1204:()=>oP,content_2270_1206:()=>rP,content_2270_1208:()=>sP,content_2270_1210:()=>iP,content_2270_1212:()=>uP,content_2270_1214:()=>dP,content_2270_1216:()=>kP,content_2270_1218:()=>fP,content_2270_122:()=>nM,content_2270_1220:()=>MP,content_2270_1222:()=>_P,content_2270_1224:()=>gP,content_2270_1226:()=>CP,content_2270_1228:()=>LP,content_2270_1230:()=>vP,content_2270_1232:()=>NP,content_2270_1234:()=>AP,content_2270_1236:()=>zP,content_2270_1238:()=>IP,content_2270_124:()=>oM,content_2270_1240:()=>PP,content_2270_1242:()=>FP,content_2270_1244:()=>VP,content_2270_1246:()=>qP,content_2270_1248:()=>OP,content_2270_1250:()=>HP,content_2270_1252:()=>KP,content_2270_1254:()=>QP,content_2270_1256:()=>nG,content_2270_1258:()=>oG,content_2270_126:()=>rM,content_2270_1260:()=>rG,content_2270_1262:()=>sG,content_2270_1264:()=>iG,content_2270_1266:()=>uG,content_2270_1268:()=>dG,content_2270_1270:()=>kG,content_2270_1272:()=>fG,content_2270_1274:()=>MG,content_2270_1276:()=>_G,content_2270_1278:()=>gG,content_2270_128:()=>sM,content_2270_1280:()=>CG,content_2270_1282:()=>LG,content_2270_1284:()=>vG,content_2270_1286:()=>NG,content_2270_1288:()=>AG,content_2270_1290:()=>zG,content_2270_1292:()=>IG,content_2270_1294:()=>PG,content_2270_1296:()=>FG,content_2270_1298:()=>VG,content_2270_130:()=>iM,content_2270_1300:()=>qG,content_2270_1302:()=>OG,content_2270_1304:()=>HG,content_2270_1306:()=>KG,content_2270_1308:()=>QG,content_2270_1310:()=>nF,content_2270_1312:()=>oF,content_2270_1314:()=>rF,content_2270_1316:()=>sF,content_2270_1318:()=>iF,content_2270_132:()=>uM,content_2270_1320:()=>uF,content_2270_1322:()=>dF,content_2270_1324:()=>kF,content_2270_1326:()=>fF,content_2270_1328:()=>MF,content_2270_1330:()=>_F,content_2270_1332:()=>gF,content_2270_1334:()=>CF,content_2270_1336:()=>LF,content_2270_1338:()=>vF,content_2270_134:()=>dM,content_2270_1340:()=>NF,content_2270_1342:()=>AF,content_2270_1344:()=>zF,content_2270_1346:()=>IF,content_2270_1348:()=>PF,content_2270_1350:()=>FF,content_2270_1352:()=>VF,content_2270_1354:()=>

10qF,content_2270_1356:()=>OF,content_2270_1358:()=>HF,content_2270_136:()=>kM,content_2270_1360:()=>KF,content_2270_1362:()=>QF,content_2270_1364:()=>nU,content_2270_1366:()=>oU,content_2270_1368:()=>rU,content_2270_1370:()=>sU,content_2270_1372:()=>iU,content_2270_1374:()=>uU,content_2270_1376:()=>dU,content_2270_1378:()=>kU,content_2270_138:()=>fM,content_2270_1380:()=>fU,content_2270_1382:()=>MU,content_2270_1384:()=>_U,content_2270_1386:()=>gU,content_2270_1388:()=>CU,content_2270_1390:()=>LU,content_2270_1392:()=>vU,content_2270_1394:()=>NU,content_2270_1396:()=>AU,content_2270_1398:()=>zU,content_2270_14:()=>tf,content_2270_140:()=>MM,content_2270_1400:()=>IU,content_2270_1402:()=>PU,content_2270_1404:()=>FU,content_2270_1406:()=>VU,content_2270_1408:()=>qU,content_2270_1410:()=>OU,content_2270_1412:()=>HU,content_2270_1414:()=>KU,content_2270_1416:()=>QU,content_2270_1418:()=>nV,content_2270_142:()=>_M,content_2270_1420:()=>oV,content_2270_1422:()=>rV,content_2270_1424:()=>sV,content_2270_1426:()=>iV,content_2270_1428:()=>uV,content_2270_1430:()=>dV,content_2270_1432:()=>kV,content_2270_1434:()=>fV,content_2270_1436:()=>MV,content_2270_1438:()=>_V,content_2270_144:()=>gM,content_2270_1440:()=>gV,content_2270_1442:()=>CV,content_2270_1444:()=>LV,content_2270_1446:()=>vV,content_2270_1448:()=>NV,content_2270_1450:()=>AV,content_2270_1452:()=>zV,content_2270_1454:()=>IV,content_2270_1456:()=>PV,content_2270_1458:()=>FV,content_2270_146:()=>CM,content_2270_1460:()=>VV,content_2270_1462:()=>qV,content_2270_1464:()=>OV,content_2270_1466:()=>HV,content_2270_1468:()=>KV,content_2270_1470:()=>QV,content_2270_1472:()=>nj,content_2270_1474:()=>oj,content_2270_1476:()=>rj,content_2270_1478:()=>sj,content_2270_148:()=>LM,content_2270_1480:()=>ij,content_2270_1482:()=>uj,content_2270_1484:()=>dj,content_2270_1486:()=>kj,content_2270_1488:()=>fj,content_2270_1490:()=>Mj,content_2270_1492:()=>_j,content_2270_1494:()=>gj,content_2270_1496:()=>Cj,content_2270_1498:()=>Lj,content_2270_150:()=>vM,content_2270_1500:()=>

10vj,content_2270_1502:()=>Nj,content_2270_1504:()=>Aj,content_2270_1506:()=>zj,content_2270_1508:()=>Ij,content_2270_1510:()=>Pj,content_2270_1512:()=>Fj,content_2270_1514:()=>Vj,content_2270_1516:()=>qj,content_2270_1518:()=>Oj,content_2270_152:()=>NM,content_2270_1520:()=>Hj,content_2270_1522:()=>Kj,content_2270_1524:()=>Qj,content_2270_1526:()=>nq,content_2270_1528:()=>oq,content_2270_1530:()=>rq,content_2270_1532:()=>sq,content_2270_1534:()=>iq,content_2270_1536:()=>uq,content_2270_1538:()=>dq,content_2270_154:()=>AM,content_2270_1540:()=>kq,content_2270_1542:()=>fq,content_2270_1544:()=>Mq,content_2270_1546:()=>_q,content_2270_1548:()=>gq,content_2270_1550:()=>Cq,content_2270_1552:()=>Lq,content_2270_1554:()=>vq,content_2270_1556:()=>Nq,content_2270_1558:()=>Aq,content_2270_156:()=>zM,content_2270_1560:()=>zq,content_2270_1562:()=>Iq,content_2270_1564:()=>Pq,content_2270_1566:()=>Fq,content_2270_1568:()=>Vq,content_2270_1570:()=>qq,content_2270_1572:()=>Oq,content_2270_1574:()=>Hq,content_2270_1576:()=>Kq,content_2270_1578:()=>Qq,content_2270_158:()=>IM,content_2270_1580:()=>nB,content_2270_1582:()=>oB,content_2270_1584:()=>rB,content_2270_1586:()=>sB,content_2270_1588:()=>iB,content_2270_1590:()=>uB,content_2270_1592:()=>dB,content_2270_1594:()=>kB,content_2270_1596:()=>fB,content_2270_1598:()=>MB,content_2270_16:()=>ef,content_2270_160:()=>PM,content_2270_1600:()=>_B,content_2270_1602:()=>gB,content_2270_1604:()=>CB,content_2270_1606:()=>LB,content_2270_1608:()=>vB,content_2270_1610:()=>NB,content_2270_1612:()=>AB,content_2270_1614:()=>zB,content_2270_1616:()=>IB,content_2270_1618:()=>PB,content_2270_162:()=>FM,content_2270_1620:()=>FB,content_2270_1622:()=>VB,content_2270_1624:()=>qB,content_2270_1626:()=>OB,content_2270_1628:()=>HB,content_2270_1630:()=>KB,content_2270_1632:()=>QB,content_2270_1634:()=>nO,content_2270_1636:()=>oO,content_2270_1638:()=>rO,content_2270_164:()=>VM,content_2270_1640:()=>sO,content_2270_1642:()=>iO,content_2270_1644:()=>uO,content_2270_1646:()=>dO,content_2270_1648:()=>kO,content_2270_1650:()=>fO,content_2270_1652:()=>MO,content_2270_1654:()=>_O,content_2270_1656:()=>gO,content_2270_1658:()=>CO,content_2270_166:()=>qM,content_2270_1660:()=>LO,content_2270_1662:()=>vO,content_2270_1664:()=>NO,content_2270_1666:()=>AO,content_2270_1668:()=>zO,content_2270_1670:()=>IO,content_2270_1672:()=>PO,content_2270_1674:()=>FO,content_2270_1676:()=>VO,content_2270_1678:()=>qO,content_2270_168:()=>OM,content_2270_1680:()=>OO,content_2270_1682:()=>HO,content_2270_1684:()=>KO,content_2270_1686:()=>QO,content_2270_1688:()=>n$,content_2270_1690:()=>o$,content_2270_1692:()=>r$,content_2270_1694:()=>s$,content_2270_1696:()=>i$,content_2270_1698:()=>u$,content_2270_170:()=>HM,content_2270_1700:()=>d$,content_2270_1702:()=>k$,content_2270_1704:()=>f$,content_2270_1706:()=>M$,content_2270_1708:()=>_$,content_2270_1710:()=>g$,content_2270_1712:()=>C$,content_2270_1714:()=>L$,content_2270_1716:()=>v$,content_2270_1718:()=>N$,content_2270_172:()=>KM,content_2270_1720:()=>A$,content_2270_1722:()=>z$,content_2270_1724:()=>I$,content_2270_1726:()=>P$,content_2270_1728:()=>F$,content_2270_1730:()=>V$,content_2270_1732:()=>q$,content_2270_1734:()=>O$,content_2270_1736:()=>H$,content_2270_1738:()=>K$,content_2270_174:()=>QM,content_2270_1740:()=>Q$,content_2270_1742:()=>nH,content_2270_1744:()=>oH,content_2270_1746:()=>rH,content_2270_1748:()=>sH,content_2270_1750:()=>iH,content_2270_1752:()=>uH,content_2270_1754:()=>dH,content_2270_1756:()=>kH,content_2270_1758:()=>fH,content_2270_176:()=>nD,content_2270_1760:()=>MH,content_2270_1762:()=>_H,content_2270_1764:()=>gH,content_2270_1766:()=>CH,content_2270_1768:()=>LH,content_2270_1770:()=>vH,content_2270_1772:()=>NH,content_2270_1774:()=>AH,content_2270_1776:()=>zH,content_2270_1778:()=>IH,content_2270_178:()=>oD,content_2270_1780:()=>PH,content_2270_1782:()=>FH,content_2270_1784:()=>VH,content_2270_1786:()=>qH,content_2270_1788:()=>OH,content_2270_1790:()=>HH,content_2270_1792:()=>KH,content_2270_1794:()=>QH,content_2270_1796:()=>nY,content_2270_1798:()=>oY,content_2270_18:()=>pf,content_2270_180:()=>rD,content_2270_1800:()=>rY,content_2270_1802:()=>sY,content_2270_1804:()=>iY,content_2270_1806:()=>uY,content_2270_1808:()=>dY,content_2270_1810:()=>kY,content_2270_1812:()=>fY,content_2270_1814:()=>MY,content_2270_1816:()=>_Y,content_2270_1818:()=>gY,content_2270_182:()=>sD,content_2270_1820:()=>CY,content_2270_1822:()=>LY,content_2270_1824:()=>vY,content_2270_1826:()=>NY,content_2270_1828:()=>AY,content_2270_1830:()=>zY,content_2270_1832:()=>IY,content_2270_1834:()=>PY,content_2270_1836:()=>FY,content_2270_1838:()=>VY,content_2270_184:()=>iD,content_2270_1840:()=>qY,content_2270_1842:()=>OY,content_2270_1844:()=>HY,content_2270_1846:()=>KY,content_2270_1848:()=>QY,content_2270_1850:()=>nK,content_2270_1852:()=>oK,content_2270_1854:()=>rK,content_2270_1856:()=>sK,content_2270_1858:()=>iK,content_2270_186:()=>uD,content_2270_1860:()=>uK,content_2270_1862:()=>dK,content_2270_1864:()=>kK,content_2270_1866:()=>fK,content_2270_1868:()=>MK,content_2270_1870:()=>_K,content_2270_1872:()=>gK,content_2270_1874:()=>CK,content_2270_1876:()=>LK,content_2270_1878:()=>vK,content_2270_188:()=>dD,content_2270_1880:()=>NK,content_2270_1882:()=>AK,content_2270_1884:()=>zK,content_2270_1886:()=>IK,content_2270_1888:()=>PK,content_2270_1890:()=>FK,content_2270_1892:()=>VK,content_2270_1894:()=>qK,content_2270_1896:()=>OK,content_2270_1898:()=>HK,content_2270_190:()=>kD,content_2270_1900:()=>KK,content_2270_1902:()=>QK,content_2270_1904:()=>nJ,content_2270_1906:()=>oJ,content_2270_1908:()=>rJ,content_2270_1910:()=>sJ,content_2270_1912:()=>iJ,content_2270_1914:()=>uJ,content_2270_1916:()=>dJ,content_2270_1918:()=>kJ,content_2270_192:()=>fD,content_2270_1920:()=>fJ,content_2270_1922:()=>MJ,content_2270_1924:()=>_J,content_2270_1926:()=>gJ,content_2270_1928:()=>CJ,content_2270_1930:()=>LJ,content_2270_1932:()=>vJ,content_2270_1934:()=>NJ,content_2270_1936:()=>AJ,content_2270_1938:()=>zJ,content_2270_194:()=>MD,content_2270_1940:()=>IJ,content_2270_1942:()=>PJ,content_2270_1944:()=>FJ,content_2270_1946:()=>VJ,content_2270_1948:()=>qJ,content_2270_1950:()=>OJ,content_2270_1952:()=>HJ,content_2270_1954:()=>KJ,content_2270_1956:()=>QJ,content_2270_1958:()=>nQ,content_2270_196:()=>_D,content_2270_1960:()=>oQ,content_2270_1962:()=>rQ,content_2270_1964:()=>sQ,content_2270_1966:()=>iQ,content_2270_1968:()=>uQ,content_2270_1970:()=>dQ,content_2270_1972:()=>kQ,content_2270_1974:()=>fQ,content_2270_1976:()=>MQ,content_2270_1978:()=>_Q,content_2270_198:()=>gD,content_2270_1980:()=>gQ,content_2270_1982:()=>

10CQ,content_2270_1984:()=>LQ,content_2270_1986:()=>vQ,content_2270_1988:()=>NQ,content_2270_1990:()=>AQ,content_2270_1992:()=>zQ,content_2270_1994:()=>IQ,content_2270_1996:()=>PQ,content_2270_1998:()=>FQ,content_2270_2:()=>Uy,content_2270_20:()=>cf,content_2270_200:()=>CD,content_2270_2000:()=>VQ,content_2270_2002:()=>qQ,content_2270_2004:()=>OQ,content_2270_2006:()=>HQ,content_2270_2008:()=>KQ,content_2270_2010:()=>QQ,content_2270_2012:()=>n0,content_2270_2014:()=>o0,content_2270_2016:()=>r0,content_2270_2018:()=>s0,content_2270_202:()=>LD,content_2270_2020:()=>i0,content_2270_2022:()=>u0,content_2270_2024:()=>d0,content_2270_2026:()=>k0,content_2270_2028:()=>f0,content_2270_2030:()=>M0,content_2270_2032:()=>_0,content_2270_2034:()=>g0,content_2270_2036:()=>C0,content_2270_2038:()=>L0,content_2270_204:()=>vD,content_2270_2040:()=>v0,content_2270_2042:()=>N0,content_2270_2044:()=>A0,content_2270_2046:()=>z0,content_2270_2048:()=>I0,content_2270_2050:()=>P0,content_2270_2052:()=>F0,content_2270_2054:()=>V0,content_2270_2056:()=>q0,content_2270_2058:()=>O0,content_2270_206:()=>ND,content_2270_2060:()=>H0,content_2270_2062:()=>K0,content_2270_2064:()=>Q0,content_2270_2066:()=>n2,content_2270_2068:()=>o2,content_2270_2070:()=>r2,content_2270_2072:()=>s2,content_2270_2074:()=>i2,content_2270_2076:()=>u2,content_2270_2078:()=>d2,content_2270_208:()=>AD,content_2270_2080:()=>k2,content_2270_2082:()=>f2,content_2270_2084:()=>M2,content_2270_2086:()=>_2,content_2270_2088:()=>g2,content_2270_2090:()=>C2,content_2270_2092:()=>L2,content_2270_2094:()=>v2,content_2270_2096:()=>N2,content_2270_2098:()=>A2,content_2270_210:()=>zD,content_2270_2100:()=>z2,content_2270_2102:()=>I2,content_2270_2104:()=>P2,content_2270_2106:()=>F2,content_2270_2108:()=>V2,content_2270_2110:()=>q2,content_2270_2112:()=>O2,content_2270_2114:()=>H2,content_2270_2116:()=>K2,content_2270_2118:()=>Q2,content_2270_212:()=>ID,content_2270_2120:()=>n7,content_2270_2122:()=>o7,content_2270_2124:()=>r7,content_2270_2126:()=>s7,content_2270_2128:()=>i7,content_2270_2130:()=>u7,content_2270_2132:()=>d7,content_2270_2134:()=>k7,content_2270_2136:()=>f7,content_2270_2138:()=>M7,content_2270_214:()=>PD,content_2270_2140:()=>_7,content_2270_2142:()=>g7,content_2270_2144:()=>C7,content_2270_2146:()=>L7,content_2270_2148:()=>v7,content_2270_2150:()=>N7,content_2270_2152:()=>A7,content_2270_2154:()=>z7,content_2270_2156:()=>I7,content_2270_2158:()=>P7,content_2270_216:()=>FD,content_2270_2160:()=>F7,content_2270_2162:()=>V7,content_2270_2164:()=>q7,content_2270_2166:()=>O7,content_2270_2168:()=>H7,content_2270_2170:()=>K7,content_2270_2172:()=>Q7,content_2270_2174:()=>n1,content_2270_2176:()=>o1,content_2270_2178:()=>r1,content_2270_218:()=>VD,content_2270_2180:()=>s1,content_2270_2182:()=>i1,content_2270_2184:()=>u1,content_2270_2186:()=>d1,content_2270_2188:()=>k1,content_2270_2190:()=>f1,content_2270_2192:()=>M1,content_2270_2194:()=>_1,content_2270_2196:()=>g1,content_2270_2198:()=>C1,content_2270_22:()=>af,content_2270_220:()=>qD,content_2270_2200:()=>L1,content_2270_2202:()=>v1,content_2270_2204:()=>N1,content_2270_2206:()=>A1,content_2270_2208:()=>z1,content_2270_2210:()=>I1,content_2270_2212:()=>P1,content_2270_2214:()=>F1,content_2270_2216:()=>V1,content_2270_2218:()=>q1,content_2270_222:()=>OD,content_2270_2220:()=>O1,content_2270_2222:()=>H1,content_2270_2224:()=>K1,content_2270_2226:()=>Q1,content_2270_2228:()=>n4,content_2270_2230:()=>o4,content_2270_2232:()=>r4,content_2270_2234:()=>s4,content_2270_2236:()=>i4,content_2270_2238:()=>u4,content_2270_224:()=>HD,content_2270_2240:()=>d4,content_2270_2242:()=>k4,content_2270_2244:()=>f4,content_2270_2246:()=>M4,content_2270_2248:()=>_4,content_2270_2250:()=>g4,content_2270_2252:()=>C4,content_2270_2254:()=>L4,content_2270_2256:()=>v4,content_2270_2258:()=>N4,content_2270_226:()=>KD,content_2270_2260:()=>A4,content_2270_2262:()=>z4,content_2270_2264:()=>I4,content_2270_2266:()=>P4,content_2270_2268:()=>F4,content_2270_2270:()=>V4,content_2270_2272:()=>q4,content_2270_2274:()=>O4,content_2270_2276:()=>H4,content_2270_2278:()=>K4,content_2270_228:()=>QD,content_2270_2280:()=>Q4,content_2270_2282:()=>n8,content_2270_2284:()=>o8,content_2270_2286:()=>r8,content_2270_2288:()=>s8,content_2270_2290:()=>i8,content_2270_2292:()=>u8,content_2270_2294:()=>d8,content_2270_2296:()=>k8,content_2270_2298:()=>f8,content_2270_230:()=>n_,content_2270_2300:()=>M8,content_2270_2302:()=>_8,content_2270_2304:()=>g8,content_2270_2306:()=>C8,content_2270_2308:()=>L8,content_2270_2310:()=>v8,content_2270_2312:()=>N8,content_2270_2314:()=>A8,content_2270_2316:()=>z8,content_2270_2318:()=>I8,content_2270_232:()=>o_,content_2270_2320:()=>P8,content_2270_2322:()=>F8,content_2270_2324:()=>V8,content_2270_2326:()=>q8,content_2270_2328:()=>O8,content_2270_2330:()=>H8,content_2270_2332:()=>K8,content_2270_2334:()=>Q8,content_2270_2336:()=>n6,content_2270_2338:()=>

10o6,content_2270_234:()=>r_,content_2270_2340:()=>r6,content_2270_2342:()=>s6,content_2270_2344:()=>i6,content_2270_2346:()=>u6,content_2270_2348:()=>d6,content_2270_2350:()=>k6,content_2270_2352:()=>f6,content_2270_2354:()=>M6,content_2270_2356:()=>_6,content_2270_2358:()=>g6,content_2270_236:()=>s_,content_2270_2360:()=>C6,content_2270_2362:()=>L6,content_2270_2364:()=>v6,content_2270_2366:()=>N6,content_2270_2368:()=>A6,content_2270_2370:()=>z6,content_2270_2372:()=>I6,content_2270_2374:()=>P6,content_2270_2376:()=>F6,content_2270_2378:()=>V6,content_2270_238:()=>i_,content_2270_2380:()=>q6,content_2270_2382:()=>O6,content_2270_2384:()=>H6,content_2270_2386:()=>K6,content_2270_2388:()=>Q6,content_2270_2390:()=>n3,content_2270_2392:()=>o3,content_2270_24:()=>uf,content_2270_240:()=>u_,content_2270_242:()=>d_,content_2270_244:()=>k_,content_2270_246:()=>f_,content_2270_248:()=>M_,content_2270_250:()=>__,content_2270_252:()=>g_,content_2270_254:()=>C_,content_2270_256:()=>L_,content_2270_258:()=>v_,content_2270_26:()=>df,content_2270_260:()=>N_,content_2270_262:()=>A_,content_2270_264:()=>z_,content_2270_266:()=>I_,content_2270_268:()=>P_,content_2270_270:()=>F_,content_2270_272:()=>V_,content_2270_274:()=>q_,content_2270_276:()=>O_,content_2270_278:()=>H_,content_2270_28:()=>kf,content_2270_280:()=>K_,content_2270_282:()=>Q_,content_2270_284:()=>nX,content_2270_286:()=>oX,content_2270_288:()=>rX,content_2270_290:()=>sX,content_2270_292:()=>iX,content_2270_294:()=>uX,content_2270_296:()=>dX,content_2270_298:()=>kX,content_2270_30:()=>ff,content_2270_300:()=>fX,content_2270_302:()=>MX,content_2270_304:()=>_X,content_2270_306:()=>gX,content_2270_308:()=>CX,content_2270_310:()=>LX,content_2270_312:()=>vX,content_2270_314:()=>NX,content_2270_316:()=>AX,content_2270_318:()=>zX,content_2270_32:()=>Mf,content_2270_320:()=>IX,content_2270_322:()=>PX,content_2270_324:()=>FX,content_2270_326:()=>VX,content_2270_328:()=>qX,content_2270_330:()=>OX,content_2270_332:()=>HX,content_2270_334:()=>KX,content_2270_336:()=>QX,content_2270_338:()=>ng,content_2270_34:()=>_f,content_2270_340:()=>og,content_2270_342:()=>rg,content_2270_344:()=>sg,content_2270_346:()=>ig,content_2270_348:()=>ug,content_2270_350:()=>dg,content_2270_352:()=>kg,content_2270_354:()=>fg,content_2270_356:()=>Mg,content_2270_358:()=>_g,content_2270_36:()=>gf,content_2270_360:()=>gg,content_2270_362:()=>Cg,content_2270_364:()=>Lg,content_2270_366:()=>vg,content_2270_368:()=>Ng,content_2270_370:()=>Ag,content_2270_372:()=>zg,content_2270_374:()=>Ig,content_2270_376:()=>Pg,content_2270_378:()=>Fg,content_2270_38:()=>Cf,content_2270_380:()=>Vg,content_2270_382:()=>qg,content_2270_384:()=>Og,content_2270_386:()=>Hg,content_2270_388:()=>Kg,content_2270_390:()=>Qg,content_2270_392:()=>nx,content_2270_394:()=>ox,content_2270_396:()=>rx,content_2270_398:()=>sx,content_2270_4:()=>jy,content_2270_40:()=>Lf,content_2270_400:()=>ix,content_2270_402:()=>ux,content_2270_404:()=>dx,content_2270_406:()=>kx,content_2270_408:()=>fx,content_2270_410:()=>Mx,content_2270_412:()=>_x,content_2270_414:()=>gx,content_2270_416:()=>Cx,content_2270_418:()=>Lx,content_2270_42:()=>vf,content_2270_420:()=>vx,content_2270_422:()=>Nx,content_2270_424:()=>Ax,content_2270_426:()=>zx,content_2270_428:()=>Ix,content_2270_430:()=>Px,content_2270_432:()=>Fx,content_2270_434:()=>Vx,content_2270_436:()=>qx,content_2270_438:()=>Ox,content_2270_44:()=>Nf,content_2270_440:()=>Hx,content_2270_442:()=>Kx,content_2270_444:()=>Qx,content_2270_446:()=>nC,content_2270_448:()=>oC,content_2270_450:()=>rC,content_2270_452:()=>sC,content_2270_454:()=>iC,content_2270_456:()=>uC,content_2270_458:()=>dC,content_2270_46:()=>Af,content_2270_460:()=>kC,content_2270_462:()=>fC,content_2270_464:()=>MC,content_2270_466:()=>_C,content_2270_468:()=>gC,content_2270_470:()=>CC,content_2270_472:()=>LC,content_2270_474:()=>vC,content_2270_476:()=>NC,content_2270_478:()=>AC,content_2270_48:()=>zf,content_2270_480:()=>zC,content_2270_482:()=>IC,content_2270_484:()=>PC,content_2270_486:()=>FC,content_2270_488:()=>VC,content_2270_490:()=>qC,content_2270_492:()=>OC,content_2270_494:()=>HC,content_2270_496:()=>KC,content_2270_498:()=>QC,content_2270_50:()=>If,content_2270_500:()=>nT,content_2270_502:()=>oT,content_2270_504:()=>rT,content_2270_506:()=>sT,content_2270_508:()=>iT,content_2270_510:()=>uT,content_2270_512:()=>dT,content_2270_514:()=>kT,content_2270_516:()=>

10fT,content_2270_518:()=>MT,content_2270_52:()=>Pf,content_2270_520:()=>_T,content_2270_522:()=>gT,content_2270_524:()=>CT,content_2270_526:()=>LT,content_2270_528:()=>vT,content_2270_530:()=>NT,content_2270_532:()=>AT,content_2270_534:()=>zT,content_2270_536:()=>IT,content_2270_538:()=>PT,content_2270_54:()=>Ff,content_2270_540:()=>FT,content_2270_542:()=>VT,content_2270_544:()=>qT,content_2270_546:()=>OT,content_2270_548:()=>HT,content_2270_550:()=>KT,content_2270_552:()=>QT,content_2270_554:()=>nL,content_2270_556:()=>oL,content_2270_558:()=>rL,content_2270_56:()=>Vf,content_2270_560:()=>sL,content_2270_562:()=>iL,content_2270_564:()=>uL,content_2270_566:()=>dL,content_2270_568:()=>kL,content_2270_570:()=>fL,content_2270_572:()=>ML,content_2270_574:()=>_L,content_2270_576:()=>gL,content_2270_578:()=>CL,content_2270_58:()=>qf,content_2270_580:()=>LL,content_2270_582:()=>vL,content_2270_584:()=>NL,content_2270_586:()=>AL,content_2270_588:()=>zL,content_2270_590:()=>IL,content_2270_592:()=>PL,content_2270_594:()=>FL,content_2270_596:()=>VL,content_2270_598:()=>qL,content_2270_6:()=>By,content_2270_60:()=>Of,content_2270_600:()=>OL,content_2270_602:()=>HL,content_2270_604:()=>KL,content_2270_606:()=>QL,content_2270_608:()=>nZ,content_2270_610:()=>oZ,content_2270_612:()=>rZ,content_2270_614:()=>sZ,content_2270_616:()=>iZ,content_2270_618:()=>uZ,content_2270_62:()=>Hf,content_2270_620:()=>dZ,content_2270_622:()=>kZ,content_2270_624:()=>fZ,content_2270_626:()=>MZ,content_2270_628:()=>_Z,content_2270_630:()=>gZ,content_2270_632:()=>CZ,content_2270_634:()=>LZ,content_2270_636:()=>vZ,content_2270_638:()=>NZ,content_2270_64:()=>Kf,content_2270_640:()=>AZ,content_2270_642:()=>zZ,content_2270_644:()=>IZ,content_2270_646:()=>PZ,content_2270_648:()=>FZ,content_2270_650:()=>VZ,content_2270_652:()=>qZ,content_2270_654:()=>OZ,content_2270_656:()=>HZ,content_2270_658:()=>KZ,content_2270_66:()=>Qf,content_2270_660:()=>QZ,content_2270_662:()=>nv,content_2270_664:()=>ov,content_2270_666:()=>rv,content_2270_668:()=>sv,content_2270_670:()=>iv,content_2270_672:()=>uv,content_2270_674:()=>dv,content_2270_676:()=>kv,content_2270_678:()=>fv,content_2270_68:()=>nw,content_2270_680:()=>Mv,content_2270_682:()=>_v,content_2270_684:()=>gv,content_2270_686:()=>Cv,content_2270_688:()=>Lv,content_2270_690:()=>vv,content_2270_692:()=>Nv,content_2270_694:()=>Av,content_2270_696:()=>zv,content_2270_698:()=>Iv,content_2270_70:()=>ow,content_2270_700:()=>Pv,content_2270_702:()=>Fv,content_2270_704:()=>Vv,content_2270_706:()=>qv,content_2270_708:()=>Ov,content_2270_710:()=>Hv,content_2270_712:()=>Kv,content_2270_714:()=>Qv,content_2270_716:()=>nb,content_2270_718:()=>ob,content_2270_72:()=>rw,content_2270_720:()=>rb,content_2270_722:()=>sb,content_2270_724:()=>ib,content_2270_726:()=>ub,content_2270_728:()=>db,content_2270_730:()=>kb,content_2270_732:()=>fb,content_2270_734:()=>Mb,content_2270_736:()=>_b,content_2270_738:()=>gb,content_2270_74:()=>sw,content_2270_740:()=>Cb,content_2270_742:()=>Lb,content_2270_744:()=>vb,content_2270_746:()=>Nb,content_2270_748:()=>Ab,content_2270_750:()=>zb,content_2270_752:()=>Ib,content_2270_754:()=>Pb,content_2270_756:()=>Fb,content_2270_758:()=>Vb,content_2270_76:()=>iw,content_2270_760:()=>qb,content_2270_762:()=>Ob,content_2270_764:()=>Hb,content_2270_766:()=>Kb,content_2270_768:()=>Qb,content_2270_770:()=>nN,content_2270_772:()=>oN,content_2270_774:()=>rN,content_2270_776:()=>sN,content_2270_778:()=>iN,content_2270_78:()=>uw,content_2270_780:()=>uN,content_2270_782:()=>dN,content_2270_784:()=>kN,content_2270_786:()=>fN,content_2270_788:()=>MN,content_2270_790:()=>_N,content_2270_792:()=>gN,content_2270_794:()=>CN,content_2270_796:()=>LN,content_2270_798:()=>vN,content_2270_8:()=>$y,content_2270_80:()=>dw,content_2270_800:()=>NN,content_2270_802:()=>AN,content_2270_804:()=>zN,content_2270_806:()=>IN,content_2270_808:()=>PN,content_2270_810:()=>FN,content_2270_812:()=>VN,content_2270_814:()=>qN,content_2270_816:()=>ON,content_2270_818:()=>HN,content_2270_82:()=>kw,content_2270_820:()=>KN,content_2270_822:()=>QN,content_2270_824:()=>nE,content_2270_826:()=>oE,content_2270_828:()=>rE,content_2270_830:()=>sE,content_2270_832:()=>iE,content_2270_834:()=>uE,content_2270_836:()=>dE,content_2270_838:()=>

10kE,content_2270_84:()=>fw,content_2270_840:()=>fE,content_2270_842:()=>ME,content_2270_844:()=>_E,content_2270_846:()=>gE,content_2270_848:()=>CE,content_2270_850:()=>LE,content_2270_852:()=>vE,content_2270_854:()=>NE,content_2270_856:()=>AE,content_2270_858:()=>zE,content_2270_86:()=>Mw,content_2270_860:()=>IE,content_2270_862:()=>PE,content_2270_864:()=>FE,content_2270_866:()=>VE,content_2270_868:()=>qE,content_2270_870:()=>OE,content_2270_872:()=>HE,content_2270_874:()=>KE,content_2270_876:()=>QE,content_2270_878:()=>nA,content_2270_88:()=>_w,content_2270_880:()=>oA,content_2270_882:()=>rA,content_2270_884:()=>sA,content_2270_886:()=>iA,content_2270_888:()=>uA,content_2270_890:()=>dA,content_2270_892:()=>kA,content_2270_894:()=>fA,content_2270_896:()=>MA,content_2270_898:()=>_A,content_2270_90:()=>gw,content_2270_900:()=>gA,content_2270_902:()=>CA,content_2270_904:()=>LA,content_2270_906:()=>vA,content_2270_908:()=>NA,content_2270_910:()=>AA,content_2270_912:()=>zA,content_2270_914:()=>IA,content_2270_916:()=>PA,content_2270_918:()=>FA,content_2270_92:()=>Cw,content_2270_920:()=>VA,content_2270_922:()=>qA,content_2270_924:()=>OA,content_2270_926:()=>HA,content_2270_928:()=>KA,content_2270_930:()=>QA,content_2270_932:()=>nR,content_2270_934:()=>oR,content_2270_936:()=>rR,content_2270_938:()=>sR,content_2270_94:()=>Lw,content_2270_940:()=>iR,content_2270_942:()=>uR,content_2270_944:()=>dR,content_2270_946:()=>kR,content_2270_948:()=>fR,content_2270_950:()=>MR,content_2270_952:()=>_R,content_2270_954:()=>gR,content_2270_956:()=>CR,content_2270_958:()=>LR,content_2270_96:()=>vw,content_2270_960:()=>vR,content_2270_962:()=>NR,content_2270_964:()=>AR,content_2270_966:()=>zR,content_2270_968:()=>IR,content_2270_970:()=>PR,content_2270_972:()=>FR,content_2270_974:()=>VR,content_2270_976:()=>qR,content_2270_978:()=>OR,content_2270_98:()=>Nw,content_2270_980:()=>HR,content_2270_982:()=>KR,content_2270_984:()=>QR,content_2270_986:()=>nz,content_2270_988:()=>oz,content_2270_990:()=>rz,content_2270_992:()=>sz,content_2270_994:()=>iz,content_2270_996:()=>uz,content_2270_998:()=>dz});var p=e(2784),r=e(7896),c=e(876);const s={toc:[]};function a(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},s,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Property decorators."))}a.isMDXComponent=!0;const i={toc:[]};function l(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},i,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscriptions and triggering of events."))}l.isMDXComponent=!0;const u={toc:[]};function m(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},u,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/AsyncEventDispatcher#dispatch"},(0,c.kt)("inlineCode",{parentName:"a"}

10,"dispatch"))," method returns a promise that resolves when all the\nhandlers resolve."))}m.isMDXComponent=!0;const d={toc:[]};function h(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},d,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  // expose the event to external classes\n  public get onValueChanged {\n    return this.value.subscribable;\n  }\n  // create a private dispatcher\n  private value = new AsyncEventDispatcher<number>();\n\n  private async dispatchExample() {\n    // dispatching returns a Promise.\n    await this.value.dispatch(0);\n  }\n}\n")))}h.isMDXComponent=!0;const k={toc:[]};function y(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},k,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Dispatches an asynchronous ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableEvent"},(0,c.kt)("inlineCode",{parentName:"a"},"SubscribableEvent")),"."))}y.isMDXComponent=!0;const f={toc:[]};function w(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},f,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe all subscribers from the event."))}w.isMDXComponent=!0;const M={toc:[]};function D(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},M,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A callback function that cancels the subscription."))}D.isMDXComponent=!0;const _={toc:[]};function X(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."))}X.isMDXComponent=!0;const g={toc:[]};function x(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},g,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to invoke when the event occurs."))}x.isMDXComponent=!0;const C={toc:[]};function T(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},C,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe from the event."))}T.isMDXComponent=!0;const L={toc:[]};function Z(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},L,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to unsubscribe."))}Z.isMDXComponent=!0;const v={toc:[]};function b(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},v,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the argument passed to subscribers."))}b.isMDXComponent=!0;const N={toc:[]};function E(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},N,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  // expose the event to external classes\n  public get onValueChanged {\n    return this.value.subscribable;\n  }\n  // create a private dispatcher\n  private value = new EventDispatcher<number>();\n\n  private dispatchExample() {\n    // dispatching will notify all subscribers.\n    this.value.dispatch(0);\n  }\n}\n")))}E.isMDXComponent=!0;const A={toc:[]};function R(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},A,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Dispatches a ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableEvent"},(0,c.kt)("inlineCode",{parentName:"a"},"SubscribableEvent")),"."))}R.isMDXComponent=!0;const z={toc:[]};function S(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},z,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe all subscribers from the event."))}S.isMDXComponent=!0;const I={toc:[]};function W(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},I,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A callback function that cancels the subscription."))}W.isMDXComponent=!0;const P={toc:[]};function G(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},P,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."))}G.isMDXComponent=!0;const F={toc:[]};function U(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},F,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to invoke when the event occurs."))}U.isMDXComponent=!0;const V={toc:[]};function j(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},V,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe from the event."))}j.isMDXComponent=!0;const q={toc:[]};function B(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},q,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to unsubscribe."))}B.isMDXComponent=!0;const O={toc:[]};function $(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},O,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the value argument to subscribers."))}$.isMDXComponent=!0;const H={toc:[]};function Y(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},H,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A base for dispatching ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/Subscribable"},(0,c.kt)("inlineCode",{parentName:"a"},"Subscribable")),"s."))}Y.isMDXComponent=!0;const K={toc:[]};function J(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},K,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe all subscribers from the event."))}J.isMDXComponent=!0;const Q={toc:[]};function tt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Q,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A callback function that cancels the subscription."))}tt.isMDXComponent=!0;const nt={toc:[]};function et(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."))}et.isMDXComponent=!0;const ot={toc:[]};function pt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ot,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to invoke when the event occurs."))}pt.isMDXComponent=!0;const rt={toc:[]};function ct(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe from the event."))}ct.isMDXComponent=!0;const st={toc:[]};function at(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},st,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to unsubscribe."))}at.isMDXComponent=!0;const it={toc:[]};function lt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},it,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the argument passed to subscribers."))}lt.isMDXComponent=!0;const ut={toc:[]};function mt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ut,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the callback function."))}mt.isMDXComponent=!0;const dt={toc:[]};function ht(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribers are notified only when the flag is set.\nSubsequent calls to ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/FlagDispatcher#raise"},(0,c.kt)("inlineCode",{parentName:"a"},"raise"))," don't trigger anything.\nAny handlers added while the flag is raised are immediately invoked."),(0,c.kt)("p",null,"Resetting the flag doesn't notify the subscribers, but raising it again does."))}ht.isMDXComponent=!0;const kt={toc:[]};function yt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"}

10,"class Example {\n  // expose the event to external classes\n  public get onChanged {\n    return this.flag.subscribable;\n  }\n  // create a private dispatcher\n  private flag = new FlagDispatcher();\n\n  private dispatchExample() {\n    // setting the flag will notify all subscribers\n    this.flag.raise();\n  }\n}\n")))}yt.isMDXComponent=!0;const ft={toc:[]};function wt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ft,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Dispatches a ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableFlagEvent"},(0,c.kt)("inlineCode",{parentName:"a"},"SubscribableFlagEvent")),"."))}wt.isMDXComponent=!0;const Mt={toc:[]};function Dt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe all subscribers from the event."))}Dt.isMDXComponent=!0;const _t={toc:[]};function Xt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_t,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Are subscribers being notified?"))}Xt.isMDXComponent=!0;const gt={toc:[]};function xt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Notify all current and future subscribers."))}xt.isMDXComponent=!0;const Ct={toc:[]};function Tt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ct,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Stop notifying future subscribers."))}Tt.isMDXComponent=!0;const Lt={toc:[]};function Zt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A callback function that cancels the subscription."))}Zt.isMDXComponent=!0;const vt={toc:[]};function bt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."))}bt.isMDXComponent=!0;const Nt={toc:[]};function Et(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to invoke when the event occurs."))}Et.isMDXComponent=!0;const At={toc:[]};function Rt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},At,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe from the event."))}Rt.isMDXComponent=!0;

10const zt={toc:[]};function St(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to unsubscribe."))}St.isMDXComponent=!0;const It={toc:[]};function Wt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},It,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}Wt.isMDXComponent=!0;const Pt={toc:[]};function Gt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Provides safe access to the public interface of ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/EventDispatcherBase"},(0,c.kt)("inlineCode",{parentName:"a"},"EventDispatcherBase")),"."))}Gt.isMDXComponent=!0;const Ft={toc:[]};function Ut(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ft,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A callback function that cancels the subscription."))}Ut.isMDXComponent=!0;const Vt={toc:[]};function jt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."))}jt.isMDXComponent=!0;const qt={toc:[]};function Bt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to invoke when the event occurs."))}Bt.isMDXComponent=!0;const Ot={toc:[]};function $t(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ot,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe from the event."))}$t.isMDXComponent=!0;const Ht={toc:[]};function Yt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ht,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to unsubscribe."))}Yt.isMDXComponent=!0;const Kt={toc:[]};function Jt(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the argument passed to subscribers."))}Jt.isMDXComponent=!0;const Qt={toc:[]};function tn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qt,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the callback function."))}tn.isMDXComponent=!0;const nn={toc:[]};function en(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}en.isMDXComponent=!0;const on={toc:[]};function pn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},on,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Provides safe access to the public interface of ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/ValueDispatcher"},(0,c.kt)("inlineCode",{parentName:"a"},"ValueDispatcher")),"."))}pn.isMDXComponent=!0;const rn={toc:[]};function cn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the most recent value of this dispatcher."))}cn.isMDXComponent=!0;const sn={toc:[]};function an(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Callback function that cancels the subscription."))}an.isMDXComponent=!0;const ln={toc:[]};function un(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ln,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."),(0,c.kt)("p",null,"Subscribing will immediately invoke the handler with the most recent value."))}un.isMDXComponent=!0;const mn={toc:[]};function dn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to invoke when the event occurs."))}dn.isMDXComponent=!0;const hn={toc:[]};function kn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether the handler should be immediately\ninvoked with the most recent value."))}kn.isMDXComponent=!0;const yn={toc:[]};function fn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Callback function that cancels the subscription."))}fn.isMDXComponent=!0;const wn={toc:[]};function Mn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."),(0,c.kt)("p",null,"Subscribing will immediately invoke the handler with the most recent value."))}Mn.isMDXComponent=!0;const Dn={toc:[]};function _n(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe from the event."))}_n.isMDXComponent=!0;const Xn={toc:[]};function gn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to unsubscribe."))}gn.isMDXComponent=!0;const xn={toc:[]};function Cn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the value passed to subscribers."))}Cn.isMDXComponent=!0;const Tn={toc:[]};function Ln(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Changing the value stored by a value dispatcher will immediately notify all\nits subscribers."))}Ln.isMDXComponent=!0;const Zn={toc:[]};function vn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"}

10,"class Example {\n  // expose the event to external classes\n  public get onValueChanged {\n    return this.value.subscribable;\n  }\n  // create a private dispatcher\n  private value = new ValueDispatcher(0);\n\n  private changingValueExample() {\n    // changing the value will notify all subscribers.\n    this.value.current = 7;\n  }\n}\n")))}vn.isMDXComponent=!0;const bn={toc:[]};function Nn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Dispatches a ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/SubscribableValueEvent"},(0,c.kt)("inlineCode",{parentName:"a"},"SubscribableValueEvent"))))}Nn.isMDXComponent=!0;const En={toc:[]};function An(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},En,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The initial value."))}An.isMDXComponent=!0;const Rn={toc:[]};function zn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the most recent value of this dispatcher."))}zn.isMDXComponent=!0;const Sn={toc:[]};function In(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Setting the value will immediately notify all subscribers."))}In.isMDXComponent=!0;const Wn={toc:[]};function Pn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Set the current value of this dispatcher."))}Pn.isMDXComponent=!0;const Gn={toc:[]};function Fn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new value."))}Fn.isMDXComponent=!0;const Un={toc:[]};function Vn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Un,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe all subscribers from the event."))}Vn.isMDXComponent=!0;const jn={toc:[]};function qn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Callback function that cancels the subscription."))}qn.isMDXComponent=!0;const Bn={toc:[]};function On(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Subscribe to the event."),(0,c.kt)("p",null,"Subscribing will immediately invoke the handler with the most recent value."))}On.isMDXComponent=!0;const $n={toc:[]};function Hn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$n,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to invoke when the event occurs."))}Hn.isMDXComponent=!0;const Yn={toc:[]};function Kn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether the handler should be immediately\ninvoked with the most recent value."))}Kn.isMDXComponent=!0;const Jn={toc:[]};function Qn(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jn,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unsubscribe from the event."))}Qn.isMDXComponent=!0;const te={toc:[]};function ne(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},te,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The handler to unsubscribe."))}ne.isMDXComponent=!0;const ee={toc:[]};function oe(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ee,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the value passed to subscribers."))}oe.isMDXComponent=!0;const pe={toc:[]};function re(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pe,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}re.isMDXComponent=!0;const ce={toc:[]};function se(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ce,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Provides safe access to the public interface of ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/AsyncEventDispatcher"},(0,c.kt)("inlineCode",{parentName:"a"},"AsyncEventDispatcher")),"."))}se.isMDXComponent=!0;const ae={toc:[]};function ie(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ae,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the argument passed to subscribers."))}ie.isMDXComponent=!0;const le={toc:[]};function ue(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},le,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}ue.isMDXComponent=!0;const me={toc:[]};function de(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},me,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Provides safe access to the public interface of ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/EventDispatcher"},(0,c.kt)("inlineCode",{parentName:"a"},"EventDispatcher")),"."))}de.isMDXComponent=!0;const he={toc:[]};function ke(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},he,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the argument passed to subscribers."))}ke.isMDXComponent=!0;const ye={toc:[]};function fe(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ye,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}fe.isMDXComponent=!0;const we={toc:[]};function Me(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},we,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Provides safe access to the public interface of ",(0,c.kt)("a",{parentName:"p",href:"/api/core/events/FlagDispatcher"},(0,c.kt)("inlineCode",{parentName:"a"},"FlagDispatcher")),"."))}Me.isMDXComponent=!0;const De={toc:[]};function _e(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},De,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Utilities for controlling the flow and timing of an animation."))}_e.isMDXComponent=!0;const Xe={toc:[]};function ge(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xe,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The amount of times the timer has ticked."))}ge.isMDXComponent=!0;const xe={toc:[]};function Ce(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xe,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The generator responsible for running this timer."))}Ce.isMDXComponent=!0;const Te={toc:[]};function Le(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Te,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait until the timer ticks."))}Le.isMDXComponent=!0;const Ze={toc:[]};function ve(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ze,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The current iteration index."))}ve.isMDXComponent=!0;const be={toc:[]};function Ne(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},be,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield* all(\n  rect.fill('#ff0000', 2),\n  rect.opacity(1, 1),\n);\n// current time: 2s\n")))}Ne.isMDXComponent=!0;const Ee={toc:[]};function Ae(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ee,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Run all tasks concurrently and wait for all of them to finish."))}Ae.isMDXComponent=!0;const Re={toc:[]};function ze(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Re,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A list of tasks to run."))}ze.isMDXComponent=!0;const Se={toc:[]};function Ie(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Se,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield* any(\n  rect.fill('#ff0000', 2),\n  rect.opacity(1, 1),\n);\n// current time: 1s\n")))}Ie.isMDXComponent=!0;const We={toc:[]};function Pe(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},We,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Run all tasks concurrently and wait for any of them to finish."))}Pe.isMDXComponent=!0;const Ge={toc:[]};function Fe(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ge,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A list of tasks to run."))}Fe.isMDXComponent=!0;const Ue={toc:[]};function Ve(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ue,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield* chain(\n  rect.fill('#ff0000', 2),\n  rect.opacity(1, 1),\n);\n// current time: 3s\n")),(0,c.kt)("p",null,"Note that the same animation can be written as:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield* rect.fill('#ff0000', 2),\nyield* rect.opacity(1, 1),\n")),(0,c.kt)("p",null,"The reason ",(0,c.kt)("inlineCode",{parentName:"p"},"chain")," exists is to make it easier to pass it to other flow\nfunctions. For example:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield* all(\n  rect.radius(20, 3),\n  chain(\n    rect.fill('#ff0000', 2),\n    rect.opacity(1, 1),\n  ),\n);\n")))}Ve.isMDXComponent=!0;const je={toc:[]};function qe(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},je,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Run tasks one after another."))}qe.isMDXComponent=!0;const Be={toc:[]};function Oe(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Be,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A list of tasks to run."))}Oe.isMDXComponent=!0;const $e={toc:[]};function He(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$e,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield* delay(1, rect.fill('#ff0000', 2));\n")),(0,c.kt)("p",null,"Note that the same animation can be written as:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield* waitFor(1),\nyield* rect.fill('#ff0000', 2),\n")),(0,c.kt)("p",null,"The reason ",(0,c.kt)("inlineCode",{parentName:"p"},"delay")," exists is to make it easier to pass it to other flow\nfunctions. For example:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield* all(\n  rect.opacity(1, 3),\n  delay(1, rect.fill('#ff0000', 2));\n);\n")))}He.isMDXComponent=!0;const Ye={toc:[]};function Ke(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ye,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Run the given generator or callback after a specific amount of time."))}Ke.isMDXComponent=!0;const Je={toc:[]};function Qe(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Je,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The delay in seconds"))}Qe.isMDXComponent=!0;const to={toc:[]};function no(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},to,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The task or callback to run after the delay."))}no.isMDXComponent=!0;const eo={toc:[]};function oo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const timer = every(2, time => console.log(time));\nyield timer.runner;\n\n// current time: 0s\nyield* waitFor(5);\n// current time: 5s\nyield* timer.sync();\n// current time: 6s\n")))}oo.isMDXComponent=!0;const po={toc:[]};function ro(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},po,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Call the given callback every N seconds."))}ro.isMDXComponent=!0;const co={toc:[]};function so(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},co,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The interval between subsequent calls."))}so.isMDXComponent=!0;const ao={toc:[]};function io(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ao,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The callback to be called."))}io.isMDXComponent=!0;const lo={toc:[]};function uo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Each time iteration waits until the previous one is completed."))}uo.isMDXComponent=!0;const mo={toc:[]};function ho(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const colors = [\n  '#ff6470',\n  '#ffc66d',\n  '#68abdf',\n  '#99c47a',\n];\n\nyield* loop(\n  colors.length,\n  i => rect.fill(colors[i], 2),\n});\n")))}ho.isMDXComponent=!0;const ko={toc:[]};function yo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ko,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Run the given generator N times."))}yo.isMDXComponent=!0;const fo={toc:[]};function wo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The number of iterations."))}wo.isMDXComponent=!0;const Mo={toc:[]};function Do(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A function creating the generator to run. Because generators\ncan't be reset, a new generator is created on each iteration."))}Do.isMDXComponent=!0;const _o={toc:[]};function Xo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_o,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Do nothing."))}Xo.isMDXComponent=!0;const go={toc:[]};function xo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},go,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield run(function* () {\n  // do things\n});\n")))}xo.isMDXComponent=!0;const Co={toc:[]};function To(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Co,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Turn the given generator function into a threadable generator."))}To.isMDXComponent=!0;const Lo={toc:[]};function Zo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A generator function or a factory that creates the generator."))}Zo.isMDXComponent=!0;const vo={toc:[]};function bo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield run(function* () {\n  // do things\n});\n")))}bo.isMDXComponent=!0;const No={toc:[]};function Eo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},No,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Turn the given generator function into a threadable generator."))}Eo.isMDXComponent=!0;const Ao={toc:[]};function Ro(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ao,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An optional name used when displaying this generator in the UI."))}Ro.isMDXComponent=!0;const zo={toc:[]};function So(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A generator function or a factory that creates the generator."))}So.isMDXComponent=!0;const Io={toc:[]};function Wo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Io,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The function doesn't wait until the previous task in the sequence has\nfinished. Once the delay has passed, the next task will start even if\nthe previous is still running."))}Wo.isMDXComponent=!0;const Po={toc:[]};function Go(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Po,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("co

10de",{parentName:"pre",className:"language-ts"},"yield* sequence(\n  0.1,\n  ...rects.map(rect => rect.x(100, 1))\n);\n")))}Go.isMDXComponent=!0;const Fo={toc:[]};function Uo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Start all tasks one after another with a constant delay between."))}Uo.isMDXComponent=!0;const Vo={toc:[]};function jo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The delay between each of the tasks."))}jo.isMDXComponent=!0;const qo={toc:[]};function Bo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A list of tasks to be run in a sequence."))}Bo.isMDXComponent=!0;const Oo={toc:[]};function $o(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Oo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield waitFor(2);\n// current time: 2s\nyield waitFor(3);\n// current time: 5s\n")))}$o.isMDXComponent=!0;const Ho={toc:[]};function Yo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ho,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for the given amount of time."))}Yo.isMDXComponent=!0;const Ko={toc:[]};function Jo(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ko,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The relative time in seconds."))}Jo.isMDXComponent=!0;const Qo={toc:[]};function tp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qo,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An optional task to be run after the function completes."))}tp.isMDXComponent=!0;const np={toc:[]};function ep(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},np,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Time events are displayed on the timeline and can be edited to adjust the\ndelay. By default, an event happens immediately - without any delay."))}ep.isMDXComponent=!0;const op={toc:[]};function pp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},op,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield waitUntil('event');\n")))}pp.isMDXComponent=!0;const rp={toc:[]};function cp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait until the given time event."))}cp.isMDXComponent=!0;const sp={toc:[]};function ap(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The name of the time event."))}ap.isMDXComponent=!0;const ip={toc:[]};function lp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ip,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An optional task to be run after the function completes."))}lp.isMDXComponent=!0;const up={toc:[]};function mp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},up,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Main Motion Canvas classes."))}mp.isMDXComponent=!0;const dp={toc:[]};function hp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when a new message is logged."))}hp.isMDXComponent=!0;const kp={toc:[]};function yp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the meta file of a given entity."))}yp.isMDXComponent=!0;const fp={toc:[]};function wp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when metadata changes."))}wp.isMDXComponent=!0;const Mp={toc:[]};function Dp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Load new metadata from a file."))}Dp.isMDXComponent=!0;const _p={toc:[]};function Xp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_p,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"New metadata."))}Xp.isMDXComponent=!0;const gp={toc:[]};function xp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Any possible errors will be logged to the console."))}xp.isMDXComponent=!0;const Cp={toc:[]};function Tp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Set data without waiting for confirmation."))}Tp.isMDXComponent=!0;const Lp={toc:[]};function Zp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"New data."))}Zp.isMDXComponent=!0;const vp={toc:[]};function bp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the data stored in the meta file."))}bp.isMDXComponent=!0;const Np={toc:[]};function Ep(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Np,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/core/index#makeProject"},(0,c.kt)("inlineCode",{parentName:"a"},"makeProject"))," instead."))}Ep.isMDXComponent=!0;const Ap={toc:[]};function Rp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ap,e,{components:n,mdxType:"MDXLayout"}))}Rp.isMDXComponent=!0;const zp={toc:[]};function Sp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The project configuration."))}Sp.isMDXComponent=!0;const Ip={toc:[]};function Wp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ip,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the current scene changes."))}Wp.isMDXComponent=!0;const Pp={toc:[]};function Gp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered after any of the scenes were reloaded."))}Gp.isMDXComponent=!0;const Fp={toc:[]};function Up(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered after the scenes were recalculated."))}Up.isMDXComponent=!0;const Vp={toc:[]};function jp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the contents of a meta file."))}jp.isMDXComponent=!0;const qp={toc:[]};function Bp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Multi-media management."))}Bp.isMDXComponent=!0;const Op={toc:[]};function $p(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Op,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,(0,c.kt)("inlineCode",{parentName:"p"},"true")," if the audio successfully started playing."))}$p.isMDXComponent=!0;const Hp={toc:[]};function Yp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Pause/resume the audio."))}Yp.isMDXComponent=!0;const Kp={toc:[]};function Jp(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether the audio should be paused or resumed."))}Jp.isMDXComponent=!0;const Qp={toc:[]};function tr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qp,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The absolute biggest value from the peaks array."))}tr.isMDXComponent=!0;const nr={toc:[]};function er(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The amount of samples taken."))}er.isMDXComponent=!0;const or={toc:[]};function pr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},or,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An array of minimum and maximum waveform data points, interleaved.\nEach value is in range of -1 to 1."))}

10pr.isMDXComponent=!0;const rr={toc:[]};function cr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Samples per seconds."))}cr.isMDXComponent=!0;const sr={toc:[]};function ar(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Playback control."))}ar.isMDXComponent=!0;const ir={toc:[]};function lr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ir,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Abstract scene representations and related utilities."))}lr.isMDXComponent=!0;const ur={toc:[]};function mr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ur,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Signifies the various stages of a ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,c.kt)("inlineCode",{parentName:"a"},"Scene")),"'s render lifecycle."))}mr.isMDXComponent=!0;const dr={toc:[]};function hr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Occurs after a render ends."))}hr.isMDXComponent=!0;const kr={toc:[]};function yr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Occurs before the render starts when the Scene transitions are applied."))}yr.isMDXComponent=!0;const fr={toc:[]};function wr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Occurs at the beginning of a render when the Scene's\n",(0,c.kt)("a",{parentName:"p",href:"/api/core/utils#useContext"},(0,c.kt)("inlineCode",{parentName:"a"},"useContext"))," handlers are applied."))}wr.isMDXComponent=!0;const Mr={toc:[]};function Dr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Occurs at the end of a render when the Scene's\n",(0,c.kt)("a",{parentName:"p",href:"/api/core/utils#useContextAfter"},(0,c.kt)("inlineCode",{parentName:"a"},"useContextAfter"))," handlers are applied."))}Dr.isMDXComponent=!0;const _r={toc:[]};function Xr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_r,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Describes the state of a scene."))}Xr.isMDXComponent=!0;const gr={toc:[]};function xr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Informs the Project that the previous scene is no longer necessary and can\nbe disposed of."))}xr.isMDXComponent=!0;const Cr={toc:[]};function Tr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The scene has finished transitioning in."))}Tr.isMDXComponent=!0;const Lr={toc:[]};function Zr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Informs the project that the next scene can begin.\nThe ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#next"},(0,c.kt)("inlineCode",{parentName:"a"},"next"))," method will still be invoked until the next scene\nenters ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,c.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn")),"."))}Zr.isMDXComponent=!0;const vr={toc:[]};function br(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The scene is ready to transition out."))}br.isMDXComponent=!0;const Nr={toc:[]};function Er(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Invoking ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#next"},(0,c.kt)("inlineCode",{parentName:"a"},"next"))," won't have any effect."))}Er.isMDXComponent=!0;const Ar={toc:[]};function Rr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ar,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The scene has finished."))}Rr.isMDXComponent=!0;const zr={toc:[]};function Sr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The scene has just been created/reset."))}Sr.isMDXComponent=!0;const Ir={toc:[]};function Wr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ir,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The default implementation of the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,c.kt)("inlineCode",{parentName:"a"},"Scene"))," interface."),(0,c.kt)("p",null,"Uses generators to control the animation."))}Wr.isMDXComponent=!0;const Pr={toc:[]};function Gr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Will be passed as the second argument to the constructor."))}Gr.isMDXComponent=!0;const Fr={toc:[]};function Ur(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Name of the scene."))}Ur.isMDXComponent=!0;const Vr={toc:[]};function jr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reference to the project."))}jr.isMDXComponent=!0;const qr={toc:[]};function Br(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qr,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The frame at which this scene starts."))}Br.isMDXComponent=!0;const Or={toc:[]};function $r(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Or,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The frame at which this scene ends."))}$r.isMDXComponent=!0;const Hr={toc:[]};function Yr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the cached data changes."))}Yr.isMDXComponent=!0;const Kr={toc:[]};function Jr(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered after scene is recalculated."))}Jr.isMDXComponent=!0;const Qr={toc:[]};function tc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qr,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the scene is reloaded."))}tc.isMDXComponent=!0;const nc={toc:[]};function ec(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered at various stages of the render lifecycle with an event title and a Context2D."))}ec.isMDXComponent=!0;const oc={toc:[]};function pc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},oc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the scene is reset."))}pc.isMDXComponent=!0;const rc={toc:[]};function cc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the main thread changes."))}cc.isMDXComponent=!0;const sc={toc:[]};function ac(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The scene directly before this scene, or null if omitted for performance."))}ac.isMDXComponent=!0;const ic={toc:[]};function lc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ic,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Is this scene in the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,c.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state?"))}lc.isMDXComponent=!0;const uc={toc:[]};function mc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},uc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Enter the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,c.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}mc.isMDXComponent=!0;const dc={toc:[]};function hc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Enter the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,c.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state."))}hc.isMDXComponent=!0;const kc={toc:[]};function yc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the size of this scene."),(0,c.kt)("p",null,"Usually return ",(0,c.kt)("inlineCode",{parentName:"p"},"this.project.getSize()"),"."))}yc.isMDXComponent=!0;const fc={toc:[]};function wc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Is this scene in the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,c.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state?"))}wc.isMDXComponent=!0;const Mc={toc:[]};function Dc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Is this scene cached?"),(0,c.kt)("p",null,"Used only by ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene"},(0,c.kt)("inlineCode",{parentName:"a"},"GeneratorScene")),". Seeking through a project that\ncontains at least one uncached scene will log a warning to the console."),(0,c.kt)("p",null,"Should always return ",(0,c.kt)("inlineCode",{parentName:"p"},"true"),"."))}Dc.isMDXComponent=!0;const _c={toc:[]};function Xc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_c,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Is this scene in the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Finished"},(0,c.kt)("inlineCode",{parentName:"a"},"Finished"))," state?"))}Xc.isMDXComponent=!0;const gc={toc:[]};function xc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Progress this scene one frame forward."))}xc.isMDXComponent=!0;const Cc={toc:[]};function Tc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The task of this method is to calculate new timings stored in the cache.\nWhen this method is invoked, ",(0,c.kt)("inlineCode",{parentName:"p"}

10,"this.project.frame")," is set to the frame at\nwhich this scene should start (",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#firstFrame"},(0,c.kt)("inlineCode",{parentName:"a"},"firstFrame")),")."),(0,c.kt)("p",null,"At the end of execution, this method should set ",(0,c.kt)("inlineCode",{parentName:"p"},"this.project.frame")," to the\nframe at which this scene ends (",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#lastFrame"},(0,c.kt)("inlineCode",{parentName:"a"},"lastFrame")),")."),(0,c.kt)("p",null,"Should trigger ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#onRecalculated"},(0,c.kt)("inlineCode",{parentName:"a"},"onRecalculated")),"."))}Tc.isMDXComponent=!0;const Lc={toc:[]};function Zc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Recalculate the scene."))}Zc.isMDXComponent=!0;const vc={toc:[]};function bc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called whenever something related to this scene has changed:\ntime events, source code, metadata, etc."),(0,c.kt)("p",null,"Should trigger ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#onReloaded"},(0,c.kt)("inlineCode",{parentName:"a"},"onReloaded")),"."))}bc.isMDXComponent=!0;const Nc={toc:[]};function Ec(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reload the scene."))}Ec.isMDXComponent=!0;const Ac={toc:[]};function Rc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ac,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If present, a new configuration object."))}Rc.isMDXComponent=!0;const zc={toc:[]};function Sc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render the scene onto a canvas."))}Sc.isMDXComponent=!0;const Ic={toc:[]};function Wc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ic,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to used when rendering."))}Wc.isMDXComponent=!0;const Pc={toc:[]};function Gc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reset this scene to its initial state."))}Gc.isMDXComponent=!0;const Fc={toc:[]};function Uc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If present, the previous scene."))}Uc.isMDXComponent=!0;const Vc={toc:[]};function jc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the view."),(0,c.kt)("p",null,"Invoked after each step of the main generator.\nCan be used for calculating layout."),(0,c.kt)("p",null,"Can modify the state of the view."))}jc.isMDXComponent=!0;const qc={toc:[]};function Bc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Lifecycle events for ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,c.kt)("inlineCode",{parentName:"a"},"Scene"))," that are cleared on every reset."))}Bc.isMDXComponent=!0;const Oc={toc:[]};function $c(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Oc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A random number generator based on\n",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://gist.github.com/tommyettinger/46a874533244883189143505d203312c"},(0,c.kt)("inlineCode",{parentName:"a"},"Mulberry32")),"."))}$c.isMDXComponent=!0;const Hc={toc:[]};function Yc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get an array filled with random floats in the given range."))}Yc.isMDXComponent=!0;const Kc={toc:[]};function Jc(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The size of the array."))}Jc.isMDXComponent=!0;const Qc={toc:[]};function ts(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qc,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The start of the range."))}ts.isMDXComponent=!0;const ns={toc:[]};function es(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ns,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The end of the range."))}es.isMDXComponent=!0;const os={toc:[]};function ps(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},os,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get an array filled with random integers in the given range."),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"}),(0,c.kt)("li",{parentName:"ul"})))}ps.isMDXComponent=!0;const rs={toc:[]};function cs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The size of the array."),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"})))}cs.isMDXComponent=!0;const ss={toc:[]};function as(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ss,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The start of the range."),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"})))}as.isMDXComponent=!0;const is={toc:[]};function ls(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},is,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The end of the range. Exclusive."))}ls.isMDXComponent=!0;const us={toc:[]};function ms(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},us,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the next random float in the given range."))}ms.isMDXComponent=!0;const ds={toc:[]};function hs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ds,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The start of the range."))}hs.isMDXComponent=!0;const ks={toc:[]};function ys(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ks,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The end of the range."))}ys.isMDXComponent=!0;const fs={toc:[]};function ws(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the next random integer in the given range."))}ws.isMDXComponent=!0;const Ms={toc:[]};function Ds(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ms,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The start of the range."))}Ds.isMDXComponent=!0;const _s={toc:[]};function Xs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_s,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The end of the range. Exclusive."))}Xs.isMDXComponent=!0;const gs={toc:[]};function xs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a new independent generator."))}xs.isMDXComponent=!0;const Cs={toc:[]};function Ts(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Manages time events for a given scene."))}Ts.isMDXComponent=!0;const Ls={toc:[]};function Zs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ls,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when time events change."))}Zs.isMDXComponent=!0;const vs={toc:[]};function bs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the time offset of the given event."))}bs.isMDXComponent=!0;const Ns={toc:[]};function Es(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ns,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The name of the event."))}Es.isMDXComponent=!0;const As={toc:[]};function Rs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},As,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The time offset in seconds."))}Rs.isMDXComponent=!0;const zs={toc:[]};function Ss(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether the timing of the consecutive events should be\npreserved. When set to ",(0,c.kt)("inlineCode",{parentName:"p"}

10,"true")," their offsets will be\nadjusted to keep them in place."))}Ss.isMDXComponent=!0;const Is={toc:[]};function Ws(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Is,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get variable signal if exists or create signal if not"))}Ws.isMDXComponent=!0;const Ps={toc:[]};function Gs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ps,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The name of the variable."))}Gs.isMDXComponent=!0;const Fs={toc:[]};function Us(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reset all stored signals."))}Us.isMDXComponent=!0;const Vs={toc:[]};function js(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update all signals with new project variable values."))}js.isMDXComponent=!0;const qs={toc:[]};function Bs(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Describes cached information about the timing of a scene."))}Bs.isMDXComponent=!0;const Os={toc:[]};function $s(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Os,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Describes a complete scene together with the meta file."))}$s.isMDXComponent=!0;const Hs={toc:[]};function Ys(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Configuration object."))}Ys.isMDXComponent=!0;const Ks={toc:[]};function Js(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ks,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The class used to instantiate the scene."))}Js.isMDXComponent=!0;const Qs={toc:[]};function ta(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qs,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The stack trace at the moment of creation."))}ta.isMDXComponent=!0;const na={toc:[]};function ea(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},na,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the configuration object."))}ea.isMDXComponent=!0;const oa={toc:[]};function pa(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},oa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Scenes can implement this interface to make their components\ninspectable through the UI."))}pa.isMDXComponent=!0;const ra={toc:[]};function ca(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ra,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method can be used to overlay additional information about an\nelement on top of the animation."))}ca.isMDXComponent=!0;const sa={toc:[]};function aa(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for the inspected element."))}aa.isMDXComponent=!0;const ia={toc:[]};function la(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ia,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The element for which to draw an overlay."))}la.isMDXComponent=!0;const ua={toc:[]};function ma(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ua,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}ma.isMDXComponent=!0;const da={toc:[]};function ha(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},da,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}ha.isMDXComponent=!0;const ka={toc:[]};function ya(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ka,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,'This information will be displayed in the "Properties" panel.'))}ya.isMDXComponent=!0;const fa={toc:[]};function wa(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Return the attributes of the inspected element."))}wa.isMDXComponent=!0;const Ma={toc:[]};function Da(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ma,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The element to inspect."))}

10Da.isMDXComponent=!0;const _a={toc:[]};function Xa(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_a,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a possible element to inspect at a given position."))}Xa.isMDXComponent=!0;const ga={toc:[]};function xa(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ga,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The x coordinate."))}xa.isMDXComponent=!0;const Ca={toc:[]};function Ta(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ca,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The y coordinate."))}Ta.isMDXComponent=!0;const La={toc:[]};function Za(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},La,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If a scene destroys and recreates its components upon every reset, the\nreference may no longer be valid. Even though the component is still\npresent. This method should check that and return a new reference."))}Za.isMDXComponent=!0;const va={toc:[]};function ba(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},va,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Check if the inspected element is still valid."))}ba.isMDXComponent=!0;const Na={toc:[]};function Ea(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Na,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The element to validate."))}Ea.isMDXComponent=!0;const Aa={toc:[]};function Ra(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Aa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents a time event stored in a meta file."))}Ra.isMDXComponent=!0;const za={toc:[]};function Sa(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},za,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Any class implementing this interface should have a constructor matching\n",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneConstructor"},(0,c.kt)("inlineCode",{parentName:"a"},"SceneConstructor")),"."))}Sa.isMDXComponent=!0;const Ia={toc:[]};function Wa(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ia,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The main interface for scenes."))}Wa.isMDXComponent=!0;const Pa={toc:[]};function Ga(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Will be passed as the second argument to the constructor."))}Ga.isMDXComponent=!0;const Fa={toc:[]};function Ua(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Name of the scene."))}Ua.isMDXComponent=!0;const Va={toc:[]};function ja(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Va,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reference to the project."))}ja.isMDXComponent=!0;const qa={toc:[]};function Ba(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The scene's ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/LifecycleEvents"},(0,c.kt)("inlineCode",{parentName:"a"},"LifecycleEvents")),"."))}Ba.isMDXComponent=!0;const Oa={toc:[]};function $a(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Oa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The frame at which this scene starts."))}$a.isMDXComponent=!0;const Ha={toc:[]};function Ya(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ha,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The frame at which this scene ends."))}Ya.isMDXComponent=!0;const Ka={toc:[]};function Ja(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ka,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the cached data changes."))}Ja.isMDXComponent=!0;const Qa={toc:[]};function ti(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qa,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered after scene is recalculated."))}ti.isMDXComponent=!0;const ni={toc:[]};function ei(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ni,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the scene is reloaded."))}ei.isMDXComponent=!0;const oi={toc:[]};function pi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},oi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered at various stages of the render lifecycle with an event title and a Context2D."))}pi.isMDXComponent=!0;const ri={toc:[]};function ci(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ri,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the scene is reset."))}ci.isMDXComponent=!0;const si={toc:[]};function ai(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},si,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The scene directly before this scene, or null if omitted for performance."))}ai.isMDXComponent=!0;const ii={toc:[]};function li(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ii,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Is this scene in the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,c.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state?"))}li.isMDXComponent=!0;const ui={toc:[]};function mi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ui,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Enter the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,c.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}mi.isMDXComponent=!0;const di={toc:[]};function hi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},di,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Enter the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,c.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state."))}hi.isMDXComponent=!0;const ki={toc:[]};function yi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ki,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the size of this scene."),(0,c.kt)("p",null,"Usually return ",(0,c.kt)("inlineCode",{parentName:"p"},"this.project.getSize()"),"."))}yi.isMDXComponent=!0;const fi={toc:[]};function wi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Is this scene in the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,c.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state?"))}wi.isMDXComponent=!0;const Mi={toc:[]};function Di(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mi,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Is this scene cached?"),(0,c.kt)("p",null,"Used only by ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene"},(0,c.kt)("inlineCode",{parentName:"a"},"GeneratorScene")),". Seeking through a project that\ncontains at least one uncached scene will log a warning to the console."),(0,c.kt)("p",null,"Should always return ",(0,c.kt)("inlineCode",{parentName:"p"},"true"),"."))}Di.isMDXComponent=!0;const _i={toc:[]};function Xi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_i,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Is this scene in the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Finished"},(0,c.kt)("inlineCode",{parentName:"a"},"Finished"))," state?"))}Xi.isMDXComponent=!0;const gi={toc:[]};function xi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Progress this scene one frame forward."))}xi.isMDXComponent=!0;const Ci={toc:[]};function Ti(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ci,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The task of this method is to calculate new timings stored in the cache.\nWhen this method is invoked, ",(0,c.kt)("inlineCode",{parentName:"p"},"this.project.frame")," is set to the frame at\nwhich this scene should start (",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#firstFrame"},(0,c.kt)("inlineCode",{parentName:"a"},"firstFrame")),")."),(0,c.kt)("p",null,"At the end of execution, this method should set ",(0,c.kt)("inlineCode",{parentName:"p"},"this.project.frame")," to the\nframe at which this scene ends (",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#lastFrame"},(0,c.kt)("inlineCode",{parentName:"a"},"lastFrame")),")."),(0,c.kt)("p",null,"Should trigger ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#onRecalculated"},(0,c.kt)("inlineCode",{parentName:"a"},"onRecalculated")),"."))}Ti.isMDXComponent=!0;const Li={toc:[]};function Zi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Li,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Recalculate the scene."))}Zi.isMDXComponent=!0;const vi={toc:[]};function bi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called whenever something related to this scene has changed:\ntime events, source code, metadata, etc."),(0,c.kt)("p",null,"Should trigger ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#onReloaded"},(0,c.kt)("inlineCode",{parentName:"a"},"onReloaded")),"."))}bi.isMDXComponent=!0;const Ni={toc:[]};function Ei(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ni,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reload the scene."))}Ei.isMDXComponent=!0;const Ai={toc:[]};function Ri(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ai,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If present, a new configuration object."))}Ri.isMDXComponent=!0;const zi={toc:[]};function Si(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render the scene onto a canvas."))}Si.isMDXComponent=!0;const Ii={toc:[]};function Wi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ii,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to used when rendering."))}Wi.isMDXComponent=!0;const Pi={toc:[]};function Gi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reset this scene to its initial state."))}Gi.isMDXComponent=!0;const Fi={toc:[]};function Ui(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If present, the previous scene."))}Ui.isMDXComponent=!0;const Vi={toc:[]};function ji(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the configuration object."))}ji.isMDXComponent=!0;const qi={toc:[]};function Bi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Each class implementing the ",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,c.kt)("inlineCode",{parentName:"a"},"Scene"))," interface should have a matching\nconstructor."))}Bi.isMDXComponent=!0;const Oi={toc:[]};function $i(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Oi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The constructor used when creating new scenes."))}$i.isMDXComponent=!0;const Hi={toc:[]};function Yi(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the configuration object. This object will be\npassed to the constructor from\n",(0,c.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneDescription#config"},(0,c.kt)("inlineCode",{parentName:"a"},"config")),"."))}Yi.isMDXComponent=!0;const Ki={toc:[]};function Ji(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ki,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Describes a scene exposed by scene files."))}Ji.isMDXComponent=!0;const Qi={toc:[]};function tl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qi,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Configuration object."))}tl.isMDXComponent=!0;const nl={toc:[]};function el(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The class used to instantiate the scene."))}el.isMDXComponent=!0;const ol={toc:[]};function pl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ol,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The stack trace at the moment of creation."))}pl.isMDXComponent=!0;const rl={toc:[]};function cl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type of the configuration object."))}cl.isMDXComponent=!0;const sl={toc:[]};function al(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the contents of a meta file."))}al.isMDXComponent=!0;const il={toc:[]};function ll(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},il,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This interface is only useful when a scene uses thread generators to run."))}ll.isMDXComponent=!0;const ul={toc:[]};function ml(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ul,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Scenes can implement this interface to display their thread hierarchy in the\nUI."))}ml.isMDXComponent=!0;const dl={toc:[]};function hl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Triggered when the main thread changes."))}hl.isMDXComponent=!0;const kl={toc:[]};function yl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents a time event at runtime."))}yl.isMDXComponent=!0;const fl={toc:[]};function wl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"In other words, the moment at which ",(0,c.kt)("a",{parentName:"p",href:"/api/core/flow#waitUntil"},(0,c.kt)("inlineCode",{parentName:"a"},"waitUntil"))," for this event\nwas invoked."))}wl.isMDXComponent=!0;const Ml={toc:[]};function Dl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ml,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Time in seconds, relative to the beginning of the scene, at which the event\nwas registered."))}Dl.isMDXComponent=!0;const _l={toc:[]};function Xl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_l,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Name of the event."))}Xl.isMDXComponent=!0;const gl={toc:[]};function xl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Duration of the event in seconds."))}xl.isMDXComponent=!0;const Cl={toc:[]};function Tl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Stack trace at the moment of registration."))}Tl.isMDXComponent=!0;const Ll={toc:[]};function Zl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ll,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Time in seconds, relative to the beginning of the scene, at which the event\nshould end."))}Zl.isMDXComponent=!0;const vl={toc:[]};function bl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents attributes of an inspected element."))}bl.isMDXComponent=!0;const Nl={toc:[]};function El(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The type is not important because the UI does not interact with it.\nIt serves as a key that will be passed back to an Inspectable scene to\nreceive more information about said element."))}El.isMDXComponent=!0;const Al={toc:[]};function Rl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Al,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents an element to inspect."))}Rl.isMDXComponent=!0;const zl={toc:[]};function Sl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Value wrappers for easy dependency tracking and cache invalidation."))}Sl.isMDXComponent=!0;const Il={toc:[]};function Wl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Il,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,c.kt)("p",null,"This method can be used to create copies of signals."))}Wl.isMDXComponent=!0;const Pl={toc:[]};function Gl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const a = createSignal(2);\nconst b = createSignal(() => a);\n// b() == 2\n\nconst bClone = createSignal(b.raw());\n// bClone() == 2\n\na(4);\n// b() == 4\n// bClone() == 4\n")))}Gl.isMDXComponent=!0;const Fl={toc:[]};function Ul(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the raw value of this signal."))}Ul.isMDXComponent=!0;const Vl={toc:[]};function jl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}jl.isMDXComponent=!0;const ql={toc:[]};function Bl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ql,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}Bl.isMDXComponent=!0;const Ol={toc:[]};function $l(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ol,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}$l.isMDXComponent=!0;const Hl={toc:[]};function Yl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"signal.save();\n// same as:\nsignal(signal());\n")))}Yl.isMDXComponent=!0;const Kl={toc:[]};function Jl(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kl,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Compute the current value of the signal and immediately set it."))}Jl.isMDXComponent=!0;const Ql={toc:[]};function tu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ql,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,c.kt)("p",null,"This method can be used to create copies of signals."))}tu.isMDXComponent=!0;const nu={toc:[]};function eu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const a = createSignal(2);\nconst b = createSignal(() => a);\n// b() == 2\n\nconst bClone = createSignal(b.raw());\n// bClone() == 2\n\na(4);\n// b() == 4\n// bClone() == 4\n")))}eu.isMDXComponent=!0;const ou={toc:[]};function pu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ou,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the raw value of this signal."))}pu.isMDXComponent=!0;const ru={toc:[]};function cu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ru,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}cu.isMDXComponent=!0;const su={toc:[]};function au(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},su,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}au.isMDXComponent=!0;const iu={toc:[]};function lu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},iu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}lu.isMDXComponent=!0;const uu={toc:[]};function mu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},uu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"signal.save();\n// same as:\nsignal(signal());\n")))}mu.isMDXComponent=!0;const du={toc:[]};function hu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},du,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Compute the current value of the signal and immediately set it."))}hu.isMDXComponent=!0;const ku={toc:[]};function yu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ku,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}yu.isMDXComponent=!0;const fu={toc:[]};function wu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}wu.isMDXComponent=!0;const Mu={toc:[]};function Du(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Compute the current value of the signal and immediately set it."))}

10Du.isMDXComponent=!0;const _u={toc:[]};function Xu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_u,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Thread management."))}Xu.isMDXComponent=!0;const gu={toc:[]};function xu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Thread is a wrapper for a generator that can be executed concurrently."),(0,c.kt)("p",null,"Aside from the main thread, all threads need to have a parent.\nIf a parent finishes execution, all of its child threads are terminated."))}xu.isMDXComponent=!0;const Cu={toc:[]};function Tu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A class representing an individual thread."))}Tu.isMDXComponent=!0;const Lu={toc:[]};function Zu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The generator wrapped by this thread."))}Zu.isMDXComponent=!0;const vu={toc:[]};function bu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The generator wrapped by this thread."))}bu.isMDXComponent=!0;const Nu={toc:[]};function Eu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Used by ",(0,c.kt)("a",{parentName:"p",href:"/api/core/flow#waitFor"},(0,c.kt)("inlineCode",{parentName:"a"},"waitFor"))," and other time-based functions to properly\nsupport durations shorter than one frame."))}Eu.isMDXComponent=!0;const Au={toc:[]};function Ru(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Au,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The current time of this thread."))}Ru.isMDXComponent=!0;const zu={toc:[]};function Su(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The next value to be passed to the wrapped generator."))}Su.isMDXComponent=!0;const Iu={toc:[]};function Wu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Iu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Check if this thread or any of its ancestors has been canceled."))}Wu.isMDXComponent=!0;const Pu={toc:[]};function Gu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Progress the wrapped generator once."))}Gu.isMDXComponent=!0;const Fu={toc:[]};function Uu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the thread for the next update cycle."))}Uu.isMDXComponent=!0;const Vu={toc:[]};function ju(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A generator function or a normal function that returns a generator."))}ju.isMDXComponent=!0;const qu={toc:[]};function Bu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Yielded values can be used to control the flow of animation:"),(0,c.kt)("p",null,"Progress to the next frame:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield;\n")),(0,c.kt)("p",null,"Run another generator synchronously:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"yield* generatorFunction();\n")),(0,c.kt)("p",null,"Run another generator concurrently:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n")),(0,c.kt)("p",null,"Await a Promise:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const result = yield asyncFunction();\n")))}Bu.isMDXComponent=!0;const Ou={toc:[]};function $u(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ou,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The main generator type produced by all generator functions in Motion Canvas."))}$u.isMDXComponent=!0;const Hu={toc:[]};function Yu(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Cancel all listed tasks."),(0,c.kt)("p",null,"Example:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n\n// do something concurrently\n\nyield* cancel(task);\n")))}Yu.isMDXComponent=!0;const Ku={toc:[]};function Ju(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ku,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A list of tasks to cancel."))}Ju.isMDXComponent=!0;const Qu={toc:[]};function tm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qu,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Check if the given value is a ","[Promise][promise]","."))}tm.isMDXComponent=!0;const nm={toc:[]};function em(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A possible ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/promise"},"Promise"),"."))}em.isMDXComponent=!0;const om={toc:[]};function pm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},om,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Check if the given value is a ",(0,c.kt)("a",{parentName:"p",href:"/api/core/threading#ThreadGenerator"},(0,c.kt)("inlineCode",{parentName:"a"},"ThreadGenerator")),"."))}pm.isMDXComponent=!0;const rm={toc:[]};function cm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A possible thread ",(0,c.kt)("a",{parentName:"p",href:"/api/core/threading#ThreadGenerator"},(0,c.kt)("inlineCode",{parentName:"a"},"ThreadGenerator")),"."))}cm.isMDXComponent=!0;const sm={toc:[]};function am(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n\n// do something concurrently\n\nyield* join(task);\n")))}am.isMDXComponent=!0;const im={toc:[]};function lm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},im,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Pause the current generator until all listed tasks are finished."))}lm.isMDXComponent=!0;const um={toc:[]};function mm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},um,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A list of tasks to join."))}mm.isMDXComponent=!0;const dm={toc:[]};function hm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const taskA = yield generatorFunctionA();\nconst taskB = yield generatorFunctionB();\n\n// do something concurrently\n\n// await any of the tasks\nyield* join(false, taskA, taskB);\n")))}hm.isMDXComponent=!0;const km={toc:[]};function ym(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},km,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Pause the current generator until listed tasks are finished."))}ym.isMDXComponent=!0;const fm={toc:[]};function wm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether we should wait for all tasks or for at least one."))}wm.isMDXComponent=!0;const Mm={toc:[]};function Dm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A list of tasks to join."))}Dm.isMDXComponent=!0;const _m={toc:[]};function Xm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_m,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"From the perspective of the external generator, ",(0,c.kt)("inlineCode",{parentName:"p"},"threads")," is executed\nsynchronously. By default, each scene generator is wrapped in its own\n",(0,c.kt)("inlineCode",{parentName:"p"},"threads")," generator."))}Xm.isMDXComponent=!0;const gm={toc:[]};function xm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// first\n\nyield* threads(function* () {\n  const task = yield generatorFunction();\n  // second\n}); // <- `task` will be terminated here because the scope\n    //    of this `threads` generator has ended\n\n// third\n")))}xm.isMDXComponent=!0;const Cm={toc:[]};function Tm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a context in which generators can be run concurrently."))}Tm.isMDXComponent=!0;const Lm={toc:[]};function Zm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A function that returns the generator to run."))}Zm.isMDXComponent=!0;const vm={toc:[]};function bm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Called whenever threads are created, canceled or finished.\nUsed for debugging purposes."))}bm.isMDXComponent=!0;const Nm={toc:[]};function Em(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Transitions between scenes."))}Em.isMDXComponent=!0;const Am={toc:[]};function Rm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Am,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Perform a transition that slides the scene in a given direction."))}Rm.isMDXComponent=!0;const zm={toc:[]};function Sm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The direction in which to slide."))}Sm.isMDXComponent=!0;const Im={toc:[]};function Wm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Im,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The duration of the transition."))}Wm.isMDXComponent=!0;const Pm={toc:[]};function Gm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Transition to the current scene by altering the Context2D before scenes are rendered."))}Gm.isMDXComponent=!0;const Fm={toc:[]};function Um(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The callback to use before the current scene is rendered."))}Um.isMDXComponent=!0;const Vm={toc:[]};function jm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The callback to use before the previous scene is rendered."))}jm.isMDXComponent=!0;const qm={toc:[]};function Bm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Perform a transition that zooms in on a given area of the scene."))}Bm.isMDXComponent=!0;const Om={toc:[]};function $m(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Om,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The area on which to zoom in."))}$m.isMDXComponent=!0;const Hm={toc:[]};function Ym(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The duration of the transition."))}Ym.isMDXComponent=!0;const Km={toc:[]};function Jm(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Km,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Perform a transition that zooms out from a given area of the scene."))}Jm.isMDXComponent=!0;const Qm={toc:[]};function td(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qm,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The area from which to zoom out."))}td.isMDXComponent=!0;const nd={toc:[]};function ed(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The duration of the transition."))}ed.isMDXComponent=!0;const od={toc:[]};function pd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},od,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Interpolation and timing of tweens."))}pd.isMDXComponent=!0;const rd={toc:[]};function cd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Any old key that is missing in ",(0,c.kt)("inlineCode",{parentName:"p"},"to")," will be removed immediately once value is\nnot 0. Any new key that is missing in ",(0,c.kt)("inlineCode",{parentName:"p"},"from")," will be added once value reaches"),(0,c.kt)("ol",null,(0,c.kt)("li",{parentName:"ol"})))}cd.isMDXComponent=!0;const sd={toc:[]};function ad(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A value matching the structure of from and to."))}ad.isMDXComponent=!0;const id={toc:[]};function ld(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},id,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Interpolate between any two Records, including objects and Maps, even with\nmismatched keys."))}ld.isMDXComponent=!0;const ud={toc:[]};function md(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ud,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The input to favor when value is 0."))}md.isMDXComponent=!0;const dd={toc:[]};function hd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The input to favor when value is 1."))}hd.isMDXComponent=!0;const kd={toc:[]};function yd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"On a scale between 0 and 1, how closely to favor from vs to."))}yd.isMDXComponent=!0;const fd={toc:[]};function wd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A value matching the structure of from and to."))}wd.isMDXComponent=!0;const Md={toc:[]};function Dd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Md,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Interpolate between any two values, including objects, arrays, and Maps."))}Dd.isMDXComponent=!0;const _d={toc:[]};function Xd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_d,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The input to favor when value is 0."))}Xd.isMDXComponent=!0;const gd={toc:[]};function xd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The input to favor when value is 1."))}xd.isMDXComponent=!0;const Cd={toc:[]};function Td(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"On a scale between 0 and 1, how closely to favor from vs to."))}Td.isMDXComponent=!0;const Ld={toc:[]};function Zd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ld,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Complex types used in animations."))}Zd.isMDXComponent=!0;const vd={toc:[]};function bd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents a two-dimensional vector."))}bd.isMDXComponent=!0;const Nd={toc:[]};function Ed(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma.hcl(50, 40, 100)._rgb._unclipped === [322.65,235.24,196.7,1]\n")))}Ed.isMDXComponent=!0;const Ad={toc:[]};function Rd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ad,e,{components:n,mdxType:"M

10DXLayout"}),(0,c.kt)("p",null,"The unclipped RGB components."))}Rd.isMDXComponent=!0;const zd={toc:[]};function Sd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma.hcl(50, 40, 20).clipped() === true\n")))}Sd.isMDXComponent=!0;const Id={toc:[]};function Wd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Id,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Test if a color has been clipped or not.\nColors generated from CIELab color space may have their RGB\nchannels clipped to the range of ","[0..255]",".\nColors outside that range may exist in nature but are not\ndisplayable on RGB monitors (such as ultraviolet)."))}Wd.isMDXComponent=!0;const Pd={toc:[]};function Gd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').rgba() === [255,165,0,1]\nchroma('hsla(20, 100%, 40%, 0.5)').rgba() === [204,68,0,0.5]\n")))}Gd.isMDXComponent=!0;const Fd={toc:[]};function Ud(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Just like color.rgb but adds the alpha channel to the returned\narray."))}Ud.isMDXComponent=!0;const Vd={toc:[]};

10function jd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('33cc00').gl() === [0.2,0.8,0,1]\n")))}jd.isMDXComponent=!0;const qd={toc:[]};function Bd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns an array with the cyan, magenta, yellow, and key (black)\ncomponents, each as a normalized value between 0 and 1."))}Bd.isMDXComponent=!0;const Od={toc:[]};function $d(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Od,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('skyblue').hcl() === [235.11,25.94,79.21]\n")))}$d.isMDXComponent=!0;const Hd={toc:[]};function Yd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Alias of ",(0,c.kt)("a",{parentName:"p",href:"#color-lch"},"lch"),", but with the components in reverse\norder."))}Yd.isMDXComponent=!0;const Kd={toc:[]};function Jd(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').hsi() === [39.64,1,0.55]\nchroma('white').hsi() === [NaN,0,1]\n")))}Jd.isMDXComponent=!0;const Qd={toc:[]};function th(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qd,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns an array with the ",(0,c.kt)("inlineCode",{parentName:"p"},"hue"),", ",(0,c.kt)("inlineCode",{parentName:"p"},"saturation"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"intensity"),"\ncomponents, each as number between 0 and 255. Note that for hue-less\ncolors (black, white, and grays), the hue component will be NaN."))}th.isMDXComponent=!0;const nh={toc:[]};function eh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').hsl() === [38.82,1,0.5,1]\nchroma('white').hsl() === [NaN,0,1,1]\n")))}eh.isMDXComponent=!0;const oh={toc:[]};function ph(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},oh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns an array with the ",(0,c.kt)("inlineCode",{parentName:"p"},"hue"),", ",(0,c.kt)("inlineCode",{parentName:"p"},"saturation"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"lightness"),"\ncomponent. Hue is the color angle in degree (",(0,c.kt)("inlineCode",{parentName:"p"},"0..360"),"), saturation\nand lightness are within ",(0,c.kt)("inlineCode",{parentName:"p"},"0..1"),". Note that for hue-less colors\n(black, white, and grays), the hue component will be NaN."))}ph.isMDXComponent=!0;const rh={toc:[]};function ch(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').hsv() === [38.82,1,1]\nchroma('white').hsv() === [NaN,0,1]\n")))}ch.isMDXComponent=!0;const sh={toc:[]};function ah(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns an array with the ",(0,c.kt)("inlineCode",{parentName:"p"},"hue"),", ",(0,c.kt)("inlineCode",{parentName:"p"},"saturation"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"value"),"\ncomponents. Hue is the color angle in degree (",(0,c.kt)("inlineCode",{parentName:"p"},"0..360"),"),\nsaturation and value are within ",(0,c.kt)("inlineCode",{parentName:"p"},"0..1"),". Note that for hue-less\ncolors (black, white, and grays), the hue component will be NaN."))}ah.isMDXComponent=!0;const ih={toc:[]};function lh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ih,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').lab() === [74.94,23.93,78.95]\n")))}lh.isMDXComponent=!0;const uh={toc:[]};function mh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},uh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns an array with the ",(0,c.kt)("strong",{parentName:"p"},"L"),", ",(0,c.kt)("strong",{parentName:"p"},"a"),", and ",(0,c.kt)("strong",{parentName:"p"},"b")," components."))}mh.isMDXComponent=!0;const dh={toc:[]};function hh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('skyblue').lch() === [79.21,25.94,235.11]\n")))}hh.isMDXComponent=!0;const kh={toc:[]};function yh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns an array with the ",(0,c.kt)("strong",{parentName:"p"},"Lightness"),", ",(0,c.kt)("strong",{parentName:"p"},"chroma"),", and ",(0,c.kt)("strong",{parentName:"p"},"hue"),"\ncomponents."))}yh.isMDXComponent=!0;const fh={toc:[]};function wh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').rgb() === [255,165,0]\nchroma('orange').darken().rgb() === [198,118,0]\nchroma('orange').darken().rgb(false) === [198.05,118.11,0]\n")))}wh.isMDXComponent=!0;const Mh={toc:[]};function Dh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns an array with the red, green, and blue component, each as\nnumber within the range 0..255. Chroma internally stores RGB\nchannels as floats but rounds the numbers before returning them.\nYou can pass false to prevent the rounding."))}Dh.isMDXComponent=!0;const _h={toc:[]};function Xh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_h,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').rgba() === [255,165,0,1]\nchroma('hsla(20, 100%, 40%, 0.5)').rgba() === [204,68,0,0.5]\n")))}Xh.isMDXComponent=!0;const gh={toc:[]};function xh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Just like color.rgb but adds the alpha channel to the returned array."))}xh.isMDXComponent=!0;const Ch={toc:[]};function Th(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ch,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get and set the color opacity."))}Th.isMDXComponent=!0;const Lh={toc:[]};function Zh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns a RGB() or HSL() string representation that can be used as CSS-color definition.\nmode defaults to ",(0,c.kt)("code",null,"'rgb'")))}Zh.isMDXComponent=!0;const vh={toc:[]};function bh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Similar to saturate, but the opposite direction."))}bh.isMDXComponent=!0;const Nh={toc:[]};function Eh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"set"))}Eh.isMDXComponent=!0;const Ah={toc:[]};function Rh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ah,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns a single channel value.\nAlso"))}Rh.isMDXComponent=!0;const zh={toc:[]};function Sh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').hex() === '#ffa500'\nchroma('orange').alpha(0.5).hex() === '#ffa50080'\nchroma('orange').alpha(0.5).hex('rgb') === '#ffa500'\n")))}Sh.isMDXComponent=!0;const Ih={toc:[]};function Wh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ih,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get color as hexadecimal string."))}Wh.isMDXComponent=!0;const Ph={toc:[]};function Gh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ph,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,(0,c.kt)("inlineCode",{parentName:"p"},"auto")," - string will include alpha channel only if it's less than 1.\n",(0,c.kt)("inlineCode",{parentName:"p"},"rgb"),"  - string will not include alpha channel.\n",(0,c.kt)("inlineCode",{parentName:"p"},"rgba")," - string will include alpha channel."))}Gh.isMDXComponent=!0;const Fh={toc:[]};function Uh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Relative brightness, according to the\n","[WCAG][`http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef`]","(",(0,c.kt)("a",{parentName:"p",href:"http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef"},"http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef"),") definition. Normalized to\n0 for darkest black and 1 for lightest white."))}Uh.isMDXComponent=!0;const Vh={toc:[]};function jh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Set luminance of color. The source color will be interpolated

10with black or white until the correct luminance is found.\nThe color space used defaults to RGB."))}jh.isMDXComponent=!0;const qh={toc:[]};function Bh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns the named color. Falls back to hexadecimal RGB string, if the color isn't present."))}Bh.isMDXComponent=!0;const Oh={toc:[]};function $h(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Oh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('#000000').num() === 0\nchroma('#0000ff').num() === 255\nchroma('#00ff00').num() === 65280\nchroma('#ff0000').num() === 16711680\n")))}$h.isMDXComponent=!0;const Hh={toc:[]};function Yh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Returns the numeric representation of the hexadecimal RGB color."))}Yh.isMDXComponent=!0;const Kh={toc:[]};function Jh(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Changes the saturation of a color by manipulating the Lch chromacity."))}Jh.isMDXComponent=!0;const Qh={toc:[]};function tk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qh,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// half Lab lightness\nchroma('orangered').set('lab.l', '*0.5')\n")))}tk.isMDXComponent=!0;const nk={toc:[]};function ek(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// double Lch saturation\nchroma('darkseagreen').set('lch.c', '*2')\n")))}ek.isMDXComponent=!0;const ok={toc:[]};function pk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ok,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Changes a single channel and returns the result a new chroma object."))}pk.isMDXComponent=!0;const rk={toc:[]};function ck(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Estimate the temperature in Kelvin of any given color, though this makes the only sense for colors from the\n","[temperature gradient][`ChromaStatic.temperature`]","(undefined) above."))}ck.isMDXComponent=!0;const sk={toc:[]};function ak(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const bottomRight = originToOffset(Origin.TopRight);\n// bottomRight = {x: 1, y: -1}\n")))}ak.isMDXComponent=!0;const ik={toc:[]};function lk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ik,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Convert the given origin to a vector representing its offset."))}lk.isMDXComponent=!0;const uk={toc:[]};function mk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},uk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The origin to convert."))}mk.isMDXComponent=!0;const dk={toc:[]};function hk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"General utilities and helper functions."))}hk.isMDXComponent=!0;const kk={toc:[]};function yk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},kk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://v8.dev/docs/stack-trace-api#customizing-stack-traces"},"http://web.archive.org/web/20230216213729/https://v8.dev/docs/stack-trace-api#customizing-stack-traces")))}yk.isMDXComponent=!0;const fk={toc:[]};function wk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Optional override for formatting stack traces"))}wk.isMDXComponent=!0;const Mk={toc:[]};function Dk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Mk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create .stack property on a target object"))}Dk.isMDXComponent=!0;const _k={toc:[]};function Xk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_k,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is a shortcut for calling ",(0,c.kt)("inlineCode",{parentName:"p"},"useLogger().debug()")," which allows\nyou to more easily log non-string values as well."))}Xk.isMDXComponent=!0;const gk={toc:[]};function xk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"export default makeScene2D(function* (view) {\n  const circle = createRef<Circle>();\n\n  view.add(\n    <Circle ref={circle} width={320} height={320} fill={'lightseagreen'} />,\n  );\n\n  debug(circle().position());\n});\n")))}xk.isMDXComponent=!0;const Ck={toc:[]};function Tk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ck,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Logs a debug message with an arbitrary payload."))}Tk.isMDXComponent=!0;const Lk={toc:[]};function Zk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Lk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The payload to log"))}Zk.isMDXComponent=!0;const vk={toc:[]};function bk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Mark the given function as deprecated."))}bk.isMDXComponent=!0;const Nk={toc:[]};function Ek(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Nk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The function to deprecate."))}Ek.isMDXComponent=!0;const Ak={toc:[]};function Rk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ak,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The log message."))}Rk.isMDXComponent=!0;const zk={toc:[]};function Sk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The optional log remarks."))}Sk.isMDXComponent=!0;const Ik={toc:[]};function Wk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ik,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Usually used together with transitions. When a scene is marked as finished,\nthe transition will start but the scene generator will continue running."))}Wk.isMDXComponent=!0;const Pk={toc:[]};function Gk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Pk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Mark the current scene as ready to transition out."))}Gk.isMDXComponent=!0;const Fk={toc:[]};function Uk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const array = range(3); // [0, 1, 2]\n")))}Uk.isMDXComponent=!0;const Vk={toc:[]};function jk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an array containing a range of numbers."))}jk.isMDXComponent=!0;const qk={toc:[]};function Bk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The length of the array."))}Bk.isMDXComponent=!0;const Ok={toc:[]};function $k(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ok,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const array = range(3, 7); // [3, 4, 5, 6]\n")))}$k.isMDXComponent=!0;const Hk={toc:[]};function Yk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an array containing a range of numbers."))}Yk.isMDXComponent=!0;const Kk={toc:[]};function Jk(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Kk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The start of the range."))}Jk.isMDXComponent=!0;const Qk={toc:[]};function ty(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qk,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The end of the range. ",(0,c.kt)("inlineCode",{parentName:"p"},"to")," itself is not included in the result."))}ty.isMDXComponent=!0;const ny={toc:[]};function ey(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ny,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Provide a function to access the Context2D before the scene is rendered."))}ey.isMDXComponent=!0;const oy={toc:[]};function py(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},oy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The function that will be provided the context before render."))}py.isMDXComponent=!0;const ry={toc:[]};function cy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ry,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Provide a function to access the Context2D after the scene is rendered."))}cy.isMDXComponent=!0;const sy={toc:[]};function ay(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The function that will be provided the context after render."))}ay.isMDXComponent=!0;const iy={toc:[]};function ly(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},iy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This can be used to better specify when an animation should start\nas well as how long this animation should take"))}ly.isMDXComponent=!0;const uy={toc:[]};function my(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},uy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"export default makeScene2D(function* (view) {\n  const circle = createRef<Circle>();\n\n  view.add(\n    <Circle ref={circle} width={320} height={320} fill={'lightseagreen'} />,\n  );\n\n  yield* circle().scale(2, useDuration('circleGrow'));\n});\n")))}my.isMDXComponent=!0;const dy={toc:[]};function hy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},dy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The duration of the event in seconds."))}hy.isMDXComponent=!0;const ky={toc:[]};function yy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ky,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Register a time event and get its duration in seconds."))}yy.isMDXComponent=!0;const fy={toc:[]};function wy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},fy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The name of the event."))}wy.isMDXComponent=!0;const My={toc:[]};function Dy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},My,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a reference to the current project."))}

10Dy.isMDXComponent=!0;const _y={toc:[]};function Xy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},_y,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the random number generator for the current scene."))}Xy.isMDXComponent=!0;const gy={toc:[]};function xy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},gy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the random number generator for the given seed."))}xy.isMDXComponent=!0;const Cy={toc:[]};function Ty(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Cy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The seed for the generator."))}Ty.isMDXComponent=!0;const Ly={toc:[]};function Zy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ly,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether the seed should be fixed. Fixed seeds remain\nthe same even when the main scene seed changes."))}Zy.isMDXComponent=!0;const vy={toc:[]};function by(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},vy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a reference to the current scene."))}by.isMDXComponent=!0;const Ny={toc:[]};function Ey(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ny,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a reference to the current thread."))}Ey.isMDXComponent=!0;const Ay={toc:[]};function Ry(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ay,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned value accounts for offsets caused by functions such as\n",(0,c.kt)("a",{parentName:"p",href:"/api/core/flow#waitFor"},(0,c.kt)("inlineCode",{parentName:"a"},"waitFor")),"."))}Ry.isMDXComponent=!0;const zy={toc:[]};function Sy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},zy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield* waitFor(0.02);\n\n// current time: 0.016(6)s\n// real time: 0.02s\nconst realTime = useTime();\n")))}Sy.isMDXComponent=!0;const Iy={toc:[]};function Wy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Iy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the real time since the start of the animation."))}Wy.isMDXComponent=!0;const Py={toc:[]};function Gy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Py,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}Gy.isMDXComponent=!0;const Fy={toc:[]};function Uy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Fy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}Uy.isMDXComponent=!0;const Vy={toc:[]};function jy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Vy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}jy.isMDXComponent=!0;const qy={toc:[]};function By(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},qy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}By.isMDXComponent=!0;const Oy={toc:[]};function $y(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Oy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in

10world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}$y.isMDXComponent=!0;const Hy={toc:[]};function Yy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Hy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}Yy.isMDXComponent=!0;const Ky={toc:[]};function Jy(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ky,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}Jy.isMDXComponent=!0;const Qy={toc:[]};function tf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Qy,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}tf.isMDXComponent=!0;const nf={toc:[]};function ef(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},nf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}ef.isMDXComponent=!0;const of={toc:[]};function pf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},of,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}pf.isMDXComponent=!0;const rf={toc:[]};function cf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},rf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}cf.isMDXComponent=!0;const sf={toc:[]};function af(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},sf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}af.isMDXComponent=!0;const lf={toc:[]};function uf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}uf.isMDXComponent=!0;const mf={toc:[]};function df(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}df.isMDXComponent=!0;const hf={toc:[]};function kf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}kf.isMDXComponent=!0;const yf={toc:[]};function ff(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}ff.isMDXComponent=!0;const wf={toc:[]};function Mf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}Mf.isMDXComponent=!0;const Df={toc:[]};function _f(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Df,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}_f.isMDXComponent=!0;const Xf={toc:[]};function gf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}gf.isMDXComponent=!0;const xf={toc:[]};function Cf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}Cf.isMDXComponent=!0;const Tf={toc:[]};function Lf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}Lf.isMDXComponent=!0;const Zf={toc:[]};function vf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}vf.isMDXComponent=!0;const bf={toc:[]};function Nf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}Nf.isMDXComponent=!0;const Ef={toc:[]};function Af(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ef,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}Af.isMDXComponent=!0;const Rf={toc:[]};function zf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}zf.isMDXComponent=!0;const Sf={toc:[]};function If(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}If.isMDXComponent=!0;const Wf={toc:[]};function Pf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}Pf.isMDXComponent=!0;const Gf={toc:[]};function Ff(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}Ff.isMDXComponent=!0;const Uf={toc:[]};function Vf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Uf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}Vf.isMDXComponent=!0;const jf={toc:[]};function qf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}qf.isMDXComponent=!0;const Bf={toc:[]};function Of(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}Of.isMDXComponent=!0;const $f={toc:[]};function Hf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$f,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}Hf.isMDXComponent=!0;const Yf={toc:[]};function Kf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}Kf.isMDXComponent=!0;const Jf={toc:[]};function Qf(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jf,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}Qf.isMDXComponent=!0;const tw={toc:[]};function nw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}nw.isMDXComponent=!0;const ew={toc:[]};function ow(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ew,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}ow.isMDXComponent=!0;const pw={toc:[]};function rw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}rw.isMDXComponent=!0;const cw={toc:[]};function sw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}sw.isMDXComponent=!0;const aw={toc:[]};function iw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}iw.isMDXComponent=!0;const lw={toc:[]};function uw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}uw.isMDXComponent=!0;const mw={toc:[]};function dw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mw,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}dw.isMDXComponent=!0;const hw={toc:[]};function kw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}kw.isMDXComponent=!0;const yw={toc:[]};function fw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}fw.isMDXComponent=!0;const ww={toc:[]};function Mw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ww,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}Mw.isMDXComponent=!0;const Dw={toc:[]};function _w(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}_w.isMDXComponent=!0;const Xw={toc:[]};function gw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}gw.isMDXComponent=!0;const xw={toc:[]};function Cw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}Cw.isMDXComponent=!0;const Tw={toc:[]};function Lw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}Lw.isMDXComponent=!0;const Zw={toc:[]};function vw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}vw.isMDXComponent=!0;const bw={toc:[]};function Nw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}Nw.isMDXComponent=!0;const Ew={toc:[]};function Aw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ew,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Aw.isMDXComponent=!0;const Rw={toc:[]};function zw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}zw.isMDXComponent=!0;const Sw={toc:[]};function Iw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}Iw.isMDXComponent=!0;const Ww={toc:[]};function Pw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ww,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}Pw.isMDXComponent=!0;const Gw={toc:[]};function Fw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}Fw.isMDXComponent=!0;const Uw={toc:[]};function Vw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Uw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}Vw.isMDXComponent=!0;const jw={toc:[]};function qw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}qw.isMDXComponent=!0;const Bw={toc:[]};function Ow(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}Ow.isMDXComponent=!0;const $w={toc:[]};function Hw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$w,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}Hw.isMDXComponent=!0;const Yw={toc:[]};function Kw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}Kw.isMDXComponent=!0;const Jw={toc:[]};function Qw(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jw,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}Qw.isMDXComponent=!0;const tM={toc:[]};function nM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}nM.isMDXComponent=!0;const eM={toc:[]};function oM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}oM.isMDXComponent=!0;const pM={toc:[]};function rM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}rM.isMDXComponent=!0;const cM={toc:[]};function sM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}sM.isMDXComponent=!0;const aM={toc:[]};function iM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}iM.isMDXComponent=!0;const lM={toc:[]};function uM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}uM.isMDXComponent=!0;const mM={toc:[]};function dM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}dM.isMDXComponent=!0;const hM={toc:[]};function kM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}kM.isMDXComponent=!0;const yM={toc:[]};function fM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}fM.isMDXComponent=!0;const wM={toc:[]};function MM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}MM.isMDXComponent=!0;const DM={toc:[]};function _M(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}_M.isMDXComponent=!0;const XM={toc:[]};function gM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}gM.isMDXComponent=!0;const xM={toc:[]};function CM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}CM.isMDXComponent=!0;const TM={toc:[]};function LM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}LM.isMDXComponent=!0;const ZM={toc:[]};function vM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}vM.isMDXComponent=!0;const bM={toc:[]};function NM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}NM.isMDXComponent=!0;const EM={toc:[]};function AM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}AM.isMDXComponent=!0;const RM={toc:[]};function zM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}zM.isMDXComponent=!0;const SM={toc:[]};function IM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}IM.isMDXComponent=!0;const WM={toc:[]};function PM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}PM.isMDXComponent=!0;const GM={toc:[]};function FM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}FM.isMDXComponent=!0;const UM={toc:[]};function VM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}VM.isMDXComponent=!0;const jM={toc:[]};function qM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}qM.isMDXComponent=!0;const BM={toc:[]};function OM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}OM.isMDXComponent=!0;const $M={toc:[]};function HM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$M,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}HM.isMDXComponent=!0;const YM={toc:[]};function KM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}KM.isMDXComponent=!0;const JM={toc:[]};function QM(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JM,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}QM.isMDXComponent=!0;const tD={toc:[]};function nD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}nD.isMDXComponent=!0;const eD={toc:[]};function oD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}oD.isMDXComponent=!0;const pD={toc:[]};function rD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}rD.isMDXComponent=!0;const cD={toc:[]};function sD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}sD.isMDXComponent=!0;const aD={toc:[]};function iD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}iD.isMDXComponent=!0;const lD={toc:[]};function uD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}uD.isMDXComponent=!0;const mD={toc:[]};function dD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}dD.isMDXComponent=!0;const hD={toc:[]};function kD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}kD.isMDXComponent=!0;const yD={toc:[]};function fD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}fD.isMDXComponent=!0;const wD={toc:[]};function MD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}MD.isMDXComponent=!0;const DD={toc:[]};function _D(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}_D.isMDXComponent=!0;const XD={toc:[]};function gD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}gD.isMDXComponent=!0;const xD={toc:[]};function CD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}CD.isMDXComponent=!0;const TD={toc:[]};function LD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}LD.isMDXComponent=!0;const ZD={toc:[]};function vD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}vD.isMDXComponent=!0;const bD={toc:[]};function ND(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}ND.isMDXComponent=!0;const ED={toc:[]};function AD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ED,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}AD.isMDXComponent=!0;const RD={toc:[]};function zD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}zD.isMDXComponent=!0;const SD={toc:[]};function ID(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}ID.isMDXComponent=!0;const WD={toc:[]};function PD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}PD.isMDXComponent=!0;const GD={toc:[]};function FD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}FD.isMDXComponent=!0;

10const UD={toc:[]};function VD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}VD.isMDXComponent=!0;const jD={toc:[]};function qD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}qD.isMDXComponent=!0;const BD={toc:[]};function OD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}OD.isMDXComponent=!0;const $D={toc:[]};function HD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$D,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3ecircle;"}))}HD.isMDXComponent=!0;const YD={toc:[]};function KD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}KD.isMDXComponent=!0;const JD={toc:[]};function QD(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JD,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}QD.isMDXComponent=!0;const t_={toc:[]};function n_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}n_.isMDXComponent=!0;const e_={toc:[]};function o_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}o_.isMDXComponent=!0;const p_={toc:[]};function r_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}r_.isMDXComponent=!0;const c_={toc:[]};function s_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}s_.isMDXComponent=!0;const a_={toc:[]};function i_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}i_.isMDXComponent=!0;const l_={toc:[]};function u_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}u_.isMDXComponent=!0;const m_={toc:[]};function d_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}d_.isMDXComponent=!0;const h_={toc:[]};function k_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}k_.isMDXComponent=!0;const y_={toc:[]};function f_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}f_.isMDXComponent=!0;const w_={toc:[]};function M_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}M_.isMDXComponent=!0;const D_={toc:[]};function __(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}__.isMDXComponent=!0;const X_={toc:[]};function g_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}g_.isMDXComponent=!0;const x_={toc:[]};function C_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}C_.isMDXComponent=!0;const T_={toc:[]};function L_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}L_.isMDXComponent=!0;const Z_={toc:[]};function v_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}v_.isMDXComponent=!0;const b_={toc:[]};function N_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}N_.isMDXComponent=!0;const E_={toc:[]};function A_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}A_.isMDXComponent=!0;const R_={toc:[]};function z_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}z_.isMDXComponent=!0;const S_={toc:[]};function I_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}I_.isMDXComponent=!0;const W_={toc:[]};function P_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}P_.isMDXComponent=!0;const G_={toc:[]};function F_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G_,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}F_.isMDXComponent=!0;const U_={toc:[]};function V_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}V_.isMDXComponent=!0;const j_={toc:[]};function q_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}q_.isMDXComponent=!0;const B_={toc:[]};function O_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}O_.isMDXComponent=!0;const $_={toc:[]};function H_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}H_.isMDXComponent=!0;const Y_={toc:[]};function K_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}K_.isMDXComponent=!0;const J_={toc:[]};function Q_(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J_,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}Q_.isMDXComponent=!0;const tX={toc:[]};function nX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}nX.isMDXComponent=!0;const eX={toc:[]};function oX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}oX.isMDXComponent=!0;const pX={toc:[]};function rX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}rX.isMDXComponent=!0;const cX={toc:[]};function sX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}sX.isMDXComponent=!0;const aX={toc:[]};function iX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}iX.isMDXComponent=!0;const lX={toc:[]};function uX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}uX.isMDXComponent=!0;const mX={toc:[]};function dX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}dX.isMDXComponent=!0;const hX={toc:[]};function kX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}kX.isMDXComponent=!0;const yX={toc:[]};function fX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}fX.isMDXComponent=!0;const wX={toc:[]};function MX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}MX.isMDXComponent=!0;const DX={toc:[]};function _X(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}_X.isMDXComponent=!0;const XX={toc:[]};function gX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XX,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}gX.isMDXComponent=!0;const xX={toc:[]};function CX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}CX.isMDXComponent=!0;const TX={toc:[]};function LX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}LX.isMDXComponent=!0;const ZX={toc:[]};function vX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}vX.isMDXComponent=!0;const bX={toc:[]};function NX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}NX.isMDXComponent=!0;const EX={toc:[]};function AX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}AX.isMDXComponent=!0;const RX={toc:[]};function zX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}zX.isMDXComponent=!0;const SX={toc:[]};function IX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}IX.isMDXComponent=!0;const WX={toc:[]};function PX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}PX.isMDXComponent=!0;const GX={toc:[]};function FX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}FX.isMDXComponent=!0;const UX={toc:[]};function VX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}VX.isMDXComponent=!0;const jX={toc:[]};function qX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}qX.isMDXComponent=!0;const BX={toc:[]};function OX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}OX.isMDXComponent=!0;const $X={toc:[]};function HX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$X,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}HX.isMDXComponent=!0;const YX={toc:[]};function KX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}KX.isMDXComponent=!0;const JX={toc:[]};function QX(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JX,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}QX.isMDXComponent=!0;const tg={toc:[]};function ng(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}ng.isMDXComponent=!0;const eg={toc:[]};function og(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}og.isMDXComponent=!0;const pg={toc:[]};function rg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}rg.isMDXComponent=!0;const cg={toc:[]};function sg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}sg.isMDXComponent=!0;const ag={toc:[]};function ig(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ag,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}ig.isMDXComponent=!0;const lg={toc:[]};function ug(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}ug.isMDXComponent=!0;const mg={toc:[]};function dg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}dg.isMDXComponent=!0;const hg={toc:[]};function kg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}kg.isMDXComponent=!0;const yg={toc:[]};function fg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}fg.isMDXComponent=!0;const wg={toc:[]};function Mg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}Mg.isMDXComponent=!0;const Dg={toc:[]};function _g(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}_g.isMDXComponent=!0;const Xg={toc:[]};function gg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}gg.isMDXComponent=!0;const xg={toc:[]};function Cg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}Cg.isMDXComponent=!0;const Tg={toc:[]};function Lg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}Lg.isMDXComponent=!0;const Zg={toc:[]};function vg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}vg.isMDXComponent=!0;const bg={toc:[]};function Ng(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}Ng.isMDXComponent=!0;const Eg={toc:[]};function Ag(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Eg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Ag.isMDXComponent=!0;const Rg={toc:[]};function zg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}zg.isMDXComponent=!0;const Sg={toc:[]};function Ig(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}Ig.isMDXComponent=!0;const Wg={toc:[]};function Pg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}Pg.isMDXComponent=!0;const Gg={toc:[]};function Fg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}Fg.isMDXComponent=!0;const Ug={toc:[]};function Vg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ug,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Image#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}Vg.isMDXComponent=!0;const jg={toc:[]};function qg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}qg.isMDXComponent=!0;const Bg={toc:[]};function Og(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}Og.isMDXComponent=!0;const $g={toc:[]};function Hg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$g,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Hg.isMDXComponent=!0;const Yg={toc:[]};function Kg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Image#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}Kg.isMDXComponent=!0;const Jg={toc:[]};function Qg(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jg,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}Qg.isMDXComponent=!0;const tx={toc:[]};function nx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}nx.isMDXComponent=!0;const ex={toc:[]};function ox(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ex,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}ox.isMDXComponent=!0;const px={toc:[]};function rx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},px,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}rx.isMDXComponent=!0;const cx={toc:[]};function sx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}sx.isMDXComponent=!0;const ax={toc:[]};function ix(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ax,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}ix.isMDXComponent=!0;const lx={toc:[]};function ux(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}ux.isMDXComponent=!0;const mx={toc:[]};function dx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}dx.isMDXComponent=!0;const hx={toc:[]};function kx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}kx.isMDXComponent=!0;const yx={toc:[]};function fx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}fx.isMDXComponent=!0;const wx={toc:[]};function Mx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}Mx.isMDXComponent=!0;const Dx={toc:[]};function _x(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}_x.isMDXComponent=!0;const Xx={toc:[]};function gx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}gx.isMDXComponent=!0;const xx={toc:[]};function Cx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}Cx.isMDXComponent=!0;const Tx={toc:[]};function Lx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}Lx.isMDXComponent=!0;const Zx={toc:[]};function vx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}vx.isMDXComponent=!0;const bx={toc:[]};function Nx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Nx.isMDXComponent=!0;const Ex={toc:[]};function Ax(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ex,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}Ax.isMDXComponent=!0;const Rx={toc:[]};function zx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}zx.isMDXComponent=!0;const Sx={toc:[]};function Ix(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}Ix.isMDXComponent=!0;const Wx={toc:[]};function Px(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}Px.isMDXComponent=!0;const Gx={toc:[]};function Fx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}Fx.isMDXComponent=!0;const Ux={toc:[]};function Vx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ux,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}Vx.isMDXComponent=!0;const jx={toc:[]};function qx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}qx.isMDXComponent=!0;const Bx={toc:[]};function Ox(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}Ox.isMDXComponent=!0;const $x={toc:[]};function Hx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$x,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}Hx.isMDXComponent=!0;const Yx={toc:[]};function Kx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}Kx.isMDXComponent=!0;const Jx={toc:[]};function Qx(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jx,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}Qx.isMDXComponent=!0;const tC={toc:[]};function nC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}nC.isMDXComponent=!0;const eC={toc:[]};function oC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}oC.isMDXComponent=!0;const pC={toc:[]};function rC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}rC.isMDXComponent=!0;const cC={toc:[]};function sC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}sC.isMDXComponent=!0;const aC={toc:[]};function iC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}iC.isMDXComponent=!0;const lC={toc:[]};function uC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}uC.isMDXComponent=!0;const mC={toc:[]};function dC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}dC.isMDXComponent=!0;const hC={toc:[]};function kC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get color of the image at the given position."))}kC.isMDXComponent=!0;const yC={toc:[]};function fC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The position in local space at which to sample the color."))}fC.isMDXComponent=!0;const wC={toc:[]};function MC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get color of the image at the given pixel."))}MC.isMDXComponent=!0;const DC={toc:[]};function _C(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The pixel's position."))}_C.isMDXComponent=!0;const XC={toc:[]};function gC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XC,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}gC.isMDXComponent=!0;const xC={toc:[]};function CC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}CC.isMDXComponent=!0;const TC={toc:[]};function LC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}LC.isMDXComponent=!0;const ZC={toc:[]};function vC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}vC.isMDXComponent=!0;const bC={toc:[]};function NC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}NC.isMDXComponent=!0;const EC={toc:[]};function AC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}AC.isMDXComponent=!0;const RC={toc:[]};function zC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}zC.isMDXComponent=!0;const SC={toc:[]};function IC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}IC.isMDXComponent=!0;const WC={toc:[]};function PC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Image#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}PC.isMDXComponent=!0;const GC={toc:[]};function FC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}FC.isMDXComponent=!0;const UC={toc:[]};function VC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}VC.isMDXComponent=!0;const jC={toc:[]};function qC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}qC.isMDXComponent=!0;const BC={toc:[]};function OC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}OC.isMDXComponent=!0;const $C={toc:[]};function HC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$C,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}HC.isMDXComponent=!0;const YC={toc:[]};function KC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}KC.isMDXComponent=!0;const JC={toc:[]};function QC(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JC,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}QC.isMDXComponent=!0;const tT={toc:[]};function nT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}nT.isMDXComponent=!0;const eT={toc:[]};function oT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}oT.isMDXComponent=!0;const pT={toc:[]};function rT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pT,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}rT.isMDXComponent=!0;const cT={toc:[]};function sT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}sT.isMDXComponent=!0;const aT={toc:[]};function iT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}iT.isMDXComponent=!0;const lT={toc:[]};function uT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}uT.isMDXComponent=!0;const mT={toc:[]};function dT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}dT.isMDXComponent=!0;const hT={toc:[]};function kT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}kT.isMDXComponent=!0;const yT={toc:[]};function fT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}fT.isMDXComponent=!0;const wT={toc:[]};function MT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}MT.isMDXComponent=!0;const DT={toc:[]};function _T(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}_T.isMDXComponent=!0;const XT={toc:[]};function gT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}gT.isMDXComponent=!0;const xT={toc:[]};function CT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}CT.isMDXComponent=!0;const TT={toc:[]};function LT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}LT.isMDXComponent=!0;const ZT={toc:[]};function vT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}vT.isMDXComponent=!0;const bT={toc:[]};function NT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}NT.isMDXComponent=!0;const ET={toc:[]};function AT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ET,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}AT.isMDXComponent=!0;const RT={toc:[]};function zT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}zT.isMDXComponent=!0;const ST={toc:[]};function IT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ST,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}IT.isMDXComponent=!0;const WT={toc:[]};function PT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}PT.isMDXComponent=!0;const GT={toc:[]};function FT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}FT.isMDXComponent=!0;const UT={toc:[]};function VT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}VT.isMDXComponent=!0;const jT={toc:[]};function qT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}qT.isMDXComponent=!0;const BT={toc:[]};function OT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}OT.isMDXComponent=!0;const $T={toc:[]};function HT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$T,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}HT.isMDXComponent=!0;const YT={toc:[]};function KT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Image#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}KT.isMDXComponent=!0;const JT={toc:[]};function QT(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JT,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}QT.isMDXComponent=!0;const tL={toc:[]};function nL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}nL.isMDXComponent=!0;const eL={toc:[]};function oL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Image#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}oL.isMDXComponent=!0;const pL={toc:[]};function rL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}rL.isMDXComponent=!0;const cL={toc:[]};function sL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}sL.isMDXComponent=!0;const aL={toc:[]};function iL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}iL.isMDXComponent=!0;const lL={toc:[]};function uL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}uL.isMDXComponent=!0;const mL={toc:[]};function dL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}dL.isMDXComponent=!0;const hL={toc:[]};function kL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}kL.isMDXComponent=!0;const yL={toc:[]};function fL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}fL.isMDXComponent=!0;const wL={toc:[]};function ML(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}ML.isMDXComponent=!0;const DL={toc:[]};function _L(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}_L.isMDXComponent=!0;const XL={toc:[]};function gL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}gL.isMDXComponent=!0;const xL={toc:[]};function CL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}CL.isMDXComponent=!0;const TL={toc:[]};function LL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}LL.isMDXComponent=!0;const ZL={toc:[]};function vL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}vL.isMDXComponent=!0;const bL={toc:[]};function NL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}NL.isMDXComponent=!0;const EL={toc:[]};function AL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}AL.isMDXComponent=!0;const RL={toc:[]};function zL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}zL.isMDXComponent=!0;const SL={toc:[]};function IL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}IL.isMDXComponent=!0;const WL={toc:[]};function PL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}PL.isMDXComponent=!0;const GL={toc:[]};function FL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}FL.isMDXComponent=!0;const UL={toc:[]};function VL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}VL.isMDXComponent=!0;const jL={toc:[]};function qL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}qL.isMDXComponent=!0;const BL={toc:[]};function OL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}OL.isMDXComponent=!0;const $L={toc:[]};function HL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$L,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}HL.isMDXComponent=!0;const YL={toc:[]};function KL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}KL.isMDXComponent=!0;const JL={toc:[]};function QL(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JL,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}QL.isMDXComponent=!0;const tZ={toc:[]};function nZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}nZ.isMDXComponent=!0;const eZ={toc:[]};function oZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}oZ.isMDXComponent=!0;const pZ={toc:[]};function rZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}rZ.isMDXComponent=!0;const cZ={toc:[]};function sZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}sZ.isMDXComponent=!0;const aZ={toc:[]};function iZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}iZ.isMDXComponent=!0;const lZ={toc:[]};function uZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}uZ.isMDXComponent=!0;const mZ={toc:[]};function dZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}dZ.isMDXComponent=!0;const hZ={toc:[]};function kZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}kZ.isMDXComponent=!0;const yZ={toc:[]};function fZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}fZ.isMDXComponent=!0;const wZ={toc:[]};function MZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}MZ.isMDXComponent=!0;const DZ={toc:[]};function _Z(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}_Z.isMDXComponent=!0;const XZ={toc:[]};function gZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}gZ.isMDXComponent=!0;const xZ={toc:[]};function CZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}CZ.isMDXComponent=!0;const TZ={toc:[]};function LZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}LZ.isMDXComponent=!0;const ZZ={toc:[]};function vZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}vZ.isMDXComponent=!0;const bZ={toc:[]};function NZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}NZ.isMDXComponent=!0;const EZ={toc:[]};function AZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}AZ.isMDXComponent=!0;const RZ={toc:[]};function zZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}zZ.isMDXComponent=!0;const SZ={toc:[]};function IZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}IZ.isMDXComponent=!0;const WZ={toc:[]};function PZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}PZ.isMDXComponent=!0;const GZ={toc:[]};function FZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}FZ.isMDXComponent=!0;const UZ={toc:[]};function VZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}VZ.isMDXComponent=!0;const jZ={toc:[]};function qZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}qZ.isMDXComponent=!0;const BZ={toc:[]};function OZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}OZ.isMDXComponent=!0;const $Z={toc:[]};function HZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$Z,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}HZ.isMDXComponent=!0;const YZ={toc:[]};function KZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get color of the image at the given position."))}KZ.isMDXComponent=!0;const JZ={toc:[]};function QZ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JZ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The position in local space at which to sample the color."))}QZ.isMDXComponent=!0;const tv={toc:[]};function nv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get color of the image at the given pixel."))}nv.isMDXComponent=!0;const ev={toc:[]};function ov(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ev,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The pixel's position."))}ov.isMDXComponent=!0;const pv={toc:[]};function rv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pv,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}rv.isMDXComponent=!0;const cv={toc:[]};function sv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}sv.isMDXComponent=!0;const av={toc:[]};function iv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},av,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}iv.isMDXComponent=!0;const lv={toc:[]};function uv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}uv.isMDXComponent=!0;const mv={toc:[]};function dv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}dv.isMDXComponent=!0;const hv={toc:[]};function kv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}kv.isMDXComponent=!0;const yv={toc:[]};function fv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}fv.isMDXComponent=!0;const wv={toc:[]};function Mv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}Mv.isMDXComponent=!0;const Dv={toc:[]};function _v(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}_v.isMDXComponent=!0;const Xv={toc:[]};function gv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}gv.isMDXComponent=!0;const xv={toc:[]};function Cv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Cv.isMDXComponent=!0;const Tv={toc:[]};function Lv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}Lv.isMDXComponent=!0;const Zv={toc:[]};function vv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}vv.isMDXComponent=!0;const bv={toc:[]};function Nv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}Nv.isMDXComponent=!0;const Ev={toc:[]};function Av(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ev,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}Av.isMDXComponent=!0;const Rv={toc:[]};function zv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}zv.isMDXComponent=!0;const Sv={toc:[]};function Iv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}Iv.isMDXComponent=!0;const Wv={toc:[]};function Pv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}Pv.isMDXComponent=!0;const Gv={toc:[]};function Fv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gv,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}Fv.isMDXComponent=!0;const Uv={toc:[]};function Vv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Uv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}Vv.isMDXComponent=!0;const jv={toc:[]};function qv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}qv.isMDXComponent=!0;const Bv={toc:[]};function Ov(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}Ov.isMDXComponent=!0;const $v={toc:[]};function Hv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$v,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}Hv.isMDXComponent=!0;const Yv={toc:[]};function Kv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}Kv.isMDXComponent=!0;const Jv={toc:[]};function Qv(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jv,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}Qv.isMDXComponent=!0;const tb={toc:[]};function nb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}nb.isMDXComponent=!0;const eb={toc:[]};function ob(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}ob.isMDXComponent=!0;const pb={toc:[]};function rb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}rb.isMDXComponent=!0;const cb={toc:[]};function sb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}sb.isMDXComponent=!0;const ab={toc:[]};function ib(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ab,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}ib.isMDXComponent=!0;const lb={toc:[]};function ub(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}ub.isMDXComponent=!0;const mb={toc:[]};function db(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}db.isMDXComponent=!0;const hb={toc:[]};function kb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}kb.isMDXComponent=!0;const yb={toc:[]};function fb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}fb.isMDXComponent=!0;const wb={toc:[]};function Mb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}Mb.isMDXComponent=!0;const Db={toc:[]};function _b(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Db,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}_b.isMDXComponent=!0;const Xb={toc:[]};function gb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}gb.isMDXComponent=!0;const xb={toc:[]};function Cb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}Cb.isMDXComponent=!0;const Tb={toc:[]};

10function Lb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Lb.isMDXComponent=!0;const Zb={toc:[]};function vb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}vb.isMDXComponent=!0;const bb={toc:[]};function Nb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}Nb.isMDXComponent=!0;const Eb={toc:[]};function Ab(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Eb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It can be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}Ab.isMDXComponent=!0;const Rb={toc:[]};function zb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}zb.isMDXComponent=!0;const Sb={toc:[]};function Ib(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}Ib.isMDXComponent=!0;const Wb={toc:[]};function Pb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}Pb.isMDXComponent=!0;const Gb={toc:[]};function Fb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}Fb.isMDXComponent=!0;const Ub={toc:[]};function Vb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ub,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}Vb.isMDXComponent=!0;const jb={toc:[]};function qb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}qb.isMDXComponent=!0;const Bb={toc:[]};function Ob(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}Ob.isMDXComponent=!0;const $b={toc:[]};function Hb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$b,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}Hb.isMDXComponent=!0;const Yb={toc:[]};function Kb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Kb.isMDXComponent=!0;const Jb={toc:[]};function Qb(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jb,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}Qb.isMDXComponent=!0;const tN={toc:[]};function nN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}nN.isMDXComponent=!0;const eN={toc:[]};function oN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'

10s parent."))}oN.isMDXComponent=!0;const pN={toc:[]};function rN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}rN.isMDXComponent=!0;const cN={toc:[]};function sN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}sN.isMDXComponent=!0;const aN={toc:[]};function iN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}iN.isMDXComponent=!0;const lN={toc:[]};function uN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}uN.isMDXComponent=!0;const mN={toc:[]};function dN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}dN.isMDXComponent=!0;const hN={toc:[]};function kN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}kN.isMDXComponent=!0;const yN={toc:[]};function fN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}fN.isMDXComponent=!0;const wN={toc:[]};function MN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}MN.isMDXComponent=!0;const DN={toc:[]};function _N(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}_N.isMDXComponent=!0;const XN={toc:[]};function gN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}gN.isMDXComponent=!0;const xN={toc:[]};function CN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}CN.isMDXComponent=!0;const TN={toc:[]};function LN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}LN.isMDXComponent=!0;const ZN={toc:[]};function vN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}vN.isMDXComponent=!0;const bN={toc:[]};function NN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}NN.isMDXComponent=!0;const EN={toc:[]};function AN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}AN.isMDXComponent=!0;const RN={toc:[]};function zN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}zN.isMDXComponent=!0;const SN={toc:[]};function IN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}IN.isMDXComponent=!0;const WN={toc:[]};function PN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}PN.isMDXComponent=!0;const GN={toc:[]};function FN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}FN.isMDXComponent=!0;const UN={toc:[]};function VN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}VN.isMDXComponent=!0;const jN={toc:[]};function qN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}qN.isMDXComponent=!0;const BN={toc:[]};function ON(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}ON.isMDXComponent=!0;const $N={toc:[]};function HN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$N,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}HN.isMDXComponent=!0;const YN={toc:[]};function KN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}KN.isMDXComponent=!0;const JN={toc:[]};function QN(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JN,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}QN.isMDXComponent=!0;const tE={toc:[]};function nE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}nE.isMDXComponent=!0;const eE={toc:[]};function oE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}oE.isMDXComponent=!0;const pE={toc:[]};function rE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}rE.isMDXComponent=!0;const cE={toc:[]};function sE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}sE.isMDXComponent=!0;const aE={toc:[]};function iE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}iE.isMDXComponent=!0;const lE={toc:[]};function uE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}uE.isMDXComponent=!0;const mE={toc:[]};function dE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}dE.isMDXComponent=!0;const hE={toc:[]};function kE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}kE.isMDXComponent=!0;const yE={toc:[]};function fE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}fE.isMDXComponent=!0;const wE={toc:[]};function ME(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}ME.isMDXComponent=!0;const DE={toc:[]};function _E(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}_E.isMDXComponent=!0;const XE={toc:[]};function gE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}gE.isMDXComponent=!0;const xE={toc:[]};function CE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}CE.isMDXComponent=!0;const TE={toc:[]};function LE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}LE.isMDXComponent=!0;const ZE={toc:[]};function vE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}vE.isMDXComponent=!0;const bE={toc:[]};function NE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}NE.isMDXComponent=!0;const EE={toc:[]};function AE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EE,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}AE.isMDXComponent=!0;const RE={toc:[]};function zE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}zE.isMDXComponent=!0;const SE={toc:[]};function IE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}IE.isMDXComponent=!0;const WE={toc:[]};function PE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}PE.isMDXComponent=!0;const GE={toc:[]};function FE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}FE.isMDXComponent=!0;const UE={toc:[]};function VE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}VE.isMDXComponent=!0;const jE={toc:[]};function qE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}qE.isMDXComponent=!0;const BE={toc:[]};function OE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}OE.isMDXComponent=!0;const $E={toc:[]};function HE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$E,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}HE.isMDXComponent=!0;const YE={toc:[]};function KE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}KE.isMDXComponent=!0;const JE={toc:[]};function QE(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JE,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}QE.isMDXComponent=!0;const tA={toc:[]};function nA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}nA.isMDXComponent=!0;const eA={toc:[]};function oA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}oA.isMDXComponent=!0;const pA={toc:[]};function rA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}rA.isMDXComponent=!0;const cA={toc:[]};function sA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}sA.isMDXComponent=!0;const aA={toc:[]};function iA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}iA.isMDXComponent=!0;const lA={toc:[]};function uA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}uA.isMDXComponent=!0;const mA={toc:[]};function dA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}dA.isMDXComponent=!0;const hA={toc:[]};function kA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hA,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}kA.isMDXComponent=!0;const yA={toc:[]};function fA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}fA.isMDXComponent=!0;const wA={toc:[]};function MA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}MA.isMDXComponent=!0;const DA={toc:[]};function _A(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}_A.isMDXComponent=!0;const XA={toc:[]};function gA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}gA.isMDXComponent=!0;const xA={toc:[]};function CA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}CA.isMDXComponent=!0;const TA={toc:[]};function LA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}LA.isMDXComponent=!0;const ZA={toc:[]};function vA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}vA.isMDXComponent=!0;const bA={toc:[]};function NA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}NA.isMDXComponent=!0;const EA={toc:[]};function AA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}AA.isMDXComponent=!0;const RA={toc:[]};function zA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}zA.isMDXComponent=!0;const SA={toc:[]};function IA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}IA.isMDXComponent=!0;const WA={toc:[]};function PA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}PA.isMDXComponent=!0;const GA={toc:[]};function FA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}FA.isMDXComponent=!0;const UA={toc:[]};function VA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}VA.isMDXComponent=!0;const jA={toc:[]};function qA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}qA.isMDXComponent=!0;const BA={toc:[]};function OA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}OA.isMDXComponent=!0;const $A={toc:[]};function HA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$A,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}HA.isMDXComponent=!0;const YA={toc:[]};function KA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}KA.isMDXComponent=!0;const JA={toc:[]};function QA(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JA,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}QA.isMDXComponent=!0;const tR={toc:[]};function nR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}nR.isMDXComponent=!0;const eR={toc:[]};function oR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}oR.isMDXComponent=!0;const pR={toc:[]};function rR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}rR.isMDXComponent=!0;const cR={toc:[]};function sR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}sR.isMDXComponent=!0;const aR={toc:[]};function iR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}iR.isMDXComponent=!0;const lR={toc:[]};function uR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}uR.isMDXComponent=!0;const mR={toc:[]};function dR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}dR.isMDXComponent=!0;const hR={toc:[]};function kR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}kR.isMDXComponent=!0;const yR={toc:[]};function fR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}fR.isMDXComponent=!0;const wR={toc:[]};function MR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}MR.isMDXComponent=!0;const DR={toc:[]};function _R(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}_R.isMDXComponent=!0;const XR={toc:[]};function gR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}gR.isMDXComponent=!0;const xR={toc:[]};function CR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}CR.isMDXComponent=!0;const TR={toc:[]};function LR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}LR.isMDXComponent=!0;const ZR={toc:[]};function vR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}vR.isMDXComponent=!0;const bR={toc:[]};function NR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}NR.isMDXComponent=!0;const ER={toc:[]};function AR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ER,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}AR.isMDXComponent=!0;const RR={toc:[]};function zR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Line#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}zR.isMDXComponent=!0;const SR={toc:[]};function IR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}IR.isMDXComponent=!0;const WR={toc:[]};function PR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}PR.isMDXComponent=!0;const GR={toc:[]};function FR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}FR.isMDXComponent=!0;const UR={toc:[]};function VR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Line#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}VR.isMDXComponent=!0;const jR={toc:[]};function qR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}qR.isMDXComponent=!0;const BR={toc:[]};function OR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}OR.isMDXComponent=!0;const $R={toc:[]};function HR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$R,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}HR.isMDXComponent=!0;const YR={toc:[]};function KR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}KR.isMDXComponent=!0;const JR={toc:[]};function QR(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JR,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}QR.isMDXComponent=!0;const tz={toc:[]};function nz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}nz.isMDXComponent=!0;const ez={toc:[]};function oz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ez,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}oz.isMDXComponent=!0;const pz={toc:[]};function rz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}rz.isMDXComponent=!0;const cz={toc:[]};function sz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}sz.isMDXComponent=!0;const az={toc:[]};function iz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},az,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}iz.isMDXComponent=!0;const lz={toc:[]};function uz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}uz.isMDXComponent=!0;const mz={toc:[]};function dz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}dz.isMDXComponent=!0;const hz={toc:[]};function kz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}kz.isMDXComponent=!0;const yz={toc:[]};function fz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}fz.isMDXComponent=!0;const wz={toc:[]};function Mz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}Mz.isMDXComponent=!0;const Dz={toc:[]};function _z(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}_z.isMDXComponent=!0;const Xz={toc:[]};function gz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}gz.isMDXComponent=!0;const xz={toc:[]};function Cz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}Cz.isMDXComponent=!0;const Tz={toc:[]};function Lz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}Lz.isMDXComponent=!0;const Zz={toc:[]};function vz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}vz.isMDXComponent=!0;const bz={toc:[]};function Nz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}Nz.isMDXComponent=!0;const Ez={toc:[]};function Az(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ez,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}Az.isMDXComponent=!0;const Rz={toc:[]};function zz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}zz.isMDXComponent=!0;const Sz={toc:[]};function Iz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}Iz.isMDXComponent=!0;const Wz={toc:[]};function Pz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}Pz.isMDXComponent=!0;const Gz={toc:[]};function Fz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}Fz.isMDXComponent=!0;const Uz={toc:[]};function Vz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Uz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}Vz.isMDXComponent=!0;const jz={toc:[]};function qz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}qz.isMDXComponent=!0;const Bz={toc:[]};function Oz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}Oz.isMDXComponent=!0;const $z={toc:[]};function Hz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$z,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}Hz.isMDXComponent=!0;const Yz={toc:[]};function Kz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}Kz.isMDXComponent=!0;const Jz={toc:[]};function Qz(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jz,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}Qz.isMDXComponent=!0;const tS={toc:[]};function nS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}nS.isMDXComponent=!0;const eS={toc:[]};function oS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}oS.isMDXComponent=!0;const pS={toc:[]};function rS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}rS.isMDXComponent=!0;const cS={toc:[]};function sS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cS,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}sS.isMDXComponent=!0;const aS={toc:[]};function iS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}iS.isMDXComponent=!0;const lS={toc:[]};function uS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}uS.isMDXComponent=!0;const mS={toc:[]};function dS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}dS.isMDXComponent=!0;const hS={toc:[]};function kS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}kS.isMDXComponent=!0;const yS={toc:[]};function fS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}fS.isMDXComponent=!0;const wS={toc:[]};function MS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}MS.isMDXComponent=!0;const DS={toc:[]};function _S(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}_S.isMDXComponent=!0;const XS={toc:[]};function gS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Line#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}gS.isMDXComponent=!0;const xS={toc:[]};function CS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}CS.isMDXComponent=!0;const TS={toc:[]};function LS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}LS.isMDXComponent=!0;const ZS={toc:[]};function vS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}vS.isMDXComponent=!0;const bS={toc:[]};function NS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}NS.isMDXComponent=!0;const ES={toc:[]};function AS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ES,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}AS.isMDXComponent=!0;const RS={toc:[]};function zS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}zS.isMDXComponent=!0;const SS={toc:[]};function IS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}IS.isMDXComponent=!0;const WS={toc:[]};function PS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}PS.isMDXComponent=!0;const GS={toc:[]};function FS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}FS.isMDXComponent=!0;const US={toc:[]};function VS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},US,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}VS.isMDXComponent=!0;const jS={toc:[]};function qS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}qS.isMDXComponent=!0;const BS={toc:[]};function OS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}OS.isMDXComponent=!0;const $S={toc:[]};function HS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$S,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}HS.isMDXComponent=!0;const YS={toc:[]};function KS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}KS.isMDXComponent=!0;const JS={toc:[]};function QS(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JS,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}QS.isMDXComponent=!0;const tI={toc:[]};function nI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}nI.isMDXComponent=!0;const eI={toc:[]};function oI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}oI.isMDXComponent=!0;const pI={toc:[]};function rI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}rI.isMDXComponent=!0;const cI={toc:[]};function sI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}sI.isMDXComponent=!0;const aI={toc:[]};function iI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}iI.isMDXComponent=!0;const lI={toc:[]};function uI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}uI.isMDXComponent=!0;const mI={toc:[]};function dI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}dI.isMDXComponent=!0;const hI={toc:[]};function kI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}kI.isMDXComponent=!0;const yI={toc:[]};function fI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}fI.isMDXComponent=!0;const wI={toc:[]};function MI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}MI.isMDXComponent=!0;const DI={toc:[]};function _I(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}_I.isMDXComponent=!0;const XI={toc:[]};function gI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}gI.isMDXComponent=!0;const xI={toc:[]};function CI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}CI.isMDXComponent=!0;const TI={toc:[]};function LI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}LI.isMDXComponent=!0;const ZI={toc:[]};function vI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}vI.isMDXComponent=!0;const bI={toc:[]};function NI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}NI.isMDXComponent=!0;const EI={toc:[]};function AI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}AI.isMDXComponent=!0;const RI={toc:[]};function zI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Line#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}zI.isMDXComponent=!0;const SI={toc:[]};function II(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}II.isMDXComponent=!0;const WI={toc:[]};function PI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}PI.isMDXComponent=!0;const GI={toc:[]};function FI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Line#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}FI.isMDXComponent=!0;const UI={toc:[]};function VI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}VI.isMDXComponent=!0;const jI={toc:[]};function qI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}qI.isMDXComponent=!0;const BI={toc:[]};function OI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}OI.isMDXComponent=!0;const $I={toc:[]};function HI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$I,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}HI.isMDXComponent=!0;const YI={toc:[]};function KI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}KI.isMDXComponent=!0;const JI={toc:[]};function QI(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JI,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}QI.isMDXComponent=!0;const tW={toc:[]};function nW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}nW.isMDXComponent=!0;const eW={toc:[]};function oW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}oW.isMDXComponent=!0;const pW={toc:[]};function rW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}rW.isMDXComponent=!0;const cW={toc:[]};function sW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}sW.isMDXComponent=!0;const aW={toc:[]};function iW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Node#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}iW.isMDXComponent=!0;const lW={toc:[]};function uW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}uW.isMDXComponent=!0;const mW={toc:[]};function dW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}dW.isMDXComponent=!0;const hW={toc:[]};function kW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}kW.isMDXComponent=!0;const yW={toc:[]};function fW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Node#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}fW.isMDXComponent=!0;const wW={toc:[]};function MW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}MW.isMDXComponent=!0;const DW={toc:[]};function _W(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}_W.isMDXComponent=!0;const XW={toc:[]};function gW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}gW.isMDXComponent=!0;const xW={toc:[]};function CW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}CW.isMDXComponent=!0;const TW={toc:[]};function LW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}LW.isMDXComponent=!0;const ZW={toc:[]};function vW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}vW.isMDXComponent=!0;const bW={toc:[]};function NW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}NW.isMDXComponent=!0;const EW={toc:[]};function AW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}AW.isMDXComponent=!0;const RW={toc:[]};function zW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}zW.isMDXComponent=!0;const SW={toc:[]};function IW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}IW.isMDXComponent=!0;const WW={toc:[]};function PW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}PW.isMDXComponent=!0;const GW={toc:[]};function FW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}FW.isMDXComponent=!0;const UW={toc:[]};function VW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}VW.isMDXComponent=!0;const jW={toc:[]};function qW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}qW.isMDXComponent=!0;const BW={toc:[]};function OW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}OW.isMDXComponent=!0;const $W={toc:[]};function HW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$W,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}HW.isMDXComponent=!0;const YW={toc:[]};function KW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}KW.isMDXComponent=!0;const JW={toc:[]};function QW(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JW,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}QW.isMDXComponent=!0;const tP={toc:[]};function nP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}nP.isMDXComponent=!0;const eP={toc:[]};function oP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}oP.isMDXComponent=!0;const pP={toc:[]};function rP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}rP.isMDXComponent=!0;const cP={toc:[]};function sP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}sP.isMDXComponent=!0;const aP={toc:[]};function iP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}iP.isMDXComponent=!0;const lP={toc:[]};function uP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}uP.isMDXComponent=!0;const mP={toc:[]};function dP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}dP.isMDXComponent=!0;const hP={toc:[]};function kP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}kP.isMDXComponent=!0;const yP={toc:[]};function fP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}fP.isMDXComponent=!0;const wP={toc:[]};function MP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}MP.isMDXComponent=!0;const DP={toc:[]};function _P(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}_P.isMDXComponent=!0;const XP={toc:[]};function gP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}gP.isMDXComponent=!0;const xP={toc:[]};function CP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xP,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}CP.isMDXComponent=!0;const TP={toc:[]};function LP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}LP.isMDXComponent=!0;const ZP={toc:[]};function vP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}vP.isMDXComponent=!0;const bP={toc:[]};function NP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}NP.isMDXComponent=!0;const EP={toc:[]};function AP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}AP.isMDXComponent=!0;const RP={toc:[]};function zP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}zP.isMDXComponent=!0;const SP={toc:[]};function IP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}IP.isMDXComponent=!0;const WP={toc:[]};function PP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}PP.isMDXComponent=!0;const GP={toc:[]};function FP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}FP.isMDXComponent=!0;const UP={toc:[]};function VP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}VP.isMDXComponent=!0;const jP={toc:[]};function qP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}qP.isMDXComponent=!0;const BP={toc:[]};function OP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}OP.isMDXComponent=!0;const $P={toc:[]};function HP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$P,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}HP.isMDXComponent=!0;const YP={toc:[]};function KP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}KP.isMDXComponent=!0;const JP={toc:[]};function QP(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JP,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}QP.isMDXComponent=!0;const tG={toc:[]};function nG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}nG.isMDXComponent=!0;const eG={toc:[]};function oG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eG,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}oG.isMDXComponent=!0;const pG={toc:[]};function rG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}rG.isMDXComponent=!0;const cG={toc:[]};function sG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}sG.isMDXComponent=!0;const aG={toc:[]};function iG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}iG.isMDXComponent=!0;const lG={toc:[]};function uG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}uG.isMDXComponent=!0;const mG={toc:[]};function dG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}dG.isMDXComponent=!0;const hG={toc:[]};function kG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}kG.isMDXComponent=!0;const yG={toc:[]};function fG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}fG.isMDXComponent=!0;const wG={toc:[]};function MG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}MG.isMDXComponent=!0;const DG={toc:[]};function _G(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}_G.isMDXComponent=!0;const XG={toc:[]};function gG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}gG.isMDXComponent=!0;const xG={toc:[]};function CG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}CG.isMDXComponent=!0;const TG={toc:[]};function LG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}LG.isMDXComponent=!0;const ZG={toc:[]};function vG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}vG.isMDXComponent=!0;const bG={toc:[]};function NG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}NG.isMDXComponent=!0;const EG={toc:[]};function AG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}AG.isMDXComponent=!0;const RG={toc:[]};function zG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}zG.isMDXComponent=!0;const SG={toc:[]};function IG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}IG.isMDXComponent=!0;

10const WG={toc:[]};function PG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}PG.isMDXComponent=!0;const GG={toc:[]};function FG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It can be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Node#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}FG.isMDXComponent=!0;const UG={toc:[]};function VG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}VG.isMDXComponent=!0;const jG={toc:[]};function qG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}qG.isMDXComponent=!0;const BG={toc:[]};function OG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Node#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}OG.isMDXComponent=!0;const $G={toc:[]};function HG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$G,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}HG.isMDXComponent=!0;const YG={toc:[]};function KG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}KG.isMDXComponent=!0;const JG={toc:[]};function QG(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JG,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}QG.isMDXComponent=!0;const tF={toc:[]};function nF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}nF.isMDXComponent=!0;const eF={toc:[]};function oF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}oF.isMDXComponent=!0;const pF={toc:[]};function rF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}rF.isMDXComponent=!0;const cF={toc:[]};function sF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}sF.isMDXComponent=!0;const aF={toc:[]};function iF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}iF.isMDXComponent=!0;const lF={toc:[]};function uF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}uF.isMDXComponent=!0;const mF={toc:[]};function dF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}dF.isMDXComponent=!0;const hF={toc:[]};function kF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}kF.isMDXComponent=!0;const yF={toc:[]};function fF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}fF.isMDXComponent=!0;const wF={toc:[]};function MF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}MF.isMDXComponent=!0;const DF={toc:[]};function _F(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}_F.isMDXComponent=!0;const XF={toc:[]};function gF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}gF.isMDXComponent=!0;const xF={toc:[]};function CF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}CF.isMDXComponent=!0;const TF={toc:[]};function LF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}LF.isMDXComponent=!0;const ZF={toc:[]};function vF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}vF.isMDXComponent=!0;const bF={toc:[]};function NF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}NF.isMDXComponent=!0;const EF={toc:[]};function AF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}AF.isMDXComponent=!0;const RF={toc:[]};function zF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}zF.isMDXComponent=!0;const SF={toc:[]};function IF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}IF.isMDXComponent=!0;const WF={toc:[]};function PF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}PF.isMDXComponent=!0;const GF={toc:[]};function FF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}FF.isMDXComponent=!0;const UF={toc:[]};function VF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}VF.isMDXComponent=!0;const jF={toc:[]};function qF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}qF.isMDXComponent=!0;const BF={toc:[]};function OF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}OF.isMDXComponent=!0;const $F={toc:[]};function HF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$F,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}HF.isMDXComponent=!0;const YF={toc:[]};function KF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}KF.isMDXComponent=!0;const JF={toc:[]};function QF(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JF,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}QF.isMDXComponent=!0;const tU={toc:[]};function nU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}nU.isMDXComponent=!0;const eU={toc:[]};function oU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}oU.isMDXComponent=!0;const pU={toc:[]};function rU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}rU.isMDXComponent=!0;const cU={toc:[]};function sU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}sU.isMDXComponent=!0;const aU={toc:[]};function iU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}iU.isMDXComponent=!0;const lU={toc:[]};function uU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}uU.isMDXComponent=!0;const mU={toc:[]};function dU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}dU.isMDXComponent=!0;const hU={toc:[]};function kU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}kU.isMDXComponent=!0;const yU={toc:[]};function fU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}fU.isMDXComponent=!0;const wU={toc:[]};function MU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}MU.isMDXComponent=!0;const DU={toc:[]};function _U(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}_U.isMDXComponent=!0;const XU={toc:[]};function gU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}gU.isMDXComponent=!0;const xU={toc:[]};function CU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}CU.isMDXComponent=!0;const TU={toc:[]};function LU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}LU.isMDXComponent=!0;const ZU={toc:[]};function vU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}vU.isMDXComponent=!0;const bU={toc:[]};function NU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}NU.isMDXComponent=!0;const EU={toc:[]};function AU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}AU.isMDXComponent=!0;const RU={toc:[]};function zU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}zU.isMDXComponent=!0;const SU={toc:[]};function IU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}IU.isMDXComponent=!0;const WU={toc:[]};function PU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WU,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}PU.isMDXComponent=!0;const GU={toc:[]};function FU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}FU.isMDXComponent=!0;const UU={toc:[]};function VU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}VU.isMDXComponent=!0;const jU={toc:[]};function qU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}qU.isMDXComponent=!0;const BU={toc:[]};function OU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}OU.isMDXComponent=!0;const $U={toc:[]};function HU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$U,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}HU.isMDXComponent=!0;const YU={toc:[]};function KU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}KU.isMDXComponent=!0;const JU={toc:[]};function QU(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JU,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}QU.isMDXComponent=!0;const tV={toc:[]};function nV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}nV.isMDXComponent=!0;const eV={toc:[]};function oV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}oV.isMDXComponent=!0;const pV={toc:[]};function rV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}rV.isMDXComponent=!0;const cV={toc:[]};function sV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}sV.isMDXComponent=!0;const aV={toc:[]};function iV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}iV.isMDXComponent=!0;const lV={toc:[]};function uV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}uV.isMDXComponent=!0;const mV={toc:[]};function dV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}dV.isMDXComponent=!0;const hV={toc:[]};function kV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}kV.isMDXComponent=!0;const yV={toc:[]};function fV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}fV.isMDXComponent=!0;const wV={toc:[]};function MV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}MV.isMDXComponent=!0;const DV={toc:[]};function _V(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DV,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}_V.isMDXComponent=!0;const XV={toc:[]};function gV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}gV.isMDXComponent=!0;const xV={toc:[]};function CV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}CV.isMDXComponent=!0;const TV={toc:[]};function LV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}LV.isMDXComponent=!0;const ZV={toc:[]};function vV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}vV.isMDXComponent=!0;const bV={toc:[]};function NV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}NV.isMDXComponent=!0;const EV={toc:[]};function AV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}AV.isMDXComponent=!0;const RV={toc:[]};function zV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}zV.isMDXComponent=!0;const SV={toc:[]};function IV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}IV.isMDXComponent=!0;const WV={toc:[]};function PV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}PV.isMDXComponent=!0;const GV={toc:[]};function FV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}FV.isMDXComponent=!0;const UV={toc:[]};function VV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}VV.isMDXComponent=!0;const jV={toc:[]};function qV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}qV.isMDXComponent=!0;const BV={toc:[]};function OV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}OV.isMDXComponent=!0;const $V={toc:[]};function HV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$V,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}HV.isMDXComponent=!0;const YV={toc:[]};function KV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}KV.isMDXComponent=!0;const JV={toc:[]};function QV(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JV,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}QV.isMDXComponent=!0;const tj={toc:[]};function nj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}nj.isMDXComponent=!0;const ej={toc:[]};function oj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ej,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}oj.isMDXComponent=!0;const pj={toc:[]};function rj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}rj.isMDXComponent=!0;const cj={toc:[]};function sj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}sj.isMDXComponent=!0;const aj={toc:[]};function ij(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}ij.isMDXComponent=!0;const lj={toc:[]};function uj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}uj.isMDXComponent=!0;const mj={toc:[]};function dj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}dj.isMDXComponent=!0;const hj={toc:[]};function kj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}kj.isMDXComponent=!0;const yj={toc:[]};function fj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}fj.isMDXComponent=!0;const wj={toc:[]};function Mj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}Mj.isMDXComponent=!0;const Dj={toc:[]};function _j(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}_j.isMDXComponent=!0;const Xj={toc:[]};function gj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}gj.isMDXComponent=!0;const xj={toc:[]};function Cj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}Cj.isMDXComponent=!0;const Tj={toc:[]};function Lj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}Lj.isMDXComponent=!0;const Zj={toc:[]};function vj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}vj.isMDXComponent=!0;const bj={toc:[]};function Nj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Nj.isMDXComponent=!0;const Ej={toc:[]};function Aj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Ej,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}Aj.isMDXComponent=!0;const Rj={toc:[]};function zj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}zj.isMDXComponent=!0;const Sj={toc:[]};function Ij(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}Ij.isMDXComponent=!0;const Wj={toc:[]};function Pj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}Pj.isMDXComponent=!0;const Gj={toc:[]};function Fj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}Fj.isMDXComponent=!0;const Uj={toc:[]};function Vj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Uj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}Vj.isMDXComponent=!0;const jj={toc:[]};function qj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}qj.isMDXComponent=!0;const Bj={toc:[]};function Oj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Oj.isMDXComponent=!0;const $j={toc:[]};function Hj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$j,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}Hj.isMDXComponent=!0;const Yj={toc:[]};function Kj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}Kj.isMDXComponent=!0;const Jj={toc:[]};function Qj(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jj,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}Qj.isMDXComponent=!0;const tq={toc:[]};function nq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}nq.isMDXComponent=!0;const eq={toc:[]};function oq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}oq.isMDXComponent=!0;const pq={toc:[]};function rq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}rq.isMDXComponent=!0;const cq={toc:[]};function sq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}sq.isMDXComponent=!0;const aq={toc:[]};function iq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}iq.isMDXComponent=!0;const lq={toc:[]};function uq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}uq.isMDXComponent=!0;const mq={toc:[]};function dq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}dq.isMDXComponent=!0;const hq={toc:[]};function kq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}kq.isMDXComponent=!0;const yq={toc:[]};function fq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}fq.isMDXComponent=!0;const wq={toc:[]};function Mq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}Mq.isMDXComponent=!0;const Dq={toc:[]};function _q(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Dq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}_q.isMDXComponent=!0;const Xq={toc:[]};function gq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Xq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}gq.isMDXComponent=!0;const xq={toc:[]};function Cq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}Cq.isMDXComponent=!0;const Tq={toc:[]};function Lq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Tq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}Lq.isMDXComponent=!0;const Zq={toc:[]};function vq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Zq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}vq.isMDXComponent=!0;const bq={toc:[]};function Nq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}Nq.isMDXComponent=!0;const Eq={toc:[]};function Aq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Eq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}Aq.isMDXComponent=!0;const Rq={toc:[]};function zq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Rq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}zq.isMDXComponent=!0;const Sq={toc:[]};function Iq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Sq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}Iq.isMDXComponent=!0;const Wq={toc:[]};function Pq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Wq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}Pq.isMDXComponent=!0;const Gq={toc:[]};function Fq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Gq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}Fq.isMDXComponent=!0;const Uq={toc:[]};function Vq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Uq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}Vq.isMDXComponent=!0;const jq={toc:[]};function qq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}qq.isMDXComponent=!0;const Bq={toc:[]};function Oq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Bq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}Oq.isMDXComponent=!0;const $q={toc:[]};function Hq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$q,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}Hq.isMDXComponent=!0;const Yq={toc:[]};function Kq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Yq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}Kq.isMDXComponent=!0;const Jq={toc:[]};function Qq(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Jq,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}Qq.isMDXComponent=!0;const tB={toc:[]};function nB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}nB.isMDXComponent=!0;const eB={toc:[]};function oB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}oB.isMDXComponent=!0;const pB={toc:[]};function rB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}rB.isMDXComponent=!0;const cB={toc:[]};function sB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}sB.isMDXComponent=!0;const aB={toc:[]};function iB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}iB.isMDXComponent=!0;const lB={toc:[]};function uB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}uB.isMDXComponent=!0;const mB={toc:[]};function dB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mB,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}dB.isMDXComponent=!0;const hB={toc:[]};function kB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}kB.isMDXComponent=!0;const yB={toc:[]};function fB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}fB.isMDXComponent=!0;const wB={toc:[]};function MB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}MB.isMDXComponent=!0;const DB={toc:[]};function _B(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}_B.isMDXComponent=!0;const XB={toc:[]};function gB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}gB.isMDXComponent=!0;const xB={toc:[]};function CB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}CB.isMDXComponent=!0;const TB={toc:[]};function LB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}LB.isMDXComponent=!0;const ZB={toc:[]};function vB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}vB.isMDXComponent=!0;const bB={toc:[]};function NB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}NB.isMDXComponent=!0;const EB={toc:[]};function AB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}AB.isMDXComponent=!0;const RB={toc:[]};function zB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}zB.isMDXComponent=!0;const SB={toc:[]};function IB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}IB.isMDXComponent=!0;const WB={toc:[]};function PB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}PB.isMDXComponent=!0;const GB={toc:[]};function FB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}FB.isMDXComponent=!0;const UB={toc:[]};function VB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({}

10,UB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}VB.isMDXComponent=!0;const jB={toc:[]};function qB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}qB.isMDXComponent=!0;const BB={toc:[]};function OB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}OB.isMDXComponent=!0;const $B={toc:[]};function HB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$B,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}HB.isMDXComponent=!0;const YB={toc:[]};function KB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}KB.isMDXComponent=!0;const JB={toc:[]};function QB(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JB,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}QB.isMDXComponent=!0;const tO={toc:[]};function nO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}nO.isMDXComponent=!0;const eO={toc:[]};function oO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}oO.isMDXComponent=!0;const pO={toc:[]};function rO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}rO.isMDXComponent=!0;const cO={toc:[]};function sO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}sO.isMDXComponent=!0;const aO={toc:[]};function iO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}iO.isMDXComponent=!0;const lO={toc:[]};function uO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}uO.isMDXComponent=!0;const mO={toc:[]};function dO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}dO.isMDXComponent=!0;const hO={toc:[]};function kO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}kO.isMDXComponent=!0;const yO={toc:[]};function fO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}fO.isMDXComponent=!0;const wO={toc:[]};function MO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}MO.isMDXComponent=!0;const DO={toc:[]};function _O(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}_O.isMDXComponent=!0;const XO={toc:[]};function gO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}gO.isMDXComponent=!0;const xO={toc:[]};function CO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}CO.isMDXComponent=!0;const TO={toc:[]};function LO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}LO.isMDXComponent=!0;const ZO={toc:[]};function vO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}vO.isMDXComponent=!0;const bO={toc:[]};function NO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}NO.isMDXComponent=!0;const EO={toc:[]};function AO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}AO.isMDXComponent=!0;const RO={toc:[]};function zO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}zO.isMDXComponent=!0;const SO={toc:[]};function IO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}IO.isMDXComponent=!0;const WO={toc:[]};function PO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}PO.isMDXComponent=!0;const GO={toc:[]};function FO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}FO.isMDXComponent=!0;const UO={toc:[]};function VO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}VO.isMDXComponent=!0;const jO={toc:[]};function qO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}qO.isMDXComponent=!0;const BO={toc:[]};function OO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}OO.isMDXComponent=!0;const $O={toc:[]};function HO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$O,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}HO.isMDXComponent=!0;const YO={toc:[]};function KO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}KO.isMDXComponent=!0;const JO={toc:[]};function QO(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JO,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}QO.isMDXComponent=!0;const t$={toc:[]};function n$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}n$.isMDXComponent=!0;const e$={toc:[]};function o$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}o$.isMDXComponent=!0;const p$={toc:[]};function r$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}r$.isMDXComponent=!0;const c$={toc:[]};function s$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}s$.isMDXComponent=!0;const a$={toc:[]};function i$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}i$.isMDXComponent=!0;const l$={toc:[]};function u$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}u$.isMDXComponent=!0;const m$={toc:[]};function d$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}d$.isMDXComponent=!0;const h$={toc:[]};function k$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Text#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}k$.isMDXComponent=!0;const y$={toc:[]};function f$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}f$.isMDXComponent=!0;const w$={toc:[]};function M$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}M$.isMDXComponent=!0;const D$={toc:[]};function _$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}_$.isMDXComponent=!0;const X$={toc:[]};function g$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Text#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}g$.isMDXComponent=!0;const x$={toc:[]};function C$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}C$.isMDXComponent=!0;const T$={toc:[]};function L$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}L$.isMDXComponent=!0;const Z$={toc:[]};function v$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}v$.isMDXComponent=!0;const b$={toc:[]};function N$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}N$.isMDXComponent=!0;const E$={toc:[]};function A$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}A$.isMDXComponent=!0;const R$={toc:[]};function z$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}z$.isMDXComponent=!0;const S$={toc:[]};function I$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}I$.isMDXComponent=!0;const W$={toc:[]};function P$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}P$.isMDXComponent=!0;const G$={toc:[]};function F$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}F$.isMDXComponent=!0;const U$={toc:[]};function V$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}V$.isMDXComponent=!0;const j$={toc:[]};function q$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}q$.isMDXComponent=!0;const B$={toc:[]};function O$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}O$.isMDXComponent=!0;const $$={toc:[]};function H$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}H$.isMDXComponent=!0;const Y$={toc:[]};function K$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}K$.isMDXComponent=!0;const J$={toc:[]};function Q$(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J$,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}Q$.isMDXComponent=!0;const tH={toc:[]};function nH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}nH.isMDXComponent=!0;const eH={toc:[]};function oH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}oH.isMDXComponent=!0;const pH={toc:[]};function rH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}rH.isMDXComponent=!0;const cH={toc:[]};function sH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}sH.isMDXComponent=!0;const aH={toc:[]};function iH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}iH.isMDXComponent=!0;const lH={toc:[]};function uH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}uH.isMDXComponent=!0;const mH={toc:[]};function dH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}dH.isMDXComponent=!0;const hH={toc:[]};function kH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}kH.isMDXComponent=!0;const yH={toc:[]};function fH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}fH.isMDXComponent=!0;const wH={toc:[]};function MH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}MH.isMDXComponent=!0;const DH={toc:[]};function _H(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}_H.isMDXComponent=!0;const XH={toc:[]};function gH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}gH.isMDXComponent=!0;const xH={toc:[]};function CH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}CH.isMDXComponent=!0;const TH={toc:[]};function LH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}LH.isMDXComponent=!0;const ZH={toc:[]};function vH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}vH.isMDXComponent=!0;const bH={toc:[]};function NH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}NH.isMDXComponent=!0;const EH={toc:[]};function AH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}AH.isMDXComponent=!0;const RH={toc:[]};function zH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}zH.isMDXComponent=!0;const SH={toc:[]};function IH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}IH.isMDXComponent=!0;const WH={toc:[]};function PH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}PH.isMDXComponent=!0;const GH={toc:[]};function FH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GH,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}FH.isMDXComponent=!0;const UH={toc:[]};function VH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}VH.isMDXComponent=!0;const jH={toc:[]};function qH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}qH.isMDXComponent=!0;const BH={toc:[]};function OH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}OH.isMDXComponent=!0;const $H={toc:[]};function HH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$H,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}HH.isMDXComponent=!0;const YH={toc:[]};function KH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}KH.isMDXComponent=!0;const JH={toc:[]};function QH(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JH,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}QH.isMDXComponent=!0;const tY={toc:[]};function nY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}nY.isMDXComponent=!0;const eY={toc:[]};function oY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Text#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}oY.isMDXComponent=!0;const pY={toc:[]};function rY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}rY.isMDXComponent=!0;const cY={toc:[]};function sY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}sY.isMDXComponent=!0;const aY={toc:[]};function iY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}iY.isMDXComponent=!0;const lY={toc:[]};function uY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}uY.isMDXComponent=!0;const mY={toc:[]};function dY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}dY.isMDXComponent=!0;const hY={toc:[]};function kY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}kY.isMDXComponent=!0;

10const yY={toc:[]};function fY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}fY.isMDXComponent=!0;const wY={toc:[]};function MY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}MY.isMDXComponent=!0;const DY={toc:[]};function _Y(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}_Y.isMDXComponent=!0;const XY={toc:[]};function gY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}gY.isMDXComponent=!0;const xY={toc:[]};function CY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}CY.isMDXComponent=!0;const TY={toc:[]};function LY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}LY.isMDXComponent=!0;const ZY={toc:[]};function vY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}vY.isMDXComponent=!0;const bY={toc:[]};function NY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}NY.isMDXComponent=!0;const EY={toc:[]};function AY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}AY.isMDXComponent=!0;const RY={toc:[]};function zY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}zY.isMDXComponent=!0;const SY={toc:[]};function IY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}IY.isMDXComponent=!0;const WY={toc:[]};function PY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}PY.isMDXComponent=!0;const GY={toc:[]};function FY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}FY.isMDXComponent=!0;const UY={toc:[]};function VY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}VY.isMDXComponent=!0;const jY={toc:[]};function qY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}qY.isMDXComponent=!0;const BY={toc:[]};function OY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}OY.isMDXComponent=!0;const $Y={toc:[]};function HY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$Y,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}HY.isMDXComponent=!0;const YY={toc:[]};function KY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}KY.isMDXComponent=!0;const JY={toc:[]};function QY(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JY,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}QY.isMDXComponent=!0;const tK={toc:[]};function nK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}nK.isMDXComponent=!0;const eK={toc:[]};function oK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}oK.isMDXComponent=!0;const pK={toc:[]};function rK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}rK.isMDXComponent=!0;const cK={toc:[]};function sK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}sK.isMDXComponent=!0;const aK={toc:[]};function iK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}iK.isMDXComponent=!0;const lK={toc:[]};function uK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}uK.isMDXComponent=!0;const mK={toc:[]};function dK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}dK.isMDXComponent=!0;const hK={toc:[]};function kK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Text#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}kK.isMDXComponent=!0;const yK={toc:[]};function fK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}fK.isMDXComponent=!0;const wK={toc:[]};function MK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}MK.isMDXComponent=!0;const DK={toc:[]};function _K(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Text#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}_K.isMDXComponent=!0;const XK={toc:[]};function gK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}gK.isMDXComponent=!0;const xK={toc:[]};function CK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}CK.isMDXComponent=!0;const TK={toc:[]};function LK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}LK.isMDXComponent=!0;const ZK={toc:[]};function vK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}vK.isMDXComponent=!0;const bK={toc:[]};function NK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}NK.isMDXComponent=!0;const EK={toc:[]};function AK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}AK.isMDXComponent=!0;const RK={toc:[]};function zK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}zK.isMDXComponent=!0;const SK={toc:[]};function IK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}IK.isMDXComponent=!0;const WK={toc:[]};function PK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}PK.isMDXComponent=!0;const GK={toc:[]};function FK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}FK.isMDXComponent=!0;const UK={toc:[]};function VK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Video#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}VK.isMDXComponent=!0;const jK={toc:[]};function qK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}qK.isMDXComponent=!0;const BK={toc:[]};function OK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}OK.isMDXComponent=!0;const $K={toc:[]};function HK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$K,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}HK.isMDXComponent=!0;const YK={toc:[]};function KK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Video#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}KK.isMDXComponent=!0;const JK={toc:[]};function QK(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JK,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}QK.isMDXComponent=!0;const tJ={toc:[]};function nJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}nJ.isMDXComponent=!0;const eJ={toc:[]};function oJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}oJ.isMDXComponent=!0;const pJ={toc:[]};function rJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}rJ.isMDXComponent=!0;const cJ={toc:[]};function sJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}sJ.isMDXComponent=!0;const aJ={toc:[]};function iJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}iJ.isMDXComponent=!0;const lJ={toc:[]};function uJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}uJ.isMDXComponent=!0;const mJ={toc:[]};function dJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}dJ.isMDXComponent=!0;const hJ={toc:[]};function kJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}kJ.isMDXComponent=!0;const yJ={toc:[]};function fJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}

10fJ.isMDXComponent=!0;const wJ={toc:[]};function MJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}MJ.isMDXComponent=!0;const DJ={toc:[]};function _J(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}_J.isMDXComponent=!0;const XJ={toc:[]};function gJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3ecircle;"}))}gJ.isMDXComponent=!0;const xJ={toc:[]};function CJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}CJ.isMDXComponent=!0;const TJ={toc:[]};function LJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}LJ.isMDXComponent=!0;const ZJ={toc:[]};function vJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}vJ.isMDXComponent=!0;const bJ={toc:[]};function NJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}NJ.isMDXComponent=!0;const EJ={toc:[]};function AJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}AJ.isMDXComponent=!0;const RJ={toc:[]};function zJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}zJ.isMDXComponent=!0;const SJ={toc:[]};function IJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}IJ.isMDXComponent=!0;const WJ={toc:[]};function PJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}PJ.isMDXComponent=!0;const GJ={toc:[]};function FJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}FJ.isMDXComponent=!0;const UJ={toc:[]};function VJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}VJ.isMDXComponent=!0;const jJ={toc:[]};function qJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}qJ.isMDXComponent=!0;const BJ={toc:[]};function OJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}OJ.isMDXComponent=!0;const $J={toc:[]};function HJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$J,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}HJ.isMDXComponent=!0;const YJ={toc:[]};function KJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}KJ.isMDXComponent=!0;const JJ={toc:[]};function QJ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JJ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}QJ.isMDXComponent=!0;const tQ={toc:[]};function nQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},tQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}nQ.isMDXComponent=!0;const eQ={toc:[]};function oQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},eQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}oQ.isMDXComponent=!0;const pQ={toc:[]};function rQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},pQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}rQ.isMDXComponent=!0;const cQ={toc:[]};function sQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},cQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}sQ.isMDXComponent=!0;const aQ={toc:[]};function iQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},aQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}iQ.isMDXComponent=!0;const lQ={toc:[]};function uQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},lQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}uQ.isMDXComponent=!0;const mQ={toc:[]};function dQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},mQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}dQ.isMDXComponent=!0;const hQ={toc:[]};function kQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},hQ,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}kQ.isMDXComponent=!0;const yQ={toc:[]};function fQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},yQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}fQ.isMDXComponent=!0;const wQ={toc:[]};function MQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},wQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}MQ.isMDXComponent=!0;const DQ={toc:[]};function _Q(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},DQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}_Q.isMDXComponent=!0;const XQ={toc:[]};function gQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},XQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}gQ.isMDXComponent=!0;const xQ={toc:[]};function CQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},xQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}CQ.isMDXComponent=!0;const TQ={toc:[]};function LQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},TQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}LQ.isMDXComponent=!0;const ZQ={toc:[]};function vQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},ZQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}vQ.isMDXComponent=!0;const bQ={toc:[]};function NQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},bQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Video#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}NQ.isMDXComponent=!0;const EQ={toc:[]};function AQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},EQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}AQ.isMDXComponent=!0;const RQ={toc:[]};function zQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},RQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}zQ.isMDXComponent=!0;const SQ={toc:[]};function IQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},SQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}IQ.isMDXComponent=!0;const WQ={toc:[]};function PQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},WQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}PQ.isMDXComponent=!0;const GQ={toc:[]};function FQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},GQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}FQ.isMDXComponent=!0;const UQ={toc:[]};function VQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},UQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}VQ.isMDXComponent=!0;const jQ={toc:[]};function qQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},jQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}qQ.isMDXComponent=!0;const BQ={toc:[]};function OQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},BQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}OQ.isMDXComponent=!0;const $Q={toc:[]};function HQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$Q,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}HQ.isMDXComponent=!0;const YQ={toc:[]};function KQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},YQ,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}KQ.isMDXComponent=!0;const JQ={toc:[]};function QQ(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},JQ,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}QQ.isMDXComponent=!0;const t0={toc:[]};function n0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}n0.isMDXComponent=!0;const e0={toc:[]};function o0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}o0.isMDXComponent=!0;const p0={toc:[]};function r0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}r0.isMDXComponent=!0;const c0={toc:[]};function s0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}s0.isMDXComponent=!0;const a0={toc:[]};function i0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}i0.isMDXComponent=!0;const l0={toc:[]};function u0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}u0.isMDXComponent=!0;const m0={toc:[]};function d0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}d0.isMDXComponent=!0;const h0={toc:[]};function k0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}k0.isMDXComponent=!0;const y0={toc:[]};function f0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}f0.isMDXComponent=!0;const w0={toc:[]};function M0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}M0.isMDXComponent=!0;const D0={toc:[]};function _0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}_0.isMDXComponent=!0;const X0={toc:[]};function g0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}g0.isMDXComponent=!0;const x0={toc:[]};function C0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}C0.isMDXComponent=!0;const T0={toc:[]};function L0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}L0.isMDXComponent=!0;const Z0={toc:[]};function v0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}v0.isMDXComponent=!0;const b0={toc:[]};function N0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}N0.isMDXComponent=!0;const E0={toc:[]};function A0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}A0.isMDXComponent=!0;const R0={toc:[]};function z0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}z0.isMDXComponent=!0;const S0={toc:[]};function I0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}I0.isMDXComponent=!0;const W0={toc:[]};function P0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}P0.isMDXComponent=!0;const G0={toc:[]};function F0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}F0.isMDXComponent=!0;const U0={toc:[]};function V0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Video#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}V0.isMDXComponent=!0;const j0={toc:[]};function q0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}q0.isMDXComponent=!0;const B0={toc:[]};function O0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}O0.isMDXComponent=!0;const $0={toc:[]};function H0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/Video#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}H0.isMDXComponent=!0;const Y0={toc:[]};function K0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}K0.isMDXComponent=!0;const J0={toc:[]};function Q0(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J0,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}Q0.isMDXComponent=!0;const t2={toc:[]};function n2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}n2.isMDXComponent=!0;const e2={toc:[]};function o2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}o2.isMDXComponent=!0;const p2={toc:[]};function r2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}r2.isMDXComponent=!0;const c2={toc:[]};function s2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}s2.isMDXComponent=!0;const a2={toc:[]};function i2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}i2.isMDXComponent=!0;const l2={toc:[]};function u2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}u2.isMDXComponent=!0;const m2={toc:[]};function d2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}d2.isMDXComponent=!0;const h2={toc:[]};function k2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}k2.isMDXComponent=!0;const y2={toc:[]};function f2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),

10(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#position"},(0,c.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}f2.isMDXComponent=!0;const w2={toc:[]};function M2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the position in world space."))}M2.isMDXComponent=!0;const D2={toc:[]};function _2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,c.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}_2.isMDXComponent=!0;const X2={toc:[]};function g2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the rotation in world space."))}g2.isMDXComponent=!0;const x2={toc:[]};function C2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,c.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#scale"},(0,c.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,c.kt)("inlineCode",{parentName:"p"},"y")," components."))}C2.isMDXComponent=!0;const T2={toc:[]};function L2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A helper signal for operating on the scale in world space."))}L2.isMDXComponent=!0;const Z2={toc:[]};function v2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,c.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,c.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}v2.isMDXComponent=!0;const b2={toc:[]};function N2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the offset of this node's origin."))}N2.isMDXComponent=!0;const E2={toc:[]};function A2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,c.kt)("p",null,"Accessing the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,c.kt)("p",null,"Setting the position:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}A2.isMDXComponent=!0;const R2={toc:[]};function z2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the position of this node in local space of its parent."))}z2.isMDXComponent=!0;const S2={toc:[]};function I2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}I2.isMDXComponent=!0;const W2={toc:[]};function P2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,c.kt)("p",null,"Accessing the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,c.kt)("p",null,"Setting the scale:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}P2.isMDXComponent=!0;const G2={toc:[]};function F2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the scale of this node in local space of its parent."))}F2.isMDXComponent=!0;const U2={toc:[]};function V2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A size is a two-dimensional vector, where ",(0,c.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,c.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,c.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,c.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,c.kt)("p",null,"The value of both x and y is of type ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,c.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,c.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,c.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,c.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,c.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,c.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}V2.isMDXComponent=!0;const j2={toc:[]};function q2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Initializing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,c.kt)("p",null,"Accessing the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,c.kt)("p",null,"Setting the size:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}q2.isMDXComponent=!0;const B2={toc:[]};function O2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents the size of this node."))}O2.isMDXComponent=!0;const $2={toc:[]};function H2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The nodes will be appended at the end of the children list."))}H2.isMDXComponent=!0;const Y2={toc:[]};function K2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}K2.isMDXComponent=!0;const J2={toc:[]};function Q2(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J2,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Add the given node(s) as the children of this node."))}Q2.isMDXComponent=!0;const t7={toc:[]};function n7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to append."))}n7.isMDXComponent=!0;const e7={toc:[]};function o7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node as well\nas its children."))}o7.isMDXComponent=!0;const p7={toc:[]};function r7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}r7.isMDXComponent=!0;const c7={toc:[]};function s7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}s7.isMDXComponent=!0;const a7={toc:[]};function i7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}i7.isMDXComponent=!0;const l7={toc:[]};function u7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Collect all asynchronous resources used by this node."))}u7.isMDXComponent=!0;const m7={toc:[]};function d7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}d7.isMDXComponent=!0;const h7={toc:[]};function k7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A matrix mapping composite space to world space."))}k7.isMDXComponent=!0;const y7={toc:[]};function f7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,c.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}f7.isMDXComponent=!0;const w7={toc:[]};function M7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare this node to be disposed of."))}M7.isMDXComponent=!0;const D7={toc:[]};function _7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}_7.isMDXComponent=!0;const X7={toc:[]};function g7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw this node onto the canvas."))}g7.isMDXComponent=!0;const x7={toc:[]};function C7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}C7.isMDXComponent=!0;const T7={toc:[]};function L7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,c.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}L7.isMDXComponent=!0;const Z7={toc:[]};function v7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Draw an overlay for this node."))}v7.isMDXComponent=!0;const b7={toc:[]};function N7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}N7.isMDXComponent=!0;const E7={toc:[]};function A7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A local-to-screen matrix."))}A7.isMDXComponent=!0;const R7={toc:[]};function z7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}z7.isMDXComponent=!0;const S7={toc:[]};function I7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node (including\neffects applied after caching)."))}I7.isMDXComponent=!0;const W7={toc:[]};function P7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The returned rectangle should be in local space."))}P7.isMDXComponent=!0;const G7={toc:[]};function F7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get a rectangle encapsulating the contents rendered by this node."))}F7.isMDXComponent=!0;const U7={toc:[]};function V7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U7,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Try to find a node intersecting the given position."))}V7.isMDXComponent=!0;const j7={toc:[]};function q7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The searched position."))}q7.isMDXComponent=!0;const B7={toc:[]};function O7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Text />, 1);\n")),(0,c.kt)("p",null,"Result:"),(0,c.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}O7.isMDXComponent=!0;const $7={toc:[]};function H7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}H7.isMDXComponent=!0;const Y7={toc:[]};function K7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A node or an array of nodes to insert."))}K7.isMDXComponent=!0;const J7={toc:[]};function Q7(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J7,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"An index at which to insert the node(s)."))}Q7.isMDXComponent=!0;const t1={toc:[]};function n1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an instance of this node's class."))}n1.isMDXComponent=!0;const e1={toc:[]};function o1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to pass to the constructor."))}o1.isMDXComponent=!0;const p1={toc:[]};function r1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"When the mode is ",(0,c.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,c.kt)("p",null,"Use ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#layout"},(0,c.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}r1.isMDXComponent=!0;const c1={toc:[]};function s1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the resolved layout mode of this node."))}s1.isMDXComponent=!0;const a1={toc:[]};function i1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}i1.isMDXComponent=!0;const l1={toc:[]};function u1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-parent matrix for this node."))}u1.isMDXComponent=!0;const m1={toc:[]};function d1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}d1.isMDXComponent=!0;const h1={toc:[]};function k1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}k1.isMDXComponent=!0;const y1={toc:[]};function f1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the local-to-world matrix for this node."))}f1.isMDXComponent=!0;const w1={toc:[]};function M1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,c.kt)("p",null,"A positive ",(0,c.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}M1.isMDXComponent=!0;const D1={toc:[]};function _1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Rearrange this node in relation to its siblings."))}_1.isMDXComponent=!0;const X1={toc:[]};function g1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Number of places by which the node should be moved."))}g1.isMDXComponent=!0;const x1={toc:[]};function C1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x1,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}C1.isMDXComponent=!0;const T1={toc:[]};function L1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node down in relation to its siblings."))}L1.isMDXComponent=!0;const Z1={toc:[]};function v1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}v1.isMDXComponent=!0;const b1={toc:[]};function N1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new offset."))}N1.isMDXComponent=!0;const E1={toc:[]};function A1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}A1.isMDXComponent=!0;const R1={toc:[]};function z1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}z1.isMDXComponent=!0;const S1={toc:[]};function I1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}I1.isMDXComponent=!0;const W1={toc:[]};function P1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node to the top in relation to its siblings."))}P1.isMDXComponent=!0;const G1={toc:[]};function F1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}F1.isMDXComponent=!0;const U1={toc:[]};function V1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Move the node up in relation to its siblings."))}V1.isMDXComponent=!0;const j1={toc:[]};function q1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}q1.isMDXComponent=!0;const B1={toc:[]};function O1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a reactive copy of this node."))}O1.isMDXComponent=!0;const $1={toc:[]};function H1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}H1.isMDXComponent=!0;const Y1={toc:[]};function K1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove this node from the tree."))}K1.isMDXComponent=!0;const J1={toc:[]};function Q1(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J1,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Remove all children of this node."))}Q1.isMDXComponent=!0;const t4={toc:[]};function n4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Render this node onto the given canvas."))}n4.isMDXComponent=!0;const e4={toc:[]};function o4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context to draw with."))}o4.isMDXComponent=!0;const p4={toc:[]};function r4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}r4.isMDXComponent=!0;const c4={toc:[]};function s4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}s4.isMDXComponent=!0;const a4={toc:[]};function i4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The new parent of this node."))}i4.isMDXComponent=!0;const l4={toc:[]};function u4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}u4.isMDXComponent=!0;const m4={toc:[]};function d4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}d4.isMDXComponent=!0;const h4={toc:[]};function k4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether this node should be cached or not."))}k4.isMDXComponent=!0;const y4={toc:[]};function f4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It c

10an be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,c.kt)("p",null,"Whether the node is cached is decided by the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#requiresCache"},(0,c.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}f4.isMDXComponent=!0;const w4={toc:[]};function M4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}M4.isMDXComponent=!0;const D4={toc:[]};function _4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The context using which the cache will be drawn."))}_4.isMDXComponent=!0;const X4={toc:[]};function g4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Unlike ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#clone"},(0,c.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}g4.isMDXComponent=!0;const x4={toc:[]};function C4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a copy of this node."))}C4.isMDXComponent=!0;const T4={toc:[]};function L4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Properties to override."))}L4.isMDXComponent=!0;const Z4={toc:[]};function v4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}v4.isMDXComponent=!0;const b4={toc:[]};function N4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}N4.isMDXComponent=!0;const E4={toc:[]};function A4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Apply any new layout changes to this node and its children."))}A4.isMDXComponent=!0;const R4={toc:[]};function z4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}z4.isMDXComponent=!0;const S4={toc:[]};function I4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}I4.isMDXComponent=!0;const W4={toc:[]};function P4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-local matrix for this node."))}P4.isMDXComponent=!0;const G4={toc:[]};function F4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}F4.isMDXComponent=!0;const U4={toc:[]};function V4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the world-to-parent matrix for this node."))}V4.isMDXComponent=!0;const j4={toc:[]};function q4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,c.kt)("p",null,"This method can be used to create copies of signals."))}q4.isMDXComponent=!0;const B4={toc:[]};function O4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const a = createSignal(2);\nconst b = createSignal(() => a);\n// b() == 2\n\nconst bClone = createSignal(b.raw());\n// bClone() == 2\n\na(4);\n// b() == 4\n// bClone() == 4\n")))}O4.isMDXComponent=!0;const $4={toc:[]};function H4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Get the raw value of this signal."))}H4.isMDXComponent=!0;const Y4={toc:[]};function K4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}K4.isMDXComponent=!0;const J4={toc:[]};function Q4(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J4,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}Q4.isMDXComponent=!0;const t8={toc:[]};function n8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}n8.isMDXComponent=!0;const e8={toc:[]};function o8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"signal.save();\n// same as:\nsignal(signal());\n")))}o8.isMDXComponent=!0;const p8={toc:[]};function r8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Compute the current value of the signal and immediately set it."))}r8.isMDXComponent=!0;const c8={toc:[]};function s8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator specifies whether the property should be copied over when\ncloning the node."),(0,c.kt)("p",null,"By default, any property is cloneable."),(0,c.kt)("p",null,"Must be specified before the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,c.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}s8.isMDXComponent=!0;const a8={toc:[]};function i8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@clone(false)\n  \\@property()\n  public declare length: Signal<number, this>;\n}\n")))}i8.isMDXComponent=!0;const l8={toc:[]};function u8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a cloneable property decorator."))}u8.isMDXComponent=!0;const m8={toc:[]};function d8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether the property should be cloneable."))}d8.isMDXComponent=!0;const h8={toc:[]};function k8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator turns a given property into a signal consisting of one or more\nnested signals."))}k8.isMDXComponent=!0;const y8={toc:[]};function f8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@compound({x: 'scaleX', y: 'scaleY'})\n  public declare readonly scale: Signal<Vector2, this>;\n\n  public setScale() {\n    this.scale({x: 7, y: 3});\n    // same as:\n    this.scale.x(7).scale.y(3);\n  }\n}\n")))}f8.isMDXComponent=!0;const w8={toc:[]};function M8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a compound property decorator."))}M8.isMDXComponent=!0;const D8={toc:[]};function _8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A record mapping the property in the compound object to the\ncorresponding property on the owner node."))}_8.isMDXComponent=!0;const X8={toc:[]};function g8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator turns the given method into a computed value.\nSee ",(0,c.kt)("a",{parentName:"p",href:"/api/core/signals#createComputed"},(0,c.kt)("inlineCode",{parentName:"a"},"createComputed"))," for more information."))}g8.isMDXComponent=!0;const x8={toc:[]};function C8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a computed method decorator."))}C8.isMDXComponent=!0;const T8={toc:[]};function L8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator specifies the initial value of a property."),

10(0,c.kt)("p",null,"Must be specified before the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,c.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}L8.isMDXComponent=!0;const Z8={toc:[]};function v8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@initial(1)\n  \\@property()\n  public declare length: Signal<number, this>;\n}\n")))}v8.isMDXComponent=!0;const b8={toc:[]};function N8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an initial signal value decorator."))}N8.isMDXComponent=!0;const E8={toc:[]};function A8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The initial value of the property."))}A8.isMDXComponent=!0;const R8={toc:[]};function z8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator specifies whether the property should be visible in the\ninspector."),(0,c.kt)("p",null,"By default, any property is inspectable."),(0,c.kt)("p",null,"Must be specified before the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,c.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}z8.isMDXComponent=!0;const S8={toc:[]};function I8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@inspectable(false)\n  \\@property()\n  public declare hiddenLength: Signal<number, this>;\n}\n")))}I8.isMDXComponent=!0;const W8={toc:[]};function P8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an inspectable property decorator."))}P8.isMDXComponent=!0;const G8={toc:[]};function F8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Whether the property should be inspectable."))}F8.isMDXComponent=!0;const U8={toc:[]};function V8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator specifies the interpolation function of a property.\nThe interpolation function is used when tweening between different values."),(0,c.kt)("p",null,"Must be specified before the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,c.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}V8.isMDXComponent=!0;const j8={toc:[]};function q8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@interpolation(textLerp)\n  \\@property()\n  public declare text: Signal<string, this>;\n}\n")))}q8.isMDXComponent=!0;const B8={toc:[]};function O8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a signal interpolation function decorator."))}O8.isMDXComponent=!0;const $8={toc:[]};function H8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The interpolation function for the property."))}H8.isMDXComponent=!0;const Y8={toc:[]};function K8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator specifies the parser of a property.\nInstead of returning the raw value, its passed as the first parameter to the\nparser and the resulting value is returned."),(0,c.kt)("p",null,"If the wrapper class has a method called ",(0,c.kt)("inlineCode",{parentName:"p"},"lerp")," it will be set as the\ndefault interpolation function for the property."),(0,c.kt)("p",null,"Must be specified before the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,c.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}K8.isMDXComponent=!0;const J8={toc:[]};function Q8(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J8,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@wrapper(Vector2)\n  \\@property()\n  public declare offset: Signal<Vector2, this>;\n}\n")))}Q8.isMDXComponent=!0;const t6={toc:[]};function n6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a signal parser decorator."))}n6.isMDXComponent=!0;const e6={toc:[]};function o6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The wrapper class for the property."))}o6.isMDXComponent=!0;const p6={toc:[]};function r6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},p6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This decorator turns the given property into a signal."),(0,c.kt)("p",null,"The class using this decorator can implement the following methods:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"get[PropertyName]")," - A property getter."),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"get[PropertyName]")," - A property setter."),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"tween[PropertyName]")," - A tween provider.")))}r6.isMDXComponent=!0;const c6={toc:[]};function s6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},c6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@property()\n  public declare length: Signal<number, this>;\n}\n")))}s6.isMDXComponent=!0;const a6={toc:[]};function i6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},a6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a signal decorator."))}i6.isMDXComponent=!0;const l6={toc:[]};function u6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},l6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"This is a shortcut decorator for setting both the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#parser"},(0,c.kt)("inlineCode",{parentName:"a"},"parser"))," and\n",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#interpolation"},(0,c.kt)("inlineCode",{parentName:"a"},"interpolation")),"."),(0,c.kt)("p",null,"The interpolation function will be set only if the wrapper class has a method\ncalled ",(0,c.kt)("inlineCode",{parentName:"p"},"lerp"),", which will be used as said function."),(0,c.kt)("p",null,"Must be specified before the ",(0,c.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,c.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}u6.isMDXComponent=!0;const m6={toc:[]};function d6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},m6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@wrapper(Vector2)\n  \\@property()\n  public declare offset: Signal<Vector2, this>;\n\n  // same as:\n  \\@parser(value => new Vector2(value))\n  \\@interpolation(Vector2.lerp)\n  \\@property()\n  public declare offset: Signal<Vector2, this>;\n}\n")))}d6.isMDXComponent=!0;const h6={toc:[]};function k6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},h6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a signal wrapper decorator."))}k6.isMDXComponent=!0;const y6={toc:[]};function f6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},y6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The wrapper class for the property."))}f6.isMDXComponent=!0;const w6={toc:[]};function M6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},w6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"A unified abstraction for all CSS filters."))}M6.isMDXComponent=!0;const D6={toc:[]};function _6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},D6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value can be either:"),(0,c.kt)("ul",null,(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,c.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,c.kt)("li",{parentName:"ul"},(0,c.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length (equivalent to ",(0,c.kt)("inlineCode",{parentName:"li"},"auto")," in CSS)")))}_6.isMDXComponent=!0;const X6={toc:[]};function g6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},X6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Represents a length used by most layout properties."))}g6.isMDXComponent=!0;const x6={toc:[]};function C6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},x6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur"},(0,c.kt)("inlineCode",{parentName:"a"},"blur"))," filter."))}C6.isMDXComponent=!0;const T6={toc:[]};function L6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},T6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter in pixels."))}L6.isMDXComponent=!0;const Z6={toc:[]};function v6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Z6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness"},(0,c.kt)("inlineCode",{parentName:"a"},"brightness"))," filter."))}v6.isMDXComponent=!0;const b6={toc:[]};function N6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},b6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter."))}N6.isMDXComponent=!0;const E6={toc:[]};function A6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},E6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast"},(0,c.kt)("inlineCode",{parentName:"a"},"contrast"))," filter."))}A6.isMDXComponent=!0;const R6={toc:[]};function z6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},R6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter."))}z6.isMDXComponent=!0;const S6={toc:[]};function I6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},S6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale"},(0,c.kt)("inlineCode",{parentName:"a"},"grayscale"))," filter."))}I6.isMDXComponent=!0;const W6={toc:[]};function P6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},W6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter."))}P6.isMDXComponent=!0;const G6={toc:[]};function F6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},G6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate"},(0,c.kt)("inlineCode",{parentName:"a"},"hue"))," filter."))}F6.isMDXComponent=!0;const U6={toc:[]};function V6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},U6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter in degrees."))}V6.isMDXComponent=!0;const j6={toc:[]};function q6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},j6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create an ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert"},(0,c.kt)("inlineCode",{parentName:"a"},"invert"))," filter."))}q6.isMDXComponent=!0;const B6={toc:[]};function O6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},B6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter."))}O6.isMDXComponent=!0;const $6={toc:[]};function H6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},$6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate"},(0,c.kt)("inlineCode",{parentName:"a"},"saturate"))," filter."))}H6.isMDXComponent=!0;const Y6={toc:[]};function K6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},Y6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter."))}K6.isMDXComponent=!0;const J6={toc:[]};function Q6(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},J6,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Create a ",(0,c.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230216213729/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia"},(0,c.kt)("inlineCode",{parentName:"a"},"sepia"))," filter."))}Q6.isMDXComponent=!0;const t3={toc:[]};function n3(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},t3,e,{components:n,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"The value of the filter."))}n3.isMDXComponent=!0;const e3={toc:[]};function o3(t){let{components:n,...e}=t;return(0,c.kt)("wrapper",(0,r.Z)({},e3,e,{components:n,mdxType:"MDXLayout"}

10),(0,c.kt)("p",null,"Update the view."),(0,c.kt)("p",null,"Invoked after each step of the main generator.\nCan be used for calculating layout."),(0,c.kt)("p",null,"Can modify the state of the view."))}function p3(t){let{id:n}=t;const e=o[n]??p.Fragment;return p.createElement(e,null)}o3.isMDXComponent=!0},9322:(t,n,e)=>{"use strict";e.d(n,{Z:()=>m});var o=e(2784),p=e(7787),r=e(8698);const c="toggle_S_IX",s="collapsed_wdUB",a="collapse_TjTN",i="inverse_g6vW",l="clearFix_HQ1T";var u=e(6277);function m(t){let{comment:n,full:e=!0}=t;const r=(0,o.useMemo)((()=>{var t;return null==n||null==(t=n.blockTags)?void 0:t.find((t=>{let{tag:n}=t;return"@remarks"===n}))}),[n]);return o.createElement(o.Fragment,null,o.createElement(p.Z,{id:null==n?void 0:n.summaryId}),o.createElement(p.Z,{id:null==r?void 0:r.contentId}),e&&o.createElement(d,{comment:n}))}function d(t){let{comment:n}=t;const[e,m]=(0,o.useState)(!0),d=(0,o.useMemo)((()=>{var t;return(null==n||null==(t=n.blockTags)?void 0:t.filter((t=>{let{tag:n}=t;return"@example"===n})))??[]}),[n]),h=(0,o.useMemo)((()=>{var t;return null==n||null==(t=n.blockTags)?void 0:t.find((t=>{let{tag:n}=t;return"@deprecated"===n}))}),[n]),k=(0,o.useMemo)((()=>{var t;return null==n||null==(t=n.blockTags)?void 0:t.find((t=>{let{tag:n}=t;return"@see"===n}))}),[n]);return o.createElement(o.Fragment,null,d.length>0&&o.createElement(o.Fragment,null,o.createElement("h4",null,o.createElement("a",{className:(0,u.Z)(c,e&&s),onClick:t=>{t.preventDefault(),m(!e)},href:"#"},"Examples")),o.createElement(r.z,{lazy:!0,as:"div",collapsed:e},o.createElement("div",{className:a},d.map((t=>o.createElement(p.Z,{key:t.contentId,id:t.contentId})))),o.createElement("div",{className:l})),o.createElement("div",{className:(0,u.Z)(l,i)})),h&&o.createElement(o.Fragment,null,o.createElement("h4",null,"Deprecated"),o.createElement(p.Z,{id:h.contentId})),k&&o.createElement(o.Fragment,null,o.createElement("h4",null,"See also"),o.createElement(p.Z,{id:k.contentId})))}},1930:(t,n,e)=>{"use strict";e.d(n,{Z:()=>Ut});var o=e(2784),p=e(7390),r=e(6835),c=e(68),s=e(6277),a=e(8569);const i={list:"list__hZI",elements:"elements_bdzb",wrap:"wrap_iQ7y",element:"element_nvvE",left:"left_HhPc",angle:"angle_VN_b",curly:"curly_EVXr",square:"square_psNU",parentheses:"parentheses_lWmE",codeBlockContainer:"codeBlockContainer_tfjS",blockSeparator:"blockSeparator_qZiC",codeBlock:"codeBlock_LRvA",highlight:"highlight_l8HV",pointer:"pointer_oZMZ"};var l=e(7896);function u(t){let{width:n=24,height:e=24,...p}=t;return o.createElement("svg",(0,l.Z)({width:n,height:e,"aria-hidden":"true",viewBox:"0 0 24 24"},p),o.createElement("path",{d:"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z",fill:"currentColor"}))}function m(t){let{children:n,highlight:e,onClick:p,link:l}=t;const m=(0,r.F)(),d=(0,c.s2)();return o.createElement("div",{className:(0,s.Z)(a.Z.codeBlockContent,i.codeBlock,e&&i.highlight,p&&i.pointer)},o.createElement("pre",{onClick:p,onKeyDown:t=>{"Enter"===t.key&&(null==p||p())},tabIndex:0,ref:m.codeBlockRef,className:(0,s.Z)(a.Z.codeBlock,"thin-scrollbar")},o.createElement("code",{className:a.Z.codeBlockLines,style:d},n)),l&&o.createElement("div",{className:a.Z.buttonGroup},o.createElement("button",{title:"Go to source",className:"clean-btn",onClick:t=>{t.preventDefault(),window.open(l,"_blank")}},o.createElement(u,{width:18,height:18}))))}var d=e(9318);function h(t){let{children:n}=t;return o.createElement(d.Z,{as:"div",className:(0,s.Z)(i.codeBlockContainer,"language-typescript")},n)}var k=e(9817);function y(t){let{children:n,type:e,to:p,id:r,tooltip:s}=t;const a=(0,c.Ld)(e);return p?o.createElement(k.Z,(0,l.Z)({id:r,to:p,"data-tooltip":s},a),n):o.createElement("span",(0,l.Z)({id:r},a),n)}let f,w;!function(t){t[t.None=0]="None",t[t.Angle=1]="Angle",t[t.Curly=2]="Curly",t[t.Square=3]="Square",t[t.Parentheses=4]="Parentheses"}(f||(f={})),function(t){t.Comma=", ",t.Pipe=" | ",t.Ampersand=" & "}(w||(w={}));const M={[f.None]:i.none,[f.Angle]:i.angle,[f.Curly]:i.curly,[f.Square]:i.square,[f.Parentheses]:i.parentheses};function D(t){let{children:n,type:e,separator:p=w.Comma}=t;return o.createElement("span",{className:(0,s.Z)(i.list,M[e??f.None])},o.createElement("span",{className:(0,s.Z)(i.elements,p!==w.Comma&&i.left)},(Array.isArray(n)?n:[n]).flatMap(((t,n)=>o.createElement("span",{"data-separator":p,key:n,className:i.element},t)))))}var _=e(8617);function X(t){var n;let{type:e}=t;const p=(0,_.RU)(e.project),r=null==p?void 0:p[e.id],c=e.externalUrl??(0,_.Gr)(r);return o.createElement(o.Fragment,null,o.createElement(y,{to:c,type:c?"class-name":"constant",tooltip:!0},e.name),!(null==(n=e.typeArguments)||!n.length)&&o.createElement(D,{type:f.Angle},e.typeArguments.map(((t,n)=>o.createElement(P,{key:n,type:t})))))}function g(t){let{type:n}=t;return o.createElement(y,{type:"keyword"},n.name)}function x(t){let{type:n}=t;return n.elements?o.createElement(D,{type:f.Square},n.elements.map(((t,n)=>o.createElement(P,{key:n,type:t})))):o.createElement(o.Fragment,null,"[]")}function C(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.elementType}),"[]")}function T(t){let{type:n}=t;return o.createElement(D,{type:f.Parentheses,separator:w.Pipe},n.types.map(((t,n)=>o.createElement(P,{key:n,type:t}))))}function L(t){let{type:n}=t;const[e,p]=(0,o.useMemo)((()=>

10{if(null===n.value)return["null","keyword"];switch(typeof n.value){case"object":return[(n.value.negative?"-":"")+n.value.value,"number"];case"boolean":return[n.value,"keyword"];case"number":return[n.value,"number"];case"string":return[`'${n.value}'`,"string"];default:return[n.value,"constant"]}}),[n.value]);return o.createElement(y,{type:p},e)}function Z(t){let{type:n}=t;return n.asserts?o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"asserts "),o.createElement(y,null,n.name," ")):o.createElement(o.Fragment,null,o.createElement(y,null,n.name," "),o.createElement(y,{type:"keyword"},"is "),o.createElement(P,{type:n.targetType}))}function v(t){let{type:n}=t;const e=(0,_.in)();return o.createElement(Y,{reflection:e(n.declaration)})}function b(t){let{type:n}=t;return o.createElement(D,{type:f.Parentheses,separator:w.Ampersand},n.types.map(((t,n)=>o.createElement(P,{key:n,type:t}))))}function N(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"string"},"`",n.head),n.tail.map(((t,n)=>{let[e,p]=t;return o.createElement(o.Fragment,null,"${",o.createElement(P,{key:n,type:e}),"}",o.createElement(y,{type:"string"},p))})),o.createElement(y,{type:"string"},"`"))}function E(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"typeof "),o.createElement(P,{type:n.queryType}))}function A(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.checkType}),o.createElement(y,{type:"keyword"}," extends "),o.createElement(P,{type:n.extendsType})," ? ",o.createElement(P,{type:n.trueType})," : ",o.createElement(P,{type:n.falseType}))}function R(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"infer "),o.createElement(y,{type:"constant"},n.name))}function z(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.objectType}),"[",o.createElement(P,{type:n.indexType}),"]")}function S(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},n.operator," "),o.createElement(P,{type:n.target}))}function I(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(D,{type:f.Curly},o.createElement(o.Fragment,null,"[",o.createElement(y,{type:"class"},n.parameter),o.createElement(y,{type:"keyword"}," in "),o.createElement(P,{type:n.parameterType}),"]: ",o.createElement(P,{type:n.templateType}))))}function W(t){let{type:n}=t;return o.createElement(o.Fragment,null,n.name,": ",o.createElement(P,{type:n.element}))}function P(t){const n=(0,o.useMemo)((()=>{switch(t.type.type){case"rest":case"optional":case"unknown":break;case"typeOperator":return S;case"conditional":return A;case"reflection":return v;case"query":return E;case"named-tuple-member":return W;case"union":return T;case"intrinsic":return g;case"literal":return L;case"reference":return X;case"predicate":return Z;case"tuple":return x;case"array":return C;case"intersection":return b;case"inferred":return R;case"mapped":return I;case"template-literal":return N;case"indexedAccess":return z}throw new Error(`Missing component for type: ${t.type.type}`)}),[t.type]);return o.createElement(n,t)}function G(t){let{flags:n,explicitAccessModifier:e}=t;const p=[];return null!=n&&n.isAbstract&&p.push("abstract"),null!=n&&n.isStatic&&p.push("static"),null!=n&&n.isConst&&p.push("const"),null!=n&&n.isReadonly&&p.push("readonly"),null!=n&&n.isPrivate&&p.push("private"),null!=n&&n.isProtected&&p.push("protected"),(null==n||!n.isPublic)&&(!e||null!=n&&n.isProtected||null!=n&&n.isPrivate)||p.push("public"),o.createElement(o.Fragment,null,p.map((t=>o.createElement(y,{key:t,type:"keyword"},t," "))))}function F(t){let{reflection:n}=t;const e="__namedParameters"===n.name?"{...}":n.name;return o.createElement(o.Fragment,null,o.createElement(G,{flags:n.flags}),n.flags.isRest&&"...",o.createElement(y,{id:n.anchor,to:n.anchor?`#${n.anchor}`:void 0,type:"plain"},e),n.flags.isOptional&&"?",": ",n.type&&o.createElement(P,{type:n.type}),n.defaultValue&&o.createElement(o.Fragment,null," = ",o.createElement(y,{type:"plain"},n.defaultValue)))}function U(t){let{reflection:n}=t;return o.createElement(o.Fragment,null,o.createElement(G,{flags:n.flags}),n.varianceModifier&&o.createElement(y,{type:"keyword"},n.varianceModifier," "),o.createElement(y,{id:n.anchor,to:n.anchor?`#${n.anchor}`:void 0,type:"class-name"},n.name),n.type&&o.createElement(o.Fragment,null," extends ",o.createElement(P,{type:n.type})),n.default&&o.createElement(o.Fragment,null," = ",o.createElement(P,{type:n.default})))}function V(t){var n,e;let{reflection:r,flags:c}=t;const s=(0,_.in)(),a="__type"===r.name;return o.createElement(o.Fragment,null,o.createElement(G,{flags:c??r.flags,explicitAccessModifier:!a}),r.kind===p.W.GetSignature&&o.createElement(y,{type:"keyword"},"get "),r.kind===p.W.SetSignature&&o.createElement(y,{type:"keyword"},"set "),r.overwrites&&o.createElement(o.Fragment,null,o.createElement(y,{to:r.overwrites.externalUrl??(0,_.Gr)(s(r.overwrites.id)),type:"keyword"},"override")," "),r.kind===p.W.ConstructorSignature?o.createElement(o.Fragment,null,o.createElement(y,{to:"#",type:"keyword"},"new")," ",o.createElement(y,{type:"plain"}

10,r.type.name)):a?"":o.createElement(y,{type:"function"},r.name),!(null==(n=r.typeParameter)||!n.length)&&o.createElement(D,{type:f.Angle},r.typeParameter.map((t=>o.createElement(U,{key:t.id,reflection:s(t)})))),null!=(e=r.parameters)&&e.length?o.createElement(D,{type:f.Parentheses},r.parameters.map((t=>o.createElement(F,{key:t,reflection:s(t)})))):"()",r.type&&o.createElement(o.Fragment,null,a?" => ":": ",o.createElement(P,{type:r.type})))}function j(t){let{reflection:n}=t;return o.createElement(F,{reflection:n})}const q={[p.W.Namespace]:"namespace",[p.W.Enum]:"enum",[p.W.Class]:"class",[p.W.Interface]:"interface"};function B(t){var n,e,p;let{reflection:r}=t;const c=(0,_.in)();return o.createElement(o.Fragment,null,o.createElement(G,{flags:r.flags}),o.createElement(y,{type:"keyword"},q[r.kind]," "),o.createElement(y,{type:"class-name"},r.name),!(null==(n=r.typeParameters)||!n.length)&&o.createElement(D,{type:f.Angle},r.typeParameters.map((t=>o.createElement(U,{key:t.id,reflection:c(t)}))))," ",!(null==(e=r.extendedTypes)||!e.length)&&o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"extends "),o.createElement(D,null,r.extendedTypes.map(((t,n)=>o.createElement(P,{key:n,type:t}))))),!(null==(p=r.implementedTypes)||!p.length)&&o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"implements "),o.createElement(D,null,r.implementedTypes.map(((t,n)=>o.createElement(P,{key:n,type:t}))))))}function O(t){let{reflection:n}=t;const e=(0,_.in)();return o.createElement(o.Fragment,null,o.createElement(G,{flags:n.flags}),o.createElement(y,{type:"keyword"},"type "),o.createElement(y,{type:"class-name"},n.name),n.typeParameters&&o.createElement(D,{type:f.Angle},n.typeParameters.map((t=>o.createElement(U,{key:t.id,reflection:e(t)}))))," = ",o.createElement(P,{type:n.type}))}function $(t){let{reflection:n}=t;const e=(0,_.in)();return n.signatures?o.createElement(V,{reflection:n.signatures[0]}):n.children?o.createElement(D,{type:f.Curly},n.children.map((t=>o.createElement(Y,{key:t.id,reflection:e(t)})))):o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"unknown"))}function H(t){var n;let{reflection:e}=t;const p=(null==(n=e.signatures)?void 0:n[0])??e.getSignature??e.setSignature??e.indexSignature;return o.createElement(V,{reflection:p})}function Y(t){let{reflection:n}=t;const e=(0,o.useMemo)((()=>{switch(n.kind){case p.W.Project:case p.W.Module:case p.W.EnumMember:case p.W.Variable:case p.W.Function:break;case p.W.Namespace:case p.W.Enum:case p.W.Class:case p.W.Interface:return B;case p.W.Constructor:return V;case p.W.Property:return j;case p.W.Method:return H;case p.W.CallSignature:case p.W.IndexSignature:case p.W.ConstructorSignature:case p.W.Parameter:break;case p.W.TypeLiteral:return $;case p.W.TypeParameter:return U;case p.W.Accessor:case p.W.GetSignature:case p.W.SetSignature:case p.W.ObjectLiteral:break;case p.W.TypeAlias:return O;case p.W.Reference:}throw new Error(`Missing component for reflection: ${n.kindString}`)}),[n.id]);return o.createElement(e,{reflection:n})}function K(t){let{children:n}=t;const e=(0,o.useRef)();return(0,o.useLayoutEffect)((()=>{if(!e.current)return;const t=e.current.closest("pre");if(t.scrollWidth>t.clientWidth){const n=Array.from(e.current.querySelectorAll(`.${i.elements}`)).sort(((t,n)=>function(t,n){return t>n?1:t<n?-1:0}(n.innerText.length,t.innerText.length)));for(;t.scrollWidth>t.clientWidth&&n.length>0;)n.shift().classList.add(i.wrap)}})),o.createElement(o.Fragment,null,n&&o.createElement("span",{ref:e,className:(0,s.Z)(i.line,"token-line")},n),o.createElement("br",null))}var J=e(9322),Q=e(7787);function tt(t){let{parameters:n}=t;const e=(0,_.in)(),p=(0,o.useMemo)((()=>null==n?void 0:n.map(e)),[n]);return null!=p&&p.length?o.createElement(o.Fragment,null,o.createElement("h4",null,"Type Parameters"),o.createElement("ul",null,p.map((t=>{var n;return o.createElement("li",{key:t.id},o.createElement("code",null,o.createElement(U,{reflection:t})),o.createElement(Q.Z,{id:null==(n=t.comment)?void 0:n.summaryId}))})))):o.createElement(o.Fragment,null)}function nt(t){let{parameters:n}=t;const e=(0,_.in)(),p=(0,o.useMemo)((()=>null==n?void 0:n.map(e)),[n]);return null!=p&&p.length?o.createElement(o.Fragment,null,o.createElement("h4",null,"Parameters"),o.createElement("ul",null,p.map((t=>{var n;return o.createElement("li",{key:t.id},o.createElement("code",null,o.createElement(F,{reflection:t})),o.createElement(Q.Z,{id:null==(n=t.comment)?void 0:n.summaryId}))})))):o.createElement(o.Fragment,null)}function et(t){let{signatures:n,flags:e,source:p}=t;const r=(0,_.in)(),c=(0,o.useMemo)((()=>n.map(r)),[n]),[s,a]=(0,o.useState)(c[0]);return o.createElement(o.Fragment,null,o.createElement(h,null,c.map((t=>

10o.createElement(m,{link:null==p?void 0:p.url,key:t.id,highlight:n.length>1&&t.id===s.id,onClick:n.length>1?()=>a(t):void 0},o.createElement(K,null,o.createElement(V,{reflection:t,flags:e})))))),o.createElement(J.Z,{comment:s.comment}),o.createElement(tt,{parameters:s.typeParameter}),o.createElement(nt,{parameters:s.parameters}))}var ot=e(7708);function pt(t){let{width:n=24,height:e=24,...p}=t;return o.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:n,height:e,"aria-hidden":!0},p),o.createElement("path",{d:"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z",fill:"currentColor"}))}const rt="header_nSmr",ct="filters_z1iC",st="icon_ROIU";function at(){const t=(0,o.useRef)(null),[n,e]=(0,o.useState)(!1),[p,r]=(0,ot.mN)();return(0,o.useEffect)((()=>{const n=n=>{t.current&&!t.current.contains(n.target)&&e(!1)};return document.addEventListener("mousedown",n),document.addEventListener("touchstart",n),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("touchstart",n)}}),[t]),o.createElement(o.Fragment,null,o.createElement("div",{ref:t,className:(0,s.Z)("dropdown dropdown--right margin-bottom--md",n&&"dropdown--show")},o.createElement("a",{href:"#","aria-haspopup":"true","aria-expanded":!1,role:"button",onClick:t=>{t.preventDefault(),e(!n)},onKeyDown:t=>{"Enter"===t.key&&(t.preventDefault(),e(!n))}},"Filters",o.createElement(pt,{className:st})),o.createElement("ul",{className:"dropdown__menu"},o.createElement("li",null,o.createElement("label",{htmlFor:"private",className:(0,s.Z)("dropdown__link",p.private&&"dropdown__link--active")},o.createElement("input",{id:"private",type:"checkbox",className:"margin-right--md",checked:p.private,onChange:t=>{r({...p,private:t.target.checked})}}),"Protected members")),o.createElement("li",{onKeyDown:t=>{"Tab"===t.key&&e(!1)}},o.createElement("label",{htmlFor:"inherited",className:(0,s.Z)("dropdown__link",p.inherited&&"dropdown__link--active")},o.createElement("input",{id:"inherited",type:"checkbox",className:"margin-right--md",checked:p.inherited,onChange:t=>{r({...p,inherited:t.target.checked})}}),"Inherited members")))))}function it(t){let{children:n,kind:e}=t;return e===p.W.Class||e===p.W.Interface?o.createElement("div",{className:(0,s.Z)("row",rt)},o.createElement("div",{className:(0,s.Z)("col",ct)},o.createElement(at,null)),o.createElement("div",{className:"col"},n)):o.createElement(o.Fragment,null,n)}var lt=e(3181),ut=e(3851),mt=e(4126),dt=e(2424),ht=e(2244),kt=e(4155);function yt(t){return function(t){return o.Children.map(t,(t=>{if((0,o.isValidElement)(t)&&"value"in t.props)return t;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof t.type?t.type:t.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))}(t).map((t=>{let{props:{value:n,label:e,attributes:o,default:p}}=t;return{value:n,label:e,attributes:o,default:p}}))}function ft(t){const{values:n,children:e}=t;return(0,o.useMemo)((()=>{const t=n??yt(e);return function(t){const n=(0,ht.l)(t,((t,n)=>t.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((t=>t.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(t),t}),[n,e])}function wt(t){let{value:n,tabValues:e}=t;return e.some((t=>t.value===n))}function Mt(t){let{queryString:n=!1,groupId:e}=t;const p=(0,lt.k6)(),r=function(t){let{queryString:n=!1,groupId:e}=t;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!e)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return e??null}({queryString:n,groupId:e});return[(0,dt._X)(r),(0,o.useCallback)((t=>{if(!r)return;const n=new URLSearchParams(p.location.search);n.set(r,t),p.replace({...p.location,search:n.toString()})}),[r,p])]}function Dt(t){const{defaultValue:n,queryString:e=!1,groupId:p}=t,r=ft(t),[c,s]=(0,o.useState)((()=>function(t){let{defaultValue:n,tabValues:e}=t;if(0===e.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!wt({value:n,tabValues:e}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${e.map((t=>t.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const o=e.find((t=>t.default))??e[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:n,tabValues:r}))),[a,i]=Mt({queryString:e,groupId:p}),[l,u]=function(t){let{groupId:n}=t;const e=function(t){return t?`docusaurus.tab.${t}`:null}(n),[p,r]=(0,kt.Nk)(e);return[p,(0,o.useCallback)((t=>{e&&r.set(t)}),[e,r])]}({groupId:p}),m=(()=>{const t=a??l;return wt({value:t,tabValues:r})?t:null})();(0,o.useLayoutEffect)((()=>{m&&s(m)}),[m]);return{selectedValue:c,selectValue:(0,o.useCallback)((t=>{if(!wt({value:t,tabValues:r}))throw new Error(`Can't select invalid tab value=${t}`);s(t),i(t),u(t)}),[i,u,r]),tabValues:r}}var _t=e(9741);const Xt="tabList_M0Dn",gt="tabItem_ysIP";function xt(t){let{className:n,block:e,selectedValue:p,selectValue:r,tabValues:c}=t;const a=[],{blockElementScrollPositionUntilNextRender:i}=(0,mt.o5)(),u=t=>{const n=t.currentTarget,e=a.indexOf(n),o=c[e].value;o!==p&&(i(n),r(o))},m=t=>{var n;let e=null;switch(t.key){case"Enter":u(t);break;case"ArrowRight":{const n=a.indexOf(t.currentTarget)+1;e=a[n]??a[0];break}case"ArrowLeft":{const n=a.indexOf(t.currentTarget)-1;e=a[n]??a[a.length-1];break}}null==(n=e)||n.focus()};return o.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":e},n)},c.map((t=>{let{value:n,label:e,attributes:r}=t;return o.createElement("li",(0,l.Z)({role:"tab",tabIndex:p===n?0:-1,"aria-selected":p===n,key:n,ref:t=>a.push(t),onKeyDown:m,onClick:u},r,{className:(0,s.Z)("tabs__item",gt,null==r?void 0:r.className,{"tabs__item--active":p===n})}),e??n)})))}function Ct(t){let{lazy:n,children:e,selectedValue:p}=t;if(e=Array.isArray(e)?e:[e],n){const t=e.find((t=>t.props.value===p));return t?(0,o.cloneElement)(t,{className:"margin-top--md"}):null}return o.createElement("div",{className:"margin-top--md"},e.map(((t,n)=>(0,o.cloneElement)(t,{key:n,hidden:t.props.value!==p}))))}function Tt(t){const n=Dt(t);return o.createElement("div",{className:(0,s.Z)("tabs-container",Xt)},o.createElement(xt,(0,l.Z)({},t,n)),o.createElement(Ct,(0,l.Z)({},t,n)))}function Lt(t){const n=(0,_t.Z)();return o.createElement(Tt,(0,l.Z)({key:String(n)},t))}const Zt="tabItem_OMyP";function vt(t){let{children:n,hidden:e,className:p}=t;return o.createElement("div",{role:"tabpanel",className:(0,s.Z)(Zt,p),hidden:e},n)}function bt(t){let{group:n}=t;return"Constructors"===n.title&&0===n.external.length&&1===n.nested.length?o.createElement(Ut,{reflection:n.nested[0]}):o.createElement(o.Fragment,null,n.external.length>0&&o.createElement("ul",null,n.external.map((t=>o.createElement("li",{key:t.id},o.createElement("code",null,o.createElement(X,{type:t})))))),n.nested.length>0&&n.nested.map(((t,n)=>o.createElement(o.Fragment,{key:t.id},n>0&&o.createElement("hr",null),o.createElement(Ut,{reflection:t})))))}function Nt(t){let{group:n,project:e}=t;const p=(0,lt.TH)(),r=(0,_.RU)(e),c=p.hash.split("-")[0].slice(1),[s]=(0,ot.mN)(),a=(0,o.useMemo)((()=>(n.categories??[n]).map((t=>function(t,n,e){const o=[],p=[],r=[];for(const c of t.children){const t=n[c];t&&(0,ot.It)(e,t)&&(r.push(t.anchor),t.hasOwnPage?o.push(t):p.push(t))}if(o.length>0||p.length>0)return{title:t.title,external:o,nested:p,anchors:r}}(t,r,s))).filter((t=>!!t))),[n,r,s]);return(0,o.useEffect)((()=>

10{if(1===a.length)return;const t=p.hash.split("-")[0].slice(1);for(const n of a)if(n.anchors.includes(t))return}),[p.hash,a]),0===a.length?o.createElement(o.Fragment,null):o.createElement(o.Fragment,null,o.createElement(ut.Z,{as:"h2",id:n.title},n.title),a.length>1?o.createElement(Lt,{groupId:n.title},a.map((t=>o.createElement(vt,{default:t.anchors.includes(c),value:t.title,label:t.title,className:"margin-top--lg"},o.createElement(bt,{group:t}))))):o.createElement(bt,{group:a[0]}))}function Et(t){var n,e,p,r,c;let{reflection:s}=t;return o.createElement(o.Fragment,null,o.createElement(h,null,o.createElement(m,{link:null==(n=s.sources)||null==(e=n[0])?void 0:e.url},o.createElement(K,null,o.createElement(Y,{reflection:s})))),o.createElement(it,{kind:s.kind},o.createElement(J.Z,{comment:s.comment})),o.createElement(tt,{parameters:s.typeParameters}),(null==(p=s.implementedBy)?void 0:p.length)&&o.createElement(o.Fragment,null,o.createElement("h4",null,"Implemented by"),o.createElement("ul",null,s.implementedBy.map((t=>o.createElement("li",{key:t.id},o.createElement("code",null,o.createElement(X,{type:t}))))))),(null==(r=s.extendedBy)?void 0:r.length)&&o.createElement(o.Fragment,null,o.createElement("h4",null,"Extended by"),o.createElement("ul",null,s.extendedBy.map((t=>o.createElement("li",{key:t.id},o.createElement("code",null,o.createElement(X,{type:t}))))))),s.signatures&&o.createElement(o.Fragment,null,o.createElement("h2",null,"Callable"),o.createElement(et,{signatures:s.signatures})),null==(c=s.groups)?void 0:c.map((t=>o.createElement(Nt,{group:t,key:t.title,project:s.project}))))}function At(t){var n;let{reflection:e,headless:p}=t;const r=[...e.signatures??[],e.setSignature,e.getSignature,e.indexSignature].filter((t=>!!t));return o.createElement(o.Fragment,null,!p&&(e.hasOwnPage?o.createElement("h1",null,e.name):o.createElement(ut.Z,{as:"h3",id:e.anchor},o.createElement("code",null,e.name))),o.createElement(et,{signatures:r,flags:e.flags,source:null==(n=e.sources)?void 0:n[0]}),e.inheritedFrom&&o.createElement("small",null,"Inherited from"," ",o.createElement("code",null,o.createElement(X,{type:e.inheritedFrom}))),e.overwrites&&o.createElement("small",null,"Overwrites"," ",o.createElement("code",null,o.createElement(X,{type:e.overwrites}))))}function Rt(t){var n,e;let{reflection:p,headless:r}=t;return o.createElement(o.Fragment,null,!r&&(p.hasOwnPage?o.createElement("h1",null,p.name):o.createElement(ut.Z,{as:"h3",id:p.anchor},o.createElement("code",null,p.name))),o.createElement(h,null,o.createElement(m,{link:null==(n=p.sources)||null==(e=n[0])?void 0:e.url},o.createElement(K,null,o.createElement(j,{reflection:p})))),o.createElement(J.Z,{comment:p.comment}),p.inheritedFrom&&o.createElement("small",null,"Inherited from"," ",o.createElement("code",null,o.createElement(X,{type:p.inheritedFrom}))))}function zt(t){var n,e,p;let{reflection:r}=t;const c=(0,_.RU)(r.project);return o.createElement(o.Fragment,null,o.createElement(ut.Z,{as:"h3",id:r.anchor},o.createElement("code",null,r.name)),o.createElement(h,null,o.createElement(m,{link:null==(n=r.sources)||null==(e=n[0])?void 0:e.url},o.createElement(K,null,o.createElement(Y,{reflection:r})))),o.createElement(J.Z,{comment:r.comment}),o.createElement(tt,{parameters:r.typeParameters}),r.signatures&&o.createElement(o.Fragment,null,o.createElement("h2",null,"Callable"),o.createElement(et,{signatures:r.signatures})),null==(p=r.groups)?void 0:p.map((t=>o.createElement(o.Fragment,{key:t.title},o.createElement("h2",null,t.title),t.children.map((t=>c[t])).filter((t=>t&&(t.flags.isPublic||!t.flags.isProtected&&!t.flags.isPrivate))).map((t=>o.createElement(Ut,{key:t.id,reflection:t})))))))}var St=e(8128);function It(t){var n;let{reflection:e}=t;return o.createElement(o.Fragment,null,o.createElement(St.Z,{language:"ts"},"import ","{...}",' from "',e.importPath,'";'),o.createElement(it,{kind:e.kind},o.createElement(J.Z,{comment:e.comment})),null==(n=e.groups)?void 0:n.map((t=>o.createElement(Nt,{group:t,key:t.title,project:e.project}))))}const Wt="cardContainer_ybwo",Pt="cardTitle_Ehd1",Gt="cardDescription_b6wr";function Ft(t){let{reflection:n}=t;const e=(0,_.RU)(n.project),p=n.groups[0].children.map((t=>e[t])).filter((t=>!!t));return o.createElement("article",{className:"margin-top--lg"},o.createElement("section",{className:(0,s.Z)("row")},p.map((t=>{var n;return o.createElement("article",{key:t.id,className:"col col--6 margin-bottom--lg"},o.createElement(k.Z,{href:t.href,className:(0,s.Z)("card padding--lg",Wt)},o.createElement("h2",{className:(0,s.Z)("text--truncate",Pt)},o.createElement("code",null,t.name)),o.createElement("div",{className:(0,s.Z)("text--truncate",Gt)},(null==(n=t.comment)?void 0:n.summaryText)??"\xa0")))}))))}function Ut(t){let{reflection:n,headless:e=!1}=t;const r=(0,o.useMemo)((()=>{switch(n.kind){case p.W.Project:return Ft;case p.W.Module:return It;case p.W.Namespace:case p.W.Enum:case p.W.Class:case p.W.Interface:return Et;case p.W.Function:case p.W.Accessor:case p.W.Constructor:case p.W.Method:return At;case p.W.Variable:case p.W.Property:case p.W.EnumMember:return Rt;case p.W.CallSignature:case p.W.IndexSignature:case p.W.ConstructorSignature:case p.W.Parameter:case p.W.TypeLiteral:case p.W.TypeParameter:case p.W.GetSignature:case p.W.SetSignature:case p.W.ObjectLiteral

10:break;case p.W.TypeAlias:return zt;case p.W.Reference:}throw new Error(`Missing component for reflection: ${n.kindString}`)}),[n.kind]);return o.createElement(r,{reflection:n,headless:e})}},7390:(t,n,e)=>{"use strict";let o;e.d(n,{W:()=>o}),function(t){t[t.Project=1]="Project",t[t.Module=2]="Module",t[t.Namespace=4]="Namespace",t[t.Enum=8]="Enum",t[t.EnumMember=16]="EnumMember",t[t.Variable=32]="Variable",t[t.Function=64]="Function",t[t.Class=128]="Class",t[t.Interface=256]="Interface",t[t.Constructor=512]="Constructor",t[t.Property=1024]="Property",t[t.Method=2048]="Method",t[t.CallSignature=4096]="CallSignature",t[t.IndexSignature=8192]="IndexSignature",t[t.ConstructorSignature=16384]="ConstructorSignature",t[t.Parameter=32768]="Parameter",t[t.TypeLiteral=65536]="TypeLiteral",t[t.TypeParameter=131072]="TypeParameter",t[t.Accessor=262144]="Accessor",t[t.GetSignature=524288]="GetSignature",t[t.SetSignature=1048576]="SetSignature",t[t.ObjectLiteral=2097152]="ObjectLiteral",t[t.TypeAlias=4194304]="TypeAlias",t[t.Reference=8388608]="Reference"}(o||(o={}))},532:(t,n,e)=>{"use strict";e.d(n,{Z:()=>l});var o=e(2784),p=e(9741);const r="tooltip_lI6R",c="active_DOSD";var s=e(6277),a=e(8617),i=e(9322);function l(t){let{children:n}=t;const e=(0,p.Z)(),l=(0,a.rG)(),[u,m]=(0,o.useState)(!1),[d,h]=(0,o.useState)(null),k=(0,o.useRef)(),y=(0,o.useRef)(),f=(0,o.useRef)(),w=(0,o.useCallback)((()=>{if(!y.current||!f.current)return;const t=y.current.getBoundingClientRect();let n=window.innerWidth-t.left-496;n<0&&(n=0),f.current.style.right=`${n}px`,f.current.style.top=`${t.bottom}px`}),[]);return(0,o.useEffect)((()=>{if(!e)return;const t=t=>{var n,e,o;if(!t.target.href||null==(n=k.current)||!n.contains(t.target)||null!=(e=f.current)&&e.contains(t.target))return;const p=new URL(t.target.href,document.baseURI);if(p.pathname===window.location.pathname)return;const r=l(p.pathname+p.hash);null!=r&&null!=(o=r.comment)&&o.summary&&(y.current=t.target,m(!0),h(r.comment),w())},n=t=>{t.target===y.current&&m(!1)};return document.addEventListener("mouseenter",t,!0),document.addEventListener("focus",t,!0),document.addEventListener("mouseleave",n,!0),document.addEventListener("blur",n,!0),document.addEventListener("scroll",w),()=>{document.removeEventListener("mouseenter",t,!0),document.removeEventListener("focus",t,!0),document.removeEventListener("mouseleave",n,!0),document.removeEventListener("blur",n,!0),document.removeEventListener("scroll",w)}}),[e]),(0,o.useEffect)((()=>{w()})),o.createElement("div",{ref:k},n,o.createElement("div",{ref:f,className:(0,s.Z)(r,"padding--md margin-horiz--md",u&&c)},d&&o.createElement(i.Z,{comment:d,full:!1})))}},8617:(t,n,e)=>{"use strict";e.d(n,{Gr:()=>i,RU:()=>c,gs:()=>r,in:()=>s,rG:()=>a});var o=e(2784);const p=o.createContext({lookup:{},urlLookup:{}});function r(t){let{children:n,lookup:e,urlLookup:r}=t;return o.createElement(p.Provider,{value:{lookup:e,urlLookup:r}},n)}function c(t){const{lookup:n}=(0,o.useContext)(p);return n[t]}function s(){const{lookup:t}=(0,o.useContext)(p);return n=>{if("number"==typeof(null==n?void 0:n.project))return t[n.project][n.id]}}function a(){const{urlLookup:t,lookup:n}=(0,o.useContext)(p);return e=>{var o;const p=t[e];return p?(null==(o=n[p.projectId])?void 0:o[p.id])??null:null}}function i(t){if(t)return t.href}},68:(t,n,e)=>{"use strict";e.d(n,{Ld:()=>s,Y0:()=>c,s2:()=>a});var o=e(2784),p=e(822);const r=o.createContext(null);function c(t){let{children:n}=t;const e=(0,p.p)(),c=(0,o.useMemo)((()=>function(t,n){const{plain:e}=t,o=Object.create(null),p=t.styles.reduce(((t,e)=>{const{languages:o,style:p}=e;return o&&!o.includes(n)||e.types.forEach((n=>{t[n]={...t[n],...p}})),t}),o);return p.root=e,p.plain={...e,backgroundColor:null},p}(e,"typescript")),[e]);return o.createElement(r.Provider,{value:c},n)}function s(t){void 0===t&&(t="plain");const n=(0,o.useContext)(r);return{className:`token ${t}`,style:n[t]??n.plain}}function a(t){void 0===t&&(t="plain");const n=(0,o.useContext)(r);return n[t]??n.plain}},7708:(t,n,e)=>{"use strict";e.d(n,{It:()=>m,Wy:()=>l,mN:()=>u});var o=e(2784),p=e(1263),r=e(9741);const c="api-filters",s=p.Z.canUseDOM?localStorage.getItem(c):null,a=s?JSON.parse(s):{inherited:!0,private:!1},i=o.createContext([a,()=>{}]);function l(t){let{children:n}=t;const[e,p]=(0,o.useState)(a),s=(0,r.Z)();return o.createElement(i.Provider,{value:[e,t=>{s&&localStorage.setItem(c,JSON.stringify(t)),p(t)}]},n)}function u(){return(0,o.useContext)(i)}function m(t,n){var e,o;const p=(null==(e=n.flags)?void 0:e.isPrivate)||(null==(o=n.flags)?void 0:o.isProtected);if(!t.private&&p)return!1;const r=!!n.inheritedFrom;return!(!t.inherited&&r)}},6047:(t,n,e)=>{"use strict";e.d(n,{Z:()=>u});var o=e(7896),p=e(2784),r=e(9055);const c="icon_Fw4I";function s(t){return p.createElement("svg",(0,o.Z)({viewBox:"0 0 24 24",fill:"

10currentColor"},t),p.createElement("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"}))}function a(t){return p.createElement("svg",(0,o.Z)({viewBox:"0 0 24 24",fill:"currentColor"},t),p.createElement("path",{d:"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"}))}function i(t){return p.createElement("svg",(0,o.Z)({viewBox:"0 0 24 24",fill:"currentColor"},t),p.createElement("path",{d:"M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"}))}function l(t){return p.createElement("svg",(0,o.Z)({viewBox:"0 0 24 24",fill:"currentColor"},t),p.createElement("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"}))}function u(t){const n=(0,p.useMemo)((()=>{switch(t.type){case"tip":return l;case"caution":return a;case"danger":return i;default:return s}}),[t.type]);return p.createElement(p.Fragment,null,p.createElement(r.Z,(0,o.Z)({icon:p.createElement(n,{className:c})},t)))}},4141:(t,n,e)=>{"use strict";e.d(n,{Z:()=>s});var o=e(7896),p=e(2784),r=e(6277);const c="iconEdit_N_05";function s(t){let{className:n,...e}=t;

10return p.createElement("svg",(0,o.Z)({fill:"currentColor",width:"24px",height:"24px",viewBox:"0 0 24 24",className:(0,r.Z)(c,n),"aria-hidden":"true"},e),p.createElement("path",{d:"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"}))}},4648:(t,n,e)=>{"use strict";e.d(n,{Z:()=>r});var o=e(7896),p=e(2784);function r(t){return p.createElement("svg",(0,o.Z)({viewBox:"0 0 24 24",style:{width:16,height:16,marginTop:"0.1rem"}},t),p.createElement("path",{d:"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",fill:"currentColor"}))}},6155:(t,n,e)=>{var o={"./locale":9394,"./locale.js":9394};function p(t){var n=r(t);return e(n)}function r(t){if(!e.o(o,t)){var n=new Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}return o[t]}p.keys=function(){return Object.keys(o)},p.resolve=r,t.exports=p,p.id=6155}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.