babylon.inspector.d.ts 169 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428
  1. /// <reference types="react" />
  2. declare module INSPECTOR {
  3. export class PropertyChangedEvent {
  4. object: any;
  5. property: string;
  6. value: any;
  7. initialValue: any;
  8. allowNullValue?: boolean;
  9. }
  10. }
  11. declare module INSPECTOR {
  12. export class ReplayRecorder {
  13. private _sceneRecorder;
  14. private _isRecording;
  15. get isRecording(): boolean;
  16. cancel(): void;
  17. trackScene(scene: BABYLON.Scene): void;
  18. applyDelta(json: any, scene: BABYLON.Scene): void;
  19. export(): void;
  20. }
  21. }
  22. declare module INSPECTOR {
  23. export class GlobalState {
  24. onSelectionChangedObservable: BABYLON.Observable<any>;
  25. onPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
  26. onInspectorClosedObservable: BABYLON.Observable<BABYLON.Scene>;
  27. onTabChangedObservable: BABYLON.Observable<number>;
  28. onSelectionRenamedObservable: BABYLON.Observable<void>;
  29. onPluginActivatedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync>>;
  30. onNewSceneObservable: BABYLON.Observable<BABYLON.Scene>;
  31. sceneImportDefaults: {
  32. [key: string]: any;
  33. };
  34. validationResults: BABYLON.Nullable<BABYLON.GLTF2.IGLTFValidationResults>;
  35. onValidationResultsUpdatedObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.GLTF2.IGLTFValidationResults>>;
  36. onExtensionLoadedObservable: BABYLON.Observable<import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension>;
  37. glTFLoaderExtensionDefaults: {
  38. [name: string]: {
  39. [key: string]: any;
  40. };
  41. };
  42. glTFLoaderDefaults: {
  43. [key: string]: any;
  44. };
  45. glTFLoaderExtensions: {
  46. [key: string]: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension;
  47. };
  48. blockMutationUpdates: boolean;
  49. selectedLineContainerTitles: Array<string>;
  50. selectedLineContainerTitlesNoFocus: Array<string>;
  51. recorder: ReplayRecorder;
  52. private _onlyUseEulers;
  53. get onlyUseEulers(): boolean;
  54. set onlyUseEulers(value: boolean);
  55. private _ignoreBackfacesForPicking;
  56. get ignoreBackfacesForPicking(): boolean;
  57. set ignoreBackfacesForPicking(value: boolean);
  58. init(propertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>): void;
  59. prepareGLTFPlugin(loader: import("babylonjs-loaders/glTF/index").GLTFFileLoader): void;
  60. resetGLTFValidationResults(): void;
  61. lightGizmos: Array<BABYLON.LightGizmo>;
  62. enableLightGizmo(light: BABYLON.Light, enable?: boolean): void;
  63. cameraGizmos: Array<BABYLON.CameraGizmo>;
  64. enableCameraGizmo(camera: BABYLON.Camera, enable?: boolean): void;
  65. }
  66. }
  67. declare module INSPECTOR {
  68. export interface IPaneComponentProps {
  69. title: string;
  70. scene: BABYLON.Scene;
  71. selectedEntity?: any;
  72. onSelectionChangedObservable?: BABYLON.Observable<any>;
  73. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  74. globalState: GlobalState;
  75. }
  76. export class PaneComponent extends React.Component<IPaneComponentProps, {
  77. tag: any;
  78. }> {
  79. constructor(props: IPaneComponentProps);
  80. render(): JSX.Element | null;
  81. }
  82. }
  83. declare module INSPECTOR {
  84. interface ITabsComponentProps {
  85. children: any[];
  86. selectedIndex: number;
  87. onSelectedIndexChange: (value: number) => void;
  88. }
  89. export class TabsComponent extends React.Component<ITabsComponentProps> {
  90. constructor(props: ITabsComponentProps);
  91. onSelect(index: number): void;
  92. renderLabel(child: PaneComponent, index: number): JSX.Element;
  93. render(): JSX.Element;
  94. }
  95. }
  96. declare module INSPECTOR {
  97. interface ITextLineComponentProps {
  98. label?: string;
  99. value?: string;
  100. color?: string;
  101. underline?: boolean;
  102. onLink?: () => void;
  103. url?: string;
  104. ignoreValue?: boolean;
  105. additionalClass?: string;
  106. }
  107. export class TextLineComponent extends React.Component<ITextLineComponentProps> {
  108. constructor(props: ITextLineComponentProps);
  109. onLink(): void;
  110. renderContent(): JSX.Element | null;
  111. render(): JSX.Element;
  112. }
  113. }
  114. declare module INSPECTOR {
  115. interface ILineContainerComponentProps {
  116. globalState?: GlobalState;
  117. title: string;
  118. children: any[] | any;
  119. closed?: boolean;
  120. }
  121. export class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
  122. isExpanded: boolean;
  123. isHighlighted: boolean;
  124. }> {
  125. constructor(props: ILineContainerComponentProps);
  126. switchExpandedState(): void;
  127. componentDidMount(): void;
  128. renderHeader(): JSX.Element;
  129. render(): JSX.Element;
  130. }
  131. }
  132. declare module INSPECTOR {
  133. interface IValueLineComponentProps {
  134. label: string;
  135. value: number;
  136. color?: string;
  137. fractionDigits?: number;
  138. units?: string;
  139. }
  140. export class ValueLineComponent extends React.Component<IValueLineComponentProps> {
  141. constructor(props: IValueLineComponentProps);
  142. render(): JSX.Element;
  143. }
  144. }
  145. declare module INSPECTOR {
  146. export interface IBooleanLineComponentProps {
  147. label: string;
  148. value: boolean;
  149. }
  150. export class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
  151. constructor(props: IBooleanLineComponentProps);
  152. render(): JSX.Element;
  153. }
  154. }
  155. declare module INSPECTOR {
  156. export class StatisticsTabComponent extends PaneComponent {
  157. private _sceneInstrumentation;
  158. private _engineInstrumentation;
  159. private _timerIntervalId;
  160. constructor(props: IPaneComponentProps);
  161. componentWillUnmount(): void;
  162. render(): JSX.Element | null;
  163. }
  164. }
  165. declare module INSPECTOR {
  166. export class PropertyChangedEvent {
  167. object: any;
  168. property: string;
  169. value: any;
  170. initialValue: any;
  171. allowNullValue?: boolean;
  172. }
  173. }
  174. declare module INSPECTOR {
  175. export interface ICheckBoxLineComponentProps {
  176. label: string;
  177. target?: any;
  178. propertyName?: string;
  179. isSelected?: () => boolean;
  180. onSelect?: (value: boolean) => void;
  181. onValueChanged?: () => void;
  182. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  183. disabled?: boolean;
  184. }
  185. export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
  186. isSelected: boolean;
  187. isDisabled?: boolean;
  188. }> {
  189. private static _UniqueIdSeed;
  190. private _uniqueId;
  191. private _localChange;
  192. constructor(props: ICheckBoxLineComponentProps);
  193. shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
  194. isSelected: boolean;
  195. isDisabled: boolean;
  196. }): boolean;
  197. onChange(): void;
  198. render(): JSX.Element;
  199. }
  200. }
  201. declare module INSPECTOR {
  202. interface IRenderGridPropertyGridComponentProps {
  203. globalState: GlobalState;
  204. scene: BABYLON.Scene;
  205. }
  206. export class RenderGridPropertyGridComponent extends React.Component<IRenderGridPropertyGridComponentProps, {
  207. isEnabled: boolean;
  208. }> {
  209. private _gridMesh;
  210. constructor(props: IRenderGridPropertyGridComponentProps);
  211. componentDidMount(): void;
  212. addOrRemoveGrid(): void;
  213. render(): JSX.Element;
  214. }
  215. }
  216. declare module INSPECTOR {
  217. export class DebugTabComponent extends PaneComponent {
  218. private _physicsViewersEnabled;
  219. constructor(props: IPaneComponentProps);
  220. switchPhysicsViewers(): void;
  221. render(): JSX.Element | null;
  222. }
  223. }
  224. declare module INSPECTOR {
  225. /**
  226. * Class used to provide lock mechanism
  227. */
  228. export class LockObject {
  229. /**
  230. * Gets or set if the lock is engaged
  231. */
  232. lock: boolean;
  233. }
  234. }
  235. declare module INSPECTOR {
  236. interface IFloatLineComponentProps {
  237. label: string;
  238. target: any;
  239. propertyName: string;
  240. lockObject?: LockObject;
  241. onChange?: (newValue: number) => void;
  242. isInteger?: boolean;
  243. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  244. additionalClass?: string;
  245. step?: string;
  246. digits?: number;
  247. useEuler?: boolean;
  248. min?: number;
  249. max?: number;
  250. smallUI?: boolean;
  251. onEnter?: (newValue: number) => void;
  252. }
  253. export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
  254. value: string;
  255. }> {
  256. private _localChange;
  257. private _store;
  258. constructor(props: IFloatLineComponentProps);
  259. componentWillUnmount(): void;
  260. shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
  261. value: string;
  262. }): boolean;
  263. raiseOnPropertyChanged(newValue: number, previousValue: number): void;
  264. updateValue(valueString: string): void;
  265. lock(): void;
  266. unlock(): void;
  267. render(): JSX.Element;
  268. }
  269. }
  270. declare module INSPECTOR {
  271. interface ISliderLineComponentProps {
  272. label: string;
  273. target?: any;
  274. propertyName?: string;
  275. minimum: number;
  276. maximum: number;
  277. step: number;
  278. directValue?: number;
  279. useEuler?: boolean;
  280. onChange?: (value: number) => void;
  281. onInput?: (value: number) => void;
  282. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  283. decimalCount?: number;
  284. margin?: boolean;
  285. }
  286. export class SliderLineComponent extends React.Component<ISliderLineComponentProps, {
  287. value: number;
  288. }> {
  289. private _localChange;
  290. constructor(props: ISliderLineComponentProps);
  291. shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: {
  292. value: number;
  293. }): boolean;
  294. onChange(newValueString: any): void;
  295. onInput(newValueString: any): void;
  296. prepareDataToRead(value: number): number;
  297. render(): JSX.Element;
  298. }
  299. }
  300. declare module INSPECTOR {
  301. export const Null_Value: number;
  302. export class ListLineOption {
  303. label: string;
  304. value: number;
  305. selected?: boolean;
  306. }
  307. export interface IOptionsLineComponentProps {
  308. label: string;
  309. target: any;
  310. propertyName: string;
  311. options: ListLineOption[];
  312. noDirectUpdate?: boolean;
  313. onSelect?: (value: number) => void;
  314. extractValue?: () => number;
  315. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  316. allowNullValue?: boolean;
  317. }
  318. export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
  319. value: number;
  320. }> {
  321. private _localChange;
  322. private remapValueIn;
  323. private remapValueOut;
  324. constructor(props: IOptionsLineComponentProps);
  325. shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
  326. value: number;
  327. }): boolean;
  328. raiseOnPropertyChanged(newValue: number, previousValue: number): void;
  329. updateValue(valueString: string): void;
  330. render(): JSX.Element;
  331. }
  332. }
  333. declare module INSPECTOR {
  334. interface INumericInputComponentProps {
  335. label: string;
  336. value: number;
  337. step?: number;
  338. onChange: (value: number) => void;
  339. precision?: number;
  340. }
  341. export class NumericInputComponent extends React.Component<INumericInputComponentProps, {
  342. value: string;
  343. }> {
  344. static defaultProps: {
  345. step: number;
  346. };
  347. private _localChange;
  348. constructor(props: INumericInputComponentProps);
  349. shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
  350. value: string;
  351. }): boolean;
  352. updateValue(evt: any): void;
  353. onBlur(): void;
  354. render(): JSX.Element;
  355. }
  356. }
  357. declare module INSPECTOR {
  358. export interface IColorComponentEntryProps {
  359. value: number;
  360. label: string;
  361. max?: number;
  362. min?: number;
  363. onChange: (value: number) => void;
  364. }
  365. export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
  366. constructor(props: IColorComponentEntryProps);
  367. updateValue(valueString: string): void;
  368. render(): JSX.Element;
  369. }
  370. }
  371. declare module INSPECTOR {
  372. export interface IHexColorProps {
  373. value: string;
  374. expectedLength: number;
  375. onChange: (value: string) => void;
  376. }
  377. export class HexColor extends React.Component<IHexColorProps, {
  378. hex: string;
  379. }> {
  380. constructor(props: IHexColorProps);
  381. shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
  382. hex: string;
  383. }): boolean;
  384. updateHexValue(valueString: string): void;
  385. render(): JSX.Element;
  386. }
  387. }
  388. declare module INSPECTOR {
  389. /**
  390. * Interface used to specify creation options for color picker
  391. */
  392. export interface IColorPickerProps {
  393. color: BABYLON.Color3 | BABYLON.Color4;
  394. debugMode?: boolean;
  395. onColorChanged?: (color: BABYLON.Color3 | BABYLON.Color4) => void;
  396. }
  397. /**
  398. * Interface used to specify creation options for color picker
  399. */
  400. export interface IColorPickerState {
  401. color: BABYLON.Color3;
  402. alpha: number;
  403. }
  404. /**
  405. * Class used to create a color picker
  406. */
  407. export class BABYLON.GUI.ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
  408. private _saturationRef;
  409. private _hueRef;
  410. private _isSaturationPointerDown;
  411. private _isHuePointerDown;
  412. constructor(props: IColorPickerProps);
  413. onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  414. onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  415. onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
  416. onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
  417. onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
  418. onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
  419. private _evaluateSaturation;
  420. private _evaluateHue;
  421. componentDidUpdate(): void;
  422. raiseOnColorChanged(): void;
  423. render(): JSX.Element;
  424. }
  425. }
  426. declare module INSPECTOR {
  427. export interface IColorPickerComponentProps {
  428. value: BABYLON.Color4 | BABYLON.Color3;
  429. onColorChanged: (newOne: string) => void;
  430. }
  431. interface IColorPickerComponentState {
  432. pickerEnabled: boolean;
  433. color: BABYLON.Color3 | BABYLON.Color4;
  434. hex: string;
  435. }
  436. export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
  437. private _floatRef;
  438. private _floatHostRef;
  439. constructor(props: IColorPickerComponentProps);
  440. syncPositions(): void;
  441. shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
  442. componentDidUpdate(): void;
  443. componentDidMount(): void;
  444. render(): JSX.Element;
  445. }
  446. }
  447. declare module INSPECTOR {
  448. export interface IColor3LineComponentProps {
  449. label: string;
  450. target: any;
  451. propertyName: string;
  452. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  453. isLinear?: boolean;
  454. }
  455. export class Color3LineComponent extends React.Component<IColor3LineComponentProps, {
  456. isExpanded: boolean;
  457. color: BABYLON.Color3;
  458. }> {
  459. private _localChange;
  460. constructor(props: IColor3LineComponentProps);
  461. shouldComponentUpdate(nextProps: IColor3LineComponentProps, nextState: {
  462. color: BABYLON.Color3;
  463. }): boolean;
  464. setPropertyValue(newColor: BABYLON.Color3): void;
  465. onChange(newValue: string): void;
  466. switchExpandState(): void;
  467. raiseOnPropertyChanged(previousValue: BABYLON.Color3): void;
  468. updateStateR(value: number): void;
  469. updateStateG(value: number): void;
  470. updateStateB(value: number): void;
  471. copyToClipboard(): void;
  472. render(): JSX.Element;
  473. }
  474. }
  475. declare module INSPECTOR {
  476. interface IVector3LineComponentProps {
  477. label: string;
  478. target: any;
  479. propertyName: string;
  480. step?: number;
  481. onChange?: (newvalue: BABYLON.Vector3) => void;
  482. useEuler?: boolean;
  483. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  484. noSlider?: boolean;
  485. }
  486. export class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
  487. isExpanded: boolean;
  488. value: BABYLON.Vector3;
  489. }> {
  490. static defaultProps: {
  491. step: number;
  492. };
  493. private _localChange;
  494. constructor(props: IVector3LineComponentProps);
  495. getCurrentValue(): any;
  496. shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: {
  497. isExpanded: boolean;
  498. value: BABYLON.Vector3;
  499. }): boolean;
  500. switchExpandState(): void;
  501. raiseOnPropertyChanged(previousValue: BABYLON.Vector3): void;
  502. updateVector3(): void;
  503. updateStateX(value: number): void;
  504. updateStateY(value: number): void;
  505. updateStateZ(value: number): void;
  506. render(): JSX.Element;
  507. }
  508. }
  509. declare module INSPECTOR {
  510. interface IQuaternionLineComponentProps {
  511. label: string;
  512. target: any;
  513. useEuler?: boolean;
  514. propertyName: string;
  515. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  516. }
  517. export class QuaternionLineComponent extends React.Component<IQuaternionLineComponentProps, {
  518. isExpanded: boolean;
  519. value: BABYLON.Quaternion;
  520. eulerValue: BABYLON.Vector3;
  521. }> {
  522. private _localChange;
  523. constructor(props: IQuaternionLineComponentProps);
  524. _checkRoundCircle(a: number, b: number): boolean;
  525. shouldComponentUpdate(nextProps: IQuaternionLineComponentProps, nextState: {
  526. isExpanded: boolean;
  527. value: BABYLON.Quaternion;
  528. eulerValue: BABYLON.Vector3;
  529. }): boolean;
  530. switchExpandState(): void;
  531. raiseOnPropertyChanged(currentValue: BABYLON.Quaternion, previousValue: BABYLON.Quaternion): void;
  532. updateQuaternion(): void;
  533. updateStateX(value: number): void;
  534. updateStateY(value: number): void;
  535. updateStateZ(value: number): void;
  536. updateStateW(value: number): void;
  537. updateQuaternionFromEuler(): void;
  538. updateStateEulerX(value: number): void;
  539. updateStateEulerY(value: number): void;
  540. updateStateEulerZ(value: number): void;
  541. render(): JSX.Element;
  542. }
  543. }
  544. declare module INSPECTOR {
  545. interface ITextInputLineComponentProps {
  546. label: string;
  547. lockObject: LockObject;
  548. target?: any;
  549. propertyName?: string;
  550. value?: string;
  551. onChange?: (value: string) => void;
  552. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  553. }
  554. export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
  555. value: string;
  556. }> {
  557. private _localChange;
  558. constructor(props: ITextInputLineComponentProps);
  559. componentWillUnmount(): void;
  560. shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: {
  561. value: string;
  562. }): boolean;
  563. raiseOnPropertyChanged(newValue: string, previousValue: string): void;
  564. updateValue(value: string): void;
  565. render(): JSX.Element;
  566. }
  567. }
  568. declare module INSPECTOR {
  569. interface ICustomPropertyGridComponentProps {
  570. globalState: GlobalState;
  571. target: any;
  572. lockObject: LockObject;
  573. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  574. }
  575. export class CustomPropertyGridComponent extends React.Component<ICustomPropertyGridComponentProps, {
  576. mode: number;
  577. }> {
  578. constructor(props: ICustomPropertyGridComponentProps);
  579. renderInspectable(inspectable: BABYLON.IInspectable): JSX.Element | null;
  580. render(): JSX.Element | null;
  581. }
  582. }
  583. declare module INSPECTOR {
  584. export interface IButtonLineComponentProps {
  585. label: string;
  586. onClick: () => void;
  587. }
  588. export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
  589. constructor(props: IButtonLineComponentProps);
  590. render(): JSX.Element;
  591. }
  592. }
  593. declare module INSPECTOR {
  594. interface IAnimationGridComponentProps {
  595. globalState: GlobalState;
  596. animatable: BABYLON.IAnimatable;
  597. scene: BABYLON.Scene;
  598. lockObject: LockObject;
  599. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  600. }
  601. export class AnimationGridComponent extends React.Component<IAnimationGridComponentProps, {
  602. currentFrame: number;
  603. }> {
  604. private _animations;
  605. private _ranges;
  606. private _mainAnimatable;
  607. private _onBeforeRenderObserver;
  608. private _isPlaying;
  609. private timelineRef;
  610. private _animationControl;
  611. constructor(props: IAnimationGridComponentProps);
  612. playOrPause(): void;
  613. componentDidMount(): void;
  614. componentWillUnmount(): void;
  615. onCurrentFrameChange(value: number): void;
  616. onChangeFromOrTo(): void;
  617. render(): JSX.Element;
  618. }
  619. }
  620. declare module INSPECTOR {
  621. interface ICommonMaterialPropertyGridComponentProps {
  622. globalState: GlobalState;
  623. material: BABYLON.Material;
  624. lockObject: LockObject;
  625. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  626. }
  627. export class CommonMaterialPropertyGridComponent extends React.Component<ICommonMaterialPropertyGridComponentProps> {
  628. constructor(props: ICommonMaterialPropertyGridComponentProps);
  629. render(): JSX.Element;
  630. }
  631. }
  632. declare module INSPECTOR {
  633. interface IMaterialPropertyGridComponentProps {
  634. globalState: GlobalState;
  635. material: BABYLON.Material;
  636. lockObject: LockObject;
  637. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  638. }
  639. export class MaterialPropertyGridComponent extends React.Component<IMaterialPropertyGridComponentProps> {
  640. constructor(props: IMaterialPropertyGridComponentProps);
  641. render(): JSX.Element;
  642. }
  643. }
  644. declare module INSPECTOR {
  645. interface IFileButtonLineComponentProps {
  646. label: string;
  647. onClick: (file: File) => void;
  648. accept: string;
  649. }
  650. export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
  651. private static _IDGenerator;
  652. private _id;
  653. private uploadInputRef;
  654. constructor(props: IFileButtonLineComponentProps);
  655. onChange(evt: any): void;
  656. render(): JSX.Element;
  657. }
  658. }
  659. declare module INSPECTOR {
  660. export interface ITextureLinkLineComponentProps {
  661. label: string;
  662. texture: BABYLON.Nullable<BABYLON.BaseTexture>;
  663. material?: BABYLON.Material;
  664. onSelectionChangedObservable?: BABYLON.Observable<any>;
  665. onDebugSelectionChangeObservable?: BABYLON.Observable<TextureLinkLineComponent>;
  666. propertyName?: string;
  667. onTextureCreated?: (texture: BABYLON.BaseTexture) => void;
  668. customDebugAction?: (state: boolean) => void;
  669. onTextureRemoved?: () => void;
  670. }
  671. export class TextureLinkLineComponent extends React.Component<ITextureLinkLineComponentProps, {
  672. isDebugSelected: boolean;
  673. }> {
  674. private _onDebugSelectionChangeObserver;
  675. constructor(props: ITextureLinkLineComponentProps);
  676. componentDidMount(): void;
  677. componentWillUnmount(): void;
  678. debugTexture(): void;
  679. onLink(): void;
  680. updateTexture(file: File): void;
  681. removeTexture(): void;
  682. render(): JSX.Element | null;
  683. }
  684. }
  685. declare module INSPECTOR {
  686. interface IStandardMaterialPropertyGridComponentProps {
  687. globalState: GlobalState;
  688. material: BABYLON.StandardMaterial;
  689. lockObject: LockObject;
  690. onSelectionChangedObservable?: BABYLON.Observable<any>;
  691. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  692. }
  693. export class StandardMaterialPropertyGridComponent extends React.Component<IStandardMaterialPropertyGridComponentProps> {
  694. private _onDebugSelectionChangeObservable;
  695. constructor(props: IStandardMaterialPropertyGridComponentProps);
  696. renderTextures(): JSX.Element;
  697. render(): JSX.Element;
  698. }
  699. }
  700. declare module INSPECTOR {
  701. /** @hidden */
  702. export var lodPixelShader: {
  703. name: string;
  704. shader: string;
  705. };
  706. }
  707. declare module INSPECTOR {
  708. /** @hidden */
  709. export var lodCubePixelShader: {
  710. name: string;
  711. shader: string;
  712. };
  713. }
  714. declare module INSPECTOR {
  715. export interface TextureChannelsToDisplay {
  716. R: boolean;
  717. G: boolean;
  718. B: boolean;
  719. A: boolean;
  720. }
  721. export class TextureHelper {
  722. private static _ProcessAsync;
  723. static GetTextureDataAsync(texture: BABYLON.BaseTexture, width: number, height: number, face: number, channels: TextureChannelsToDisplay, globalState?: GlobalState, lod?: number): Promise<Uint8Array>;
  724. }
  725. }
  726. declare module INSPECTOR {
  727. interface ITextureLineComponentProps {
  728. texture: BABYLON.BaseTexture;
  729. width: number;
  730. height: number;
  731. globalState?: GlobalState;
  732. hideChannelSelect?: boolean;
  733. }
  734. export class TextureLineComponent extends React.Component<ITextureLineComponentProps, {
  735. channels: TextureChannelsToDisplay;
  736. face: number;
  737. }> {
  738. private canvasRef;
  739. private static TextureChannelStates;
  740. constructor(props: ITextureLineComponentProps);
  741. shouldComponentUpdate(nextProps: ITextureLineComponentProps, nextState: {
  742. channels: TextureChannelsToDisplay;
  743. face: number;
  744. }): boolean;
  745. componentDidMount(): void;
  746. componentDidUpdate(): void;
  747. updatePreview(): Promise<void>;
  748. render(): JSX.Element;
  749. }
  750. }
  751. declare module INSPECTOR {
  752. interface IPopupComponentProps {
  753. id: string;
  754. title: string;
  755. size: {
  756. width: number;
  757. height: number;
  758. };
  759. onOpen: (window: Window) => void;
  760. onClose: (window: Window) => void;
  761. }
  762. export class PopupComponent extends React.Component<IPopupComponentProps, {
  763. isComponentMounted: boolean;
  764. blockedByBrowser: boolean;
  765. }> {
  766. private _container;
  767. private _window;
  768. private _curveEditorHost;
  769. constructor(props: IPopupComponentProps);
  770. componentDidMount(): void;
  771. openPopup(): void;
  772. componentWillUnmount(): void;
  773. getWindow(): Window | null;
  774. render(): React.ReactPortal | null;
  775. }
  776. }
  777. declare module INSPECTOR {
  778. export interface ITool extends IToolData {
  779. instance: IToolType;
  780. }
  781. interface IToolBarProps {
  782. tools: ITool[];
  783. addTool(url: string): void;
  784. changeTool(toolIndex: number): void;
  785. activeToolIndex: number;
  786. metadata: IMetadata;
  787. setMetadata(data: any): void;
  788. pickerOpen: boolean;
  789. setPickerOpen(open: boolean): void;
  790. pickerRef: React.RefObject<HTMLDivElement>;
  791. hasAlpha: boolean;
  792. }
  793. interface IToolBarState {
  794. toolURL: string;
  795. addOpen: boolean;
  796. }
  797. export class ToolBar extends React.Component<IToolBarProps, IToolBarState> {
  798. constructor(props: IToolBarProps);
  799. computeRGBAColor(): BABYLON.Color4;
  800. shouldComponentUpdate(nextProps: IToolBarProps): boolean;
  801. render(): JSX.Element;
  802. }
  803. }
  804. declare module INSPECTOR {
  805. export interface IChannel {
  806. visible: boolean;
  807. editable: boolean;
  808. name: string;
  809. id: 'R' | 'G' | 'B' | 'A';
  810. icon: any;
  811. }
  812. interface IChannelsBarProps {
  813. channels: IChannel[];
  814. setChannels(channelState: IChannel[]): void;
  815. }
  816. export class ChannelsBar extends React.PureComponent<IChannelsBarProps> {
  817. render(): JSX.Element;
  818. }
  819. }
  820. declare module INSPECTOR {
  821. export const canvasShader: {
  822. path: {
  823. vertexSource: string;
  824. fragmentSource: string;
  825. };
  826. options: {
  827. attributes: string[];
  828. uniforms: string[];
  829. };
  830. };
  831. }
  832. declare module INSPECTOR {
  833. export interface IPixelData {
  834. x?: number;
  835. y?: number;
  836. r?: number;
  837. g?: number;
  838. b?: number;
  839. a?: number;
  840. }
  841. export class TextureCanvasManager {
  842. private _engine;
  843. private _scene;
  844. private _camera;
  845. private _cameraPos;
  846. private _scale;
  847. private _isPanning;
  848. private _mouseX;
  849. private _mouseY;
  850. private _UICanvas;
  851. private _size;
  852. /** The canvas we paint onto using the canvas API */
  853. private _2DCanvas;
  854. /** The canvas we apply post processes to */
  855. private _3DCanvas;
  856. /** The canvas which handles channel filtering */
  857. private _channelsTexture;
  858. private _3DEngine;
  859. private _3DPlane;
  860. private _3DCanvasTexture;
  861. private _3DScene;
  862. private _channels;
  863. private _face;
  864. private _mipLevel;
  865. /** The texture from the original engine that we invoked the editor on */
  866. private _originalTexture;
  867. /** This is a hidden texture which is only responsible for holding the actual texture memory in the original engine */
  868. private _target;
  869. /** The internal texture representation of the original texture */
  870. private _originalInternalTexture;
  871. /** Keeps track of whether we have modified the texture */
  872. private _didEdit;
  873. private _plane;
  874. private _planeMaterial;
  875. /** Tracks which keys are currently pressed */
  876. private _keyMap;
  877. private readonly ZOOM_MOUSE_SPEED;
  878. private readonly ZOOM_KEYBOARD_SPEED;
  879. private readonly ZOOM_IN_KEY;
  880. private readonly ZOOM_OUT_KEY;
  881. private readonly PAN_SPEED;
  882. private readonly PAN_MOUSE_BUTTON;
  883. private readonly MIN_SCALE;
  884. private readonly GRID_SCALE;
  885. private readonly MAX_SCALE;
  886. private readonly SELECT_ALL_KEY;
  887. private readonly SAVE_KEY;
  888. private readonly RESET_KEY;
  889. private readonly DESELECT_KEY;
  890. /** The number of milliseconds between texture updates */
  891. private readonly PUSH_FREQUENCY;
  892. private _tool;
  893. private _setPixelData;
  894. private _setMipLevel;
  895. private _window;
  896. private _metadata;
  897. private _editing3D;
  898. private _onUpdate;
  899. private _setMetadata;
  900. private _imageData;
  901. private _canPush;
  902. private _shouldPush;
  903. private _paintCanvas;
  904. constructor(texture: BABYLON.BaseTexture, window: Window, canvasUI: HTMLCanvasElement, canvas2D: HTMLCanvasElement, canvas3D: HTMLCanvasElement, setPixelData: (pixelData: IPixelData) => void, metadata: IMetadata, onUpdate: () => void, setMetadata: (metadata: any) => void, setMipLevel: (level: number) => void);
  905. updateTexture(): Promise<void>;
  906. private pushTexture;
  907. startPainting(): Promise<CanvasRenderingContext2D>;
  908. updatePainting(): void;
  909. stopPainting(): void;
  910. private updateDisplay;
  911. set channels(channels: IChannel[]);
  912. paintPixelsOnCanvas(pixelData: Uint8Array, canvas: HTMLCanvasElement): void;
  913. grabOriginalTexture(): Promise<Uint8Array>;
  914. getMouseCoordinates(pointerInfo: BABYLON.PointerInfo): BABYLON.Vector2;
  915. get scene(): BABYLON.Scene;
  916. get canvas2D(): HTMLCanvasElement;
  917. get size(): BABYLON.ISize;
  918. set tool(tool: BABYLON.Nullable<ITool>);
  919. get tool(): BABYLON.Nullable<ITool>;
  920. set face(face: number);
  921. set mipLevel(mipLevel: number);
  922. /** Returns the 3D scene used for postprocesses */
  923. get scene3D(): BABYLON.Scene;
  924. set metadata(metadata: IMetadata);
  925. private makePlane;
  926. reset(): void;
  927. resize(newSize: BABYLON.ISize): Promise<void>;
  928. setSize(size: BABYLON.ISize): void;
  929. upload(file: File): void;
  930. saveTexture(): void;
  931. dispose(): void;
  932. }
  933. }
  934. declare module INSPECTOR {
  935. interface IPropertiesBarProps {
  936. texture: BABYLON.BaseTexture;
  937. size: BABYLON.ISize;
  938. saveTexture(): void;
  939. pixelData: IPixelData;
  940. face: number;
  941. setFace(face: number): void;
  942. resetTexture(): void;
  943. resizeTexture(width: number, height: number): void;
  944. uploadTexture(file: File): void;
  945. mipLevel: number;
  946. setMipLevel: (mipLevel: number) => void;
  947. }
  948. interface IPropertiesBarState {
  949. width: number;
  950. height: number;
  951. }
  952. export class PropertiesBar extends React.PureComponent<IPropertiesBarProps, IPropertiesBarState> {
  953. private _resetButton;
  954. private _uploadButton;
  955. private _saveButton;
  956. private _babylonLogo;
  957. private _resizeButton;
  958. private _mipUp;
  959. private _mipDown;
  960. private _faces;
  961. constructor(props: IPropertiesBarProps);
  962. private pixelData;
  963. private getNewDimension;
  964. componentWillUpdate(nextProps: IPropertiesBarProps): void;
  965. render(): JSX.Element;
  966. }
  967. }
  968. declare module INSPECTOR {
  969. interface IBottomBarProps {
  970. texture: BABYLON.BaseTexture;
  971. mipLevel: number;
  972. }
  973. export class BottomBar extends React.PureComponent<IBottomBarProps> {
  974. render(): JSX.Element;
  975. }
  976. }
  977. declare module INSPECTOR {
  978. interface ITextureCanvasComponentProps {
  979. canvasUI: React.RefObject<HTMLCanvasElement>;
  980. canvas2D: React.RefObject<HTMLCanvasElement>;
  981. canvas3D: React.RefObject<HTMLCanvasElement>;
  982. texture: BABYLON.BaseTexture;
  983. }
  984. export class TextureCanvasComponent extends React.Component<ITextureCanvasComponentProps> {
  985. render(): JSX.Element;
  986. }
  987. }
  988. declare module INSPECTOR {
  989. export const Paintbrush: IToolData;
  990. }
  991. declare module INSPECTOR {
  992. export const Eyedropper: IToolData;
  993. }
  994. declare module INSPECTOR {
  995. export const Floodfill: IToolData;
  996. }
  997. declare module INSPECTOR {
  998. export const RectangleSelect: IToolData;
  999. }
  1000. declare module INSPECTOR {
  1001. const _default: import("babylonjs-inspector/components/actionTabs/tabs/propertyGrids/materials/textures/textureEditorComponent").IToolData[];
  1002. export default _default;
  1003. }
  1004. declare module INSPECTOR {
  1005. interface IToolSettingsProps {
  1006. tool: ITool | undefined;
  1007. }
  1008. export class ToolSettings extends React.Component<IToolSettingsProps> {
  1009. render(): JSX.Element;
  1010. }
  1011. }
  1012. declare module INSPECTOR {
  1013. interface ITextureEditorComponentProps {
  1014. texture: BABYLON.BaseTexture;
  1015. url: string;
  1016. window: React.RefObject<PopupComponent>;
  1017. onUpdate: () => void;
  1018. }
  1019. interface ITextureEditorComponentState {
  1020. tools: ITool[];
  1021. activeToolIndex: number;
  1022. metadata: IMetadata;
  1023. channels: IChannel[];
  1024. pixelData: IPixelData;
  1025. face: number;
  1026. mipLevel: number;
  1027. pickerOpen: boolean;
  1028. }
  1029. export interface IToolParameters {
  1030. /** The visible scene in the editor. Useful for adding pointer and keyboard events. */
  1031. scene: BABYLON.Scene;
  1032. /** The 2D canvas which you can sample pixel data from. Tools should not paint directly on this canvas. */
  1033. canvas2D: HTMLCanvasElement;
  1034. /** The 3D scene which tools can add post processes to. */
  1035. scene3D: BABYLON.Scene;
  1036. /** The size of the texture. */
  1037. size: BABYLON.ISize;
  1038. /** Pushes the editor texture back to the original scene. This should be called every time a tool makes any modification to a texture. */
  1039. updateTexture: () => void;
  1040. /** The metadata object which is shared between all tools. Feel free to store any information here. Do not set this directly: instead call setMetadata. */
  1041. metadata: IMetadata;
  1042. /** Call this when you want to mutate the metadata. */
  1043. setMetadata: (data: any) => void;
  1044. /** Returns the texture coordinates under the cursor */
  1045. getMouseCoordinates: (pointerInfo: BABYLON.PointerInfo) => BABYLON.Vector2;
  1046. /** Provides access to the BABYLON namespace */
  1047. BABYLON: any;
  1048. /** Provides a canvas that you can use the canvas API to paint on. */
  1049. startPainting: () => Promise<CanvasRenderingContext2D>;
  1050. /** After you have painted on your canvas, call this method to push the updates back to the texture. */
  1051. updatePainting: () => void;
  1052. /** Call this when you are finished painting. */
  1053. stopPainting: () => void;
  1054. }
  1055. export interface IToolGUIProps {
  1056. instance: IToolType;
  1057. }
  1058. /** An interface representing the definition of a tool */
  1059. export interface IToolData {
  1060. /** Name to display on the toolbar */
  1061. name: string;
  1062. /** A class definition for the tool including setup and cleanup methods */
  1063. type: IToolConstructable;
  1064. /** An SVG icon encoded in Base64 */
  1065. icon: string;
  1066. /** Whether the tool uses postprocesses */
  1067. is3D?: boolean;
  1068. cursor?: string;
  1069. settingsComponent?: React.ComponentType<IToolGUIProps>;
  1070. }
  1071. export interface IToolType {
  1072. /** Called when the tool is selected. */
  1073. setup: () => void;
  1074. /** Called when the tool is deselected. */
  1075. cleanup: () => void;
  1076. /** Optional. Called when the user resets the texture or uploads a new texture. Tools may want to reset their state when this happens. */
  1077. onReset?: () => void;
  1078. }
  1079. /** For constructable types, TS requires that you define a seperate interface which constructs your actual interface */
  1080. interface IToolConstructable {
  1081. new (getParameters: () => IToolParameters): IToolType;
  1082. }
  1083. export interface IMetadata {
  1084. color: string;
  1085. alpha: number;
  1086. select: {
  1087. x1: number;
  1088. y1: number;
  1089. x2: number;
  1090. y2: number;
  1091. };
  1092. [key: string]: any;
  1093. }
  1094. global {
  1095. var _TOOL_DATA_: IToolData;
  1096. }
  1097. export class TextureEditorComponent extends React.Component<ITextureEditorComponentProps, ITextureEditorComponentState> {
  1098. private _textureCanvasManager;
  1099. private _UICanvas;
  1100. private _2DCanvas;
  1101. private _3DCanvas;
  1102. private _pickerRef;
  1103. private _timer;
  1104. private static PREVIEW_UPDATE_DELAY_MS;
  1105. constructor(props: ITextureEditorComponentProps);
  1106. componentDidMount(): void;
  1107. componentDidUpdate(): void;
  1108. componentWillUnmount(): void;
  1109. textureDidUpdate(): void;
  1110. loadToolFromURL(url: string): void;
  1111. addTools(tools: IToolData[]): void;
  1112. getToolParameters(): IToolParameters;
  1113. changeTool(index: number): void;
  1114. setMetadata(newMetadata: any): void;
  1115. setPickerOpen(open: boolean): void;
  1116. onPointerDown(evt: React.PointerEvent): void;
  1117. saveTexture(): void;
  1118. resetTexture(): void;
  1119. resizeTexture(width: number, height: number): void;
  1120. uploadTexture(file: File): void;
  1121. render(): JSX.Element;
  1122. }
  1123. }
  1124. declare module INSPECTOR {
  1125. interface ITexturePropertyGridComponentProps {
  1126. texture: BABYLON.BaseTexture;
  1127. lockObject: LockObject;
  1128. globalState: GlobalState;
  1129. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1130. }
  1131. interface ITexturePropertyGridComponentState {
  1132. isTextureEditorOpen: boolean;
  1133. textureEditing: BABYLON.Nullable<BABYLON.BaseTexture>;
  1134. }
  1135. export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps, ITexturePropertyGridComponentState> {
  1136. private _adtInstrumentation;
  1137. private popoutWindowRef;
  1138. private textureLineRef;
  1139. private _textureInspectorSize;
  1140. constructor(props: ITexturePropertyGridComponentProps);
  1141. componentWillUnmount(): void;
  1142. updateTexture(file: File): void;
  1143. openTextureEditor(): void;
  1144. onOpenTextureEditor(window: Window): void;
  1145. onCloseTextureEditor(callback?: {
  1146. (): void;
  1147. }): void;
  1148. forceRefresh(): void;
  1149. render(): JSX.Element;
  1150. }
  1151. }
  1152. declare module INSPECTOR {
  1153. interface IVector2LineComponentProps {
  1154. label: string;
  1155. target: any;
  1156. propertyName: string;
  1157. step?: number;
  1158. onChange?: (newvalue: BABYLON.Vector2) => void;
  1159. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1160. }
  1161. export class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
  1162. isExpanded: boolean;
  1163. value: BABYLON.Vector2;
  1164. }> {
  1165. static defaultProps: {
  1166. step: number;
  1167. };
  1168. private _localChange;
  1169. constructor(props: IVector2LineComponentProps);
  1170. shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
  1171. isExpanded: boolean;
  1172. value: BABYLON.Vector2;
  1173. }): boolean;
  1174. switchExpandState(): void;
  1175. raiseOnPropertyChanged(previousValue: BABYLON.Vector2): void;
  1176. updateStateX(value: number): void;
  1177. updateStateY(value: number): void;
  1178. render(): JSX.Element;
  1179. }
  1180. }
  1181. declare module INSPECTOR {
  1182. interface IPBRMaterialPropertyGridComponentProps {
  1183. globalState: GlobalState;
  1184. material: BABYLON.PBRMaterial;
  1185. lockObject: LockObject;
  1186. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1187. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1188. }
  1189. export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMaterialPropertyGridComponentProps> {
  1190. private _onDebugSelectionChangeObservable;
  1191. constructor(props: IPBRMaterialPropertyGridComponentProps);
  1192. switchAmbientMode(state: boolean): void;
  1193. renderTextures(onDebugSelectionChangeObservable: BABYLON.Observable<TextureLinkLineComponent>): JSX.Element;
  1194. render(): JSX.Element;
  1195. }
  1196. }
  1197. declare module INSPECTOR {
  1198. interface IRadioButtonLineComponentProps {
  1199. onSelectionChangedObservable: BABYLON.Observable<RadioButtonLineComponent>;
  1200. label: string;
  1201. isSelected: () => boolean;
  1202. onSelect: () => void;
  1203. }
  1204. export class RadioButtonLineComponent extends React.Component<IRadioButtonLineComponentProps, {
  1205. isSelected: boolean;
  1206. }> {
  1207. private _onSelectionChangedObserver;
  1208. constructor(props: IRadioButtonLineComponentProps);
  1209. componentDidMount(): void;
  1210. componentWillUnmount(): void;
  1211. onChange(): void;
  1212. render(): JSX.Element;
  1213. }
  1214. }
  1215. declare module INSPECTOR {
  1216. interface IFogPropertyGridComponentProps {
  1217. globalState: GlobalState;
  1218. scene: BABYLON.Scene;
  1219. lockObject: LockObject;
  1220. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1221. }
  1222. export class FogPropertyGridComponent extends React.Component<IFogPropertyGridComponentProps, {
  1223. mode: number;
  1224. }> {
  1225. constructor(props: IFogPropertyGridComponentProps);
  1226. render(): JSX.Element;
  1227. }
  1228. }
  1229. declare module INSPECTOR {
  1230. interface IScenePropertyGridComponentProps {
  1231. globalState: GlobalState;
  1232. scene: BABYLON.Scene;
  1233. lockObject: LockObject;
  1234. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1235. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1236. }
  1237. export class ScenePropertyGridComponent extends React.Component<IScenePropertyGridComponentProps> {
  1238. private _storedEnvironmentTexture;
  1239. private _renderingModeGroupObservable;
  1240. constructor(props: IScenePropertyGridComponentProps);
  1241. setRenderingModes(point: boolean, wireframe: boolean): void;
  1242. switchIBL(): void;
  1243. updateEnvironmentTexture(file: File): void;
  1244. updateGravity(newValue: BABYLON.Vector3): void;
  1245. updateTimeStep(newValue: number): void;
  1246. normalizeScene(): void;
  1247. render(): JSX.Element;
  1248. }
  1249. }
  1250. declare module INSPECTOR {
  1251. interface ICommonLightPropertyGridComponentProps {
  1252. globalState: GlobalState;
  1253. light: BABYLON.Light;
  1254. lockObject: LockObject;
  1255. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1256. }
  1257. export class CommonLightPropertyGridComponent extends React.Component<ICommonLightPropertyGridComponentProps> {
  1258. constructor(props: ICommonLightPropertyGridComponentProps);
  1259. render(): JSX.Element;
  1260. }
  1261. }
  1262. declare module INSPECTOR {
  1263. interface IHemisphericLightPropertyGridComponentProps {
  1264. globalState: GlobalState;
  1265. light: BABYLON.HemisphericLight;
  1266. lockObject: LockObject;
  1267. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1268. }
  1269. export class HemisphericLightPropertyGridComponent extends React.Component<IHemisphericLightPropertyGridComponentProps> {
  1270. constructor(props: IHemisphericLightPropertyGridComponentProps);
  1271. render(): JSX.Element;
  1272. }
  1273. }
  1274. declare module INSPECTOR {
  1275. interface ICommonShadowLightPropertyGridComponentProps {
  1276. globalState: GlobalState;
  1277. light: BABYLON.IShadowLight;
  1278. lockObject: LockObject;
  1279. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1280. }
  1281. export class CommonShadowLightPropertyGridComponent extends React.Component<ICommonShadowLightPropertyGridComponentProps> {
  1282. private _internals;
  1283. constructor(props: ICommonShadowLightPropertyGridComponentProps);
  1284. createShadowGenerator(): void;
  1285. disposeShadowGenerator(): void;
  1286. render(): JSX.Element;
  1287. }
  1288. }
  1289. declare module INSPECTOR {
  1290. interface IPointLightPropertyGridComponentProps {
  1291. globalState: GlobalState;
  1292. light: BABYLON.PointLight;
  1293. lockObject: LockObject;
  1294. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1295. }
  1296. export class PointLightPropertyGridComponent extends React.Component<IPointLightPropertyGridComponentProps> {
  1297. constructor(props: IPointLightPropertyGridComponentProps);
  1298. render(): JSX.Element;
  1299. }
  1300. }
  1301. declare module INSPECTOR {
  1302. interface IHexLineComponentProps {
  1303. label: string;
  1304. target: any;
  1305. propertyName: string;
  1306. lockObject?: LockObject;
  1307. onChange?: (newValue: number) => void;
  1308. isInteger?: boolean;
  1309. replaySourceReplacement?: string;
  1310. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1311. additionalClass?: string;
  1312. step?: string;
  1313. digits?: number;
  1314. useEuler?: boolean;
  1315. min?: number;
  1316. }
  1317. export class HexLineComponent extends React.Component<IHexLineComponentProps, {
  1318. value: string;
  1319. }> {
  1320. private _localChange;
  1321. private _store;
  1322. private _propertyChange;
  1323. constructor(props: IHexLineComponentProps);
  1324. componentWillUnmount(): void;
  1325. shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: {
  1326. value: string;
  1327. }): boolean;
  1328. raiseOnPropertyChanged(newValue: number, previousValue: number): void;
  1329. convertToHexString(valueString: string): string;
  1330. updateValue(valueString: string, raisePropertyChanged: boolean): void;
  1331. lock(): void;
  1332. unlock(): void;
  1333. render(): JSX.Element;
  1334. }
  1335. }
  1336. declare module INSPECTOR {
  1337. interface ICommonCameraPropertyGridComponentProps {
  1338. globalState: GlobalState;
  1339. camera: BABYLON.Camera;
  1340. lockObject: LockObject;
  1341. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1342. }
  1343. export class CommonCameraPropertyGridComponent extends React.Component<ICommonCameraPropertyGridComponentProps, {
  1344. mode: number;
  1345. }> {
  1346. constructor(props: ICommonCameraPropertyGridComponentProps);
  1347. render(): JSX.Element;
  1348. }
  1349. }
  1350. declare module INSPECTOR {
  1351. interface IFreeCameraPropertyGridComponentProps {
  1352. globalState: GlobalState;
  1353. camera: BABYLON.FreeCamera;
  1354. lockObject: LockObject;
  1355. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1356. }
  1357. export class FreeCameraPropertyGridComponent extends React.Component<IFreeCameraPropertyGridComponentProps> {
  1358. constructor(props: IFreeCameraPropertyGridComponentProps);
  1359. render(): JSX.Element;
  1360. }
  1361. }
  1362. declare module INSPECTOR {
  1363. interface IArcRotateCameraPropertyGridComponentProps {
  1364. globalState: GlobalState;
  1365. camera: BABYLON.ArcRotateCamera;
  1366. lockObject: LockObject;
  1367. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1368. }
  1369. export class ArcRotateCameraPropertyGridComponent extends React.Component<IArcRotateCameraPropertyGridComponentProps> {
  1370. constructor(props: IArcRotateCameraPropertyGridComponentProps);
  1371. render(): JSX.Element;
  1372. }
  1373. }
  1374. declare module INSPECTOR {
  1375. interface IIndentedTextLineComponentProps {
  1376. value?: string;
  1377. color?: string;
  1378. underline?: boolean;
  1379. onLink?: () => void;
  1380. url?: string;
  1381. additionalClass?: string;
  1382. }
  1383. export class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
  1384. constructor(props: IIndentedTextLineComponentProps);
  1385. onLink(): void;
  1386. renderContent(): JSX.Element;
  1387. render(): JSX.Element;
  1388. }
  1389. }
  1390. declare module INSPECTOR {
  1391. interface ICommonPropertyGridComponentProps {
  1392. globalState: GlobalState;
  1393. host: {
  1394. metadata: any;
  1395. };
  1396. lockObject: LockObject;
  1397. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1398. }
  1399. export class CommonPropertyGridComponent extends React.Component<ICommonPropertyGridComponentProps> {
  1400. constructor(props: ICommonPropertyGridComponentProps);
  1401. renderLevel(jsonObject: any): JSX.Element[];
  1402. render(): JSX.Element | null;
  1403. }
  1404. }
  1405. declare module INSPECTOR {
  1406. interface IVariantsPropertyGridComponentProps {
  1407. globalState: GlobalState;
  1408. host: any;
  1409. lockObject: LockObject;
  1410. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1411. }
  1412. export class VariantsPropertyGridComponent extends React.Component<IVariantsPropertyGridComponentProps> {
  1413. constructor(props: IVariantsPropertyGridComponentProps);
  1414. private _getVariantsExtension;
  1415. render(): JSX.Element | null;
  1416. }
  1417. }
  1418. declare module INSPECTOR {
  1419. interface IMeshPropertyGridComponentProps {
  1420. globalState: GlobalState;
  1421. mesh: BABYLON.Mesh;
  1422. lockObject: LockObject;
  1423. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1424. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1425. }
  1426. export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGridComponentProps, {
  1427. displayNormals: boolean;
  1428. displayVertexColors: boolean;
  1429. displayBoneWeights: boolean;
  1430. displayBoneIndex: number;
  1431. displaySkeletonMap: boolean;
  1432. }> {
  1433. constructor(props: IMeshPropertyGridComponentProps);
  1434. renderWireframeOver(): void;
  1435. renderNormalVectors(): void;
  1436. displayNormals(): void;
  1437. displayVertexColors(): void;
  1438. displayBoneWeights(): void;
  1439. displaySkeletonMap(): void;
  1440. onBoneDisplayIndexChange(value: number): void;
  1441. onMaterialLink(): void;
  1442. onSourceMeshLink(): void;
  1443. onSkeletonLink(): void;
  1444. convertPhysicsTypeToString(): string;
  1445. render(): JSX.Element;
  1446. }
  1447. }
  1448. declare module INSPECTOR {
  1449. interface ITransformNodePropertyGridComponentProps {
  1450. globalState: GlobalState;
  1451. transformNode: BABYLON.TransformNode;
  1452. lockObject: LockObject;
  1453. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1454. }
  1455. export class TransformNodePropertyGridComponent extends React.Component<ITransformNodePropertyGridComponentProps> {
  1456. constructor(props: ITransformNodePropertyGridComponentProps);
  1457. render(): JSX.Element;
  1458. }
  1459. }
  1460. declare module INSPECTOR {
  1461. interface IBackgroundMaterialPropertyGridComponentProps {
  1462. globalState: GlobalState;
  1463. material: BABYLON.BackgroundMaterial;
  1464. lockObject: LockObject;
  1465. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1466. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1467. }
  1468. export class BackgroundMaterialPropertyGridComponent extends React.Component<IBackgroundMaterialPropertyGridComponentProps> {
  1469. private _onDebugSelectionChangeObservable;
  1470. constructor(props: IBackgroundMaterialPropertyGridComponentProps);
  1471. renderTextures(): JSX.Element;
  1472. render(): JSX.Element;
  1473. }
  1474. }
  1475. declare module INSPECTOR {
  1476. interface ICommonControlPropertyGridComponentProps {
  1477. globalState: GlobalState;
  1478. control: BABYLON.GUI.Control;
  1479. lockObject: LockObject;
  1480. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1481. }
  1482. export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
  1483. constructor(props: ICommonControlPropertyGridComponentProps);
  1484. renderGridInformation(): JSX.Element | null;
  1485. render(): JSX.Element;
  1486. }
  1487. }
  1488. declare module INSPECTOR {
  1489. interface IControlPropertyGridComponentProps {
  1490. globalState: GlobalState;
  1491. control: BABYLON.GUI.Control;
  1492. lockObject: LockObject;
  1493. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1494. }
  1495. export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
  1496. constructor(props: IControlPropertyGridComponentProps);
  1497. render(): JSX.Element;
  1498. }
  1499. }
  1500. declare module INSPECTOR {
  1501. interface ITextBlockPropertyGridComponentProps {
  1502. globalState: GlobalState;
  1503. textBlock: BABYLON.GUI.TextBlock;
  1504. lockObject: LockObject;
  1505. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1506. }
  1507. export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
  1508. constructor(props: ITextBlockPropertyGridComponentProps);
  1509. render(): JSX.Element;
  1510. }
  1511. }
  1512. declare module INSPECTOR {
  1513. interface IInputTextPropertyGridComponentProps {
  1514. globalState: GlobalState;
  1515. inputText: BABYLON.GUI.InputText;
  1516. lockObject: LockObject;
  1517. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1518. }
  1519. export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
  1520. constructor(props: IInputTextPropertyGridComponentProps);
  1521. render(): JSX.Element;
  1522. }
  1523. }
  1524. declare module INSPECTOR {
  1525. interface IColorPickerPropertyGridComponentProps {
  1526. globalState: GlobalState;
  1527. colorPicker: BABYLON.GUI.ColorPicker;
  1528. lockObject: LockObject;
  1529. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1530. }
  1531. export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
  1532. constructor(props: IColorPickerPropertyGridComponentProps);
  1533. render(): JSX.Element;
  1534. }
  1535. }
  1536. declare module INSPECTOR {
  1537. interface IAnimationGroupGridComponentProps {
  1538. globalState: GlobalState;
  1539. animationGroup: BABYLON.AnimationGroup;
  1540. scene: BABYLON.Scene;
  1541. lockObject: LockObject;
  1542. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1543. }
  1544. export class AnimationGroupGridComponent extends React.Component<IAnimationGroupGridComponentProps, {
  1545. playButtonText: string;
  1546. currentFrame: number;
  1547. }> {
  1548. private _onAnimationGroupPlayObserver;
  1549. private _onAnimationGroupPauseObserver;
  1550. private _onBeforeRenderObserver;
  1551. private timelineRef;
  1552. constructor(props: IAnimationGroupGridComponentProps);
  1553. disconnect(animationGroup: BABYLON.AnimationGroup): void;
  1554. connect(animationGroup: BABYLON.AnimationGroup): void;
  1555. updateCurrentFrame(animationGroup: BABYLON.AnimationGroup): void;
  1556. shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
  1557. componentWillUnmount(): void;
  1558. playOrPause(): void;
  1559. onCurrentFrameChange(value: number): void;
  1560. render(): JSX.Element;
  1561. }
  1562. }
  1563. declare module INSPECTOR {
  1564. interface IImagePropertyGridComponentProps {
  1565. globalState: GlobalState;
  1566. image: BABYLON.GUI.Image;
  1567. lockObject: LockObject;
  1568. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1569. }
  1570. export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
  1571. constructor(props: IImagePropertyGridComponentProps);
  1572. render(): JSX.Element;
  1573. }
  1574. }
  1575. declare module INSPECTOR {
  1576. interface ISliderPropertyGridComponentProps {
  1577. globalState: GlobalState;
  1578. slider: BABYLON.GUI.Slider;
  1579. lockObject: LockObject;
  1580. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1581. }
  1582. export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
  1583. constructor(props: ISliderPropertyGridComponentProps);
  1584. render(): JSX.Element;
  1585. }
  1586. }
  1587. declare module INSPECTOR {
  1588. interface IImageBasedSliderPropertyGridComponentProps {
  1589. globalState: GlobalState;
  1590. imageBasedSlider: BABYLON.GUI.ImageBasedSlider;
  1591. lockObject: LockObject;
  1592. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1593. }
  1594. export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
  1595. constructor(props: IImageBasedSliderPropertyGridComponentProps);
  1596. render(): JSX.Element;
  1597. }
  1598. }
  1599. declare module INSPECTOR {
  1600. interface IRectanglePropertyGridComponentProps {
  1601. globalState: GlobalState;
  1602. rectangle: BABYLON.GUI.Rectangle;
  1603. lockObject: LockObject;
  1604. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1605. }
  1606. export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
  1607. constructor(props: IRectanglePropertyGridComponentProps);
  1608. render(): JSX.Element;
  1609. }
  1610. }
  1611. declare module INSPECTOR {
  1612. interface IEllipsePropertyGridComponentProps {
  1613. globalState: GlobalState;
  1614. ellipse: BABYLON.GUI.Ellipse;
  1615. lockObject: LockObject;
  1616. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1617. }
  1618. export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
  1619. constructor(props: IEllipsePropertyGridComponentProps);
  1620. render(): JSX.Element;
  1621. }
  1622. }
  1623. declare module INSPECTOR {
  1624. interface ICheckboxPropertyGridComponentProps {
  1625. globalState: GlobalState;
  1626. checkbox: BABYLON.GUI.Checkbox;
  1627. lockObject: LockObject;
  1628. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1629. }
  1630. export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
  1631. constructor(props: ICheckboxPropertyGridComponentProps);
  1632. render(): JSX.Element;
  1633. }
  1634. }
  1635. declare module INSPECTOR {
  1636. interface IRadioButtonPropertyGridComponentProps {
  1637. globalState: GlobalState;
  1638. radioButton: BABYLON.GUI.RadioButton;
  1639. lockObject: LockObject;
  1640. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1641. }
  1642. export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
  1643. constructor(props: IRadioButtonPropertyGridComponentProps);
  1644. render(): JSX.Element;
  1645. }
  1646. }
  1647. declare module INSPECTOR {
  1648. interface ILinePropertyGridComponentProps {
  1649. globalState: GlobalState;
  1650. line: BABYLON.GUI.Line;
  1651. lockObject: LockObject;
  1652. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1653. }
  1654. export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
  1655. constructor(props: ILinePropertyGridComponentProps);
  1656. onDashChange(value: string): void;
  1657. render(): JSX.Element;
  1658. }
  1659. }
  1660. declare module INSPECTOR {
  1661. interface IScrollViewerPropertyGridComponentProps {
  1662. globalState: GlobalState;
  1663. scrollViewer: BABYLON.GUI.ScrollViewer;
  1664. lockObject: LockObject;
  1665. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1666. }
  1667. export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
  1668. constructor(props: IScrollViewerPropertyGridComponentProps);
  1669. render(): JSX.Element;
  1670. }
  1671. }
  1672. declare module INSPECTOR {
  1673. interface IGridPropertyGridComponentProps {
  1674. globalState: GlobalState;
  1675. grid: BABYLON.GUI.Grid;
  1676. lockObject: LockObject;
  1677. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1678. }
  1679. export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
  1680. constructor(props: IGridPropertyGridComponentProps);
  1681. renderRows(): JSX.Element[];
  1682. renderColumns(): JSX.Element[];
  1683. render(): JSX.Element;
  1684. }
  1685. }
  1686. declare module INSPECTOR {
  1687. interface IPBRMetallicRoughnessMaterialPropertyGridComponentProps {
  1688. globalState: GlobalState;
  1689. material: BABYLON.PBRMetallicRoughnessMaterial;
  1690. lockObject: LockObject;
  1691. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1692. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1693. }
  1694. export class PBRMetallicRoughnessMaterialPropertyGridComponent extends React.Component<IPBRMetallicRoughnessMaterialPropertyGridComponentProps> {
  1695. private _onDebugSelectionChangeObservable;
  1696. constructor(props: IPBRMetallicRoughnessMaterialPropertyGridComponentProps);
  1697. renderTextures(): JSX.Element;
  1698. render(): JSX.Element;
  1699. }
  1700. }
  1701. declare module INSPECTOR {
  1702. interface IPBRSpecularGlossinessMaterialPropertyGridComponentProps {
  1703. globalState: GlobalState;
  1704. material: BABYLON.PBRSpecularGlossinessMaterial;
  1705. lockObject: LockObject;
  1706. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1707. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1708. }
  1709. export class PBRSpecularGlossinessMaterialPropertyGridComponent extends React.Component<IPBRSpecularGlossinessMaterialPropertyGridComponentProps> {
  1710. private _onDebugSelectionChangeObservable;
  1711. constructor(props: IPBRSpecularGlossinessMaterialPropertyGridComponentProps);
  1712. renderTextures(): JSX.Element;
  1713. render(): JSX.Element;
  1714. }
  1715. }
  1716. declare module INSPECTOR {
  1717. interface IStackPanelPropertyGridComponentProps {
  1718. globalState: GlobalState;
  1719. stackPanel: BABYLON.GUI.StackPanel;
  1720. lockObject: LockObject;
  1721. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1722. }
  1723. export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
  1724. constructor(props: IStackPanelPropertyGridComponentProps);
  1725. render(): JSX.Element;
  1726. }
  1727. }
  1728. declare module INSPECTOR {
  1729. interface ICommonPostProcessPropertyGridComponentProps {
  1730. globalState: GlobalState;
  1731. postProcess: BABYLON.PostProcess;
  1732. lockObject: LockObject;
  1733. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1734. }
  1735. export class CommonPostProcessPropertyGridComponent extends React.Component<ICommonPostProcessPropertyGridComponentProps> {
  1736. constructor(props: ICommonPostProcessPropertyGridComponentProps);
  1737. render(): JSX.Element;
  1738. }
  1739. }
  1740. declare module INSPECTOR {
  1741. interface IPostProcessPropertyGridComponentProps {
  1742. globalState: GlobalState;
  1743. postProcess: BABYLON.PostProcess;
  1744. lockObject: LockObject;
  1745. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1746. }
  1747. export class PostProcessPropertyGridComponent extends React.Component<IPostProcessPropertyGridComponentProps> {
  1748. constructor(props: IPostProcessPropertyGridComponentProps);
  1749. edit(): void;
  1750. render(): JSX.Element;
  1751. }
  1752. }
  1753. declare module INSPECTOR {
  1754. interface ICommonRenderingPipelinePropertyGridComponentProps {
  1755. globalState: GlobalState;
  1756. renderPipeline: BABYLON.PostProcessRenderPipeline;
  1757. lockObject: LockObject;
  1758. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1759. }
  1760. export class CommonRenderingPipelinePropertyGridComponent extends React.Component<ICommonRenderingPipelinePropertyGridComponentProps> {
  1761. constructor(props: ICommonRenderingPipelinePropertyGridComponentProps);
  1762. render(): JSX.Element;
  1763. }
  1764. }
  1765. declare module INSPECTOR {
  1766. interface IRenderingPipelinePropertyGridComponentProps {
  1767. globalState: GlobalState;
  1768. renderPipeline: BABYLON.PostProcessRenderPipeline;
  1769. lockObject: LockObject;
  1770. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1771. }
  1772. export class RenderingPipelinePropertyGridComponent extends React.Component<IRenderingPipelinePropertyGridComponentProps> {
  1773. constructor(props: IRenderingPipelinePropertyGridComponentProps);
  1774. render(): JSX.Element;
  1775. }
  1776. }
  1777. declare module INSPECTOR {
  1778. interface IDefaultRenderingPipelinePropertyGridComponentProps {
  1779. globalState: GlobalState;
  1780. renderPipeline: BABYLON.DefaultRenderingPipeline;
  1781. lockObject: LockObject;
  1782. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1783. }
  1784. export class DefaultRenderingPipelinePropertyGridComponent extends React.Component<IDefaultRenderingPipelinePropertyGridComponentProps> {
  1785. constructor(props: IDefaultRenderingPipelinePropertyGridComponentProps);
  1786. render(): JSX.Element;
  1787. }
  1788. }
  1789. declare module INSPECTOR {
  1790. interface ISSAORenderingPipelinePropertyGridComponentProps {
  1791. globalState: GlobalState;
  1792. renderPipeline: BABYLON.SSAORenderingPipeline;
  1793. lockObject: LockObject;
  1794. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1795. }
  1796. export class SSAORenderingPipelinePropertyGridComponent extends React.Component<ISSAORenderingPipelinePropertyGridComponentProps> {
  1797. constructor(props: ISSAORenderingPipelinePropertyGridComponentProps);
  1798. render(): JSX.Element;
  1799. }
  1800. }
  1801. declare module INSPECTOR {
  1802. interface ISSAO2RenderingPipelinePropertyGridComponentProps {
  1803. globalState: GlobalState;
  1804. renderPipeline: BABYLON.SSAO2RenderingPipeline;
  1805. lockObject: LockObject;
  1806. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1807. }
  1808. export class SSAO2RenderingPipelinePropertyGridComponent extends React.Component<ISSAO2RenderingPipelinePropertyGridComponentProps> {
  1809. constructor(props: ISSAO2RenderingPipelinePropertyGridComponentProps);
  1810. render(): JSX.Element;
  1811. }
  1812. }
  1813. declare module INSPECTOR {
  1814. interface ISkeletonPropertyGridComponentProps {
  1815. globalState: GlobalState;
  1816. skeleton: BABYLON.Skeleton;
  1817. lockObject: LockObject;
  1818. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1819. }
  1820. export class SkeletonPropertyGridComponent extends React.Component<ISkeletonPropertyGridComponentProps> {
  1821. private _skeletonViewersEnabled;
  1822. private _skeletonViewerDisplayOptions;
  1823. private _skeletonViewers;
  1824. constructor(props: ISkeletonPropertyGridComponentProps);
  1825. switchSkeletonViewers(): void;
  1826. checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
  1827. changeDisplayMode(): void;
  1828. changeDisplayOptions(option: string, value: number): void;
  1829. shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
  1830. onOverrideMeshLink(): void;
  1831. render(): JSX.Element;
  1832. }
  1833. }
  1834. declare module INSPECTOR {
  1835. interface IBonePropertyGridComponentProps {
  1836. globalState: GlobalState;
  1837. bone: BABYLON.Bone;
  1838. lockObject: LockObject;
  1839. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1840. }
  1841. export class BonePropertyGridComponent extends React.Component<IBonePropertyGridComponentProps> {
  1842. constructor(props: IBonePropertyGridComponentProps);
  1843. onTransformNodeLink(): void;
  1844. render(): JSX.Element;
  1845. }
  1846. }
  1847. declare module INSPECTOR {
  1848. interface IDirectionalLightPropertyGridComponentProps {
  1849. globalState: GlobalState;
  1850. light: BABYLON.DirectionalLight;
  1851. lockObject: LockObject;
  1852. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1853. }
  1854. export class DirectionalLightPropertyGridComponent extends React.Component<IDirectionalLightPropertyGridComponentProps> {
  1855. constructor(props: IDirectionalLightPropertyGridComponentProps);
  1856. render(): JSX.Element;
  1857. }
  1858. }
  1859. declare module INSPECTOR {
  1860. interface ISpotLightPropertyGridComponentProps {
  1861. globalState: GlobalState;
  1862. light: BABYLON.SpotLight;
  1863. lockObject: LockObject;
  1864. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1865. }
  1866. export class SpotLightPropertyGridComponent extends React.Component<ISpotLightPropertyGridComponentProps> {
  1867. constructor(props: ISpotLightPropertyGridComponentProps);
  1868. render(): JSX.Element;
  1869. }
  1870. }
  1871. declare module INSPECTOR {
  1872. interface ILenstRenderingPipelinePropertyGridComponentProps {
  1873. globalState: GlobalState;
  1874. renderPipeline: BABYLON.LensRenderingPipeline;
  1875. lockObject: LockObject;
  1876. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1877. }
  1878. export class LensRenderingPipelinePropertyGridComponent extends React.Component<ILenstRenderingPipelinePropertyGridComponentProps> {
  1879. constructor(props: ILenstRenderingPipelinePropertyGridComponentProps);
  1880. render(): JSX.Element;
  1881. }
  1882. }
  1883. declare module INSPECTOR {
  1884. interface IVector4LineComponentProps {
  1885. label: string;
  1886. target: any;
  1887. propertyName: string;
  1888. step?: number;
  1889. onChange?: (newvalue: BABYLON.Vector4) => void;
  1890. useEuler?: boolean;
  1891. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1892. }
  1893. export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
  1894. isExpanded: boolean;
  1895. value: BABYLON.Vector4;
  1896. }> {
  1897. static defaultProps: {
  1898. step: number;
  1899. };
  1900. private _localChange;
  1901. constructor(props: IVector4LineComponentProps);
  1902. getCurrentValue(): any;
  1903. shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
  1904. isExpanded: boolean;
  1905. value: BABYLON.Vector4;
  1906. }): boolean;
  1907. switchExpandState(): void;
  1908. raiseOnPropertyChanged(previousValue: BABYLON.Vector4): void;
  1909. updateVector4(): void;
  1910. updateStateX(value: number): void;
  1911. updateStateY(value: number): void;
  1912. updateStateZ(value: number): void;
  1913. updateStateW(value: number): void;
  1914. render(): JSX.Element;
  1915. }
  1916. }
  1917. declare module INSPECTOR {
  1918. interface IGradientStepComponentProps {
  1919. globalState: GlobalState;
  1920. step: BABYLON.GradientBlockColorStep;
  1921. lineIndex: number;
  1922. onDelete: () => void;
  1923. onUpdateStep: () => void;
  1924. onCheckForReOrder: () => void;
  1925. onCopy?: () => void;
  1926. }
  1927. export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {
  1928. gradient: number;
  1929. }> {
  1930. constructor(props: IGradientStepComponentProps);
  1931. updateColor(color: string): void;
  1932. updateStep(gradient: number): void;
  1933. onPointerUp(): void;
  1934. render(): JSX.Element;
  1935. }
  1936. }
  1937. declare module INSPECTOR {
  1938. export interface IPropertyComponentProps {
  1939. globalState: GlobalState;
  1940. block: BABYLON.NodeMaterialBlock;
  1941. }
  1942. }
  1943. declare module INSPECTOR {
  1944. export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  1945. private _gradientBlock;
  1946. constructor(props: IPropertyComponentProps);
  1947. forceRebuild(): void;
  1948. deleteStep(step: BABYLON.GradientBlockColorStep): void;
  1949. copyStep(step: BABYLON.GradientBlockColorStep): void;
  1950. addNewStep(): void;
  1951. checkForReOrder(): void;
  1952. render(): JSX.Element;
  1953. }
  1954. }
  1955. declare module INSPECTOR {
  1956. export interface IColor4LineComponentProps {
  1957. label: string;
  1958. target: any;
  1959. propertyName: string;
  1960. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1961. onChange?: () => void;
  1962. isLinear?: boolean;
  1963. }
  1964. export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
  1965. isExpanded: boolean;
  1966. color: BABYLON.Color4;
  1967. }> {
  1968. private _localChange;
  1969. constructor(props: IColor4LineComponentProps);
  1970. shouldComponentUpdate(nextProps: IColor4LineComponentProps, nextState: {
  1971. color: BABYLON.Color4;
  1972. }): boolean;
  1973. setPropertyValue(newColor: BABYLON.Color4): void;
  1974. onChange(newValue: string): void;
  1975. switchExpandState(): void;
  1976. raiseOnPropertyChanged(previousValue: BABYLON.Color4): void;
  1977. updateStateR(value: number): void;
  1978. updateStateG(value: number): void;
  1979. updateStateB(value: number): void;
  1980. updateStateA(value: number): void;
  1981. copyToClipboard(): void;
  1982. render(): JSX.Element;
  1983. }
  1984. }
  1985. declare module INSPECTOR {
  1986. interface INodeMaterialPropertyGridComponentProps {
  1987. globalState: GlobalState;
  1988. material: BABYLON.NodeMaterial;
  1989. lockObject: LockObject;
  1990. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1991. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1992. }
  1993. export class NodeMaterialPropertyGridComponent extends React.Component<INodeMaterialPropertyGridComponentProps> {
  1994. private _onDebugSelectionChangeObservable;
  1995. constructor(props: INodeMaterialPropertyGridComponentProps);
  1996. edit(): void;
  1997. renderTextures(): JSX.Element | null;
  1998. renderInputBlock(block: BABYLON.InputBlock): JSX.Element | null;
  1999. renderInputValues(): JSX.Element;
  2000. render(): JSX.Element;
  2001. }
  2002. }
  2003. declare module INSPECTOR {
  2004. interface IMultiMaterialPropertyGridComponentProps {
  2005. globalState: GlobalState;
  2006. material: BABYLON.MultiMaterial;
  2007. lockObject: LockObject;
  2008. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2009. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2010. }
  2011. export class MultiMaterialPropertyGridComponent extends React.Component<IMultiMaterialPropertyGridComponentProps> {
  2012. constructor(props: IMultiMaterialPropertyGridComponentProps);
  2013. onMaterialLink(mat: BABYLON.Material): void;
  2014. renderChildMaterial(): JSX.Element;
  2015. render(): JSX.Element;
  2016. }
  2017. }
  2018. declare module INSPECTOR {
  2019. interface IBoxEmitterGridComponentProps {
  2020. globalState: GlobalState;
  2021. emitter: BABYLON.BoxParticleEmitter;
  2022. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2023. }
  2024. export class BoxEmitterGridComponent extends React.Component<IBoxEmitterGridComponentProps> {
  2025. constructor(props: IBoxEmitterGridComponentProps);
  2026. render(): JSX.Element;
  2027. }
  2028. }
  2029. declare module INSPECTOR {
  2030. interface IConeEmitterGridComponentProps {
  2031. globalState: GlobalState;
  2032. emitter: BABYLON.ConeParticleEmitter;
  2033. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2034. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2035. }
  2036. export class ConeEmitterGridComponent extends React.Component<IConeEmitterGridComponentProps> {
  2037. constructor(props: IConeEmitterGridComponentProps);
  2038. render(): JSX.Element;
  2039. }
  2040. }
  2041. declare module INSPECTOR {
  2042. interface ICylinderEmitterGridComponentProps {
  2043. globalState: GlobalState;
  2044. emitter: BABYLON.CylinderParticleEmitter;
  2045. lockObject: LockObject;
  2046. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2047. }
  2048. export class CylinderEmitterGridComponent extends React.Component<ICylinderEmitterGridComponentProps> {
  2049. constructor(props: ICylinderEmitterGridComponentProps);
  2050. render(): JSX.Element;
  2051. }
  2052. }
  2053. declare module INSPECTOR {
  2054. interface IHemisphericEmitterGridComponentProps {
  2055. globalState: GlobalState;
  2056. emitter: BABYLON.HemisphericParticleEmitter;
  2057. lockObject: LockObject;
  2058. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2059. }
  2060. export class HemisphericEmitterGridComponent extends React.Component<IHemisphericEmitterGridComponentProps> {
  2061. constructor(props: IHemisphericEmitterGridComponentProps);
  2062. render(): JSX.Element;
  2063. }
  2064. }
  2065. declare module INSPECTOR {
  2066. interface IPointEmitterGridComponentProps {
  2067. globalState: GlobalState;
  2068. emitter: BABYLON.PointParticleEmitter;
  2069. lockObject: LockObject;
  2070. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2071. }
  2072. export class PointEmitterGridComponent extends React.Component<IPointEmitterGridComponentProps> {
  2073. constructor(props: IPointEmitterGridComponentProps);
  2074. render(): JSX.Element;
  2075. }
  2076. }
  2077. declare module INSPECTOR {
  2078. interface ISphereEmitterGridComponentProps {
  2079. globalState: GlobalState;
  2080. emitter: BABYLON.SphereParticleEmitter;
  2081. lockObject: LockObject;
  2082. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2083. }
  2084. export class SphereEmitterGridComponent extends React.Component<ISphereEmitterGridComponentProps> {
  2085. constructor(props: ISphereEmitterGridComponentProps);
  2086. render(): JSX.Element;
  2087. }
  2088. }
  2089. declare module INSPECTOR {
  2090. interface IMeshPickerComponentProps {
  2091. globalState: GlobalState;
  2092. target: any;
  2093. property: string;
  2094. scene: BABYLON.Scene;
  2095. label: string;
  2096. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2097. }
  2098. export class MeshPickerComponent extends React.Component<IMeshPickerComponentProps> {
  2099. constructor(props: IMeshPickerComponentProps);
  2100. render(): JSX.Element;
  2101. }
  2102. }
  2103. declare module INSPECTOR {
  2104. interface IMeshEmitterGridComponentProps {
  2105. globalState: GlobalState;
  2106. emitter: BABYLON.MeshParticleEmitter;
  2107. scene: BABYLON.Scene;
  2108. lockObject: LockObject;
  2109. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2110. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2111. }
  2112. export class MeshEmitterGridComponent extends React.Component<IMeshEmitterGridComponentProps> {
  2113. constructor(props: IMeshEmitterGridComponentProps);
  2114. render(): JSX.Element;
  2115. }
  2116. }
  2117. declare module INSPECTOR {
  2118. interface IFactorGradientStepGridComponent {
  2119. globalState: GlobalState;
  2120. gradient: BABYLON.FactorGradient;
  2121. lockObject: LockObject;
  2122. lineIndex: number;
  2123. onDelete: () => void;
  2124. onUpdateGradient: () => void;
  2125. onCheckForReOrder: () => void;
  2126. host: BABYLON.IParticleSystem;
  2127. codeRecorderPropertyName: string;
  2128. }
  2129. export class FactorGradientStepGridComponent extends React.Component<IFactorGradientStepGridComponent, {
  2130. gradient: number;
  2131. factor1: string;
  2132. factor2?: string;
  2133. }> {
  2134. constructor(props: IFactorGradientStepGridComponent);
  2135. shouldComponentUpdate(nextProps: IFactorGradientStepGridComponent, nextState: {
  2136. gradient: number;
  2137. factor1: string;
  2138. factor2?: string;
  2139. }): boolean;
  2140. updateFactor1(valueString: string): void;
  2141. updateFactor2(valueString: string): void;
  2142. updateGradient(gradient: number): void;
  2143. onPointerUp(): void;
  2144. lock(): void;
  2145. unlock(): void;
  2146. render(): JSX.Element;
  2147. }
  2148. }
  2149. declare module INSPECTOR {
  2150. interface IColorGradientStepGridComponent {
  2151. globalState: GlobalState;
  2152. gradient: BABYLON.ColorGradient | BABYLON.Color3Gradient;
  2153. lockObject: LockObject;
  2154. lineIndex: number;
  2155. isColor3: boolean;
  2156. onDelete: () => void;
  2157. onUpdateGradient: () => void;
  2158. onCheckForReOrder: () => void;
  2159. host: BABYLON.IParticleSystem;
  2160. codeRecorderPropertyName: string;
  2161. }
  2162. export class ColorGradientStepGridComponent extends React.Component<IColorGradientStepGridComponent, {
  2163. gradient: number;
  2164. }> {
  2165. constructor(props: IColorGradientStepGridComponent);
  2166. updateColor1(color: string): void;
  2167. updateColor2(color: string): void;
  2168. updateGradient(gradient: number): void;
  2169. onPointerUp(): void;
  2170. lock(): void;
  2171. unlock(): void;
  2172. render(): JSX.Element;
  2173. }
  2174. }
  2175. declare module INSPECTOR {
  2176. interface ILinkButtonComponentProps {
  2177. label: string;
  2178. buttonLabel: string;
  2179. url?: string;
  2180. onClick: () => void;
  2181. onIconClick?: () => void;
  2182. }
  2183. export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
  2184. constructor(props: ILinkButtonComponentProps);
  2185. onLink(): void;
  2186. render(): JSX.Element;
  2187. }
  2188. }
  2189. declare module INSPECTOR {
  2190. export enum GradientGridMode {
  2191. Factor = 0,
  2192. BABYLON.Color3 = 1,
  2193. BABYLON.Color4 = 2
  2194. }
  2195. interface IValueGradientGridComponent {
  2196. globalState: GlobalState;
  2197. label: string;
  2198. gradients: BABYLON.Nullable<Array<BABYLON.IValueGradient>>;
  2199. lockObject: LockObject;
  2200. docLink?: string;
  2201. mode: GradientGridMode;
  2202. host: BABYLON.IParticleSystem;
  2203. codeRecorderPropertyName: string;
  2204. onCreateRequired: () => void;
  2205. }
  2206. export class ValueGradientGridComponent extends React.Component<IValueGradientGridComponent> {
  2207. constructor(props: IValueGradientGridComponent);
  2208. deleteStep(step: BABYLON.IValueGradient): void;
  2209. addNewStep(): void;
  2210. checkForReOrder(): void;
  2211. updateAndSync(): void;
  2212. render(): JSX.Element;
  2213. }
  2214. }
  2215. declare module INSPECTOR {
  2216. interface IParticleSystemPropertyGridComponentProps {
  2217. globalState: GlobalState;
  2218. system: BABYLON.IParticleSystem;
  2219. lockObject: LockObject;
  2220. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2221. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2222. }
  2223. export class ParticleSystemPropertyGridComponent extends React.Component<IParticleSystemPropertyGridComponentProps> {
  2224. private _snippetUrl;
  2225. constructor(props: IParticleSystemPropertyGridComponentProps);
  2226. renderEmitter(): JSX.Element | null;
  2227. raiseOnPropertyChanged(property: string, newValue: any, previousValue: any): void;
  2228. renderControls(): JSX.Element;
  2229. saveToFile(): void;
  2230. loadFromFile(file: File): void;
  2231. loadFromSnippet(): void;
  2232. saveToSnippet(): void;
  2233. render(): JSX.Element;
  2234. }
  2235. }
  2236. declare module INSPECTOR {
  2237. interface ISpriteManagerPropertyGridComponentProps {
  2238. globalState: GlobalState;
  2239. spriteManager: BABYLON.SpriteManager;
  2240. lockObject: LockObject;
  2241. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2242. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2243. }
  2244. export class SpriteManagerPropertyGridComponent extends React.Component<ISpriteManagerPropertyGridComponentProps> {
  2245. private _snippetUrl;
  2246. constructor(props: ISpriteManagerPropertyGridComponentProps);
  2247. addNewSprite(): void;
  2248. disposeManager(): void;
  2249. saveToFile(): void;
  2250. loadFromFile(file: File): void;
  2251. loadFromSnippet(): void;
  2252. saveToSnippet(): void;
  2253. render(): JSX.Element;
  2254. }
  2255. }
  2256. declare module INSPECTOR {
  2257. interface ISpritePropertyGridComponentProps {
  2258. globalState: GlobalState;
  2259. sprite: BABYLON.Sprite;
  2260. lockObject: LockObject;
  2261. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2262. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2263. }
  2264. export class SpritePropertyGridComponent extends React.Component<ISpritePropertyGridComponentProps> {
  2265. private canvasRef;
  2266. private imageData;
  2267. private cachedCellIndex;
  2268. constructor(props: ISpritePropertyGridComponentProps);
  2269. onManagerLink(): void;
  2270. switchPlayStopState(): void;
  2271. disposeSprite(): void;
  2272. componentDidMount(): void;
  2273. componentDidUpdate(): void;
  2274. shouldComponentUpdate(nextProps: ISpritePropertyGridComponentProps): boolean;
  2275. updatePreview(): void;
  2276. render(): JSX.Element;
  2277. }
  2278. }
  2279. declare module INSPECTOR {
  2280. interface ITargetedAnimationGridComponentProps {
  2281. globalState: GlobalState;
  2282. targetedAnimation: BABYLON.TargetedAnimation;
  2283. scene: BABYLON.Scene;
  2284. lockObject: LockObject;
  2285. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2286. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2287. }
  2288. export class TargetedAnimationGridComponent extends React.Component<ITargetedAnimationGridComponentProps> {
  2289. private _animationGroup;
  2290. constructor(props: ITargetedAnimationGridComponentProps);
  2291. playOrPause: () => void;
  2292. deleteAnimation: () => void;
  2293. render(): JSX.Element;
  2294. }
  2295. }
  2296. declare module INSPECTOR {
  2297. interface IFollowCameraPropertyGridComponentProps {
  2298. globalState: GlobalState;
  2299. camera: BABYLON.FollowCamera;
  2300. lockObject: LockObject;
  2301. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2302. }
  2303. export class FollowCameraPropertyGridComponent extends React.Component<IFollowCameraPropertyGridComponentProps> {
  2304. constructor(props: IFollowCameraPropertyGridComponentProps);
  2305. render(): JSX.Element;
  2306. }
  2307. }
  2308. declare module INSPECTOR {
  2309. interface ISoundPropertyGridComponentProps {
  2310. globalState: GlobalState;
  2311. sound: BABYLON.Sound;
  2312. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2313. lockObject: LockObject;
  2314. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2315. }
  2316. export class SoundPropertyGridComponent extends React.Component<ISoundPropertyGridComponentProps> {
  2317. constructor(props: ISoundPropertyGridComponentProps);
  2318. render(): JSX.Element;
  2319. }
  2320. }
  2321. declare module INSPECTOR {
  2322. export class PropertyGridTabComponent extends PaneComponent {
  2323. private _timerIntervalId;
  2324. private _lockObject;
  2325. constructor(props: IPaneComponentProps);
  2326. timerRefresh(): void;
  2327. componentDidMount(): void;
  2328. componentWillUnmount(): void;
  2329. render(): JSX.Element | null;
  2330. }
  2331. }
  2332. declare module INSPECTOR {
  2333. export interface IHeaderComponentProps {
  2334. title: string;
  2335. handleBack?: boolean;
  2336. noExpand?: boolean;
  2337. noClose?: boolean;
  2338. noCommands?: boolean;
  2339. onPopup: () => void;
  2340. onClose: () => void;
  2341. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2342. }
  2343. export class HeaderComponent extends React.Component<IHeaderComponentProps, {
  2344. isBackVisible: boolean;
  2345. }> {
  2346. private _backStack;
  2347. private _onSelectionChangeObserver;
  2348. constructor(props: IHeaderComponentProps);
  2349. componentDidMount(): void;
  2350. componentWillUnmount(): void;
  2351. goBack(): void;
  2352. renderLogo(): JSX.Element | null;
  2353. render(): JSX.Element;
  2354. }
  2355. }
  2356. declare module INSPECTOR {
  2357. interface IMessageLineComponentProps {
  2358. text: string;
  2359. color?: string;
  2360. }
  2361. export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
  2362. constructor(props: IMessageLineComponentProps);
  2363. render(): JSX.Element;
  2364. }
  2365. }
  2366. declare module INSPECTOR {
  2367. interface IGLTFComponentProps {
  2368. scene: BABYLON.Scene;
  2369. globalState: GlobalState;
  2370. }
  2371. export class GLTFComponent extends React.Component<IGLTFComponentProps> {
  2372. private _onValidationResultsUpdatedObserver;
  2373. openValidationDetails(): void;
  2374. prepareText(singularForm: string, count: number): string;
  2375. componentDidMount(): void;
  2376. componentWillUnmount(): void;
  2377. renderValidation(): JSX.Element | null;
  2378. render(): JSX.Element;
  2379. }
  2380. }
  2381. declare module INSPECTOR {
  2382. interface IFileMultipleButtonLineComponentProps {
  2383. label: string;
  2384. onClick: (event: any) => void;
  2385. accept: string;
  2386. }
  2387. export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
  2388. private static _IDGenerator;
  2389. private _id;
  2390. private uploadInputRef;
  2391. constructor(props: IFileMultipleButtonLineComponentProps);
  2392. onChange(evt: any): void;
  2393. render(): JSX.Element;
  2394. }
  2395. }
  2396. declare module INSPECTOR {
  2397. export class ToolsTabComponent extends PaneComponent {
  2398. private _videoRecorder;
  2399. private _screenShotSize;
  2400. private _gifOptions;
  2401. private _useWidthHeight;
  2402. private _isExporting;
  2403. private _gifWorkerBlob;
  2404. private _gifRecorder;
  2405. private _previousRenderingScale;
  2406. private _crunchingGIF;
  2407. constructor(props: IPaneComponentProps);
  2408. componentDidMount(): void;
  2409. componentWillUnmount(): void;
  2410. captureScreenshot(): void;
  2411. captureRender(): void;
  2412. recordVideo(): void;
  2413. recordGIFInternal(): void;
  2414. recordGIF(): void;
  2415. importAnimations(event: any): void;
  2416. shouldExport(node: BABYLON.Node): boolean;
  2417. exportGLTF(): void;
  2418. exportBabylon(): void;
  2419. createEnvTexture(): void;
  2420. exportReplay(): void;
  2421. startRecording(): void;
  2422. applyDelta(file: File): void;
  2423. render(): JSX.Element | null;
  2424. }
  2425. }
  2426. declare module INSPECTOR {
  2427. export class SettingsTabComponent extends PaneComponent {
  2428. constructor(props: IPaneComponentProps);
  2429. render(): JSX.Element;
  2430. }
  2431. }
  2432. declare module INSPECTOR {
  2433. interface IActionTabsComponentProps {
  2434. scene?: BABYLON.Scene;
  2435. noCommands?: boolean;
  2436. noHeader?: boolean;
  2437. noExpand?: boolean;
  2438. noClose?: boolean;
  2439. popupMode?: boolean;
  2440. onPopup?: () => void;
  2441. onClose?: () => void;
  2442. globalState?: GlobalState;
  2443. initialTab?: BABYLON.DebugLayerTab;
  2444. }
  2445. export class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
  2446. selectedEntity: any;
  2447. selectedIndex: number;
  2448. }> {
  2449. private _onSelectionChangeObserver;
  2450. private _onTabChangedObserver;
  2451. private _once;
  2452. constructor(props: IActionTabsComponentProps);
  2453. componentDidMount(): void;
  2454. componentWillUnmount(): void;
  2455. changeSelectedTab(index: number): void;
  2456. renderContent(): JSX.Element | null;
  2457. onClose(): void;
  2458. onPopup(): void;
  2459. render(): JSX.Element;
  2460. }
  2461. }
  2462. declare module INSPECTOR {
  2463. interface ITreeItemLabelComponentProps {
  2464. label: string;
  2465. onClick?: () => void;
  2466. color: string;
  2467. }
  2468. export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps> {
  2469. constructor(props: ITreeItemLabelComponentProps);
  2470. onClick(): void;
  2471. render(): JSX.Element;
  2472. }
  2473. }
  2474. declare module INSPECTOR {
  2475. interface IExtensionsComponentProps {
  2476. target: any;
  2477. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2478. }
  2479. export class ExtensionsComponent extends React.Component<IExtensionsComponentProps, {
  2480. popupVisible: boolean;
  2481. }> {
  2482. private _popup;
  2483. private extensionRef;
  2484. constructor(props: IExtensionsComponentProps);
  2485. showPopup(): void;
  2486. componentDidMount(): void;
  2487. componentDidUpdate(): void;
  2488. render(): JSX.Element | null;
  2489. }
  2490. }
  2491. declare module INSPECTOR {
  2492. interface IMeshTreeItemComponentProps {
  2493. mesh: BABYLON.AbstractMesh;
  2494. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2495. onClick: () => void;
  2496. globalState: GlobalState;
  2497. }
  2498. export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponentProps, {
  2499. isBoundingBoxEnabled: boolean;
  2500. isVisible: boolean;
  2501. }> {
  2502. constructor(props: IMeshTreeItemComponentProps);
  2503. showBoundingBox(): void;
  2504. switchVisibility(): void;
  2505. render(): JSX.Element;
  2506. }
  2507. }
  2508. declare module INSPECTOR {
  2509. interface ICameraTreeItemComponentProps {
  2510. camera: BABYLON.Camera;
  2511. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2512. onClick: () => void;
  2513. globalState: GlobalState;
  2514. }
  2515. export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComponentProps, {
  2516. isActive: boolean;
  2517. isGizmoEnabled: boolean;
  2518. }> {
  2519. private _onBeforeRenderObserver;
  2520. constructor(props: ICameraTreeItemComponentProps);
  2521. setActive(): void;
  2522. componentDidMount(): void;
  2523. componentWillUnmount(): void;
  2524. toggleGizmo(): void;
  2525. render(): JSX.Element;
  2526. }
  2527. }
  2528. declare module INSPECTOR {
  2529. interface ILightTreeItemComponentProps {
  2530. light: BABYLON.Light;
  2531. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2532. onClick: () => void;
  2533. globalState: GlobalState;
  2534. }
  2535. export class LightTreeItemComponent extends React.Component<ILightTreeItemComponentProps, {
  2536. isEnabled: boolean;
  2537. isGizmoEnabled: boolean;
  2538. }> {
  2539. constructor(props: ILightTreeItemComponentProps);
  2540. switchIsEnabled(): void;
  2541. toggleGizmo(): void;
  2542. render(): JSX.Element;
  2543. }
  2544. }
  2545. declare module INSPECTOR {
  2546. interface IMaterialTreeItemComponentProps {
  2547. material: BABYLON.Material | BABYLON.NodeMaterial;
  2548. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2549. onClick: () => void;
  2550. }
  2551. export class MaterialTreeItemComponent extends React.Component<IMaterialTreeItemComponentProps> {
  2552. constructor(props: IMaterialTreeItemComponentProps);
  2553. render(): JSX.Element;
  2554. }
  2555. }
  2556. declare module INSPECTOR {
  2557. interface ITextureTreeItemComponentProps {
  2558. texture: BABYLON.Texture;
  2559. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2560. onClick: () => void;
  2561. }
  2562. export class TextureTreeItemComponent extends React.Component<ITextureTreeItemComponentProps> {
  2563. constructor(props: ITextureTreeItemComponentProps);
  2564. render(): JSX.Element;
  2565. }
  2566. }
  2567. declare module INSPECTOR {
  2568. interface ITransformNodeItemComponentProps {
  2569. transformNode: BABYLON.TransformNode;
  2570. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2571. onClick: () => void;
  2572. }
  2573. export class TransformNodeItemComponent extends React.Component<ITransformNodeItemComponentProps> {
  2574. constructor(props: ITransformNodeItemComponentProps);
  2575. render(): JSX.Element;
  2576. }
  2577. }
  2578. declare module INSPECTOR {
  2579. interface IControlTreeItemComponentProps {
  2580. control: BABYLON.GUI.Control;
  2581. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2582. onClick: () => void;
  2583. }
  2584. export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
  2585. isActive: boolean;
  2586. isVisible: boolean;
  2587. }> {
  2588. constructor(props: IControlTreeItemComponentProps);
  2589. highlight(): void;
  2590. switchVisibility(): void;
  2591. render(): JSX.Element;
  2592. }
  2593. }
  2594. declare module INSPECTOR {
  2595. interface IAdvancedDynamicTextureTreeItemComponentProps {
  2596. texture: BABYLON.GUI.AdvancedDynamicTexture;
  2597. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2598. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2599. onClick: () => void;
  2600. }
  2601. export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAdvancedDynamicTextureTreeItemComponentProps, {
  2602. isInPickingMode: boolean;
  2603. }> {
  2604. private _onControlPickedObserver;
  2605. constructor(props: IAdvancedDynamicTextureTreeItemComponentProps);
  2606. componentWillUnmount(): void;
  2607. onPickingMode(): void;
  2608. render(): JSX.Element;
  2609. }
  2610. }
  2611. declare module INSPECTOR {
  2612. interface IAnimationGroupItemComponentProps {
  2613. animationGroup: BABYLON.AnimationGroup;
  2614. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2615. onClick: () => void;
  2616. }
  2617. export class AnimationGroupItemComponent extends React.Component<IAnimationGroupItemComponentProps> {
  2618. constructor(props: IAnimationGroupItemComponentProps);
  2619. render(): JSX.Element;
  2620. }
  2621. }
  2622. declare module INSPECTOR {
  2623. interface IPostProcessItemComponentProps {
  2624. postProcess: BABYLON.PostProcess;
  2625. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2626. onClick: () => void;
  2627. }
  2628. export class PostProcessItemComponent extends React.Component<IPostProcessItemComponentProps> {
  2629. constructor(props: IPostProcessItemComponentProps);
  2630. render(): JSX.Element;
  2631. }
  2632. }
  2633. declare module INSPECTOR {
  2634. interface IRenderPipelineItemComponenttProps {
  2635. renderPipeline: BABYLON.PostProcessRenderPipeline;
  2636. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2637. onClick: () => void;
  2638. }
  2639. export class RenderingPipelineItemComponent extends React.Component<IRenderPipelineItemComponenttProps> {
  2640. constructor(props: IRenderPipelineItemComponenttProps);
  2641. render(): JSX.Element;
  2642. }
  2643. }
  2644. declare module INSPECTOR {
  2645. interface ISkeletonTreeItemComponentProps {
  2646. skeleton: BABYLON.Skeleton;
  2647. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2648. onClick: () => void;
  2649. }
  2650. export class SkeletonTreeItemComponent extends React.Component<ISkeletonTreeItemComponentProps> {
  2651. constructor(props: ISkeletonTreeItemComponentProps);
  2652. render(): JSX.Element;
  2653. }
  2654. }
  2655. declare module INSPECTOR {
  2656. interface IBoneTreeItemComponenttProps {
  2657. bone: BABYLON.Bone;
  2658. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2659. onClick: () => void;
  2660. }
  2661. export class BoneTreeItemComponent extends React.Component<IBoneTreeItemComponenttProps> {
  2662. constructor(props: IBoneTreeItemComponenttProps);
  2663. render(): JSX.Element;
  2664. }
  2665. }
  2666. declare module INSPECTOR {
  2667. interface IParticleSystemTreeItemComponentProps {
  2668. system: BABYLON.IParticleSystem;
  2669. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2670. onClick: () => void;
  2671. }
  2672. export class ParticleSystemTreeItemComponent extends React.Component<IParticleSystemTreeItemComponentProps> {
  2673. constructor(props: IParticleSystemTreeItemComponentProps);
  2674. render(): JSX.Element;
  2675. }
  2676. }
  2677. declare module INSPECTOR {
  2678. interface ISpriteManagerTreeItemComponentProps {
  2679. spriteManager: BABYLON.SpriteManager;
  2680. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2681. onClick: () => void;
  2682. }
  2683. export class SpriteManagerTreeItemComponent extends React.Component<ISpriteManagerTreeItemComponentProps> {
  2684. constructor(props: ISpriteManagerTreeItemComponentProps);
  2685. render(): JSX.Element;
  2686. }
  2687. }
  2688. declare module INSPECTOR {
  2689. interface ISpriteTreeItemComponentProps {
  2690. sprite: BABYLON.Sprite;
  2691. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2692. onClick: () => void;
  2693. }
  2694. export class SpriteTreeItemComponent extends React.Component<ISpriteTreeItemComponentProps> {
  2695. constructor(props: ISpriteTreeItemComponentProps);
  2696. render(): JSX.Element;
  2697. }
  2698. }
  2699. declare module INSPECTOR {
  2700. interface ITargetedAnimationItemComponentProps {
  2701. targetedAnimation: BABYLON.TargetedAnimation;
  2702. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2703. onClick: () => void;
  2704. }
  2705. export class TargetedAnimationItemComponent extends React.Component<ITargetedAnimationItemComponentProps> {
  2706. constructor(props: ITargetedAnimationItemComponentProps);
  2707. render(): JSX.Element;
  2708. }
  2709. }
  2710. declare module INSPECTOR {
  2711. interface ISoundTreeItemComponentProps {
  2712. sound: BABYLON.Sound;
  2713. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2714. onClick: () => void;
  2715. }
  2716. export class SoundTreeItemComponent extends React.Component<ISoundTreeItemComponentProps> {
  2717. constructor(props: ISoundTreeItemComponentProps);
  2718. render(): JSX.Element;
  2719. }
  2720. }
  2721. declare module INSPECTOR {
  2722. interface ITreeItemSpecializedComponentProps {
  2723. label: string;
  2724. entity?: any;
  2725. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2726. globalState: GlobalState;
  2727. onClick?: () => void;
  2728. }
  2729. export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpecializedComponentProps> {
  2730. constructor(props: ITreeItemSpecializedComponentProps);
  2731. onClick(): void;
  2732. render(): JSX.Element;
  2733. }
  2734. }
  2735. declare module INSPECTOR {
  2736. export class Tools {
  2737. static LookForItem(item: any, selectedEntity: any): boolean;
  2738. private static _RecursiveRemoveHiddenMeshesAndHoistChildren;
  2739. static SortAndFilter(parent: any, items: any[]): any[];
  2740. }
  2741. }
  2742. declare module INSPECTOR {
  2743. export interface ITreeItemSelectableComponentProps {
  2744. entity: any;
  2745. selectedEntity?: any;
  2746. mustExpand?: boolean;
  2747. offset: number;
  2748. globalState: GlobalState;
  2749. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2750. filter: BABYLON.Nullable<string>;
  2751. }
  2752. export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, {
  2753. isExpanded: boolean;
  2754. isSelected: boolean;
  2755. }> {
  2756. private _wasSelected;
  2757. constructor(props: ITreeItemSelectableComponentProps);
  2758. switchExpandedState(): void;
  2759. shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
  2760. isExpanded: boolean;
  2761. isSelected: boolean;
  2762. }): boolean;
  2763. scrollIntoView(): void;
  2764. componentDidMount(): void;
  2765. componentDidUpdate(): void;
  2766. onSelect(): void;
  2767. renderChildren(): JSX.Element[] | null;
  2768. render(): JSX.Element | null;
  2769. }
  2770. }
  2771. declare module INSPECTOR {
  2772. export interface ITreeItemComponentProps {
  2773. items?: BABYLON.Nullable<any[]>;
  2774. label: string;
  2775. offset: number;
  2776. filter: BABYLON.Nullable<string>;
  2777. forceSubitems?: boolean;
  2778. globalState: GlobalState;
  2779. entity?: any;
  2780. selectedEntity: any;
  2781. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2782. contextMenuItems?: {
  2783. label: string;
  2784. action: () => void;
  2785. }[];
  2786. }
  2787. export class TreeItemComponent extends React.Component<ITreeItemComponentProps, {
  2788. isExpanded: boolean;
  2789. mustExpand: boolean;
  2790. }> {
  2791. static _ContextMenuUniqueIdGenerator: number;
  2792. constructor(props: ITreeItemComponentProps);
  2793. switchExpandedState(): void;
  2794. shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: {
  2795. isExpanded: boolean;
  2796. }): boolean;
  2797. expandAll(expand: boolean): void;
  2798. renderContextMenu(): JSX.Element | null;
  2799. render(): JSX.Element;
  2800. }
  2801. }
  2802. declare module INSPECTOR {
  2803. interface ISceneTreeItemComponentProps {
  2804. scene: BABYLON.Scene;
  2805. onRefresh: () => void;
  2806. selectedEntity?: any;
  2807. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2808. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2809. globalState: GlobalState;
  2810. }
  2811. export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, {
  2812. isSelected: boolean;
  2813. isInPickingMode: boolean;
  2814. gizmoMode: number;
  2815. }> {
  2816. private _gizmoLayerOnPointerObserver;
  2817. private _onPointerObserver;
  2818. private _onSelectionChangeObserver;
  2819. private _selectedEntity;
  2820. private _posDragEnd;
  2821. private _scaleDragEnd;
  2822. private _rotateDragEnd;
  2823. constructor(props: ISceneTreeItemComponentProps);
  2824. shouldComponentUpdate(nextProps: ISceneTreeItemComponentProps, nextState: {
  2825. isSelected: boolean;
  2826. isInPickingMode: boolean;
  2827. }): boolean;
  2828. componentDidMount(): void;
  2829. componentWillUnmount(): void;
  2830. onSelect(): void;
  2831. onPickingMode(): void;
  2832. setGizmoMode(mode: number): void;
  2833. render(): JSX.Element;
  2834. }
  2835. }
  2836. declare module INSPECTOR {
  2837. interface ISceneExplorerFilterComponentProps {
  2838. onFilter: (filter: string) => void;
  2839. }
  2840. export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
  2841. constructor(props: ISceneExplorerFilterComponentProps);
  2842. render(): JSX.Element;
  2843. }
  2844. interface ISceneExplorerComponentProps {
  2845. scene: BABYLON.Scene;
  2846. noCommands?: boolean;
  2847. noHeader?: boolean;
  2848. noExpand?: boolean;
  2849. noClose?: boolean;
  2850. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2851. globalState: GlobalState;
  2852. popupMode?: boolean;
  2853. onPopup?: () => void;
  2854. onClose?: () => void;
  2855. }
  2856. export class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
  2857. filter: BABYLON.Nullable<string>;
  2858. selectedEntity: any;
  2859. scene: BABYLON.Scene;
  2860. }> {
  2861. private _onSelectionChangeObserver;
  2862. private _onSelectionRenamedObserver;
  2863. private _onNewSceneAddedObserver;
  2864. private _onNewSceneObserver;
  2865. private sceneExplorerRef;
  2866. private _once;
  2867. private _hooked;
  2868. private sceneMutationFunc;
  2869. constructor(props: ISceneExplorerComponentProps);
  2870. processMutation(): void;
  2871. componentDidMount(): void;
  2872. componentWillUnmount(): void;
  2873. filterContent(filter: string): void;
  2874. findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {
  2875. previousOne?: any;
  2876. found?: boolean;
  2877. }): boolean;
  2878. processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
  2879. renderContent(): JSX.Element | null;
  2880. onClose(): void;
  2881. onPopup(): void;
  2882. render(): JSX.Element;
  2883. }
  2884. }
  2885. declare module INSPECTOR {
  2886. interface IEmbedHostComponentProps {
  2887. scene: BABYLON.Scene;
  2888. globalState: GlobalState;
  2889. popupMode: boolean;
  2890. noClose?: boolean;
  2891. noExpand?: boolean;
  2892. onClose: () => void;
  2893. onPopup: () => void;
  2894. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2895. initialTab?: BABYLON.DebugLayerTab;
  2896. }
  2897. export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps> {
  2898. private _once;
  2899. private splitRef;
  2900. private topPartRef;
  2901. private bottomPartRef;
  2902. constructor(props: IEmbedHostComponentProps);
  2903. componentDidMount(): void;
  2904. renderContent(): JSX.Element;
  2905. render(): JSX.Element;
  2906. }
  2907. }
  2908. declare module INSPECTOR {
  2909. export class Inspector {
  2910. private static _SceneExplorerHost;
  2911. private static _ActionTabsHost;
  2912. private static _EmbedHost;
  2913. private static _NewCanvasContainer;
  2914. private static _SceneExplorerWindow;
  2915. private static _ActionTabsWindow;
  2916. private static _EmbedHostWindow;
  2917. private static _Scene;
  2918. private static _OpenedPane;
  2919. private static _OnBeforeRenderObserver;
  2920. static OnSelectionChangeObservable: BABYLON.Observable<any>;
  2921. static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
  2922. private static _GlobalState;
  2923. static MarkLineContainerTitleForHighlighting(title: string): void;
  2924. static MarkMultipleLineContainerTitlesForHighlighting(titles: string[]): void;
  2925. private static _CopyStyles;
  2926. private static _CreateSceneExplorer;
  2927. private static _CreateActionTabs;
  2928. private static _CreateEmbedHost;
  2929. static _CreatePopup(title: string, windowVariableName: string, width?: number, height?: number, lateBinding?: boolean): HTMLDivElement | null;
  2930. static get IsVisible(): boolean;
  2931. static EarlyAttachToLoader(): void;
  2932. static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
  2933. static _SetNewScene(scene: BABYLON.Scene): void;
  2934. static _CreateCanvasContainer(parentControl: HTMLElement): void;
  2935. private static _DestroyCanvasContainer;
  2936. private static _Cleanup;
  2937. private static _RemoveElementFromDOM;
  2938. static Hide(): void;
  2939. }
  2940. }
  2941. declare module INSPECTOR {
  2942. interface IAddAnimationProps {
  2943. isOpen: boolean;
  2944. close: () => void;
  2945. entity: BABYLON.IAnimatable;
  2946. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2947. setNotificationMessage: (message: string) => void;
  2948. finishedUpdate: () => void;
  2949. addedNewAnimation: (animation: BABYLON.Animation) => void;
  2950. fps: number;
  2951. selectedToUpdate?: BABYLON.Animation | undefined;
  2952. }
  2953. /**
  2954. * Controls the creation of a new animation.
  2955. * @property {boolean} isOpen controls if the add animation pannel is open or closed in the editor controls;
  2956. * @property {()=>void} close sends the message to close this panel setting isOpen to false;
  2957. * @property {IAnimatable} entity is the animation object to add the animation to;
  2958. * @property {Observable<PropertyChangedEvent>} onPropertyChangedObservable is the registered observable
  2959. * @property {(message: string) => void} setNotificationMessage sends the message string to display errors on the message box
  2960. * @property {() => void} finishedUpdate tells the parent component the update on the animation collection has completed
  2961. * @property { (animation: BABYLON.Animation) => void} addedNewAnimation sends the animation to the editor to process how its is rendered
  2962. * @property {number} fps Frames per second of the animation.
  2963. * @property {Animation | undefined} selectedToUpdate the selected animation so we can update the renderer curve.
  2964. */
  2965. export class AddAnimation extends React.Component<IAddAnimationProps, {
  2966. animationName: string;
  2967. animationTargetProperty: string;
  2968. animationType: number;
  2969. loopMode: number;
  2970. animationTargetPath: string;
  2971. isUpdating: boolean;
  2972. }> {
  2973. constructor(props: IAddAnimationProps);
  2974. setInitialState(editingAnimation?: BABYLON.Animation): {
  2975. animationName: string;
  2976. animationTargetPath: string;
  2977. animationType: number;
  2978. loopMode: number;
  2979. animationTargetProperty: string;
  2980. isUpdating: boolean;
  2981. };
  2982. /**
  2983. * We decide wether the animation will be added or edited
  2984. * @param prevProps Previous props.
  2985. * @param prevState Previous state.
  2986. */
  2987. componentDidUpdate(prevProps: IAddAnimationProps, prevState: any): void;
  2988. /**
  2989. * Updates the animation with the correct properties
  2990. * Updates its name, loopmode and targetProperty.
  2991. * This allows the edition of the animation in the curve editor.
  2992. * We can only update these props for the animation.
  2993. * Keyframes of course are updated on the curve editor.
  2994. */
  2995. updateAnimation: () => void;
  2996. /**
  2997. * Returns the animation type as string
  2998. * @param type Type of animation so we return a string.
  2999. */
  3000. getTypeAsString(type: number): "Size" | "Color4" | "Vector3" | "Float" | "Quaternion" | "Vector2" | "Color3";
  3001. /**
  3002. * Process the creation of a new animation.
  3003. * We verify is the property to animate is present on the object
  3004. * We verify if the property derives from a correct class *type of animation to add an animation
  3005. * At the end we create an empty animation named animation.
  3006. * The animation keys array is set to empty so we can add keyframes in the editor.
  3007. * We return the animation to the curve editor and update the entity animation collection
  3008. */
  3009. addAnimation: () => void;
  3010. raiseOnPropertyChanged(newValue: BABYLON.Animation[], previousValue: BABYLON.Animation[]): void;
  3011. raiseOnPropertyUpdated(newValue: string | number | undefined, previousValue: string | number, property: string): void;
  3012. handlePathChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  3013. handleNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  3014. handleTypeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  3015. handlePropertyChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  3016. handleLoopModeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  3017. render(): JSX.Element;
  3018. }
  3019. }
  3020. declare module INSPECTOR {
  3021. interface IAnchorSvgPointProps {
  3022. control: BABYLON.Vector2;
  3023. anchor: BABYLON.Vector2;
  3024. active: boolean;
  3025. type: string;
  3026. index: string;
  3027. selected: boolean;
  3028. selectControlPoint: (id: string) => void;
  3029. framesInCanvasView: {
  3030. from: number;
  3031. to: number;
  3032. };
  3033. }
  3034. /**
  3035. * Renders the control point to a keyframe.
  3036. * Each keyframe has left and right control points to control de tangent of the curve
  3037. * This controls the inTangent and outTangent values for the keyframe in the animation.
  3038. * @property {Vector2} control is the control point to control de curve tangent
  3039. * @property {Vector2} anchor represents the Keyframe point which acts origin point.
  3040. * @property {boolen} active tells the component if the control point is currently active
  3041. * @property {string} type (left/right) if the control will be the left or right control point
  3042. * @property {boolean} selected if the control point is currently selected. If selected we can move the control point and will become active
  3043. * @property {(id: string) => void;} selectControlPoint sends the id of the control point to the parent component to tell if it is selected
  3044. * @property {{ from: number; to: number }} framesInCanvasView controls from/to which keyframe should the control point can expand and control de curve
  3045. * The frames in canvas tells us how many frames are currently visible in the canvas and therefore control the width of the line between the control and anchor point
  3046. */
  3047. export class AnchorSvgPoint extends React.Component<IAnchorSvgPointProps, {
  3048. visiblePoint: BABYLON.Vector2;
  3049. }> {
  3050. constructor(props: IAnchorSvgPointProps);
  3051. componentDidUpdate(prevProps: IAnchorSvgPointProps, prevState: any): void;
  3052. select: () => void;
  3053. /**
  3054. * Controls where should we render the visible point (representing the control point)
  3055. * The visible control point differs from the control point for UX reasons. The control point
  3056. * expands beyond the visible canvas.
  3057. */
  3058. setVisiblePoint(): BABYLON.Vector2;
  3059. render(): JSX.Element;
  3060. }
  3061. }
  3062. declare module INSPECTOR {
  3063. export interface IKeyframeSvgPoint {
  3064. keyframePoint: BABYLON.Vector2;
  3065. rightControlPoint: BABYLON.Vector2 | null;
  3066. leftControlPoint: BABYLON.Vector2 | null;
  3067. id: string;
  3068. selected: boolean;
  3069. isLeftActive: boolean;
  3070. isRightActive: boolean;
  3071. curveId?: ICurveMetaData;
  3072. }
  3073. export interface ICurveMetaData {
  3074. id: number;
  3075. animationName: string;
  3076. property: string;
  3077. }
  3078. interface IKeyframeSvgPointProps {
  3079. keyframePoint: BABYLON.Vector2;
  3080. leftControlPoint: BABYLON.Vector2 | null;
  3081. rightControlPoint: BABYLON.Vector2 | null;
  3082. id: string;
  3083. selected: boolean;
  3084. selectKeyframe: (id: string, multiselect: boolean) => void;
  3085. selectedControlPoint: (type: string, id: string) => void;
  3086. isLeftActive: boolean;
  3087. isRightActive: boolean;
  3088. framesInCanvasView: {
  3089. from: number;
  3090. to: number;
  3091. };
  3092. }
  3093. /**
  3094. * Renders the Keyframe as an SVG Element for the Canvas component.
  3095. * Holds the two control points to generate the proper curve.
  3096. */
  3097. export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps> {
  3098. constructor(props: IKeyframeSvgPointProps);
  3099. /**
  3100. * Select a keyframe. If the control key is pressed, multiselect keyframes
  3101. * @param e Mouse event
  3102. */
  3103. select: (e: React.MouseEvent<SVGImageElement>) => void;
  3104. /**
  3105. * Send the ID of the selected keyframe
  3106. * @param type Type of selected keyframe
  3107. */
  3108. selectedControlPointId: (type: string) => void;
  3109. render(): JSX.Element;
  3110. }
  3111. }
  3112. declare module INSPECTOR {
  3113. interface ISvgDraggableAreaProps {
  3114. keyframeSvgPoints: IKeyframeSvgPoint[];
  3115. updatePosition: (updatedKeyframe: IKeyframeSvgPoint, id: string) => void;
  3116. scale: number;
  3117. viewBoxScale: number;
  3118. deselectKeyframes: () => void;
  3119. removeSelectedKeyframes: (points: IKeyframeSvgPoint[]) => void;
  3120. panningY: (panningY: number) => void;
  3121. panningX: (panningX: number) => void;
  3122. setCurrentFrame: (direction: number) => void;
  3123. positionCanvas?: BABYLON.Vector2;
  3124. repositionCanvas?: boolean;
  3125. canvasPositionEnded: () => void;
  3126. resetActionableKeyframe: () => void;
  3127. framesInCanvasView: {
  3128. from: number;
  3129. to: number;
  3130. };
  3131. framesResized: number;
  3132. }
  3133. /**
  3134. * The SvgDraggableArea is a wrapper for SVG Canvas the interaction
  3135. *
  3136. * Here we control the drag and key behavior for the SVG components.
  3137. */
  3138. export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
  3139. panX: number;
  3140. panY: number;
  3141. }> {
  3142. private _active;
  3143. private _isCurrentPointControl;
  3144. private _currentPointId;
  3145. private _draggableArea;
  3146. private _panStart;
  3147. private _panStop;
  3148. private _playheadDrag;
  3149. private _playheadSelected;
  3150. private _movedX;
  3151. private _movedY;
  3152. private _isControlKeyPress;
  3153. readonly _dragBuffer: number;
  3154. readonly _draggingMultiplier: number;
  3155. constructor(props: ISvgDraggableAreaProps);
  3156. /**
  3157. * Listen to key events to be able to drag and set the correct canvas client width
  3158. */
  3159. componentDidMount(): void;
  3160. /**
  3161. * Makes sure the canvas has resposition correctly
  3162. * @param prevProps previous props
  3163. */
  3164. componentDidUpdate(prevProps: ISvgDraggableAreaProps): void;
  3165. /**
  3166. * Identify the type of target of the mouse event
  3167. * @param e SVG Mouse Event
  3168. */
  3169. dragStart: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3170. /**
  3171. * Handle dragging
  3172. * @param e SVG Mouse Event
  3173. */
  3174. drag: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3175. /**
  3176. * Resets the dragging state
  3177. * @param e Drag event
  3178. */
  3179. dragEnd: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3180. /**
  3181. * Gets the current position of the mouse in a SVG Canvas
  3182. * @param e Mouse event
  3183. */
  3184. getMousePosition: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => BABYLON.Vector2 | undefined;
  3185. /**
  3186. * Handles the canvas panning direction and sets the X and Y values to move the
  3187. * SVG canvas
  3188. */
  3189. panDirection(): void;
  3190. /**
  3191. * Allows dragging
  3192. * @param e Keyboard event
  3193. */
  3194. keyDown(e: KeyboardEvent): void;
  3195. /**
  3196. * Allows multiple selection
  3197. * @param e Keyboard event
  3198. */
  3199. keyUp(e: KeyboardEvent): void;
  3200. /**
  3201. * Focus on the SVG canvas
  3202. * @param e Mouse event
  3203. */
  3204. focus: (e: React.MouseEvent<SVGSVGElement>) => void;
  3205. /**
  3206. * Is the control point active or not
  3207. */
  3208. isNotControlPointActive(): boolean;
  3209. render(): JSX.Element;
  3210. }
  3211. }
  3212. declare module INSPECTOR {
  3213. export interface IIconButtonLineComponentProps {
  3214. icon: string;
  3215. onClick: () => void;
  3216. tooltip: string;
  3217. active?: boolean;
  3218. }
  3219. export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
  3220. constructor(props: IIconButtonLineComponentProps);
  3221. render(): JSX.Element;
  3222. }
  3223. }
  3224. declare module INSPECTOR {
  3225. interface IControlsProps {
  3226. keyframes: BABYLON.IAnimationKey[] | null;
  3227. selected: BABYLON.IAnimationKey | null;
  3228. currentFrame: number;
  3229. onCurrentFrameChange: (frame: number) => void;
  3230. repositionCanvas: (keyframe: BABYLON.IAnimationKey) => void;
  3231. playPause: (direction: number) => void;
  3232. isPlaying: boolean;
  3233. scrollable: React.RefObject<HTMLDivElement>;
  3234. }
  3235. /**
  3236. * The playback controls for the animation editor
  3237. */
  3238. export class Controls extends React.Component<IControlsProps, {
  3239. selected: BABYLON.IAnimationKey;
  3240. playingType: string;
  3241. }> {
  3242. readonly _sizeOfKeyframe: number;
  3243. constructor(props: IControlsProps);
  3244. playBackwards: () => void;
  3245. play: () => void;
  3246. pause: () => void;
  3247. /**
  3248. * Set animation to initial keyframe
  3249. */
  3250. moveToAnimationStart: () => void;
  3251. /**
  3252. * Set animation to the last keyframe
  3253. */
  3254. moveToAnimationEnd: () => void;
  3255. /** Move to next keyframe */
  3256. nextKeyframe: () => void;
  3257. /** Move to previous keyframe */
  3258. previousKeyframe: () => void;
  3259. render(): JSX.Element;
  3260. }
  3261. }
  3262. declare module INSPECTOR {
  3263. interface ITimelineProps {
  3264. keyframes: BABYLON.IAnimationKey[] | null;
  3265. selected: BABYLON.IAnimationKey | null;
  3266. currentFrame: number;
  3267. onCurrentFrameChange: (frame: number) => void;
  3268. onAnimationLimitChange: (limit: number) => void;
  3269. dragKeyframe: (frame: number, index: number) => void;
  3270. playPause: (direction: number) => void;
  3271. isPlaying: boolean;
  3272. animationLimit: number;
  3273. fps: number;
  3274. repositionCanvas: (keyframe: BABYLON.IAnimationKey) => void;
  3275. resizeWindowProportion: number;
  3276. }
  3277. interface ITimelineState {
  3278. selected: BABYLON.IAnimationKey;
  3279. activeKeyframe: number | null;
  3280. start: number;
  3281. end: number;
  3282. scrollWidth: number | undefined;
  3283. selectionLength: number[];
  3284. limitValue: number;
  3285. }
  3286. /**
  3287. * The Timeline for the curve editor
  3288. *
  3289. * Has a scrollbar that can be resized and move to left and right.
  3290. * The timeline does not affect the Canvas but only the frame container.
  3291. */
  3292. export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
  3293. private _scrollable;
  3294. private _scrollbarHandle;
  3295. private _scrollContainer;
  3296. private _inputAnimationLimit;
  3297. private _direction;
  3298. private _scrolling;
  3299. private _shiftX;
  3300. private _active;
  3301. readonly _marginScrollbar: number;
  3302. constructor(props: ITimelineProps);
  3303. /** Listen to keyup events and set the initial lenght of the scrollbar */
  3304. componentDidMount(): void;
  3305. /** Recalculate the scrollwidth if a window resize happens */
  3306. componentDidUpdate(prevProps: ITimelineProps): void;
  3307. /** Remove key event listener */
  3308. componentWillUnmount(): void;
  3309. /**
  3310. * Set component state if enter key is pressed
  3311. * @param event enter key event
  3312. */
  3313. isEnterKeyUp(event: KeyboardEvent): void;
  3314. /**
  3315. * Detect blur event
  3316. * @param event Blur event
  3317. */
  3318. onInputBlur(event: React.FocusEvent<HTMLInputElement>): void;
  3319. /** Set component state (scrollbar width, position, and start and end) */
  3320. setControlState(): void;
  3321. /**
  3322. * Set scrollwidth on the timeline
  3323. * @param {number} start Frame from which the scrollbar should begin.
  3324. * @param {number} end Last frame for the timeline.
  3325. */
  3326. calculateScrollWidth(start: number, end: number): number | undefined;
  3327. /**
  3328. * Play animation backwards
  3329. * @param event Mouse event
  3330. */
  3331. playBackwards(event: React.MouseEvent<HTMLDivElement>): void;
  3332. /**
  3333. * Play animation
  3334. * @param event Mouse event
  3335. */
  3336. play(event: React.MouseEvent<HTMLDivElement>): void;
  3337. /**
  3338. * Pause the animation
  3339. * @param event Mouse event
  3340. */
  3341. pause(event: React.MouseEvent<HTMLDivElement>): void;
  3342. /**
  3343. * Set the selected frame
  3344. * @param event Mouse event
  3345. */
  3346. setCurrentFrame: (event: React.MouseEvent<HTMLDivElement>) => void;
  3347. /**
  3348. * Handles the change of number of frames available in the timeline.
  3349. */
  3350. handleLimitChange(event: React.ChangeEvent<HTMLInputElement>): void;
  3351. /**
  3352. * Starts the scrollbar dragging
  3353. * @param e Mouse event on SVG Element
  3354. */
  3355. dragStart: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3356. /**
  3357. * Update the canvas visible frames while dragging
  3358. * @param e Mouse event
  3359. */
  3360. drag: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3361. /**
  3362. * Check if the frame is being used as a Keyframe by the animation
  3363. * @param frame number of frame
  3364. * @param direction frame increment or decrement
  3365. */
  3366. isFrameBeingUsed(frame: number, direction: number): number | false;
  3367. /**
  3368. * Reset drag state
  3369. * @param e Mouse event on SVG Element
  3370. */
  3371. dragEnd: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3372. /**
  3373. * Change position of the scrollbar
  3374. * @param e Mouse event
  3375. */
  3376. scrollDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  3377. /**
  3378. * Change size of scrollbar
  3379. * @param e Mouse event
  3380. */
  3381. scrollDrag: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  3382. /**
  3383. * Reset scroll drag
  3384. * @param e Mouse event
  3385. */
  3386. scrollDragEnd: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  3387. /**
  3388. * Sets the start, end and selection length of the scrollbar. This will control the width and
  3389. * height of the scrollbar as well as the number of frames available
  3390. * @param {number} pageX Controls the X axis of the scrollbar movement.
  3391. */
  3392. moveScrollbar(pageX: number): void;
  3393. /**
  3394. * Controls the resizing of the scrollbar from the right handle
  3395. * @param {number} clientX how much mouse has moved
  3396. */
  3397. resizeScrollbarRight(clientX: number): void;
  3398. /**
  3399. * Controls the resizing of the scrollbar from the left handle
  3400. * @param {number} clientX how much mouse has moved
  3401. */
  3402. resizeScrollbarLeft(clientX: number): void;
  3403. /**
  3404. * Returns array with the expected length between two numbers
  3405. * @param start initial visible frame
  3406. * @param stop last visible frame
  3407. */
  3408. range(start: number, end: number): number[];
  3409. /**
  3410. * Get the animation keyframe
  3411. * @param frame Frame
  3412. */
  3413. getKeyframe(frame: number): false | BABYLON.IAnimationKey | undefined;
  3414. /**
  3415. * Get the current animation keyframe
  3416. * @param frame Frame
  3417. */
  3418. getCurrentFrame(frame: number): boolean;
  3419. dragDomFalse: () => boolean;
  3420. render(): JSX.Element;
  3421. }
  3422. }
  3423. declare module INSPECTOR {
  3424. interface IPlayheadProps {
  3425. message: string;
  3426. open: boolean;
  3427. close: () => void;
  3428. }
  3429. /**
  3430. * Renders the notification for the user
  3431. */
  3432. export class Notification extends React.Component<IPlayheadProps> {
  3433. constructor(props: IPlayheadProps);
  3434. render(): JSX.Element;
  3435. }
  3436. }
  3437. declare module INSPECTOR {
  3438. interface IGraphActionsBarProps {
  3439. addKeyframe: () => void;
  3440. removeKeyframe: () => void;
  3441. frameSelectedKeyframes: () => void;
  3442. handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3443. handleFrameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3444. flatTangent: () => void;
  3445. brokeTangents: () => void;
  3446. setLerpToActiveControlPoint: () => void;
  3447. brokenMode: boolean;
  3448. lerpMode: boolean;
  3449. actionableKeyframe: IActionableKeyFrame;
  3450. title: string;
  3451. enabled: boolean;
  3452. setKeyframeValue: (actionableKeyframe: IActionableKeyFrame) => void;
  3453. frameRange: {
  3454. min: number | undefined;
  3455. max: number | undefined;
  3456. };
  3457. }
  3458. /**
  3459. * Has the buttons and actions for the Canvas Graph.
  3460. * Handles input change and actions (flat, broken mode, set linear control points)
  3461. */
  3462. export class GraphActionsBar extends React.Component<IGraphActionsBarProps, {
  3463. frame: string;
  3464. value: string;
  3465. min: number | undefined;
  3466. max: number | undefined;
  3467. }> {
  3468. private _frameInput;
  3469. private _valueInput;
  3470. constructor(props: IGraphActionsBarProps);
  3471. /**
  3472. * Listen to keyup changes to handle if the input event has ended or change
  3473. */
  3474. componentDidMount(): void;
  3475. /**
  3476. * Set the changing state of frame, value and range of the actionablekeyframe
  3477. * @param prevProps previous props
  3478. * @param prevState previous state
  3479. */
  3480. componentDidUpdate(prevProps: IGraphActionsBarProps, prevState: any): void;
  3481. /**
  3482. * Returns the frame and value for the keyframe
  3483. * @param keyframe The keyframe to update
  3484. */
  3485. selectedKeyframeChanged(keyframe: IActionableKeyFrame): {
  3486. frame: string;
  3487. value: string;
  3488. };
  3489. /**
  3490. * Remove listeners
  3491. */
  3492. componentWillUnmount(): void;
  3493. /**
  3494. * Trigger the change on the keyframe
  3495. * @param event Enter keyevent
  3496. */
  3497. isEnterKeyUp(event: KeyboardEvent): void;
  3498. /**
  3499. * Trigger the chnage on the keyframe on blur
  3500. * @param event Focus event
  3501. */
  3502. onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
  3503. /**
  3504. * Gets the keyframe frame
  3505. */
  3506. getFrame(): string | number;
  3507. /**
  3508. * Gets the keyframe value
  3509. */
  3510. getValue(): string | number;
  3511. /**
  3512. * Set keyframe value state
  3513. * @param e Input event
  3514. */
  3515. handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3516. /**
  3517. * Set the keyframe frame state
  3518. * @param e Input event
  3519. */
  3520. handleFrameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3521. render(): JSX.Element;
  3522. }
  3523. }
  3524. declare module INSPECTOR {
  3525. interface IAnimationListTreeProps {
  3526. isTargetedAnimation: boolean;
  3527. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3528. selected: BABYLON.Animation | null;
  3529. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3530. selectAnimation: (selected: BABYLON.Animation, coordinate?: SelectedCoordinate) => void;
  3531. empty: () => void;
  3532. editAnimation: (selected: BABYLON.Animation) => void;
  3533. deselectAnimation: () => void;
  3534. }
  3535. interface Item {
  3536. index: number;
  3537. name: string;
  3538. property: string;
  3539. selected: boolean;
  3540. open: boolean;
  3541. }
  3542. export enum SelectedCoordinate {
  3543. x = 0,
  3544. y = 1,
  3545. z = 2,
  3546. w = 3,
  3547. r = 0,
  3548. g = 1,
  3549. b = 2,
  3550. a = 3,
  3551. width = 0,
  3552. height = 1
  3553. }
  3554. interface ItemCoordinate {
  3555. id: string;
  3556. color: string;
  3557. coordinate: SelectedCoordinate;
  3558. }
  3559. /**
  3560. * Renders a list of current animations.
  3561. */
  3562. export class AnimationListTree extends React.Component<IAnimationListTreeProps, {
  3563. selectedCoordinate: SelectedCoordinate;
  3564. selectedAnimation: number;
  3565. animationList: Item[] | null;
  3566. animations: BABYLON.Nullable<BABYLON.Animation[]> | BABYLON.Animation;
  3567. }> {
  3568. constructor(props: IAnimationListTreeProps);
  3569. /**
  3570. * Set the animation list if has changed properties
  3571. * @param prevProps previous properties
  3572. */
  3573. componentDidUpdate(prevProps: IAnimationListTreeProps): void;
  3574. /**
  3575. * Delete animation from list
  3576. */
  3577. deleteAnimation: () => void;
  3578. /**
  3579. * Update the animations collection
  3580. * @param newValue new animation list
  3581. * @param previousValue previous animation list
  3582. */
  3583. raiseOnPropertyChanged(newValue: BABYLON.Animation[], previousValue: BABYLON.Animation[]): void;
  3584. /**
  3585. * Renders the animation list
  3586. */
  3587. generateList(): Item[] | null;
  3588. /**
  3589. * Open or closes the animation to show its coordinate animations
  3590. * @param index BABYLON.Animation index
  3591. */
  3592. toggleProperty(index: number): void;
  3593. /**
  3594. * Select the animation to render
  3595. * @param animation Selected animation
  3596. * @param coordinate Selected coordinate (x, y, z)
  3597. * @param index Index
  3598. */
  3599. setSelectedCoordinate(animation: BABYLON.Animation, coordinate: SelectedCoordinate, index: number): void;
  3600. /**
  3601. * Renders the coordinate belonging to an animation
  3602. * @param i Index
  3603. * @param animation Selected animation
  3604. * @param coordinate Coordinate name
  3605. * @param color Color identifier
  3606. * @param selectedCoordinate Selected coordinate (x, y, z)
  3607. */
  3608. coordinateItem(i: number, animation: BABYLON.Animation, coordinate: string, color: string, selectedCoordinate: SelectedCoordinate): JSX.Element;
  3609. /**
  3610. * Render animation
  3611. * @param animation selected animations
  3612. * @param i index
  3613. * @param childrenElements its coordinate (x,y,z) animations
  3614. */
  3615. typeAnimationItem(animation: BABYLON.Animation, i: number, childrenElements: ItemCoordinate[]): JSX.Element;
  3616. /**
  3617. * Render animation item
  3618. * @param animation Selected aniamtion
  3619. * @param i index
  3620. */
  3621. setListItem(animation: BABYLON.Animation, i: number): JSX.Element | null;
  3622. render(): JSX.Element;
  3623. }
  3624. }
  3625. declare module INSPECTOR {
  3626. interface ILoadSnippetProps {
  3627. animations: BABYLON.Animation[];
  3628. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3629. lockObject: LockObject;
  3630. globalState: GlobalState;
  3631. snippetServer: string;
  3632. setSnippetId: (id: string) => void;
  3633. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3634. setNotificationMessage: (message: string) => void;
  3635. animationsLoaded: (numberOfAnimations: number) => void;
  3636. }
  3637. /**
  3638. * Loads animation locally or from the Babylon.js Snippet Server
  3639. */
  3640. export class LoadSnippet extends React.Component<ILoadSnippetProps, {
  3641. snippetId: string;
  3642. }> {
  3643. private _serverAddress;
  3644. constructor(props: ILoadSnippetProps);
  3645. /**
  3646. * Set the animations snippet id
  3647. * @param value Snippet ID
  3648. */
  3649. change: (value: string) => void;
  3650. /**
  3651. * Select a local file to load animations
  3652. * @param file File name
  3653. */
  3654. loadFromFile: (file: File) => void;
  3655. /**
  3656. * Load animations from server identified with a snippet id
  3657. */
  3658. loadFromSnippet: () => void;
  3659. render(): JSX.Element;
  3660. }
  3661. }
  3662. declare module INSPECTOR {
  3663. interface ISaveSnippetProps {
  3664. animations: BABYLON.Nullable<BABYLON.Animation[]>;
  3665. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3666. lockObject: LockObject;
  3667. globalState: GlobalState;
  3668. snippetServer: string;
  3669. snippetId: string;
  3670. }
  3671. export interface Snippet {
  3672. url: string;
  3673. id: string;
  3674. }
  3675. interface SelectedAnimation {
  3676. id: string;
  3677. name: string;
  3678. index: number;
  3679. selected: boolean;
  3680. }
  3681. /**
  3682. * Saves the animation snippet to the Babylon.js site or downloads the animation file locally
  3683. */
  3684. export class SaveSnippet extends React.Component<ISaveSnippetProps, {
  3685. selectedAnimations: SelectedAnimation[];
  3686. }> {
  3687. constructor(props: ISaveSnippetProps);
  3688. /**
  3689. * Set the selected animations to save
  3690. * @param e Input event
  3691. */
  3692. handleCheckboxChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3693. /**
  3694. * Stringify the selected animation
  3695. */
  3696. stringifySelectedAnimations(): string;
  3697. /**
  3698. * Save the selected animations to a local file
  3699. */
  3700. saveToFile: () => void;
  3701. /**
  3702. * Save the selected animations if a snippet ID is set
  3703. */
  3704. saveToSnippet: () => void;
  3705. render(): JSX.Element;
  3706. }
  3707. }
  3708. declare module INSPECTOR {
  3709. interface IEditorControlsProps {
  3710. isTargetedAnimation: boolean;
  3711. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3712. selected: BABYLON.Animation | null;
  3713. lockObject: LockObject;
  3714. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3715. setNotificationMessage: (message: string) => void;
  3716. selectAnimation: (selected: BABYLON.Animation, axis?: SelectedCoordinate) => void;
  3717. setFps: (fps: number) => void;
  3718. setIsLooping: () => void;
  3719. globalState: GlobalState;
  3720. snippetServer: string;
  3721. deselectAnimation: () => void;
  3722. fps: number;
  3723. }
  3724. interface IEditorControlsState {
  3725. isAnimationTabOpen: boolean;
  3726. isEditTabOpen: boolean;
  3727. isLoadTabOpen: boolean;
  3728. isSaveTabOpen: boolean;
  3729. isLoopActive: boolean;
  3730. animationsCount: number;
  3731. framesPerSecond: number;
  3732. snippetId: string;
  3733. selected: BABYLON.Animation | undefined;
  3734. }
  3735. /**
  3736. * Renders the Curve Editor controls to create, save, remove, load and edit animations
  3737. */
  3738. export class EditorControls extends React.Component<IEditorControlsProps, IEditorControlsState> {
  3739. constructor(props: IEditorControlsProps);
  3740. /**
  3741. * Makes sure the frames per second receive the updated prop
  3742. * @param prevProps previous properties
  3743. */
  3744. componentDidUpdate(prevProps: IEditorControlsProps): void;
  3745. /**
  3746. * Add the nimation, recounts the list and opens the correct tab
  3747. * @param animation The recently empty created animation
  3748. */
  3749. onAnimationAdded: (animation: BABYLON.Animation) => void;
  3750. /**
  3751. * Set state when the animations list has finished updated
  3752. */
  3753. finishedUpdate: () => void;
  3754. recountAnimations(): number;
  3755. /**
  3756. * Toggles loop
  3757. */
  3758. changeLoopBehavior: () => void;
  3759. /**
  3760. * This avoids using lambda functions in JSX
  3761. */
  3762. handleFirstTab: () => void;
  3763. handleSecondTab: () => void;
  3764. handleThirdTab: () => void;
  3765. handleFourthTab: () => void;
  3766. handleTabs(tab: number): void;
  3767. handleChangeFps: (fps: number) => void;
  3768. /**
  3769. * Cleans the list when has been emptied
  3770. */
  3771. onEmptiedList: () => void;
  3772. /**
  3773. * When animations have been reloaded update tabs
  3774. */
  3775. animationsLoaded: (numberOfAnimations: number) => void;
  3776. /**
  3777. * The currently selected animation to edit it
  3778. * @param selected Selected animation
  3779. */
  3780. editAnimation: (selected: BABYLON.Animation) => void;
  3781. setSnippetId: (id: string) => void;
  3782. /**
  3783. * Marks animation tab closed and hides the tab
  3784. */
  3785. onCloseAddAnimation: () => void;
  3786. render(): JSX.Element;
  3787. }
  3788. }
  3789. declare module INSPECTOR {
  3790. interface ISwitchButtonProps {
  3791. /** Current scale */
  3792. current: CurveScale;
  3793. /** On click change of scale */
  3794. action?: (event: CurveScale) => void;
  3795. }
  3796. /**
  3797. * Displays the current scale
  3798. */
  3799. export class ScaleLabel extends React.Component<ISwitchButtonProps, {
  3800. current: CurveScale;
  3801. }> {
  3802. constructor(props: ISwitchButtonProps);
  3803. renderLabel(scale: CurveScale): "" | "DEG" | "FLT" | "INT" | "RAD";
  3804. onClickHandle: () => void;
  3805. render(): JSX.Element;
  3806. }
  3807. }
  3808. declare module INSPECTOR {
  3809. interface IAnimationCurveEditorComponentProps {
  3810. playOrPause?: () => void;
  3811. scene: BABYLON.Scene;
  3812. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3813. lockObject: LockObject;
  3814. globalState: GlobalState;
  3815. }
  3816. /**
  3817. * Represent an Axis of the canvas. This help us control the frame/panning
  3818. */
  3819. interface ICanvasAxis {
  3820. value: number;
  3821. label: number;
  3822. }
  3823. /**
  3824. * This help us identify the type of scaling on the selected animated property
  3825. */
  3826. export enum CurveScale {
  3827. float = 0,
  3828. radians = 1,
  3829. degrees = 2,
  3830. integers = 3,
  3831. default = 4
  3832. }
  3833. /**
  3834. * This represents the visible selected keyframe in the canvas. If the keyframe is selected
  3835. * we should be able to edit the frame and value.
  3836. */
  3837. export interface IActionableKeyFrame {
  3838. frame?: number | string;
  3839. value?: any;
  3840. }
  3841. /**
  3842. * Each curve is an SVG Path. This Interface give us its properties to render on the canvas.
  3843. */
  3844. interface ICurveData {
  3845. pathData: string;
  3846. pathLength: number;
  3847. domCurve: React.RefObject<SVGPathElement>;
  3848. color: string;
  3849. id: string;
  3850. }
  3851. /**
  3852. * The curve editor state
  3853. */
  3854. interface IAnimationCurveEditorComponentState {
  3855. /** If the editor is opened or closed */
  3856. isOpen: boolean;
  3857. /** The currently selected animation from which the curves will render */
  3858. selected: BABYLON.Animation | null;
  3859. /** A list of keyframes to be rendered as SVG Elements in the curve */
  3860. svgKeyframes: IKeyframeSvgPoint[] | undefined;
  3861. /** The current frame in which the playhead is positioned */
  3862. currentFrame: number;
  3863. /** The current value in which the playhead is positioned */
  3864. currentValue: number;
  3865. /** The number of frame in which the current canvas is divided. The helps to render the frames in the graph editor */
  3866. frameAxisLength: ICanvasAxis[];
  3867. /** The number of values in which the current canvas is divided. The helps to render the frames in the graph editor. The current scale decides how these values are rendered*/
  3868. valueAxisLength: ICanvasAxis[];
  3869. /** If the selected keyframe should be treated as a flat tangent curve */
  3870. isFlatTangentMode: boolean;
  3871. /** If the tangent mode is active */
  3872. isTangentMode: boolean;
  3873. /** If the control points are broken or not */
  3874. isBrokenMode: boolean;
  3875. /** If selected keyframe should render its selected control point to be linear or not */
  3876. lerpMode: boolean;
  3877. /** The scale of the canvas */
  3878. scale: number;
  3879. /** The offset of the playhead to position itself on the canvas */
  3880. playheadOffset: number;
  3881. /** The error or warning message to display */
  3882. notification: string;
  3883. /** The current selected point in the SVG curve */
  3884. currentPoint: SVGPoint | undefined;
  3885. /** The start position of the playhead */
  3886. playheadPos: number;
  3887. /** If the animation is playing or not */
  3888. isPlaying: boolean;
  3889. /** The selected curve represented with an array of curves */
  3890. selectedPathData: ICurveData[] | undefined;
  3891. /** The currently selected coordinate of a complex property (i.e. x, y, z) */
  3892. selectedCoordinate: number;
  3893. /** The number of frames available in the canvas timeline*/
  3894. animationLimit: number;
  3895. /** The currently animation frames per second */
  3896. fps: number;
  3897. /** If the animation is set to loop or not while animation is playing */
  3898. isLooping: boolean;
  3899. /** The amount of vertical panning the user has moved the canvas */
  3900. panningY: number;
  3901. /** The amount of horizontal panning the user has moved the canvas */
  3902. panningX: number;
  3903. /** If the canvas has finished repositioned itself */
  3904. repositionCanvas: boolean;
  3905. /** The current selected keyframe on which we can perform actions (update frame and value) */
  3906. actionableKeyframe: IActionableKeyFrame;
  3907. /** The current value scale */
  3908. valueScaleType: CurveScale;
  3909. /** The amount scale to update valyes */
  3910. valueScale: number;
  3911. /** The canvas proportion width */
  3912. canvasLength: number;
  3913. /** The last frame to be created. */
  3914. lastKeyframeCreated: BABYLON.Nullable<string>;
  3915. /** The canvas scale width */
  3916. canvasWidthScale: number;
  3917. /** How the resize of the canvas will change the value axis */
  3918. valuesPositionResize: number;
  3919. /** How many frames are currently visible in the canvas */
  3920. framesInCanvasView: {
  3921. from: number;
  3922. to: number;
  3923. };
  3924. /** Limits the maximum frame from which a keyframe can move in the curve. So it wont overlap the curve*/
  3925. maxFrame: number | undefined;
  3926. /** Limits the minimum frame from which a keyframe can move in the curve. So it wont overlap the curve*/
  3927. minFrame: number | undefined;
  3928. /** How many frames have been increased or reduced on a windows resize event */
  3929. framesResized: number;
  3930. }
  3931. /**
  3932. * BABYLON.Animation curve Editor Component
  3933. * This component allows the use to create animations visualy from the Babylon.js playground.
  3934. * The principal features for the curve editor are:
  3935. * 1. Create animations for the selected entity properties.
  3936. * 2. Edit the animations a selected entity has.
  3937. * 3. You can load and save animations locally and from the snippet server.
  3938. * 4. After creating an animation you need to add keyframes.
  3939. * 5. You can update the frame and value of each frame.
  3940. * @property {() => void} playOrPause is the event to stop or inititate the animation on the playground scene
  3941. * @property {Scene} scene is the scene object from the playground
  3942. * @property {IAnimatable | BABYLON.TargetedAnimation} entity represents the selected entity which will be the animations target
  3943. * @property {LockObject} lockObject the inherited object to lock for modification with the BABYLON.Observable pattern
  3944. * @property {GlobalState} globalState the playground globalstate
  3945. * Check the IAnimationCurveEditorComponentState for state functionality
  3946. */
  3947. export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, IAnimationCurveEditorComponentState> {
  3948. readonly _entityName: string;
  3949. private _snippetUrl;
  3950. private _heightScale;
  3951. private _scaleFactor;
  3952. private _currentScale;
  3953. private _pixelFrameUnit;
  3954. private _svgKeyframes;
  3955. private _isPlaying;
  3956. private _graphCanvas;
  3957. private _editor;
  3958. private _editorWindow;
  3959. private _resizeId;
  3960. private _svgCanvas;
  3961. private _isTargetedAnimation;
  3962. private _resizedTimeline;
  3963. private _onBeforeRenderObserver;
  3964. private _mainAnimatable;
  3965. constructor(props: IAnimationCurveEditorComponentProps);
  3966. componentDidMount(): void;
  3967. /**
  3968. * Connects scene frame with curve editor animation
  3969. * @param prevProps previous Props
  3970. * @param prevState previous State
  3971. */
  3972. componentDidUpdate(prevProps: IAnimationCurveEditorComponentProps, prevState: any): void;
  3973. /**
  3974. * Clean up observer and listeners
  3975. */
  3976. componentWillUnmount(): void;
  3977. /**
  3978. * Set the frame on the animation
  3979. * @param value number of frame to move animation
  3980. */
  3981. onCurrentFrameChangeScene(value: number): void;
  3982. /**
  3983. * Notifications
  3984. * To add notification we set the state and clear to make the notification bar hide.
  3985. */
  3986. clearNotification: () => void;
  3987. /**
  3988. * Zoom and Scroll
  3989. * This section handles zoom and scroll
  3990. * of the graph area.
  3991. */
  3992. zoom: (e: React.WheelEvent<HTMLDivElement>) => void;
  3993. /**
  3994. * Returns Array with labels and values for Frame axis in Canvas
  3995. */
  3996. setFrameAxis(currentLength: number): {
  3997. value: number;
  3998. label: number;
  3999. }[];
  4000. /**
  4001. * Returns Array with labels, lines and values for Value axis in Canvas
  4002. */
  4003. setValueLines(): {
  4004. value: number;
  4005. label: string;
  4006. }[];
  4007. /**
  4008. * Creates a string id from animation name and the keyframe index
  4009. * @param animationName Name of animation
  4010. * @param keyframeIndex Index of keyframe
  4011. */
  4012. encodeCurveId(animationName: string, keyframeIndex: number): string;
  4013. /**
  4014. * Returns the animation keyframe index and the animation selected coordinate (x, y, z)
  4015. * @param id curve id created with index and coordinate of animation
  4016. */
  4017. decodeCurveId(id: string): {
  4018. order: number;
  4019. coordinate: number;
  4020. };
  4021. /**
  4022. * Returns the value from a keyframe
  4023. * @param id curve id
  4024. */
  4025. getKeyframeValueFromAnimation(id: string): {
  4026. frame: number;
  4027. value: number;
  4028. } | undefined;
  4029. /**
  4030. * Keyframe Manipulation
  4031. * This section handles events from SvgDraggableArea.
  4032. * @param id selected keyframe id
  4033. * @param multiselect if we are multiselecting keyframes
  4034. */
  4035. selectKeyframe: (id: string, multiselect: boolean) => void;
  4036. /**
  4037. * Determine if two control points are collinear (flat tangent)
  4038. * @param kf keyframe point
  4039. */
  4040. hasCollinearPoints: (kf: IKeyframeSvgPoint | undefined) => boolean;
  4041. /**
  4042. * Returns the previous and next keyframe from a selected frame.
  4043. * @param frame index of keyframe
  4044. */
  4045. getPreviousAndNextKeyframe: (frame: number) => {
  4046. prev: number | undefined;
  4047. next: number | undefined;
  4048. };
  4049. /**
  4050. * Selects a keyframe in animation based on its Id
  4051. * @param id keyframe id
  4052. * @param actionableKeyframe selected keyframe
  4053. */
  4054. selectKeyframeFromId: (id: string, actionableKeyframe: IActionableKeyFrame) => void;
  4055. /**
  4056. * Resets the current selected keyframe as an updatable pairs by Graph BABYLON.GUI.Control Bar
  4057. */
  4058. resetActionableKeyframe: () => void;
  4059. /**
  4060. * Sets the selected control point.
  4061. * @param type left or right control point
  4062. * @param id id of selected svg keyframe
  4063. */
  4064. selectedControlPoint: (type: string, id: string) => void;
  4065. /**
  4066. * Sets the selected control point.
  4067. */
  4068. deselectKeyframes: () => void;
  4069. /**
  4070. * Update the BABYLON.Animation Key values based on its type
  4071. * @param dataType Type of animated property
  4072. * @param newValue New value of animated property
  4073. * @param coordinate The selected property coordinate to animate (i.e. x, y, z)
  4074. */
  4075. updateValuePerCoordinate(dataType: number, value: number | BABYLON.Vector2 | BABYLON.Vector3 | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Size | BABYLON.Quaternion, newValue: number, coordinate?: number): number | BABYLON.Vector3 | BABYLON.Quaternion | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Vector2 | BABYLON.Size;
  4076. /**
  4077. * BABYLON.Animation should always have a keyframe at Frame Zero
  4078. * @param keys BABYLON.Animation key collection
  4079. */
  4080. forceFrameZeroToExist(keys: BABYLON.IAnimationKey[]): void;
  4081. /**
  4082. * Renders SVG points with dragging of the curve
  4083. * @param updatedSvgKeyFrame selected keyframe to update
  4084. * @param id curve id where the keyframe is localted
  4085. */
  4086. renderPoints: (updatedSvgKeyFrame: IKeyframeSvgPoint, id: string) => void;
  4087. /**
  4088. * Updates the left control point on render points
  4089. * @param updatedSvgKeyFrame selected svg keyframe
  4090. * @param key animation key to update
  4091. * @param dataType type of animation
  4092. * @param coordinate coordinate to change its value (x, y, or z)
  4093. */
  4094. updateLeftControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: BABYLON.IAnimationKey, dataType: number, coordinate: number): void;
  4095. /**
  4096. * Updates the right control point on render points
  4097. * @param updatedSvgKeyFrame selected svg keyframe
  4098. * @param key animation key to update
  4099. * @param dataType type of animation
  4100. * @param coordinate coordinate to change its value (x, y, or z)
  4101. */
  4102. updateRightControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: BABYLON.IAnimationKey, dataType: number, coordinate: number): void;
  4103. /**
  4104. * Get the current BABYLON.GUI.Control Point weight (how far the X value is multiplied)
  4105. * @param updatedSvgKeyFrame svg keyframe from which to calculate the distance to control point
  4106. */
  4107. getControlPointWeight(updatedSvgKeyFrame: IKeyframeSvgPoint): number;
  4108. /**
  4109. * Handles a Frame selection change
  4110. * @event event input event to change frame value
  4111. */
  4112. handleFrameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  4113. /**
  4114. * Handles how a value change on a selected frame
  4115. * @event event input event to change the value of the keyframe
  4116. */
  4117. handleValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  4118. /**
  4119. * Set the Keyframe from input control in Graph BABYLON.GUI.Control Bar
  4120. * @param actionableKeyframe selected keyframe
  4121. */
  4122. setKeyframeValueFromInput: (actionableKeyframe: IActionableKeyFrame) => void;
  4123. /**
  4124. * Sets the SVG Keyframe value
  4125. * Finds the selected svg keyframe and passes the correct value to the correct animated keyframe.
  4126. */
  4127. setKeyframeValue: () => void;
  4128. /**
  4129. * Set the flat tangent to the current selected control points.
  4130. * get the selected control point and updates its tangent to flat the tangent
  4131. */
  4132. setFlatTangent: () => void;
  4133. /**
  4134. * Sets Broken mode of lines
  4135. * Broken mode enables control points not to be connected on drag
  4136. */
  4137. setBrokenMode: () => void;
  4138. /**
  4139. * Sets a control point to be a linear interpolation with its Keyframe
  4140. * If left or right control point is selected, sets the Tangent value to match the next keyframe and become linear
  4141. */
  4142. setLerpToActiveControlPoint: () => void;
  4143. /**
  4144. * Adds a new keyframe to the curve on canvas click
  4145. */
  4146. addKeyframeClick: () => void;
  4147. /**
  4148. * Remove keyframe on click
  4149. */
  4150. removeKeyframeClick: () => void;
  4151. /**
  4152. * Remove the selected keyframes
  4153. * @param points the selected keyframes to remove
  4154. */
  4155. removeKeyframes: (points: IKeyframeSvgPoint[]) => void;
  4156. /**
  4157. * Adds a keyframe
  4158. * @event event Mouse click event to generate new keyframe
  4159. */
  4160. addKeyFrame(event: React.MouseEvent<SVGSVGElement>): void;
  4161. /**
  4162. * Curve Rendering Functions
  4163. * This section handles how to render curves.
  4164. * @param point point in canvas
  4165. * @param index index of svg
  4166. */
  4167. setKeyframePointLinear(point: BABYLON.Vector2, index: number): void;
  4168. /**
  4169. * Flats the tangents of the selected keyframes
  4170. * @param keyframes Selected keyframes to flat its tangents
  4171. * @param dataType Type of animated property
  4172. */
  4173. flatTangents(keyframes: BABYLON.IAnimationKey[], dataType: number): BABYLON.IAnimationKey[];
  4174. /**
  4175. * Return a Keyframe zero value depending on Type
  4176. * @param dataType Type of animated property
  4177. */
  4178. returnZero(dataType: number): 0 | BABYLON.Vector3 | BABYLON.Quaternion | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Vector2 | BABYLON.Size;
  4179. /**
  4180. * Return the keyframe value as an array depending on type
  4181. * @param valueType type of animated property
  4182. * @param value the value of the property
  4183. */
  4184. getValueAsArray(valueType: number, value: number | BABYLON.Vector2 | BABYLON.Vector3 | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Size | BABYLON.Quaternion): number[];
  4185. /**
  4186. * Sets the keyframe value as an array depending on type
  4187. * @param valueType type of animated property
  4188. * @param arrayValue array to place the correct value
  4189. */
  4190. setValueAsType(valueType: number, arrayValue: number[]): number | BABYLON.Vector3 | BABYLON.Quaternion | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Vector2 | BABYLON.Size;
  4191. /**
  4192. * Returns the SVG Path Data to render the curve
  4193. * @param animation The animation object from where to get its keyframes
  4194. */
  4195. getPathData(animation: BABYLON.Animation | null): ICurveData[] | undefined;
  4196. /**
  4197. * Gets the selected animation properties
  4198. * @param animation BABYLON.Animation
  4199. */
  4200. getAnimationData(animation: BABYLON.Animation): {
  4201. loopMode: number | undefined;
  4202. name: string;
  4203. blendingSpeed: number;
  4204. targetPropertyPath: string[];
  4205. targetProperty: string;
  4206. framesPerSecond: number;
  4207. highestFrame: number;
  4208. usesTangents: boolean;
  4209. easingType: string | undefined;
  4210. easingMode: number | undefined;
  4211. valueType: number;
  4212. };
  4213. /**
  4214. * Calculate the correct tangents to be linear
  4215. * @param keyframes the animation keyframes
  4216. */
  4217. calculateLinearTangents(keyframes: BABYLON.IAnimationKey[]): BABYLON.IAnimationKey[];
  4218. /**
  4219. * Calculates the proper linear tangents if there is no tangents defined
  4220. * Before calculation of svg path we need to calculate the proper tangents
  4221. * @param keyframes the animation keyframes
  4222. * @param data initial svg path
  4223. * @param middle the middle of the canvas to draw the curve
  4224. * @param type type of animation
  4225. * @param coordinate (x, y, z) value
  4226. * @param animationName The animation name to generate the curve id
  4227. */
  4228. curvePathWithoutTangents(keyframes: BABYLON.IAnimationKey[], data: string, middle: number, type: number, coordinate: number, animationName: string): string;
  4229. /**
  4230. * Calculates the curve data and control points for animation
  4231. * @param keyframes the animation keyframes
  4232. * @param data initial svg path
  4233. * @param middle the middle of the canvas to draw the curve
  4234. * @param type type of animation
  4235. * @param coordinate (x, y, z) value
  4236. * @param animationName The animation name to generate the curve id
  4237. */
  4238. curvePathWithTangents(keyframes: BABYLON.IAnimationKey[], data: string, middle: number, type: number, coordinate: number, animationName: string): string;
  4239. /**
  4240. * Calculates a curve path from predefined easing function
  4241. * @param keyframes animation keyframes
  4242. * @param data the initial svg path
  4243. * @param middle the center of the canvas
  4244. * @param easingFunction the easing function to calculate the curve from (easing function should generate the correct curve)
  4245. */
  4246. curvePath(keyframes: BABYLON.IAnimationKey[], data: string, middle: number, easingFunction: BABYLON.EasingFunction): string;
  4247. /**
  4248. * Sets the proper SVG Keyframe points
  4249. * @param controlPoints array of points to generate the svg keyframe collection
  4250. * @param index index of the animation
  4251. * @param keyframesCount How many keyframes should we process
  4252. */
  4253. setKeyframePoint(controlPoints: BABYLON.Vector2[], index: number, keyframesCount: number): void;
  4254. /**
  4255. * Creates curve based on interpolated points
  4256. * @param p0 starting point of curve
  4257. * @param p1 first control point
  4258. * @param u distance between p0 and p3 as percentage to affect p1
  4259. * @param p2 second control point
  4260. * @param v distance between p0 and p3 as percentage to affect p2
  4261. * @param p3 finish point of curve
  4262. */
  4263. interpolateControlPoints(p0: BABYLON.Vector2, p1: BABYLON.Vector2, u: number, p2: BABYLON.Vector2, v: number, p3: BABYLON.Vector2): BABYLON.Vector2[] | undefined;
  4264. /**
  4265. * Deselects the current animations
  4266. */
  4267. deselectAnimation: () => void;
  4268. /**
  4269. * Remove all curves from canvas
  4270. */
  4271. cleanCanvas: () => void;
  4272. /**
  4273. * Selects the animation and renders the curve
  4274. * @param animation the animation to select and render as curve
  4275. * @param coordinate the property coordinate (x, y, z) to represent as curve
  4276. */
  4277. selectAnimation: (animation: BABYLON.Animation, coordinate?: SelectedCoordinate | undefined) => void;
  4278. /**
  4279. * Set the state for the last selected keyframe
  4280. */
  4281. postSelectionEvents: () => void;
  4282. /**
  4283. * Set main animatable to play or pause the animation
  4284. */
  4285. setMainAnimatable(): void;
  4286. /**
  4287. * Check if animation is playing
  4288. */
  4289. isAnimationPlaying(): boolean;
  4290. /**
  4291. * Stops the current playing animation
  4292. */
  4293. stopAnimation(): void;
  4294. /**
  4295. * Set if animation is looping and stops animation after it
  4296. */
  4297. setIsLooping: () => void;
  4298. setFramesPerSecond: (fps: number) => void;
  4299. /**
  4300. * Check if the animation has easing predefined
  4301. */
  4302. analyzeAnimationForLerp(animation: BABYLON.Animation | null): boolean;
  4303. /**
  4304. * Change the current frame in the canvas and timeline
  4305. * @param frame value to update on canvas and timeline
  4306. */
  4307. changeCurrentFrame: (frame: number) => void;
  4308. /**
  4309. * Calculate the value of the selected frame in curve
  4310. * @param frame the frame to calculate its current value on the curve
  4311. */
  4312. calculateCurrentPointInCurve: (frame: number) => number | undefined;
  4313. /**
  4314. * Center the position the canvas depending on Keyframe value and frame
  4315. * @param keyframe the keyframe to set as middle point
  4316. */
  4317. setCanvasPosition: (keyframe: BABYLON.IAnimationKey) => void;
  4318. /**
  4319. * Sets the current frame
  4320. * @param frame the value to set the frame
  4321. */
  4322. setCurrentFrame: (frame: number) => void;
  4323. /**
  4324. * Change the timeline animation frame limit
  4325. */
  4326. changeAnimationLimit: (limit: number) => void;
  4327. /**
  4328. * Update the frame in the selected Keyframe
  4329. */
  4330. updateFrameInKeyFrame: (frame: number, index: number) => void;
  4331. /**
  4332. * Plays or pauses the animation
  4333. * @param direction 0 stops the animation, 1 starts the animation, -1 plays animation backwards
  4334. */
  4335. playPause: (direction: number) => void;
  4336. /**
  4337. * Set the frame to selected position on canvas
  4338. * @event e click event on the SVG canvas
  4339. */
  4340. moveFrameTo(e: React.MouseEvent<SVGRectElement, MouseEvent>): void;
  4341. /**
  4342. * Register the observables for the state
  4343. */
  4344. registerObs(): void;
  4345. /**
  4346. * Checks if the current frame macthes the parameter
  4347. * @param frame The frame to check
  4348. */
  4349. isCurrentFrame(frame: number): boolean;
  4350. /**
  4351. * Set the Vertical Panning State
  4352. * @param panningY the vertical panning value
  4353. */
  4354. setPanningY: (panningY: number) => void;
  4355. /**
  4356. * Set the Vertical Panning State
  4357. * @param panningX the horizontal panning value
  4358. */
  4359. setPanningX: (panningX: number) => void;
  4360. /**
  4361. * Set state when canvas has been respositioned
  4362. */
  4363. canvasPositionEnded: () => void;
  4364. /**
  4365. *
  4366. * @param message The message to display in the notification bar
  4367. */
  4368. setNotificationMessage: (message: string) => void;
  4369. /**
  4370. * Zoom or frame the selected keyframes in the available canvas space
  4371. */
  4372. frameSelectedKeyframes: () => void;
  4373. /**
  4374. * Handle the frames quantity and scale on Window resize width
  4375. */
  4376. onWindowResizeWidth: () => void;
  4377. /**
  4378. * Set the state of frames Resized on window resize event
  4379. * @param framesResized how many frame have been added or removed on resize
  4380. */
  4381. onWindowEndResize: (framesResized: number) => void;
  4382. /** Resizes the width of the timeline */
  4383. onTimelineResize: () => void;
  4384. render(): JSX.Element;
  4385. }
  4386. }
  4387. declare module INSPECTOR {
  4388. interface IPlayheadProps {
  4389. frame: number;
  4390. offset: number;
  4391. onCurrentFrameChange: (frame: number) => void;
  4392. }
  4393. /**
  4394. * Renders the Playhead
  4395. */
  4396. export class Playhead extends React.Component<IPlayheadProps> {
  4397. private _direction;
  4398. private _active;
  4399. constructor(props: IPlayheadProps);
  4400. dragStart(e: React.TouchEvent<HTMLDivElement>): void;
  4401. dragStart(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
  4402. drag(e: React.TouchEvent<HTMLDivElement>): void;
  4403. drag(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
  4404. dragEnd(e: React.TouchEvent<HTMLDivElement>): void;
  4405. dragEnd(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
  4406. calculateMove(): string;
  4407. render(): JSX.Element;
  4408. }
  4409. }
  4410. declare module INSPECTOR {
  4411. export const Contrast: IToolData;
  4412. }
  4413. declare module INSPECTOR {
  4414. export interface IButtonLineComponentProps {
  4415. data: string;
  4416. tooltip: string;
  4417. }
  4418. export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
  4419. constructor(props: IButtonLineComponentProps);
  4420. render(): JSX.Element;
  4421. }
  4422. }
  4423. declare module INSPECTOR {
  4424. export class Popup {
  4425. static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
  4426. private static _CopyStyles;
  4427. }
  4428. }