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"use strict";(self.webpackChunk_motion_canvas_docs=self.webpackChunk_motion_canvas_docs||[]).push([[1276],{876:(t,n,e)=>{e.d(n,{Zo:()=>l,kt:()=>h});var o=e(2784);function p(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function r(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.push.apply(e,o)}return e}function s(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{};n%2?r(Object(e),!0).forEach((function(n){p(t,n,e[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):r(Object(e)).forEac
10h((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))}))}return t}function c(t,n){if(null==t)return{};var e,o,p=function(t,n){if(null==t)return{};var e,o,p={},r=Object.keys(t);for(o=0;o<r.length;o++)e=r[o],n.indexOf(e)>=0||(p[e]=t[e]);return p}(t,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(o=0;o<r.length;o++)e=r[o],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(p[e]=t[e])}return p}var a=o.createContext({}),i=function(t){var n=o.useContext(a),e=n;return t&&(e="function"==typeof t?t(n):s(s({},n),t)),e},l=function(t){var n=i(t.components);return o.createElement(a.Provider,{value:n},t.children)},u="mdxType",m={inlineCode:"code",wrapper:function(t){var n=t.children;return o.createElement(o.Fragment,{},n)}},d=o.forwardRef((function(t,n){var e=t.components,p=t.mdxType,r=t.originalType,a=t.parentName,l=c(t,["components","mdxType","originalType","parentName"]),u=i(e),d=p,h=u["".concat(a,".").concat(d)]||u[d]||m[d]||r;return e?o.createElement(h,s(s({ref:n},l),{},{components:e})):o.createElement(h,s({ref:n},l))}));function h(t,n){var e=arguments,p=n&&n.mdxType;if("string"==typeof t||p){var r=e.length,s=new Array(r);s[0]=d;var c={};for(var a in n)hasOwnProperty.call(n,a)&&(c[a]=n[a]);c.originalType=t,c[u]="string"==typeof t?t:p,s[1]=c;for(var i=2;i<r;i++)s[i]=e[i];return o.createElement.apply(null,s)}return o.createElement.apply(null,e)}d.displayName="MDXCreateElement"},3851:(t,n,e)=>{e.d(n,{Z:()=>u});var o=e(7896),p=e(2784),r=e(6277),s=e(1077),c=e(7683),a=e(9817);const i="anchorWithStickyNavbar_fF9Z",l="anchorWithHideOnScrollNavbar_Yh18";function u(t){let{as:n,id:e,...u}=t;const{navbar:{hideOnScroll:m}}=(0,c.L)();if("h1"===n||!e)return p.createElement(n,(0,o.Z)({},u,{id:void 0}));const d=(0,s.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:e});return p.createElement(n,(0,o.Z)({},u,{className:(0,r.Z)("anchor",m?l:i,u.className),id:e}),u.children,p.createElement(a.Z,{className:"hash-link",to:`#${e}`,"aria-label":d,title:d},"\u200b"))}},2072:(t,n,e)=>{e.d(n,{Z:()=>s});var o=e(2784),p=e(8617),r=e(1930);function s(t){let{url:n}=t;const e=(0,p.rG)()(n);return o.createElement(r.Z,{reflection:e,headless:!0})}},6173:(t,n,e)=>{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:()=>Pf,content_0_1002:()=>Bf,content_0_1004:()=>Uf,content_0_1006:()=>jf,content_0_1008:()=>Of,content_0_1010:()=>$f,content_0_1012:()=>Jf,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:()=>Rn,content_0_134:()=>Sn,content_0_136:()=>In,content_0_138:()=>Pn,content_0_14:()=>X,content_0_140:()=>Bn,content_0_142:()=>Un,content_0_144:()=>jn,content_0_146:()=>On,content_0_148:()=>$n,content_0_150:()=>Jn,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:()=>Re,content_0_188:()=>Se,content_0_190:()=>Ie,content_0_192:()=>Pe,content_0_194:()=>Be,content_0_196:()=>Ue,content_0_198:()=>je,content_0_2:()=>l,content_0_20:()=>b,content_0_200:()=>Oe,content_0_202:()=>$e,content_0_204:()=>Je,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:()=>Eo,content_0_242:()=>zo,content_0_244:()=>Wo,content_0_246:()=>Go,content_0_248:()=>
10Fo,content_0_250:()=>Vo,content_0_252:()=>qo,content_0_254:()=>Ho,content_0_256:()=>Yo,content_0_258:()=>Ko,content_0_26:()=>E,content_0_260:()=>tp,content_0_262:()=>ep,content_0_264:()=>pp,content_0_266:()=>sp,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:()=>z,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:()=>Ep,content_0_296:()=>zp,content_0_298:()=>Wp,content_0_30:()=>W,content_0_300:()=>Gp,content_0_302:()=>Fp,content_0_304:()=>Vp,content_0_306:()=>qp,content_0_308:()=>Hp,content_0_310:()=>Yp,content_0_312:()=>Kp,content_0_314:()=>tr,content_0_316:()=>er,content_0_318:()=>pr,content_0_32:()=>G,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:()=>Er,content_0_350:()=>zr,content_0_352:()=>Wr,content_0_354:()=>Gr,content_0_356:()=>Fr,content_0_358:()=>Vr,content_0_36:()=>V,content_0_360:()=>qr,content_0_362:()=>Hr,content_0_364:()=>Yr,content_0_366:()=>Kr,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:()=>q,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:()=>H,content_0_400:()=>As,content_0_402:()=>Es,content_0_404:()=>zs,content_0_406:()=>Ws,content_0_408:()=>Gs,content_0_410:()=>Fs,content_0_412:()=>Vs,content_0_414:()=>qs,content_0_416:()=>Hs,content_0_418:()=>Ys,content_0_42:()=>Y,content_0_420:()=>Ks,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:()=>K,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:()=>Ec,content_0_458:()=>zc,content_0_46:()=>tt,content_0_460:()=>Wc,content_0_462:()=>Gc,content_0_464:()=>Fc,content_0_466:()=>Vc,content_0_468:()=>qc,content_0_470:()=>Hc,content_0_472:()=>Yc,content_0_474:()=>Kc,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:()=>Ea,content_0_512:()=>za,content_0_514:()=>Wa,content_0_516:()=>Ga,content_0_518:()=>Fa,content_0_52:()=>st,content_0_520:()=>Va,content_0_522:()=>qa,content_0_524:()=>Ha,content_0_526:()=>Ya,content_0_528:()=>Ka,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:()=>Ei,content_0_566:()=>zi,content_0_568:()=>Wi,content_0_570:()=>Gi,content_0_572:()=>Fi,content_0_574:()=>Vi,content_0_576:()=>qi,content_0_578:()=>Hi,content_0_58:()=>mt,content_0_580:()=>Yi,content_0_582:()=>Ki,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:()=>El,content_0_62:()=>yt,content_0_620:()=>zl,content_0_622:()=>Wl,content_0_624:()=>Gl,content_0_626:()=>Fl,content_0_628:()=>Vl,content_0_630:()=>ql,content_0_632:()=>Hl,content_0_634:()=>Yl,content_0_636:()=>Kl,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:()=>Eu,content_0_674:()=>zu,content_0_676:()=>Wu,content_0_678:()=>Gu,content_0_68:()=>Xt,content_0_680:()=>Fu,content_0_682:()=>Vu,content_0_684:()=>qu,content_0_686:()=>Hu,content_0_688:()=>Yu,content_0_690:()=>Ku,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:()=>Em,content_0_728:()=>zm,content_0_730:()=>Wm,content_0_732:()=>Gm,content_0_734:()=>Fm,content_0_736:()=>Vm,content_0_738:()=>qm,content_0_74:()=>bt,content_0_740:()=>Hm,content_0_742:()=>Ym,content_0_744:()=>Km,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:()=>Ed,content_0_782:()=>zd,content_0_784:()=>Wd,content_0_786:()=>Gd,content_0_788:()=>Fd,content_0_790:()=>Vd,content_0_792:()=>qd,content_0_794:()=>Hd,content_0_796:()=>Yd,content_0_798:()=>Kd,content_0_8:()=>y,content_0_80:()=>Et,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:()=>zt,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:()=>Eh,content_0_836:()=>zh,content_0_838:()=>Wh,content_0_84:()=>Wt,content_0_840:()=>Gh,content_0_842:()=>Fh,content_0_844:()=>Vh,content_0_846:()=>qh,content_0_848:()=>Hh,content_0_850:()=>Yh,content_0_852:()=>Kh,content_0_854:()=>tk,content_0_856:()=>ek,content_0_858:()=>pk,content_0_86:()=>Gt,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:()=>Ek,content_0_890:()=>zk,content_0_892:()=>Wk,content_0_894:()=>Gk,content_0_896:()=>Fk,content_0_898:()=>Vk,content_0_90:()=>Vt,content_0_900:()=>qk,content_0_902:()=>Hk,content_0_904:()=>Yk,content_0_906:()=>Kk,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:()=>qt,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:()=>Ht,content_0_940:()=>Ay,content_0_942:()=>Ey,content_0_944:()=>zy,content_0_946:()=>Wy,content_0_948:()=>Gy,content_0_950:()=>Fy,content_0_952:()=>Vy,content_0_954:()=>
10qy,content_0_956:()=>Hy,content_0_958:()=>Yy,content_0_96:()=>Yt,content_0_960:()=>Ky,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:()=>Kt,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:()=>Rf,content_0_996:()=>Sf,content_0_998:()=>If,content_2220_0:()=>uM,content_2220_10:()=>_M,content_2220_100:()=>oD,content_2220_1000:()=>Pz,content_2220_1002:()=>Bz,content_2220_1004:()=>Uz,content_2220_1006:()=>jz,content_2220_1008:()=>Oz,content_2220_1010:()=>$z,content_2220_1012:()=>Jz,content_2220_1014:()=>Qz,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:()=>cD,content_2220_1040:()=>CI,content_2220_1042:()=>vI,content_2220_1044:()=>LI,content_2220_1046:()=>NI,content_2220_1048:()=>RI,content_2220_1050:()=>SI,content_2220_1052:()=>II,content_2220_1054:()=>PI,content_2220_1056:()=>BI,content_2220_1058:()=>UI,content_2220_106:()=>iD,content_2220_1060:()=>jI,content_2220_1062:()=>OI,content_2220_1064:()=>$I,content_2220_1066:()=>JI,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:()=>RW,content_2220_1104:()=>SW,content_2220_1106:()=>IW,content_2220_1108:()=>PW,content_2220_1110:()=>BW,content_2220_1112:()=>UW,content_2220_1114:()=>jW,content_2220_1116:()=>OW,content_2220_1118:()=>$W,content_2220_112:()=>kD,content_2220_1120:()=>JW,content_2220_1122:()=>QW,content_2220_1124:()=>nP,content_2220_1126:()=>oP,content_2220_1128:()=>rP,content_2220_1130:()=>cP,content_2220_1132:()=>iP,content_2220_1134:()=>uP,content_2220_1136:()=>dP,content_2220_1138:()=>kP,content_2220_114:()=>fD,content_2220_1140:()=>fP,content_2220_1142:()=>wP,content_2220_1144:()=>_P,content_2220_1146:()=>gP,content_2220_1148:()=>CP,content_2220_1150:()=>vP,content_2220_1152:()=>LP,content_2220_1154:()=>NP,content_2220_1156:()=>RP,content_2220_1158:()=>SP,content_2220_116:()=>wD,content_2220_1160:()=>IP,content_2220_1162:()=>PP,content_2220_1164:()=>BP,content_2220_1166:()=>UP,content_2220_1168:()=>jP,content_2220_1170:()=>OP,content_2220_1172:()=>$P,content_2220_1174:()=>JP,content_2220_1176:()=>QP,content_2220_1178:()=>nG,content_2220_118:()=>_D,content_2220_1180:()=>oG,content_2220_1182:()=>rG,content_2220_1184:()=>cG,content_2220_1186:()=>iG,content_2220_1188:()=>uG,content_2220_1190:()=>dG,content_2220_1192:()=>kG,content_2220_1194:()=>fG,content_2220_1196:()=>wG,content_2220_1198:()=>_G,content_2220_12:()=>gM,content_2220_120:()=>gD,content_2220_1200:()=>gG,content_2220_1202:()=>CG,content_2220_1204:()=>vG,content_2220_1206:()=>LG,content_2220_1208:()=>NG,content_2220_1210:()=>RG,content_2220_1212:()=>SG,content_2220_1214:()=>IG,content_2220_1216:()=>PG,content_2220_1218:()=>BG,content_2220_122:()=>CD,content_2220_1220:()=>UG,content_2220_1222:()=>jG,content_2220_1224:()=>OG,content_2220_1226:()=>$G,content_2220_1228:()=>JG,content_2220_1230:()=>QG,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:()=>RB,content_2220_1266:()=>SB,content_2220_1268:()=>IB,content_2220_1270:()=>PB,content_2220_1272:()=>BB,content_2220_1274:()=>UB,content_2220_1276:()=>jB,content_2220_1278:()=>OB,content_2220_128:()=>ND,content_2220_1280:()=>
10$B,content_2220_1282:()=>JB,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:()=>RD,content_2220_1300:()=>kF,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:()=>RF,content_2220_132:()=>SD,content_2220_1320:()=>SF,content_2220_1322:()=>IF,content_2220_1324:()=>PF,content_2220_1326:()=>BF,content_2220_1328:()=>UF,content_2220_1330:()=>jF,content_2220_1332:()=>OF,content_2220_1334:()=>$F,content_2220_1336:()=>JF,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:()=>PD,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:()=>RU,content_2220_1374:()=>SU,content_2220_1376:()=>IU,content_2220_1378:()=>PU,content_2220_138:()=>BD,content_2220_1380:()=>BU,content_2220_1382:()=>UU,content_2220_1384:()=>jU,content_2220_1386:()=>OU,content_2220_1388:()=>$U,content_2220_1390:()=>JU,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:()=>jD,content_2220_1420:()=>vV,content_2220_1422:()=>LV,content_2220_1424:()=>NV,content_2220_1426:()=>RV,content_2220_1428:()=>SV,content_2220_1430:()=>IV,content_2220_1432:()=>PV,content_2220_1434:()=>BV,content_2220_1436:()=>UV,content_2220_1438:()=>jV,content_2220_144:()=>OD,content_2220_1440:()=>OV,content_2220_1442:()=>$V,content_2220_1444:()=>JV,content_2220_1446:()=>QV,content_2220_1448:()=>nj,content_2220_1450:()=>oj,content_2220_1452:()=>rj,content_2220_1454:()=>cj,content_2220_1456:()=>ij,content_2220_1458:()=>uj,content_2220_146:()=>$D,content_2220_1460:()=>dj,content_2220_1462:()=>kj,content_2220_1464:()=>fj,content_2220_1466:()=>wj,content_2220_1468:()=>_j,content_2220_1470:()=>gj,content_2220_1472:()=>Cj,content_2220_1474:()=>vj,content_2220_1476:()=>Lj,content_2220_1478:()=>Nj,content_2220_148:()=>JD,content_2220_1480:()=>Rj,content_2220_1482:()=>Sj,content_2220_1484:()=>Ij,content_2220_1486:()=>Pj,content_2220_1488:()=>Bj,content_2220_1490:()=>Uj,content_2220_1492:()=>jj,content_2220_1494:()=>Oj,content_2220_1496:()=>$j,content_2220_1498:()=>Jj,content_2220_150:()=>QD,content_2220_1500:()=>Qj,content_2220_1502:()=>nq,content_2220_1504:()=>oq,content_2220_1506:()=>rq,content_2220_1508:()=>cq,content_2220_1510:()=>iq,content_2220_1512:()=>uq,content_2220_1514:()=>dq,content_2220_1516:()=>kq,content_2220_1518:()=>fq,content_2220_152:()=>n_,content_2220_1520:()=>wq,content_2220_1522:()=>_q,content_2220_1524:()=>gq,content_2220_1526:()=>Cq,content_2220_1528:()=>vq,content_2220_1530:()=>Lq,content_2220_1532:()=>Nq,content_2220_1534:()=>Rq,content_2220_1536:()=>Sq,content_2220_1538:()=>Iq,content_2220_154:()=>
10o_,content_2220_1540:()=>Pq,content_2220_1542:()=>Bq,content_2220_1544:()=>Uq,content_2220_1546:()=>jq,content_2220_1548:()=>Oq,content_2220_1550:()=>$q,content_2220_1552:()=>Jq,content_2220_1554:()=>Qq,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:()=>RO,content_2220_1590:()=>SO,content_2220_1592:()=>IO,content_2220_1594:()=>PO,content_2220_1596:()=>BO,content_2220_1598:()=>UO,content_2220_16:()=>vM,content_2220_160:()=>i_,content_2220_1600:()=>jO,content_2220_1602:()=>OO,content_2220_1604:()=>$O,content_2220_1606:()=>JO,content_2220_1608:()=>QO,content_2220_1610:()=>nH,content_2220_1612:()=>oH,content_2220_1614:()=>rH,content_2220_1616:()=>cH,content_2220_1618:()=>iH,content_2220_162:()=>u_,content_2220_1620:()=>uH,content_2220_1622:()=>dH,content_2220_1624:()=>kH,content_2220_1626:()=>fH,content_2220_1628:()=>wH,content_2220_1630:()=>_H,content_2220_1632:()=>gH,content_2220_1634:()=>CH,content_2220_1636:()=>vH,content_2220_1638:()=>LH,content_2220_164:()=>d_,content_2220_1640:()=>NH,content_2220_1642:()=>RH,content_2220_1644:()=>SH,content_2220_1646:()=>IH,content_2220_1648:()=>PH,content_2220_1650:()=>BH,content_2220_1652:()=>UH,content_2220_1654:()=>jH,content_2220_1656:()=>OH,content_2220_1658:()=>$H,content_2220_166:()=>k_,content_2220_1660:()=>JH,content_2220_1662:()=>QH,content_2220_1664:()=>n$,content_2220_1666:()=>o$,content_2220_1668:()=>r$,content_2220_1670:()=>c$,content_2220_1672:()=>i$,content_2220_1674:()=>u$,content_2220_1676:()=>d$,content_2220_1678:()=>k$,content_2220_168:()=>f_,content_2220_1680:()=>f$,content_2220_1682:()=>w$,content_2220_1684:()=>_$,content_2220_1686:()=>g$,content_2220_1688:()=>C$,content_2220_1690:()=>v$,content_2220_1692:()=>L$,content_2220_1694:()=>N$,content_2220_1696:()=>R$,content_2220_1698:()=>S$,content_2220_170:()=>w_,content_2220_1700:()=>I$,content_2220_1702:()=>P$,content_2220_1704:()=>B$,content_2220_1706:()=>U$,content_2220_1708:()=>j$,content_2220_1710:()=>O$,content_2220_1712:()=>$$,content_2220_1714:()=>J$,content_2220_1716:()=>Q$,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:()=>RY,content_2220_1752:()=>SY,content_2220_1754:()=>IY,content_2220_1756:()=>PY,content_2220_1758:()=>BY,content_2220_176:()=>C_,content_2220_1760:()=>UY,content_2220_1762:()=>jY,content_2220_1764:()=>OY,content_2220_1766:()=>$Y,content_2220_1768:()=>JY,content_2220_1770:()=>QY,content_2220_1772:()=>nJ,content_2220_1774:()=>oJ,content_2220_1776:()=>rJ,content_2220_1778:()=>cJ,content_2220_178:()=>v_,content_2220_1780:()=>iJ,content_2220_1782:()=>uJ,content_2220_1784:()=>dJ,content_2220_1786:()=>kJ,content_2220_1788:()=>fJ,content_2220_1790:()=>wJ,content_2220_1792:()=>_J,content_2220_1794:()=>gJ,content_2220_1796:()=>CJ,content_2220_1798:()=>vJ,content_2220_18:()=>LM,content_2220_180:()=>L_,content_2220_1800:()=>LJ,content_2220_1802:()=>NJ,content_2220_1804:()=>RJ,content_2220_1806:()=>SJ,content_2220_1808:()=>IJ,content_2220_1810:()=>PJ,content_2220_1812:()=>BJ,content_2220_1814:()=>UJ,content_2220_1816:()=>jJ,content_2220_1818:()=>OJ,content_2220_182:()=>N_,content_2220_1820:()=>$J,content_2220_1822:()=>JJ,content_2220_1824:()=>QJ,content_2220_1826:()=>nK,content_2220_1828:()=>oK,content_2220_1830:()=>rK,content_2220_1832:()=>cK,content_2220_1834:()=>iK,content_2220_1836:()=>uK,content_2220_1838:()=>dK,content_2220_184:()=>R_,content_2220_1840:()=>kK,content_2220_1842:()=>fK,content_2220_1844:()=>wK,content_2220_1846:()=>_K,content_2220_1848:()=>gK,content_2220_1850:()=>CK,content_2220_1852:()=>vK,content_2220_1854:()=>LK,content_2220_1856:()=>NK,content_2220_1858:()=>RK,content_2220_186:()=>S_,content_2220_1860:()=>SK,content_2220_1862:()=>IK,content_2220_1864:()=>PK,content_2220_1866:()=>BK,content_2220_1868:()=>UK,content_2220_1870:()=>jK,content_2220_1872:()=>OK,content_2220_1874:()=>$K,content_2220_1876:()=>JK,content_2220_1878:()=>QK,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:()=>P_,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:()=>RQ,content_2220_1914:()=>SQ,content_2220_1916:()=>IQ,content_2220_1918:()=>PQ,content_2220_192:()=>B_,content_2220_1920:()=>BQ,content_2220_1922:()=>UQ,content_2220_1924:()=>jQ,content_2220_1926:()=>OQ,content_2220_1928:()=>$Q,content_2220_1930:()=>JQ,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:()=>j_,content_2220_1960:()=>v0,content_2220_1962:()=>L0,content_2220_1964:()=>N0,content_2220_1966:()=>R0,content_2220_1968:()=>S0,content_2220_1970:()=>I0,content_2220_1972:()=>P0,content_2220_1974:()=>B0,content_2220_1976:()=>U0,content_2220_1978:()=>j0,content_2220_198:()=>O_,content_2220_1980:()=>O0,content_2220_1982:()=>$0,content_2220_1984:()=>J0,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:()=>$_,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:()=>J_,content_2220_2020:()=>R2,content_2220_2022:()=>S2,content_2220_2024:()=>I2,content_2220_2026:()=>P2,content_2220_2028:()=>B2,content_2220_2030:()=>U2,content_2220_2032:()=>j2,content_2220_2034:()=>O2,content_2220_2036:()=>$2,content_2220_2038:()=>J2,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:()=>R1,content_2220_2076:()=>S1,content_2220_2078:()=>I1,content_2220_208:()=>oX,content_2220_2080:()=>P1,content_2220_2082:()=>B1,content_2220_2084:()=>U1,content_2220_2086:()=>j1,content_2220_2088:()=>O1,content_2220_2090:()=>$1,content_2220_2092:()=>J1,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:()=>R3,content_2220_2130:()=>S3,content_2220_2132:()=>I3,content_2220_2134:()=>P3,content_2220_2136:()=>B3,content_2220_2138:()=>U3,content_2220_214:()=>iX,content_2220_2140:()=>j3,content_2220_2142:()=>O3,content_2220_2144:()=>$3,content_2220_2146:()=>J3,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:()=>R4,content_2220_2184:()=>S4,content_2220_2186:()=>I4,content_2220_2188:()=>P4,content_2220_2190:()=>B4,content_2220_2192:()=>U4,content_2220_2194:()=>j4,content_2220_2196:()=>O4,content_2220_2198:()=>$4,content_2220_22:()=>RM,content_2220_220:()=>kX,content_2220_2200:()=>J4,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:()=>R6,content_2220_2238:()=>S6,content_2220_224:()=>wX,content_2220_2240:()=>I6,content_2220_2242:()=>P6,content_2220_2244:()=>B6,content_2220_2246:()=>U6,content_2220_2248:()=>j6,content_2220_2250:()=>O6,content_2220_2252:()=>$6,content_2220_2254:()=>J6,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:()=>R8,content_2220_2292:()=>S8,content_2220_2294:()=>I8,content_2220_2296:()=>P8,content_2220_2298:()=>B8,content_2220_230:()=>CX,content_2220_2300:()=>U8,content_2220_2302:()=>j8,content_2220_2304:()=>O8,content_2220_2306:()=>$8,content_2220_2308:()=>J8,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:()=>R5,content_2220_2346:()=>S5,content_2220_2348:()=>I5,content_2220_2350:()=>P5,content_2220_2352:()=>B5,content_2220_2354:()=>U5,content_2220_2356:()=>j5,content_2220_2358:()=>O5,content_2220_236:()=>NX,content_2220_2360:()=>$5,content_2220_2362:()=>J5,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:()=>RX,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:()=>R7,content_2220_24:()=>SM,content_2220_240:()=>SX,content_2220_2400:()=>S7,content_2220_2402:()=>I7,content_2220_2404:()=>P7,content_2220_2406:()=>B7,content_2220_2408:()=>U7,content_2220_2410:()=>j7,content_2220_2412:()=>O7,content_2220_2414:()=>$7,content_2220_2416:()=>J7,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:()=>PX,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:()=>R9,content_2220_2454:()=>S9,content_2220_2456:()=>I9,content_2220_2458:()=>P9,content_2220_246:()=>BX,content_2220_2460:()=>B9,content_2220_2462:()=>U9,content_2220_2464:()=>j9,content_2220_2466:()=>O9,content_2220_2468:()=>$9,content_2220_2470:()=>J9,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:()=>jX,content_2220_2500:()=>vtt,content_2220_2502:()=>Ltt,content_2220_2504:()=>Ntt,content_2220_2506:()=>
10Rtt,content_2220_2508:()=>Stt,content_2220_2510:()=>Itt,content_2220_2512:()=>Ptt,content_2220_2514:()=>Btt,content_2220_2516:()=>Utt,content_2220_2518:()=>jtt,content_2220_252:()=>OX,content_2220_2520:()=>Ott,content_2220_2522:()=>$tt,content_2220_2524:()=>Jtt,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:()=>$X,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:()=>JX,content_2220_2560:()=>Rnt,content_2220_2562:()=>Snt,content_2220_2564:()=>Int,content_2220_2566:()=>Pnt,content_2220_2568:()=>Bnt,content_2220_2570:()=>Unt,content_2220_2572:()=>jnt,content_2220_2574:()=>Ont,content_2220_2576:()=>$nt,content_2220_2578:()=>Jnt,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:()=>Eet,content_2220_2616:()=>zet,content_2220_2618:()=>Wet,content_2220_262:()=>og,content_2220_2620:()=>Get,content_2220_2622:()=>Fet,content_2220_2624:()=>Vet,content_2220_2626:()=>qet,content_2220_2628:()=>Het,content_2220_2630:()=>Yet,content_2220_2632:()=>Ket,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:()=>Eot,content_2220_2670:()=>zot,content_2220_2672:()=>Wot,content_2220_2674:()=>Got,content_2220_2676:()=>Fot,content_2220_2678:()=>Vot,content_2220_268:()=>ig,content_2220_2680:()=>qot,content_2220_2682:()=>Hot,content_2220_2684:()=>Yot,content_2220_2686:()=>Kot,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:()=>Ept,content_2220_2724:()=>zpt,content_2220_2726:()=>Wpt,content_2220_2728:()=>Gpt,content_2220_2730:()=>Fpt,content_2220_2732:()=>Vpt,content_2220_2734:()=>qpt,content_2220_2736:()=>Hpt,content_2220_2738:()=>Ypt,content_2220_274:()=>kg,content_2220_2740:()=>Kpt,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:()=>Ert,content_2220_2778:()=>zrt,content_2220_278:()=>wg,content_2220_2780:()=>Wrt,content_2220_2782:()=>Grt,content_2220_2784:()=>Frt,content_2220_2786:()=>Vrt,content_2220_2788:()=>qrt,content_2220_2790:()=>Hrt,content_2220_2792:()=>Yrt,content_2220_2794:()=>Krt,content_2220_2796:()=>tst,content_2220_2798:()=>est,content_2220_28:()=>PM,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:()=>Est,content_2220_2832:()=>zst,content_2220_2834:()=>Wst,content_2220_2836:()=>Gst,content_2220_2838:()=>Fst,content_2220_284:()=>Cg,content_2220_2840:()=>Vst,content_2220_2842:()=>qst,content_2220_2844:()=>Hst,content_2220_2846:()=>Yst,content_2220_2848:()=>Kst,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:()=>Ect,content_2220_2886:()=>zct,content_2220_2888:()=>Wct,content_2220_2890:()=>Gct,content_2220_2892:()=>Fct,content_2220_2894:()=>Vct,content_2220_2896:()=>qct,content_2220_2898:()=>Hct,content_2220_290:()=>Ng,content_2220_2900:()=>Yct,content_2220_2902:()=>Kct,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:()=>Rg,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:()=>Eat,content_2220_294:()=>Sg,content_2220_2940:()=>zat,content_2220_2942:()=>Wat,content_2220_2944:()=>Gat,content_2220_2946:()=>Fat,content_2220_2948:()=>Vat,content_2220_2950:()=>qat,content_2220_2952:()=>Hat,content_2220_2954:()=>Yat,content_2220_2956:()=>Kat,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:()=>Pg,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:()=>Eit,content_2220_2994:()=>zit,content_2220_2996:()=>Wit,content_2220_2998:()=>Git,content_2220_30:()=>BM,content_2220_300:()=>Bg,content_2220_3000:()=>Fit,content_2220_3002:()=>Vit,content_2220_3004:()=>qit,content_2220_3006:()=>Hit,content_2220_3008:()=>Yit,content_2220_3010:()=>Kit,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:()=>jg,content_2220_3040:()=>blt,content_2220_3042:()=>Zlt,content_2220_3044:()=>Alt,content_2220_3046:()=>Elt,content_2220_3048:()=>zlt,content_2220_3050:()=>Wlt,content_2220_3052:()=>Glt,content_2220_3054:()=>Flt,content_2220_3056:()=>Vlt,content_2220_3058:()=>qlt,content_2220_306:()=>Og,content_2220_3060:()=>Hlt,content_2220_3062:()=>Ylt,content_2220_3064:()=>Klt,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:()=>$g,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:()=>Jg,content_2220_3100:()=>Eut,content_2220_3102:()=>zut,content_2220_3104:()=>Wut,content_2220_3106:()=>Gut,content_2220_3108:()=>Fut,content_2220_3110:()=>Vut,content_2220_3112:()=>qut,content_2220_3114:()=>Hut,content_2220_3116:()=>Yut,content_2220_3118:()=>Kut,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:()=>Emt,content_2220_3156:()=>zmt,content_2220_3158:()=>Wmt,content_2220_316:()=>ox,content_2220_3160:()=>Gmt,content_2220_3162:()=>Fmt,content_2220_3164:()=>Vmt,content_2220_3166:()=>qmt,content_2220_3168:()=>Hmt,content_2220_3170:()=>Ymt,content_2220_3172:()=>Kmt,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:()=>Edt,content_2220_3210:()=>zdt,content_2220_3212:()=>Wdt,content_2220_3214:()=>Gdt,content_2220_3216:()=>Fdt,content_2220_3218:()=>Vdt,content_2220_322:()=>ix,content_2220_3220:()=>qdt,content_2220_3222:()=>Hdt,content_2220_3224:()=>Ydt,content_2220_3226:()=>Kdt,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:()=>Eht,content_2220_3264:()=>zht,content_2220_3266:()=>Wht,content_2220_3268:()=>Ght,content_2220_3270:()=>Fht,content_2220_3272:()=>Vht,content_2220_3274:()=>qht,content_2220_3276:()=>Hht,content_2220_3278:()=>Yht,content_2220_328:()=>kx,content_2220_3280:()=>Kht,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:()=>Ekt,content_2220_3318:()=>zkt,content_2220_332:()=>wx,content_2220_3320:()=>Wkt,content_2220_3322:()=>Gkt,content_2220_3324:()=>Fkt,content_2220_3326:()=>Vkt,content_2220_3328:()=>qkt,content_2220_3330:()=>Hkt,content_2220_3332:()=>Ykt,content_2220_3334:()=>Kkt,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:()=>Eyt,content_2220_3372:()=>zyt,content_2220_3374:()=>Wyt,content_2220_3376:()=>Gyt,content_2220_3378:()=>Fyt,content_2220_338:()=>Cx,content_2220_3380:()=>Vyt,content_2220_3382:()=>qyt,content_2220_3384:()=>Hyt,content_2220_3386:()=>Yyt,content_2220_3388:()=>Kyt,content_2220_3390:()=>tft,content_2220_3392:()=>eft,content_2220_3394:()=>pft,content_2220_3396:()=>sft,content_2220_3398:()=>aft,content_2220_34:()=>jM,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:()=>Eft,content_2220_3426:()=>zft,content_2220_3428:()=>Wft,content_2220_3430:()=>Gft,content_2220_3432:()=>Fft,content_2220_3434:()=>Vft,content_2220_3436:()=>qft,content_2220_3438:()=>Hft,content_2220_344:()=>Nx,content_2220_3440:()=>Yft,content_2220_3442:()=>Kft,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:()=>Rx,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:()=>EMt,content_2220_348:()=>Sx,content_2220_3480:()=>zMt,content_2220_3482:()=>WMt,content_2220_3484:()=>GMt,content_2220_3486:()=>FMt,content_2220_3488:()=>VMt,content_2220_3490:()=>qMt,content_2220_3492:()=>HMt,content_2220_3494:()=>YMt,content_2220_3496:()=>KMt,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:()=>Px,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:()=>Ewt,content_2220_3534:()=>zwt,content_2220_3536:()=>Wwt,content_2220_3538:()=>Gwt,content_2220_354:()=>Bx,content_2220_3540:()=>Fwt,content_2220_3542:()=>Vwt,content_2220_3544:()=>qwt,content_2220_3546:()=>Hwt,content_2220_3548:()=>Ywt,content_2220_3550:()=>Kwt,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:()=>jx,content_2220_3580:()=>bDt,content_2220_3582:()=>ZDt,content_2220_3584:()=>ADt,content_2220_3586:()=>EDt,content_2220_3588:()=>zDt,content_2220_3590:()=>WDt,content_2220_3592:()=>GDt,content_2220_3594:()=>FDt,content_2220_3596:()=>VDt,content_2220_3598:()=>qDt,content_2220_36:()=>OM,content_2220_360:()=>Ox,content_2220_3600:()=>HDt,content_2220_3602:()=>YDt,content_2220_3604:()=>KDt,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:()=>$x,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:()=>Jx,content_2220_3640:()=>E_t,content_2220_3642:()=>z_t,content_2220_3644:()=>W_t,content_2220_3646:()=>G_t,content_2220_3648:()=>F_t,content_2220_3650:()=>V_t,content_2220_3652:()=>q_t,content_2220_3654:()=>H_t,content_2220_3656:()=>Y_t,content_2220_3658:()=>K_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:()=>EXt,content_2220_3696:()=>zXt,content_2220_3698:()=>WXt,content_2220_370:()=>oC,content_2220_3700:()=>GXt,content_2220_3702:()=>FXt,content_2220_3704:()=>VXt,content_2220_3706:()=>qXt,content_2220_3708:()=>HXt,content_2220_3710:()=>YXt,content_2220_3712:()=>KXt,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:()=>Egt,content_2220_3750:()=>zgt,content_2220_3752:()=>Wgt,content_2220_3754:()=>Ggt,content_2220_3756:()=>Fgt,content_2220_3758:()=>Vgt,content_2220_376:()=>iC,content_2220_3760:()=>qgt,content_2220_3762:()=>Hgt,content_2220_3764:()=>Ygt,content_2220_3766:()=>Kgt,content_2220_3768:()=>txt,content_2220_3770:()=>ext,content_2220_378:()=>uC,content_2220_38:()=>$M,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:()=>JM,content_2220_400:()=>RC,content_2220_402:()=>SC,content_2220_404:()=>IC,content_2220_406:()=>
10PC,content_2220_408:()=>BC,content_2220_410:()=>UC,content_2220_412:()=>jC,content_2220_414:()=>OC,content_2220_416:()=>$C,content_2220_418:()=>JC,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:()=>uT,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:()=>RT,content_2220_456:()=>ST,content_2220_458:()=>IT,content_2220_46:()=>ow,content_2220_460:()=>PT,content_2220_462:()=>BT,content_2220_464:()=>UT,content_2220_466:()=>jT,content_2220_468:()=>OT,content_2220_470:()=>$T,content_2220_472:()=>JT,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:()=>Rv,content_2220_510:()=>Sv,content_2220_512:()=>Iv,content_2220_514:()=>Pv,content_2220_516:()=>Bv,content_2220_518:()=>Uv,content_2220_52:()=>iw,content_2220_520:()=>jv,content_2220_522:()=>Ov,content_2220_524:()=>$v,content_2220_526:()=>Jv,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:()=>Rb,content_2220_564:()=>Sb,content_2220_566:()=>Ib,content_2220_568:()=>Pb,content_2220_570:()=>Bb,content_2220_572:()=>Ub,content_2220_574:()=>jb,content_2220_576:()=>Ob,content_2220_578:()=>$b,content_2220_58:()=>kw,content_2220_580:()=>Jb,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:()=>RL,content_2220_618:()=>SL,content_2220_62:()=>ww,content_2220_620:()=>IL,content_2220_622:()=>PL,content_2220_624:()=>BL,content_2220_626:()=>UL,content_2220_628:()=>jL,content_2220_630:()=>OL,content_2220_632:()=>$L,content_2220_634:()=>JL,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:()=>RZ,content_2220_672:()=>SZ,content_2220_674:()=>IZ,content_2220_676:()=>PZ,content_2220_678:()=>BZ,content_2220_68:()=>Cw,content_2220_680:()=>UZ,content_2220_682:()=>jZ,content_2220_684:()=>OZ,content_2220_686:()=>$Z,content_2220_688:()=>JZ,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:()=>RN,content_2220_726:()=>SN,content_2220_728:()=>IN,content_2220_730:()=>PN,content_2220_732:()=>BN,content_2220_734:()=>UN,content_2220_736:()=>jN,content_2220_738:()=>ON,content_2220_74:()=>Nw,content_2220_740:()=>$N,content_2220_742:()=>JN,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:()=>Rw,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:()=>RA,content_2220_78:()=>Sw,content_2220_780:()=>SA,content_2220_782:()=>IA,content_2220_784:()=>PA,content_2220_786:()=>BA,content_2220_788:()=>UA,content_2220_790:()=>jA,content_2220_792:()=>OA,content_2220_794:()=>$A,content_2220_796:()=>JA,content_2220_798:()=>QA,content_2220_8:()=>wM,content_2220_80:()=>Iw,content_2220_800:()=>nR,content_2220_802:()=>oR,content_2220_804:()=>rR,content_2220_806:()=>cR,content_2220_808:()=>iR,content_2220_810:()=>uR,content_2220_812:()=>dR,content_2220_814:()=>kR,content_2220_816:()=>fR,content_2220_818:()=>wR,content_2220_82:()=>Pw,content_2220_820:()=>_R,content_2220_822:()=>gR,content_2220_824:()=>CR,content_2220_826:()=>vR,content_2220_828:()=>LR,content_2220_830:()=>NR,content_2220_832:()=>RR,content_2220_834:()=>SR,content_2220_836:()=>IR,content_2220_838:()=>PR,content_2220_84:()=>Bw,content_2220_840:()=>BR,content_2220_842:()=>UR,content_2220_844:()=>jR,content_2220_846:()=>OR,content_2220_848:()=>$R,content_2220_850:()=>JR,content_2220_852:()=>QR,content_2220_854:()=>nE,content_2220_856:()=>oE,content_2220_858:()=>rE,content_2220_86:()=>Uw,content_2220_860:()=>cE,content_2220_862:()=>iE,content_2220_864:()=>uE,content_2220_866:()=>dE,content_2220_868:()=>kE,content_2220_870:()=>fE,content_2220_872:()=>wE,content_2220_874:()=>_E,content_2220_876:()=>gE,content_2220_878:()=>CE,content_2220_88:()=>jw,content_2220_880:()=>vE,content_2220_882:()=>LE,content_2220_884:()=>NE,content_2220_886:()=>RE,content_2220_888:()=>SE,content_2220_890:()=>IE,content_2220_892:()=>PE,content_2220_894:()=>BE,content_2220_896:()=>UE,content_2220_898:()=>jE,content_2220_90:()=>Ow,content_2220_900:()=>OE,content_2220_902:()=>$E,content_2220_904:()=>JE,content_2220_906:()=>QE,content_2220_908:()=>nS,content_2220_910:()=>oS,content_2220_912:()=>rS,content_2220_914:()=>cS,content_2220_916:()=>iS,content_2220_918:()=>uS,content_2220_92:()=>$w,content_2220_920:()=>dS,content_2220_922:()=>kS,content_2220_924:()=>fS,content_2220_926:()=>wS,content_2220_928:()=>_S,content_2220_930:()=>gS,content_2220_932:()=>CS,content_2220_934:()=>vS,content_2220_936:()=>LS,content_2220_938:()=>NS,content_2220_94:()=>Jw,content_2220_940:()=>RS,content_2220_942:()=>SS,content_2220_944:()=>IS,content_2220_946:()=>PS,content_2220_948:()=>BS,content_2220_950:()=>US,content_2220_952:()=>jS,content_2220_954:()=>OS,content_2220_956:()=>$S,content_2220_958:()=>JS,content_2220_96:()=>Qw,content_2220_960:()=>QS,content_2220_962:()=>nz,content_2220_964:()=>oz,content_2220_966:()=>rz,content_2220_968:()=>cz,content_2220_970:()=>iz,content_2220_972:()=>uz,content_2220_974:()=>dz,content_2220_976:()=>kz,content_2220_978:()=>fz,content_2220_98:()=>nD,content_2220_980:()=>wz,content_2220_982:()=>_z,content_2220_984:()=>gz,content_2220_986:()=>Cz,content_2220_988:()=>vz,content_2220_990:()=>Lz,content_2220_992:()=>Nz,content_2220_994:()=>Rz,content_2220_996:()=>Sz,content_2220_998:()=>Iz});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 R={toc:[]};function E(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,"Dispatches a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableEvent")),"."))}E.isMDXComponent=!0;const S={toc:[]};function z(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,"Unsubscribe all subscribers from the event."))}z.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 P={toc:[]};function G(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,"Subscribe to the event."))}G.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 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 handler to unsubscribe."))}q.isMDXComponent=!0;const O={toc:[]};function H(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."))}H.isMDXComponent=!0;const $={toc:[]};function Y(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 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 J={toc:[]};function K(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,"Unsubscribe all subscribers from the event."))}K.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 Rt={toc:[]};function Et(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."))}Et.isMDXComponent=!0;const St={toc:[]};function zt(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 handler to unsubscribe."))}zt.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 Pt={toc:[]};function Gt(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,"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")),"."))}Gt.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 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)("p",null,"The handler to invoke when the event occurs."))}qt.isMDXComponent=!0;const Ot={toc:[]};function Ht(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."))}Ht.isMDXComponent=!0;const $t={toc:[]};function Yt(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,"The handler to unsubscribe."))}Yt.isMDXComponent=!0;const Jt={toc:[]};function Kt(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,"The type of the argument passed to subscribers."))}Kt.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 Rn(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."))}Rn.isMDXComponent=!0;const En={toc:[]};function Sn(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,"Get the most recent value of this dispatcher."))}Sn.isMDXComponent=!0;const zn={toc:[]};function In(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,"Setting the value will immediately notify all subscribers."))}In.isMDXComponent=!0;const Wn={toc:[]};function Pn(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."))}Pn.isMDXComponent=!0;const Gn={toc:[]};function Bn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gn,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 jn(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."))}jn.isMDXComponent=!0;const qn={toc:[]};function On(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qn,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 Hn={toc:[]};function $n(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 handler to invoke when the event occurs."))}$n.isMDXComponent=!0;const Yn={toc:[]};function Jn(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."))}Jn.isMDXComponent=!0;const Kn={toc:[]};function Qn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kn,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 Re(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."))}Re.isMDXComponent=!0;const Ee={toc:[]};function Se(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,"A list of tasks to run."))}Se.isMDXComponent=!0;const ze={toc:[]};function Ie(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* any(\n rect.fill('#ff0000', 2),\n rect.opacity(1, 1),\n);\n// current time: 1s\n")))}Ie.isMDXComponent=!0;const We={toc:[]};function Pe(t){let{components:n,...e}=t;return(0,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."))}Pe.isMDXComponent=!0;const Ge={toc:[]};function Be(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ge,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 je(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."))}je.isMDXComponent=!0;const qe={toc:[]};function Oe(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qe,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to run."))}Oe.isMDXComponent=!0;const He={toc:[]};function $e(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},He,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")))}$e.isMDXComponent=!0;const Ye={toc:[]};function Je(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."))}Je.isMDXComponent=!0;const Ke={toc:[]};function Qe(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ke,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 Ro={toc:[]};function Eo(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,"An optional name used when displaying this generator in the UI."))}Eo.isMDXComponent=!0;const So={toc:[]};function zo(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 generator function or a factory that creates the generator."))}zo.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 Po={toc:[]};function Go(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Po,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")))}Go.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 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 list of tasks to be run in a sequence."))}qo.isMDXComponent=!0;const Oo={toc:[]};function Ho(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")))}Ho.isMDXComponent=!0;const $o={toc:[]};function Yo(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,"Wait for the given amount of time."))}Yo.isMDXComponent=!0;const Jo={toc:[]};function Ko(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,"The relative time in seconds."))}Ko.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 Rp={toc:[]};function Ep(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,"Occurs before the render starts when the Scene transitions are applied."))}Ep.isMDXComponent=!0;const Sp={toc:[]};function zp(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,"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."))}zp.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 Pp={toc:[]};function Gp(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,"Describes the state of a scene."))}Gp.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 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,"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")),"."))}qp.isMDXComponent=!0;const Op={toc:[]};function Hp(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."))}Hp.isMDXComponent=!0;const $p={toc:[]};function Yp(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,"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 Jp={toc:[]};function Kp(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 scene has finished."))}Kp.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 Rr={toc:[]};function Er(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,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}Er.isMDXComponent=!0;const Sr={toc:[]};function zr(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,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state."))}zr.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 Pr={toc:[]};function Gr(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,"This method makes sure that the context of this scene is globally available\nduring the execution of the callback."))}Gr.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 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 the size of this scene."),(0,s.kt)("p",null,"Usually return ",(0,s.kt)("inlineCode",{parentName:"p"},"this.project.getSize()"),"."))}qr.isMDXComponent=!0;const Or={toc:[]};function Hr(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?"))}Hr.isMDXComponent=!0;const $r={toc:[]};function Yr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$r,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 Jr={toc:[]};function Kr(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,"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?"))}Kr.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/20230315084657/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 Rs={toc:[]};function Es(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,"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"})))}Es.isMDXComponent=!0;const Ss={toc:[]};function zs(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 size of the array."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"})))}zs.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 Ps={toc:[]};function Gs(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,"The end of the range. Exclusive."))}Gs.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 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,"The end of the range."))}qs.isMDXComponent=!0;const Os={toc:[]};function Hs(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."))}Hs.isMDXComponent=!0;const $s={toc:[]};function Ys(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 start of the range."))}Ys.isMDXComponent=!0;const Js={toc:[]};function Ks(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,"The end of the range. Exclusive."))}Ks.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 Rc={toc:[]};function Ec(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,"A local-to-screen matrix."))}Ec.isMDXComponent=!0;const Sc={toc:[]};function zc(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 context to draw with."))}zc.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 Pc={toc:[]};function Gc(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,"Return the attributes of the inspected element."))}Gc.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 jc={toc:[]};function qc(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,"The x coordinate."))}qc.isMDXComponent=!0;const Oc={toc:[]};function Hc(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."))}Hc.isMDXComponent=!0;const $c={toc:[]};function Yc(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,"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 Jc={toc:[]};function Kc(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,"Check if the inspected element is still valid."))}Kc.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 Ra={toc:[]};function Ea(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,"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?"))}Ea.isMDXComponent=!0;const Sa={toc:[]};function za(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,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}za.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 Pa={toc:[]};function Ga(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,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Initial"},(0,s.kt)("inlineCode",{parentName:"a"},"Initial"))," state."))}Ga.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 ja={toc:[]};function qa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ja,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"),"."))}qa.isMDXComponent=!0;const Oa={toc:[]};function Ha(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?"))}Ha.isMDXComponent=!0;const $a={toc:[]};function Ya(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,"Progress this scene one frame forward."))}Ya.isMDXComponent=!0;const Ja={toc:[]};function Ka(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,"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")),"."))}Ka.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 Ri={toc:[]};function Ei(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,"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."))}Ei.isMDXComponent=!0;const Si={toc:[]};function zi(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,"The type of the configuration object."))}zi.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 Pi={toc:[]};function Gi(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,"Scenes can implement this interface to display their thread hierarchy in the\nUI."))}Gi.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 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,"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."))}qi.isMDXComponent=!0;const Oi={toc:[]};function Hi(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."))}Hi.isMDXComponent=!0;const $i={toc:[]};function Yi(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 runtime representation of the scene metadata."))}Yi.isMDXComponent=!0;const Ji={toc:[]};function Ki(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,"Create a runtime representation of the scene metadata."))}Ki.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 Rl={toc:[]};function El(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,"Reset the signal to its initial value (if one has been set)."))}El.isMDXComponent=!0;const Sl={toc:[]};function zl(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,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}zl.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 Pl={toc:[]};function Gl(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,"Compute the current value of the signal and immediately set it."))}Gl.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 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,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}ql.isMDXComponent=!0;const Ol={toc:[]};function Hl(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."))}Hl.isMDXComponent=!0;const $l={toc:[]};function Yl(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,"Thread management."))}Yl.isMDXComponent=!0;const Jl={toc:[]};function Kl(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,"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."))}Kl.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 Ru={toc:[]};function Eu(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,"Check if the given value is a ","[Promise][promise]","."))}Eu.isMDXComponent=!0;const Su={toc:[]};function zu(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 possible ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084657/https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/promise"},"Promise"),"."))}zu.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 Pu={toc:[]};function Gu(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,"A possible thread ",(0,s.kt)("a",{parentName:"p",href:"/api/core/threading#ThreadGenerator"},(0,s.kt)("inlineCode",{parentName:"a"},"ThreadGenerator")),"."))}
10Gu.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 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,"A list of tasks to join."))}qu.isMDXComponent=!0;const Ou={toc:[]};function Hu(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")))}Hu.isMDXComponent=!0;const $u={toc:[]};function Yu(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,"Pause the current generator until listed tasks are finished."))}Yu.isMDXComponent=!0;const Ju={toc:[]};function Ku(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,"Whether we should wait for all tasks or for at least one."))}Ku.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 Rm={toc:[]};function Em(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,"The duration of the transition."))}Em.isMDXComponent=!0;const Sm={toc:[]};function zm(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,"Perform a transition that zooms out from a given area of the scene."))}zm.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 Pm={toc:[]};function Gm(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 duration of the transition."))}Gm.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 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,"A value matching the structure of from and to."))}qm.isMDXComponent=!0;const Om={toc:[]};function Hm(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."))}Hm.isMDXComponent=!0;const $m={toc:[]};function Ym(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 input to favor when value is 0."))}Ym.isMDXComponent=!0;const Jm={toc:[]};function Km(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,"The input to favor when value is 1."))}Km.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],\n [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 Rd={toc:[]};function Ed(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,"Get the nth component vector of the matrix. Only defined for 0, 1, and 2."))}Ed.isMDXComponent=!0;const Sd={toc:[]};function zd(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,"The index of the component vector to retrieve."))}zd.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 Pd={toc:[]};function Gd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pd,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")))}Gd.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 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)("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")))}qd.isMDXComponent=!0;const Od={toc:[]};function Hd(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"})))}Hd.isMDXComponent=!0;const $d={toc:[]};function Yd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)(
10{},$d,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value by which to scale each term"))}Yd.isMDXComponent=!0;const Jd={toc:[]};function Kd(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,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}Kd.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// )\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 Rh={toc:[]};function Eh(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,"The vector by which to translate the matrix"))}Eh.isMDXComponent=!0;const Sh={toc:[]};function zh(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,"Represents a two-dimensional vector."))}zh.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 Ph={toc:[]};function Gh(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,"The unclipped RGB components."))}Gh.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 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)("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")))}qh.isMDXComponent=!0;const Oh={toc:[]};function Hh(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."))}Hh.isMDXComponent=!0;const $h={toc:[]};function Yh(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"},"chroma('33cc00').gl() === [0.2,0.8,0,1]\n")))}Yh.isMDXComponent=!0;const Jh={toc:[]};function Kh(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,"Returns an array with the cyan, magenta, yellow, and key (black)\ncomponents, each as a normalized value between 0 and 1."))}Kh.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 Rk={toc:[]};function Ek(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 a RGB() or HSL() string representation that can be used as CSS-color definition.\nmode defaults to ",(0,s.kt)("code",null,"'rgb'")))}Ek.isMDXComponent=!0;const Sk={toc:[]};function zk(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,"Similar to saturate, but the opposite direction."))}zk.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 Pk={toc:[]};function Gk(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,"Returns a single channel value.\nAlso"))}Gk.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 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,(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."))}qk.isMDXComponent=!0;const Ok={toc:[]};function Hk(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."))}Hk.isMDXComponent=!0;const $k={toc:[]};function Yk(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,"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 Jk={toc:[]};function Kk(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,"Returns the named color. Falls back to hexadecimal RGB string, if the color isn't present."))}Kk.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/20230315084657/https://v8.dev/docs/stack-trace-api#customizing-stack-traces"},"http://web.archive.org/web/20230315084657/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 Ry={toc:[]};function Ey(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 payload to log"))}Ey.isMDXComponent=!0;const Sy={toc:[]};function zy(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,"Mark the given function as deprecated."))}zy.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 Py={toc:[]};function Gy(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 log message."))}Gy.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 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,"Mark the current scene as ready to transition out."))}qy.isMDXComponent=!0;const Oy={toc:[]};function Hy(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."))}Hy.isMDXComponent=!0;const $y={toc:[]};function Yy(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,"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 Jy={toc:[]};function Ky(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jy,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")))}Ky.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 Rf(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")))}Rf.isMDXComponent=!0;const Ef={toc:[]};function Sf(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,"The duration of the event in seconds."))}Sf.isMDXComponent=!0;const zf={toc:[]};function If(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,"Register a time event and get its duration in seconds."))}If.isMDXComponent=!0;const Wf={toc:[]};function Pf(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."))}Pf.isMDXComponent=!0;const Gf={toc:[]};function Bf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gf,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 jf(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."))}jf.isMDXComponent=!0;const qf={toc:[]};function Of(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The seed for the generator."))}Of.isMDXComponent=!0;const Hf={toc:[]};function $f(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,"Whether the seed should be fixed. Fixed seeds remain\nthe same even when the main scene seed changes."))}$f.isMDXComponent=!0;const Yf={toc:[]};function Jf(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."))}Jf.isMDXComponent=!0;const Kf={toc:[]};function Qf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kf,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/20230315084657/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 RM(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"))}RM.isMDXComponent=!0;const EM={toc:[]};function SM(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,"Whether the path of this circle should be closed."))}SM.isMDXComponent=!0;const zM={toc:[]};function IM(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,"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 PM(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"))}PM.isMDXComponent=!0;const GM={toc:[]};function BM(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 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 jM(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."))}jM.isMDXComponent=!0;const qM={toc:[]};function OM(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,"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 HM={toc:[]};function $M(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,"Represents the position of this node in local space of its parent."))}$M.isMDXComponent=!0;const YM={toc:[]};function JM(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."))}JM.isMDXComponent=!0;const KM={toc:[]};function QM(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,"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 Rw(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."))}Rw.isMDXComponent=!0;const Ew={toc:[]};function Sw(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,"Create a copy of this node."))}Sw.isMDXComponent=!0;const zw={toc:[]};function Iw(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,"Properties to override."))}Iw.isMDXComponent=!0;const Ww={toc:[]};function Pw(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."))}Pw.isMDXComponent=!0;const Gw={toc:[]};function Bw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gw,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 jw(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."))}jw.isMDXComponent=!0;const qw={toc:[]};function Ow(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}Ow.isMDXComponent=!0;const Hw={toc:[]};function $w(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,"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."))}$w.isMDXComponent=!0;const Yw={toc:[]};function Jw(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."))}Jw.isMDXComponent=!0;const Kw={toc:[]};function Qw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kw,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 RD(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."))}RD.isMDXComponent=!0;const ED={toc:[]};function SD(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,"An index at which to insert the node(s)."))}SD.isMDXComponent=!0;const zD={toc:[]};function ID(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,"Create an instance of this node's class."))}ID.isMDXComponent=!0;const WD={toc:[]};function PD(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."))}PD.isMDXComponent=!0;const GD={toc:[]};function BD(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,"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 jD(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."))}jD.isMDXComponent=!0;const qD={toc:[]};function OD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}OD.isMDXComponent=!0;const HD={toc:[]};function $D(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,"This matrix transforms vectors from local space of this node to world\nspace."))}$D.isMDXComponent=!0;const YD={toc:[]};function JD(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")))}JD.isMDXComponent=!0;const KD={toc:[]};function QD(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 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 R_(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."))}R_.isMDXComponent=!0;const E_={toc:[]};function S_(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 index to move the node to."))}S_.isMDXComponent=!0;const z_={toc:[]};function I_(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 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 P_(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."))}P_.isMDXComponent=!0;const G_={toc:[]};function B_(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 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 j_(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."))}j_.isMDXComponent=!0;const q_={toc:[]};function O_(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,"Move the node up in relation to its siblings."))}O_.isMDXComponent=!0;const H_={toc:[]};function $_(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 reactive copy has all its properties dynamically updated to match the\nsource node."))}$_.isMDXComponent=!0;const Y_={toc:[]};function J_(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."))}J_.isMDXComponent=!0;const K_={toc:[]};function Q_(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,"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 RX(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."))}RX.isMDXComponent=!0;const EX={toc:[]};function SX(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,"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."))}SX.isMDXComponent=!0;const zX={toc:[]};function IX(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,"Prepare the given context for drawing a cached node onto it."))}IX.isMDXComponent=!0;const WX={toc:[]};function PX(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."))}PX.isMDXComponent=!0;const GX={toc:[]};function BX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GX,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 jX(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."))}jX.isMDXComponent=!0;const qX={toc:[]};function OX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qX,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 HX={toc:[]};function $X(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,"Wait for any asynchronous resources that this node or its children have."))}$X.isMDXComponent=!0;const YX={toc:[]};function JX(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."))}JX.isMDXComponent=!0;const KX={toc:[]};function QX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KX,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 Rg(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."))}Rg.isMDXComponent=!0;const Eg={toc:[]};function Sg(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,"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")))}Sg.isMDXComponent=!0;const zg={toc:[]};function Ig(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 scale of this node in local space of its parent."))}Ig.isMDXComponent=!0;const Wg={toc:[]};function Pg(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."))}Pg.isMDXComponent=!0;const Gg={toc:[]};function Bg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gg,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 jg(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."))}jg.isMDXComponent=!0;const qg={toc:[]};function Og(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qg,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 Hg={toc:[]};function $g(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,"Add the given node(s) as the children of this node."))}$g.isMDXComponent=!0;const Yg={toc:[]};function Jg(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."))}Jg.isMDXComponent=!0;const Kg={toc:[]};function Qg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kg,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 Rx(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."))}Rx.isMDXComponent=!0;const Ex={toc:[]};function Sx(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,"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."))}Sx.isMDXComponent=!0;const zx={toc:[]};function Ix(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 an overlay for this node."))}Ix.isMDXComponent=!0;const Wx={toc:[]};function Px(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."))}Px.isMDXComponent=!0;const Gx={toc:[]};function Bx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gx,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 jx(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)."))}jx.isMDXComponent=!0;const qx={toc:[]};function Ox(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Ox.isMDXComponent=!0;const Hx={toc:[]};function $x(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,"Get a bounding box for the contents rendered by this node."))}$x.isMDXComponent=!0;const Yx={toc:[]};function Jx(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."))}Jx.isMDXComponent=!0;const Kx={toc:[]};function Qx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kx,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 RC(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."))}RC.isMDXComponent=!0;const EC={toc:[]};function SC(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,"Number of places by which the node should be moved."))}SC.isMDXComponent=!0;const zC={toc:[]};function IC(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 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 PC(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."))}PC.isMDXComponent=!0;const GC={toc:[]};function BC(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 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 jC(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."))}jC.isMDXComponent=!0;const qC={toc:[]};function OC(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,"Move the node below the provided node in the parent's layout."))}OC.isMDXComponent=!0;const HC={toc:[]};function $C(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,"The sibling node below which to move."))}$C.isMDXComponent=!0;const YC={toc:[]};function JC(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."))}JC.isMDXComponent=!0;const KC={toc:[]};function QC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KC,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 RT(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."))}RT.isMDXComponent=!0;const ET={toc:[]};function ST(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,"Render this node onto the given canvas."))}ST.isMDXComponent=!0;const zT={toc:[]};function IT(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 context to draw with."))}IT.isMDXComponent=!0;const WT={toc:[]};function PT(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."))}PT.isMDXComponent=!0;const GT={toc:[]};function BT(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,"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 jT(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."))}jT.isMDXComponent=!0;const qT={toc:[]};function OT(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,"Find the closest layout root and apply any new layout changes."))}OT.isMDXComponent=!0;const HT={toc:[]};function $T(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,"Whether this node should be cached or not."))}$T.isMDXComponent=!0;const YT={toc:[]};function JT(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."))}JT.isMDXComponent=!0;const KT={toc:[]};function QT(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-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"}
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."))}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:[]};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,"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 Rv(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."))}Rv.isMDXComponent=!0;const Ev={toc:[]};function Sv(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,"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")))}Sv.isMDXComponent=!0;const zv={toc:[]};function Iv(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 the world-to-local matrix for this node."))}Iv.isMDXComponent=!0;const Wv={toc:[]};function Pv(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'
10s parent."))}Pv.isMDXComponent=!0;const Gv={toc:[]};function Bv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gv,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/20230315084657/https://icones.js.org/collection/all"},"http://web.archive.org/web/20230315084657/https://icones.js.org/collection/all")," for all available Icons."))}Uv.isMDXComponent=!0;const Vv={toc:[]};function jv(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."))}jv.isMDXComponent=!0;const qv={toc:[]};function Ov(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qv,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 Hv={toc:[]};function $v(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,"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."))}$v.isMDXComponent=!0;const Yv={toc:[]};function Jv(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."))}Jv.isMDXComponent=!0;const Kv={toc:[]};function Qv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kv,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/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"))}
10cb.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/20230315084657/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 Rb(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."))}Rb.isMDXComponent=!0;const Eb={toc:[]};function Sb(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,"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")))}Sb.isMDXComponent=!0;const zb={toc:[]};function Ib(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 size of this node."))}Ib.isMDXComponent=!0;const Wb={toc:[]};function Pb(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")),"."))}Pb.isMDXComponent=!0;const Gb={toc:[]};function Bb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gb,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 jb(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."))}jb.isMDXComponent=!0;const qb={toc:[]};function Ob(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qb,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 Hb={toc:[]};function $b(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,"Add the given node(s) as the children of this node."))}$b.isMDXComponent=!0;const Yb={toc:[]};function Jb(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."))}Jb.isMDXComponent=!0;const Kb={toc:[]};function Qb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kb,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 RL(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."))}RL.isMDXComponent=!0;const EL={toc:[]};function SL(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,"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."))}SL.isMDXComponent=!0;const zL={toc:[]};function IL(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 an overlay for this node."))}IL.isMDXComponent=!0;const WL={toc:[]};function PL(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."))}PL.isMDXComponent=!0;const GL={toc:[]};function BL(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,"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 jL(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)."))}jL.isMDXComponent=!0;const qL={toc:[]};function OL(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,"The returned bounding box should be in local space."))}OL.isMDXComponent=!0;const HL={toc:[]};function $L(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,"Get a bounding box for the contents rendered by this node."))}$L.isMDXComponent=!0;const YL={toc:[]};function JL(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."))}JL.isMDXComponent=!0;const KL={toc:[]};function QL(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,"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 RZ(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."))}RZ.isMDXComponent=!0;const EZ={toc:[]};function SZ(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,"This matrix transforms vectors from local space of this node to world\nspace."))}SZ.isMDXComponent=!0;const zZ={toc:[]};function IZ(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,"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 PZ(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."))}PZ.isMDXComponent=!0;const GZ={toc:[]};function BZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GZ,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 jZ(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."))}jZ.isMDXComponent=!0;const qZ={toc:[]};function OZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qZ,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 HZ={toc:[]};function $Z(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,"Move the node above the provided node in the parent's layout."))}$Z.isMDXComponent=!0;const YZ={toc:[]};function JZ(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."))}JZ.isMDXComponent=!0;const KZ={toc:[]};function QZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KZ,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 RN(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."))}RN.isMDXComponent=!0;const EN={toc:[]};function SN(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,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}SN.isMDXComponent=!0;const zN={toc:[]};function IN(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,"Create a reactive copy of this node."))}IN.isMDXComponent=!0;const WN={toc:[]};function PN(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."))}PN.isMDXComponent=!0;const GN={toc:[]};function BN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GN,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 jN(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."))}jN.isMDXComponent=!0;const qN={toc:[]};function ON(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}ON.isMDXComponent=!0;const HN={toc:[]};function $N(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,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}$N.isMDXComponent=!0;const YN={toc:[]};function JN(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."))}JN.isMDXComponent=!0;const KN={toc:[]};function QN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KN,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 RA(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."))}RA.isMDXComponent=!0;const EA={toc:[]};function SA(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,"Address to Iconify API for the requested Icon."))}SA.isMDXComponent=!0;const zA={toc:[]};function IA(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 the URL that will be used as the Image source"))}IA.isMDXComponent=!0;const WA={toc:[]};function PA(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."))}PA.isMDXComponent=!0;const GA={toc:[]};function BA(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,"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 jA(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."))}jA.isMDXComponent=!0;const qA={toc:[]};function OA(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,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}OA.isMDXComponent=!0;const HA={toc:[]};function $A(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,"This matrix transforms vectors from world space to local space of this\nnode."))}$A.isMDXComponent=!0;const YA={toc:[]};function JA(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")))}JA.isMDXComponent=!0;const KA={toc:[]};function QA(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,"Get the world-to-local matrix for this node."))}QA.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,"This matrix transforms vectors from world space to local space of this\nnode'
10s parent."))}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,"Get the world-to-parent matrix for this node."))}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,"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."))}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,"A helper signal for operating on the position in world space."))}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,"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."))}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,"A helper signal for operating on the rotation in world space."))}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,"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."))}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,"A helper signal for operating on the scale in world space."))}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,"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."))}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)("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")))}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,"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"),"."))}_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,"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")))}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,"Represents the offset of this node's origin."))}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,"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")))}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,"Represents the position of this node in local space of its parent."))}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,"Represents the rotation (in degrees) of this node relative to its parent."))}NR.isMDXComponent=!0;const AR={toc:[]};function RR(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,"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")))}RR.isMDXComponent=!0;const ER={toc:[]};function SR(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,"Represents the scale of this node in local space of its parent."))}SR.isMDXComponent=!0;const zR={toc:[]};function IR(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,"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."))}IR.isMDXComponent=!0;const WR={toc:[]};function PR(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,"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")))}PR.isMDXComponent=!0;const GR={toc:[]};function BR(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,"Represents the size of 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,"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")),"."))}UR.isMDXComponent=!0;const VR={toc:[]};function jR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VR,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")))}jR.isMDXComponent=!0;const qR={toc:[]};function OR(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,"Will set the corner drawing method to smooth corners."))}OR.isMDXComponent=!0;const HR={toc:[]};function $R(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,"The nodes will be appended at the end of the children list."))}$R.isMDXComponent=!0;const YR={toc:[]};function JR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YR,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;"}))}JR.isMDXComponent=!0;const KR={toc:[]};function QR(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,"Add the given node(s) as the children of this node."))}QR.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,"A node or an array of nodes to append."))}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,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}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,"The state to apply to the node."))}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,"Get a bounding box for the contents rendered by this node as well\nas its children."))}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,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}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,"Get the offset for this node's cache canvas."))}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,"Get a cache canvas with the contents of this node rendered onto it."))}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,"Create a copy of this node."))}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,"Properties to override."))}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,"Collect all asynchronous resources used by this node."))}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,"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."))}_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,"A matrix mapping composite space to world space."))}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,"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."))}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,"Get the desired size of this node."))}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,"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."))}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,"Prepare this node to be disposed of."))}NE.isMDXComponent=!0;const AE={toc:[]};function RE(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,"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."))}RE.isMDXComponent=!0;const EE={toc:[]};function SE(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,"Draw this node onto the canvas."))}SE.isMDXComponent=!0;const zE={toc:[]};function IE(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,"The context to draw with."))}IE.isMDXComponent=!0;const WE={toc:[]};function PE(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,"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."))}PE.isMDXComponent=!0;const GE={toc:[]};function BE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for 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,"The context to draw with."))}UE.isMDXComponent=!0;const VE={toc:[]};function jE(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,"A local-to-screen matrix."))}jE.isMDXComponent=!0;const qE={toc:[]};function OE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qE,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}OE.isMDXComponent=!0;const HE={toc:[]};function $E(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,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}$E.isMDXComponent=!0;const YE={toc:[]};function JE(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,"The returned bounding box should be in local space."))}JE.isMDXComponent=!0;const KE={toc:[]};function QE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}QE.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,"Get color of the image at the given position."))}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 position in local space at which to sample the color."))}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,"Get color of the image at the given pixel."))}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 pixel's position."))}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,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}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"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}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,"Try to find a node intersecting the given position."))}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,"The searched position."))}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)("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;"}))}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,"Insert the given node(s) at the specified index in the children list."))}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,"A node or an array of nodes to insert."))}_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,"An index at which to insert the node(s)."))}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,"Create an instance of this node's class."))}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,"Properties to pass to the constructor."))}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,"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)."))}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,"Get the resolved layout mode of this node."))}NS.isMDXComponent=!0;const AS={toc:[]};function RS(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,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}RS.isMDXComponent=!0;const ES={toc:[]};function SS(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 the local-to-parent matrix for this node."))}SS.isMDXComponent=!0;const zS={toc:[]};function IS(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,"This matrix transforms vectors from local space of this node to world\nspace."))}IS.isMDXComponent=!0;const WS={toc:[]};function PS(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,"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")))}PS.isMDXComponent=!0;const GS={toc:[]};function BS(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,"Get the local-to-world matrix for this node."))}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,"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."))}US.isMDXComponent=!0;const VS={toc:[]};function jS(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,"Rearrange this node in relation to its siblings."))}jS.isMDXComponent=!0;const qS={toc:[]};function OS(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,"Number of places by which the node should be moved."))}OS.isMDXComponent=!0;const HS={toc:[]};function $S(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 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."))}$S.isMDXComponent=!0;const YS={toc:[]};function JS(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,"Move the node above the provided node in the parent's layout."))}JS.isMDXComponent=!0;const KS={toc:[]};function QS(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 sibling node below which to move."))}QS.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,"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."))}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 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."))}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,"Move the node below the provided node in the parent's layout."))}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 sibling node below which to move."))}
10cz.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,"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."))}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,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}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,"Move the node down in relation to its siblings."))}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,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}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,"The new offset."))}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,"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)."))}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,"Move the node to the provided position relative to its siblings."))}_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,"The index to move the node to."))}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,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}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,"Move the node to the bottom in relation to its siblings."))}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,"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."))}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,"Move the node to the top in relation to its siblings."))}Nz.isMDXComponent=!0;const Az={toc:[]};function Rz(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,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}Rz.isMDXComponent=!0;const Ez={toc:[]};function Sz(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,"Move the node up in relation to its siblings."))}Sz.isMDXComponent=!0;const zz={toc:[]};function Iz(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,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}Iz.isMDXComponent=!0;const Wz={toc:[]};function Pz(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,"Create a reactive copy of this node."))}Pz.isMDXComponent=!0;const Gz={toc:[]};function Bz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}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,"Remove this node from the tree."))}Uz.isMDXComponent=!0;const Vz={toc:[]};function jz(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,"Remove all children of this node."))}jz.isMDXComponent=!0;const qz={toc:[]};function Oz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}Oz.isMDXComponent=!0;const Hz={toc:[]};function $z(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 context to draw with."))}$z.isMDXComponent=!0;const Yz={toc:[]};function Jz(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,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}Jz.isMDXComponent=!0;const Kz={toc:[]};function Qz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}Qz.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 RI(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."))}RI.isMDXComponent=!0;const EI={toc:[]};function SI(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,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}SI.isMDXComponent=!0;const zI={toc:[]};function II(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,"Wait for any asynchronous resources that this node or its children have."))}II.isMDXComponent=!0;const WI={toc:[]};function PI(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."))}PI.isMDXComponent=!0;const GI={toc:[]};function BI(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,"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 jI(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."))}jI.isMDXComponent=!0;const qI={toc:[]};function OI(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,"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 HI={toc:[]};function $I(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,"Get the world-to-local matrix for this node."))}$I.isMDXComponent=!0;const YI={toc:[]};function JI(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."))}JI.isMDXComponent=!0;const KI={toc:[]};function QI(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,"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 RW(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."))}RW.isMDXComponent=!0;const EW={toc:[]};function SW(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,"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")))}SW.isMDXComponent=!0;const zW={toc:[]};function IW(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 size of this node."))}IW.isMDXComponent=!0;const WW={toc:[]};function PW(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")),"."))}PW.isMDXComponent=!0;const GW={toc:[]};function BW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GW,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 jW(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."))}jW.isMDXComponent=!0;const qW={toc:[]};function OW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qW,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 HW={toc:[]};function $W(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,"Add the given node(s) as the children of this node."))}$W.isMDXComponent=!0;const YW={toc:[]};function JW(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."))}JW.isMDXComponent=!0;const KW={toc:[]};function QW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KW,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 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,"The state to apply to the node."))}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,"Get a bounding box for the contents rendered by this node as well\nas its children."))}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,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}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,"Get the offset for this node's cache canvas."))}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,"Get a cache canvas with the contents of this node rendered onto it."))}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,"Create a copy of this node."))}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)("p",null,"Properties to override."))}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,"Collect all asynchronous resources used by this node."))}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,"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."))}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,"A matrix mapping composite space to world space."))}wP.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,"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."))}_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,"Get the desired size of this node."))}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,"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."))}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,"Prepare this node to be disposed of."))}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 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."))}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,"Draw this node onto the canvas."))}NP.isMDXComponent=!0;const AP={toc:[]};function RP(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,"The context to draw with."))}RP.isMDXComponent=!0;const EP={toc:[]};function SP(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 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."))}SP.isMDXComponent=!0;const zP={toc:[]};function IP(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,"Draw an overlay for this node."))}IP.isMDXComponent=!0;const WP={toc:[]};function PP(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 context to draw with."))}PP.isMDXComponent=!0;const GP={toc:[]};function BP(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,"A local-to-screen matrix."))}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"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}UP.isMDXComponent=!0;const VP={toc:[]};function jP(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,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}jP.isMDXComponent=!0;const qP={toc:[]};function OP(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 returned bounding box should be in local space."))}OP.isMDXComponent=!0;const HP={toc:[]};function $P(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,"Get a bounding box for the contents rendered by this node."))}$P.isMDXComponent=!0;const YP={toc:[]};function JP(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,"Get color of the image at the given position."))}JP.isMDXComponent=!0;const KP={toc:[]};function QP(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 position in local space at which to sample the color."))}QP.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 color of the image at the given pixel."))}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,"The pixel's position."))}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,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}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,"Return a snapshot of the node's current signal values."))}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,"Try to find a node intersecting the given position."))}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,"The searched position."))}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)("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;"}))}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,"Insert the given node(s) at the specified index in the children list."))}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,"A node or an array of nodes to insert."))}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,"An index at which to insert the node(s)."))}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,"Create an instance of this node's class."))}_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,"Properties to pass to the constructor."))}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,"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)."))}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,"Get the resolved layout mode of this node."))}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 matrix transforms vectors from local space of this node to local space\nof this node's parent."))}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,"Get the local-to-parent matrix for this node."))}
10NG.isMDXComponent=!0;const AG={toc:[]};function RG(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 local space of this node to world\nspace."))}RG.isMDXComponent=!0;const EG={toc:[]};function SG(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,"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")))}SG.isMDXComponent=!0;const zG={toc:[]};function IG(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,"Get the local-to-world matrix for this node."))}IG.isMDXComponent=!0;const WG={toc:[]};function PG(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,"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."))}PG.isMDXComponent=!0;const GG={toc:[]};function BG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}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,"Number of places by which the node should be moved."))}UG.isMDXComponent=!0;const VG={toc:[]};function jG(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 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."))}jG.isMDXComponent=!0;const qG={toc:[]};function OG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}OG.isMDXComponent=!0;const HG={toc:[]};function $G(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,"The sibling node below which to move."))}$G.isMDXComponent=!0;const YG={toc:[]};function JG(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,"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."))}JG.isMDXComponent=!0;const KG={toc:[]};function QG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KG,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."))}QG.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 RB(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."))}RB.isMDXComponent=!0;const EB={toc:[]};function SB(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,"Create a reactive copy of this node."))}SB.isMDXComponent=!0;const zB={toc:[]};function IB(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,"Properties to override."))}IB.isMDXComponent=!0;const WB={toc:[]};function PB(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."))}PB.isMDXComponent=!0;const GB={toc:[]};function BB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GB,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 jB(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."))}jB.isMDXComponent=!0;const qB={toc:[]};function OB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qB,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 HB={toc:[]};function $B(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,"Change the parent of this node while keeping the absolute transform."))}$B.isMDXComponent=!0;const YB={toc:[]};function JB(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."))}JB.isMDXComponent=!0;const KB={toc:[]};function QB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KB,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 RF(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."))}RF.isMDXComponent=!0;const EF={toc:[]};function SF(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,"Apply any new layout changes to this node and its children."))}SF.isMDXComponent=!0;const zF={toc:[]};function IF(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 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 PF(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."))}PF.isMDXComponent=!0;const GF={toc:[]};function BF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GF,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 jF(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."))}jF.isMDXComponent=!0;const qF={toc:[]};function OF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qF,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 HF={toc:[]};function $F(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,"Get the world-to-parent matrix for this node."))}$F.isMDXComponent=!0;const YF={toc:[]};function JF(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."))}JF.isMDXComponent=!0;const KF={toc:[]};function QF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KF,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 RU(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."))}RU.isMDXComponent=!0;const EU={toc:[]};function SU(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 node or an array of nodes to append."))}SU.isMDXComponent=!0;const zU={toc:[]};function IU(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,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}IU.isMDXComponent=!0;const WU={toc:[]};function PU(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."))}PU.isMDXComponent=!0;const GU={toc:[]};function BU(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,"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 jU(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."))}jU.isMDXComponent=!0;const qU={toc:[]};function OU(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,"Get a cache canvas with the contents of this node rendered onto it."))}OU.isMDXComponent=!0;const HU={toc:[]};function $U(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,"Create a copy of this node."))}$U.isMDXComponent=!0;const YU={toc:[]};function JU(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."))}JU.isMDXComponent=!0;const KU={toc:[]};function QU(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,"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 RV(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."))}RV.isMDXComponent=!0;const EV={toc:[]};function SV(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,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}SV.isMDXComponent=!0;const zV={toc:[]};function IV(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,"Return a snapshot of the node's current signal values."))}IV.isMDXComponent=!0;const WV={toc:[]};function PV(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."))}PV.isMDXComponent=!0;const GV={toc:[]};function BV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GV,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 jV(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."))}jV.isMDXComponent=!0;const qV={toc:[]};function OV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}OV.isMDXComponent=!0;const HV={toc:[]};function $V(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,"An index at which to insert the node(s)."))}$V.isMDXComponent=!0;const YV={toc:[]};function JV(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."))}JV.isMDXComponent=!0;const KV={toc:[]};function QV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}QV.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,"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)."))}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,"Get the resolved layout mode of this node."))}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,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}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,"Get the local-to-parent matrix for this node."))}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,"This matrix transforms vectors from local space of this node to world\nspace."))}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,"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")))}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,"Get the local-to-world matrix for this node."))}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,"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."))}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,"Rearrange this node in relation to its siblings."))}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,"Number of places by which the node should be moved."))}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 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."))}_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,"Move the node above the provided node in the parent's layout."))}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 sibling node below which to move."))}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,"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."))}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,"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."))}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,"Move the node below the provided node in the parent's layout."))}Nj.isMDXComponent=!0;const Aj={toc:[]};function Rj(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,"The sibling node below which to move."))}Rj.isMDXComponent=!0;const Ej={toc:[]};function Sj(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,"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."))}Sj.isMDXComponent=!0;const zj={toc:[]};function Ij(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zj,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."))}Ij.isMDXComponent=!0;const Wj={toc:[]};function Pj(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,"Move the node down in relation to its siblings."))}Pj.isMDXComponent=!0;const Gj={toc:[]};function Bj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gj,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."))}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 new offset."))}Uj.isMDXComponent=!0;const Vj={toc:[]};function jj(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,"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)."))}jj.isMDXComponent=!0;const qj={toc:[]};function Oj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}Oj.isMDXComponent=!0;const Hj={toc:[]};function $j(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,"The index to move the node to."))}$j.isMDXComponent=!0;const Yj={toc:[]};function Jj(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,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}Jj.isMDXComponent=!0;const Kj={toc:[]};function Qj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}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,"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."))}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,"Move the node to the top in relation to its siblings."))}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,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}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,"Move the node up in relation to its siblings."))}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,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}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,"Create a reactive copy of this node."))}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,"Properties to override."))}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,"Remove this node from the tree."))}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,"Remove all children of this node."))}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,"Render this node onto the given canvas."))}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 context to draw with."))}_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,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}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,"Change the parent of this node while keeping the absolute transform."))}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,"The new parent of this node."))}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,"Apply any new font changes to this node and all of its ancestors."))}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,"Find the closest layout root and apply any new layout changes."))}Nq.isMDXComponent=!0;const Aq={toc:[]};function Rq(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,"Whether this node should be cached or not."))}Rq.isMDXComponent=!0;const Eq={toc:[]};function Sq(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,"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."))}Sq.isMDXComponent=!0;const zq={toc:[]};function Iq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zq,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")))}Iq.isMDXComponent=!0;const Wq={toc:[]};function Pq(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,"Restore the node to its last saved state."))}Pq.isMDXComponent=!0;const Gq={toc:[]};function Bq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}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 timing function to use for the transition"))}Uq.isMDXComponent=!0;const Vq={toc:[]};function jq(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,"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."))}jq.isMDXComponent=!0;const qq={toc:[]};function Oq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qq,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."))}Oq.isMDXComponent=!0;const Hq={toc:[]};function $q(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,"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."))}$q.isMDXComponent=!0;const Yq={toc:[]};function Jq(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,"Prepare the given context for drawing a cached node onto it."))}Jq.isMDXComponent=!0;const Kq={toc:[]};function Qq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Kq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}Qq.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 RO(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."))}RO.isMDXComponent=!0;const EO={toc:[]};function SO(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,"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."))}SO.isMDXComponent=!0;const zO={toc:[]};function IO(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 helper signal for operating on the scale in world space."))}IO.isMDXComponent=!0;const WO={toc:[]};function PO(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")))}PO.isMDXComponent=!0;const GO={toc:[]};function BO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GO,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 jO(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."))}jO.isMDXComponent=!0;const qO={toc:[]};function OO(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,"Represents the rotation (in degrees) of this node relative to its parent."))}OO.isMDXComponent=!0;const HO={toc:[]};function $O(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,"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")))}$O.isMDXComponent=!0;const YO={toc:[]};function JO(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."))}JO.isMDXComponent=!0;const KO={toc:[]};function QO(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,"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 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,"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")))}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,"Represents the size of this node."))}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,"The nodes will be appended at the end of the children list."))}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)("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;"}))}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,"Add the given node(s) as the children of 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,"A node or an array of nodes to append."))}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,"Apply the given state to the node, setting all matching signal values to\nthe provided 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"}),(0,s.kt)("p",null,"The state to apply to the node."))}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,"Get a bounding box for the contents rendered by this node as well\nas its children."))}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)("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."))}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,"Get the offset for this node's cache canvas."))}_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,"Get a cache canvas with the contents of this node rendered onto it."))}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,"Create a copy of this node."))}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,"Properties to override."))}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,"Collect all asynchronous resources used by this node."))}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,"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."))}NH.isMDXComponent=!0;const AH={toc:[]};function RH(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,"A matrix mapping composite space to world space."))}RH.isMDXComponent=!0;const EH={toc:[]};function SH(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,"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."))}SH.isMDXComponent=!0;const zH={toc:[]};function IH(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,"Get the desired size of this node."))}IH.isMDXComponent=!0;const WH={toc:[]};function PH(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 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."))}PH.isMDXComponent=!0;const GH={toc:[]};function BH(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,"Prepare this node to be disposed of."))}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,"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."))}UH.isMDXComponent=!0;const VH={toc:[]};function jH(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,"Draw this node onto the canvas."))}jH.isMDXComponent=!0;const qH={toc:[]};function OH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}OH.isMDXComponent=!0;const HH={toc:[]};function $H(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},HH,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 YH={toc:[]};function JH(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,"Draw an overlay for this node."))}JH.isMDXComponent=!0;const KH={toc:[]};function QH(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,"The context to draw with."))}QH.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,"A local-to-screen matrix."))}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"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}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,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}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 returned bounding box should be in local space."))}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,"Get a bounding box for the contents rendered by 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,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}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,"Return a snapshot of the node's current signal 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,"Try to find a node intersecting the given position."))}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,"The searched position."))}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)("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;"}))}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,"Insert the given node(s) at the specified index in the children list."))}_$.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,"A node or an array of nodes to insert."))}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,"An index at which to insert the node(s)."))}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,"Create an instance of this node's class."))}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,"Properties to pass to the constructor."))}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,"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)."))}N$.isMDXComponent=!0;const A$={toc:[]};function R$(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,"Get the resolved layout mode of this node."))}R$.isMDXComponent=!0;const E$={toc:[]};function S$(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,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}S$.isMDXComponent=!0;const z$={toc:[]};function I$(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,"Get the local-to-parent matrix for this node."))}I$.isMDXComponent=!0;
10const W$={toc:[]};function P$(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 matrix transforms vectors from local space of this node to world\nspace."))}P$.isMDXComponent=!0;const G$={toc:[]};function B$(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,"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")))}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,"Get the local-to-world matrix for this node."))}U$.isMDXComponent=!0;const V$={toc:[]};function j$(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,"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."))}j$.isMDXComponent=!0;const q$={toc:[]};function O$(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,"Rearrange this node in relation to its siblings."))}O$.isMDXComponent=!0;const H$={toc:[]};function $$(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."))}$$.isMDXComponent=!0;const Y$={toc:[]};function J$(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,"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."))}J$.isMDXComponent=!0;const K$={toc:[]};function Q$(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,"Move the node above the provided node in the parent's layout."))}Q$.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 RY(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."))}RY.isMDXComponent=!0;const EY={toc:[]};function SY(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 node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}SY.isMDXComponent=!0;const zY={toc:[]};function IY(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,"Move the node up in relation to its siblings."))}IY.isMDXComponent=!0;const WY={toc:[]};function PY(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."))}PY.isMDXComponent=!0;const GY={toc:[]};function BY(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,"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 jY(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."))}jY.isMDXComponent=!0;const qY={toc:[]};function OY(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,"Remove all children of this node."))}OY.isMDXComponent=!0;const HY={toc:[]};function $Y(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,"Render this node onto the given canvas."))}$Y.isMDXComponent=!0;const YY={toc:[]};function JY(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."))}JY.isMDXComponent=!0;const KY={toc:[]};function QY(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,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}QY.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,"Change the parent of this node while keeping the absolute transform."))}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,"The new parent of this node."))}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,"Apply any new font changes to this node and all of its ancestors."))}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,"Find the closest layout root and apply any new layout changes."))}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,"Whether this node should be cached or not."))}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,"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."))}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)("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")))}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,"Restore the node to its last saved state."))}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,"The duration of the transition"))}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,"The timing function to use for the transition"))}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,"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."))}_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,"Push a snapshot of the node's current state onto the node's state stack."))}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,"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."))}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,"Prepare the given context for drawing a cached node onto it."))}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,"The context using which the cache will be drawn."))}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,"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."))}NJ.isMDXComponent=!0;const AJ={toc:[]};function RJ(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,"Create a copy of this node."))}RJ.isMDXComponent=!0;const EJ={toc:[]};function SJ(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,"Properties to override."))}SJ.isMDXComponent=!0;const zJ={toc:[]};function IJ(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,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}IJ.isMDXComponent=!0;const WJ={toc:[]};function PJ(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,"Wait for any asynchronous resources that this node or its children have."))}PJ.isMDXComponent=!0;const GJ={toc:[]};function BJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}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,"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."))}UJ.isMDXComponent=!0;const VJ={toc:[]};function jJ(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,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}jJ.isMDXComponent=!0;const qJ={toc:[]};function OJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}OJ.isMDXComponent=!0;const HJ={toc:[]};function $J(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,"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")))}$J.isMDXComponent=!0;const YJ={toc:[]};function JJ(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,"Get the world-to-local matrix for this node."))}JJ.isMDXComponent=!0;const KJ={toc:[]};function QJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KJ,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."))}QJ.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,"Get the world-to-parent matrix for this node."))}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,"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."))}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,"A helper signal for operating on the position in world space."))}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,"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."))}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,"A helper signal for operating on the rotation in world space."))}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,"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."))}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)("p",null,"A helper signal for operating on the scale in world space."))}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,"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")))}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,"Represents the position of this node in local space of its parent."))}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,"Represents the rotation (in degrees) of this node relative to its parent."))}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,"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")))}_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,"Represents the scale of this node in local space of its parent."))}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,"The nodes will be appended at the end of the children list."))}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)("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;"}))}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,"Add the given node(s) as the children of this node."))}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,"A node or an array of nodes to append."))}NK.isMDXComponent=!0;const AK={toc:[]};function RK(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,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}RK.isMDXComponent=!0;const EK={toc:[]};function SK(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 state to apply to the node."))}SK.isMDXComponent=!0;const zK={toc:[]};function IK(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,"Get a bounding box for the contents rendered by this node as well\nas its children."))}IK.isMDXComponent=!0;const WK={toc:[]};function PK(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,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}PK.isMDXComponent=!0;const GK={toc:[]};function BK(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,"Get the offset for this node's cache canvas."))}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,"Get a cache canvas with the contents of this node rendered onto it."))}UK.isMDXComponent=!0;const VK={toc:[]};function jK(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,"Create a copy of this node."))}jK.isMDXComponent=!0;const qK={toc:[]};function OK(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,"Properties to override."))}OK.isMDXComponent=!0;const HK={toc:[]};function $K(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,"Collect all asynchronous resources used by this node."))}$K.isMDXComponent=!0;const YK={toc:[]};function JK(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,"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."))}JK.isMDXComponent=!0;const KK={toc:[]};function QK(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,"A matrix mapping composite space to world space."))}QK.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 RQ(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."))}RQ.isMDXComponent=!0;const EQ={toc:[]};function SQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},EQ,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;"}))}SQ.isMDXComponent=!0;const zQ={toc:[]};function IQ(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,"Insert the given node(s) at the specified index in the children list."))}IQ.isMDXComponent=!0;const WQ={toc:[]};function PQ(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."))}PQ.isMDXComponent=!0;const GQ={toc:[]};function BQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},GQ,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 jQ(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."))}jQ.isMDXComponent=!0;const qQ={toc:[]};function OQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qQ,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 HQ={toc:[]};function $Q(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,"Get the local-to-parent matrix for this node."))}$Q.isMDXComponent=!0;const YQ={toc:[]};function JQ(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."))}JQ.isMDXComponent=!0;const KQ={toc:[]};function QQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},KQ,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 R0(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."))}R0.isMDXComponent=!0;const E0={toc:[]};function S0(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,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}S0.isMDXComponent=!0;const z0={toc:[]};function I0(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 bottom in relation to its siblings."))}I0.isMDXComponent=!0;const W0={toc:[]};function P0(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."))}P0.isMDXComponent=!0;const G0={toc:[]};function B0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G0,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 j0(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."))}j0.isMDXComponent=!0;const q0={toc:[]};function O0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q0,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 H0={toc:[]};function $0(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,"Create a reactive copy of this node."))}$0.isMDXComponent=!0;const Y0={toc:[]};function J0(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."))}J0.isMDXComponent=!0;const K0={toc:[]};function Q0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K0,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 R2(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."))}R2.isMDXComponent=!0;const E2={toc:[]};function S2(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,"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."))}S2.isMDXComponent=!0;const z2={toc:[]};function I2(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,"Create a copy of this node."))}I2.isMDXComponent=!0;const W2={toc:[]};function P2(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."))}P2.isMDXComponent=!0;const G2={toc:[]};function B2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G2,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 j2(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."))}j2.isMDXComponent=!0;const q2={toc:[]};function O2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q2,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 H2={toc:[]};function $2(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 matrix transforms vectors from world space to local space of this\nnode."))}$2.isMDXComponent=!0;const Y2={toc:[]};function J2(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")))}J2.isMDXComponent=!0;const K2={toc:[]};function Q2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K2,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 R1(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")))}R1.isMDXComponent=!0;const E1={toc:[]};function S1(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,"Represents the scale of this node in local space of its parent."))}S1.isMDXComponent=!0;const z1={toc:[]};function I1(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,"For example, a value of 6 creates a hexagon."))}I1.isMDXComponent=!0;const W1={toc:[]};function P1(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")))}P1.isMDXComponent=!0;const G1={toc:[]};function B1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G1,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 j1(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")))}j1.isMDXComponent=!0;const q1={toc:[]};function O1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}O1.isMDXComponent=!0;const H1={toc:[]};function $1(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,"The nodes will be appended at the end of the children list."))}$1.isMDXComponent=!0;const Y1={toc:[]};function J1(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;"}))}J1.isMDXComponent=!0;const K1={toc:[]};function Q1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K1,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 R3(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."))}R3.isMDXComponent=!0;const E3={toc:[]};function S3(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,"Draw this node onto the canvas."))}S3.isMDXComponent=!0;const z3={toc:[]};function I3(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,"The context to draw with."))}I3.isMDXComponent=!0;const W3={toc:[]};function P3(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."))}P3.isMDXComponent=!0;const G3={toc:[]};function B3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G3,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 j3(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."))}j3.isMDXComponent=!0;const q3={toc:[]};function O3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q3,e,{components:n,mdxType:"MDXLayout"}
10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}O3.isMDXComponent=!0;const H3={toc:[]};function $3(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,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}$3.isMDXComponent=!0;const Y3={toc:[]};function J3(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."))}J3.isMDXComponent=!0;const K3={toc:[]};function Q3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K3,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 R4(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."))}R4.isMDXComponent=!0;const E4={toc:[]};function S4(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,"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."))}S4.isMDXComponent=!0;const z4={toc:[]};function I4(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,"Rearrange this node in relation to its siblings."))}I4.isMDXComponent=!0;const W4={toc:[]};function P4(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."))}P4.isMDXComponent=!0;const G4={toc:[]};function B4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G4,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 j4(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."))}j4.isMDXComponent=!0;const q4={toc:[]};function O4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q4,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 H4={toc:[]};function $4(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,"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."))}$4.isMDXComponent=!0;const Y4={toc:[]};function J4(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."))}J4.isMDXComponent=!0;const K4={toc:[]};function Q4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K4,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 R6(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."))}R6.isMDXComponent=!0;const E6={toc:[]};function S6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},E6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}S6.isMDXComponent=!0;const z6={toc:[]};function I6(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,"Remove all children of this node."))}I6.isMDXComponent=!0;const W6={toc:[]};function P6(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."))}P6.isMDXComponent=!0;const G6={toc:[]};function B6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G6,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 j6(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."))}j6.isMDXComponent=!0;const q6={toc:[]};function O6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}O6.isMDXComponent=!0;const H6={toc:[]};function $6(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,"Apply any new font changes to this node and all of its ancestors."))}$6.isMDXComponent=!0;const Y6={toc:[]};function J6(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."))}J6.isMDXComponent=!0;const K6={toc:[]};function Q6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K6,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 R8(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."))}R8.isMDXComponent=!0;const E8={toc:[]};function S8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},E8,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."))}S8.isMDXComponent=!0;const z8={toc:[]};function I8(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,"This matrix transforms vectors from world space to local space of this\nnode."))}I8.isMDXComponent=!0;const W8={toc:[]};function P8(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")))}P8.isMDXComponent=!0;const G8={toc:[]};function B8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G8,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 j8(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."))}j8.isMDXComponent=!0;const q8={toc:[]};function O8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q8,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 H8={toc:[]};function $8(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,"A helper signal for operating on the position in world space."))}$8.isMDXComponent=!0;const Y8={toc:[]};function J8(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."))}J8.isMDXComponent=!0;const K8={toc:[]};function Q8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K8,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 R5(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")))}R5.isMDXComponent=!0;const E5={toc:[]};function S5(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,"Will set the corner drawing method to smooth corners."))}S5.isMDXComponent=!0;const z5={toc:[]};function I5(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,"The nodes will be appended at the end of the children list."))}I5.isMDXComponent=!0;const W5={toc:[]};function P5(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;"}))}P5.isMDXComponent=!0;const G5={toc:[]};function B5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G5,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 j5(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."))}j5.isMDXComponent=!0;const q5={toc:[]};function O5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}O5.isMDXComponent=!0;const H5={toc:[]};function $5(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,"Get a bounding box for the contents rendered by this node as well\nas its children."))}$5.isMDXComponent=!0;const Y5={toc:[]};function J5(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."))}J5.isMDXComponent=!0;const K5={toc:[]};function Q5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K5,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 R7(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."))}R7.isMDXComponent=!0;const E7={toc:[]};function S7(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,"The returned bounding box should be in local space."))}S7.isMDXComponent=!0;const z7={toc:[]};function I7(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,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}I7.isMDXComponent=!0;const W7={toc:[]};function P7(t){let{components:n,...e}=t;return(0,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."))}P7.isMDXComponent=!0;const G7={toc:[]};function B7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G7,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 j7(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."))}j7.isMDXComponent=!0;const q7={toc:[]};function O7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}O7.isMDXComponent=!0;const H7={toc:[]};function $7(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,"The searched position."))}$7.isMDXComponent=!0;const Y7={toc:[]};function J7(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;"}))}J7.isMDXComponent=!0;const K7={toc:[]};function Q7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K7,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 R9(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."))}R9.isMDXComponent=!0;const E9={toc:[]};function S9(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,"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."))}S9.isMDXComponent=!0;const z9={toc:[]};function I9(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,"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 P9(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."))}P9.isMDXComponent=!0;const G9={toc:[]};function B9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},G9,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 j9(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."))}j9.isMDXComponent=!0;const q9={toc:[]};function O9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},q9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}O9.isMDXComponent=!0;const H9={toc:[]};function $9(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,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}$9.isMDXComponent=!0;const Y9={toc:[]};function J9(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."))}J9.isMDXComponent=!0;const K9={toc:[]};function Q9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},K9,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 Rtt(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."))}Rtt.isMDXComponent=!0;const Ett={toc:[]};function Stt(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 new parent of this node."))}Stt.isMDXComponent=!0;const ztt={toc:[]};function Itt(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,"Apply any new font changes to this node and all of its ancestors."))}Itt.isMDXComponent=!0;const Wtt={toc:[]};function Ptt(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."))}Ptt.isMDXComponent=!0;const Gtt={toc:[]};function Btt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gtt,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 jtt(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")))}jtt.isMDXComponent=!0;const qtt={toc:[]};function Ott(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}Ott.isMDXComponent=!0;const Htt={toc:[]};function $tt(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,"The duration of the transition"))}$tt.isMDXComponent=!0;const Ytt={toc:[]};function Jtt(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"))}Jtt.isMDXComponent=!0;const Ktt={toc:[]};function Qtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ktt,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 Rnt(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."))}Rnt.isMDXComponent=!0;const Ent={toc:[]};function Snt(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,"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."))}Snt.isMDXComponent=!0;const znt={toc:[]};function Int(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,"A helper signal for operating on the position in world space."))}Int.isMDXComponent=!0;const Wnt={toc:[]};function Pnt(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."))}Pnt.isMDXComponent=!0;const Gnt={toc:[]};function Bnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Gnt,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 jnt(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."))}jnt.isMDXComponent=!0;const qnt={toc:[]};function Ont(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},qnt,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 Hnt={toc:[]};function $nt(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,"Represents the offset of this node's origin."))}$nt.isMDXComponent=!0;const Ynt={toc:[]};function Jnt(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")))}Jnt.isMDXComponent=!0;const Knt={toc:[]};function Qnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Knt,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 Ret={toc:[]};function Eet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ret,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Eet.isMDXComponent=!0;const Set={toc:[]};function zet(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,"Properties to override."))}zet.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 Pet={toc:[]};function Get(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,"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."))}Get.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 jet={toc:[]};function qet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}qet.isMDXComponent=!0;const Oet={toc:[]};function Het(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."))}Het.isMDXComponent=!0;const $et={toc:[]};function Yet(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,"Prepare this node to be disposed of."))}Yet.isMDXComponent=!0;const Jet={toc:[]};function Ket(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jet,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."))}Ket.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 Rot={toc:[]};function Eot(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,"An index at which to insert the node(s)."))}Eot.isMDXComponent=!0;const Sot={toc:[]};function zot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}zot.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 Pot={toc:[]};function Got(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pot,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)."))}Got.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 jot={toc:[]};function qot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}qot.isMDXComponent=!0;const Oot={toc:[]};function Hot(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."))}Hot.isMDXComponent=!0;const $ot={toc:[]};function Yot(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,"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 Jot={toc:[]};function Kot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}Kot.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 Rpt={toc:[]};function Ept(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 index to move the node to."))}Ept.isMDXComponent=!0;const Spt={toc:[]};function zpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Spt,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."))}zpt.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 Ppt={toc:[]};function Gpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ppt,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."))}Gpt.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 jpt={toc:[]};function qpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}qpt.isMDXComponent=!0;const Opt={toc:[]};function Hpt(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."))}Hpt.isMDXComponent=!0;const $pt={toc:[]};function Ypt(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,"Create a reactive copy of this node."))}Ypt.isMDXComponent=!0;const Jpt={toc:[]};function Kpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Kpt.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 Rrt={toc:[]};function Ert(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,"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."))}Ert.isMDXComponent=!0;const Srt={toc:[]};function zrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Srt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}zrt.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 Prt={toc:[]};function Grt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Prt,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."))}Grt.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 jrt={toc:[]};function qrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jrt,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."))}qrt.isMDXComponent=!0;const Ort={toc:[]};function Hrt(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."))}Hrt.isMDXComponent=!0;const $rt={toc:[]};function Yrt(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,"Apply any new layout changes to this node and its children."))}Yrt.isMDXComponent=!0;const Jrt={toc:[]};function Krt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jrt,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."))}Krt.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 Rst={toc:[]};function Est(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,"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")))}Est.isMDXComponent=!0;const Sst={toc:[]};function zst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}zst.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 Pst={toc:[]};function Gst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pst,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")))}Gst.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 jst={toc:[]};function qst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jst,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;"}))}qst.isMDXComponent=!0;const Ost={toc:[]};function Hst(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."))}Hst.isMDXComponent=!0;const $st={toc:[]};function Yst(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 node or an array of nodes to append."))}Yst.isMDXComponent=!0;const Jst={toc:[]};function Kst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jst,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."))}Kst.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 Rct={toc:[]};function Ect(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,"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."))}Ect.isMDXComponent=!0;const Sct={toc:[]};function zct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}zct.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 Pct={toc:[]};function Gct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}Gct.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 jct={toc:[]};function qct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}qct.isMDXComponent=!0;const Oct={toc:[]};function Hct(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."))}Hct.isMDXComponent=!0;const $ct={toc:[]};function Yct(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,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Yct.isMDXComponent=!0;const Jct={toc:[]};function Kct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}Kct.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 Rat={toc:[]};function Eat(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,"Number of places by which the node should be moved."))}Eat.isMDXComponent=!0;const Sat={toc:[]};function zat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sat,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."))}zat.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 Pat={toc:[]};function Gat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Gat.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 jat={toc:[]};function qat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}qat.isMDXComponent=!0;const Oat={toc:[]};function Hat(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."))}Hat.isMDXComponent=!0;const $at={toc:[]};function Yat(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,"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 Jat={toc:[]};function Kat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jat,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."))}Kat.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 Rit={toc:[]};function Eit(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,"Render this node onto the given canvas."))}Eit.isMDXComponent=!0;const Sit={toc:[]};function zit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}zit.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 Pit={toc:[]};function Git(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}Git.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 jit={toc:[]};function qit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}qit.isMDXComponent=!0;const Oit={toc:[]};function Hit(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."))}Hit.isMDXComponent=!0;const $it={toc:[]};function Yit(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,"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 Jit={toc:[]};function Kit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jit,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")))}Kit.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 Rlt={toc:[]};function Elt(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,"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")))}Elt.isMDXComponent=!0;const Slt={toc:[]};function zlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Slt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}zlt.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 Plt={toc:[]};function Glt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Plt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}Glt.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 jlt={toc:[]};function qlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jlt,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."))}qlt.isMDXComponent=!0;const Olt={toc:[]};function Hlt(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."))}Hlt.isMDXComponent=!0;const $lt={toc:[]};function Ylt(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,"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 Jlt={toc:[]};function Klt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}Klt.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 Rut={toc:[]};function Eut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rut,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;"}))}Eut.isMDXComponent=!0;const Sut={toc:[]};function zut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}zut.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 Put={toc:[]};function Gut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Put,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."))}Gut.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 jut={toc:[]};function qut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jut,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."))}qut.isMDXComponent=!0;const Out={toc:[]};function Hut(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."))}Hut.isMDXComponent=!0;const $ut={toc:[]};function Yut(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,"Get a cache canvas with the contents of this node rendered onto it."))}Yut.isMDXComponent=!0;const Jut={toc:[]};function Kut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Kut.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 Rmt={toc:[]};function Emt(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,"The returned bounding box should be in local space."))}Emt.isMDXComponent=!0;const Smt={toc:[]};function zmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Smt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}zmt.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 Pmt={toc:[]};function Gmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}Gmt.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 jmt={toc:[]};function qmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jmt,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;"}))}qmt.isMDXComponent=!0;const Omt={toc:[]};function Hmt(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."))}Hmt.isMDXComponent=!0;const $mt={toc:[]};function Ymt(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,"A node or an array of nodes to insert."))}Ymt.isMDXComponent=!0;const Jmt={toc:[]};function Kmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}Kmt.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 Rdt={toc:[]};function Edt(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,"Move the node below the provided node in the parent's layout."))}Edt.isMDXComponent=!0;const Sdt={toc:[]};function zdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}zdt.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 Pdt={toc:[]};function Gdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pdt,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."))}Gdt.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 jdt={toc:[]};function qdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}qdt.isMDXComponent=!0;const Odt={toc:[]};function Hdt(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)."))}Hdt.isMDXComponent=!0;const $dt={toc:[]};function Ydt(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,"Move the node to the provided position relative to its siblings."))}Ydt.isMDXComponent=!0;const Jdt={toc:[]};function Kdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}Kdt.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 Rht={toc:[]};function Eht(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,"Find the closest layout root and apply any new layout changes."))}Eht.isMDXComponent=!0;const Sht={toc:[]};function zht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}zht.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 Pht={toc:[]};function Ght(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pht,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")))}Ght.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 jht={toc:[]};function qht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}qht.isMDXComponent=!0;const Oht={toc:[]};function Hht(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."))}Hht.isMDXComponent=!0;const $ht={toc:[]};function Yht(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,"Push a snapshot of the node's current state onto the node's state stack."))}Yht.isMDXComponent=!0;const Jht={toc:[]};function Kht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jht,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."))}Kht.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 Rkt={toc:[]};function Ekt(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,"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."))}Ekt.isMDXComponent=!0;const Skt={toc:[]};function zkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Skt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}zkt.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 Pkt={toc:[]};function Gkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}Gkt.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 jkt={toc:[]};function qkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jkt,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"),"."))}qkt.isMDXComponent=!0;const Okt={toc:[]};function Hkt(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")))}Hkt.isMDXComponent=!0;const $kt={toc:[]};function Ykt(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,"Represents the offset of this node's origin."))}Ykt.isMDXComponent=!0;const Jkt={toc:[]};function Kkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jkt,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")))}Kkt.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 Ryt={toc:[]};function Eyt(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,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}Eyt.isMDXComponent=!0;const Syt={toc:[]};function zyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Syt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}zyt.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 Pyt={toc:[]};function Gyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Gyt.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 jyt={toc:[]};function qyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jyt,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."))}qyt.isMDXComponent=!0;const Oyt={toc:[]};function Hyt(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."))}Hyt.isMDXComponent=!0;const $yt={toc:[]};function Yyt(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 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 Jyt={toc:[]};function Kyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}Kyt.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 Rft={toc:[]};function Eft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rft,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;"}))}Eft.isMDXComponent=!0;const Sft={toc:[]};function zft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}zft.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 Pft={toc:[]};function Gft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}Gft.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 jft={toc:[]};function qft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jft,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)."))}qft.isMDXComponent=!0;const Oft={toc:[]};function Hft(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."))}Hft.isMDXComponent=!0;const $ft={toc:[]};function Yft(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,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Yft.isMDXComponent=!0;const Jft={toc:[]};function Kft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}Kft.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 RMt={toc:[]};function EMt(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,"The new offset."))}EMt.isMDXComponent=!0;const SMt={toc:[]};function zMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SMt,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)."))}zMt.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 PMt={toc:[]};function GMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}GMt.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 jMt={toc:[]};function qMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jMt,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."))}qMt.isMDXComponent=!0;const OMt={toc:[]};function HMt(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."))}HMt.isMDXComponent=!0;const $Mt={toc:[]};function YMt(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 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 JMt={toc:[]};function KMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}KMt.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 Rwt={toc:[]};function Ewt(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,"The timing function to use for the transition"))}Ewt.isMDXComponent=!0;const Swt={toc:[]};function zwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Swt,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."))}zwt.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 Pwt={toc:[]};function Gwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pwt,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."))}Gwt.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 jwt={toc:[]};function qwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jwt,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."))}qwt.isMDXComponent=!0;const Owt={toc:[]};function Hwt(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."))}Hwt.isMDXComponent=!0;const $wt={toc:[]};function Ywt(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,"Properties to override."))}Ywt.isMDXComponent=!0;const Jwt={toc:[]};function Kwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jwt,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."))}Kwt.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 RDt={toc:[]};function EDt(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,"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."))}EDt.isMDXComponent=!0;const SDt={toc:[]};function zDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SDt,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"),"."))}zDt.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/20230315084657/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 PDt={toc:[]};function GDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The identifier of the icon."))}GDt.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 jDt={toc:[]};function qDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jDt,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."))}qDt.isMDXComponent=!0;const ODt={toc:[]};function HDt(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"),"."))}HDt.isMDXComponent=!0;const $Dt={toc:[]};function YDt(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,"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 JDt={toc:[]};function KDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}KDt.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 R_t={toc:[]};function E_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)("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")))}E_t.isMDXComponent=!0;const S_t={toc:[]};function z_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the raw value of this signal."))}z_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 P_t={toc:[]};function G_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},P_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}G_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;
10const j_t={toc:[]};function q_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},j_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Compute the current value of the signal and immediately set it."))}q_t.isMDXComponent=!0;const O_t={toc:[]};function H_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."))}H_t.isMDXComponent=!0;const $_t={toc:[]};function Y_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$_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 J_t={toc:[]};function K_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},J_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a cloneable property decorator."))}K_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."),(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 RXt={toc:[]};function EXt(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 signal interpolation function decorator."))}EXt.isMDXComponent=!0;const SXt={toc:[]};function zXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The interpolation function for the property."))}zXt.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 PXt={toc:[]};function GXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},PXt,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")))}GXt.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 jXt={toc:[]};function qXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jXt,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.")))}qXt.isMDXComponent=!0;const OXt={toc:[]};function HXt(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")))}HXt.isMDXComponent=!0;const $Xt={toc:[]};function YXt(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,"Create a signal decorator."))}YXt.isMDXComponent=!0;const JXt={toc:[]};function KXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},JXt,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."))}KXt.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/20230315084657/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/20230315084657/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/20230315084657/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/20230315084657/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 Rgt={toc:[]};function Egt(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,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084657/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate"},(0,s.kt)("inlineCode",{parentName:"a"},"hue"))," filter."))}Egt.isMDXComponent=!0;const Sgt={toc:[]};function zgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter in degrees."))}zgt.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/20230315084657/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert"},(0,s.kt)("inlineCode",{parentName:"a"},"invert"))," filter."))}Wgt.isMDXComponent=!0;const Pgt={toc:[]};function Ggt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Pgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}Ggt.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/20230315084657/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 jgt={toc:[]};function qgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},jgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084657/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia"},(0,s.kt)("inlineCode",{parentName:"a"},"sepia"))," filter."))}qgt.isMDXComponent=!0;const Ogt={toc:[]};function Hgt(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."))}Hgt.isMDXComponent=!0;const $gt={toc:[]};function Ygt(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,"This method makes sure that the context of this scene is globally available\nduring the execution of the callback."))}Ygt.isMDXComponent=!0;const Jgt={toc:[]};function Kgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Jgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Invoke the given callback in the context of this scene."))}Kgt.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)=>{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)=>{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(P,{key:n,type:t})))))}function g(t){let{type:n}=t;return o.createElement(y,{type:"keyword"},n.name)}function x(t){let{type:n}=t;return n.elements?o.createElement(D,{type:f.Square},n.elements.map(((t,n)=>o.createElement(P,{key:n,type:t})))):o.createElement(o.Fragment,null,"[]")}function C(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.elementType}),"[]")}function T(t){let{type:n}=t;return o.createElement(D,{type:f.Parentheses,separator:M.Pipe},n.types.map(((t,n)=>o.createElement(P,{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(P,{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(P,{key:n,type:t}))))}function N(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"string"},"`",n.head),n.tail.map(((t,n)=>{let[e,p]=t;return o.createElement(o.Fragment,null,"${",o.createElement(P,{key:n,type:e}),"}",o.createElement(y,{type:"string"},p))})),o.createElement(y,{type:"string"},"`"))}function A(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"typeof "),o.createElement(P,{type:n.queryType}))}function R(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.checkType}),o.createElement(y,{type:"keyword"}," extends "),o.createElement(P,{type:n.extendsType})," ? ",o.createElement(P,{type:n.trueType})," : ",o.createElement(P,{type:n.falseType}))}function E(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 S(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.objectType}),"[",o.createElement(P,{type:n.indexType}),"]")}function z(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},n.operator," "),o.createElement(P,{type:n.target}))}function I(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(D,{type:f.Curly},o.createElement(o.Fragment,null,"[",o.createElement(y,{type:"class"},n.parameter),o.createElement(y,{type:"keyword"}," in "),o.createElement(P,{type:n.parameterType}),"]: ",o.createElement(P,{type:n.templateType}))))}function W(t){let{type:n}=t;return o.createElement(o.Fragment,null,n.name,": ",o.createElement(P,{type:n.element}))}function P(t){const n=(0,o.useMemo)((()=>{switch(t.type.type){case"rest":case"optional":case"unknown":break;case"typeOperator":return z;case"conditional":return R;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 E;case"mapped":return I;case"template-literal":return N;case"indexedAccess":return S}throw new Error(`Missing component for type: ${t.type.type}`)}),[t.type]);return o.createElement(n,t)}function G(t){let{flags:n,explicitAccessModifier:e}=t;const p=[];return null!=n&&n.isAbstract&&p.push("abstract"),null!=n&&n.isStatic&&p.push("static"),null!=n&&n.isConst&&p.push("const"),null!=n&&n.isReadonly&&p.push("readonly"),null!=n&&n.isPrivate&&p.push("private"),null!=n&&n.isProtected&&p.push("protected"),(null==n||!n.isPublic)&&(!e||null!=n&&n.isProtected||null!=n&&n.isPrivate)||p.push("public"),o.createElement(o.Fragment,null,p.map((t=>o.createElement(y,{key:t,type:"keyword"},t," "))))}function B(t){let{reflection:n}=t;const e="__namedParameters"===n.name?"{...}":n.name;return o.createElement(o.Fragment,null,o.createElement(G,{flags:n.flags}),n.flags.isRest&&"...",o.createElement(y,{id:n.anchor,to:n.anchor?`#${n.anchor}`:void 0,type:"plain"},e),n.flags.isOptional&&"?",": ",n.type&&o.createElement(P,{type:n.type}),n.defaultValue&&o.createElement(o.Fragment,null," = ",o.createElement(y,{type:"plain"},n.defaultValue)))}function F(t){let{reflection:n}=t;return o.createElement(o.Fragment,null,o.createElement(G,{flags:n.flags}),n.varianceModifier&&o.createElement(y,{type:"keyword"},n.varianceModifier," "),o.createElement(y,{id:n.anchor,to:n.anchor?`#${n.anchor}`:void 0,type:"class-name"},n.name),n.type&&o.createElement(o.Fragment,null," extends ",o.createElement(P,{type:n.type})),n.default&&o.createElement(o.Fragment,null," = ",o.createElement(P,{type:n.default})))}function 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(G,{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(P,{type:r.type})))}function V(t){let{reflection:n}=t;return o.createElement(B,{reflection:n})}const j={[p.W.Namespace]:"namespace",[p.W.Enum]:"enum",[p.W.Class]:"class",[p.W.Interface]:"interface"};function q(t){var n,e,p;let{reflection:r}=t;const s=(0,_.in)();return o.createElement(o.Fragment,null,o.createElement(G,{flags:r.flags}),o.createElement(y,{type:"keyword"},j[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(P,{key:n,type:t}))))),!(null==(p=r.implementedTypes)||!p.length)&&o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"implements "),o.createElement(D,null,r.implementedTypes.map(((t,n)=>o.createElement(P,{key:n,type:t}))))))}function O(t){let{reflection:n}=t;const e=(0,_.in)();return o.createElement(o.Fragment,null,o.createElement(G,{flags:n.flags}),o.createElement(y,{type:"keyword"},"type "),o.createElement(y,{type:"class-name"},n.name),n.typeParameters&&o.createElement(D,{type:f.Angle},n.typeParameters.map((t=>o.createElement(F,{key:t.id,reflection:e(t)}))))," = ",o.createElement(P,{type:n.type}))}function H(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 $(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 q;case p.W.Constructor:return U;case p.W.Property:return V;case p.W.Method:return $;case p.W.CallSignature:case p.W.IndexSignature:case p.W.ConstructorSignature:case p.W.Parameter:break;case p.W.TypeLiteral:return H;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 J(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 K=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(J,null,o.createElement(U,{reflection:t,flags:e})))))),o.createElement(K.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(J,null,o.createElement(Y,{reflection:c})))),o.createElement(it,{kind:c.kind},o.createElement(K.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 Rt(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 Et(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(J,null,o.createElement(V,{reflection:p})))),o.createElement(K.Z,{comment:p.comment}),p.inheritedFrom&&o.createElement("small",null,"Inherited from"," ",o.createElement("code",null,o.createElement(X,{type:p.inheritedFrom}))))}function St(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(J,null,o.createElement(Y,{reflection:r})))),o.createElement(K.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 zt=e(8128);function It(t){var n;let{reflection:e}=t;return o.createElement(o.Fragment,null,o.createElement(zt.Z,{language:"ts"},"import ","{...}",' from "',e.importPath,'";'),o.createElement(it,{kind:e.kind},o.createElement(K.Z,{comment:e.comment})),null==(n=e.groups)?void 0:n.map((t=>o.createElement(Nt,{group:t,key:t.title,project:e.project}))))}const Wt="cardContainer_ybwo",Pt="cardTitle_Ehd1",Gt="cardDescription_b6wr";function 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",Pt)},o.createElement("code",null,t.name)),o.createElement("div",{className:(0,c.Z)("text--truncate",Gt)},(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 Rt;case p.W.Variable:case p.W.Property:case p.W.EnumMember:return Et;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 St;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)=>{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={}))},8617:(t,n,e)=>{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)=>{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;
10return 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)=>{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)}},6412:(t,n,e)=>{e.r(n),e.d(n,{assets:()=>i,contentTitle:()=>c,default:()=>m,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var o=e(7896),p=(e(2784),e(876)),r=(e(8128),e(2072));const s={sidebar_position:3,slug:"/hierarchy"},c="Scene hierarchy",a={unversionedId:"getting-started/hierarchy",id:"getting-started/hierarchy",title:"Scene hierarchy",description:"Scenes are collections of nodes displayed in your animation. They're organized",source:"@site/docs/getting-started/hierarchy.mdx",sourceDirName:"getting-started",slug:"/hierarchy",permalink:"/docs/hierarchy",draft:!1,editUrl:"http://web.archive.org/web/20230315084657/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/getting-started/hierarchy.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:3,frontMatter:{sidebar_position:3,slug:"/hierarchy"},sidebar:"docs",previous:{title:"Animation flow",permalink:"/docs/flow"},next:{title:"Positioning",permalink:"/docs/positioning"}},i={},l=[{value:"<code>Node.add</code>",id:"nodeadd",level:2},{value:"<code>Node.insert</code>
10",id:"nodeinsert",level:2},{value:"<code>Node.remove</code>",id:"noderemove",level:2},{value:"<code>Node.reparent</code>",id:"nodereparent",level:2},{value:"<code>Node.moveUp</code>",id:"nodemoveup",level:2},{value:"<code>Node.moveDown</code>",id:"nodemovedown",level:2},{value:"<code>Node.moveToTop</code>",id:"nodemovetotop",level:2},{value:"<code>Node.moveToBottom</code>",id:"nodemovetobottom",level:2},{value:"<code>Node.moveTo</code>",id:"nodemoveto",level:2},{value:"<code>Node.moveAbove</code>",id:"nodemoveabove",level:2},{value:"<code>Node.moveBelow</code>",id:"nodemovebelow",level:2},{value:"<code>Node.removeChildren</code>",id:"noderemovechildren",level:2}],u={toc:l};function m(t){let{components:n,...e}=t;return(0,p.kt)("wrapper",(0,o.Z)({},u,e,{components:n,mdxType:"MDXLayout"}),(0,p.kt)("h1",{id:"scene-hierarchy"},"Scene hierarchy"),(0,p.kt)("p",null,"Scenes are collections of nodes displayed in your animation. They're organized\nin a tree hierarchy, with the scene view at its root. This concept is similar to\nthe Document Object Model used to represent HTML and XML documents."),(0,p.kt)("p",null,"Here's an example of a simple scene hierarchy together with its object\nrepresentation:"),(0,p.kt)("div",{className:"row margin-bottom--md"},(0,p.kt)("div",{className:"col col--6"},(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-tsx"},"view.add(\n <>\n <Circle />\n <Layout>\n <Rect />\n <Txt>Hi</Txt>\n </Layout>\n </>,\n);\n"))),(0,p.kt)("div",{className:"col col--6"},(0,p.kt)("mermaid",{value:"graph TD;\n view[Scene View]\n circle([Circle])\n layout([Layout])\n rect([Rect])\n text([text 'Hi'])\n view--\x3ecircle;\n view--\x3elayout;\n layout--\x3erect;\n layout--\x3etext;"}))),(0,p.kt)("p",null,"Each node is an instance of a class extending the base ",(0,p.kt)("a",{parentName:"p",href:"/api/2d/components/Node"},(0,p.kt)("inlineCode",{parentName:"a"},"Node"))," class. To\nmake the code more readable, Motion Canvas uses a custom\n",(0,p.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084657/https://reactjs.org/docs/introducing-jsx.html"},"JSX")," runtime. This way, instead\nof instantiating the nodes ourselves, we can write an XML-like markup. Note that\nMotion Canvas does ",(0,p.kt)("strong",{parentName:"p"},"not")," use React itself, only JSX. There's no virtual DOM or\nreconciliation and the JSX tags are mapped directly to Node instances. These two\ncode snippets are equivalent:"),(0,p.kt)("div",{className:"row"},(0,p.kt)("div",{className:"col col--6"},(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-tsx"},"// JSX\nview.add(\n <>\n <Circle />\n <Layout>\n <Rect />\n <Txt>Hi</Txt>\n </Layout>\n </>,\n);\n"))),(0,p.kt)("div",{className:"col col--6"},(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-tsx"},"// No JSX\nview.add([\n new Circle({}),\n new Layout({\n children: [\n // highlight-start\n new Rect({}),\n new Text({text: 'Hi'}),\n ],\n }),\n]);\n")))),(0,p.kt)("p",null,"Just like with DOM, it's possible to add, remove, and rearrange nodes at any\ntime. The ",(0,p.kt)("a",{parentName:"p",href:"/api/2d/components/Node"},(0,p.kt)("inlineCode",{parentName:"a"},"Node"))," class contains the\n",(0,p.kt)("a",{parentName:"p",href:"/api/2d/components/Node#children"},(0,p.kt)("inlineCode",{parentName:"a"},"children"))," and\n",(0,p.kt)("a",{parentName:"p",href:"/api/2d/components/Node#parent"},(0,p.kt)("inlineCode",{parentName:"a"},"parent"))," properties that can be used to\ntraverse the tree. But in order to modify it, it's recommended to use the\nfollowing helper methods:"),(0,p.kt)("h2",{id:"nodeadd"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.add")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#add",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodeinsert"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.insert")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#insert",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"noderemove"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.remove")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#remove",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodereparent"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.reparent")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#reparent",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodemoveup"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.moveUp")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#moveUp",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodemovedown"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.moveDown")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#moveDown",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodemovetotop"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.moveToTop")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#moveToTop",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodemovetobottom"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.moveToBottom")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#moveToBottom",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodemoveto"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.moveTo")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#moveTo",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodemoveabove"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.moveAbove")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#moveAbove",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"nodemovebelow"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.moveBelow")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#moveBelow",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"noderemovechildren"},(0,p.kt)("inlineCode",{parentName:"h2"},"Node.removeChildren")),(0,p.kt)(r.Z,{url:"/api/2d/components/Node#removeChildren",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null))}m.isMDXComponent=!0}}]);
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.