babylon.debugLayer.ts 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. module BABYLON {
  2. // declare INSPECTOR namespace for compilation issue
  3. declare var INSPECTOR: any;
  4. // load the inspector using require, if not present in the global namespace.
  5. export interface Scene {
  6. /**
  7. * @hidden
  8. * Backing field
  9. */
  10. _debugLayer: DebugLayer;
  11. /**
  12. * Gets the debug layer (aka Inspector) associated with the scene
  13. * @see http://doc.babylonjs.com/features/playground_debuglayer
  14. */
  15. debugLayer: DebugLayer;
  16. }
  17. Object.defineProperty(Scene.prototype, "debugLayer", {
  18. get: function (this: Scene) {
  19. if (!this._debugLayer) {
  20. this._debugLayer = new DebugLayer(this);
  21. }
  22. return this._debugLayer;
  23. },
  24. enumerable: true,
  25. configurable: true
  26. });
  27. export class DebugLayer {
  28. private _scene: Scene;
  29. public static InspectorURL = 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js';
  30. // The inspector instance
  31. private _inspector: any;
  32. private BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
  33. public onPropertyChangedObservable = new BABYLON.Observable<{ object: any, property: string, value: any, initialValue: any }>();
  34. constructor(scene: Scene) {
  35. this._scene = scene;
  36. this._scene.onDisposeObservable.add(() => {
  37. // Debug layer
  38. if (this._scene._debugLayer) {
  39. this._scene._debugLayer.hide();
  40. }
  41. })
  42. }
  43. /** Creates the inspector window. */
  44. private _createInspector(config: {
  45. popup?: boolean,
  46. initialTab?: number,
  47. parentElement?: HTMLElement,
  48. newColors?: {
  49. backgroundColor?: string,
  50. backgroundColorLighter?: string,
  51. backgroundColorLighter2?: string,
  52. backgroundColorLighter3?: string,
  53. color?: string,
  54. colorTop?: string,
  55. colorBot?: string
  56. }
  57. } = {}) {
  58. let popup = config.popup || false;
  59. let initialTab = config.initialTab || 0;
  60. let parentElement = config.parentElement || null;
  61. if (!this._inspector) {
  62. this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
  63. this._inspector = new this.BJSINSPECTOR.Inspector(this._scene, popup, initialTab, parentElement, config.newColors);
  64. } // else nothing to do as instance is already created
  65. }
  66. public isVisible(): boolean {
  67. if (!this._inspector) {
  68. return false;
  69. }
  70. return true;
  71. }
  72. public hide() {
  73. if (this._inspector) {
  74. try {
  75. this._inspector.dispose();
  76. } catch (e) {
  77. // If the inspector has been removed directly from the inspector tool
  78. }
  79. this.onPropertyChangedObservable.clear();
  80. this._inspector = null;
  81. }
  82. }
  83. /**
  84. *
  85. * Launch the debugLayer.
  86. *
  87. * initialTab:
  88. * | Value | Tab Name |
  89. * | --- | --- |
  90. * | 0 | Scene |
  91. * | 1 | Console |
  92. * | 2 | Stats |
  93. * | 3 | Textures |
  94. * | 4 | Mesh |
  95. * | 5 | Light |
  96. * | 6 | Material |
  97. * | 7 | GLTF |
  98. * | 8 | GUI |
  99. * | 9 | Physics |
  100. * | 10 | Camera |
  101. * | 11 | Audio |
  102. *
  103. */
  104. public show(config: {
  105. popup?: boolean,
  106. initialTab?: number,
  107. parentElement?: HTMLElement,
  108. newColors?: {
  109. backgroundColor?: string,
  110. backgroundColorLighter?: string,
  111. backgroundColorLighter2?: string,
  112. backgroundColorLighter3?: string,
  113. color?: string,
  114. colorTop?: string,
  115. colorBot?: string
  116. }
  117. } = {}) {
  118. if (typeof this.BJSINSPECTOR == 'undefined') {
  119. // Load inspector and add it to the DOM
  120. Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, config));
  121. } else {
  122. // Otherwise creates the inspector
  123. this._createInspector(config);
  124. }
  125. }
  126. /**
  127. * Gets the active tab
  128. * @return the index of the active tab or -1 if the inspector is hidden
  129. */
  130. public getActiveTab(): number {
  131. return this._inspector ? this._inspector.getActiveTabIndex() : -1;
  132. }
  133. }
  134. }