babylon.inspector.d.ts 169 KB

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