babylon.inspector.js 174 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012
  1. var INSPECTOR;
  2. (function (INSPECTOR) {
  3. var Inspector = (function () {
  4. /** The inspector is created with the given engine.
  5. * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
  6. * If the parameter 'popup' is true, the inspector is created in another popup.
  7. */
  8. function Inspector(scene, popup) {
  9. var _this = this;
  10. /** True if the inspector is built as a popup tab */
  11. this._popupMode = false;
  12. // get canvas parent only if needed.
  13. this._scene = scene;
  14. // Save HTML document and window
  15. Inspector.DOCUMENT = window.document;
  16. Inspector.WINDOW = window;
  17. // Load the Canvas2D library if it's not already done
  18. if (!BABYLON.Canvas2D) {
  19. BABYLON.Tools.LoadScript("http://www.babylonjs.com/babylon.canvas2d.js", function () { });
  20. }
  21. // POPUP MODE
  22. if (popup) {
  23. // Build the inspector in the given parent
  24. this.openPopup(true); // set to true in order to NOT dispose the inspector (done in openPopup), as it's not existing yet
  25. }
  26. else {
  27. // Get canvas and its DOM parent
  28. var canvas = this._scene.getEngine().getRenderingCanvas();
  29. var canvasParent = canvas.parentElement;
  30. var canvasParentComputedStyle = Inspector.WINDOW.getComputedStyle(canvasParent);
  31. // get canvas style
  32. var canvasComputedStyle = Inspector.WINDOW.getComputedStyle(canvas);
  33. this._canvasStyle = {
  34. width: INSPECTOR.Helpers.Css(canvas, 'width'),
  35. height: INSPECTOR.Helpers.Css(canvas, 'height'),
  36. position: canvasComputedStyle.position,
  37. top: canvasComputedStyle.top,
  38. bottom: canvasComputedStyle.bottom,
  39. left: canvasComputedStyle.left,
  40. right: canvasComputedStyle.right,
  41. padding: canvasComputedStyle.padding,
  42. paddingBottom: canvasComputedStyle.paddingBottom,
  43. paddingLeft: canvasComputedStyle.paddingLeft,
  44. paddingTop: canvasComputedStyle.paddingTop,
  45. paddingRight: canvasComputedStyle.paddingRight,
  46. margin: canvasComputedStyle.margin,
  47. marginBottom: canvasComputedStyle.marginBottom,
  48. marginLeft: canvasComputedStyle.marginLeft,
  49. marginTop: canvasComputedStyle.marginTop,
  50. marginRight: canvasComputedStyle.marginRight
  51. };
  52. // Create c2di wrapper
  53. this._c2diwrapper = INSPECTOR.Helpers.CreateDiv('insp-wrapper');
  54. // copy style from canvas to wrapper
  55. for (var prop in this._canvasStyle) {
  56. this._c2diwrapper.style[prop] = this._canvasStyle[prop];
  57. }
  58. // Convert wrapper size in % (because getComputedStyle returns px only)
  59. var widthPx = parseFloat(canvasComputedStyle.width.substr(0, canvasComputedStyle.width.length - 2)) || 0;
  60. var heightPx = parseFloat(canvasComputedStyle.height.substr(0, canvasComputedStyle.height.length - 2)) || 0;
  61. // If the canvas position is absolute, restrain the wrapper width to the window width + left positionning
  62. if (canvasComputedStyle.position === "absolute" || canvasComputedStyle.position === "relative") {
  63. // compute only left as it takes predominance if right is also specified (and it will be for the wrapper)
  64. var leftPx = parseFloat(canvasComputedStyle.left.substr(0, canvasComputedStyle.left.length - 2)) || 0;
  65. if (widthPx + leftPx >= Inspector.WINDOW.innerWidth) {
  66. this._c2diwrapper.style.maxWidth = widthPx - leftPx + "px";
  67. }
  68. }
  69. // Check if the parent of the canvas is the body page. If yes, the size ratio is computed
  70. var parent_1 = this._getRelativeParent(canvas);
  71. var parentWidthPx = parent_1.clientWidth;
  72. var parentHeightPx = parent_1.clientHeight;
  73. var pWidth = widthPx / parentWidthPx * 100;
  74. var pheight = heightPx / parentHeightPx * 100;
  75. this._c2diwrapper.style.width = pWidth + "%";
  76. this._c2diwrapper.style.height = pheight + "%";
  77. // reset canvas style
  78. canvas.style.position = "static";
  79. canvas.style.width = "100%";
  80. canvas.style.height = "100%";
  81. canvas.style.paddingBottom = "0";
  82. canvas.style.paddingLeft = "0";
  83. canvas.style.paddingTop = "0";
  84. canvas.style.paddingRight = "0";
  85. canvas.style.margin = "0";
  86. canvas.style.marginBottom = "0";
  87. canvas.style.marginLeft = "0";
  88. canvas.style.marginTop = "0";
  89. canvas.style.marginRight = "0";
  90. // Replace canvas with the wrapper...
  91. canvasParent.replaceChild(this._c2diwrapper, canvas);
  92. // ... and add canvas to the wrapper
  93. this._c2diwrapper.appendChild(canvas);
  94. // add inspector
  95. var inspector = INSPECTOR.Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
  96. // Add split bar
  97. Split([canvas, inspector], {
  98. direction: 'horizontal',
  99. sizes: [75, 25],
  100. onDrag: function () {
  101. INSPECTOR.Helpers.SEND_EVENT('resize');
  102. if (_this._tabbar) {
  103. _this._tabbar.updateWidth();
  104. }
  105. }
  106. });
  107. // Build the inspector
  108. this._buildInspector(inspector);
  109. // Send resize event to the window
  110. INSPECTOR.Helpers.SEND_EVENT('resize');
  111. this._tabbar.updateWidth();
  112. }
  113. // Refresh the inspector if the browser is not edge
  114. if (!INSPECTOR.Helpers.IsBrowserEdge()) {
  115. this.refresh();
  116. }
  117. }
  118. /**
  119. * If the given element has a position 'asbolute' or 'relative',
  120. * returns the first parent of the given element that has a position 'relative' or 'absolute'.
  121. * If the given element has no position, returns the first parent
  122. *
  123. */
  124. Inspector.prototype._getRelativeParent = function (elem, lookForAbsoluteOrRelative) {
  125. // If the elem has no parent, returns himself
  126. if (!elem.parentElement) {
  127. return elem;
  128. }
  129. var computedStyle = Inspector.WINDOW.getComputedStyle(elem);
  130. // looking for the first element absolute or relative
  131. if (lookForAbsoluteOrRelative) {
  132. // if found, return this one
  133. if (computedStyle.position === "relative" || computedStyle.position === "absolute") {
  134. return elem;
  135. }
  136. else {
  137. // otherwise keep looking
  138. return this._getRelativeParent(elem.parentElement, true);
  139. }
  140. }
  141. else {
  142. if (computedStyle.position == "static") {
  143. return elem.parentElement;
  144. }
  145. else {
  146. // the elem has a position relative or absolute, look for the closest relative/absolute parent
  147. return this._getRelativeParent(elem.parentElement, true);
  148. }
  149. }
  150. };
  151. /** Build the inspector panel in the given HTML element */
  152. Inspector.prototype._buildInspector = function (parent) {
  153. // tabbar
  154. this._tabbar = new INSPECTOR.TabBar(this);
  155. // Top panel
  156. this._topPanel = INSPECTOR.Helpers.CreateDiv('top-panel', parent);
  157. // Add tabbar
  158. this._topPanel.appendChild(this._tabbar.toHtml());
  159. this._tabbar.updateWidth();
  160. // Tab panel
  161. this._tabPanel = INSPECTOR.Helpers.CreateDiv('tab-panel-content', this._topPanel);
  162. };
  163. Object.defineProperty(Inspector.prototype, "scene", {
  164. get: function () {
  165. return this._scene;
  166. },
  167. enumerable: true,
  168. configurable: true
  169. });
  170. Object.defineProperty(Inspector.prototype, "popupMode", {
  171. get: function () {
  172. return this._popupMode;
  173. },
  174. enumerable: true,
  175. configurable: true
  176. });
  177. /**
  178. * Filter the list of item present in the tree.
  179. * All item returned should have the given filter contained in the item id.
  180. */
  181. Inspector.prototype.filterItem = function (filter) {
  182. this._tabbar.getActiveTab().filter(filter);
  183. };
  184. /** Display the mesh tab on the given object */
  185. Inspector.prototype.displayObjectDetails = function (mesh) {
  186. this._tabbar.switchMeshTab(mesh);
  187. };
  188. /** Clean the whole tree of item and rebuilds it */
  189. Inspector.prototype.refresh = function () {
  190. // Clean top panel
  191. INSPECTOR.Helpers.CleanDiv(this._tabPanel);
  192. // Get the active tab and its items
  193. var activeTab = this._tabbar.getActiveTab();
  194. activeTab.update();
  195. this._tabPanel.appendChild(activeTab.getPanel());
  196. INSPECTOR.Helpers.SEND_EVENT('resize');
  197. };
  198. /** Remove the inspector panel when it's built as a right panel:
  199. * remove the right panel and remove the wrapper
  200. */
  201. Inspector.prototype.dispose = function () {
  202. if (!this._popupMode) {
  203. // Get canvas
  204. var canvas = this._scene.getEngine().getRenderingCanvas();
  205. // restore canvas style
  206. for (var prop in this._canvasStyle) {
  207. canvas.style[prop] = this._canvasStyle[prop];
  208. }
  209. // Get parent of the wrapper
  210. var canvasParent = canvas.parentElement.parentElement;
  211. canvasParent.insertBefore(canvas, this._c2diwrapper);
  212. // Remove wrapper
  213. INSPECTOR.Helpers.CleanDiv(this._c2diwrapper);
  214. this._c2diwrapper.remove();
  215. // Send resize event to the window
  216. INSPECTOR.Helpers.SEND_EVENT('resize');
  217. }
  218. };
  219. /** Open the inspector in a new popup
  220. * Set 'firstTime' to true if there is no inspector created beforehands
  221. */
  222. Inspector.prototype.openPopup = function (firstTime) {
  223. var _this = this;
  224. if (INSPECTOR.Helpers.IsBrowserEdge()) {
  225. console.warn('Inspector - Popup mode is disabled in Edge, as the popup DOM cannot be updated from the main window for security reasons');
  226. }
  227. else {
  228. // Create popup
  229. var popup = window.open('', 'Babylon.js INSPECTOR', 'toolbar=no,resizable=yes,menubar=no,width=750,height=1000');
  230. popup.document.title = 'Babylon.js INSPECTOR';
  231. // Get the inspector style
  232. var styles = Inspector.DOCUMENT.querySelectorAll('style');
  233. for (var s = 0; s < styles.length; s++) {
  234. popup.document.body.appendChild(styles[s].cloneNode(true));
  235. }
  236. var links = document.querySelectorAll('link');
  237. for (var l = 0; l < links.length; l++) {
  238. var link = popup.document.createElement("link");
  239. link.rel = "stylesheet";
  240. link.href = links[l].href;
  241. popup.document.head.appendChild(link);
  242. }
  243. // Dispose the right panel if existing
  244. if (!firstTime) {
  245. this.dispose();
  246. }
  247. // set the mode as popup
  248. this._popupMode = true;
  249. // Save the HTML document
  250. Inspector.DOCUMENT = popup.document;
  251. Inspector.WINDOW = popup;
  252. // Build the inspector wrapper
  253. this._c2diwrapper = INSPECTOR.Helpers.CreateDiv('insp-wrapper', popup.document.body);
  254. // add inspector
  255. var inspector = INSPECTOR.Helpers.CreateDiv('insp-right-panel', this._c2diwrapper);
  256. inspector.classList.add('popupmode');
  257. // and build it in the popup
  258. this._buildInspector(inspector);
  259. // Rebuild it
  260. this.refresh();
  261. popup.addEventListener('resize', function () {
  262. if (_this._tabbar) {
  263. _this._tabbar.updateWidth();
  264. }
  265. });
  266. }
  267. };
  268. return Inspector;
  269. }());
  270. INSPECTOR.Inspector = Inspector;
  271. })(INSPECTOR || (INSPECTOR = {}));
  272. //# sourceMappingURL=Inspector.js.map
  273. var INSPECTOR;
  274. (function (INSPECTOR) {
  275. INSPECTOR.PROPERTIES = {
  276. /** Format the given object :
  277. * If a format function exists, returns the result of this function.
  278. * If this function doesn't exists, return the object type instead */
  279. format: function (obj) {
  280. var type = INSPECTOR.Helpers.GET_TYPE(obj) || 'type_not_defined';
  281. if (INSPECTOR.PROPERTIES[type] && INSPECTOR.PROPERTIES[type].format) {
  282. return INSPECTOR.PROPERTIES[type].format(obj);
  283. }
  284. else {
  285. return INSPECTOR.Helpers.GET_TYPE(obj);
  286. }
  287. },
  288. 'type_not_defined': {
  289. properties: [],
  290. format: function () { return ''; }
  291. },
  292. 'Vector2': {
  293. type: BABYLON.Vector2,
  294. properties: ['x', 'y'],
  295. format: function (vec) { return "x:" + INSPECTOR.Helpers.Trunc(vec.x) + ", y:" + INSPECTOR.Helpers.Trunc(vec.y); }
  296. },
  297. 'Vector3': {
  298. type: BABYLON.Vector3,
  299. properties: ['x', 'y', 'z'],
  300. format: function (vec) { return "x:" + INSPECTOR.Helpers.Trunc(vec.x) + ", y:" + INSPECTOR.Helpers.Trunc(vec.y) + ", z:" + INSPECTOR.Helpers.Trunc(vec.z); }
  301. },
  302. 'Color3': {
  303. type: BABYLON.Color3,
  304. properties: ['r', 'g', 'b'],
  305. format: function (color) { return "R:" + color.r + ", G:" + color.g + ", B:" + color.b; }
  306. },
  307. 'Quaternion': {
  308. type: BABYLON.Quaternion,
  309. properties: ['x', 'y', 'z', 'w']
  310. },
  311. 'Size': {
  312. type: BABYLON.Size,
  313. properties: ['width', 'height'],
  314. format: function (size) { return "Size - w:" + INSPECTOR.Helpers.Trunc(size.width) + ", h:" + INSPECTOR.Helpers.Trunc(size.height); }
  315. },
  316. 'Texture': {
  317. type: BABYLON.Texture,
  318. properties: [
  319. 'hasAlpha',
  320. 'level',
  321. 'name',
  322. 'wrapU',
  323. 'wrapV',
  324. 'uScale',
  325. 'vScale',
  326. 'uAng',
  327. 'vAng',
  328. 'wAng',
  329. 'uOffset',
  330. 'vOffset'
  331. ],
  332. format: function (tex) { return tex.name; }
  333. },
  334. 'ArcRotateCamera': {
  335. type: BABYLON.ArcRotateCamera,
  336. properties: [
  337. 'alpha',
  338. 'beta',
  339. 'radius',
  340. 'angularSensibilityX',
  341. 'angularSensibilityY',
  342. 'target',
  343. 'lowerAlphaLimit',
  344. 'lowerBetaLimit',
  345. 'upperAlphaLimit',
  346. 'upperBetaLimit',
  347. 'lowerRadiusLimit',
  348. 'upperRadiusLimit',
  349. 'pinchPrecision',
  350. 'wheelPrecision',
  351. 'allowUpsideDown',
  352. 'checkCollisions'
  353. ]
  354. },
  355. 'Scene': {
  356. type: BABYLON.Scene,
  357. properties: [
  358. 'actionManager',
  359. 'activeCamera',
  360. 'ambientColor',
  361. 'clearColor',
  362. 'forceWireframe',
  363. 'forcePointsCloud',
  364. 'forceShowBoundingBoxes',
  365. 'useRightHandedSystem',
  366. 'hoverCursor',
  367. 'cameraToUseForPointers',
  368. 'fogEnabled',
  369. 'fogColor',
  370. 'fogDensity',
  371. 'fogStart',
  372. 'fogEnd',
  373. 'shadowsEnabled',
  374. 'lightsEnabled',
  375. 'collisionsEnabled',
  376. 'gravity',
  377. 'meshUnderPointer',
  378. 'pointerX',
  379. 'pointerY',
  380. 'uid'
  381. ]
  382. },
  383. 'Mesh': {
  384. type: BABYLON.Mesh,
  385. properties: [
  386. 'name',
  387. 'position',
  388. 'rotation',
  389. 'rotationQuaternion',
  390. 'absolutePosition',
  391. 'material',
  392. 'actionManager',
  393. 'visibility',
  394. 'isVisible',
  395. 'isPickable',
  396. 'renderingGroupId',
  397. 'receiveShadows',
  398. 'renderOutline',
  399. 'outlineColor',
  400. 'outlineWidth',
  401. 'renderOverlay',
  402. 'overlayColor',
  403. 'overlayAlpha',
  404. 'hasVertexAlpha',
  405. 'useVertexColors',
  406. 'layerMask',
  407. 'alwaysSelectAsActiveMesh',
  408. 'ellipsoid',
  409. 'ellipsoidOffset',
  410. 'edgesWidth',
  411. 'edgesColor',
  412. 'checkCollisions',
  413. 'hasLODLevels'
  414. ],
  415. format: function (m) { return m.name; }
  416. },
  417. 'StandardMaterial': {
  418. type: BABYLON.StandardMaterial,
  419. properties: [
  420. 'name',
  421. 'alpha',
  422. 'alphaMode',
  423. 'wireframe',
  424. 'isFrozen',
  425. 'zOffset',
  426. 'ambientColor',
  427. 'emissiveColor',
  428. 'diffuseColor',
  429. 'specularColor',
  430. 'specularPower',
  431. 'useAlphaFromDiffuseTexture',
  432. 'linkEmissiveWithDiffuse',
  433. 'useSpecularOverAlpha',
  434. 'diffuseFresnelParameters',
  435. 'opacityFresnelParameters',
  436. 'reflectionFresnelParameters',
  437. 'refractionFresnelParameters',
  438. 'emissiveFresnelParameters',
  439. 'diffuseTexture',
  440. 'emissiveTexture',
  441. 'specularTexture',
  442. 'ambientTexture',
  443. 'bumpTexture',
  444. 'lightMapTexture',
  445. 'opacityTexture',
  446. 'reflectionTexture',
  447. 'refractionTexture'
  448. ],
  449. format: function (mat) { return mat.name; }
  450. },
  451. 'PrimitiveAlignment': {
  452. type: BABYLON.PrimitiveAlignment,
  453. properties: ['horizontal', 'vertical']
  454. },
  455. 'PrimitiveThickness': {
  456. type: BABYLON.PrimitiveThickness,
  457. properties: ['topPixels', 'leftPixels', 'rightPixels', 'bottomPixels']
  458. },
  459. 'BoundingInfo2D': {
  460. type: BABYLON.BoundingInfo2D,
  461. properties: ['radius', 'center', 'extent']
  462. },
  463. 'SolidColorBrush2D': {
  464. type: BABYLON.SolidColorBrush2D,
  465. properties: ['color']
  466. },
  467. 'GradientColorBrush2D': {
  468. type: BABYLON.GradientColorBrush2D,
  469. properties: ['color1', 'color2', 'translation', 'rotation', 'scale']
  470. },
  471. 'PBRMaterial': {
  472. type: BABYLON.PBRMaterial,
  473. properties: [
  474. 'name',
  475. 'albedoColor',
  476. 'albedoTexture',
  477. 'opacityTexture',
  478. 'reflectionTexture',
  479. 'emissiveTexture',
  480. 'bumpTexture',
  481. 'lightmapTexture',
  482. 'opacityFresnelParameters',
  483. 'emissiveFresnelParameters',
  484. 'linkEmissiveWithAlbedo',
  485. 'useLightmapAsShadowmap',
  486. 'useAlphaFromAlbedoTexture',
  487. 'useSpecularOverAlpha',
  488. 'useAutoMicroSurfaceFromReflectivityMap',
  489. 'useLogarithmicDepth',
  490. 'reflectivityColor',
  491. 'reflectivityTexture',
  492. 'reflectionTexture',
  493. 'reflectionColor',
  494. 'alpha',
  495. 'linkRefractionWithTransparency',
  496. 'indexOfRefraction',
  497. 'microSurface',
  498. 'useMicroSurfaceFromReflectivityMapAlpha',
  499. 'directIntensity',
  500. 'emissiveIntensity',
  501. 'specularIntensity',
  502. 'environmentIntensity',
  503. 'cameraExposure',
  504. 'cameraContrast',
  505. 'cameraColorGradingTexture',
  506. 'cameraColorCurves'
  507. ]
  508. }
  509. };
  510. })(INSPECTOR || (INSPECTOR = {}));
  511. //# sourceMappingURL=properties.js.map
  512. var INSPECTOR;
  513. (function (INSPECTOR) {
  514. /**
  515. * Represents a html div element.
  516. * The div is built when an instance of BasicElement is created.
  517. */
  518. var BasicElement = (function () {
  519. function BasicElement() {
  520. this._div = INSPECTOR.Helpers.CreateDiv();
  521. }
  522. /**
  523. * Returns the div element
  524. */
  525. BasicElement.prototype.toHtml = function () {
  526. return this._div;
  527. };
  528. /**
  529. * Build the html element
  530. */
  531. BasicElement.prototype._build = function () { };
  532. ;
  533. /** Default dispose method if needed */
  534. BasicElement.prototype.dispose = function () { };
  535. ;
  536. return BasicElement;
  537. }());
  538. INSPECTOR.BasicElement = BasicElement;
  539. })(INSPECTOR || (INSPECTOR = {}));
  540. //# sourceMappingURL=BasicElement.js.map
  541. var INSPECTOR;
  542. (function (INSPECTOR) {
  543. var Adapter = (function () {
  544. function Adapter(obj) {
  545. this._obj = obj;
  546. }
  547. Object.defineProperty(Adapter.prototype, "actualObject", {
  548. /** Returns the actual object behind this adapter */
  549. get: function () {
  550. return this._obj;
  551. },
  552. enumerable: true,
  553. configurable: true
  554. });
  555. /** Returns true if the given object correspond to this */
  556. Adapter.prototype.correspondsTo = function (obj) {
  557. return obj === this._obj;
  558. };
  559. Object.defineProperty(Adapter.prototype, "name", {
  560. /** Returns the adapter unique name */
  561. get: function () {
  562. return Adapter._name;
  563. },
  564. enumerable: true,
  565. configurable: true
  566. });
  567. /** Should be overriden in subclasses */
  568. Adapter.prototype.highlight = function (b) { };
  569. ;
  570. return Adapter;
  571. }());
  572. // a unique name for this adapter, to retrieve its own key in the local storage
  573. Adapter._name = BABYLON.Geometry.RandomId();
  574. INSPECTOR.Adapter = Adapter;
  575. })(INSPECTOR || (INSPECTOR = {}));
  576. //# sourceMappingURL=Adapter.js.map
  577. var __extends = (this && this.__extends) || function (d, b) {
  578. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  579. function __() { this.constructor = d; }
  580. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  581. };
  582. var INSPECTOR;
  583. (function (INSPECTOR) {
  584. var Canvas2DAdapter = (function (_super) {
  585. __extends(Canvas2DAdapter, _super);
  586. function Canvas2DAdapter(obj) {
  587. return _super.call(this, obj) || this;
  588. }
  589. /** Returns the name displayed in the tree */
  590. Canvas2DAdapter.prototype.id = function () {
  591. var str = '';
  592. if (this._obj.id) {
  593. str = this._obj.id;
  594. } // otherwise nothing displayed
  595. return str;
  596. };
  597. /** Returns the type of this object - displayed in the tree */
  598. Canvas2DAdapter.prototype.type = function () {
  599. return INSPECTOR.Helpers.GET_TYPE(this._obj);
  600. };
  601. /** Returns the list of properties to be displayed for this adapter */
  602. Canvas2DAdapter.prototype.getProperties = function () {
  603. var _this = this;
  604. var propertiesLines = [];
  605. if (this._obj.propDic) {
  606. var dico = this._obj.propDic;
  607. dico.forEach(function (name, propInfo) {
  608. var property = new INSPECTOR.Property(name, _this.actualObject);
  609. propertiesLines.push(new INSPECTOR.PropertyLine(property));
  610. });
  611. }
  612. // TODO REMOVE THIS WHEN PROPERTIES WILL BE DECORATED
  613. var toAddDirty = [
  614. 'actualZOffset', 'isSizeAuto', 'layoutArea', 'layoutAreaPos', 'contentArea',
  615. 'marginOffset', 'paddingOffset', 'isPickable', 'isContainer', 'boundingInfo',
  616. 'levelBoundingInfo', 'isSizedByContent', 'isPositionAuto', 'actualScale', 'layoutBoundingInfo',
  617. '_cachedTexture'
  618. ];
  619. for (var _i = 0, toAddDirty_1 = toAddDirty; _i < toAddDirty_1.length; _i++) {
  620. var dirty = toAddDirty_1[_i];
  621. var infos = new INSPECTOR.Property(dirty, this.actualObject);
  622. propertiesLines.push(new INSPECTOR.PropertyLine(infos));
  623. }
  624. return propertiesLines;
  625. };
  626. Canvas2DAdapter.prototype.getTools = function () {
  627. var tools = [];
  628. tools.push(new INSPECTOR.Checkbox(this));
  629. tools.push(new INSPECTOR.DebugArea(this));
  630. return tools;
  631. };
  632. /// TOOLS ///
  633. Canvas2DAdapter.prototype.setVisible = function (b) {
  634. this._obj.levelVisible = b;
  635. };
  636. Canvas2DAdapter.prototype.isVisible = function () {
  637. return this._obj.levelVisible;
  638. };
  639. /** Overrides super */
  640. Canvas2DAdapter.prototype.debug = function (b) {
  641. this._obj["displayDebugAreas"] = b;
  642. };
  643. /** Overrides super.highlight */
  644. Canvas2DAdapter.prototype.highlight = function (b) {
  645. };
  646. return Canvas2DAdapter;
  647. }(INSPECTOR.Adapter));
  648. INSPECTOR.Canvas2DAdapter = Canvas2DAdapter;
  649. })(INSPECTOR || (INSPECTOR = {}));
  650. //# sourceMappingURL=Canvas2DAdapter.js.map
  651. var __extends = (this && this.__extends) || function (d, b) {
  652. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  653. function __() { this.constructor = d; }
  654. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  655. };
  656. var INSPECTOR;
  657. (function (INSPECTOR) {
  658. var LightAdapter = (function (_super) {
  659. __extends(LightAdapter, _super);
  660. function LightAdapter(obj) {
  661. return _super.call(this, obj) || this;
  662. }
  663. /** Returns the name displayed in the tree */
  664. LightAdapter.prototype.id = function () {
  665. var str = '';
  666. if (this._obj.name) {
  667. str = this._obj.name;
  668. } // otherwise nothing displayed
  669. return str;
  670. };
  671. /** Returns the type of this object - displayed in the tree */
  672. LightAdapter.prototype.type = function () {
  673. return INSPECTOR.Helpers.GET_TYPE(this._obj);
  674. };
  675. /** Returns the list of properties to be displayed for this adapter */
  676. LightAdapter.prototype.getProperties = function () {
  677. var propertiesLines = [];
  678. for (var _i = 0, _a = LightAdapter._PROPERTIES; _i < _a.length; _i++) {
  679. var dirty = _a[_i];
  680. var infos = new INSPECTOR.Property(dirty, this._obj);
  681. propertiesLines.push(new INSPECTOR.PropertyLine(infos));
  682. }
  683. return propertiesLines;
  684. };
  685. LightAdapter.prototype.getTools = function () {
  686. var tools = [];
  687. tools.push(new INSPECTOR.Checkbox(this));
  688. return tools;
  689. };
  690. LightAdapter.prototype.setVisible = function (b) {
  691. this._obj.setEnabled(b);
  692. };
  693. LightAdapter.prototype.isVisible = function () {
  694. return this._obj.isEnabled();
  695. };
  696. /** Returns some information about this mesh */
  697. // public getInfo() : string {
  698. // return `${(this._obj as BABYLON.AbstractMesh).getTotalVertices()} vertices`;
  699. // }
  700. /** Overrides super.highlight */
  701. LightAdapter.prototype.highlight = function (b) {
  702. this.actualObject.renderOutline = b;
  703. this.actualObject.outlineWidth = 0.25;
  704. this.actualObject.outlineColor = BABYLON.Color3.Yellow();
  705. };
  706. return LightAdapter;
  707. }(INSPECTOR.Adapter));
  708. LightAdapter._PROPERTIES = [
  709. 'position',
  710. 'diffuse',
  711. 'intensity',
  712. 'radius',
  713. 'range',
  714. 'specular'
  715. ];
  716. INSPECTOR.LightAdapter = LightAdapter;
  717. })(INSPECTOR || (INSPECTOR = {}));
  718. //# sourceMappingURL=LightAdapter.js.map
  719. var __extends = (this && this.__extends) || function (d, b) {
  720. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  721. function __() { this.constructor = d; }
  722. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  723. };
  724. var INSPECTOR;
  725. (function (INSPECTOR) {
  726. var MaterialAdapter = (function (_super) {
  727. __extends(MaterialAdapter, _super);
  728. function MaterialAdapter(obj) {
  729. return _super.call(this, obj) || this;
  730. }
  731. /** Returns the name displayed in the tree */
  732. MaterialAdapter.prototype.id = function () {
  733. var str = '';
  734. if (this._obj.name) {
  735. str = this._obj.name;
  736. } // otherwise nothing displayed
  737. return str;
  738. };
  739. /** Returns the type of this object - displayed in the tree */
  740. MaterialAdapter.prototype.type = function () {
  741. return INSPECTOR.Helpers.GET_TYPE(this._obj);
  742. };
  743. /** Returns the list of properties to be displayed for this adapter */
  744. MaterialAdapter.prototype.getProperties = function () {
  745. var propertiesLines = [];
  746. var propToDisplay = [];
  747. // The if is there to work with the min version of babylon
  748. if (this._obj instanceof BABYLON.StandardMaterial) {
  749. propToDisplay = INSPECTOR.PROPERTIES['StandardMaterial'].properties;
  750. }
  751. else if (this._obj instanceof BABYLON.PBRMaterial) {
  752. propToDisplay = INSPECTOR.PROPERTIES['PBRMaterial'].properties;
  753. }
  754. for (var _i = 0, propToDisplay_1 = propToDisplay; _i < propToDisplay_1.length; _i++) {
  755. var dirty = propToDisplay_1[_i];
  756. var infos = new INSPECTOR.Property(dirty, this._obj);
  757. propertiesLines.push(new INSPECTOR.PropertyLine(infos));
  758. }
  759. return propertiesLines;
  760. };
  761. /** No tools for a material adapter */
  762. MaterialAdapter.prototype.getTools = function () {
  763. return [];
  764. };
  765. /** Overrides super.highlight.
  766. * Highlighting a material outlines all meshes linked to this material
  767. */
  768. MaterialAdapter.prototype.highlight = function (b) {
  769. var material = this.actualObject;
  770. var meshes = material.getBindedMeshes();
  771. for (var _i = 0, meshes_1 = meshes; _i < meshes_1.length; _i++) {
  772. var mesh = meshes_1[_i];
  773. mesh.renderOutline = b;
  774. mesh.outlineWidth = 0.25;
  775. mesh.outlineColor = BABYLON.Color3.Yellow();
  776. }
  777. };
  778. return MaterialAdapter;
  779. }(INSPECTOR.Adapter));
  780. INSPECTOR.MaterialAdapter = MaterialAdapter;
  781. })(INSPECTOR || (INSPECTOR = {}));
  782. //# sourceMappingURL=MaterialAdapter.js.map
  783. var __extends = (this && this.__extends) || function (d, b) {
  784. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  785. function __() { this.constructor = d; }
  786. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  787. };
  788. var INSPECTOR;
  789. (function (INSPECTOR) {
  790. var MeshAdapter = (function (_super) {
  791. __extends(MeshAdapter, _super);
  792. function MeshAdapter(obj) {
  793. var _this = _super.call(this, obj) || this;
  794. /** Keep track of the axis of the actual object */
  795. _this._axis = [];
  796. return _this;
  797. }
  798. /** Returns the name displayed in the tree */
  799. MeshAdapter.prototype.id = function () {
  800. var str = '';
  801. if (this._obj.name) {
  802. str = this._obj.name;
  803. } // otherwise nothing displayed
  804. return str;
  805. };
  806. /** Returns the type of this object - displayed in the tree */
  807. MeshAdapter.prototype.type = function () {
  808. return INSPECTOR.Helpers.GET_TYPE(this._obj);
  809. };
  810. /** Returns the list of properties to be displayed for this adapter */
  811. MeshAdapter.prototype.getProperties = function () {
  812. var propertiesLines = [];
  813. for (var _i = 0, _a = INSPECTOR.PROPERTIES['Mesh'].properties; _i < _a.length; _i++) {
  814. var dirty = _a[_i];
  815. var infos = new INSPECTOR.Property(dirty, this._obj);
  816. propertiesLines.push(new INSPECTOR.PropertyLine(infos));
  817. }
  818. return propertiesLines;
  819. };
  820. MeshAdapter.prototype.getTools = function () {
  821. var tools = [];
  822. tools.push(new INSPECTOR.Checkbox(this));
  823. tools.push(new INSPECTOR.DebugArea(this));
  824. tools.push(new INSPECTOR.BoundingBox(this));
  825. tools.push(new INSPECTOR.Info(this));
  826. return tools;
  827. };
  828. MeshAdapter.prototype.setVisible = function (b) {
  829. this._obj.setEnabled(b);
  830. this._obj.isVisible = b;
  831. };
  832. MeshAdapter.prototype.isVisible = function () {
  833. return this._obj.isEnabled() && this._obj.isVisible;
  834. };
  835. MeshAdapter.prototype.isBoxVisible = function () {
  836. return this._obj.showBoundingBox;
  837. };
  838. MeshAdapter.prototype.setBoxVisible = function (b) {
  839. return this._obj.showBoundingBox = b;
  840. };
  841. MeshAdapter.prototype.debug = function (b) {
  842. // Draw axis the first time
  843. if (this._axis.length == 0) {
  844. this._drawAxis();
  845. }
  846. // Display or hide axis
  847. for (var _i = 0, _a = this._axis; _i < _a.length; _i++) {
  848. var ax = _a[_i];
  849. ax.setEnabled(b);
  850. }
  851. };
  852. /** Returns some information about this mesh */
  853. MeshAdapter.prototype.getInfo = function () {
  854. return this._obj.getTotalVertices() + " vertices";
  855. };
  856. /** Overrides super.highlight */
  857. MeshAdapter.prototype.highlight = function (b) {
  858. this.actualObject.renderOutline = b;
  859. this.actualObject.outlineWidth = 0.25;
  860. this.actualObject.outlineColor = BABYLON.Color3.Yellow();
  861. };
  862. /** Draw X, Y and Z axis for the actual object if this adapter.
  863. * Should be called only one time as it will fill this._axis
  864. */
  865. MeshAdapter.prototype._drawAxis = function () {
  866. var _this = this;
  867. this._obj.computeWorldMatrix();
  868. var m = this._obj.getWorldMatrix();
  869. // Axis
  870. var x = new BABYLON.Vector3(8, 0, 0);
  871. var y = new BABYLON.Vector3(0, 8, 0);
  872. var z = new BABYLON.Vector3(0, 0, 8);
  873. // Draw an axis of the given color
  874. var _drawAxis = function (color, start, end) {
  875. var axis = BABYLON.Mesh.CreateLines("###axis###", [
  876. start,
  877. end
  878. ], _this._obj.getScene());
  879. axis.color = color;
  880. axis.renderingGroupId = 1;
  881. return axis;
  882. };
  883. // X axis
  884. var xAxis = _drawAxis(BABYLON.Color3.Red(), this._obj.getAbsolutePosition(), BABYLON.Vector3.TransformCoordinates(x, m));
  885. xAxis.position.subtractInPlace(this._obj.position);
  886. xAxis.parent = this._obj;
  887. this._axis.push(xAxis);
  888. // Y axis
  889. var yAxis = _drawAxis(BABYLON.Color3.Green(), this._obj.getAbsolutePosition(), BABYLON.Vector3.TransformCoordinates(y, m));
  890. yAxis.parent = this._obj;
  891. yAxis.position.subtractInPlace(this._obj.position);
  892. this._axis.push(yAxis);
  893. // Z axis
  894. var zAxis = _drawAxis(BABYLON.Color3.Blue(), this._obj.getAbsolutePosition(), BABYLON.Vector3.TransformCoordinates(z, m));
  895. zAxis.parent = this._obj;
  896. zAxis.position.subtractInPlace(this._obj.position);
  897. this._axis.push(zAxis);
  898. };
  899. return MeshAdapter;
  900. }(INSPECTOR.Adapter));
  901. INSPECTOR.MeshAdapter = MeshAdapter;
  902. })(INSPECTOR || (INSPECTOR = {}));
  903. //# sourceMappingURL=MeshAdapter.js.map
  904. var __extends = (this && this.__extends) || function (d, b) {
  905. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  906. function __() { this.constructor = d; }
  907. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  908. };
  909. var INSPECTOR;
  910. (function (INSPECTOR) {
  911. var DetailPanel = (function (_super) {
  912. __extends(DetailPanel, _super);
  913. function DetailPanel(dr) {
  914. var _this = _super.call(this) || this;
  915. // Contains all details rows that belongs to the item above
  916. _this._detailRows = [];
  917. // Store the sort direction of each header column
  918. _this._sortDirection = {};
  919. _this._build();
  920. if (dr) {
  921. _this._detailRows = dr;
  922. _this.update();
  923. }
  924. return _this;
  925. }
  926. Object.defineProperty(DetailPanel.prototype, "details", {
  927. set: function (detailsRow) {
  928. this.clean();
  929. this._detailRows = detailsRow;
  930. // Refresh HTML
  931. this.update();
  932. },
  933. enumerable: true,
  934. configurable: true
  935. });
  936. DetailPanel.prototype._build = function () {
  937. this._div.className = 'insp-details';
  938. this._div.id = 'insp-details';
  939. // Create header row
  940. this._createHeaderRow();
  941. this._div.appendChild(this._headerRow);
  942. };
  943. /** Updates the HTML of the detail panel */
  944. DetailPanel.prototype.update = function () {
  945. this._sortDetails('name', 1);
  946. this._addDetails();
  947. };
  948. /** Add all lines in the html div. Does not sort them! */
  949. DetailPanel.prototype._addDetails = function () {
  950. var details = INSPECTOR.Helpers.CreateDiv('details', this._div);
  951. for (var _i = 0, _a = this._detailRows; _i < _a.length; _i++) {
  952. var row = _a[_i];
  953. details.appendChild(row.toHtml());
  954. }
  955. };
  956. /**
  957. * Sort the details row by comparing the given property of each row
  958. */
  959. DetailPanel.prototype._sortDetails = function (property, _direction) {
  960. // Clean header
  961. var elems = INSPECTOR.Inspector.DOCUMENT.querySelectorAll('.sort-direction');
  962. for (var e = 0; e < elems.length; e++) {
  963. elems[e].classList.remove('fa-chevron-up');
  964. elems[e].classList.remove('fa-chevron-down');
  965. }
  966. if (_direction || !this._sortDirection[property]) {
  967. this._sortDirection[property] = _direction || 1;
  968. }
  969. else {
  970. this._sortDirection[property] *= -1;
  971. }
  972. var direction = this._sortDirection[property];
  973. if (direction == 1) {
  974. this._headerRow.querySelector("#sort-direction-" + property).classList.remove('fa-chevron-down');
  975. this._headerRow.querySelector("#sort-direction-" + property).classList.add('fa-chevron-up');
  976. }
  977. else {
  978. this._headerRow.querySelector("#sort-direction-" + property).classList.remove('fa-chevron-up');
  979. this._headerRow.querySelector("#sort-direction-" + property).classList.add('fa-chevron-down');
  980. }
  981. var isString = function (s) {
  982. return typeof (s) === 'string' || s instanceof String;
  983. };
  984. this._detailRows.sort(function (detail1, detail2) {
  985. var str1 = String(detail1[property]);
  986. var str2 = String(detail2[property]);
  987. if (!isString(str1)) {
  988. str1 = detail1[property].toString();
  989. }
  990. if (!isString(str2)) {
  991. str2 = detail2[property].toString();
  992. }
  993. // Compare numbers as numbers and string as string with 'numeric=true'
  994. return str1.localeCompare(str2, [], { numeric: true }) * direction;
  995. });
  996. };
  997. /**
  998. * Removes all data in the detail panel but keep the header row
  999. */
  1000. DetailPanel.prototype.clean = function () {
  1001. // Delete all details row
  1002. for (var _i = 0, _a = this._detailRows; _i < _a.length; _i++) {
  1003. var pline = _a[_i];
  1004. pline.dispose();
  1005. }
  1006. INSPECTOR.Helpers.CleanDiv(this._div);
  1007. // Header row
  1008. this._div.appendChild(this._headerRow);
  1009. };
  1010. /** Overrides basicelement.dispose */
  1011. DetailPanel.prototype.dispose = function () {
  1012. // Delete all details row
  1013. for (var _i = 0, _a = this._detailRows; _i < _a.length; _i++) {
  1014. var pline = _a[_i];
  1015. pline.dispose();
  1016. }
  1017. };
  1018. /**
  1019. * Creates the header row : name, value, id
  1020. */
  1021. DetailPanel.prototype._createHeaderRow = function () {
  1022. var _this = this;
  1023. this._headerRow = INSPECTOR.Helpers.CreateDiv('header-row');
  1024. var createDiv = function (name, cssClass) {
  1025. var div = INSPECTOR.Helpers.CreateDiv(cssClass + ' header-col');
  1026. // Column title - first letter in uppercase
  1027. var spanName = INSPECTOR.Inspector.DOCUMENT.createElement('span');
  1028. spanName.textContent = name.charAt(0).toUpperCase() + name.slice(1);
  1029. // sort direction
  1030. var spanDirection = INSPECTOR.Inspector.DOCUMENT.createElement('i');
  1031. spanDirection.className = 'sort-direction fa';
  1032. spanDirection.id = 'sort-direction-' + name;
  1033. div.appendChild(spanName);
  1034. div.appendChild(spanDirection);
  1035. div.addEventListener('click', function (e) {
  1036. _this._sortDetails(name);
  1037. _this._addDetails();
  1038. });
  1039. return div;
  1040. };
  1041. this._headerRow.appendChild(createDiv('name', 'prop-name'));
  1042. this._headerRow.appendChild(createDiv('value', 'prop-value'));
  1043. };
  1044. return DetailPanel;
  1045. }(INSPECTOR.BasicElement));
  1046. INSPECTOR.DetailPanel = DetailPanel;
  1047. })(INSPECTOR || (INSPECTOR = {}));
  1048. //# sourceMappingURL=DetailPanel.js.map
  1049. var INSPECTOR;
  1050. (function (INSPECTOR) {
  1051. /**
  1052. * A property is a link between a data (string) and an object.
  1053. */
  1054. var Property = (function () {
  1055. function Property(prop, obj) {
  1056. this._property = prop;
  1057. this._obj = obj;
  1058. }
  1059. Object.defineProperty(Property.prototype, "name", {
  1060. get: function () {
  1061. return this._property;
  1062. },
  1063. enumerable: true,
  1064. configurable: true
  1065. });
  1066. Object.defineProperty(Property.prototype, "value", {
  1067. get: function () {
  1068. return this._obj[this._property];
  1069. },
  1070. set: function (newValue) {
  1071. this._obj[this._property] = newValue;
  1072. },
  1073. enumerable: true,
  1074. configurable: true
  1075. });
  1076. Object.defineProperty(Property.prototype, "type", {
  1077. get: function () {
  1078. return INSPECTOR.Helpers.GET_TYPE(this.value);
  1079. },
  1080. enumerable: true,
  1081. configurable: true
  1082. });
  1083. Object.defineProperty(Property.prototype, "obj", {
  1084. get: function () {
  1085. return this._obj;
  1086. },
  1087. set: function (newObj) {
  1088. this._obj = newObj;
  1089. },
  1090. enumerable: true,
  1091. configurable: true
  1092. });
  1093. return Property;
  1094. }());
  1095. INSPECTOR.Property = Property;
  1096. })(INSPECTOR || (INSPECTOR = {}));
  1097. //# sourceMappingURL=Property.js.map
  1098. var INSPECTOR;
  1099. (function (INSPECTOR) {
  1100. var PropertyFormatter = (function () {
  1101. function PropertyFormatter() {
  1102. }
  1103. /**
  1104. * Format the value of the given property of the given object.
  1105. */
  1106. PropertyFormatter.format = function (obj, prop) {
  1107. // Get original value;
  1108. var value = obj[prop];
  1109. // test if type PrimitiveAlignment is available (only included in canvas2d)
  1110. if (BABYLON.PrimitiveAlignment) {
  1111. if (obj instanceof BABYLON.PrimitiveAlignment) {
  1112. if (prop === 'horizontal') {
  1113. switch (value) {
  1114. case BABYLON.PrimitiveAlignment.AlignLeft:
  1115. return 'left';
  1116. case BABYLON.PrimitiveAlignment.AlignRight:
  1117. return 'right';
  1118. case BABYLON.PrimitiveAlignment.AlignCenter:
  1119. return 'center';
  1120. case BABYLON.PrimitiveAlignment.AlignStretch:
  1121. return 'stretch';
  1122. }
  1123. }
  1124. else if (prop === 'vertical') {
  1125. switch (value) {
  1126. case BABYLON.PrimitiveAlignment.AlignTop:
  1127. return 'top';
  1128. case BABYLON.PrimitiveAlignment.AlignBottom:
  1129. return 'bottom';
  1130. case BABYLON.PrimitiveAlignment.AlignCenter:
  1131. return 'center';
  1132. case BABYLON.PrimitiveAlignment.AlignStretch:
  1133. return 'stretch';
  1134. }
  1135. }
  1136. }
  1137. }
  1138. return value;
  1139. };
  1140. return PropertyFormatter;
  1141. }());
  1142. INSPECTOR.PropertyFormatter = PropertyFormatter;
  1143. /**
  1144. * A property line represents a line in the detail panel. This line is composed of :
  1145. * - a name (the property name)
  1146. * - a value if this property is of a type 'simple' : string, number, boolean, color, texture
  1147. * - the type of the value if this property is of a complex type (Vector2, Size, ...)
  1148. * - a ID if defined (otherwise an empty string is displayed)
  1149. * The original object is sent to the value object who will update it at will.
  1150. *
  1151. * A property line can contain OTHER property line objects in the case of a complex type.
  1152. * If this instance has no link to other instances, its type is ALWAYS a simple one (see above).
  1153. *
  1154. */
  1155. var PropertyLine = (function () {
  1156. function PropertyLine(prop, parent, level) {
  1157. if (level === void 0) { level = 0; }
  1158. // If the type is complex, this property will have child to update
  1159. this._children = [];
  1160. /** The list of viewer element displayed at the end of the line (color, texture...) */
  1161. this._elements = [];
  1162. this._property = prop;
  1163. this._level = level;
  1164. this._parent = parent;
  1165. this._div = INSPECTOR.Helpers.CreateDiv('row');
  1166. this._div.style.marginLeft = this._level + "px";
  1167. // Property name
  1168. var propName = INSPECTOR.Helpers.CreateDiv('prop-name', this._div);
  1169. propName.textContent = "" + this.name;
  1170. // Value
  1171. this._valueDiv = INSPECTOR.Helpers.CreateDiv('prop-value', this._div);
  1172. this._valueDiv.textContent = this._displayValueContent() || '-'; // Init value text node
  1173. this._createElements();
  1174. for (var _i = 0, _a = this._elements; _i < _a.length; _i++) {
  1175. var elem = _a[_i];
  1176. this._valueDiv.appendChild(elem.toHtml());
  1177. }
  1178. this._updateValue();
  1179. // If the property type is not simple, add click event to unfold its children
  1180. if (!this._isSimple()) {
  1181. this._valueDiv.classList.add('clickable');
  1182. this._valueDiv.addEventListener('click', this._addDetails.bind(this));
  1183. }
  1184. else {
  1185. this._initInput();
  1186. this._valueDiv.addEventListener('click', this._displayInputHandler);
  1187. this._input.addEventListener('keypress', this._validateInputHandler);
  1188. }
  1189. // Add this property to the scheduler
  1190. INSPECTOR.Scheduler.getInstance().add(this);
  1191. }
  1192. /**
  1193. * Init the input element and al its handler :
  1194. * - a click in the window remove the input and restore the old property value
  1195. * - enters updates the property
  1196. */
  1197. PropertyLine.prototype._initInput = function () {
  1198. // Create the input element
  1199. this._input = document.createElement('input');
  1200. this._input.setAttribute('type', 'text');
  1201. // if the property is 'simple', add an event listener to create an input
  1202. this._displayInputHandler = this._displayInput.bind(this);
  1203. this._validateInputHandler = this._validateInput.bind(this);
  1204. };
  1205. /**
  1206. * On enter : validates the new value and removes the input
  1207. * On escape : removes the input
  1208. */
  1209. PropertyLine.prototype._validateInput = function (e) {
  1210. if (e.keyCode == 13) {
  1211. // Enter : validate the new value
  1212. var newValue = this._input.value;
  1213. this.updateObject();
  1214. this._property.value = newValue;
  1215. // Remove input
  1216. this.update();
  1217. // resume scheduler
  1218. INSPECTOR.Scheduler.getInstance().pause = false;
  1219. }
  1220. else if (e.keyCode == 27) {
  1221. // Esc : remove input
  1222. this.update();
  1223. }
  1224. };
  1225. /** Removes the input without validating the new value */
  1226. PropertyLine.prototype._removeInputWithoutValidating = function () {
  1227. INSPECTOR.Helpers.CleanDiv(this._valueDiv);
  1228. this._valueDiv.textContent = "-";
  1229. // restore elements
  1230. for (var _i = 0, _a = this._elements; _i < _a.length; _i++) {
  1231. var elem = _a[_i];
  1232. this._valueDiv.appendChild(elem.toHtml());
  1233. }
  1234. this._valueDiv.addEventListener('click', this._displayInputHandler);
  1235. };
  1236. /** Replaces the default display with an input */
  1237. PropertyLine.prototype._displayInput = function (e) {
  1238. // Remove the displayInput event listener
  1239. this._valueDiv.removeEventListener('click', this._displayInputHandler);
  1240. // Set input value
  1241. var valueTxt = this._valueDiv.textContent;
  1242. this._valueDiv.textContent = "";
  1243. this._input.value = valueTxt;
  1244. this._valueDiv.appendChild(this._input);
  1245. // Pause the scheduler
  1246. INSPECTOR.Scheduler.getInstance().pause = true;
  1247. };
  1248. /** Retrieve the correct object from its parent.
  1249. * If no parent exists, returns the property value.
  1250. * This method is used at each update in case the property object is removed from the original object
  1251. * (example : mesh.position = new BABYLON.Vector3 ; the original vector3 object is deleted from the mesh).
  1252. */
  1253. PropertyLine.prototype.updateObject = function () {
  1254. if (this._parent) {
  1255. this._property.obj = this._parent.updateObject();
  1256. }
  1257. return this._property.value;
  1258. };
  1259. Object.defineProperty(PropertyLine.prototype, "name", {
  1260. // Returns the property name
  1261. get: function () {
  1262. return this._property.name;
  1263. },
  1264. enumerable: true,
  1265. configurable: true
  1266. });
  1267. Object.defineProperty(PropertyLine.prototype, "value", {
  1268. // Returns the value of the property
  1269. get: function () {
  1270. return PropertyFormatter.format(this._property.obj, this._property.name);
  1271. },
  1272. enumerable: true,
  1273. configurable: true
  1274. });
  1275. Object.defineProperty(PropertyLine.prototype, "type", {
  1276. // Returns the type of the property
  1277. get: function () {
  1278. return this._property.type;
  1279. },
  1280. enumerable: true,
  1281. configurable: true
  1282. });
  1283. /**
  1284. * Creates elements that wil be displayed on a property line, depending on the
  1285. * type of the property.
  1286. */
  1287. PropertyLine.prototype._createElements = function () {
  1288. // Colors
  1289. if (this.type == 'Color3' || this.type == 'Color4') {
  1290. this._elements.push(new INSPECTOR.ColorElement(this.value));
  1291. }
  1292. // Texture
  1293. if (this.type == 'Texture') {
  1294. this._elements.push(new INSPECTOR.TextureElement(this.value));
  1295. }
  1296. // HDR Texture
  1297. if (this.type == 'HDRCubeTexture') {
  1298. this._elements.push(new INSPECTOR.HDRCubeTextureElement(this.value));
  1299. }
  1300. if (this.type == 'CubeTexture') {
  1301. this._elements.push(new INSPECTOR.CubeTextureElement(this.value));
  1302. }
  1303. };
  1304. // Returns the text displayed on the left of the property name :
  1305. // - If the type is simple, display its value
  1306. // - If the type is complex, but instance of Vector2, Size, display the type and its tostring
  1307. // - If the type is another one, display the Type
  1308. PropertyLine.prototype._displayValueContent = function () {
  1309. var value = this.value;
  1310. // If the value is a number, truncate it if needed
  1311. if (typeof value === 'number') {
  1312. return INSPECTOR.Helpers.Trunc(value);
  1313. }
  1314. // If it's a string or a boolean, display its value
  1315. if (typeof value === 'string' || typeof value === 'boolean') {
  1316. return value;
  1317. }
  1318. return INSPECTOR.PROPERTIES.format(value);
  1319. };
  1320. /** Delete properly this property line.
  1321. * Removes itself from the scheduler.
  1322. * Dispose all viewer element (color, texture...)
  1323. */
  1324. PropertyLine.prototype.dispose = function () {
  1325. // console.log('delete properties', this.name);
  1326. INSPECTOR.Scheduler.getInstance().remove(this);
  1327. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  1328. var child = _a[_i];
  1329. // console.log('delete properties', child.name);
  1330. INSPECTOR.Scheduler.getInstance().remove(child);
  1331. }
  1332. for (var _b = 0, _c = this._elements; _b < _c.length; _b++) {
  1333. var elem = _c[_b];
  1334. elem.dispose();
  1335. }
  1336. this._elements = [];
  1337. };
  1338. /** Updates the content of _valueDiv with the value of the property,
  1339. * and all HTML element correpsonding to this type.
  1340. * Elements are updated as well
  1341. */
  1342. PropertyLine.prototype._updateValue = function () {
  1343. // Update the property object first
  1344. this.updateObject();
  1345. // Then update its value
  1346. // this._valueDiv.textContent = " "; // TOFIX this removes the elements after
  1347. this._valueDiv.childNodes[0].nodeValue = this._displayValueContent();
  1348. for (var _i = 0, _a = this._elements; _i < _a.length; _i++) {
  1349. var elem = _a[_i];
  1350. elem.update(this.value);
  1351. }
  1352. };
  1353. /**
  1354. * Update the property division with the new property value.
  1355. * If this property is complex, update its child, otherwise update its text content
  1356. */
  1357. PropertyLine.prototype.update = function () {
  1358. this._removeInputWithoutValidating();
  1359. this._updateValue();
  1360. };
  1361. /**
  1362. * Returns true if the given instance is a simple type
  1363. */
  1364. PropertyLine._IS_TYPE_SIMPLE = function (inst) {
  1365. var type = INSPECTOR.Helpers.GET_TYPE(inst);
  1366. return PropertyLine._SIMPLE_TYPE.indexOf(type) != -1;
  1367. };
  1368. /**
  1369. * Returns true if the type of this property is simple, false otherwise.
  1370. * Returns true if the value is null
  1371. */
  1372. PropertyLine.prototype._isSimple = function () {
  1373. if (this.value != null && this.type !== 'type_not_defined') {
  1374. if (PropertyLine._SIMPLE_TYPE.indexOf(this.type) == -1) {
  1375. // complex type : return the type name
  1376. return false;
  1377. }
  1378. else {
  1379. // simple type : return value
  1380. return true;
  1381. }
  1382. }
  1383. else {
  1384. return true;
  1385. }
  1386. };
  1387. PropertyLine.prototype.toHtml = function () {
  1388. return this._div;
  1389. };
  1390. /**
  1391. * Add sub properties in case of a complex type
  1392. */
  1393. PropertyLine.prototype._addDetails = function () {
  1394. if (this._div.classList.contains('unfolded')) {
  1395. // Remove class unfolded
  1396. this._div.classList.remove('unfolded');
  1397. // remove html children
  1398. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  1399. var child = _a[_i];
  1400. this._div.parentNode.removeChild(child.toHtml());
  1401. }
  1402. }
  1403. else {
  1404. // if children does not exists, generate it
  1405. this._div.classList.toggle('unfolded');
  1406. if (this._children.length == 0) {
  1407. var objToDetail = this.value;
  1408. var propToDisplay = INSPECTOR.PROPERTIES[INSPECTOR.Helpers.GET_TYPE(objToDetail)].properties.reverse();
  1409. var propertyLine = null;
  1410. for (var _b = 0, propToDisplay_1 = propToDisplay; _b < propToDisplay_1.length; _b++) {
  1411. var prop = propToDisplay_1[_b];
  1412. var infos = new INSPECTOR.Property(prop, this._property.value);
  1413. var child = new PropertyLine(infos, this, this._level + PropertyLine._MARGIN_LEFT);
  1414. this._children.push(child);
  1415. }
  1416. }
  1417. // otherwise display it
  1418. for (var _c = 0, _d = this._children; _c < _d.length; _c++) {
  1419. var child = _d[_c];
  1420. this._div.parentNode.insertBefore(child.toHtml(), this._div.nextSibling);
  1421. }
  1422. }
  1423. };
  1424. return PropertyLine;
  1425. }());
  1426. // Array representing the simple type. All others are considered 'complex'
  1427. PropertyLine._SIMPLE_TYPE = ['number', 'string', 'boolean'];
  1428. // The number of pixel at each children step
  1429. PropertyLine._MARGIN_LEFT = 15;
  1430. INSPECTOR.PropertyLine = PropertyLine;
  1431. })(INSPECTOR || (INSPECTOR = {}));
  1432. //# sourceMappingURL=PropertyLine.js.map
  1433. var __extends = (this && this.__extends) || function (d, b) {
  1434. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1435. function __() { this.constructor = d; }
  1436. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1437. };
  1438. var INSPECTOR;
  1439. (function (INSPECTOR) {
  1440. /**
  1441. * Display a very small div corresponding to the given color
  1442. */
  1443. var ColorElement = (function (_super) {
  1444. __extends(ColorElement, _super);
  1445. // The color as hexadecimal string
  1446. function ColorElement(color) {
  1447. var _this = _super.call(this) || this;
  1448. _this._div.className = 'color-element';
  1449. _this._div.style.backgroundColor = _this._toRgba(color);
  1450. return _this;
  1451. }
  1452. ColorElement.prototype.update = function (color) {
  1453. if (color) {
  1454. this._div.style.backgroundColor = this._toRgba(color);
  1455. }
  1456. };
  1457. ColorElement.prototype._toRgba = function (color) {
  1458. if (color) {
  1459. var r = (color.r * 255) | 0;
  1460. var g = (color.g * 255) | 0;
  1461. var b = (color.b * 255) | 0;
  1462. var a = 1;
  1463. if (color instanceof BABYLON.Color4) {
  1464. var a_1 = color.a;
  1465. }
  1466. return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
  1467. }
  1468. else {
  1469. return '';
  1470. }
  1471. };
  1472. return ColorElement;
  1473. }(INSPECTOR.BasicElement));
  1474. INSPECTOR.ColorElement = ColorElement;
  1475. })(INSPECTOR || (INSPECTOR = {}));
  1476. //# sourceMappingURL=ColorElement.js.map
  1477. var __extends = (this && this.__extends) || function (d, b) {
  1478. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1479. function __() { this.constructor = d; }
  1480. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1481. };
  1482. var INSPECTOR;
  1483. (function (INSPECTOR) {
  1484. /**
  1485. * Display a very small div. A new canvas is created, with a new Babylon.js scene, containing only the
  1486. * cube texture in a cube
  1487. */
  1488. var CubeTextureElement = (function (_super) {
  1489. __extends(CubeTextureElement, _super);
  1490. /** The texture given as a parameter should be cube. */
  1491. function CubeTextureElement(tex) {
  1492. var _this = _super.call(this) || this;
  1493. // On pause the engine will not render anything
  1494. _this._pause = false;
  1495. _this._div.className = 'fa fa-search texture-element';
  1496. // Create the texture viewer
  1497. _this._textureDiv = INSPECTOR.Helpers.CreateDiv('texture-viewer', _this._div);
  1498. // canvas
  1499. _this._canvas = INSPECTOR.Helpers.CreateElement('canvas', 'texture-viewer-img', _this._textureDiv);
  1500. if (tex) {
  1501. _this._textureUrl = tex.name;
  1502. }
  1503. _this._div.addEventListener('mouseover', _this._showViewer.bind(_this, 'flex'));
  1504. _this._div.addEventListener('mouseout', _this._showViewer.bind(_this, 'none'));
  1505. return _this;
  1506. }
  1507. CubeTextureElement.prototype.update = function (tex) {
  1508. if (tex && tex.url === this._textureUrl) {
  1509. }
  1510. else {
  1511. if (tex) {
  1512. this._textureUrl = tex.name;
  1513. }
  1514. if (this._engine) {
  1515. // Dispose old material and cube
  1516. this._cube.material.dispose(true, true);
  1517. this._cube.dispose();
  1518. }
  1519. else {
  1520. this._initEngine();
  1521. }
  1522. // and create it again
  1523. this._populateScene();
  1524. }
  1525. };
  1526. /** Creates the box */
  1527. CubeTextureElement.prototype._populateScene = function () {
  1528. var _this = this;
  1529. // Create the hdr texture
  1530. var hdrTexture = new BABYLON.CubeTexture(this._textureUrl, this._scene);
  1531. hdrTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
  1532. this._cube = BABYLON.Mesh.CreateBox("hdrSkyBox", 10.0, this._scene);
  1533. var hdrSkyboxMaterial = new BABYLON.StandardMaterial("skyBox", this._scene);
  1534. hdrSkyboxMaterial.backFaceCulling = false;
  1535. hdrSkyboxMaterial.reflectionTexture = hdrTexture;
  1536. hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
  1537. hdrSkyboxMaterial.disableLighting = true;
  1538. this._cube.material = hdrSkyboxMaterial;
  1539. this._cube.registerBeforeRender(function () {
  1540. _this._cube.rotation.y += 0.01;
  1541. });
  1542. };
  1543. /** Init the babylon engine */
  1544. CubeTextureElement.prototype._initEngine = function () {
  1545. var _this = this;
  1546. this._engine = new BABYLON.Engine(this._canvas);
  1547. this._scene = new BABYLON.Scene(this._engine);
  1548. this._scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
  1549. var cam = new BABYLON.FreeCamera('cam', new BABYLON.Vector3(0, 0, -20), this._scene);
  1550. var light = new BABYLON.HemisphericLight('', new BABYLON.Vector3(0, 1, 0), this._scene);
  1551. this._engine.runRenderLoop(function () {
  1552. if (!_this._pause) {
  1553. _this._scene.render();
  1554. }
  1555. });
  1556. this._canvas.setAttribute('width', '110');
  1557. this._canvas.setAttribute('height', '110');
  1558. };
  1559. CubeTextureElement.prototype._showViewer = function (mode) {
  1560. // If displaying...
  1561. if (mode != 'none') {
  1562. // ... and the canvas is not initialized
  1563. if (!this._engine) {
  1564. this._initEngine();
  1565. this._populateScene();
  1566. }
  1567. // In every cases, unpause the engine
  1568. this._pause = false;
  1569. }
  1570. else {
  1571. // hide : pause the engine
  1572. this._pause = true;
  1573. }
  1574. this._textureDiv.style.display = mode;
  1575. };
  1576. /** Removes properly the babylon engine */
  1577. CubeTextureElement.prototype.dispose = function () {
  1578. if (this._engine) {
  1579. this._engine.dispose();
  1580. this._engine = null;
  1581. }
  1582. };
  1583. return CubeTextureElement;
  1584. }(INSPECTOR.BasicElement));
  1585. INSPECTOR.CubeTextureElement = CubeTextureElement;
  1586. })(INSPECTOR || (INSPECTOR = {}));
  1587. //# sourceMappingURL=CubeTextureElement.js.map
  1588. var __extends = (this && this.__extends) || function (d, b) {
  1589. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1590. function __() { this.constructor = d; }
  1591. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1592. };
  1593. var INSPECTOR;
  1594. (function (INSPECTOR) {
  1595. /**
  1596. * Display a very small div. A new canvas is created, with a new Babylon.js scene, containing only the
  1597. * cube texture in a cube
  1598. */
  1599. var HDRCubeTextureElement = (function (_super) {
  1600. __extends(HDRCubeTextureElement, _super);
  1601. /** The texture given as a parameter should be cube. */
  1602. function HDRCubeTextureElement(tex) {
  1603. return _super.call(this, tex) || this;
  1604. }
  1605. /** Creates the box */
  1606. HDRCubeTextureElement.prototype._populateScene = function () {
  1607. var _this = this;
  1608. // Create the hdr texture
  1609. var hdrTexture = new BABYLON.HDRCubeTexture(this._textureUrl, this._scene, 512);
  1610. hdrTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
  1611. this._cube = BABYLON.Mesh.CreateBox("hdrSkyBox", 10.0, this._scene);
  1612. var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", this._scene);
  1613. hdrSkyboxMaterial.backFaceCulling = false;
  1614. hdrSkyboxMaterial.reflectionTexture = hdrTexture;
  1615. hdrSkyboxMaterial.microSurface = 1.0;
  1616. hdrSkyboxMaterial.disableLighting = true;
  1617. this._cube.material = hdrSkyboxMaterial;
  1618. this._cube.registerBeforeRender(function () {
  1619. _this._cube.rotation.y += 0.01;
  1620. });
  1621. };
  1622. return HDRCubeTextureElement;
  1623. }(INSPECTOR.CubeTextureElement));
  1624. INSPECTOR.HDRCubeTextureElement = HDRCubeTextureElement;
  1625. })(INSPECTOR || (INSPECTOR = {}));
  1626. //# sourceMappingURL=HDRCubeTextureElement.js.map
  1627. var __extends = (this && this.__extends) || function (d, b) {
  1628. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1629. function __() { this.constructor = d; }
  1630. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1631. };
  1632. var INSPECTOR;
  1633. (function (INSPECTOR) {
  1634. /**
  1635. * A search bar can be used to filter elements in the tree panel.
  1636. * At each keypress on the input, the treepanel will be filtered.
  1637. */
  1638. var SearchBar = (function (_super) {
  1639. __extends(SearchBar, _super);
  1640. function SearchBar(tab) {
  1641. var _this = _super.call(this) || this;
  1642. _this._tab = tab;
  1643. _this._div.classList.add('searchbar');
  1644. var filter = INSPECTOR.Inspector.DOCUMENT.createElement('i');
  1645. filter.className = 'fa fa-search';
  1646. _this._div.appendChild(filter);
  1647. // Create input
  1648. _this._inputElement = INSPECTOR.Inspector.DOCUMENT.createElement('input');
  1649. _this._inputElement.placeholder = 'Filter by name...';
  1650. _this._div.appendChild(_this._inputElement);
  1651. _this._inputElement.addEventListener('keyup', function (evt) {
  1652. var filter = _this._inputElement.value;
  1653. _this._tab.filter(filter);
  1654. });
  1655. return _this;
  1656. }
  1657. /** Delete all characters typped in the input element */
  1658. SearchBar.prototype.reset = function () {
  1659. this._inputElement.value = '';
  1660. };
  1661. SearchBar.prototype.update = function () {
  1662. // Nothing to update
  1663. };
  1664. return SearchBar;
  1665. }(INSPECTOR.BasicElement));
  1666. INSPECTOR.SearchBar = SearchBar;
  1667. })(INSPECTOR || (INSPECTOR = {}));
  1668. //# sourceMappingURL=SearchBar.js.map
  1669. var __extends = (this && this.__extends) || function (d, b) {
  1670. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1671. function __() { this.constructor = d; }
  1672. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1673. };
  1674. var INSPECTOR;
  1675. (function (INSPECTOR) {
  1676. /**
  1677. * Display a very small div corresponding to the given texture. On mouse over, display the full image
  1678. */
  1679. var TextureElement = (function (_super) {
  1680. __extends(TextureElement, _super);
  1681. function TextureElement(tex) {
  1682. var _this = _super.call(this) || this;
  1683. _this._div.className = 'fa fa-search texture-element';
  1684. // Create the texture viewer
  1685. _this._textureDiv = INSPECTOR.Helpers.CreateDiv('texture-viewer', _this._div);
  1686. // Img
  1687. var imgDiv = INSPECTOR.Helpers.CreateDiv('texture-viewer-img', _this._textureDiv);
  1688. // Texture size
  1689. var sizeDiv = INSPECTOR.Helpers.CreateDiv(null, _this._textureDiv);
  1690. if (tex) {
  1691. sizeDiv.textContent = tex.getBaseSize().width + "px x " + tex.getBaseSize().height + "px";
  1692. imgDiv.style.backgroundImage = "url('" + tex.url + "')";
  1693. imgDiv.style.width = tex.getBaseSize().width + "px";
  1694. imgDiv.style.height = tex.getBaseSize().height + "px";
  1695. }
  1696. _this._div.addEventListener('mouseover', _this._showViewer.bind(_this, 'flex'));
  1697. _this._div.addEventListener('mouseout', _this._showViewer.bind(_this, 'none'));
  1698. return _this;
  1699. }
  1700. TextureElement.prototype.update = function (tex) {
  1701. };
  1702. TextureElement.prototype._showViewer = function (mode) {
  1703. this._textureDiv.style.display = mode;
  1704. };
  1705. return TextureElement;
  1706. }(INSPECTOR.BasicElement));
  1707. INSPECTOR.TextureElement = TextureElement;
  1708. })(INSPECTOR || (INSPECTOR = {}));
  1709. //# sourceMappingURL=TextureElement.js.map
  1710. var INSPECTOR;
  1711. (function (INSPECTOR) {
  1712. /**
  1713. * Creates a tooltip for the parent of the given html element
  1714. */
  1715. var Tooltip = (function () {
  1716. function Tooltip(elem, tip, attachTo) {
  1717. var _this = this;
  1718. this._elem = elem;
  1719. if (!attachTo) {
  1720. attachTo = this._elem.parentElement;
  1721. }
  1722. this._infoDiv = INSPECTOR.Helpers.CreateDiv('tooltip', attachTo);
  1723. this._elem.addEventListener('mouseover', function () {
  1724. _this._infoDiv.textContent = tip;
  1725. _this._infoDiv.style.display = 'block';
  1726. });
  1727. this._elem.addEventListener('mouseout', function () { _this._infoDiv.style.display = 'none'; });
  1728. }
  1729. return Tooltip;
  1730. }());
  1731. INSPECTOR.Tooltip = Tooltip;
  1732. })(INSPECTOR || (INSPECTOR = {}));
  1733. var INSPECTOR;
  1734. (function (INSPECTOR) {
  1735. var Helpers = (function () {
  1736. function Helpers() {
  1737. }
  1738. /**
  1739. * Returns the type of the given object. First
  1740. * uses getClassName. If nothing is returned, used the type of the constructor
  1741. */
  1742. Helpers.GET_TYPE = function (obj) {
  1743. if (obj != null && obj != undefined) {
  1744. var classname = BABYLON.Tools.getClassName(obj);
  1745. if (!classname || classname === 'object') {
  1746. classname = obj.constructor.name;
  1747. // classname is undefined in IE11
  1748. if (!classname) {
  1749. classname = this._GetFnName(obj.constructor);
  1750. }
  1751. }
  1752. // If the class name has no matching properties, check every type
  1753. if (!this._CheckIfTypeExists(classname)) {
  1754. return this._GetTypeFor(obj);
  1755. }
  1756. return classname;
  1757. }
  1758. else {
  1759. return 'type_not_defined';
  1760. }
  1761. };
  1762. /**
  1763. * Check if some properties are defined for the given type.
  1764. */
  1765. Helpers._CheckIfTypeExists = function (type) {
  1766. var properties = INSPECTOR.PROPERTIES[type];
  1767. if (properties) {
  1768. return true;
  1769. }
  1770. return false;
  1771. };
  1772. /**
  1773. * Returns true if the user browser is edge.
  1774. */
  1775. Helpers.IsBrowserEdge = function () {
  1776. //Detect if we are running on a faulty buggy OS.
  1777. var regexp = /Edge/;
  1778. return regexp.test(navigator.userAgent);
  1779. };
  1780. /**
  1781. * Returns the name of the type of the given object, where the name
  1782. * is in PROPERTIES constant.
  1783. * Returns 'Undefined' if no type exists for this object
  1784. */
  1785. Helpers._GetTypeFor = function (obj) {
  1786. for (var type in INSPECTOR.PROPERTIES) {
  1787. var typeBlock = INSPECTOR.PROPERTIES[type];
  1788. if (typeBlock.type) {
  1789. if (obj instanceof typeBlock.type) {
  1790. return type;
  1791. }
  1792. }
  1793. }
  1794. return 'type_not_defined';
  1795. };
  1796. /**
  1797. * Returns the name of a function (workaround to get object type for IE11)
  1798. */
  1799. Helpers._GetFnName = function (fn) {
  1800. var f = typeof fn == 'function';
  1801. var s = f && ((fn.name && ['', fn.name]) || fn.toString().match(/function ([^\(]+)/));
  1802. return (!f && 'not a function') || (s && s[1] || 'anonymous');
  1803. };
  1804. /** Send the event which name is given in parameter to the window */
  1805. Helpers.SEND_EVENT = function (eventName) {
  1806. var event;
  1807. if (INSPECTOR.Inspector.DOCUMENT.createEvent) {
  1808. event = INSPECTOR.Inspector.DOCUMENT.createEvent('HTMLEvents');
  1809. event.initEvent(eventName, true, true);
  1810. }
  1811. else {
  1812. event = new Event(eventName);
  1813. }
  1814. window.dispatchEvent(event);
  1815. };
  1816. /** Returns the given number with 2 decimal number max if a decimal part exists */
  1817. Helpers.Trunc = function (nb) {
  1818. if (Math.round(nb) !== nb) {
  1819. return nb.toFixed(2);
  1820. }
  1821. return nb;
  1822. };
  1823. ;
  1824. /**
  1825. * Useful function used to create a div
  1826. */
  1827. Helpers.CreateDiv = function (className, parent) {
  1828. return Helpers.CreateElement('div', className, parent);
  1829. };
  1830. Helpers.CreateElement = function (element, className, parent) {
  1831. var elem = INSPECTOR.Inspector.DOCUMENT.createElement(element);
  1832. if (className) {
  1833. elem.className = className;
  1834. }
  1835. if (parent) {
  1836. parent.appendChild(elem);
  1837. }
  1838. return elem;
  1839. };
  1840. /**
  1841. * Removes all children of the given div.
  1842. */
  1843. Helpers.CleanDiv = function (div) {
  1844. while (div.firstChild) {
  1845. div.removeChild(div.firstChild);
  1846. }
  1847. };
  1848. /**
  1849. * 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)
  1850. */
  1851. Helpers.Css = function (elem, cssAttribute) {
  1852. var clone = elem.cloneNode(true);
  1853. var div = Helpers.CreateDiv('', INSPECTOR.Inspector.DOCUMENT.body);
  1854. div.style.display = 'none';
  1855. div.appendChild(clone);
  1856. var value = INSPECTOR.Inspector.WINDOW.getComputedStyle(clone)[cssAttribute];
  1857. div.parentNode.removeChild(div);
  1858. return value;
  1859. };
  1860. Helpers.LoadScript = function () {
  1861. BABYLON.Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js", function (elem) {
  1862. var script = Helpers.CreateElement('script', '', INSPECTOR.Inspector.DOCUMENT.body);
  1863. script.textContent = elem;
  1864. // Load glsl detection
  1865. BABYLON.Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/languages/glsl.min.js", function (elem) {
  1866. var script = Helpers.CreateElement('script', '', INSPECTOR.Inspector.DOCUMENT.body);
  1867. script.textContent = elem;
  1868. // Load css style
  1869. BABYLON.Tools.LoadFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/zenburn.min.css", function (elem) {
  1870. var style = Helpers.CreateElement('style', '', INSPECTOR.Inspector.DOCUMENT.body);
  1871. style.textContent = elem;
  1872. });
  1873. }, null, null, null, function () {
  1874. console.log("erreur");
  1875. });
  1876. }, null, null, null, function () {
  1877. console.log("erreur");
  1878. });
  1879. };
  1880. Helpers.IsSystemName = function (name) {
  1881. if (name == null) {
  1882. return false;
  1883. }
  1884. return name.indexOf("###") === 0 && name.lastIndexOf("###") === (name.length - 3);
  1885. };
  1886. return Helpers;
  1887. }());
  1888. INSPECTOR.Helpers = Helpers;
  1889. })(INSPECTOR || (INSPECTOR = {}));
  1890. var INSPECTOR;
  1891. (function (INSPECTOR) {
  1892. var Scheduler = (function () {
  1893. function Scheduler() {
  1894. /** Is this scheduler in pause ? */
  1895. this.pause = false;
  1896. /** The list of data to update */
  1897. this._updatableProperties = [];
  1898. this._timer = setInterval(this._update.bind(this), Scheduler.REFRESH_TIME);
  1899. }
  1900. Scheduler.getInstance = function () {
  1901. if (!Scheduler._instance) {
  1902. Scheduler._instance = new Scheduler();
  1903. }
  1904. return Scheduler._instance;
  1905. };
  1906. /** Add a property line to be updated every X ms */
  1907. Scheduler.prototype.add = function (prop) {
  1908. this._updatableProperties.push(prop);
  1909. };
  1910. /** Removes the given property from the list of properties to update */
  1911. Scheduler.prototype.remove = function (prop) {
  1912. var index = this._updatableProperties.indexOf(prop);
  1913. if (index != -1) {
  1914. this._updatableProperties.splice(index, 1);
  1915. }
  1916. };
  1917. Scheduler.prototype._update = function () {
  1918. // If not in pause, update
  1919. if (!this.pause) {
  1920. for (var _i = 0, _a = this._updatableProperties; _i < _a.length; _i++) {
  1921. var prop = _a[_i];
  1922. prop.update();
  1923. }
  1924. }
  1925. };
  1926. return Scheduler;
  1927. }());
  1928. /** All properties are refreshed every 250ms */
  1929. Scheduler.REFRESH_TIME = 250;
  1930. INSPECTOR.Scheduler = Scheduler;
  1931. })(INSPECTOR || (INSPECTOR = {}));
  1932. var __extends = (this && this.__extends) || function (d, b) {
  1933. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1934. function __() { this.constructor = d; }
  1935. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1936. };
  1937. var INSPECTOR;
  1938. (function (INSPECTOR) {
  1939. var Tab = (function (_super) {
  1940. __extends(Tab, _super);
  1941. function Tab(tabbar, name) {
  1942. var _this = _super.call(this) || this;
  1943. _this._isActive = false;
  1944. _this._tabbar = tabbar;
  1945. _this.name = name;
  1946. _this._build();
  1947. return _this;
  1948. }
  1949. /** True if the tab is active, false otherwise */
  1950. Tab.prototype.isActive = function () {
  1951. return this._isActive;
  1952. };
  1953. Tab.prototype._build = function () {
  1954. var _this = this;
  1955. this._div.className = 'tab';
  1956. this._div.textContent = this.name;
  1957. this._div.addEventListener('click', function (evt) {
  1958. // Set this tab as active
  1959. _this._tabbar.switchTab(_this);
  1960. });
  1961. };
  1962. /** Set this tab as active or not, depending on the current state */
  1963. Tab.prototype.active = function (b) {
  1964. if (b) {
  1965. this._div.classList.add('active');
  1966. }
  1967. else {
  1968. this._div.classList.remove('active');
  1969. }
  1970. this._isActive = b;
  1971. };
  1972. Tab.prototype.update = function () {
  1973. // Nothing for the moment
  1974. };
  1975. /** Creates the tab panel for this tab. */
  1976. Tab.prototype.getPanel = function () {
  1977. return this._panel;
  1978. };
  1979. /** Add this in the propertytab with the searchbar */
  1980. Tab.prototype.filter = function (str) { };
  1981. ;
  1982. /**
  1983. * Returns the total width in pixel of this tab, 0 by default
  1984. */
  1985. Tab.prototype.getPixelWidth = function () {
  1986. var style = INSPECTOR.Inspector.WINDOW.getComputedStyle(this._div);
  1987. var left = parseFloat(style.marginLeft.substr(0, style.marginLeft.length - 2)) || 0;
  1988. var right = parseFloat(style.marginRight.substr(0, style.marginRight.length - 2)) || 0;
  1989. return (this._div.clientWidth || 0) + left + right;
  1990. };
  1991. return Tab;
  1992. }(INSPECTOR.BasicElement));
  1993. INSPECTOR.Tab = Tab;
  1994. })(INSPECTOR || (INSPECTOR = {}));
  1995. var __extends = (this && this.__extends) || function (d, b) {
  1996. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  1997. function __() { this.constructor = d; }
  1998. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  1999. };
  2000. var INSPECTOR;
  2001. (function (INSPECTOR) {
  2002. /**
  2003. * A Property tab can creates two panels:
  2004. * a tree panel and a detail panel,
  2005. * in which properties will be displayed.
  2006. * Both panels are separated by a resize bar
  2007. */
  2008. var PropertyTab = (function (_super) {
  2009. __extends(PropertyTab, _super);
  2010. function PropertyTab(tabbar, name, insp) {
  2011. var _this = _super.call(this, tabbar, name) || this;
  2012. _this._treeItems = [];
  2013. _this._inspector = insp;
  2014. // Build the properties panel : a div that will contains the tree and the detail panel
  2015. _this._panel = INSPECTOR.Helpers.CreateDiv('tab-panel');
  2016. _this._panel.classList.add('searchable');
  2017. // Search bar
  2018. _this._searchBar = new INSPECTOR.SearchBar(_this);
  2019. // Add searchbar
  2020. _this._panel.appendChild(_this._searchBar.toHtml());
  2021. // Build the treepanel
  2022. _this._treePanel = INSPECTOR.Helpers.CreateDiv('insp-tree', _this._panel);
  2023. // Build the detail panel
  2024. _this._detailsPanel = new INSPECTOR.DetailPanel();
  2025. _this._panel.appendChild(_this._detailsPanel.toHtml());
  2026. Split([_this._treePanel, _this._detailsPanel.toHtml()], {
  2027. blockDrag: _this._inspector.popupMode,
  2028. direction: 'vertical'
  2029. });
  2030. _this.update();
  2031. return _this;
  2032. }
  2033. /** Overrides dispose */
  2034. PropertyTab.prototype.dispose = function () {
  2035. this._detailsPanel.dispose();
  2036. };
  2037. PropertyTab.prototype.update = function (_items) {
  2038. var items;
  2039. if (_items) {
  2040. items = _items;
  2041. }
  2042. else {
  2043. // Rebuild the tree
  2044. this._treeItems = this._getTree();
  2045. items = this._treeItems;
  2046. }
  2047. // Clean the tree
  2048. INSPECTOR.Helpers.CleanDiv(this._treePanel);
  2049. // Clean the detail properties
  2050. this._detailsPanel.clean();
  2051. // Sort items alphabetically
  2052. items.sort(function (item1, item2) {
  2053. return item1.compareTo(item2);
  2054. });
  2055. // Display items
  2056. for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
  2057. var item = items_1[_i];
  2058. this._treePanel.appendChild(item.toHtml());
  2059. }
  2060. };
  2061. /** Display the details of the given item */
  2062. PropertyTab.prototype.displayDetails = function (item) {
  2063. // Remove active state on all items
  2064. this.activateNode(item);
  2065. // Update the detail panel
  2066. this._detailsPanel.details = item.getDetails();
  2067. };
  2068. /** Select an item in the tree */
  2069. PropertyTab.prototype.select = function (item) {
  2070. // Remove the node highlight
  2071. this.highlightNode();
  2072. // Active the node
  2073. this.activateNode(item);
  2074. // Display its details
  2075. this.displayDetails(item);
  2076. };
  2077. /** Highlight the given node, and downplay all others */
  2078. PropertyTab.prototype.highlightNode = function (item) {
  2079. if (this._treeItems) {
  2080. for (var _i = 0, _a = this._treeItems; _i < _a.length; _i++) {
  2081. var node = _a[_i];
  2082. node.highlight(false);
  2083. }
  2084. }
  2085. if (item) {
  2086. item.highlight(true);
  2087. }
  2088. };
  2089. /** Set the given item as active in the tree */
  2090. PropertyTab.prototype.activateNode = function (item) {
  2091. if (this._treeItems) {
  2092. for (var _i = 0, _a = this._treeItems; _i < _a.length; _i++) {
  2093. var node = _a[_i];
  2094. node.active(false);
  2095. }
  2096. }
  2097. item.active(true);
  2098. };
  2099. /** Returns the treeitem corersponding to the given obj, null if not found */
  2100. PropertyTab.prototype.getItemFor = function (_obj) {
  2101. var obj = _obj;
  2102. for (var _i = 0, _a = this._treeItems; _i < _a.length; _i++) {
  2103. var item = _a[_i];
  2104. if (item.correspondsTo(obj)) {
  2105. return item;
  2106. }
  2107. }
  2108. return null;
  2109. };
  2110. PropertyTab.prototype.filter = function (filter) {
  2111. var items = [];
  2112. for (var _i = 0, _a = this._treeItems; _i < _a.length; _i++) {
  2113. var item = _a[_i];
  2114. if (item.id.toLowerCase().indexOf(filter.toLowerCase()) != -1) {
  2115. items.push(item);
  2116. }
  2117. for (var _b = 0, _c = item.children; _b < _c.length; _b++) {
  2118. var child = _c[_b];
  2119. if (child.id.toLowerCase().indexOf(filter.toLowerCase()) != -1) {
  2120. items.push(item);
  2121. }
  2122. }
  2123. }
  2124. this.update(items);
  2125. };
  2126. return PropertyTab;
  2127. }(INSPECTOR.Tab));
  2128. INSPECTOR.PropertyTab = PropertyTab;
  2129. })(INSPECTOR || (INSPECTOR = {}));
  2130. var __extends = (this && this.__extends) || function (d, b) {
  2131. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2132. function __() { this.constructor = d; }
  2133. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2134. };
  2135. var INSPECTOR;
  2136. (function (INSPECTOR) {
  2137. var Canvas2DTab = (function (_super) {
  2138. __extends(Canvas2DTab, _super);
  2139. function Canvas2DTab(tabbar, inspector) {
  2140. return _super.call(this, tabbar, 'Canvas2D', inspector) || this;
  2141. }
  2142. /* Overrides */
  2143. Canvas2DTab.prototype._getTree = function () {
  2144. var _this = this;
  2145. var arr = [];
  2146. // get all canvas2D
  2147. var instances = BABYLON.Canvas2D.instances || [];
  2148. // Recursive method building the tree panel
  2149. var createNode = function (obj) {
  2150. if (obj.children && obj.children.length > 0) {
  2151. var node = new INSPECTOR.TreeItem(_this, new INSPECTOR.Canvas2DAdapter(obj));
  2152. for (var _i = 0, _a = obj.children; _i < _a.length; _i++) {
  2153. var child = _a[_i];
  2154. if (!INSPECTOR.Helpers.IsSystemName(child.id)) {
  2155. var n = createNode(child);
  2156. node.add(n);
  2157. }
  2158. }
  2159. node.update();
  2160. return node;
  2161. }
  2162. else {
  2163. return new INSPECTOR.TreeItem(_this, new INSPECTOR.Canvas2DAdapter(obj));
  2164. }
  2165. };
  2166. for (var _i = 0, instances_1 = instances; _i < instances_1.length; _i++) {
  2167. var inst = instances_1[_i];
  2168. if (INSPECTOR.Helpers.IsSystemName(inst.id)) {
  2169. continue;
  2170. }
  2171. var c2d = inst;
  2172. var nodes = createNode(c2d);
  2173. arr.push(nodes);
  2174. }
  2175. return arr;
  2176. };
  2177. return Canvas2DTab;
  2178. }(INSPECTOR.PropertyTab));
  2179. INSPECTOR.Canvas2DTab = Canvas2DTab;
  2180. })(INSPECTOR || (INSPECTOR = {}));
  2181. var __extends = (this && this.__extends) || function (d, b) {
  2182. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2183. function __() { this.constructor = d; }
  2184. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2185. };
  2186. var INSPECTOR;
  2187. (function (INSPECTOR) {
  2188. var LightTab = (function (_super) {
  2189. __extends(LightTab, _super);
  2190. function LightTab(tabbar, inspector) {
  2191. return _super.call(this, tabbar, 'Light', inspector) || this;
  2192. }
  2193. /* Overrides super */
  2194. LightTab.prototype._getTree = function () {
  2195. var arr = [];
  2196. // get all lights from the first scene
  2197. var instances = this._inspector.scene;
  2198. for (var _i = 0, _a = instances.lights; _i < _a.length; _i++) {
  2199. var light = _a[_i];
  2200. arr.push(new INSPECTOR.TreeItem(this, new INSPECTOR.LightAdapter(light)));
  2201. }
  2202. return arr;
  2203. };
  2204. return LightTab;
  2205. }(INSPECTOR.PropertyTab));
  2206. INSPECTOR.LightTab = LightTab;
  2207. })(INSPECTOR || (INSPECTOR = {}));
  2208. var __extends = (this && this.__extends) || function (d, b) {
  2209. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2210. function __() { this.constructor = d; }
  2211. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2212. };
  2213. var INSPECTOR;
  2214. (function (INSPECTOR) {
  2215. var MaterialTab = (function (_super) {
  2216. __extends(MaterialTab, _super);
  2217. function MaterialTab(tabbar, inspector) {
  2218. return _super.call(this, tabbar, 'Material', inspector) || this;
  2219. }
  2220. /* Overrides super */
  2221. MaterialTab.prototype._getTree = function () {
  2222. var arr = [];
  2223. // get all meshes from the first scene
  2224. var instances = this._inspector.scene;
  2225. for (var _i = 0, _a = instances.materials; _i < _a.length; _i++) {
  2226. var mat = _a[_i];
  2227. arr.push(new INSPECTOR.TreeItem(this, new INSPECTOR.MaterialAdapter(mat)));
  2228. }
  2229. return arr;
  2230. };
  2231. return MaterialTab;
  2232. }(INSPECTOR.PropertyTab));
  2233. INSPECTOR.MaterialTab = MaterialTab;
  2234. })(INSPECTOR || (INSPECTOR = {}));
  2235. var __extends = (this && this.__extends) || function (d, b) {
  2236. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2237. function __() { this.constructor = d; }
  2238. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2239. };
  2240. var INSPECTOR;
  2241. (function (INSPECTOR) {
  2242. var MeshTab = (function (_super) {
  2243. __extends(MeshTab, _super);
  2244. function MeshTab(tabbar, inspector) {
  2245. return _super.call(this, tabbar, 'Mesh', inspector) || this;
  2246. }
  2247. /* Overrides super */
  2248. MeshTab.prototype._getTree = function () {
  2249. var _this = this;
  2250. var arr = [];
  2251. // Tab containign mesh already in results
  2252. var alreadyIn = [];
  2253. // Returns true if the id of the given object starts and ends with '###'
  2254. var shouldExcludeThisMesh = function (obj) {
  2255. return (obj.name && obj.name.indexOf('###') == 0 && obj.name.lastIndexOf('###', 0) === 0);
  2256. };
  2257. // Recursive method building the tree panel
  2258. var createNode = function (obj) {
  2259. var descendants = obj.getDescendants(true);
  2260. if (descendants.length > 0) {
  2261. var node = new INSPECTOR.TreeItem(_this, new INSPECTOR.MeshAdapter(obj));
  2262. alreadyIn.push(node);
  2263. for (var _i = 0, descendants_1 = descendants; _i < descendants_1.length; _i++) {
  2264. var child = descendants_1[_i];
  2265. if (child instanceof BABYLON.AbstractMesh) {
  2266. if (!INSPECTOR.Helpers.IsSystemName(child.name)) {
  2267. var n = createNode(child);
  2268. node.add(n);
  2269. }
  2270. }
  2271. }
  2272. node.update();
  2273. return node;
  2274. }
  2275. else {
  2276. alreadyIn.push(obj);
  2277. return new INSPECTOR.TreeItem(_this, new INSPECTOR.MeshAdapter(obj));
  2278. }
  2279. };
  2280. // get all meshes from the first scene
  2281. var instances = this._inspector.scene;
  2282. for (var _i = 0, _a = instances.meshes; _i < _a.length; _i++) {
  2283. var mesh = _a[_i];
  2284. if (alreadyIn.indexOf(mesh) == -1) {
  2285. var node = createNode(mesh);
  2286. arr.push(node);
  2287. }
  2288. }
  2289. return arr;
  2290. };
  2291. return MeshTab;
  2292. }(INSPECTOR.PropertyTab));
  2293. INSPECTOR.MeshTab = MeshTab;
  2294. })(INSPECTOR || (INSPECTOR = {}));
  2295. var __extends = (this && this.__extends) || function (d, b) {
  2296. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2297. function __() { this.constructor = d; }
  2298. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2299. };
  2300. var INSPECTOR;
  2301. (function (INSPECTOR) {
  2302. var SceneTab = (function (_super) {
  2303. __extends(SceneTab, _super);
  2304. function SceneTab(tabbar, insp) {
  2305. var _this = _super.call(this, tabbar, 'Scene') || this;
  2306. /** The list of skeleton viewer */
  2307. _this._skeletonViewers = [];
  2308. _this._inspector = insp;
  2309. // Build the properties panel : a div that will contains the tree and the detail panel
  2310. _this._panel = INSPECTOR.Helpers.CreateDiv('tab-panel');
  2311. _this._actions = INSPECTOR.Helpers.CreateDiv('scene-actions', _this._panel);
  2312. _this._detailsPanel = new INSPECTOR.DetailPanel();
  2313. _this._panel.appendChild(_this._detailsPanel.toHtml());
  2314. // build propertiesline
  2315. var details = [];
  2316. for (var _i = 0, _a = INSPECTOR.PROPERTIES['Scene'].properties; _i < _a.length; _i++) {
  2317. var prop = _a[_i];
  2318. details.push(new INSPECTOR.PropertyLine(new INSPECTOR.Property(prop, _this._inspector.scene)));
  2319. }
  2320. _this._detailsPanel.details = details;
  2321. Split([_this._actions, _this._detailsPanel.toHtml()], {
  2322. blockDrag: _this._inspector.popupMode,
  2323. sizes: [50, 50],
  2324. direction: 'vertical'
  2325. });
  2326. // Build actions
  2327. {
  2328. // Rendering mode
  2329. var title = INSPECTOR.Helpers.CreateDiv('actions-title', _this._actions);
  2330. title.textContent = 'Rendering mode';
  2331. var point = INSPECTOR.Helpers.CreateDiv('action-radio', _this._actions);
  2332. var wireframe = INSPECTOR.Helpers.CreateDiv('action-radio', _this._actions);
  2333. var solid = INSPECTOR.Helpers.CreateDiv('action-radio', _this._actions);
  2334. point.textContent = 'Point';
  2335. wireframe.textContent = 'Wireframe';
  2336. solid.textContent = 'Solid';
  2337. if (_this._inspector.scene.forcePointsCloud) {
  2338. point.classList.add('active');
  2339. }
  2340. else if (_this._inspector.scene.forceWireframe) {
  2341. wireframe.classList.add('active');
  2342. }
  2343. else {
  2344. solid.classList.add('active');
  2345. }
  2346. _this._generateRadioAction([point, wireframe, solid]);
  2347. point.addEventListener('click', function () { _this._inspector.scene.forcePointsCloud = true; _this._inspector.scene.forceWireframe = false; });
  2348. wireframe.addEventListener('click', function () { _this._inspector.scene.forcePointsCloud = false; _this._inspector.scene.forceWireframe = true; });
  2349. solid.addEventListener('click', function () { _this._inspector.scene.forcePointsCloud = false; _this._inspector.scene.forceWireframe = false; });
  2350. // Textures
  2351. title = INSPECTOR.Helpers.CreateDiv('actions-title', _this._actions);
  2352. title.textContent = 'Textures channels';
  2353. _this._generateActionLine('Diffuse Texture', BABYLON.StandardMaterial.DiffuseTextureEnabled, function (b) { BABYLON.StandardMaterial.DiffuseTextureEnabled = b; });
  2354. _this._generateActionLine('Ambient Texture', BABYLON.StandardMaterial.AmbientTextureEnabled, function (b) { BABYLON.StandardMaterial.AmbientTextureEnabled = b; });
  2355. _this._generateActionLine('Specular Texture', BABYLON.StandardMaterial.SpecularTextureEnabled, function (b) { BABYLON.StandardMaterial.SpecularTextureEnabled = b; });
  2356. _this._generateActionLine('Emissive Texture', BABYLON.StandardMaterial.EmissiveTextureEnabled, function (b) { BABYLON.StandardMaterial.EmissiveTextureEnabled = b; });
  2357. _this._generateActionLine('Bump Texture', BABYLON.StandardMaterial.BumpTextureEnabled, function (b) { BABYLON.StandardMaterial.BumpTextureEnabled = b; });
  2358. _this._generateActionLine('Opacity Texture', BABYLON.StandardMaterial.OpacityTextureEnabled, function (b) { BABYLON.StandardMaterial.OpacityTextureEnabled = b; });
  2359. _this._generateActionLine('Reflection Texture', BABYLON.StandardMaterial.ReflectionTextureEnabled, function (b) { BABYLON.StandardMaterial.ReflectionTextureEnabled = b; });
  2360. _this._generateActionLine('Refraction Texture', BABYLON.StandardMaterial.RefractionTextureEnabled, function (b) { BABYLON.StandardMaterial.RefractionTextureEnabled = b; });
  2361. _this._generateActionLine('ColorGrading', BABYLON.StandardMaterial.ColorGradingTextureEnabled, function (b) { BABYLON.StandardMaterial.ColorGradingTextureEnabled = b; });
  2362. _this._generateActionLine('Lightmap Texture', BABYLON.StandardMaterial.LightmapTextureEnabled, function (b) { BABYLON.StandardMaterial.LightmapTextureEnabled = b; });
  2363. _this._generateActionLine('Fresnel', BABYLON.StandardMaterial.FresnelEnabled, function (b) { BABYLON.StandardMaterial.FresnelEnabled = b; });
  2364. // Options
  2365. title = INSPECTOR.Helpers.CreateDiv('actions-title', _this._actions);
  2366. title.textContent = 'Options';
  2367. _this._generateActionLine('Animations', _this._inspector.scene.animationsEnabled, function (b) { _this._inspector.scene.animationsEnabled = b; });
  2368. _this._generateActionLine('Collisions', _this._inspector.scene.collisionsEnabled, function (b) { _this._inspector.scene.collisionsEnabled = b; });
  2369. _this._generateActionLine('Fog', _this._inspector.scene.fogEnabled, function (b) { _this._inspector.scene.fogEnabled = b; });
  2370. _this._generateActionLine('Lens flares', _this._inspector.scene.lensFlaresEnabled, function (b) { _this._inspector.scene.lensFlaresEnabled = b; });
  2371. _this._generateActionLine('Lights', _this._inspector.scene.lightsEnabled, function (b) { _this._inspector.scene.lightsEnabled = b; });
  2372. _this._generateActionLine('Particles', _this._inspector.scene.particlesEnabled, function (b) { _this._inspector.scene.particlesEnabled = b; });
  2373. _this._generateActionLine('Post-processes', _this._inspector.scene.postProcessesEnabled, function (b) { _this._inspector.scene.postProcessesEnabled = b; });
  2374. _this._generateActionLine('Probes', _this._inspector.scene.probesEnabled, function (b) { _this._inspector.scene.probesEnabled = b; });
  2375. _this._generateActionLine('Procedural textures', _this._inspector.scene.proceduralTexturesEnabled, function (b) { _this._inspector.scene.proceduralTexturesEnabled = b; });
  2376. _this._generateActionLine('Render targets', _this._inspector.scene.renderTargetsEnabled, function (b) { _this._inspector.scene.renderTargetsEnabled = b; });
  2377. _this._generateActionLine('Shadows', _this._inspector.scene.shadowsEnabled, function (b) { _this._inspector.scene.shadowsEnabled = b; });
  2378. _this._generateActionLine('Skeletons', _this._inspector.scene.skeletonsEnabled, function (b) { _this._inspector.scene.skeletonsEnabled = b; });
  2379. _this._generateActionLine('Sprites', _this._inspector.scene.spritesEnabled, function (b) { _this._inspector.scene.spritesEnabled = b; });
  2380. _this._generateActionLine('Textures', _this._inspector.scene.texturesEnabled, function (b) { _this._inspector.scene.texturesEnabled = b; });
  2381. // Audio
  2382. title = INSPECTOR.Helpers.CreateDiv('actions-title', _this._actions);
  2383. title.textContent = 'Audio';
  2384. var headphones = INSPECTOR.Helpers.CreateDiv('action-radio', _this._actions);
  2385. var normalSpeaker = INSPECTOR.Helpers.CreateDiv('action-radio', _this._actions);
  2386. _this._generateActionLine('Disable audio', !_this._inspector.scene.audioEnabled, function (b) { _this._inspector.scene.audioEnabled = !b; });
  2387. headphones.textContent = 'Headphones';
  2388. normalSpeaker.textContent = 'Normal speakers';
  2389. _this._generateRadioAction([headphones, normalSpeaker]);
  2390. if (_this._inspector.scene.headphone) {
  2391. headphones.classList.add('active');
  2392. }
  2393. else {
  2394. normalSpeaker.classList.add('active');
  2395. }
  2396. headphones.addEventListener('click', function () { _this._inspector.scene.headphone = true; });
  2397. normalSpeaker.addEventListener('click', function () { _this._inspector.scene.headphone = false; });
  2398. // Viewers
  2399. title = INSPECTOR.Helpers.CreateDiv('actions-title', _this._actions);
  2400. title.textContent = 'Viewer';
  2401. _this._generateActionLine('Skeletons', false, function (b) {
  2402. if (b) {
  2403. for (var index = 0; index < _this._inspector.scene.meshes.length; index++) {
  2404. var mesh = _this._inspector.scene.meshes[index];
  2405. if (mesh.skeleton) {
  2406. var found = false;
  2407. for (var sIndex = 0; sIndex < _this._skeletonViewers.length; sIndex++) {
  2408. if (_this._skeletonViewers[sIndex].skeleton === mesh.skeleton) {
  2409. found = true;
  2410. break;
  2411. }
  2412. }
  2413. if (found) {
  2414. continue;
  2415. }
  2416. var viewer = new BABYLON.Debug.SkeletonViewer(mesh.skeleton, mesh, _this._inspector.scene);
  2417. viewer.isEnabled = true;
  2418. _this._skeletonViewers.push(viewer);
  2419. }
  2420. }
  2421. }
  2422. else {
  2423. for (var index = 0; index < _this._skeletonViewers.length; index++) {
  2424. _this._skeletonViewers[index].dispose();
  2425. }
  2426. _this._skeletonViewers = [];
  2427. }
  2428. });
  2429. }
  2430. return _this;
  2431. }
  2432. /** Overrides super.dispose */
  2433. SceneTab.prototype.dispose = function () {
  2434. this._detailsPanel.dispose();
  2435. };
  2436. /** generates a div which correspond to an option that can be activated/deactivated */
  2437. SceneTab.prototype._generateActionLine = function (name, initValue, action) {
  2438. var div = INSPECTOR.Helpers.CreateDiv('scene-actions', this._actions);
  2439. div.textContent = name;
  2440. div.classList.add('action');
  2441. if (initValue) {
  2442. div.classList.add('active');
  2443. }
  2444. div.addEventListener('click', function (e) {
  2445. div.classList.toggle('active');
  2446. var isActivated = div.classList.contains('active');
  2447. action(isActivated);
  2448. });
  2449. };
  2450. /**
  2451. * Add a click action for all given elements :
  2452. * the clicked element is set as active, all others elements are deactivated
  2453. */
  2454. SceneTab.prototype._generateRadioAction = function (arr) {
  2455. var active = function (elem, evt) {
  2456. for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
  2457. var e = arr_1[_i];
  2458. e.classList.remove('active');
  2459. }
  2460. elem.classList.add('active');
  2461. };
  2462. for (var _i = 0, arr_2 = arr; _i < arr_2.length; _i++) {
  2463. var elem = arr_2[_i];
  2464. elem.addEventListener('click', active.bind(this, elem));
  2465. }
  2466. };
  2467. return SceneTab;
  2468. }(INSPECTOR.Tab));
  2469. INSPECTOR.SceneTab = SceneTab;
  2470. })(INSPECTOR || (INSPECTOR = {}));
  2471. var __extends = (this && this.__extends) || function (d, b) {
  2472. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2473. function __() { this.constructor = d; }
  2474. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2475. };
  2476. var INSPECTOR;
  2477. (function (INSPECTOR) {
  2478. var ShaderTab = (function (_super) {
  2479. __extends(ShaderTab, _super);
  2480. function ShaderTab(tabbar, insp) {
  2481. var _this = _super.call(this, tabbar, 'Shader') || this;
  2482. _this._inspector = insp;
  2483. // Build the shaders panel : a div that will contains the shaders tree and both shaders panels
  2484. _this._panel = INSPECTOR.Helpers.CreateDiv('tab-panel');
  2485. var shaderPanel = INSPECTOR.Helpers.CreateDiv('shader-tree-panel');
  2486. _this._vertexPanel = INSPECTOR.Helpers.CreateDiv('shader-panel');
  2487. _this._fragmentPanel = INSPECTOR.Helpers.CreateDiv('shader-panel');
  2488. _this._panel.appendChild(shaderPanel);
  2489. _this._panel.appendChild(_this._vertexPanel);
  2490. _this._panel.appendChild(_this._fragmentPanel);
  2491. INSPECTOR.Helpers.LoadScript();
  2492. Split([_this._vertexPanel, _this._fragmentPanel], {
  2493. blockDrag: _this._inspector.popupMode,
  2494. sizes: [50, 50],
  2495. direction: 'vertical'
  2496. });
  2497. var comboBox = INSPECTOR.Helpers.CreateElement('select', '', shaderPanel);
  2498. comboBox.addEventListener('change', _this._selectShader.bind(_this));
  2499. var option = INSPECTOR.Helpers.CreateElement('option', '', comboBox);
  2500. option.textContent = 'Select a shader';
  2501. option.setAttribute('value', "");
  2502. option.setAttribute('disabled', 'true');
  2503. option.setAttribute('selected', 'true');
  2504. // Build shaders combobox
  2505. for (var _i = 0, _a = _this._inspector.scene.materials; _i < _a.length; _i++) {
  2506. var mat = _a[_i];
  2507. if (mat instanceof BABYLON.ShaderMaterial) {
  2508. var option_1 = INSPECTOR.Helpers.CreateElement('option', '', comboBox);
  2509. option_1.setAttribute('value', mat.id);
  2510. option_1.textContent = mat.name + " - " + mat.id;
  2511. }
  2512. }
  2513. return _this;
  2514. }
  2515. ShaderTab.prototype._selectShader = function (event) {
  2516. var id = event.target.value;
  2517. var mat = this._inspector.scene.getMaterialByID(id);
  2518. // Clean shader panel
  2519. INSPECTOR.Helpers.CleanDiv(this._vertexPanel);
  2520. // add the title - vertex shader
  2521. var title = INSPECTOR.Helpers.CreateDiv('shader-panel-title', this._vertexPanel);
  2522. title.textContent = 'Vertex shader';
  2523. // add code
  2524. var code = INSPECTOR.Helpers.CreateElement('code', 'glsl', INSPECTOR.Helpers.CreateElement('pre', '', this._vertexPanel));
  2525. code.textContent = this._beautify(mat.getEffect().getVertexShaderSource());
  2526. INSPECTOR.Helpers.CleanDiv(this._fragmentPanel);
  2527. // add the title - fragment shader
  2528. title = INSPECTOR.Helpers.CreateDiv('shader-panel-title', this._fragmentPanel);
  2529. title.textContent = 'Frgament shader';
  2530. // add code
  2531. code = INSPECTOR.Helpers.CreateElement('code', 'glsl', INSPECTOR.Helpers.CreateElement('pre', '', this._fragmentPanel));
  2532. code.textContent = this._beautify(mat.getEffect().getFragmentShaderSource());
  2533. // Init the syntax highlighting
  2534. var styleInit = INSPECTOR.Helpers.CreateElement('script', '', INSPECTOR.Inspector.DOCUMENT.body);
  2535. styleInit.textContent = 'hljs.initHighlighting();';
  2536. };
  2537. /** Overrides super.dispose */
  2538. ShaderTab.prototype.dispose = function () {
  2539. };
  2540. /** Returns the position of the first { and the corresponding } */
  2541. ShaderTab.prototype._getBracket = function (str) {
  2542. var fb = str.indexOf('{');
  2543. var arr = str.substr(fb + 1).split('');
  2544. var counter = 1;
  2545. var currentPosInString = fb;
  2546. var lastBracketIndex = 0;
  2547. for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
  2548. var char = arr_1[_i];
  2549. currentPosInString++;
  2550. if (char === '{') {
  2551. counter++;
  2552. }
  2553. if (char === '}') {
  2554. counter--;
  2555. }
  2556. if (counter == 0) {
  2557. lastBracketIndex = currentPosInString;
  2558. break;
  2559. }
  2560. }
  2561. return { firstBracket: fb, lastBracket: lastBracketIndex };
  2562. };
  2563. /**
  2564. * Beautify the given string : correct indentation
  2565. */
  2566. ShaderTab.prototype._beautify = function (glsl, level) {
  2567. if (level === void 0) { level = 0; }
  2568. // return condition : no brackets at all
  2569. var brackets = this._getBracket(glsl);
  2570. var firstBracket = brackets.firstBracket;
  2571. var lastBracket = brackets.lastBracket;
  2572. var spaces = "";
  2573. for (var i = 0; i < level; i++) {
  2574. spaces += " "; // 4 spaces
  2575. }
  2576. // If no brackets, return the indented string
  2577. if (firstBracket == -1) {
  2578. glsl = spaces + glsl; // indent first line
  2579. glsl = glsl
  2580. .replace(/;./g, function (x) { return '\n' + x.substr(1); }); // new line after ; except the last one
  2581. glsl = glsl.replace(/=/g, " = "); // space around =
  2582. glsl = glsl.replace(/\n/g, "\n" + spaces); // indentation
  2583. return glsl;
  2584. }
  2585. else {
  2586. // if brackets, beautify the inside
  2587. // let insideWithBrackets = glsl.substr(firstBracket, lastBracket-firstBracket+1);
  2588. var left = glsl.substr(0, firstBracket);
  2589. var right = glsl.substr(lastBracket + 1, glsl.length);
  2590. var inside = glsl.substr(firstBracket + 1, lastBracket - firstBracket - 1);
  2591. inside = this._beautify(inside, level + 1);
  2592. return this._beautify(left, level) + '{\n' + inside + '\n' + spaces + '}\n' + this._beautify(right, level);
  2593. }
  2594. // // Replace bracket with @1 and @2 with correct indentation
  2595. // let newInside = "@1\n\t" + inside + "\n@2";
  2596. // newInside = newInside.replace(/;\n/g, ";\n\t");
  2597. // glsl = glsl.replace(insideWithBrackets, newInside);
  2598. // firstBracket = glsl.indexOf('{');
  2599. // lastBracket = glsl.lastIndexOf('}');
  2600. // }
  2601. // console.log(glsl);
  2602. // let regex = /(\{(?:\{??[^\{]*?}))+/gmi;
  2603. // let tmp = glsl;
  2604. // let m;
  2605. // while ((m = regex.exec(tmp)) !== null) {
  2606. // // This is necessary to avoid infinite loops with zero-width matches
  2607. // if (m.index === regex.lastIndex) {
  2608. // regex.lastIndex++;
  2609. // }
  2610. // // The result can be accessed through the `m`-variable.
  2611. // m.forEach((match, groupIndex) => {
  2612. // // Remove the first and the last bracket only
  2613. // let matchWithoutBrackets = match.replace(/{/, "").replace(/}/, "");
  2614. // // Indent the content inside brackets with tabs
  2615. // glsl = glsl.replace(match, `{\n\t${matchWithoutBrackets}\n}\n`);
  2616. // // removes the match from tmp
  2617. // tmp = tmp.replace(match, "");
  2618. // // and continue
  2619. // });
  2620. // }
  2621. // return
  2622. };
  2623. return ShaderTab;
  2624. }(INSPECTOR.Tab));
  2625. INSPECTOR.ShaderTab = ShaderTab;
  2626. })(INSPECTOR || (INSPECTOR = {}));
  2627. var __extends = (this && this.__extends) || function (d, b) {
  2628. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2629. function __() { this.constructor = d; }
  2630. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2631. };
  2632. var INSPECTOR;
  2633. (function (INSPECTOR) {
  2634. /**
  2635. * The console tab will have two features :
  2636. * - hook all console.log call and display them in this panel (and in the browser console as well)
  2637. * - display all Babylon logs (called with Tools.Log...)
  2638. */
  2639. var ConsoleTab = (function (_super) {
  2640. __extends(ConsoleTab, _super);
  2641. function ConsoleTab(tabbar, insp) {
  2642. var _this = _super.call(this, tabbar, 'Console') || this;
  2643. _this._inspector = insp;
  2644. // Build the shaders panel : a div that will contains the shaders tree and both shaders panels
  2645. _this._panel = INSPECTOR.Helpers.CreateDiv('tab-panel');
  2646. var consolePanel = INSPECTOR.Helpers.CreateDiv('console-panel');
  2647. var bjsPanel = INSPECTOR.Helpers.CreateDiv('console-panel');
  2648. _this._panel.appendChild(consolePanel);
  2649. _this._panel.appendChild(bjsPanel);
  2650. Split([consolePanel, bjsPanel], {
  2651. blockDrag: _this._inspector.popupMode,
  2652. sizes: [50, 50],
  2653. direction: 'vertical'
  2654. });
  2655. // Titles
  2656. var title = INSPECTOR.Helpers.CreateDiv('console-panel-title', consolePanel);
  2657. title.textContent = 'Console logs';
  2658. title = INSPECTOR.Helpers.CreateDiv('console-panel-title', bjsPanel);
  2659. title.textContent = 'Babylon.js logs';
  2660. // Contents
  2661. _this._consolePanelContent = INSPECTOR.Helpers.CreateDiv('console-panel-content', consolePanel);
  2662. _this._bjsPanelContent = INSPECTOR.Helpers.CreateDiv('console-panel-content', bjsPanel);
  2663. // save old console.log
  2664. _this._oldConsoleLog = console.log;
  2665. _this._oldConsoleWarn = console.warn;
  2666. _this._oldConsoleError = console.error;
  2667. console.log = _this._addConsoleLog.bind(_this);
  2668. console.warn = _this._addConsoleWarn.bind(_this);
  2669. console.error = _this._addConsoleError.bind(_this);
  2670. // Bjs logs
  2671. _this._bjsPanelContent.innerHTML = BABYLON.Tools.LogCache;
  2672. BABYLON.Tools.OnNewCacheEntry = function (entry) {
  2673. _this._bjsPanelContent.innerHTML += entry;
  2674. _this._bjsPanelContent.scrollTop = _this._bjsPanelContent.scrollHeight;
  2675. };
  2676. return _this;
  2677. // Testing
  2678. //console.log("This is a console.log message");
  2679. // console.log("That's right, console.log calls are hooked to be written in this window");
  2680. // console.log("Object are also stringify-ed", {width:10, height:30, shape:'rectangular'});
  2681. // console.warn("This is a console.warn message");
  2682. // console.error("This is a console.error message");
  2683. // BABYLON.Tools.Log("This is a message");
  2684. // BABYLON.Tools.Warn("This is a warning");
  2685. // BABYLON.Tools.Error("This is a error");
  2686. }
  2687. /** Overrides super.dispose */
  2688. ConsoleTab.prototype.dispose = function () {
  2689. console.log = this._oldConsoleLog;
  2690. console.warn = this._oldConsoleWarn;
  2691. console.error = this._oldConsoleError;
  2692. };
  2693. ConsoleTab.prototype._message = function (type, message, caller) {
  2694. var callerLine = INSPECTOR.Helpers.CreateDiv('caller', this._consolePanelContent);
  2695. callerLine.textContent = caller;
  2696. var line = INSPECTOR.Helpers.CreateDiv(type, this._consolePanelContent);
  2697. line.textContent += message;
  2698. this._consolePanelContent.scrollTop = this._consolePanelContent.scrollHeight;
  2699. };
  2700. ConsoleTab.prototype._addConsoleLog = function () {
  2701. var params = [];
  2702. for (var _i = 0; _i < arguments.length; _i++) {
  2703. params[_i] = arguments[_i];
  2704. }
  2705. // Get caller name if not null
  2706. var callerFunc = this._addConsoleLog.caller;
  2707. var caller = callerFunc == null ? "Window" : "Function " + callerFunc['name'] + ": ";
  2708. for (var i = 0; i < params.length; i++) {
  2709. this._message('log', params[i], caller);
  2710. // Write again in console does not work on edge, as the console object
  2711. // is not instantiate if debugger tools is not open
  2712. if (!INSPECTOR.Helpers.IsBrowserEdge()) {
  2713. this._oldConsoleLog(params[i]);
  2714. }
  2715. }
  2716. };
  2717. ConsoleTab.prototype._addConsoleWarn = function () {
  2718. var params = [];
  2719. for (var _i = 0; _i < arguments.length; _i++) {
  2720. params[_i] = arguments[_i];
  2721. }
  2722. // Get caller name if not null
  2723. var callerFunc = this._addConsoleLog.caller;
  2724. var caller = callerFunc == null ? "Window" : callerFunc['name'];
  2725. for (var i = 0; i < params.length; i++) {
  2726. this._message('warn', params[i], caller);
  2727. // Write again in console does not work on edge, as the console object
  2728. // is not instantiate if debugger tools is not open
  2729. if (!INSPECTOR.Helpers.IsBrowserEdge()) {
  2730. this._oldConsoleWarn(params[i]);
  2731. }
  2732. }
  2733. };
  2734. ConsoleTab.prototype._addConsoleError = function () {
  2735. var params = [];
  2736. for (var _i = 0; _i < arguments.length; _i++) {
  2737. params[_i] = arguments[_i];
  2738. }
  2739. // Get caller name if not null
  2740. var callerFunc = this._addConsoleLog.caller;
  2741. var caller = callerFunc == null ? "Window" : callerFunc['name'];
  2742. for (var i = 0; i < params.length; i++) {
  2743. this._message('error', params[i], caller);
  2744. // Write again in console does not work on edge, as the console object
  2745. // is not instantiate if debugger tools is not open
  2746. if (!INSPECTOR.Helpers.IsBrowserEdge()) {
  2747. this._oldConsoleError(params[i]);
  2748. }
  2749. }
  2750. };
  2751. return ConsoleTab;
  2752. }(INSPECTOR.Tab));
  2753. INSPECTOR.ConsoleTab = ConsoleTab;
  2754. })(INSPECTOR || (INSPECTOR = {}));
  2755. var __extends = (this && this.__extends) || function (d, b) {
  2756. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  2757. function __() { this.constructor = d; }
  2758. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  2759. };
  2760. var INSPECTOR;
  2761. (function (INSPECTOR) {
  2762. var StatsTab = (function (_super) {
  2763. __extends(StatsTab, _super);
  2764. function StatsTab(tabbar, insp) {
  2765. var _this = _super.call(this, tabbar, 'Stats') || this;
  2766. /**
  2767. * Properties in this array will be updated
  2768. * in a render loop - Mostly stats properties
  2769. */
  2770. _this._updatableProperties = [];
  2771. _this._inspector = insp;
  2772. _this._scene = _this._inspector.scene;
  2773. _this._engine = _this._scene.getEngine();
  2774. _this._glInfo = _this._engine.getGlInfo();
  2775. // Build the stats panel: a div that will contains all stats
  2776. _this._panel = INSPECTOR.Helpers.CreateDiv('tab-panel');
  2777. _this._panel.classList.add("stats-panel");
  2778. var title = INSPECTOR.Helpers.CreateDiv('stat-title1', _this._panel);
  2779. var fpsSpan = INSPECTOR.Helpers.CreateElement('span', 'stats-fps');
  2780. _this._updatableProperties.push({
  2781. elem: fpsSpan,
  2782. updateFct: function () { return BABYLON.Tools.Format(_this._inspector.scene.getEngine().getFps(), 0) + " fps"; }
  2783. });
  2784. var versionSpan = INSPECTOR.Helpers.CreateElement('span');
  2785. versionSpan.textContent = "Babylon.js v" + BABYLON.Engine.Version + " - ";
  2786. title.appendChild(versionSpan);
  2787. title.appendChild(fpsSpan);
  2788. _this._updateLoopHandler = _this._update.bind(_this);
  2789. // Count block
  2790. title = INSPECTOR.Helpers.CreateDiv('stat-title2', _this._panel);
  2791. title.textContent = "Count";
  2792. {
  2793. var elemLabel = _this._createStatLabel("Total meshes", _this._panel);
  2794. var elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2795. _this._updatableProperties.push({
  2796. elem: elemValue,
  2797. updateFct: function () { return _this._scene.meshes.length.toString(); }
  2798. });
  2799. elemLabel = _this._createStatLabel("Draw calls", _this._panel);
  2800. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2801. _this._updatableProperties.push({
  2802. elem: elemValue,
  2803. updateFct: function () { return _this._engine.drawCalls.toString(); }
  2804. });
  2805. elemLabel = _this._createStatLabel("Total lights", _this._panel);
  2806. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2807. _this._updatableProperties.push({
  2808. elem: elemValue,
  2809. updateFct: function () { return _this._scene.lights.length.toString(); }
  2810. });
  2811. elemLabel = _this._createStatLabel("Total lights", _this._panel);
  2812. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2813. _this._updatableProperties.push({
  2814. elem: elemValue,
  2815. updateFct: function () { return _this._scene.lights.length.toString(); }
  2816. });
  2817. elemLabel = _this._createStatLabel("Total vertices", _this._panel);
  2818. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2819. _this._updatableProperties.push({
  2820. elem: elemValue,
  2821. updateFct: function () { return _this._scene.getTotalVertices().toString(); }
  2822. });
  2823. elemLabel = _this._createStatLabel("Total materials", _this._panel);
  2824. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2825. _this._updatableProperties.push({
  2826. elem: elemValue,
  2827. updateFct: function () { return _this._scene.materials.length.toString(); }
  2828. });
  2829. elemLabel = _this._createStatLabel("Total textures", _this._panel);
  2830. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2831. _this._updatableProperties.push({
  2832. elem: elemValue,
  2833. updateFct: function () { return _this._scene.textures.length.toString(); }
  2834. });
  2835. elemLabel = _this._createStatLabel("Active meshes", _this._panel);
  2836. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2837. _this._updatableProperties.push({
  2838. elem: elemValue,
  2839. updateFct: function () { return _this._scene.getActiveMeshes().length.toString(); }
  2840. });
  2841. elemLabel = _this._createStatLabel("Active indices", _this._panel);
  2842. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2843. _this._updatableProperties.push({
  2844. elem: elemValue,
  2845. updateFct: function () { return _this._scene.getActiveIndices().toString(); }
  2846. });
  2847. elemLabel = _this._createStatLabel("Active bones", _this._panel);
  2848. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2849. _this._updatableProperties.push({
  2850. elem: elemValue,
  2851. updateFct: function () { return _this._scene.getActiveBones().toString(); }
  2852. });
  2853. elemLabel = _this._createStatLabel("Active particles", _this._panel);
  2854. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2855. _this._updatableProperties.push({
  2856. elem: elemValue,
  2857. updateFct: function () { return _this._scene.getActiveParticles().toString(); }
  2858. });
  2859. }
  2860. title = INSPECTOR.Helpers.CreateDiv('stat-title2', _this._panel);
  2861. title.textContent = "Duration";
  2862. {
  2863. var elemLabel = _this._createStatLabel("Meshes selection", _this._panel);
  2864. var elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2865. _this._updatableProperties.push({
  2866. elem: elemValue,
  2867. updateFct: function () { return BABYLON.Tools.Format(_this._scene.getEvaluateActiveMeshesDuration()); }
  2868. });
  2869. elemLabel = _this._createStatLabel("Render targets", _this._panel);
  2870. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2871. _this._updatableProperties.push({
  2872. elem: elemValue,
  2873. updateFct: function () { return BABYLON.Tools.Format(_this._scene.getRenderTargetsDuration()); }
  2874. });
  2875. elemLabel = _this._createStatLabel("Particles", _this._panel);
  2876. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2877. _this._updatableProperties.push({
  2878. elem: elemValue,
  2879. updateFct: function () { return BABYLON.Tools.Format(_this._scene.getParticlesDuration()); }
  2880. });
  2881. elemLabel = _this._createStatLabel("Sprites", _this._panel);
  2882. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2883. _this._updatableProperties.push({
  2884. elem: elemValue,
  2885. updateFct: function () { return BABYLON.Tools.Format(_this._scene.getSpritesDuration()); }
  2886. });
  2887. elemLabel = _this._createStatLabel("Render", _this._panel);
  2888. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2889. _this._updatableProperties.push({
  2890. elem: elemValue,
  2891. updateFct: function () { return BABYLON.Tools.Format(_this._scene.getRenderDuration()); }
  2892. });
  2893. elemLabel = _this._createStatLabel("Frame", _this._panel);
  2894. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2895. _this._updatableProperties.push({
  2896. elem: elemValue,
  2897. updateFct: function () { return BABYLON.Tools.Format(_this._scene.getLastFrameDuration()); }
  2898. });
  2899. elemLabel = _this._createStatLabel("Potential FPS", _this._panel);
  2900. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2901. _this._updatableProperties.push({
  2902. elem: elemValue,
  2903. updateFct: function () { return BABYLON.Tools.Format(1000.0 / _this._scene.getLastFrameDuration(), 0); }
  2904. });
  2905. elemLabel = _this._createStatLabel("Resolution", _this._panel);
  2906. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2907. _this._updatableProperties.push({
  2908. elem: elemValue,
  2909. updateFct: function () { return _this._engine.getRenderWidth() + "x" + _this._engine.getRenderHeight(); }
  2910. });
  2911. }
  2912. title = INSPECTOR.Helpers.CreateDiv('stat-title2', _this._panel);
  2913. title.textContent = "Extensions";
  2914. {
  2915. var elemLabel = _this._createStatLabel("Std derivatives", _this._panel);
  2916. var elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2917. _this._updatableProperties.push({
  2918. elem: elemValue,
  2919. updateFct: function () { return (_this._engine.getCaps().standardDerivatives ? "Yes" : "No"); }
  2920. });
  2921. elemLabel = _this._createStatLabel("Compressed textures", _this._panel);
  2922. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2923. _this._updatableProperties.push({
  2924. elem: elemValue,
  2925. updateFct: function () { return (_this._engine.getCaps().s3tc ? "Yes" : "No"); }
  2926. });
  2927. elemLabel = _this._createStatLabel("Hardware instances", _this._panel);
  2928. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2929. _this._updatableProperties.push({
  2930. elem: elemValue,
  2931. updateFct: function () { return (_this._engine.getCaps().instancedArrays ? "Yes" : "No"); }
  2932. });
  2933. elemLabel = _this._createStatLabel("Texture float", _this._panel);
  2934. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2935. _this._updatableProperties.push({
  2936. elem: elemValue,
  2937. updateFct: function () { return (_this._engine.getCaps().textureFloat ? "Yes" : "No"); }
  2938. });
  2939. elemLabel = _this._createStatLabel("32bits indices", _this._panel);
  2940. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2941. _this._updatableProperties.push({
  2942. elem: elemValue,
  2943. updateFct: function () { return (_this._engine.getCaps().uintIndices ? "Yes" : "No"); }
  2944. });
  2945. elemLabel = _this._createStatLabel("Fragment depth", _this._panel);
  2946. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2947. _this._updatableProperties.push({
  2948. elem: elemValue,
  2949. updateFct: function () { return (_this._engine.getCaps().fragmentDepthSupported ? "Yes" : "No"); }
  2950. });
  2951. elemLabel = _this._createStatLabel("High precision shaders", _this._panel);
  2952. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2953. _this._updatableProperties.push({
  2954. elem: elemValue,
  2955. updateFct: function () { return (_this._engine.getCaps().highPrecisionShaderSupported ? "Yes" : "No"); }
  2956. });
  2957. elemLabel = _this._createStatLabel("Draw buffers", _this._panel);
  2958. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2959. _this._updatableProperties.push({
  2960. elem: elemValue,
  2961. updateFct: function () { return (_this._engine.getCaps().drawBuffersExtension ? "Yes" : "No"); }
  2962. });
  2963. elemLabel = _this._createStatLabel("Vertex array object", _this._panel);
  2964. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2965. _this._updatableProperties.push({
  2966. elem: elemValue,
  2967. updateFct: function () { return (_this._engine.getCaps().vertexArrayObject ? "Yes" : "No"); }
  2968. });
  2969. }
  2970. title = INSPECTOR.Helpers.CreateDiv('stat-title2', _this._panel);
  2971. title.textContent = "Caps.";
  2972. {
  2973. var elemLabel = _this._createStatLabel("Stencil", _this._panel);
  2974. var elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2975. _this._updatableProperties.push({
  2976. elem: elemValue,
  2977. updateFct: function () { return (_this._engine.isStencilEnable ? "Enabled" : "Disabled"); }
  2978. });
  2979. elemLabel = _this._createStatLabel("Max textures units", _this._panel);
  2980. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2981. _this._updatableProperties.push({
  2982. elem: elemValue,
  2983. updateFct: function () { return _this._engine.getCaps().maxTexturesImageUnits.toString(); }
  2984. });
  2985. elemLabel = _this._createStatLabel("Max textures size", _this._panel);
  2986. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2987. _this._updatableProperties.push({
  2988. elem: elemValue,
  2989. updateFct: function () { return _this._engine.getCaps().maxTextureSize.toString(); }
  2990. });
  2991. elemLabel = _this._createStatLabel("Max anisotropy", _this._panel);
  2992. elemValue = INSPECTOR.Helpers.CreateDiv('stat-value', _this._panel);
  2993. _this._updatableProperties.push({
  2994. elem: elemValue,
  2995. updateFct: function () { return _this._engine.getCaps().maxAnisotropy.toString(); }
  2996. });
  2997. }
  2998. title = INSPECTOR.Helpers.CreateDiv('stat-title2', _this._panel);
  2999. title.textContent = "Info";
  3000. {
  3001. var elemValue = INSPECTOR.Helpers.CreateDiv('stat-infos', _this._panel);
  3002. _this._updatableProperties.push({
  3003. elem: elemValue,
  3004. updateFct: function () { return "WebGL v" + _this._engine.webGLVersion + " - " + _this._glInfo.version + " - " + _this._glInfo.renderer; }
  3005. });
  3006. }
  3007. // Register the update loop
  3008. _this._scene.registerAfterRender(_this._updateLoopHandler);
  3009. return _this;
  3010. }
  3011. StatsTab.prototype._createStatLabel = function (content, parent) {
  3012. var elem = INSPECTOR.Helpers.CreateDiv('stat-label', parent);
  3013. elem.textContent = content;
  3014. return elem;
  3015. };
  3016. /** Update each properties of the stats panel */
  3017. StatsTab.prototype._update = function () {
  3018. for (var _i = 0, _a = this._updatableProperties; _i < _a.length; _i++) {
  3019. var prop = _a[_i];
  3020. prop.elem.textContent = prop.updateFct();
  3021. }
  3022. };
  3023. StatsTab.prototype.dispose = function () {
  3024. this._scene.unregisterAfterRender(this._updateLoopHandler);
  3025. };
  3026. return StatsTab;
  3027. }(INSPECTOR.Tab));
  3028. INSPECTOR.StatsTab = StatsTab;
  3029. })(INSPECTOR || (INSPECTOR = {}));
  3030. var __extends = (this && this.__extends) || function (d, b) {
  3031. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3032. function __() { this.constructor = d; }
  3033. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3034. };
  3035. var INSPECTOR;
  3036. (function (INSPECTOR) {
  3037. /**
  3038. * A tab bar will contains each view the inspector can have : Canvas2D, Meshes...
  3039. * The default active tab is the first one of the list.
  3040. */
  3041. var TabBar = (function (_super) {
  3042. __extends(TabBar, _super);
  3043. function TabBar(inspector) {
  3044. var _this = _super.call(this) || this;
  3045. // The list of available tabs
  3046. _this._tabs = [];
  3047. /** The list of tab displayed by clicking on the remainingIcon */
  3048. _this._invisibleTabs = [];
  3049. /** The list of tabs visible, displayed in the tab bar */
  3050. _this._visibleTabs = [];
  3051. _this._inspector = inspector;
  3052. _this._tabs.push(new INSPECTOR.SceneTab(_this, _this._inspector));
  3053. _this._tabs.push(new INSPECTOR.ConsoleTab(_this, _this._inspector));
  3054. _this._tabs.push(new INSPECTOR.StatsTab(_this, _this._inspector));
  3055. _this._meshTab = new INSPECTOR.MeshTab(_this, _this._inspector);
  3056. _this._tabs.push(_this._meshTab);
  3057. _this._tabs.push(new INSPECTOR.ShaderTab(_this, _this._inspector));
  3058. _this._tabs.push(new INSPECTOR.LightTab(_this, _this._inspector));
  3059. // Add only the tab canvas2D if Canvas2D is defined
  3060. if (BABYLON.Canvas2D) {
  3061. _this._tabs.push(new INSPECTOR.Canvas2DTab(_this, _this._inspector));
  3062. }
  3063. _this._tabs.push(new INSPECTOR.MaterialTab(_this, _this._inspector));
  3064. _this._toolBar = new INSPECTOR.Toolbar(_this._inspector);
  3065. _this._build();
  3066. // Active the first tab
  3067. _this._tabs[0].active(true);
  3068. // set all tab as visible
  3069. for (var _i = 0, _a = _this._tabs; _i < _a.length; _i++) {
  3070. var tab = _a[_i];
  3071. _this._visibleTabs.push(tab);
  3072. }
  3073. return _this;
  3074. }
  3075. // No update
  3076. TabBar.prototype.update = function () { };
  3077. TabBar.prototype._build = function () {
  3078. var _this = this;
  3079. this._div.className = 'tabbar';
  3080. this._div.appendChild(this._toolBar.toHtml());
  3081. for (var _i = 0, _a = this._tabs; _i < _a.length; _i++) {
  3082. var tab = _a[_i];
  3083. this._div.appendChild(tab.toHtml());
  3084. }
  3085. this._moreTabsIcon = INSPECTOR.Helpers.CreateElement('i', 'fa fa-angle-double-right more-tabs');
  3086. this._moreTabsPanel = INSPECTOR.Helpers.CreateDiv('more-tabs-panel');
  3087. this._moreTabsIcon.addEventListener('click', function () {
  3088. // Hide the 'more-tabs-panel' if already displayed
  3089. if (_this._moreTabsPanel.style.display == 'flex') {
  3090. _this._moreTabsPanel.style.display = 'none';
  3091. }
  3092. else {
  3093. // Attach more-tabs-panel if not attached yet
  3094. var topPanel = _this._div.parentNode;
  3095. if (!topPanel.contains(_this._moreTabsPanel)) {
  3096. topPanel.appendChild(_this._moreTabsPanel);
  3097. }
  3098. // Clean the 'more-tabs-panel'
  3099. INSPECTOR.Helpers.CleanDiv(_this._moreTabsPanel);
  3100. // Add each invisible tabs to this panel
  3101. for (var _i = 0, _a = _this._invisibleTabs; _i < _a.length; _i++) {
  3102. var tab = _a[_i];
  3103. _this._addInvisibleTabToPanel(tab);
  3104. }
  3105. // And display it
  3106. _this._moreTabsPanel.style.display = 'flex';
  3107. }
  3108. });
  3109. };
  3110. /**
  3111. * Add a tab to the 'more-tabs' panel, displayed by clicking on the
  3112. * 'more-tabs' icon
  3113. */
  3114. TabBar.prototype._addInvisibleTabToPanel = function (tab) {
  3115. var _this = this;
  3116. var div = INSPECTOR.Helpers.CreateDiv('invisible-tab', this._moreTabsPanel);
  3117. div.textContent = tab.name;
  3118. div.addEventListener('click', function () {
  3119. _this._moreTabsPanel.style.display = 'none';
  3120. _this.switchTab(tab);
  3121. });
  3122. };
  3123. /** Dispose the current tab, set the given tab as active, and refresh the treeview */
  3124. TabBar.prototype.switchTab = function (tab) {
  3125. // Dispose the active tab
  3126. this.getActiveTab().dispose();
  3127. // Deactivate all tabs
  3128. for (var _i = 0, _a = this._tabs; _i < _a.length; _i++) {
  3129. var t = _a[_i];
  3130. t.active(false);
  3131. }
  3132. // activate the given tab
  3133. tab.active(true);
  3134. // Refresh the inspector
  3135. this._inspector.refresh();
  3136. };
  3137. /** Display the mesh tab.
  3138. * If a parameter is given, the given mesh details are displayed
  3139. */
  3140. TabBar.prototype.switchMeshTab = function (mesh) {
  3141. this.switchTab(this._meshTab);
  3142. if (mesh) {
  3143. var item = this._meshTab.getItemFor(mesh);
  3144. this._meshTab.select(item);
  3145. }
  3146. };
  3147. /** Returns the active tab */
  3148. TabBar.prototype.getActiveTab = function () {
  3149. for (var _i = 0, _a = this._tabs; _i < _a.length; _i++) {
  3150. var tab = _a[_i];
  3151. if (tab.isActive()) {
  3152. return tab;
  3153. }
  3154. }
  3155. };
  3156. Object.defineProperty(TabBar.prototype, "inspector", {
  3157. get: function () {
  3158. return this._inspector;
  3159. },
  3160. enumerable: true,
  3161. configurable: true
  3162. });
  3163. /**
  3164. * Returns the total width in pixel of the tabbar,
  3165. * that corresponds to the sum of the width of each visible tab + toolbar width
  3166. */
  3167. TabBar.prototype.getPixelWidth = function () {
  3168. var sum = 0;
  3169. for (var _i = 0, _a = this._visibleTabs; _i < _a.length; _i++) {
  3170. var tab = _a[_i];
  3171. sum += tab.getPixelWidth();
  3172. }
  3173. sum += this._toolBar.getPixelWidth();
  3174. if (this._div.contains(this._moreTabsIcon)) {
  3175. sum += 30; // $tabbarheight
  3176. }
  3177. return sum;
  3178. };
  3179. /** Display the remaining icon or not depending on the tabbar width.
  3180. * This function should be called each time the inspector width is updated
  3181. */
  3182. TabBar.prototype.updateWidth = function () {
  3183. var parentSize = this._div.parentElement.clientWidth;
  3184. var lastTabWidth = 75;
  3185. var currentSize = this.getPixelWidth();
  3186. // Check if a tab should be removed : if the tab bar width is greater than
  3187. // its parent width
  3188. while (this._visibleTabs.length > 0 && currentSize > parentSize) {
  3189. // Start by the last element
  3190. var tab = this._visibleTabs.pop();
  3191. // set it invisible
  3192. this._invisibleTabs.push(tab);
  3193. // and removes it from the DOM
  3194. this._div.removeChild(tab.toHtml());
  3195. currentSize = this.getPixelWidth() + lastTabWidth;
  3196. }
  3197. // Check if a tab can be added to the tab bar : if the tab bar width
  3198. // + 100 (at least 100px is needed to add a tab) is less than its parent width
  3199. if (this._invisibleTabs.length > 0) {
  3200. if (currentSize + lastTabWidth < parentSize) {
  3201. var lastTab = this._invisibleTabs.pop();
  3202. this._div.appendChild(lastTab.toHtml());
  3203. this._visibleTabs.push(lastTab);
  3204. // Update more-tab icon in last position if needed
  3205. if (this._div.contains(this._moreTabsIcon)) {
  3206. this._div.removeChild(this._moreTabsIcon);
  3207. }
  3208. }
  3209. }
  3210. if (this._invisibleTabs.length > 0 && !this._div.contains(this._moreTabsIcon)) {
  3211. this._div.appendChild(this._moreTabsIcon);
  3212. }
  3213. };
  3214. return TabBar;
  3215. }(INSPECTOR.BasicElement));
  3216. INSPECTOR.TabBar = TabBar;
  3217. })(INSPECTOR || (INSPECTOR = {}));
  3218. var INSPECTOR;
  3219. (function (INSPECTOR) {
  3220. var AbstractTool = (function () {
  3221. function AbstractTool(icon, parent, inspector, tooltip) {
  3222. var _this = this;
  3223. this._inspector = inspector;
  3224. this._elem = INSPECTOR.Inspector.DOCUMENT.createElement('i');
  3225. this._elem.className = "tool fa " + icon;
  3226. parent.appendChild(this._elem);
  3227. this._elem.addEventListener('click', function (e) {
  3228. _this.action();
  3229. });
  3230. new INSPECTOR.Tooltip(this._elem, tooltip);
  3231. }
  3232. AbstractTool.prototype.toHtml = function () {
  3233. return this._elem;
  3234. };
  3235. /**
  3236. * Returns the total width in pixel of this tool, 0 by default
  3237. */
  3238. AbstractTool.prototype.getPixelWidth = function () {
  3239. var style = INSPECTOR.Inspector.WINDOW.getComputedStyle(this._elem);
  3240. var left = parseFloat(style.marginLeft.substr(0, style.marginLeft.length - 2)) || 0;
  3241. var right = parseFloat(style.marginRight.substr(0, style.marginRight.length - 2)) || 0;
  3242. return (this._elem.clientWidth || 0) + left + right;
  3243. };
  3244. /**
  3245. * Updates the icon of this tool with the given string
  3246. */
  3247. AbstractTool.prototype._updateIcon = function (icon) {
  3248. this._elem.className = "tool fa " + icon;
  3249. };
  3250. return AbstractTool;
  3251. }());
  3252. INSPECTOR.AbstractTool = AbstractTool;
  3253. })(INSPECTOR || (INSPECTOR = {}));
  3254. var __extends = (this && this.__extends) || function (d, b) {
  3255. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3256. function __() { this.constructor = d; }
  3257. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3258. };
  3259. var INSPECTOR;
  3260. (function (INSPECTOR) {
  3261. var PauseScheduleTool = (function (_super) {
  3262. __extends(PauseScheduleTool, _super);
  3263. function PauseScheduleTool(parent, inspector) {
  3264. var _this = _super.call(this, 'fa-pause', parent, inspector, 'Pause the automatic update of properties') || this;
  3265. _this._isPause = false;
  3266. return _this;
  3267. }
  3268. // Action : refresh the whole panel
  3269. PauseScheduleTool.prototype.action = function () {
  3270. if (this._isPause) {
  3271. INSPECTOR.Scheduler.getInstance().pause = false;
  3272. this._updateIcon('fa-pause');
  3273. }
  3274. else {
  3275. INSPECTOR.Scheduler.getInstance().pause = true;
  3276. this._updateIcon('fa-play');
  3277. }
  3278. this._isPause = !this._isPause;
  3279. };
  3280. return PauseScheduleTool;
  3281. }(INSPECTOR.AbstractTool));
  3282. INSPECTOR.PauseScheduleTool = PauseScheduleTool;
  3283. })(INSPECTOR || (INSPECTOR = {}));
  3284. var __extends = (this && this.__extends) || function (d, b) {
  3285. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3286. function __() { this.constructor = d; }
  3287. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3288. };
  3289. var INSPECTOR;
  3290. (function (INSPECTOR) {
  3291. var PickTool = (function (_super) {
  3292. __extends(PickTool, _super);
  3293. function PickTool(parent, inspector) {
  3294. var _this = _super.call(this, 'fa-mouse-pointer', parent, inspector, 'Select a mesh in the scene') || this;
  3295. _this._isActive = false;
  3296. // Create handler
  3297. _this._pickHandler = _this._pickMesh.bind(_this);
  3298. return _this;
  3299. }
  3300. // Action : find the corresponding tree item in the correct tab and display it
  3301. PickTool.prototype.action = function () {
  3302. if (this._isActive) {
  3303. this._deactivate();
  3304. }
  3305. else {
  3306. this.toHtml().classList.add('active');
  3307. // Add event handler : pick on a mesh in the scene
  3308. this._inspector.scene.getEngine().getRenderingCanvas().addEventListener('click', this._pickHandler);
  3309. this._isActive = true;
  3310. }
  3311. };
  3312. /** Deactivate this tool */
  3313. PickTool.prototype._deactivate = function () {
  3314. this.toHtml().classList.remove('active');
  3315. // Remove event handler
  3316. this._inspector.scene.getEngine().getRenderingCanvas().removeEventListener('click', this._pickHandler);
  3317. this._isActive = false;
  3318. };
  3319. /** Pick a mesh in the scene */
  3320. PickTool.prototype._pickMesh = function (evt) {
  3321. var pos = this._updatePointerPosition(evt);
  3322. var pi = this._inspector.scene.pick(pos.x, pos.y, function (mesh) { return true; });
  3323. if (pi.pickedMesh) {
  3324. console.log(pi.pickedMesh.name);
  3325. this._inspector.displayObjectDetails(pi.pickedMesh);
  3326. }
  3327. this._deactivate();
  3328. };
  3329. PickTool.prototype._updatePointerPosition = function (evt) {
  3330. var canvasRect = this._inspector.scene.getEngine().getRenderingCanvasClientRect();
  3331. var pointerX = evt.clientX - canvasRect.left;
  3332. var pointerY = evt.clientY - canvasRect.top;
  3333. return { x: pointerX, y: pointerY };
  3334. };
  3335. ;
  3336. return PickTool;
  3337. }(INSPECTOR.AbstractTool));
  3338. INSPECTOR.PickTool = PickTool;
  3339. })(INSPECTOR || (INSPECTOR = {}));
  3340. var __extends = (this && this.__extends) || function (d, b) {
  3341. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3342. function __() { this.constructor = d; }
  3343. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3344. };
  3345. var INSPECTOR;
  3346. (function (INSPECTOR) {
  3347. var PopupTool = (function (_super) {
  3348. __extends(PopupTool, _super);
  3349. function PopupTool(parent, inspector) {
  3350. return _super.call(this, 'fa-external-link', parent, inspector, 'Open the inspector in a popup') || this;
  3351. }
  3352. // Action : refresh the whole panel
  3353. PopupTool.prototype.action = function () {
  3354. this._inspector.openPopup();
  3355. };
  3356. return PopupTool;
  3357. }(INSPECTOR.AbstractTool));
  3358. INSPECTOR.PopupTool = PopupTool;
  3359. })(INSPECTOR || (INSPECTOR = {}));
  3360. var __extends = (this && this.__extends) || function (d, b) {
  3361. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3362. function __() { this.constructor = d; }
  3363. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3364. };
  3365. var INSPECTOR;
  3366. (function (INSPECTOR) {
  3367. var RefreshTool = (function (_super) {
  3368. __extends(RefreshTool, _super);
  3369. function RefreshTool(parent, inspector) {
  3370. return _super.call(this, 'fa-refresh', parent, inspector, 'Refresh the current tab') || this;
  3371. }
  3372. // Action : refresh the whole panel
  3373. RefreshTool.prototype.action = function () {
  3374. this._inspector.refresh();
  3375. };
  3376. return RefreshTool;
  3377. }(INSPECTOR.AbstractTool));
  3378. INSPECTOR.RefreshTool = RefreshTool;
  3379. })(INSPECTOR || (INSPECTOR = {}));
  3380. var __extends = (this && this.__extends) || function (d, b) {
  3381. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3382. function __() { this.constructor = d; }
  3383. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3384. };
  3385. var INSPECTOR;
  3386. (function (INSPECTOR) {
  3387. var LabelTool = (function (_super) {
  3388. __extends(LabelTool, _super);
  3389. function LabelTool(parent, inspector) {
  3390. var _this = _super.call(this, 'fa-tags', parent, inspector, 'Display mesh names on the canvas') || this;
  3391. /** True if label are displayed, false otherwise */
  3392. _this._isDisplayed = false;
  3393. _this._canvas = null;
  3394. _this._labelInitialized = false;
  3395. _this._scene = null;
  3396. _this._canvas2DLoaded = false;
  3397. _this._newMeshObserver = null;
  3398. _this._removedMeshObserver = null;
  3399. _this._newLightObserver = null;
  3400. _this._removedLightObserver = null;
  3401. _this._newCameraObserver = null;
  3402. _this._removedCameraObserver = null;
  3403. _this._scene = inspector.scene;
  3404. return _this;
  3405. }
  3406. LabelTool.prototype.dispose = function () {
  3407. if (this._newMeshObserver) {
  3408. this._scene.onNewMeshAddedObservable.remove(this._newMeshObserver);
  3409. this._scene.onMeshRemovedObservable.remove(this._removedMeshObserver);
  3410. this._scene.onNewLightAddedObservable.remove(this._newLightObserver);
  3411. this._scene.onLightRemovedObservable.remove(this._removedLightObserver);
  3412. this._scene.onNewCameraAddedObservable.remove(this._newCameraObserver);
  3413. this._scene.onCameraRemovedObservable.remove(this._removedCameraObserver);
  3414. this._newMeshObserver = this._newLightObserver = this._newCameraObserver = this._removedMeshObserver = this._removedLightObserver = this._removedCameraObserver = null;
  3415. }
  3416. this._canvas.dispose();
  3417. this._canvas = null;
  3418. };
  3419. LabelTool.prototype._checkC2DLoaded = function () {
  3420. if (this._canvas2DLoaded === true) {
  3421. return true;
  3422. }
  3423. if (BABYLON.Canvas2D) {
  3424. this._canvas2DLoaded = true;
  3425. }
  3426. return this._canvas2DLoaded;
  3427. };
  3428. LabelTool.prototype._initializeLabels = function () {
  3429. var _this = this;
  3430. // Check if the label are already initialized and quit if it's the case
  3431. if (this._labelInitialized) {
  3432. return;
  3433. }
  3434. // Can't initialize them if the Canvas2D lib is not loaded yet
  3435. if (!this._checkC2DLoaded()) {
  3436. return;
  3437. }
  3438. // Create the canvas that will be used to display the labels
  3439. this._canvas = new BABYLON.ScreenSpaceCanvas2D(this._scene, { id: "###Label Canvas###" /*, cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_TOPLEVELGROUPS*/ });
  3440. // Create label for all the Meshes, Lights and Cameras
  3441. // Those that will be created/removed after this method is called will be taken care by the event handlers added below
  3442. for (var _i = 0, _a = this._scene.meshes; _i < _a.length; _i++) {
  3443. var m = _a[_i];
  3444. this._createLabel(m);
  3445. }
  3446. for (var _b = 0, _c = this._scene.lights; _b < _c.length; _b++) {
  3447. var l = _c[_b];
  3448. this._createLabel(l);
  3449. }
  3450. for (var _d = 0, _e = this._scene.cameras; _d < _e.length; _d++) {
  3451. var c = _e[_d];
  3452. this._createLabel(c);
  3453. }
  3454. // Add handlers for new/removed meshes, camera and lights
  3455. this._newMeshObserver = this._scene.onNewMeshAddedObservable.add(function (e, s) {
  3456. _this._createLabel(e);
  3457. });
  3458. this._removedMeshObserver = this._scene.onMeshRemovedObservable.add(function (e, s) {
  3459. _this._removeLabel(e);
  3460. });
  3461. this._newLightObserver = this._scene.onNewLightAddedObservable.add(function (e, s) {
  3462. _this._createLabel(e);
  3463. });
  3464. this._removedLightObserver = this._scene.onLightRemovedObservable.add(function (e, s) {
  3465. _this._removeLabel(e);
  3466. });
  3467. this._newCameraObserver = this._scene.onNewCameraAddedObservable.add(function (e, s) {
  3468. _this._createLabel(e);
  3469. });
  3470. this._removedCameraObserver = this._scene.onCameraRemovedObservable.add(function (e, s) {
  3471. _this._removeLabel(e);
  3472. });
  3473. this._labelInitialized = true;
  3474. };
  3475. LabelTool.prototype._createLabel = function (node) {
  3476. // Don't create label for "system nodes" (starting and ending with ###)
  3477. var name = node.name;
  3478. if (INSPECTOR.Helpers.IsSystemName(name)) {
  3479. return;
  3480. }
  3481. var labelGroup = new BABYLON.Group2D({ parent: this._canvas, id: "Label of " + node.name, trackNode: node, origin: BABYLON.Vector2.Zero(),
  3482. children: [
  3483. new BABYLON.Rectangle2D({ id: "LabelRect", x: 0, y: 0, width: 100, height: 30, origin: BABYLON.Vector2.Zero(), border: "#FFFFFFFF", fill: "#808080B0", children: [
  3484. new BABYLON.Text2D(node.name, { x: 10, y: 4, fontName: "bold 16px Arial", fontSignedDistanceField: true })
  3485. ]
  3486. })
  3487. ] });
  3488. var r = labelGroup.children[0];
  3489. var t = r.children[0];
  3490. var ts = t.textSize.width;
  3491. r.width = ts + 20;
  3492. r.height = t.textSize.height + 12;
  3493. labelGroup.addExternalData("owner", node);
  3494. return labelGroup;
  3495. };
  3496. LabelTool.prototype._removeLabel = function (node) {
  3497. for (var _i = 0, _a = this._canvas.children; _i < _a.length; _i++) {
  3498. var g = _a[_i];
  3499. var ed = g.getExternalData("owner");
  3500. if (ed === node) {
  3501. g.dispose();
  3502. break;
  3503. }
  3504. }
  3505. };
  3506. // Action : Display/hide mesh names on the canvas
  3507. LabelTool.prototype.action = function () {
  3508. // Don't toggle if the script is not loaded
  3509. if (!this._checkC2DLoaded()) {
  3510. return;
  3511. }
  3512. // Toggle the label display state
  3513. this._isDisplayed = !this._isDisplayed;
  3514. // Check if we have to display the labels
  3515. if (this._isDisplayed) {
  3516. this._initializeLabels();
  3517. this._canvas.levelVisible = true;
  3518. }
  3519. else {
  3520. this._canvas.levelVisible = false;
  3521. }
  3522. };
  3523. return LabelTool;
  3524. }(INSPECTOR.AbstractTool));
  3525. INSPECTOR.LabelTool = LabelTool;
  3526. })(INSPECTOR || (INSPECTOR = {}));
  3527. var __extends = (this && this.__extends) || function (d, b) {
  3528. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3529. function __() { this.constructor = d; }
  3530. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3531. };
  3532. var INSPECTOR;
  3533. (function (INSPECTOR) {
  3534. var Toolbar = (function (_super) {
  3535. __extends(Toolbar, _super);
  3536. function Toolbar(inspector) {
  3537. var _this = _super.call(this) || this;
  3538. _this._tools = [];
  3539. _this._inspector = inspector;
  3540. _this._build();
  3541. _this._addTools();
  3542. return _this;
  3543. }
  3544. // A toolbar cannot be updated
  3545. Toolbar.prototype.update = function () { };
  3546. ;
  3547. Toolbar.prototype._build = function () {
  3548. this._div.className = 'toolbar';
  3549. };
  3550. ;
  3551. Toolbar.prototype._addTools = function () {
  3552. // Refresh
  3553. this._tools.push(new INSPECTOR.RefreshTool(this._div, this._inspector));
  3554. // Display labels
  3555. this._tools.push(new INSPECTOR.LabelTool(this._div, this._inspector));
  3556. // Pick object
  3557. this._tools.push(new INSPECTOR.PickTool(this._div, this._inspector));
  3558. // Add the popup mode only if the inspector is not in popup mode and if the brower is not edge
  3559. // Edge is
  3560. if (!this._inspector.popupMode && !INSPECTOR.Helpers.IsBrowserEdge()) {
  3561. this._tools.push(new INSPECTOR.PopupTool(this._div, this._inspector));
  3562. }
  3563. // Pause schedule
  3564. this._tools.push(new INSPECTOR.PauseScheduleTool(this._div, this._inspector));
  3565. // Pause schedule
  3566. this._tools.push(new INSPECTOR.DisposeTool(this._div, this._inspector));
  3567. };
  3568. /**
  3569. * Returns the total width in pixel of the tabbar,
  3570. * that corresponds to the sum of the width of each tab + toolbar width
  3571. */
  3572. Toolbar.prototype.getPixelWidth = function () {
  3573. var sum = 0;
  3574. for (var _i = 0, _a = this._tools; _i < _a.length; _i++) {
  3575. var tool = _a[_i];
  3576. sum += tool.getPixelWidth();
  3577. }
  3578. return sum;
  3579. };
  3580. return Toolbar;
  3581. }(INSPECTOR.BasicElement));
  3582. INSPECTOR.Toolbar = Toolbar;
  3583. })(INSPECTOR || (INSPECTOR = {}));
  3584. var __extends = (this && this.__extends) || function (d, b) {
  3585. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3586. function __() { this.constructor = d; }
  3587. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3588. };
  3589. var INSPECTOR;
  3590. (function (INSPECTOR) {
  3591. /**
  3592. * Removes the inspector panel
  3593. */
  3594. var DisposeTool = (function (_super) {
  3595. __extends(DisposeTool, _super);
  3596. function DisposeTool(parent, inspector) {
  3597. return _super.call(this, 'fa-times', parent, inspector, 'Close the inspector panel') || this;
  3598. }
  3599. // Action : refresh the whole panel
  3600. DisposeTool.prototype.action = function () {
  3601. this._inspector.dispose();
  3602. };
  3603. return DisposeTool;
  3604. }(INSPECTOR.AbstractTool));
  3605. INSPECTOR.DisposeTool = DisposeTool;
  3606. })(INSPECTOR || (INSPECTOR = {}));
  3607. var __extends = (this && this.__extends) || function (d, b) {
  3608. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3609. function __() { this.constructor = d; }
  3610. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3611. };
  3612. var INSPECTOR;
  3613. (function (INSPECTOR) {
  3614. var TreeItem = (function (_super) {
  3615. __extends(TreeItem, _super);
  3616. function TreeItem(tab, obj) {
  3617. var _this = _super.call(this) || this;
  3618. _this.children = [];
  3619. _this._tab = tab;
  3620. _this._adapter = obj;
  3621. _this._tools = _this._adapter.getTools();
  3622. _this._build();
  3623. return _this;
  3624. }
  3625. Object.defineProperty(TreeItem.prototype, "id", {
  3626. /** Returns the item ID == its adapter ID */
  3627. get: function () {
  3628. return this._adapter.id();
  3629. },
  3630. enumerable: true,
  3631. configurable: true
  3632. });
  3633. /** Add the given item as a child of this one */
  3634. TreeItem.prototype.add = function (child) {
  3635. this.children.push(child);
  3636. this.update();
  3637. };
  3638. /**
  3639. * Function used to compare this item to another tree item.
  3640. * Returns the alphabetical sort of the adapter ID
  3641. */
  3642. TreeItem.prototype.compareTo = function (item) {
  3643. var str1 = this.id;
  3644. var str2 = item.id;
  3645. return str1.localeCompare(str2, [], { numeric: true });
  3646. };
  3647. /** Returns true if the given obj correspond to the adapter linked to this tree item */
  3648. TreeItem.prototype.correspondsTo = function (obj) {
  3649. return this._adapter.correspondsTo(obj);
  3650. };
  3651. /** hide all children of this item */
  3652. TreeItem.prototype.fold = function () {
  3653. // Do nothing id no children
  3654. if (this.children.length > 0) {
  3655. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3656. var elem = _a[_i];
  3657. elem.toHtml().style.display = 'none';
  3658. }
  3659. this._div.classList.add('folded');
  3660. this._div.classList.remove('unfolded');
  3661. }
  3662. };
  3663. /** Show all children of this item */
  3664. TreeItem.prototype.unfold = function () {
  3665. // Do nothing id no children
  3666. if (this.children.length > 0) {
  3667. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3668. var elem = _a[_i];
  3669. elem.toHtml().style.display = 'block';
  3670. }
  3671. this._div.classList.add('unfolded');
  3672. this._div.classList.remove('folded');
  3673. }
  3674. };
  3675. /** Build the HTML of this item */
  3676. TreeItem.prototype._build = function () {
  3677. this._div.className = 'line';
  3678. for (var _i = 0, _a = this._tools; _i < _a.length; _i++) {
  3679. var tool = _a[_i];
  3680. this._div.appendChild(tool.toHtml());
  3681. }
  3682. // Id
  3683. var text = INSPECTOR.Inspector.DOCUMENT.createElement('span');
  3684. text.textContent = this._adapter.id();
  3685. this._div.appendChild(text);
  3686. // Type
  3687. var type = INSPECTOR.Inspector.DOCUMENT.createElement('span');
  3688. type.className = 'property-type';
  3689. if (this._adapter.type() !== 'type_not_defined') {
  3690. type.textContent = ' - ' + this._adapter.type();
  3691. }
  3692. this._div.appendChild(type);
  3693. this._lineContent = INSPECTOR.Helpers.CreateDiv('line-content', this._div);
  3694. this._addEvent();
  3695. };
  3696. /**
  3697. * Returns one HTML element (.details) containing all details of this primitive
  3698. */
  3699. TreeItem.prototype.getDetails = function () {
  3700. return this._adapter.getProperties();
  3701. };
  3702. TreeItem.prototype.update = function () {
  3703. // Clean division holding all children
  3704. INSPECTOR.Helpers.CleanDiv(this._lineContent);
  3705. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3706. var child = _a[_i];
  3707. var elem = child.toHtml();
  3708. this._lineContent.appendChild(elem);
  3709. }
  3710. if (this.children.length > 0) {
  3711. // Check if folded or not
  3712. if (!this._div.classList.contains('folded') && !this._div.classList.contains('unfolded')) {
  3713. this._div.classList.add('folded');
  3714. }
  3715. }
  3716. this.fold();
  3717. };
  3718. /**
  3719. * Add an event listener on the item :
  3720. * - one click display details
  3721. * - on mouse hover the item is highlighted
  3722. */
  3723. TreeItem.prototype._addEvent = function () {
  3724. var _this = this;
  3725. this._div.addEventListener('click', function (e) {
  3726. _this._tab.select(_this);
  3727. // Fold/unfold the tree
  3728. if (_this._isFolded()) {
  3729. _this.unfold();
  3730. }
  3731. else {
  3732. _this.fold();
  3733. }
  3734. e.stopPropagation();
  3735. });
  3736. // Highlight on mouse over
  3737. this._div.addEventListener('mouseover', function (e) {
  3738. _this._tab.highlightNode(_this);
  3739. e.stopPropagation();
  3740. });
  3741. // Remove highlight on mouse out
  3742. this._div.addEventListener('mouseout', function (e) {
  3743. _this._tab.highlightNode();
  3744. });
  3745. };
  3746. /** Highlight or downplay this node */
  3747. TreeItem.prototype.highlight = function (b) {
  3748. // Remove highlight for all children
  3749. if (!b) {
  3750. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3751. var child = _a[_i];
  3752. child._adapter.highlight(b);
  3753. }
  3754. }
  3755. // Highlight this node
  3756. this._adapter.highlight(b);
  3757. };
  3758. /** Returns true if the node is folded, false otherwise */
  3759. TreeItem.prototype._isFolded = function () {
  3760. return !this._div.classList.contains('unfolded');
  3761. };
  3762. /** Set this item as active (background lighter) in the tree panel */
  3763. TreeItem.prototype.active = function (b) {
  3764. this._div.classList.remove('active');
  3765. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3766. var child = _a[_i];
  3767. child.active(false);
  3768. }
  3769. if (b) {
  3770. this._div.classList.add('active');
  3771. }
  3772. };
  3773. return TreeItem;
  3774. }(INSPECTOR.BasicElement));
  3775. INSPECTOR.TreeItem = TreeItem;
  3776. })(INSPECTOR || (INSPECTOR = {}));
  3777. var INSPECTOR;
  3778. (function (INSPECTOR) {
  3779. var AbstractTreeTool = (function () {
  3780. function AbstractTreeTool() {
  3781. /** Is the tool enabled ? */
  3782. this._on = false;
  3783. this._elem = INSPECTOR.Inspector.DOCUMENT.createElement('i');
  3784. this._elem.className = 'treeTool fa';
  3785. this._addEvents();
  3786. }
  3787. AbstractTreeTool.prototype.toHtml = function () {
  3788. return this._elem;
  3789. };
  3790. AbstractTreeTool.prototype._addEvents = function () {
  3791. var _this = this;
  3792. this._elem.addEventListener('click', function (e) {
  3793. _this.action();
  3794. e.stopPropagation();
  3795. });
  3796. };
  3797. /**
  3798. * Action launched when clicked on this element
  3799. * Should be overrided
  3800. */
  3801. AbstractTreeTool.prototype.action = function () {
  3802. this._on = !this._on;
  3803. };
  3804. return AbstractTreeTool;
  3805. }());
  3806. INSPECTOR.AbstractTreeTool = AbstractTreeTool;
  3807. })(INSPECTOR || (INSPECTOR = {}));
  3808. var __extends = (this && this.__extends) || function (d, b) {
  3809. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3810. function __() { this.constructor = d; }
  3811. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3812. };
  3813. var INSPECTOR;
  3814. (function (INSPECTOR) {
  3815. /**
  3816. * Checkbox to display/hide the primitive
  3817. */
  3818. var BoundingBox = (function (_super) {
  3819. __extends(BoundingBox, _super);
  3820. function BoundingBox(obj) {
  3821. var _this = _super.call(this) || this;
  3822. _this._obj = obj;
  3823. _this._elem.classList.add('fa-square-o');
  3824. _this._on = _this._obj.isBoxVisible();
  3825. _this._check();
  3826. return _this;
  3827. }
  3828. // For a checkbox, set visible/invisible the corresponding prim
  3829. BoundingBox.prototype.action = function () {
  3830. _super.prototype.action.call(this);
  3831. // update object and gui according to the new status
  3832. this._check();
  3833. };
  3834. BoundingBox.prototype._check = function () {
  3835. if (this._on) {
  3836. // set icon eye
  3837. this._elem.classList.add('active');
  3838. }
  3839. else {
  3840. // set icon eye-slash
  3841. this._elem.classList.remove('active');
  3842. }
  3843. this._obj.setBoxVisible(this._on);
  3844. };
  3845. return BoundingBox;
  3846. }(INSPECTOR.AbstractTreeTool));
  3847. INSPECTOR.BoundingBox = BoundingBox;
  3848. })(INSPECTOR || (INSPECTOR = {}));
  3849. var __extends = (this && this.__extends) || function (d, b) {
  3850. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3851. function __() { this.constructor = d; }
  3852. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3853. };
  3854. var INSPECTOR;
  3855. (function (INSPECTOR) {
  3856. /**
  3857. * Checkbox to display/hide the primitive
  3858. */
  3859. var Checkbox = (function (_super) {
  3860. __extends(Checkbox, _super);
  3861. function Checkbox(obj) {
  3862. var _this = _super.call(this) || this;
  3863. _this._obj = obj;
  3864. _this._elem.classList.add('fa-eye');
  3865. _this._on = _this._obj.isVisible();
  3866. _this._check(true);
  3867. return _this;
  3868. }
  3869. // For a checkbox, set visible/invisible the corresponding prim
  3870. Checkbox.prototype.action = function () {
  3871. _super.prototype.action.call(this);
  3872. // update object and gui according to the new status
  3873. this._check();
  3874. };
  3875. Checkbox.prototype._check = function (dontEnable) {
  3876. if (this._on) {
  3877. // set icon eye
  3878. this._elem.classList.add('fa-eye');
  3879. this._elem.classList.add('active');
  3880. this._elem.classList.remove('fa-eye-slash');
  3881. }
  3882. else {
  3883. // set icon eye-slash
  3884. this._elem.classList.remove('fa-eye');
  3885. this._elem.classList.remove('active');
  3886. this._elem.classList.add('fa-eye-slash');
  3887. }
  3888. if (!dontEnable) {
  3889. this._obj.setVisible(this._on);
  3890. }
  3891. };
  3892. return Checkbox;
  3893. }(INSPECTOR.AbstractTreeTool));
  3894. INSPECTOR.Checkbox = Checkbox;
  3895. })(INSPECTOR || (INSPECTOR = {}));
  3896. var __extends = (this && this.__extends) || function (d, b) {
  3897. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3898. function __() { this.constructor = d; }
  3899. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3900. };
  3901. var INSPECTOR;
  3902. (function (INSPECTOR) {
  3903. var DebugArea = (function (_super) {
  3904. __extends(DebugArea, _super);
  3905. function DebugArea(obj) {
  3906. var _this = _super.call(this) || this;
  3907. _this._obj = obj;
  3908. _this._elem.classList.add('fa-wrench');
  3909. return _this;
  3910. }
  3911. DebugArea.prototype.action = function () {
  3912. _super.prototype.action.call(this);
  3913. if (this._on) {
  3914. // set icon activated
  3915. this._elem.classList.add('active');
  3916. }
  3917. else {
  3918. // set icon deactivated
  3919. this._elem.classList.remove('active');
  3920. }
  3921. this._obj.debug(this._on);
  3922. };
  3923. return DebugArea;
  3924. }(INSPECTOR.AbstractTreeTool));
  3925. INSPECTOR.DebugArea = DebugArea;
  3926. })(INSPECTOR || (INSPECTOR = {}));
  3927. var __extends = (this && this.__extends) || function (d, b) {
  3928. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3929. function __() { this.constructor = d; }
  3930. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  3931. };
  3932. var INSPECTOR;
  3933. (function (INSPECTOR) {
  3934. /**
  3935. * Checkbox to display/hide the primitive
  3936. */
  3937. var Info = (function (_super) {
  3938. __extends(Info, _super);
  3939. function Info(obj) {
  3940. var _this = _super.call(this) || this;
  3941. _this._obj = obj;
  3942. _this._elem.classList.add('fa-info-circle');
  3943. _this._tooltip = new INSPECTOR.Tooltip(_this._elem, _this._obj.getInfo(), _this._elem);
  3944. return _this;
  3945. }
  3946. // Nothing to do on click
  3947. Info.prototype.action = function () {
  3948. _super.prototype.action.call(this);
  3949. };
  3950. return Info;
  3951. }(INSPECTOR.AbstractTreeTool));
  3952. INSPECTOR.Info = Info;
  3953. })(INSPECTOR || (INSPECTOR = {}));