babylon.inspector.d.ts 169 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423
  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. control: BABYLON.GUI.Control;
  1475. lockObject: LockObject;
  1476. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1477. }
  1478. export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
  1479. constructor(props: ICommonControlPropertyGridComponentProps);
  1480. renderGridInformation(): JSX.Element | null;
  1481. render(): JSX.Element;
  1482. }
  1483. }
  1484. declare module INSPECTOR {
  1485. interface IControlPropertyGridComponentProps {
  1486. globalState: GlobalState;
  1487. control: BABYLON.GUI.Control;
  1488. lockObject: LockObject;
  1489. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1490. }
  1491. export class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
  1492. constructor(props: IControlPropertyGridComponentProps);
  1493. render(): JSX.Element;
  1494. }
  1495. }
  1496. declare module INSPECTOR {
  1497. interface ITextBlockPropertyGridComponentProps {
  1498. globalState: GlobalState;
  1499. textBlock: BABYLON.GUI.TextBlock;
  1500. lockObject: LockObject;
  1501. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1502. }
  1503. export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {
  1504. constructor(props: ITextBlockPropertyGridComponentProps);
  1505. render(): JSX.Element;
  1506. }
  1507. }
  1508. declare module INSPECTOR {
  1509. interface IInputTextPropertyGridComponentProps {
  1510. globalState: GlobalState;
  1511. inputText: BABYLON.GUI.InputText;
  1512. lockObject: LockObject;
  1513. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1514. }
  1515. export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {
  1516. constructor(props: IInputTextPropertyGridComponentProps);
  1517. render(): JSX.Element;
  1518. }
  1519. }
  1520. declare module INSPECTOR {
  1521. interface IColorPickerPropertyGridComponentProps {
  1522. globalState: GlobalState;
  1523. colorPicker: BABYLON.GUI.ColorPicker;
  1524. lockObject: LockObject;
  1525. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1526. }
  1527. export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
  1528. constructor(props: IColorPickerPropertyGridComponentProps);
  1529. render(): JSX.Element;
  1530. }
  1531. }
  1532. declare module INSPECTOR {
  1533. interface IAnimationGroupGridComponentProps {
  1534. globalState: GlobalState;
  1535. animationGroup: BABYLON.AnimationGroup;
  1536. scene: BABYLON.Scene;
  1537. lockObject: LockObject;
  1538. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1539. }
  1540. export class AnimationGroupGridComponent extends React.Component<IAnimationGroupGridComponentProps, {
  1541. playButtonText: string;
  1542. currentFrame: number;
  1543. }> {
  1544. private _onAnimationGroupPlayObserver;
  1545. private _onAnimationGroupPauseObserver;
  1546. private _onBeforeRenderObserver;
  1547. private timelineRef;
  1548. constructor(props: IAnimationGroupGridComponentProps);
  1549. disconnect(animationGroup: BABYLON.AnimationGroup): void;
  1550. connect(animationGroup: BABYLON.AnimationGroup): void;
  1551. updateCurrentFrame(animationGroup: BABYLON.AnimationGroup): void;
  1552. shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
  1553. componentWillUnmount(): void;
  1554. playOrPause(): void;
  1555. onCurrentFrameChange(value: number): void;
  1556. render(): JSX.Element;
  1557. }
  1558. }
  1559. declare module INSPECTOR {
  1560. interface IImagePropertyGridComponentProps {
  1561. globalState: GlobalState;
  1562. image: BABYLON.GUI.Image;
  1563. lockObject: LockObject;
  1564. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1565. }
  1566. export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
  1567. constructor(props: IImagePropertyGridComponentProps);
  1568. render(): JSX.Element;
  1569. }
  1570. }
  1571. declare module INSPECTOR {
  1572. interface ISliderPropertyGridComponentProps {
  1573. slider: BABYLON.GUI.Slider;
  1574. lockObject: LockObject;
  1575. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1576. }
  1577. export class SliderPropertyGridComponent extends React.Component<ISliderPropertyGridComponentProps> {
  1578. constructor(props: ISliderPropertyGridComponentProps);
  1579. render(): JSX.Element;
  1580. }
  1581. }
  1582. declare module INSPECTOR {
  1583. interface IImageBasedSliderPropertyGridComponentProps {
  1584. globalState: GlobalState;
  1585. imageBasedSlider: BABYLON.GUI.ImageBasedSlider;
  1586. lockObject: LockObject;
  1587. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1588. }
  1589. export class ImageBasedSliderPropertyGridComponent extends React.Component<IImageBasedSliderPropertyGridComponentProps> {
  1590. constructor(props: IImageBasedSliderPropertyGridComponentProps);
  1591. render(): JSX.Element;
  1592. }
  1593. }
  1594. declare module INSPECTOR {
  1595. interface IRectanglePropertyGridComponentProps {
  1596. globalState: GlobalState;
  1597. rectangle: BABYLON.GUI.Rectangle;
  1598. lockObject: LockObject;
  1599. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1600. }
  1601. export class RectanglePropertyGridComponent extends React.Component<IRectanglePropertyGridComponentProps> {
  1602. constructor(props: IRectanglePropertyGridComponentProps);
  1603. render(): JSX.Element;
  1604. }
  1605. }
  1606. declare module INSPECTOR {
  1607. interface IEllipsePropertyGridComponentProps {
  1608. globalState: GlobalState;
  1609. ellipse: BABYLON.GUI.Ellipse;
  1610. lockObject: LockObject;
  1611. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1612. }
  1613. export class EllipsePropertyGridComponent extends React.Component<IEllipsePropertyGridComponentProps> {
  1614. constructor(props: IEllipsePropertyGridComponentProps);
  1615. render(): JSX.Element;
  1616. }
  1617. }
  1618. declare module INSPECTOR {
  1619. interface ICheckboxPropertyGridComponentProps {
  1620. globalState: GlobalState;
  1621. checkbox: BABYLON.GUI.Checkbox;
  1622. lockObject: LockObject;
  1623. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1624. }
  1625. export class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
  1626. constructor(props: ICheckboxPropertyGridComponentProps);
  1627. render(): JSX.Element;
  1628. }
  1629. }
  1630. declare module INSPECTOR {
  1631. interface IRadioButtonPropertyGridComponentProps {
  1632. globalState: GlobalState;
  1633. radioButton: BABYLON.GUI.RadioButton;
  1634. lockObject: LockObject;
  1635. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1636. }
  1637. export class RadioButtonPropertyGridComponent extends React.Component<IRadioButtonPropertyGridComponentProps> {
  1638. constructor(props: IRadioButtonPropertyGridComponentProps);
  1639. render(): JSX.Element;
  1640. }
  1641. }
  1642. declare module INSPECTOR {
  1643. interface ILinePropertyGridComponentProps {
  1644. globalState: GlobalState;
  1645. line: BABYLON.GUI.Line;
  1646. lockObject: LockObject;
  1647. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1648. }
  1649. export class LinePropertyGridComponent extends React.Component<ILinePropertyGridComponentProps> {
  1650. constructor(props: ILinePropertyGridComponentProps);
  1651. onDashChange(value: string): void;
  1652. render(): JSX.Element;
  1653. }
  1654. }
  1655. declare module INSPECTOR {
  1656. interface IScrollViewerPropertyGridComponentProps {
  1657. globalState: GlobalState;
  1658. scrollViewer: BABYLON.GUI.ScrollViewer;
  1659. lockObject: LockObject;
  1660. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1661. }
  1662. export class ScrollViewerPropertyGridComponent extends React.Component<IScrollViewerPropertyGridComponentProps> {
  1663. constructor(props: IScrollViewerPropertyGridComponentProps);
  1664. render(): JSX.Element;
  1665. }
  1666. }
  1667. declare module INSPECTOR {
  1668. interface IGridPropertyGridComponentProps {
  1669. globalState: GlobalState;
  1670. grid: BABYLON.GUI.Grid;
  1671. lockObject: LockObject;
  1672. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1673. }
  1674. export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps> {
  1675. constructor(props: IGridPropertyGridComponentProps);
  1676. renderRows(): JSX.Element[];
  1677. renderColumns(): JSX.Element[];
  1678. render(): JSX.Element;
  1679. }
  1680. }
  1681. declare module INSPECTOR {
  1682. interface IPBRMetallicRoughnessMaterialPropertyGridComponentProps {
  1683. globalState: GlobalState;
  1684. material: BABYLON.PBRMetallicRoughnessMaterial;
  1685. lockObject: LockObject;
  1686. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1687. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1688. }
  1689. export class PBRMetallicRoughnessMaterialPropertyGridComponent extends React.Component<IPBRMetallicRoughnessMaterialPropertyGridComponentProps> {
  1690. private _onDebugSelectionChangeObservable;
  1691. constructor(props: IPBRMetallicRoughnessMaterialPropertyGridComponentProps);
  1692. renderTextures(): JSX.Element;
  1693. render(): JSX.Element;
  1694. }
  1695. }
  1696. declare module INSPECTOR {
  1697. interface IPBRSpecularGlossinessMaterialPropertyGridComponentProps {
  1698. globalState: GlobalState;
  1699. material: BABYLON.PBRSpecularGlossinessMaterial;
  1700. lockObject: LockObject;
  1701. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1702. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1703. }
  1704. export class PBRSpecularGlossinessMaterialPropertyGridComponent extends React.Component<IPBRSpecularGlossinessMaterialPropertyGridComponentProps> {
  1705. private _onDebugSelectionChangeObservable;
  1706. constructor(props: IPBRSpecularGlossinessMaterialPropertyGridComponentProps);
  1707. renderTextures(): JSX.Element;
  1708. render(): JSX.Element;
  1709. }
  1710. }
  1711. declare module INSPECTOR {
  1712. interface IStackPanelPropertyGridComponentProps {
  1713. globalState: GlobalState;
  1714. stackPanel: BABYLON.GUI.StackPanel;
  1715. lockObject: LockObject;
  1716. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1717. }
  1718. export class StackPanelPropertyGridComponent extends React.Component<IStackPanelPropertyGridComponentProps> {
  1719. constructor(props: IStackPanelPropertyGridComponentProps);
  1720. render(): JSX.Element;
  1721. }
  1722. }
  1723. declare module INSPECTOR {
  1724. interface ICommonPostProcessPropertyGridComponentProps {
  1725. globalState: GlobalState;
  1726. postProcess: BABYLON.PostProcess;
  1727. lockObject: LockObject;
  1728. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1729. }
  1730. export class CommonPostProcessPropertyGridComponent extends React.Component<ICommonPostProcessPropertyGridComponentProps> {
  1731. constructor(props: ICommonPostProcessPropertyGridComponentProps);
  1732. render(): JSX.Element;
  1733. }
  1734. }
  1735. declare module INSPECTOR {
  1736. interface IPostProcessPropertyGridComponentProps {
  1737. globalState: GlobalState;
  1738. postProcess: BABYLON.PostProcess;
  1739. lockObject: LockObject;
  1740. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1741. }
  1742. export class PostProcessPropertyGridComponent extends React.Component<IPostProcessPropertyGridComponentProps> {
  1743. constructor(props: IPostProcessPropertyGridComponentProps);
  1744. edit(): void;
  1745. render(): JSX.Element;
  1746. }
  1747. }
  1748. declare module INSPECTOR {
  1749. interface ICommonRenderingPipelinePropertyGridComponentProps {
  1750. globalState: GlobalState;
  1751. renderPipeline: BABYLON.PostProcessRenderPipeline;
  1752. lockObject: LockObject;
  1753. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1754. }
  1755. export class CommonRenderingPipelinePropertyGridComponent extends React.Component<ICommonRenderingPipelinePropertyGridComponentProps> {
  1756. constructor(props: ICommonRenderingPipelinePropertyGridComponentProps);
  1757. render(): JSX.Element;
  1758. }
  1759. }
  1760. declare module INSPECTOR {
  1761. interface IRenderingPipelinePropertyGridComponentProps {
  1762. globalState: GlobalState;
  1763. renderPipeline: BABYLON.PostProcessRenderPipeline;
  1764. lockObject: LockObject;
  1765. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1766. }
  1767. export class RenderingPipelinePropertyGridComponent extends React.Component<IRenderingPipelinePropertyGridComponentProps> {
  1768. constructor(props: IRenderingPipelinePropertyGridComponentProps);
  1769. render(): JSX.Element;
  1770. }
  1771. }
  1772. declare module INSPECTOR {
  1773. interface IDefaultRenderingPipelinePropertyGridComponentProps {
  1774. globalState: GlobalState;
  1775. renderPipeline: BABYLON.DefaultRenderingPipeline;
  1776. lockObject: LockObject;
  1777. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1778. }
  1779. export class DefaultRenderingPipelinePropertyGridComponent extends React.Component<IDefaultRenderingPipelinePropertyGridComponentProps> {
  1780. constructor(props: IDefaultRenderingPipelinePropertyGridComponentProps);
  1781. render(): JSX.Element;
  1782. }
  1783. }
  1784. declare module INSPECTOR {
  1785. interface ISSAORenderingPipelinePropertyGridComponentProps {
  1786. globalState: GlobalState;
  1787. renderPipeline: BABYLON.SSAORenderingPipeline;
  1788. lockObject: LockObject;
  1789. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1790. }
  1791. export class SSAORenderingPipelinePropertyGridComponent extends React.Component<ISSAORenderingPipelinePropertyGridComponentProps> {
  1792. constructor(props: ISSAORenderingPipelinePropertyGridComponentProps);
  1793. render(): JSX.Element;
  1794. }
  1795. }
  1796. declare module INSPECTOR {
  1797. interface ISSAO2RenderingPipelinePropertyGridComponentProps {
  1798. globalState: GlobalState;
  1799. renderPipeline: BABYLON.SSAO2RenderingPipeline;
  1800. lockObject: LockObject;
  1801. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1802. }
  1803. export class SSAO2RenderingPipelinePropertyGridComponent extends React.Component<ISSAO2RenderingPipelinePropertyGridComponentProps> {
  1804. constructor(props: ISSAO2RenderingPipelinePropertyGridComponentProps);
  1805. render(): JSX.Element;
  1806. }
  1807. }
  1808. declare module INSPECTOR {
  1809. interface ISkeletonPropertyGridComponentProps {
  1810. globalState: GlobalState;
  1811. skeleton: BABYLON.Skeleton;
  1812. lockObject: LockObject;
  1813. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1814. }
  1815. export class SkeletonPropertyGridComponent extends React.Component<ISkeletonPropertyGridComponentProps> {
  1816. private _skeletonViewersEnabled;
  1817. private _skeletonViewerDisplayOptions;
  1818. private _skeletonViewers;
  1819. constructor(props: ISkeletonPropertyGridComponentProps);
  1820. switchSkeletonViewers(): void;
  1821. checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
  1822. changeDisplayMode(): void;
  1823. changeDisplayOptions(option: string, value: number): void;
  1824. shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
  1825. onOverrideMeshLink(): void;
  1826. render(): JSX.Element;
  1827. }
  1828. }
  1829. declare module INSPECTOR {
  1830. interface IBonePropertyGridComponentProps {
  1831. globalState: GlobalState;
  1832. bone: BABYLON.Bone;
  1833. lockObject: LockObject;
  1834. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1835. }
  1836. export class BonePropertyGridComponent extends React.Component<IBonePropertyGridComponentProps> {
  1837. constructor(props: IBonePropertyGridComponentProps);
  1838. onTransformNodeLink(): void;
  1839. render(): JSX.Element;
  1840. }
  1841. }
  1842. declare module INSPECTOR {
  1843. interface IDirectionalLightPropertyGridComponentProps {
  1844. globalState: GlobalState;
  1845. light: BABYLON.DirectionalLight;
  1846. lockObject: LockObject;
  1847. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1848. }
  1849. export class DirectionalLightPropertyGridComponent extends React.Component<IDirectionalLightPropertyGridComponentProps> {
  1850. constructor(props: IDirectionalLightPropertyGridComponentProps);
  1851. render(): JSX.Element;
  1852. }
  1853. }
  1854. declare module INSPECTOR {
  1855. interface ISpotLightPropertyGridComponentProps {
  1856. globalState: GlobalState;
  1857. light: BABYLON.SpotLight;
  1858. lockObject: LockObject;
  1859. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1860. }
  1861. export class SpotLightPropertyGridComponent extends React.Component<ISpotLightPropertyGridComponentProps> {
  1862. constructor(props: ISpotLightPropertyGridComponentProps);
  1863. render(): JSX.Element;
  1864. }
  1865. }
  1866. declare module INSPECTOR {
  1867. interface ILenstRenderingPipelinePropertyGridComponentProps {
  1868. globalState: GlobalState;
  1869. renderPipeline: BABYLON.LensRenderingPipeline;
  1870. lockObject: LockObject;
  1871. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1872. }
  1873. export class LensRenderingPipelinePropertyGridComponent extends React.Component<ILenstRenderingPipelinePropertyGridComponentProps> {
  1874. constructor(props: ILenstRenderingPipelinePropertyGridComponentProps);
  1875. render(): JSX.Element;
  1876. }
  1877. }
  1878. declare module INSPECTOR {
  1879. interface IVector4LineComponentProps {
  1880. label: string;
  1881. target: any;
  1882. propertyName: string;
  1883. step?: number;
  1884. onChange?: (newvalue: BABYLON.Vector4) => void;
  1885. useEuler?: boolean;
  1886. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1887. }
  1888. export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
  1889. isExpanded: boolean;
  1890. value: BABYLON.Vector4;
  1891. }> {
  1892. static defaultProps: {
  1893. step: number;
  1894. };
  1895. private _localChange;
  1896. constructor(props: IVector4LineComponentProps);
  1897. getCurrentValue(): any;
  1898. shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
  1899. isExpanded: boolean;
  1900. value: BABYLON.Vector4;
  1901. }): boolean;
  1902. switchExpandState(): void;
  1903. raiseOnPropertyChanged(previousValue: BABYLON.Vector4): void;
  1904. updateVector4(): void;
  1905. updateStateX(value: number): void;
  1906. updateStateY(value: number): void;
  1907. updateStateZ(value: number): void;
  1908. updateStateW(value: number): void;
  1909. render(): JSX.Element;
  1910. }
  1911. }
  1912. declare module INSPECTOR {
  1913. interface IGradientStepComponentProps {
  1914. globalState: GlobalState;
  1915. step: BABYLON.GradientBlockColorStep;
  1916. lineIndex: number;
  1917. onDelete: () => void;
  1918. onUpdateStep: () => void;
  1919. onCheckForReOrder: () => void;
  1920. onCopy?: () => void;
  1921. }
  1922. export class GradientStepComponent extends React.Component<IGradientStepComponentProps, {
  1923. gradient: number;
  1924. }> {
  1925. constructor(props: IGradientStepComponentProps);
  1926. updateColor(color: string): void;
  1927. updateStep(gradient: number): void;
  1928. onPointerUp(): void;
  1929. render(): JSX.Element;
  1930. }
  1931. }
  1932. declare module INSPECTOR {
  1933. export interface IPropertyComponentProps {
  1934. globalState: GlobalState;
  1935. block: BABYLON.NodeMaterialBlock;
  1936. }
  1937. }
  1938. declare module INSPECTOR {
  1939. export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
  1940. private _gradientBlock;
  1941. constructor(props: IPropertyComponentProps);
  1942. forceRebuild(): void;
  1943. deleteStep(step: BABYLON.GradientBlockColorStep): void;
  1944. copyStep(step: BABYLON.GradientBlockColorStep): void;
  1945. addNewStep(): void;
  1946. checkForReOrder(): void;
  1947. render(): JSX.Element;
  1948. }
  1949. }
  1950. declare module INSPECTOR {
  1951. export interface IColor4LineComponentProps {
  1952. label: string;
  1953. target: any;
  1954. propertyName: string;
  1955. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1956. onChange?: () => void;
  1957. isLinear?: boolean;
  1958. }
  1959. export class Color4LineComponent extends React.Component<IColor4LineComponentProps, {
  1960. isExpanded: boolean;
  1961. color: BABYLON.Color4;
  1962. }> {
  1963. private _localChange;
  1964. constructor(props: IColor4LineComponentProps);
  1965. shouldComponentUpdate(nextProps: IColor4LineComponentProps, nextState: {
  1966. color: BABYLON.Color4;
  1967. }): boolean;
  1968. setPropertyValue(newColor: BABYLON.Color4): void;
  1969. onChange(newValue: string): void;
  1970. switchExpandState(): void;
  1971. raiseOnPropertyChanged(previousValue: BABYLON.Color4): void;
  1972. updateStateR(value: number): void;
  1973. updateStateG(value: number): void;
  1974. updateStateB(value: number): void;
  1975. updateStateA(value: number): void;
  1976. copyToClipboard(): void;
  1977. render(): JSX.Element;
  1978. }
  1979. }
  1980. declare module INSPECTOR {
  1981. interface INodeMaterialPropertyGridComponentProps {
  1982. globalState: GlobalState;
  1983. material: BABYLON.NodeMaterial;
  1984. lockObject: LockObject;
  1985. onSelectionChangedObservable?: BABYLON.Observable<any>;
  1986. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  1987. }
  1988. export class NodeMaterialPropertyGridComponent extends React.Component<INodeMaterialPropertyGridComponentProps> {
  1989. private _onDebugSelectionChangeObservable;
  1990. constructor(props: INodeMaterialPropertyGridComponentProps);
  1991. edit(): void;
  1992. renderTextures(): JSX.Element | null;
  1993. renderInputBlock(block: BABYLON.InputBlock): JSX.Element | null;
  1994. renderInputValues(): JSX.Element;
  1995. render(): JSX.Element;
  1996. }
  1997. }
  1998. declare module INSPECTOR {
  1999. interface IMultiMaterialPropertyGridComponentProps {
  2000. globalState: GlobalState;
  2001. material: BABYLON.MultiMaterial;
  2002. lockObject: LockObject;
  2003. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2004. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2005. }
  2006. export class MultiMaterialPropertyGridComponent extends React.Component<IMultiMaterialPropertyGridComponentProps> {
  2007. constructor(props: IMultiMaterialPropertyGridComponentProps);
  2008. onMaterialLink(mat: BABYLON.Material): void;
  2009. renderChildMaterial(): JSX.Element;
  2010. render(): JSX.Element;
  2011. }
  2012. }
  2013. declare module INSPECTOR {
  2014. interface IBoxEmitterGridComponentProps {
  2015. globalState: GlobalState;
  2016. emitter: BABYLON.BoxParticleEmitter;
  2017. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2018. }
  2019. export class BoxEmitterGridComponent extends React.Component<IBoxEmitterGridComponentProps> {
  2020. constructor(props: IBoxEmitterGridComponentProps);
  2021. render(): JSX.Element;
  2022. }
  2023. }
  2024. declare module INSPECTOR {
  2025. interface IConeEmitterGridComponentProps {
  2026. globalState: GlobalState;
  2027. emitter: BABYLON.ConeParticleEmitter;
  2028. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2029. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2030. }
  2031. export class ConeEmitterGridComponent extends React.Component<IConeEmitterGridComponentProps> {
  2032. constructor(props: IConeEmitterGridComponentProps);
  2033. render(): JSX.Element;
  2034. }
  2035. }
  2036. declare module INSPECTOR {
  2037. interface ICylinderEmitterGridComponentProps {
  2038. globalState: GlobalState;
  2039. emitter: BABYLON.CylinderParticleEmitter;
  2040. lockObject: LockObject;
  2041. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2042. }
  2043. export class CylinderEmitterGridComponent extends React.Component<ICylinderEmitterGridComponentProps> {
  2044. constructor(props: ICylinderEmitterGridComponentProps);
  2045. render(): JSX.Element;
  2046. }
  2047. }
  2048. declare module INSPECTOR {
  2049. interface IHemisphericEmitterGridComponentProps {
  2050. globalState: GlobalState;
  2051. emitter: BABYLON.HemisphericParticleEmitter;
  2052. lockObject: LockObject;
  2053. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2054. }
  2055. export class HemisphericEmitterGridComponent extends React.Component<IHemisphericEmitterGridComponentProps> {
  2056. constructor(props: IHemisphericEmitterGridComponentProps);
  2057. render(): JSX.Element;
  2058. }
  2059. }
  2060. declare module INSPECTOR {
  2061. interface IPointEmitterGridComponentProps {
  2062. globalState: GlobalState;
  2063. emitter: BABYLON.PointParticleEmitter;
  2064. lockObject: LockObject;
  2065. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2066. }
  2067. export class PointEmitterGridComponent extends React.Component<IPointEmitterGridComponentProps> {
  2068. constructor(props: IPointEmitterGridComponentProps);
  2069. render(): JSX.Element;
  2070. }
  2071. }
  2072. declare module INSPECTOR {
  2073. interface ISphereEmitterGridComponentProps {
  2074. globalState: GlobalState;
  2075. emitter: BABYLON.SphereParticleEmitter;
  2076. lockObject: LockObject;
  2077. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2078. }
  2079. export class SphereEmitterGridComponent extends React.Component<ISphereEmitterGridComponentProps> {
  2080. constructor(props: ISphereEmitterGridComponentProps);
  2081. render(): JSX.Element;
  2082. }
  2083. }
  2084. declare module INSPECTOR {
  2085. interface IMeshPickerComponentProps {
  2086. globalState: GlobalState;
  2087. target: any;
  2088. property: string;
  2089. scene: BABYLON.Scene;
  2090. label: string;
  2091. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2092. }
  2093. export class MeshPickerComponent extends React.Component<IMeshPickerComponentProps> {
  2094. constructor(props: IMeshPickerComponentProps);
  2095. render(): JSX.Element;
  2096. }
  2097. }
  2098. declare module INSPECTOR {
  2099. interface IMeshEmitterGridComponentProps {
  2100. globalState: GlobalState;
  2101. emitter: BABYLON.MeshParticleEmitter;
  2102. scene: BABYLON.Scene;
  2103. lockObject: LockObject;
  2104. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2105. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2106. }
  2107. export class MeshEmitterGridComponent extends React.Component<IMeshEmitterGridComponentProps> {
  2108. constructor(props: IMeshEmitterGridComponentProps);
  2109. render(): JSX.Element;
  2110. }
  2111. }
  2112. declare module INSPECTOR {
  2113. interface IFactorGradientStepGridComponent {
  2114. globalState: GlobalState;
  2115. gradient: BABYLON.FactorGradient;
  2116. lockObject: LockObject;
  2117. lineIndex: number;
  2118. onDelete: () => void;
  2119. onUpdateGradient: () => void;
  2120. onCheckForReOrder: () => void;
  2121. host: BABYLON.IParticleSystem;
  2122. codeRecorderPropertyName: string;
  2123. }
  2124. export class FactorGradientStepGridComponent extends React.Component<IFactorGradientStepGridComponent, {
  2125. gradient: number;
  2126. factor1: string;
  2127. factor2?: string;
  2128. }> {
  2129. constructor(props: IFactorGradientStepGridComponent);
  2130. shouldComponentUpdate(nextProps: IFactorGradientStepGridComponent, nextState: {
  2131. gradient: number;
  2132. factor1: string;
  2133. factor2?: string;
  2134. }): boolean;
  2135. updateFactor1(valueString: string): void;
  2136. updateFactor2(valueString: string): void;
  2137. updateGradient(gradient: number): void;
  2138. onPointerUp(): void;
  2139. lock(): void;
  2140. unlock(): void;
  2141. render(): JSX.Element;
  2142. }
  2143. }
  2144. declare module INSPECTOR {
  2145. interface IColorGradientStepGridComponent {
  2146. globalState: GlobalState;
  2147. gradient: BABYLON.ColorGradient | BABYLON.Color3Gradient;
  2148. lockObject: LockObject;
  2149. lineIndex: number;
  2150. isColor3: boolean;
  2151. onDelete: () => void;
  2152. onUpdateGradient: () => void;
  2153. onCheckForReOrder: () => void;
  2154. host: BABYLON.IParticleSystem;
  2155. codeRecorderPropertyName: string;
  2156. }
  2157. export class ColorGradientStepGridComponent extends React.Component<IColorGradientStepGridComponent, {
  2158. gradient: number;
  2159. }> {
  2160. constructor(props: IColorGradientStepGridComponent);
  2161. updateColor1(color: string): void;
  2162. updateColor2(color: string): void;
  2163. updateGradient(gradient: number): void;
  2164. onPointerUp(): void;
  2165. lock(): void;
  2166. unlock(): void;
  2167. render(): JSX.Element;
  2168. }
  2169. }
  2170. declare module INSPECTOR {
  2171. interface ILinkButtonComponentProps {
  2172. label: string;
  2173. buttonLabel: string;
  2174. url?: string;
  2175. onClick: () => void;
  2176. onIconClick?: () => void;
  2177. }
  2178. export class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
  2179. constructor(props: ILinkButtonComponentProps);
  2180. onLink(): void;
  2181. render(): JSX.Element;
  2182. }
  2183. }
  2184. declare module INSPECTOR {
  2185. export enum GradientGridMode {
  2186. Factor = 0,
  2187. BABYLON.Color3 = 1,
  2188. BABYLON.Color4 = 2
  2189. }
  2190. interface IValueGradientGridComponent {
  2191. globalState: GlobalState;
  2192. label: string;
  2193. gradients: BABYLON.Nullable<Array<BABYLON.IValueGradient>>;
  2194. lockObject: LockObject;
  2195. docLink?: string;
  2196. mode: GradientGridMode;
  2197. host: BABYLON.IParticleSystem;
  2198. codeRecorderPropertyName: string;
  2199. onCreateRequired: () => void;
  2200. }
  2201. export class ValueGradientGridComponent extends React.Component<IValueGradientGridComponent> {
  2202. constructor(props: IValueGradientGridComponent);
  2203. deleteStep(step: BABYLON.IValueGradient): void;
  2204. addNewStep(): void;
  2205. checkForReOrder(): void;
  2206. updateAndSync(): void;
  2207. render(): JSX.Element;
  2208. }
  2209. }
  2210. declare module INSPECTOR {
  2211. interface IParticleSystemPropertyGridComponentProps {
  2212. globalState: GlobalState;
  2213. system: BABYLON.IParticleSystem;
  2214. lockObject: LockObject;
  2215. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2216. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2217. }
  2218. export class ParticleSystemPropertyGridComponent extends React.Component<IParticleSystemPropertyGridComponentProps> {
  2219. private _snippetUrl;
  2220. constructor(props: IParticleSystemPropertyGridComponentProps);
  2221. renderEmitter(): JSX.Element | null;
  2222. raiseOnPropertyChanged(property: string, newValue: any, previousValue: any): void;
  2223. renderControls(): JSX.Element;
  2224. saveToFile(): void;
  2225. loadFromFile(file: File): void;
  2226. loadFromSnippet(): void;
  2227. saveToSnippet(): void;
  2228. render(): JSX.Element;
  2229. }
  2230. }
  2231. declare module INSPECTOR {
  2232. interface ISpriteManagerPropertyGridComponentProps {
  2233. globalState: GlobalState;
  2234. spriteManager: BABYLON.SpriteManager;
  2235. lockObject: LockObject;
  2236. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2237. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2238. }
  2239. export class SpriteManagerPropertyGridComponent extends React.Component<ISpriteManagerPropertyGridComponentProps> {
  2240. private _snippetUrl;
  2241. constructor(props: ISpriteManagerPropertyGridComponentProps);
  2242. addNewSprite(): void;
  2243. disposeManager(): void;
  2244. saveToFile(): void;
  2245. loadFromFile(file: File): void;
  2246. loadFromSnippet(): void;
  2247. saveToSnippet(): void;
  2248. render(): JSX.Element;
  2249. }
  2250. }
  2251. declare module INSPECTOR {
  2252. interface ISpritePropertyGridComponentProps {
  2253. globalState: GlobalState;
  2254. sprite: BABYLON.Sprite;
  2255. lockObject: LockObject;
  2256. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2257. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2258. }
  2259. export class SpritePropertyGridComponent extends React.Component<ISpritePropertyGridComponentProps> {
  2260. private canvasRef;
  2261. private imageData;
  2262. private cachedCellIndex;
  2263. constructor(props: ISpritePropertyGridComponentProps);
  2264. onManagerLink(): void;
  2265. switchPlayStopState(): void;
  2266. disposeSprite(): void;
  2267. componentDidMount(): void;
  2268. componentDidUpdate(): void;
  2269. shouldComponentUpdate(nextProps: ISpritePropertyGridComponentProps): boolean;
  2270. updatePreview(): void;
  2271. render(): JSX.Element;
  2272. }
  2273. }
  2274. declare module INSPECTOR {
  2275. interface ITargetedAnimationGridComponentProps {
  2276. globalState: GlobalState;
  2277. targetedAnimation: BABYLON.TargetedAnimation;
  2278. scene: BABYLON.Scene;
  2279. lockObject: LockObject;
  2280. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2281. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2282. }
  2283. export class TargetedAnimationGridComponent extends React.Component<ITargetedAnimationGridComponentProps> {
  2284. private _animationGroup;
  2285. constructor(props: ITargetedAnimationGridComponentProps);
  2286. playOrPause: () => void;
  2287. deleteAnimation: () => void;
  2288. render(): JSX.Element;
  2289. }
  2290. }
  2291. declare module INSPECTOR {
  2292. interface IFollowCameraPropertyGridComponentProps {
  2293. globalState: GlobalState;
  2294. camera: BABYLON.FollowCamera;
  2295. lockObject: LockObject;
  2296. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2297. }
  2298. export class FollowCameraPropertyGridComponent extends React.Component<IFollowCameraPropertyGridComponentProps> {
  2299. constructor(props: IFollowCameraPropertyGridComponentProps);
  2300. render(): JSX.Element;
  2301. }
  2302. }
  2303. declare module INSPECTOR {
  2304. interface ISoundPropertyGridComponentProps {
  2305. globalState: GlobalState;
  2306. sound: BABYLON.Sound;
  2307. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2308. lockObject: LockObject;
  2309. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2310. }
  2311. export class SoundPropertyGridComponent extends React.Component<ISoundPropertyGridComponentProps> {
  2312. constructor(props: ISoundPropertyGridComponentProps);
  2313. render(): JSX.Element;
  2314. }
  2315. }
  2316. declare module INSPECTOR {
  2317. export class PropertyGridTabComponent extends PaneComponent {
  2318. private _timerIntervalId;
  2319. private _lockObject;
  2320. constructor(props: IPaneComponentProps);
  2321. timerRefresh(): void;
  2322. componentDidMount(): void;
  2323. componentWillUnmount(): void;
  2324. render(): JSX.Element | null;
  2325. }
  2326. }
  2327. declare module INSPECTOR {
  2328. export interface IHeaderComponentProps {
  2329. title: string;
  2330. handleBack?: boolean;
  2331. noExpand?: boolean;
  2332. noClose?: boolean;
  2333. noCommands?: boolean;
  2334. onPopup: () => void;
  2335. onClose: () => void;
  2336. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2337. }
  2338. export class HeaderComponent extends React.Component<IHeaderComponentProps, {
  2339. isBackVisible: boolean;
  2340. }> {
  2341. private _backStack;
  2342. private _onSelectionChangeObserver;
  2343. constructor(props: IHeaderComponentProps);
  2344. componentDidMount(): void;
  2345. componentWillUnmount(): void;
  2346. goBack(): void;
  2347. renderLogo(): JSX.Element | null;
  2348. render(): JSX.Element;
  2349. }
  2350. }
  2351. declare module INSPECTOR {
  2352. interface IMessageLineComponentProps {
  2353. text: string;
  2354. color?: string;
  2355. }
  2356. export class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
  2357. constructor(props: IMessageLineComponentProps);
  2358. render(): JSX.Element;
  2359. }
  2360. }
  2361. declare module INSPECTOR {
  2362. interface IGLTFComponentProps {
  2363. scene: BABYLON.Scene;
  2364. globalState: GlobalState;
  2365. }
  2366. export class GLTFComponent extends React.Component<IGLTFComponentProps> {
  2367. private _onValidationResultsUpdatedObserver;
  2368. openValidationDetails(): void;
  2369. prepareText(singularForm: string, count: number): string;
  2370. componentDidMount(): void;
  2371. componentWillUnmount(): void;
  2372. renderValidation(): JSX.Element | null;
  2373. render(): JSX.Element;
  2374. }
  2375. }
  2376. declare module INSPECTOR {
  2377. interface IFileMultipleButtonLineComponentProps {
  2378. label: string;
  2379. onClick: (event: any) => void;
  2380. accept: string;
  2381. }
  2382. export class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
  2383. private static _IDGenerator;
  2384. private _id;
  2385. private uploadInputRef;
  2386. constructor(props: IFileMultipleButtonLineComponentProps);
  2387. onChange(evt: any): void;
  2388. render(): JSX.Element;
  2389. }
  2390. }
  2391. declare module INSPECTOR {
  2392. export class ToolsTabComponent extends PaneComponent {
  2393. private _videoRecorder;
  2394. private _screenShotSize;
  2395. private _gifOptions;
  2396. private _useWidthHeight;
  2397. private _isExporting;
  2398. private _gifWorkerBlob;
  2399. private _gifRecorder;
  2400. private _previousRenderingScale;
  2401. private _crunchingGIF;
  2402. constructor(props: IPaneComponentProps);
  2403. componentDidMount(): void;
  2404. componentWillUnmount(): void;
  2405. captureScreenshot(): void;
  2406. captureRender(): void;
  2407. recordVideo(): void;
  2408. recordGIFInternal(): void;
  2409. recordGIF(): void;
  2410. importAnimations(event: any): void;
  2411. shouldExport(node: BABYLON.Node): boolean;
  2412. exportGLTF(): void;
  2413. exportBabylon(): void;
  2414. createEnvTexture(): void;
  2415. exportReplay(): void;
  2416. startRecording(): void;
  2417. applyDelta(file: File): void;
  2418. render(): JSX.Element | null;
  2419. }
  2420. }
  2421. declare module INSPECTOR {
  2422. export class SettingsTabComponent extends PaneComponent {
  2423. constructor(props: IPaneComponentProps);
  2424. render(): JSX.Element;
  2425. }
  2426. }
  2427. declare module INSPECTOR {
  2428. interface IActionTabsComponentProps {
  2429. scene?: BABYLON.Scene;
  2430. noCommands?: boolean;
  2431. noHeader?: boolean;
  2432. noExpand?: boolean;
  2433. noClose?: boolean;
  2434. popupMode?: boolean;
  2435. onPopup?: () => void;
  2436. onClose?: () => void;
  2437. globalState?: GlobalState;
  2438. initialTab?: BABYLON.DebugLayerTab;
  2439. }
  2440. export class ActionTabsComponent extends React.Component<IActionTabsComponentProps, {
  2441. selectedEntity: any;
  2442. selectedIndex: number;
  2443. }> {
  2444. private _onSelectionChangeObserver;
  2445. private _onTabChangedObserver;
  2446. private _once;
  2447. constructor(props: IActionTabsComponentProps);
  2448. componentDidMount(): void;
  2449. componentWillUnmount(): void;
  2450. changeSelectedTab(index: number): void;
  2451. renderContent(): JSX.Element | null;
  2452. onClose(): void;
  2453. onPopup(): void;
  2454. render(): JSX.Element;
  2455. }
  2456. }
  2457. declare module INSPECTOR {
  2458. interface ITreeItemLabelComponentProps {
  2459. label: string;
  2460. onClick?: () => void;
  2461. color: string;
  2462. }
  2463. export class TreeItemLabelComponent extends React.Component<ITreeItemLabelComponentProps> {
  2464. constructor(props: ITreeItemLabelComponentProps);
  2465. onClick(): void;
  2466. render(): JSX.Element;
  2467. }
  2468. }
  2469. declare module INSPECTOR {
  2470. interface IExtensionsComponentProps {
  2471. target: any;
  2472. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2473. }
  2474. export class ExtensionsComponent extends React.Component<IExtensionsComponentProps, {
  2475. popupVisible: boolean;
  2476. }> {
  2477. private _popup;
  2478. private extensionRef;
  2479. constructor(props: IExtensionsComponentProps);
  2480. showPopup(): void;
  2481. componentDidMount(): void;
  2482. componentDidUpdate(): void;
  2483. render(): JSX.Element | null;
  2484. }
  2485. }
  2486. declare module INSPECTOR {
  2487. interface IMeshTreeItemComponentProps {
  2488. mesh: BABYLON.AbstractMesh;
  2489. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2490. onClick: () => void;
  2491. globalState: GlobalState;
  2492. }
  2493. export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponentProps, {
  2494. isBoundingBoxEnabled: boolean;
  2495. isVisible: boolean;
  2496. }> {
  2497. constructor(props: IMeshTreeItemComponentProps);
  2498. showBoundingBox(): void;
  2499. switchVisibility(): void;
  2500. render(): JSX.Element;
  2501. }
  2502. }
  2503. declare module INSPECTOR {
  2504. interface ICameraTreeItemComponentProps {
  2505. camera: BABYLON.Camera;
  2506. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2507. onClick: () => void;
  2508. globalState: GlobalState;
  2509. }
  2510. export class CameraTreeItemComponent extends React.Component<ICameraTreeItemComponentProps, {
  2511. isActive: boolean;
  2512. isGizmoEnabled: boolean;
  2513. }> {
  2514. private _onBeforeRenderObserver;
  2515. constructor(props: ICameraTreeItemComponentProps);
  2516. setActive(): void;
  2517. componentDidMount(): void;
  2518. componentWillUnmount(): void;
  2519. toggleGizmo(): void;
  2520. render(): JSX.Element;
  2521. }
  2522. }
  2523. declare module INSPECTOR {
  2524. interface ILightTreeItemComponentProps {
  2525. light: BABYLON.Light;
  2526. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2527. onClick: () => void;
  2528. globalState: GlobalState;
  2529. }
  2530. export class LightTreeItemComponent extends React.Component<ILightTreeItemComponentProps, {
  2531. isEnabled: boolean;
  2532. isGizmoEnabled: boolean;
  2533. }> {
  2534. constructor(props: ILightTreeItemComponentProps);
  2535. switchIsEnabled(): void;
  2536. toggleGizmo(): void;
  2537. render(): JSX.Element;
  2538. }
  2539. }
  2540. declare module INSPECTOR {
  2541. interface IMaterialTreeItemComponentProps {
  2542. material: BABYLON.Material | BABYLON.NodeMaterial;
  2543. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2544. onClick: () => void;
  2545. }
  2546. export class MaterialTreeItemComponent extends React.Component<IMaterialTreeItemComponentProps> {
  2547. constructor(props: IMaterialTreeItemComponentProps);
  2548. render(): JSX.Element;
  2549. }
  2550. }
  2551. declare module INSPECTOR {
  2552. interface ITextureTreeItemComponentProps {
  2553. texture: BABYLON.Texture;
  2554. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2555. onClick: () => void;
  2556. }
  2557. export class TextureTreeItemComponent extends React.Component<ITextureTreeItemComponentProps> {
  2558. constructor(props: ITextureTreeItemComponentProps);
  2559. render(): JSX.Element;
  2560. }
  2561. }
  2562. declare module INSPECTOR {
  2563. interface ITransformNodeItemComponentProps {
  2564. transformNode: BABYLON.TransformNode;
  2565. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2566. onClick: () => void;
  2567. }
  2568. export class TransformNodeItemComponent extends React.Component<ITransformNodeItemComponentProps> {
  2569. constructor(props: ITransformNodeItemComponentProps);
  2570. render(): JSX.Element;
  2571. }
  2572. }
  2573. declare module INSPECTOR {
  2574. interface IControlTreeItemComponentProps {
  2575. control: BABYLON.GUI.Control;
  2576. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2577. onClick: () => void;
  2578. }
  2579. export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, {
  2580. isActive: boolean;
  2581. isVisible: boolean;
  2582. }> {
  2583. constructor(props: IControlTreeItemComponentProps);
  2584. highlight(): void;
  2585. switchVisibility(): void;
  2586. render(): JSX.Element;
  2587. }
  2588. }
  2589. declare module INSPECTOR {
  2590. interface IAdvancedDynamicTextureTreeItemComponentProps {
  2591. texture: BABYLON.GUI.AdvancedDynamicTexture;
  2592. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2593. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2594. onClick: () => void;
  2595. }
  2596. export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAdvancedDynamicTextureTreeItemComponentProps, {
  2597. isInPickingMode: boolean;
  2598. }> {
  2599. private _onControlPickedObserver;
  2600. constructor(props: IAdvancedDynamicTextureTreeItemComponentProps);
  2601. componentWillUnmount(): void;
  2602. onPickingMode(): void;
  2603. render(): JSX.Element;
  2604. }
  2605. }
  2606. declare module INSPECTOR {
  2607. interface IAnimationGroupItemComponentProps {
  2608. animationGroup: BABYLON.AnimationGroup;
  2609. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2610. onClick: () => void;
  2611. }
  2612. export class AnimationGroupItemComponent extends React.Component<IAnimationGroupItemComponentProps> {
  2613. constructor(props: IAnimationGroupItemComponentProps);
  2614. render(): JSX.Element;
  2615. }
  2616. }
  2617. declare module INSPECTOR {
  2618. interface IPostProcessItemComponentProps {
  2619. postProcess: BABYLON.PostProcess;
  2620. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2621. onClick: () => void;
  2622. }
  2623. export class PostProcessItemComponent extends React.Component<IPostProcessItemComponentProps> {
  2624. constructor(props: IPostProcessItemComponentProps);
  2625. render(): JSX.Element;
  2626. }
  2627. }
  2628. declare module INSPECTOR {
  2629. interface IRenderPipelineItemComponenttProps {
  2630. renderPipeline: BABYLON.PostProcessRenderPipeline;
  2631. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2632. onClick: () => void;
  2633. }
  2634. export class RenderingPipelineItemComponent extends React.Component<IRenderPipelineItemComponenttProps> {
  2635. constructor(props: IRenderPipelineItemComponenttProps);
  2636. render(): JSX.Element;
  2637. }
  2638. }
  2639. declare module INSPECTOR {
  2640. interface ISkeletonTreeItemComponentProps {
  2641. skeleton: BABYLON.Skeleton;
  2642. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2643. onClick: () => void;
  2644. }
  2645. export class SkeletonTreeItemComponent extends React.Component<ISkeletonTreeItemComponentProps> {
  2646. constructor(props: ISkeletonTreeItemComponentProps);
  2647. render(): JSX.Element;
  2648. }
  2649. }
  2650. declare module INSPECTOR {
  2651. interface IBoneTreeItemComponenttProps {
  2652. bone: BABYLON.Bone;
  2653. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2654. onClick: () => void;
  2655. }
  2656. export class BoneTreeItemComponent extends React.Component<IBoneTreeItemComponenttProps> {
  2657. constructor(props: IBoneTreeItemComponenttProps);
  2658. render(): JSX.Element;
  2659. }
  2660. }
  2661. declare module INSPECTOR {
  2662. interface IParticleSystemTreeItemComponentProps {
  2663. system: BABYLON.IParticleSystem;
  2664. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2665. onClick: () => void;
  2666. }
  2667. export class ParticleSystemTreeItemComponent extends React.Component<IParticleSystemTreeItemComponentProps> {
  2668. constructor(props: IParticleSystemTreeItemComponentProps);
  2669. render(): JSX.Element;
  2670. }
  2671. }
  2672. declare module INSPECTOR {
  2673. interface ISpriteManagerTreeItemComponentProps {
  2674. spriteManager: BABYLON.SpriteManager;
  2675. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2676. onClick: () => void;
  2677. }
  2678. export class SpriteManagerTreeItemComponent extends React.Component<ISpriteManagerTreeItemComponentProps> {
  2679. constructor(props: ISpriteManagerTreeItemComponentProps);
  2680. render(): JSX.Element;
  2681. }
  2682. }
  2683. declare module INSPECTOR {
  2684. interface ISpriteTreeItemComponentProps {
  2685. sprite: BABYLON.Sprite;
  2686. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2687. onClick: () => void;
  2688. }
  2689. export class SpriteTreeItemComponent extends React.Component<ISpriteTreeItemComponentProps> {
  2690. constructor(props: ISpriteTreeItemComponentProps);
  2691. render(): JSX.Element;
  2692. }
  2693. }
  2694. declare module INSPECTOR {
  2695. interface ITargetedAnimationItemComponentProps {
  2696. targetedAnimation: BABYLON.TargetedAnimation;
  2697. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2698. onClick: () => void;
  2699. }
  2700. export class TargetedAnimationItemComponent extends React.Component<ITargetedAnimationItemComponentProps> {
  2701. constructor(props: ITargetedAnimationItemComponentProps);
  2702. render(): JSX.Element;
  2703. }
  2704. }
  2705. declare module INSPECTOR {
  2706. interface ISoundTreeItemComponentProps {
  2707. sound: BABYLON.Sound;
  2708. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2709. onClick: () => void;
  2710. }
  2711. export class SoundTreeItemComponent extends React.Component<ISoundTreeItemComponentProps> {
  2712. constructor(props: ISoundTreeItemComponentProps);
  2713. render(): JSX.Element;
  2714. }
  2715. }
  2716. declare module INSPECTOR {
  2717. interface ITreeItemSpecializedComponentProps {
  2718. label: string;
  2719. entity?: any;
  2720. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2721. globalState: GlobalState;
  2722. onClick?: () => void;
  2723. }
  2724. export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpecializedComponentProps> {
  2725. constructor(props: ITreeItemSpecializedComponentProps);
  2726. onClick(): void;
  2727. render(): JSX.Element;
  2728. }
  2729. }
  2730. declare module INSPECTOR {
  2731. export class Tools {
  2732. static LookForItem(item: any, selectedEntity: any): boolean;
  2733. private static _RecursiveRemoveHiddenMeshesAndHoistChildren;
  2734. static SortAndFilter(parent: any, items: any[]): any[];
  2735. }
  2736. }
  2737. declare module INSPECTOR {
  2738. export interface ITreeItemSelectableComponentProps {
  2739. entity: any;
  2740. selectedEntity?: any;
  2741. mustExpand?: boolean;
  2742. offset: number;
  2743. globalState: GlobalState;
  2744. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2745. filter: BABYLON.Nullable<string>;
  2746. }
  2747. export class TreeItemSelectableComponent extends React.Component<ITreeItemSelectableComponentProps, {
  2748. isExpanded: boolean;
  2749. isSelected: boolean;
  2750. }> {
  2751. private _wasSelected;
  2752. constructor(props: ITreeItemSelectableComponentProps);
  2753. switchExpandedState(): void;
  2754. shouldComponentUpdate(nextProps: ITreeItemSelectableComponentProps, nextState: {
  2755. isExpanded: boolean;
  2756. isSelected: boolean;
  2757. }): boolean;
  2758. scrollIntoView(): void;
  2759. componentDidMount(): void;
  2760. componentDidUpdate(): void;
  2761. onSelect(): void;
  2762. renderChildren(): JSX.Element[] | null;
  2763. render(): JSX.Element | null;
  2764. }
  2765. }
  2766. declare module INSPECTOR {
  2767. export interface ITreeItemComponentProps {
  2768. items?: BABYLON.Nullable<any[]>;
  2769. label: string;
  2770. offset: number;
  2771. filter: BABYLON.Nullable<string>;
  2772. forceSubitems?: boolean;
  2773. globalState: GlobalState;
  2774. entity?: any;
  2775. selectedEntity: any;
  2776. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2777. contextMenuItems?: {
  2778. label: string;
  2779. action: () => void;
  2780. }[];
  2781. }
  2782. export class TreeItemComponent extends React.Component<ITreeItemComponentProps, {
  2783. isExpanded: boolean;
  2784. mustExpand: boolean;
  2785. }> {
  2786. static _ContextMenuUniqueIdGenerator: number;
  2787. constructor(props: ITreeItemComponentProps);
  2788. switchExpandedState(): void;
  2789. shouldComponentUpdate(nextProps: ITreeItemComponentProps, nextState: {
  2790. isExpanded: boolean;
  2791. }): boolean;
  2792. expandAll(expand: boolean): void;
  2793. renderContextMenu(): JSX.Element | null;
  2794. render(): JSX.Element;
  2795. }
  2796. }
  2797. declare module INSPECTOR {
  2798. interface ISceneTreeItemComponentProps {
  2799. scene: BABYLON.Scene;
  2800. onRefresh: () => void;
  2801. selectedEntity?: any;
  2802. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2803. onSelectionChangedObservable?: BABYLON.Observable<any>;
  2804. globalState: GlobalState;
  2805. }
  2806. export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, {
  2807. isSelected: boolean;
  2808. isInPickingMode: boolean;
  2809. gizmoMode: number;
  2810. }> {
  2811. private _gizmoLayerOnPointerObserver;
  2812. private _onPointerObserver;
  2813. private _onSelectionChangeObserver;
  2814. private _selectedEntity;
  2815. private _posDragEnd;
  2816. private _scaleDragEnd;
  2817. private _rotateDragEnd;
  2818. constructor(props: ISceneTreeItemComponentProps);
  2819. shouldComponentUpdate(nextProps: ISceneTreeItemComponentProps, nextState: {
  2820. isSelected: boolean;
  2821. isInPickingMode: boolean;
  2822. }): boolean;
  2823. componentDidMount(): void;
  2824. componentWillUnmount(): void;
  2825. onSelect(): void;
  2826. onPickingMode(): void;
  2827. setGizmoMode(mode: number): void;
  2828. render(): JSX.Element;
  2829. }
  2830. }
  2831. declare module INSPECTOR {
  2832. interface ISceneExplorerFilterComponentProps {
  2833. onFilter: (filter: string) => void;
  2834. }
  2835. export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
  2836. constructor(props: ISceneExplorerFilterComponentProps);
  2837. render(): JSX.Element;
  2838. }
  2839. interface ISceneExplorerComponentProps {
  2840. scene: BABYLON.Scene;
  2841. noCommands?: boolean;
  2842. noHeader?: boolean;
  2843. noExpand?: boolean;
  2844. noClose?: boolean;
  2845. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2846. globalState: GlobalState;
  2847. popupMode?: boolean;
  2848. onPopup?: () => void;
  2849. onClose?: () => void;
  2850. }
  2851. export class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, {
  2852. filter: BABYLON.Nullable<string>;
  2853. selectedEntity: any;
  2854. scene: BABYLON.Scene;
  2855. }> {
  2856. private _onSelectionChangeObserver;
  2857. private _onSelectionRenamedObserver;
  2858. private _onNewSceneAddedObserver;
  2859. private _onNewSceneObserver;
  2860. private sceneExplorerRef;
  2861. private _once;
  2862. private _hooked;
  2863. private sceneMutationFunc;
  2864. constructor(props: ISceneExplorerComponentProps);
  2865. processMutation(): void;
  2866. componentDidMount(): void;
  2867. componentWillUnmount(): void;
  2868. filterContent(filter: string): void;
  2869. findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {
  2870. previousOne?: any;
  2871. found?: boolean;
  2872. }): boolean;
  2873. processKeys(keyEvent: React.KeyboardEvent<HTMLDivElement>): void;
  2874. renderContent(): JSX.Element | null;
  2875. onClose(): void;
  2876. onPopup(): void;
  2877. render(): JSX.Element;
  2878. }
  2879. }
  2880. declare module INSPECTOR {
  2881. interface IEmbedHostComponentProps {
  2882. scene: BABYLON.Scene;
  2883. globalState: GlobalState;
  2884. popupMode: boolean;
  2885. noClose?: boolean;
  2886. noExpand?: boolean;
  2887. onClose: () => void;
  2888. onPopup: () => void;
  2889. extensibilityGroups?: BABYLON.IExplorerExtensibilityGroup[];
  2890. initialTab?: BABYLON.DebugLayerTab;
  2891. }
  2892. export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps> {
  2893. private _once;
  2894. private splitRef;
  2895. private topPartRef;
  2896. private bottomPartRef;
  2897. constructor(props: IEmbedHostComponentProps);
  2898. componentDidMount(): void;
  2899. renderContent(): JSX.Element;
  2900. render(): JSX.Element;
  2901. }
  2902. }
  2903. declare module INSPECTOR {
  2904. export class Inspector {
  2905. private static _SceneExplorerHost;
  2906. private static _ActionTabsHost;
  2907. private static _EmbedHost;
  2908. private static _NewCanvasContainer;
  2909. private static _SceneExplorerWindow;
  2910. private static _ActionTabsWindow;
  2911. private static _EmbedHostWindow;
  2912. private static _Scene;
  2913. private static _OpenedPane;
  2914. private static _OnBeforeRenderObserver;
  2915. static OnSelectionChangeObservable: BABYLON.Observable<any>;
  2916. static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
  2917. private static _GlobalState;
  2918. static MarkLineContainerTitleForHighlighting(title: string): void;
  2919. static MarkMultipleLineContainerTitlesForHighlighting(titles: string[]): void;
  2920. private static _CopyStyles;
  2921. private static _CreateSceneExplorer;
  2922. private static _CreateActionTabs;
  2923. private static _CreateEmbedHost;
  2924. static _CreatePopup(title: string, windowVariableName: string, width?: number, height?: number, lateBinding?: boolean): HTMLDivElement | null;
  2925. static get IsVisible(): boolean;
  2926. static EarlyAttachToLoader(): void;
  2927. static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
  2928. static _SetNewScene(scene: BABYLON.Scene): void;
  2929. static _CreateCanvasContainer(parentControl: HTMLElement): void;
  2930. private static _DestroyCanvasContainer;
  2931. private static _Cleanup;
  2932. private static _RemoveElementFromDOM;
  2933. static Hide(): void;
  2934. }
  2935. }
  2936. declare module INSPECTOR {
  2937. interface IAddAnimationProps {
  2938. isOpen: boolean;
  2939. close: () => void;
  2940. entity: BABYLON.IAnimatable;
  2941. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  2942. setNotificationMessage: (message: string) => void;
  2943. finishedUpdate: () => void;
  2944. addedNewAnimation: (animation: BABYLON.Animation) => void;
  2945. fps: number;
  2946. selectedToUpdate?: BABYLON.Animation | undefined;
  2947. }
  2948. /**
  2949. * Controls the creation of a new animation.
  2950. * @property {boolean} isOpen controls if the add animation pannel is open or closed in the editor controls;
  2951. * @property {()=>void} close sends the message to close this panel setting isOpen to false;
  2952. * @property {IAnimatable} entity is the animation object to add the animation to;
  2953. * @property {Observable<PropertyChangedEvent>} onPropertyChangedObservable is the registered observable
  2954. * @property {(message: string) => void} setNotificationMessage sends the message string to display errors on the message box
  2955. * @property {() => void} finishedUpdate tells the parent component the update on the animation collection has completed
  2956. * @property { (animation: BABYLON.Animation) => void} addedNewAnimation sends the animation to the editor to process how its is rendered
  2957. * @property {number} fps Frames per second of the animation.
  2958. * @property {Animation | undefined} selectedToUpdate the selected animation so we can update the renderer curve.
  2959. */
  2960. export class AddAnimation extends React.Component<IAddAnimationProps, {
  2961. animationName: string;
  2962. animationTargetProperty: string;
  2963. animationType: number;
  2964. loopMode: number;
  2965. animationTargetPath: string;
  2966. isUpdating: boolean;
  2967. }> {
  2968. constructor(props: IAddAnimationProps);
  2969. setInitialState(editingAnimation?: BABYLON.Animation): {
  2970. animationName: string;
  2971. animationTargetPath: string;
  2972. animationType: number;
  2973. loopMode: number;
  2974. animationTargetProperty: string;
  2975. isUpdating: boolean;
  2976. };
  2977. /**
  2978. * We decide wether the animation will be added or edited
  2979. * @param prevProps Previous props.
  2980. * @param prevState Previous state.
  2981. */
  2982. componentDidUpdate(prevProps: IAddAnimationProps, prevState: any): void;
  2983. /**
  2984. * Updates the animation with the correct properties
  2985. * Updates its name, loopmode and targetProperty.
  2986. * This allows the edition of the animation in the curve editor.
  2987. * We can only update these props for the animation.
  2988. * Keyframes of course are updated on the curve editor.
  2989. */
  2990. updateAnimation: () => void;
  2991. /**
  2992. * Returns the animation type as string
  2993. * @param type Type of animation so we return a string.
  2994. */
  2995. getTypeAsString(type: number): "Size" | "Color4" | "Vector3" | "Float" | "Quaternion" | "Vector2" | "Color3";
  2996. /**
  2997. * Process the creation of a new animation.
  2998. * We verify is the property to animate is present on the object
  2999. * We verify if the property derives from a correct class *type of animation to add an animation
  3000. * At the end we create an empty animation named animation.
  3001. * The animation keys array is set to empty so we can add keyframes in the editor.
  3002. * We return the animation to the curve editor and update the entity animation collection
  3003. */
  3004. addAnimation: () => void;
  3005. raiseOnPropertyChanged(newValue: BABYLON.Animation[], previousValue: BABYLON.Animation[]): void;
  3006. raiseOnPropertyUpdated(newValue: string | number | undefined, previousValue: string | number, property: string): void;
  3007. handlePathChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  3008. handleNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  3009. handleTypeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  3010. handlePropertyChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  3011. handleLoopModeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  3012. render(): JSX.Element;
  3013. }
  3014. }
  3015. declare module INSPECTOR {
  3016. interface IAnchorSvgPointProps {
  3017. control: BABYLON.Vector2;
  3018. anchor: BABYLON.Vector2;
  3019. active: boolean;
  3020. type: string;
  3021. index: string;
  3022. selected: boolean;
  3023. selectControlPoint: (id: string) => void;
  3024. framesInCanvasView: {
  3025. from: number;
  3026. to: number;
  3027. };
  3028. }
  3029. /**
  3030. * Renders the control point to a keyframe.
  3031. * Each keyframe has left and right control points to control de tangent of the curve
  3032. * This controls the inTangent and outTangent values for the keyframe in the animation.
  3033. * @property {Vector2} control is the control point to control de curve tangent
  3034. * @property {Vector2} anchor represents the Keyframe point which acts origin point.
  3035. * @property {boolen} active tells the component if the control point is currently active
  3036. * @property {string} type (left/right) if the control will be the left or right control point
  3037. * @property {boolean} selected if the control point is currently selected. If selected we can move the control point and will become active
  3038. * @property {(id: string) => void;} selectControlPoint sends the id of the control point to the parent component to tell if it is selected
  3039. * @property {{ from: number; to: number }} framesInCanvasView controls from/to which keyframe should the control point can expand and control de curve
  3040. * 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
  3041. */
  3042. export class AnchorSvgPoint extends React.Component<IAnchorSvgPointProps, {
  3043. visiblePoint: BABYLON.Vector2;
  3044. }> {
  3045. constructor(props: IAnchorSvgPointProps);
  3046. componentDidUpdate(prevProps: IAnchorSvgPointProps, prevState: any): void;
  3047. select: () => void;
  3048. /**
  3049. * Controls where should we render the visible point (representing the control point)
  3050. * The visible control point differs from the control point for UX reasons. The control point
  3051. * expands beyond the visible canvas.
  3052. */
  3053. setVisiblePoint(): BABYLON.Vector2;
  3054. render(): JSX.Element;
  3055. }
  3056. }
  3057. declare module INSPECTOR {
  3058. export interface IKeyframeSvgPoint {
  3059. keyframePoint: BABYLON.Vector2;
  3060. rightControlPoint: BABYLON.Vector2 | null;
  3061. leftControlPoint: BABYLON.Vector2 | null;
  3062. id: string;
  3063. selected: boolean;
  3064. isLeftActive: boolean;
  3065. isRightActive: boolean;
  3066. curveId?: ICurveMetaData;
  3067. }
  3068. export interface ICurveMetaData {
  3069. id: number;
  3070. animationName: string;
  3071. property: string;
  3072. }
  3073. interface IKeyframeSvgPointProps {
  3074. keyframePoint: BABYLON.Vector2;
  3075. leftControlPoint: BABYLON.Vector2 | null;
  3076. rightControlPoint: BABYLON.Vector2 | null;
  3077. id: string;
  3078. selected: boolean;
  3079. selectKeyframe: (id: string, multiselect: boolean) => void;
  3080. selectedControlPoint: (type: string, id: string) => void;
  3081. isLeftActive: boolean;
  3082. isRightActive: boolean;
  3083. framesInCanvasView: {
  3084. from: number;
  3085. to: number;
  3086. };
  3087. }
  3088. /**
  3089. * Renders the Keyframe as an SVG Element for the Canvas component.
  3090. * Holds the two control points to generate the proper curve.
  3091. */
  3092. export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps> {
  3093. constructor(props: IKeyframeSvgPointProps);
  3094. /**
  3095. * Select a keyframe. If the control key is pressed, multiselect keyframes
  3096. * @param e Mouse event
  3097. */
  3098. select: (e: React.MouseEvent<SVGImageElement>) => void;
  3099. /**
  3100. * Send the ID of the selected keyframe
  3101. * @param type Type of selected keyframe
  3102. */
  3103. selectedControlPointId: (type: string) => void;
  3104. render(): JSX.Element;
  3105. }
  3106. }
  3107. declare module INSPECTOR {
  3108. interface ISvgDraggableAreaProps {
  3109. keyframeSvgPoints: IKeyframeSvgPoint[];
  3110. updatePosition: (updatedKeyframe: IKeyframeSvgPoint, id: string) => void;
  3111. scale: number;
  3112. viewBoxScale: number;
  3113. deselectKeyframes: () => void;
  3114. removeSelectedKeyframes: (points: IKeyframeSvgPoint[]) => void;
  3115. panningY: (panningY: number) => void;
  3116. panningX: (panningX: number) => void;
  3117. setCurrentFrame: (direction: number) => void;
  3118. positionCanvas?: BABYLON.Vector2;
  3119. repositionCanvas?: boolean;
  3120. canvasPositionEnded: () => void;
  3121. resetActionableKeyframe: () => void;
  3122. framesInCanvasView: {
  3123. from: number;
  3124. to: number;
  3125. };
  3126. framesResized: number;
  3127. }
  3128. /**
  3129. * The SvgDraggableArea is a wrapper for SVG Canvas the interaction
  3130. *
  3131. * Here we control the drag and key behavior for the SVG components.
  3132. */
  3133. export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
  3134. panX: number;
  3135. panY: number;
  3136. }> {
  3137. private _active;
  3138. private _isCurrentPointControl;
  3139. private _currentPointId;
  3140. private _draggableArea;
  3141. private _panStart;
  3142. private _panStop;
  3143. private _playheadDrag;
  3144. private _playheadSelected;
  3145. private _movedX;
  3146. private _movedY;
  3147. private _isControlKeyPress;
  3148. readonly _dragBuffer: number;
  3149. readonly _draggingMultiplier: number;
  3150. constructor(props: ISvgDraggableAreaProps);
  3151. /**
  3152. * Listen to key events to be able to drag and set the correct canvas client width
  3153. */
  3154. componentDidMount(): void;
  3155. /**
  3156. * Makes sure the canvas has resposition correctly
  3157. * @param prevProps previous props
  3158. */
  3159. componentDidUpdate(prevProps: ISvgDraggableAreaProps): void;
  3160. /**
  3161. * Identify the type of target of the mouse event
  3162. * @param e SVG Mouse Event
  3163. */
  3164. dragStart: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3165. /**
  3166. * Handle dragging
  3167. * @param e SVG Mouse Event
  3168. */
  3169. drag: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3170. /**
  3171. * Resets the dragging state
  3172. * @param e Drag event
  3173. */
  3174. dragEnd: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3175. /**
  3176. * Gets the current position of the mouse in a SVG Canvas
  3177. * @param e Mouse event
  3178. */
  3179. getMousePosition: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => BABYLON.Vector2 | undefined;
  3180. /**
  3181. * Handles the canvas panning direction and sets the X and Y values to move the
  3182. * SVG canvas
  3183. */
  3184. panDirection(): void;
  3185. /**
  3186. * Allows dragging
  3187. * @param e Keyboard event
  3188. */
  3189. keyDown(e: KeyboardEvent): void;
  3190. /**
  3191. * Allows multiple selection
  3192. * @param e Keyboard event
  3193. */
  3194. keyUp(e: KeyboardEvent): void;
  3195. /**
  3196. * Focus on the SVG canvas
  3197. * @param e Mouse event
  3198. */
  3199. focus: (e: React.MouseEvent<SVGSVGElement>) => void;
  3200. /**
  3201. * Is the control point active or not
  3202. */
  3203. isNotControlPointActive(): boolean;
  3204. render(): JSX.Element;
  3205. }
  3206. }
  3207. declare module INSPECTOR {
  3208. export interface IIconButtonLineComponentProps {
  3209. icon: string;
  3210. onClick: () => void;
  3211. tooltip: string;
  3212. active?: boolean;
  3213. }
  3214. export class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
  3215. constructor(props: IIconButtonLineComponentProps);
  3216. render(): JSX.Element;
  3217. }
  3218. }
  3219. declare module INSPECTOR {
  3220. interface IControlsProps {
  3221. keyframes: BABYLON.IAnimationKey[] | null;
  3222. selected: BABYLON.IAnimationKey | null;
  3223. currentFrame: number;
  3224. onCurrentFrameChange: (frame: number) => void;
  3225. repositionCanvas: (keyframe: BABYLON.IAnimationKey) => void;
  3226. playPause: (direction: number) => void;
  3227. isPlaying: boolean;
  3228. scrollable: React.RefObject<HTMLDivElement>;
  3229. }
  3230. /**
  3231. * The playback controls for the animation editor
  3232. */
  3233. export class Controls extends React.Component<IControlsProps, {
  3234. selected: BABYLON.IAnimationKey;
  3235. playingType: string;
  3236. }> {
  3237. readonly _sizeOfKeyframe: number;
  3238. constructor(props: IControlsProps);
  3239. playBackwards: () => void;
  3240. play: () => void;
  3241. pause: () => void;
  3242. /**
  3243. * Set animation to initial keyframe
  3244. */
  3245. moveToAnimationStart: () => void;
  3246. /**
  3247. * Set animation to the last keyframe
  3248. */
  3249. moveToAnimationEnd: () => void;
  3250. /** Move to next keyframe */
  3251. nextKeyframe: () => void;
  3252. /** Move to previous keyframe */
  3253. previousKeyframe: () => void;
  3254. render(): JSX.Element;
  3255. }
  3256. }
  3257. declare module INSPECTOR {
  3258. interface ITimelineProps {
  3259. keyframes: BABYLON.IAnimationKey[] | null;
  3260. selected: BABYLON.IAnimationKey | null;
  3261. currentFrame: number;
  3262. onCurrentFrameChange: (frame: number) => void;
  3263. onAnimationLimitChange: (limit: number) => void;
  3264. dragKeyframe: (frame: number, index: number) => void;
  3265. playPause: (direction: number) => void;
  3266. isPlaying: boolean;
  3267. animationLimit: number;
  3268. fps: number;
  3269. repositionCanvas: (keyframe: BABYLON.IAnimationKey) => void;
  3270. resizeWindowProportion: number;
  3271. }
  3272. interface ITimelineState {
  3273. selected: BABYLON.IAnimationKey;
  3274. activeKeyframe: number | null;
  3275. start: number;
  3276. end: number;
  3277. scrollWidth: number | undefined;
  3278. selectionLength: number[];
  3279. limitValue: number;
  3280. }
  3281. /**
  3282. * The Timeline for the curve editor
  3283. *
  3284. * Has a scrollbar that can be resized and move to left and right.
  3285. * The timeline does not affect the Canvas but only the frame container.
  3286. */
  3287. export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
  3288. private _scrollable;
  3289. private _scrollbarHandle;
  3290. private _scrollContainer;
  3291. private _inputAnimationLimit;
  3292. private _direction;
  3293. private _scrolling;
  3294. private _shiftX;
  3295. private _active;
  3296. readonly _marginScrollbar: number;
  3297. constructor(props: ITimelineProps);
  3298. /** Listen to keyup events and set the initial lenght of the scrollbar */
  3299. componentDidMount(): void;
  3300. /** Recalculate the scrollwidth if a window resize happens */
  3301. componentDidUpdate(prevProps: ITimelineProps): void;
  3302. /** Remove key event listener */
  3303. componentWillUnmount(): void;
  3304. /**
  3305. * Set component state if enter key is pressed
  3306. * @param event enter key event
  3307. */
  3308. isEnterKeyUp(event: KeyboardEvent): void;
  3309. /**
  3310. * Detect blur event
  3311. * @param event Blur event
  3312. */
  3313. onInputBlur(event: React.FocusEvent<HTMLInputElement>): void;
  3314. /** Set component state (scrollbar width, position, and start and end) */
  3315. setControlState(): void;
  3316. /**
  3317. * Set scrollwidth on the timeline
  3318. * @param {number} start Frame from which the scrollbar should begin.
  3319. * @param {number} end Last frame for the timeline.
  3320. */
  3321. calculateScrollWidth(start: number, end: number): number | undefined;
  3322. /**
  3323. * Play animation backwards
  3324. * @param event Mouse event
  3325. */
  3326. playBackwards(event: React.MouseEvent<HTMLDivElement>): void;
  3327. /**
  3328. * Play animation
  3329. * @param event Mouse event
  3330. */
  3331. play(event: React.MouseEvent<HTMLDivElement>): void;
  3332. /**
  3333. * Pause the animation
  3334. * @param event Mouse event
  3335. */
  3336. pause(event: React.MouseEvent<HTMLDivElement>): void;
  3337. /**
  3338. * Set the selected frame
  3339. * @param event Mouse event
  3340. */
  3341. setCurrentFrame: (event: React.MouseEvent<HTMLDivElement>) => void;
  3342. /**
  3343. * Handles the change of number of frames available in the timeline.
  3344. */
  3345. handleLimitChange(event: React.ChangeEvent<HTMLInputElement>): void;
  3346. /**
  3347. * Starts the scrollbar dragging
  3348. * @param e Mouse event on SVG Element
  3349. */
  3350. dragStart: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3351. /**
  3352. * Update the canvas visible frames while dragging
  3353. * @param e Mouse event
  3354. */
  3355. drag: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3356. /**
  3357. * Check if the frame is being used as a Keyframe by the animation
  3358. * @param frame number of frame
  3359. * @param direction frame increment or decrement
  3360. */
  3361. isFrameBeingUsed(frame: number, direction: number): number | false;
  3362. /**
  3363. * Reset drag state
  3364. * @param e Mouse event on SVG Element
  3365. */
  3366. dragEnd: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
  3367. /**
  3368. * Change position of the scrollbar
  3369. * @param e Mouse event
  3370. */
  3371. scrollDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  3372. /**
  3373. * Change size of scrollbar
  3374. * @param e Mouse event
  3375. */
  3376. scrollDrag: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  3377. /**
  3378. * Reset scroll drag
  3379. * @param e Mouse event
  3380. */
  3381. scrollDragEnd: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  3382. /**
  3383. * Sets the start, end and selection length of the scrollbar. This will control the width and
  3384. * height of the scrollbar as well as the number of frames available
  3385. * @param {number} pageX Controls the X axis of the scrollbar movement.
  3386. */
  3387. moveScrollbar(pageX: number): void;
  3388. /**
  3389. * Controls the resizing of the scrollbar from the right handle
  3390. * @param {number} clientX how much mouse has moved
  3391. */
  3392. resizeScrollbarRight(clientX: number): void;
  3393. /**
  3394. * Controls the resizing of the scrollbar from the left handle
  3395. * @param {number} clientX how much mouse has moved
  3396. */
  3397. resizeScrollbarLeft(clientX: number): void;
  3398. /**
  3399. * Returns array with the expected length between two numbers
  3400. * @param start initial visible frame
  3401. * @param stop last visible frame
  3402. */
  3403. range(start: number, end: number): number[];
  3404. /**
  3405. * Get the animation keyframe
  3406. * @param frame Frame
  3407. */
  3408. getKeyframe(frame: number): false | BABYLON.IAnimationKey | undefined;
  3409. /**
  3410. * Get the current animation keyframe
  3411. * @param frame Frame
  3412. */
  3413. getCurrentFrame(frame: number): boolean;
  3414. dragDomFalse: () => boolean;
  3415. render(): JSX.Element;
  3416. }
  3417. }
  3418. declare module INSPECTOR {
  3419. interface IPlayheadProps {
  3420. message: string;
  3421. open: boolean;
  3422. close: () => void;
  3423. }
  3424. /**
  3425. * Renders the notification for the user
  3426. */
  3427. export class Notification extends React.Component<IPlayheadProps> {
  3428. constructor(props: IPlayheadProps);
  3429. render(): JSX.Element;
  3430. }
  3431. }
  3432. declare module INSPECTOR {
  3433. interface IGraphActionsBarProps {
  3434. addKeyframe: () => void;
  3435. removeKeyframe: () => void;
  3436. frameSelectedKeyframes: () => void;
  3437. handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3438. handleFrameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3439. flatTangent: () => void;
  3440. brokeTangents: () => void;
  3441. setLerpToActiveControlPoint: () => void;
  3442. brokenMode: boolean;
  3443. lerpMode: boolean;
  3444. actionableKeyframe: IActionableKeyFrame;
  3445. title: string;
  3446. enabled: boolean;
  3447. setKeyframeValue: (actionableKeyframe: IActionableKeyFrame) => void;
  3448. frameRange: {
  3449. min: number | undefined;
  3450. max: number | undefined;
  3451. };
  3452. }
  3453. /**
  3454. * Has the buttons and actions for the Canvas Graph.
  3455. * Handles input change and actions (flat, broken mode, set linear control points)
  3456. */
  3457. export class GraphActionsBar extends React.Component<IGraphActionsBarProps, {
  3458. frame: string;
  3459. value: string;
  3460. min: number | undefined;
  3461. max: number | undefined;
  3462. }> {
  3463. private _frameInput;
  3464. private _valueInput;
  3465. constructor(props: IGraphActionsBarProps);
  3466. /**
  3467. * Listen to keyup changes to handle if the input event has ended or change
  3468. */
  3469. componentDidMount(): void;
  3470. /**
  3471. * Set the changing state of frame, value and range of the actionablekeyframe
  3472. * @param prevProps previous props
  3473. * @param prevState previous state
  3474. */
  3475. componentDidUpdate(prevProps: IGraphActionsBarProps, prevState: any): void;
  3476. /**
  3477. * Returns the frame and value for the keyframe
  3478. * @param keyframe The keyframe to update
  3479. */
  3480. selectedKeyframeChanged(keyframe: IActionableKeyFrame): {
  3481. frame: string;
  3482. value: string;
  3483. };
  3484. /**
  3485. * Remove listeners
  3486. */
  3487. componentWillUnmount(): void;
  3488. /**
  3489. * Trigger the change on the keyframe
  3490. * @param event Enter keyevent
  3491. */
  3492. isEnterKeyUp(event: KeyboardEvent): void;
  3493. /**
  3494. * Trigger the chnage on the keyframe on blur
  3495. * @param event Focus event
  3496. */
  3497. onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
  3498. /**
  3499. * Gets the keyframe frame
  3500. */
  3501. getFrame(): string | number;
  3502. /**
  3503. * Gets the keyframe value
  3504. */
  3505. getValue(): string | number;
  3506. /**
  3507. * Set keyframe value state
  3508. * @param e Input event
  3509. */
  3510. handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3511. /**
  3512. * Set the keyframe frame state
  3513. * @param e Input event
  3514. */
  3515. handleFrameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3516. render(): JSX.Element;
  3517. }
  3518. }
  3519. declare module INSPECTOR {
  3520. interface IAnimationListTreeProps {
  3521. isTargetedAnimation: boolean;
  3522. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3523. selected: BABYLON.Animation | null;
  3524. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3525. selectAnimation: (selected: BABYLON.Animation, coordinate?: SelectedCoordinate) => void;
  3526. empty: () => void;
  3527. editAnimation: (selected: BABYLON.Animation) => void;
  3528. deselectAnimation: () => void;
  3529. }
  3530. interface Item {
  3531. index: number;
  3532. name: string;
  3533. property: string;
  3534. selected: boolean;
  3535. open: boolean;
  3536. }
  3537. export enum SelectedCoordinate {
  3538. x = 0,
  3539. y = 1,
  3540. z = 2,
  3541. w = 3,
  3542. r = 0,
  3543. g = 1,
  3544. b = 2,
  3545. a = 3,
  3546. width = 0,
  3547. height = 1
  3548. }
  3549. interface ItemCoordinate {
  3550. id: string;
  3551. color: string;
  3552. coordinate: SelectedCoordinate;
  3553. }
  3554. /**
  3555. * Renders a list of current animations.
  3556. */
  3557. export class AnimationListTree extends React.Component<IAnimationListTreeProps, {
  3558. selectedCoordinate: SelectedCoordinate;
  3559. selectedAnimation: number;
  3560. animationList: Item[] | null;
  3561. animations: BABYLON.Nullable<BABYLON.Animation[]> | BABYLON.Animation;
  3562. }> {
  3563. constructor(props: IAnimationListTreeProps);
  3564. /**
  3565. * Set the animation list if has changed properties
  3566. * @param prevProps previous properties
  3567. */
  3568. componentDidUpdate(prevProps: IAnimationListTreeProps): void;
  3569. /**
  3570. * Delete animation from list
  3571. */
  3572. deleteAnimation: () => void;
  3573. /**
  3574. * Update the animations collection
  3575. * @param newValue new animation list
  3576. * @param previousValue previous animation list
  3577. */
  3578. raiseOnPropertyChanged(newValue: BABYLON.Animation[], previousValue: BABYLON.Animation[]): void;
  3579. /**
  3580. * Renders the animation list
  3581. */
  3582. generateList(): Item[] | null;
  3583. /**
  3584. * Open or closes the animation to show its coordinate animations
  3585. * @param index BABYLON.Animation index
  3586. */
  3587. toggleProperty(index: number): void;
  3588. /**
  3589. * Select the animation to render
  3590. * @param animation Selected animation
  3591. * @param coordinate Selected coordinate (x, y, z)
  3592. * @param index Index
  3593. */
  3594. setSelectedCoordinate(animation: BABYLON.Animation, coordinate: SelectedCoordinate, index: number): void;
  3595. /**
  3596. * Renders the coordinate belonging to an animation
  3597. * @param i Index
  3598. * @param animation Selected animation
  3599. * @param coordinate Coordinate name
  3600. * @param color Color identifier
  3601. * @param selectedCoordinate Selected coordinate (x, y, z)
  3602. */
  3603. coordinateItem(i: number, animation: BABYLON.Animation, coordinate: string, color: string, selectedCoordinate: SelectedCoordinate): JSX.Element;
  3604. /**
  3605. * Render animation
  3606. * @param animation selected animations
  3607. * @param i index
  3608. * @param childrenElements its coordinate (x,y,z) animations
  3609. */
  3610. typeAnimationItem(animation: BABYLON.Animation, i: number, childrenElements: ItemCoordinate[]): JSX.Element;
  3611. /**
  3612. * Render animation item
  3613. * @param animation Selected aniamtion
  3614. * @param i index
  3615. */
  3616. setListItem(animation: BABYLON.Animation, i: number): JSX.Element | null;
  3617. render(): JSX.Element;
  3618. }
  3619. }
  3620. declare module INSPECTOR {
  3621. interface ILoadSnippetProps {
  3622. animations: BABYLON.Animation[];
  3623. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3624. lockObject: LockObject;
  3625. globalState: GlobalState;
  3626. snippetServer: string;
  3627. setSnippetId: (id: string) => void;
  3628. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3629. setNotificationMessage: (message: string) => void;
  3630. animationsLoaded: (numberOfAnimations: number) => void;
  3631. }
  3632. /**
  3633. * Loads animation locally or from the Babylon.js Snippet Server
  3634. */
  3635. export class LoadSnippet extends React.Component<ILoadSnippetProps, {
  3636. snippetId: string;
  3637. }> {
  3638. private _serverAddress;
  3639. constructor(props: ILoadSnippetProps);
  3640. /**
  3641. * Set the animations snippet id
  3642. * @param value Snippet ID
  3643. */
  3644. change: (value: string) => void;
  3645. /**
  3646. * Select a local file to load animations
  3647. * @param file File name
  3648. */
  3649. loadFromFile: (file: File) => void;
  3650. /**
  3651. * Load animations from server identified with a snippet id
  3652. */
  3653. loadFromSnippet: () => void;
  3654. render(): JSX.Element;
  3655. }
  3656. }
  3657. declare module INSPECTOR {
  3658. interface ISaveSnippetProps {
  3659. animations: BABYLON.Nullable<BABYLON.Animation[]>;
  3660. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3661. lockObject: LockObject;
  3662. globalState: GlobalState;
  3663. snippetServer: string;
  3664. snippetId: string;
  3665. }
  3666. export interface Snippet {
  3667. url: string;
  3668. id: string;
  3669. }
  3670. interface SelectedAnimation {
  3671. id: string;
  3672. name: string;
  3673. index: number;
  3674. selected: boolean;
  3675. }
  3676. /**
  3677. * Saves the animation snippet to the Babylon.js site or downloads the animation file locally
  3678. */
  3679. export class SaveSnippet extends React.Component<ISaveSnippetProps, {
  3680. selectedAnimations: SelectedAnimation[];
  3681. }> {
  3682. constructor(props: ISaveSnippetProps);
  3683. /**
  3684. * Set the selected animations to save
  3685. * @param e Input event
  3686. */
  3687. handleCheckboxChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  3688. /**
  3689. * Stringify the selected animation
  3690. */
  3691. stringifySelectedAnimations(): string;
  3692. /**
  3693. * Save the selected animations to a local file
  3694. */
  3695. saveToFile: () => void;
  3696. /**
  3697. * Save the selected animations if a snippet ID is set
  3698. */
  3699. saveToSnippet: () => void;
  3700. render(): JSX.Element;
  3701. }
  3702. }
  3703. declare module INSPECTOR {
  3704. interface IEditorControlsProps {
  3705. isTargetedAnimation: boolean;
  3706. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3707. selected: BABYLON.Animation | null;
  3708. lockObject: LockObject;
  3709. onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
  3710. setNotificationMessage: (message: string) => void;
  3711. selectAnimation: (selected: BABYLON.Animation, axis?: SelectedCoordinate) => void;
  3712. setFps: (fps: number) => void;
  3713. setIsLooping: () => void;
  3714. globalState: GlobalState;
  3715. snippetServer: string;
  3716. deselectAnimation: () => void;
  3717. fps: number;
  3718. }
  3719. interface IEditorControlsState {
  3720. isAnimationTabOpen: boolean;
  3721. isEditTabOpen: boolean;
  3722. isLoadTabOpen: boolean;
  3723. isSaveTabOpen: boolean;
  3724. isLoopActive: boolean;
  3725. animationsCount: number;
  3726. framesPerSecond: number;
  3727. snippetId: string;
  3728. selected: BABYLON.Animation | undefined;
  3729. }
  3730. /**
  3731. * Renders the Curve Editor controls to create, save, remove, load and edit animations
  3732. */
  3733. export class EditorControls extends React.Component<IEditorControlsProps, IEditorControlsState> {
  3734. constructor(props: IEditorControlsProps);
  3735. /**
  3736. * Makes sure the frames per second receive the updated prop
  3737. * @param prevProps previous properties
  3738. */
  3739. componentDidUpdate(prevProps: IEditorControlsProps): void;
  3740. /**
  3741. * Add the nimation, recounts the list and opens the correct tab
  3742. * @param animation The recently empty created animation
  3743. */
  3744. onAnimationAdded: (animation: BABYLON.Animation) => void;
  3745. /**
  3746. * Set state when the animations list has finished updated
  3747. */
  3748. finishedUpdate: () => void;
  3749. recountAnimations(): number;
  3750. /**
  3751. * Toggles loop
  3752. */
  3753. changeLoopBehavior: () => void;
  3754. /**
  3755. * This avoids using lambda functions in JSX
  3756. */
  3757. handleFirstTab: () => void;
  3758. handleSecondTab: () => void;
  3759. handleThirdTab: () => void;
  3760. handleFourthTab: () => void;
  3761. handleTabs(tab: number): void;
  3762. handleChangeFps: (fps: number) => void;
  3763. /**
  3764. * Cleans the list when has been emptied
  3765. */
  3766. onEmptiedList: () => void;
  3767. /**
  3768. * When animations have been reloaded update tabs
  3769. */
  3770. animationsLoaded: (numberOfAnimations: number) => void;
  3771. /**
  3772. * The currently selected animation to edit it
  3773. * @param selected Selected animation
  3774. */
  3775. editAnimation: (selected: BABYLON.Animation) => void;
  3776. setSnippetId: (id: string) => void;
  3777. /**
  3778. * Marks animation tab closed and hides the tab
  3779. */
  3780. onCloseAddAnimation: () => void;
  3781. render(): JSX.Element;
  3782. }
  3783. }
  3784. declare module INSPECTOR {
  3785. interface ISwitchButtonProps {
  3786. /** Current scale */
  3787. current: CurveScale;
  3788. /** On click change of scale */
  3789. action?: (event: CurveScale) => void;
  3790. }
  3791. /**
  3792. * Displays the current scale
  3793. */
  3794. export class ScaleLabel extends React.Component<ISwitchButtonProps, {
  3795. current: CurveScale;
  3796. }> {
  3797. constructor(props: ISwitchButtonProps);
  3798. renderLabel(scale: CurveScale): "" | "DEG" | "FLT" | "INT" | "RAD";
  3799. onClickHandle: () => void;
  3800. render(): JSX.Element;
  3801. }
  3802. }
  3803. declare module INSPECTOR {
  3804. interface IAnimationCurveEditorComponentProps {
  3805. playOrPause?: () => void;
  3806. scene: BABYLON.Scene;
  3807. entity: BABYLON.IAnimatable | BABYLON.TargetedAnimation;
  3808. lockObject: LockObject;
  3809. globalState: GlobalState;
  3810. }
  3811. /**
  3812. * Represent an Axis of the canvas. This help us control the frame/panning
  3813. */
  3814. interface ICanvasAxis {
  3815. value: number;
  3816. label: number;
  3817. }
  3818. /**
  3819. * This help us identify the type of scaling on the selected animated property
  3820. */
  3821. export enum CurveScale {
  3822. float = 0,
  3823. radians = 1,
  3824. degrees = 2,
  3825. integers = 3,
  3826. default = 4
  3827. }
  3828. /**
  3829. * This represents the visible selected keyframe in the canvas. If the keyframe is selected
  3830. * we should be able to edit the frame and value.
  3831. */
  3832. export interface IActionableKeyFrame {
  3833. frame?: number | string;
  3834. value?: any;
  3835. }
  3836. /**
  3837. * Each curve is an SVG Path. This Interface give us its properties to render on the canvas.
  3838. */
  3839. interface ICurveData {
  3840. pathData: string;
  3841. pathLength: number;
  3842. domCurve: React.RefObject<SVGPathElement>;
  3843. color: string;
  3844. id: string;
  3845. }
  3846. /**
  3847. * The curve editor state
  3848. */
  3849. interface IAnimationCurveEditorComponentState {
  3850. /** If the editor is opened or closed */
  3851. isOpen: boolean;
  3852. /** The currently selected animation from which the curves will render */
  3853. selected: BABYLON.Animation | null;
  3854. /** A list of keyframes to be rendered as SVG Elements in the curve */
  3855. svgKeyframes: IKeyframeSvgPoint[] | undefined;
  3856. /** The current frame in which the playhead is positioned */
  3857. currentFrame: number;
  3858. /** The current value in which the playhead is positioned */
  3859. currentValue: number;
  3860. /** The number of frame in which the current canvas is divided. The helps to render the frames in the graph editor */
  3861. frameAxisLength: ICanvasAxis[];
  3862. /** 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*/
  3863. valueAxisLength: ICanvasAxis[];
  3864. /** If the selected keyframe should be treated as a flat tangent curve */
  3865. isFlatTangentMode: boolean;
  3866. /** If the tangent mode is active */
  3867. isTangentMode: boolean;
  3868. /** If the control points are broken or not */
  3869. isBrokenMode: boolean;
  3870. /** If selected keyframe should render its selected control point to be linear or not */
  3871. lerpMode: boolean;
  3872. /** The scale of the canvas */
  3873. scale: number;
  3874. /** The offset of the playhead to position itself on the canvas */
  3875. playheadOffset: number;
  3876. /** The error or warning message to display */
  3877. notification: string;
  3878. /** The current selected point in the SVG curve */
  3879. currentPoint: SVGPoint | undefined;
  3880. /** The start position of the playhead */
  3881. playheadPos: number;
  3882. /** If the animation is playing or not */
  3883. isPlaying: boolean;
  3884. /** The selected curve represented with an array of curves */
  3885. selectedPathData: ICurveData[] | undefined;
  3886. /** The currently selected coordinate of a complex property (i.e. x, y, z) */
  3887. selectedCoordinate: number;
  3888. /** The number of frames available in the canvas timeline*/
  3889. animationLimit: number;
  3890. /** The currently animation frames per second */
  3891. fps: number;
  3892. /** If the animation is set to loop or not while animation is playing */
  3893. isLooping: boolean;
  3894. /** The amount of vertical panning the user has moved the canvas */
  3895. panningY: number;
  3896. /** The amount of horizontal panning the user has moved the canvas */
  3897. panningX: number;
  3898. /** If the canvas has finished repositioned itself */
  3899. repositionCanvas: boolean;
  3900. /** The current selected keyframe on which we can perform actions (update frame and value) */
  3901. actionableKeyframe: IActionableKeyFrame;
  3902. /** The current value scale */
  3903. valueScaleType: CurveScale;
  3904. /** The amount scale to update valyes */
  3905. valueScale: number;
  3906. /** The canvas proportion width */
  3907. canvasLength: number;
  3908. /** The last frame to be created. */
  3909. lastKeyframeCreated: BABYLON.Nullable<string>;
  3910. /** The canvas scale width */
  3911. canvasWidthScale: number;
  3912. /** How the resize of the canvas will change the value axis */
  3913. valuesPositionResize: number;
  3914. /** How many frames are currently visible in the canvas */
  3915. framesInCanvasView: {
  3916. from: number;
  3917. to: number;
  3918. };
  3919. /** Limits the maximum frame from which a keyframe can move in the curve. So it wont overlap the curve*/
  3920. maxFrame: number | undefined;
  3921. /** Limits the minimum frame from which a keyframe can move in the curve. So it wont overlap the curve*/
  3922. minFrame: number | undefined;
  3923. /** How many frames have been increased or reduced on a windows resize event */
  3924. framesResized: number;
  3925. }
  3926. /**
  3927. * BABYLON.Animation curve Editor Component
  3928. * This component allows the use to create animations visualy from the Babylon.js playground.
  3929. * The principal features for the curve editor are:
  3930. * 1. Create animations for the selected entity properties.
  3931. * 2. Edit the animations a selected entity has.
  3932. * 3. You can load and save animations locally and from the snippet server.
  3933. * 4. After creating an animation you need to add keyframes.
  3934. * 5. You can update the frame and value of each frame.
  3935. * @property {() => void} playOrPause is the event to stop or inititate the animation on the playground scene
  3936. * @property {Scene} scene is the scene object from the playground
  3937. * @property {IAnimatable | BABYLON.TargetedAnimation} entity represents the selected entity which will be the animations target
  3938. * @property {LockObject} lockObject the inherited object to lock for modification with the BABYLON.Observable pattern
  3939. * @property {GlobalState} globalState the playground globalstate
  3940. * Check the IAnimationCurveEditorComponentState for state functionality
  3941. */
  3942. export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, IAnimationCurveEditorComponentState> {
  3943. readonly _entityName: string;
  3944. private _snippetUrl;
  3945. private _heightScale;
  3946. private _scaleFactor;
  3947. private _currentScale;
  3948. private _pixelFrameUnit;
  3949. private _svgKeyframes;
  3950. private _isPlaying;
  3951. private _graphCanvas;
  3952. private _editor;
  3953. private _editorWindow;
  3954. private _resizeId;
  3955. private _svgCanvas;
  3956. private _isTargetedAnimation;
  3957. private _resizedTimeline;
  3958. private _onBeforeRenderObserver;
  3959. private _mainAnimatable;
  3960. constructor(props: IAnimationCurveEditorComponentProps);
  3961. componentDidMount(): void;
  3962. /**
  3963. * Connects scene frame with curve editor animation
  3964. * @param prevProps previous Props
  3965. * @param prevState previous State
  3966. */
  3967. componentDidUpdate(prevProps: IAnimationCurveEditorComponentProps, prevState: any): void;
  3968. /**
  3969. * Clean up observer and listeners
  3970. */
  3971. componentWillUnmount(): void;
  3972. /**
  3973. * Set the frame on the animation
  3974. * @param value number of frame to move animation
  3975. */
  3976. onCurrentFrameChangeScene(value: number): void;
  3977. /**
  3978. * Notifications
  3979. * To add notification we set the state and clear to make the notification bar hide.
  3980. */
  3981. clearNotification: () => void;
  3982. /**
  3983. * Zoom and Scroll
  3984. * This section handles zoom and scroll
  3985. * of the graph area.
  3986. */
  3987. zoom: (e: React.WheelEvent<HTMLDivElement>) => void;
  3988. /**
  3989. * Returns Array with labels and values for Frame axis in Canvas
  3990. */
  3991. setFrameAxis(currentLength: number): {
  3992. value: number;
  3993. label: number;
  3994. }[];
  3995. /**
  3996. * Returns Array with labels, lines and values for Value axis in Canvas
  3997. */
  3998. setValueLines(): {
  3999. value: number;
  4000. label: string;
  4001. }[];
  4002. /**
  4003. * Creates a string id from animation name and the keyframe index
  4004. * @param animationName Name of animation
  4005. * @param keyframeIndex Index of keyframe
  4006. */
  4007. encodeCurveId(animationName: string, keyframeIndex: number): string;
  4008. /**
  4009. * Returns the animation keyframe index and the animation selected coordinate (x, y, z)
  4010. * @param id curve id created with index and coordinate of animation
  4011. */
  4012. decodeCurveId(id: string): {
  4013. order: number;
  4014. coordinate: number;
  4015. };
  4016. /**
  4017. * Returns the value from a keyframe
  4018. * @param id curve id
  4019. */
  4020. getKeyframeValueFromAnimation(id: string): {
  4021. frame: number;
  4022. value: number;
  4023. } | undefined;
  4024. /**
  4025. * Keyframe Manipulation
  4026. * This section handles events from SvgDraggableArea.
  4027. * @param id selected keyframe id
  4028. * @param multiselect if we are multiselecting keyframes
  4029. */
  4030. selectKeyframe: (id: string, multiselect: boolean) => void;
  4031. /**
  4032. * Determine if two control points are collinear (flat tangent)
  4033. * @param kf keyframe point
  4034. */
  4035. hasCollinearPoints: (kf: IKeyframeSvgPoint | undefined) => boolean;
  4036. /**
  4037. * Returns the previous and next keyframe from a selected frame.
  4038. * @param frame index of keyframe
  4039. */
  4040. getPreviousAndNextKeyframe: (frame: number) => {
  4041. prev: number | undefined;
  4042. next: number | undefined;
  4043. };
  4044. /**
  4045. * Selects a keyframe in animation based on its Id
  4046. * @param id keyframe id
  4047. * @param actionableKeyframe selected keyframe
  4048. */
  4049. selectKeyframeFromId: (id: string, actionableKeyframe: IActionableKeyFrame) => void;
  4050. /**
  4051. * Resets the current selected keyframe as an updatable pairs by Graph BABYLON.GUI.Control Bar
  4052. */
  4053. resetActionableKeyframe: () => void;
  4054. /**
  4055. * Sets the selected control point.
  4056. * @param type left or right control point
  4057. * @param id id of selected svg keyframe
  4058. */
  4059. selectedControlPoint: (type: string, id: string) => void;
  4060. /**
  4061. * Sets the selected control point.
  4062. */
  4063. deselectKeyframes: () => void;
  4064. /**
  4065. * Update the BABYLON.Animation Key values based on its type
  4066. * @param dataType Type of animated property
  4067. * @param newValue New value of animated property
  4068. * @param coordinate The selected property coordinate to animate (i.e. x, y, z)
  4069. */
  4070. 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;
  4071. /**
  4072. * BABYLON.Animation should always have a keyframe at Frame Zero
  4073. * @param keys BABYLON.Animation key collection
  4074. */
  4075. forceFrameZeroToExist(keys: BABYLON.IAnimationKey[]): void;
  4076. /**
  4077. * Renders SVG points with dragging of the curve
  4078. * @param updatedSvgKeyFrame selected keyframe to update
  4079. * @param id curve id where the keyframe is localted
  4080. */
  4081. renderPoints: (updatedSvgKeyFrame: IKeyframeSvgPoint, id: string) => void;
  4082. /**
  4083. * Updates the left control point on render points
  4084. * @param updatedSvgKeyFrame selected svg keyframe
  4085. * @param key animation key to update
  4086. * @param dataType type of animation
  4087. * @param coordinate coordinate to change its value (x, y, or z)
  4088. */
  4089. updateLeftControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: BABYLON.IAnimationKey, dataType: number, coordinate: number): void;
  4090. /**
  4091. * Updates the right control point on render points
  4092. * @param updatedSvgKeyFrame selected svg keyframe
  4093. * @param key animation key to update
  4094. * @param dataType type of animation
  4095. * @param coordinate coordinate to change its value (x, y, or z)
  4096. */
  4097. updateRightControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: BABYLON.IAnimationKey, dataType: number, coordinate: number): void;
  4098. /**
  4099. * Get the current BABYLON.GUI.Control Point weight (how far the X value is multiplied)
  4100. * @param updatedSvgKeyFrame svg keyframe from which to calculate the distance to control point
  4101. */
  4102. getControlPointWeight(updatedSvgKeyFrame: IKeyframeSvgPoint): number;
  4103. /**
  4104. * Handles a Frame selection change
  4105. * @event event input event to change frame value
  4106. */
  4107. handleFrameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  4108. /**
  4109. * Handles how a value change on a selected frame
  4110. * @event event input event to change the value of the keyframe
  4111. */
  4112. handleValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  4113. /**
  4114. * Set the Keyframe from input control in Graph BABYLON.GUI.Control Bar
  4115. * @param actionableKeyframe selected keyframe
  4116. */
  4117. setKeyframeValueFromInput: (actionableKeyframe: IActionableKeyFrame) => void;
  4118. /**
  4119. * Sets the SVG Keyframe value
  4120. * Finds the selected svg keyframe and passes the correct value to the correct animated keyframe.
  4121. */
  4122. setKeyframeValue: () => void;
  4123. /**
  4124. * Set the flat tangent to the current selected control points.
  4125. * get the selected control point and updates its tangent to flat the tangent
  4126. */
  4127. setFlatTangent: () => void;
  4128. /**
  4129. * Sets Broken mode of lines
  4130. * Broken mode enables control points not to be connected on drag
  4131. */
  4132. setBrokenMode: () => void;
  4133. /**
  4134. * Sets a control point to be a linear interpolation with its Keyframe
  4135. * If left or right control point is selected, sets the Tangent value to match the next keyframe and become linear
  4136. */
  4137. setLerpToActiveControlPoint: () => void;
  4138. /**
  4139. * Adds a new keyframe to the curve on canvas click
  4140. */
  4141. addKeyframeClick: () => void;
  4142. /**
  4143. * Remove keyframe on click
  4144. */
  4145. removeKeyframeClick: () => void;
  4146. /**
  4147. * Remove the selected keyframes
  4148. * @param points the selected keyframes to remove
  4149. */
  4150. removeKeyframes: (points: IKeyframeSvgPoint[]) => void;
  4151. /**
  4152. * Adds a keyframe
  4153. * @event event Mouse click event to generate new keyframe
  4154. */
  4155. addKeyFrame(event: React.MouseEvent<SVGSVGElement>): void;
  4156. /**
  4157. * Curve Rendering Functions
  4158. * This section handles how to render curves.
  4159. * @param point point in canvas
  4160. * @param index index of svg
  4161. */
  4162. setKeyframePointLinear(point: BABYLON.Vector2, index: number): void;
  4163. /**
  4164. * Flats the tangents of the selected keyframes
  4165. * @param keyframes Selected keyframes to flat its tangents
  4166. * @param dataType Type of animated property
  4167. */
  4168. flatTangents(keyframes: BABYLON.IAnimationKey[], dataType: number): BABYLON.IAnimationKey[];
  4169. /**
  4170. * Return a Keyframe zero value depending on Type
  4171. * @param dataType Type of animated property
  4172. */
  4173. returnZero(dataType: number): 0 | BABYLON.Vector3 | BABYLON.Quaternion | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Vector2 | BABYLON.Size;
  4174. /**
  4175. * Return the keyframe value as an array depending on type
  4176. * @param valueType type of animated property
  4177. * @param value the value of the property
  4178. */
  4179. getValueAsArray(valueType: number, value: number | BABYLON.Vector2 | BABYLON.Vector3 | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Size | BABYLON.Quaternion): number[];
  4180. /**
  4181. * Sets the keyframe value as an array depending on type
  4182. * @param valueType type of animated property
  4183. * @param arrayValue array to place the correct value
  4184. */
  4185. setValueAsType(valueType: number, arrayValue: number[]): number | BABYLON.Vector3 | BABYLON.Quaternion | BABYLON.Color3 | BABYLON.Color4 | BABYLON.Vector2 | BABYLON.Size;
  4186. /**
  4187. * Returns the SVG Path Data to render the curve
  4188. * @param animation The animation object from where to get its keyframes
  4189. */
  4190. getPathData(animation: BABYLON.Animation | null): ICurveData[] | undefined;
  4191. /**
  4192. * Gets the selected animation properties
  4193. * @param animation BABYLON.Animation
  4194. */
  4195. getAnimationData(animation: BABYLON.Animation): {
  4196. loopMode: number | undefined;
  4197. name: string;
  4198. blendingSpeed: number;
  4199. targetPropertyPath: string[];
  4200. targetProperty: string;
  4201. framesPerSecond: number;
  4202. highestFrame: number;
  4203. usesTangents: boolean;
  4204. easingType: string | undefined;
  4205. easingMode: number | undefined;
  4206. valueType: number;
  4207. };
  4208. /**
  4209. * Calculate the correct tangents to be linear
  4210. * @param keyframes the animation keyframes
  4211. */
  4212. calculateLinearTangents(keyframes: BABYLON.IAnimationKey[]): BABYLON.IAnimationKey[];
  4213. /**
  4214. * Calculates the proper linear tangents if there is no tangents defined
  4215. * Before calculation of svg path we need to calculate the proper tangents
  4216. * @param keyframes the animation keyframes
  4217. * @param data initial svg path
  4218. * @param middle the middle of the canvas to draw the curve
  4219. * @param type type of animation
  4220. * @param coordinate (x, y, z) value
  4221. * @param animationName The animation name to generate the curve id
  4222. */
  4223. curvePathWithoutTangents(keyframes: BABYLON.IAnimationKey[], data: string, middle: number, type: number, coordinate: number, animationName: string): string;
  4224. /**
  4225. * Calculates the curve data and control points for animation
  4226. * @param keyframes the animation keyframes
  4227. * @param data initial svg path
  4228. * @param middle the middle of the canvas to draw the curve
  4229. * @param type type of animation
  4230. * @param coordinate (x, y, z) value
  4231. * @param animationName The animation name to generate the curve id
  4232. */
  4233. curvePathWithTangents(keyframes: BABYLON.IAnimationKey[], data: string, middle: number, type: number, coordinate: number, animationName: string): string;
  4234. /**
  4235. * Calculates a curve path from predefined easing function
  4236. * @param keyframes animation keyframes
  4237. * @param data the initial svg path
  4238. * @param middle the center of the canvas
  4239. * @param easingFunction the easing function to calculate the curve from (easing function should generate the correct curve)
  4240. */
  4241. curvePath(keyframes: BABYLON.IAnimationKey[], data: string, middle: number, easingFunction: BABYLON.EasingFunction): string;
  4242. /**
  4243. * Sets the proper SVG Keyframe points
  4244. * @param controlPoints array of points to generate the svg keyframe collection
  4245. * @param index index of the animation
  4246. * @param keyframesCount How many keyframes should we process
  4247. */
  4248. setKeyframePoint(controlPoints: BABYLON.Vector2[], index: number, keyframesCount: number): void;
  4249. /**
  4250. * Creates curve based on interpolated points
  4251. * @param p0 starting point of curve
  4252. * @param p1 first control point
  4253. * @param u distance between p0 and p3 as percentage to affect p1
  4254. * @param p2 second control point
  4255. * @param v distance between p0 and p3 as percentage to affect p2
  4256. * @param p3 finish point of curve
  4257. */
  4258. interpolateControlPoints(p0: BABYLON.Vector2, p1: BABYLON.Vector2, u: number, p2: BABYLON.Vector2, v: number, p3: BABYLON.Vector2): BABYLON.Vector2[] | undefined;
  4259. /**
  4260. * Deselects the current animations
  4261. */
  4262. deselectAnimation: () => void;
  4263. /**
  4264. * Remove all curves from canvas
  4265. */
  4266. cleanCanvas: () => void;
  4267. /**
  4268. * Selects the animation and renders the curve
  4269. * @param animation the animation to select and render as curve
  4270. * @param coordinate the property coordinate (x, y, z) to represent as curve
  4271. */
  4272. selectAnimation: (animation: BABYLON.Animation, coordinate?: SelectedCoordinate | undefined) => void;
  4273. /**
  4274. * Set the state for the last selected keyframe
  4275. */
  4276. postSelectionEvents: () => void;
  4277. /**
  4278. * Set main animatable to play or pause the animation
  4279. */
  4280. setMainAnimatable(): void;
  4281. /**
  4282. * Check if animation is playing
  4283. */
  4284. isAnimationPlaying(): boolean;
  4285. /**
  4286. * Stops the current playing animation
  4287. */
  4288. stopAnimation(): void;
  4289. /**
  4290. * Set if animation is looping and stops animation after it
  4291. */
  4292. setIsLooping: () => void;
  4293. setFramesPerSecond: (fps: number) => void;
  4294. /**
  4295. * Check if the animation has easing predefined
  4296. */
  4297. analyzeAnimationForLerp(animation: BABYLON.Animation | null): boolean;
  4298. /**
  4299. * Change the current frame in the canvas and timeline
  4300. * @param frame value to update on canvas and timeline
  4301. */
  4302. changeCurrentFrame: (frame: number) => void;
  4303. /**
  4304. * Calculate the value of the selected frame in curve
  4305. * @param frame the frame to calculate its current value on the curve
  4306. */
  4307. calculateCurrentPointInCurve: (frame: number) => number | undefined;
  4308. /**
  4309. * Center the position the canvas depending on Keyframe value and frame
  4310. * @param keyframe the keyframe to set as middle point
  4311. */
  4312. setCanvasPosition: (keyframe: BABYLON.IAnimationKey) => void;
  4313. /**
  4314. * Sets the current frame
  4315. * @param frame the value to set the frame
  4316. */
  4317. setCurrentFrame: (frame: number) => void;
  4318. /**
  4319. * Change the timeline animation frame limit
  4320. */
  4321. changeAnimationLimit: (limit: number) => void;
  4322. /**
  4323. * Update the frame in the selected Keyframe
  4324. */
  4325. updateFrameInKeyFrame: (frame: number, index: number) => void;
  4326. /**
  4327. * Plays or pauses the animation
  4328. * @param direction 0 stops the animation, 1 starts the animation, -1 plays animation backwards
  4329. */
  4330. playPause: (direction: number) => void;
  4331. /**
  4332. * Set the frame to selected position on canvas
  4333. * @event e click event on the SVG canvas
  4334. */
  4335. moveFrameTo(e: React.MouseEvent<SVGRectElement, MouseEvent>): void;
  4336. /**
  4337. * Register the observables for the state
  4338. */
  4339. registerObs(): void;
  4340. /**
  4341. * Checks if the current frame macthes the parameter
  4342. * @param frame The frame to check
  4343. */
  4344. isCurrentFrame(frame: number): boolean;
  4345. /**
  4346. * Set the Vertical Panning State
  4347. * @param panningY the vertical panning value
  4348. */
  4349. setPanningY: (panningY: number) => void;
  4350. /**
  4351. * Set the Vertical Panning State
  4352. * @param panningX the horizontal panning value
  4353. */
  4354. setPanningX: (panningX: number) => void;
  4355. /**
  4356. * Set state when canvas has been respositioned
  4357. */
  4358. canvasPositionEnded: () => void;
  4359. /**
  4360. *
  4361. * @param message The message to display in the notification bar
  4362. */
  4363. setNotificationMessage: (message: string) => void;
  4364. /**
  4365. * Zoom or frame the selected keyframes in the available canvas space
  4366. */
  4367. frameSelectedKeyframes: () => void;
  4368. /**
  4369. * Handle the frames quantity and scale on Window resize width
  4370. */
  4371. onWindowResizeWidth: () => void;
  4372. /**
  4373. * Set the state of frames Resized on window resize event
  4374. * @param framesResized how many frame have been added or removed on resize
  4375. */
  4376. onWindowEndResize: (framesResized: number) => void;
  4377. /** Resizes the width of the timeline */
  4378. onTimelineResize: () => void;
  4379. render(): JSX.Element;
  4380. }
  4381. }
  4382. declare module INSPECTOR {
  4383. interface IPlayheadProps {
  4384. frame: number;
  4385. offset: number;
  4386. onCurrentFrameChange: (frame: number) => void;
  4387. }
  4388. /**
  4389. * Renders the Playhead
  4390. */
  4391. export class Playhead extends React.Component<IPlayheadProps> {
  4392. private _direction;
  4393. private _active;
  4394. constructor(props: IPlayheadProps);
  4395. dragStart(e: React.TouchEvent<HTMLDivElement>): void;
  4396. dragStart(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
  4397. drag(e: React.TouchEvent<HTMLDivElement>): void;
  4398. drag(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
  4399. dragEnd(e: React.TouchEvent<HTMLDivElement>): void;
  4400. dragEnd(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
  4401. calculateMove(): string;
  4402. render(): JSX.Element;
  4403. }
  4404. }
  4405. declare module INSPECTOR {
  4406. export const Contrast: IToolData;
  4407. }
  4408. declare module INSPECTOR {
  4409. export interface IButtonLineComponentProps {
  4410. data: string;
  4411. tooltip: string;
  4412. }
  4413. export class DraggableLineComponent extends React.Component<IButtonLineComponentProps> {
  4414. constructor(props: IButtonLineComponentProps);
  4415. render(): JSX.Element;
  4416. }
  4417. }
  4418. declare module INSPECTOR {
  4419. export class Popup {
  4420. static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
  4421. private static _CopyStyles;
  4422. }
  4423. }