Inspector.ts 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. module INSPECTOR {
  2. export class Inspector {
  3. private _c2diwrapper: HTMLElement;
  4. // private _detailsPanel: DetailPanel;
  5. /** The panel displayed at the top of the inspector */
  6. private _topPanel: HTMLElement;
  7. /** The div containing the content of the active tab */
  8. private _tabPanel: HTMLElement;
  9. /** The panel containing the list if items */
  10. // private _treePanel : HTMLElement;
  11. /** The list if tree items displayed in the tree panel. */
  12. private _items: Array<TreeItem>;
  13. private _tabbar: TabBar;
  14. private _scene: BABYLON.Scene;
  15. /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
  16. public static DOCUMENT: HTMLDocument;
  17. /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
  18. public static WINDOW: Window;
  19. /** True if the inspector is built as a popup tab */
  20. private _popupMode: boolean = false;
  21. /** The original canvas style, before applying the inspector*/
  22. private _canvasStyle: any;
  23. private _initialTab: number;
  24. private _parentElement: HTMLElement;
  25. /** The inspector is created with the given engine.
  26. * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
  27. * If the parameter 'popup' is true, the inspector is created in another popup.
  28. */
  29. constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number, parentElement?: HTMLElement, newColors?: {
  30. backgroundColor?: string,
  31. backgroundColorLighter?: string,
  32. backgroundColorLighter2?: string,
  33. backgroundColorLighter3?: string,
  34. color?: string,
  35. colorTop?: string,
  36. colorBot?: string
  37. }) {
  38. // Load GUI library if not already done
  39. if(!BABYLON.GUI){
  40. BABYLON.Tools.LoadScript("https://preview.babylonjs.com/gui/babylon.gui.js", () => {
  41. //Load properties of GUI objects now as BABYLON.GUI has to be declared before
  42. loadGUIProperties();
  43. }, () => {
  44. console.warn("Please add script https://preview.babylonjs.com/gui/babylon.gui.js to the HTML file")
  45. });
  46. }
  47. else{
  48. //Load properties of GUI objects now as BABYLON.GUI has to be declared before
  49. loadGUIProperties();
  50. }
  51. //get Tabbar initialTab
  52. this._initialTab = initialTab;
  53. //get parentElement of our Inspector
  54. this._parentElement = parentElement;
  55. // get canvas parent only if needed.
  56. this._scene = scene;
  57. // Save HTML document and window
  58. Inspector.DOCUMENT = window.document;
  59. Inspector.WINDOW = window;
  60. // POPUP MODE
  61. if (popup) {
  62. // Build the inspector in the given parent
  63. this.openPopup(true);// set to true in order to NOT dispose the inspector (done in openPopup), as it's not existing yet
  64. } else {
  65. // Get canvas and its DOM parent
  66. let canvas = this._scene.getEngine().getRenderingCanvas();
  67. let canvasParent = canvas.parentElement;
  68. let canvasParentComputedStyle = Inspector.WINDOW.getComputedStyle(canvasParent);
  69. // get canvas style
  70. let canvasComputedStyle = Inspector.WINDOW.getComputedStyle(canvas);
  71. this._canvasStyle = {
  72. width: Helpers.Css(canvas, 'width'),
  73. height: Helpers.Css(canvas, 'height'),
  74. position: canvasComputedStyle.position,
  75. top: canvasComputedStyle.top,
  76. bottom: canvasComputedStyle.bottom,
  77. left: canvasComputedStyle.left,
  78. right: canvasComputedStyle.right,
  79. padding: canvasComputedStyle.padding,
  80. paddingBottom: canvasComputedStyle.paddingBottom,
  81. paddingLeft: canvasComputedStyle.paddingLeft,
  82. paddingTop: canvasComputedStyle.paddingTop,
  83. paddingRight: canvasComputedStyle.paddingRight,
  84. margin: canvasComputedStyle.margin,
  85. marginBottom: canvasComputedStyle.marginBottom,
  86. marginLeft: canvasComputedStyle.marginLeft,
  87. marginTop: canvasComputedStyle.marginTop,
  88. marginRight: canvasComputedStyle.marginRight
  89. };
  90. if (this._parentElement) {
  91. // Build the inspector wrapper
  92. this._c2diwrapper = Helpers.CreateDiv('insp-wrapper', this._parentElement);
  93. this._c2diwrapper.style.width = '100%';
  94. this._c2diwrapper.style.height = '100%';
  95. this._c2diwrapper.style.paddingLeft = '5px';
  96. // add inspector
  97. let inspector = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
  98. inspector.style.width = '100%';
  99. inspector.style.height = '100%';
  100. // and build it in the popup
  101. this._buildInspector(inspector);
  102. } else {
  103. // Create c2di wrapper
  104. this._c2diwrapper = Helpers.CreateDiv('insp-wrapper');
  105. // copy style from canvas to wrapper
  106. for (let prop in this._canvasStyle) {
  107. this._c2diwrapper.style[prop] = this._canvasStyle[prop];
  108. }
  109. // Convert wrapper size in % (because getComputedStyle returns px only)
  110. let widthPx = parseFloat(canvasComputedStyle.width.substr(0, canvasComputedStyle.width.length - 2)) || 0;
  111. let heightPx = parseFloat(canvasComputedStyle.height.substr(0, canvasComputedStyle.height.length - 2)) || 0;
  112. // If the canvas position is absolute, restrain the wrapper width to the window width + left positionning
  113. if (canvasComputedStyle.position === "absolute" || canvasComputedStyle.position === "relative") {
  114. // compute only left as it takes predominance if right is also specified (and it will be for the wrapper)
  115. let leftPx = parseFloat(canvasComputedStyle.left.substr(0, canvasComputedStyle.left.length - 2)) || 0;
  116. if (widthPx + leftPx >= Inspector.WINDOW.innerWidth) {
  117. this._c2diwrapper.style.maxWidth = `${widthPx - leftPx}px`;
  118. }
  119. }
  120. // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
  121. let parent = this._getRelativeParent(canvas);
  122. let parentWidthPx = parent.clientWidth;
  123. let parentHeightPx = parent.clientHeight;
  124. let pWidth = widthPx / parentWidthPx * 100;
  125. let pheight = heightPx / parentHeightPx * 100;
  126. this._c2diwrapper.style.width = pWidth + "%";
  127. this._c2diwrapper.style.height = pheight + "%";
  128. // reset canvas style
  129. canvas.style.position = "static";
  130. canvas.style.width = "100%";
  131. canvas.style.height = "100%";
  132. canvas.style.paddingBottom = "0";
  133. canvas.style.paddingLeft = "0";
  134. canvas.style.paddingTop = "0";
  135. canvas.style.paddingRight = "0";
  136. canvas.style.margin = "0";
  137. canvas.style.marginBottom = "0";
  138. canvas.style.marginLeft = "0";
  139. canvas.style.marginTop = "0";
  140. canvas.style.marginRight = "0";
  141. // Replace canvas with the wrapper...
  142. canvasParent.replaceChild(this._c2diwrapper, canvas);
  143. // ... and add canvas to the wrapper
  144. this._c2diwrapper.appendChild(canvas);
  145. // add inspector
  146. let inspector = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
  147. // Add split bar
  148. if (!this._parentElement) {
  149. Split([canvas, inspector], {
  150. direction: 'horizontal',
  151. sizes: [75, 25],
  152. onDrag: () => {
  153. Helpers.SEND_EVENT('resize');
  154. if (this._tabbar) {
  155. this._tabbar.updateWidth()
  156. }
  157. }
  158. });
  159. }
  160. // Build the inspector
  161. this._buildInspector(inspector);
  162. }
  163. // Send resize event to the window
  164. Helpers.SEND_EVENT('resize');
  165. this._tabbar.updateWidth();
  166. }
  167. // Refresh the inspector if the browser is not edge
  168. if (!Helpers.IsBrowserEdge()) {
  169. this.refresh();
  170. }
  171. // Check custom css colors
  172. if (newColors) {
  173. let bColor = newColors.backgroundColor || '#242424';
  174. let bColorl1 = newColors.backgroundColorLighter || '#2c2c2c';
  175. let bColorl2 = newColors.backgroundColorLighter2 || '#383838';
  176. let bColorl3 = newColors.backgroundColorLighter3 || '#454545';
  177. let color = newColors.color || '#ccc';
  178. let colorTop = newColors.colorTop || '#f29766';
  179. let colorBot = newColors.colorBot || '#5db0d7';
  180. let styles = Inspector.DOCUMENT.querySelectorAll('style');
  181. for (let s = 0; s < styles.length; s++) {
  182. let style = styles[s];
  183. if (style.innerHTML.indexOf('insp-wrapper') != -1) {
  184. styles[s].innerHTML = styles[s].innerHTML
  185. .replace(/#242424/g, bColor) // background color
  186. .replace(/#2c2c2c/g, bColorl1) // background-lighter
  187. .replace(/#383838/g, bColorl2) // background-lighter2
  188. .replace(/#454545/g, bColorl3) // background-lighter3
  189. .replace(/#ccc/g, color) // color
  190. .replace(/#f29766/g, colorTop) // color-top
  191. .replace(/#5db0d7/g, colorBot) // color-bot
  192. }
  193. }
  194. }
  195. }
  196. /**
  197. * If the given element has a position 'asbolute' or 'relative',
  198. * returns the first parent of the given element that has a position 'relative' or 'absolute'.
  199. * If the given element has no position, returns the first parent
  200. *
  201. */
  202. private _getRelativeParent(elem: HTMLElement, lookForAbsoluteOrRelative?: boolean): HTMLElement {
  203. // If the elem has no parent, returns himself
  204. if (!elem.parentElement) {
  205. return elem;
  206. }
  207. let computedStyle = Inspector.WINDOW.getComputedStyle(elem);
  208. // looking for the first element absolute or relative
  209. if (lookForAbsoluteOrRelative) {
  210. // if found, return this one
  211. if (computedStyle.position === "relative" || computedStyle.position === "absolute") {
  212. return elem;
  213. } else {
  214. // otherwise keep looking
  215. return this._getRelativeParent(elem.parentElement, true);
  216. }
  217. }
  218. // looking for the relative parent of the element
  219. else {
  220. if (computedStyle.position == "static") {
  221. return elem.parentElement;
  222. } else {
  223. // the elem has a position relative or absolute, look for the closest relative/absolute parent
  224. return this._getRelativeParent(elem.parentElement, true);
  225. }
  226. }
  227. }
  228. /** Build the inspector panel in the given HTML element */
  229. private _buildInspector(parent: HTMLElement) {
  230. // tabbar
  231. this._tabbar = new TabBar(this, this._initialTab);
  232. // Top panel
  233. this._topPanel = Helpers.CreateDiv('top-panel', parent);
  234. // Add tabbar
  235. this._topPanel.appendChild(this._tabbar.toHtml());
  236. this._tabbar.updateWidth();
  237. // Tab panel
  238. this._tabPanel = Helpers.CreateDiv('tab-panel-content', this._topPanel);
  239. }
  240. public get scene(): BABYLON.Scene {
  241. return this._scene;
  242. }
  243. public get popupMode(): boolean {
  244. return this._popupMode;
  245. }
  246. /**
  247. * Filter the list of item present in the tree.
  248. * All item returned should have the given filter contained in the item id.
  249. */
  250. public filterItem(filter: string) {
  251. this._tabbar.getActiveTab().filter(filter);
  252. }
  253. /** Display the mesh tab on the given object */
  254. public displayObjectDetails(mesh: BABYLON.AbstractMesh) {
  255. this._tabbar.switchMeshTab(mesh);
  256. }
  257. /** Clean the whole tree of item and rebuilds it */
  258. public refresh() {
  259. // Clean top panel
  260. Helpers.CleanDiv(this._tabPanel);
  261. // Get the active tab and its items
  262. let activeTab = this._tabbar.getActiveTab();
  263. activeTab.update();
  264. this._tabPanel.appendChild(activeTab.getPanel());
  265. Helpers.SEND_EVENT('resize');
  266. }
  267. /** Remove the inspector panel when it's built as a right panel:
  268. * remove the right panel and remove the wrapper
  269. */
  270. public dispose() {
  271. if (!this._popupMode) {
  272. this._tabbar.getActiveTab().dispose();
  273. // Get canvas
  274. let canvas = this._scene.getEngine().getRenderingCanvas();
  275. // restore canvas style
  276. for (let prop in this._canvasStyle) {
  277. canvas.style[prop] = this._canvasStyle[prop];
  278. }
  279. // Get parent of the wrapper
  280. let canvasParent = canvas.parentElement.parentElement;
  281. canvasParent.insertBefore(canvas, this._c2diwrapper);
  282. // Remove wrapper
  283. Helpers.CleanDiv(this._c2diwrapper);
  284. this._c2diwrapper.remove();
  285. // Send resize event to the window
  286. Helpers.SEND_EVENT('resize');
  287. }
  288. }
  289. /** Open the inspector in a new popup
  290. * Set 'firstTime' to true if there is no inspector created beforehands
  291. */
  292. public openPopup(firstTime?: boolean) {
  293. if (Helpers.IsBrowserEdge()) {
  294. console.warn('Inspector - Popup mode is disabled in Edge, as the popup DOM cannot be updated from the main window for security reasons');
  295. } else {
  296. // Create popup
  297. let popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
  298. popup.document.title = 'Babylon.js INSPECTOR';
  299. // Get the inspector style
  300. let styles = Inspector.DOCUMENT.querySelectorAll('style');
  301. for (let s = 0; s < styles.length; s++) {
  302. popup.document.body.appendChild(styles[s].cloneNode(true));
  303. }
  304. let links = document.querySelectorAll('link');
  305. for (let l = 0; l < links.length; l++) {
  306. let link = popup.document.createElement("link");
  307. link.rel = "stylesheet";
  308. link.href = (links[l] as HTMLLinkElement).href;
  309. popup.document.head.appendChild(link);
  310. }
  311. // Dispose the right panel if existing
  312. if (!firstTime) {
  313. this.dispose();
  314. }
  315. // set the mode as popup
  316. this._popupMode = true;
  317. // Save the HTML document
  318. Inspector.DOCUMENT = popup.document;
  319. Inspector.WINDOW = popup;
  320. // Build the inspector wrapper
  321. this._c2diwrapper = Helpers.CreateDiv('insp-wrapper', popup.document.body);
  322. // add inspector
  323. let inspector = Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
  324. inspector.classList.add('popupmode');
  325. // and build it in the popup
  326. this._buildInspector(inspector);
  327. // Rebuild it
  328. this.refresh();
  329. popup.addEventListener('resize', () => {
  330. if (this._tabbar) {
  331. this._tabbar.updateWidth()
  332. }
  333. });
  334. }
  335. }
  336. }
  337. }