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:()=>h});var o=e(2784),p=e(2104),r=e(9072),s=e(6183),c=e(1930),a=e(8617),i=e(68),l=e(7708),u=e(532),m=e(7390),d=e(9741);function h(t){var n,e,h;let{route:k}=t;const y=(0,a.RU)(k.projectId),f=y[k.reflectionId],[M]=(0,l.mN)(),w=(0,d.Z)(),D=(0,o.useMemo)((()=>{const t=[];if(!f.groups||f.kind===m.W.Project)return t;for(const n of f.groups)if(t.push({value:n.title,id:n.title,level:2}),n.children)for(const e of n.children){const n=y[e];!n||n.hasOwnPage||w&&!(0,l.It)(M,n)||t.push({value:`<code>${n.name}</code>`,id:n.anchor,level:3})}return t}),[M,f,w]);return o.createElement(s.b,{content:{frontMatter:{},metadata:{id:f.docId,unversionedId:f.docId,version:"current",title:f.name,description:null==(n=f.comment)?void 0:n.summaryText,slug:f.url,permalink:f.url,editUrl:(null==(e=f.sources)||null==(h=e[0])?void 0:h.url)??void 0,draft:!1,tags:[],frontMatter:{},next:f.next,previous:f.previous},toc:D,assets:{}}},o.createElement(i.Y0,null,o.createElement(p.Z,null),o.createElement(u.Z,null,o.createElement(r.Z,null,o.createElement(c.Z,{reflection:f})))))}},6173:(t,n,e)=>{"use strict";e.d(n,{Z:()=>oxt});var o={};e.r(o),e.d(o,{content_0_0:()=>a,content_0_10:()=>M,content_0_100:()=>tn,content_0_1000:()=>Gf,content_0_1002:()=>Bf,content_0_1004:()=>Uf,content_0_1006:()=>qf,content_0_1008:()=>Of,content_0_1010:()=>Hf,content_0_1012:()=>Kf,content_0_1014:()=>Qf,content_0_1016:()=>nM,content_0_1018:()=>oM,content_0_102:()=>en,content_0_1020:()=>rM,content_0_1022:()=>cM,content_0_1024:()=>iM,content_0_104:()=>pn,content_0_106:()=>sn,content_0_108:()=>an,content_0_110:()=>un,content_0_112:()=>dn,content_0_114:()=>kn,content_0_116:()=>fn,content_0_118:()=>wn,content_0_12:()=>D,content_0_120:()=>_n,content_0_122:()=>gn,content_0_124:()=>Cn,content_0_126:()=>vn,content_0_128:()=>Ln,content_0_130:()=>Nn,content_0_132:()=>En,content_0_134:()=>zn,content_0_136:()=>In,content_0_138:()=>Gn,content_0_14:()=>X,content_0_140:()=>Bn,content_0_142:()=>Un,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:()=>ce,content_0_162:()=>ie,content_0_164:()=>ue,content_0_166:()=>de,content_0_168:()=>ke,content_0_170:()=>fe,content_0_172:()=>we,content_0_174:()=>_e,content_0_176:()=>ge,content_0_178:()=>Ce,content_0_18:()=>T,content_0_180:()=>ve,content_0_182:()=>Le,content_0_184:()=>Ne,content_0_186:()=>Ee,content_0_188:()=>ze,content_0_190:()=>Ie,content_0_192:()=>Ge,content_0_194:()=>Be,content_0_196:()=>Ue,content_0_198:()=>qe,content_0_2:()=>l,content_0_20:()=>b,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:()=>co,content_0_216:()=>io,content_0_218:()=>uo,content_0_22:()=>Z,content_0_220:()=>ho,content_0_222:()=>yo,content_0_224:()=>Mo,content_0_226:()=>Do,content_0_228:()=>Xo,content_0_230:()=>xo,content_0_232:()=>To,content_0_234:()=>bo,content_0_236:()=>Zo,content_0_238:()=>Ao,content_0_24:()=>A,content_0_240:()=>Ro,content_0_242:()=>So,content_0_244:()=>Wo,content_0_246:()=>Po,content_0_248:()=>Fo,content_0_250:()=>Vo,content_0_252:()=>jo,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:()=>
10sp,content_0_268:()=>ap,content_0_270:()=>lp,content_0_272:()=>mp,content_0_274:()=>hp,content_0_276:()=>yp,content_0_278:()=>Mp,content_0_28:()=>S,content_0_280:()=>Dp,content_0_282:()=>Xp,content_0_284:()=>xp,content_0_286:()=>Tp,content_0_288:()=>bp,content_0_290:()=>Zp,content_0_292:()=>Ap,content_0_294:()=>Rp,content_0_296:()=>Sp,content_0_298:()=>Wp,content_0_30:()=>W,content_0_300:()=>Pp,content_0_302:()=>Fp,content_0_304:()=>Vp,content_0_306:()=>jp,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:()=>P,content_0_320:()=>sr,content_0_322:()=>ar,content_0_324:()=>lr,content_0_326:()=>mr,content_0_328:()=>hr,content_0_330:()=>yr,content_0_332:()=>Mr,content_0_334:()=>Dr,content_0_336:()=>Xr,content_0_338:()=>xr,content_0_34:()=>F,content_0_340:()=>Tr,content_0_342:()=>br,content_0_344:()=>Zr,content_0_346:()=>Ar,content_0_348:()=>Rr,content_0_350:()=>Sr,content_0_352:()=>Wr,content_0_354:()=>Pr,content_0_356:()=>Fr,content_0_358:()=>Vr,content_0_36:()=>V,content_0_360:()=>jr,content_0_362:()=>$r,content_0_364:()=>Yr,content_0_366:()=>Jr,content_0_368:()=>ts,content_0_370:()=>es,content_0_372:()=>ps,content_0_374:()=>ss,content_0_376:()=>as,content_0_378:()=>ls,content_0_38:()=>j,content_0_380:()=>ms,content_0_382:()=>hs,content_0_384:()=>ys,content_0_386:()=>Ms,content_0_388:()=>Ds,content_0_390:()=>Xs,content_0_392:()=>xs,content_0_394:()=>Ts,content_0_396:()=>bs,content_0_398:()=>Zs,content_0_4:()=>m,content_0_40:()=>$,content_0_400:()=>As,content_0_402:()=>Rs,content_0_404:()=>Ss,content_0_406:()=>Ws,content_0_408:()=>Ps,content_0_410:()=>Fs,content_0_412:()=>Vs,content_0_414:()=>js,content_0_416:()=>$s,content_0_418:()=>Ys,content_0_42:()=>Y,content_0_420:()=>Js,content_0_422:()=>tc,content_0_424:()=>ec,content_0_426:()=>pc,content_0_428:()=>sc,content_0_430:()=>ac,content_0_432:()=>lc,content_0_434:()=>mc,content_0_436:()=>hc,content_0_438:()=>yc,content_0_44:()=>J,content_0_440:()=>Mc,content_0_442:()=>Dc,content_0_444:()=>Xc,content_0_446:()=>xc,content_0_448:()=>Tc,content_0_450:()=>bc,content_0_452:()=>Zc,content_0_454:()=>Ac,content_0_456:()=>Rc,content_0_458:()=>Sc,content_0_46:()=>tt,content_0_460:()=>Wc,content_0_462:()=>Pc,content_0_464:()=>Fc,content_0_466:()=>Vc,content_0_468:()=>jc,content_0_470:()=>$c,content_0_472:()=>Yc,content_0_474:()=>Jc,content_0_476:()=>ta,content_0_478:()=>ea,content_0_48:()=>et,content_0_480:()=>pa,content_0_482:()=>sa,content_0_484:()=>aa,content_0_486:()=>la,content_0_488:()=>ma,content_0_490:()=>ha,content_0_492:()=>ya,content_0_494:()=>Ma,content_0_496:()=>Da,content_0_498:()=>Xa,content_0_50:()=>pt,content_0_500:()=>xa,content_0_502:()=>Ta,content_0_504:()=>ba,content_0_506:()=>Za,content_0_508:()=>Aa,content_0_510:()=>Ra,content_0_512:()=>Sa,content_0_514:()=>Wa,content_0_516:()=>Pa,content_0_518:()=>Fa,content_0_52:()=>st,content_0_520:()=>Va,content_0_522:()=>ja,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:()=>si,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:()=>Mi,content_0_550:()=>Di,content_0_552:()=>Xi,content_0_554:()=>xi,content_0_556:()=>Ti,content_0_558:()=>bi,content_0_56:()=>lt,content_0_560:()=>Zi,content_0_562:()=>Ai,content_0_564:()=>Ri,content_0_566:()=>Si,content_0_568:()=>Wi,content_0_570:()=>Pi,content_0_572:()=>Fi,content_0_574:()=>Vi,content_0_576:()=>ji,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:()=>sl,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:()=>Ml,content_0_604:()=>Dl,content_0_606:()=>Xl,content_0_608:()=>xl,content_0_610:()=>Tl,content_0_612:()=>bl,content_0_614:()=>Zl,content_0_616:()=>Al,content_0_618:()=>Rl,content_0_62:()=>yt,content_0_620:()=>Sl,content_0_622:()=>Wl,content_0_624:()=>Pl,content_0_626:()=>Fl,content_0_628:()=>Vl,content_0_630:()=>jl,content_0_632:()=>$l,content_0_634:()=>Yl,content_0_636:()=>Jl,content_0_638:()=>tu,content_0_64:()=>Mt,content_0_640:()=>eu,content_0_642:()=>pu,content_0_644:()=>su,content_0_646:()=>au,content_0_648:()=>lu,content_0_650:()=>mu,content_0_652:()=>hu,content_0_654:()=>yu,content_0_656:()=>Mu,content_0_658:()=>Du,content_0_66:()=>Dt,content_0_660:()=>Xu,content_0_662:()=>xu,content_0_664:()=>Tu,content_0_666:()=>bu,content_0_668:()=>Zu,content_0_670:()=>Au,content_0_672:()=>Ru,content_0_674:()=>Su,content_0_676:()=>Wu,content_0_678:()=>Pu,content_0_68:()=>Xt,content_0_680:()=>Fu,content_0_682:()=>Vu,content_0_684:()=>ju,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:()=>sm,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:()=>Mm,content_0_712:()=>Dm,content_0_714:()=>Xm,content_0_716:()=>xm,content_0_718:()=>Tm,content_0_72:()=>Tt,content_0_720:()=>bm,content_0_722:()=>Zm,content_0_724:()=>Am,content_0_726:()=>Rm,content_0_728:()=>Sm,content_0_730:()=>Wm,content_0_732:()=>Pm,content_0_734:()=>Fm,content_0_736:()=>Vm,content_0_738:()=>jm,content_0_74:()=>bt,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:()=>sd,content_0_754:()=>ad,content_0_756:()=>ld,content_0_758:()=>md,content_0_76:()=>Zt,content_0_760:()=>hd,content_0_762:()=>yd,content_0_764:()=>Md,content_0_766:()=>Dd,content_0_768:()=>Xd,content_0_770:()=>xd,content_0_772:()=>Td,content_0_774:()=>bd,content_0_776:()=>Zd,content_0_778:()=>Ad,content_0_78:()=>At,content_0_780:()=>Rd,content_0_782:()=>Sd,content_0_784:()=>Wd,content_0_786:()=>Pd,content_0_788:()=>Fd,content_0_790:()=>Vd,content_0_792:()=>jd,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:()=>sh,content_0_808:()=>ah,content_0_810:()=>lh,content_0_812:()=>mh,content_0_814:()=>hh,content_0_816:()=>yh,content_0_818:()=>Mh,content_0_82:()=>St,content_0_820:()=>Dh,content_0_822:()=>Xh,content_0_824:()=>xh,content_0_826:()=>Th,content_0_828:()=>bh,content_0_830:()=>Zh,content_0_832:()=>Ah,content_0_834:()=>Rh,content_0_836:()=>Sh,content_0_838:()=>Wh,content_0_84:()=>Wt,content_0_840:()=>Ph,content_0_842:()=>Fh,content_0_844:()=>Vh,content_0_846:()=>jh,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:()=>Pt,content_0_860:()=>sk,content_0_862:()=>ak,content_0_864:()=>lk,content_0_866:()=>mk,content_0_868:()=>hk,content_0_870:()=>yk,content_0_872:()=>Mk,content_0_874:()=>Dk,content_0_876:()=>Xk,content_0_878:()=>xk,content_0_88:()=>Ft,content_0_880:()=>Tk,content_0_882:()=>bk,content_0_884:()=>Zk,content_0_886:()=>Ak,content_0_888:()=>Rk,content_0_890:()=>Sk,content_0_892:()=>Wk,content_0_894:()=>Pk,content_0_896:()=>Fk,content_0_898:()=>Vk,content_0_90:()=>Vt,content_0_900:()=>jk,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:()=>sy,content_0_916:()=>ay,content_0_918:()=>ly,content_0_92:()=>jt,content_0_920:()=>my,content_0_922:()=>hy,content_0_924:()=>yy,content_0_926:()=>My,content_0_928:()=>Dy,content_0_930:()=>Xy,content_0_932:()=>xy,content_0_934:()=>Ty,content_0_936:()=>by,content_0_938:()=>Zy,content_0_94:()=>$t,content_0_940:()=>Ay,content_0_942:()=>Ry,content_0_944:()=>Sy,content_0_946:()=>Wy,content_0_948:()=>Py,content_0_950:()=>Fy,content_0_952:()=>Vy,content_0_954:()=>jy,content_0_956:()=>$y,content_0_958:()=>Yy,content_0_96:()=>Yt,content_0_960:()=>Jy,content_0_962:()=>tf,content_0_964:()=>ef,content_0_966:()=>pf,content_0_968:()=>sf,content_0_970:()=>af,content_0_972:()=>uf,content_0_974:()=>df,content_0_976:()=>kf,content_0_978:()=>ff,content_0_98:()=>Jt,content_0_980:()=>wf,content_0_982:()=>_f,content_0_984:()=>gf,content_0_986:()=>Cf,content_0_988:()=>vf,content_0_990:()=>Lf,content_0_992:()=>Nf,content_0_994:()=>Ef,content_0_996:()=>zf,content_0_998:()=>If,content_2220_0:()=>uM,content_2220_10:()=>_M,content_2220_100:()=>oD,content_2220_1000:()=>GS,content_2220_1002:()=>BS,content_2220_1004:()=>US,content_2220_1006:()=>qS,content_2220_1008:()=>OS,content_2220_1010:()=>HS,content_2220_1012:()=>KS,content_2220_1014:()=>QS,content_2220_1016:()=>nI,content_2220_1018:()=>oI,content_2220_102:()=>rD,content_2220_1020:()=>rI,content_2220_1022:()=>cI,content_2220_1024:()=>iI,content_2220_1026:()=>uI,content_2220_1028:()=>dI,content_2220_1030:()=>kI,content_2220_1032:()=>fI,content_2220_1034:()=>wI,content_2220_1036:()=>_I,content_2220_1038:()=>gI,content_2220_104:()=>
10cD,content_2220_1040:()=>CI,content_2220_1042:()=>vI,content_2220_1044:()=>LI,content_2220_1046:()=>NI,content_2220_1048:()=>EI,content_2220_1050:()=>zI,content_2220_1052:()=>II,content_2220_1054:()=>GI,content_2220_1056:()=>BI,content_2220_1058:()=>UI,content_2220_106:()=>iD,content_2220_1060:()=>qI,content_2220_1062:()=>OI,content_2220_1064:()=>HI,content_2220_1066:()=>KI,content_2220_1068:()=>QI,content_2220_1070:()=>nW,content_2220_1072:()=>oW,content_2220_1074:()=>rW,content_2220_1076:()=>cW,content_2220_1078:()=>iW,content_2220_108:()=>uD,content_2220_1080:()=>uW,content_2220_1082:()=>dW,content_2220_1084:()=>kW,content_2220_1086:()=>fW,content_2220_1088:()=>wW,content_2220_1090:()=>_W,content_2220_1092:()=>gW,content_2220_1094:()=>CW,content_2220_1096:()=>vW,content_2220_1098:()=>LW,content_2220_110:()=>dD,content_2220_1100:()=>NW,content_2220_1102:()=>EW,content_2220_1104:()=>zW,content_2220_1106:()=>IW,content_2220_1108:()=>GW,content_2220_1110:()=>BW,content_2220_1112:()=>UW,content_2220_1114:()=>qW,content_2220_1116:()=>OW,content_2220_1118:()=>HW,content_2220_112:()=>kD,content_2220_1120:()=>KW,content_2220_1122:()=>QW,content_2220_1124:()=>nG,content_2220_1126:()=>oG,content_2220_1128:()=>rG,content_2220_1130:()=>cG,content_2220_1132:()=>iG,content_2220_1134:()=>uG,content_2220_1136:()=>dG,content_2220_1138:()=>kG,content_2220_114:()=>fD,content_2220_1140:()=>fG,content_2220_1142:()=>wG,content_2220_1144:()=>_G,content_2220_1146:()=>gG,content_2220_1148:()=>CG,content_2220_1150:()=>vG,content_2220_1152:()=>LG,content_2220_1154:()=>NG,content_2220_1156:()=>EG,content_2220_1158:()=>zG,content_2220_116:()=>wD,content_2220_1160:()=>IG,content_2220_1162:()=>GG,content_2220_1164:()=>BG,content_2220_1166:()=>UG,content_2220_1168:()=>qG,content_2220_1170:()=>OG,content_2220_1172:()=>HG,content_2220_1174:()=>KG,content_2220_1176:()=>QG,content_2220_1178:()=>nP,content_2220_118:()=>_D,content_2220_1180:()=>oP,content_2220_1182:()=>rP,content_2220_1184:()=>cP,content_2220_1186:()=>iP,content_2220_1188:()=>uP,content_2220_1190:()=>dP,content_2220_1192:()=>kP,content_2220_1194:()=>fP,content_2220_1196:()=>wP,content_2220_1198:()=>_P,content_2220_12:()=>gM,content_2220_120:()=>gD,content_2220_1200:()=>gP,content_2220_1202:()=>CP,content_2220_1204:()=>vP,content_2220_1206:()=>LP,content_2220_1208:()=>NP,content_2220_1210:()=>EP,content_2220_1212:()=>zP,content_2220_1214:()=>IP,content_2220_1216:()=>GP,content_2220_1218:()=>BP,content_2220_122:()=>CD,content_2220_1220:()=>UP,content_2220_1222:()=>qP,content_2220_1224:()=>OP,content_2220_1226:()=>HP,content_2220_1228:()=>KP,content_2220_1230:()=>QP,content_2220_1232:()=>nB,content_2220_1234:()=>oB,content_2220_1236:()=>rB,content_2220_1238:()=>cB,content_2220_124:()=>vD,content_2220_1240:()=>iB,content_2220_1242:()=>uB,content_2220_1244:()=>dB,content_2220_1246:()=>kB,content_2220_1248:()=>fB,content_2220_1250:()=>wB,content_2220_1252:()=>_B,content_2220_1254:()=>gB,content_2220_1256:()=>CB,content_2220_1258:()=>vB,content_2220_126:()=>LD,content_2220_1260:()=>LB,content_2220_1262:()=>NB,content_2220_1264:()=>EB,content_2220_1266:()=>zB,content_2220_1268:()=>IB,content_2220_1270:()=>GB,content_2220_1272:()=>BB,content_2220_1274:()=>UB,content_2220_1276:()=>qB,content_2220_1278:()=>OB,content_2220_128:()=>ND,content_2220_1280:()=>HB,content_2220_1282:()=>KB,content_2220_1284:()=>QB,content_2220_1286:()=>nF,content_2220_1288:()=>oF,content_2220_1290:()=>rF,content_2220_1292:()=>cF,content_2220_1294:()=>iF,content_2220_1296:()=>uF,content_2220_1298:()=>dF,content_2220_130:()=>ED,content_2220_1300:()=>
10kF,content_2220_1302:()=>fF,content_2220_1304:()=>wF,content_2220_1306:()=>_F,content_2220_1308:()=>gF,content_2220_1310:()=>CF,content_2220_1312:()=>vF,content_2220_1314:()=>LF,content_2220_1316:()=>NF,content_2220_1318:()=>EF,content_2220_132:()=>zD,content_2220_1320:()=>zF,content_2220_1322:()=>IF,content_2220_1324:()=>GF,content_2220_1326:()=>BF,content_2220_1328:()=>UF,content_2220_1330:()=>qF,content_2220_1332:()=>OF,content_2220_1334:()=>HF,content_2220_1336:()=>KF,content_2220_1338:()=>QF,content_2220_134:()=>ID,content_2220_1340:()=>nU,content_2220_1342:()=>oU,content_2220_1344:()=>rU,content_2220_1346:()=>cU,content_2220_1348:()=>iU,content_2220_1350:()=>uU,content_2220_1352:()=>dU,content_2220_1354:()=>kU,content_2220_1356:()=>fU,content_2220_1358:()=>wU,content_2220_136:()=>GD,content_2220_1360:()=>_U,content_2220_1362:()=>gU,content_2220_1364:()=>CU,content_2220_1366:()=>vU,content_2220_1368:()=>LU,content_2220_1370:()=>NU,content_2220_1372:()=>EU,content_2220_1374:()=>zU,content_2220_1376:()=>IU,content_2220_1378:()=>GU,content_2220_138:()=>BD,content_2220_1380:()=>BU,content_2220_1382:()=>UU,content_2220_1384:()=>qU,content_2220_1386:()=>OU,content_2220_1388:()=>HU,content_2220_1390:()=>KU,content_2220_1392:()=>QU,content_2220_1394:()=>nV,content_2220_1396:()=>oV,content_2220_1398:()=>rV,content_2220_14:()=>CM,content_2220_140:()=>UD,content_2220_1400:()=>cV,content_2220_1402:()=>iV,content_2220_1404:()=>uV,content_2220_1406:()=>dV,content_2220_1408:()=>kV,content_2220_1410:()=>fV,content_2220_1412:()=>wV,content_2220_1414:()=>_V,content_2220_1416:()=>gV,content_2220_1418:()=>CV,content_2220_142:()=>qD,content_2220_1420:()=>vV,content_2220_1422:()=>LV,content_2220_1424:()=>NV,content_2220_1426:()=>EV,content_2220_1428:()=>zV,content_2220_1430:()=>IV,content_2220_1432:()=>GV,content_2220_1434:()=>BV,content_2220_1436:()=>UV,content_2220_1438:()=>qV,content_2220_144:()=>OD,content_2220_1440:()=>OV,content_2220_1442:()=>HV,content_2220_1444:()=>KV,content_2220_1446:()=>QV,content_2220_1448:()=>nq,content_2220_1450:()=>oq,content_2220_1452:()=>rq,content_2220_1454:()=>cq,content_2220_1456:()=>iq,content_2220_1458:()=>uq,content_2220_146:()=>HD,content_2220_1460:()=>dq,content_2220_1462:()=>kq,content_2220_1464:()=>fq,content_2220_1466:()=>wq,content_2220_1468:()=>_q,content_2220_1470:()=>gq,content_2220_1472:()=>Cq,content_2220_1474:()=>vq,content_2220_1476:()=>Lq,content_2220_1478:()=>Nq,content_2220_148:()=>KD,content_2220_1480:()=>Eq,content_2220_1482:()=>zq,content_2220_1484:()=>Iq,content_2220_1486:()=>Gq,content_2220_1488:()=>Bq,content_2220_1490:()=>Uq,content_2220_1492:()=>qq,content_2220_1494:()=>Oq,content_2220_1496:()=>Hq,content_2220_1498:()=>Kq,content_2220_150:()=>QD,content_2220_1500:()=>Qq,content_2220_1502:()=>nj,content_2220_1504:()=>oj,content_2220_1506:()=>rj,content_2220_1508:()=>cj,content_2220_1510:()=>ij,content_2220_1512:()=>uj,content_2220_1514:()=>dj,content_2220_1516:()=>kj,content_2220_1518:()=>fj,content_2220_152:()=>n_,content_2220_1520:()=>wj,content_2220_1522:()=>_j,content_2220_1524:()=>gj,content_2220_1526:()=>Cj,content_2220_1528:()=>vj,content_2220_1530:()=>Lj,content_2220_1532:()=>Nj,content_2220_1534:()=>Ej,content_2220_1536:()=>zj,content_2220_1538:()=>Ij,content_2220_154:()=>
10o_,content_2220_1540:()=>Gj,content_2220_1542:()=>Bj,content_2220_1544:()=>Uj,content_2220_1546:()=>qj,content_2220_1548:()=>Oj,content_2220_1550:()=>Hj,content_2220_1552:()=>Kj,content_2220_1554:()=>Qj,content_2220_1556:()=>nO,content_2220_1558:()=>oO,content_2220_156:()=>r_,content_2220_1560:()=>rO,content_2220_1562:()=>cO,content_2220_1564:()=>iO,content_2220_1566:()=>uO,content_2220_1568:()=>dO,content_2220_1570:()=>kO,content_2220_1572:()=>fO,content_2220_1574:()=>wO,content_2220_1576:()=>_O,content_2220_1578:()=>gO,content_2220_158:()=>c_,content_2220_1580:()=>CO,content_2220_1582:()=>vO,content_2220_1584:()=>LO,content_2220_1586:()=>NO,content_2220_1588:()=>EO,content_2220_1590:()=>zO,content_2220_1592:()=>IO,content_2220_1594:()=>GO,content_2220_1596:()=>BO,content_2220_1598:()=>UO,content_2220_16:()=>vM,content_2220_160:()=>i_,content_2220_1600:()=>qO,content_2220_1602:()=>OO,content_2220_1604:()=>HO,content_2220_1606:()=>KO,content_2220_1608:()=>QO,content_2220_1610:()=>n$,content_2220_1612:()=>o$,content_2220_1614:()=>r$,content_2220_1616:()=>c$,content_2220_1618:()=>i$,content_2220_162:()=>u_,content_2220_1620:()=>u$,content_2220_1622:()=>d$,content_2220_1624:()=>k$,content_2220_1626:()=>f$,content_2220_1628:()=>w$,content_2220_1630:()=>_$,content_2220_1632:()=>g$,content_2220_1634:()=>C$,content_2220_1636:()=>v$,content_2220_1638:()=>L$,content_2220_164:()=>d_,content_2220_1640:()=>N$,content_2220_1642:()=>E$,content_2220_1644:()=>z$,content_2220_1646:()=>I$,content_2220_1648:()=>G$,content_2220_1650:()=>B$,content_2220_1652:()=>U$,content_2220_1654:()=>q$,content_2220_1656:()=>O$,content_2220_1658:()=>H$,content_2220_166:()=>k_,content_2220_1660:()=>K$,content_2220_1662:()=>Q$,content_2220_1664:()=>nH,content_2220_1666:()=>oH,content_2220_1668:()=>rH,content_2220_1670:()=>cH,content_2220_1672:()=>iH,content_2220_1674:()=>uH,content_2220_1676:()=>dH,content_2220_1678:()=>kH,content_2220_168:()=>f_,content_2220_1680:()=>fH,content_2220_1682:()=>wH,content_2220_1684:()=>_H,content_2220_1686:()=>gH,content_2220_1688:()=>CH,content_2220_1690:()=>vH,content_2220_1692:()=>LH,content_2220_1694:()=>NH,content_2220_1696:()=>EH,content_2220_1698:()=>zH,content_2220_170:()=>w_,content_2220_1700:()=>IH,content_2220_1702:()=>GH,content_2220_1704:()=>BH,content_2220_1706:()=>UH,content_2220_1708:()=>qH,content_2220_1710:()=>OH,content_2220_1712:()=>HH,content_2220_1714:()=>KH,content_2220_1716:()=>QH,content_2220_1718:()=>nY,content_2220_172:()=>__,content_2220_1720:()=>oY,content_2220_1722:()=>rY,content_2220_1724:()=>cY,content_2220_1726:()=>iY,content_2220_1728:()=>uY,content_2220_1730:()=>dY,content_2220_1732:()=>kY,content_2220_1734:()=>fY,content_2220_1736:()=>wY,content_2220_1738:()=>_Y,content_2220_174:()=>g_,content_2220_1740:()=>gY,content_2220_1742:()=>CY,content_2220_1744:()=>vY,content_2220_1746:()=>LY,content_2220_1748:()=>NY,content_2220_1750:()=>EY,content_2220_1752:()=>zY,content_2220_1754:()=>IY,content_2220_1756:()=>GY,content_2220_1758:()=>BY,content_2220_176:()=>C_,content_2220_1760:()=>UY,content_2220_1762:()=>qY,content_2220_1764:()=>OY,content_2220_1766:()=>HY,content_2220_1768:()=>KY,content_2220_1770:()=>QY,content_2220_1772:()=>nK,content_2220_1774:()=>oK,content_2220_1776:()=>rK,content_2220_1778:()=>cK,content_2220_178:()=>v_,content_2220_1780:()=>iK,content_2220_1782:()=>uK,content_2220_1784:()=>dK,content_2220_1786:()=>kK,content_2220_1788:()=>fK,content_2220_1790:()=>wK,content_2220_1792:()=>_K,content_2220_1794:()=>gK,content_2220_1796:()=>CK,content_2220_1798:()=>vK,content_2220_18:()=>LM,content_2220_180:()=>L_,content_2220_1800:()=>LK,content_2220_1802:()=>NK,content_2220_1804:()=>EK,content_2220_1806:()=>zK,content_2220_1808:()=>IK,content_2220_1810:()=>GK,content_2220_1812:()=>BK,content_2220_1814:()=>UK,content_2220_1816:()=>qK,content_2220_1818:()=>OK,content_2220_182:()=>N_,content_2220_1820:()=>HK,content_2220_1822:()=>KK,content_2220_1824:()=>QK,content_2220_1826:()=>nJ,content_2220_1828:()=>oJ,content_2220_1830:()=>rJ,content_2220_1832:()=>cJ,content_2220_1834:()=>iJ,content_2220_1836:()=>uJ,content_2220_1838:()=>dJ,content_2220_184:()=>E_,content_2220_1840:()=>kJ,content_2220_1842:()=>fJ,content_2220_1844:()=>wJ,content_2220_1846:()=>_J,content_2220_1848:()=>gJ,content_2220_1850:()=>CJ,content_2220_1852:()=>vJ,content_2220_1854:()=>LJ,content_2220_1856:()=>NJ,content_2220_1858:()=>EJ,content_2220_186:()=>z_,content_2220_1860:()=>zJ,content_2220_1862:()=>IJ,content_2220_1864:()=>GJ,content_2220_1866:()=>BJ,content_2220_1868:()=>UJ,content_2220_1870:()=>qJ,content_2220_1872:()=>OJ,content_2220_1874:()=>HJ,content_2220_1876:()=>KJ,content_2220_1878:()=>QJ,content_2220_188:()=>I_,content_2220_1880:()=>nQ,content_2220_1882:()=>oQ,content_2220_1884:()=>rQ,content_2220_1886:()=>cQ,content_2220_1888:()=>iQ,content_2220_1890:()=>uQ,content_2220_1892:()=>dQ,content_2220_1894:()=>kQ,content_2220_1896:()=>fQ,content_2220_1898:()=>wQ,content_2220_190:()=>G_,content_2220_1900:()=>_Q,content_2220_1902:()=>gQ,content_2220_1904:()=>
10CQ,content_2220_1906:()=>vQ,content_2220_1908:()=>LQ,content_2220_1910:()=>NQ,content_2220_1912:()=>EQ,content_2220_1914:()=>zQ,content_2220_1916:()=>IQ,content_2220_1918:()=>GQ,content_2220_192:()=>B_,content_2220_1920:()=>BQ,content_2220_1922:()=>UQ,content_2220_1924:()=>qQ,content_2220_1926:()=>OQ,content_2220_1928:()=>HQ,content_2220_1930:()=>KQ,content_2220_1932:()=>QQ,content_2220_1934:()=>n0,content_2220_1936:()=>o0,content_2220_1938:()=>r0,content_2220_194:()=>U_,content_2220_1940:()=>c0,content_2220_1942:()=>i0,content_2220_1944:()=>u0,content_2220_1946:()=>d0,content_2220_1948:()=>k0,content_2220_1950:()=>f0,content_2220_1952:()=>w0,content_2220_1954:()=>_0,content_2220_1956:()=>g0,content_2220_1958:()=>C0,content_2220_196:()=>q_,content_2220_1960:()=>v0,content_2220_1962:()=>L0,content_2220_1964:()=>N0,content_2220_1966:()=>E0,content_2220_1968:()=>z0,content_2220_1970:()=>I0,content_2220_1972:()=>G0,content_2220_1974:()=>B0,content_2220_1976:()=>U0,content_2220_1978:()=>q0,content_2220_198:()=>O_,content_2220_1980:()=>O0,content_2220_1982:()=>H0,content_2220_1984:()=>K0,content_2220_1986:()=>Q0,content_2220_1988:()=>n2,content_2220_1990:()=>o2,content_2220_1992:()=>r2,content_2220_1994:()=>c2,content_2220_1996:()=>i2,content_2220_1998:()=>u2,content_2220_2:()=>dM,content_2220_20:()=>NM,content_2220_200:()=>H_,content_2220_2000:()=>d2,content_2220_2002:()=>k2,content_2220_2004:()=>f2,content_2220_2006:()=>w2,content_2220_2008:()=>_2,content_2220_2010:()=>g2,content_2220_2012:()=>C2,content_2220_2014:()=>v2,content_2220_2016:()=>L2,content_2220_2018:()=>N2,content_2220_202:()=>K_,content_2220_2020:()=>E2,content_2220_2022:()=>z2,content_2220_2024:()=>I2,content_2220_2026:()=>G2,content_2220_2028:()=>B2,content_2220_2030:()=>U2,content_2220_2032:()=>q2,content_2220_2034:()=>O2,content_2220_2036:()=>H2,content_2220_2038:()=>K2,content_2220_204:()=>Q_,content_2220_2040:()=>Q2,content_2220_2042:()=>n1,content_2220_2044:()=>o1,content_2220_2046:()=>r1,content_2220_2048:()=>c1,content_2220_2050:()=>i1,content_2220_2052:()=>u1,content_2220_2054:()=>d1,content_2220_2056:()=>k1,content_2220_2058:()=>f1,content_2220_206:()=>nX,content_2220_2060:()=>w1,content_2220_2062:()=>_1,content_2220_2064:()=>g1,content_2220_2066:()=>C1,content_2220_2068:()=>v1,content_2220_2070:()=>L1,content_2220_2072:()=>N1,content_2220_2074:()=>E1,content_2220_2076:()=>z1,content_2220_2078:()=>I1,content_2220_208:()=>oX,content_2220_2080:()=>G1,content_2220_2082:()=>B1,content_2220_2084:()=>U1,content_2220_2086:()=>q1,content_2220_2088:()=>O1,content_2220_2090:()=>H1,content_2220_2092:()=>K1,content_2220_2094:()=>Q1,content_2220_2096:()=>n3,content_2220_2098:()=>o3,content_2220_210:()=>rX,content_2220_2100:()=>r3,content_2220_2102:()=>c3,content_2220_2104:()=>i3,content_2220_2106:()=>u3,content_2220_2108:()=>d3,content_2220_2110:()=>k3,content_2220_2112:()=>f3,content_2220_2114:()=>w3,content_2220_2116:()=>_3,content_2220_2118:()=>g3,content_2220_212:()=>cX,content_2220_2120:()=>C3,content_2220_2122:()=>v3,content_2220_2124:()=>L3,content_2220_2126:()=>N3,content_2220_2128:()=>E3,content_2220_2130:()=>z3,content_2220_2132:()=>I3,content_2220_2134:()=>G3,content_2220_2136:()=>B3,content_2220_2138:()=>U3,content_2220_214:()=>iX,content_2220_2140:()=>q3,content_2220_2142:()=>O3,content_2220_2144:()=>H3,content_2220_2146:()=>K3,content_2220_2148:()=>Q3,content_2220_2150:()=>n4,content_2220_2152:()=>o4,content_2220_2154:()=>r4,content_2220_2156:()=>c4,content_2220_2158:()=>i4,content_2220_216:()=>uX,content_2220_2160:()=>u4,content_2220_2162:()=>d4,content_2220_2164:()=>k4,content_2220_2166:()=>f4,content_2220_2168:()=>w4,content_2220_2170:()=>_4,content_2220_2172:()=>g4,content_2220_2174:()=>C4,content_2220_2176:()=>v4,content_2220_2178:()=>L4,content_2220_218:()=>dX,content_2220_2180:()=>N4,content_2220_2182:()=>E4,content_2220_2184:()=>z4,content_2220_2186:()=>I4,content_2220_2188:()=>G4,content_2220_2190:()=>B4,content_2220_2192:()=>U4,content_2220_2194:()=>q4,content_2220_2196:()=>O4,content_2220_2198:()=>H4,content_2220_22:()=>EM,content_2220_220:()=>kX,content_2220_2200:()=>K4,content_2220_2202:()=>Q4,content_2220_2204:()=>n6,content_2220_2206:()=>o6,content_2220_2208:()=>r6,content_2220_2210:()=>c6,content_2220_2212:()=>i6,content_2220_2214:()=>u6,content_2220_2216:()=>d6,content_2220_2218:()=>k6,content_2220_222:()=>fX,content_2220_2220:()=>f6,content_2220_2222:()=>w6,content_2220_2224:()=>_6,content_2220_2226:()=>g6,content_2220_2228:()=>C6,content_2220_2230:()=>v6,content_2220_2232:()=>L6,content_2220_2234:()=>N6,content_2220_2236:()=>E6,content_2220_2238:()=>z6,content_2220_224:()=>wX,content_2220_2240:()=>I6,content_2220_2242:()=>G6,content_2220_2244:()=>B6,content_2220_2246:()=>U6,content_2220_2248:()=>q6,content_2220_2250:()=>O6,content_2220_2252:()=>H6,content_2220_2254:()=>K6,content_2220_2256:()=>Q6,content_2220_2258:()=>n8,content_2220_226:()=>_X,content_2220_2260:()=>o8,content_2220_2262:()=>r8,content_2220_2264:()=>c8,content_2220_2266:()=>i8,content_2220_2268:()=>u8,content_2220_2270:()=>d8,content_2220_2272:()=>k8,content_2220_2274:()=>f8,content_2220_2276:()=>w8,content_2220_2278:()=>_8,content_2220_228:()=>gX,content_2220_2280:()=>g8,content_2220_2282:()=>C8,content_2220_2284:()=>v8,content_2220_2286:()=>L8,content_2220_2288:()=>N8,content_2220_2290:()=>E8,content_2220_2292:()=>z8,content_2220_2294:()=>I8,content_2220_2296:()=>G8,content_2220_2298:()=>B8,content_2220_230:()=>CX,content_2220_2300:()=>U8,content_2220_2302:()=>q8,content_2220_2304:()=>O8,content_2220_2306:()=>H8,content_2220_2308:()=>K8,content_2220_2310:()=>Q8,content_2220_2312:()=>n5,content_2220_2314:()=>o5,content_2220_2316:()=>r5,content_2220_2318:()=>c5,content_2220_232:()=>vX,content_2220_2320:()=>i5,content_2220_2322:()=>u5,content_2220_2324:()=>d5,content_2220_2326:()=>k5,content_2220_2328:()=>f5,content_2220_2330:()=>w5,content_2220_2332:()=>_5,content_2220_2334:()=>g5,content_2220_2336:()=>C5,content_2220_2338:()=>v5,content_2220_234:()=>LX,content_2220_2340:()=>L5,content_2220_2342:()=>N5,content_2220_2344:()=>E5,content_2220_2346:()=>z5,content_2220_2348:()=>I5,content_2220_2350:()=>G5,content_2220_2352:()=>B5,content_2220_2354:()=>U5,content_2220_2356:()=>q5,content_2220_2358:()=>O5,content_2220_236:()=>NX,content_2220_2360:()=>H5,content_2220_2362:()=>K5,content_2220_2364:()=>Q5,content_2220_2366:()=>
10n7,content_2220_2368:()=>o7,content_2220_2370:()=>r7,content_2220_2372:()=>c7,content_2220_2374:()=>i7,content_2220_2376:()=>u7,content_2220_2378:()=>d7,content_2220_238:()=>EX,content_2220_2380:()=>k7,content_2220_2382:()=>f7,content_2220_2384:()=>w7,content_2220_2386:()=>_7,content_2220_2388:()=>g7,content_2220_2390:()=>C7,content_2220_2392:()=>v7,content_2220_2394:()=>L7,content_2220_2396:()=>N7,content_2220_2398:()=>E7,content_2220_24:()=>zM,content_2220_240:()=>zX,content_2220_2400:()=>z7,content_2220_2402:()=>I7,content_2220_2404:()=>G7,content_2220_2406:()=>B7,content_2220_2408:()=>U7,content_2220_2410:()=>q7,content_2220_2412:()=>O7,content_2220_2414:()=>H7,content_2220_2416:()=>K7,content_2220_2418:()=>Q7,content_2220_242:()=>IX,content_2220_2420:()=>n9,content_2220_2422:()=>o9,content_2220_2424:()=>r9,content_2220_2426:()=>c9,content_2220_2428:()=>i9,content_2220_2430:()=>u9,content_2220_2432:()=>d9,content_2220_2434:()=>k9,content_2220_2436:()=>f9,content_2220_2438:()=>w9,content_2220_244:()=>GX,content_2220_2440:()=>_9,content_2220_2442:()=>g9,content_2220_2444:()=>C9,content_2220_2446:()=>v9,content_2220_2448:()=>L9,content_2220_2450:()=>N9,content_2220_2452:()=>E9,content_2220_2454:()=>z9,content_2220_2456:()=>I9,content_2220_2458:()=>G9,content_2220_246:()=>BX,content_2220_2460:()=>B9,content_2220_2462:()=>U9,content_2220_2464:()=>q9,content_2220_2466:()=>O9,content_2220_2468:()=>H9,content_2220_2470:()=>K9,content_2220_2472:()=>Q9,content_2220_2474:()=>ntt,content_2220_2476:()=>ott,content_2220_2478:()=>rtt,content_2220_248:()=>UX,content_2220_2480:()=>ctt,content_2220_2482:()=>itt,content_2220_2484:()=>utt,content_2220_2486:()=>dtt,content_2220_2488:()=>ktt,content_2220_2490:()=>ftt,content_2220_2492:()=>wtt,content_2220_2494:()=>_tt,content_2220_2496:()=>gtt,content_2220_2498:()=>Ctt,content_2220_250:()=>qX,content_2220_2500:()=>vtt,content_2220_2502:()=>Ltt,content_2220_2504:()=>Ntt,content_2220_2506:()=>
10Ett,content_2220_2508:()=>ztt,content_2220_2510:()=>Itt,content_2220_2512:()=>Gtt,content_2220_2514:()=>Btt,content_2220_2516:()=>Utt,content_2220_2518:()=>qtt,content_2220_252:()=>OX,content_2220_2520:()=>Ott,content_2220_2522:()=>Htt,content_2220_2524:()=>Ktt,content_2220_2526:()=>Qtt,content_2220_2528:()=>nnt,content_2220_2530:()=>ont,content_2220_2532:()=>rnt,content_2220_2534:()=>cnt,content_2220_2536:()=>int,content_2220_2538:()=>unt,content_2220_254:()=>HX,content_2220_2540:()=>dnt,content_2220_2542:()=>knt,content_2220_2544:()=>fnt,content_2220_2546:()=>wnt,content_2220_2548:()=>_nt,content_2220_2550:()=>gnt,content_2220_2552:()=>Cnt,content_2220_2554:()=>vnt,content_2220_2556:()=>Lnt,content_2220_2558:()=>Nnt,content_2220_256:()=>KX,content_2220_2560:()=>Ent,content_2220_2562:()=>znt,content_2220_2564:()=>Int,content_2220_2566:()=>Gnt,content_2220_2568:()=>Bnt,content_2220_2570:()=>Unt,content_2220_2572:()=>qnt,content_2220_2574:()=>Ont,content_2220_2576:()=>Hnt,content_2220_2578:()=>Knt,content_2220_258:()=>QX,content_2220_2580:()=>Qnt,content_2220_2582:()=>net,content_2220_2584:()=>oet,content_2220_2586:()=>ret,content_2220_2588:()=>cet,content_2220_2590:()=>iet,content_2220_2592:()=>met,content_2220_2594:()=>het,content_2220_2596:()=>yet,content_2220_2598:()=>Met,content_2220_26:()=>IM,content_2220_260:()=>ng,content_2220_2600:()=>Det,content_2220_2602:()=>Xet,content_2220_2604:()=>xet,content_2220_2606:()=>Tet,content_2220_2608:()=>bet,content_2220_2610:()=>Zet,content_2220_2612:()=>Aet,content_2220_2614:()=>Ret,content_2220_2616:()=>Set,content_2220_2618:()=>Wet,content_2220_262:()=>og,content_2220_2620:()=>Pet,content_2220_2622:()=>Fet,content_2220_2624:()=>Vet,content_2220_2626:()=>jet,content_2220_2628:()=>$et,content_2220_2630:()=>Yet,content_2220_2632:()=>Jet,content_2220_2634:()=>tot,content_2220_2636:()=>eot,content_2220_2638:()=>pot,content_2220_264:()=>rg,content_2220_2640:()=>sot,content_2220_2642:()=>aot,content_2220_2644:()=>lot,content_2220_2646:()=>mot,content_2220_2648:()=>hot,content_2220_2650:()=>yot,content_2220_2652:()=>Mot,content_2220_2654:()=>Dot,content_2220_2656:()=>Xot,content_2220_2658:()=>xot,content_2220_266:()=>cg,content_2220_2660:()=>Tot,content_2220_2662:()=>bot,content_2220_2664:()=>Zot,content_2220_2666:()=>Aot,content_2220_2668:()=>Rot,content_2220_2670:()=>Sot,content_2220_2672:()=>Wot,content_2220_2674:()=>Pot,content_2220_2676:()=>Fot,content_2220_2678:()=>Vot,content_2220_268:()=>ig,content_2220_2680:()=>jot,content_2220_2682:()=>$ot,content_2220_2684:()=>Yot,content_2220_2686:()=>Jot,content_2220_2688:()=>tpt,content_2220_2690:()=>ept,content_2220_2692:()=>ppt,content_2220_2694:()=>spt,content_2220_2696:()=>apt,content_2220_2698:()=>lpt,content_2220_270:()=>ug,content_2220_2700:()=>mpt,content_2220_2702:()=>hpt,content_2220_2704:()=>ypt,content_2220_2706:()=>Mpt,content_2220_2708:()=>Dpt,content_2220_2710:()=>Xpt,content_2220_2712:()=>xpt,content_2220_2714:()=>Tpt,content_2220_2716:()=>bpt,content_2220_2718:()=>Zpt,content_2220_272:()=>dg,content_2220_2720:()=>Apt,content_2220_2722:()=>Rpt,content_2220_2724:()=>Spt,content_2220_2726:()=>Wpt,content_2220_2728:()=>Ppt,content_2220_2730:()=>Fpt,content_2220_2732:()=>Vpt,content_2220_2734:()=>jpt,content_2220_2736:()=>$pt,content_2220_2738:()=>Ypt,content_2220_274:()=>kg,content_2220_2740:()=>Jpt,content_2220_2742:()=>trt,content_2220_2744:()=>ert,content_2220_2746:()=>prt,content_2220_2748:()=>srt,content_2220_2750:()=>art,content_2220_2752:()=>lrt,content_2220_2754:()=>mrt,content_2220_2756:()=>hrt,content_2220_2758:()=>yrt,content_2220_276:()=>fg,content_2220_2760:()=>Mrt,content_2220_2762:()=>Drt,content_2220_2764:()=>Xrt,content_2220_2766:()=>xrt,content_2220_2768:()=>Trt,content_2220_2770:()=>brt,content_2220_2772:()=>Zrt,content_2220_2774:()=>Art,content_2220_2776:()=>Rrt,content_2220_2778:()=>Srt,content_2220_278:()=>wg,content_2220_2780:()=>Wrt,content_2220_2782:()=>Prt,content_2220_2784:()=>Frt,content_2220_2786:()=>Vrt,content_2220_2788:()=>jrt,content_2220_2790:()=>$rt,content_2220_2792:()=>Yrt,content_2220_2794:()=>Jrt,content_2220_2796:()=>tst,content_2220_2798:()=>est,content_2220_28:()=>GM,content_2220_280:()=>_g,content_2220_2800:()=>pst,content_2220_2802:()=>sst,content_2220_2804:()=>ast,content_2220_2806:()=>lst,content_2220_2808:()=>mst,content_2220_2810:()=>hst,content_2220_2812:()=>yst,content_2220_2814:()=>Mst,content_2220_2816:()=>Dst,content_2220_2818:()=>Xst,content_2220_282:()=>gg,content_2220_2820:()=>xst,content_2220_2822:()=>Tst,content_2220_2824:()=>bst,content_2220_2826:()=>Zst,content_2220_2828:()=>Ast,content_2220_2830:()=>Rst,content_2220_2832:()=>Sst,content_2220_2834:()=>Wst,content_2220_2836:()=>Pst,content_2220_2838:()=>Fst,content_2220_284:()=>Cg,content_2220_2840:()=>Vst,content_2220_2842:()=>jst,content_2220_2844:()=>$st,content_2220_2846:()=>Yst,content_2220_2848:()=>Jst,content_2220_2850:()=>tct,content_2220_2852:()=>ect,content_2220_2854:()=>pct,content_2220_2856:()=>sct,content_2220_2858:()=>act,content_2220_286:()=>vg,content_2220_2860:()=>lct,content_2220_2862:()=>mct,content_2220_2864:()=>hct,content_2220_2866:()=>yct,content_2220_2868:()=>Mct,content_2220_2870:()=>Dct,content_2220_2872:()=>Xct,content_2220_2874:()=>xct,content_2220_2876:()=>Tct,content_2220_2878:()=>bct,content_2220_288:()=>Lg,content_2220_2880:()=>Zct,content_2220_2882:()=>Act,content_2220_2884:()=>Rct,content_2220_2886:()=>Sct,content_2220_2888:()=>Wct,content_2220_2890:()=>Pct,content_2220_2892:()=>Fct,content_2220_2894:()=>Vct,content_2220_2896:()=>jct,content_2220_2898:()=>$ct,content_2220_290:()=>Ng,content_2220_2900:()=>Yct,content_2220_2902:()=>Jct,content_2220_2904:()=>tat,content_2220_2906:()=>eat,content_2220_2908:()=>pat,content_2220_2910:()=>sat,content_2220_2912:()=>aat,content_2220_2914:()=>lat,content_2220_2916:()=>mat,content_2220_2918:()=>hat,content_2220_292:()=>Eg,content_2220_2920:()=>yat,content_2220_2922:()=>Mat,content_2220_2924:()=>Dat,content_2220_2926:()=>Xat,content_2220_2928:()=>xat,content_2220_2930:()=>Tat,content_2220_2932:()=>bat,content_2220_2934:()=>Zat,content_2220_2936:()=>Aat,content_2220_2938:()=>Rat,content_2220_294:()=>zg,content_2220_2940:()=>Sat,content_2220_2942:()=>Wat,content_2220_2944:()=>Pat,content_2220_2946:()=>Fat,content_2220_2948:()=>Vat,content_2220_2950:()=>jat,content_2220_2952:()=>$at,content_2220_2954:()=>Yat,content_2220_2956:()=>Jat,content_2220_2958:()=>tit,content_2220_296:()=>Ig,content_2220_2960:()=>eit,content_2220_2962:()=>pit,content_2220_2964:()=>sit,content_2220_2966:()=>ait,content_2220_2968:()=>lit,content_2220_2970:()=>mit,content_2220_2972:()=>hit,content_2220_2974:()=>yit,content_2220_2976:()=>Mit,content_2220_2978:()=>Dit,content_2220_298:()=>Gg,content_2220_2980:()=>Xit,content_2220_2982:()=>xit,content_2220_2984:()=>Tit,content_2220_2986:()=>bit,content_2220_2988:()=>Zit,content_2220_2990:()=>Ait,content_2220_2992:()=>Rit,content_2220_2994:()=>Sit,content_2220_2996:()=>Wit,content_2220_2998:()=>Pit,content_2220_30:()=>BM,content_2220_300:()=>Bg,content_2220_3000:()=>Fit,content_2220_3002:()=>Vit,content_2220_3004:()=>jit,content_2220_3006:()=>$it,content_2220_3008:()=>Yit,content_2220_3010:()=>Jit,content_2220_3012:()=>tlt,content_2220_3014:()=>elt,content_2220_3016:()=>plt,content_2220_3018:()=>slt,content_2220_302:()=>Ug,content_2220_3020:()=>alt,content_2220_3022:()=>llt,content_2220_3024:()=>mlt,content_2220_3026:()=>hlt,content_2220_3028:()=>ylt,content_2220_3030:()=>Mlt,content_2220_3032:()=>Dlt,content_2220_3034:()=>Xlt,content_2220_3036:()=>xlt,content_2220_3038:()=>Tlt,content_2220_304:()=>qg,content_2220_3040:()=>blt,content_2220_3042:()=>Zlt,content_2220_3044:()=>Alt,content_2220_3046:()=>Rlt,content_2220_3048:()=>Slt,content_2220_3050:()=>Wlt,content_2220_3052:()=>Plt,content_2220_3054:()=>Flt,content_2220_3056:()=>Vlt,content_2220_3058:()=>jlt,content_2220_306:()=>Og,content_2220_3060:()=>$lt,content_2220_3062:()=>Ylt,content_2220_3064:()=>Jlt,content_2220_3066:()=>tut,content_2220_3068:()=>eut,content_2220_3070:()=>put,content_2220_3072:()=>sut,content_2220_3074:()=>aut,content_2220_3076:()=>lut,content_2220_3078:()=>mut,content_2220_308:()=>Hg,content_2220_3080:()=>hut,content_2220_3082:()=>yut,content_2220_3084:()=>Mut,content_2220_3086:()=>Dut,content_2220_3088:()=>Xut,content_2220_3090:()=>xut,content_2220_3092:()=>Tut,content_2220_3094:()=>but,content_2220_3096:()=>Zut,content_2220_3098:()=>Aut,content_2220_310:()=>Kg,content_2220_3100:()=>Rut,content_2220_3102:()=>Sut,content_2220_3104:()=>Wut,content_2220_3106:()=>Put,content_2220_3108:()=>Fut,content_2220_3110:()=>Vut,content_2220_3112:()=>jut,content_2220_3114:()=>$ut,content_2220_3116:()=>Yut,content_2220_3118:()=>Jut,content_2220_312:()=>Qg,content_2220_3120:()=>tmt,content_2220_3122:()=>emt,content_2220_3124:()=>pmt,content_2220_3126:()=>smt,content_2220_3128:()=>amt,content_2220_3130:()=>lmt,content_2220_3132:()=>mmt,content_2220_3134:()=>hmt,content_2220_3136:()=>ymt,content_2220_3138:()=>Mmt,content_2220_314:()=>nx,content_2220_3140:()=>Dmt,content_2220_3142:()=>Xmt,content_2220_3144:()=>xmt,content_2220_3146:()=>Tmt,content_2220_3148:()=>bmt,content_2220_3150:()=>Zmt,content_2220_3152:()=>Amt,content_2220_3154:()=>Rmt,content_2220_3156:()=>Smt,content_2220_3158:()=>Wmt,content_2220_316:()=>ox,content_2220_3160:()=>Pmt,content_2220_3162:()=>Fmt,content_2220_3164:()=>Vmt,content_2220_3166:()=>jmt,content_2220_3168:()=>$mt,content_2220_3170:()=>Ymt,content_2220_3172:()=>Jmt,content_2220_3174:()=>tdt,content_2220_3176:()=>edt,content_2220_3178:()=>pdt,content_2220_318:()=>rx,content_2220_3180:()=>sdt,content_2220_3182:()=>adt,content_2220_3184:()=>ldt,content_2220_3186:()=>mdt,content_2220_3188:()=>hdt,content_2220_3190:()=>ydt,content_2220_3192:()=>Mdt,content_2220_3194:()=>Ddt,content_2220_3196:()=>Xdt,content_2220_3198:()=>xdt,content_2220_32:()=>UM,content_2220_320:()=>cx,content_2220_3200:()=>Tdt,content_2220_3202:()=>bdt,content_2220_3204:()=>Zdt,content_2220_3206:()=>Adt,content_2220_3208:()=>Rdt,content_2220_3210:()=>Sdt,content_2220_3212:()=>Wdt,content_2220_3214:()=>Pdt,content_2220_3216:()=>Fdt,content_2220_3218:()=>Vdt,content_2220_322:()=>ix,content_2220_3220:()=>jdt,content_2220_3222:()=>$dt,content_2220_3224:()=>Ydt,content_2220_3226:()=>Jdt,content_2220_3228:()=>tht,content_2220_3230:()=>eht,content_2220_3232:()=>pht,content_2220_3234:()=>sht,content_2220_3236:()=>aht,content_2220_3238:()=>lht,content_2220_324:()=>ux,content_2220_3240:()=>mht,content_2220_3242:()=>hht,content_2220_3244:()=>yht,content_2220_3246:()=>Mht,content_2220_3248:()=>Dht,content_2220_3250:()=>Xht,content_2220_3252:()=>xht,content_2220_3254:()=>Tht,content_2220_3256:()=>
10bht,content_2220_3258:()=>Zht,content_2220_326:()=>dx,content_2220_3260:()=>Aht,content_2220_3262:()=>Rht,content_2220_3264:()=>Sht,content_2220_3266:()=>Wht,content_2220_3268:()=>Pht,content_2220_3270:()=>Fht,content_2220_3272:()=>Vht,content_2220_3274:()=>jht,content_2220_3276:()=>$ht,content_2220_3278:()=>Yht,content_2220_328:()=>kx,content_2220_3280:()=>Jht,content_2220_3282:()=>tkt,content_2220_3284:()=>ekt,content_2220_3286:()=>pkt,content_2220_3288:()=>skt,content_2220_3290:()=>akt,content_2220_3292:()=>lkt,content_2220_3294:()=>mkt,content_2220_3296:()=>hkt,content_2220_3298:()=>ykt,content_2220_330:()=>fx,content_2220_3300:()=>Mkt,content_2220_3302:()=>Dkt,content_2220_3304:()=>Xkt,content_2220_3306:()=>xkt,content_2220_3308:()=>Tkt,content_2220_3310:()=>bkt,content_2220_3312:()=>Zkt,content_2220_3314:()=>Akt,content_2220_3316:()=>Rkt,content_2220_3318:()=>Skt,content_2220_332:()=>wx,content_2220_3320:()=>Wkt,content_2220_3322:()=>Pkt,content_2220_3324:()=>Fkt,content_2220_3326:()=>Vkt,content_2220_3328:()=>jkt,content_2220_3330:()=>$kt,content_2220_3332:()=>Ykt,content_2220_3334:()=>Jkt,content_2220_3336:()=>tyt,content_2220_3338:()=>eyt,content_2220_334:()=>_x,content_2220_3340:()=>pyt,content_2220_3342:()=>syt,content_2220_3344:()=>ayt,content_2220_3346:()=>lyt,content_2220_3348:()=>myt,content_2220_3350:()=>hyt,content_2220_3352:()=>yyt,content_2220_3354:()=>Myt,content_2220_3356:()=>Dyt,content_2220_3358:()=>Xyt,content_2220_336:()=>gx,content_2220_3360:()=>xyt,content_2220_3362:()=>Tyt,content_2220_3364:()=>byt,content_2220_3366:()=>Zyt,content_2220_3368:()=>Ayt,content_2220_3370:()=>Ryt,content_2220_3372:()=>Syt,content_2220_3374:()=>Wyt,content_2220_3376:()=>Pyt,content_2220_3378:()=>Fyt,content_2220_338:()=>Cx,content_2220_3380:()=>Vyt,content_2220_3382:()=>jyt,content_2220_3384:()=>$yt,content_2220_3386:()=>Yyt,content_2220_3388:()=>Jyt,content_2220_3390:()=>tft,content_2220_3392:()=>eft,content_2220_3394:()=>pft,content_2220_3396:()=>sft,content_2220_3398:()=>aft,content_2220_34:()=>qM,content_2220_340:()=>vx,content_2220_3400:()=>lft,content_2220_3402:()=>mft,content_2220_3404:()=>hft,content_2220_3406:()=>yft,content_2220_3408:()=>Mft,content_2220_3410:()=>Dft,content_2220_3412:()=>Xft,content_2220_3414:()=>xft,content_2220_3416:()=>Tft,content_2220_3418:()=>bft,content_2220_342:()=>Lx,content_2220_3420:()=>Zft,content_2220_3422:()=>Aft,content_2220_3424:()=>Rft,content_2220_3426:()=>Sft,content_2220_3428:()=>Wft,content_2220_3430:()=>Pft,content_2220_3432:()=>Fft,content_2220_3434:()=>Vft,content_2220_3436:()=>jft,content_2220_3438:()=>$ft,content_2220_344:()=>Nx,content_2220_3440:()=>Yft,content_2220_3442:()=>Jft,content_2220_3444:()=>tMt,content_2220_3446:()=>eMt,content_2220_3448:()=>pMt,content_2220_3450:()=>sMt,content_2220_3452:()=>aMt,content_2220_3454:()=>lMt,content_2220_3456:()=>mMt,content_2220_3458:()=>hMt,content_2220_346:()=>Ex,content_2220_3460:()=>yMt,content_2220_3462:()=>MMt,content_2220_3464:()=>DMt,content_2220_3466:()=>XMt,content_2220_3468:()=>xMt,content_2220_3470:()=>TMt,content_2220_3472:()=>bMt,content_2220_3474:()=>ZMt,content_2220_3476:()=>AMt,content_2220_3478:()=>RMt,content_2220_348:()=>zx,content_2220_3480:()=>SMt,content_2220_3482:()=>WMt,content_2220_3484:()=>PMt,content_2220_3486:()=>FMt,content_2220_3488:()=>VMt,content_2220_3490:()=>jMt,content_2220_3492:()=>$Mt,content_2220_3494:()=>YMt,content_2220_3496:()=>JMt,content_2220_3498:()=>twt,content_2220_350:()=>Ix,content_2220_3500:()=>ewt,content_2220_3502:()=>pwt,content_2220_3504:()=>swt,content_2220_3506:()=>awt,content_2220_3508:()=>lwt,content_2220_3510:()=>mwt,content_2220_3512:()=>hwt,content_2220_3514:()=>ywt,content_2220_3516:()=>Mwt,content_2220_3518:()=>Dwt,content_2220_352:()=>Gx,content_2220_3520:()=>Xwt,content_2220_3522:()=>xwt,content_2220_3524:()=>Twt,content_2220_3526:()=>bwt,content_2220_3528:()=>Zwt,content_2220_3530:()=>Awt,content_2220_3532:()=>Rwt,content_2220_3534:()=>Swt,content_2220_3536:()=>Wwt,content_2220_3538:()=>Pwt,content_2220_354:()=>Bx,content_2220_3540:()=>Fwt,content_2220_3542:()=>Vwt,content_2220_3544:()=>jwt,content_2220_3546:()=>$wt,content_2220_3548:()=>Ywt,content_2220_3550:()=>Jwt,content_2220_3552:()=>tDt,content_2220_3554:()=>eDt,content_2220_3556:()=>pDt,content_2220_3558:()=>sDt,content_2220_356:()=>Ux,content_2220_3560:()=>aDt,content_2220_3562:()=>lDt,content_2220_3564:()=>mDt,content_2220_3566:()=>hDt,content_2220_3568:()=>yDt,content_2220_3570:()=>MDt,content_2220_3572:()=>DDt,content_2220_3574:()=>XDt,content_2220_3576:()=>xDt,content_2220_3578:()=>TDt,content_2220_358:()=>qx,content_2220_3580:()=>bDt,content_2220_3582:()=>ZDt,content_2220_3584:()=>ADt,content_2220_3586:()=>RDt,content_2220_3588:()=>SDt,content_2220_3590:()=>WDt,content_2220_3592:()=>PDt,content_2220_3594:()=>FDt,content_2220_3596:()=>VDt,content_2220_3598:()=>jDt,content_2220_36:()=>OM,content_2220_360:()=>Ox,content_2220_3600:()=>$Dt,content_2220_3602:()=>YDt,content_2220_3604:()=>JDt,content_2220_3606:()=>t_t,content_2220_3608:()=>e_t,content_2220_3610:()=>p_t,content_2220_3612:()=>s_t,content_2220_3614:()=>a_t,content_2220_3616:()=>l_t,content_2220_3618:()=>m_t,content_2220_362:()=>Hx,content_2220_3620:()=>h_t,content_2220_3622:()=>y_t,content_2220_3624:()=>M_t,content_2220_3626:()=>D_t,content_2220_3628:()=>X_t,content_2220_3630:()=>x_t,content_2220_3632:()=>T_t,content_2220_3634:()=>b_t,content_2220_3636:()=>Z_t,content_2220_3638:()=>A_t,content_2220_364:()=>Kx,content_2220_3640:()=>R_t,content_2220_3642:()=>S_t,content_2220_3644:()=>W_t,content_2220_3646:()=>P_t,content_2220_3648:()=>F_t,content_2220_3650:()=>V_t,content_2220_3652:()=>j_t,content_2220_3654:()=>$_t,content_2220_3656:()=>Y_t,content_2220_3658:()=>J_t,content_2220_366:()=>Qx,content_2220_3660:()=>tXt,content_2220_3662:()=>eXt,content_2220_3664:()=>pXt,content_2220_3666:()=>sXt,content_2220_3668:()=>aXt,content_2220_3670:()=>lXt,content_2220_3672:()=>mXt,content_2220_3674:()=>hXt,content_2220_3676:()=>yXt,content_2220_3678:()=>MXt,content_2220_368:()=>nC,content_2220_3680:()=>DXt,content_2220_3682:()=>XXt,content_2220_3684:()=>xXt,content_2220_3686:()=>TXt,content_2220_3688:()=>bXt,content_2220_3690:()=>ZXt,content_2220_3692:()=>AXt,content_2220_3694:()=>RXt,content_2220_3696:()=>SXt,content_2220_3698:()=>WXt,content_2220_370:()=>oC,content_2220_3700:()=>PXt,content_2220_3702:()=>FXt,content_2220_3704:()=>VXt,content_2220_3706:()=>jXt,content_2220_3708:()=>$Xt,content_2220_3710:()=>YXt,content_2220_3712:()=>JXt,content_2220_3714:()=>tgt,content_2220_3716:()=>egt,content_2220_3718:()=>pgt,content_2220_372:()=>rC,content_2220_3720:()=>sgt,content_2220_3722:()=>agt,content_2220_3724:()=>lgt,content_2220_3726:()=>mgt,content_2220_3728:()=>hgt,content_2220_3730:()=>ygt,content_2220_3732:()=>Mgt,content_2220_3734:()=>Dgt,content_2220_3736:()=>Xgt,content_2220_3738:()=>xgt,content_2220_374:()=>cC,content_2220_3740:()=>Tgt,content_2220_3742:()=>bgt,content_2220_3744:()=>Zgt,content_2220_3746:()=>Agt,content_2220_3748:()=>Rgt,content_2220_3750:()=>Sgt,content_2220_3752:()=>Wgt,content_2220_3754:()=>Pgt,content_2220_3756:()=>Fgt,content_2220_3758:()=>Vgt,content_2220_376:()=>iC,content_2220_3760:()=>jgt,content_2220_3762:()=>$gt,content_2220_3764:()=>Ygt,content_2220_3766:()=>Jgt,content_2220_3768:()=>txt,content_2220_3770:()=>ext,content_2220_378:()=>uC,content_2220_38:()=>HM,content_2220_380:()=>dC,content_2220_382:()=>kC,content_2220_384:()=>fC,content_2220_386:()=>wC,content_2220_388:()=>_C,content_2220_390:()=>gC,content_2220_392:()=>CC,content_2220_394:()=>vC,content_2220_396:()=>LC,content_2220_398:()=>NC,content_2220_4:()=>kM,content_2220_40:()=>KM,content_2220_400:()=>EC,content_2220_402:()=>zC,content_2220_404:()=>IC,content_2220_406:()=>GC,content_2220_408:()=>BC,content_2220_410:()=>UC,content_2220_412:()=>qC,content_2220_414:()=>OC,content_2220_416:()=>HC,content_2220_418:()=>KC,content_2220_42:()=>QM,content_2220_420:()=>QC,content_2220_422:()=>nT,content_2220_424:()=>oT,content_2220_426:()=>rT,content_2220_428:()=>cT,content_2220_430:()=>iT,content_2220_432:()=>
10uT,content_2220_434:()=>dT,content_2220_436:()=>kT,content_2220_438:()=>fT,content_2220_44:()=>nw,content_2220_440:()=>wT,content_2220_442:()=>_T,content_2220_444:()=>gT,content_2220_446:()=>CT,content_2220_448:()=>vT,content_2220_450:()=>LT,content_2220_452:()=>NT,content_2220_454:()=>ET,content_2220_456:()=>zT,content_2220_458:()=>IT,content_2220_46:()=>ow,content_2220_460:()=>GT,content_2220_462:()=>BT,content_2220_464:()=>UT,content_2220_466:()=>qT,content_2220_468:()=>OT,content_2220_470:()=>HT,content_2220_472:()=>KT,content_2220_474:()=>QT,content_2220_476:()=>nv,content_2220_478:()=>ov,content_2220_48:()=>rw,content_2220_480:()=>rv,content_2220_482:()=>cv,content_2220_484:()=>iv,content_2220_486:()=>uv,content_2220_488:()=>dv,content_2220_490:()=>kv,content_2220_492:()=>fv,content_2220_494:()=>wv,content_2220_496:()=>_v,content_2220_498:()=>gv,content_2220_50:()=>cw,content_2220_500:()=>Cv,content_2220_502:()=>vv,content_2220_504:()=>Lv,content_2220_506:()=>Nv,content_2220_508:()=>Ev,content_2220_510:()=>zv,content_2220_512:()=>Iv,content_2220_514:()=>Gv,content_2220_516:()=>Bv,content_2220_518:()=>Uv,content_2220_52:()=>iw,content_2220_520:()=>qv,content_2220_522:()=>Ov,content_2220_524:()=>Hv,content_2220_526:()=>Kv,content_2220_528:()=>Qv,content_2220_530:()=>nb,content_2220_532:()=>ob,content_2220_534:()=>rb,content_2220_536:()=>cb,content_2220_538:()=>ib,content_2220_54:()=>uw,content_2220_540:()=>ub,content_2220_542:()=>db,content_2220_544:()=>kb,content_2220_546:()=>fb,content_2220_548:()=>wb,content_2220_550:()=>_b,content_2220_552:()=>gb,content_2220_554:()=>Cb,content_2220_556:()=>vb,content_2220_558:()=>Lb,content_2220_56:()=>dw,content_2220_560:()=>Nb,content_2220_562:()=>Eb,content_2220_564:()=>zb,content_2220_566:()=>Ib,content_2220_568:()=>Gb,content_2220_570:()=>Bb,content_2220_572:()=>Ub,content_2220_574:()=>qb,content_2220_576:()=>Ob,content_2220_578:()=>Hb,content_2220_58:()=>kw,content_2220_580:()=>Kb,content_2220_582:()=>Qb,content_2220_584:()=>nL,content_2220_586:()=>oL,content_2220_588:()=>rL,content_2220_590:()=>cL,content_2220_592:()=>iL,content_2220_594:()=>uL,content_2220_596:()=>dL,content_2220_598:()=>kL,content_2220_6:()=>fM,content_2220_60:()=>fw,content_2220_600:()=>fL,content_2220_602:()=>wL,content_2220_604:()=>_L,content_2220_606:()=>gL,content_2220_608:()=>CL,content_2220_610:()=>vL,content_2220_612:()=>LL,content_2220_614:()=>NL,content_2220_616:()=>EL,content_2220_618:()=>zL,content_2220_62:()=>ww,content_2220_620:()=>IL,content_2220_622:()=>GL,content_2220_624:()=>BL,content_2220_626:()=>UL,content_2220_628:()=>qL,content_2220_630:()=>OL,content_2220_632:()=>HL,content_2220_634:()=>KL,content_2220_636:()=>QL,content_2220_638:()=>nZ,content_2220_64:()=>_w,content_2220_640:()=>oZ,content_2220_642:()=>rZ,content_2220_644:()=>cZ,content_2220_646:()=>iZ,content_2220_648:()=>uZ,content_2220_650:()=>dZ,content_2220_652:()=>kZ,content_2220_654:()=>fZ,content_2220_656:()=>wZ,content_2220_658:()=>_Z,content_2220_66:()=>gw,content_2220_660:()=>gZ,content_2220_662:()=>CZ,content_2220_664:()=>vZ,content_2220_666:()=>LZ,content_2220_668:()=>NZ,content_2220_670:()=>EZ,content_2220_672:()=>zZ,content_2220_674:()=>IZ,content_2220_676:()=>GZ,content_2220_678:()=>BZ,content_2220_68:()=>Cw,content_2220_680:()=>UZ,content_2220_682:()=>qZ,content_2220_684:()=>OZ,content_2220_686:()=>HZ,content_2220_688:()=>KZ,content_2220_690:()=>QZ,content_2220_692:()=>nN,content_2220_694:()=>oN,content_2220_696:()=>rN,content_2220_698:()=>cN,content_2220_70:()=>vw,content_2220_700:()=>iN,content_2220_702:()=>uN,content_2220_704:()=>dN,content_2220_706:()=>kN,content_2220_708:()=>fN,content_2220_710:()=>wN,content_2220_712:()=>_N,content_2220_714:()=>gN,content_2220_716:()=>CN,content_2220_718:()=>vN,content_2220_72:()=>Lw,content_2220_720:()=>LN,content_2220_722:()=>NN,content_2220_724:()=>EN,content_2220_726:()=>zN,content_2220_728:()=>IN,content_2220_730:()=>GN,content_2220_732:()=>BN,content_2220_734:()=>UN,content_2220_736:()=>qN,content_2220_738:()=>ON,content_2220_74:()=>Nw,content_2220_740:()=>HN,content_2220_742:()=>KN,content_2220_744:()=>QN,content_2220_746:()=>nA,content_2220_748:()=>
10oA,content_2220_750:()=>rA,content_2220_752:()=>cA,content_2220_754:()=>iA,content_2220_756:()=>uA,content_2220_758:()=>dA,content_2220_76:()=>Ew,content_2220_760:()=>kA,content_2220_762:()=>fA,content_2220_764:()=>wA,content_2220_766:()=>_A,content_2220_768:()=>gA,content_2220_770:()=>CA,content_2220_772:()=>vA,content_2220_774:()=>LA,content_2220_776:()=>NA,content_2220_778:()=>EA,content_2220_78:()=>zw,content_2220_780:()=>zA,content_2220_782:()=>IA,content_2220_784:()=>GA,content_2220_786:()=>BA,content_2220_788:()=>UA,content_2220_790:()=>qA,content_2220_792:()=>OA,content_2220_794:()=>HA,content_2220_796:()=>KA,content_2220_798:()=>QA,content_2220_8:()=>wM,content_2220_80:()=>Iw,content_2220_800:()=>nE,content_2220_802:()=>oE,content_2220_804:()=>rE,content_2220_806:()=>cE,content_2220_808:()=>iE,content_2220_810:()=>uE,content_2220_812:()=>dE,content_2220_814:()=>kE,content_2220_816:()=>fE,content_2220_818:()=>wE,content_2220_82:()=>Gw,content_2220_820:()=>_E,content_2220_822:()=>gE,content_2220_824:()=>CE,content_2220_826:()=>vE,content_2220_828:()=>LE,content_2220_830:()=>NE,content_2220_832:()=>EE,content_2220_834:()=>zE,content_2220_836:()=>IE,content_2220_838:()=>GE,content_2220_84:()=>Bw,content_2220_840:()=>BE,content_2220_842:()=>UE,content_2220_844:()=>qE,content_2220_846:()=>OE,content_2220_848:()=>HE,content_2220_850:()=>KE,content_2220_852:()=>QE,content_2220_854:()=>nR,content_2220_856:()=>oR,content_2220_858:()=>rR,content_2220_86:()=>Uw,content_2220_860:()=>cR,content_2220_862:()=>iR,content_2220_864:()=>uR,content_2220_866:()=>dR,content_2220_868:()=>kR,content_2220_870:()=>fR,content_2220_872:()=>wR,content_2220_874:()=>_R,content_2220_876:()=>gR,content_2220_878:()=>CR,content_2220_88:()=>qw,content_2220_880:()=>vR,content_2220_882:()=>LR,content_2220_884:()=>NR,content_2220_886:()=>ER,content_2220_888:()=>zR,content_2220_890:()=>IR,content_2220_892:()=>GR,content_2220_894:()=>BR,content_2220_896:()=>UR,content_2220_898:()=>qR,content_2220_90:()=>Ow,content_2220_900:()=>OR,content_2220_902:()=>HR,content_2220_904:()=>KR,content_2220_906:()=>QR,content_2220_908:()=>nz,content_2220_910:()=>oz,content_2220_912:()=>rz,content_2220_914:()=>cz,content_2220_916:()=>iz,content_2220_918:()=>uz,content_2220_92:()=>Hw,content_2220_920:()=>dz,content_2220_922:()=>kz,content_2220_924:()=>fz,content_2220_926:()=>wz,content_2220_928:()=>_z,content_2220_930:()=>gz,content_2220_932:()=>Cz,content_2220_934:()=>vz,content_2220_936:()=>Lz,content_2220_938:()=>Nz,content_2220_94:()=>Kw,content_2220_940:()=>Ez,content_2220_942:()=>zz,content_2220_944:()=>Iz,content_2220_946:()=>Gz,content_2220_948:()=>Bz,content_2220_950:()=>Uz,content_2220_952:()=>qz,content_2220_954:()=>Oz,content_2220_956:()=>Hz,content_2220_958:()=>Kz,content_2220_96:()=>Qw,content_2220_960:()=>Qz,content_2220_962:()=>nS,content_2220_964:()=>oS,content_2220_966:()=>rS,content_2220_968:()=>cS,content_2220_970:()=>iS,content_2220_972:()=>uS,content_2220_974:()=>dS,content_2220_976:()=>kS,content_2220_978:()=>fS,content_2220_98:()=>nD,content_2220_980:()=>wS,content_2220_982:()=>_S,content_2220_984:()=>gS,content_2220_986:()=>CS,content_2220_988:()=>vS,content_2220_990:()=>LS,content_2220_992:()=>NS,content_2220_994:()=>ES,content_2220_996:()=>zS,content_2220_998:()=>IS});var p=e(2784),r=e(7896),s=e(876);const c={toc:[]};function a(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},c,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Property decorators."))}a.isMDXComponent=!0;const i={toc:[]};function l(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},i,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscriptions and triggering of events."))}l.isMDXComponent=!0;const u={toc:[]};function m(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},u,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/AsyncEventDispatcher#dispatch"},(0,s.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,s.kt)("wrapper",(0,r.Z)({},d,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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,s.kt)("wrapper",(0,r.Z)({},k,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Dispatches an asynchronous ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableEvent")),"."))}y.isMDXComponent=!0;const f={toc:[]};function M(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},f,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe all subscribers from the event."))}M.isMDXComponent=!0;const w={toc:[]};function D(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},w,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."))}X.isMDXComponent=!0;const g={toc:[]};function x(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},g,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},C,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}T.isMDXComponent=!0;const v={toc:[]};function b(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},v,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}b.isMDXComponent=!0;const L={toc:[]};function Z(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},L,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the argument passed to subscribers."))}Z.isMDXComponent=!0;const N={toc:[]};function A(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},N,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}A.isMDXComponent=!0;const E={toc:[]};function R(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},E,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Dispatches a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableEvent")),"."))}R.isMDXComponent=!0;const z={toc:[]};function S(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},z,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},I,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A callback function that cancels the subscription."))}W.isMDXComponent=!0;const G={toc:[]};function P(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."))}P.isMDXComponent=!0;const B={toc:[]};function F(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},B,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to invoke when the event occurs."))}F.isMDXComponent=!0;const U={toc:[]};function V(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},U,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}V.isMDXComponent=!0;const q={toc:[]};function j(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}j.isMDXComponent=!0;const O={toc:[]};function $(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},O,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},H,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A base for dispatching ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/Subscribable"},(0,s.kt)("inlineCode",{parentName:"a"},"Subscribable")),"s."))}Y.isMDXComponent=!0;const K={toc:[]};function J(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Q,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},nt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."))}et.isMDXComponent=!0;const ot={toc:[]};function pt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to invoke when the event occurs."))}pt.isMDXComponent=!0;const rt={toc:[]};function st(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}st.isMDXComponent=!0;const ct={toc:[]};function at(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}at.isMDXComponent=!0;const it={toc:[]};function lt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},it,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},ut,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},dt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribers are notified only when the flag is set.\nSubsequent calls to ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/FlagDispatcher#raise"},(0,s.kt)("inlineCode",{parentName:"a"},"raise"))," don't trigger anything.\nAny handlers added while the flag is raised are immediately invoked."),(0,s.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,s.kt)("wrapper",(0,r.Z)({},kt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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 Mt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Dispatches a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableFlagEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableFlagEvent")),"."))}Mt.isMDXComponent=!0;const wt={toc:[]};function Dt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Are subscribers being notified?"))}Xt.isMDXComponent=!0;const gt={toc:[]};function xt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Ct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Stop notifying future subscribers."))}Tt.isMDXComponent=!0;const vt={toc:[]};function bt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A callback function that cancels the subscription."))}bt.isMDXComponent=!0;const Lt={toc:[]};function Zt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."))}Zt.isMDXComponent=!0;const Nt={toc:[]};function At(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to invoke when the event occurs."))}At.isMDXComponent=!0;const Et={toc:[]};function Rt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Et,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}Rt.isMDXComponent=!0;
10const zt={toc:[]};function St(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}St.isMDXComponent=!0;const It={toc:[]};function Wt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},It,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}Wt.isMDXComponent=!0;const Gt={toc:[]};function Pt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provides safe access to the public interface of ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/EventDispatcherBase"},(0,s.kt)("inlineCode",{parentName:"a"},"EventDispatcherBase")),"."))}Pt.isMDXComponent=!0;const Bt={toc:[]};function Ft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A callback function that cancels the subscription."))}Ft.isMDXComponent=!0;const Ut={toc:[]};function Vt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."))}Vt.isMDXComponent=!0;const qt={toc:[]};function jt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to invoke when the event occurs."))}jt.isMDXComponent=!0;const Ot={toc:[]};function $t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}$t.isMDXComponent=!0;const Ht={toc:[]};function Yt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}Yt.isMDXComponent=!0;const Kt={toc:[]};function Jt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Qt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},nn,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},on,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provides safe access to the public interface of ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/ValueDispatcher"},(0,s.kt)("inlineCode",{parentName:"a"},"ValueDispatcher")),"."))}pn.isMDXComponent=!0;const rn={toc:[]};function sn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the most recent value of this dispatcher."))}sn.isMDXComponent=!0;const cn={toc:[]};function an(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cn,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},ln,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."),(0,s.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,s.kt)("wrapper",(0,r.Z)({},mn,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},hn,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},yn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Callback function that cancels the subscription."))}fn.isMDXComponent=!0;const Mn={toc:[]};function wn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."),(0,s.kt)("p",null,"Subscribing will immediately invoke the handler with the most recent value."))}wn.isMDXComponent=!0;const Dn={toc:[]};function _n(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}_n.isMDXComponent=!0;const Xn={toc:[]};function gn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}gn.isMDXComponent=!0;const xn={toc:[]};function Cn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the value passed to subscribers."))}Cn.isMDXComponent=!0;const Tn={toc:[]};function vn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Changing the value stored by a value dispatcher will immediately notify all\nits subscribers."))}vn.isMDXComponent=!0;const bn={toc:[]};function Ln(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}Ln.isMDXComponent=!0;const Zn={toc:[]};function Nn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Dispatches a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/SubscribableValueEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableValueEvent"))))}Nn.isMDXComponent=!0;const An={toc:[]};function En(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},An,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The initial value."))}En.isMDXComponent=!0;const Rn={toc:[]};function zn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rn,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Sn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Setting the value will immediately notify all subscribers."))}In.isMDXComponent=!0;const Wn={toc:[]};function Gn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Set the current value of this dispatcher."))}Gn.isMDXComponent=!0;const Pn={toc:[]};function Bn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new value."))}Bn.isMDXComponent=!0;const Fn={toc:[]};function Un(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe all subscribers from the event."))}Un.isMDXComponent=!0;const Vn={toc:[]};function qn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Callback function that cancels the subscription."))}qn.isMDXComponent=!0;const jn={toc:[]};function On(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."),(0,s.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,s.kt)("wrapper",(0,r.Z)({},$n,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Yn,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Jn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}Qn.isMDXComponent=!0;const te={toc:[]};function ne(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},te,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}ne.isMDXComponent=!0;const ee={toc:[]};function oe(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ee,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},pe,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}re.isMDXComponent=!0;const se={toc:[]};function ce(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},se,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provides safe access to the public interface of ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/AsyncEventDispatcher"},(0,s.kt)("inlineCode",{parentName:"a"},"AsyncEventDispatcher")),"."))}ce.isMDXComponent=!0;const ae={toc:[]};function ie(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ae,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},le,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},me,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provides safe access to the public interface of ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/EventDispatcher"},(0,s.kt)("inlineCode",{parentName:"a"},"EventDispatcher")),"."))}de.isMDXComponent=!0;const he={toc:[]};function ke(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},he,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},ye,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}fe.isMDXComponent=!0;const Me={toc:[]};function we(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Me,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provides safe access to the public interface of ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/FlagDispatcher"},(0,s.kt)("inlineCode",{parentName:"a"},"FlagDispatcher")),"."))}we.isMDXComponent=!0;const De={toc:[]};function _e(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},De,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Xe,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},xe,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The generator responsible for running this timer."))}Ce.isMDXComponent=!0;const Te={toc:[]};function ve(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Te,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait until the timer ticks."))}ve.isMDXComponent=!0;const be={toc:[]};function Le(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},be,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The current iteration index."))}Le.isMDXComponent=!0;const Ze={toc:[]};function Ne(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ze,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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 Ae={toc:[]};function Ee(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ae,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Run all tasks concurrently and wait for all of them to finish."))}Ee.isMDXComponent=!0;const Re={toc:[]};function ze(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Re,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Se,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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 Ge(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},We,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Run all tasks concurrently and wait for any of them to finish."))}Ge.isMDXComponent=!0;const Pe={toc:[]};function Be(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pe,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to run."))}Be.isMDXComponent=!0;const Fe={toc:[]};function Ue(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fe,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Note that the same animation can be written as:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* rect.fill('#ff0000', 2),\nyield* rect.opacity(1, 1),\n")),(0,s.kt)("p",null,"The reason ",(0,s.kt)("inlineCode",{parentName:"p"},"chain")," exists is to make it easier to pass it to other flow\nfunctions. For example:"),(0,s.kt)("pre",null,(0,s.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")))}Ue.isMDXComponent=!0;const Ve={toc:[]};function qe(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ve,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Run tasks one after another."))}qe.isMDXComponent=!0;const je={toc:[]};function Oe(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},je,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},$e,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* delay(1, rect.fill('#ff0000', 2));\n")),(0,s.kt)("p",null,"Note that the same animation can be written as:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* waitFor(1),\nyield* rect.fill('#ff0000', 2),\n")),(0,s.kt)("p",null,"The reason ",(0,s.kt)("inlineCode",{parentName:"p"},"delay")," exists is to make it easier to pass it to other flow\nfunctions. For example:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("wrapper",(0,r.Z)({},Ye,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Je,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The delay in seconds"))}Qe.isMDXComponent=!0;const to={toc:[]};function no(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},to,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},eo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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,s.kt)("wrapper",(0,r.Z)({},po,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Call the given callback every N seconds."))}ro.isMDXComponent=!0;const so={toc:[]};function co(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},so,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The interval between subsequent calls."))}co.isMDXComponent=!0;const ao={toc:[]};function io(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ao,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The callback to be called."))}io.isMDXComponent=!0;const lo={toc:[]};function uo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lo,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},mo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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,s.kt)("wrapper",(0,r.Z)({},ko,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Run the given generator N times."))}yo.isMDXComponent=!0;const fo={toc:[]};function Mo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The number of iterations."))}Mo.isMDXComponent=!0;const wo={toc:[]};function Do(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wo,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},_o,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Do nothing."))}Xo.isMDXComponent=!0;const go={toc:[]};function xo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},go,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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,s.kt)("wrapper",(0,r.Z)({},Co,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Turn the given generator function into a threadable generator."))}To.isMDXComponent=!0;const vo={toc:[]};function bo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A generator function or a factory that creates the generator."))}bo.isMDXComponent=!0;const Lo={toc:[]};function Zo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield run(function* () {\n // do things\n});\n")))}Zo.isMDXComponent=!0;const No={toc:[]};function Ao(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},No,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Turn the given generator function into a threadable generator."))}Ao.isMDXComponent=!0;const Eo={toc:[]};function Ro(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eo,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},zo,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Io,e,{components:n,mdxType:"MDXLayout"}),(0,s.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 Go={toc:[]};function Po(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Go,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("co
10de",{parentName:"pre",className:"language-ts"},"yield* sequence(\n 0.1,\n ...rects.map(rect => rect.x(100, 1))\n);\n")))}Po.isMDXComponent=!0;const Bo={toc:[]};function Fo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Start all tasks one after another with a constant delay between."))}Fo.isMDXComponent=!0;const Uo={toc:[]};function Vo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The delay between each of the tasks."))}Vo.isMDXComponent=!0;const qo={toc:[]};function jo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to be run in a sequence."))}jo.isMDXComponent=!0;const Oo={toc:[]};function $o(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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,s.kt)("wrapper",(0,r.Z)({},Ho,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},Ko,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The relative time in seconds."))}Jo.isMDXComponent=!0;const Qo={toc:[]};function tp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qo,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},np,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},op,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield waitUntil('event');\n")))}pp.isMDXComponent=!0;const rp={toc:[]};function sp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait until the given time event."))}sp.isMDXComponent=!0;const cp={toc:[]};function ap(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cp,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},ip,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},up,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Multi-media management."))}mp.isMDXComponent=!0;const dp={toc:[]};function hp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,(0,s.kt)("inlineCode",{parentName:"p"},"true")," if the audio successfully started playing."))}hp.isMDXComponent=!0;const kp={toc:[]};function yp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Pause/resume the audio."))}yp.isMDXComponent=!0;const fp={toc:[]};function Mp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the audio should be paused or resumed."))}Mp.isMDXComponent=!0;const wp={toc:[]};function Dp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The absolute biggest value from the peaks array."))}Dp.isMDXComponent=!0;const _p={toc:[]};function Xp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_p,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The amount of samples taken."))}Xp.isMDXComponent=!0;const gp={toc:[]};function xp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An array of minimum and maximum waveform data points, interleaved.\nEach value is in range of -1 to 1."))}xp.isMDXComponent=!0;const Cp={toc:[]};function Tp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Samples per seconds."))}Tp.isMDXComponent=!0;const vp={toc:[]};function bp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Abstract scene representations and related utilities."))}bp.isMDXComponent=!0;const Lp={toc:[]};function Zp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Signifies the various stages of a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,s.kt)("inlineCode",{parentName:"a"},"Scene")),"'s render lifecycle."))}Zp.isMDXComponent=!0;const Np={toc:[]};function Ap(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Np,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs after a render ends."))}Ap.isMDXComponent=!0;const Ep={toc:[]};function Rp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ep,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs before the render starts when the Scene transitions are applied."))}Rp.isMDXComponent=!0;const zp={toc:[]};function Sp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs at the beginning of a render when the Scene's\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/utils#useContext"},(0,s.kt)("inlineCode",{parentName:"a"},"useContext"))," handlers are applied."))}Sp.isMDXComponent=!0;const Ip={toc:[]};function Wp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ip,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs at the end of a render when the Scene's\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/utils#useContextAfter"},(0,s.kt)("inlineCode",{parentName:"a"},"useContextAfter"))," handlers are applied."))}Wp.isMDXComponent=!0;const Gp={toc:[]};function Pp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Describes the state of a scene."))}Pp.isMDXComponent=!0;const Bp={toc:[]};function Fp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Informs the Project that the previous scene is no longer necessary and can\nbe disposed of."))}Fp.isMDXComponent=!0;const Up={toc:[]};function Vp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Up,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene has finished transitioning in."))}Vp.isMDXComponent=!0;const qp={toc:[]};function jp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Informs the project that the next scene can begin.\nThe ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#next"},(0,s.kt)("inlineCode",{parentName:"a"},"next"))," method will still be invoked until the next scene\nenters ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn")),"."))}jp.isMDXComponent=!0;const Op={toc:[]};function $p(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Op,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene is ready to transition out."))}$p.isMDXComponent=!0;const Hp={toc:[]};function Yp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Invoking ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#next"},(0,s.kt)("inlineCode",{parentName:"a"},"next"))," won't have any effect."))}Yp.isMDXComponent=!0;const Kp={toc:[]};function Jp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene has finished."))}Jp.isMDXComponent=!0;const Qp={toc:[]};function tr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene has just been created/reset."))}tr.isMDXComponent=!0;const nr={toc:[]};function er(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The default implementation of the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,s.kt)("inlineCode",{parentName:"a"},"Scene"))," interface."),(0,s.kt)("p",null,"Uses generators to control the animation."))}er.isMDXComponent=!0;const or={toc:[]};function pr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},or,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will be passed as the second argument to the constructor."))}pr.isMDXComponent=!0;const rr={toc:[]};function sr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Name of the scene."))}sr.isMDXComponent=!0;const cr={toc:[]};function ar(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reference to the project."))}ar.isMDXComponent=!0;const ir={toc:[]};function lr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ir,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#lifecycleEvents"},(0,s.kt)("inlineCode",{parentName:"a"},"lifecycleEvents"))," instead."))}lr.isMDXComponent=!0;const ur={toc:[]};function mr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ur,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/LifecycleEvents"},(0,s.kt)("inlineCode",{parentName:"a"},"LifecycleEvents"))," of this scene."))}mr.isMDXComponent=!0;const dr={toc:[]};function hr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dr,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The frame at which this scene starts."))}hr.isMDXComponent=!0;const kr={toc:[]};function yr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The frame at which this scene ends."))}yr.isMDXComponent=!0;const fr={toc:[]};function Mr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the cached data changes."))}Mr.isMDXComponent=!0;const wr={toc:[]};function Dr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered after scene is recalculated."))}Dr.isMDXComponent=!0;const _r={toc:[]};function Xr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_r,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reloaded."))}Xr.isMDXComponent=!0;const gr={toc:[]};function xr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered at various stages of the render lifecycle with an event title and a Context2D."))}xr.isMDXComponent=!0;const Cr={toc:[]};function Tr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reset."))}Tr.isMDXComponent=!0;const vr={toc:[]};function br(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the main thread changes."))}br.isMDXComponent=!0;const Lr={toc:[]};function Zr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene directly before this scene, or null if omitted for performance."))}Zr.isMDXComponent=!0;const Nr={toc:[]};function Ar(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state?"))}Ar.isMDXComponent=!0;const Er={toc:[]};function Rr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Er,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}Rr.isMDXComponent=!0;const zr={toc:[]};function Sr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state."))}Sr.isMDXComponent=!0;const Ir={toc:[]};function Wr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ir,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Initial"},(0,s.kt)("inlineCode",{parentName:"a"},"Initial"))," state."))}Wr.isMDXComponent=!0;const Gr={toc:[]};function Pr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method makes sure that the context of this scene is globally available\nduring the execution of the callback."))}Pr.isMDXComponent=!0;const Br={toc:[]};function Fr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Br,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Invoke the given callback in the context of this scene."))}Fr.isMDXComponent=!0;const Ur={toc:[]};function Vr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ur,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The callback to invoke."))}Vr.isMDXComponent=!0;const qr={toc:[]};function jr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the size of this scene."),(0,s.kt)("p",null,"Usually return ",(0,s.kt)("inlineCode",{parentName:"p"},"this.project.getSize()"),"."))}jr.isMDXComponent=!0;const Or={toc:[]};function $r(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Or,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state?"))}$r.isMDXComponent=!0;const Hr={toc:[]};function Yr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hr,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"Is this scene cached?"),(0,s.kt)("p",null,"Used only by ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene"},(0,s.kt)("inlineCode",{parentName:"a"},"GeneratorScene")),". Seeking through a project that\ncontains at least one uncached scene will log a warning to the console."),(0,s.kt)("p",null,"Should always return ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}Yr.isMDXComponent=!0;const Kr={toc:[]};function Jr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Finished"},(0,s.kt)("inlineCode",{parentName:"a"},"Finished"))," state?"))}Jr.isMDXComponent=!0;const Qr={toc:[]};function ts(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Progress this scene one frame forward."))}ts.isMDXComponent=!0;const ns={toc:[]};function es(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ns,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The task of this method is to calculate new timings stored in the cache.\nWhen this method is invoked, ",(0,s.kt)("inlineCode",{parentName:"p"},"this.project.frame")," is set to the frame at\nwhich this scene should start (",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#firstFrame"},(0,s.kt)("inlineCode",{parentName:"a"},"firstFrame")),")."),(0,s.kt)("p",null,"At the end of execution, this method should set ",(0,s.kt)("inlineCode",{parentName:"p"},"this.project.frame")," to the\nframe at which this scene ends (",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#lastFrame"},(0,s.kt)("inlineCode",{parentName:"a"},"lastFrame")),")."),(0,s.kt)("p",null,"Should trigger ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#onRecalculated"},(0,s.kt)("inlineCode",{parentName:"a"},"onRecalculated")),"."))}es.isMDXComponent=!0;const os={toc:[]};function ps(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},os,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Recalculate the scene."))}ps.isMDXComponent=!0;const rs={toc:[]};function ss(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called whenever something related to this scene has changed:\ntime events, source code, metadata, etc."),(0,s.kt)("p",null,"Should trigger ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene#onReloaded"},(0,s.kt)("inlineCode",{parentName:"a"},"onReloaded")),"."))}ss.isMDXComponent=!0;const cs={toc:[]};function as(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reload the scene."))}as.isMDXComponent=!0;const is={toc:[]};function ls(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},is,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If present, an updated version of the description."))}ls.isMDXComponent=!0;const us={toc:[]};function ms(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},us,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render the scene onto a canvas."))}ms.isMDXComponent=!0;const ds={toc:[]};function hs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ds,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to used when rendering."))}hs.isMDXComponent=!0;const ks={toc:[]};function ys(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ks,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset this scene to its initial state."))}ys.isMDXComponent=!0;const fs={toc:[]};function Ms(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If present, the previous scene."))}Ms.isMDXComponent=!0;const ws={toc:[]};function Ds(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ws,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"Update the view."),(0,s.kt)("p",null,"Invoked after each step of the main generator.\nCan be used for calculating layout."),(0,s.kt)("p",null,"Can modify the state of the view."))}Ds.isMDXComponent=!0;const _s={toc:[]};function Xs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_s,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Lifecycle events for ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,s.kt)("inlineCode",{parentName:"a"},"Scene"))," that are cleared on every reset."))}Xs.isMDXComponent=!0;const gs={toc:[]};function xs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A random number generator based on\n",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://gist.github.com/tommyettinger/46a874533244883189143505d203312c"},(0,s.kt)("inlineCode",{parentName:"a"},"Mulberry32")),"."))}xs.isMDXComponent=!0;const Cs={toc:[]};function Ts(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get an array filled with random floats in the given range."))}Ts.isMDXComponent=!0;const vs={toc:[]};function bs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The size of the array."))}bs.isMDXComponent=!0;const Ls={toc:[]};function Zs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ls,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."))}Zs.isMDXComponent=!0;const Ns={toc:[]};function As(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ns,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The end of the range."))}As.isMDXComponent=!0;const Es={toc:[]};function Rs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Es,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get an array filled with random integers in the given range."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"}),(0,s.kt)("li",{parentName:"ul"})))}Rs.isMDXComponent=!0;const zs={toc:[]};function Ss(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The size of the array."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"})))}Ss.isMDXComponent=!0;const Is={toc:[]};function Ws(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Is,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"})))}Ws.isMDXComponent=!0;const Gs={toc:[]};function Ps(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The end of the range. Exclusive."))}Ps.isMDXComponent=!0;const Bs={toc:[]};function Fs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the next random float in the given range."))}Fs.isMDXComponent=!0;const Us={toc:[]};function Vs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Us,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."))}Vs.isMDXComponent=!0;const qs={toc:[]};function js(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The end of the range."))}js.isMDXComponent=!0;const Os={toc:[]};function $s(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Os,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the next random integer in the given range."))}$s.isMDXComponent=!0;const Hs={toc:[]};function Ys(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."))}Ys.isMDXComponent=!0;const Ks={toc:[]};function Js(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ks,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The end of the range. Exclusive."))}Js.isMDXComponent=!0;const Qs={toc:[]};function tc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a new independent generator."))}tc.isMDXComponent=!0;const nc={toc:[]};function ec(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get variable signal if exists or create signal if not"))}ec.isMDXComponent=!0;const oc={toc:[]};function pc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The name of the variable."))}pc.isMDXComponent=!0;const rc={toc:[]};function sc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The initial value of the variable. It will be used if the\nvariable was not configured from the outside."))}sc.isMDXComponent=!0;const cc={toc:[]};function ac(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get variable signal if exists or create signal if not"))}ac.isMDXComponent=!0;const ic={toc:[]};function lc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ic,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset all stored signals."))}lc.isMDXComponent=!0;const uc={toc:[]};function mc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update all signals with new project variable values."))}mc.isMDXComponent=!0;const dc={toc:[]};function hc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Describes cached information about the timing of a scene."))}hc.isMDXComponent=!0;const kc={toc:[]};function yc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Describes a complete scene together with the meta file."))}yc.isMDXComponent=!0;const fc={toc:[]};function Mc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Configuration object."))}Mc.isMDXComponent=!0;const wc={toc:[]};function Dc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The class used to instantiate the scene."))}Dc.isMDXComponent=!0;const _c={toc:[]};function Xc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_c,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The stack trace at the moment of creation."))}Xc.isMDXComponent=!0;const gc={toc:[]};function xc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object."))}xc.isMDXComponent=!0;const Cc={toc:[]};function Tc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Scenes can implement this interface to make their components\ninspectable through the UI."))}Tc.isMDXComponent=!0;const vc={toc:[]};function bc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to overlay additional information about an\nelement on top of the animation."))}bc.isMDXComponent=!0;const Lc={toc:[]};function Zc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for the inspected element."))}Zc.isMDXComponent=!0;const Nc={toc:[]};function Ac(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The element for which to draw an overlay."))}Ac.isMDXComponent=!0;const Ec={toc:[]};function Rc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ec,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}Rc.isMDXComponent=!0;const zc={toc:[]};function Sc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Sc.isMDXComponent=!0;const Ic={toc:[]};function Wc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ic,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,'This information will be displayed in the "Properties" panel.'))}Wc.isMDXComponent=!0;const Gc={toc:[]};function Pc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return the attributes of the inspected element."))}Pc.isMDXComponent=!0;const Bc={toc:[]};function Fc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The element to inspect."))}Fc.isMDXComponent=!0;const Uc={toc:[]};function Vc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a possible element to inspect at a given position."))}Vc.isMDXComponent=!0;const qc={toc:[]};function jc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The x coordinate."))}jc.isMDXComponent=!0;const Oc={toc:[]};function $c(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The y coordinate."))}$c.isMDXComponent=!0;const Hc={toc:[]};function Yc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If a scene destroys and recreates its components upon every reset, the\nreference may no longer be val
10id. Even though the component is still\npresent. This method should check that and return a new reference."))}Yc.isMDXComponent=!0;const Kc={toc:[]};function Jc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the inspected element is still valid."))}Jc.isMDXComponent=!0;const Qc={toc:[]};function ta(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The element to validate."))}ta.isMDXComponent=!0;const na={toc:[]};function ea(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},na,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Any class implementing this interface should have a constructor matching\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneConstructor"},(0,s.kt)("inlineCode",{parentName:"a"},"SceneConstructor")),"."))}ea.isMDXComponent=!0;const oa={toc:[]};function pa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oa,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The main interface for scenes."))}pa.isMDXComponent=!0;const ra={toc:[]};function sa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ra,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will be passed as the second argument to the constructor."))}sa.isMDXComponent=!0;const ca={toc:[]};function aa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ca,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Name of the scene."))}aa.isMDXComponent=!0;const ia={toc:[]};function la(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ia,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reference to the project."))}la.isMDXComponent=!0;const ua={toc:[]};function ma(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ua,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#lifecycleEvents"},(0,s.kt)("inlineCode",{parentName:"a"},"lifecycleEvents"))," instead."))}ma.isMDXComponent=!0;const da={toc:[]};function ha(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},da,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/LifecycleEvents"},(0,s.kt)("inlineCode",{parentName:"a"},"LifecycleEvents"))," of this scene."))}ha.isMDXComponent=!0;const ka={toc:[]};function ya(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ka,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The frame at which this scene starts."))}ya.isMDXComponent=!0;const fa={toc:[]};function Ma(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fa,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The frame at which this scene ends."))}Ma.isMDXComponent=!0;const wa={toc:[]};function Da(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wa,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/LifecycleEvents"},(0,s.kt)("inlineCode",{parentName:"a"},"LifecycleEvents"))," of this scene."))}Da.isMDXComponent=!0;const _a={toc:[]};function Xa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_a,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the cached data changes."))}Xa.isMDXComponent=!0;const ga={toc:[]};function xa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ga,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered after scene is recalculated."))}xa.isMDXComponent=!0;const Ca={toc:[]};function Ta(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ca,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reloaded."))}Ta.isMDXComponent=!0;const va={toc:[]};function ba(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},va,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered at various stages of the render lifecycle with an event title and a Context2D."))}ba.isMDXComponent=!0;const La={toc:[]};function Za(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},La,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reset."))}Za.isMDXComponent=!0;const Na={toc:[]};function Aa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Na,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene directly before this scene, or null if omitted for performance."))}Aa.isMDXComponent=!0;const Ea={toc:[]};function Ra(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ea,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state?"))}Ra.isMDXComponent=!0;const za={toc:[]};function Sa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},za,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}Sa.isMDXComponent=!0;const Ia={toc:[]};function Wa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ia,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state."))}Wa.isMDXComponent=!0;const Ga={toc:[]};function Pa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ga,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Initial"},(0,s.kt)("inlineCode",{parentName:"a"},"Initial"))," state."))}Pa.isMDXComponent=!0;const Ba={toc:[]};function Fa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ba,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the size of this scene."),(0,s.kt)("p",null,"Usually return ",(0,s.kt)("inlineCode",{parentName:"p"},"this.project.getSize()"),"."))}Fa.isMDXComponent=!0;const Ua={toc:[]};function Va(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ua,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state?"))}Va.isMDXComponent=!0;const qa={toc:[]};function ja(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qa,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"Is this scene cached?"),(0,s.kt)("p",null,"Used only by ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene"},(0,s.kt)("inlineCode",{parentName:"a"},"GeneratorScene")),". Seeking through a project that\ncontains at least one uncached scene will log a warning to the console."),(0,s.kt)("p",null,"Should always return ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}ja.isMDXComponent=!0;const Oa={toc:[]};function $a(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oa,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Finished"},(0,s.kt)("inlineCode",{parentName:"a"},"Finished"))," state?"))}$a.isMDXComponent=!0;const Ha={toc:[]};function Ya(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ha,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Progress this scene one frame forward."))}Ya.isMDXComponent=!0;const Ka={toc:[]};function Ja(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ka,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The task of this method is to calculate new timings stored in the cache.\nWhen this method is invoked, ",(0,s.kt)("inlineCode",{parentName:"p"},"this.project.frame")," is set to the frame at\nwhich this scene should start (",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#firstFrame"},(0,s.kt)("inlineCode",{parentName:"a"},"firstFrame")),")."),(0,s.kt)("p",null,"At the end of execution, this method should set ",(0,s.kt)("inlineCode",{parentName:"p"},"this.project.frame")," to the\nframe at which this scene ends (",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#lastFrame"},(0,s.kt)("inlineCode",{parentName:"a"},"lastFrame")),")."),(0,s.kt)("p",null,"Should trigger ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#onRecalculated"},(0,s.kt)("inlineCode",{parentName:"a"},"onRecalculated")),"."))}Ja.isMDXComponent=!0;const Qa={toc:[]};function ti(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qa,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Recalculate the scene."))}ti.isMDXComponent=!0;const ni={toc:[]};function ei(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ni,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called whenever something related to this scene has changed:\ntime events, source code, metadata, etc."),(0,s.kt)("p",null,"Should trigger ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#onReloaded"},(0,s.kt)("inlineCode",{parentName:"a"},"onReloaded")),"."))}ei.isMDXComponent=!0;const oi={toc:[]};function pi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reload the scene."))}pi.isMDXComponent=!0;const ri={toc:[]};function si(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ri,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If present, an updated version of the description."))}si.isMDXComponent=!0;const ci={toc:[]};function ai(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ci,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render the scene onto a canvas."))}ai.isMDXComponent=!0;const ii={toc:[]};function li(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ii,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to used when rendering."))}li.isMDXComponent=!0;const ui={toc:[]};function mi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ui,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset this scene to its initial state."))}mi.isMDXComponent=!0;const di={toc:[]};function hi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},di,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If present, the previous scene."))}hi.isMDXComponent=!0;const ki={toc:[]};function yi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ki,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object."))}yi.isMDXComponent=!0;const fi={toc:[]};function Mi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Each class implementing the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,s.kt)("inlineCode",{parentName:"a"},"Scene"))," interface should have a matching\nconstructor."))}Mi.isMDXComponent=!0;const wi={toc:[]};function Di(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The constructor used when creating new scenes."))}Di.isMDXComponent=!0;const _i={toc:[]};function Xi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_i,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object. This object will be\npassed to the constructor from\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneDescription#config"},(0,s.kt)("inlineCode",{parentName:"a"},"config")),"."))}Xi.isMDXComponent=!0;const gi={toc:[]};function xi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gi,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"Describes a scene exposed by scene files."))}xi.isMDXComponent=!0;const Ci={toc:[]};function Ti(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ci,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Configuration object."))}Ti.isMDXComponent=!0;const vi={toc:[]};function bi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The class used to instantiate the scene."))}bi.isMDXComponent=!0;const Li={toc:[]};function Zi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Li,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The stack trace at the moment of creation."))}Zi.isMDXComponent=!0;const Ni={toc:[]};function Ai(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ni,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object."))}Ai.isMDXComponent=!0;const Ei={toc:[]};function Ri(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ei,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A part of the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneDescription"},(0,s.kt)("inlineCode",{parentName:"a"},"SceneDescription"))," that can be updated during reload."))}Ri.isMDXComponent=!0;const zi={toc:[]};function Si(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object."))}Si.isMDXComponent=!0;const Ii={toc:[]};function Wi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ii,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This interface is only useful when a scene uses thread generators to run."))}Wi.isMDXComponent=!0;const Gi={toc:[]};function Pi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Scenes can implement this interface to display their thread hierarchy in the\nUI."))}Pi.isMDXComponent=!0;const Bi={toc:[]};function Fi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the main thread changes."))}Fi.isMDXComponent=!0;const Ui={toc:[]};function Vi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ui,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents attributes of an inspected element."))}Vi.isMDXComponent=!0;const qi={toc:[]};function ji(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qi,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}ji.isMDXComponent=!0;const Oi={toc:[]};function $i(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents an element to inspect."))}$i.isMDXComponent=!0;const Hi={toc:[]};function Yi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A runtime representation of the scene metadata."))}Yi.isMDXComponent=!0;const Ki={toc:[]};function Ji(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ki,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a runtime representation of the scene metadata."))}Ji.isMDXComponent=!0;const Qi={toc:[]};function tl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Value wrappers for easy dependency tracking and cache invalidation."))}tl.isMDXComponent=!0;const nl={toc:[]};function el(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"\nconst signal = createSignal(0);\nsignal.isInitial(); // true\n\nsignal(5);\nsignal.isInitial(); // false\n\nsignal(DEFAULT);\nsignal.isInitial(); // true\n")))}el.isMDXComponent=!0;const ol={toc:[]};function pl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ol,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the signal is currently using its initial value."))}pl.isMDXComponent=!0;const rl={toc:[]};function sl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,s.kt)("p",null,"This method can be used to create copies of signals."))}sl.isMDXComponent=!0;const cl={toc:[]};function al(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}al.isMDXComponent=!0;const il={toc:[]};function ll(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},il,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the raw value of this signal."))}ll.isMDXComponent=!0;const ul={toc:[]};function ml(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ul,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}ml.isMDXComponent=!0;const dl={toc:[]};function hl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}hl.isMDXComponent=!0;const kl={toc:[]};function yl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}yl.isMDXComponent=!0;const fl={toc:[]};function Ml(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"signal.save();\n// same as:\nsignal(signal());\n")))}Ml.isMDXComponent=!0;const wl={toc:[]};function Dl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Compute the current value of the signal and immediately set it."))}
10Dl.isMDXComponent=!0;const _l={toc:[]};function Xl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_l,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"\nconst signal = createSignal(0);\nsignal.isInitial(); // true\n\nsignal(5);\nsignal.isInitial(); // false\n\nsignal(DEFAULT);\nsignal.isInitial(); // true\n")))}Xl.isMDXComponent=!0;const gl={toc:[]};function xl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the signal is currently using its initial value."))}xl.isMDXComponent=!0;const Cl={toc:[]};function Tl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,s.kt)("p",null,"This method can be used to create copies of signals."))}Tl.isMDXComponent=!0;const vl={toc:[]};function bl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}bl.isMDXComponent=!0;const Ll={toc:[]};function Zl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ll,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the raw value of this signal."))}Zl.isMDXComponent=!0;const Nl={toc:[]};function Al(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}Al.isMDXComponent=!0;const El={toc:[]};function Rl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},El,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}Rl.isMDXComponent=!0;const zl={toc:[]};function Sl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}Sl.isMDXComponent=!0;const Il={toc:[]};function Wl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Il,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"signal.save();\n// same as:\nsignal(signal());\n")))}Wl.isMDXComponent=!0;const Gl={toc:[]};function Pl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Compute the current value of the signal and immediately set it."))}Pl.isMDXComponent=!0;const Bl={toc:[]};function Fl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the signal is currently using its initial value."))}Fl.isMDXComponent=!0;const Ul={toc:[]};function Vl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ul,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}Vl.isMDXComponent=!0;const ql={toc:[]};function jl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ql,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}jl.isMDXComponent=!0;const Ol={toc:[]};function $l(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ol,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Compute the current value of the signal and immediately set it."))}$l.isMDXComponent=!0;const Hl={toc:[]};function Yl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Thread management."))}Yl.isMDXComponent=!0;const Kl={toc:[]};function Jl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Thread is a wrapper for a generator that can be executed concurrently."),(0,s.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."))}Jl.isMDXComponent=!0;const Ql={toc:[]};function tu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ql,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A class representing an individual thread."))}tu.isMDXComponent=!0;const nu={toc:[]};function eu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The generator wrapped by this thread."))}eu.isMDXComponent=!0;const ou={toc:[]};function pu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ou,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The generator wrapped by this thread."))}pu.isMDXComponent=!0;const ru={toc:[]};function su(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ru,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Used by ",(0,s.kt)("a",{parentName:"p",href:"/api/core/flow#waitFor"},(0,s.kt)("inlineCode",{parentName:"a"},"waitFor"))," and other time-based functions to properly\nsupport durations shorter than one frame."))}su.isMDXComponent=!0;const cu={toc:[]};function au(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The current time of this thread."))}au.isMDXComponent=!0;const iu={toc:[]};function lu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The next value to be passed to the wrapped generator."))}lu.isMDXComponent=!0;const uu={toc:[]};function mu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if this thread or any of its ancestors has been canceled."))}mu.isMDXComponent=!0;const du={toc:[]};function hu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},du,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Fixed time is a multiple of the frame duration. It can be used to account\nfor the difference between this thread's ",(0,s.kt)("a",{parentName:"p",href:"/api/core/threading/Thread#time"},(0,s.kt)("inlineCode",{parentName:"a"},"time"))," and the time of the\ncurrent animation frame."))}hu.isMDXComponent=!0;const ku={toc:[]};function yu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ku,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The fixed time of this thread."))}yu.isMDXComponent=!0;const fu={toc:[]};function Mu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Progress the wrapped generator once."))}Mu.isMDXComponent=!0;const wu={toc:[]};function Du(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the thread for the next update cycle."))}
10Du.isMDXComponent=!0;const _u={toc:[]};function Xu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_u,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The delta time of the next cycle."))}Xu.isMDXComponent=!0;const gu={toc:[]};function xu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A generator function or a normal function that returns a generator."))}xu.isMDXComponent=!0;const Cu={toc:[]};function Tu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Yielded values can be used to control the flow of animation:"),(0,s.kt)("p",null,"Progress to the next frame:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield;\n")),(0,s.kt)("p",null,"Run another generator synchronously:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* generatorFunction();\n")),(0,s.kt)("p",null,"Run another generator concurrently:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n")),(0,s.kt)("p",null,"Await a Promise:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const result = yield asyncFunction();\n")))}Tu.isMDXComponent=!0;const vu={toc:[]};function bu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The main generator type produced by all generator functions in Motion Canvas."))}bu.isMDXComponent=!0;const Lu={toc:[]};function Zu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Cancel all listed tasks."),(0,s.kt)("p",null,"Example:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n\n// do something concurrently\n\nyield* cancel(task);\n")))}Zu.isMDXComponent=!0;const Nu={toc:[]};function Au(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to cancel."))}Au.isMDXComponent=!0;const Eu={toc:[]};function Ru(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the given value is a ","[Promise][promise]","."))}Ru.isMDXComponent=!0;const zu={toc:[]};function Su(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A possible ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/promise"},"Promise"),"."))}Su.isMDXComponent=!0;const Iu={toc:[]};function Wu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the given value is a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/threading#ThreadGenerator"},(0,s.kt)("inlineCode",{parentName:"a"},"ThreadGenerator")),"."))}Wu.isMDXComponent=!0;const Gu={toc:[]};function Pu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A possible thread ",(0,s.kt)("a",{parentName:"p",href:"/api/core/threading#ThreadGenerator"},(0,s.kt)("inlineCode",{parentName:"a"},"ThreadGenerator")),"."))}Pu.isMDXComponent=!0;const Bu={toc:[]};function Fu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n\n// do something concurrently\n\nyield* join(task);\n")))}Fu.isMDXComponent=!0;const Uu={toc:[]};function Vu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Pause the current generator until all listed tasks are finished."))}Vu.isMDXComponent=!0;const qu={toc:[]};function ju(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to join."))}ju.isMDXComponent=!0;const Ou={toc:[]};function $u(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ou,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}$u.isMDXComponent=!0;const Hu={toc:[]};function Yu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Pause the current generator until listed tasks are finished."))}Yu.isMDXComponent=!0;const Ku={toc:[]};function Ju(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ku,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether we should wait for all tasks or for at least one."))}Ju.isMDXComponent=!0;const Qu={toc:[]};function tm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to join."))}tm.isMDXComponent=!0;const nm={toc:[]};function em(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"From the perspective of the external generator, ",(0,s.kt)("inlineCode",{parentName:"p"},"threads")," is executed\nsynchronously. By default, each scene generator is wrapped in its own\n",(0,s.kt)("inlineCode",{parentName:"p"},"threads")," generator."))}em.isMDXComponent=!0;const om={toc:[]};function pm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},om,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}pm.isMDXComponent=!0;const rm={toc:[]};function sm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a context in which generators can be run concurrently."))}sm.isMDXComponent=!0;const cm={toc:[]};function am(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A function that returns the generator to run."))}am.isMDXComponent=!0;const im={toc:[]};function lm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},im,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Called whenever threads are created, canceled or finished.\nUsed for debugging purposes."))}lm.isMDXComponent=!0;const um={toc:[]};function mm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},um,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Transitions between scenes."))}mm.isMDXComponent=!0;const dm={toc:[]};function hm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Perform a transition that fades between the scenes."))}hm.isMDXComponent=!0;const km={toc:[]};function ym(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},km,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition."))}ym.isMDXComponent=!0;const fm={toc:[]};function Mm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Perform a transition that slides the scene in a given direction."))}Mm.isMDXComponent=!0;const wm={toc:[]};function Dm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The direction in which to slide."))}Dm.isMDXComponent=!0;const _m={toc:[]};function Xm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_m,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition."))}Xm.isMDXComponent=!0;const gm={toc:[]};function xm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Transition to the current scene by altering the Context2D before scenes are rendered."))}xm.isMDXComponent=!0;const Cm={toc:[]};function Tm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The callback to use before the current scene is rendered."))}Tm.isMDXComponent=!0;const vm={toc:[]};function bm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The callback to use before the previous scene is rendered."))}bm.isMDXComponent=!0;const Lm={toc:[]};function Zm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Perform a transition that zooms in on a given area of the scene."))}Zm.isMDXComponent=!0;const Nm={toc:[]};function Am(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The area on which to zoom in."))}Am.isMDXComponent=!0;const Em={toc:[]};function Rm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Em,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition."))}Rm.isMDXComponent=!0;const zm={toc:[]};function Sm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Perform a transition that zooms out from a given area of the scene."))}Sm.isMDXComponent=!0;const Im={toc:[]};function Wm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Im,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The area from which to zoom out."))}Wm.isMDXComponent=!0;const Gm={toc:[]};function Pm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition."))}Pm.isMDXComponent=!0;const Bm={toc:[]};function Fm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Interpolation and timing of tweens."))}Fm.isMDXComponent=!0;const Um={toc:[]};function Vm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Um,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Any old key that is missing in ",(0,s.kt)("inlineCode",{parentName:"p"},"to")," will be removed immediately once value is\nnot 0. Any new key that is missing in ",(0,s.kt)("inlineCode",{parentName:"p"},"from")," will be added once value reaches"),(0,s.kt)("ol",null,(0,s.kt)("li",{parentName:"ol"})))}Vm.isMDXComponent=!0;const qm={toc:[]};function jm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A value matching the structure of from and to."))}jm.isMDXComponent=!0;const Om={toc:[]};function $m(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Om,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Interpolate between any two Records, including objects and Maps, even with\nmismatched keys."))}$m.isMDXComponent=!0;const Hm={toc:[]};function Ym(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The input to favor when value is 0."))}Ym.isMDXComponent=!0;const Km={toc:[]};function Jm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Km,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The input to favor when value is 1."))}Jm.isMDXComponent=!0;const Qm={toc:[]};function td(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"On a scale between 0 and 1, how closely to favor from vs to."))}td.isMDXComponent=!0;const nd={toc:[]};function ed(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A value matching the structure of from and to."))}ed.isMDXComponent=!0;const od={toc:[]};function pd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},od,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Interpolate between any two values, including objects, arrays, and Maps."))}pd.isMDXComponent=!0;const rd={toc:[]};function sd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The input to favor when value is 0."))}sd.isMDXComponent=!0;const cd={toc:[]};function ad(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The input to favor when value is 1."))}ad.isMDXComponent=!0;const id={toc:[]};function ld(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},id,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"On a scale between 0 and 1, how closely to favor from vs to."))}ld.isMDXComponent=!0;const ud={toc:[]};function md(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ud,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Complex types used in animations."))}md.isMDXComponent=!0;const dd={toc:[]};function hd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A specialized 2x3 Matrix representing a 2D transformation."),(0,s.kt)("p",null,"A Matrix2D contains six elements defined as\n","[a, b,\nc, d,\ntx, ty]"),(0,s.kt)("p",null,"This is a shortcut for a 3x3 matrix of the form\n","[a, b, 0,\nc, d, 0\ntx, ty, 1]"),(0,s.kt)("p",null,'Note that because a Matrix2D ignores the z-values of each component vectors,\nit does not satisfy all properties of a "real" 3x3 matrix.'),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"A Matrix2D has no transpose"),(0,s.kt)("li",{parentName:"ul"},"A(B + C) = AB + AC does not hold for a Matrix2D"),(0,s.kt)("li",{parentName:"ul"},"(rA)^-1 = r^-1 A^-1, r != 0 does not hold for a Matrix2D"),(0,s.kt)("li",{parentName:"ul"},"r(AB) = (rA)B = A(rB) does not hold for a Matrix2D")))}hd.isMDXComponent=!0;const kd={toc:[]};function yd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the determinant of the matrix."))}yd.isMDXComponent=!0;const fd={toc:[]};function Md(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the matrix is not invertible, i.e. its determinant is ",(0,s.kt)("inlineCode",{parentName:"p"},"0"),", this will\nreturn ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", instead."))}Md.isMDXComponent=!0;const wd={toc:[]};function Dd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const matrix = new Matrix2D(\n [1, 2],\n [3, 4],\n [5, 6],\n);\n\nconst inverse = matrix.inverse;\n// => Matrix2D(\n// [-2, 1],\n// [1.5, -0.5],\n// [1, -2],\n// )\n")))}Dd.isMDXComponent=!0;const _d={toc:[]};function Xd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_d,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the inverse of the matrix."))}Xd.isMDXComponent=!0;const gd={toc:[]};function xd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}xd.isMDXComponent=!0;const Cd={toc:[]};function Td(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const a = new Matrix2D(\n [1, 2],\n [3, 4],\n [5, 6],\n);\nconst a = new Matrix2D(\n [7, 8],\n [9, 10],\
10n [11, 12],\n);\n\nconst result = a.add(b);\n// => Matrix2D(\n// [8, 10],\n// [12, 14],\n// [16, 18],\n// )\n")))}Td.isMDXComponent=!0;const vd={toc:[]};function bd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the provided matrix to this matrix."))}bd.isMDXComponent=!0;const Ld={toc:[]};function Zd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ld,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The matrix to add"))}Zd.isMDXComponent=!0;const Nd={toc:[]};function Ad(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const matrix = new Matrix2D(\n [1, 0],\n [0, 0],\n [1, 0],\n);\n\nconst x = matrix.column(0);\n// Vector2(1, 0)\n\nconst y = matrix.column(1);\n// Vector2(0, 0)\n\nconst z = matrix.column(1);\n// Vector2(1, 0)\n")))}Ad.isMDXComponent=!0;const Ed={toc:[]};function Rd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ed,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the nth component vector of the matrix. Only defined for 0, 1, and 2."))}Rd.isMDXComponent=!0;const zd={toc:[]};function Sd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index of the component vector to retrieve."))}Sd.isMDXComponent=!0;const Id={toc:[]};function Wd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Id,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}Wd.isMDXComponent=!0;const Gd={toc:[]};function Pd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const a = new Matrix2D(\n [1, 2],\n [0, 1],\n [1, 1],\n);\nconst b = new Matrix2D(\n [2, 1],\n [1, 1],\n [1, 1],\n);\n\nconst result = a.mul(b);\n// => Matrix2D(\n// [2, 5],\n// [1, 3],\n// [2, 4],\n// )\n")))}Pd.isMDXComponent=!0;const Bd={toc:[]};function Fd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns the matrix product of this matrix with the provided matrix."))}Fd.isMDXComponent=!0;const Ud={toc:[]};function Vd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ud,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The matrix to multiply with"))}Vd.isMDXComponent=!0;const qd={toc:[]};
10function jd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const matrix = new Matrix2D(\n [1, 2],\n [3, 4],\n [5, 6],\n);\n\nconst result1 = matrix.mulScalar(2);\n// => new Matrix2D(\n// [2, 4],\n// [6, 8],\n// [10, 12],\n// )\n")))}jd.isMDXComponent=!0;const Od={toc:[]};function $d(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Od,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Multiply each value of the matrix by a scalar."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"})))}$d.isMDXComponent=!0;const Hd={toc:[]};function Yd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value by which to scale each term"))}Yd.isMDXComponent=!0;const Kd={toc:[]};function Jd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}Jd.isMDXComponent=!0;const Qd={toc:[]};function th(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const a = new Matrix2D(\n [1, 2],\n [3, 4],\n [5, 6],\n);\n\nconst result = a.rotate(90);\n// => Matrix2D(\n// [3, 4],\n// [-1, -2],\n// [5, 6],\n// )\n\n// Provide the angle in radians\nconst result = a.rotate(Math.PI * 0.5, true);\n// => Matrix2D(\n// [3, 4],\n// [-1, -2],\n// [5, 6],\n// )\n")))}th.isMDXComponent=!0;const nh={toc:[]};function eh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rotate the matrix by the provided angle. By default, the angle is\nprovided in degrees."))}eh.isMDXComponent=!0;const oh={toc:[]};function ph(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The angle by which to rotate the matrix"))}ph.isMDXComponent=!0;const rh={toc:[]};function sh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const matrix = new Matrix2D(\n [1, 0],\n [0, 0],\n [1, 0],\n);\n\nconst firstRow = matrix.column(0);\n// [1, 0, 1]\n\nconst secondRow = matrix.column(1);\n// [0, 0, 0]\n")))}sh.isMDXComponent=!0;const ch={toc:[]};function ah(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ch,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns the nth row of the matrix. Only defined for 0 and 1."))}ah.isMDXComponent=!0;const ih={toc:[]};function lh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ih,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index of the row to retrieve."))}lh.isMDXComponent=!0;const uh={toc:[]};function mh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If ",(0,s.kt)("inlineCode",{parentName:"p"},"vec")," is provided as a vector, the x and y component vectors of the\nmatrix will be scaled by the x and y parts of the vector, respectively."),(0,s.kt)("p",null,"If ",(0,s.kt)("inlineCode",{parentName:"p"},"vec")," is provided as a scalar, the x and y component vectors will be\nscaled uniformly by this factor."),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}mh.isMDXComponent=!0;const dh={toc:[]};function hh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const matrix = new Matrix2D(\n [1, 2],\n [3, 4],\n [5, 6],\n);\n\nconst result1 = matrix.scale([2, 3]);\n// => new Matrix2D(\n// [2, 4],\n// [9, 12],\n// [5, 6],\n/
10/ )\n\nconst result2 = matrix.scale(2);\n// => new Matrix2D(\n// [2, 4],\n// [6, 8],\n// [5, 6],\n// )\n")))}hh.isMDXComponent=!0;const kh={toc:[]};function yh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Scale the x and y component vectors of the matrix."))}yh.isMDXComponent=!0;const fh={toc:[]};function Mh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The factor by which to scale the matrix"))}Mh.isMDXComponent=!0;const wh={toc:[]};function Dh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}Dh.isMDXComponent=!0;const _h={toc:[]};function Xh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_h,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const a = new Matrix2D(\n [1, 2],\n [3, 4],\n [5, 6],\n);\nconst a = new Matrix2D(\n [7, 8],\n [9, 10],\n [11, 12],\n);\n\nconst result = a.sub(b);\n// => Matrix2D(\n// [-6, -6],\n// [-6, -6],\n// [-6, -6],\n// )\n")))}Xh.isMDXComponent=!0;const gh={toc:[]};function xh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subtract the provided matrix from this matrix."))}xh.isMDXComponent=!0;const Ch={toc:[]};function Th(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ch,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The matrix to subract"))}Th.isMDXComponent=!0;const vh={toc:[]};function bh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If ",(0,s.kt)("inlineCode",{parentName:"p"},"vec")," is provided as a scalar, matrix will be translated uniformly\nby this factor."),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}bh.isMDXComponent=!0;const Lh={toc:[]};function Zh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const matrix = new Matrix2D(\n [1, 2],\n [3, 4],\n [5, 6],\n);\n\nconst result1 = matrix.translate([2, 3]);\n// => new Matrix2D(\n// [1, 2],\n// [3, 4],\n// [16, 22],\n// )\n\nconst result2 = matrix.translate(2);\n// => new Matrix2D(\n// [1, 2],\n// [3, 4],\n// [13, 18],\n// )\n")))}Zh.isMDXComponent=!0;const Nh={toc:[]};function Ah(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Translate the matrix by the dimensions of the provided vector."))}Ah.isMDXComponent=!0;const Eh={toc:[]};function Rh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The vector by which to translate the matrix"))}Rh.isMDXComponent=!0;const zh={toc:[]};function Sh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents a two-dimensional vector."))}Sh.isMDXComponent=!0;const Ih={toc:[]};function Wh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ih,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma.hcl(50, 40, 100)._rgb._unclipped === [322.65,235.24,196.7,1]\n")))}Wh.isMDXComponent=!0;const Gh={toc:[]};function Ph(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The unclipped RGB components."))}Ph.isMDXComponent=!0;const Bh={toc:[]};function Fh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma.hcl(50, 40, 20).clipped() === true\n")))}Fh.isMDXComponent=!0;const Uh={toc:[]};function Vh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uh,e,{components:n,mdxType:"MDXLayout"}),(0,s.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)."))}Vh.isMDXComponent=!0;const qh={toc:[]};function jh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}jh.isMDXComponent=!0;const Oh={toc:[]};function $h(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Just like color.rgb but adds the alpha channel to the returned\narray."))}$h.isMDXComponent=!0;const Hh={toc:[]};function Yh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('33cc00').gl() === [0.2,0.8,0,1]\n")))}Yh.isMDXComponent=!0;const Kh={toc:[]};function Jh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the cyan, magenta, yellow, and key (black)\ncomponents, each as a normalized value between 0 and 1."))}Jh.isMDXComponent=!0;const Qh={toc:[]};function tk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('skyblue').hcl() === [235.11,25.94,79.21]\n")))}tk.isMDXComponent=!0;const nk={toc:[]};function ek(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Alias of ",(0,s.kt)("a",{parentName:"p",href:"#color-lch"}
10,"lch"),", but with the components in reverse\norder."))}ek.isMDXComponent=!0;const ok={toc:[]};function pk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ok,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').hsi() === [39.64,1,0.55]\nchroma('white').hsi() === [NaN,0,1]\n")))}pk.isMDXComponent=!0;const rk={toc:[]};function sk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the ",(0,s.kt)("inlineCode",{parentName:"p"},"hue"),", ",(0,s.kt)("inlineCode",{parentName:"p"},"saturation"),", and ",(0,s.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."))}sk.isMDXComponent=!0;const ck={toc:[]};function ak(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ck,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').hsl() === [38.82,1,0.5,1]\nchroma('white').hsl() === [NaN,0,1,1]\n")))}ak.isMDXComponent=!0;const ik={toc:[]};function lk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ik,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the ",(0,s.kt)("inlineCode",{parentName:"p"},"hue"),", ",(0,s.kt)("inlineCode",{parentName:"p"},"saturation"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"lightness"),"\ncomponent. Hue is the color angle in degree (",(0,s.kt)("inlineCode",{parentName:"p"},"0..360"),"), saturation\nand lightness are within ",(0,s.kt)("inlineCode",{parentName:"p"},"0..1"),". Note that for hue-less colors\n(black, white, and grays), the hue component will be NaN."))}lk.isMDXComponent=!0;const uk={toc:[]};function mk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').hsv() === [38.82,1,1]\nchroma('white').hsv() === [NaN,0,1]\n")))}mk.isMDXComponent=!0;const dk={toc:[]};function hk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the ",(0,s.kt)("inlineCode",{parentName:"p"},"hue"),", ",(0,s.kt)("inlineCode",{parentName:"p"},"saturation"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"value"),"\ncomponents. Hue is the color angle in degree (",(0,s.kt)("inlineCode",{parentName:"p"},"0..360"),"),\nsaturation and value are within ",(0,s.kt)("inlineCode",{parentName:"p"},"0..1"),". Note that for hue-less\ncolors (black, white, and grays), the hue component will be NaN."))}hk.isMDXComponent=!0;const kk={toc:[]};function yk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').lab() === [74.94,23.93,78.95]\n")))}yk.isMDXComponent=!0;const fk={toc:[]};function Mk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the ",(0,s.kt)("strong",{parentName:"p"},"L"),", ",(0,s.kt)("strong",{parentName:"p"},"a"),", and ",(0,s.kt)("strong",{parentName:"p"},"b")," components."))}Mk.isMDXComponent=!0;const wk={toc:[]};function Dk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('skyblue').lch() === [79.21,25.94,235.11]\n")))}Dk.isMDXComponent=!0;const _k={toc:[]};function Xk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_k,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the ",(0,s.kt)("strong",{parentName:"p"},"Lightness"),", ",(0,s.kt)("strong",{parentName:"p"},"chroma"),", and ",(0,s.kt)("strong",{parentName:"p"},"hue"),"\ncomponents."))}Xk.isMDXComponent=!0;const gk={toc:[]};function xk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}xk.isMDXComponent=!0;const Ck={toc:[]};function Tk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ck,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Tk.isMDXComponent=!0;const vk={toc:[]};function bk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}bk.isMDXComponent=!0;const Lk={toc:[]};function Zk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Just like color.rgb but adds the alpha channel to the returned array."))}Zk.isMDXComponent=!0;const Nk={toc:[]};function Ak(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get and set the color opacity."))}Ak.isMDXComponent=!0;const Ek={toc:[]};function Rk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ek,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns a RGB() or HSL() string representation that can be used as CSS-color definition.\nmode defaults to ",(0,s.kt)("code",null,"'rgb'")))}Rk.isMDXComponent=!0;const zk={toc:[]};function Sk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Similar to saturate, but the opposite direction."))}Sk.isMDXComponent=!0;const Ik={toc:[]};function Wk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ik,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"set"))}Wk.isMDXComponent=!0;const Gk={toc:[]};function Pk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns a single channel value.\nAlso"))}Pk.isMDXComponent=!0;const Bk={toc:[]};function Fk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}Fk.isMDXComponent=!0;const Uk={toc:[]};function Vk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color as hexadecimal string."))}Vk.isMDXComponent=!0;const qk={toc:[]};function jk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,(0,s.kt)("inlineCode",{parentName:"p"},"auto")," - string will include alpha channel only if it's less than 1.\n",(0,s.kt)("inlineCode",{parentName:"p"},"rgb")," - string will not include alpha channel.\n",(0,s.kt)("inlineCode",{parentName:"p"},"rgba")," - string will include alpha channel."))}jk.isMDXComponent=!0;const Ok={toc:[]};function $k(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ok,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Relative brightness, according to the\n","[WCAG][`http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef`]","(",(0,s.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."))}$k.isMDXComponent=!0;const Hk={toc:[]};function Yk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hk,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Yk.isMDXComponent=!0;const Kk={toc:[]};function Jk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns the named color. Falls back to hexadecimal RGB string, if the color isn't present."))}Jk.isMDXComponent=!0;const Qk={toc:[]};function ty(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('#000000').num() === 0\nchroma('#0000ff').num() === 255\nchroma('#00ff00').num() === 65280\nchroma('#ff0000').num() === 16711680\n")))}ty.isMDXComponent=!0;const ny={toc:[]};function ey(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ny,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns the numeric representation of the hexadecimal RGB color."))}ey.isMDXComponent=!0;const oy={toc:[]};function py(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Changes the saturation of a color by manipulating the Lch chromacity."))}py.isMDXComponent=!0;const ry={toc:[]};function sy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ry,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"// half Lab lightness\nchroma('orangered').set('lab.l', '*0.5')\n")))}sy.isMDXComponent=!0;const cy={toc:[]};function ay(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"// double Lch saturation\nchroma('darkseagreen').set('lch.c', '*2')\n")))}ay.isMDXComponent=!0;const iy={toc:[]};function ly(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Changes a single channel and returns the result a new chroma object."))}ly.isMDXComponent=!0;const uy={toc:[]};function my(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uy,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}my.isMDXComponent=!0;const dy={toc:[]};function hy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const bottomRight = originToOffset(Origin.TopRight);\n// bottomRight = {x: 1, y: -1}\n")))}hy.isMDXComponent=!0;const ky={toc:[]};function yy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ky,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Convert the given origin to a vector representing its offset."))}yy.isMDXComponent=!0;const fy={toc:[]};function My(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The origin to convert."))}My.isMDXComponent=!0;const wy={toc:[]};function Dy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"General utilities and helper functions."))}Dy.isMDXComponent=!0;const _y={toc:[]};function Xy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_y,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://v8.dev/docs/stack-trace-api#customizing-stack-traces"},"http://web.archive.org/web/20230315084628/https://v8.dev/docs/stack-trace-api#customizing-stack-traces")))}Xy.isMDXComponent=!0;const gy={toc:[]};function xy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Optional override for formatting stack traces"))}xy.isMDXComponent=!0;const Cy={toc:[]};function Ty(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create .stack property on a target object"))}Ty.isMDXComponent=!0;const vy={toc:[]};function by(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is a shortcut for calling ",(0,s.kt)("inlineCode",{parentName:"p"},"useLogger().debug()")," which allows\nyou to more easily log non-string values as well."))}by.isMDXComponent=!0;const Ly={toc:[]};function Zy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ly,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}Zy.isMDXComponent=!0;const Ny={toc:[]};function Ay(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ny,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Logs a debug message with an arbitrary payload."))}Ay.isMDXComponent=!0;const Ey={toc:[]};function Ry(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ey,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The payload to log"))}Ry.isMDXComponent=!0;const zy={toc:[]};function Sy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Mark the given function as deprecated."))}Sy.isMDXComponent=!0;const Iy={toc:[]};function Wy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The function to deprecate."))}Wy.isMDXComponent=!0;const Gy={toc:[]};function Py(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The log message."))}Py.isMDXComponent=!0;const By={toc:[]};function Fy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},By,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The optional log remarks."))}Fy.isMDXComponent=!0;const Uy={toc:[]};function Vy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uy,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Vy.isMDXComponent=!0;const qy={toc:[]};function jy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Mark the current scene as ready to transition out."))}jy.isMDXComponent=!0;const Oy={toc:[]};function $y(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value can either be 'true' of 'false'\n(as strings) if present, or be undefined if not run\nfrom a vite context or run without the MC Plugin."))}$y.isMDXComponent=!0;const Hy={toc:[]};function Yy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the proxy is enabled via the plugin by checking\nfor ",(0,s.kt)("inlineCode",{parentName:"p"},"import.meta.env.VITE_MC_PROXY_ENABLED")))}Yy.isMDXComponent=!0;const Ky={toc:[]};function Jy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ky,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const array1 = range(3); // [0, 1, 2]\nconst array2 = range(-3); // [0, -1, -2]\n")))}Jy.isMDXComponent=!0;const Qy={toc:[]};function tf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an array containing a range of numbers."))}tf.isMDXComponent=!0;const nf={toc:[]};function ef(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The length of the array."))}ef.isMDXComponent=!0;const of={toc:[]};function pf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},of,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const array1 = range(3, 7); // [3, 4, 5, 6]\nconst array2 = range(7, 3); // [7, 6, 5, 4]\n")))}pf.isMDXComponent=!0;const rf={toc:[]};function sf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an array containing a range of numbers."))}sf.isMDXComponent=!0;const cf={toc:[]};function af(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."))}af.isMDXComponent=!0;const lf={toc:[]};function uf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The end of the range. ",(0,s.kt)("inlineCode",{parentName:"p"},"to")," itself is not included in the result."))}uf.isMDXComponent=!0;const mf={toc:[]};function df(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const array1 = range(1, 2, 0.25); // [1, 1.25, 1.5, 1.75]\nconst array2 = range(2, 1, -0.25); // [2, 1.75, 1.5, 1.25]\n")))}df.isMDXComponent=!0;const hf={toc:[]};function kf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an array containing a range of numbers."))}kf.isMDXComponent=!0;const yf={toc:[]};function ff(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."))}ff.isMDXComponent=!0;const Mf={toc:[]};function wf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The end of the range. ",(0,s.kt)("inlineCode",{parentName:"p"},"to")," itself is not included in the result."))}wf.isMDXComponent=!0;const Df={toc:[]};function _f(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Df,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value by which to increment or decrement."))}_f.isMDXComponent=!0;const Xf={toc:[]};function gf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provide a function to access the Context2D before the scene is rendered."))}gf.isMDXComponent=!0;const xf={toc:[]};function Cf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The function that will be provided the context before render."))}Cf.isMDXComponent=!0;const Tf={toc:[]};function vf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provide a function to access the Context2D after the scene is rendered."))}vf.isMDXComponent=!0;const bf={toc:[]};function Lf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The function that will be provided the context after render."))}Lf.isMDXComponent=!0;const Zf={toc:[]};function Nf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This can be used to better specify when an animation should start\nas well as how long this animation should take"))}Nf.isMDXComponent=!0;const Af={toc:[]};function Ef(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Af,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}Ef.isMDXComponent=!0;const Rf={toc:[]};function zf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the event in seconds."))}zf.isMDXComponent=!0;const Sf={toc:[]};function If(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Register a time event and get its duration in seconds."))}If.isMDXComponent=!0;const Wf={toc:[]};function Gf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The name of the event."))}Gf.isMDXComponent=!0;const Pf={toc:[]};function Bf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a reference to the playback status."))}Bf.isMDXComponent=!0;const Ff={toc:[]};function Uf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ff,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the random number generator for the current scene."))}Uf.isMDXComponent=!0;const Vf={toc:[]};function qf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the random number generator for the given seed."))}qf.isMDXComponent=!0;const jf={toc:[]};function Of(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The seed for the generator."))}Of.isMDXComponent=!0;const $f={toc:[]};function Hf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$f,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the seed should be fixed. Fixed seeds remain\nthe same even when the main scene seed changes."))}Hf.isMDXComponent=!0;const Yf={toc:[]};function Kf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a reference to the current scene."))}Kf.isMDXComponent=!0;const Jf={toc:[]};function Qf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a reference to the current thread."))}Qf.isMDXComponent=!0;const tM={toc:[]};function nM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned value accounts for offsets caused by functions such as\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/flow#waitFor"},(0,s.kt)("inlineCode",{parentName:"a"},"waitFor")),"."))}nM.isMDXComponent=!0;const eM={toc:[]};function oM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}oM.isMDXComponent=!0;const pM={toc:[]};function rM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the real time since the start of the animation."))}rM.isMDXComponent=!0;const sM={toc:[]};function cM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This rewrites a remote url like ",(0,s.kt)("inlineCode",{parentName:"p"},"http://web.archive.org/web/20230315084628/https://via.placeholder.com/300.png/09f/fff"),"\ninto a URI-Component-Encoded string like\n",(0,s.kt)("inlineCode",{parentName:"p"},"/cors-proxy/https%3A%2F%2Fvia.placeholder.com%2F300.png%2F09f%2Ffff")))}cM.isMDXComponent=!0;const aM={toc:[]};function iM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Route the given url through a local proxy."))}iM.isMDXComponent=!0;const lM={toc
10:[]};function uM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This node can be used to render shapes such as: circle, ellipse, arc, and\nsector (pie chart)."))}uM.isMDXComponent=!0;const mM={toc:[]};function dM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A simple circle:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Circle\n size={300}\n fill={'lightseagreen'}\n/>\n")),(0,s.kt)("p",null,"An ellipse:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Circle\n width={300}\n height={100}\n fill={'lightseagreen'}\n/>\n")),(0,s.kt)("p",null,"A sector (pie chart):"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Circle\n size={300}\n fill={'lightseagreen'}\n startAngle={30}\n endAngle={270}\n closed={true}\n/>\n")),(0,s.kt)("p",null,"An arc:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Circle\n size={300}\n stroke={'lightseagreen'}\n lineWidth={8}\n startAngle={-90}\n endAngle={90}\n/>\n")))}dM.isMDXComponent=!0;const hM={toc:[]};function kM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node for drawing circular shapes."))}kM.isMDXComponent=!0;const yM={toc:[]};function fM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yM,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}fM.isMDXComponent=!0;const MM={toc:[]};function wM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}wM.isMDXComponent=!0;const DM={toc:[]};function _M(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DM,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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 XM={toc:[]};function gM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}gM.isMDXComponent=!0;const xM={toc:[]};function CM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xM,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}CM.isMDXComponent=!0;const TM={toc:[]};function vM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in
10world space."))}vM.isMDXComponent=!0;const bM={toc:[]};function LM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When set to true, the path of this circle will start and end at the center.\nThis can be used to fine-tune how sectors are rendered."))}LM.isMDXComponent=!0;const ZM={toc:[]};function NM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A closed circle will look like a pie chart:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Circle\n size={300}\n fill={'lightseagreen'}\n endAngle={230}\n closed={true}\n/>\n")),(0,s.kt)("p",null,"An open one will look like an arc:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Circle\n size={300}\n stroke={'lightseagreen'}\n lineWidth={8}\n endAngle={230}\n closed={false}\n/>\n")))}NM.isMDXComponent=!0;const AM={toc:[]};function EM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"false"))}EM.isMDXComponent=!0;const RM={toc:[]};function zM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the path of this circle should be closed."))}zM.isMDXComponent=!0;const SM={toc:[]};function IM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This property can be used together with ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#endAngle"},(0,s.kt)("inlineCode",{parentName:"a"},"endAngle"))," to turn this\ncircle into a sector (when using fill) or an arc (when using stroke)."))}IM.isMDXComponent=!0;const WM={toc:[]};function GM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"360"))}GM.isMDXComponent=!0;const PM={toc:[]};function BM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ending angle in degrees for the circle sector."))}BM.isMDXComponent=!0;const FM={toc:[]};function UM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FM,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}UM.isMDXComponent=!0;const VM={toc:[]};function qM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}qM.isMDXComponent=!0;const jM={toc:[]};function OM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}OM.isMDXComponent=!0;const $M={toc:[]};function HM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$M,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}HM.isMDXComponent=!0;const YM={toc:[]};function KM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}KM.isMDXComponent=!0;const JM={toc:[]};function QM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}QM.isMDXComponent=!0;const tw={toc:[]};function nw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}nw.isMDXComponent=!0;const ew={toc:[]};function ow(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ew,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}ow.isMDXComponent=!0;const pw={toc:[]};function rw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}rw.isMDXComponent=!0;const sw={toc:[]};function cw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}cw.isMDXComponent=!0;const aw={toc:[]};function iw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This property can be used together with ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#startAngle"},(0,s.kt)("inlineCode",{parentName:"a"},"startAngle"))," to turn this\ncircle into a sector (when using fill) or an arc (when using stroke)."))}iw.isMDXComponent=!0;const lw={toc:[]};function uw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"0"))}uw.isMDXComponent=!0;const mw={toc:[]};function dw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The starting angle in degrees for the circle sector."))}dw.isMDXComponent=!0;const hw={toc:[]};function kw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}kw.isMDXComponent=!0;const yw={toc:[]};function fw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}fw.isMDXComponent=!0;const Mw={toc:[]};function ww(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}ww.isMDXComponent=!0;const Dw={toc:[]};function _w(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}_w.isMDXComponent=!0;const Xw={toc:[]};function gw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}gw.isMDXComponent=!0;const xw={toc:[]};function Cw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}Cw.isMDXComponent=!0;const Tw={toc:[]};function vw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}vw.isMDXComponent=!0;const bw={toc:[]};function Lw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}Lw.isMDXComponent=!0;const Zw={toc:[]};function Nw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}Nw.isMDXComponent=!0;const Aw={toc:[]};function Ew(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Aw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Ew.isMDXComponent=!0;const Rw={toc:[]};function zw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}zw.isMDXComponent=!0;const Sw={toc:[]};function Iw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Iw.isMDXComponent=!0;const Ww={toc:[]};function Gw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ww,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}Gw.isMDXComponent=!0;const Pw={toc:[]};function Bw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pw,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Bw.isMDXComponent=!0;const Fw={toc:[]};function Uw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}Uw.isMDXComponent=!0;const Vw={toc:[]};function qw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}qw.isMDXComponent=!0;const jw={toc:[]};function Ow(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}Ow.isMDXComponent=!0;const $w={toc:[]};function Hw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$w,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}Hw.isMDXComponent=!0;const Yw={toc:[]};function Kw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}Kw.isMDXComponent=!0;const Jw={toc:[]};function Qw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jw,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Qw.isMDXComponent=!0;const tD={toc:[]};function nD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}nD.isMDXComponent=!0;const eD={toc:[]};function oD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}oD.isMDXComponent=!0;const pD={toc:[]};function rD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}rD.isMDXComponent=!0;const sD={toc:[]};function cD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}cD.isMDXComponent=!0;const aD={toc:[]};function iD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}iD.isMDXComponent=!0;const lD={toc:[]};function uD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}uD.isMDXComponent=!0;const mD={toc:[]};function dD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mD,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}dD.isMDXComponent=!0;const hD={toc:[]};function kD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}kD.isMDXComponent=!0;const yD={toc:[]};function fD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}fD.isMDXComponent=!0;const MD={toc:[]};function wD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}wD.isMDXComponent=!0;const DD={toc:[]};function _D(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}_D.isMDXComponent=!0;const XD={toc:[]};function gD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}gD.isMDXComponent=!0;const xD={toc:[]};function CD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}CD.isMDXComponent=!0;const TD={toc:[]};function vD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}vD.isMDXComponent=!0;const bD={toc:[]};function LD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}LD.isMDXComponent=!0;const ZD={toc:[]};function ND(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}ND.isMDXComponent=!0;const AD={toc:[]};function ED(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}ED.isMDXComponent=!0;const RD={toc:[]};function zD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}zD.isMDXComponent=!0;const SD={toc:[]};function ID(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}ID.isMDXComponent=!0;const WD={toc:[]};function GD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}GD.isMDXComponent=!0;const PD={toc:[]};function BD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}BD.isMDXComponent=!0;const FD={toc:[]};function UD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}UD.isMDXComponent=!0;const VD={toc:[]};function qD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}qD.isMDXComponent=!0;const jD={toc:[]};function OD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}OD.isMDXComponent=!0;const $D={toc:[]};function HD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$D,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}HD.isMDXComponent=!0;const YD={toc:[]};function KD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}KD.isMDXComponent=!0;const JD={toc:[]};function QD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}QD.isMDXComponent=!0;const t_={toc:[]};function n_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t_,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}n_.isMDXComponent=!0;const e_={toc:[]};function o_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}o_.isMDXComponent=!0;
10const p_={toc:[]};function r_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}r_.isMDXComponent=!0;const s_={toc:[]};function c_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}c_.isMDXComponent=!0;const a_={toc:[]};function i_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}i_.isMDXComponent=!0;const l_={toc:[]};function u_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}u_.isMDXComponent=!0;const m_={toc:[]};function d_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}d_.isMDXComponent=!0;const h_={toc:[]};function k_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}k_.isMDXComponent=!0;const y_={toc:[]};function f_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}f_.isMDXComponent=!0;const M_={toc:[]};function w_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}w_.isMDXComponent=!0;const D_={toc:[]};function __(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}__.isMDXComponent=!0;const X_={toc:[]};function g_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X_,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}g_.isMDXComponent=!0;const x_={toc:[]};function C_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}C_.isMDXComponent=!0;const T_={toc:[]};function v_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}v_.isMDXComponent=!0;const b_={toc:[]};function L_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}L_.isMDXComponent=!0;const Z_={toc:[]};function N_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}N_.isMDXComponent=!0;const A_={toc:[]};function E_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}E_.isMDXComponent=!0;const R_={toc:[]};function z_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}z_.isMDXComponent=!0;const S_={toc:[]};function I_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S_,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}I_.isMDXComponent=!0;const W_={toc:[]};function G_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}G_.isMDXComponent=!0;const P_={toc:[]};function B_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P_,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}B_.isMDXComponent=!0;const F_={toc:[]};function U_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}U_.isMDXComponent=!0;const V_={toc:[]};function q_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V_,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}q_.isMDXComponent=!0;const j_={toc:[]};function O_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}O_.isMDXComponent=!0;const $_={toc:[]};function H_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}H_.isMDXComponent=!0;const Y_={toc:[]};function K_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}K_.isMDXComponent=!0;const J_={toc:[]};function Q_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Q_.isMDXComponent=!0;const tX={toc:[]};function nX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}nX.isMDXComponent=!0;const eX={toc:[]};function oX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}oX.isMDXComponent=!0;const pX={toc:[]};function rX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}rX.isMDXComponent=!0;const sX={toc:[]};function cX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}cX.isMDXComponent=!0;const aX={toc:[]};function iX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}iX.isMDXComponent=!0;const lX={toc:[]};function uX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}uX.isMDXComponent=!0;const mX={toc:[]};function dX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}dX.isMDXComponent=!0;const hX={toc:[]};function kX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}kX.isMDXComponent=!0;const yX={toc:[]};function fX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}fX.isMDXComponent=!0;const MX={toc:[]};function wX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}wX.isMDXComponent=!0;const DX={toc:[]};function _X(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}_X.isMDXComponent=!0;const XX={toc:[]};function gX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}gX.isMDXComponent=!0;const xX={toc:[]};function CX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}CX.isMDXComponent=!0;const TX={toc:[]};function vX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}vX.isMDXComponent=!0;const bX={toc:[]};function LX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}LX.isMDXComponent=!0;const ZX={toc:[]};function NX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}NX.isMDXComponent=!0;const AX={toc:[]};function EX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}EX.isMDXComponent=!0;const RX={toc:[]};function zX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RX,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}zX.isMDXComponent=!0;const SX={toc:[]};function IX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}IX.isMDXComponent=!0;const WX={toc:[]};function GX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}GX.isMDXComponent=!0;const PX={toc:[]};function BX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#clone"},(0,s.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."))}BX.isMDXComponent=!0;const FX={toc:[]};function UX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}UX.isMDXComponent=!0;const VX={toc:[]};function qX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}qX.isMDXComponent=!0;const jX={toc:[]};function OX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jX,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}OX.isMDXComponent=!0;const $X={toc:[]};function HX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$X,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}HX.isMDXComponent=!0;const YX={toc:[]};function KX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}KX.isMDXComponent=!0;const JX={toc:[]};function QX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}QX.isMDXComponent=!0;const tg={toc:[]};function ng(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}ng.isMDXComponent=!0;const eg={toc:[]};function og(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}og.isMDXComponent=!0;const pg={toc:[]};function rg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}rg.isMDXComponent=!0;const sg={toc:[]};function cg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}cg.isMDXComponent=!0;const ag={toc:[]};function ig(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ag,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}ig.isMDXComponent=!0;const lg={toc:[]};function ug(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}ug.isMDXComponent=!0;const mg={toc:[]};function dg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mg,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}dg.isMDXComponent=!0;const hg={toc:[]};function kg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}kg.isMDXComponent=!0;const yg={toc:[]};function fg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yg,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}fg.isMDXComponent=!0;const Mg={toc:[]};function wg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}wg.isMDXComponent=!0;const Dg={toc:[]};function _g(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dg,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}_g.isMDXComponent=!0;const Xg={toc:[]};function gg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}gg.isMDXComponent=!0;const xg={toc:[]};function Cg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xg,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}Cg.isMDXComponent=!0;const Tg={toc:[]};function vg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}vg.isMDXComponent=!0;const bg={toc:[]};function Lg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}Lg.isMDXComponent=!0;const Zg={toc:[]};function Ng(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Ng.isMDXComponent=!0;const Ag={toc:[]};function Eg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ag,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}Eg.isMDXComponent=!0;const Rg={toc:[]};function zg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}zg.isMDXComponent=!0;const Sg={toc:[]};function Ig(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}Ig.isMDXComponent=!0;const Wg={toc:[]};function Gg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}Gg.isMDXComponent=!0;const Pg={toc:[]};function Bg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}
10Bg.isMDXComponent=!0;const Fg={toc:[]};function Ug(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}Ug.isMDXComponent=!0;const Vg={toc:[]};function qg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}qg.isMDXComponent=!0;const jg={toc:[]};function Og(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;\n layout--\x3ecircle;"}))}Og.isMDXComponent=!0;const $g={toc:[]};function Hg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$g,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Hg.isMDXComponent=!0;const Yg={toc:[]};function Kg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Kg.isMDXComponent=!0;const Jg={toc:[]};function Qg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}Qg.isMDXComponent=!0;const tx={toc:[]};function nx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}nx.isMDXComponent=!0;const ex={toc:[]};function ox(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ex,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}ox.isMDXComponent=!0;const px={toc:[]};function rx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},px,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}rx.isMDXComponent=!0;const sx={toc:[]};function cx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}cx.isMDXComponent=!0;const ax={toc:[]};function ix(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ax,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}ix.isMDXComponent=!0;const lx={toc:[]};function ux(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}ux.isMDXComponent=!0;const mx={toc:[]};function dx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}dx.isMDXComponent=!0;const hx={toc:[]};function kx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}kx.isMDXComponent=!0;const yx={toc:[]};function fx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yx,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}fx.isMDXComponent=!0;const Mx={toc:[]};function wx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}wx.isMDXComponent=!0;const Dx={toc:[]};function _x(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}_x.isMDXComponent=!0;const Xx={toc:[]};function gx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}gx.isMDXComponent=!0;const xx={toc:[]};function Cx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xx,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}Cx.isMDXComponent=!0;const Tx={toc:[]};function vx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}vx.isMDXComponent=!0;const bx={toc:[]};function Lx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bx,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Lx.isMDXComponent=!0;const Zx={toc:[]};function Nx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}Nx.isMDXComponent=!0;const Ax={toc:[]};function Ex(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ax,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Ex.isMDXComponent=!0;const Rx={toc:[]};function zx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}zx.isMDXComponent=!0;const Sx={toc:[]};function Ix(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}Ix.isMDXComponent=!0;const Wx={toc:[]};function Gx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Gx.isMDXComponent=!0;const Px={toc:[]};function Bx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Px,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}Bx.isMDXComponent=!0;const Fx={toc:[]};function Ux(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fx,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Ux.isMDXComponent=!0;const Vx={toc:[]};function qx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}qx.isMDXComponent=!0;const jx={toc:[]};function Ox(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Ox.isMDXComponent=!0;const $x={toc:[]};function Hx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$x,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}Hx.isMDXComponent=!0;const Yx={toc:[]};function Kx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Kx.isMDXComponent=!0;const Jx={toc:[]};function Qx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}Qx.isMDXComponent=!0;const tC={toc:[]};function nC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}nC.isMDXComponent=!0;const eC={toc:[]};function oC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}oC.isMDXComponent=!0;const pC={toc:[]};function rC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}rC.isMDXComponent=!0;const sC={toc:[]};function cC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}cC.isMDXComponent=!0;const aC={toc:[]};function iC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}iC.isMDXComponent=!0;const lC={toc:[]};function uC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}uC.isMDXComponent=!0;const mC={toc:[]};function dC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}dC.isMDXComponent=!0;const hC={toc:[]};function kC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}kC.isMDXComponent=!0;const yC={toc:[]};function fC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}fC.isMDXComponent=!0;const MC={toc:[]};function wC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}wC.isMDXComponent=!0;const DC={toc:[]};function _C(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}_C.isMDXComponent=!0;const XC={toc:[]};function gC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}gC.isMDXComponent=!0;const xC={toc:[]};function CC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}CC.isMDXComponent=!0;const TC={toc:[]};function vC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}vC.isMDXComponent=!0;const bC={toc:[]};function LC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}LC.isMDXComponent=!0;const ZC={toc:[]};function NC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZC,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}NC.isMDXComponent=!0;const AC={toc:[]};function EC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}EC.isMDXComponent=!0;const RC={toc:[]};function zC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}zC.isMDXComponent=!0;const SC={toc:[]};function IC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}IC.isMDXComponent=!0;const WC={toc:[]};function GC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}GC.isMDXComponent=!0;const PC={toc:[]};function BC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}BC.isMDXComponent=!0;const FC={toc:[]};function UC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}UC.isMDXComponent=!0;const VC={toc:[]};function qC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}qC.isMDXComponent=!0;const jC={toc:[]};function OC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}OC.isMDXComponent=!0;const $C={toc:[]};function HC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$C,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}HC.isMDXComponent=!0;const YC={toc:[]};function KC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}KC.isMDXComponent=!0;const JC={toc:[]};function QC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JC,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}QC.isMDXComponent=!0;const tT={toc:[]};function nT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}nT.isMDXComponent=!0;const eT={toc:[]};function oT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}oT.isMDXComponent=!0;const pT={toc:[]};function rT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}rT.isMDXComponent=!0;const sT={toc:[]};function cT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}cT.isMDXComponent=!0;const aT={toc:[]};function iT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}iT.isMDXComponent=!0;const lT={toc:[]};function uT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}uT.isMDXComponent=!0;const mT={toc:[]};function dT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mT,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},hT,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},yT,e,{components:n,mdxType:"MDXLayout"}),(0,s.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 MT={toc:[]};function wT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}wT.isMDXComponent=!0;const DT={toc:[]};function _T(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DT,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},XT,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},xT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}CT.isMDXComponent=!0;const TT={toc:[]};function vT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}vT.isMDXComponent=!0;const bT={toc:[]};function LT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}LT.isMDXComponent=!0;const ZT={toc:[]};function NT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}NT.isMDXComponent=!0;const AT={toc:[]};function ET(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}ET.isMDXComponent=!0;const RT={toc:[]};function zT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RT,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},ST,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}IT.isMDXComponent=!0;const WT={toc:[]};function GT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}
10GT.isMDXComponent=!0;const PT={toc:[]};function BT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}BT.isMDXComponent=!0;const FT={toc:[]};function UT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}UT.isMDXComponent=!0;const VT={toc:[]};function qT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}qT.isMDXComponent=!0;const jT={toc:[]};function OT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jT,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},$T,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},YT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}KT.isMDXComponent=!0;const JT={toc:[]};function QT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}QT.isMDXComponent=!0;const tv={toc:[]};function nv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}nv.isMDXComponent=!0;const ev={toc:[]};function ov(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ev,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}ov.isMDXComponent=!0;const pv={toc:[]};function rv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}rv.isMDXComponent=!0;const sv={toc:[]};function cv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#restore"},(0,s.kt)("inlineCode",{parentName:"a"},"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}cv.isMDXComponent=!0;const av={toc:[]};function iv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},av,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}iv.isMDXComponent=!0;const lv={toc:[]};function uv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lv,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}uv.isMDXComponent=!0;const mv={toc:[]};function dv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}dv.isMDXComponent=!0;const hv={toc:[]};function kv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}kv.isMDXComponent=!0;const yv={toc:[]};function fv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#clone"},(0,s.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."))}fv.isMDXComponent=!0;const Mv={toc:[]};function wv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}wv.isMDXComponent=!0;const Dv={toc:[]};function _v(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}_v.isMDXComponent=!0;const Xv={toc:[]};
10function gv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xv,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}gv.isMDXComponent=!0;const xv={toc:[]};function Cv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}Cv.isMDXComponent=!0;const Tv={toc:[]};function vv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}vv.isMDXComponent=!0;const bv={toc:[]};function Lv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}Lv.isMDXComponent=!0;const Zv={toc:[]};function Nv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}Nv.isMDXComponent=!0;const Av={toc:[]};function Ev(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Av,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Ev.isMDXComponent=!0;const Rv={toc:[]};function zv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}zv.isMDXComponent=!0;const Sv={toc:[]};function Iv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}Iv.isMDXComponent=!0;const Wv={toc:[]};function Gv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode's parent."))}Gv.isMDXComponent=!0;const Pv={toc:[]};function Bv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}Bv.isMDXComponent=!0;const Fv={toc:[]};function Uv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An Icon Component that provides an easy access to over 150k icons.\nSee ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://icones.js.org/collection/all"},"http://web.archive.org/web/20230315084628/https://icones.js.org/collection/all")," for all available Icons."))}Uv.isMDXComponent=!0;const Vv={toc:[]};function qv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vv,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}qv.isMDXComponent=!0;const jv={toc:[]};function Ov(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}Ov.isMDXComponent=!0;const $v={toc:[]};function Hv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$v,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}Hv.isMDXComponent=!0;const Yv={toc:[]};function Kv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Kv.isMDXComponent=!0;const Jv={toc:[]};function Qv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jv,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Qv.isMDXComponent=!0;const tb={toc:[]};function nb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}nb.isMDXComponent=!0;const eb={toc:[]};function ob(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provide the color in one of the following formats:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"named color like ",(0,s.kt)("inlineCode",{parentName:"li"},"red"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"darkgray"),", \u2026"),(0,s.kt)("li",{parentName:"ul"},"hexadecimal string with # like ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"#141414"),"\nValue can be either RGB or RGBA: ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55aa")," (latter is partially transparent)\nThe shorthand version (e.g. ",(0,s.kt)("inlineCode",{parentName:"li"},"#abc")," for ",(0,s.kt)("inlineCode",{parentName:"li"},"#aabbcc")," is also possible.)")))}ob.isMDXComponent=!0;const pb={toc:[]};function rb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"'white'"))}rb.isMDXComponent=!0;const sb={toc:[]};function cb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The color of the icon"))}cb.isMDXComponent=!0;const ab={toc:[]};function ib(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ab,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}ib.isMDXComponent=!0;const lb={toc:[]};function ub(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n cornerSharpness={0.7}\n/>\n")))}ub.isMDXComponent=!0;const mb={toc:[]};function db(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}db.isMDXComponent=!0;const hb={toc:[]};function kb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"You can find identifiers on ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://icones.js.org"},"Ic\xf4nes"),".\nThey can look like this:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"mdi:language-typescript")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"ph:anchor-simple-bold")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"ph:activity-bold"))))}kb.isMDXComponent=!0;const yb={toc:[]};function fb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The identifier of the icon."))}fb.isMDXComponent=!0;const Mb={toc:[]};function wb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mb,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}wb.isMDXComponent=!0;const Db={toc:[]};function _b(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Db,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}_b.isMDXComponent=!0;const Xb={toc:[]};function gb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}gb.isMDXComponent=!0;const xb={toc:[]};function Cb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Cb.isMDXComponent=!0;const Tb={toc:[]};function vb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}vb.isMDXComponent=!0;const bb={toc:[]};
10function Lb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}Lb.isMDXComponent=!0;const Zb={toc:[]};function Nb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}Nb.isMDXComponent=!0;const Ab={toc:[]};function Eb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ab,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}Eb.isMDXComponent=!0;const Rb={toc:[]};function zb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}zb.isMDXComponent=!0;const Sb={toc:[]};function Ib(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}Ib.isMDXComponent=!0;const Wb={toc:[]};function Gb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}Gb.isMDXComponent=!0;const Pb={toc:[]};function Bb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n/>\n")))}Bb.isMDXComponent=!0;const Fb={toc:[]};function Ub(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}Ub.isMDXComponent=!0;const Vb={toc:[]};function qb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}qb.isMDXComponent=!0;const jb={toc:[]};function Ob(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}Ob.isMDXComponent=!0;const $b={toc:[]};function Hb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$b,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Hb.isMDXComponent=!0;const Yb={toc:[]};function Kb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Kb.isMDXComponent=!0;const Jb={toc:[]};function Qb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}Qb.isMDXComponent=!0;const tL={toc:[]};function nL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}nL.isMDXComponent=!0;const eL={toc:[]};function oL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}oL.isMDXComponent=!0;const pL={toc:[]};function rL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}rL.isMDXComponent=!0;const sL={toc:[]};function cL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}cL.isMDXComponent=!0;const aL={toc:[]};function iL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}iL.isMDXComponent=!0;const lL={toc:[]};function uL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}uL.isMDXComponent=!0;const mL={toc:[]};function dL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}dL.isMDXComponent=!0;const hL={toc:[]};function kL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}kL.isMDXComponent=!0;const yL={toc:[]};function fL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yL,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}fL.isMDXComponent=!0;const ML={toc:[]};function wL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ML,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}wL.isMDXComponent=!0;const DL={toc:[]};function _L(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}_L.isMDXComponent=!0;const XL={toc:[]};function gL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}gL.isMDXComponent=!0;const xL={toc:[]};function CL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xL,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}CL.isMDXComponent=!0;const TL={toc:[]};function vL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}vL.isMDXComponent=!0;const bL={toc:[]};function LL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bL,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}LL.isMDXComponent=!0;const ZL={toc:[]};function NL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}NL.isMDXComponent=!0;const AL={toc:[]};function EL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}EL.isMDXComponent=!0;const RL={toc:[]};function zL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}zL.isMDXComponent=!0;const SL={toc:[]};function IL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}IL.isMDXComponent=!0;const WL={toc:[]};function GL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}GL.isMDXComponent=!0;const PL={toc:[]};function BL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}BL.isMDXComponent=!0;const FL={toc:[]};function UL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FL,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}UL.isMDXComponent=!0;const VL={toc:[]};function qL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}qL.isMDXComponent=!0;const jL={toc:[]};function OL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}OL.isMDXComponent=!0;const $L={toc:[]};function HL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$L,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}HL.isMDXComponent=!0;const YL={toc:[]};function KL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given position."))}KL.isMDXComponent=!0;const JL={toc:[]};function QL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The position in local space at which to sample the color."))}QL.isMDXComponent=!0;const tZ={toc:[]};function nZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given pixel."))}nZ.isMDXComponent=!0;const eZ={toc:[]};function oZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The pixel's position."))}oZ.isMDXComponent=!0;const pZ={toc:[]};function rZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"overrides ",(0,s.kt)("inlineCode",{parentName:"p"},"Image.src")," getter"))}rZ.isMDXComponent=!0;const sZ={toc:[]};function cZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}cZ.isMDXComponent=!0;const aZ={toc:[]};function iZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}iZ.isMDXComponent=!0;const lZ={toc:[]};function uZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}uZ.isMDXComponent=!0;const mZ={toc:[]};function dZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}dZ.isMDXComponent=!0;const hZ={toc:[]};function kZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}kZ.isMDXComponent=!0;const yZ={toc:[]};function fZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}fZ.isMDXComponent=!0;const MZ={toc:[]};function wZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}wZ.isMDXComponent=!0;const DZ={toc:[]};function _Z(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}_Z.isMDXComponent=!0;const XZ={toc:[]};function gZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}gZ.isMDXComponent=!0;const xZ={toc:[]};function CZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}CZ.isMDXComponent=!0;const TZ={toc:[]};function vZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}vZ.isMDXComponent=!0;const bZ={toc:[]};function LZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}LZ.isMDXComponent=!0;const ZZ={toc:[]};function NZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}NZ.isMDXComponent=!0;const AZ={toc:[]};function EZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}EZ.isMDXComponent=!0;const RZ={toc:[]};function zZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}zZ.isMDXComponent=!0;const SZ={toc:[]};function IZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}IZ.isMDXComponent=!0;const WZ={toc:[]};function GZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}GZ.isMDXComponent=!0;const PZ={toc:[]};function BZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}BZ.isMDXComponent=!0;const FZ={toc:[]};function UZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}UZ.isMDXComponent=!0;const VZ={toc:[]};function qZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}qZ.isMDXComponent=!0;const jZ={toc:[]};function OZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}OZ.isMDXComponent=!0;const $Z={toc:[]};function HZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$Z,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}HZ.isMDXComponent=!0;const YZ={toc:[]};function KZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}KZ.isMDXComponent=!0;const JZ={toc:[]};function QZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}QZ.isMDXComponent=!0;const tN={toc:[]};function nN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}nN.isMDXComponent=!0;const eN={toc:[]};function oN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}oN.isMDXComponent=!0;const pN={toc:[]};function rN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}rN.isMDXComponent=!0;const sN={toc:[]};function cN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}cN.isMDXComponent=!0;const aN={toc:[]};function iN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aN,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}iN.isMDXComponent=!0;const lN={toc:[]};function uN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}uN.isMDXComponent=!0;const mN={toc:[]};function dN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}dN.isMDXComponent=!0;const hN={toc:[]};function kN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}kN.isMDXComponent=!0;const yN={toc:[]};function fN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}fN.isMDXComponent=!0;const MN={toc:[]};function wN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}wN.isMDXComponent=!0;const DN={toc:[]};function _N(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}_N.isMDXComponent=!0;const XN={toc:[]};function gN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XN,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}gN.isMDXComponent=!0;const xN={toc:[]};function CN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}CN.isMDXComponent=!0;const TN={toc:[]};function vN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TN,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}vN.isMDXComponent=!0;const bN={toc:[]};function LN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}LN.isMDXComponent=!0;const ZN={toc:[]};function NN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZN,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}NN.isMDXComponent=!0;const AN={toc:[]};function EN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}EN.isMDXComponent=!0;const RN={toc:[]};function zN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}zN.isMDXComponent=!0;const SN={toc:[]};function IN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}IN.isMDXComponent=!0;const WN={toc:[]};function GN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}GN.isMDXComponent=!0;const PN={toc:[]};function BN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}BN.isMDXComponent=!0;const FN={toc:[]};function UN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}UN.isMDXComponent=!0;const VN={toc:[]};function qN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}qN.isMDXComponent=!0;const jN={toc:[]};function ON(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}ON.isMDXComponent=!0;const $N={toc:[]};function HN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$N,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}HN.isMDXComponent=!0;const YN={toc:[]};function KN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}KN.isMDXComponent=!0;const JN={toc:[]};function QN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}QN.isMDXComponent=!0;const tA={toc:[]};function nA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}nA.isMDXComponent=!0;const eA={toc:[]};function oA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}oA.isMDXComponent=!0;const pA={toc:[]};function rA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}rA.isMDXComponent=!0;const sA={toc:[]};function cA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}cA.isMDXComponent=!0;const aA={toc:[]};function iA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}iA.isMDXComponent=!0;const lA={toc:[]};function uA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}uA.isMDXComponent=!0;const mA={toc:[]};function dA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}dA.isMDXComponent=!0;const hA={toc:[]};function kA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}kA.isMDXComponent=!0;const yA={toc:[]};function fA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}fA.isMDXComponent=!0;const MA={toc:[]};function wA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}wA.isMDXComponent=!0;const DA={toc:[]};function _A(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"overrides ",(0,s.kt)("inlineCode",{parentName:"p"},"Image.src")," setter to warn the user that the value\nis not used"))}_A.isMDXComponent=!0;const XA={toc:[]};function gA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XA,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}gA.isMDXComponent=!0;const xA={toc:[]};function CA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}CA.isMDXComponent=!0;const TA={toc:[]};function vA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}vA.isMDXComponent=!0;const bA={toc:[]};function LA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#clone"},(0,s.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."))}LA.isMDXComponent=!0;const ZA={toc:[]};function NA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}NA.isMDXComponent=!0;const AA={toc:[]};function EA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}EA.isMDXComponent=!0;const RA={toc:[]};function zA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Address to Iconify API for the requested Icon."))}zA.isMDXComponent=!0;const SA={toc:[]};function IA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create the URL that will be used as the Image source"))}IA.isMDXComponent=!0;const WA={toc:[]};function GA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WA,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}GA.isMDXComponent=!0;const PA={toc:[]};function BA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}BA.isMDXComponent=!0;const FA={toc:[]};function UA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}UA.isMDXComponent=!0;const VA={toc:[]};function qA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}qA.isMDXComponent=!0;const jA={toc:[]};function OA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}OA.isMDXComponent=!0;const $A={toc:[]};function HA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$A,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}HA.isMDXComponent=!0;const YA={toc:[]};function KA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}KA.isMDXComponent=!0;const JA={toc:[]};function QA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}QA.isMDXComponent=!0;const tE={toc:[]};function nE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}nE.isMDXComponent=!0;const eE={toc:[]};function oE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}oE.isMDXComponent=!0;const pE={toc:[]};function rE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pE,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}rE.isMDXComponent=!0;const sE={toc:[]};function cE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}cE.isMDXComponent=!0;const aE={toc:[]};function iE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aE,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}iE.isMDXComponent=!0;const lE={toc:[]};function uE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}uE.isMDXComponent=!0;const mE={toc:[]};function dE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mE,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}dE.isMDXComponent=!0;const hE={toc:[]};function kE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}kE.isMDXComponent=!0;const yE={toc:[]};function fE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}fE.isMDXComponent=!0;const ME={toc:[]};function wE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ME,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n cornerSharpness={0.7}\n/>\n")))}wE.isMDXComponent=!0;const DE={toc:[]};function _E(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}_E.isMDXComponent=!0;const XE={toc:[]};function gE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XE,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}gE.isMDXComponent=!0;const xE={toc:[]};function CE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}CE.isMDXComponent=!0;const TE={toc:[]};function vE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}vE.isMDXComponent=!0;const bE={toc:[]};function LE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}LE.isMDXComponent=!0;const ZE={toc:[]};function NE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}NE.isMDXComponent=!0;const AE={toc:[]};function EE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}EE.isMDXComponent=!0;const RE={toc:[]};function zE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}zE.isMDXComponent=!0;const SE={toc:[]};function IE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}IE.isMDXComponent=!0;const WE={toc:[]};function GE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}GE.isMDXComponent=!0;const PE={toc:[]};function BE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}BE.isMDXComponent=!0;const FE={toc:[]};function UE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}UE.isMDXComponent=!0;const VE={toc:[]};function qE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n/>\n")))}qE.isMDXComponent=!0;const jE={toc:[]};function OE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}OE.isMDXComponent=!0;const $E={toc:[]};function HE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$E,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}HE.isMDXComponent=!0;const YE={toc:[]};function KE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}KE.isMDXComponent=!0;const JE={toc:[]};function QE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}QE.isMDXComponent=!0;const tR={toc:[]};function nR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}nR.isMDXComponent=!0;const eR={toc:[]};function oR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}oR.isMDXComponent=!0;const pR={toc:[]};function rR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}rR.isMDXComponent=!0;const sR={toc:[]};function cR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}cR.isMDXComponent=!0;const aR={toc:[]};function iR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}iR.isMDXComponent=!0;const lR={toc:[]};function uR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}uR.isMDXComponent=!0;const mR={toc:[]};function dR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}dR.isMDXComponent=!0;const hR={toc:[]};function kR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hR,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},yR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}fR.isMDXComponent=!0;const MR={toc:[]};function wR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}wR.isMDXComponent=!0;const DR={toc:[]};function _R(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DR,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}_R.isMDXComponent=!0;const XR={toc:[]};function gR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}gR.isMDXComponent=!0;const xR={toc:[]};function CR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}CR.isMDXComponent=!0;const TR={toc:[]};function vR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}vR.isMDXComponent=!0;const bR={toc:[]};function LR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bR,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}LR.isMDXComponent=!0;const ZR={toc:[]};function NR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}NR.isMDXComponent=!0;const AR={toc:[]};function ER(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AR,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}ER.isMDXComponent=!0;const RR={toc:[]};function zR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}zR.isMDXComponent=!0;const SR={toc:[]};function IR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}
10IR.isMDXComponent=!0;const WR={toc:[]};function GR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}GR.isMDXComponent=!0;const PR={toc:[]};function BR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}BR.isMDXComponent=!0;const FR={toc:[]};function UR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}UR.isMDXComponent=!0;const VR={toc:[]};function qR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}qR.isMDXComponent=!0;const jR={toc:[]};function OR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}OR.isMDXComponent=!0;const $R={toc:[]};function HR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$R,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}HR.isMDXComponent=!0;const YR={toc:[]};function KR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}KR.isMDXComponent=!0;const JR={toc:[]};function QR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}QR.isMDXComponent=!0;const tz={toc:[]};function nz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given position."))}nz.isMDXComponent=!0;const ez={toc:[]};function oz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ez,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The position in local space at which to sample the color."))}oz.isMDXComponent=!0;const pz={toc:[]};function rz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given pixel."))}rz.isMDXComponent=!0;const sz={toc:[]};function cz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The pixel's position."))}cz.isMDXComponent=!0;const az={toc:[]};function iz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},az,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}iz.isMDXComponent=!0;const lz={toc:[]};function uz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}uz.isMDXComponent=!0;const mz={toc:[]};function dz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}dz.isMDXComponent=!0;const hz={toc:[]};function kz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}kz.isMDXComponent=!0;const yz={toc:[]};function fz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n text([Text])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3etext;\n layout--\x3ecircle;"}))}fz.isMDXComponent=!0;const Mz={toc:[]};function wz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}wz.isMDXComponent=!0;const Dz={toc:[]};function _z(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}_z.isMDXComponent=!0;const Xz={toc:[]};function gz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}gz.isMDXComponent=!0;const xz={toc:[]};function Cz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}Cz.isMDXComponent=!0;const Tz={toc:[]};function vz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}vz.isMDXComponent=!0;const bz={toc:[]};function Lz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}Lz.isMDXComponent=!0;const Zz={toc:[]};function Nz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}Nz.isMDXComponent=!0;const Az={toc:[]};function Ez(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Az,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Ez.isMDXComponent=!0;const Rz={toc:[]};function zz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}zz.isMDXComponent=!0;const Sz={toc:[]};function Iz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}Iz.isMDXComponent=!0;const Wz={toc:[]};function Gz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}Gz.isMDXComponent=!0;const Pz={toc:[]};function Bz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}Bz.isMDXComponent=!0;const Fz={toc:[]};function Uz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fz,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}Uz.isMDXComponent=!0;const Vz={toc:[]};function qz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}qz.isMDXComponent=!0;const jz={toc:[]};function Oz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}Oz.isMDXComponent=!0;const $z={toc:[]};function Hz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$z,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}Hz.isMDXComponent=!0;const Yz={toc:[]};function Kz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}Kz.isMDXComponent=!0;const Jz={toc:[]};function Qz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Qz.isMDXComponent=!0;const tS={toc:[]};function nS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}nS.isMDXComponent=!0;const eS={toc:[]};function oS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}oS.isMDXComponent=!0;const pS={toc:[]};function rS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}rS.isMDXComponent=!0;const sS={toc:[]};function cS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}cS.isMDXComponent=!0;const aS={toc:[]};function iS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}iS.isMDXComponent=!0;const lS={toc:[]};function uS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lS,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}uS.isMDXComponent=!0;const mS={toc:[]};function dS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}dS.isMDXComponent=!0;const hS={toc:[]};function kS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}kS.isMDXComponent=!0;const yS={toc:[]};function fS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}fS.isMDXComponent=!0;const MS={toc:[]};function wS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}wS.isMDXComponent=!0;const DS={toc:[]};function _S(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}_S.isMDXComponent=!0;const XS={toc:[]};function gS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}gS.isMDXComponent=!0;const xS={toc:[]};function CS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xS,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}CS.isMDXComponent=!0;const TS={toc:[]};function vS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}vS.isMDXComponent=!0;const bS={toc:[]};function LS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bS,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}LS.isMDXComponent=!0;const ZS={toc:[]};function NS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}NS.isMDXComponent=!0;const AS={toc:[]};function ES(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AS,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}ES.isMDXComponent=!0;const RS={toc:[]};function zS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}zS.isMDXComponent=!0;const SS={toc:[]};function IS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}IS.isMDXComponent=!0;const WS={toc:[]};function GS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}GS.isMDXComponent=!0;const PS={toc:[]};function BS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}BS.isMDXComponent=!0;const FS={toc:[]};function US(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}US.isMDXComponent=!0;const VS={toc:[]};function qS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}qS.isMDXComponent=!0;const jS={toc:[]};function OS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}OS.isMDXComponent=!0;const $S={toc:[]};function HS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$S,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}HS.isMDXComponent=!0;const YS={toc:[]};function KS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}KS.isMDXComponent=!0;const JS={toc:[]};function QS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}QS.isMDXComponent=!0;const tI={toc:[]};function nI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}nI.isMDXComponent=!0;const eI={toc:[]};function oI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}oI.isMDXComponent=!0;const pI={toc:[]};function rI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}rI.isMDXComponent=!0;const sI={toc:[]};function cI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}cI.isMDXComponent=!0;const aI={toc:[]};function iI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}iI.isMDXComponent=!0;const lI={toc:[]};function uI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}uI.isMDXComponent=!0;const mI={toc:[]};function dI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}dI.isMDXComponent=!0;const hI={toc:[]};function kI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}kI.isMDXComponent=!0;const yI={toc:[]};function fI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}fI.isMDXComponent=!0;const MI={toc:[]};function wI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}wI.isMDXComponent=!0;const DI={toc:[]};function _I(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}_I.isMDXComponent=!0;const XI={toc:[]};function gI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XI,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}gI.isMDXComponent=!0;const xI={toc:[]};function CI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}CI.isMDXComponent=!0;const TI={toc:[]};function vI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}vI.isMDXComponent=!0;const bI={toc:[]};function LI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#clone"},(0,s.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."))}LI.isMDXComponent=!0;const ZI={toc:[]};function NI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}NI.isMDXComponent=!0;const AI={toc:[]};function EI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}EI.isMDXComponent=!0;const RI={toc:[]};function zI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RI,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}zI.isMDXComponent=!0;const SI={toc:[]};function II(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}II.isMDXComponent=!0;const WI={toc:[]};function GI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}GI.isMDXComponent=!0;const PI={toc:[]};function BI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}BI.isMDXComponent=!0;const FI={toc:[]};function UI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}UI.isMDXComponent=!0;const VI={toc:[]};function qI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}qI.isMDXComponent=!0;const jI={toc:[]};function OI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}OI.isMDXComponent=!0;const $I={toc:[]};function HI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$I,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}HI.isMDXComponent=!0;const YI={toc:[]};function KI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}KI.isMDXComponent=!0;const JI={toc:[]};function QI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}QI.isMDXComponent=!0;const tW={toc:[]};function nW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tW,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}nW.isMDXComponent=!0;const eW={toc:[]};function oW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}oW.isMDXComponent=!0;const pW={toc:[]};function rW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pW,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}rW.isMDXComponent=!0;const sW={toc:[]};function cW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}cW.isMDXComponent=!0;const aW={toc:[]};function iW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aW,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}iW.isMDXComponent=!0;const lW={toc:[]};function uW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}uW.isMDXComponent=!0;const mW={toc:[]};function dW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}dW.isMDXComponent=!0;const hW={toc:[]};function kW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n cornerSharpness={0.7}\n/>\n")))}kW.isMDXComponent=!0;const yW={toc:[]};function fW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}fW.isMDXComponent=!0;const MW={toc:[]};function wW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MW,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}wW.isMDXComponent=!0;const DW={toc:[]};function _W(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}_W.isMDXComponent=!0;const XW={toc:[]};function gW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}gW.isMDXComponent=!0;const xW={toc:[]};function CW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}CW.isMDXComponent=!0;const TW={toc:[]};function vW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}vW.isMDXComponent=!0;const bW={toc:[]};function LW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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 NW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}NW.isMDXComponent=!0;const AW={toc:[]};function EW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}EW.isMDXComponent=!0;const RW={toc:[]};function zW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}zW.isMDXComponent=!0;const SW={toc:[]};function IW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}IW.isMDXComponent=!0;const WW={toc:[]};function GW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}GW.isMDXComponent=!0;const PW={toc:[]};function BW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n/>\n")))}BW.isMDXComponent=!0;const FW={toc:[]};function UW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}UW.isMDXComponent=!0;const VW={toc:[]};function qW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}qW.isMDXComponent=!0;const jW={toc:[]};function OW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}OW.isMDXComponent=!0;const $W={toc:[]};function HW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$W,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}HW.isMDXComponent=!0;const YW={toc:[]};function KW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}KW.isMDXComponent=!0;const JW={toc:[]};function QW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}QW.isMDXComponent=!0;const tG={toc:[]};function nG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}nG.isMDXComponent=!0;const eG={toc:[]};function oG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}oG.isMDXComponent=!0;const pG={toc:[]};function rG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}rG.isMDXComponent=!0;const sG={toc:[]};function cG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}cG.isMDXComponent=!0;const aG={toc:[]};function iG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}iG.isMDXComponent=!0;const lG={toc:[]};function uG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}uG.isMDXComponent=!0;const mG={toc:[]};function dG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}dG.isMDXComponent=!0;const hG={toc:[]};function kG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}kG.isMDXComponent=!0;const yG={toc:[]};function fG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yG,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}fG.isMDXComponent=!0;const MG={toc:[]};function wG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}wG.isMDXComponent=!0;const DG={toc:[]};function _G(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}_G.isMDXComponent=!0;const XG={toc:[]};function gG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}gG.isMDXComponent=!0;const xG={toc:[]};function CG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xG,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}CG.isMDXComponent=!0;const TG={toc:[]};function vG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}vG.isMDXComponent=!0;const bG={toc:[]};function LG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bG,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}LG.isMDXComponent=!0;const ZG={toc:[]};function NG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}NG.isMDXComponent=!0;const AG={toc:[]};function EG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}EG.isMDXComponent=!0;const RG={toc:[]};function zG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}zG.isMDXComponent=!0;const SG={toc:[]};function IG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}IG.isMDXComponent=!0;
10const WG={toc:[]};function GG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}GG.isMDXComponent=!0;const PG={toc:[]};function BG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}BG.isMDXComponent=!0;const FG={toc:[]};function UG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}UG.isMDXComponent=!0;const VG={toc:[]};function qG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}qG.isMDXComponent=!0;const jG={toc:[]};function OG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}OG.isMDXComponent=!0;const $G={toc:[]};function HG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$G,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}HG.isMDXComponent=!0;const YG={toc:[]};function KG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given position."))}KG.isMDXComponent=!0;const JG={toc:[]};function QG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The position in local space at which to sample the color."))}QG.isMDXComponent=!0;const tP={toc:[]};function nP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given pixel."))}nP.isMDXComponent=!0;const eP={toc:[]};function oP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The pixel's position."))}oP.isMDXComponent=!0;const pP={toc:[]};function rP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}rP.isMDXComponent=!0;const sP={toc:[]};function cP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}cP.isMDXComponent=!0;const aP={toc:[]};function iP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}iP.isMDXComponent=!0;const lP={toc:[]};function uP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}uP.isMDXComponent=!0;const mP={toc:[]};function dP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}dP.isMDXComponent=!0;const hP={toc:[]};function kP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}kP.isMDXComponent=!0;const yP={toc:[]};function fP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}fP.isMDXComponent=!0;const MP={toc:[]};function wP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}
10wP.isMDXComponent=!0;const DP={toc:[]};function _P(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}_P.isMDXComponent=!0;const XP={toc:[]};function gP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}gP.isMDXComponent=!0;const xP={toc:[]};function CP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}CP.isMDXComponent=!0;const TP={toc:[]};function vP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}vP.isMDXComponent=!0;const bP={toc:[]};function LP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}LP.isMDXComponent=!0;const ZP={toc:[]};function NP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}NP.isMDXComponent=!0;const AP={toc:[]};function EP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}EP.isMDXComponent=!0;const RP={toc:[]};function zP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}zP.isMDXComponent=!0;const SP={toc:[]};function IP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}IP.isMDXComponent=!0;const WP={toc:[]};function GP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WP,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}GP.isMDXComponent=!0;const PP={toc:[]};function BP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}BP.isMDXComponent=!0;const FP={toc:[]};function UP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}UP.isMDXComponent=!0;const VP={toc:[]};function qP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}qP.isMDXComponent=!0;const jP={toc:[]};function OP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}OP.isMDXComponent=!0;const $P={toc:[]};function HP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$P,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}HP.isMDXComponent=!0;const YP={toc:[]};function KP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}KP.isMDXComponent=!0;const JP={toc:[]};function QP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}QP.isMDXComponent=!0;const tB={toc:[]};function nB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}nB.isMDXComponent=!0;const eB={toc:[]};function oB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}oB.isMDXComponent=!0;const pB={toc:[]};function rB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}rB.isMDXComponent=!0;const sB={toc:[]};function cB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sB,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}cB.isMDXComponent=!0;const aB={toc:[]};function iB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}iB.isMDXComponent=!0;const lB={toc:[]};function uB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}uB.isMDXComponent=!0;const mB={toc:[]};function dB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}dB.isMDXComponent=!0;const hB={toc:[]};function kB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}kB.isMDXComponent=!0;const yB={toc:[]};function fB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}fB.isMDXComponent=!0;const MB={toc:[]};function wB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}wB.isMDXComponent=!0;const DB={toc:[]};function _B(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DB,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}_B.isMDXComponent=!0;const XB={toc:[]};function gB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}gB.isMDXComponent=!0;const xB={toc:[]};function CB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xB,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}CB.isMDXComponent=!0;const TB={toc:[]};function vB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}vB.isMDXComponent=!0;const bB={toc:[]};function LB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bB,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}LB.isMDXComponent=!0;const ZB={toc:[]};function NB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}NB.isMDXComponent=!0;const AB={toc:[]};function EB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}EB.isMDXComponent=!0;const RB={toc:[]};function zB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}zB.isMDXComponent=!0;const SB={toc:[]};function IB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}IB.isMDXComponent=!0;const WB={toc:[]};function GB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}GB.isMDXComponent=!0;const PB={toc:[]};function BB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}BB.isMDXComponent=!0;const FB={toc:[]};function UB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}UB.isMDXComponent=!0;const VB={toc:[]};function qB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}qB.isMDXComponent=!0;const jB={toc:[]};function OB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}OB.isMDXComponent=!0;const $B={toc:[]};function HB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$B,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}HB.isMDXComponent=!0;const YB={toc:[]};function KB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}KB.isMDXComponent=!0;const JB={toc:[]};function QB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}QB.isMDXComponent=!0;const tF={toc:[]};function nF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}nF.isMDXComponent=!0;const eF={toc:[]};function oF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}oF.isMDXComponent=!0;const pF={toc:[]};function rF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}rF.isMDXComponent=!0;const sF={toc:[]};function cF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}cF.isMDXComponent=!0;const aF={toc:[]};function iF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}iF.isMDXComponent=!0;const lF={toc:[]};function uF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}uF.isMDXComponent=!0;const mF={toc:[]};function dF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}dF.isMDXComponent=!0;const hF={toc:[]};function kF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}kF.isMDXComponent=!0;const yF={toc:[]};function fF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}fF.isMDXComponent=!0;const MF={toc:[]};function wF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MF,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}wF.isMDXComponent=!0;const DF={toc:[]};function _F(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}_F.isMDXComponent=!0;const XF={toc:[]};function gF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}gF.isMDXComponent=!0;const xF={toc:[]};function CF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#clone"},(0,s.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."))}CF.isMDXComponent=!0;const TF={toc:[]};function vF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}vF.isMDXComponent=!0;const bF={toc:[]};function LF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}LF.isMDXComponent=!0;const ZF={toc:[]};function NF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZF,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}NF.isMDXComponent=!0;const AF={toc:[]};function EF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}EF.isMDXComponent=!0;const RF={toc:[]};function zF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}zF.isMDXComponent=!0;const SF={toc:[]};function IF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}IF.isMDXComponent=!0;const WF={toc:[]};function GF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}GF.isMDXComponent=!0;const PF={toc:[]};function BF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}BF.isMDXComponent=!0;const FF={toc:[]};function UF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}UF.isMDXComponent=!0;const VF={toc:[]};function qF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}qF.isMDXComponent=!0;const jF={toc:[]};function OF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}OF.isMDXComponent=!0;const $F={toc:[]};function HF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$F,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}HF.isMDXComponent=!0;const YF={toc:[]};function KF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YF,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}KF.isMDXComponent=!0;const JF={toc:[]};function QF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}QF.isMDXComponent=!0;const tU={toc:[]};function nU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tU,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}nU.isMDXComponent=!0;const eU={toc:[]};function oU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}oU.isMDXComponent=!0;const pU={toc:[]};function rU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pU,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}rU.isMDXComponent=!0;const sU={toc:[]};function cU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}cU.isMDXComponent=!0;const aU={toc:[]};function iU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aU,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}iU.isMDXComponent=!0;const lU={toc:[]};function uU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}uU.isMDXComponent=!0;const mU={toc:[]};function dU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}dU.isMDXComponent=!0;const hU={toc:[]};function kU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}kU.isMDXComponent=!0;const yU={toc:[]};function fU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}fU.isMDXComponent=!0;const MU={toc:[]};function wU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}wU.isMDXComponent=!0;const DU={toc:[]};function _U(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}_U.isMDXComponent=!0;const XU={toc:[]};function gU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}gU.isMDXComponent=!0;const xU={toc:[]};function CU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}CU.isMDXComponent=!0;const TU={toc:[]};function vU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}vU.isMDXComponent=!0;const bU={toc:[]};function LU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}LU.isMDXComponent=!0;const ZU={toc:[]};function NU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}NU.isMDXComponent=!0;const AU={toc:[]};function EU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}EU.isMDXComponent=!0;const RU={toc:[]};function zU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}zU.isMDXComponent=!0;const SU={toc:[]};function IU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}IU.isMDXComponent=!0;const WU={toc:[]};function GU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}GU.isMDXComponent=!0;const PU={toc:[]};function BU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}BU.isMDXComponent=!0;const FU={toc:[]};function UU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}UU.isMDXComponent=!0;const VU={toc:[]};function qU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}qU.isMDXComponent=!0;const jU={toc:[]};function OU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}OU.isMDXComponent=!0;const $U={toc:[]};function HU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$U,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}HU.isMDXComponent=!0;const YU={toc:[]};function KU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}KU.isMDXComponent=!0;const JU={toc:[]};function QU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}QU.isMDXComponent=!0;const tV={toc:[]};function nV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tV,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}nV.isMDXComponent=!0;const eV={toc:[]};function oV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}oV.isMDXComponent=!0;const pV={toc:[]};function rV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}rV.isMDXComponent=!0;const sV={toc:[]};function cV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}cV.isMDXComponent=!0;const aV={toc:[]};function iV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aV,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}iV.isMDXComponent=!0;const lV={toc:[]};function uV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}uV.isMDXComponent=!0;const mV={toc:[]};function dV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mV,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}dV.isMDXComponent=!0;const hV={toc:[]};function kV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}kV.isMDXComponent=!0;const yV={toc:[]};function fV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}fV.isMDXComponent=!0;const MV={toc:[]};function wV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}wV.isMDXComponent=!0;const DV={toc:[]};function _V(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}_V.isMDXComponent=!0;const XV={toc:[]};function gV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}gV.isMDXComponent=!0;const xV={toc:[]};function CV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}CV.isMDXComponent=!0;const TV={toc:[]};function vV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TV,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}vV.isMDXComponent=!0;const bV={toc:[]};function LV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}LV.isMDXComponent=!0;const ZV={toc:[]};function NV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}NV.isMDXComponent=!0;const AV={toc:[]};function EV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}EV.isMDXComponent=!0;const RV={toc:[]};function zV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}zV.isMDXComponent=!0;const SV={toc:[]};function IV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}IV.isMDXComponent=!0;const WV={toc:[]};function GV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}GV.isMDXComponent=!0;const PV={toc:[]};function BV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}BV.isMDXComponent=!0;const FV={toc:[]};function UV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}UV.isMDXComponent=!0;const VV={toc:[]};function qV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}qV.isMDXComponent=!0;const jV={toc:[]};function OV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}OV.isMDXComponent=!0;const $V={toc:[]};function HV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$V,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}HV.isMDXComponent=!0;const YV={toc:[]};function KV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}KV.isMDXComponent=!0;const JV={toc:[]};function QV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}QV.isMDXComponent=!0;const tq={toc:[]};function nq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}nq.isMDXComponent=!0;const eq={toc:[]};function oq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}oq.isMDXComponent=!0;const pq={toc:[]};function rq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}rq.isMDXComponent=!0;const sq={toc:[]};function cq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}cq.isMDXComponent=!0;const aq={toc:[]};function iq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}iq.isMDXComponent=!0;const lq={toc:[]};function uq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}uq.isMDXComponent=!0;const mq={toc:[]};function dq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}dq.isMDXComponent=!0;const hq={toc:[]};function kq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hq,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}kq.isMDXComponent=!0;const yq={toc:[]};function fq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}fq.isMDXComponent=!0;const Mq={toc:[]};function wq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}wq.isMDXComponent=!0;const Dq={toc:[]};function _q(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}_q.isMDXComponent=!0;const Xq={toc:[]};function gq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}gq.isMDXComponent=!0;const xq={toc:[]};function Cq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Cq.isMDXComponent=!0;const Tq={toc:[]};function vq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}vq.isMDXComponent=!0;const bq={toc:[]};function Lq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}Lq.isMDXComponent=!0;const Zq={toc:[]};function Nq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}Nq.isMDXComponent=!0;const Aq={toc:[]};function Eq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Aq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Eq.isMDXComponent=!0;const Rq={toc:[]};function zq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}zq.isMDXComponent=!0;const Sq={toc:[]};function Iq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sq,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}Iq.isMDXComponent=!0;const Wq={toc:[]};function Gq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}Gq.isMDXComponent=!0;const Pq={toc:[]};function Bq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}Bq.isMDXComponent=!0;const Fq={toc:[]};function Uq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}Uq.isMDXComponent=!0;const Vq={toc:[]};function qq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}qq.isMDXComponent=!0;const jq={toc:[]};function Oq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}Oq.isMDXComponent=!0;const $q={toc:[]};function Hq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$q,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}Hq.isMDXComponent=!0;const Yq={toc:[]};function Kq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yq,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Kq.isMDXComponent=!0;const Jq={toc:[]};function Qq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}Qq.isMDXComponent=!0;const tj={toc:[]};function nj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tj,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}nj.isMDXComponent=!0;const ej={toc:[]};function oj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ej,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}oj.isMDXComponent=!0;const pj={toc:[]};function rj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pj,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}rj.isMDXComponent=!0;const sj={toc:[]};function cj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}cj.isMDXComponent=!0;const aj={toc:[]};function ij(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}ij.isMDXComponent=!0;const lj={toc:[]};function uj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}uj.isMDXComponent=!0;const mj={toc:[]};function dj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}dj.isMDXComponent=!0;const hj={toc:[]};function kj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}kj.isMDXComponent=!0;const yj={toc:[]};function fj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}fj.isMDXComponent=!0;const Mj={toc:[]};function wj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}wj.isMDXComponent=!0;const Dj={toc:[]};function _j(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}_j.isMDXComponent=!0;const Xj={toc:[]};function gj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}gj.isMDXComponent=!0;const xj={toc:[]};function Cj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}Cj.isMDXComponent=!0;const Tj={toc:[]};function vj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}vj.isMDXComponent=!0;const bj={toc:[]};function Lj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Lj.isMDXComponent=!0;const Zj={toc:[]};function Nj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}Nj.isMDXComponent=!0;const Aj={toc:[]};function Ej(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Aj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}Ej.isMDXComponent=!0;const Rj={toc:[]};function zj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}zj.isMDXComponent=!0;const Sj={toc:[]};function Ij(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}Ij.isMDXComponent=!0;const Wj={toc:[]};function Gj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}Gj.isMDXComponent=!0;const Pj={toc:[]};function Bj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}Bj.isMDXComponent=!0;const Fj={toc:[]};function Uj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}Uj.isMDXComponent=!0;const Vj={toc:[]};function qj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}qj.isMDXComponent=!0;const jj={toc:[]};function Oj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}Oj.isMDXComponent=!0;const $j={toc:[]};function Hj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$j,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}Hj.isMDXComponent=!0;const Yj={toc:[]};function Kj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Yj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}Kj.isMDXComponent=!0;const Jj={toc:[]};function Qj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}Qj.isMDXComponent=!0;const tO={toc:[]};function nO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#clone"},(0,s.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."))}nO.isMDXComponent=!0;const eO={toc:[]};function oO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}oO.isMDXComponent=!0;const pO={toc:[]};function rO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}rO.isMDXComponent=!0;const sO={toc:[]};function cO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sO,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}cO.isMDXComponent=!0;const aO={toc:[]};function iO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}iO.isMDXComponent=!0;const lO={toc:[]};function uO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}uO.isMDXComponent=!0;const mO={toc:[]};function dO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Layout#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}dO.isMDXComponent=!0;const hO={toc:[]};function kO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}kO.isMDXComponent=!0;const yO={toc:[]};function fO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}fO.isMDXComponent=!0;const MO={toc:[]};function wO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}wO.isMDXComponent=!0;const DO={toc:[]};function _O(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}_O.isMDXComponent=!0;const XO={toc:[]};function gO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}gO.isMDXComponent=!0;const xO={toc:[]};function CO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}CO.isMDXComponent=!0;const TO={toc:[]};function vO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TO,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}vO.isMDXComponent=!0;const bO={toc:[]};function LO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}LO.isMDXComponent=!0;const ZO={toc:[]};function NO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZO,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}NO.isMDXComponent=!0;const AO={toc:[]};function EO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}EO.isMDXComponent=!0;const RO={toc:[]};function zO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RO,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}zO.isMDXComponent=!0;const SO={toc:[]};function IO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}IO.isMDXComponent=!0;const WO={toc:[]};function GO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WO,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}GO.isMDXComponent=!0;const PO={toc:[]};function BO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}BO.isMDXComponent=!0;const FO={toc:[]};function UO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}UO.isMDXComponent=!0;const VO={toc:[]};function qO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}qO.isMDXComponent=!0;const jO={toc:[]};function OO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}OO.isMDXComponent=!0;const $O={toc:[]};function HO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$O,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}HO.isMDXComponent=!0;const YO={toc:[]};function KO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}KO.isMDXComponent=!0;const JO={toc:[]};function QO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}QO.isMDXComponent=!0;const t$={toc:[]};function n$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}n$.isMDXComponent=!0;const e$={toc:[]};function o$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}o$.isMDXComponent=!0;const p$={toc:[]};function r$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}r$.isMDXComponent=!0;const s$={toc:[]};function c$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}c$.isMDXComponent=!0;const a$={toc:[]};function i$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}i$.isMDXComponent=!0;const l$={toc:[]};function u$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}u$.isMDXComponent=!0;const m$={toc:[]};function d$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}d$.isMDXComponent=!0;const h$={toc:[]};function k$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}k$.isMDXComponent=!0;const y$={toc:[]};function f$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}f$.isMDXComponent=!0;const M$={toc:[]};function w$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}w$.isMDXComponent=!0;const D$={toc:[]};function _$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}_$.isMDXComponent=!0;const X$={toc:[]};function g$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}g$.isMDXComponent=!0;const x$={toc:[]};function C$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}C$.isMDXComponent=!0;const T$={toc:[]};function v$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}v$.isMDXComponent=!0;const b$={toc:[]};function L$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}L$.isMDXComponent=!0;const Z$={toc:[]};function N$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z$,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}
10N$.isMDXComponent=!0;const A$={toc:[]};function E$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}E$.isMDXComponent=!0;const R$={toc:[]};function z$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}z$.isMDXComponent=!0;const S$={toc:[]};function I$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}I$.isMDXComponent=!0;const W$={toc:[]};function G$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W$,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}G$.isMDXComponent=!0;const P$={toc:[]};function B$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}B$.isMDXComponent=!0;const F$={toc:[]};function U$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F$,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}U$.isMDXComponent=!0;const V$={toc:[]};function q$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}q$.isMDXComponent=!0;const j$={toc:[]};function O$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}O$.isMDXComponent=!0;const $$={toc:[]};function H$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}H$.isMDXComponent=!0;const Y$={toc:[]};function K$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}K$.isMDXComponent=!0;const J$={toc:[]};function Q$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Q$.isMDXComponent=!0;const tH={toc:[]};function nH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}nH.isMDXComponent=!0;const eH={toc:[]};function oH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}oH.isMDXComponent=!0;const pH={toc:[]};function rH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}rH.isMDXComponent=!0;const sH={toc:[]};function cH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}cH.isMDXComponent=!0;const aH={toc:[]};function iH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}iH.isMDXComponent=!0;const lH={toc:[]};function uH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}uH.isMDXComponent=!0;const mH={toc:[]};function dH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}dH.isMDXComponent=!0;const hH={toc:[]};function kH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hH,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}kH.isMDXComponent=!0;const yH={toc:[]};function fH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}fH.isMDXComponent=!0;const MH={toc:[]};function wH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}wH.isMDXComponent=!0;const DH={toc:[]};function _H(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}_H.isMDXComponent=!0;const XH={toc:[]};function gH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}gH.isMDXComponent=!0;const xH={toc:[]};function CH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}CH.isMDXComponent=!0;const TH={toc:[]};function vH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}vH.isMDXComponent=!0;const bH={toc:[]};function LH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}LH.isMDXComponent=!0;const ZH={toc:[]};function NH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}NH.isMDXComponent=!0;const AH={toc:[]};function EH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}EH.isMDXComponent=!0;const RH={toc:[]};function zH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}zH.isMDXComponent=!0;const SH={toc:[]};function IH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}IH.isMDXComponent=!0;const WH={toc:[]};function GH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}GH.isMDXComponent=!0;const PH={toc:[]};function BH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}BH.isMDXComponent=!0;const FH={toc:[]};function UH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}UH.isMDXComponent=!0;const VH={toc:[]};function qH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VH,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}qH.isMDXComponent=!0;const jH={toc:[]};function OH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}OH.isMDXComponent=!0;const $H={toc:[]};function HH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$H,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}HH.isMDXComponent=!0;const YH={toc:[]};function KH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}KH.isMDXComponent=!0;const JH={toc:[]};function QH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}QH.isMDXComponent=!0;const tY={toc:[]};function nY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}nY.isMDXComponent=!0;const eY={toc:[]};function oY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}oY.isMDXComponent=!0;const pY={toc:[]};function rY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}rY.isMDXComponent=!0;const sY={toc:[]};function cY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}cY.isMDXComponent=!0;const aY={toc:[]};function iY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}iY.isMDXComponent=!0;const lY={toc:[]};function uY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}uY.isMDXComponent=!0;const mY={toc:[]};function dY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mY,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}dY.isMDXComponent=!0;const hY={toc:[]};function kY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}kY.isMDXComponent=!0;const yY={toc:[]};function fY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}fY.isMDXComponent=!0;const MY={toc:[]};function wY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}wY.isMDXComponent=!0;const DY={toc:[]};function _Y(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}_Y.isMDXComponent=!0;const XY={toc:[]};function gY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}gY.isMDXComponent=!0;const xY={toc:[]};function CY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}CY.isMDXComponent=!0;const TY={toc:[]};function vY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TY,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}vY.isMDXComponent=!0;const bY={toc:[]};function LY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}LY.isMDXComponent=!0;const ZY={toc:[]};function NY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZY,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}NY.isMDXComponent=!0;const AY={toc:[]};function EY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}EY.isMDXComponent=!0;const RY={toc:[]};function zY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RY,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}zY.isMDXComponent=!0;const SY={toc:[]};function IY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}IY.isMDXComponent=!0;const WY={toc:[]};function GY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}GY.isMDXComponent=!0;const PY={toc:[]};function BY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}BY.isMDXComponent=!0;const FY={toc:[]};function UY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}UY.isMDXComponent=!0;const VY={toc:[]};function qY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}qY.isMDXComponent=!0;const jY={toc:[]};function OY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}OY.isMDXComponent=!0;const $Y={toc:[]};function HY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$Y,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}HY.isMDXComponent=!0;const YY={toc:[]};function KY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}KY.isMDXComponent=!0;const JY={toc:[]};function QY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}QY.isMDXComponent=!0;const tK={toc:[]};function nK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}nK.isMDXComponent=!0;const eK={toc:[]};function oK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}oK.isMDXComponent=!0;const pK={toc:[]};function rK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}rK.isMDXComponent=!0;const sK={toc:[]};function cK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}cK.isMDXComponent=!0;const aK={toc:[]};function iK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}iK.isMDXComponent=!0;const lK={toc:[]};function uK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}uK.isMDXComponent=!0;const mK={toc:[]};function dK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}dK.isMDXComponent=!0;const hK={toc:[]};function kK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}kK.isMDXComponent=!0;const yK={toc:[]};function fK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}fK.isMDXComponent=!0;const MK={toc:[]};function wK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}wK.isMDXComponent=!0;const DK={toc:[]};function _K(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}_K.isMDXComponent=!0;const XK={toc:[]};function gK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}gK.isMDXComponent=!0;const xK={toc:[]};function CK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xK,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}CK.isMDXComponent=!0;const TK={toc:[]};function vK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}vK.isMDXComponent=!0;const bK={toc:[]};function LK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}LK.isMDXComponent=!0;const ZK={toc:[]};function NK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#clone"},(0,s.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."))}NK.isMDXComponent=!0;const AK={toc:[]};function EK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}EK.isMDXComponent=!0;const RK={toc:[]};function zK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}zK.isMDXComponent=!0;const SK={toc:[]};function IK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SK,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}IK.isMDXComponent=!0;const WK={toc:[]};function GK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}GK.isMDXComponent=!0;const PK={toc:[]};function BK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}BK.isMDXComponent=!0;const FK={toc:[]};function UK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}UK.isMDXComponent=!0;const VK={toc:[]};function qK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}qK.isMDXComponent=!0;const jK={toc:[]};function OK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}OK.isMDXComponent=!0;const $K={toc:[]};function HK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$K,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}HK.isMDXComponent=!0;const YK={toc:[]};function KK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}KK.isMDXComponent=!0;const JK={toc:[]};function QK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}QK.isMDXComponent=!0;const tJ={toc:[]};function nJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}nJ.isMDXComponent=!0;const eJ={toc:[]};function oJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}oJ.isMDXComponent=!0;const pJ={toc:[]};function rJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}rJ.isMDXComponent=!0;const sJ={toc:[]};function cJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}cJ.isMDXComponent=!0;const aJ={toc:[]};function iJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}iJ.isMDXComponent=!0;const lJ={toc:[]};function uJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}uJ.isMDXComponent=!0;const mJ={toc:[]};function dJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}dJ.isMDXComponent=!0;const hJ={toc:[]};function kJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}kJ.isMDXComponent=!0;const yJ={toc:[]};function fJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}fJ.isMDXComponent=!0;const MJ={toc:[]};function wJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}wJ.isMDXComponent=!0;const DJ={toc:[]};function _J(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}_J.isMDXComponent=!0;const XJ={toc:[]};function gJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}gJ.isMDXComponent=!0;const xJ={toc:[]};function CJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}CJ.isMDXComponent=!0;const TJ={toc:[]};function vJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}vJ.isMDXComponent=!0;const bJ={toc:[]};function LJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}LJ.isMDXComponent=!0;const ZJ={toc:[]};function NJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}NJ.isMDXComponent=!0;const AJ={toc:[]};function EJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}EJ.isMDXComponent=!0;const RJ={toc:[]};function zJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}zJ.isMDXComponent=!0;const SJ={toc:[]};function IJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}IJ.isMDXComponent=!0;const WJ={toc:[]};function GJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}GJ.isMDXComponent=!0;const PJ={toc:[]};function BJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}BJ.isMDXComponent=!0;const FJ={toc:[]};function UJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}UJ.isMDXComponent=!0;const VJ={toc:[]};function qJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}qJ.isMDXComponent=!0;const jJ={toc:[]};function OJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}OJ.isMDXComponent=!0;const $J={toc:[]};function HJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$J,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}HJ.isMDXComponent=!0;const YJ={toc:[]};function KJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}KJ.isMDXComponent=!0;const JJ={toc:[]};function QJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}QJ.isMDXComponent=!0;const tQ={toc:[]};function nQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}nQ.isMDXComponent=!0;const eQ={toc:[]};function oQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}oQ.isMDXComponent=!0;const pQ={toc:[]};function rQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}rQ.isMDXComponent=!0;const sQ={toc:[]};function cQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}cQ.isMDXComponent=!0;const aQ={toc:[]};function iQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}iQ.isMDXComponent=!0;const lQ={toc:[]};function uQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}uQ.isMDXComponent=!0;const mQ={toc:[]};function dQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}dQ.isMDXComponent=!0;const hQ={toc:[]};function kQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}kQ.isMDXComponent=!0;const yQ={toc:[]};function fQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}fQ.isMDXComponent=!0;const MQ={toc:[]};function wQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MQ,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}wQ.isMDXComponent=!0;const DQ={toc:[]};function _Q(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}_Q.isMDXComponent=!0;const XQ={toc:[]};function gQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}gQ.isMDXComponent=!0;const xQ={toc:[]};function CQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}CQ.isMDXComponent=!0;const TQ={toc:[]};function vQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}vQ.isMDXComponent=!0;const bQ={toc:[]};function LQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}LQ.isMDXComponent=!0;const ZQ={toc:[]};function NQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}NQ.isMDXComponent=!0;const AQ={toc:[]};function EQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}EQ.isMDXComponent=!0;const RQ={toc:[]};function zQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}zQ.isMDXComponent=!0;const SQ={toc:[]};function IQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}IQ.isMDXComponent=!0;const WQ={toc:[]};function GQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},WQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}GQ.isMDXComponent=!0;const PQ={toc:[]};function BQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}BQ.isMDXComponent=!0;const FQ={toc:[]};function UQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}UQ.isMDXComponent=!0;const VQ={toc:[]};function qQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}qQ.isMDXComponent=!0;const jQ={toc:[]};function OQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}OQ.isMDXComponent=!0;const $Q={toc:[]};function HQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$Q,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}HQ.isMDXComponent=!0;const YQ={toc:[]};function KQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}KQ.isMDXComponent=!0;const JQ={toc:[]};function QQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}QQ.isMDXComponent=!0;const t0={toc:[]};function n0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}n0.isMDXComponent=!0;const e0={toc:[]};function o0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e0,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}o0.isMDXComponent=!0;const p0={toc:[]};function r0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}r0.isMDXComponent=!0;const s0={toc:[]};function c0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}c0.isMDXComponent=!0;const a0={toc:[]};function i0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}i0.isMDXComponent=!0;const l0={toc:[]};function u0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}u0.isMDXComponent=!0;const m0={toc:[]};function d0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}d0.isMDXComponent=!0;const h0={toc:[]};function k0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}k0.isMDXComponent=!0;const y0={toc:[]};function f0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}f0.isMDXComponent=!0;const M0={toc:[]};function w0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}w0.isMDXComponent=!0;const D0={toc:[]};function _0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}_0.isMDXComponent=!0;const X0={toc:[]};function g0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}g0.isMDXComponent=!0;const x0={toc:[]};function C0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x0,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}C0.isMDXComponent=!0;const T0={toc:[]};function v0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}v0.isMDXComponent=!0;const b0={toc:[]};function L0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}L0.isMDXComponent=!0;const Z0={toc:[]};function N0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}N0.isMDXComponent=!0;const A0={toc:[]};function E0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}E0.isMDXComponent=!0;const R0={toc:[]};function z0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R0,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}z0.isMDXComponent=!0;const S0={toc:[]};function I0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}I0.isMDXComponent=!0;const W0={toc:[]};function G0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W0,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}G0.isMDXComponent=!0;const P0={toc:[]};function B0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}B0.isMDXComponent=!0;const F0={toc:[]};function U0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F0,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}U0.isMDXComponent=!0;const V0={toc:[]};function q0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}q0.isMDXComponent=!0;const j0={toc:[]};function O0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}O0.isMDXComponent=!0;const $0={toc:[]};function H0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}H0.isMDXComponent=!0;const Y0={toc:[]};function K0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}K0.isMDXComponent=!0;const J0={toc:[]};function Q0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}Q0.isMDXComponent=!0;const t2={toc:[]};function n2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}n2.isMDXComponent=!0;const e2={toc:[]};function o2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}o2.isMDXComponent=!0;const p2={toc:[]};function r2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}r2.isMDXComponent=!0;const s2={toc:[]};function c2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}c2.isMDXComponent=!0;const a2={toc:[]};function i2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}i2.isMDXComponent=!0;const l2={toc:[]};function u2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}u2.isMDXComponent=!0;const m2={toc:[]};function d2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}d2.isMDXComponent=!0;const h2={toc:[]};function k2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}k2.isMDXComponent=!0;const y2={toc:[]};function f2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}f2.isMDXComponent=!0;const M2={toc:[]};function w2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}w2.isMDXComponent=!0;const D2={toc:[]};function _2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}_2.isMDXComponent=!0;const X2={toc:[]};function g2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}g2.isMDXComponent=!0;const x2={toc:[]};function C2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}C2.isMDXComponent=!0;const T2={toc:[]};function v2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}v2.isMDXComponent=!0;const b2={toc:[]};function L2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b2,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}L2.isMDXComponent=!0;const Z2={toc:[]};function N2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}N2.isMDXComponent=!0;const A2={toc:[]};function E2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}E2.isMDXComponent=!0;const R2={toc:[]};function z2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#clone"},(0,s.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."))}z2.isMDXComponent=!0;const S2={toc:[]};function I2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}I2.isMDXComponent=!0;const W2={toc:[]};function G2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}G2.isMDXComponent=!0;const P2={toc:[]};function B2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P2,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}B2.isMDXComponent=!0;const F2={toc:[]};function U2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}U2.isMDXComponent=!0;const V2={toc:[]};function q2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}q2.isMDXComponent=!0;const j2={toc:[]};function O2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}O2.isMDXComponent=!0;const $2={toc:[]};function H2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}H2.isMDXComponent=!0;const Y2={toc:[]};function K2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}K2.isMDXComponent=!0;const J2={toc:[]};function Q2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}Q2.isMDXComponent=!0;const t1={toc:[]};function n1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}n1.isMDXComponent=!0;const e1={toc:[]};function o1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}o1.isMDXComponent=!0;const p1={toc:[]};function r1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This node can be used to render shapes such as: triangle, pentagon,\nhexagon and more."),(0,s.kt)("p",null,"Note that the polygon is inscribed in a circle defined by the height\nand width. If height and width are unequal, the polygon is inscribed\nin the resulting ellipse."),(0,s.kt)("p",null,"Since the polygon is inscribed in the circle, the actual displayed\nheight and width may differ somewhat from the bounding rectangle. This\nwill be particularly noticable if the number of sides is low, e.g. for a\ntriangle."))}r1.isMDXComponent=!0;const s1={toc:[]};function c1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A hexagon:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Polygon\n sides={6}\n size={300}\n fill={'lightseagreen'}\n/>
10\n")),(0,s.kt)("p",null,"A pentagon outline:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Polygon\n sides={5}\n size={300}\n stroke={'lightblue'}\n lineWidth={8}\n/>\n")))}c1.isMDXComponent=!0;const a1={toc:[]};function i1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node for drawing regular polygons."))}i1.isMDXComponent=!0;const l1={toc:[]};function u1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l1,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}u1.isMDXComponent=!0;const m1={toc:[]};function d1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}d1.isMDXComponent=!0;const h1={toc:[]};function k1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h1,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}k1.isMDXComponent=!0;const y1={toc:[]};function f1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}f1.isMDXComponent=!0;const M1={toc:[]};function w1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M1,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}w1.isMDXComponent=!0;const D1={toc:[]};function _1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}_1.isMDXComponent=!0;const X1={toc:[]};function g1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X1,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}g1.isMDXComponent=!0;const x1={toc:[]};function C1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}C1.isMDXComponent=!0;const T1={toc:[]};function v1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}v1.isMDXComponent=!0;const b1={toc:[]};function L1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}L1.isMDXComponent=!0;const Z1={toc:[]};function N1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}N1.isMDXComponent=!0;const A1={toc:[]};function E1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}E1.isMDXComponent=!0;const R1={toc:[]};function z1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}z1.isMDXComponent=!0;const S1={toc:[]};function I1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"For example, a value of 6 creates a hexagon."))}I1.isMDXComponent=!0;const W1={toc:[]};function G1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Polygon\n size={320}\n sides={7}\n stroke={'#fff'}\n lineWidth={8}\n fill={'lightseagreen'}\n/>\n")))}G1.isMDXComponent=!0;const P1={toc:[]};function B1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Sets the number of sides of the polygon."))}B1.isMDXComponent=!0;const F1={toc:[]};function U1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}U1.isMDXComponent=!0;const V1={toc:[]};function q1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}q1.isMDXComponent=!0;const j1={toc:[]};function O1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}O1.isMDXComponent=!0;const $1={toc:[]};function H1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}H1.isMDXComponent=!0;const Y1={toc:[]};function K1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}K1.isMDXComponent=!0;const J1={toc:[]};function Q1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Q1.isMDXComponent=!0;const t3={toc:[]};function n3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}n3.isMDXComponent=!0;const e3={toc:[]};function o3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}o3.isMDXComponent=!0;const p3={toc:[]};function r3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}r3.isMDXComponent=!0;const s3={toc:[]};function c3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}c3.isMDXComponent=!0;const a3={toc:[]};function i3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}i3.isMDXComponent=!0;const l3={toc:[]};function u3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}u3.isMDXComponent=!0;const m3={toc:[]};function d3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}d3.isMDXComponent=!0;const h3={toc:[]};function k3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}k3.isMDXComponent=!0;const y3={toc:[]};function f3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}f3.isMDXComponent=!0;const M3={toc:[]};function w3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}w3.isMDXComponent=!0;const D3={toc:[]};function _3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D3,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}_3.isMDXComponent=!0;const X3={toc:[]};function g3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}g3.isMDXComponent=!0;const x3={toc:[]};function C3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}C3.isMDXComponent=!0;const T3={toc:[]};function v3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}v3.isMDXComponent=!0;const b3={toc:[]};function L3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b3,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}L3.isMDXComponent=!0;const Z3={toc:[]};function N3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}N3.isMDXComponent=!0;const A3={toc:[]};function E3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A3,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}E3.isMDXComponent=!0;const R3={toc:[]};function z3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}z3.isMDXComponent=!0;const S3={toc:[]};function I3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}I3.isMDXComponent=!0;const W3={toc:[]};function G3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}G3.isMDXComponent=!0;const P3={toc:[]};function B3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}B3.isMDXComponent=!0;const F3={toc:[]};function U3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}U3.isMDXComponent=!0;const V3={toc:[]};function q3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}q3.isMDXComponent=!0;const j3={toc:[]};function O3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j3,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}O3.isMDXComponent=!0;const $3={toc:[]};function H3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}H3.isMDXComponent=!0;const Y3={toc:[]};function K3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}K3.isMDXComponent=!0;const J3={toc:[]};function Q3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}Q3.isMDXComponent=!0;const t4={toc:[]};function n4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}n4.isMDXComponent=!0;const e4={toc:[]};function o4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}o4.isMDXComponent=!0;const p4={toc:[]};function r4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}r4.isMDXComponent=!0;const s4={toc:[]};function c4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}c4.isMDXComponent=!0;const a4={toc:[]};function i4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}i4.isMDXComponent=!0;const l4={toc:[]};function u4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}u4.isMDXComponent=!0;const m4={toc:[]};function d4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}d4.isMDXComponent=!0;const h4={toc:[]};function k4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}k4.isMDXComponent=!0;const y4={toc:[]};function f4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}f4.isMDXComponent=!0;const M4={toc:[]};function w4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}w4.isMDXComponent=!0;const D4={toc:[]};function _4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}_4.isMDXComponent=!0;const X4={toc:[]};function g4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}g4.isMDXComponent=!0;const x4={toc:[]};function C4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}C4.isMDXComponent=!0;const T4={toc:[]};function v4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}v4.isMDXComponent=!0;const b4={toc:[]};function L4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}L4.isMDXComponent=!0;const Z4={toc:[]};function N4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}N4.isMDXComponent=!0;const A4={toc:[]};function E4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}E4.isMDXComponent=!0;const R4={toc:[]};function z4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R4,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}z4.isMDXComponent=!0;const S4={toc:[]};function I4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}I4.isMDXComponent=!0;const W4={toc:[]};function G4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}G4.isMDXComponent=!0;const P4={toc:[]};function B4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}B4.isMDXComponent=!0;const F4={toc:[]};function U4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}U4.isMDXComponent=!0;const V4={toc:[]};function q4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}q4.isMDXComponent=!0;const j4={toc:[]};function O4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}O4.isMDXComponent=!0;const $4={toc:[]};function H4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}H4.isMDXComponent=!0;const Y4={toc:[]};function K4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}K4.isMDXComponent=!0;const J4={toc:[]};function Q4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Q4.isMDXComponent=!0;const t6={toc:[]};function n6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}n6.isMDXComponent=!0;const e6={toc:[]};function o6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e6,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}o6.isMDXComponent=!0;const p6={toc:[]};function r6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}r6.isMDXComponent=!0;const s6={toc:[]};function c6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}c6.isMDXComponent=!0;const a6={toc:[]};function i6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}i6.isMDXComponent=!0;const l6={toc:[]};function u6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}u6.isMDXComponent=!0;const m6={toc:[]};function d6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}d6.isMDXComponent=!0;const h6={toc:[]};function k6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}k6.isMDXComponent=!0;const y6={toc:[]};function f6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y6,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}f6.isMDXComponent=!0;const M6={toc:[]};function w6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}w6.isMDXComponent=!0;const D6={toc:[]};function _6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D6,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}_6.isMDXComponent=!0;const X6={toc:[]};function g6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}g6.isMDXComponent=!0;const x6={toc:[]};function C6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x6,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}C6.isMDXComponent=!0;const T6={toc:[]};function v6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}v6.isMDXComponent=!0;const b6={toc:[]};function L6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}L6.isMDXComponent=!0;const Z6={toc:[]};function N6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}N6.isMDXComponent=!0;const A6={toc:[]};function E6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}E6.isMDXComponent=!0;const R6={toc:[]};function z6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}z6.isMDXComponent=!0;const S6={toc:[]};function I6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}I6.isMDXComponent=!0;const W6={toc:[]};function G6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}G6.isMDXComponent=!0;const P6={toc:[]};function B6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}B6.isMDXComponent=!0;const F6={toc:[]};function U6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}U6.isMDXComponent=!0;const V6={toc:[]};function q6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}q6.isMDXComponent=!0;const j6={toc:[]};function O6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}O6.isMDXComponent=!0;const $6={toc:[]};function H6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}H6.isMDXComponent=!0;const Y6={toc:[]};function K6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}K6.isMDXComponent=!0;const J6={toc:[]};function Q6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}Q6.isMDXComponent=!0;const t8={toc:[]};function n8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}n8.isMDXComponent=!0;const e8={toc:[]};function o8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}o8.isMDXComponent=!0;const p8={toc:[]};function r8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}r8.isMDXComponent=!0;const s8={toc:[]};function c8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}c8.isMDXComponent=!0;const a8={toc:[]};function i8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}i8.isMDXComponent=!0;const l8={toc:[]};function u8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}u8.isMDXComponent=!0;const m8={toc:[]};function d8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}d8.isMDXComponent=!0;const h8={toc:[]};function k8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h8,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}k8.isMDXComponent=!0;const y8={toc:[]};function f8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}f8.isMDXComponent=!0;const M8={toc:[]};function w8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}w8.isMDXComponent=!0;const D8={toc:[]};function _8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#clone"},(0,s.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."))}_8.isMDXComponent=!0;const X8={toc:[]};function g8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}g8.isMDXComponent=!0;const x8={toc:[]};function C8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}C8.isMDXComponent=!0;const T8={toc:[]};function v8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T8,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}v8.isMDXComponent=!0;const b8={toc:[]};function L8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}L8.isMDXComponent=!0;const Z8={toc:[]};function N8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}N8.isMDXComponent=!0;const A8={toc:[]};function E8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}E8.isMDXComponent=!0;const R8={toc:[]};function z8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}z8.isMDXComponent=!0;const S8={toc:[]};function I8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}I8.isMDXComponent=!0;const W8={toc:[]};function G8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}G8.isMDXComponent=!0;const P8={toc:[]};function B8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}B8.isMDXComponent=!0;const F8={toc:[]};function U8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}U8.isMDXComponent=!0;const V8={toc:[]};function q8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}q8.isMDXComponent=!0;const j8={toc:[]};function O8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j8,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}O8.isMDXComponent=!0;const $8={toc:[]};function H8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}H8.isMDXComponent=!0;const Y8={toc:[]};function K8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y8,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}K8.isMDXComponent=!0;const J8={toc:[]};function Q8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Q8.isMDXComponent=!0;const t5={toc:[]};function n5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t5,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}n5.isMDXComponent=!0;const e5={toc:[]};function o5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}o5.isMDXComponent=!0;const p5={toc:[]};function r5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}r5.isMDXComponent=!0;const s5={toc:[]};function c5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n cornerSharpness={0.7}\n/>\n")))}c5.isMDXComponent=!0;const a5={toc:[]};function i5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}i5.isMDXComponent=!0;const l5={toc:[]};function u5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l5,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}u5.isMDXComponent=!0;const m5={toc:[]};function d5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}d5.isMDXComponent=!0;const h5={toc:[]};function k5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}k5.isMDXComponent=!0;const y5={toc:[]};function f5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}f5.isMDXComponent=!0;const M5={toc:[]};function w5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}w5.isMDXComponent=!0;const D5={toc:[]};function _5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}_5.isMDXComponent=!0;const X5={toc:[]};function g5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}g5.isMDXComponent=!0;const x5={toc:[]};function C5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}C5.isMDXComponent=!0;const T5={toc:[]};function v5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}v5.isMDXComponent=!0;const b5={toc:[]};function L5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}L5.isMDXComponent=!0;const Z5={toc:[]};function N5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}N5.isMDXComponent=!0;const A5={toc:[]};function E5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n/>\n")))}E5.isMDXComponent=!0;const R5={toc:[]};function z5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}z5.isMDXComponent=!0;const S5={toc:[]};function I5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}I5.isMDXComponent=!0;const W5={toc:[]};function G5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}G5.isMDXComponent=!0;const P5={toc:[]};function B5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}B5.isMDXComponent=!0;const F5={toc:[]};function U5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}U5.isMDXComponent=!0;const V5={toc:[]};function q5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}q5.isMDXComponent=!0;const j5={toc:[]};function O5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}O5.isMDXComponent=!0;const $5={toc:[]};function H5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}H5.isMDXComponent=!0;const Y5={toc:[]};function K5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}K5.isMDXComponent=!0;const J5={toc:[]};function Q5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}Q5.isMDXComponent=!0;const t7={toc:[]};function n7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}n7.isMDXComponent=!0;const e7={toc:[]};function o7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}o7.isMDXComponent=!0;const p7={toc:[]};function r7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}r7.isMDXComponent=!0;const s7={toc:[]};function c7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}c7.isMDXComponent=!0;const a7={toc:[]};function i7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a7,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}i7.isMDXComponent=!0;const l7={toc:[]};function u7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}u7.isMDXComponent=!0;const m7={toc:[]};function d7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}d7.isMDXComponent=!0;const h7={toc:[]};function k7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}k7.isMDXComponent=!0;const y7={toc:[]};function f7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y7,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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 M7={toc:[]};function w7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}w7.isMDXComponent=!0;const D7={toc:[]};function _7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D7,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},X7,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("wrapper",(0,r.Z)({},x7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}
10C7.isMDXComponent=!0;const T7={toc:[]};function v7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}v7.isMDXComponent=!0;const b7={toc:[]};function L7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}L7.isMDXComponent=!0;const Z7={toc:[]};function N7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}N7.isMDXComponent=!0;const A7={toc:[]};function E7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}E7.isMDXComponent=!0;const R7={toc:[]};function z7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}z7.isMDXComponent=!0;const S7={toc:[]};function I7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}I7.isMDXComponent=!0;const W7={toc:[]};function G7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}G7.isMDXComponent=!0;const P7={toc:[]};function B7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}B7.isMDXComponent=!0;const F7={toc:[]};function U7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}U7.isMDXComponent=!0;const V7={toc:[]};function q7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}q7.isMDXComponent=!0;const j7={toc:[]};function O7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}O7.isMDXComponent=!0;const $7={toc:[]};function H7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}H7.isMDXComponent=!0;const Y7={toc:[]};function K7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}K7.isMDXComponent=!0;const J7={toc:[]};function Q7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}Q7.isMDXComponent=!0;const t9={toc:[]};function n9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}n9.isMDXComponent=!0;const e9={toc:[]};function o9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}o9.isMDXComponent=!0;const p9={toc:[]};function r9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}r9.isMDXComponent=!0;const s9={toc:[]};function c9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}c9.isMDXComponent=!0;const a9={toc:[]};function i9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}i9.isMDXComponent=!0;const l9={toc:[]};function u9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}u9.isMDXComponent=!0;const m9={toc:[]};function d9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}d9.isMDXComponent=!0;const h9={toc:[]};function k9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}k9.isMDXComponent=!0;const y9={toc:[]};function f9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}f9.isMDXComponent=!0;const M9={toc:[]};function w9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}w9.isMDXComponent=!0;const D9={toc:[]};function _9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}_9.isMDXComponent=!0;const X9={toc:[]};function g9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X9,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}g9.isMDXComponent=!0;const x9={toc:[]};function C9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}C9.isMDXComponent=!0;const T9={toc:[]};function v9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}v9.isMDXComponent=!0;const b9={toc:[]};function L9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}L9.isMDXComponent=!0;const Z9={toc:[]};function N9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}N9.isMDXComponent=!0;const A9={toc:[]};function E9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}E9.isMDXComponent=!0;const R9={toc:[]};function z9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}z9.isMDXComponent=!0;const S9={toc:[]};function I9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}I9.isMDXComponent=!0;const W9={toc:[]};function G9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},W9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}G9.isMDXComponent=!0;const P9={toc:[]};function B9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}B9.isMDXComponent=!0;const F9={toc:[]};function U9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}U9.isMDXComponent=!0;const V9={toc:[]};function q9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},V9,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}q9.isMDXComponent=!0;const j9={toc:[]};function O9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}O9.isMDXComponent=!0;const $9={toc:[]};function H9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}H9.isMDXComponent=!0;const Y9={toc:[]};function K9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Y9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}K9.isMDXComponent=!0;const J9={toc:[]};function Q9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}Q9.isMDXComponent=!0;const ttt={toc:[]};function ntt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ttt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}ntt.isMDXComponent=!0;const ett={toc:[]};function ott(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ett,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}ott.isMDXComponent=!0;const ptt={toc:[]};function rtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ptt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}rtt.isMDXComponent=!0;const stt={toc:[]};function ctt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},stt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}ctt.isMDXComponent=!0;const att={toc:[]};function itt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},att,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}itt.isMDXComponent=!0;const ltt={toc:[]};function utt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ltt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}utt.isMDXComponent=!0;const mtt={toc:[]};function dtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}dtt.isMDXComponent=!0;const htt={toc:[]};function ktt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},htt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}ktt.isMDXComponent=!0;const ytt={toc:[]};function ftt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ytt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}ftt.isMDXComponent=!0;const Mtt={toc:[]};function wtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}wtt.isMDXComponent=!0;const Dtt={toc:[]};function _tt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}_tt.isMDXComponent=!0;const Xtt={toc:[]};function gtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}gtt.isMDXComponent=!0;const xtt={toc:[]};function Ctt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}Ctt.isMDXComponent=!0;const Ttt={toc:[]};function vtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ttt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}vtt.isMDXComponent=!0;const btt={toc:[]};function Ltt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},btt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Ltt.isMDXComponent=!0;const Ztt={toc:[]};function Ntt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ztt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}Ntt.isMDXComponent=!0;const Att={toc:[]};function Ett(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Att,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}Ett.isMDXComponent=!0;const Rtt={toc:[]};function ztt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}ztt.isMDXComponent=!0;const Stt={toc:[]};function Itt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Stt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Itt.isMDXComponent=!0;const Wtt={toc:[]};function Gtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}Gtt.isMDXComponent=!0;const Ptt={toc:[]};function Btt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ptt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}Btt.isMDXComponent=!0;const Ftt={toc:[]};function Utt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ftt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Utt.isMDXComponent=!0;const Vtt={toc:[]};function qtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}qtt.isMDXComponent=!0;const jtt={toc:[]};function Ott(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}Ott.isMDXComponent=!0;const $tt={toc:[]};function Htt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$tt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}Htt.isMDXComponent=!0;const Ytt={toc:[]};function Ktt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ytt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}Ktt.isMDXComponent=!0;const Jtt={toc:[]};function Qtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}Qtt.isMDXComponent=!0;const tnt={toc:[]};function nnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}nnt.isMDXComponent=!0;const ent={toc:[]};function ont(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ent,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}ont.isMDXComponent=!0;const pnt={toc:[]};function rnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}rnt.isMDXComponent=!0;const snt={toc:[]};function cnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},snt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}cnt.isMDXComponent=!0;const ant={toc:[]};function int(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ant,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#clone"},(0,s.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."))}int.isMDXComponent=!0;const lnt={toc:[]};function unt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}unt.isMDXComponent=!0;const mnt={toc:[]};function dnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}dnt.isMDXComponent=!0;const hnt={toc:[]};function knt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}knt.isMDXComponent=!0;const ynt={toc:[]};function fnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ynt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}fnt.isMDXComponent=!0;const Mnt={toc:[]};function wnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}wnt.isMDXComponent=!0;const Dnt={toc:[]};function _nt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}_nt.isMDXComponent=!0;const Xnt={toc:[]};function gnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}gnt.isMDXComponent=!0;const xnt={toc:[]};function Cnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Cnt.isMDXComponent=!0;const Tnt={toc:[]};function vnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}vnt.isMDXComponent=!0;const bnt={toc:[]};function Lnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}Lnt.isMDXComponent=!0;const Znt={toc:[]};function Nnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Znt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}Nnt.isMDXComponent=!0;const Ant={toc:[]};function Ent(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ant,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}Ent.isMDXComponent=!0;const Rnt={toc:[]};function znt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}znt.isMDXComponent=!0;const Snt={toc:[]};function Int(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Snt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}Int.isMDXComponent=!0;const Wnt={toc:[]};function Gnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Wnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}Gnt.isMDXComponent=!0;const Pnt={toc:[]};function Bnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Bnt.isMDXComponent=!0;const Fnt={toc:[]};function Unt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Unt.isMDXComponent=!0;const Vnt={toc:[]};function qnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Vnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}qnt.isMDXComponent=!0;const jnt={toc:[]};function Ont(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}Ont.isMDXComponent=!0;const $nt={toc:[]};function Hnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$nt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}Hnt.isMDXComponent=!0;const Ynt={toc:[]};function Knt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ynt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}Knt.isMDXComponent=!0;const Jnt={toc:[]};function Qnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Qnt.isMDXComponent=!0;const tet={toc:[]};function net(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}net.isMDXComponent=!0;const eet={toc:[]};function oet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}oet.isMDXComponent=!0;const pet={toc:[]};function ret(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}ret.isMDXComponent=!0;const set={toc:[]};function cet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},set,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}cet.isMDXComponent=!0;const aet={toc:[]};function iet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}iet.isMDXComponent=!0;const uet={toc:[]};function met(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}met.isMDXComponent=!0;const det={toc:[]};function het(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},det,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}het.isMDXComponent=!0;const ket={toc:[]};function yet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ket,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}yet.isMDXComponent=!0;const fet={toc:[]};function Met(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Met.isMDXComponent=!0;const wet={toc:[]};function Det(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Det.isMDXComponent=!0;const _et={toc:[]};function Xet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_et,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}Xet.isMDXComponent=!0;const get={toc:[]};function xet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},get,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}xet.isMDXComponent=!0;const Cet={toc:[]};function Tet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}Tet.isMDXComponent=!0;const vet={toc:[]};function bet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}bet.isMDXComponent=!0;const Let={toc:[]};function Zet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Let,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}Zet.isMDXComponent=!0;const Net={toc:[]};function Aet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Net,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Aet.isMDXComponent=!0;const Eet={toc:[]};function Ret(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Ret.isMDXComponent=!0;const zet={toc:[]};function Set(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Set.isMDXComponent=!0;const Iet={toc:[]};function Wet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}Wet.isMDXComponent=!0;const Get={toc:[]};function Pet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Get,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Pet.isMDXComponent=!0;const Bet={toc:[]};function Fet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}Fet.isMDXComponent=!0;const Uet={toc:[]};function Vet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}Vet.isMDXComponent=!0;const qet={toc:[]};function jet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}jet.isMDXComponent=!0;const Oet={toc:[]};function $et(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oet,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}$et.isMDXComponent=!0;const Het={toc:[]};function Yet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Het,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}Yet.isMDXComponent=!0;const Ket={toc:[]};function Jet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ket,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Jet.isMDXComponent=!0;const Qet={toc:[]};function tot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}tot.isMDXComponent=!0;const not={toc:[]};function eot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},not,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}eot.isMDXComponent=!0;const oot={toc:[]};function pot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}pot.isMDXComponent=!0;const rot={toc:[]};function sot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}sot.isMDXComponent=!0;const cot={toc:[]};function aot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}aot.isMDXComponent=!0;const iot={toc:[]};function lot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}lot.isMDXComponent=!0;const uot={toc:[]};function mot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uot,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}mot.isMDXComponent=!0;const dot={toc:[]};function hot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}hot.isMDXComponent=!0;const kot={toc:[]};function yot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}yot.isMDXComponent=!0;const fot={toc:[]};function Mot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}Mot.isMDXComponent=!0;const wot={toc:[]};function Dot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Dot.isMDXComponent=!0;const _ot={toc:[]};function Xot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}Xot.isMDXComponent=!0;const got={toc:[]};function xot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},got,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}xot.isMDXComponent=!0;const Cot={toc:[]};function Tot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}Tot.isMDXComponent=!0;const vot={toc:[]};function bot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}bot.isMDXComponent=!0;const Lot={toc:[]};function Zot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}Zot.isMDXComponent=!0;const Not={toc:[]};function Aot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Not,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}Aot.isMDXComponent=!0;const Eot={toc:[]};function Rot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}Rot.isMDXComponent=!0;const zot={toc:[]};function Sot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}Sot.isMDXComponent=!0;const Iot={toc:[]};function Wot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}Wot.isMDXComponent=!0;const Got={toc:[]};function Pot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Got,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}Pot.isMDXComponent=!0;const Bot={toc:[]};function Fot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}Fot.isMDXComponent=!0;const Uot={toc:[]};function Vot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Vot.isMDXComponent=!0;const qot={toc:[]};function jot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}jot.isMDXComponent=!0;const Oot={toc:[]};function $ot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}$ot.isMDXComponent=!0;const Hot={toc:[]};function Yot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}Yot.isMDXComponent=!0;const Kot={toc:[]};function Jot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}Jot.isMDXComponent=!0;const Qot={toc:[]};function tpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qot,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}tpt.isMDXComponent=!0;const npt={toc:[]};function ept(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},npt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}ept.isMDXComponent=!0;const opt={toc:[]};function ppt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},opt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}ppt.isMDXComponent=!0;const rpt={toc:[]};function spt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}spt.isMDXComponent=!0;const cpt={toc:[]};function apt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}apt.isMDXComponent=!0;const ipt={toc:[]};function lpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ipt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}lpt.isMDXComponent=!0;const upt={toc:[]};function mpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},upt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}mpt.isMDXComponent=!0;const dpt={toc:[]};function hpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}hpt.isMDXComponent=!0;const kpt={toc:[]};function ypt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}ypt.isMDXComponent=!0;const fpt={toc:[]};function Mpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Mpt.isMDXComponent=!0;const wpt={toc:[]};function Dpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}Dpt.isMDXComponent=!0;const _pt={toc:[]};function Xpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_pt,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}Xpt.isMDXComponent=!0;const gpt={toc:[]};function xpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}xpt.isMDXComponent=!0;const Cpt={toc:[]};function Tpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}Tpt.isMDXComponent=!0;const vpt={toc:[]};function bpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}bpt.isMDXComponent=!0;const Lpt={toc:[]};function Zpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}Zpt.isMDXComponent=!0;const Npt={toc:[]};function Apt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Npt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}Apt.isMDXComponent=!0;const Ept={toc:[]};function Rpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ept,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}Rpt.isMDXComponent=!0;const zpt={toc:[]};function Spt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Spt.isMDXComponent=!0;const Ipt={toc:[]};function Wpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ipt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}Wpt.isMDXComponent=!0;const Gpt={toc:[]};function Ppt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Ppt.isMDXComponent=!0;const Bpt={toc:[]};function Fpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}Fpt.isMDXComponent=!0;const Upt={toc:[]};function Vpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Upt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Vpt.isMDXComponent=!0;const qpt={toc:[]};function jpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}jpt.isMDXComponent=!0;const Opt={toc:[]};function $pt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Opt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}$pt.isMDXComponent=!0;const Hpt={toc:[]};function Ypt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}Ypt.isMDXComponent=!0;const Kpt={toc:[]};function Jpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Jpt.isMDXComponent=!0;const Qpt={toc:[]};function trt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}trt.isMDXComponent=!0;const nrt={toc:[]};function ert(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}ert.isMDXComponent=!0;const ort={toc:[]};function prt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ort,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}prt.isMDXComponent=!0;const rrt={toc:[]};function srt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}srt.isMDXComponent=!0;const crt={toc:[]};function art(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},crt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}art.isMDXComponent=!0;const irt={toc:[]};function lrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},irt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}lrt.isMDXComponent=!0;const urt={toc:[]};function mrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},urt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}mrt.isMDXComponent=!0;const drt={toc:[]};function hrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},drt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}hrt.isMDXComponent=!0;const krt={toc:[]};function yrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},krt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}yrt.isMDXComponent=!0;const frt={toc:[]};function Mrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},frt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}Mrt.isMDXComponent=!0;const wrt={toc:[]};function Drt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Drt.isMDXComponent=!0;const _rt={toc:[]};function Xrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_rt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}Xrt.isMDXComponent=!0;const grt={toc:[]};function xrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},grt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}xrt.isMDXComponent=!0;const Crt={toc:[]};function Trt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Crt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}Trt.isMDXComponent=!0;const vrt={toc:[]};function brt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}brt.isMDXComponent=!0;const Lrt={toc:[]};function Zrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}Zrt.isMDXComponent=!0;const Nrt={toc:[]};function Art(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}Art.isMDXComponent=!0;const Ert={toc:[]};function Rrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ert,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}Rrt.isMDXComponent=!0;const zrt={toc:[]};function Srt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}Srt.isMDXComponent=!0;const Irt={toc:[]};function Wrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Irt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}Wrt.isMDXComponent=!0;const Grt={toc:[]};function Prt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Grt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#clone"},(0,s.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."))}Prt.isMDXComponent=!0;const Brt={toc:[]};function Frt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Brt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Frt.isMDXComponent=!0;const Urt={toc:[]};function Vrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Urt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Vrt.isMDXComponent=!0;const qrt={toc:[]};function jrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}jrt.isMDXComponent=!0;const Ort={toc:[]};function $rt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ort,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}$rt.isMDXComponent=!0;const Hrt={toc:[]};function Yrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}Yrt.isMDXComponent=!0;const Krt={toc:[]};function Jrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Krt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}Jrt.isMDXComponent=!0;const Qrt={toc:[]};function tst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}tst.isMDXComponent=!0;const nst={toc:[]};function est(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}est.isMDXComponent=!0;const ost={toc:[]};function pst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ost,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}pst.isMDXComponent=!0;const rst={toc:[]};function sst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}sst.isMDXComponent=!0;const cst={toc:[]};function ast(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}ast.isMDXComponent=!0;const ist={toc:[]};function lst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ist,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}lst.isMDXComponent=!0;const ust={toc:[]};function mst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ust,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}mst.isMDXComponent=!0;const dst={toc:[]};function hst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}hst.isMDXComponent=!0;const kst={toc:[]};function yst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kst,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}yst.isMDXComponent=!0;const fst={toc:[]};function Mst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Mst.isMDXComponent=!0;const wst={toc:[]};function Dst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wst,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Dst.isMDXComponent=!0;const _st={toc:[]};function Xst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_st,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}Xst.isMDXComponent=!0;const gst={toc:[]};function xst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gst,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}xst.isMDXComponent=!0;const Cst={toc:[]};function Tst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}Tst.isMDXComponent=!0;const vst={toc:[]};function bst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}bst.isMDXComponent=!0;const Lst={toc:[]};function Zst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Zst.isMDXComponent=!0;const Nst={toc:[]};function Ast(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}Ast.isMDXComponent=!0;const Est={toc:[]};function Rst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Est,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}Rst.isMDXComponent=!0;const zst={toc:[]};function Sst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}Sst.isMDXComponent=!0;const Ist={toc:[]};function Wst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ist,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}Wst.isMDXComponent=!0;const Gst={toc:[]};function Pst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}Pst.isMDXComponent=!0;const Bst={toc:[]};function Fst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}Fst.isMDXComponent=!0;const Ust={toc:[]};function Vst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ust,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}Vst.isMDXComponent=!0;const qst={toc:[]};function jst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}jst.isMDXComponent=!0;const Ost={toc:[]};function $st(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ost,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}$st.isMDXComponent=!0;const Hst={toc:[]};function Yst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Yst.isMDXComponent=!0;const Kst={toc:[]};function Jst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}Jst.isMDXComponent=!0;const Qst={toc:[]};function tct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}tct.isMDXComponent=!0;const nct={toc:[]};function ect(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}ect.isMDXComponent=!0;const oct={toc:[]};function pct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}pct.isMDXComponent=!0;const rct={toc:[]};function sct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}sct.isMDXComponent=!0;const cct={toc:[]};function act(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}act.isMDXComponent=!0;const ict={toc:[]};function lct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ict,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}lct.isMDXComponent=!0;const uct={toc:[]};function mct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}mct.isMDXComponent=!0;const dct={toc:[]};function hct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}hct.isMDXComponent=!0;const kct={toc:[]};function yct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kct,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}yct.isMDXComponent=!0;const fct={toc:[]};function Mct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}Mct.isMDXComponent=!0;const wct={toc:[]};function Dct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}Dct.isMDXComponent=!0;const _ct={toc:[]};function Xct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}Xct.isMDXComponent=!0;const gct={toc:[]};function xct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gct,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}xct.isMDXComponent=!0;const Cct={toc:[]};function Tct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}Tct.isMDXComponent=!0;const vct={toc:[]};function bct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vct,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}bct.isMDXComponent=!0;const Lct={toc:[]};function Zct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}Zct.isMDXComponent=!0;const Nct={toc:[]};function Act(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Act.isMDXComponent=!0;const Ect={toc:[]};function Rct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ect,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}Rct.isMDXComponent=!0;const zct={toc:[]};function Sct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}Sct.isMDXComponent=!0;const Ict={toc:[]};function Wct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ict,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Wct.isMDXComponent=!0;const Gct={toc:[]};function Pct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}Pct.isMDXComponent=!0;const Bct={toc:[]};function Fct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bct,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Fct.isMDXComponent=!0;const Uct={toc:[]};function Vct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}Vct.isMDXComponent=!0;const qct={toc:[]};function jct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}jct.isMDXComponent=!0;const Oct={toc:[]};function $ct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}$ct.isMDXComponent=!0;const Hct={toc:[]};function Yct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Yct.isMDXComponent=!0;const Kct={toc:[]};function Jct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}Jct.isMDXComponent=!0;const Qct={toc:[]};function tat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}tat.isMDXComponent=!0;const nat={toc:[]};function eat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}eat.isMDXComponent=!0;const oat={toc:[]};function pat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}pat.isMDXComponent=!0;const rat={toc:[]};function sat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}sat.isMDXComponent=!0;const cat={toc:[]};function aat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}aat.isMDXComponent=!0;const iat={toc:[]};function lat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}lat.isMDXComponent=!0;const uat={toc:[]};function mat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}mat.isMDXComponent=!0;const dat={toc:[]};function hat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}hat.isMDXComponent=!0;const kat={toc:[]};function yat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}yat.isMDXComponent=!0;const fat={toc:[]};function Mat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}Mat.isMDXComponent=!0;const wat={toc:[]};function Dat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}
10Dat.isMDXComponent=!0;const _at={toc:[]};function Xat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_at,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}Xat.isMDXComponent=!0;const gat={toc:[]};function xat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}xat.isMDXComponent=!0;const Cat={toc:[]};function Tat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}Tat.isMDXComponent=!0;const vat={toc:[]};function bat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}bat.isMDXComponent=!0;const Lat={toc:[]};function Zat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lat,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}Zat.isMDXComponent=!0;const Nat={toc:[]};function Aat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}Aat.isMDXComponent=!0;const Eat={toc:[]};function Rat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}Rat.isMDXComponent=!0;const zat={toc:[]};function Sat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}Sat.isMDXComponent=!0;const Iat={toc:[]};function Wat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}Wat.isMDXComponent=!0;const Gat={toc:[]};function Pat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Pat.isMDXComponent=!0;const Bat={toc:[]};function Fat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}Fat.isMDXComponent=!0;const Uat={toc:[]};function Vat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}Vat.isMDXComponent=!0;const qat={toc:[]};function jat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}jat.isMDXComponent=!0;const Oat={toc:[]};function $at(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}$at.isMDXComponent=!0;const Hat={toc:[]};function Yat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}Yat.isMDXComponent=!0;const Kat={toc:[]};function Jat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kat,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}Jat.isMDXComponent=!0;const Qat={toc:[]};function tit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}tit.isMDXComponent=!0;const nit={toc:[]};function eit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}eit.isMDXComponent=!0;const oit={toc:[]};function pit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}pit.isMDXComponent=!0;const rit={toc:[]};function sit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}sit.isMDXComponent=!0;const cit={toc:[]};function ait(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}ait.isMDXComponent=!0;const iit={toc:[]};function lit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}lit.isMDXComponent=!0;const uit={toc:[]};function mit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uit,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}mit.isMDXComponent=!0;const dit={toc:[]};function hit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}hit.isMDXComponent=!0;const kit={toc:[]};function yit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kit,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}yit.isMDXComponent=!0;const fit={toc:[]};function Mit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}Mit.isMDXComponent=!0;const wit={toc:[]};function Dit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wit,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Dit.isMDXComponent=!0;const _it={toc:[]};function Xit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_it,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}Xit.isMDXComponent=!0;const git={toc:[]};function xit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},git,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}xit.isMDXComponent=!0;const Cit={toc:[]};function Tit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}Tit.isMDXComponent=!0;const vit={toc:[]};function bit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}bit.isMDXComponent=!0;const Lit={toc:[]};function Zit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}Zit.isMDXComponent=!0;const Nit={toc:[]};function Ait(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}Ait.isMDXComponent=!0;const Eit={toc:[]};function Rit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}Rit.isMDXComponent=!0;const zit={toc:[]};function Sit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Sit.isMDXComponent=!0;const Iit={toc:[]};function Wit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}Wit.isMDXComponent=!0;const Git={toc:[]};function Pit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Git,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}Pit.isMDXComponent=!0;const Bit={toc:[]};function Fit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}Fit.isMDXComponent=!0;const Uit={toc:[]};function Vit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Vit.isMDXComponent=!0;const qit={toc:[]};function jit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}jit.isMDXComponent=!0;const Oit={toc:[]};function $it(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}$it.isMDXComponent=!0;const Hit={toc:[]};function Yit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Yit.isMDXComponent=!0;const Kit={toc:[]};function Jit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}Jit.isMDXComponent=!0;const Qit={toc:[]};function tlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}tlt.isMDXComponent=!0;const nlt={toc:[]};function elt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}elt.isMDXComponent=!0;const olt={toc:[]};function plt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},olt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}plt.isMDXComponent=!0;const rlt={toc:[]};function slt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}slt.isMDXComponent=!0;const clt={toc:[]};function alt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},clt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}alt.isMDXComponent=!0;const ilt={toc:[]};function llt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ilt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}llt.isMDXComponent=!0;const ult={toc:[]};function mlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ult,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}mlt.isMDXComponent=!0;const dlt={toc:[]};function hlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}hlt.isMDXComponent=!0;const klt={toc:[]};function ylt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},klt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#clone"},(0,s.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."))}ylt.isMDXComponent=!0;const flt={toc:[]};function Mlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},flt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Mlt.isMDXComponent=!0;const wlt={toc:[]};function Dlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Dlt.isMDXComponent=!0;const _lt={toc:[]};function Xlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_lt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Xlt.isMDXComponent=!0;const glt={toc:[]};function xlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},glt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}xlt.isMDXComponent=!0;const Clt={toc:[]};function Tlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Clt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}Tlt.isMDXComponent=!0;const vlt={toc:[]};function blt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}blt.isMDXComponent=!0;const Llt={toc:[]};function Zlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Llt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}Zlt.isMDXComponent=!0;const Nlt={toc:[]};function Alt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Alt.isMDXComponent=!0;const Elt={toc:[]};function Rlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Elt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}Rlt.isMDXComponent=!0;const zlt={toc:[]};function Slt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}Slt.isMDXComponent=!0;const Ilt={toc:[]};function Wlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ilt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}Wlt.isMDXComponent=!0;const Glt={toc:[]};function Plt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Glt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}Plt.isMDXComponent=!0;const Blt={toc:[]};function Flt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Blt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Flt.isMDXComponent=!0;const Ult={toc:[]};function Vlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ult,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}Vlt.isMDXComponent=!0;const qlt={toc:[]};function jlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}jlt.isMDXComponent=!0;const Olt={toc:[]};function $lt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Olt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}$lt.isMDXComponent=!0;const Hlt={toc:[]};function Ylt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Ylt.isMDXComponent=!0;const Klt={toc:[]};function Jlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Klt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}Jlt.isMDXComponent=!0;const Qlt={toc:[]};function tut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}tut.isMDXComponent=!0;const nut={toc:[]};function eut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n cornerSharpness={0.7}\n/>\n")))}eut.isMDXComponent=!0;const out={toc:[]};function put(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},out,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}put.isMDXComponent=!0;const rut={toc:[]};function sut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rut,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}sut.isMDXComponent=!0;const cut={toc:[]};function aut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}aut.isMDXComponent=!0;const iut={toc:[]};function lut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}lut.isMDXComponent=!0;const uut={toc:[]};function mut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}mut.isMDXComponent=!0;const dut={toc:[]};function hut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}hut.isMDXComponent=!0;const kut={toc:[]};function yut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}yut.isMDXComponent=!0;const fut={toc:[]};function Mut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}Mut.isMDXComponent=!0;const wut={toc:[]};function Dut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}Dut.isMDXComponent=!0;const _ut={toc:[]};function Xut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}Xut.isMDXComponent=!0;const gut={toc:[]};function xut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}xut.isMDXComponent=!0;const Cut={toc:[]};function Tut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}Tut.isMDXComponent=!0;const vut={toc:[]};function but(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n/>\n")))}but.isMDXComponent=!0;const Lut={toc:[]};function Zut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}Zut.isMDXComponent=!0;const Nut={toc:[]};function Aut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}Aut.isMDXComponent=!0;const Eut={toc:[]};function Rut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}Rut.isMDXComponent=!0;const zut={toc:[]};function Sut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Sut.isMDXComponent=!0;const Iut={toc:[]};function Wut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Wut.isMDXComponent=!0;const Gut={toc:[]};function Put(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}Put.isMDXComponent=!0;const But={toc:[]};function Fut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},But,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}Fut.isMDXComponent=!0;const Uut={toc:[]};function Vut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}Vut.isMDXComponent=!0;const qut={toc:[]};function jut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}jut.isMDXComponent=!0;const Out={toc:[]};function $ut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Out,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}$ut.isMDXComponent=!0;const Hut={toc:[]};function Yut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Yut.isMDXComponent=!0;const Kut={toc:[]};function Jut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Jut.isMDXComponent=!0;const Qut={toc:[]};function tmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}tmt.isMDXComponent=!0;const nmt={toc:[]};function emt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}emt.isMDXComponent=!0;const omt={toc:[]};function pmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},omt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}pmt.isMDXComponent=!0;const rmt={toc:[]};function smt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}smt.isMDXComponent=!0;const cmt={toc:[]};function amt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}amt.isMDXComponent=!0;const imt={toc:[]};function lmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},imt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}lmt.isMDXComponent=!0;const umt={toc:[]};function mmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},umt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}mmt.isMDXComponent=!0;const dmt={toc:[]};function hmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}hmt.isMDXComponent=!0;const kmt={toc:[]};function ymt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}ymt.isMDXComponent=!0;const fmt={toc:[]};function Mmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}Mmt.isMDXComponent=!0;const wmt={toc:[]};function Dmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Dmt.isMDXComponent=!0;const _mt={toc:[]};function Xmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_mt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}Xmt.isMDXComponent=!0;const gmt={toc:[]};function xmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}xmt.isMDXComponent=!0;
10const Cmt={toc:[]};function Tmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Tmt.isMDXComponent=!0;const vmt={toc:[]};function bmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}bmt.isMDXComponent=!0;const Lmt={toc:[]};function Zmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Zmt.isMDXComponent=!0;const Nmt={toc:[]};function Amt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}Amt.isMDXComponent=!0;const Emt={toc:[]};function Rmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Emt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Rmt.isMDXComponent=!0;const zmt={toc:[]};function Smt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}Smt.isMDXComponent=!0;const Imt={toc:[]};function Wmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Imt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Wmt.isMDXComponent=!0;const Gmt={toc:[]};function Pmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}Pmt.isMDXComponent=!0;const Bmt={toc:[]};function Fmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}Fmt.isMDXComponent=!0;const Umt={toc:[]};function Vmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Umt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}Vmt.isMDXComponent=!0;const qmt={toc:[]};function jmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}jmt.isMDXComponent=!0;const Omt={toc:[]};function $mt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Omt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}$mt.isMDXComponent=!0;const Hmt={toc:[]};function Ymt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}Ymt.isMDXComponent=!0;const Kmt={toc:[]};function Jmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}Jmt.isMDXComponent=!0;const Qmt={toc:[]};function tdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}tdt.isMDXComponent=!0;const ndt={toc:[]};function edt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ndt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}edt.isMDXComponent=!0;const odt={toc:[]};function pdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},odt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}pdt.isMDXComponent=!0;const rdt={toc:[]};function sdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}sdt.isMDXComponent=!0;const cdt={toc:[]};function adt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}adt.isMDXComponent=!0;const idt={toc:[]};function ldt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},idt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}ldt.isMDXComponent=!0;const udt={toc:[]};function mdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},udt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}mdt.isMDXComponent=!0;const ddt={toc:[]};function hdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ddt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}hdt.isMDXComponent=!0;const kdt={toc:[]};function ydt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}ydt.isMDXComponent=!0;const fdt={toc:[]};function Mdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}Mdt.isMDXComponent=!0;const wdt={toc:[]};function Ddt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}Ddt.isMDXComponent=!0;const _dt={toc:[]};function Xdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_dt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}Xdt.isMDXComponent=!0;const gdt={toc:[]};function xdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}xdt.isMDXComponent=!0;const Cdt={toc:[]};function Tdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}Tdt.isMDXComponent=!0;const vdt={toc:[]};function bdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}bdt.isMDXComponent=!0;const Ldt={toc:[]};function Zdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ldt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}Zdt.isMDXComponent=!0;const Ndt={toc:[]};function Adt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ndt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}Adt.isMDXComponent=!0;const Edt={toc:[]};function Rdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Edt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}Rdt.isMDXComponent=!0;const zdt={toc:[]};function Sdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Sdt.isMDXComponent=!0;const Idt={toc:[]};function Wdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Idt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}Wdt.isMDXComponent=!0;const Gdt={toc:[]};function Pdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gdt,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}Pdt.isMDXComponent=!0;const Bdt={toc:[]};function Fdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}Fdt.isMDXComponent=!0;const Udt={toc:[]};function Vdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Udt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}Vdt.isMDXComponent=!0;const qdt={toc:[]};function jdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}jdt.isMDXComponent=!0;const Odt={toc:[]};function $dt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Odt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}$dt.isMDXComponent=!0;const Hdt={toc:[]};function Ydt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}Ydt.isMDXComponent=!0;const Kdt={toc:[]};function Jdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}Jdt.isMDXComponent=!0;const Qdt={toc:[]};function tht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}tht.isMDXComponent=!0;const nht={toc:[]};function eht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}eht.isMDXComponent=!0;const oht={toc:[]};function pht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oht,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}pht.isMDXComponent=!0;const rht={toc:[]};function sht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}sht.isMDXComponent=!0;const cht={toc:[]};function aht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cht,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}aht.isMDXComponent=!0;const iht={toc:[]};function lht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}lht.isMDXComponent=!0;const uht={toc:[]};function mht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}mht.isMDXComponent=!0;const dht={toc:[]};function hht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}hht.isMDXComponent=!0;const kht={toc:[]};function yht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}yht.isMDXComponent=!0;const fht={toc:[]};function Mht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}Mht.isMDXComponent=!0;const wht={toc:[]};function Dht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}Dht.isMDXComponent=!0;const _ht={toc:[]};function Xht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}Xht.isMDXComponent=!0;const ght={toc:[]};function xht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ght,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}xht.isMDXComponent=!0;const Cht={toc:[]};function Tht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}Tht.isMDXComponent=!0;const vht={toc:[]};function bht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}bht.isMDXComponent=!0;const Lht={toc:[]};function Zht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}Zht.isMDXComponent=!0;const Nht={toc:[]};function Aht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Aht.isMDXComponent=!0;const Eht={toc:[]};function Rht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}Rht.isMDXComponent=!0;const zht={toc:[]};function Sht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}Sht.isMDXComponent=!0;const Iht={toc:[]};function Wht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Wht.isMDXComponent=!0;const Ght={toc:[]};function Pht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ght,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}Pht.isMDXComponent=!0;const Bht={toc:[]};function Fht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}Fht.isMDXComponent=!0;const Uht={toc:[]};function Vht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}Vht.isMDXComponent=!0;const qht={toc:[]};function jht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}jht.isMDXComponent=!0;const Oht={toc:[]};function $ht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}$ht.isMDXComponent=!0;const Hht={toc:[]};function Yht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}Yht.isMDXComponent=!0;const Kht={toc:[]};function Jht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kht,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}Jht.isMDXComponent=!0;const Qht={toc:[]};function tkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}tkt.isMDXComponent=!0;const nkt={toc:[]};function ekt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}ekt.isMDXComponent=!0;const okt={toc:[]};function pkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},okt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#clone"},(0,s.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."))}pkt.isMDXComponent=!0;const rkt={toc:[]};function skt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}skt.isMDXComponent=!0;const ckt={toc:[]};function akt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ckt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}akt.isMDXComponent=!0;const ikt={toc:[]};function lkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ikt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}lkt.isMDXComponent=!0;const ukt={toc:[]};function mkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ukt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}mkt.isMDXComponent=!0;const dkt={toc:[]};function hkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}hkt.isMDXComponent=!0;const kkt={toc:[]};function ykt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}ykt.isMDXComponent=!0;const fkt={toc:[]};function Mkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}Mkt.isMDXComponent=!0;const wkt={toc:[]};function Dkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Dkt.isMDXComponent=!0;const _kt={toc:[]};function Xkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_kt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}Xkt.isMDXComponent=!0;const gkt={toc:[]};function xkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}xkt.isMDXComponent=!0;const Ckt={toc:[]};function Tkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ckt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}Tkt.isMDXComponent=!0;const vkt={toc:[]};function bkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}bkt.isMDXComponent=!0;const Lkt={toc:[]};function Zkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Zkt.isMDXComponent=!0;const Nkt={toc:[]};function Akt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}Akt.isMDXComponent=!0;const Ekt={toc:[]};function Rkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ekt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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."))}Rkt.isMDXComponent=!0;const zkt={toc:[]};function Skt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Skt.isMDXComponent=!0;const Ikt={toc:[]};function Wkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ikt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.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,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Wkt.isMDXComponent=!0;const Gkt={toc:[]};function Pkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}Pkt.isMDXComponent=!0;const Bkt={toc:[]};function Fkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}Fkt.isMDXComponent=!0;const Ukt={toc:[]};function Vkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ukt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n cornerSharpness={0.7}\n/>\n")))}Vkt.isMDXComponent=!0;const qkt={toc:[]};function jkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}jkt.isMDXComponent=!0;const Okt={toc:[]};function $kt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Okt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}
10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}$kt.isMDXComponent=!0;const Hkt={toc:[]};function Ykt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}Ykt.isMDXComponent=!0;const Kkt={toc:[]};function Jkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.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")))}Jkt.isMDXComponent=!0;const Qkt={toc:[]};function tyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}tyt.isMDXComponent=!0;const nyt={toc:[]};function eyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}eyt.isMDXComponent=!0;const oyt={toc:[]};function pyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.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")))}pyt.isMDXComponent=!0;const ryt={toc:[]};function syt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ryt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}syt.isMDXComponent=!0;const cyt={toc:[]};function ayt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.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,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.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."))}ayt.isMDXComponent=!0;const iyt={toc:[]};function lyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.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,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.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")))}lyt.isMDXComponent=!0;const uyt={toc:[]};function myt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}myt.isMDXComponent=!0;const dyt={toc:[]};function hyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}hyt.isMDXComponent=!0;const kyt={toc:[]};function yyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n width={300}\n height={300}\n smoothCorners={true}\n/>\n")))}yyt.isMDXComponent=!0;const fyt={toc:[]};function Myt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}Myt.isMDXComponent=!0;const wyt={toc:[]};function Dyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}Dyt.isMDXComponent=!0;const _yt={toc:[]};function Xyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_yt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n layout([Layout])\n circle([Circle])\n rect([Rect])\n layout--\x3erect;
10\n layout--\x3ecircle;"}))}Xyt.isMDXComponent=!0;const gyt={toc:[]};function xyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}xyt.isMDXComponent=!0;const Cyt={toc:[]};function Tyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Tyt.isMDXComponent=!0;const vyt={toc:[]};function byt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}byt.isMDXComponent=!0;const Lyt={toc:[]};function Zyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}Zyt.isMDXComponent=!0;const Nyt={toc:[]};function Ayt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}Ayt.isMDXComponent=!0;const Eyt={toc:[]};function Ryt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}Ryt.isMDXComponent=!0;const zyt={toc:[]};function Syt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}Syt.isMDXComponent=!0;const Iyt={toc:[]};function Wyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Wyt.isMDXComponent=!0;const Gyt={toc:[]};function Pyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Pyt.isMDXComponent=!0;const Byt={toc:[]};function Fyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Byt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Fyt.isMDXComponent=!0;const Uyt={toc:[]};function Vyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}Vyt.isMDXComponent=!0;const qyt={toc:[]};function jyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}jyt.isMDXComponent=!0;const Oyt={toc:[]};function $yt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}$yt.isMDXComponent=!0;const Hyt={toc:[]};function Yyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}Yyt.isMDXComponent=!0;const Kyt={toc:[]};function Jyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}Jyt.isMDXComponent=!0;const Qyt={toc:[]};function tft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}tft.isMDXComponent=!0;const nft={toc:[]};function eft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}eft.isMDXComponent=!0;const oft={toc:[]};function pft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oft,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}pft.isMDXComponent=!0;const rft={toc:[]};function sft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}sft.isMDXComponent=!0;const cft={toc:[]};function aft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}aft.isMDXComponent=!0;const ift={toc:[]};function lft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ift,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.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."))}lft.isMDXComponent=!0;const uft={toc:[]};function mft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}mft.isMDXComponent=!0;const dft={toc:[]};function hft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}hft.isMDXComponent=!0;const kft={toc:[]};function yft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}yft.isMDXComponent=!0;const fft={toc:[]};function Mft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fft,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Mft.isMDXComponent=!0;const wft={toc:[]};function Dft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}Dft.isMDXComponent=!0;const _ft={toc:[]};function Xft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Xft.isMDXComponent=!0;const gft={toc:[]};function xft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}xft.isMDXComponent=!0;const Cft={toc:[]};function Tft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Tft.isMDXComponent=!0;const vft={toc:[]};function bft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}bft.isMDXComponent=!0;const Lft={toc:[]};function Zft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}Zft.isMDXComponent=!0;const Nft={toc:[]};function Aft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}Aft.isMDXComponent=!0;const Eft={toc:[]};function Rft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n <Layout>\n <Rect />\n <Circle />\n </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.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;"}))}Rft.isMDXComponent=!0;const zft={toc:[]};function Sft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}Sft.isMDXComponent=!0;const Ift={toc:[]};function Wft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ift,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}Wft.isMDXComponent=!0;const Gft={toc:[]};function Pft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}Pft.isMDXComponent=!0;const Bft={toc:[]};function Fft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}Fft.isMDXComponent=!0;const Uft={toc:[]};function Vft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}Vft.isMDXComponent=!0;const qft={toc:[]};function jft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}jft.isMDXComponent=!0;const Oft={toc:[]};function $ft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}$ft.isMDXComponent=!0;const Hft={toc:[]};function Yft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Yft.isMDXComponent=!0;const Kft={toc:[]};function Jft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}Jft.isMDXComponent=!0;const Qft={toc:[]};function tMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}tMt.isMDXComponent=!0;const nMt={toc:[]};function eMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}eMt.isMDXComponent=!0;const oMt={toc:[]};function pMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}pMt.isMDXComponent=!0;const rMt={toc:[]};function sMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"A positive ",(0,s.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."))}sMt.isMDXComponent=!0;const cMt={toc:[]};function aMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}aMt.isMDXComponent=!0;const iMt={toc:[]};function lMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}lMt.isMDXComponent=!0;const uMt={toc:[]};function mMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}mMt.isMDXComponent=!0;const dMt={toc:[]};function hMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}hMt.isMDXComponent=!0;const kMt={toc:[]};function yMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}yMt.isMDXComponent=!0;const fMt={toc:[]};function MMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}MMt.isMDXComponent=!0;const wMt={toc:[]};function DMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}DMt.isMDXComponent=!0;const _Mt={toc:[]};function XMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_Mt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}XMt.isMDXComponent=!0;const gMt={toc:[]};function xMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}xMt.isMDXComponent=!0;const CMt={toc:[]};function TMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},CMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}TMt.isMDXComponent=!0;const vMt={toc:[]};function bMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vMt,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.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."))}bMt.isMDXComponent=!0;const LMt={toc:[]};function ZMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},LMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}ZMt.isMDXComponent=!0;const NMt={toc:[]};function AMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},NMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}AMt.isMDXComponent=!0;const EMt={toc:[]};function RMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},EMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}RMt.isMDXComponent=!0;const zMt={toc:[]};function SMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}SMt.isMDXComponent=!0;const IMt={toc:[]};function WMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},IMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}WMt.isMDXComponent=!0;const GMt={toc:[]};function PMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}PMt.isMDXComponent=!0;const BMt={toc:[]};function FMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},BMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}FMt.isMDXComponent=!0;const UMt={toc:[]};function VMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},UMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}VMt.isMDXComponent=!0;const qMt={toc:[]};function jMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}jMt.isMDXComponent=!0;const OMt={toc:[]};function $Mt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},OMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}$Mt.isMDXComponent=!0;const HMt={toc:[]};function YMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},HMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}YMt.isMDXComponent=!0;const KMt={toc:[]};function JMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}JMt.isMDXComponent=!0;const QMt={toc:[]};function twt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},QMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}twt.isMDXComponent=!0;const nwt={toc:[]};function ewt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}ewt.isMDXComponent=!0;const owt={toc:[]};function pwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},owt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}pwt.isMDXComponent=!0;const rwt={toc:[]};function swt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}swt.isMDXComponent=!0;const cwt={toc:[]};function awt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}awt.isMDXComponent=!0;const iwt={toc:[]};function lwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}lwt.isMDXComponent=!0;const uwt={toc:[]};function mwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}mwt.isMDXComponent=!0;const dwt={toc:[]};function hwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}hwt.isMDXComponent=!0;const kwt={toc:[]};function ywt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}ywt.isMDXComponent=!0;const fwt={toc:[]};function Mwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}Mwt.isMDXComponent=!0;const wwt={toc:[]};function Dwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Dwt.isMDXComponent=!0;const _wt={toc:[]};function Xwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_wt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}Xwt.isMDXComponent=!0;const gwt={toc:[]};function xwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}xwt.isMDXComponent=!0;const Cwt={toc:[]};function Twt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Twt.isMDXComponent=!0;const vwt={toc:[]};function bwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}bwt.isMDXComponent=!0;const Lwt={toc:[]};function Zwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}Zwt.isMDXComponent=!0;const Nwt={toc:[]};function Awt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}Awt.isMDXComponent=!0;const Ewt={toc:[]};function Rwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ewt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}Rwt.isMDXComponent=!0;const zwt={toc:[]};function Swt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#restore"},(0,s.kt)("inlineCode",{parentName:"a"}
10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}Swt.isMDXComponent=!0;const Iwt={toc:[]};function Wwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}Wwt.isMDXComponent=!0;const Gwt={toc:[]};function Pwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}Pwt.isMDXComponent=!0;const Bwt={toc:[]};function Fwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}Fwt.isMDXComponent=!0;const Uwt={toc:[]};function Vwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Uwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}Vwt.isMDXComponent=!0;const qwt={toc:[]};function jwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#clone"},(0,s.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."))}jwt.isMDXComponent=!0;const Owt={toc:[]};function $wt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Owt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}$wt.isMDXComponent=!0;const Hwt={toc:[]};function Ywt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Ywt.isMDXComponent=!0;const Kwt={toc:[]};function Jwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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."))}Jwt.isMDXComponent=!0;const Qwt={toc:[]};function tDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}tDt.isMDXComponent=!0;const nDt={toc:[]};function eDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}eDt.isMDXComponent=!0;const oDt={toc:[]};function pDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}pDt.isMDXComponent=!0;const rDt={toc:[]};function sDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}sDt.isMDXComponent=!0;const cDt={toc:[]};function aDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}aDt.isMDXComponent=!0;const iDt={toc:[]};function lDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}lDt.isMDXComponent=!0;const uDt={toc:[]};function mDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}mDt.isMDXComponent=!0;const dDt={toc:[]};function hDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}hDt.isMDXComponent=!0;const kDt={toc:[]};function yDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}yDt.isMDXComponent=!0;const fDt={toc:[]};function MDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When set to true, the path of this circle will start and end at the center.\nThis can be used to fine-tune how sectors are rendered."))}MDt.isMDXComponent=!0;const wDt={toc:[]};function DDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the path of this circle should be closed."))}DDt.isMDXComponent=!0;const _Dt={toc:[]};function XDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_Dt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This property can be used together with ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/CircleProps#endAngle"},(0,s.kt)("inlineCode",{parentName:"a"},"endAngle"))," to turn this\ncircle into a sector (when using fill) or an arc (when using stroke)."))}XDt.isMDXComponent=!0;const gDt={toc:[]};function xDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ending angle in degrees for the circle sector."))}xDt.isMDXComponent=!0;const CDt={toc:[]};function TDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},CDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This property can be used together with ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/CircleProps#startAngle"},(0,s.kt)("inlineCode",{parentName:"a"},"startAngle"))," to turn this\ncircle into a sector (when using fill) or an arc (when using stroke)."))}TDt.isMDXComponent=!0;const vDt={toc:[]};function bDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The starting angle in degrees for the circle sector."))}bDt.isMDXComponent=!0;const LDt={toc:[]};function ZDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},LDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provide the color in one of the following formats:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"named color like ",(0,s.kt)("inlineCode",{parentName:"li"},"red"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"darkgray"),", \u2026"),(0,s.kt)("li",{parentName:"ul"},"hexadecimal string with # like ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"#141414"),"\nValue can be either RGB or RGBA: ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55aa")," (latter is partially transparent)\nThe shorthand version (e.g. ",(0,s.kt)("inlineCode",{parentName:"li"},"#abc")," for ",(0,s.kt)("inlineCode",{parentName:"li"},"#aabbcc")," is also possible.)")))}ZDt.isMDXComponent=!0;const NDt={toc:[]};function ADt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},NDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The color of the icon"))}ADt.isMDXComponent=!0;const EDt={toc:[]};function RDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},EDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}RDt.isMDXComponent=!0;const zDt={toc:[]};function SDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}SDt.isMDXComponent=!0;const IDt={toc:[]};function WDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},IDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"You can find identifiers on ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://icones.js.org"},"Ic\xf4nes"),".\nThey can look like this:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"mdi:language-typescript")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"ph:anchor-simple-bold")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"ph:activity-bold"))))}WDt.isMDXComponent=!0;const GDt={toc:[]};function PDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The identifier of the icon."))}PDt.isMDXComponent=!0;const BDt={toc:[]};function FDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},BDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}FDt.isMDXComponent=!0;
10const UDt={toc:[]};function VDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},UDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}VDt.isMDXComponent=!0;const qDt={toc:[]};function jDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}jDt.isMDXComponent=!0;const ODt={toc:[]};function $Dt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ODt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}$Dt.isMDXComponent=!0;const HDt={toc:[]};function YDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},HDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}YDt.isMDXComponent=!0;const KDt={toc:[]};function JDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}JDt.isMDXComponent=!0;const QDt={toc:[]};function t_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},QDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}t_t.isMDXComponent=!0;const n_t={toc:[]};function e_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},n_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}e_t.isMDXComponent=!0;const o_t={toc:[]};function p_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},o_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}p_t.isMDXComponent=!0;const r_t={toc:[]};function s_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},r_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}s_t.isMDXComponent=!0;const c_t={toc:[]};function a_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},c_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"For example, a value of 6 creates a hexagon."))}a_t.isMDXComponent=!0;const i_t={toc:[]};function l_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},i_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Sets the number of sides of the polygon."))}l_t.isMDXComponent=!0;const u_t={toc:[]};function m_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},u_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}m_t.isMDXComponent=!0;const d_t={toc:[]};function h_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},d_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}h_t.isMDXComponent=!0;const k_t={toc:[]};function y_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},k_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}y_t.isMDXComponent=!0;const f_t={toc:[]};function M_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},f_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}M_t.isMDXComponent=!0;const w_t={toc:[]};function D_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},w_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}D_t.isMDXComponent=!0;const __t={toc:[]};function X_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},__t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}X_t.isMDXComponent=!0;const g_t={toc:[]};function x_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},g_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}x_t.isMDXComponent=!0;const C_t={toc:[]};function T_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},C_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}T_t.isMDXComponent=!0;const v_t={toc:[]};function b_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},v_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"\nconst signal = createSignal(0);\nsignal.isInitial(); // true\n\nsignal(5);\nsignal.isInitial(); // false\n\nsignal(DEFAULT);\nsignal.isInitial(); // true\n")))}b_t.isMDXComponent=!0;const L_t={toc:[]};function Z_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},L_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the signal is currently using its initial value."))}Z_t.isMDXComponent=!0;const N_t={toc:[]};function A_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},N_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,s.kt)("p",null,"This method can be used to create copies of signals."))}A_t.isMDXComponent=!0;const E_t={toc:[]};function R_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},E_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}R_t.isMDXComponent=!0;const z_t={toc:[]};function S_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},z_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the raw value of this signal."))}S_t.isMDXComponent=!0;const I_t={toc:[]};function W_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},I_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}W_t.isMDXComponent=!0;const G_t={toc:[]};function P_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}P_t.isMDXComponent=!0;const B_t={toc:[]};function F_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},B_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}F_t.isMDXComponent=!0;const U_t={toc:[]};function V_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},U_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"signal.save();\n// same as:\nsignal(signal());\n")))}V_t.isMDXComponent=!0;const q_t={toc:[]};function j_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Compute the current value of the signal and immediately set it."))}j_t.isMDXComponent=!0;const O_t={toc:[]};function $_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},O_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies whether the property should be copied over when\ncloning the node."),(0,s.kt)("p",null,"By default, any property is cloneable."),(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}$_t.isMDXComponent=!0;const H_t={toc:[]};function Y_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},H_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n \\@clone(false)\n \\@property()\n public declare length: Signal<number, this>;\n}\n")))}Y_t.isMDXComponent=!0;const K_t={toc:[]};function J_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a cloneable property decorator."))}J_t.isMDXComponent=!0;const Q_t={toc:[]};function tXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Q_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the property should be cloneable."))}tXt.isMDXComponent=!0;const nXt={toc:[]};function eXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator turns a given property into a signal consisting of one or more\nnested signals."))}eXt.isMDXComponent=!0;const oXt={toc:[]};function pXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},oXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}pXt.isMDXComponent=!0;const rXt={toc:[]};function sXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a compound property decorator."))}sXt.isMDXComponent=!0;const cXt={toc:[]};function aXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A record mapping the property in the compound object to the\ncorresponding property on the owner node."))}aXt.isMDXComponent=!0;const iXt={toc:[]};function lXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},iXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator turns the given method into a computed value.\nSee ",(0,s.kt)("a",{parentName:"p",href:"/api/core/signals#createComputed"},(0,s.kt)("inlineCode",{parentName:"a"},"createComputed"))," for more information."))}lXt.isMDXComponent=!0;const uXt={toc:[]};function mXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},uXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a computed method decorator."))}mXt.isMDXComponent=!0;const dXt={toc:[]};function hXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies the initial value of a property."),
10(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}hXt.isMDXComponent=!0;const kXt={toc:[]};function yXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n \\@initial(1)\n \\@property()\n public declare length: Signal<number, this>;\n}\n")))}yXt.isMDXComponent=!0;const fXt={toc:[]};function MXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an initial signal value decorator."))}MXt.isMDXComponent=!0;const wXt={toc:[]};function DXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The initial value of the property."))}DXt.isMDXComponent=!0;const _Xt={toc:[]};function XXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_Xt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies whether the property should be visible in the\ninspector."),(0,s.kt)("p",null,"By default, any property is inspectable."),(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}XXt.isMDXComponent=!0;const gXt={toc:[]};function xXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n \\@inspectable(false)\n \\@property()\n public declare hiddenLength: Signal<number, this>;\n}\n")))}xXt.isMDXComponent=!0;const CXt={toc:[]};function TXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},CXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an inspectable property decorator."))}TXt.isMDXComponent=!0;const vXt={toc:[]};function bXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the property should be inspectable."))}bXt.isMDXComponent=!0;const LXt={toc:[]};function ZXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},LXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies the interpolation function of a property.\nThe interpolation function is used when tweening between different values."),(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}ZXt.isMDXComponent=!0;const NXt={toc:[]};function AXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},NXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n \\@interpolation(textLerp)\n \\@property()\n public declare text: Signal<string, this>;\n}\n")))}AXt.isMDXComponent=!0;const EXt={toc:[]};function RXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},EXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a signal interpolation function decorator."))}RXt.isMDXComponent=!0;const zXt={toc:[]};function SXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The interpolation function for the property."))}SXt.isMDXComponent=!0;const IXt={toc:[]};function WXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},IXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.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,s.kt)("p",null,"If the wrapper class has a method called ",(0,s.kt)("inlineCode",{parentName:"p"},"lerp")," it will be set as the\ndefault interpolation function for the property."),
10(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}WXt.isMDXComponent=!0;const GXt={toc:[]};function PXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n \\@wrapper(Vector2)\n \\@property()\n public declare offset: Signal<Vector2, this>;\n}\n")))}PXt.isMDXComponent=!0;const BXt={toc:[]};function FXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},BXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a signal parser decorator."))}FXt.isMDXComponent=!0;const UXt={toc:[]};function VXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},UXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The wrapper class for the property."))}VXt.isMDXComponent=!0;const qXt={toc:[]};function jXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator turns the given property into a signal."),(0,s.kt)("p",null,"The class using this decorator can implement the following methods:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"get[PropertyName]")," - A property getter."),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"get[PropertyName]")," - A property setter."),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"tween[PropertyName]")," - A tween provider.")))}jXt.isMDXComponent=!0;const OXt={toc:[]};function $Xt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},OXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n \\@property()\n public declare length: Signal<number, this>;\n}\n")))}$Xt.isMDXComponent=!0;const HXt={toc:[]};function YXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},HXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a signal decorator."))}YXt.isMDXComponent=!0;const KXt={toc:[]};function JXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is a shortcut decorator for setting both the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#parser"},(0,s.kt)("inlineCode",{parentName:"a"},"parser"))," and\n",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#interpolation"},(0,s.kt)("inlineCode",{parentName:"a"},"interpolation")),"."),(0,s.kt)("p",null,"The interpolation function will be set only if the wrapper class has a method\ncalled ",(0,s.kt)("inlineCode",{parentName:"p"},"lerp"),", which will be used as said function."),(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}JXt.isMDXComponent=!0;const QXt={toc:[]};function tgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},QXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.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")))}tgt.isMDXComponent=!0;const ngt={toc:[]};function egt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ngt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a signal wrapper decorator."))}egt.isMDXComponent=!0;const ogt={toc:[]};function pgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ogt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The wrapper class for the property."))}pgt.isMDXComponent=!0;const rgt={toc:[]};function sgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},rgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A unified abstraction for all CSS filters."))}sgt.isMDXComponent=!0;const cgt={toc:[]};function agt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},cgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the desired length is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"null")," it represents a default value for\nwhatever property it describes."))}agt.isMDXComponent=!0;const igt={toc:[]};function lgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},igt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents a desired length used internally by layout Nodes."))}lgt.isMDXComponent=!0;const ugt={toc:[]};function mgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ugt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value can be either:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'"))))}mgt.isMDXComponent=!0;const dgt={toc:[]};function hgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},dgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents a length used by most layout properties."))}hgt.isMDXComponent=!0;const kgt={toc:[]};function ygt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},kgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents a length limit used by layout properties such as ",(0,s.kt)("inlineCode",{parentName:"p"},"max-width"),"."))}ygt.isMDXComponent=!0;const fgt={toc:[]};function Mgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},fgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur"},(0,s.kt)("inlineCode",{parentName:"a"},"blur"))," filter."))}Mgt.isMDXComponent=!0;const wgt={toc:[]};function Dgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter in pixels."))}Dgt.isMDXComponent=!0;
10const _gt={toc:[]};function Xgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_gt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness"},(0,s.kt)("inlineCode",{parentName:"a"},"brightness"))," filter."))}Xgt.isMDXComponent=!0;const ggt={toc:[]};function xgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ggt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}xgt.isMDXComponent=!0;const Cgt={toc:[]};function Tgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast"},(0,s.kt)("inlineCode",{parentName:"a"},"contrast"))," filter."))}Tgt.isMDXComponent=!0;const vgt={toc:[]};function bgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}bgt.isMDXComponent=!0;const Lgt={toc:[]};function Zgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale"},(0,s.kt)("inlineCode",{parentName:"a"},"grayscale"))," filter."))}Zgt.isMDXComponent=!0;const Ngt={toc:[]};function Agt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ngt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}Agt.isMDXComponent=!0;const Egt={toc:[]};function Rgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Egt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate"},(0,s.kt)("inlineCode",{parentName:"a"},"hue"))," filter."))}Rgt.isMDXComponent=!0;const zgt={toc:[]};function Sgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter in degrees."))}Sgt.isMDXComponent=!0;const Igt={toc:[]};function Wgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Igt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert"},(0,s.kt)("inlineCode",{parentName:"a"},"invert"))," filter."))}Wgt.isMDXComponent=!0;const Ggt={toc:[]};function Pgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ggt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}Pgt.isMDXComponent=!0;const Bgt={toc:[]};function Fgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Bgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate"},(0,s.kt)("inlineCode",{parentName:"a"},"saturate"))," filter."))}Fgt.isMDXComponent=!0;const Ugt={toc:[]};function Vgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ugt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}Vgt.isMDXComponent=!0;const qgt={toc:[]};function jgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084628/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia"},(0,s.kt)("inlineCode",{parentName:"a"},"sepia"))," filter."))}jgt.isMDXComponent=!0;const Ogt={toc:[]};function $gt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ogt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}$gt.isMDXComponent=!0;const Hgt={toc:[]};function Ygt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method makes sure that the context of this scene is globally available\nduring the execution of the callback."))}Ygt.isMDXComponent=!0;const Kgt={toc:[]};function Jgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Invoke the given callback in the context of this scene."))}Jgt.isMDXComponent=!0;const Qgt={toc:[]};function txt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Qgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The callback to invoke."))}txt.isMDXComponent=!0;const nxt={toc:[]};function ext(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},nxt,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"Update the view."),(0,s.kt)("p",null,"Invoked after each step of the main generator.\nCan be used for calculating layout."),(0,s.kt)("p",null,"Can modify the state of the view."))}function oxt(t){let{id:n}=t;const e=o[n]??p.Fragment;return p.createElement(e,null)}ext.isMDXComponent=!0},9322:(t,n,e)=>{"use strict";e.d(n,{Z:()=>m});var o=e(2784),p=e(6173),r=e(8698);const s="toggle_S_IX",c="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"@defaultValue"===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"@deprecated"===n}))}),[n]),y=(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)(s,e&&c),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,"Default Value:"," ",o.createElement("code",null,h.content.map((t=>t.text)).join(""))),k&&o.createElement(o.Fragment,null,o.createElement("h4",null,"Deprecated"),o.createElement(p.Z,{id:k.contentId})),y&&o.createElement(o.Fragment,null,o.createElement("h4",null,"See also"),o.createElement(p.Z,{id:y.contentId})))}},1930:(t,n,e)=>{"use strict";e.d(n,{Z:()=>Ft});var o=e(2784),p=e(7390),r=e(6835),s=e(68),c=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,s.s2)();return o.createElement("div",{className:(0,c.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,c.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,c.Z)(i.codeBlockContainer,"language-typescript")},n)}var k=e(9817);function y(t){let{children:n,type:e,to:p,id:r,tooltip:c}=t;const a=(0,s.Ld)(e);return p?o.createElement(k.Z,(0,l.Z)({id:r,to:p,"data-tooltip":c},a),n):o.createElement("span",(0,l.Z)({id:r},a),n)}let f,M;!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=" & "}(M||(M={}));const w={[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=M.Comma}=t;
10return o.createElement("span",{className:(0,c.Z)(i.list,w[e??f.None])},o.createElement("span",{className:(0,c.Z)(i.elements,p!==M.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],s=e.externalUrl??(0,_.Gr)(r);return o.createElement(o.Fragment,null,o.createElement(y,{to:s,type:s?"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(G,{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(G,{key:n,type:t})))):o.createElement(o.Fragment,null,"[]")}function C(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(G,{type:n.elementType}),"[]")}function T(t){let{type:n}=t;return o.createElement(D,{type:f.Parentheses,separator:M.Pipe},n.types.map(((t,n)=>o.createElement(G,{key:n,type:t}))))}function v(t){let{type:n}=t;const[e,p]=(0,o.useMemo)((()=>{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 b(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(G,{type:n.targetType}))}function L(t){let{type:n}=t;const e=(0,_.in)();return o.createElement(Y,{reflection:e(n.declaration)})}function Z(t){let{type:n}=t;return o.createElement(D,{type:f.Parentheses,separator:M.Ampersand},n.types.map(((t,n)=>o.createElement(G,{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(G,{key:n,type:e}),"}",o.createElement(y,{type:"string"},p))})),o.createElement(y,{type:"string"},"`"))}function A(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"typeof "),o.createElement(G,{type:n.queryType}))}function E(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(G,{type:n.checkType}),o.createElement(y,{type:"keyword"}," extends "),o.createElement(G,{type:n.extendsType})," ? ",o.createElement(G,{type:n.trueType})," : ",o.createElement(G,{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(G,{type:n.objectType}),"[",o.createElement(G,{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(G,{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(G,{type:n.parameterType}),"]: ",o.createElement(G,{type:n.templateType}))))}function W(t){let{type:n}=t;return o.createElement(o.Fragment,null,n.name,": ",o.createElement(G,{type:n.element}))}function G(t){const n=(0,o.useMemo)((()=>{switch(t.type.type){case"rest":case"optional":case"unknown":break;case"typeOperator":return S;case"conditional":return E;case"reflection":return L;case"query":return A;case"named-tuple-member":return W;case"union":return T;case"intrinsic":return g;case"literal":return v;case"reference":return X;case"predicate":return b;case"tuple":return x;case"array":return C;case"intersection":return Z;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 P(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 B(t){let{reflection:n}=t;const e="__namedParameters"===n.name?"{...}":n.name;return o.createElement(o.Fragment,null,o.createElement(P,{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(G,{type:n.type}),n.defaultValue&&o.createElement(o.Fragment,null," = ",o.createElement(y,{type:"plain"},n.defaultValue)))}function F(t){let{reflection:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{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(G,{type:n.type})),n.default&&o.createElement(o.Fragment,null," = ",o.createElement(G,{type:n.default})))}function U(t){var n,e;let{reflection:r,flags:s}=t;const c=(0,_.in)(),a="__type"===r.name;return o.createElement(o.Fragment,null,o.createElement(P,{flags:s??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)(c(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(F,{key:t.id,reflection:c(t)})))),null!=(e=r.parameters)&&e.length?o.createElement(D,{type:f.Parentheses},r.parameters.map((t=>o.createElement(B,{key:t,reflection:c(t)})))):"()",r.type&&o.createElement(o.Fragment,null,a?" => ":": ",o.createElement(G,{type:r.type})))}function V(t){let{reflection:n}=t;return o.createElement(B,{reflection:n})}const q={[p.W.Namespace]:"namespace",[p.W.Enum]:"enum",[p.W.Class]:"class",[p.W.Interface]:"interface"};function j(t){var n,e,p;let{reflection:r}=t;const s=(0,_.in)();return o.createElement(o.Fragment,null,o.createElement(P,{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(F,{key:t.id,reflection:s(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(G,{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(G,{key:n,type:t}))))))}function O(t){let{reflection:n}=t;const e=(0,_.in)();return o.createElement(o.Fragment,null,o.createElement(P,{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(F,{key:t.id,reflection:e(t)}))))," = ",o.createElement(G,{type:n.type}))}function $(t){let{reflection:n}=t;const e=(0,_.in)();return n.signatures?o.createElement(U,{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(U,{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 j;case p.W.Constructor:return U;case p.W.Property:return V;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 F;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,c.Z)(i.line,"token-line")},n),o.createElement("br",null))}var J=e(9322),Q=e(6173);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(F,{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(B,{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)(),s=(0,o.useMemo)((()=>n.map(r)),[n]),[c,a]=(0,o.useState)(s[0]);return o.createElement(o.Fragment,null,o.createElement(h,null,s.map((t=>
10o.createElement(m,{link:null==p?void 0:p.url,key:t.id,highlight:n.length>1&&t.id===c.id,onClick:n.length>1?()=>a(t):void 0},o.createElement(K,null,o.createElement(U,{reflection:t,flags:e})))))),o.createElement(J.Z,{comment:c.comment}),o.createElement(tt,{parameters:c.typeParameter}),o.createElement(nt,{parameters:c.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",st="filters_z1iC",ct="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,c.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:ct})),o.createElement("ul",{className:"dropdown__menu"},o.createElement("li",null,o.createElement("label",{htmlFor:"private",className:(0,c.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,c.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,c.Z)("row",rt)},o.createElement("div",{className:(0,c.Z)("col",st)},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 Mt(t){let{value:n,tabValues:e}=t;return e.some((t=>t.value===n))}function wt(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),[s,c]=(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(!Mt({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]=wt({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 Mt({value:t,tabValues:r})?t:null})();(0,o.useLayoutEffect)((()=>{m&&c(m)}),[m]);return{selectedValue:s,selectValue:(0,o.useCallback)((t=>{if(!Mt({value:t,tabValues:r}))throw new Error(`Can't select invalid tab value=${t}`);c(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:s}=t;const a=[],{blockElementScrollPositionUntilNextRender:i}=(0,mt.o5)(),u=t=>{const n=t.currentTarget,e=a.indexOf(n),o=s[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,
10c.Z)("tabs",{"tabs--block":e},n)},s.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,c.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,c.Z)("tabs-container",Xt)},o.createElement(xt,(0,l.Z)({},t,n)),o.createElement(Ct,(0,l.Z)({},t,n)))}function vt(t){const n=(0,_t.Z)();return o.createElement(Tt,(0,l.Z)({key:String(n)},t))}const bt="tabItem_OMyP";function Lt(t){let{children:n,hidden:e,className:p}=t;return o.createElement("div",{role:"tabpanel",className:(0,c.Z)(bt,p),hidden:e},n)}function Zt(t){let{group:n}=t;return"Constructors"===n.title&&0===n.external.length&&1===n.nested.length?o.createElement(Ft,{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(Ft,{reflection:t})))))}function Nt(t){let{group:n,project:e}=t;const p=(0,lt.TH)(),r=(0,_.RU)(e),s=p.hash.split("-")[0].slice(1),[c]=(0,ot.mN)(),a=(0,o.useMemo)((()=>(n.categories??[n]).map((t=>function(t,n,e){const o=[],p=[],r=[];for(const s of t.children){const t=n[s];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,c))).filter((t=>!!t))),[n,r,c]);return(0,o.useEffect)((()=>{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(vt,{groupId:n.title},a.map((t=>o.createElement(Lt,{default:t.anchors.includes(s),value:t.title,label:t.title,className:"margin-top--lg"},o.createElement(Zt,{group:t}))))):o.createElement(Zt,{group:a[0]}))}function At(t){var n,e,p,r,s;let{reflection:c}=t;return o.createElement(o.Fragment,null,o.createElement(h,null,o.createElement(m,{link:null==(n=c.sources)||null==(e=n[0])?void 0:e.url},o.createElement(K,null,o.createElement(Y,{reflection:c})))),o.createElement(it,{kind:c.kind},o.createElement(J.Z,{comment:c.comment})),o.createElement(tt,{parameters:c.typeParameters}),(null==(p=c.implementedBy)?void 0:p.length)&&o.createElement(o.Fragment,null,o.createElement("h4",null,"Implemented by"),o.createElement("ul",null,c.implementedBy.map((t=>o.createElement("li",{key:t.id},o.createElement("code",null,o.createElement(X,{type:t}))))))),(null==(r=c.extendedBy)?void 0:r.length)&&o.createElement(o.Fragment,null,o.createElement("h4",null,"Extended by"),o.createElement("ul",null,c.extendedBy.map((t=>o.createElement("li",{key:t.id},o.createElement("code",null,o.createElement(X,{type:t}))))))),c.signatures&&o.createElement(o.Fragment,null,o.createElement("h2",null,"Callable"),o.createElement(et,{signatures:c.signatures})),null==(s=c.groups)?void 0:s.map((t=>o.createElement(Nt,{group:t,key:t.title,project:c.project}))))}function Et(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.
10createElement("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(V,{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 s=(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=>s[t])).filter((t=>t&&(t.flags.isPublic||!t.flags.isProtected&&!t.flags.isPrivate))).map((t=>o.createElement(Ft,{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",Gt="cardTitle_Ehd1",Pt="cardDescription_b6wr";function Bt(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,c.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,c.Z)("card padding--lg",Wt)},o.createElement("h2",{className:(0,c.Z)("text--truncate",Gt)},o.createElement("code",null,t.name)),o.createElement("div",{className:(0,c.Z)("text--truncate",Pt)},(null==(n=t.comment)?void 0:n.summaryText)??"\xa0")))}))))}function Ft(t){let{reflection:n,headless:e=!1}=t;const r=(0,o.useMemo)((()=>{switch(n.kind){case p.W.Project:return Bt;case p.W.Module:return It;case p.W.Namespace:case p.W.Enum:case p.W.Class:case p.W.Interface:return At;case p.W.Function:case p.W.Accessor:case p.W.Constructor:case p.W.Method:return Et;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: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",s="active_DOSD";var c=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)(),M=(0,o.useCallback)((()=>
10{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),M())},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",M),()=>{document.removeEventListener("mouseenter",t,!0),document.removeEventListener("focus",t,!0),document.removeEventListener("mouseleave",n,!0),document.removeEventListener("blur",n,!0),document.removeEventListener("scroll",M)}}),[e]),(0,o.useEffect)((()=>{M()})),o.createElement("div",{ref:k},n,o.createElement("div",{ref:f,className:(0,c.Z)(r,"padding--md margin-horiz--md",u&&s)},d&&o.createElement(i.Z,{comment:d,full:!1})))}},8617:(t,n,e)=>{"use strict";e.d(n,{Gr:()=>i,RU:()=>s,gs:()=>r,in:()=>c,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 s(t){const{lookup:n}=(0,o.useContext)(p);return n[t]}function c(){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:()=>c,Y0:()=>s,s2:()=>a});var o=e(2784),p=e(822);const r=o.createContext(null);function s(t){let{children:n}=t;const e=(0,p.p)(),s=(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:s},n)}function c(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 s="api-filters",c=p.Z.canUseDOM?localStorage.getItem(s):null,a=c?JSON.parse(c):{inherited:!0,private:!1},i=o.createContext([a,()=>{}]);function l(t){let{children:n}=t;const[e,p]=(0,o.useState)(a),c=(0,r.Z)();return o.createElement(i.Provider,{value:[e,t=>{c&&localStorage.setItem(s,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 s="icon_Fw4I";function c(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 15h-2v-6h2v6zm0-8h-2V7h2v2z"}))}function a(t){return p.createElement("svg",(0,o.Z)({viewBox:"0 0 24 24",fill:"currentColor"}
10,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 c}}),[t.type]);return p.createElement(p.Fragment,null,p.createElement(r.Z,(0,o.Z)({icon:p.createElement(n,{className:s})},t)))}},4141:(t,n,e)=>{"use strict";e.d(n,{Z:()=>c});var o=e(7896),p=e(2784),r=e(6277);const s="iconEdit_N_05";function c(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)(s,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"}))}},7733:(t,n,e)=>{"use strict";e.d(n,{Z:()=>c});var o=e(7896),p=e(2784),r=e(7287);const s="root_ZAv1";function c(t){const n=p.Children.toArray(t.children),e=n.find((t=>{var n;return p.isValidElement(t)&&"summary"===(null==(n=t.props)?void 0:n.mdxType)})),c=p.createElement(p.Fragment,null,n.filter((t=>t!==e)));return p.createElement(p.Fragment,null,p.createElement(r.P,(0,o.Z)({},t,{summary:e,className:s}),c))}},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.