https://motioncanvas.io/assets/js/3605e28e.14930fb0.js

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([[3805],{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"))}},2665:(t,n,e)=>{e.d(n,{Z:()=>k});var o=e(2784);const p="container_lQCo",r="small_As57",s="banner_A4QS",c="player_tELG",a="link_BTzN",i="icon_wSGd";var l=e(7896);function u(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:"M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z",fill:"currentColor"}))}var m=e(9817),d=e(6277);function h(t){let{name:n}=t;const e=`http://web.archive.org/web/20230315084657/https://github.com/motion-canvas/motion-canvas/blob/main/packages/examples/src/scenes/${n}.tsx`;return o.createElement(m.Z,{to:e,className:(0,d.Z)("padding--sm",a)},o.createElement("span",null,"View source code"),o.createElement(u,{className:i}))}function k(t){let{name:n,banner:e,small:a,link:i}=t;return o.createElement("div",{className:(0,d.Z)(p,e&&s,a&&r)},o.createElement("motion-canvas-player",{class:c,src:`/examples/${n}.js`,auto:e}),o.createElement(h,{name:i||n}))}e(1263).Z.canUseDOM&&Promise.all([e.e(5392),e.e(9106)]).then(e.bind(e,9106))},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:()=>w,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:()=>Hf,content_0_1012:()=>Jf,content_0_1014:()=>Qf,content_0_1016:()=>nw,content_0_1018:()=>ow,content_0_102:()=>en,content_0_1020:()=>rw,content_0_1022:()=>cw,content_0_1024:()=>iw,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:()=>Mn,content_0_12:()=>D,content_0_120:()=>_n,content_0_122:()=>gn,content_0_124:()=>Cn,content_0_126:()=>

10vn,content_0_128:()=>Ln,content_0_130:()=>Nn,content_0_132:()=>En,content_0_134:()=>zn,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:()=>Hn,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:()=>Me,content_0_174:()=>_e,content_0_176:()=>ge,content_0_178:()=>Ce,content_0_18:()=>T,content_0_180:()=>ve,content_0_182:()=>Le,content_0_184:()=>Ne,content_0_186:()=>Ee,content_0_188:()=>ze,content_0_190:()=>Ie,content_0_192:()=>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:()=>He,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:()=>wo,content_0_226:()=>Do,content_0_228:()=>Xo,content_0_230:()=>xo,content_0_232:()=>To,content_0_234:()=>bo,content_0_236:()=>Zo,content_0_238:()=>Ao,content_0_24:()=>A,content_0_240:()=>Ro,content_0_242:()=>So,content_0_244:()=>Wo,content_0_246:()=>Go,content_0_248:()=>Fo,content_0_250:()=>Vo,content_0_252:()=>qo,content_0_254:()=>$o,content_0_256:()=>Yo,content_0_258:()=>Ko,content_0_26:()=>R,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:()=>wp,content_0_28:()=>S,content_0_280:()=>Dp,content_0_282:()=>Xp,content_0_284:()=>xp,content_0_286:()=>Tp,content_0_288:()=>bp,content_0_290:()=>Zp,content_0_292:()=>Ap,content_0_294:()=>Rp,content_0_296:()=>Sp,content_0_298:()=>Wp,content_0_30:()=>W,content_0_300:()=>Gp,content_0_302:()=>Fp,content_0_304:()=>Vp,content_0_306:()=>qp,content_0_308:()=>$p,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:()=>wr,content_0_334:()=>Dr,content_0_336:()=>Xr,content_0_338:()=>xr,content_0_34:()=>F,content_0_340:()=>Tr,content_0_342:()=>br,content_0_344:()=>Zr,content_0_346:()=>Ar,content_0_348:()=>Rr,content_0_350:()=>Sr,content_0_352:()=>Wr,content_0_354:()=>Gr,content_0_356:()=>Fr,content_0_358:()=>Vr,content_0_36:()=>V,content_0_360:()=>qr,content_0_362:()=>$r,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:()=>ws,content_0_388:()=>Ds,content_0_390:()=>Xs,content_0_392:()=>xs,content_0_394:()=>Ts,content_0_396:()=>bs,content_0_398:()=>Zs,content_0_4:()=>m,content_0_40:()=>$,content_0_400:()=>As,content_0_402:()=>Rs,content_0_404:()=>Ss,content_0_406:()=>Ws,content_0_408:()=>Gs,content_0_410:()=>Fs,content_0_412:()=>Vs,content_0_414:()=>qs,content_0_416:()=>$s,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:()=>wc,content_0_442:()=>Dc,content_0_444:()=>Xc,content_0_446:()=>xc,content_0_448:()=>Tc,content_0_450:()=>bc,content_0_452:()=>Zc,content_0_454:()=>Ac,content_0_456:()=>Rc,content_0_458:()=>Sc,content_0_46:()=>tt,content_0_460:()=>Wc,content_0_462:()=>Gc,content_0_464:()=>Fc,content_0_466:()=>Vc,content_0_468:()=>qc,content_0_470:()=>$c,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:()=>wa,content_0_496:()=>Da,content_0_498:()=>Xa,content_0_50:()=>pt,content_0_500:()=>xa,content_0_502:()=>Ta,content_0_504:()=>ba,content_0_506:()=>Za,content_0_508:()=>Aa,content_0_510:()=>Ra,content_0_512:()=>Sa,content_0_514:()=>Wa,content_0_516:()=>Ga,content_0_518:()=>Fa,content_0_52:()=>st,content_0_520:()=>Va,content_0_522:()=>qa,content_0_524:()=>$a,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:()=>wi,content_0_550:()=>Di,content_0_552:()=>Xi,content_0_554:()=>xi,content_0_556:()=>Ti,content_0_558:()=>bi,content_0_56:()=>lt,content_0_560:()=>Zi,content_0_562:()=>Ai,content_0_564:()=>Ri,content_0_566:()=>Si,content_0_568:()=>Wi,content_0_570:()=>Gi,content_0_572:()=>Fi,content_0_574:()=>Vi,content_0_576:()=>qi,content_0_578:()=>$i,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:()=>wl,content_0_604:()=>Dl,content_0_606:()=>Xl,content_0_608:()=>xl,content_0_610:()=>Tl,content_0_612:()=>bl,content_0_614:()=>Zl,content_0_616:()=>Al,content_0_618:()=>Rl,content_0_62:()=>yt,content_0_620:()=>Sl,content_0_622:()=>Wl,content_0_624:()=>Gl,content_0_626:()=>Fl,content_0_628:()=>Vl,content_0_630:()=>ql,content_0_632:()=>$l,content_0_634:()=>Yl,content_0_636:()=>Kl,content_0_638:()=>tu,content_0_64:()=>wt,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:()=>wu,content_0_658:()=>Du,content_0_66:()=>Dt,content_0_660:()=>Xu,content_0_662:()=>xu,content_0_664:()=>Tu,content_0_666:()=>bu,content_0_668:()=>Zu,content_0_670:()=>Au,content_0_672:()=>Ru,content_0_674:()=>Su,content_0_676:()=>Wu,content_0_678:()=>Gu,content_0_68:()=>Xt,content_0_680:()=>Fu,content_0_682:()=>Vu,content_0_684:()=>qu,content_0_686:()=>$u,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:()=>wm,content_0_712:()=>Dm,content_0_714:()=>Xm,content_0_716:()=>xm,content_0_718:()=>Tm,content_0_72:()=>Tt,content_0_720:()=>bm,content_0_722:()=>Zm,content_0_724:()=>Am,content_0_726:()=>Rm,content_0_728:()=>Sm,content_0_730:()=>Wm,content_0_732:()=>Gm,content_0_734:()=>Fm,content_0_736:()=>Vm,content_0_738:()=>qm,content_0_74:()=>bt,content_0_740:()=>$m,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:()=>wd,content_0_766:()=>Dd,content_0_768:()=>Xd,content_0_770:()=>xd,content_0_772:()=>Td,content_0_774:()=>bd,content_0_776:()=>Zd,content_0_778:()=>Ad,content_0_78:()=>At,content_0_780:()=>Rd,content_0_782:()=>Sd,content_0_784:()=>Wd,content_0_786:()=>Gd,content_0_788:()=>Fd,content_0_790:()=>Vd,content_0_792:()=>qd,content_0_794:()=>$d,content_0_796:()=>Yd,content_0_798:()=>Kd,content_0_8:()=>y,content_0_80:()=>Rt,content_0_800:()=>th,content_0_802:()=>eh,content_0_804:()=>ph,content_0_806:()=>sh,content_0_808:()=>ah,content_0_810:()=>lh,content_0_812:()=>mh,content_0_814:()=>hh,content_0_816:()=>yh,content_0_818:()=>wh,content_0_82:()=>St,content_0_820:()=>Dh,content_0_822:()=>Xh,content_0_824:()=>xh,content_0_826:()=>Th,content_0_828:()=>bh,content_0_830:()=>Zh,content_0_832:()=>Ah,content_0_834:()=>Rh,content_0_836:()=>Sh,content_0_838:()=>Wh,content_0_84:()=>Wt,content_0_840:()=>Gh,content_0_842:()=>Fh,content_0_844:()=>Vh,content_0_846:()=>qh,content_0_848:()=>$h,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:()=>wk,content_0_874:()=>Dk,content_0_876:()=>Xk,content_0_878:()=>xk,content_0_88:()=>Ft,content_0_880:()=>Tk,content_0_882:()=>bk,content_0_884:()=>Zk,content_0_886:()=>Ak,content_0_888:()=>Rk,content_0_890:()=>Sk,content_0_892:()=>Wk,content_0_894:()=>Gk,content_0_896:()=>Fk,content_0_898:()=>Vk,content_0_90:()=>Vt,content_0_900:()=>qk,content_0_902:()=>$k,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:()=>wy,content_0_928:()=>Dy,content_0_930:()=>Xy,content_0_932:()=>xy,content_0_934:()=>Ty,content_0_936:()=>by,content_0_938:()=>Zy,content_0_94:()=>$t,content_0_940:()=>Ay,content_0_942:()=>Ry,content_0_944:()=>Sy,content_0_946:()=>Wy,content_0_948:()=>Gy,content_0_950:()=>Fy,content_0_952:()=>Vy,content_0_954:()=>

10qy,content_0_956:()=>$y,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:()=>Mf,content_0_982:()=>_f,content_0_984:()=>gf,content_0_986:()=>Cf,content_0_988:()=>vf,content_0_990:()=>Lf,content_0_992:()=>Nf,content_0_994:()=>Ef,content_0_996:()=>zf,content_0_998:()=>If,content_2220_0:()=>uw,content_2220_10:()=>_w,content_2220_100:()=>oD,content_2220_1000:()=>PS,content_2220_1002:()=>BS,content_2220_1004:()=>US,content_2220_1006:()=>jS,content_2220_1008:()=>OS,content_2220_1010:()=>HS,content_2220_1012:()=>JS,content_2220_1014:()=>QS,content_2220_1016:()=>nI,content_2220_1018:()=>oI,content_2220_102:()=>rD,content_2220_1020:()=>rI,content_2220_1022:()=>cI,content_2220_1024:()=>iI,content_2220_1026:()=>uI,content_2220_1028:()=>dI,content_2220_1030:()=>kI,content_2220_1032:()=>fI,content_2220_1034:()=>MI,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:()=>EI,content_2220_1050:()=>zI,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:()=>HI,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:()=>MW,content_2220_1090:()=>_W,content_2220_1092:()=>gW,content_2220_1094:()=>CW,content_2220_1096:()=>vW,content_2220_1098:()=>LW,content_2220_110:()=>dD,content_2220_1100:()=>NW,content_2220_1102:()=>EW,content_2220_1104:()=>zW,content_2220_1106:()=>IW,content_2220_1108:()=>PW,content_2220_1110:()=>BW,content_2220_1112:()=>UW,content_2220_1114:()=>jW,content_2220_1116:()=>OW,content_2220_1118:()=>HW,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:()=>MP,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:()=>EP,content_2220_1158:()=>zP,content_2220_116:()=>MD,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:()=>HP,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:()=>MG,content_2220_1198:()=>_G,content_2220_12:()=>gw,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:()=>EG,content_2220_1212:()=>zG,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:()=>HG,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:()=>MB,content_2220_1252:()=>_B,content_2220_1254:()=>gB,content_2220_1256:()=>CB,content_2220_1258:()=>vB,content_2220_126:()=>LD,content_2220_1260:()=>LB,content_2220_1262:()=>NB,content_2220_1264:()=>EB,content_2220_1266:()=>zB,content_2220_1268:()=>IB,content_2220_1270:()=>PB,content_2220_1272:()=>BB,content_2220_1274:()=>UB,content_2220_1276:()=>jB,content_2220_1278:()=>OB,content_2220_128:()=>ND,content_2220_1280:()=>HB,content_2220_1282:()=>JB,content_2220_1284:()=>QB,content_2220_1286:()=>nF,content_2220_1288:()=>

10oF,content_2220_1290:()=>rF,content_2220_1292:()=>cF,content_2220_1294:()=>iF,content_2220_1296:()=>uF,content_2220_1298:()=>dF,content_2220_130:()=>ED,content_2220_1300:()=>kF,content_2220_1302:()=>fF,content_2220_1304:()=>MF,content_2220_1306:()=>_F,content_2220_1308:()=>gF,content_2220_1310:()=>CF,content_2220_1312:()=>vF,content_2220_1314:()=>LF,content_2220_1316:()=>NF,content_2220_1318:()=>EF,content_2220_132:()=>zD,content_2220_1320:()=>zF,content_2220_1322:()=>IF,content_2220_1324:()=>PF,content_2220_1326:()=>BF,content_2220_1328:()=>UF,content_2220_1330:()=>jF,content_2220_1332:()=>OF,content_2220_1334:()=>HF,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:()=>MU,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:()=>EU,content_2220_1374:()=>zU,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:()=>HU,content_2220_1390:()=>JU,content_2220_1392:()=>QU,content_2220_1394:()=>nV,content_2220_1396:()=>oV,content_2220_1398:()=>rV,content_2220_14:()=>Cw,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:()=>MV,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:()=>EV,content_2220_1428:()=>zV,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:()=>HV,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:()=>HD,content_2220_1460:()=>dj,content_2220_1462:()=>kj,content_2220_1464:()=>fj,content_2220_1466:()=>Mj,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:()=>Ej,content_2220_1482:()=>zj,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:()=>Hj,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:()=>Mq,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:()=>Eq,content_2220_1536:()=>zq,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:()=>Hq,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:()=>MO,content_2220_1576:()=>_O,content_2220_1578:()=>gO,content_2220_158:()=>c_,content_2220_1580:()=>CO,content_2220_1582:()=>vO,content_2220_1584:()=>LO,content_2220_1586:()=>NO,content_2220_1588:()=>EO,content_2220_1590:()=>zO,content_2220_1592:()=>IO,content_2220_1594:()=>PO,content_2220_1596:()=>BO,content_2220_1598:()=>UO,content_2220_16:()=>vw,content_2220_160:()=>i_,content_2220_1600:()=>jO,content_2220_1602:()=>OO,content_2220_1604:()=>HO,content_2220_1606:()=>JO,content_2220_1608:()=>QO,content_2220_1610:()=>n$,content_2220_1612:()=>o$,content_2220_1614:()=>r$,content_2220_1616:()=>c$,content_2220_1618:()=>i$,content_2220_162:()=>u_,content_2220_1620:()=>u$,content_2220_1622:()=>d$,content_2220_1624:()=>k$,content_2220_1626:()=>f$,content_2220_1628:()=>M$,content_2220_1630:()=>_$,content_2220_1632:()=>g$,content_2220_1634:()=>C$,content_2220_1636:()=>v$,content_2220_1638:()=>L$,content_2220_164:()=>d_,content_2220_1640:()=>N$,content_2220_1642:()=>E$,content_2220_1644:()=>z$,content_2220_1646:()=>I$,content_2220_1648:()=>P$,content_2220_1650:()=>B$,content_2220_1652:()=>U$,content_2220_1654:()=>j$,content_2220_1656:()=>O$,content_2220_1658:()=>H$,content_2220_166:()=>k_,content_2220_1660:()=>J$,content_2220_1662:()=>Q$,content_2220_1664:()=>nH,content_2220_1666:()=>oH,content_2220_1668:()=>rH,content_2220_1670:()=>cH,content_2220_1672:()=>iH,content_2220_1674:()=>uH,content_2220_1676:()=>dH,content_2220_1678:()=>kH,content_2220_168:()=>f_,content_2220_1680:()=>fH,content_2220_1682:()=>MH,content_2220_1684:()=>_H,content_2220_1686:()=>gH,content_2220_1688:()=>CH,content_2220_1690:()=>vH,content_2220_1692:()=>LH,content_2220_1694:()=>NH,content_2220_1696:()=>EH,content_2220_1698:()=>zH,content_2220_170:()=>M_,content_2220_1700:()=>IH,content_2220_1702:()=>PH,content_2220_1704:()=>BH,content_2220_1706:()=>UH,content_2220_1708:()=>jH,content_2220_1710:()=>OH,content_2220_1712:()=>HH,content_2220_1714:()=>JH,content_2220_1716:()=>QH,content_2220_1718:()=>nY,content_2220_172:()=>__,content_2220_1720:()=>oY,content_2220_1722:()=>rY,content_2220_1724:()=>cY,content_2220_1726:()=>iY,content_2220_1728:()=>uY,content_2220_1730:()=>dY,content_2220_1732:()=>kY,content_2220_1734:()=>fY,content_2220_1736:()=>MY,content_2220_1738:()=>_Y,content_2220_174:()=>g_,content_2220_1740:()=>gY,content_2220_1742:()=>CY,content_2220_1744:()=>vY,content_2220_1746:()=>LY,content_2220_1748:()=>NY,content_2220_1750:()=>EY,content_2220_1752:()=>zY,content_2220_1754:()=>IY,content_2220_1756:()=>PY,content_2220_1758:()=>BY,content_2220_176:()=>C_,content_2220_1760:()=>UY,content_2220_1762:()=>jY,content_2220_1764:()=>OY,content_2220_1766:()=>HY,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:()=>MJ,content_2220_1792:()=>_J,content_2220_1794:()=>gJ,content_2220_1796:()=>CJ,content_2220_1798:()=>vJ,content_2220_18:()=>Lw,content_2220_180:()=>L_,content_2220_1800:()=>LJ,content_2220_1802:()=>NJ,content_2220_1804:()=>EJ,content_2220_1806:()=>zJ,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:()=>HJ,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:()=>E_,content_2220_1840:()=>kK,content_2220_1842:()=>fK,content_2220_1844:()=>MK,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:()=>EK,content_2220_186:()=>z_,content_2220_1860:()=>zK,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:()=>HK,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:()=>MQ,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:()=>EQ,content_2220_1914:()=>zQ,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:()=>HQ,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:()=>M0,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:()=>E0,content_2220_1968:()=>z0,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:()=>H0,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:()=>dw,content_2220_20:()=>Nw,content_2220_200:()=>H_,content_2220_2000:()=>d2,content_2220_2002:()=>k2,content_2220_2004:()=>f2,content_2220_2006:()=>M2,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:()=>E2,content_2220_2022:()=>z2,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:()=>H2,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:()=>M1,content_2220_2062:()=>_1,content_2220_2064:()=>g1,content_2220_2066:()=>C1,content_2220_2068:()=>v1,content_2220_2070:()=>L1,content_2220_2072:()=>N1,content_2220_2074:()=>E1,content_2220_2076:()=>z1,content_2220_2078:()=>I1,content_2220_208:()=>oX,content_2220_2080:()=>P1,content_2220_2082:()=>B1,content_2220_2084:()=>U1,content_2220_2086:()=>j1,content_2220_2088:()=>O1,content_2220_2090:()=>H1,content_2220_2092:()=>J1,content_2220_2094:()=>Q1,content_2220_2096:()=>n6,content_2220_2098:()=>o6,content_2220_210:()=>rX,content_2220_2100:()=>r6,content_2220_2102:()=>

10c6,content_2220_2104:()=>i6,content_2220_2106:()=>u6,content_2220_2108:()=>d6,content_2220_2110:()=>k6,content_2220_2112:()=>f6,content_2220_2114:()=>M6,content_2220_2116:()=>_6,content_2220_2118:()=>g6,content_2220_212:()=>cX,content_2220_2120:()=>C6,content_2220_2122:()=>v6,content_2220_2124:()=>L6,content_2220_2126:()=>N6,content_2220_2128:()=>E6,content_2220_2130:()=>z6,content_2220_2132:()=>I6,content_2220_2134:()=>P6,content_2220_2136:()=>B6,content_2220_2138:()=>U6,content_2220_214:()=>iX,content_2220_2140:()=>j6,content_2220_2142:()=>O6,content_2220_2144:()=>H6,content_2220_2146:()=>J6,content_2220_2148:()=>Q6,content_2220_2150:()=>n3,content_2220_2152:()=>o3,content_2220_2154:()=>r3,content_2220_2156:()=>c3,content_2220_2158:()=>i3,content_2220_216:()=>uX,content_2220_2160:()=>u3,content_2220_2162:()=>d3,content_2220_2164:()=>k3,content_2220_2166:()=>f3,content_2220_2168:()=>M3,content_2220_2170:()=>_3,content_2220_2172:()=>g3,content_2220_2174:()=>C3,content_2220_2176:()=>v3,content_2220_2178:()=>L3,content_2220_218:()=>dX,content_2220_2180:()=>N3,content_2220_2182:()=>E3,content_2220_2184:()=>z3,content_2220_2186:()=>I3,content_2220_2188:()=>P3,content_2220_2190:()=>B3,content_2220_2192:()=>U3,content_2220_2194:()=>j3,content_2220_2196:()=>O3,content_2220_2198:()=>H3,content_2220_22:()=>Ew,content_2220_220:()=>kX,content_2220_2200:()=>J3,content_2220_2202:()=>Q3,content_2220_2204:()=>n4,content_2220_2206:()=>o4,content_2220_2208:()=>r4,content_2220_2210:()=>c4,content_2220_2212:()=>i4,content_2220_2214:()=>u4,content_2220_2216:()=>d4,content_2220_2218:()=>k4,content_2220_222:()=>fX,content_2220_2220:()=>f4,content_2220_2222:()=>M4,content_2220_2224:()=>_4,content_2220_2226:()=>g4,content_2220_2228:()=>C4,content_2220_2230:()=>v4,content_2220_2232:()=>L4,content_2220_2234:()=>N4,content_2220_2236:()=>E4,content_2220_2238:()=>z4,content_2220_224:()=>MX,content_2220_2240:()=>I4,content_2220_2242:()=>P4,content_2220_2244:()=>B4,content_2220_2246:()=>U4,content_2220_2248:()=>j4,content_2220_2250:()=>O4,content_2220_2252:()=>H4,content_2220_2254:()=>J4,content_2220_2256:()=>Q4,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:()=>M8,content_2220_2278:()=>_8,content_2220_228:()=>gX,content_2220_2280:()=>g8,content_2220_2282:()=>C8,content_2220_2284:()=>v8,content_2220_2286:()=>L8,content_2220_2288:()=>N8,content_2220_2290:()=>E8,content_2220_2292:()=>z8,content_2220_2294:()=>I8,content_2220_2296:()=>P8,content_2220_2298:()=>B8,content_2220_230:()=>CX,content_2220_2300:()=>U8,content_2220_2302:()=>j8,content_2220_2304:()=>O8,content_2220_2306:()=>H8,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:()=>M5,content_2220_2332:()=>_5,content_2220_2334:()=>g5,content_2220_2336:()=>C5,content_2220_2338:()=>v5,content_2220_234:()=>LX,content_2220_2340:()=>L5,content_2220_2342:()=>N5,content_2220_2344:()=>E5,content_2220_2346:()=>z5,content_2220_2348:()=>I5,content_2220_2350:()=>P5,content_2220_2352:()=>B5,content_2220_2354:()=>U5,content_2220_2356:()=>j5,content_2220_2358:()=>O5,content_2220_236:()=>NX,content_2220_2360:()=>H5,content_2220_2362:()=>J5,content_2220_2364:()=>Q5,content_2220_2366:()=>n7,content_2220_2368:()=>o7,content_2220_2370:()=>r7,content_2220_2372:()=>c7,content_2220_2374:()=>i7,content_2220_2376:()=>u7,content_2220_2378:()=>d7,content_2220_238:()=>EX,content_2220_2380:()=>k7,content_2220_2382:()=>f7,content_2220_2384:()=>M7,content_2220_2386:()=>_7,content_2220_2388:()=>g7,content_2220_2390:()=>C7,content_2220_2392:()=>v7,content_2220_2394:()=>L7,content_2220_2396:()=>N7,content_2220_2398:()=>E7,content_2220_24:()=>zw,content_2220_240:()=>zX,content_2220_2400:()=>z7,content_2220_2402:()=>I7,content_2220_2404:()=>P7,content_2220_2406:()=>B7,content_2220_2408:()=>U7,content_2220_2410:()=>

10j7,content_2220_2412:()=>O7,content_2220_2414:()=>H7,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:()=>M9,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:()=>E9,content_2220_2454:()=>z9,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:()=>H9,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:()=>Mtt,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:()=>

10Ett,content_2220_2508:()=>ztt,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:()=>Htt,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:()=>HX,content_2220_2540:()=>dnt,content_2220_2542:()=>knt,content_2220_2544:()=>fnt,content_2220_2546:()=>Mnt,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:()=>Ent,content_2220_2562:()=>znt,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:()=>Hnt,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:()=>wet,content_2220_26:()=>Iw,content_2220_260:()=>ng,content_2220_2600:()=>Det,content_2220_2602:()=>Xet,content_2220_2604:()=>xet,content_2220_2606:()=>Tet,content_2220_2608:()=>bet,content_2220_2610:()=>Zet,content_2220_2612:()=>Aet,content_2220_2614:()=>Ret,content_2220_2616:()=>Set,content_2220_2618:()=>Wet,content_2220_262:()=>og,content_2220_2620:()=>Get,content_2220_2622:()=>Fet,content_2220_2624:()=>Vet,content_2220_2626:()=>qet,content_2220_2628:()=>$et,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:()=>wot,content_2220_2654:()=>Dot,content_2220_2656:()=>Xot,content_2220_2658:()=>xot,content_2220_266:()=>cg,content_2220_2660:()=>Tot,content_2220_2662:()=>bot,content_2220_2664:()=>Zot,content_2220_2666:()=>Aot,content_2220_2668:()=>Rot,content_2220_2670:()=>Sot,content_2220_2672:()=>Wot,content_2220_2674:()=>Got,content_2220_2676:()=>Fot,content_2220_2678:()=>Vot,content_2220_268:()=>ig,content_2220_2680:()=>qot,content_2220_2682:()=>$ot,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:()=>wpt,content_2220_2708:()=>Dpt,content_2220_2710:()=>Xpt,content_2220_2712:()=>xpt,content_2220_2714:()=>Tpt,content_2220_2716:()=>bpt,content_2220_2718:()=>Zpt,content_2220_272:()=>dg,content_2220_2720:()=>Apt,content_2220_2722:()=>Rpt,content_2220_2724:()=>Spt,content_2220_2726:()=>Wpt,content_2220_2728:()=>Gpt,content_2220_2730:()=>Fpt,content_2220_2732:()=>Vpt,content_2220_2734:()=>qpt,content_2220_2736:()=>$pt,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:()=>wrt,content_2220_2762:()=>Drt,content_2220_2764:()=>Xrt,content_2220_2766:()=>xrt,content_2220_2768:()=>Trt,content_2220_2770:()=>brt,content_2220_2772:()=>Zrt,content_2220_2774:()=>Art,content_2220_2776:()=>Rrt,content_2220_2778:()=>Srt,content_2220_278:()=>Mg,content_2220_2780:()=>Wrt,content_2220_2782:()=>Grt,content_2220_2784:()=>Frt,content_2220_2786:()=>Vrt,content_2220_2788:()=>qrt,content_2220_2790:()=>$rt,content_2220_2792:()=>Yrt,content_2220_2794:()=>Krt,content_2220_2796:()=>tst,content_2220_2798:()=>est,content_2220_28:()=>Pw,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:()=>wst,content_2220_2816:()=>Dst,content_2220_2818:()=>Xst,content_2220_282:()=>gg,content_2220_2820:()=>xst,content_2220_2822:()=>Tst,content_2220_2824:()=>bst,content_2220_2826:()=>Zst,content_2220_2828:()=>Ast,content_2220_2830:()=>Rst,content_2220_2832:()=>Sst,content_2220_2834:()=>Wst,content_2220_2836:()=>Gst,content_2220_2838:()=>Fst,content_2220_284:()=>Cg,content_2220_2840:()=>Vst,content_2220_2842:()=>qst,content_2220_2844:()=>$st,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:()=>wct,content_2220_2870:()=>Dct,content_2220_2872:()=>Xct,content_2220_2874:()=>xct,content_2220_2876:()=>Tct,content_2220_2878:()=>bct,content_2220_288:()=>Lg,content_2220_2880:()=>Zct,content_2220_2882:()=>Act,content_2220_2884:()=>Rct,content_2220_2886:()=>Sct,content_2220_2888:()=>Wct,content_2220_2890:()=>Gct,content_2220_2892:()=>Fct,content_2220_2894:()=>Vct,content_2220_2896:()=>qct,content_2220_2898:()=>$ct,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:()=>Eg,content_2220_2920:()=>yat,content_2220_2922:()=>wat,content_2220_2924:()=>Dat,content_2220_2926:()=>Xat,content_2220_2928:()=>xat,content_2220_2930:()=>Tat,content_2220_2932:()=>bat,content_2220_2934:()=>Zat,content_2220_2936:()=>Aat,content_2220_2938:()=>Rat,content_2220_294:()=>zg,content_2220_2940:()=>Sat,content_2220_2942:()=>Wat,content_2220_2944:()=>Gat,content_2220_2946:()=>Fat,content_2220_2948:()=>Vat,content_2220_2950:()=>qat,content_2220_2952:()=>$at,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:()=>wit,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:()=>Rit,content_2220_2994:()=>Sit,content_2220_2996:()=>Wit,content_2220_2998:()=>Git,content_2220_30:()=>Bw,content_2220_300:()=>Bg,content_2220_3000:()=>Fit,content_2220_3002:()=>Vit,content_2220_3004:()=>qit,content_2220_3006:()=>$it,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:()=>wlt,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:()=>Rlt,content_2220_3048:()=>Slt,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:()=>$lt,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:()=>Hg,content_2220_3080:()=>hut,content_2220_3082:()=>yut,content_2220_3084:()=>wut,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:()=>Rut,content_2220_3102:()=>Sut,content_2220_3104:()=>Wut,content_2220_3106:()=>Gut,content_2220_3108:()=>Fut,content_2220_3110:()=>Vut,content_2220_3112:()=>qut,content_2220_3114:()=>$ut,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:()=>wmt,content_2220_314:()=>nx,content_2220_3140:()=>Dmt,content_2220_3142:()=>Xmt,content_2220_3144:()=>xmt,content_2220_3146:()=>Tmt,content_2220_3148:()=>bmt,content_2220_3150:()=>Zmt,content_2220_3152:()=>Amt,content_2220_3154:()=>Rmt,content_2220_3156:()=>Smt,content_2220_3158:()=>Wmt,content_2220_316:()=>ox,content_2220_3160:()=>Gmt,content_2220_3162:()=>Fmt,content_2220_3164:()=>Vmt,content_2220_3166:()=>qmt,content_2220_3168:()=>$mt,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:()=>wdt,content_2220_3194:()=>Ddt,content_2220_3196:()=>Xdt,content_2220_3198:()=>xdt,content_2220_32:()=>Uw,content_2220_320:()=>cx,content_2220_3200:()=>Tdt,content_2220_3202:()=>bdt,content_2220_3204:()=>Zdt,content_2220_3206:()=>Adt,content_2220_3208:()=>Rdt,content_2220_3210:()=>Sdt,content_2220_3212:()=>Wdt,content_2220_3214:()=>Gdt,content_2220_3216:()=>Fdt,content_2220_3218:()=>Vdt,content_2220_322:()=>ix,content_2220_3220:()=>qdt,content_2220_3222:()=>$dt,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:()=>wht,content_2220_3248:()=>Dht,content_2220_3250:()=>Xht,content_2220_3252:()=>xht,content_2220_3254:()=>Tht,content_2220_3256:()=>

10bht,content_2220_3258:()=>Zht,content_2220_326:()=>dx,content_2220_3260:()=>Aht,content_2220_3262:()=>Rht,content_2220_3264:()=>Sht,content_2220_3266:()=>Wht,content_2220_3268:()=>Ght,content_2220_3270:()=>Fht,content_2220_3272:()=>Vht,content_2220_3274:()=>qht,content_2220_3276:()=>$ht,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:()=>wkt,content_2220_3302:()=>Dkt,content_2220_3304:()=>Xkt,content_2220_3306:()=>xkt,content_2220_3308:()=>Tkt,content_2220_3310:()=>bkt,content_2220_3312:()=>Zkt,content_2220_3314:()=>Akt,content_2220_3316:()=>Rkt,content_2220_3318:()=>Skt,content_2220_332:()=>Mx,content_2220_3320:()=>Wkt,content_2220_3322:()=>Gkt,content_2220_3324:()=>Fkt,content_2220_3326:()=>Vkt,content_2220_3328:()=>qkt,content_2220_3330:()=>$kt,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:()=>wyt,content_2220_3356:()=>Dyt,content_2220_3358:()=>Xyt,content_2220_336:()=>gx,content_2220_3360:()=>xyt,content_2220_3362:()=>Tyt,content_2220_3364:()=>byt,content_2220_3366:()=>Zyt,content_2220_3368:()=>Ayt,content_2220_3370:()=>Ryt,content_2220_3372:()=>Syt,content_2220_3374:()=>Wyt,content_2220_3376:()=>Gyt,content_2220_3378:()=>Fyt,content_2220_338:()=>Cx,content_2220_3380:()=>Vyt,content_2220_3382:()=>qyt,content_2220_3384:()=>$yt,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:()=>jw,content_2220_340:()=>vx,content_2220_3400:()=>lft,content_2220_3402:()=>mft,content_2220_3404:()=>hft,content_2220_3406:()=>yft,content_2220_3408:()=>wft,content_2220_3410:()=>Dft,content_2220_3412:()=>Xft,content_2220_3414:()=>xft,content_2220_3416:()=>Tft,content_2220_3418:()=>bft,content_2220_342:()=>Lx,content_2220_3420:()=>Zft,content_2220_3422:()=>Aft,content_2220_3424:()=>Rft,content_2220_3426:()=>Sft,content_2220_3428:()=>Wft,content_2220_3430:()=>Gft,content_2220_3432:()=>Fft,content_2220_3434:()=>Vft,content_2220_3436:()=>qft,content_2220_3438:()=>$ft,content_2220_344:()=>Nx,content_2220_3440:()=>Yft,content_2220_3442:()=>Kft,content_2220_3444:()=>twt,content_2220_3446:()=>ewt,content_2220_3448:()=>pwt,content_2220_3450:()=>swt,content_2220_3452:()=>awt,content_2220_3454:()=>lwt,content_2220_3456:()=>mwt,content_2220_3458:()=>hwt,content_2220_346:()=>Ex,content_2220_3460:()=>ywt,content_2220_3462:()=>wwt,content_2220_3464:()=>Dwt,content_2220_3466:()=>Xwt,content_2220_3468:()=>xwt,content_2220_3470:()=>Twt,content_2220_3472:()=>bwt,content_2220_3474:()=>Zwt,content_2220_3476:()=>Awt,content_2220_3478:()=>Rwt,content_2220_348:()=>zx,content_2220_3480:()=>Swt,content_2220_3482:()=>Wwt,content_2220_3484:()=>Gwt,content_2220_3486:()=>Fwt,content_2220_3488:()=>Vwt,content_2220_3490:()=>qwt,content_2220_3492:()=>$wt,content_2220_3494:()=>Ywt,content_2220_3496:()=>Kwt,content_2220_3498:()=>tMt,content_2220_350:()=>Ix,content_2220_3500:()=>eMt,content_2220_3502:()=>pMt,content_2220_3504:()=>sMt,content_2220_3506:()=>aMt,content_2220_3508:()=>lMt,content_2220_3510:()=>mMt,content_2220_3512:()=>hMt,content_2220_3514:()=>yMt,content_2220_3516:()=>wMt,content_2220_3518:()=>DMt,content_2220_352:()=>Px,content_2220_3520:()=>XMt,content_2220_3522:()=>xMt,content_2220_3524:()=>TMt,content_2220_3526:()=>bMt,content_2220_3528:()=>ZMt,content_2220_3530:()=>AMt,content_2220_3532:()=>RMt,content_2220_3534:()=>SMt,content_2220_3536:()=>WMt,content_2220_3538:()=>GMt,content_2220_354:()=>Bx,content_2220_3540:()=>FMt,content_2220_3542:()=>VMt,content_2220_3544:()=>qMt,content_2220_3546:()=>$Mt,content_2220_3548:()=>YMt,content_2220_3550:()=>KMt,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:()=>wDt,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:()=>RDt,content_2220_3588:()=>SDt,content_2220_3590:()=>WDt,content_2220_3592:()=>GDt,content_2220_3594:()=>FDt,content_2220_3596:()=>VDt,content_2220_3598:()=>qDt,content_2220_36:()=>Ow,content_2220_360:()=>Ox,content_2220_3600:()=>$Dt,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:()=>Hx,content_2220_3620:()=>h_t,content_2220_3622:()=>y_t,content_2220_3624:()=>w_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:()=>R_t,content_2220_3642:()=>S_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:()=>$_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:()=>wXt,content_2220_368:()=>nC,content_2220_3680:()=>DXt,content_2220_3682:()=>XXt,content_2220_3684:()=>xXt,content_2220_3686:()=>TXt,content_2220_3688:()=>bXt,content_2220_3690:()=>ZXt,content_2220_3692:()=>AXt,content_2220_3694:()=>RXt,content_2220_3696:()=>SXt,content_2220_3698:()=>WXt,content_2220_370:()=>oC,content_2220_3700:()=>GXt,content_2220_3702:()=>FXt,content_2220_3704:()=>VXt,content_2220_3706:()=>qXt,content_2220_3708:()=>$Xt,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:()=>wgt,content_2220_3734:()=>Dgt,content_2220_3736:()=>Xgt,content_2220_3738:()=>xgt,content_2220_374:()=>cC,content_2220_3740:()=>Tgt,content_2220_3742:()=>bgt,content_2220_3744:()=>Zgt,content_2220_3746:()=>Agt,content_2220_3748:()=>Rgt,content_2220_3750:()=>Sgt,content_2220_3752:()=>Wgt,content_2220_3754:()=>Ggt,content_2220_3756:()=>Fgt,content_2220_3758:()=>Vgt,content_2220_376:()=>iC,content_2220_3760:()=>qgt,content_2220_3762:()=>$gt,content_2220_3764:()=>Ygt,content_2220_3766:()=>Kgt,content_2220_3768:()=>txt,content_2220_3770:()=>ext,content_2220_378:()=>uC,content_2220_38:()=>Hw,content_2220_380:()=>dC,content_2220_382:()=>kC,content_2220_384:()=>fC,content_2220_386:()=>MC,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:()=>kw,content_2220_40:()=>

10Jw,content_2220_400:()=>EC,content_2220_402:()=>zC,content_2220_404:()=>IC,content_2220_406:()=>PC,content_2220_408:()=>BC,content_2220_410:()=>UC,content_2220_412:()=>jC,content_2220_414:()=>OC,content_2220_416:()=>HC,content_2220_418:()=>JC,content_2220_42:()=>Qw,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:()=>nM,content_2220_440:()=>MT,content_2220_442:()=>_T,content_2220_444:()=>gT,content_2220_446:()=>CT,content_2220_448:()=>vT,content_2220_450:()=>LT,content_2220_452:()=>NT,content_2220_454:()=>ET,content_2220_456:()=>zT,content_2220_458:()=>IT,content_2220_46:()=>oM,content_2220_460:()=>PT,content_2220_462:()=>BT,content_2220_464:()=>UT,content_2220_466:()=>jT,content_2220_468:()=>OT,content_2220_470:()=>HT,content_2220_472:()=>JT,content_2220_474:()=>QT,content_2220_476:()=>nv,content_2220_478:()=>ov,content_2220_48:()=>rM,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:()=>Mv,content_2220_496:()=>_v,content_2220_498:()=>gv,content_2220_50:()=>cM,content_2220_500:()=>Cv,content_2220_502:()=>vv,content_2220_504:()=>Lv,content_2220_506:()=>Nv,content_2220_508:()=>Ev,content_2220_510:()=>zv,content_2220_512:()=>Iv,content_2220_514:()=>Pv,content_2220_516:()=>Bv,content_2220_518:()=>Uv,content_2220_52:()=>iM,content_2220_520:()=>jv,content_2220_522:()=>Ov,content_2220_524:()=>Hv,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:()=>uM,content_2220_540:()=>ub,content_2220_542:()=>db,content_2220_544:()=>kb,content_2220_546:()=>fb,content_2220_548:()=>Mb,content_2220_550:()=>_b,content_2220_552:()=>gb,content_2220_554:()=>Cb,content_2220_556:()=>vb,content_2220_558:()=>Lb,content_2220_56:()=>dM,content_2220_560:()=>Nb,content_2220_562:()=>Eb,content_2220_564:()=>zb,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:()=>Hb,content_2220_58:()=>kM,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:()=>fw,content_2220_60:()=>fM,content_2220_600:()=>fL,content_2220_602:()=>ML,content_2220_604:()=>_L,content_2220_606:()=>gL,content_2220_608:()=>CL,content_2220_610:()=>vL,content_2220_612:()=>LL,content_2220_614:()=>NL,content_2220_616:()=>EL,content_2220_618:()=>zL,content_2220_62:()=>MM,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:()=>HL,content_2220_634:()=>JL,content_2220_636:()=>QL,content_2220_638:()=>nZ,content_2220_64:()=>_M,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:()=>MZ,content_2220_658:()=>_Z,content_2220_66:()=>gM,content_2220_660:()=>gZ,content_2220_662:()=>CZ,content_2220_664:()=>vZ,content_2220_666:()=>LZ,content_2220_668:()=>NZ,content_2220_670:()=>EZ,content_2220_672:()=>zZ,content_2220_674:()=>IZ,content_2220_676:()=>PZ,content_2220_678:()=>BZ,content_2220_68:()=>CM,content_2220_680:()=>UZ,content_2220_682:()=>jZ,content_2220_684:()=>OZ,content_2220_686:()=>HZ,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:()=>vM,content_2220_700:()=>iN,content_2220_702:()=>uN,content_2220_704:()=>dN,content_2220_706:()=>kN,content_2220_708:()=>fN,content_2220_710:()=>MN,content_2220_712:()=>_N,content_2220_714:()=>gN,content_2220_716:()=>CN,content_2220_718:()=>vN,content_2220_72:()=>LM,content_2220_720:()=>LN,content_2220_722:()=>NN,content_2220_724:()=>EN,content_2220_726:()=>zN,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:()=>NM,content_2220_740:()=>HN,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:()=>EM,content_2220_760:()=>kA,content_2220_762:()=>fA,content_2220_764:()=>MA,content_2220_766:()=>_A,content_2220_768:()=>gA,content_2220_770:()=>CA,content_2220_772:()=>vA,content_2220_774:()=>LA,content_2220_776:()=>NA,content_2220_778:()=>EA,content_2220_78:()=>zM,content_2220_780:()=>zA,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:()=>HA,content_2220_796:()=>JA,content_2220_798:()=>QA,content_2220_8:()=>Mw,content_2220_80:()=>IM,content_2220_800:()=>nE,content_2220_802:()=>oE,content_2220_804:()=>rE,content_2220_806:()=>cE,content_2220_808:()=>iE,content_2220_810:()=>uE,content_2220_812:()=>dE,content_2220_814:()=>kE,content_2220_816:()=>fE,content_2220_818:()=>ME,content_2220_82:()=>PM,content_2220_820:()=>_E,content_2220_822:()=>gE,content_2220_824:()=>CE,content_2220_826:()=>vE,content_2220_828:()=>LE,content_2220_830:()=>NE,content_2220_832:()=>EE,content_2220_834:()=>zE,content_2220_836:()=>IE,content_2220_838:()=>PE,content_2220_84:()=>BM,content_2220_840:()=>BE,content_2220_842:()=>UE,content_2220_844:()=>jE,content_2220_846:()=>OE,content_2220_848:()=>HE,content_2220_850:()=>JE,content_2220_852:()=>QE,content_2220_854:()=>nR,content_2220_856:()=>oR,content_2220_858:()=>rR,content_2220_86:()=>UM,content_2220_860:()=>cR,content_2220_862:()=>iR,content_2220_864:()=>uR,content_2220_866:()=>dR,content_2220_868:()=>kR,content_2220_870:()=>fR,content_2220_872:()=>MR,content_2220_874:()=>_R,content_2220_876:()=>gR,content_2220_878:()=>CR,content_2220_88:()=>jM,content_2220_880:()=>vR,content_2220_882:()=>LR,content_2220_884:()=>NR,content_2220_886:()=>ER,content_2220_888:()=>zR,content_2220_890:()=>IR,content_2220_892:()=>PR,content_2220_894:()=>BR,content_2220_896:()=>UR,content_2220_898:()=>jR,content_2220_90:()=>OM,content_2220_900:()=>OR,content_2220_902:()=>HR,content_2220_904:()=>JR,content_2220_906:()=>QR,content_2220_908:()=>nz,content_2220_910:()=>oz,content_2220_912:()=>rz,content_2220_914:()=>cz,content_2220_916:()=>iz,content_2220_918:()=>uz,content_2220_92:()=>HM,content_2220_920:()=>dz,content_2220_922:()=>kz,content_2220_924:()=>fz,content_2220_926:()=>Mz,content_2220_928:()=>_z,content_2220_930:()=>gz,content_2220_932:()=>Cz,content_2220_934:()=>vz,content_2220_936:()=>Lz,content_2220_938:()=>Nz,content_2220_94:()=>JM,content_2220_940:()=>Ez,content_2220_942:()=>zz,content_2220_944:()=>Iz,content_2220_946:()=>Pz,content_2220_948:()=>Bz,content_2220_950:()=>Uz,content_2220_952:()=>jz,content_2220_954:()=>Oz,content_2220_956:()=>Hz,content_2220_958:()=>Jz,content_2220_96:()=>QM,content_2220_960:()=>Qz,content_2220_962:()=>nS,content_2220_964:()=>oS,content_2220_966:()=>rS,content_2220_968:()=>cS,content_2220_970:()=>iS,content_2220_972:()=>uS,content_2220_974:()=>dS,content_2220_976:()=>kS,content_2220_978:()=>fS,content_2220_98:()=>nD,content_2220_980:()=>MS,content_2220_982:()=>_S,content_2220_984:()=>gS,content_2220_986:()=>CS,content_2220_988:()=>vS,content_2220_990:()=>LS,content_2220_992:()=>NS,content_2220_994:()=>ES,content_2220_996:()=>zS,content_2220_998:()=>IS});var p=e(2784),r=e(7896),s=e(876);const c={toc:[]};function a(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},c,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Property decorators."))}a.isMDXComponent=!0;const i={toc:[]};function l(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},i,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscriptions and triggering of events."))}l.isMDXComponent=!0;const u={toc:[]};function m(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},u,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/AsyncEventDispatcher#dispatch"},(0,s.kt)("inlineCode",{parentName:"a"}

10,"dispatch"))," method returns a promise that resolves when all the\nhandlers resolve."))}m.isMDXComponent=!0;const d={toc:[]};function h(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},d,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  // expose the event to external classes\n  public get onValueChanged {\n    return this.value.subscribable;\n  }\n  // create a private dispatcher\n  private value = new AsyncEventDispatcher<number>();\n\n  private async dispatchExample() {\n    // dispatching returns a Promise.\n    await this.value.dispatch(0);\n  }\n}\n")))}h.isMDXComponent=!0;const k={toc:[]};function y(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},k,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Dispatches an asynchronous ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableEvent")),"."))}y.isMDXComponent=!0;const f={toc:[]};function w(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."))}w.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,"A callback function that cancels the subscription."))}D.isMDXComponent=!0;const _={toc:[]};function X(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."))}X.isMDXComponent=!0;const g={toc:[]};function x(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},g,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to invoke when the event occurs."))}x.isMDXComponent=!0;const C={toc:[]};function T(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},C,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}T.isMDXComponent=!0;const v={toc:[]};function b(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},v,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}b.isMDXComponent=!0;const L={toc:[]};function Z(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},L,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the argument passed to subscribers."))}Z.isMDXComponent=!0;const N={toc:[]};function A(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},N,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  // expose the event to external classes\n  public get onValueChanged {\n    return this.value.subscribable;\n  }\n  // create a private dispatcher\n  private value = new EventDispatcher<number>();\n\n  private dispatchExample() {\n    // dispatching will notify all subscribers.\n    this.value.dispatch(0);\n  }\n}\n")))}A.isMDXComponent=!0;const E={toc:[]};function R(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},E,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Dispatches a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events#SubscribableEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableEvent")),"."))}R.isMDXComponent=!0;const z={toc:[]};function S(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},z,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe all subscribers from the event."))}S.isMDXComponent=!0;const I={toc:[]};function W(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},I,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A callback function that cancels the subscription."))}W.isMDXComponent=!0;const 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 $(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},O,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the value argument to subscribers."))}$.isMDXComponent=!0;const H={toc:[]};function Y(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},H,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A base for dispatching ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/Subscribable"},(0,s.kt)("inlineCode",{parentName:"a"},"Subscribable")),"s."))}Y.isMDXComponent=!0;const 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 wt(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")),"."))}wt.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,"Unsubscribe all subscribers from the event."))}Dt.isMDXComponent=!0;const _t={toc:[]};function Xt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Are subscribers being notified?"))}Xt.isMDXComponent=!0;const gt={toc:[]};function xt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Notify all current and future subscribers."))}xt.isMDXComponent=!0;const Ct={toc:[]};function Tt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Stop notifying future subscribers."))}Tt.isMDXComponent=!0;const vt={toc:[]};function bt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A callback function that cancels the subscription."))}bt.isMDXComponent=!0;const Lt={toc:[]};function Zt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subscribe to the event."))}Zt.isMDXComponent=!0;const Nt={toc:[]};function At(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to invoke when the event occurs."))}At.isMDXComponent=!0;const Et={toc:[]};function Rt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Et,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}Rt.isMDXComponent=!0;

10const zt={toc:[]};function St(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}St.isMDXComponent=!0;const It={toc:[]};function Wt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},It,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"External classes can use it to subscribe to an event without being able to\ndispatch it."))}Wt.isMDXComponent=!0;const 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 $t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}$t.isMDXComponent=!0;const Ht={toc:[]};function Yt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}Yt.isMDXComponent=!0;const 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 wn={toc:[]};function Mn(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,"Subscribe to the event."),(0,s.kt)("p",null,"Subscribing will immediately invoke the handler with the most recent value."))}Mn.isMDXComponent=!0;const Dn={toc:[]};function _n(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unsubscribe from the event."))}_n.isMDXComponent=!0;const Xn={toc:[]};function gn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to unsubscribe."))}gn.isMDXComponent=!0;const xn={toc:[]};function Cn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the value passed to subscribers."))}Cn.isMDXComponent=!0;const Tn={toc:[]};function vn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Changing the value stored by a value dispatcher will immediately notify all\nits subscribers."))}vn.isMDXComponent=!0;const bn={toc:[]};function Ln(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"}

10,"class Example {\n  // expose the event to external classes\n  public get onValueChanged {\n    return this.value.subscribable;\n  }\n  // create a private dispatcher\n  private value = new ValueDispatcher(0);\n\n  private changingValueExample() {\n    // changing the value will notify all subscribers.\n    this.value.current = 7;\n  }\n}\n")))}Ln.isMDXComponent=!0;const Zn={toc:[]};function Nn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Dispatches a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/events/SubscribableValueEvent"},(0,s.kt)("inlineCode",{parentName:"a"},"SubscribableValueEvent"))))}Nn.isMDXComponent=!0;const An={toc:[]};function En(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},An,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The initial value."))}En.isMDXComponent=!0;const Rn={toc:[]};function zn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the most recent value of this dispatcher."))}zn.isMDXComponent=!0;const Sn={toc:[]};function In(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sn,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Setting the value will immediately notify all subscribers."))}In.isMDXComponent=!0;const Wn={toc:[]};function 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 $n={toc:[]};function Hn(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$n,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The handler to invoke when the event occurs."))}Hn.isMDXComponent=!0;const Yn={toc:[]};function 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 we={toc:[]};function Me(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,"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")),"."))}Me.isMDXComponent=!0;const De={toc:[]};function _e(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},De,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Utilities for controlling the flow and timing of an animation."))}_e.isMDXComponent=!0;const Xe={toc:[]};function ge(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xe,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The amount of times the timer has ticked."))}ge.isMDXComponent=!0;const xe={toc:[]};function Ce(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xe,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The generator responsible for running this timer."))}Ce.isMDXComponent=!0;const Te={toc:[]};function ve(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Te,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait until the timer ticks."))}ve.isMDXComponent=!0;const be={toc:[]};function Le(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},be,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The current iteration index."))}Le.isMDXComponent=!0;const Ze={toc:[]};function Ne(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ze,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield* all(\n  rect.fill('#ff0000', 2),\n  rect.opacity(1, 1),\n);\n// current time: 2s\n")))}Ne.isMDXComponent=!0;const Ae={toc:[]};function Ee(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ae,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Run all tasks concurrently and wait for all of them to finish."))}Ee.isMDXComponent=!0;const Re={toc:[]};function ze(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Re,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to run."))}ze.isMDXComponent=!0;const Se={toc:[]};function Ie(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Se,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield* any(\n  rect.fill('#ff0000', 2),\n  rect.opacity(1, 1),\n);\n// current time: 1s\n")))}Ie.isMDXComponent=!0;const We={toc:[]};function 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 $e={toc:[]};function He(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$e,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* delay(1, rect.fill('#ff0000', 2));\n")),(0,s.kt)("p",null,"Note that the same animation can be written as:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* waitFor(1),\nyield* rect.fill('#ff0000', 2),\n")),(0,s.kt)("p",null,"The reason ",(0,s.kt)("inlineCode",{parentName:"p"},"delay")," exists is to make it easier to pass it to other flow\nfunctions. For example:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* all(\n  rect.opacity(1, 3),\n  delay(1, rect.fill('#ff0000', 2));\n);\n")))}He.isMDXComponent=!0;const Ye={toc:[]};function 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 wo(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."))}wo.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,"A function creating the generator to run. Because generators\ncan't be reset, a new generator is created on each iteration."))}Do.isMDXComponent=!0;const _o={toc:[]};function Xo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_o,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Do nothing."))}Xo.isMDXComponent=!0;const go={toc:[]};function xo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},go,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield run(function* () {\n  // do things\n});\n")))}xo.isMDXComponent=!0;const Co={toc:[]};function To(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Co,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Turn the given generator function into a threadable generator."))}To.isMDXComponent=!0;const vo={toc:[]};function bo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A generator function or a factory that creates the generator."))}bo.isMDXComponent=!0;const Lo={toc:[]};function Zo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield run(function* () {\n  // do things\n});\n")))}Zo.isMDXComponent=!0;const No={toc:[]};function Ao(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},No,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Turn the given generator function into a threadable generator."))}Ao.isMDXComponent=!0;const Eo={toc:[]};function Ro(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An optional name used when displaying this generator in the UI."))}Ro.isMDXComponent=!0;const zo={toc:[]};function So(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A generator function or a factory that creates the generator."))}So.isMDXComponent=!0;const Io={toc:[]};function Wo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Io,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The function doesn't wait until the previous task in the sequence has\nfinished. Once the delay has passed, the next task will start even if\nthe previous is still running."))}Wo.isMDXComponent=!0;const 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 $o(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oo,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"// current time: 0s\nyield waitFor(2);\n// current time: 2s\nyield waitFor(3);\n// current time: 5s\n")))}$o.isMDXComponent=!0;const Ho={toc:[]};function Yo(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ho,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for the given amount of time."))}Yo.isMDXComponent=!0;const 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 wp(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."))}wp.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,"The absolute biggest value from the peaks array."))}Dp.isMDXComponent=!0;const _p={toc:[]};function Xp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_p,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The amount of samples taken."))}Xp.isMDXComponent=!0;const gp={toc:[]};function xp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An array of minimum and maximum waveform data points, interleaved.\nEach value is in range of -1 to 1."))}xp.isMDXComponent=!0;const Cp={toc:[]};function Tp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Samples per seconds."))}Tp.isMDXComponent=!0;const vp={toc:[]};function bp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Abstract scene representations and related utilities."))}bp.isMDXComponent=!0;const Lp={toc:[]};function Zp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Signifies the various stages of a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene"},(0,s.kt)("inlineCode",{parentName:"a"},"Scene")),"'s render lifecycle."))}Zp.isMDXComponent=!0;const Np={toc:[]};function Ap(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Np,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs after a render ends."))}Ap.isMDXComponent=!0;const Ep={toc:[]};function Rp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ep,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs before the render starts when the Scene transitions are applied."))}Rp.isMDXComponent=!0;const zp={toc:[]};function Sp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs at the beginning of a render when the Scene's\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/utils#useContext"},(0,s.kt)("inlineCode",{parentName:"a"},"useContext"))," handlers are applied."))}Sp.isMDXComponent=!0;const Ip={toc:[]};function Wp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ip,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Occurs at the end of a render when the Scene's\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/utils#useContextAfter"},(0,s.kt)("inlineCode",{parentName:"a"},"useContextAfter"))," handlers are applied."))}Wp.isMDXComponent=!0;const 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 $p(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Op,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene is ready to transition out."))}$p.isMDXComponent=!0;const Hp={toc:[]};function Yp(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hp,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Invoking ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/Scene#next"},(0,s.kt)("inlineCode",{parentName:"a"},"next"))," won't have any effect."))}Yp.isMDXComponent=!0;const 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 wr(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."))}wr.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,"Triggered after scene is recalculated."))}Dr.isMDXComponent=!0;const _r={toc:[]};function Xr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_r,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reloaded."))}Xr.isMDXComponent=!0;const gr={toc:[]};function xr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered at various stages of the render lifecycle with an event title and a Context2D."))}xr.isMDXComponent=!0;const Cr={toc:[]};function Tr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reset."))}Tr.isMDXComponent=!0;const vr={toc:[]};function br(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the main thread changes."))}br.isMDXComponent=!0;const Lr={toc:[]};function Zr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene directly before this scene, or null if omitted for performance."))}Zr.isMDXComponent=!0;const Nr={toc:[]};function Ar(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state?"))}Ar.isMDXComponent=!0;const Er={toc:[]};function Rr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Er,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}Rr.isMDXComponent=!0;const zr={toc:[]};function Sr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zr,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state."))}Sr.isMDXComponent=!0;const Ir={toc:[]};function Wr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ir,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Initial"},(0,s.kt)("inlineCode",{parentName:"a"},"Initial"))," state."))}Wr.isMDXComponent=!0;const 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 $r(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Or,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state?"))}$r.isMDXComponent=!0;const Hr={toc:[]};function Yr(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hr,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"Is this scene cached?"),(0,s.kt)("p",null,"Used only by ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/GeneratorScene"},(0,s.kt)("inlineCode",{parentName:"a"},"GeneratorScene")),". Seeking through a project that\ncontains at least one uncached scene will log a warning to the console."),(0,s.kt)("p",null,"Should always return ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}Yr.isMDXComponent=!0;const 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 ws(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."))}ws.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"}

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 Es={toc:[]};function Rs(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Es,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get an array filled with random integers in the given range."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"}),(0,s.kt)("li",{parentName:"ul"})))}Rs.isMDXComponent=!0;const zs={toc:[]};function Ss(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The size of the array."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"})))}Ss.isMDXComponent=!0;const Is={toc:[]};function Ws(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Is,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"})))}Ws.isMDXComponent=!0;const 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 $s(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Os,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the next random integer in the given range."))}$s.isMDXComponent=!0;const Hs={toc:[]};function Ys(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hs,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The start of the range."))}Ys.isMDXComponent=!0;const 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 wc(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."))}wc.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,"The class used to instantiate the scene."))}Dc.isMDXComponent=!0;const _c={toc:[]};function Xc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_c,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The stack trace at the moment of creation."))}Xc.isMDXComponent=!0;const gc={toc:[]};function xc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object."))}xc.isMDXComponent=!0;const Cc={toc:[]};function Tc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Scenes can implement this interface to make their components\ninspectable through the UI."))}Tc.isMDXComponent=!0;const vc={toc:[]};function bc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to overlay additional information about an\nelement on top of the animation."))}bc.isMDXComponent=!0;const Lc={toc:[]};function Zc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for the inspected element."))}Zc.isMDXComponent=!0;const Nc={toc:[]};function Ac(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The element for which to draw an overlay."))}Ac.isMDXComponent=!0;const Ec={toc:[]};function Rc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ec,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}Rc.isMDXComponent=!0;const zc={toc:[]};function Sc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Sc.isMDXComponent=!0;const Ic={toc:[]};function Wc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ic,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,'This information will be displayed in the "Properties" panel.'))}Wc.isMDXComponent=!0;const 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 $c(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The y coordinate."))}$c.isMDXComponent=!0;const Hc={toc:[]};function Yc(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hc,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If a scene destroys and recreates its components upon every reset, the\nreference may no longer be val

10id. Even though the component is still\npresent. This method should check that and return a new reference."))}Yc.isMDXComponent=!0;const 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 wa(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."))}wa.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 ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/LifecycleEvents"},(0,s.kt)("inlineCode",{parentName:"a"},"LifecycleEvents"))," of this scene."))}Da.isMDXComponent=!0;const _a={toc:[]};function Xa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_a,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the cached data changes."))}Xa.isMDXComponent=!0;const ga={toc:[]};function xa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ga,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered after scene is recalculated."))}xa.isMDXComponent=!0;const Ca={toc:[]};function Ta(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ca,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reloaded."))}Ta.isMDXComponent=!0;const va={toc:[]};function ba(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},va,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered at various stages of the render lifecycle with an event title and a Context2D."))}ba.isMDXComponent=!0;const La={toc:[]};function Za(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},La,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Triggered when the scene is reset."))}Za.isMDXComponent=!0;const Na={toc:[]};function Aa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Na,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The scene directly before this scene, or null if omitted for performance."))}Aa.isMDXComponent=!0;const Ea={toc:[]};function Ra(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ea,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state?"))}Ra.isMDXComponent=!0;const za={toc:[]};function Sa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},za,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#AfterTransitionIn"},(0,s.kt)("inlineCode",{parentName:"a"},"AfterTransitionIn"))," state."))}Sa.isMDXComponent=!0;const Ia={toc:[]};function Wa(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ia,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Enter the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#CanTransitionOut"},(0,s.kt)("inlineCode",{parentName:"a"},"CanTransitionOut"))," state."))}Wa.isMDXComponent=!0;const 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 $a(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oa,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Is this scene in the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneState#Finished"},(0,s.kt)("inlineCode",{parentName:"a"},"Finished"))," state?"))}$a.isMDXComponent=!0;const Ha={toc:[]};function Ya(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ha,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Progress this scene one frame forward."))}Ya.isMDXComponent=!0;const 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 wi(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."))}wi.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,"The constructor used when creating new scenes."))}Di.isMDXComponent=!0;const _i={toc:[]};function Xi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_i,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object. This object will be\npassed to the constructor from\n",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneDescription#config"},(0,s.kt)("inlineCode",{parentName:"a"},"config")),"."))}Xi.isMDXComponent=!0;const gi={toc:[]};function xi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gi,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"Describes a scene exposed by scene files."))}xi.isMDXComponent=!0;const Ci={toc:[]};function Ti(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ci,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Configuration object."))}Ti.isMDXComponent=!0;const vi={toc:[]};function bi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The class used to instantiate the scene."))}bi.isMDXComponent=!0;const Li={toc:[]};function Zi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Li,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The stack trace at the moment of creation."))}Zi.isMDXComponent=!0;const Ni={toc:[]};function Ai(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ni,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object."))}Ai.isMDXComponent=!0;const Ei={toc:[]};function Ri(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ei,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A part of the ",(0,s.kt)("a",{parentName:"p",href:"/api/core/scenes/SceneDescription"},(0,s.kt)("inlineCode",{parentName:"a"},"SceneDescription"))," that can be updated during reload."))}Ri.isMDXComponent=!0;const zi={toc:[]};function Si(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The type of the configuration object."))}Si.isMDXComponent=!0;const Ii={toc:[]};function Wi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ii,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This interface is only useful when a scene uses thread generators to run."))}Wi.isMDXComponent=!0;const 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 $i(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents an element to inspect."))}$i.isMDXComponent=!0;const Hi={toc:[]};function Yi(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hi,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A runtime representation of the scene metadata."))}Yi.isMDXComponent=!0;const 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 wl(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")))}wl.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,"Compute the current value of the signal and immediately set it."))}

10Dl.isMDXComponent=!0;const _l={toc:[]};function Xl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_l,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"\nconst signal = createSignal(0);\nsignal.isInitial(); // true\n\nsignal(5);\nsignal.isInitial(); // false\n\nsignal(DEFAULT);\nsignal.isInitial(); // true\n")))}Xl.isMDXComponent=!0;const gl={toc:[]};function xl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the signal is currently using its initial value."))}xl.isMDXComponent=!0;const Cl={toc:[]};function Tl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,s.kt)("p",null,"This method can be used to create copies of signals."))}Tl.isMDXComponent=!0;const vl={toc:[]};function bl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const a = createSignal(2);\nconst b = createSignal(() => a);\n// b() == 2\n\nconst bClone = createSignal(b.raw());\n// bClone() == 2\n\na(4);\n// b() == 4\n// bClone() == 4\n")))}bl.isMDXComponent=!0;const Ll={toc:[]};function Zl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ll,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the raw value of this signal."))}Zl.isMDXComponent=!0;const Nl={toc:[]};function Al(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}Al.isMDXComponent=!0;const El={toc:[]};function Rl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},El,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Reset the signal to its initial value (if one has been set)."))}Rl.isMDXComponent=!0;const zl={toc:[]};function Sl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to stop the signal from updating while keeping its\ncurrent value."))}Sl.isMDXComponent=!0;const Il={toc:[]};function Wl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Il,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"signal.save();\n// same as:\nsignal(signal());\n")))}Wl.isMDXComponent=!0;const 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 $l(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ol,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Compute the current value of the signal and immediately set it."))}$l.isMDXComponent=!0;const Hl={toc:[]};function Yl(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hl,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Thread management."))}Yl.isMDXComponent=!0;const 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 wu(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."))}wu.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,"Prepare the thread for the next update cycle."))}

10Du.isMDXComponent=!0;const _u={toc:[]};function Xu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_u,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The delta time of the next cycle."))}Xu.isMDXComponent=!0;const gu={toc:[]};function xu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A generator function or a normal function that returns a generator."))}xu.isMDXComponent=!0;const Cu={toc:[]};function Tu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Yielded values can be used to control the flow of animation:"),(0,s.kt)("p",null,"Progress to the next frame:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield;\n")),(0,s.kt)("p",null,"Run another generator synchronously:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"yield* generatorFunction();\n")),(0,s.kt)("p",null,"Run another generator concurrently:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n")),(0,s.kt)("p",null,"Await a Promise:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const result = yield asyncFunction();\n")))}Tu.isMDXComponent=!0;const vu={toc:[]};function bu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The main generator type produced by all generator functions in Motion Canvas."))}bu.isMDXComponent=!0;const Lu={toc:[]};function Zu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Cancel all listed tasks."),(0,s.kt)("p",null,"Example:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const task = yield generatorFunction();\n\n// do something concurrently\n\nyield* cancel(task);\n")))}Zu.isMDXComponent=!0;const Nu={toc:[]};function Au(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A list of tasks to cancel."))}Au.isMDXComponent=!0;const Eu={toc:[]};function Ru(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the given value is a ","[Promise][promise]","."))}Ru.isMDXComponent=!0;const zu={toc:[]};function Su(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A possible ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084657/https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/promise"},"Promise"),"."))}Su.isMDXComponent=!0;const Iu={toc:[]};function Wu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the given value is a ",(0,s.kt)("a",{parentName:"p",href:"/api/core/threading#ThreadGenerator"},(0,s.kt)("inlineCode",{parentName:"a"},"ThreadGenerator")),"."))}Wu.isMDXComponent=!0;const 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 $u(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ou,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const taskA = yield generatorFunctionA();\nconst taskB = yield generatorFunctionB();\n\n// do something concurrently\n\n// await any of the tasks\nyield* join(false, taskA, taskB);\n")))}$u.isMDXComponent=!0;const Hu={toc:[]};function Yu(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hu,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Pause the current generator until listed tasks are finished."))}Yu.isMDXComponent=!0;const 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 wm(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."))}wm.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,"The direction in which to slide."))}Dm.isMDXComponent=!0;const _m={toc:[]};function Xm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_m,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition."))}Xm.isMDXComponent=!0;const gm={toc:[]};function xm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Transition to the current scene by altering the Context2D before scenes are rendered."))}xm.isMDXComponent=!0;const Cm={toc:[]};function Tm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The callback to use before the current scene is rendered."))}Tm.isMDXComponent=!0;const vm={toc:[]};function bm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The callback to use before the previous scene is rendered."))}bm.isMDXComponent=!0;const Lm={toc:[]};function Zm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Perform a transition that zooms in on a given area of the scene."))}Zm.isMDXComponent=!0;const Nm={toc:[]};function Am(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The area on which to zoom in."))}Am.isMDXComponent=!0;const Em={toc:[]};function Rm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Em,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition."))}Rm.isMDXComponent=!0;const zm={toc:[]};function Sm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Perform a transition that zooms out from a given area of the scene."))}Sm.isMDXComponent=!0;const Im={toc:[]};function Wm(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Im,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The area from which to zoom out."))}Wm.isMDXComponent=!0;const 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 $m(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Om,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Interpolate between any two Records, including objects and Maps, even with\nmismatched keys."))}$m.isMDXComponent=!0;const Hm={toc:[]};function Ym(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hm,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The input to favor when value is 0."))}Ym.isMDXComponent=!0;const 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 wd(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."))}wd.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"}),(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 Ed={toc:[]};function Rd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ed,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the nth component vector of the matrix. Only defined for 0, 1, and 2."))}Rd.isMDXComponent=!0;const zd={toc:[]};function Sd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zd,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index of the component vector to retrieve."))}Sd.isMDXComponent=!0;const Id={toc:[]};function Wd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Id,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}Wd.isMDXComponent=!0;const 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 $d(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Od,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Multiply each value of the matrix by a scalar."),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"})))}$d.isMDXComponent=!0;const Hd={toc:[]};function Yd(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)(

10{},Hd,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 wh(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"))}wh.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,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}Dh.isMDXComponent=!0;const _h={toc:[]};function Xh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_h,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const a = new Matrix2D(\n  [1, 2],\n  [3, 4],\n  [5, 6],\n);\nconst a = new Matrix2D(\n  [7, 8],\n  [9, 10],\n  [11, 12],\n);\n\nconst result = a.sub(b);\n// => Matrix2D(\n//      [-6, -6],\n//      [-6, -6],\n//      [-6, -6],\n//    )\n")))}Xh.isMDXComponent=!0;const gh={toc:[]};function xh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Subtract the provided matrix from this matrix."))}xh.isMDXComponent=!0;const Ch={toc:[]};function Th(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ch,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The matrix to subract"))}Th.isMDXComponent=!0;const vh={toc:[]};function bh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If ",(0,s.kt)("inlineCode",{parentName:"p"},"vec")," is provided as a scalar, matrix will be translated uniformly\nby this factor."),(0,s.kt)("p",null,"This method returns a new matrix representing the result of the\ncomputation. It will not modify the source matrix."))}bh.isMDXComponent=!0;const Lh={toc:[]};function Zh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const matrix = new Matrix2D(\n  [1, 2],\n  [3, 4],\n  [5, 6],\n);\n\nconst result1 = matrix.translate([2, 3]);\n// => new Matrix2D(\n//      [1, 2],\n//      [3, 4],\n//      [16, 22],\n//    )\n\nconst result2 = matrix.translate(2);\n// => new Matrix2D(\n//      [1, 2],\n//      [3, 4],\n//      [13, 18],\n//    )\n")))}Zh.isMDXComponent=!0;const Nh={toc:[]};function Ah(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Translate the matrix by the dimensions of the provided vector."))}Ah.isMDXComponent=!0;const Eh={toc:[]};function Rh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The vector by which to translate the matrix"))}Rh.isMDXComponent=!0;const zh={toc:[]};function Sh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents a two-dimensional vector."))}Sh.isMDXComponent=!0;const Ih={toc:[]};function Wh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ih,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma.hcl(50, 40, 100)._rgb._unclipped === [322.65,235.24,196.7,1]\n")))}Wh.isMDXComponent=!0;const 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 $h(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Just like color.rgb but adds the alpha channel to the returned\narray."))}$h.isMDXComponent=!0;const Hh={toc:[]};function Yh(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hh,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('33cc00').gl() === [0.2,0.8,0,1]\n")))}Yh.isMDXComponent=!0;const 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 wk(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."))}wk.isMDXComponent=!0;const Mk={toc:[]};function Dk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('skyblue').lch() === [79.21,25.94,235.11]\n")))}Dk.isMDXComponent=!0;const _k={toc:[]};function Xk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_k,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the ",(0,s.kt)("strong",{parentName:"p"},"Lightness"),", ",(0,s.kt)("strong",{parentName:"p"},"chroma"),", and ",(0,s.kt)("strong",{parentName:"p"},"hue"),"\ncomponents."))}Xk.isMDXComponent=!0;const gk={toc:[]};function xk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').rgb() === [255,165,0]\nchroma('orange').darken().rgb() === [198,118,0]\nchroma('orange').darken().rgb(false) === [198.05,118.11,0]\n")))}xk.isMDXComponent=!0;const Ck={toc:[]};function Tk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ck,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns an array with the red, green, and blue component, each as\nnumber within the range 0..255. Chroma internally stores RGB\nchannels as floats but rounds the numbers before returning them.\nYou can pass false to prevent the rounding."))}Tk.isMDXComponent=!0;const vk={toc:[]};function bk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"chroma('orange').rgba() === [255,165,0,1]\nchroma('hsla(20, 100%, 40%, 0.5)').rgba() === [204,68,0,0.5]\n")))}bk.isMDXComponent=!0;const Lk={toc:[]};function Zk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Just like color.rgb but adds the alpha channel to the returned array."))}Zk.isMDXComponent=!0;const Nk={toc:[]};function Ak(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get and set the color opacity."))}Ak.isMDXComponent=!0;const Ek={toc:[]};function Rk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ek,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Returns a RGB() or HSL() string representation that can be used as CSS-color definition.\nmode defaults to ",(0,s.kt)("code",null,"'rgb'")))}Rk.isMDXComponent=!0;const zk={toc:[]};function Sk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Similar to saturate, but the opposite direction."))}Sk.isMDXComponent=!0;const Ik={toc:[]};function Wk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ik,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"set"))}Wk.isMDXComponent=!0;const 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 $k(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ok,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Relative brightness, according to the\n","[WCAG][`http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef`]","(",(0,s.kt)("a",{parentName:"p",href:"http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef"},"http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef"),") definition. Normalized to\n0 for darkest black and 1 for lightest white."))}$k.isMDXComponent=!0;const Hk={toc:[]};function Yk(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hk,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Set luminance of color. The source color will be interpolated 

10with black or white until the correct luminance is found.\nThe color space used defaults to RGB."))}Yk.isMDXComponent=!0;const 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 wy(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."))}wy.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"}),(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 Ey={toc:[]};function Ry(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ey,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The payload to log"))}Ry.isMDXComponent=!0;const zy={toc:[]};function Sy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Mark the given function as deprecated."))}Sy.isMDXComponent=!0;const Iy={toc:[]};function Wy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The function to deprecate."))}Wy.isMDXComponent=!0;const 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 $y(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value can either be 'true' of 'false'\n(as strings) if present, or be undefined if not run\nfrom a vite context or run without the MC Plugin."))}$y.isMDXComponent=!0;const Hy={toc:[]};function Yy(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hy,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the proxy is enabled via the plugin by checking\nfor ",(0,s.kt)("inlineCode",{parentName:"p"},"import.meta.env.VITE_MC_PROXY_ENABLED")))}Yy.isMDXComponent=!0;const 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 wf={toc:[]};function Mf(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 end of the range. ",(0,s.kt)("inlineCode",{parentName:"p"},"to")," itself is not included in the result."))}Mf.isMDXComponent=!0;const Df={toc:[]};function _f(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Df,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value by which to increment or decrement."))}_f.isMDXComponent=!0;const Xf={toc:[]};function gf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provide a function to access the Context2D before the scene is rendered."))}gf.isMDXComponent=!0;const xf={toc:[]};function Cf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The function that will be provided the context before render."))}Cf.isMDXComponent=!0;const Tf={toc:[]};function vf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provide a function to access the Context2D after the scene is rendered."))}vf.isMDXComponent=!0;const bf={toc:[]};function Lf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The function that will be provided the context after render."))}Lf.isMDXComponent=!0;const Zf={toc:[]};function Nf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This can be used to better specify when an animation should start\nas well as how long this animation should take"))}Nf.isMDXComponent=!0;const Af={toc:[]};function Ef(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Af,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"export default makeScene2D(function* (view) {\n  const circle = createRef<Circle>();\n\n  view.add(\n    <Circle ref={circle} width={320} height={320} fill={'lightseagreen'} />,\n  );\n\n  yield* circle().scale(2, useDuration('circleGrow'));\n});\n")))}Ef.isMDXComponent=!0;const Rf={toc:[]};function zf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the event in seconds."))}zf.isMDXComponent=!0;const Sf={toc:[]};function If(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sf,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Register a time event and get its duration in seconds."))}If.isMDXComponent=!0;const Wf={toc:[]};function 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 $f={toc:[]};function Hf(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$f,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the seed should be fixed. Fixed seeds remain\nthe same even when the main scene seed changes."))}Hf.isMDXComponent=!0;const Yf={toc:[]};function 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 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,"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")),"."))}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)("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")))}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,"Get the real time since the start of the animation."))}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,"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")))}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,"Route the given url through a local proxy."))}iw.isMDXComponent=!0;const lw={toc

10:[]};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,"This node can be used to render shapes such as: circle, ellipse, arc, and\nsector (pie chart)."))}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,"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")))}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,"A node for drawing circular shapes."))}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,"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."))}fw.isMDXComponent=!0;const ww={toc:[]};function Mw(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,"A helper signal for operating on the position in world space."))}Mw.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,"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."))}_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,"A helper signal for operating on the rotation in world space."))}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,"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."))}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,"A helper signal for operating on the scale in 

10world space."))}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,"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."))}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,"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")))}Nw.isMDXComponent=!0;const Aw={toc:[]};function Ew(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Aw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"false"))}Ew.isMDXComponent=!0;const Rw={toc:[]};function zw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the path of this circle should be closed."))}zw.isMDXComponent=!0;const Sw={toc:[]};function Iw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sw,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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)."))}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,"360"))}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,"The ending angle in degrees for the circle sector."))}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,"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")))}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,"Represents the offset of this node's origin."))}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,"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")))}Ow.isMDXComponent=!0;const $w={toc:[]};function Hw(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$w,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Hw.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,"Represents the rotation (in degrees) of this node relative to its parent."))}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,"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")))}Qw.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,"Represents the scale of this node in local space of its parent."))}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)("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."))}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,"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")))}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,"Represents the size of this node."))}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,"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)."))}iM.isMDXComponent=!0;const lM={toc:[]};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,"0"))}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,"The starting angle in degrees for the circle sector."))}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,"The nodes will be appended at the end of the children list."))}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)("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;"}))}fM.isMDXComponent=!0;const wM={toc:[]};function MM(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,"Add the given node(s) as the children of this node."))}MM.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,"A node or an array of nodes to append."))}_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,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}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,"The state to apply to the node."))}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,"Get a bounding box for the contents rendered by this node as well\nas its children."))}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,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}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,"Get the offset for this node's cache canvas."))}NM.isMDXComponent=!0;const AM={toc:[]};function EM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}EM.isMDXComponent=!0;const RM={toc:[]};function zM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}zM.isMDXComponent=!0;const SM={toc:[]};function IM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SM,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}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,"Collect all asynchronous resources used by this node."))}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,"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."))}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,"A matrix mapping composite space to world space."))}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,"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."))}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,"Get the desired size of this node."))}OM.isMDXComponent=!0;const $M={toc:[]};function HM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$M,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}HM.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,"Prepare this node to be disposed of."))}JM.isMDXComponent=!0;const KM={toc:[]};function QM(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({}

10,KM,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."))}QM.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"}),(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 wD={toc:[]};function MD(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,"Get a bounding box for the contents rendered by this node."))}MD.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;

10\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}LD.isMDXComponent=!0;const ZD={toc:[]};function ND(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}ND.isMDXComponent=!0;const AD={toc:[]};function ED(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}ED.isMDXComponent=!0;const RD={toc:[]};function zD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}zD.isMDXComponent=!0;const SD={toc:[]};function ID(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SD,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}ID.isMDXComponent=!0;const WD={toc:[]};function 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 $D={toc:[]};function HD(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$D,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}HD.isMDXComponent=!0;const YD={toc:[]};function 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;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,"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 w_={toc:[]};function M_(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,"The sibling node below which to move."))}M_.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"}

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."))}g_.isMDXComponent=!0;const x_={toc:[]};function C_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}C_.isMDXComponent=!0;const T_={toc:[]};function v_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}v_.isMDXComponent=!0;const b_={toc:[]};function L_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}L_.isMDXComponent=!0;const Z_={toc:[]};function N_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}N_.isMDXComponent=!0;const A_={toc:[]};function E_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}E_.isMDXComponent=!0;const R_={toc:[]};function z_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}z_.isMDXComponent=!0;const S_={toc:[]};function I_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}I_.isMDXComponent=!0;const W_={toc:[]};function 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"}),(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 $_={toc:[]};function H_(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$_,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}H_.isMDXComponent=!0;const Y_={toc:[]};function 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 wX={toc:[]};function MX(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,"Whether this node should be cached or not."))}MX.isMDXComponent=!0;const DX={toc:[]};function _X(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}_X.isMDXComponent=!0;const XX={toc:[]};function gX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}gX.isMDXComponent=!0;const xX={toc:[]};function CX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}CX.isMDXComponent=!0;const TX={toc:[]};function vX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}vX.isMDXComponent=!0;const bX={toc:[]};function LX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}LX.isMDXComponent=!0;const ZX={toc:[]};function NX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#restore"},(0,s.kt)("inlineCode",{parentName:"a"}

10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}NX.isMDXComponent=!0;const AX={toc:[]};function EX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}EX.isMDXComponent=!0;const RX={toc:[]};function zX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It can be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Circle#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}zX.isMDXComponent=!0;const SX={toc:[]};function IX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SX,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}IX.isMDXComponent=!0;const WX={toc:[]};function 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 $X={toc:[]};function HX(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$X,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}HX.isMDXComponent=!0;const YX={toc:[]};function 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 wg={toc:[]};function Mg(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 helper signal for operating on the rotation in world space."))}Mg.isMDXComponent=!0;const Dg={toc:[]};function _g(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,s.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Grid#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}_g.isMDXComponent=!0;const Xg={toc:[]};function gg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}gg.isMDXComponent=!0;const xg={toc:[]};function Cg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}Cg.isMDXComponent=!0;const Tg={toc:[]};function vg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}vg.isMDXComponent=!0;const bg={toc:[]};function Lg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}Lg.isMDXComponent=!0;const Zg={toc:[]};function Ng(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Ng.isMDXComponent=!0;const Ag={toc:[]};function Eg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ag,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}Eg.isMDXComponent=!0;const Rg={toc:[]};function zg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}zg.isMDXComponent=!0;const Sg={toc:[]};function Ig(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sg,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}Ig.isMDXComponent=!0;const Wg={toc:[]};function 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 $g={toc:[]};function Hg(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$g,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Hg.isMDXComponent=!0;const Yg={toc:[]};function 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 wx={toc:[]};function Mx(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,"A matrix mapping composite space to world space."))}Mx.isMDXComponent=!0;const Dx={toc:[]};function _x(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}_x.isMDXComponent=!0;const Xx={toc:[]};function gx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}gx.isMDXComponent=!0;const xx={toc:[]};function Cx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}Cx.isMDXComponent=!0;const Tx={toc:[]};function vx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}vx.isMDXComponent=!0;const bx={toc:[]};function Lx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}Lx.isMDXComponent=!0;const Zx={toc:[]};function Nx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}Nx.isMDXComponent=!0;const Ax={toc:[]};function Ex(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ax,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Ex.isMDXComponent=!0;const Rx={toc:[]};function zx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}zx.isMDXComponent=!0;const Sx={toc:[]};function Ix(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sx,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}Ix.isMDXComponent=!0;const Wx={toc:[]};function 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 $x={toc:[]};function Hx(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$x,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}Hx.isMDXComponent=!0;const Yx={toc:[]};function 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 wC={toc:[]};function MC(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,"Get the resolved layout mode of this node."))}MC.isMDXComponent=!0;const DC={toc:[]};function _C(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}_C.isMDXComponent=!0;const XC={toc:[]};function gC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}gC.isMDXComponent=!0;const xC={toc:[]};function CC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}CC.isMDXComponent=!0;const TC={toc:[]};function vC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}vC.isMDXComponent=!0;const bC={toc:[]};function LC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}LC.isMDXComponent=!0;const ZC={toc:[]};function NC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,s.kt)("p",null,"A positive ",(0,s.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}NC.isMDXComponent=!0;const AC={toc:[]};function EC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}EC.isMDXComponent=!0;const RC={toc:[]};function zC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}zC.isMDXComponent=!0;const SC={toc:[]};function IC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SC,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}IC.isMDXComponent=!0;const WC={toc:[]};function 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 $C={toc:[]};function HC(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$C,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}HC.isMDXComponent=!0;const YC={toc:[]};function 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 wT={toc:[]};function MT(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,"Move the node to the top in relation to its siblings."))}MT.isMDXComponent=!0;const DT={toc:[]};function _T(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}_T.isMDXComponent=!0;const XT={toc:[]};function gT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}gT.isMDXComponent=!0;const xT={toc:[]};function CT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}CT.isMDXComponent=!0;const TT={toc:[]};function vT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}vT.isMDXComponent=!0;const bT={toc:[]};function LT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}LT.isMDXComponent=!0;const ZT={toc:[]};function NT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}NT.isMDXComponent=!0;const AT={toc:[]};function ET(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}ET.isMDXComponent=!0;const RT={toc:[]};function zT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RT,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}zT.isMDXComponent=!0;const ST={toc:[]};function IT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ST,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}IT.isMDXComponent=!0;const WT={toc:[]};function 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 $T={toc:[]};function HT(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$T,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}HT.isMDXComponent=!0;const YT={toc:[]};function 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 wv={toc:[]};function Mv(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,"Create a copy of this node."))}Mv.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 Ev(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Av,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Ev.isMDXComponent=!0;const Rv={toc:[]};function zv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}zv.isMDXComponent=!0;const Sv={toc:[]};function Iv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sv,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}Iv.isMDXComponent=!0;const Wv={toc:[]};function 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 $v={toc:[]};function Hv(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$v,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}Hv.isMDXComponent=!0;const Yv={toc:[]};function 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 wb={toc:[]};function Mb(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,"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")))}Mb.isMDXComponent=!0;const Db={toc:[]};function _b(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Db,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}_b.isMDXComponent=!0;const Xb={toc:[]};function gb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}gb.isMDXComponent=!0;const xb={toc:[]};function Cb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Cb.isMDXComponent=!0;const Tb={toc:[]};function vb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}vb.isMDXComponent=!0;const bb={toc:[]};

10function Lb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}Lb.isMDXComponent=!0;const Zb={toc:[]};function Nb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}Nb.isMDXComponent=!0;const Ab={toc:[]};function Eb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ab,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}Eb.isMDXComponent=!0;const Rb={toc:[]};function zb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}zb.isMDXComponent=!0;const Sb={toc:[]};function Ib(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sb,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}Ib.isMDXComponent=!0;const Wb={toc:[]};function 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 $b={toc:[]};function Hb(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$b,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Hb.isMDXComponent=!0;const Yb={toc:[]};function 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 wL={toc:[]};function ML(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,"A matrix mapping composite space to world space."))}ML.isMDXComponent=!0;const DL={toc:[]};function _L(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}_L.isMDXComponent=!0;const XL={toc:[]};function gL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}gL.isMDXComponent=!0;const xL={toc:[]};function CL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}CL.isMDXComponent=!0;const TL={toc:[]};function vL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}vL.isMDXComponent=!0;const bL={toc:[]};function LL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}LL.isMDXComponent=!0;const ZL={toc:[]};function NL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}NL.isMDXComponent=!0;const AL={toc:[]};function EL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}EL.isMDXComponent=!0;const RL={toc:[]};function zL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}zL.isMDXComponent=!0;const SL={toc:[]};function IL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SL,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}IL.isMDXComponent=!0;const WL={toc:[]};function 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 $L={toc:[]};function HL(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$L,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}HL.isMDXComponent=!0;const YL={toc:[]};function 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 wZ={toc:[]};function MZ(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,"A node or an array of nodes to insert."))}MZ.isMDXComponent=!0;const DZ={toc:[]};function _Z(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}_Z.isMDXComponent=!0;const XZ={toc:[]};function gZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}gZ.isMDXComponent=!0;const xZ={toc:[]};function CZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}CZ.isMDXComponent=!0;const TZ={toc:[]};function vZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}vZ.isMDXComponent=!0;const bZ={toc:[]};function LZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}LZ.isMDXComponent=!0;const ZZ={toc:[]};function NZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}NZ.isMDXComponent=!0;const AZ={toc:[]};function EZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}EZ.isMDXComponent=!0;const RZ={toc:[]};function zZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}zZ.isMDXComponent=!0;const SZ={toc:[]};function IZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SZ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}IZ.isMDXComponent=!0;const WZ={toc:[]};function 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 $Z={toc:[]};function HZ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$Z,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}HZ.isMDXComponent=!0;const YZ={toc:[]};function 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 wN={toc:[]};function MN(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,"Move the node to the provided position relative to its siblings."))}MN.isMDXComponent=!0;const DN={toc:[]};function _N(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}_N.isMDXComponent=!0;const XN={toc:[]};function gN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}gN.isMDXComponent=!0;const xN={toc:[]};function CN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}CN.isMDXComponent=!0;const TN={toc:[]};function vN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}vN.isMDXComponent=!0;const bN={toc:[]};function LN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}LN.isMDXComponent=!0;const ZN={toc:[]};function NN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}NN.isMDXComponent=!0;const AN={toc:[]};function EN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}EN.isMDXComponent=!0;const RN={toc:[]};function zN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}zN.isMDXComponent=!0;const SN={toc:[]};function IN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SN,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}IN.isMDXComponent=!0;const WN={toc:[]};function 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 $N={toc:[]};function HN(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$N,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}HN.isMDXComponent=!0;const YN={toc:[]};function 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 wA={toc:[]};function MA(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,"Push a snapshot of the node's current state onto the node's state stack."))}MA.isMDXComponent=!0;const DA={toc:[]};function _A(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"overrides ",(0,s.kt)("inlineCode",{parentName:"p"},"Image.src")," setter to warn the user that the value\nis not used"))}_A.isMDXComponent=!0;const XA={toc:[]};function gA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It can be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}gA.isMDXComponent=!0;const xA={toc:[]};function CA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}CA.isMDXComponent=!0;const TA={toc:[]};function vA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}vA.isMDXComponent=!0;const bA={toc:[]};function LA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Icon#clone"},(0,s.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}LA.isMDXComponent=!0;const ZA={toc:[]};function NA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}NA.isMDXComponent=!0;const AA={toc:[]};function EA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}EA.isMDXComponent=!0;const RA={toc:[]};function zA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Address to Iconify API for the requested Icon."))}zA.isMDXComponent=!0;const SA={toc:[]};function IA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SA,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create the URL that will be used as the Image source"))}IA.isMDXComponent=!0;const WA={toc:[]};function 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 $A={toc:[]};function HA(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$A,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}HA.isMDXComponent=!0;const YA={toc:[]};function 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 tE={toc:[]};function nE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'

10s parent."))}nE.isMDXComponent=!0;const eE={toc:[]};function oE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}oE.isMDXComponent=!0;const pE={toc:[]};function rE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}rE.isMDXComponent=!0;const sE={toc:[]};function cE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}cE.isMDXComponent=!0;const aE={toc:[]};function iE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}iE.isMDXComponent=!0;const lE={toc:[]};function uE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}uE.isMDXComponent=!0;const mE={toc:[]};function dE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,s.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}dE.isMDXComponent=!0;const hE={toc:[]};function kE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}kE.isMDXComponent=!0;const yE={toc:[]};function fE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}fE.isMDXComponent=!0;const wE={toc:[]};function ME(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wE,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")))}ME.isMDXComponent=!0;const DE={toc:[]};function _E(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}_E.isMDXComponent=!0;const XE={toc:[]};function gE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}gE.isMDXComponent=!0;const xE={toc:[]};function CE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}CE.isMDXComponent=!0;const TE={toc:[]};function vE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}vE.isMDXComponent=!0;const bE={toc:[]};function LE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}LE.isMDXComponent=!0;const ZE={toc:[]};function NE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}NE.isMDXComponent=!0;const AE={toc:[]};function EE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}EE.isMDXComponent=!0;const RE={toc:[]};function zE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}zE.isMDXComponent=!0;const SE={toc:[]};function IE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}IE.isMDXComponent=!0;const WE={toc:[]};function 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,"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")))}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,"Represents the size of this node."))}BE.isMDXComponent=!0;const FE={toc:[]};function UE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}UE.isMDXComponent=!0;const VE={toc:[]};function jE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n  width={300}\n  height={300}\n  smoothCorners={true}\n/>\n")))}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,"Will set the corner drawing method to smooth corners."))}OE.isMDXComponent=!0;const $E={toc:[]};function HE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$E,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}HE.isMDXComponent=!0;const YE={toc:[]};function JE(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YE,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}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,"Add the given node(s) as the children of this node."))}QE.isMDXComponent=!0;const tR={toc:[]};function nR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}nR.isMDXComponent=!0;const eR={toc:[]};function oR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}oR.isMDXComponent=!0;const pR={toc:[]};function rR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}rR.isMDXComponent=!0;const sR={toc:[]};function cR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}cR.isMDXComponent=!0;const aR={toc:[]};function iR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}iR.isMDXComponent=!0;const lR={toc:[]};function uR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}uR.isMDXComponent=!0;const mR={toc:[]};function dR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}dR.isMDXComponent=!0;const hR={toc:[]};function kR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}kR.isMDXComponent=!0;const yR={toc:[]};function fR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}fR.isMDXComponent=!0;const wR={toc:[]};function MR(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,"Collect all asynchronous resources used by this node."))}MR.isMDXComponent=!0;const DR={toc:[]};function _R(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}_R.isMDXComponent=!0;const XR={toc:[]};function gR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}gR.isMDXComponent=!0;const xR={toc:[]};function CR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}CR.isMDXComponent=!0;const TR={toc:[]};function vR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}vR.isMDXComponent=!0;const bR={toc:[]};function LR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}LR.isMDXComponent=!0;const ZR={toc:[]};function NR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}NR.isMDXComponent=!0;const AR={toc:[]};function ER(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}ER.isMDXComponent=!0;const RR={toc:[]};function zR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}zR.isMDXComponent=!0;const SR={toc:[]};function IR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}

10IR.isMDXComponent=!0;const WR={toc:[]};function 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,"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."))}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,"Draw an overlay for this node."))}BR.isMDXComponent=!0;const FR={toc:[]};function UR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}UR.isMDXComponent=!0;const VR={toc:[]};function jR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},VR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}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,"The returned bounding box should be in local space."))}OR.isMDXComponent=!0;const $R={toc:[]};function HR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$R,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}HR.isMDXComponent=!0;const YR={toc:[]};function JR(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},YR,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}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,"Get a bounding box for the contents rendered by this node."))}QR.isMDXComponent=!0;const tz={toc:[]};function nz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given position."))}nz.isMDXComponent=!0;const ez={toc:[]};function oz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ez,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The position in local space at which to sample the color."))}oz.isMDXComponent=!0;const pz={toc:[]};function rz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get color of the image at the given pixel."))}rz.isMDXComponent=!0;const sz={toc:[]};function cz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The pixel's position."))}cz.isMDXComponent=!0;const az={toc:[]};function iz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},az,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}iz.isMDXComponent=!0;const lz={toc:[]};function uz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}uz.isMDXComponent=!0;const mz={toc:[]};function dz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}dz.isMDXComponent=!0;const hz={toc:[]};function kz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}kz.isMDXComponent=!0;const yz={toc:[]};function fz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}fz.isMDXComponent=!0;const wz={toc:[]};function Mz(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,"Insert the given node(s) at the specified index in the children list."))}Mz.isMDXComponent=!0;const Dz={toc:[]};function _z(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}_z.isMDXComponent=!0;const Xz={toc:[]};function gz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}gz.isMDXComponent=!0;const xz={toc:[]};function Cz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}Cz.isMDXComponent=!0;const Tz={toc:[]};function vz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}vz.isMDXComponent=!0;const bz={toc:[]};function Lz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}Lz.isMDXComponent=!0;const Zz={toc:[]};function Nz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Zz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}Nz.isMDXComponent=!0;const Az={toc:[]};function Ez(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Az,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Ez.isMDXComponent=!0;const Rz={toc:[]};function zz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}zz.isMDXComponent=!0;const Sz={toc:[]};function Iz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}Iz.isMDXComponent=!0;const Wz={toc:[]};function 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,"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")))}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,"Get the local-to-world matrix for this node."))}Bz.isMDXComponent=!0;const Fz={toc:[]};function Uz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Fz,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,s.kt)("p",null,"A positive ",(0,s.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}Uz.isMDXComponent=!0;const Vz={toc:[]};function 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,"Rearrange this node in relation to its siblings."))}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,"Number of places by which the node should be moved."))}Oz.isMDXComponent=!0;const $z={toc:[]};function Hz(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$z,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}Hz.isMDXComponent=!0;const Yz={toc:[]};function 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,"Move the node above the provided node in the parent's layout."))}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,"The sibling node below which to move."))}Qz.isMDXComponent=!0;const tS={toc:[]};function nS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}nS.isMDXComponent=!0;const eS={toc:[]};function oS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}oS.isMDXComponent=!0;const pS={toc:[]};function rS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}rS.isMDXComponent=!0;const sS={toc:[]};function cS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}cS.isMDXComponent=!0;const aS={toc:[]};function iS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}iS.isMDXComponent=!0;const lS={toc:[]};function uS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lS,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}uS.isMDXComponent=!0;const mS={toc:[]};function dS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}dS.isMDXComponent=!0;const hS={toc:[]};function kS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}kS.isMDXComponent=!0;const yS={toc:[]};function fS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}fS.isMDXComponent=!0;const wS={toc:[]};function MS(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,"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)."))}MS.isMDXComponent=!0;const DS={toc:[]};function _S(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}_S.isMDXComponent=!0;const XS={toc:[]};function gS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}gS.isMDXComponent=!0;const xS={toc:[]};function CS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}CS.isMDXComponent=!0;const TS={toc:[]};function vS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}vS.isMDXComponent=!0;const bS={toc:[]};function LS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}LS.isMDXComponent=!0;const ZS={toc:[]};function NS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}NS.isMDXComponent=!0;const AS={toc:[]};function ES(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}ES.isMDXComponent=!0;const RS={toc:[]};function zS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}zS.isMDXComponent=!0;const SS={toc:[]};function IS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}IS.isMDXComponent=!0;const WS={toc:[]};function 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,"Create a reactive copy of this node."))}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,"Properties to override."))}BS.isMDXComponent=!0;const FS={toc:[]};function US(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FS,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}US.isMDXComponent=!0;const VS={toc:[]};function 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,"Remove all children of this node."))}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,"Render this node onto the given canvas."))}OS.isMDXComponent=!0;const $S={toc:[]};function HS(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$S,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}HS.isMDXComponent=!0;const YS={toc:[]};function 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,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}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,"Change the parent of this node while keeping the absolute transform."))}QS.isMDXComponent=!0;const tI={toc:[]};function nI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}nI.isMDXComponent=!0;const eI={toc:[]};function oI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}oI.isMDXComponent=!0;const pI={toc:[]};function rI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}rI.isMDXComponent=!0;const sI={toc:[]};function cI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}cI.isMDXComponent=!0;const aI={toc:[]};function iI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}iI.isMDXComponent=!0;const lI={toc:[]};function uI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}uI.isMDXComponent=!0;const mI={toc:[]};function dI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}dI.isMDXComponent=!0;const hI={toc:[]};function kI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}kI.isMDXComponent=!0;const yI={toc:[]};function fI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}fI.isMDXComponent=!0;const wI={toc:[]};function MI(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,"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."))}MI.isMDXComponent=!0;const DI={toc:[]};function _I(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}_I.isMDXComponent=!0;const XI={toc:[]};function gI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It can be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}gI.isMDXComponent=!0;const xI={toc:[]};function CI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}CI.isMDXComponent=!0;const TI={toc:[]};function vI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}vI.isMDXComponent=!0;const bI={toc:[]};function LI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Img#clone"},(0,s.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}LI.isMDXComponent=!0;const ZI={toc:[]};function NI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}NI.isMDXComponent=!0;const AI={toc:[]};function EI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}EI.isMDXComponent=!0;const RI={toc:[]};function zI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}zI.isMDXComponent=!0;const SI={toc:[]};function II(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SI,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}II.isMDXComponent=!0;const WI={toc:[]};function 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 $I={toc:[]};function HI(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$I,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}HI.isMDXComponent=!0;const YI={toc:[]};function 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 wW={toc:[]};function MW(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,"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")))}MW.isMDXComponent=!0;const DW={toc:[]};function _W(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}_W.isMDXComponent=!0;const XW={toc:[]};function gW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}gW.isMDXComponent=!0;const xW={toc:[]};function CW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}CW.isMDXComponent=!0;const TW={toc:[]};function vW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}vW.isMDXComponent=!0;const bW={toc:[]};function LW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}LW.isMDXComponent=!0;const ZW={toc:[]};function NW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}NW.isMDXComponent=!0;const AW={toc:[]};function EW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}EW.isMDXComponent=!0;const RW={toc:[]};function zW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}zW.isMDXComponent=!0;const SW={toc:[]};function IW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SW,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}IW.isMDXComponent=!0;const WW={toc:[]};function 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 $W={toc:[]};function HW(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$W,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}HW.isMDXComponent=!0;const YW={toc:[]};function 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 wP={toc:[]};function MP(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,"A matrix mapping composite space to world space."))}MP.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 EP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}EP.isMDXComponent=!0;const RP={toc:[]};function zP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}zP.isMDXComponent=!0;const SP={toc:[]};function IP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SP,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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 $P={toc:[]};function HP(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$P,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}HP.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 wG={toc:[]};function MG(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,"An index at which to insert the node(s)."))}MG.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 EG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}EG.isMDXComponent=!0;const RG={toc:[]};function zG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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")))}zG.isMDXComponent=!0;const SG={toc:[]};function IG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SG,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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 $G={toc:[]};function HG(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$G,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}HG.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 wB={toc:[]};function MB(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,"The index to move the node to."))}MB.isMDXComponent=!0;const DB={toc:[]};function _B(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}_B.isMDXComponent=!0;const XB={toc:[]};function gB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}gB.isMDXComponent=!0;const xB={toc:[]};function CB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}CB.isMDXComponent=!0;const TB={toc:[]};function vB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}vB.isMDXComponent=!0;const bB={toc:[]};function LB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}LB.isMDXComponent=!0;const ZB={toc:[]};function NB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}NB.isMDXComponent=!0;const AB={toc:[]};function EB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}EB.isMDXComponent=!0;const RB={toc:[]};function zB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}zB.isMDXComponent=!0;const SB={toc:[]};function IB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SB,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}IB.isMDXComponent=!0;const WB={toc:[]};function 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 $B={toc:[]};function HB(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$B,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}HB.isMDXComponent=!0;const YB={toc:[]};function 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 wF={toc:[]};function MF(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,"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."))}MF.isMDXComponent=!0;const DF={toc:[]};function _F(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}_F.isMDXComponent=!0;const XF={toc:[]};function gF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}gF.isMDXComponent=!0;const xF={toc:[]};function CF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#clone"},(0,s.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}CF.isMDXComponent=!0;const TF={toc:[]};function vF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}vF.isMDXComponent=!0;const bF={toc:[]};function LF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}LF.isMDXComponent=!0;const ZF={toc:[]};function NF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}NF.isMDXComponent=!0;const AF={toc:[]};function EF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}EF.isMDXComponent=!0;const RF={toc:[]};function zF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}zF.isMDXComponent=!0;const SF={toc:[]};function IF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SF,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Latex#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}IF.isMDXComponent=!0;const WF={toc:[]};function 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 $F={toc:[]};function HF(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$F,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}HF.isMDXComponent=!0;const YF={toc:[]};function 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 wU={toc:[]};function MU(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,"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")))}MU.isMDXComponent=!0;const DU={toc:[]};function _U(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}_U.isMDXComponent=!0;const XU={toc:[]};function gU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}gU.isMDXComponent=!0;const xU={toc:[]};function CU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}CU.isMDXComponent=!0;const TU={toc:[]};function vU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}vU.isMDXComponent=!0;const bU={toc:[]};function LU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}LU.isMDXComponent=!0;const ZU={toc:[]};function NU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}NU.isMDXComponent=!0;const AU={toc:[]};function EU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}EU.isMDXComponent=!0;const RU={toc:[]};function zU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}zU.isMDXComponent=!0;const SU={toc:[]};function IU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SU,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}IU.isMDXComponent=!0;const WU={toc:[]};function 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 $U={toc:[]};function HU(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$U,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}HU.isMDXComponent=!0;const YU={toc:[]};function 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 wV={toc:[]};function MV(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,"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."))}MV.isMDXComponent=!0;const DV={toc:[]};function _V(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}_V.isMDXComponent=!0;const XV={toc:[]};function gV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}gV.isMDXComponent=!0;const xV={toc:[]};function CV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}CV.isMDXComponent=!0;const TV={toc:[]};function vV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TV,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}vV.isMDXComponent=!0;const bV={toc:[]};function LV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}LV.isMDXComponent=!0;const ZV={toc:[]};function NV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}NV.isMDXComponent=!0;const AV={toc:[]};function EV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}EV.isMDXComponent=!0;const RV={toc:[]};function zV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}zV.isMDXComponent=!0;const SV={toc:[]};function IV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SV,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}IV.isMDXComponent=!0;const WV={toc:[]};function 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 $V={toc:[]};function HV(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$V,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}HV.isMDXComponent=!0;const YV={toc:[]};function 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 wj={toc:[]};function Mj(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,"Number of places by which the node should be moved."))}Mj.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 Ej(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Aj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Ej.isMDXComponent=!0;const Rj={toc:[]};function zj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rj,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}zj.isMDXComponent=!0;const Sj={toc:[]};function Ij(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sj,e,{components:n,mdxType:"MDXLayout"}

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 $j={toc:[]};function Hj(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$j,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}Hj.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 wq={toc:[]};function Mq(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,"Render this node onto the given canvas."))}Mq.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 Eq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Aq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}Eq.isMDXComponent=!0;const Rq={toc:[]};function zq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}zq.isMDXComponent=!0;const Sq={toc:[]};function Iq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Sq,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("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 $q={toc:[]};function Hq(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$q,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}Hq.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 wO={toc:[]};function MO(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,"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")))}MO.isMDXComponent=!0;const DO={toc:[]};function _O(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}_O.isMDXComponent=!0;const XO={toc:[]};function gO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'

10s parent."))}gO.isMDXComponent=!0;const xO={toc:[]};function CO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}CO.isMDXComponent=!0;const TO={toc:[]};function vO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}vO.isMDXComponent=!0;const bO={toc:[]};function LO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}LO.isMDXComponent=!0;const ZO={toc:[]};function NO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}NO.isMDXComponent=!0;const AO={toc:[]};function EO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}EO.isMDXComponent=!0;const RO={toc:[]};function zO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,s.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}zO.isMDXComponent=!0;const SO={toc:[]};function IO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SO,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}IO.isMDXComponent=!0;const WO={toc:[]};function 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 $O={toc:[]};function HO(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$O,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}HO.isMDXComponent=!0;const YO={toc:[]};function 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 t$={toc:[]};function n$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},t$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}n$.isMDXComponent=!0;const e$={toc:[]};function o$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},e$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}o$.isMDXComponent=!0;const p$={toc:[]};function r$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},p$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}r$.isMDXComponent=!0;const s$={toc:[]};function c$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},s$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}c$.isMDXComponent=!0;const a$={toc:[]};function i$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},a$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}i$.isMDXComponent=!0;const l$={toc:[]};function u$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},l$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}u$.isMDXComponent=!0;const m$={toc:[]};function d$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},m$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}d$.isMDXComponent=!0;const h$={toc:[]};function k$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},h$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}k$.isMDXComponent=!0;const y$={toc:[]};function f$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},y$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}f$.isMDXComponent=!0;const w$={toc:[]};function M$(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,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}M$.isMDXComponent=!0;const D$={toc:[]};function _$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}_$.isMDXComponent=!0;const X$={toc:[]};function g$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}g$.isMDXComponent=!0;const x$={toc:[]};function C$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}C$.isMDXComponent=!0;const T$={toc:[]};function v$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}v$.isMDXComponent=!0;const b$={toc:[]};function L$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}L$.isMDXComponent=!0;const Z$={toc:[]};function N$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Certain effects such as blur and shadows ignore the current transformation.\nThis matrix can be used to transform their parameters so that the effect\nappears relative to the closes composite root."))}

10N$.isMDXComponent=!0;const A$={toc:[]};function E$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}E$.isMDXComponent=!0;const R$={toc:[]};function z$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}z$.isMDXComponent=!0;const S$={toc:[]};function I$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}I$.isMDXComponent=!0;const W$={toc:[]};function 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 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."))}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,"Prepare this node to be disposed of."))}B$.isMDXComponent=!0;const F$={toc:[]};function U$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},F$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}U$.isMDXComponent=!0;const V$={toc:[]};function 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,"Draw this node onto the canvas."))}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,"The context to draw with."))}O$.isMDXComponent=!0;const $$={toc:[]};function H$(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$$,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}H$.isMDXComponent=!0;const Y$={toc:[]};function 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,"Draw an overlay for 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,"The context to draw with."))}Q$.isMDXComponent=!0;const tH={toc:[]};function nH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}nH.isMDXComponent=!0;const eH={toc:[]};function oH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}oH.isMDXComponent=!0;const pH={toc:[]};function rH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}rH.isMDXComponent=!0;const sH={toc:[]};function cH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}cH.isMDXComponent=!0;const aH={toc:[]};function iH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}iH.isMDXComponent=!0;const lH={toc:[]};function uH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}uH.isMDXComponent=!0;const mH={toc:[]};function dH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}dH.isMDXComponent=!0;const hH={toc:[]};function kH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hH,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}kH.isMDXComponent=!0;const yH={toc:[]};function fH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}fH.isMDXComponent=!0;const wH={toc:[]};function MH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wH,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;"}))}MH.isMDXComponent=!0;const DH={toc:[]};function _H(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}_H.isMDXComponent=!0;const XH={toc:[]};function gH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}gH.isMDXComponent=!0;const xH={toc:[]};function CH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}CH.isMDXComponent=!0;const TH={toc:[]};function vH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}vH.isMDXComponent=!0;const bH={toc:[]};function LH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}LH.isMDXComponent=!0;const ZH={toc:[]};function NH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"When the mode is ",(0,s.kt)("inlineCode",{parentName:"p"},"null"),", its value will be inherited from the parent."),(0,s.kt)("p",null,"Use ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Line#layout"},(0,s.kt)("inlineCode",{parentName:"a"},"layout"))," to get the raw mode set for this node (without\ninheritance)."))}NH.isMDXComponent=!0;const AH={toc:[]};function EH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}EH.isMDXComponent=!0;const RH={toc:[]};function zH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}zH.isMDXComponent=!0;const SH={toc:[]};function IH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}IH.isMDXComponent=!0;const WH={toc:[]};function 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 matrix transforms vectors from local space of this node to world\nspace."))}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,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}BH.isMDXComponent=!0;const FH={toc:[]};function UH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},FH,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}UH.isMDXComponent=!0;const VH={toc:[]};function 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,"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."))}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,"Rearrange this node in relation to its siblings."))}OH.isMDXComponent=!0;const $H={toc:[]};function HH(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$H,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}HH.isMDXComponent=!0;const YH={toc:[]};function 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,"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."))}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,"Move the node above the provided node in the parent's layout."))}QH.isMDXComponent=!0;const tY={toc:[]};function nY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},tY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}nY.isMDXComponent=!0;const eY={toc:[]};function oY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},eY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}oY.isMDXComponent=!0;const pY={toc:[]};function rY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},pY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}rY.isMDXComponent=!0;const sY={toc:[]};function cY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},sY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}cY.isMDXComponent=!0;const aY={toc:[]};function iY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},aY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}iY.isMDXComponent=!0;const lY={toc:[]};function uY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},lY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}uY.isMDXComponent=!0;const mY={toc:[]};function dY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},mY,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}dY.isMDXComponent=!0;const hY={toc:[]};function kY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},hY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}kY.isMDXComponent=!0;const yY={toc:[]};function fY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},yY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}fY.isMDXComponent=!0;const wY={toc:[]};function MY(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,"The new offset."))}MY.isMDXComponent=!0;const DY={toc:[]};function _Y(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}_Y.isMDXComponent=!0;const XY={toc:[]};function gY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}gY.isMDXComponent=!0;const xY={toc:[]};function CY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}CY.isMDXComponent=!0;const TY={toc:[]};function vY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}vY.isMDXComponent=!0;const bY={toc:[]};function LY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}LY.isMDXComponent=!0;const ZY={toc:[]};function NY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the end of the children list and from then on\nwill be rendered on top of all of its siblings."))}NY.isMDXComponent=!0;const AY={toc:[]};function EY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}EY.isMDXComponent=!0;const RY={toc:[]};function zY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}zY.isMDXComponent=!0;const SY={toc:[]};function IY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SY,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}IY.isMDXComponent=!0;const WY={toc:[]};function 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 $Y={toc:[]};function HY(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$Y,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}HY.isMDXComponent=!0;const YY={toc:[]};function 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 wJ={toc:[]};function MJ(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,"The timing function to use for the transition"))}MJ.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 EJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}EJ.isMDXComponent=!0;const RJ={toc:[]};function zJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}zJ.isMDXComponent=!0;const SJ={toc:[]};function IJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SJ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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 $J={toc:[]};function HJ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$J,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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")))}HJ.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 wK={toc:[]};function MK(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,"Represents the rotation (in degrees) of this node relative to its parent."))}MK.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 EK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}EK.isMDXComponent=!0;const RK={toc:[]};function zK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}zK.isMDXComponent=!0;const SK={toc:[]};function IK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SK,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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 $K={toc:[]};function HK(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$K,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}HK.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 wQ={toc:[]};function MQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},wQ,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}MQ.isMDXComponent=!0;const DQ={toc:[]};function _Q(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},DQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}_Q.isMDXComponent=!0;const XQ={toc:[]};function gQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},XQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}gQ.isMDXComponent=!0;const xQ={toc:[]};function CQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}CQ.isMDXComponent=!0;const TQ={toc:[]};function vQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},TQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}vQ.isMDXComponent=!0;const bQ={toc:[]};function LQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}LQ.isMDXComponent=!0;const ZQ={toc:[]};function NQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ZQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}NQ.isMDXComponent=!0;const AQ={toc:[]};function EQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},AQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}EQ.isMDXComponent=!0;const RQ={toc:[]};function zQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},RQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}zQ.isMDXComponent=!0;const SQ={toc:[]};function IQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},SQ,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}IQ.isMDXComponent=!0;const WQ={toc:[]};function 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 $Q={toc:[]};function HQ(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$Q,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}HQ.isMDXComponent=!0;const YQ={toc:[]};function 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 w0={toc:[]};function M0(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,"Move the node below the provided node in the parent's layout."))}M0.isMDXComponent=!0;const D0={toc:[]};function _0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}_0.isMDXComponent=!0;const X0={toc:[]};function g0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}g0.isMDXComponent=!0;const x0={toc:[]};function C0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x0,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}C0.isMDXComponent=!0;const T0={toc:[]};function v0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}v0.isMDXComponent=!0;const b0={toc:[]};function L0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}L0.isMDXComponent=!0;const Z0={toc:[]};function N0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}N0.isMDXComponent=!0;const A0={toc:[]};function E0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}E0.isMDXComponent=!0;const R0={toc:[]};function z0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}z0.isMDXComponent=!0;const S0={toc:[]};function I0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}I0.isMDXComponent=!0;const W0={toc:[]};function 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 $0={toc:[]};function H0(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$0,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}H0.isMDXComponent=!0;const Y0={toc:[]};function 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 w2={toc:[]};function M2(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,"Restore the node to its last saved state."))}M2.isMDXComponent=!0;const D2={toc:[]};function _2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}_2.isMDXComponent=!0;const X2={toc:[]};function g2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}g2.isMDXComponent=!0;const x2={toc:[]};function C2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#restore"},(0,s.kt)("inlineCode",{parentName:"a"}

10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}C2.isMDXComponent=!0;const T2={toc:[]};function v2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}v2.isMDXComponent=!0;const b2={toc:[]};function L2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It can be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}L2.isMDXComponent=!0;const Z2={toc:[]};function N2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}N2.isMDXComponent=!0;const A2={toc:[]};function E2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}E2.isMDXComponent=!0;const R2={toc:[]};function z2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Node#clone"},(0,s.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}z2.isMDXComponent=!0;const S2={toc:[]};function I2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}I2.isMDXComponent=!0;const W2={toc:[]};function 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 $2={toc:[]};function H2(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$2,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}H2.isMDXComponent=!0;const Y2={toc:[]};function 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 w1={toc:[]};function M1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},w1,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."))}M1.isMDXComponent=!0;const D1={toc:[]};function _1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}_1.isMDXComponent=!0;const X1={toc:[]};function g1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}g1.isMDXComponent=!0;const x1={toc:[]};function C1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}C1.isMDXComponent=!0;const T1={toc:[]};function v1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}v1.isMDXComponent=!0;const b1={toc:[]};function L1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}L1.isMDXComponent=!0;const Z1={toc:[]};function N1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}N1.isMDXComponent=!0;const A1={toc:[]};function E1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}E1.isMDXComponent=!0;const R1={toc:[]};function z1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}z1.isMDXComponent=!0;const S1={toc:[]};function I1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"For example, a value of 6 creates a hexagon."))}I1.isMDXComponent=!0;const W1={toc:[]};function 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 $1={toc:[]};function H1(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$1,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}H1.isMDXComponent=!0;const Y1={toc:[]};function 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 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,"A node or an array of nodes to append."))}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"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}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,"The state to apply to the node."))}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,"Get a bounding box for the contents rendered by this node as well\nas its children."))}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,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}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,"Get the offset for this node's cache canvas."))}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,"Get a cache canvas with the contents of this node rendered onto it."))}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,"Create a copy of this node."))}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,"Properties to override."))}f6.isMDXComponent=!0;const w6={toc:[]};function M6(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,"Collect all asynchronous resources used by this node."))}M6.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,"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."))}_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,"A matrix mapping composite space to world space."))}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,"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."))}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,"Get the desired size of this node."))}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,"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."))}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,"Prepare this node to be disposed of."))}N6.isMDXComponent=!0;const A6={toc:[]};function E6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}E6.isMDXComponent=!0;const R6={toc:[]};function z6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}z6.isMDXComponent=!0;const S6={toc:[]};function I6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}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,"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."))}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,"Draw an overlay for this node."))}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,"The context to draw with."))}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,"A local-to-screen matrix."))}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"}

10),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}O6.isMDXComponent=!0;const $6={toc:[]};function H6(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$6,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}H6.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,"The returned bounding box should be in local space."))}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,"Get a bounding box for the contents rendered by this node."))}Q6.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,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}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,"Return a snapshot of the node's current signal 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,"Try to find a node intersecting the given position."))}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,"The searched position."))}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)("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;"}))}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,"Insert the given node(s) at the specified index in the children list."))}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,"A node or an array of nodes to insert."))}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,"An index at which to insert the node(s)."))}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,"Create an instance of this node's class."))}f3.isMDXComponent=!0;const w3={toc:[]};function M3(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,"Properties to pass to the constructor."))}M3.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,"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)."))}_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,"Get the resolved layout mode of this node."))}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 matrix transforms vectors from local space of this node to local space\nof this node's parent."))}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 local-to-parent matrix for 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 matrix transforms vectors from local space of this node to world\nspace."))}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,"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")))}N3.isMDXComponent=!0;const A3={toc:[]};function E3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}E3.isMDXComponent=!0;const R3={toc:[]};function z3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}z3.isMDXComponent=!0;const S3={toc:[]};function I3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}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,"Number of places by which the node should be moved."))}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,"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."))}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,"Move the node above the provided node in the parent's layout."))}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,"The sibling node below which to move."))}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"}),(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."))}O3.isMDXComponent=!0;const $3={toc:[]};function H3(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$3,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}H3.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,"Move the node below the provided node in the parent's layout."))}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,"The sibling node below which to move."))}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,"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."))}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"}

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."))}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,"Move the node down in relation to its siblings."))}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,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}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)("p",null,"The new offset."))}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,"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)."))}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,"Move the node to the provided position relative to its siblings."))}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,"The index to move the node to."))}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,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}f4.isMDXComponent=!0;const w4={toc:[]};function M4(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,"Move the node to the bottom in relation to its siblings."))}M4.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,"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."))}_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,"Move the node to the top in relation to its siblings."))}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,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}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,"Move the node up in relation to its siblings."))}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,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}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,"Create a reactive copy of this node."))}N4.isMDXComponent=!0;const A4={toc:[]};function E4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}E4.isMDXComponent=!0;const R4={toc:[]};function z4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}z4.isMDXComponent=!0;const S4={toc:[]};function I4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}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,"Render this node onto the given canvas."))}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 context to draw with."))}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,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}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,"Change the parent of this node while keeping the absolute transform."))}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,"The new parent of this node."))}O4.isMDXComponent=!0;const $4={toc:[]};function H4(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$4,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}H4.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,"Find the closest layout root and apply any new layout changes."))}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,"Whether this node should be cached or not."))}Q4.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 w8={toc:[]};function M8(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,"The context using which the cache will be drawn."))}M8.isMDXComponent=!0;const D8={toc:[]};function _8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#clone"},(0,s.kt)("inlineCode",{parentName:"a"},"clone")),", a snapshot clone calculates any reactive properties\nat the moment of cloning and passes the raw values to the copy."))}_8.isMDXComponent=!0;const X8={toc:[]};function g8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}g8.isMDXComponent=!0;const x8={toc:[]};function C8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}C8.isMDXComponent=!0;const T8={toc:[]};function v8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}v8.isMDXComponent=!0;const b8={toc:[]};function L8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}L8.isMDXComponent=!0;const Z8={toc:[]};function N8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}N8.isMDXComponent=!0;const A8={toc:[]};function E8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Polygon#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}E8.isMDXComponent=!0;const R8={toc:[]};function z8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}z8.isMDXComponent=!0;const S8={toc:[]};function I8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}I8.isMDXComponent=!0;const W8={toc:[]};function 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 $8={toc:[]};function H8(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$8,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}H8.isMDXComponent=!0;const Y8={toc:[]};function 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 w5={toc:[]};function M5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},w5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}M5.isMDXComponent=!0;const D5={toc:[]};function _5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}_5.isMDXComponent=!0;const X5={toc:[]};function g5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}g5.isMDXComponent=!0;const x5={toc:[]};function C5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}C5.isMDXComponent=!0;const T5={toc:[]};function v5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}v5.isMDXComponent=!0;const b5={toc:[]};function L5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}L5.isMDXComponent=!0;const Z5={toc:[]};function N5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}N5.isMDXComponent=!0;const A5={toc:[]};function E5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n  width={300}\n  height={300}\n  smoothCorners={true}\n/>\n")))}E5.isMDXComponent=!0;const R5={toc:[]};function z5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}z5.isMDXComponent=!0;const S5={toc:[]};function I5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}I5.isMDXComponent=!0;const W5={toc:[]};function 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 $5={toc:[]};function H5(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$5,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}H5.isMDXComponent=!0;const Y5={toc:[]};function 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 w7={toc:[]};function M7(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,"Prepare this node to be disposed of."))}M7.isMDXComponent=!0;const D7={toc:[]};function _7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}_7.isMDXComponent=!0;const X7={toc:[]};function g7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}g7.isMDXComponent=!0;const x7={toc:[]};function C7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}

10C7.isMDXComponent=!0;const T7={toc:[]};function v7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}v7.isMDXComponent=!0;const b7={toc:[]};function L7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}L7.isMDXComponent=!0;const Z7={toc:[]};function N7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}N7.isMDXComponent=!0;const A7={toc:[]};function E7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}E7.isMDXComponent=!0;const R7={toc:[]};function z7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}z7.isMDXComponent=!0;const S7={toc:[]};function I7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}I7.isMDXComponent=!0;const W7={toc:[]};function 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 $7={toc:[]};function H7(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$7,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}H7.isMDXComponent=!0;const Y7={toc:[]};function 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 w9={toc:[]};function M9(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,"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")))}M9.isMDXComponent=!0;const D9={toc:[]};function _9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},D9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}_9.isMDXComponent=!0;const X9={toc:[]};function g9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},X9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,s.kt)("p",null,"A positive ",(0,s.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}g9.isMDXComponent=!0;const x9={toc:[]};function C9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},x9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}C9.isMDXComponent=!0;const T9={toc:[]};function v9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},T9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}v9.isMDXComponent=!0;const b9={toc:[]};function L9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},b9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}L9.isMDXComponent=!0;const Z9={toc:[]};function N9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Z9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}N9.isMDXComponent=!0;const A9={toc:[]};function E9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},A9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}E9.isMDXComponent=!0;const R9={toc:[]};function z9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},R9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}z9.isMDXComponent=!0;const S9={toc:[]};function I9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},S9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}I9.isMDXComponent=!0;const W9={toc:[]};function 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 $9={toc:[]};function H9(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$9,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}H9.isMDXComponent=!0;const Y9={toc:[]};function 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 wtt={toc:[]};function Mtt(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,"Create a reactive copy of this node."))}Mtt.isMDXComponent=!0;const Dtt={toc:[]};function _tt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}_tt.isMDXComponent=!0;const Xtt={toc:[]};function gtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}gtt.isMDXComponent=!0;const xtt={toc:[]};function Ctt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}Ctt.isMDXComponent=!0;const Ttt={toc:[]};function vtt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ttt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}vtt.isMDXComponent=!0;const btt={toc:[]};function Ltt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},btt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Ltt.isMDXComponent=!0;const Ztt={toc:[]};function Ntt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ztt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}Ntt.isMDXComponent=!0;const Att={toc:[]};function Ett(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Att,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}Ett.isMDXComponent=!0;const Rtt={toc:[]};function ztt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rtt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}ztt.isMDXComponent=!0;const Stt={toc:[]};function Itt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Stt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Itt.isMDXComponent=!0;const Wtt={toc:[]};function 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 $tt={toc:[]};function Htt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$tt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}Htt.isMDXComponent=!0;const Ytt={toc:[]};function 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 wnt={toc:[]};function Mnt(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,"Apply any new layout changes to this node and its children."))}Mnt.isMDXComponent=!0;const Dnt={toc:[]};function _nt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Dnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}_nt.isMDXComponent=!0;const Xnt={toc:[]};function gnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Xnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}gnt.isMDXComponent=!0;const xnt={toc:[]};function Cnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},xnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Cnt.isMDXComponent=!0;const Tnt={toc:[]};function vnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Tnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}vnt.isMDXComponent=!0;const bnt={toc:[]};function Lnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},bnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}Lnt.isMDXComponent=!0;const Znt={toc:[]};function Nnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Znt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'

10s parent."))}Nnt.isMDXComponent=!0;const Ant={toc:[]};function Ent(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ant,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}Ent.isMDXComponent=!0;const Rnt={toc:[]};function znt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Rnt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}znt.isMDXComponent=!0;const Snt={toc:[]};function Int(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Snt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}Int.isMDXComponent=!0;const Wnt={toc:[]};function 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 $nt={toc:[]};function Hnt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},$nt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}Hnt.isMDXComponent=!0;const Ynt={toc:[]};function 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 wet(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."))}wet.isMDXComponent=!0;const Met={toc:[]};function Det(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Met,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Det.isMDXComponent=!0;const _et={toc:[]};function Xet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_et,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}Xet.isMDXComponent=!0;const get={toc:[]};function xet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},get,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}xet.isMDXComponent=!0;const Cet={toc:[]};function Tet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}Tet.isMDXComponent=!0;const vet={toc:[]};function bet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}bet.isMDXComponent=!0;const Let={toc:[]};function Zet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Let,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}Zet.isMDXComponent=!0;const Net={toc:[]};function Aet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Net,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Aet.isMDXComponent=!0;const Eet={toc:[]};function Ret(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}Ret.isMDXComponent=!0;const zet={toc:[]};function Set(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Set.isMDXComponent=!0;const Iet={toc:[]};function Wet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Collect all asynchronous resources used by this node."))}Wet.isMDXComponent=!0;const 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 $et(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oet,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}$et.isMDXComponent=!0;const Het={toc:[]};function Yet(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Het,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}Yet.isMDXComponent=!0;const 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 wot(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."))}wot.isMDXComponent=!0;const Mot={toc:[]};function Dot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Dot.isMDXComponent=!0;const _ot={toc:[]};function Xot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}Xot.isMDXComponent=!0;const got={toc:[]};function xot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},got,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}xot.isMDXComponent=!0;const Cot={toc:[]};function Tot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}Tot.isMDXComponent=!0;const vot={toc:[]};function bot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}bot.isMDXComponent=!0;const Lot={toc:[]};function Zot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}Zot.isMDXComponent=!0;const Not={toc:[]};function Aot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Not,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}Aot.isMDXComponent=!0;const Eot={toc:[]};function Rot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"An index at which to insert the node(s)."))}Rot.isMDXComponent=!0;const zot={toc:[]};function Sot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an instance of this node's class."))}Sot.isMDXComponent=!0;const Iot={toc:[]};function Wot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to pass to the constructor."))}Wot.isMDXComponent=!0;const 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 $ot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}$ot.isMDXComponent=!0;const Hot={toc:[]};function Yot(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hot,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}Yot.isMDXComponent=!0;const 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 wpt(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."))}wpt.isMDXComponent=!0;const Mpt={toc:[]};function Dpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}Dpt.isMDXComponent=!0;const _pt={toc:[]};function Xpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_pt,e,{components:n,mdxType:"MDXLayout"}

10),(0,s.kt)("p",null,"The node will exchange places with the sibling right below it (if any) and\nfrom then on will be rendered under it."))}Xpt.isMDXComponent=!0;const gpt={toc:[]};function xpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node down in relation to its siblings."))}xpt.isMDXComponent=!0;const Cpt={toc:[]};function Tpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}Tpt.isMDXComponent=!0;const vpt={toc:[]};function bpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}bpt.isMDXComponent=!0;const Lpt={toc:[]};function Zpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}Zpt.isMDXComponent=!0;const Npt={toc:[]};function Apt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Npt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}Apt.isMDXComponent=!0;const Ept={toc:[]};function Rpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ept,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The index to move the node to."))}Rpt.isMDXComponent=!0;const zpt={toc:[]};function Spt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}Spt.isMDXComponent=!0;const Ipt={toc:[]};function Wpt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ipt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the bottom in relation to its siblings."))}Wpt.isMDXComponent=!0;const 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 $pt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Opt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}$pt.isMDXComponent=!0;const Hpt={toc:[]};function Ypt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hpt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}Ypt.isMDXComponent=!0;const 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 wrt(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."))}wrt.isMDXComponent=!0;const Mrt={toc:[]};function Drt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Drt.isMDXComponent=!0;const _rt={toc:[]};function Xrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_rt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Circle width={100} height={100} fill={\"lightseagreen\"} />\n\nview.add(node);\n\n// Save the node's current state\nnode.save();\n\n// Modify some of the node's properties\nyield* node.scale(2, 1);\nyield* node.fill('hotpink', 1);\n\n// Restore the node to its saved state over 1 second\nyield* node.restore(1);\n")))}Xrt.isMDXComponent=!0;const grt={toc:[]};function xrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},grt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Restore the node to its last saved state."))}xrt.isMDXComponent=!0;const Crt={toc:[]};function Trt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Crt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The duration of the transition"))}Trt.isMDXComponent=!0;const vrt={toc:[]};function brt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}brt.isMDXComponent=!0;const Lrt={toc:[]};function Zrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#restore"},(0,s.kt)("inlineCode",{parentName:"a"}

10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}Zrt.isMDXComponent=!0;const Nrt={toc:[]};function Art(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}Art.isMDXComponent=!0;const Ert={toc:[]};function Rrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ert,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called before the contents of the cache canvas are drawn\non the screen. It can be used to apply effects to the entire node together\nwith its children, instead of applying them individually.\nEffects such as transparency, shadows, and filters use this technique."),(0,s.kt)("p",null,"Whether the node is cached is decided by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Shape#requiresCache"},(0,s.kt)("inlineCode",{parentName:"a"},"requiresCache"))," method."))}Rrt.isMDXComponent=!0;const zrt={toc:[]};function Srt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare the given context for drawing a cached node onto it."))}Srt.isMDXComponent=!0;const Irt={toc:[]};function Wrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Irt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context using which the cache will be drawn."))}Wrt.isMDXComponent=!0;const 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 $rt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ort,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}$rt.isMDXComponent=!0;const Hrt={toc:[]};function Yrt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hrt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}Yrt.isMDXComponent=!0;const 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 wst(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."))}wst.isMDXComponent=!0;const Mst={toc:[]};function Dst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,s.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Dst.isMDXComponent=!0;const _st={toc:[]};function Xst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_st,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the scale in world space."))}Xst.isMDXComponent=!0;const gst={toc:[]};function xst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}xst.isMDXComponent=!0;const Cst={toc:[]};function Tst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}Tst.isMDXComponent=!0;const vst={toc:[]};function bst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node position={[1, 2]} />\n// with individual components:\n<Node x={1} y={2} />\n")),(0,s.kt)("p",null,"Accessing the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst position = node.position();\n// retrieving an individual component:\nconst x = node.position.x();\n")),(0,s.kt)("p",null,"Setting the position:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.position([1, 2]);\nnode.position(() => [1, 2]);\n// with individual components:\nnode.position.x(1);\nnode.position.x(() => 1);\n")))}bst.isMDXComponent=!0;const Lst={toc:[]};function Zst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the position of this node in local space of its parent."))}Zst.isMDXComponent=!0;const Nst={toc:[]};function Ast(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the rotation (in degrees) of this node relative to its parent."))}Ast.isMDXComponent=!0;const Est={toc:[]};function Rst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Est,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node scale={[1, 2]} />\n// with individual components:\n<Node scaleX={1} scaleY={2} />\n")),(0,s.kt)("p",null,"Accessing the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst scale = node.scale();\n// retrieving an individual component:\nconst scaleX = node.scale.x();\n")),(0,s.kt)("p",null,"Setting the scale:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.scale([1, 2]);\nnode.scale(() => [1, 2]);\n// with individual components:\nnode.scale.x(1);\nnode.scale.x(() => 1);\n")))}Rst.isMDXComponent=!0;const zst={toc:[]};function Sst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the scale of this node in local space of its parent."))}Sst.isMDXComponent=!0;const Ist={toc:[]};function Wst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ist,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}Wst.isMDXComponent=!0;const 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 $st(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ost,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}$st.isMDXComponent=!0;const Hst={toc:[]};function Yst(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hst,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Yst.isMDXComponent=!0;const 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 wct(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."))}wct.isMDXComponent=!0;const Mct={toc:[]};function Dct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}Dct.isMDXComponent=!0;const _ct={toc:[]};function Xct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the desired size of this node."))}Xct.isMDXComponent=!0;const gct={toc:[]};function xct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is called automatically when a scene is refreshed. It will\nbe called even if the node is not currently attached to the tree."),(0,s.kt)("p",null,"The goal of this method is to clean any external references to allow the\nnode to be garbage collected."))}xct.isMDXComponent=!0;const Cct={toc:[]};function Tct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Prepare this node to be disposed of."))}Tct.isMDXComponent=!0;const vct={toc:[]};function bct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method is used when drawing directly onto the screen as well as onto\nthe cache canvas.\nIt assumes that the context have already been transformed to local space."))}bct.isMDXComponent=!0;const Lct={toc:[]};function Zct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw this node onto the canvas."))}Zct.isMDXComponent=!0;const Nct={toc:[]};function Act(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Act.isMDXComponent=!0;const Ect={toc:[]};function Rct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ect,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}Rct.isMDXComponent=!0;const zct={toc:[]};function Sct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}Sct.isMDXComponent=!0;const Ict={toc:[]};function Wct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ict,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Wct.isMDXComponent=!0;const 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 $ct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}$ct.isMDXComponent=!0;const Hct={toc:[]};function Yct(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hct,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Yct.isMDXComponent=!0;const 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 wat(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."))}wat.isMDXComponent=!0;const Mat={toc:[]};function Dat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}

10Dat.isMDXComponent=!0;const _at={toc:[]};function Xat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_at,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-parent matrix for this node."))}Xat.isMDXComponent=!0;const gat={toc:[]};function xat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to world\nspace."))}xat.isMDXComponent=!0;const Cat={toc:[]};function Tat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the absolute position of a point located 200 pixels to the right\nof the node:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const local = new Vector2(0, 200);\nconst world = local.transformAsPoint(node.localToWorld());\n")))}Tat.isMDXComponent=!0;const vat={toc:[]};function bat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the local-to-world matrix for this node."))}bat.isMDXComponent=!0;const Lat={toc:[]};function Zat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Children are rendered starting from the beginning of the children list.\nWe can change the rendering order by rearranging said list."),(0,s.kt)("p",null,"A positive ",(0,s.kt)("inlineCode",{parentName:"p"},"by")," arguments move the node up (it will be rendered on top of\nthe elements it has passed). Negative values move it down."))}Zat.isMDXComponent=!0;const Nat={toc:[]};function Aat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}Aat.isMDXComponent=!0;const Eat={toc:[]};function Rat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}Rat.isMDXComponent=!0;const zat={toc:[]};function Sat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}Sat.isMDXComponent=!0;const Iat={toc:[]};function Wat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}Wat.isMDXComponent=!0;const 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 $at(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}$at.isMDXComponent=!0;const Hat={toc:[]};function Yat(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hat,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}Yat.isMDXComponent=!0;const 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 wit(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."))}wit.isMDXComponent=!0;const Mit={toc:[]};function Dit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}Dit.isMDXComponent=!0;const _it={toc:[]};function Xit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_it,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node up in relation to its siblings."))}Xit.isMDXComponent=!0;const git={toc:[]};function xit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},git,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}xit.isMDXComponent=!0;const Cit={toc:[]};function Tit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a reactive copy of this node."))}Tit.isMDXComponent=!0;const vit={toc:[]};function bit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}bit.isMDXComponent=!0;const Lit={toc:[]};function Zit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove this node from the tree."))}Zit.isMDXComponent=!0;const Nit={toc:[]};function Ait(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}Ait.isMDXComponent=!0;const Eit={toc:[]};function Rit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}Rit.isMDXComponent=!0;const zit={toc:[]};function Sit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Sit.isMDXComponent=!0;const Iit={toc:[]};function Wit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}Wit.isMDXComponent=!0;const 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 $it(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}$it.isMDXComponent=!0;const Hit={toc:[]};function Yit(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hit,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Yit.isMDXComponent=!0;const 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 wlt(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."))}wlt.isMDXComponent=!0;const Mlt={toc:[]};function Dlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}Dlt.isMDXComponent=!0;const _lt={toc:[]};function Xlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_lt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}Xlt.isMDXComponent=!0;const glt={toc:[]};function xlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},glt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Wait for any asynchronous resources that this node or its children have."))}xlt.isMDXComponent=!0;const Clt={toc:[]};function Tlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Clt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new layout changes to this node and its children."))}Tlt.isMDXComponent=!0;const vlt={toc:[]};function blt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is the same the bounding box returned by ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Txt#cacheBBox"},(0,s.kt)("inlineCode",{parentName:"a"},"cacheBBox"))," only\ntransformed to world space."))}blt.isMDXComponent=!0;const Llt={toc:[]};function Zlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Llt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box in world space for the contents rendered by this node as\nwell as its children."))}Zlt.isMDXComponent=!0;const Nlt={toc:[]};function Alt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Alt.isMDXComponent=!0;const Elt={toc:[]};function Rlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Elt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}Rlt.isMDXComponent=!0;const zlt={toc:[]};function Slt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}Slt.isMDXComponent=!0;const Ilt={toc:[]};function Wlt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ilt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'

10s parent."))}Wlt.isMDXComponent=!0;const 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 $lt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Olt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}$lt.isMDXComponent=!0;const Hlt={toc:[]};function Ylt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hlt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,s.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Ylt.isMDXComponent=!0;const 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 wut(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."))}wut.isMDXComponent=!0;const Mut={toc:[]};function Dut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A size is a two-dimensional vector, where ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," represents the ",(0,s.kt)("inlineCode",{parentName:"p"},"width"),", and ",(0,s.kt)("inlineCode",{parentName:"p"},"y"),"\nrepresents the ",(0,s.kt)("inlineCode",{parentName:"p"},"height"),"."),(0,s.kt)("p",null,"The value of both x and y is of type ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/partials#Length"},(0,s.kt)("inlineCode",{parentName:"a"},"Length"))," which is\neither:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"number")," - the desired length in pixels"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"${number}%")," - a string with the desired length in percents, for example\n",(0,s.kt)("inlineCode",{parentName:"li"},"'50%'")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"null")," - an automatic length")),(0,s.kt)("p",null,"When retrieving the size, all units are converted to pixels, using the\ncurrent state of the layout. For example, retrieving the width set to\n",(0,s.kt)("inlineCode",{parentName:"p"},"'50%'"),", while the parent has a width of ",(0,s.kt)("inlineCode",{parentName:"p"},"200px")," will result in the number\n",(0,s.kt)("inlineCode",{parentName:"p"},"100")," being returned."),(0,s.kt)("p",null,"When the node is not part of the layout, setting its size using percents\nrefers to the size of the entire scene."))}Dut.isMDXComponent=!0;const _ut={toc:[]};function Xut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Initializing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\n<Node size={['50%', 200]} />\n// with individual components:\n<Node width={'50%'} height={200} />\n")),(0,s.kt)("p",null,"Accessing the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// retrieving the vector:\nconst size = node.size();\n// retrieving an individual component:\nconst width = node.size.x();\n")),(0,s.kt)("p",null,"Setting the size:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"// with a possible vector:\nnode.size(['50%', 200]);\nnode.size(() => ['50%', 200]);\n// with individual components:\nnode.size.x('50%');\nnode.size.x(() => '50%');\n")))}Xut.isMDXComponent=!0;const gut={toc:[]};function xut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the size of this node."))}xut.isMDXComponent=!0;const Cut={toc:[]};function Tut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}Tut.isMDXComponent=!0;const vut={toc:[]};function but(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"<Rect\n  width={300}\n  height={300}\n  smoothCorners={true}\n/>\n")))}but.isMDXComponent=!0;const Lut={toc:[]};function Zut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}Zut.isMDXComponent=!0;const Nut={toc:[]};function Aut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}Aut.isMDXComponent=!0;const Eut={toc:[]};function Rut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}Rut.isMDXComponent=!0;const zut={toc:[]};function Sut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}Sut.isMDXComponent=!0;const Iut={toc:[]};function Wut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Wut.isMDXComponent=!0;const 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 $ut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Out,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}$ut.isMDXComponent=!0;const Hut={toc:[]};function Yut(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hut,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Yut.isMDXComponent=!0;const 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 wmt(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."))}wmt.isMDXComponent=!0;const Mmt={toc:[]};function Dmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Dmt.isMDXComponent=!0;const _mt={toc:[]};function Xmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_mt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The overlay for the currently inspected node is displayed on top of the\ncanvas."),(0,s.kt)("p",null,"The provided context is in screen space. The local-to-screen matrix can be\nused to transform all shapes that need to be displayed.\nThis approach allows to keep the line widths and gizmo sizes consistent,\nno matter how zoomed-in the view is."))}Xmt.isMDXComponent=!0;const gmt={toc:[]};function xmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Draw an overlay for this node."))}xmt.isMDXComponent=!0;

10const Cmt={toc:[]};function Tmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}Tmt.isMDXComponent=!0;const vmt={toc:[]};function bmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A local-to-screen matrix."))}bmt.isMDXComponent=!0;const Lmt={toc:[]};function Zmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Zmt.isMDXComponent=!0;const Nmt={toc:[]};function Amt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}Amt.isMDXComponent=!0;const Emt={toc:[]};function Rmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Emt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Rmt.isMDXComponent=!0;const zmt={toc:[]};function Smt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}Smt.isMDXComponent=!0;const Imt={toc:[]};function Wmt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Imt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Wmt.isMDXComponent=!0;const 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 $mt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Omt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}$mt.isMDXComponent=!0;const Hmt={toc:[]};function Ymt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hmt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}Ymt.isMDXComponent=!0;const 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 wdt(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."))}wdt.isMDXComponent=!0;const Mdt={toc:[]};function Ddt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Rearrange this node in relation to its siblings."))}Ddt.isMDXComponent=!0;const _dt={toc:[]};function Xdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_dt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Number of places by which the node should be moved."))}Xdt.isMDXComponent=!0;const gdt={toc:[]};function xdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved above the provided node and from then on will be\nrendered on top of it. By default, if the node is already positioned\nhigher than the sibling node, it will not get moved."))}xdt.isMDXComponent=!0;const Cdt={toc:[]};function Tdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node above the provided node in the parent's layout."))}Tdt.isMDXComponent=!0;const vdt={toc:[]};function bdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}bdt.isMDXComponent=!0;const Ldt={toc:[]};function Zdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ldt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly above the\nsibling. When true, will move the node even if it is\nalready positioned above the sibling."))}Zdt.isMDXComponent=!0;const Ndt={toc:[]};function Adt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ndt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will be moved below the provided node and from then on will be\nrendered below it. By default, if the node is already positioned lower than\nthe sibling node, it will not get moved."))}Adt.isMDXComponent=!0;const Edt={toc:[]};function Rdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Edt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node below the provided node in the parent's layout."))}Rdt.isMDXComponent=!0;const zdt={toc:[]};function Sdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The sibling node below which to move."))}Sdt.isMDXComponent=!0;const Idt={toc:[]};function Wdt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Idt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the node should be positioned directly below\nthe sibling. When true, will move the node even if\nit is already positioned below the sibling."))}Wdt.isMDXComponent=!0;const 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 $dt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Odt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the node is getting moved to a lower position, it will be placed below\nthe sibling that's currently at the provided index (if any).\nIf the node is getting moved to a higher position, it will be placed above\nthe sibling that's currently at the provided index (if any)."))}$dt.isMDXComponent=!0;const Hdt={toc:[]};function Ydt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hdt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}Ydt.isMDXComponent=!0;const 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 wht(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."))}wht.isMDXComponent=!0;const Mht={toc:[]};function Dht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Remove all children of this node."))}Dht.isMDXComponent=!0;const _ht={toc:[]};function Xht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Render this node onto the given canvas."))}Xht.isMDXComponent=!0;const ght={toc:[]};function xht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ght,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The context to draw with."))}xht.isMDXComponent=!0;const Cht={toc:[]};function Tht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}Tht.isMDXComponent=!0;const vht={toc:[]};function bht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Change the parent of this node while keeping the absolute transform."))}bht.isMDXComponent=!0;const Lht={toc:[]};function Zht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new parent of this node."))}Zht.isMDXComponent=!0;const Nht={toc:[]};function Aht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}Aht.isMDXComponent=!0;const Eht={toc:[]};function Rht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Find the closest layout root and apply any new layout changes."))}Rht.isMDXComponent=!0;const zht={toc:[]};function Sht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether this node should be cached or not."))}Sht.isMDXComponent=!0;const Iht={toc:[]};function Wht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#save"},(0,s.kt)("inlineCode",{parentName:"a"},"save"))," method to restore a\nnode to a previously saved state. Restoring a node to a previous state\nremoves that state from the state stack."))}Wht.isMDXComponent=!0;const 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 $ht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used together with the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Video#restore"},(0,s.kt)("inlineCode",{parentName:"a"}

10,"restore"))," method to save a\nnode's current state and later restore it. It is possible to store more\nthan one state by calling ",(0,s.kt)("inlineCode",{parentName:"p"},"save")," method multiple times."))}$ht.isMDXComponent=!0;const Hht={toc:[]};function Yht(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hht,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}Yht.isMDXComponent=!0;const 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 wkt(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."))}wkt.isMDXComponent=!0;const Mkt={toc:[]};function Dkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode."))}Dkt.isMDXComponent=!0;const _kt={toc:[]};function Xkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_kt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Calculate the position relative to this node for a point located in the\ntop-left corner of the screen:"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const world = new Vector2(0, 0);\nconst local = world.transformAsPoint(node.worldToLocal());\n")))}Xkt.isMDXComponent=!0;const gkt={toc:[]};function xkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-local matrix for this node."))}xkt.isMDXComponent=!0;const Ckt={toc:[]};function Tkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ckt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from world space to local space of this\nnode'

10s parent."))}Tkt.isMDXComponent=!0;const vkt={toc:[]};function bkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the world-to-parent matrix for this node."))}bkt.isMDXComponent=!0;const Lkt={toc:[]};function Zkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the position using this signal returns the position in world\nspace. Similarly, setting the position using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,'If the new value is a function, the position of this node will be\ncontinuously updated to always match the position returned by the function.\nThis can be useful to "pin" the node in a specific place or to make it\nfollow another node\'s position.'),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#position"},(0,s.kt)("inlineCode",{parentName:"a"},"position")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Zkt.isMDXComponent=!0;const Nkt={toc:[]};function Akt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the position in world space."))}Akt.isMDXComponent=!0;const Ekt={toc:[]};function Rkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ekt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the rotation using this signal returns the rotation in world\nspace. Similarly, setting the rotation using this signal transforms the\nnew value to local space."),(0,s.kt)("p",null,"If the new value is a function, the rotation of this node will be\ncontinuously updated to always match the rotation returned by the function."))}Rkt.isMDXComponent=!0;const zkt={toc:[]};function Skt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A helper signal for operating on the rotation in world space."))}Skt.isMDXComponent=!0;const Ikt={toc:[]};function Wkt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ikt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Retrieving the scale using this signal returns the scale in world space.\nSimilarly, setting the scale using this signal transforms the new value to\nlocal space."),(0,s.kt)("p",null,"If the new value is a function, the scale of this node will be continuously\nupdated to always match the position returned by the function."),(0,s.kt)("p",null,"Unlike ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/View2D#scale"},(0,s.kt)("inlineCode",{parentName:"a"},"scale")),", this signal is not compound - it doesn't contain\nseparate signals for the ",(0,s.kt)("inlineCode",{parentName:"p"},"x")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"y")," components."))}Wkt.isMDXComponent=!0;const 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 $kt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Okt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default, the origin of a node is located at its center. The origin\nserves as the pivot point when rotating and scaling a node, but it doesn't\naffect the placement of its children."),(0,s.kt)("p",null,"The value is relative to the size of this node. A value of ",(0,s.kt)("inlineCode",{parentName:"p"},"1")," means as far\nto the right/bottom as possible. Here are a few examples of offsets:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, -1]")," - top left corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[1, -1]")," - top right corner"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"}

10,"[0, 1]")," - bottom edge"),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("inlineCode",{parentName:"li"},"[-1, 1]")," - bottom left corner")))}$kt.isMDXComponent=!0;const Hkt={toc:[]};function Ykt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hkt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Represents the offset of this node's origin."))}Ykt.isMDXComponent=!0;const 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 wyt(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."))}wyt.isMDXComponent=!0;const Myt={toc:[]};function Dyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Myt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The nodes will be appended at the end of the children list."))}Dyt.isMDXComponent=!0;const _yt={toc:[]};function Xyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_yt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = <Layout />;\nnode.add(<Rect />);\nnode.add(<Circle />);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  rect([Rect])\n    layout--\x3erect;

10\n    layout--\x3ecircle;"}))}Xyt.isMDXComponent=!0;const gyt={toc:[]};function xyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Add the given node(s) as the children of this node."))}xyt.isMDXComponent=!0;const Cyt={toc:[]};function Tyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to append."))}Tyt.isMDXComponent=!0;const vyt={toc:[]};function byt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply the given state to the node, setting all matching signal values to\nthe provided values."))}byt.isMDXComponent=!0;const Lyt={toc:[]};function Zyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The state to apply to the node."))}Zyt.isMDXComponent=!0;const Nyt={toc:[]};function Ayt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node as well\nas its children."))}Ayt.isMDXComponent=!0;const Eyt={toc:[]};function Ryt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"To put the cached contents in the correct position, cache canvases need to\nbe offset relatively to the canvas they are being drawn on."))}Ryt.isMDXComponent=!0;const zyt={toc:[]};function Syt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the offset for this node's cache canvas."))}Syt.isMDXComponent=!0;const Iyt={toc:[]};function Wyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a cache canvas with the contents of this node rendered onto it."))}Wyt.isMDXComponent=!0;const 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 $yt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A matrix mapping composite space to world space."))}$yt.isMDXComponent=!0;const Hyt={toc:[]};function Yyt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hyt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method can be used to control the size using external factors.\nBy default, the returned size is the same as the one declared by the user."))}Yyt.isMDXComponent=!0;const 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 wft(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."))}wft.isMDXComponent=!0;const Mft={toc:[]};function Dft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node (including\neffects applied after caching)."))}Dft.isMDXComponent=!0;const _ft={toc:[]};function Xft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_ft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The returned bounding box should be in local space."))}Xft.isMDXComponent=!0;const gft={toc:[]};function xft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get a bounding box for the contents rendered by this node."))}xft.isMDXComponent=!0;const Cft={toc:[]};function Tft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Cft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method will calculate the values of any reactive properties of the\nnode at the time the method is called."))}Tft.isMDXComponent=!0;const vft={toc:[]};function bft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Return a snapshot of the node's current signal values."))}bft.isMDXComponent=!0;const Lft={toc:[]};function Zft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Lft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Try to find a node intersecting the given position."))}Zft.isMDXComponent=!0;const Nft={toc:[]};function Aft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Nft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The searched position."))}Aft.isMDXComponent=!0;const Eft={toc:[]};function Rft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Eft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx"},"const node = (\n  <Layout>\n    <Rect />\n    <Circle />\n  </Layout>\n);\n\nnode.insert(<Txt />, 1);\n")),(0,s.kt)("p",null,"Result:"),(0,s.kt)("mermaid",{value:"graph TD;\n  layout([Layout])\n  circle([Circle])\n  text([Text])\n  rect([Rect])\n    layout--\x3erect;\n    layout--\x3etext;\n    layout--\x3ecircle;"}))}Rft.isMDXComponent=!0;const zft={toc:[]};function Sft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Insert the given node(s) at the specified index in the children list."))}Sft.isMDXComponent=!0;const Ift={toc:[]};function Wft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ift,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"A node or an array of nodes to insert."))}Wft.isMDXComponent=!0;const 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 $ft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Oft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the resolved layout mode of this node."))}$ft.isMDXComponent=!0;const Hft={toc:[]};function Yft(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hft,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This matrix transforms vectors from local space of this node to local space\nof this node's parent."))}Yft.isMDXComponent=!0;const 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 twt(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."))}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,"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")))}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,"Get the local-to-world matrix for this node."))}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,"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."))}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,"Rearrange this node in relation to its siblings."))}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,"Number of places by which the node should be moved."))}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 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."))}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,"Move the node above the provided node in the parent's layout."))}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,"The sibling node below which to move."))}ywt.isMDXComponent=!0;const fwt={toc:[]};function wwt(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,"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."))}wwt.isMDXComponent=!0;const Mwt={toc:[]};function Dwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mwt,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."))}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,"Move the node below the provided node in the parent's layout."))}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,"The sibling node below which to move."))}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,"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."))}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"}

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."))}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,"Move the node down in relation to its siblings."))}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,"Update the offset of this node and adjust the position to keep it in the\nsame place."))}Awt.isMDXComponent=!0;const Ewt={toc:[]};function Rwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ewt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The new offset."))}Rwt.isMDXComponent=!0;const zwt={toc:[]};function Swt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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)."))}Swt.isMDXComponent=!0;const Iwt={toc:[]};function Wwt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Iwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the provided position relative to its siblings."))}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,"The index to move the node to."))}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,"The node will be placed at the beginning of the children list and from then\non will be rendered below all of its siblings."))}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,"Move the node to the bottom in relation to its siblings."))}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,"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."))}qwt.isMDXComponent=!0;const Owt={toc:[]};function $wt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Owt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Move the node to the top in relation to its siblings."))}$wt.isMDXComponent=!0;const Hwt={toc:[]};function Ywt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hwt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The node will exchange places with the sibling right above it (if any) and\nfrom then on will be rendered on top of it."))}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,"Move the node up in relation to its siblings."))}Kwt.isMDXComponent=!0;const Qwt={toc:[]};function tMt(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,"A reactive copy has all its properties dynamically updated to match the\nsource node."))}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,"Create a reactive copy of 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,"Properties to override."))}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,"Remove this node from the tree."))}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,"Remove all children of this node."))}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,"Render this node onto the given canvas."))}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 context to draw with."))}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,"After performing this operation, the node will stay in the same place\nvisually, but its parent will be changed."))}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,"Change the parent of this node while keeping the absolute transform."))}yMt.isMDXComponent=!0;const fMt={toc:[]};function wMt(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,"The new parent of this node."))}wMt.isMDXComponent=!0;const MMt={toc:[]};function DMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Apply any new font changes to this node and all of its ancestors."))}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,"Find the closest layout root and apply any new layout changes."))}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,"Whether this node should be cached or not."))}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,"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."))}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)("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")))}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,"Restore the node to its last saved state."))}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,"The duration of the transition"))}AMt.isMDXComponent=!0;const EMt={toc:[]};function RMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},EMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The timing function to use for the transition"))}RMt.isMDXComponent=!0;const zMt={toc:[]};function SMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"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."))}SMt.isMDXComponent=!0;const IMt={toc:[]};function WMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},IMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Push a snapshot of the node's current state onto the node's state stack."))}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,"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."))}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,"Prepare the given context for drawing a cached node onto it."))}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 context using which the cache will be drawn."))}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,"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."))}qMt.isMDXComponent=!0;const OMt={toc:[]};function $Mt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},OMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a copy of this node."))}$Mt.isMDXComponent=!0;const HMt={toc:[]};function YMt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},HMt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Properties to override."))}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,"Certain resources like images are always loaded asynchronously.\nAwaiting this method makes sure that all such resources are done loading\nbefore continuing the animation."))}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,"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 wDt(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."))}wDt.isMDXComponent=!0;const MDt={toc:[]};function DDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the path of this circle should be closed."))}DDt.isMDXComponent=!0;const _Dt={toc:[]};function XDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_Dt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This property can be used together with ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/CircleProps#endAngle"},(0,s.kt)("inlineCode",{parentName:"a"},"endAngle"))," to turn this\ncircle into a sector (when using fill) or an arc (when using stroke)."))}XDt.isMDXComponent=!0;const gDt={toc:[]};function xDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The ending angle in degrees for the circle sector."))}xDt.isMDXComponent=!0;const CDt={toc:[]};function TDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},CDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This property can be used together with ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/CircleProps#startAngle"},(0,s.kt)("inlineCode",{parentName:"a"},"startAngle"))," to turn this\ncircle into a sector (when using fill) or an arc (when using stroke)."))}TDt.isMDXComponent=!0;const vDt={toc:[]};function bDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The starting angle in degrees for the circle sector."))}bDt.isMDXComponent=!0;const LDt={toc:[]};function ZDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},LDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Provide the color in one of the following formats:"),(0,s.kt)("ul",null,(0,s.kt)("li",{parentName:"ul"},"named color like ",(0,s.kt)("inlineCode",{parentName:"li"},"red"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"darkgray"),", \u2026"),(0,s.kt)("li",{parentName:"ul"},"hexadecimal string with # like ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"#141414"),"\nValue can be either RGB or RGBA: ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55"),", ",(0,s.kt)("inlineCode",{parentName:"li"},"#bada55aa")," (latter is partially transparent)\nThe shorthand version (e.g. ",(0,s.kt)("inlineCode",{parentName:"li"},"#abc")," for ",(0,s.kt)("inlineCode",{parentName:"li"},"#aabbcc")," is also possible.)")))}ZDt.isMDXComponent=!0;const NDt={toc:[]};function ADt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},NDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The color of the icon"))}ADt.isMDXComponent=!0;const EDt={toc:[]};function RDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},EDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}RDt.isMDXComponent=!0;const zDt={toc:[]};function SDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}SDt.isMDXComponent=!0;const IDt={toc:[]};function WDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},IDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"You can find identifiers on ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/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 $Dt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},ODt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}$Dt.isMDXComponent=!0;const HDt={toc:[]};function YDt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},HDt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}YDt.isMDXComponent=!0;const 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 w_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."))}w_t.isMDXComponent=!0;const M_t={toc:[]};function D_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},M_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"By default the ",(0,s.kt)("inlineCode",{parentName:"p"},"cornerSharpness")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"0.6")," which represents smooth,\ncircle-like rounding. At ",(0,s.kt)("inlineCode",{parentName:"p"},"0")," the edges are squared off."))}D_t.isMDXComponent=!0;const __t={toc:[]};function X_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},__t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Controlls the sharpness of the corners. ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#smoothCorners"},(0,s.kt)("inlineCode",{parentName:"a"},"smoothCorners"))," must\nbe set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),"."))}X_t.isMDXComponent=!0;const g_t={toc:[]};function x_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},g_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Smooth corners are drawn continuously by a bez\xecer curves, rather than by a\nquarter circle."),(0,s.kt)("p",null,"When ",(0,s.kt)("inlineCode",{parentName:"p"},"smoothCorners")," is set to ",(0,s.kt)("inlineCode",{parentName:"p"},"true"),", the sharpness of the curve can be\ncontrolled by the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/components/Rect#cornerSharpness"},(0,s.kt)("inlineCode",{parentName:"a"},"cornerSharpness")),"."))}x_t.isMDXComponent=!0;const C_t={toc:[]};function T_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},C_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Will set the corner drawing method to smooth corners."))}T_t.isMDXComponent=!0;const v_t={toc:[]};function b_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},v_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"\nconst signal = createSignal(0);\nsignal.isInitial(); // true\n\nsignal(5);\nsignal.isInitial(); // false\n\nsignal(DEFAULT);\nsignal.isInitial(); // true\n")))}b_t.isMDXComponent=!0;const L_t={toc:[]};function Z_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},L_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Check if the signal is currently using its initial value."))}Z_t.isMDXComponent=!0;const N_t={toc:[]};function A_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},N_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"If the signal was provided with a factory function, the function itself\nwill be returned, without invoking it."),(0,s.kt)("p",null,"This method can be used to create copies of signals."))}A_t.isMDXComponent=!0;const E_t={toc:[]};function R_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},E_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const a = createSignal(2);\nconst b = createSignal(() => a);\n// b() == 2\n\nconst bClone = createSignal(b.raw());\n// bClone() == 2\n\na(4);\n// b() == 4\n// bClone() == 4\n")))}R_t.isMDXComponent=!0;const z_t={toc:[]};function S_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},z_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Get the raw value of this signal."))}S_t.isMDXComponent=!0;const I_t={toc:[]};function W_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},I_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"const signal = createSignal(7);\n\nsignal.reset();\n// same as:\nsignal(7);\n")))}W_t.isMDXComponent=!0;const 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 $_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},O_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies whether the property should be copied over when\ncloning the node."),(0,s.kt)("p",null,"By default, any property is cloneable."),(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}$_t.isMDXComponent=!0;const H_t={toc:[]};function Y_t(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},H_t,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@clone(false)\n  \\@property()\n  public declare length: Signal<number, this>;\n}\n")))}Y_t.isMDXComponent=!0;const 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 wXt(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."))}

10wXt.isMDXComponent=!0;const MXt={toc:[]};function DXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},MXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The initial value of the property."))}DXt.isMDXComponent=!0;const _Xt={toc:[]};function XXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},_Xt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies whether the property should be visible in the\ninspector."),(0,s.kt)("p",null,"By default, any property is inspectable."),(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}XXt.isMDXComponent=!0;const gXt={toc:[]};function xXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},gXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@inspectable(false)\n  \\@property()\n  public declare hiddenLength: Signal<number, this>;\n}\n")))}xXt.isMDXComponent=!0;const CXt={toc:[]};function TXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},CXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an inspectable property decorator."))}TXt.isMDXComponent=!0;const vXt={toc:[]};function bXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},vXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Whether the property should be inspectable."))}bXt.isMDXComponent=!0;const LXt={toc:[]};function ZXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},LXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies the interpolation function of a property.\nThe interpolation function is used when tweening between different values."),(0,s.kt)("p",null,"Must be specified before the ",(0,s.kt)("a",{parentName:"p",href:"/api/2d/decorators#signal"},(0,s.kt)("inlineCode",{parentName:"a"},"signal"))," decorator."))}ZXt.isMDXComponent=!0;const NXt={toc:[]};function AXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},NXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@interpolation(textLerp)\n  \\@property()\n  public declare text: Signal<string, this>;\n}\n")))}AXt.isMDXComponent=!0;const EXt={toc:[]};function RXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},EXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a signal interpolation function decorator."))}RXt.isMDXComponent=!0;const zXt={toc:[]};function SXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The interpolation function for the property."))}SXt.isMDXComponent=!0;const IXt={toc:[]};function WXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},IXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This decorator specifies the parser of a property.\nInstead of returning the raw value, its passed as the first parameter to the\nparser and the resulting value is returned."),(0,s.kt)("p",null,"If the wrapper class has a method called ",(0,s.kt)("inlineCode",{parentName:"p"},"lerp")," it will be set as the\ndefault interpolation function for the property."),(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 $Xt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},OXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-ts"},"class Example {\n  \\@property()\n  public declare length: Signal<number, this>;\n}\n")))}$Xt.isMDXComponent=!0;const HXt={toc:[]};function YXt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},HXt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a signal decorator."))}YXt.isMDXComponent=!0;const 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 wgt(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."))}wgt.isMDXComponent=!0;const Mgt={toc:[]};function Dgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Mgt,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 Egt={toc:[]};function Rgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Egt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create a ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/20230315084657/https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate"},(0,s.kt)("inlineCode",{parentName:"a"},"hue"))," filter."))}Rgt.isMDXComponent=!0;const zgt={toc:[]};function Sgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},zgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter in degrees."))}Sgt.isMDXComponent=!0;const Igt={toc:[]};function Wgt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Igt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Create an ",(0,s.kt)("a",{parentName:"p",href:"http://web.archive.org/web/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 $gt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Ogt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The value of the filter."))}$gt.isMDXComponent=!0;const Hgt={toc:[]};function Ygt(t){let{components:n,...e}=t;return(0,s.kt)("wrapper",(0,r.Z)({},Hgt,e,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This method makes sure that the context of this scene is globally available\nduring the execution of the callback."))}Ygt.isMDXComponent=!0;const 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,w;!function(t){t[t.None=0]="None",t[t.Angle=1]="Angle",t[t.Curly=2]="Curly",t[t.Square=3]="Square",t[t.Parentheses=4]="Parentheses"}(f||(f={})),function(t){t.Comma=", ",t.Pipe=" | ",t.Ampersand=" & "}(w||(w={}));const M={[f.None]:i.none,[f.Angle]:i.angle,[f.Curly]:i.curly,[f.Square]:i.square,[f.Parentheses]:i.parentheses};function D(t){let{children:n,type:e,separator:p=w.Comma}=t;

10return o.createElement("span",{className:(0,c.Z)(i.list,M[e??f.None])},o.createElement("span",{className:(0,c.Z)(i.elements,p!==w.Comma&&i.left)},(Array.isArray(n)?n:[n]).flatMap(((t,n)=>o.createElement("span",{"data-separator":p,key:n,className:i.element},t)))))}var _=e(8617);function X(t){var n;let{type:e}=t;const p=(0,_.RU)(e.project),r=null==p?void 0:p[e.id],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:w.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:w.Ampersand},n.types.map(((t,n)=>o.createElement(P,{key:n,type:t}))))}function N(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"string"},"`",n.head),n.tail.map(((t,n)=>{let[e,p]=t;return o.createElement(o.Fragment,null,"${",o.createElement(P,{key:n,type:e}),"}",o.createElement(y,{type:"string"},p))})),o.createElement(y,{type:"string"},"`"))}function 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 E(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.checkType}),o.createElement(y,{type:"keyword"}," extends "),o.createElement(P,{type:n.extendsType})," ? ",o.createElement(P,{type:n.trueType})," : ",o.createElement(P,{type:n.falseType}))}function R(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"infer "),o.createElement(y,{type:"constant"},n.name))}function z(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(P,{type:n.objectType}),"[",o.createElement(P,{type:n.indexType}),"]")}function S(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},n.operator," "),o.createElement(P,{type:n.target}))}function I(t){let{type:n}=t;return o.createElement(o.Fragment,null,o.createElement(D,{type:f.Curly},o.createElement(o.Fragment,null,"[",o.createElement(y,{type:"class"},n.parameter),o.createElement(y,{type:"keyword"}," in "),o.createElement(P,{type:n.parameterType}),"]: ",o.createElement(P,{type:n.templateType}))))}function W(t){let{type:n}=t;return o.createElement(o.Fragment,null,n.name,": ",o.createElement(P,{type:n.element}))}function P(t){const n=(0,o.useMemo)((()=>{switch(t.type.type){case"rest":case"optional":case"unknown":break;case"typeOperator":return S;case"conditional":return E;case"reflection":return L;case"query":return A;case"named-tuple-member":return W;case"union":return T;case"intrinsic":return g;case"literal":return v;case"reference":return X;case"predicate":return b;case"tuple":return x;case"array":return C;case"intersection":return Z;case"inferred":return R;case"mapped":return I;case"template-literal":return N;case"indexedAccess":return z}throw new Error(`Missing component for type: ${t.type.type}`)}),[t.type]);return o.createElement(n,t)}function 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 $(t){let{reflection:n}=t;const e=(0,_.in)();return n.signatures?o.createElement(U,{reflection:n.signatures[0]}):n.children?o.createElement(D,{type:f.Curly},n.children.map((t=>o.createElement(Y,{key:t.id,reflection:e(t)})))):o.createElement(o.Fragment,null,o.createElement(y,{type:"keyword"},"unknown"))}function H(t){var n;let{reflection:e}=t;const p=(null==(n=e.signatures)?void 0:n[0])??e.getSignature??e.setSignature??e.indexSignature;return o.createElement(U,{reflection:p})}function Y(t){let{reflection:n}=t;const e=(0,o.useMemo)((()=>{switch(n.kind){case p.W.Project:case p.W.Module:case p.W.EnumMember:case p.W.Variable:case p.W.Function:break;case p.W.Namespace:case p.W.Enum:case p.W.Class:case p.W.Interface:return q;case p.W.Constructor:return U;case p.W.Property:return V;case p.W.Method:return H;case p.W.CallSignature:case p.W.IndexSignature:case p.W.ConstructorSignature:case p.W.Parameter:break;case p.W.TypeLiteral:return $;case p.W.TypeParameter:return F;case p.W.Accessor:case p.W.GetSignature:case p.W.SetSignature:case p.W.ObjectLiteral:break;case p.W.TypeAlias:return O;case p.W.Reference:}throw new Error(`Missing component for reflection: ${n.kindString}`)}),[n.id]);return o.createElement(e,{reflection:n})}function 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 wt(t){let{value:n,tabValues:e}=t;return e.some((t=>t.value===n))}function Mt(t){let{queryString:n=!1,groupId:e}=t;const p=(0,lt.k6)(),r=function(t){let{queryString:n=!1,groupId:e}=t;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!e)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return e??null}({queryString:n,groupId:e});return[(0,dt._X)(r),(0,o.useCallback)((t=>{if(!r)return;const n=new URLSearchParams(p.location.search);n.set(r,t),p.replace({...p.location,search:n.toString()})}),[r,p])]}function Dt(t){const{defaultValue:n,queryString:e=!1,groupId:p}=t,r=ft(t),[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(!wt({value:n,tabValues:e}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${e.map((t=>t.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const o=e.find((t=>t.default))??e[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:n,tabValues:r}))),[a,i]=Mt({queryString:e,groupId:p}),[l,u]=function(t){let{groupId:n}=t;const e=function(t){return t?`docusaurus.tab.${t}`:null}(n),[p,r]=(0,kt.Nk)(e);return[p,(0,o.useCallback)((t=>{e&&r.set(t)}),[e,r])]}({groupId:p}),m=(()=>{const t=a??l;return wt({value:t,tabValues:r})?t:null})();(0,o.useLayoutEffect)((()=>{m&&c(m)}),[m]);return{selectedValue:s,selectValue:(0,o.useCallback)((t=>{if(!wt({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 Et(t){var n;let{reflection:e,headless:p}=t;const r=[...e.signatures??[],e.setSignature,e.getSignature,e.indexSignature].filter((t=>!!t));return o.createElement(o.Fragment,null,!p&&(e.hasOwnPage?o.createElement("h1",null,e.name):o.createElement(ut.Z,{as:"h3",id:e.anchor},o.createElement("code",null,e.name))),o.createElement(et,{signatures:r,flags:e.flags,source:null==(n=e.sources)?void 0:n[0]}),e.inheritedFrom&&o.createElement("small",null,"Inherited from"," ",o.

10createElement("code",null,o.createElement(X,{type:e.inheritedFrom}))),e.overwrites&&o.createElement("small",null,"Overwrites"," ",o.createElement("code",null,o.createElement(X,{type:e.overwrites}))))}function Rt(t){var n,e;let{reflection:p,headless:r}=t;return o.createElement(o.Fragment,null,!r&&(p.hasOwnPage?o.createElement("h1",null,p.name):o.createElement(ut.Z,{as:"h3",id:p.anchor},o.createElement("code",null,p.name))),o.createElement(h,null,o.createElement(m,{link:null==(n=p.sources)||null==(e=n[0])?void 0:e.url},o.createElement(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 zt(t){var n,e,p;let{reflection:r}=t;const s=(0,_.RU)(r.project);return o.createElement(o.Fragment,null,o.createElement(ut.Z,{as:"h3",id:r.anchor},o.createElement("code",null,r.name)),o.createElement(h,null,o.createElement(m,{link:null==(n=r.sources)||null==(e=n[0])?void 0:e.url},o.createElement(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 St=e(8128);function It(t){var n;let{reflection:e}=t;return o.createElement(o.Fragment,null,o.createElement(St.Z,{language:"ts"},"import ","{...}",' from "',e.importPath,'";'),o.createElement(it,{kind:e.kind},o.createElement(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 Et;case p.W.Variable:case p.W.Property:case p.W.EnumMember:return Rt;case p.W.CallSignature:case p.W.IndexSignature:case p.W.ConstructorSignature:case p.W.Parameter:case p.W.TypeLiteral:case p.W.TypeParameter:case p.W.GetSignature:case p.W.SetSignature:case p.W.ObjectLiteral:break;case p.W.TypeAlias:return zt;case p.W.Reference:}throw new Error(`Missing component for reflection: ${n.kindString}`)}),[n.kind]);return o.createElement(r,{reflection:n,headless:e})}},7390:(t,n,e)=>{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)}},5192:(t,n,e)=>{e.r(n),e.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>c,metadata:()=>i,toc:()=>u});var o=e(7896),p=(e(2784),e(876)),r=e(2072),s=e(2665);const c={sidebar_position:10,slug:"/transitions"},a="Transitions",i={unversionedId:"getting-started/transitions",id:"getting-started/transitions",title:"Transitions",description:"Transitions allow you to customize the way scenes transition from one into",source:"@site/docs/getting-started/transitions.mdx",sourceDirName:"getting-started",slug:"/transitions",permalink:"/docs/transitions",draft:!1,editUrl:"http://web.archive.org/web/20230315084657/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/getting-started/transitions.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:10,frontMatter:{sidebar_position:10,slug:"/transitions"},sidebar:"docs",previous:{title:"Time Events",permalink:"/docs/time-events"},next:{title:"Logging",permalink:"/docs/logging"}},l={},u=[{value:"Before we start",id:"before-we-start",level:2},{value:"Pre-made transitions",id:"pre-made-transitions",level:2},{value:"<code>slideTransition</code>",id:"slidetransition",level:3},{value:"<code>zoomInTransition</code>",id:"zoomintransition",level:3},{value:"<code>zoomOutTransition</code>",id:"zoomouttransition",level:3},{value:"<code>fadeTransition</code>",id:"fadetransition",level:3},{value:"Custom transitions",id:"custom-transitions",level:2},{value:"Animate when transitioning",id:"animate-when-transitioning",level:2}],m={toc:u};function d(t){let{components:n,...e}=t;return(0,p.kt)("wrapper",(0,o.Z)({},m,e,{components:n,mdxType:"MDXLayout"}),(0,p.kt)("h1",{id:"transitions"},"Transitions"),(0,p.kt)("p",null,"Transitions allow you to customize the way scenes transition from one into\nanother. A transition is an animation performed at the beginning of the scene.\nIt can modify the context of both the current and the previous scene."),(0,p.kt)("h2",{id:"before-we-start"},"Before we start"),(0,p.kt)("div",{className:"row"},(0,p.kt)("div",{className:"col"},(0,p.kt)("p",null,"Make sure your project contains at least two scenes. In this example, we've\nprepared ",(0,p.kt)("inlineCode",{parentName:"p"},"firstScene.tsx")," and ",(0,p.kt)("inlineCode",{parentName:"p"},"secondScene.tsx"),", and configured our project to\ndisplay one after the other. We'll be setting up our transitions in the second\nscene."),(0,p.kt)("p",null,"Make sure to put something different in both scenes to easier see the\ntransitions.")),(0,p.kt)("div",{className:"col"},(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre"},"my-animation/\n\u2514\u2500 src/\n   \u251c\u2500 scenes/\n   \u2502  \u251c\u2500 firstScene.tsx\n   \u2502  \u2514\u2500 secondScene.tsx\n   \u2514\u2500 project.ts\n")))),(0,p.kt)("h2",{id:"pre-made-transitions"},"Pre-made transitions"),(0,p.kt)("p",null,"Motion Canvas comes with a set of common transitions in a form of easy-to-use\ngenerators. To use them, ",(0,p.kt)("inlineCode",{parentName:"p"}

10,"yield*")," the transition generator at the beginning of\nthe new scene:"),(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'title="src/scenes/secondScene.tsx"',title:'"src/scenes/secondScene.tsx"'},"export default makeScene2D(function* (view) {\n  // set up the scene:\n  view.add(/* your nodes here */);\n\n  // perform a slide transition to the left:\n  yield* slideTransition(Direction.Left);\n\n  // proceed with the animation\n  yield* waitFor(3);\n});\n")),(0,p.kt)(s.Z,{small:!0,name:"transitions",link:"transitions-second",mdxType:"AnimationPlayer"}),(0,p.kt)("admonition",{type:"caution"},(0,p.kt)("p",{parentName:"admonition"},"Make sure to add nodes to the view before yielding the transition generator.\nOtherwise, your scene will remain empty until the transition ends.")),(0,p.kt)("p",null,"All available transitions are listed below:"),(0,p.kt)("h3",{id:"slidetransition"},(0,p.kt)("inlineCode",{parentName:"h3"},"slideTransition")),(0,p.kt)(r.Z,{url:"/api/core/transitions#slideTransition",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h3",{id:"zoomintransition"},(0,p.kt)("inlineCode",{parentName:"h3"},"zoomInTransition")),(0,p.kt)(r.Z,{url:"/api/core/transitions#zoomInTransition",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h3",{id:"zoomouttransition"},(0,p.kt)("inlineCode",{parentName:"h3"},"zoomOutTransition")),(0,p.kt)(r.Z,{url:"/api/core/transitions#zoomOutTransition",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h3",{id:"fadetransition"},(0,p.kt)("inlineCode",{parentName:"h3"},"fadeTransition")),(0,p.kt)(r.Z,{url:"/api/core/transitions#fadeTransition",mdxType:"ApiSnippet"}),(0,p.kt)("hr",null),(0,p.kt)("h2",{id:"custom-transitions"},"Custom transitions"),(0,p.kt)("p",null,"You can use the ",(0,p.kt)("a",{parentName:"p",href:"/api/core/transitions#useTransition"},(0,p.kt)("inlineCode",{parentName:"a"},"useTransition"))," function\nto implement custom transitions. It allows you to specify two callbacks that\nwill modify the contexts of the current and previous scene respectively. The\nvalue it returns is a callback that you need to call once you finish the\ntransition."),(0,p.kt)("p",null,"The transition template looks as follows:"),(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-ts"},"// set up the transition\nconst endTransition = useTransition(\n  currentContext => {\n    // modify the context of the current scene\n  },\n  previousContext => {\n    // modify the context of the previous scene\n  },\n);\n\n// perform animations\n\n// finish the transition\nendTransition();\n")),(0,p.kt)("p",null,"Here's how you could implement a simple slide transition:"),(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-ts"},"export function* slideTransition(\n  direction: Direction = Direction.Top,\n  duration = 0.6,\n): ThreadGenerator {\n  const size = useScene().getSize();\n  const position = size.getOriginOffset(direction).scale(2);\n  const previousPosition = Vector2.createSignal();\n  const currentPosition = Vector2.createSignal(position);\n\n  // set up the transition\n  const endTransition = useTransition(\n    // modify the context of the current scene\n    ctx => ctx.translate(currentPosition.x(), currentPosition.y()),\n    // modify the context of the previous scene\n    ctx => ctx.translate(previousPosition.x(), previousPosition.y()),\n  );\n\n  // perform animations\n  yield* all(\n    previousPosition(position.scale(-1), duration),\n    currentPosition(Vector2.zero, duration),\n  );\n\n  // finish the transition\n  endTransition();\n}\n")),(0,p.kt)("h2",{id:"animate-when-transitioning"},"Animate when transitioning"),(0,p.kt)("p",null,"By default, Motion Canvas will transition to the next scene once the generator\nof the current scene has reached the end. In this case, the scene will freeze\nfor the duration of the transition. You can use the\n",(0,p.kt)("a",{parentName:"p",href:"/api/core/utils#finishScene"},(0,p.kt)("inlineCode",{parentName:"a"},"finishScene"))," function to trigger the transition\nearly, allowing the animation to continue while transitioning:"),(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-tsx"},"export default makeScene2D(function* (view) {\n  yield* animationOne();\n  // trigger the transition early:\n  finishScene();\n  // continue animating:\n  yield* animationTwo();\n});\n")))}d.isMDXComponent=!0}}]);