babylon.inspector.d.ts 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298
  1. declare module INSPECTOR {
  2. class Inspector {
  3. private _c2diwrapper;
  4. /** The panel displayed at the top of the inspector */
  5. private _topPanel;
  6. /** The div containing the content of the active tab */
  7. private _tabPanel;
  8. /** The panel containing the list if items */
  9. private _tabbar;
  10. private _scene;
  11. /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
  12. static DOCUMENT: HTMLDocument;
  13. /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
  14. static WINDOW: Window;
  15. /** True if the inspector is built as a popup tab */
  16. private _popupMode;
  17. /** The original canvas style, before applying the inspector*/
  18. private _canvasStyle;
  19. private _initialTab;
  20. private _parentElement;
  21. /** The inspector is created with the given engine.
  22. * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
  23. * If the parameter 'popup' is true, the inspector is created in another popup.
  24. */
  25. constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: BABYLON.Nullable<HTMLElement>, newColors?: {
  26. backgroundColor?: string;
  27. backgroundColorLighter?: string;
  28. backgroundColorLighter2?: string;
  29. backgroundColorLighter3?: string;
  30. color?: string;
  31. colorTop?: string;
  32. colorBot?: string;
  33. });
  34. /**
  35. * If the given element has a position 'asbolute' or 'relative',
  36. * returns the first parent of the given element that has a position 'relative' or 'absolute'.
  37. * If the given element has no position, returns the first parent
  38. *
  39. */
  40. private _getRelativeParent(elem, lookForAbsoluteOrRelative?);
  41. /** Build the inspector panel in the given HTML element */
  42. private _buildInspector(parent);
  43. readonly scene: BABYLON.Scene;
  44. readonly popupMode: boolean;
  45. /**
  46. * Filter the list of item present in the tree.
  47. * All item returned should have the given filter contained in the item id.
  48. */
  49. filterItem(filter: string): void;
  50. /** Display the mesh tab on the given object */
  51. displayObjectDetails(mesh: BABYLON.AbstractMesh): void;
  52. /** Clean the whole tree of item and rebuilds it */
  53. refresh(): void;
  54. /** Remove the inspector panel when it's built as a right panel:
  55. * remove the right panel and remove the wrapper
  56. */
  57. dispose(): void;
  58. /** Open the inspector in a new popup
  59. * Set 'firstTime' to true if there is no inspector created beforehands
  60. */
  61. openPopup(firstTime?: boolean): void;
  62. getActiveTabIndex(): number;
  63. }
  64. }
  65. declare module INSPECTOR {
  66. var PROPERTIES: {
  67. format: (obj: any) => any;
  68. 'type_not_defined': {
  69. properties: any[];
  70. format: () => string;
  71. };
  72. 'Vector2': {
  73. type: typeof BABYLON.Vector2;
  74. format: (vec: BABYLON.Vector2) => string;
  75. };
  76. 'Vector3': {
  77. type: typeof BABYLON.Vector3;
  78. format: (vec: BABYLON.Vector3) => string;
  79. };
  80. 'Color3': {
  81. type: typeof BABYLON.Color3;
  82. format: (color: BABYLON.Color3) => string;
  83. slider: {
  84. r: {
  85. min: number;
  86. max: number;
  87. step: number;
  88. };
  89. g: {
  90. min: number;
  91. max: number;
  92. step: number;
  93. };
  94. b: {
  95. min: number;
  96. max: number;
  97. step: number;
  98. };
  99. };
  100. };
  101. 'Color4': {
  102. type: typeof BABYLON.Color4;
  103. format: (color: BABYLON.Color4) => string;
  104. slider: {
  105. r: {
  106. min: number;
  107. max: number;
  108. step: number;
  109. };
  110. g: {
  111. min: number;
  112. max: number;
  113. step: number;
  114. };
  115. b: {
  116. min: number;
  117. max: number;
  118. step: number;
  119. };
  120. };
  121. };
  122. 'Quaternion': {
  123. type: typeof BABYLON.Quaternion;
  124. };
  125. 'Size': {
  126. type: typeof BABYLON.Size;
  127. format: (size: BABYLON.Size) => string;
  128. };
  129. 'Texture': {
  130. type: typeof BABYLON.Texture;
  131. format: (tex: BABYLON.Texture) => string;
  132. };
  133. 'RenderTargetTexture': {
  134. type: typeof BABYLON.RenderTargetTexture;
  135. };
  136. 'DynamicTexture': {
  137. type: typeof BABYLON.DynamicTexture;
  138. };
  139. 'BaseTexture': {
  140. type: typeof BABYLON.BaseTexture;
  141. };
  142. 'CubeTexture': {
  143. type: typeof BABYLON.CubeTexture;
  144. };
  145. 'HDRCubeTexture': {
  146. type: typeof BABYLON.HDRCubeTexture;
  147. };
  148. 'Sound': {
  149. type: typeof BABYLON.Sound;
  150. };
  151. 'ArcRotateCamera': {
  152. type: typeof BABYLON.ArcRotateCamera;
  153. slider: {
  154. alpha: {
  155. min: number;
  156. max: number;
  157. step: number;
  158. };
  159. beta: {
  160. min: number;
  161. max: number;
  162. step: number;
  163. };
  164. fov: {
  165. min: number;
  166. max: number;
  167. step: number;
  168. };
  169. };
  170. };
  171. 'FreeCamera': {
  172. type: typeof BABYLON.FreeCamera;
  173. slider: {
  174. fov: {
  175. min: number;
  176. max: number;
  177. step: number;
  178. };
  179. };
  180. };
  181. 'Scene': {
  182. type: typeof BABYLON.Scene;
  183. };
  184. 'Mesh': {
  185. type: typeof BABYLON.Mesh;
  186. format: (m: BABYLON.Mesh) => string;
  187. slider: {
  188. visibility: {
  189. min: number;
  190. max: number;
  191. step: number;
  192. };
  193. };
  194. };
  195. 'StandardMaterial': {
  196. type: typeof BABYLON.StandardMaterial;
  197. format: (mat: BABYLON.StandardMaterial) => string;
  198. slider: {
  199. alpha: {
  200. min: number;
  201. max: number;
  202. step: number;
  203. };
  204. };
  205. };
  206. 'PBRMaterial': {
  207. type: typeof BABYLON.PBRMaterial;
  208. slider: {
  209. alpha: {
  210. min: number;
  211. max: number;
  212. step: number;
  213. };
  214. };
  215. };
  216. 'PhysicsImpostor': {
  217. type: typeof BABYLON.PhysicsImpostor;
  218. };
  219. };
  220. }
  221. declare module INSPECTOR {
  222. /**
  223. * Function that add gui objects properties to the variable PROPERTIES
  224. */
  225. function loadGUIProperties(): void;
  226. }
  227. declare module INSPECTOR {
  228. /**
  229. * Represents a html div element.
  230. * The div is built when an instance of BasicElement is created.
  231. */
  232. abstract class BasicElement {
  233. protected _div: HTMLElement;
  234. constructor();
  235. /**
  236. * Returns the div element
  237. */
  238. toHtml(): HTMLElement;
  239. /**
  240. * Build the html element
  241. */
  242. protected _build(): void;
  243. abstract update(data?: any): void;
  244. /** Default dispose method if needed */
  245. dispose(): void;
  246. }
  247. }
  248. declare module INSPECTOR {
  249. abstract class Adapter {
  250. protected _obj: any;
  251. private static _name;
  252. constructor(obj: any);
  253. /** Returns the name displayed in the tree */
  254. abstract id(): string;
  255. /** Returns the type of this object - displayed in the tree */
  256. abstract type(): string;
  257. /** Returns the list of properties to be displayed for this adapter */
  258. abstract getProperties(): Array<PropertyLine>;
  259. /** Returns true if the given object correspond to this */
  260. correspondsTo(obj: any): boolean;
  261. /** Returns the adapter unique name */
  262. readonly name: string;
  263. /**
  264. * Returns the actual object used for this adapter
  265. */
  266. readonly object: any;
  267. /** Returns the list of tools available for this adapter */
  268. abstract getTools(): Array<AbstractTreeTool>;
  269. }
  270. }
  271. declare module INSPECTOR {
  272. class CameraAdapter extends Adapter implements ICameraPOV {
  273. constructor(obj: BABYLON.Camera);
  274. /** Returns the name displayed in the tree */
  275. id(): string;
  276. /** Returns the type of this object - displayed in the tree */
  277. type(): string;
  278. /** Returns the list of properties to be displayed for this adapter */
  279. getProperties(): Array<PropertyLine>;
  280. getTools(): Array<AbstractTreeTool>;
  281. setPOV(): void;
  282. }
  283. }
  284. declare module INSPECTOR {
  285. class PhysicsImpostorAdapter extends Adapter implements IToolVisible {
  286. private _viewer;
  287. private _isVisible;
  288. constructor(obj: BABYLON.PhysicsImpostor, viewer: BABYLON.Debug.PhysicsViewer);
  289. /** Returns the name displayed in the tree */
  290. id(): string;
  291. /** Returns the type of this object - displayed in the tree */
  292. type(): string;
  293. /** Returns the list of properties to be displayed for this adapter */
  294. getProperties(): Array<PropertyLine>;
  295. getTools(): Array<AbstractTreeTool>;
  296. setVisible(b: boolean): void;
  297. isVisible(): boolean;
  298. }
  299. }
  300. declare module INSPECTOR {
  301. class GUIAdapter extends Adapter implements IToolVisible {
  302. constructor(obj: BABYLON.GUI.Control);
  303. /** Returns the name displayed in the tree */
  304. id(): string;
  305. /** Returns the type of this object - displayed in the tree */
  306. type(): string;
  307. /** Returns the list of properties to be displayed for this adapter */
  308. getProperties(): Array<PropertyLine>;
  309. getTools(): Array<AbstractTreeTool>;
  310. setVisible(b: boolean): void;
  311. isVisible(): boolean;
  312. }
  313. }
  314. declare module INSPECTOR {
  315. class SoundAdapter extends Adapter implements ISoundInteractions {
  316. constructor(obj: BABYLON.Sound);
  317. /** Returns the name displayed in the tree */
  318. id(): string;
  319. /** Returns the type of this object - displayed in the tree */
  320. type(): string;
  321. /** Returns the list of properties to be displayed for this adapter */
  322. getProperties(): Array<PropertyLine>;
  323. getTools(): Array<AbstractTreeTool>;
  324. setPlaying(callback: Function): void;
  325. }
  326. }
  327. declare module INSPECTOR {
  328. class TextureAdapter extends Adapter {
  329. constructor(obj: BABYLON.BaseTexture);
  330. /** Returns the name displayed in the tree */
  331. id(): string;
  332. /** Returns the type of this object - displayed in the tree */
  333. type(): string;
  334. /** Returns the list of properties to be displayed for this adapter */
  335. getProperties(): Array<PropertyLine>;
  336. getTools(): Array<AbstractTreeTool>;
  337. }
  338. }
  339. declare module INSPECTOR {
  340. class LightAdapter extends Adapter implements IToolVisible {
  341. constructor(obj: BABYLON.Light);
  342. /** Returns the name displayed in the tree */
  343. id(): string;
  344. /** Returns the type of this object - displayed in the tree */
  345. type(): string;
  346. /** Returns the list of properties to be displayed for this adapter */
  347. getProperties(): Array<PropertyLine>;
  348. getTools(): Array<AbstractTreeTool>;
  349. setVisible(b: boolean): void;
  350. isVisible(): boolean;
  351. }
  352. }
  353. declare module INSPECTOR {
  354. class MaterialAdapter extends Adapter {
  355. constructor(obj: BABYLON.Material);
  356. /** Returns the name displayed in the tree */
  357. id(): string;
  358. /** Returns the type of this object - displayed in the tree */
  359. type(): string;
  360. /** Returns the list of properties to be displayed for this adapter */
  361. getProperties(): Array<PropertyLine>;
  362. /** No tools for a material adapter */
  363. getTools(): Array<AbstractTreeTool>;
  364. }
  365. }
  366. declare module INSPECTOR {
  367. class MeshAdapter extends Adapter implements IToolVisible, IToolDebug, IToolBoundingBox, IToolInfo {
  368. /** Keep track of the axis of the actual object */
  369. private _axesViewer;
  370. private onBeforeRenderObserver;
  371. constructor(mesh: BABYLON.Node);
  372. /** Returns the name displayed in the tree */
  373. id(): string;
  374. /** Returns the type of this object - displayed in the tree */
  375. type(): string;
  376. /** Returns the list of properties to be displayed for this adapter */
  377. getProperties(): Array<PropertyLine>;
  378. getTools(): Array<AbstractTreeTool>;
  379. setVisible(b: boolean): void;
  380. isVisible(): boolean;
  381. isBoxVisible(): boolean;
  382. setBoxVisible(b: boolean): boolean;
  383. debug(enable: boolean): void;
  384. /** Returns some information about this mesh */
  385. getInfo(): string;
  386. /** Draw X, Y and Z axis for the actual object if this adapter.
  387. * Should be called only one time as it will fill this._axis
  388. */
  389. private _drawAxis();
  390. }
  391. }
  392. declare module INSPECTOR {
  393. interface SortDirection {
  394. [property: string]: number;
  395. }
  396. class DetailPanel extends BasicElement {
  397. private _headerRow;
  398. private _detailRows;
  399. private _sortDirection;
  400. constructor(dr?: Array<PropertyLine>);
  401. details: Array<PropertyLine>;
  402. protected _build(): void;
  403. /** Updates the HTML of the detail panel */
  404. update(): void;
  405. /** Add all lines in the html div. Does not sort them! */
  406. private _addDetails();
  407. /**
  408. * Sort the details row by comparing the given property of each row
  409. */
  410. private _sortDetails(property, _direction?);
  411. /**
  412. * Removes all data in the detail panel but keep the header row
  413. */
  414. clean(): void;
  415. /** Overrides basicelement.dispose */
  416. dispose(): void;
  417. /**
  418. * Creates the header row : name, value, id
  419. */
  420. private _createHeaderRow();
  421. }
  422. }
  423. declare module INSPECTOR {
  424. /**
  425. * A property is a link between a data (string) and an object.
  426. */
  427. class Property {
  428. /** The property name */
  429. private _property;
  430. /** The obj this property refers to */
  431. private _obj;
  432. constructor(prop: string, obj: any);
  433. readonly name: string;
  434. value: any;
  435. readonly type: string;
  436. obj: any;
  437. }
  438. }
  439. declare module INSPECTOR {
  440. class PropertyFormatter {
  441. /**
  442. * Format the value of the given property of the given object.
  443. */
  444. static format(obj: any, prop: string): string;
  445. }
  446. /**
  447. * A property line represents a line in the detail panel. This line is composed of :
  448. * - a name (the property name)
  449. * - a value if this property is of a type 'simple' : string, number, boolean, color, texture
  450. * - the type of the value if this property is of a complex type (Vector2, Size, ...)
  451. * - a ID if defined (otherwise an empty string is displayed)
  452. * The original object is sent to the value object who will update it at will.
  453. *
  454. * A property line can contain OTHER property line objects in the case of a complex type.
  455. * If this instance has no link to other instances, its type is ALWAYS a simple one (see above).
  456. *
  457. */
  458. class PropertyLine {
  459. private _property;
  460. private _div;
  461. private _valueDiv;
  462. private _children;
  463. private static _SIMPLE_TYPE;
  464. private static _MARGIN_LEFT;
  465. private _level;
  466. /** The list of viewer element displayed at the end of the line (color, texture...) */
  467. private _elements;
  468. /** The property parent of this one. Used to update the value of this property and to retrieve the correct object */
  469. private _parent;
  470. /** The input element to display if this property is 'simple' in order to update it */
  471. private _input;
  472. /** Display input handler (stored to be removed afterwards) */
  473. private _displayInputHandler;
  474. /** Handler used to validate the input by pressing 'enter' */
  475. private _validateInputHandler;
  476. /** Handler used to validate the input by pressing 'esc' */
  477. private _escapeInputHandler;
  478. /** Handler used on focus out */
  479. private _focusOutInputHandler;
  480. /** Handler used to get mouse position */
  481. private _onMouseDownHandler;
  482. private _onMouseDragHandler;
  483. private _onMouseUpHandler;
  484. private _textValue;
  485. /** Save previous Y mouse position */
  486. private _prevY;
  487. /**Save value while slider is on */
  488. private _preValue;
  489. constructor(prop: Property, parent?: BABYLON.Nullable<PropertyLine>, level?: number);
  490. /**
  491. * Init the input element and al its handler :
  492. * - a click in the window remove the input and restore the old property value
  493. * - enters updates the property
  494. */
  495. private _initInput();
  496. /**
  497. * On enter : validates the new value and removes the input
  498. * On escape : removes the input
  499. */
  500. private _validateInput(e);
  501. validateInput(value: any, forceupdate?: boolean): void;
  502. /**
  503. * On escape : removes the input
  504. */
  505. private _escapeInput(e);
  506. /** Removes the input without validating the new value */
  507. private _removeInputWithoutValidating();
  508. /** Replaces the default display with an input */
  509. private _displayInput(e);
  510. /** Retrieve the correct object from its parent.
  511. * If no parent exists, returns the property value.
  512. * This method is used at each update in case the property object is removed from the original object
  513. * (example : mesh.position = new BABYLON.Vector3 ; the original vector3 object is deleted from the mesh).
  514. */
  515. updateObject(): any;
  516. readonly name: string;
  517. readonly value: any;
  518. readonly type: string;
  519. /**
  520. * Creates elements that wil be displayed on a property line, depending on the
  521. * type of the property.
  522. */
  523. private _createElements();
  524. private _displayValueContent();
  525. /** Delete properly this property line.
  526. * Removes itself from the scheduler.
  527. * Dispose all viewer element (color, texture...)
  528. */
  529. dispose(): void;
  530. /** Updates the content of _valueDiv with the value of the property,
  531. * and all HTML element correpsonding to this type.
  532. * Elements are updated as well
  533. */
  534. private _updateValue();
  535. /**
  536. * Update the property division with the new property value.
  537. * If this property is complex, update its child, otherwise update its text content
  538. */
  539. update(): void;
  540. /**
  541. * Returns true if the type of this property is simple, false otherwise.
  542. * Returns true if the value is null
  543. */
  544. private _isSimple();
  545. toHtml(): HTMLElement;
  546. closeDetails(): void;
  547. /**
  548. * Add sub properties in case of a complex type
  549. */
  550. private _addDetails();
  551. /**
  552. * Refresh mouse position on y axis
  553. * @param e
  554. */
  555. private _onMouseDrag(e);
  556. /**
  557. * Save new value from slider
  558. * @param e
  559. */
  560. private _onMouseUp(e);
  561. /**
  562. * Start record mouse position
  563. * @param e
  564. */
  565. private _onMouseDown(e);
  566. /**
  567. * Create input entry
  568. */
  569. private _checkboxInput();
  570. private _rangeInput();
  571. private _rangeHandler();
  572. private _isSliderType();
  573. private _getSliderProperty();
  574. }
  575. }
  576. declare module INSPECTOR {
  577. /**
  578. * Display a very small div corresponding to the given color
  579. */
  580. class ColorElement extends BasicElement {
  581. constructor(color: BABYLON.Color4 | BABYLON.Color3);
  582. update(color?: BABYLON.Color4 | BABYLON.Color3): void;
  583. private _toRgba(color);
  584. }
  585. }
  586. declare module INSPECTOR {
  587. /**
  588. * Represents a html div element.
  589. * The div is built when an instance of BasicElement is created.
  590. */
  591. class ColorPickerElement extends BasicElement {
  592. protected _input: HTMLInputElement;
  593. private pline;
  594. constructor(color: BABYLON.Color4 | BABYLON.Color3, propertyLine: PropertyLine);
  595. update(color?: BABYLON.Color4 | BABYLON.Color3): void;
  596. private _toRgba(color);
  597. }
  598. }
  599. declare module INSPECTOR {
  600. /**
  601. * Display a very small div. A new canvas is created, with a new Babylon.js scene, containing only the
  602. * cube texture in a cube
  603. */
  604. class CubeTextureElement extends BasicElement {
  605. /** The big div displaying the full image */
  606. private _textureDiv;
  607. private _engine;
  608. protected _scene: BABYLON.Scene;
  609. protected _cube: BABYLON.Mesh;
  610. private _canvas;
  611. protected _textureUrl: string;
  612. private _pause;
  613. /** The texture given as a parameter should be cube. */
  614. constructor(tex: BABYLON.Texture);
  615. update(tex?: BABYLON.Texture): void;
  616. /** Creates the box */
  617. protected _populateScene(): void;
  618. /** Init the babylon engine */
  619. private _initEngine();
  620. private _showViewer(mode);
  621. /** Removes properly the babylon engine */
  622. dispose(): void;
  623. }
  624. }
  625. declare module INSPECTOR {
  626. /**
  627. * Display a very small div. A new canvas is created, with a new Babylon.js scene, containing only the
  628. * cube texture in a cube
  629. */
  630. class HDRCubeTextureElement extends CubeTextureElement {
  631. /** The texture given as a parameter should be cube. */
  632. constructor(tex: BABYLON.Texture);
  633. /** Creates the box */
  634. protected _populateScene(): void;
  635. }
  636. }
  637. declare module INSPECTOR {
  638. /**
  639. * A search bar can be used to filter elements in the tree panel.
  640. * At each keypress on the input, the treepanel will be filtered.
  641. */
  642. class SearchBar extends BasicElement {
  643. private _tab;
  644. private _inputElement;
  645. constructor(tab: PropertyTab);
  646. /** Delete all characters typped in the input element */
  647. reset(): void;
  648. update(): void;
  649. }
  650. }
  651. declare module INSPECTOR {
  652. /**
  653. * Display a very small div corresponding to the given texture. On mouse over, display the full image
  654. */
  655. class TextureElement extends BasicElement {
  656. /** The big div displaying the full image */
  657. private _textureDiv;
  658. constructor(tex: BABYLON.Texture);
  659. update(tex?: BABYLON.Texture): void;
  660. private _showViewer(mode);
  661. }
  662. }
  663. declare module INSPECTOR {
  664. /**
  665. * Creates a tooltip for the parent of the given html element
  666. */
  667. class Tooltip {
  668. /** The tooltip is displayed for this element */
  669. private _elem;
  670. /** The tooltip div */
  671. private _infoDiv;
  672. constructor(elem: HTMLElement, tip: string, attachTo?: BABYLON.Nullable<HTMLElement>);
  673. }
  674. }
  675. declare module INSPECTOR {
  676. class Helpers {
  677. /**
  678. * Returns the type of the given object. First
  679. * uses getClassName. If nothing is returned, used the type of the constructor
  680. */
  681. static GET_TYPE(obj: any): string;
  682. /**
  683. * Check if some properties are defined for the given type.
  684. */
  685. private static _CheckIfTypeExists(type);
  686. /**
  687. * Returns true if the user browser is edge.
  688. */
  689. static IsBrowserEdge(): boolean;
  690. /**
  691. * Returns the name of the type of the given object, where the name
  692. * is in PROPERTIES constant.
  693. * Returns 'Undefined' if no type exists for this object
  694. */
  695. private static _GetTypeFor(obj);
  696. /**
  697. * Returns the name of a function (workaround to get object type for IE11)
  698. */
  699. private static _GetFnName(fn);
  700. /** Send the event which name is given in parameter to the window */
  701. static SEND_EVENT(eventName: string): void;
  702. /** Returns the given number with 2 decimal number max if a decimal part exists */
  703. static Trunc(nb: number): number;
  704. /**
  705. * Useful function used to create a div
  706. */
  707. static CreateDiv(className?: BABYLON.Nullable<string>, parent?: HTMLElement): HTMLElement;
  708. /**
  709. * Useful function used to create a input
  710. */
  711. static CreateInput(className?: string, parent?: HTMLElement): HTMLInputElement;
  712. static CreateElement(element: string, className?: BABYLON.Nullable<string>, parent?: HTMLElement): HTMLElement;
  713. /**
  714. * Removes all children of the given div.
  715. */
  716. static CleanDiv(div: HTMLElement): void;
  717. /**
  718. * Returns the true value of the given CSS Attribute from the given element (in percentage or in pixel, as it was specified in the css)
  719. */
  720. static Css(elem: HTMLElement, cssAttribute: string): string;
  721. static LoadScript(): void;
  722. static IsSystemName(name: string): boolean;
  723. /**
  724. * Return an array of PropertyLine for an obj
  725. * @param obj
  726. */
  727. static GetAllLinesProperties(obj: any): Array<PropertyLine>;
  728. /**
  729. * Returns an array of string corresponding to tjhe list of properties of the object to be displayed
  730. * @param obj
  731. */
  732. static GetAllLinesPropertiesAsString(obj: any): Array<string>;
  733. static Capitalize(str: string): string;
  734. }
  735. }
  736. declare module INSPECTOR {
  737. class Scheduler {
  738. private static _instance;
  739. /** The number of the set interval */
  740. private _timer;
  741. /** Is this scheduler in pause ? */
  742. pause: boolean;
  743. /** All properties are refreshed every 250ms */
  744. static REFRESH_TIME: number;
  745. /** The list of data to update */
  746. private _updatableProperties;
  747. constructor();
  748. static getInstance(): Scheduler;
  749. /** Add a property line to be updated every X ms */
  750. add(prop: PropertyLine): void;
  751. /** Removes the given property from the list of properties to update */
  752. remove(prop: PropertyLine): void;
  753. private _update();
  754. }
  755. }
  756. declare module INSPECTOR {
  757. abstract class Tab extends BasicElement {
  758. protected _tabbar: TabBar;
  759. name: string;
  760. protected _isActive: boolean;
  761. protected _panel: HTMLDivElement;
  762. constructor(tabbar: TabBar, name: string);
  763. /** True if the tab is active, false otherwise */
  764. isActive(): boolean;
  765. protected _build(): void;
  766. /** Set this tab as active or not, depending on the current state */
  767. active(b: boolean): void;
  768. update(): void;
  769. /** Creates the tab panel for this tab. */
  770. getPanel(): HTMLElement;
  771. /** Add this in the propertytab with the searchbar */
  772. filter(str: string): void;
  773. /** Dispose properly this tab */
  774. abstract dispose(): void;
  775. /** Select an item in the tree */
  776. select(item: TreeItem): void;
  777. /**
  778. * Returns the total width in pixel of this tab, 0 by default
  779. */
  780. getPixelWidth(): number;
  781. }
  782. }
  783. declare function Split(elements: HTMLDivElement[], options: any): void;
  784. declare module INSPECTOR {
  785. /**
  786. * A Property tab can creates two panels:
  787. * a tree panel and a detail panel,
  788. * in which properties will be displayed.
  789. * Both panels are separated by a resize bar
  790. */
  791. abstract class PropertyTab extends Tab {
  792. protected _inspector: Inspector;
  793. /** The panel containing a list of items */
  794. protected _treePanel: HTMLElement;
  795. /** The panel containing a list if properties corresponding to an item */
  796. protected _detailsPanel: DetailPanel;
  797. protected _treeItems: Array<TreeItem>;
  798. protected _searchBar: SearchBar;
  799. constructor(tabbar: TabBar, name: string, insp: Inspector);
  800. /** Overrides dispose */
  801. dispose(): void;
  802. update(_items?: Array<TreeItem>): void;
  803. /** Display the details of the given item */
  804. displayDetails(item: TreeItem): void;
  805. /** Select an item in the tree */
  806. select(item: TreeItem): void;
  807. /** Set the given item as active in the tree */
  808. activateNode(item: TreeItem): void;
  809. /** Returns the treeitem corersponding to the given obj, null if not found */
  810. getItemFor(_obj: any): BABYLON.Nullable<TreeItem>;
  811. filter(filter: string): void;
  812. /** Builds the tree panel */
  813. protected abstract _getTree(): Array<TreeItem>;
  814. }
  815. }
  816. declare module INSPECTOR {
  817. class CameraTab extends PropertyTab {
  818. constructor(tabbar: TabBar, inspector: Inspector);
  819. protected _getTree(): Array<TreeItem>;
  820. }
  821. }
  822. declare module INSPECTOR {
  823. class GUITab extends PropertyTab {
  824. constructor(tabbar: TabBar, inspector: Inspector);
  825. protected _getTree(): Array<TreeItem>;
  826. }
  827. }
  828. declare module INSPECTOR {
  829. class PhysicsTab extends PropertyTab {
  830. viewer: BABYLON.Debug.PhysicsViewer;
  831. constructor(tabbar: TabBar, inspector: Inspector);
  832. protected _getTree(): Array<TreeItem>;
  833. }
  834. }
  835. declare module INSPECTOR {
  836. class SoundTab extends PropertyTab {
  837. constructor(tabbar: TabBar, inspector: Inspector);
  838. protected _getTree(): Array<TreeItem>;
  839. }
  840. }
  841. declare module INSPECTOR {
  842. class TextureTab extends Tab {
  843. private _inspector;
  844. /** The panel containing a list of items */
  845. protected _treePanel: HTMLElement;
  846. protected _treeItems: Array<TreeItem>;
  847. private _imagePanel;
  848. constructor(tabbar: TabBar, inspector: Inspector);
  849. dispose(): void;
  850. update(_items?: Array<TreeItem>): void;
  851. private _getTree();
  852. /** Display the details of the given item */
  853. displayDetails(item: TreeItem): void;
  854. /** Select an item in the tree */
  855. select(item: TreeItem): void;
  856. /** Set the given item as active in the tree */
  857. activateNode(item: TreeItem): void;
  858. }
  859. }
  860. declare module INSPECTOR {
  861. class LightTab extends PropertyTab {
  862. constructor(tabbar: TabBar, inspector: Inspector);
  863. protected _getTree(): Array<TreeItem>;
  864. }
  865. }
  866. declare module INSPECTOR {
  867. class MaterialTab extends PropertyTab {
  868. constructor(tabbar: TabBar, inspector: Inspector);
  869. protected _getTree(): Array<TreeItem>;
  870. }
  871. }
  872. declare module INSPECTOR {
  873. class MeshTab extends PropertyTab {
  874. constructor(tabbar: TabBar, inspector: Inspector);
  875. protected _getTree(): Array<TreeItem>;
  876. }
  877. }
  878. declare function Split(elements: HTMLElement[], options: any): void;
  879. declare module INSPECTOR {
  880. class SceneTab extends Tab {
  881. private _inspector;
  882. /** The list of channels/options that can be activated/deactivated */
  883. private _actions;
  884. /** The list of skeleton viewer */
  885. private _skeletonViewers;
  886. /** The detail of the scene */
  887. private _detailsPanel;
  888. constructor(tabbar: TabBar, insp: Inspector);
  889. /** Overrides super.dispose */
  890. dispose(): void;
  891. /** generates a div which correspond to an option that can be activated/deactivated */
  892. private _generateActionLine(name, initValue, action);
  893. /**
  894. * Add a click action for all given elements :
  895. * the clicked element is set as active, all others elements are deactivated
  896. */
  897. private _generateRadioAction(arr);
  898. }
  899. }
  900. declare function Split(elements: HTMLDivElement[], options: any): void;
  901. declare module INSPECTOR {
  902. /**
  903. * The console tab will have two features :
  904. * - hook all console.log call and display them in this panel (and in the browser console as well)
  905. * - display all Babylon logs (called with Tools.Log...)
  906. */
  907. class ConsoleTab extends Tab {
  908. private _inspector;
  909. private _consolePanelContent;
  910. private _bjsPanelContent;
  911. private _oldConsoleLog;
  912. private _oldConsoleWarn;
  913. private _oldConsoleError;
  914. constructor(tabbar: TabBar, insp: Inspector);
  915. /** Overrides super.dispose */
  916. dispose(): void;
  917. active(b: boolean): void;
  918. private _message(type, message, caller);
  919. private _addConsoleLog(...params);
  920. private _addConsoleWarn(...params);
  921. private _addConsoleError(...params);
  922. }
  923. }
  924. declare module INSPECTOR {
  925. class StatsTab extends Tab {
  926. private _inspector;
  927. /**
  928. * Properties in this array will be updated
  929. * in a render loop - Mostly stats properties
  930. */
  931. private _updatableProperties;
  932. private _scene;
  933. private _engine;
  934. private _glInfo;
  935. private _updateLoopHandler;
  936. private _sceneInstrumentation;
  937. private _engineInstrumentation;
  938. private _connectToInstrumentation();
  939. constructor(tabbar: TabBar, insp: Inspector);
  940. private _createStatLabel(content, parent);
  941. /** Update each properties of the stats panel */
  942. private _update();
  943. dispose(): void;
  944. active(b: boolean): void;
  945. }
  946. }
  947. declare module INSPECTOR {
  948. /**
  949. * A tab bar will contains each view the inspector can have : Canvas2D, Meshes...
  950. * The default active tab is the first one of the list.
  951. */
  952. class TabBar extends BasicElement {
  953. private _tabs;
  954. private _inspector;
  955. /** The tab displaying all meshes */
  956. private _meshTab;
  957. /** The toolbar */
  958. private _toolBar;
  959. /** The icon displayed at the end of the toolbar displaying a combo box of tabs not displayed */
  960. private _moreTabsIcon;
  961. /** The panel displayed when the 'more-tab' icon is selected */
  962. private _moreTabsPanel;
  963. /** The list of tab displayed by clicking on the remainingIcon */
  964. private _invisibleTabs;
  965. /** The list of tabs visible, displayed in the tab bar */
  966. private _visibleTabs;
  967. constructor(inspector: Inspector, initialTab?: number);
  968. update(): void;
  969. protected _build(): void;
  970. /**
  971. * Add a tab to the 'more-tabs' panel, displayed by clicking on the
  972. * 'more-tabs' icon
  973. */
  974. private _addInvisibleTabToPanel(tab);
  975. /** Dispose the current tab, set the given tab as active, and refresh the treeview */
  976. switchTab(tab: Tab): void;
  977. /** Display the mesh tab.
  978. * If a parameter is given, the given mesh details are displayed
  979. */
  980. switchMeshTab(mesh?: BABYLON.AbstractMesh): void;
  981. /** Returns the active tab */
  982. getActiveTab(): BABYLON.Nullable<Tab>;
  983. getActiveTabIndex(): number;
  984. readonly inspector: Inspector;
  985. /**
  986. * Returns the total width in pixel of the tabbar,
  987. * that corresponds to the sum of the width of each visible tab + toolbar width
  988. */
  989. getPixelWidth(): number;
  990. /** Display the remaining icon or not depending on the tabbar width.
  991. * This function should be called each time the inspector width is updated
  992. */
  993. updateWidth(): void;
  994. }
  995. }
  996. declare module INSPECTOR {
  997. abstract class AbstractTool {
  998. private _elem;
  999. protected _inspector: Inspector;
  1000. constructor(icon: string, parent: HTMLElement, inspector: Inspector, tooltip: string);
  1001. toHtml(): HTMLElement;
  1002. /**
  1003. * Returns the total width in pixel of this tool, 0 by default
  1004. */
  1005. getPixelWidth(): number;
  1006. /**
  1007. * Updates the icon of this tool with the given string
  1008. */
  1009. protected _updateIcon(icon: string): void;
  1010. abstract action(): void;
  1011. }
  1012. }
  1013. declare module INSPECTOR {
  1014. class PauseScheduleTool extends AbstractTool {
  1015. private _isPause;
  1016. constructor(parent: HTMLElement, inspector: Inspector);
  1017. action(): void;
  1018. }
  1019. }
  1020. declare module INSPECTOR {
  1021. class PickTool extends AbstractTool {
  1022. private _isActive;
  1023. private _pickHandler;
  1024. constructor(parent: HTMLElement, inspector: Inspector);
  1025. action(): void;
  1026. /** Deactivate this tool */
  1027. private _deactivate();
  1028. /** Pick a mesh in the scene */
  1029. private _pickMesh(evt);
  1030. private _updatePointerPosition(evt);
  1031. }
  1032. }
  1033. declare module INSPECTOR {
  1034. class PopupTool extends AbstractTool {
  1035. constructor(parent: HTMLElement, inspector: Inspector);
  1036. action(): void;
  1037. }
  1038. }
  1039. declare module INSPECTOR {
  1040. class RefreshTool extends AbstractTool {
  1041. constructor(parent: HTMLElement, inspector: Inspector);
  1042. action(): void;
  1043. }
  1044. }
  1045. declare module INSPECTOR {
  1046. class LabelTool extends AbstractTool {
  1047. /** True if label are displayed, false otherwise */
  1048. private _isDisplayed;
  1049. private _advancedTexture;
  1050. private _labelInitialized;
  1051. private _scene;
  1052. private _guiLoaded;
  1053. constructor(parent: HTMLElement, inspector: Inspector);
  1054. dispose(): void;
  1055. private _checkGUILoaded();
  1056. private _initializeLabels();
  1057. private _createLabel(mesh);
  1058. private _removeLabel(mesh);
  1059. action(): void;
  1060. }
  1061. }
  1062. declare module INSPECTOR {
  1063. class Toolbar extends BasicElement {
  1064. private _inspector;
  1065. private _tools;
  1066. constructor(inspector: Inspector);
  1067. update(): void;
  1068. protected _build(): void;
  1069. private _addTools();
  1070. /**
  1071. * Returns the total width in pixel of the tabbar,
  1072. * that corresponds to the sum of the width of each tab + toolbar width
  1073. */
  1074. getPixelWidth(): number;
  1075. }
  1076. }
  1077. declare module INSPECTOR {
  1078. /**
  1079. * Removes the inspector panel
  1080. */
  1081. class DisposeTool extends AbstractTool {
  1082. constructor(parent: HTMLElement, inspector: Inspector);
  1083. action(): void;
  1084. }
  1085. }
  1086. declare module INSPECTOR {
  1087. class TreeItem extends BasicElement {
  1088. private _tab;
  1089. private _adapter;
  1090. private _tools;
  1091. children: Array<TreeItem>;
  1092. private _lineContent;
  1093. constructor(tab: Tab, obj: Adapter);
  1094. /** Returns the item ID == its adapter ID */
  1095. readonly id: string;
  1096. /** Add the given item as a child of this one */
  1097. add(child: TreeItem): void;
  1098. /**
  1099. * Returns the original adapter
  1100. */
  1101. readonly adapter: Adapter;
  1102. /**
  1103. * Function used to compare this item to another tree item.
  1104. * Returns the alphabetical sort of the adapter ID
  1105. */
  1106. compareTo(item: TreeItem): number;
  1107. /** Returns true if the given obj correspond to the adapter linked to this tree item */
  1108. correspondsTo(obj: any): boolean;
  1109. /** hide all children of this item */
  1110. fold(): void;
  1111. /** Show all children of this item */
  1112. unfold(): void;
  1113. /** Build the HTML of this item */
  1114. protected _build(): void;
  1115. /**
  1116. * Returns one HTML element (.details) containing all details of this primitive
  1117. */
  1118. getDetails(): Array<PropertyLine>;
  1119. update(): void;
  1120. /**
  1121. * Add an event listener on the item :
  1122. * - one click display details
  1123. */
  1124. protected _addEvent(): void;
  1125. /** Returns true if the node is folded, false otherwise */
  1126. private _isFolded();
  1127. /** Set this item as active (background lighter) in the tree panel */
  1128. active(b: boolean): void;
  1129. getDiv(): HTMLElement;
  1130. }
  1131. }
  1132. declare module INSPECTOR {
  1133. abstract class AbstractTreeTool {
  1134. protected _elem: HTMLElement;
  1135. /** Is the tool enabled ? */
  1136. protected _on: boolean;
  1137. constructor();
  1138. toHtml(): HTMLElement;
  1139. protected _addEvents(): void;
  1140. /**
  1141. * Action launched when clicked on this element
  1142. * Should be overrided
  1143. */
  1144. protected action(): void;
  1145. }
  1146. }
  1147. declare module INSPECTOR {
  1148. /** Any object implementing this interface should
  1149. * provide methods to toggle its bounding box
  1150. */
  1151. interface IToolBoundingBox {
  1152. isBoxVisible: () => boolean;
  1153. setBoxVisible: (b: boolean) => void;
  1154. }
  1155. /**
  1156. * Checkbox to display/hide the primitive
  1157. */
  1158. class BoundingBox extends AbstractTreeTool {
  1159. private _obj;
  1160. constructor(obj: IToolBoundingBox);
  1161. protected action(): void;
  1162. private _check();
  1163. }
  1164. }
  1165. declare module INSPECTOR {
  1166. interface ICameraPOV {
  1167. setPOV: () => void;
  1168. }
  1169. /**
  1170. *
  1171. */
  1172. class CameraPOV extends AbstractTreeTool {
  1173. private cameraPOV;
  1174. constructor(camera: ICameraPOV);
  1175. protected action(): void;
  1176. private _gotoPOV();
  1177. }
  1178. }
  1179. declare module INSPECTOR {
  1180. interface ISoundInteractions {
  1181. setPlaying: (callback: Function) => void;
  1182. }
  1183. /**
  1184. *
  1185. */
  1186. class SoundInteractions extends AbstractTreeTool {
  1187. private playSound;
  1188. private b;
  1189. constructor(playSound: ISoundInteractions);
  1190. protected action(): void;
  1191. private _playSound();
  1192. }
  1193. }
  1194. declare module INSPECTOR {
  1195. /** Any object implementing this interface should
  1196. * provide methods to toggle its visibility
  1197. */
  1198. interface IToolVisible {
  1199. isVisible: () => boolean;
  1200. setVisible: (b: boolean) => void;
  1201. }
  1202. /**
  1203. * Checkbox to display/hide the primitive
  1204. */
  1205. class Checkbox extends AbstractTreeTool {
  1206. private _obj;
  1207. constructor(obj: IToolVisible);
  1208. protected action(): void;
  1209. private _check(dontEnable?);
  1210. }
  1211. }
  1212. declare module INSPECTOR {
  1213. /** Any object implementing this interface should
  1214. * provide methods to toggle a debug area
  1215. */
  1216. interface IToolDebug {
  1217. debug: (b: boolean) => void;
  1218. }
  1219. class DebugArea extends AbstractTreeTool {
  1220. private _obj;
  1221. constructor(obj: IToolDebug);
  1222. protected action(): void;
  1223. }
  1224. }
  1225. declare module INSPECTOR {
  1226. /** Any object implementing this interface should
  1227. * provide methods to retrieve its info
  1228. */
  1229. interface IToolInfo {
  1230. getInfo: () => string;
  1231. }
  1232. /**
  1233. * Checkbox to display/hide the primitive
  1234. */
  1235. class Info extends AbstractTreeTool {
  1236. private _obj;
  1237. private _tooltip;
  1238. constructor(obj: IToolInfo);
  1239. protected action(): void;
  1240. }
  1241. }