babylon.gui.js 192 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405
  1. var babylonDependency; try { babylonDependency = (typeof require !== 'undefined' && require("../babylon.max")); } catch (e) { babylonDependency = (typeof require !== 'undefined' && require("babylonjs")); }
  2. var BABYLON = BABYLON || babylonDependency;
  3. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  4. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  5. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  6. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  7. return c > 3 && r && Object.defineProperty(target, key, r), r;
  8. };
  9. var __extends = (this && this.__extends) || (function () {
  10. var extendStatics = Object.setPrototypeOf ||
  11. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  12. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  13. return function (d, b) {
  14. extendStatics(d, b);
  15. function __() { this.constructor = d; }
  16. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  17. };
  18. })();
  19. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  20. var BABYLON;
  21. (function (BABYLON) {
  22. var GUI;
  23. (function (GUI) {
  24. var AdvancedDynamicTexture = (function (_super) {
  25. __extends(AdvancedDynamicTexture, _super);
  26. function AdvancedDynamicTexture(name, width, height, scene, generateMipMaps, samplingMode) {
  27. if (width === void 0) { width = 0; }
  28. if (height === void 0) { height = 0; }
  29. if (generateMipMaps === void 0) { generateMipMaps = false; }
  30. if (samplingMode === void 0) { samplingMode = BABYLON.Texture.NEAREST_SAMPLINGMODE; }
  31. var _this = _super.call(this, name, { width: width, height: height }, scene, generateMipMaps, samplingMode, BABYLON.Engine.TEXTUREFORMAT_RGBA) || this;
  32. _this._isDirty = false;
  33. _this._rootContainer = new GUI.Container("root");
  34. _this._linkedControls = new Array();
  35. _this._isFullscreen = false;
  36. _this._fullscreenViewport = new BABYLON.Viewport(0, 0, 1, 1);
  37. _this._idealWidth = 0;
  38. _this._idealHeight = 0;
  39. _this._renderAtIdealSize = false;
  40. _this._blockNextFocusCheck = false;
  41. _this._renderObserver = _this.getScene().onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
  42. _this._preKeyboardObserver = _this.getScene().onPreKeyboardObservable.add(function (info) {
  43. if (!_this._focusedControl) {
  44. return;
  45. }
  46. if (info.type === BABYLON.KeyboardEventTypes.KEYDOWN) {
  47. _this._focusedControl.processKeyboard(info.event);
  48. }
  49. info.skipOnPointerObservable = true;
  50. });
  51. _this._rootContainer._link(null, _this);
  52. _this.hasAlpha = true;
  53. if (!width || !height) {
  54. _this._resizeObserver = _this.getScene().getEngine().onResizeObservable.add(function () { return _this._onResize(); });
  55. _this._onResize();
  56. }
  57. _this._texture.isReady = true;
  58. return _this;
  59. }
  60. Object.defineProperty(AdvancedDynamicTexture.prototype, "background", {
  61. get: function () {
  62. return this._background;
  63. },
  64. set: function (value) {
  65. if (this._background === value) {
  66. return;
  67. }
  68. this._background = value;
  69. this.markAsDirty();
  70. },
  71. enumerable: true,
  72. configurable: true
  73. });
  74. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealWidth", {
  75. get: function () {
  76. return this._idealWidth;
  77. },
  78. set: function (value) {
  79. if (this._idealWidth === value) {
  80. return;
  81. }
  82. this._idealWidth = value;
  83. this.markAsDirty();
  84. this._rootContainer._markAllAsDirty();
  85. },
  86. enumerable: true,
  87. configurable: true
  88. });
  89. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealHeight", {
  90. get: function () {
  91. return this._idealHeight;
  92. },
  93. set: function (value) {
  94. if (this._idealHeight === value) {
  95. return;
  96. }
  97. this._idealHeight = value;
  98. this.markAsDirty();
  99. this._rootContainer._markAllAsDirty();
  100. },
  101. enumerable: true,
  102. configurable: true
  103. });
  104. Object.defineProperty(AdvancedDynamicTexture.prototype, "renderAtIdealSize", {
  105. get: function () {
  106. return this._renderAtIdealSize;
  107. },
  108. set: function (value) {
  109. if (this._renderAtIdealSize === value) {
  110. return;
  111. }
  112. this._renderAtIdealSize = value;
  113. this._onResize();
  114. },
  115. enumerable: true,
  116. configurable: true
  117. });
  118. Object.defineProperty(AdvancedDynamicTexture.prototype, "layer", {
  119. get: function () {
  120. return this._layerToDispose;
  121. },
  122. enumerable: true,
  123. configurable: true
  124. });
  125. Object.defineProperty(AdvancedDynamicTexture.prototype, "rootContainer", {
  126. get: function () {
  127. return this._rootContainer;
  128. },
  129. enumerable: true,
  130. configurable: true
  131. });
  132. Object.defineProperty(AdvancedDynamicTexture.prototype, "focusedControl", {
  133. get: function () {
  134. return this._focusedControl;
  135. },
  136. set: function (control) {
  137. if (this._focusedControl == control) {
  138. return;
  139. }
  140. if (this._focusedControl) {
  141. this._focusedControl.onBlur();
  142. }
  143. if (control) {
  144. control.onFocus();
  145. }
  146. this._focusedControl = control;
  147. },
  148. enumerable: true,
  149. configurable: true
  150. });
  151. AdvancedDynamicTexture.prototype.executeOnAllControls = function (func, container) {
  152. if (!container) {
  153. container = this._rootContainer;
  154. }
  155. for (var _i = 0, _a = container.children; _i < _a.length; _i++) {
  156. var child = _a[_i];
  157. if (child.children) {
  158. this.executeOnAllControls(func, child);
  159. continue;
  160. }
  161. func(child);
  162. }
  163. };
  164. AdvancedDynamicTexture.prototype.markAsDirty = function () {
  165. this._isDirty = true;
  166. };
  167. AdvancedDynamicTexture.prototype.addControl = function (control) {
  168. this._rootContainer.addControl(control);
  169. return this;
  170. };
  171. AdvancedDynamicTexture.prototype.removeControl = function (control) {
  172. this._rootContainer.removeControl(control);
  173. return this;
  174. };
  175. AdvancedDynamicTexture.prototype.dispose = function () {
  176. this.getScene().onBeforeCameraRenderObservable.remove(this._renderObserver);
  177. if (this._resizeObserver) {
  178. this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
  179. }
  180. if (this._pointerMoveObserver) {
  181. this.getScene().onPrePointerObservable.remove(this._pointerMoveObserver);
  182. }
  183. if (this._pointerObserver) {
  184. this.getScene().onPointerObservable.remove(this._pointerObserver);
  185. }
  186. if (this._canvasPointerOutObserver) {
  187. this.getScene().getEngine().onCanvasPointerOutObservable.remove(this._canvasPointerOutObserver);
  188. }
  189. if (this._layerToDispose) {
  190. this._layerToDispose.texture = null;
  191. this._layerToDispose.dispose();
  192. this._layerToDispose = null;
  193. }
  194. this._rootContainer.dispose();
  195. _super.prototype.dispose.call(this);
  196. };
  197. AdvancedDynamicTexture.prototype._onResize = function () {
  198. // Check size
  199. var engine = this.getScene().getEngine();
  200. var textureSize = this.getSize();
  201. var renderWidth = engine.getRenderWidth();
  202. var renderHeight = engine.getRenderHeight();
  203. if (this._renderAtIdealSize) {
  204. if (this._idealWidth) {
  205. renderHeight = (renderHeight * this._idealWidth) / renderWidth;
  206. renderWidth = this._idealWidth;
  207. }
  208. else if (this._idealHeight) {
  209. renderWidth = (renderWidth * this._idealHeight) / renderHeight;
  210. renderHeight = this._idealHeight;
  211. }
  212. }
  213. if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
  214. this.scaleTo(renderWidth, renderHeight);
  215. this.markAsDirty();
  216. if (this._idealWidth || this._idealHeight) {
  217. this._rootContainer._markAllAsDirty();
  218. }
  219. }
  220. };
  221. AdvancedDynamicTexture.prototype._getGlobalViewport = function (scene) {
  222. var engine = scene.getEngine();
  223. return this._fullscreenViewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
  224. };
  225. AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
  226. if (this._layerToDispose) {
  227. if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {
  228. return;
  229. }
  230. }
  231. if (this._isFullscreen && this._linkedControls.length) {
  232. var scene = this.getScene();
  233. var globalViewport = this._getGlobalViewport(scene);
  234. for (var _i = 0, _a = this._linkedControls; _i < _a.length; _i++) {
  235. var control = _a[_i];
  236. if (!control.isVisible) {
  237. continue;
  238. }
  239. var mesh = control._linkedMesh;
  240. if (!mesh || mesh.isDisposed()) {
  241. BABYLON.Tools.SetImmediate(function () {
  242. control.linkWithMesh(null);
  243. });
  244. continue;
  245. }
  246. var position = mesh.getBoundingInfo().boundingSphere.center;
  247. var projectedPosition = BABYLON.Vector3.Project(position, mesh.getWorldMatrix(), scene.getTransformMatrix(), globalViewport);
  248. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  249. control.notRenderable = true;
  250. continue;
  251. }
  252. control.notRenderable = false;
  253. control._moveToProjectedPosition(projectedPosition);
  254. }
  255. }
  256. if (!this._isDirty && !this._rootContainer.isDirty) {
  257. return;
  258. }
  259. this._isDirty = false;
  260. this._render();
  261. this.update();
  262. };
  263. AdvancedDynamicTexture.prototype._render = function () {
  264. var engine = this.getScene().getEngine();
  265. var textureSize = this.getSize();
  266. var renderWidth = textureSize.width;
  267. var renderHeight = textureSize.height;
  268. // Clear
  269. var context = this.getContext();
  270. context.clearRect(0, 0, renderWidth, renderHeight);
  271. if (this._background) {
  272. context.save();
  273. context.fillStyle = this._background;
  274. context.fillRect(0, 0, renderWidth, renderHeight);
  275. context.restore();
  276. }
  277. // Render
  278. context.font = "18px Arial";
  279. context.strokeStyle = "white";
  280. var measure = new GUI.Measure(0, 0, renderWidth, renderHeight);
  281. this._rootContainer._draw(measure, context);
  282. };
  283. AdvancedDynamicTexture.prototype._doPicking = function (x, y, type, buttonIndex) {
  284. var scene = this.getScene();
  285. var engine = scene.getEngine();
  286. var textureSize = this.getSize();
  287. if (this._isFullscreen) {
  288. x = x * (textureSize.width / engine.getRenderWidth());
  289. y = y * (textureSize.height / engine.getRenderHeight());
  290. }
  291. if (this._capturingControl) {
  292. this._capturingControl._processObservables(type, x, y, buttonIndex);
  293. return;
  294. }
  295. if (!this._rootContainer._processPicking(x, y, type, buttonIndex)) {
  296. if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
  297. if (this._lastControlOver) {
  298. this._lastControlOver._onPointerOut();
  299. }
  300. this._lastControlOver = null;
  301. }
  302. }
  303. this._manageFocus();
  304. };
  305. AdvancedDynamicTexture.prototype.attach = function () {
  306. var _this = this;
  307. var scene = this.getScene();
  308. this._pointerMoveObserver = scene.onPrePointerObservable.add(function (pi, state) {
  309. if (pi.type !== BABYLON.PointerEventTypes.POINTERMOVE
  310. && pi.type !== BABYLON.PointerEventTypes.POINTERUP
  311. && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
  312. return;
  313. }
  314. var camera = scene.cameraToUseForPointers || scene.activeCamera;
  315. var engine = scene.getEngine();
  316. var viewport = camera.viewport;
  317. var x = (scene.pointerX / engine.getHardwareScalingLevel() - viewport.x * engine.getRenderWidth()) / viewport.width;
  318. var y = (scene.pointerY / engine.getHardwareScalingLevel() - viewport.y * engine.getRenderHeight()) / viewport.height;
  319. _this._shouldBlockPointer = false;
  320. _this._doPicking(x, y, pi.type, pi.event.button);
  321. pi.skipOnPointerObservable = _this._shouldBlockPointer;
  322. });
  323. this._attachToOnPointerOut(scene);
  324. };
  325. AdvancedDynamicTexture.prototype.attachToMesh = function (mesh, supportPointerMove) {
  326. var _this = this;
  327. if (supportPointerMove === void 0) { supportPointerMove = true; }
  328. var scene = this.getScene();
  329. this._pointerObserver = scene.onPointerObservable.add(function (pi, state) {
  330. if (pi.type !== BABYLON.PointerEventTypes.POINTERMOVE
  331. && pi.type !== BABYLON.PointerEventTypes.POINTERUP
  332. && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
  333. return;
  334. }
  335. if (pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
  336. var uv = pi.pickInfo.getTextureCoordinates();
  337. var size = _this.getSize();
  338. _this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type, pi.event.button);
  339. }
  340. else if (pi.type === BABYLON.PointerEventTypes.POINTERUP) {
  341. if (_this._lastControlDown) {
  342. _this._lastControlDown.forcePointerUp();
  343. }
  344. _this._lastControlDown = null;
  345. _this.focusedControl = null;
  346. }
  347. else if (pi.type === BABYLON.PointerEventTypes.POINTERMOVE) {
  348. if (_this._lastControlOver) {
  349. _this._lastControlOver._onPointerOut();
  350. }
  351. _this._lastControlOver = null;
  352. }
  353. });
  354. mesh.enablePointerMoveEvents = supportPointerMove;
  355. this._attachToOnPointerOut(scene);
  356. };
  357. AdvancedDynamicTexture.prototype.moveFocusToControl = function (control) {
  358. this.focusedControl = control;
  359. this._lastPickedControl = control;
  360. this._blockNextFocusCheck = true;
  361. };
  362. AdvancedDynamicTexture.prototype._manageFocus = function () {
  363. if (this._blockNextFocusCheck) {
  364. this._blockNextFocusCheck = false;
  365. this._lastPickedControl = this._focusedControl;
  366. return;
  367. }
  368. // Focus management
  369. if (this._focusedControl) {
  370. if (this._focusedControl !== this._lastPickedControl) {
  371. if (this._lastPickedControl.isFocusInvisible) {
  372. return;
  373. }
  374. this.focusedControl = null;
  375. }
  376. }
  377. };
  378. AdvancedDynamicTexture.prototype._attachToOnPointerOut = function (scene) {
  379. var _this = this;
  380. this._canvasPointerOutObserver = scene.getEngine().onCanvasPointerOutObservable.add(function () {
  381. if (_this._lastControlOver) {
  382. _this._lastControlOver._onPointerOut();
  383. }
  384. _this._lastControlOver = null;
  385. if (_this._lastControlDown) {
  386. _this._lastControlDown.forcePointerUp();
  387. }
  388. _this._lastControlDown = null;
  389. });
  390. };
  391. // Statics
  392. AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height, supportPointerMove) {
  393. if (width === void 0) { width = 1024; }
  394. if (height === void 0) { height = 1024; }
  395. if (supportPointerMove === void 0) { supportPointerMove = true; }
  396. var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
  397. var material = new BABYLON.StandardMaterial("AdvancedDynamicTextureMaterial", mesh.getScene());
  398. material.backFaceCulling = false;
  399. material.diffuseColor = BABYLON.Color3.Black();
  400. material.specularColor = BABYLON.Color3.Black();
  401. material.emissiveTexture = result;
  402. material.opacityTexture = result;
  403. mesh.material = material;
  404. result.attachToMesh(mesh, supportPointerMove);
  405. return result;
  406. };
  407. AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene) {
  408. if (foreground === void 0) { foreground = true; }
  409. if (scene === void 0) { scene = null; }
  410. var result = new AdvancedDynamicTexture(name, 0, 0, scene);
  411. // Display
  412. var layer = new BABYLON.Layer(name + "_layer", null, scene, !foreground);
  413. layer.texture = result;
  414. result._layerToDispose = layer;
  415. result._isFullscreen = true;
  416. // Attach
  417. result.attach();
  418. return result;
  419. };
  420. return AdvancedDynamicTexture;
  421. }(BABYLON.DynamicTexture));
  422. GUI.AdvancedDynamicTexture = AdvancedDynamicTexture;
  423. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  424. })(BABYLON || (BABYLON = {}));
  425. //# sourceMappingURL=advancedDynamicTexture.js.map
  426. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  427. var BABYLON;
  428. (function (BABYLON) {
  429. var GUI;
  430. (function (GUI) {
  431. var Measure = (function () {
  432. function Measure(left, top, width, height) {
  433. this.left = left;
  434. this.top = top;
  435. this.width = width;
  436. this.height = height;
  437. }
  438. Measure.prototype.copyFrom = function (other) {
  439. this.left = other.left;
  440. this.top = other.top;
  441. this.width = other.width;
  442. this.height = other.height;
  443. };
  444. Measure.prototype.isEqualsTo = function (other) {
  445. if (this.left !== other.left) {
  446. return false;
  447. }
  448. if (this.top !== other.top) {
  449. return false;
  450. }
  451. if (this.width !== other.width) {
  452. return false;
  453. }
  454. if (this.height !== other.height) {
  455. return false;
  456. }
  457. return true;
  458. };
  459. Measure.Empty = function () {
  460. return new Measure(0, 0, 0, 0);
  461. };
  462. return Measure;
  463. }());
  464. GUI.Measure = Measure;
  465. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  466. })(BABYLON || (BABYLON = {}));
  467. //# sourceMappingURL=measure.js.map
  468. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  469. var BABYLON;
  470. (function (BABYLON) {
  471. var GUI;
  472. (function (GUI) {
  473. var Vector2WithInfo = (function (_super) {
  474. __extends(Vector2WithInfo, _super);
  475. function Vector2WithInfo(source, buttonIndex) {
  476. if (buttonIndex === void 0) { buttonIndex = 0; }
  477. var _this = _super.call(this, source.x, source.y) || this;
  478. _this.buttonIndex = buttonIndex;
  479. return _this;
  480. }
  481. return Vector2WithInfo;
  482. }(BABYLON.Vector2));
  483. GUI.Vector2WithInfo = Vector2WithInfo;
  484. var Matrix2D = (function () {
  485. function Matrix2D(m00, m01, m10, m11, m20, m21) {
  486. this.m = new Float32Array(6);
  487. this.fromValues(m00, m01, m10, m11, m20, m21);
  488. }
  489. Matrix2D.prototype.fromValues = function (m00, m01, m10, m11, m20, m21) {
  490. this.m[0] = m00;
  491. this.m[1] = m01;
  492. this.m[2] = m10;
  493. this.m[3] = m11;
  494. this.m[4] = m20;
  495. this.m[5] = m21;
  496. return this;
  497. };
  498. Matrix2D.prototype.determinant = function () {
  499. return this.m[0] * this.m[3] - this.m[1] * this.m[2];
  500. };
  501. Matrix2D.prototype.invertToRef = function (result) {
  502. var l0 = this.m[0];
  503. var l1 = this.m[1];
  504. var l2 = this.m[2];
  505. var l3 = this.m[3];
  506. var l4 = this.m[4];
  507. var l5 = this.m[5];
  508. var det = this.determinant();
  509. if (det < (BABYLON.Epsilon * BABYLON.Epsilon)) {
  510. result.m[0] = 0;
  511. result.m[1] = 0;
  512. result.m[2] = 0;
  513. result.m[3] = 0;
  514. result.m[4] = 0;
  515. result.m[5] = 0;
  516. return this;
  517. }
  518. var detDiv = 1 / det;
  519. var det4 = l2 * l5 - l3 * l4;
  520. var det5 = l1 * l4 - l0 * l5;
  521. result.m[0] = l3 * detDiv;
  522. result.m[1] = -l1 * detDiv;
  523. result.m[2] = -l2 * detDiv;
  524. result.m[3] = l0 * detDiv;
  525. result.m[4] = det4 * detDiv;
  526. result.m[5] = det5 * detDiv;
  527. return this;
  528. };
  529. Matrix2D.prototype.multiplyToRef = function (other, result) {
  530. var l0 = this.m[0];
  531. var l1 = this.m[1];
  532. var l2 = this.m[2];
  533. var l3 = this.m[3];
  534. var l4 = this.m[4];
  535. var l5 = this.m[5];
  536. var r0 = other.m[0];
  537. var r1 = other.m[1];
  538. var r2 = other.m[2];
  539. var r3 = other.m[3];
  540. var r4 = other.m[4];
  541. var r5 = other.m[5];
  542. result.m[0] = l0 * r0 + l1 * r2;
  543. result.m[1] = l0 * r1 + l1 * r3;
  544. result.m[2] = l2 * r0 + l3 * r2;
  545. result.m[3] = l2 * r1 + l3 * r3;
  546. result.m[4] = l4 * r0 + l5 * r2 + r4;
  547. result.m[5] = l4 * r1 + l5 * r3 + r5;
  548. return this;
  549. };
  550. Matrix2D.prototype.transformCoordinates = function (x, y, result) {
  551. result.x = x * this.m[0] + y * this.m[2] + this.m[4];
  552. result.y = x * this.m[1] + y * this.m[3] + this.m[5];
  553. return this;
  554. };
  555. // Statics
  556. Matrix2D.Identity = function () {
  557. return new Matrix2D(1, 0, 0, 1, 0, 0);
  558. };
  559. Matrix2D.TranslationToRef = function (x, y, result) {
  560. result.fromValues(1, 0, 0, 1, x, y);
  561. };
  562. Matrix2D.ScalingToRef = function (x, y, result) {
  563. result.fromValues(x, 0, 0, y, 0, 0);
  564. };
  565. Matrix2D.RotationToRef = function (angle, result) {
  566. var s = Math.sin(angle);
  567. var c = Math.cos(angle);
  568. result.fromValues(c, s, -s, c, 0, 0);
  569. };
  570. Matrix2D.ComposeToRef = function (tx, ty, angle, scaleX, scaleY, parentMatrix, result) {
  571. Matrix2D.TranslationToRef(tx, ty, Matrix2D._TempPreTranslationMatrix);
  572. Matrix2D.ScalingToRef(scaleX, scaleY, Matrix2D._TempScalingMatrix);
  573. Matrix2D.RotationToRef(angle, Matrix2D._TempRotationMatrix);
  574. Matrix2D.TranslationToRef(-tx, -ty, Matrix2D._TempPostTranslationMatrix);
  575. Matrix2D._TempPreTranslationMatrix.multiplyToRef(Matrix2D._TempScalingMatrix, Matrix2D._TempCompose0);
  576. Matrix2D._TempCompose0.multiplyToRef(Matrix2D._TempRotationMatrix, Matrix2D._TempCompose1);
  577. if (parentMatrix) {
  578. Matrix2D._TempCompose1.multiplyToRef(Matrix2D._TempPostTranslationMatrix, Matrix2D._TempCompose2);
  579. Matrix2D._TempCompose2.multiplyToRef(parentMatrix, result);
  580. }
  581. else {
  582. Matrix2D._TempCompose1.multiplyToRef(Matrix2D._TempPostTranslationMatrix, result);
  583. }
  584. };
  585. Matrix2D._TempPreTranslationMatrix = Matrix2D.Identity();
  586. Matrix2D._TempPostTranslationMatrix = Matrix2D.Identity();
  587. Matrix2D._TempRotationMatrix = Matrix2D.Identity();
  588. Matrix2D._TempScalingMatrix = Matrix2D.Identity();
  589. Matrix2D._TempCompose0 = Matrix2D.Identity();
  590. Matrix2D._TempCompose1 = Matrix2D.Identity();
  591. Matrix2D._TempCompose2 = Matrix2D.Identity();
  592. return Matrix2D;
  593. }());
  594. GUI.Matrix2D = Matrix2D;
  595. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  596. })(BABYLON || (BABYLON = {}));
  597. //# sourceMappingURL=math2D.js.map
  598. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  599. var BABYLON;
  600. (function (BABYLON) {
  601. var GUI;
  602. (function (GUI) {
  603. var ValueAndUnit = (function () {
  604. function ValueAndUnit(value, unit, negativeValueAllowed) {
  605. if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
  606. if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
  607. this.unit = unit;
  608. this.negativeValueAllowed = negativeValueAllowed;
  609. this._value = 1;
  610. this.ignoreAdaptiveScaling = false;
  611. this._value = value;
  612. }
  613. Object.defineProperty(ValueAndUnit.prototype, "isPercentage", {
  614. get: function () {
  615. return this.unit === ValueAndUnit.UNITMODE_PERCENTAGE;
  616. },
  617. enumerable: true,
  618. configurable: true
  619. });
  620. Object.defineProperty(ValueAndUnit.prototype, "isPixel", {
  621. get: function () {
  622. return this.unit === ValueAndUnit.UNITMODE_PIXEL;
  623. },
  624. enumerable: true,
  625. configurable: true
  626. });
  627. Object.defineProperty(ValueAndUnit.prototype, "internalValue", {
  628. get: function () {
  629. return this._value;
  630. },
  631. enumerable: true,
  632. configurable: true
  633. });
  634. ValueAndUnit.prototype.getValueInPixel = function (host, refValue) {
  635. if (this.isPixel) {
  636. return this.getValue(host);
  637. }
  638. return this.getValue(host) * refValue;
  639. };
  640. ValueAndUnit.prototype.getValue = function (host) {
  641. if (host && !this.ignoreAdaptiveScaling && this.unit !== ValueAndUnit.UNITMODE_PERCENTAGE) {
  642. if (host.idealWidth) {
  643. return (this._value * host.getSize().width) / host.idealWidth;
  644. }
  645. if (host.idealHeight) {
  646. return (this._value * host.getSize().height) / host.idealHeight;
  647. }
  648. }
  649. return this._value;
  650. };
  651. ValueAndUnit.prototype.toString = function (host) {
  652. switch (this.unit) {
  653. case ValueAndUnit.UNITMODE_PERCENTAGE:
  654. return (this.getValue(host) * 100) + "%";
  655. case ValueAndUnit.UNITMODE_PIXEL:
  656. return this.getValue(host) + "px";
  657. }
  658. return this.unit.toString();
  659. };
  660. ValueAndUnit.prototype.fromString = function (source) {
  661. var match = ValueAndUnit._Regex.exec(source.toString());
  662. if (!match || match.length === 0) {
  663. return false;
  664. }
  665. var sourceValue = parseFloat(match[1]);
  666. var sourceUnit = this.unit;
  667. if (!this.negativeValueAllowed) {
  668. if (sourceValue < 0) {
  669. sourceValue = 0;
  670. }
  671. }
  672. if (match.length === 4) {
  673. switch (match[3]) {
  674. case "px":
  675. sourceUnit = ValueAndUnit.UNITMODE_PIXEL;
  676. break;
  677. case "%":
  678. sourceUnit = ValueAndUnit.UNITMODE_PERCENTAGE;
  679. sourceValue /= 100.0;
  680. break;
  681. }
  682. }
  683. if (sourceValue === this._value && sourceUnit === this.unit) {
  684. return false;
  685. }
  686. this._value = sourceValue;
  687. this.unit = sourceUnit;
  688. return true;
  689. };
  690. Object.defineProperty(ValueAndUnit, "UNITMODE_PERCENTAGE", {
  691. get: function () {
  692. return ValueAndUnit._UNITMODE_PERCENTAGE;
  693. },
  694. enumerable: true,
  695. configurable: true
  696. });
  697. Object.defineProperty(ValueAndUnit, "UNITMODE_PIXEL", {
  698. get: function () {
  699. return ValueAndUnit._UNITMODE_PIXEL;
  700. },
  701. enumerable: true,
  702. configurable: true
  703. });
  704. // Static
  705. ValueAndUnit._Regex = /(^-?\d*(\.\d+)?)(%|px)?/;
  706. ValueAndUnit._UNITMODE_PERCENTAGE = 0;
  707. ValueAndUnit._UNITMODE_PIXEL = 1;
  708. return ValueAndUnit;
  709. }());
  710. GUI.ValueAndUnit = ValueAndUnit;
  711. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  712. })(BABYLON || (BABYLON = {}));
  713. //# sourceMappingURL=valueAndUnit.js.map
  714. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  715. var BABYLON;
  716. (function (BABYLON) {
  717. var GUI;
  718. (function (GUI) {
  719. var Control = (function () {
  720. // Functions
  721. function Control(name) {
  722. this.name = name;
  723. this._alpha = 1;
  724. this._alphaSet = false;
  725. this._zIndex = 0;
  726. this._currentMeasure = GUI.Measure.Empty();
  727. this._fontFamily = "Arial";
  728. this._fontStyle = "";
  729. this._fontSize = new GUI.ValueAndUnit(18, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
  730. this._width = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
  731. this._height = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
  732. this._color = "";
  733. this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
  734. this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
  735. this._isDirty = true;
  736. this._cachedParentMeasure = GUI.Measure.Empty();
  737. this._paddingLeft = new GUI.ValueAndUnit(0);
  738. this._paddingRight = new GUI.ValueAndUnit(0);
  739. this._paddingTop = new GUI.ValueAndUnit(0);
  740. this._paddingBottom = new GUI.ValueAndUnit(0);
  741. this._left = new GUI.ValueAndUnit(0);
  742. this._top = new GUI.ValueAndUnit(0);
  743. this._scaleX = 1.0;
  744. this._scaleY = 1.0;
  745. this._rotation = 0;
  746. this._transformCenterX = 0.5;
  747. this._transformCenterY = 0.5;
  748. this._transformMatrix = GUI.Matrix2D.Identity();
  749. this._invertTransformMatrix = GUI.Matrix2D.Identity();
  750. this._transformedPosition = BABYLON.Vector2.Zero();
  751. this._isMatrixDirty = true;
  752. this._isVisible = true;
  753. this._fontSet = false;
  754. this._dummyVector2 = BABYLON.Vector2.Zero();
  755. this._downCount = 0;
  756. this._enterCount = 0;
  757. this._doNotRender = false;
  758. this.isHitTestVisible = true;
  759. this.isPointerBlocker = false;
  760. this.isFocusInvisible = false;
  761. this._linkOffsetX = new GUI.ValueAndUnit(0);
  762. this._linkOffsetY = new GUI.ValueAndUnit(0);
  763. /**
  764. * An event triggered when the pointer move over the control.
  765. * @type {BABYLON.Observable}
  766. */
  767. this.onPointerMoveObservable = new BABYLON.Observable();
  768. /**
  769. * An event triggered when the pointer move out of the control.
  770. * @type {BABYLON.Observable}
  771. */
  772. this.onPointerOutObservable = new BABYLON.Observable();
  773. /**
  774. * An event triggered when the pointer taps the control
  775. * @type {BABYLON.Observable}
  776. */
  777. this.onPointerDownObservable = new BABYLON.Observable();
  778. /**
  779. * An event triggered when pointer up
  780. * @type {BABYLON.Observable}
  781. */
  782. this.onPointerUpObservable = new BABYLON.Observable();
  783. /**
  784. * An event triggered when pointer enters the control
  785. * @type {BABYLON.Observable}
  786. */
  787. this.onPointerEnterObservable = new BABYLON.Observable();
  788. /**
  789. * An event triggered when the control is marked as dirty
  790. * @type {BABYLON.Observable}
  791. */
  792. this.onDirtyObservable = new BABYLON.Observable();
  793. /**
  794. * An event triggered after the control is drawn
  795. * @type {BABYLON.Observable}
  796. */
  797. this.onAfterDrawObservable = new BABYLON.Observable();
  798. }
  799. Object.defineProperty(Control.prototype, "typeName", {
  800. // Properties
  801. get: function () {
  802. return this._getTypeName();
  803. },
  804. enumerable: true,
  805. configurable: true
  806. });
  807. Object.defineProperty(Control.prototype, "alpha", {
  808. get: function () {
  809. return this._alpha;
  810. },
  811. set: function (value) {
  812. if (this._alpha === value) {
  813. return;
  814. }
  815. this._alphaSet = true;
  816. this._alpha = value;
  817. this._markAsDirty();
  818. },
  819. enumerable: true,
  820. configurable: true
  821. });
  822. Object.defineProperty(Control.prototype, "scaleX", {
  823. get: function () {
  824. return this._scaleX;
  825. },
  826. set: function (value) {
  827. if (this._scaleX === value) {
  828. return;
  829. }
  830. this._scaleX = value;
  831. this._markAsDirty();
  832. this._markMatrixAsDirty();
  833. },
  834. enumerable: true,
  835. configurable: true
  836. });
  837. Object.defineProperty(Control.prototype, "scaleY", {
  838. get: function () {
  839. return this._scaleY;
  840. },
  841. set: function (value) {
  842. if (this._scaleY === value) {
  843. return;
  844. }
  845. this._scaleY = value;
  846. this._markAsDirty();
  847. this._markMatrixAsDirty();
  848. },
  849. enumerable: true,
  850. configurable: true
  851. });
  852. Object.defineProperty(Control.prototype, "rotation", {
  853. get: function () {
  854. return this._rotation;
  855. },
  856. set: function (value) {
  857. if (this._rotation === value) {
  858. return;
  859. }
  860. this._rotation = value;
  861. this._markAsDirty();
  862. this._markMatrixAsDirty();
  863. },
  864. enumerable: true,
  865. configurable: true
  866. });
  867. Object.defineProperty(Control.prototype, "transformCenterY", {
  868. get: function () {
  869. return this._transformCenterY;
  870. },
  871. set: function (value) {
  872. if (this._transformCenterY === value) {
  873. return;
  874. }
  875. this._transformCenterY = value;
  876. this._markAsDirty();
  877. this._markMatrixAsDirty();
  878. },
  879. enumerable: true,
  880. configurable: true
  881. });
  882. Object.defineProperty(Control.prototype, "transformCenterX", {
  883. get: function () {
  884. return this._transformCenterX;
  885. },
  886. set: function (value) {
  887. if (this._transformCenterX === value) {
  888. return;
  889. }
  890. this._transformCenterX = value;
  891. this._markAsDirty();
  892. this._markMatrixAsDirty();
  893. },
  894. enumerable: true,
  895. configurable: true
  896. });
  897. Object.defineProperty(Control.prototype, "horizontalAlignment", {
  898. get: function () {
  899. return this._horizontalAlignment;
  900. },
  901. set: function (value) {
  902. if (this._horizontalAlignment === value) {
  903. return;
  904. }
  905. this._horizontalAlignment = value;
  906. this._markAsDirty();
  907. },
  908. enumerable: true,
  909. configurable: true
  910. });
  911. Object.defineProperty(Control.prototype, "verticalAlignment", {
  912. get: function () {
  913. return this._verticalAlignment;
  914. },
  915. set: function (value) {
  916. if (this._verticalAlignment === value) {
  917. return;
  918. }
  919. this._verticalAlignment = value;
  920. this._markAsDirty();
  921. },
  922. enumerable: true,
  923. configurable: true
  924. });
  925. Object.defineProperty(Control.prototype, "width", {
  926. get: function () {
  927. return this._width.toString(this._host);
  928. },
  929. set: function (value) {
  930. if (this._width.toString(this._host) === value) {
  931. return;
  932. }
  933. if (this._width.fromString(value)) {
  934. this._markAsDirty();
  935. }
  936. },
  937. enumerable: true,
  938. configurable: true
  939. });
  940. Object.defineProperty(Control.prototype, "widthInPixels", {
  941. get: function () {
  942. return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
  943. },
  944. enumerable: true,
  945. configurable: true
  946. });
  947. Object.defineProperty(Control.prototype, "height", {
  948. get: function () {
  949. return this._height.toString(this._host);
  950. },
  951. set: function (value) {
  952. if (this._height.toString(this._host) === value) {
  953. return;
  954. }
  955. if (this._height.fromString(value)) {
  956. this._markAsDirty();
  957. }
  958. },
  959. enumerable: true,
  960. configurable: true
  961. });
  962. Object.defineProperty(Control.prototype, "heightInPixels", {
  963. get: function () {
  964. return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
  965. },
  966. enumerable: true,
  967. configurable: true
  968. });
  969. Object.defineProperty(Control.prototype, "fontFamily", {
  970. get: function () {
  971. return this._fontFamily;
  972. },
  973. set: function (value) {
  974. if (this._fontFamily === value) {
  975. return;
  976. }
  977. this._fontFamily = value;
  978. this._fontSet = true;
  979. },
  980. enumerable: true,
  981. configurable: true
  982. });
  983. Object.defineProperty(Control.prototype, "fontStyle", {
  984. get: function () {
  985. return this._fontStyle;
  986. },
  987. set: function (value) {
  988. if (this._fontStyle === value) {
  989. return;
  990. }
  991. this._fontStyle = value;
  992. this._fontSet = true;
  993. },
  994. enumerable: true,
  995. configurable: true
  996. });
  997. Object.defineProperty(Control.prototype, "fontSizeInPixels", {
  998. get: function () {
  999. return this._fontSize.getValueInPixel(this._host, 100);
  1000. },
  1001. enumerable: true,
  1002. configurable: true
  1003. });
  1004. Object.defineProperty(Control.prototype, "fontSize", {
  1005. get: function () {
  1006. return this._fontSize.toString(this._host);
  1007. },
  1008. set: function (value) {
  1009. if (this._fontSize.toString(this._host) === value) {
  1010. return;
  1011. }
  1012. if (this._fontSize.fromString(value)) {
  1013. this._markAsDirty();
  1014. this._fontSet = true;
  1015. }
  1016. },
  1017. enumerable: true,
  1018. configurable: true
  1019. });
  1020. Object.defineProperty(Control.prototype, "color", {
  1021. get: function () {
  1022. return this._color;
  1023. },
  1024. set: function (value) {
  1025. if (this._color === value) {
  1026. return;
  1027. }
  1028. this._color = value;
  1029. this._markAsDirty();
  1030. },
  1031. enumerable: true,
  1032. configurable: true
  1033. });
  1034. Object.defineProperty(Control.prototype, "zIndex", {
  1035. get: function () {
  1036. return this._zIndex;
  1037. },
  1038. set: function (value) {
  1039. if (this.zIndex === value) {
  1040. return;
  1041. }
  1042. this._zIndex = value;
  1043. if (this._root) {
  1044. this._root._reOrderControl(this);
  1045. }
  1046. },
  1047. enumerable: true,
  1048. configurable: true
  1049. });
  1050. Object.defineProperty(Control.prototype, "notRenderable", {
  1051. get: function () {
  1052. return this._doNotRender;
  1053. },
  1054. set: function (value) {
  1055. if (this._doNotRender === value) {
  1056. return;
  1057. }
  1058. this._doNotRender = value;
  1059. this._markAsDirty();
  1060. },
  1061. enumerable: true,
  1062. configurable: true
  1063. });
  1064. Object.defineProperty(Control.prototype, "isVisible", {
  1065. get: function () {
  1066. return this._isVisible;
  1067. },
  1068. set: function (value) {
  1069. if (this._isVisible === value) {
  1070. return;
  1071. }
  1072. this._isVisible = value;
  1073. this._markAsDirty();
  1074. },
  1075. enumerable: true,
  1076. configurable: true
  1077. });
  1078. Object.defineProperty(Control.prototype, "isDirty", {
  1079. get: function () {
  1080. return this._isDirty;
  1081. },
  1082. enumerable: true,
  1083. configurable: true
  1084. });
  1085. Object.defineProperty(Control.prototype, "paddingLeft", {
  1086. get: function () {
  1087. return this._paddingLeft.toString(this._host);
  1088. },
  1089. set: function (value) {
  1090. if (this._paddingLeft.fromString(value)) {
  1091. this._markAsDirty();
  1092. }
  1093. },
  1094. enumerable: true,
  1095. configurable: true
  1096. });
  1097. Object.defineProperty(Control.prototype, "paddingLeftInPixels", {
  1098. get: function () {
  1099. return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
  1100. },
  1101. enumerable: true,
  1102. configurable: true
  1103. });
  1104. Object.defineProperty(Control.prototype, "paddingRight", {
  1105. get: function () {
  1106. return this._paddingRight.toString(this._host);
  1107. },
  1108. set: function (value) {
  1109. if (this._paddingRight.fromString(value)) {
  1110. this._markAsDirty();
  1111. }
  1112. },
  1113. enumerable: true,
  1114. configurable: true
  1115. });
  1116. Object.defineProperty(Control.prototype, "paddingRightInPixels", {
  1117. get: function () {
  1118. return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
  1119. },
  1120. enumerable: true,
  1121. configurable: true
  1122. });
  1123. Object.defineProperty(Control.prototype, "paddingTop", {
  1124. get: function () {
  1125. return this._paddingTop.toString(this._host);
  1126. },
  1127. set: function (value) {
  1128. if (this._paddingTop.fromString(value)) {
  1129. this._markAsDirty();
  1130. }
  1131. },
  1132. enumerable: true,
  1133. configurable: true
  1134. });
  1135. Object.defineProperty(Control.prototype, "paddingTopInPixels", {
  1136. get: function () {
  1137. return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
  1138. },
  1139. enumerable: true,
  1140. configurable: true
  1141. });
  1142. Object.defineProperty(Control.prototype, "paddingBottom", {
  1143. get: function () {
  1144. return this._paddingBottom.toString(this._host);
  1145. },
  1146. set: function (value) {
  1147. if (this._paddingBottom.fromString(value)) {
  1148. this._markAsDirty();
  1149. }
  1150. },
  1151. enumerable: true,
  1152. configurable: true
  1153. });
  1154. Object.defineProperty(Control.prototype, "paddingBottomInPixels", {
  1155. get: function () {
  1156. return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
  1157. },
  1158. enumerable: true,
  1159. configurable: true
  1160. });
  1161. Object.defineProperty(Control.prototype, "left", {
  1162. get: function () {
  1163. return this._left.toString(this._host);
  1164. },
  1165. set: function (value) {
  1166. if (this._left.fromString(value)) {
  1167. this._markAsDirty();
  1168. }
  1169. },
  1170. enumerable: true,
  1171. configurable: true
  1172. });
  1173. Object.defineProperty(Control.prototype, "leftInPixels", {
  1174. get: function () {
  1175. return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
  1176. },
  1177. enumerable: true,
  1178. configurable: true
  1179. });
  1180. Object.defineProperty(Control.prototype, "top", {
  1181. get: function () {
  1182. return this._top.toString(this._host);
  1183. },
  1184. set: function (value) {
  1185. if (this._top.fromString(value)) {
  1186. this._markAsDirty();
  1187. }
  1188. },
  1189. enumerable: true,
  1190. configurable: true
  1191. });
  1192. Object.defineProperty(Control.prototype, "topInPixels", {
  1193. get: function () {
  1194. return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
  1195. },
  1196. enumerable: true,
  1197. configurable: true
  1198. });
  1199. Object.defineProperty(Control.prototype, "linkOffsetX", {
  1200. get: function () {
  1201. return this._linkOffsetX.toString(this._host);
  1202. },
  1203. set: function (value) {
  1204. if (this._linkOffsetX.fromString(value)) {
  1205. this._markAsDirty();
  1206. }
  1207. },
  1208. enumerable: true,
  1209. configurable: true
  1210. });
  1211. Object.defineProperty(Control.prototype, "linkOffsetXInPixels", {
  1212. get: function () {
  1213. return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
  1214. },
  1215. enumerable: true,
  1216. configurable: true
  1217. });
  1218. Object.defineProperty(Control.prototype, "linkOffsetY", {
  1219. get: function () {
  1220. return this._linkOffsetY.toString(this._host);
  1221. },
  1222. set: function (value) {
  1223. if (this._linkOffsetY.fromString(value)) {
  1224. this._markAsDirty();
  1225. }
  1226. },
  1227. enumerable: true,
  1228. configurable: true
  1229. });
  1230. Object.defineProperty(Control.prototype, "linkOffsetYInPixels", {
  1231. get: function () {
  1232. return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
  1233. },
  1234. enumerable: true,
  1235. configurable: true
  1236. });
  1237. Object.defineProperty(Control.prototype, "centerX", {
  1238. get: function () {
  1239. return this._currentMeasure.left + this._currentMeasure.width / 2;
  1240. },
  1241. enumerable: true,
  1242. configurable: true
  1243. });
  1244. Object.defineProperty(Control.prototype, "centerY", {
  1245. get: function () {
  1246. return this._currentMeasure.top + this._currentMeasure.height / 2;
  1247. },
  1248. enumerable: true,
  1249. configurable: true
  1250. });
  1251. Control.prototype._getTypeName = function () {
  1252. return "Control";
  1253. };
  1254. Control.prototype.getLocalCoordinates = function (globalCoordinates) {
  1255. var result = BABYLON.Vector2.Zero();
  1256. this.getLocalCoordinatesToRef(globalCoordinates, result);
  1257. return result;
  1258. };
  1259. Control.prototype.getLocalCoordinatesToRef = function (globalCoordinates, result) {
  1260. result.x = globalCoordinates.x - this._currentMeasure.left;
  1261. result.y = globalCoordinates.y - this._currentMeasure.top;
  1262. return this;
  1263. };
  1264. Control.prototype.getParentLocalCoordinates = function (globalCoordinates) {
  1265. var result = BABYLON.Vector2.Zero();
  1266. result.x = globalCoordinates.x - this._cachedParentMeasure.left;
  1267. result.y = globalCoordinates.y - this._cachedParentMeasure.top;
  1268. return result;
  1269. };
  1270. Control.prototype.moveToVector3 = function (position, scene) {
  1271. if (!this._host || this._root !== this._host._rootContainer) {
  1272. BABYLON.Tools.Error("Cannot move a control to a vector3 if the control is not at root level");
  1273. return;
  1274. }
  1275. this.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
  1276. this.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
  1277. var engine = scene.getEngine();
  1278. var globalViewport = this._host._getGlobalViewport(scene);
  1279. var projectedPosition = BABYLON.Vector3.Project(position, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
  1280. this._moveToProjectedPosition(projectedPosition);
  1281. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  1282. this.notRenderable = true;
  1283. return;
  1284. }
  1285. this.notRenderable = false;
  1286. };
  1287. Control.prototype.linkWithMesh = function (mesh) {
  1288. if (!this._host || this._root !== this._host._rootContainer) {
  1289. BABYLON.Tools.Error("Cannot link a control to a mesh if the control is not at root level");
  1290. return;
  1291. }
  1292. var index = this._host._linkedControls.indexOf(this);
  1293. if (index !== -1) {
  1294. this._linkedMesh = mesh;
  1295. if (!mesh) {
  1296. this._host._linkedControls.splice(index, 1);
  1297. }
  1298. return;
  1299. }
  1300. this.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
  1301. this.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
  1302. this._linkedMesh = mesh;
  1303. this._host._linkedControls.push(this);
  1304. };
  1305. Control.prototype._moveToProjectedPosition = function (projectedPosition) {
  1306. this.left = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2) + "px";
  1307. this.top = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2) + "px";
  1308. this._left.ignoreAdaptiveScaling = true;
  1309. this._top.ignoreAdaptiveScaling = true;
  1310. };
  1311. Control.prototype._markMatrixAsDirty = function () {
  1312. this._isMatrixDirty = true;
  1313. this._markAsDirty();
  1314. };
  1315. Control.prototype._markAsDirty = function () {
  1316. this._isDirty = true;
  1317. if (!this._host) {
  1318. return; // Not yet connected
  1319. }
  1320. this._host.markAsDirty();
  1321. };
  1322. Control.prototype._markAllAsDirty = function () {
  1323. this._markAsDirty();
  1324. if (this._font) {
  1325. this._prepareFont();
  1326. }
  1327. };
  1328. Control.prototype._link = function (root, host) {
  1329. this._root = root;
  1330. this._host = host;
  1331. };
  1332. Control.prototype._transform = function (context) {
  1333. if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
  1334. return;
  1335. }
  1336. // postTranslate
  1337. var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
  1338. var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
  1339. context.translate(offsetX, offsetY);
  1340. // rotate
  1341. context.rotate(this._rotation);
  1342. // scale
  1343. context.scale(this._scaleX, this._scaleY);
  1344. // preTranslate
  1345. context.translate(-offsetX, -offsetY);
  1346. // Need to update matrices?
  1347. if (this._isMatrixDirty || this._cachedOffsetX !== offsetX || this._cachedOffsetY !== offsetY) {
  1348. this._cachedOffsetX = offsetX;
  1349. this._cachedOffsetY = offsetY;
  1350. this._isMatrixDirty = false;
  1351. GUI.Matrix2D.ComposeToRef(-offsetX, -offsetY, this._rotation, this._scaleX, this._scaleY, this._root ? this._root._transformMatrix : null, this._transformMatrix);
  1352. this._transformMatrix.invertToRef(this._invertTransformMatrix);
  1353. }
  1354. };
  1355. Control.prototype._applyStates = function (context) {
  1356. if (this._fontSet) {
  1357. this._prepareFont();
  1358. this._fontSet = false;
  1359. }
  1360. if (this._font) {
  1361. context.font = this._font;
  1362. }
  1363. if (this._color) {
  1364. context.fillStyle = this._color;
  1365. }
  1366. if (this._alphaSet) {
  1367. context.globalAlpha = this._alpha;
  1368. }
  1369. };
  1370. Control.prototype._processMeasures = function (parentMeasure, context) {
  1371. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  1372. this._isDirty = false;
  1373. this._currentMeasure.copyFrom(parentMeasure);
  1374. // Let children take some pre-measurement actions
  1375. this._preMeasure(parentMeasure, context);
  1376. this._measure();
  1377. this._computeAlignment(parentMeasure, context);
  1378. // Convert to int values
  1379. this._currentMeasure.left = this._currentMeasure.left | 0;
  1380. this._currentMeasure.top = this._currentMeasure.top | 0;
  1381. this._currentMeasure.width = this._currentMeasure.width | 0;
  1382. this._currentMeasure.height = this._currentMeasure.height | 0;
  1383. // Let children add more features
  1384. this._additionalProcessing(parentMeasure, context);
  1385. this._cachedParentMeasure.copyFrom(parentMeasure);
  1386. if (this.onDirtyObservable.hasObservers()) {
  1387. this.onDirtyObservable.notifyObservers(this);
  1388. }
  1389. }
  1390. if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
  1391. return false;
  1392. }
  1393. if (this._currentMeasure.left + this._currentMeasure.width < parentMeasure.left) {
  1394. return false;
  1395. }
  1396. if (this._currentMeasure.top > parentMeasure.top + parentMeasure.height) {
  1397. return false;
  1398. }
  1399. if (this._currentMeasure.top + this._currentMeasure.height < parentMeasure.top) {
  1400. return false;
  1401. }
  1402. // Transform
  1403. this._transform(context);
  1404. // Clip
  1405. this._clip(context);
  1406. context.clip();
  1407. return true;
  1408. };
  1409. Control.prototype._clip = function (context) {
  1410. context.beginPath();
  1411. context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  1412. };
  1413. Control.prototype._measure = function () {
  1414. // Width / Height
  1415. if (this._width.isPixel) {
  1416. this._currentMeasure.width = this._width.getValue(this._host);
  1417. }
  1418. else {
  1419. this._currentMeasure.width *= this._width.getValue(this._host);
  1420. }
  1421. if (this._height.isPixel) {
  1422. this._currentMeasure.height = this._height.getValue(this._host);
  1423. }
  1424. else {
  1425. this._currentMeasure.height *= this._height.getValue(this._host);
  1426. }
  1427. };
  1428. Control.prototype._computeAlignment = function (parentMeasure, context) {
  1429. var width = this._currentMeasure.width;
  1430. var height = this._currentMeasure.height;
  1431. var parentWidth = parentMeasure.width;
  1432. var parentHeight = parentMeasure.height;
  1433. // Left / top
  1434. var x = 0;
  1435. var y = 0;
  1436. switch (this.horizontalAlignment) {
  1437. case Control.HORIZONTAL_ALIGNMENT_LEFT:
  1438. x = 0;
  1439. break;
  1440. case Control.HORIZONTAL_ALIGNMENT_RIGHT:
  1441. x = parentWidth - width;
  1442. break;
  1443. case Control.HORIZONTAL_ALIGNMENT_CENTER:
  1444. x = (parentWidth - width) / 2;
  1445. break;
  1446. }
  1447. switch (this.verticalAlignment) {
  1448. case Control.VERTICAL_ALIGNMENT_TOP:
  1449. y = 0;
  1450. break;
  1451. case Control.VERTICAL_ALIGNMENT_BOTTOM:
  1452. y = parentHeight - height;
  1453. break;
  1454. case Control.VERTICAL_ALIGNMENT_CENTER:
  1455. y = (parentHeight - height) / 2;
  1456. break;
  1457. }
  1458. if (this._paddingLeft.isPixel) {
  1459. this._currentMeasure.left += this._paddingLeft.getValue(this._host);
  1460. this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
  1461. }
  1462. else {
  1463. this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
  1464. this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
  1465. }
  1466. if (this._paddingRight.isPixel) {
  1467. this._currentMeasure.width -= this._paddingRight.getValue(this._host);
  1468. }
  1469. else {
  1470. this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
  1471. }
  1472. if (this._paddingTop.isPixel) {
  1473. this._currentMeasure.top += this._paddingTop.getValue(this._host);
  1474. this._currentMeasure.height -= this._paddingTop.getValue(this._host);
  1475. }
  1476. else {
  1477. this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
  1478. this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
  1479. }
  1480. if (this._paddingBottom.isPixel) {
  1481. this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
  1482. }
  1483. else {
  1484. this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
  1485. }
  1486. if (this._left.isPixel) {
  1487. this._currentMeasure.left += this._left.getValue(this._host);
  1488. }
  1489. else {
  1490. this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
  1491. }
  1492. if (this._top.isPixel) {
  1493. this._currentMeasure.top += this._top.getValue(this._host);
  1494. }
  1495. else {
  1496. this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
  1497. }
  1498. this._currentMeasure.left += x;
  1499. this._currentMeasure.top += y;
  1500. };
  1501. Control.prototype._preMeasure = function (parentMeasure, context) {
  1502. // Do nothing
  1503. };
  1504. Control.prototype._additionalProcessing = function (parentMeasure, context) {
  1505. // Do nothing
  1506. };
  1507. Control.prototype._draw = function (parentMeasure, context) {
  1508. // Do nothing
  1509. };
  1510. Control.prototype.contains = function (x, y) {
  1511. // Invert transform
  1512. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  1513. x = this._transformedPosition.x;
  1514. y = this._transformedPosition.y;
  1515. // Check
  1516. if (x < this._currentMeasure.left) {
  1517. return false;
  1518. }
  1519. if (x > this._currentMeasure.left + this._currentMeasure.width) {
  1520. return false;
  1521. }
  1522. if (y < this._currentMeasure.top) {
  1523. return false;
  1524. }
  1525. if (y > this._currentMeasure.top + this._currentMeasure.height) {
  1526. return false;
  1527. }
  1528. if (this.isPointerBlocker) {
  1529. this._host._shouldBlockPointer = true;
  1530. }
  1531. return true;
  1532. };
  1533. Control.prototype._processPicking = function (x, y, type, buttonIndex) {
  1534. if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
  1535. return false;
  1536. }
  1537. if (!this.contains(x, y)) {
  1538. return false;
  1539. }
  1540. this._processObservables(type, x, y, buttonIndex);
  1541. return true;
  1542. };
  1543. Control.prototype._onPointerMove = function (coordinates) {
  1544. if (this.onPointerMoveObservable.hasObservers()) {
  1545. this.onPointerMoveObservable.notifyObservers(coordinates);
  1546. }
  1547. };
  1548. Control.prototype._onPointerEnter = function () {
  1549. if (this._enterCount !== 0) {
  1550. return false;
  1551. }
  1552. this._enterCount++;
  1553. if (this.onPointerEnterObservable.hasObservers()) {
  1554. this.onPointerEnterObservable.notifyObservers(this);
  1555. }
  1556. return true;
  1557. };
  1558. Control.prototype._onPointerOut = function () {
  1559. this._enterCount = 0;
  1560. if (this.onPointerOutObservable.hasObservers()) {
  1561. this.onPointerOutObservable.notifyObservers(this);
  1562. }
  1563. };
  1564. Control.prototype._onPointerDown = function (coordinates, buttonIndex) {
  1565. if (this._downCount !== 0) {
  1566. return false;
  1567. }
  1568. this._downCount++;
  1569. if (this.onPointerDownObservable.hasObservers()) {
  1570. this.onPointerDownObservable.notifyObservers(new GUI.Vector2WithInfo(coordinates, buttonIndex));
  1571. }
  1572. return true;
  1573. };
  1574. Control.prototype._onPointerUp = function (coordinates, buttonIndex) {
  1575. this._downCount = 0;
  1576. if (this.onPointerUpObservable.hasObservers()) {
  1577. this.onPointerUpObservable.notifyObservers(new GUI.Vector2WithInfo(coordinates, buttonIndex));
  1578. }
  1579. };
  1580. Control.prototype.forcePointerUp = function () {
  1581. this._onPointerUp(BABYLON.Vector2.Zero(), 0);
  1582. };
  1583. Control.prototype._processObservables = function (type, x, y, buttonIndex) {
  1584. this._dummyVector2.copyFromFloats(x, y);
  1585. if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
  1586. this._onPointerMove(this._dummyVector2);
  1587. var previousControlOver = this._host._lastControlOver;
  1588. if (previousControlOver && previousControlOver !== this) {
  1589. previousControlOver._onPointerOut();
  1590. }
  1591. if (previousControlOver !== this) {
  1592. this._onPointerEnter();
  1593. }
  1594. this._host._lastControlOver = this;
  1595. return true;
  1596. }
  1597. if (type === BABYLON.PointerEventTypes.POINTERDOWN) {
  1598. this._onPointerDown(this._dummyVector2, buttonIndex);
  1599. this._host._lastControlDown = this;
  1600. this._host._lastPickedControl = this;
  1601. return true;
  1602. }
  1603. if (type === BABYLON.PointerEventTypes.POINTERUP) {
  1604. if (this._host._lastControlDown) {
  1605. this._host._lastControlDown._onPointerUp(this._dummyVector2, buttonIndex);
  1606. }
  1607. this._host._lastControlDown = null;
  1608. return true;
  1609. }
  1610. return false;
  1611. };
  1612. Control.prototype._prepareFont = function () {
  1613. if (!this._font && !this._fontSet) {
  1614. return;
  1615. }
  1616. this._font = this._fontStyle + " " + this._fontSize.getValue(this._host) + "px " + this._fontFamily;
  1617. this._fontOffset = Control._GetFontOffset(this._font);
  1618. };
  1619. Control.prototype.dispose = function () {
  1620. this.onDirtyObservable.clear();
  1621. this.onAfterDrawObservable.clear();
  1622. this.onPointerDownObservable.clear();
  1623. this.onPointerEnterObservable.clear();
  1624. this.onPointerMoveObservable.clear();
  1625. this.onPointerOutObservable.clear();
  1626. this.onPointerUpObservable.clear();
  1627. if (this._root) {
  1628. this._root.removeControl(this);
  1629. this._root = null;
  1630. }
  1631. var index = this._host._linkedControls.indexOf(this);
  1632. if (index > -1) {
  1633. this.linkWithMesh(null);
  1634. }
  1635. };
  1636. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
  1637. get: function () {
  1638. return Control._HORIZONTAL_ALIGNMENT_LEFT;
  1639. },
  1640. enumerable: true,
  1641. configurable: true
  1642. });
  1643. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
  1644. get: function () {
  1645. return Control._HORIZONTAL_ALIGNMENT_RIGHT;
  1646. },
  1647. enumerable: true,
  1648. configurable: true
  1649. });
  1650. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
  1651. get: function () {
  1652. return Control._HORIZONTAL_ALIGNMENT_CENTER;
  1653. },
  1654. enumerable: true,
  1655. configurable: true
  1656. });
  1657. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
  1658. get: function () {
  1659. return Control._VERTICAL_ALIGNMENT_TOP;
  1660. },
  1661. enumerable: true,
  1662. configurable: true
  1663. });
  1664. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
  1665. get: function () {
  1666. return Control._VERTICAL_ALIGNMENT_BOTTOM;
  1667. },
  1668. enumerable: true,
  1669. configurable: true
  1670. });
  1671. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
  1672. get: function () {
  1673. return Control._VERTICAL_ALIGNMENT_CENTER;
  1674. },
  1675. enumerable: true,
  1676. configurable: true
  1677. });
  1678. Control._GetFontOffset = function (font) {
  1679. if (Control._FontHeightSizes[font]) {
  1680. return Control._FontHeightSizes[font];
  1681. }
  1682. var text = document.createElement("span");
  1683. text.innerHTML = "Hg";
  1684. text.style.font = font;
  1685. var block = document.createElement("div");
  1686. block.style.display = "inline-block";
  1687. block.style.width = "1px";
  1688. block.style.height = "0px";
  1689. block.style.verticalAlign = "bottom";
  1690. var div = document.createElement("div");
  1691. div.appendChild(text);
  1692. div.appendChild(block);
  1693. document.body.appendChild(div);
  1694. var fontAscent = 0;
  1695. var fontHeight = 0;
  1696. try {
  1697. fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  1698. block.style.verticalAlign = "baseline";
  1699. fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  1700. }
  1701. finally {
  1702. document.body.removeChild(div);
  1703. }
  1704. var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
  1705. Control._FontHeightSizes[font] = result;
  1706. return result;
  1707. };
  1708. ;
  1709. Control.AddHeader = function (control, text, size, options) {
  1710. var panel = new BABYLON.GUI.StackPanel("panel");
  1711. var isHorizontal = options ? options.isHorizontal : true;
  1712. var controlFirst = options ? options.controlFirst : true;
  1713. panel.isVertical = !isHorizontal;
  1714. var header = new BABYLON.GUI.TextBlock("header");
  1715. header.text = text;
  1716. header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  1717. if (isHorizontal) {
  1718. header.width = size;
  1719. }
  1720. else {
  1721. header.height = size;
  1722. }
  1723. if (controlFirst) {
  1724. panel.addControl(control);
  1725. panel.addControl(header);
  1726. header.paddingLeft = "5px";
  1727. }
  1728. else {
  1729. panel.addControl(header);
  1730. panel.addControl(control);
  1731. header.paddingRight = "5px";
  1732. }
  1733. return panel;
  1734. };
  1735. Control.drawEllipse = function (x, y, width, height, context) {
  1736. context.translate(x, y);
  1737. context.scale(width, height);
  1738. context.beginPath();
  1739. context.arc(0, 0, 1, 0, 2 * Math.PI);
  1740. context.closePath();
  1741. context.scale(1 / width, 1 / height);
  1742. context.translate(-x, -y);
  1743. };
  1744. // Statics
  1745. Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
  1746. Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
  1747. Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
  1748. Control._VERTICAL_ALIGNMENT_TOP = 0;
  1749. Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
  1750. Control._VERTICAL_ALIGNMENT_CENTER = 2;
  1751. Control._FontHeightSizes = {};
  1752. return Control;
  1753. }());
  1754. GUI.Control = Control;
  1755. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  1756. })(BABYLON || (BABYLON = {}));
  1757. //# sourceMappingURL=control.js.map
  1758. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  1759. var BABYLON;
  1760. (function (BABYLON) {
  1761. var GUI;
  1762. (function (GUI) {
  1763. var Container = (function (_super) {
  1764. __extends(Container, _super);
  1765. function Container(name) {
  1766. var _this = _super.call(this, name) || this;
  1767. _this.name = name;
  1768. _this._children = new Array();
  1769. _this._measureForChildren = GUI.Measure.Empty();
  1770. return _this;
  1771. }
  1772. Object.defineProperty(Container.prototype, "background", {
  1773. get: function () {
  1774. return this._background;
  1775. },
  1776. set: function (value) {
  1777. if (this._background === value) {
  1778. return;
  1779. }
  1780. this._background = value;
  1781. this._markAsDirty();
  1782. },
  1783. enumerable: true,
  1784. configurable: true
  1785. });
  1786. Object.defineProperty(Container.prototype, "children", {
  1787. get: function () {
  1788. return this._children;
  1789. },
  1790. enumerable: true,
  1791. configurable: true
  1792. });
  1793. Container.prototype._getTypeName = function () {
  1794. return "Container";
  1795. };
  1796. Container.prototype.getChildByName = function (name) {
  1797. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  1798. var child = _a[_i];
  1799. if (child.name === name) {
  1800. return child;
  1801. }
  1802. }
  1803. return null;
  1804. };
  1805. Container.prototype.getChildByType = function (name, type) {
  1806. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  1807. var child = _a[_i];
  1808. if (child.typeName === type) {
  1809. return child;
  1810. }
  1811. }
  1812. return null;
  1813. };
  1814. Container.prototype.containsControl = function (control) {
  1815. return this._children.indexOf(control) !== -1;
  1816. };
  1817. Container.prototype.addControl = function (control) {
  1818. var index = this._children.indexOf(control);
  1819. if (index !== -1) {
  1820. return this;
  1821. }
  1822. control._link(this, this._host);
  1823. control._markAllAsDirty();
  1824. this._reOrderControl(control);
  1825. this._markAsDirty();
  1826. return this;
  1827. };
  1828. Container.prototype.removeControl = function (control) {
  1829. var index = this._children.indexOf(control);
  1830. if (index !== -1) {
  1831. this._children.splice(index, 1);
  1832. }
  1833. this._markAsDirty();
  1834. return this;
  1835. };
  1836. Container.prototype._reOrderControl = function (control) {
  1837. this.removeControl(control);
  1838. for (var index = 0; index < this._children.length; index++) {
  1839. if (this._children[index].zIndex > control.zIndex) {
  1840. this._children.splice(index, 0, control);
  1841. return;
  1842. }
  1843. }
  1844. this._children.push(control);
  1845. this._markAsDirty();
  1846. };
  1847. Container.prototype._markMatrixAsDirty = function () {
  1848. _super.prototype._markMatrixAsDirty.call(this);
  1849. for (var index = 0; index < this._children.length; index++) {
  1850. this._children[index]._markMatrixAsDirty();
  1851. }
  1852. };
  1853. Container.prototype._markAllAsDirty = function () {
  1854. _super.prototype._markAllAsDirty.call(this);
  1855. for (var index = 0; index < this._children.length; index++) {
  1856. this._children[index]._markAllAsDirty();
  1857. }
  1858. };
  1859. Container.prototype._localDraw = function (context) {
  1860. if (this._background) {
  1861. context.fillStyle = this._background;
  1862. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  1863. }
  1864. };
  1865. Container.prototype._link = function (root, host) {
  1866. _super.prototype._link.call(this, root, host);
  1867. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  1868. var child = _a[_i];
  1869. child._link(root, host);
  1870. }
  1871. };
  1872. Container.prototype._draw = function (parentMeasure, context) {
  1873. if (!this.isVisible || this.notRenderable) {
  1874. return;
  1875. }
  1876. context.save();
  1877. this._applyStates(context);
  1878. if (this._processMeasures(parentMeasure, context)) {
  1879. this._localDraw(context);
  1880. this._clipForChildren(context);
  1881. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  1882. var child = _a[_i];
  1883. if (child.isVisible && !child.notRenderable) {
  1884. child._draw(this._measureForChildren, context);
  1885. if (child.onAfterDrawObservable.hasObservers()) {
  1886. child.onAfterDrawObservable.notifyObservers(child);
  1887. }
  1888. }
  1889. }
  1890. }
  1891. context.restore();
  1892. if (this.onAfterDrawObservable.hasObservers()) {
  1893. this.onAfterDrawObservable.notifyObservers(this);
  1894. }
  1895. };
  1896. Container.prototype._processPicking = function (x, y, type, buttonIndex) {
  1897. if (!this.isHitTestVisible || !this.isVisible || this.notRenderable) {
  1898. return false;
  1899. }
  1900. if (!_super.prototype.contains.call(this, x, y)) {
  1901. return false;
  1902. }
  1903. // Checking backwards to pick closest first
  1904. for (var index = this._children.length - 1; index >= 0; index--) {
  1905. var child = this._children[index];
  1906. if (child._processPicking(x, y, type, buttonIndex)) {
  1907. return true;
  1908. }
  1909. }
  1910. return this._processObservables(type, x, y, buttonIndex);
  1911. };
  1912. Container.prototype._clipForChildren = function (context) {
  1913. // DO nothing
  1914. };
  1915. Container.prototype._additionalProcessing = function (parentMeasure, context) {
  1916. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  1917. this._measureForChildren.copyFrom(this._currentMeasure);
  1918. };
  1919. Container.prototype.dispose = function () {
  1920. _super.prototype.dispose.call(this);
  1921. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  1922. var control = _a[_i];
  1923. control.dispose();
  1924. }
  1925. };
  1926. return Container;
  1927. }(GUI.Control));
  1928. GUI.Container = Container;
  1929. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  1930. })(BABYLON || (BABYLON = {}));
  1931. //# sourceMappingURL=container.js.map
  1932. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  1933. var BABYLON;
  1934. (function (BABYLON) {
  1935. var GUI;
  1936. (function (GUI) {
  1937. var StackPanel = (function (_super) {
  1938. __extends(StackPanel, _super);
  1939. function StackPanel(name) {
  1940. var _this = _super.call(this, name) || this;
  1941. _this.name = name;
  1942. _this._isVertical = true;
  1943. _this._manualWidth = false;
  1944. _this._manualHeight = false;
  1945. _this._doNotTrackManualChanges = false;
  1946. _this._tempMeasureStore = GUI.Measure.Empty();
  1947. return _this;
  1948. }
  1949. Object.defineProperty(StackPanel.prototype, "isVertical", {
  1950. get: function () {
  1951. return this._isVertical;
  1952. },
  1953. set: function (value) {
  1954. if (this._isVertical === value) {
  1955. return;
  1956. }
  1957. this._isVertical = value;
  1958. this._markAsDirty();
  1959. },
  1960. enumerable: true,
  1961. configurable: true
  1962. });
  1963. Object.defineProperty(StackPanel.prototype, "width", {
  1964. get: function () {
  1965. return this._width.toString(this._host);
  1966. },
  1967. set: function (value) {
  1968. if (!this._doNotTrackManualChanges) {
  1969. this._manualWidth = true;
  1970. }
  1971. if (this._width.toString(this._host) === value) {
  1972. return;
  1973. }
  1974. if (this._width.fromString(value)) {
  1975. this._markAsDirty();
  1976. }
  1977. },
  1978. enumerable: true,
  1979. configurable: true
  1980. });
  1981. Object.defineProperty(StackPanel.prototype, "height", {
  1982. get: function () {
  1983. return this._height.toString(this._host);
  1984. },
  1985. set: function (value) {
  1986. if (!this._doNotTrackManualChanges) {
  1987. this._manualHeight = true;
  1988. }
  1989. if (this._height.toString(this._host) === value) {
  1990. return;
  1991. }
  1992. if (this._height.fromString(value)) {
  1993. this._markAsDirty();
  1994. }
  1995. },
  1996. enumerable: true,
  1997. configurable: true
  1998. });
  1999. StackPanel.prototype._getTypeName = function () {
  2000. return "StackPanel";
  2001. };
  2002. StackPanel.prototype._preMeasure = function (parentMeasure, context) {
  2003. var stackWidth = 0;
  2004. var stackHeight = 0;
  2005. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  2006. var child = _a[_i];
  2007. this._tempMeasureStore.copyFrom(child._currentMeasure);
  2008. child._currentMeasure.copyFrom(parentMeasure);
  2009. child._measure();
  2010. if (this._isVertical) {
  2011. child.top = stackHeight + "px";
  2012. if (!child._top.ignoreAdaptiveScaling) {
  2013. child._markAsDirty();
  2014. }
  2015. child._top.ignoreAdaptiveScaling = true;
  2016. stackHeight += child._currentMeasure.height;
  2017. if (child._currentMeasure.width > stackWidth) {
  2018. stackWidth = child._currentMeasure.width;
  2019. }
  2020. child.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
  2021. }
  2022. else {
  2023. child.left = stackWidth + "px";
  2024. if (!child._left.ignoreAdaptiveScaling) {
  2025. child._markAsDirty();
  2026. }
  2027. child._left.ignoreAdaptiveScaling = true;
  2028. stackWidth += child._currentMeasure.width;
  2029. if (child._currentMeasure.height > stackHeight) {
  2030. stackHeight = child._currentMeasure.height;
  2031. }
  2032. child.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
  2033. }
  2034. child._currentMeasure.copyFrom(this._tempMeasureStore);
  2035. }
  2036. this._doNotTrackManualChanges = true;
  2037. // Let stack panel width and height default to stackHeight and stackWidth if dimensions are not specified.
  2038. // User can now define their own height and width for stack panel.
  2039. var panelWidthChanged = false;
  2040. var panelHeightChanged = false;
  2041. var previousHeight = this.height;
  2042. var previousWidth = this.width;
  2043. if (!this._manualHeight) {
  2044. // do not specify height if strictly defined by user
  2045. this.height = stackHeight + "px";
  2046. }
  2047. if (!this._manualWidth) {
  2048. // do not specify width if strictly defined by user
  2049. this.width = stackWidth + "px";
  2050. }
  2051. panelWidthChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
  2052. panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
  2053. if (panelHeightChanged) {
  2054. this._height.ignoreAdaptiveScaling = true;
  2055. }
  2056. if (panelWidthChanged) {
  2057. this._width.ignoreAdaptiveScaling = true;
  2058. }
  2059. this._doNotTrackManualChanges = false;
  2060. if (panelWidthChanged || panelHeightChanged) {
  2061. this._markAllAsDirty();
  2062. }
  2063. _super.prototype._preMeasure.call(this, parentMeasure, context);
  2064. };
  2065. return StackPanel;
  2066. }(GUI.Container));
  2067. GUI.StackPanel = StackPanel;
  2068. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  2069. })(BABYLON || (BABYLON = {}));
  2070. //# sourceMappingURL=stackPanel.js.map
  2071. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2072. var BABYLON;
  2073. (function (BABYLON) {
  2074. var GUI;
  2075. (function (GUI) {
  2076. var Rectangle = (function (_super) {
  2077. __extends(Rectangle, _super);
  2078. function Rectangle(name) {
  2079. var _this = _super.call(this, name) || this;
  2080. _this.name = name;
  2081. _this._thickness = 1;
  2082. _this._cornerRadius = 0;
  2083. return _this;
  2084. }
  2085. Object.defineProperty(Rectangle.prototype, "thickness", {
  2086. get: function () {
  2087. return this._thickness;
  2088. },
  2089. set: function (value) {
  2090. if (this._thickness === value) {
  2091. return;
  2092. }
  2093. this._thickness = value;
  2094. this._markAsDirty();
  2095. },
  2096. enumerable: true,
  2097. configurable: true
  2098. });
  2099. Object.defineProperty(Rectangle.prototype, "cornerRadius", {
  2100. get: function () {
  2101. return this._cornerRadius;
  2102. },
  2103. set: function (value) {
  2104. if (value < 0) {
  2105. value = 0;
  2106. }
  2107. if (this._cornerRadius === value) {
  2108. return;
  2109. }
  2110. this._cornerRadius = value;
  2111. this._markAsDirty();
  2112. },
  2113. enumerable: true,
  2114. configurable: true
  2115. });
  2116. Rectangle.prototype._getTypeName = function () {
  2117. return "Rectangle";
  2118. };
  2119. Rectangle.prototype._localDraw = function (context) {
  2120. context.save();
  2121. if (this._background) {
  2122. context.fillStyle = this._background;
  2123. if (this._cornerRadius) {
  2124. this._drawRoundedRect(context, this._thickness / 2);
  2125. context.fill();
  2126. }
  2127. else {
  2128. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  2129. }
  2130. }
  2131. if (this._thickness) {
  2132. if (this.color) {
  2133. context.strokeStyle = this.color;
  2134. }
  2135. context.lineWidth = this._thickness;
  2136. if (this._cornerRadius) {
  2137. this._drawRoundedRect(context, this._thickness / 2);
  2138. context.stroke();
  2139. }
  2140. else {
  2141. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
  2142. }
  2143. }
  2144. context.restore();
  2145. };
  2146. Rectangle.prototype._additionalProcessing = function (parentMeasure, context) {
  2147. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  2148. this._measureForChildren.width -= 2 * this._thickness;
  2149. this._measureForChildren.height -= 2 * this._thickness;
  2150. this._measureForChildren.left += this._thickness;
  2151. this._measureForChildren.top += this._thickness;
  2152. };
  2153. Rectangle.prototype._drawRoundedRect = function (context, offset) {
  2154. if (offset === void 0) { offset = 0; }
  2155. var x = this._currentMeasure.left + offset;
  2156. var y = this._currentMeasure.top + offset;
  2157. var width = this._currentMeasure.width - offset * 2;
  2158. var height = this._currentMeasure.height - offset * 2;
  2159. var radius = Math.min(height / 2 - 2, Math.min(width / 2 - 2, this._cornerRadius));
  2160. context.beginPath();
  2161. context.moveTo(x + radius, y);
  2162. context.lineTo(x + width - radius, y);
  2163. context.quadraticCurveTo(x + width, y, x + width, y + radius);
  2164. context.lineTo(x + width, y + height - radius);
  2165. context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  2166. context.lineTo(x + radius, y + height);
  2167. context.quadraticCurveTo(x, y + height, x, y + height - radius);
  2168. context.lineTo(x, y + radius);
  2169. context.quadraticCurveTo(x, y, x + radius, y);
  2170. context.closePath();
  2171. };
  2172. Rectangle.prototype._clipForChildren = function (context) {
  2173. if (this._cornerRadius) {
  2174. this._drawRoundedRect(context, this._thickness);
  2175. context.clip();
  2176. }
  2177. };
  2178. return Rectangle;
  2179. }(GUI.Container));
  2180. GUI.Rectangle = Rectangle;
  2181. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  2182. })(BABYLON || (BABYLON = {}));
  2183. //# sourceMappingURL=rectangle.js.map
  2184. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2185. var BABYLON;
  2186. (function (BABYLON) {
  2187. var GUI;
  2188. (function (GUI) {
  2189. var Ellipse = (function (_super) {
  2190. __extends(Ellipse, _super);
  2191. function Ellipse(name) {
  2192. var _this = _super.call(this, name) || this;
  2193. _this.name = name;
  2194. _this._thickness = 1;
  2195. return _this;
  2196. }
  2197. Object.defineProperty(Ellipse.prototype, "thickness", {
  2198. get: function () {
  2199. return this._thickness;
  2200. },
  2201. set: function (value) {
  2202. if (this._thickness === value) {
  2203. return;
  2204. }
  2205. this._thickness = value;
  2206. this._markAsDirty();
  2207. },
  2208. enumerable: true,
  2209. configurable: true
  2210. });
  2211. Ellipse.prototype._getTypeName = function () {
  2212. return "Ellipse";
  2213. };
  2214. Ellipse.prototype._localDraw = function (context) {
  2215. context.save();
  2216. GUI.Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);
  2217. if (this._background) {
  2218. context.fillStyle = this._background;
  2219. context.fill();
  2220. }
  2221. if (this._thickness) {
  2222. if (this.color) {
  2223. context.strokeStyle = this.color;
  2224. }
  2225. context.lineWidth = this._thickness;
  2226. context.stroke();
  2227. }
  2228. context.restore();
  2229. };
  2230. Ellipse.prototype._additionalProcessing = function (parentMeasure, context) {
  2231. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  2232. this._measureForChildren.width -= 2 * this._thickness;
  2233. this._measureForChildren.height -= 2 * this._thickness;
  2234. this._measureForChildren.left += this._thickness;
  2235. this._measureForChildren.top += this._thickness;
  2236. };
  2237. Ellipse.prototype._clipForChildren = function (context) {
  2238. GUI.Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2, this._currentMeasure.height / 2, context);
  2239. context.clip();
  2240. };
  2241. return Ellipse;
  2242. }(GUI.Container));
  2243. GUI.Ellipse = Ellipse;
  2244. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  2245. })(BABYLON || (BABYLON = {}));
  2246. //# sourceMappingURL=ellipse.js.map
  2247. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2248. var BABYLON;
  2249. (function (BABYLON) {
  2250. var GUI;
  2251. (function (GUI) {
  2252. var Line = (function (_super) {
  2253. __extends(Line, _super);
  2254. function Line(name) {
  2255. var _this = _super.call(this, name) || this;
  2256. _this.name = name;
  2257. _this._lineWidth = 1;
  2258. _this._x1 = new GUI.ValueAndUnit(0);
  2259. _this._y1 = new GUI.ValueAndUnit(0);
  2260. _this._x2 = new GUI.ValueAndUnit(0);
  2261. _this._y2 = new GUI.ValueAndUnit(0);
  2262. _this._dash = new Array();
  2263. _this.isHitTestVisible = false;
  2264. _this._horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
  2265. _this._verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
  2266. return _this;
  2267. }
  2268. Object.defineProperty(Line.prototype, "dash", {
  2269. get: function () {
  2270. return this._dash;
  2271. },
  2272. set: function (value) {
  2273. if (this._dash === value) {
  2274. return;
  2275. }
  2276. this._dash = value;
  2277. this._markAsDirty();
  2278. },
  2279. enumerable: true,
  2280. configurable: true
  2281. });
  2282. Object.defineProperty(Line.prototype, "connectedControl", {
  2283. get: function () {
  2284. return this._connectedControl;
  2285. },
  2286. set: function (value) {
  2287. var _this = this;
  2288. if (this._connectedControl === value) {
  2289. return;
  2290. }
  2291. if (this._connectedControlDirtyObserver && this._connectedControl) {
  2292. this._connectedControl.onDirtyObservable.remove(this._connectedControlDirtyObserver);
  2293. this._connectedControlDirtyObserver = null;
  2294. }
  2295. if (value) {
  2296. this._connectedControlDirtyObserver = value.onDirtyObservable.add(function () { return _this._markAsDirty(); });
  2297. }
  2298. this._connectedControl = value;
  2299. this._markAsDirty();
  2300. },
  2301. enumerable: true,
  2302. configurable: true
  2303. });
  2304. Object.defineProperty(Line.prototype, "x1", {
  2305. get: function () {
  2306. return this._x1.toString(this._host);
  2307. },
  2308. set: function (value) {
  2309. if (this._x1.toString(this._host) === value) {
  2310. return;
  2311. }
  2312. if (this._x1.fromString(value)) {
  2313. this._markAsDirty();
  2314. }
  2315. },
  2316. enumerable: true,
  2317. configurable: true
  2318. });
  2319. Object.defineProperty(Line.prototype, "y1", {
  2320. get: function () {
  2321. return this._y1.toString(this._host);
  2322. },
  2323. set: function (value) {
  2324. if (this._y1.toString(this._host) === value) {
  2325. return;
  2326. }
  2327. if (this._y1.fromString(value)) {
  2328. this._markAsDirty();
  2329. }
  2330. },
  2331. enumerable: true,
  2332. configurable: true
  2333. });
  2334. Object.defineProperty(Line.prototype, "x2", {
  2335. get: function () {
  2336. return this._x2.toString(this._host);
  2337. },
  2338. set: function (value) {
  2339. if (this._x2.toString(this._host) === value) {
  2340. return;
  2341. }
  2342. if (this._x2.fromString(value)) {
  2343. this._markAsDirty();
  2344. }
  2345. },
  2346. enumerable: true,
  2347. configurable: true
  2348. });
  2349. Object.defineProperty(Line.prototype, "y2", {
  2350. get: function () {
  2351. return this._y2.toString(this._host);
  2352. },
  2353. set: function (value) {
  2354. if (this._y2.toString(this._host) === value) {
  2355. return;
  2356. }
  2357. if (this._y2.fromString(value)) {
  2358. this._markAsDirty();
  2359. }
  2360. },
  2361. enumerable: true,
  2362. configurable: true
  2363. });
  2364. Object.defineProperty(Line.prototype, "lineWidth", {
  2365. get: function () {
  2366. return this._lineWidth;
  2367. },
  2368. set: function (value) {
  2369. if (this._lineWidth === value) {
  2370. return;
  2371. }
  2372. this._lineWidth = value;
  2373. this._markAsDirty();
  2374. },
  2375. enumerable: true,
  2376. configurable: true
  2377. });
  2378. Object.defineProperty(Line.prototype, "horizontalAlignment", {
  2379. set: function (value) {
  2380. return;
  2381. },
  2382. enumerable: true,
  2383. configurable: true
  2384. });
  2385. Object.defineProperty(Line.prototype, "verticalAlignment", {
  2386. set: function (value) {
  2387. return;
  2388. },
  2389. enumerable: true,
  2390. configurable: true
  2391. });
  2392. Object.defineProperty(Line.prototype, "_effectiveX2", {
  2393. get: function () {
  2394. return (this._connectedControl ? this._connectedControl.centerX : 0) + this._x2.getValue(this._host);
  2395. },
  2396. enumerable: true,
  2397. configurable: true
  2398. });
  2399. Object.defineProperty(Line.prototype, "_effectiveY2", {
  2400. get: function () {
  2401. return (this._connectedControl ? this._connectedControl.centerY : 0) + this._y2.getValue(this._host);
  2402. },
  2403. enumerable: true,
  2404. configurable: true
  2405. });
  2406. Line.prototype._getTypeName = function () {
  2407. return "Line";
  2408. };
  2409. Line.prototype._draw = function (parentMeasure, context) {
  2410. context.save();
  2411. this._applyStates(context);
  2412. if (this._processMeasures(parentMeasure, context)) {
  2413. context.strokeStyle = this.color;
  2414. context.lineWidth = this._lineWidth;
  2415. context.setLineDash(this._dash);
  2416. context.beginPath();
  2417. context.moveTo(this._x1.getValue(this._host), this._y1.getValue(this._host));
  2418. context.lineTo(this._effectiveX2, this._effectiveY2);
  2419. context.stroke();
  2420. }
  2421. context.restore();
  2422. };
  2423. Line.prototype._measure = function () {
  2424. // Width / Height
  2425. this._currentMeasure.width = Math.abs(this._x1.getValue(this._host) - this._effectiveX2) + this._lineWidth;
  2426. this._currentMeasure.height = Math.abs(this._y1.getValue(this._host) - this._effectiveY2) + this._lineWidth;
  2427. };
  2428. Line.prototype._computeAlignment = function (parentMeasure, context) {
  2429. this._currentMeasure.left = Math.min(this._x1.getValue(this._host), this._effectiveX2) - this._lineWidth / 2;
  2430. this._currentMeasure.top = Math.min(this._y1.getValue(this._host), this._effectiveY2) - this._lineWidth / 2;
  2431. };
  2432. Line.prototype._moveToProjectedPosition = function (projectedPosition) {
  2433. this.x1 = (projectedPosition.x + this._linkOffsetX.getValue(this._host)) + "px";
  2434. this.y1 = (projectedPosition.y + this._linkOffsetY.getValue(this._host)) + "px";
  2435. this._x1.ignoreAdaptiveScaling = true;
  2436. this._y1.ignoreAdaptiveScaling = true;
  2437. };
  2438. return Line;
  2439. }(GUI.Control));
  2440. GUI.Line = Line;
  2441. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  2442. })(BABYLON || (BABYLON = {}));
  2443. //# sourceMappingURL=line.js.map
  2444. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2445. var BABYLON;
  2446. (function (BABYLON) {
  2447. var GUI;
  2448. (function (GUI) {
  2449. var Slider = (function (_super) {
  2450. __extends(Slider, _super);
  2451. function Slider(name) {
  2452. var _this = _super.call(this, name) || this;
  2453. _this.name = name;
  2454. _this._thumbWidth = new GUI.ValueAndUnit(30, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
  2455. _this._minimum = 0;
  2456. _this._maximum = 100;
  2457. _this._value = 50;
  2458. _this._background = "black";
  2459. _this._borderColor = "white";
  2460. _this._barOffset = new GUI.ValueAndUnit(5, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
  2461. _this.onValueChangedObservable = new BABYLON.Observable();
  2462. // Events
  2463. _this._pointerIsDown = false;
  2464. _this.isPointerBlocker = true;
  2465. return _this;
  2466. }
  2467. Object.defineProperty(Slider.prototype, "borderColor", {
  2468. get: function () {
  2469. return this._borderColor;
  2470. },
  2471. set: function (value) {
  2472. if (this._borderColor === value) {
  2473. return;
  2474. }
  2475. this._borderColor = value;
  2476. this._markAsDirty();
  2477. },
  2478. enumerable: true,
  2479. configurable: true
  2480. });
  2481. Object.defineProperty(Slider.prototype, "background", {
  2482. get: function () {
  2483. return this._background;
  2484. },
  2485. set: function (value) {
  2486. if (this._background === value) {
  2487. return;
  2488. }
  2489. this._background = value;
  2490. this._markAsDirty();
  2491. },
  2492. enumerable: true,
  2493. configurable: true
  2494. });
  2495. Object.defineProperty(Slider.prototype, "barOffset", {
  2496. get: function () {
  2497. return this._barOffset.toString(this._host);
  2498. },
  2499. set: function (value) {
  2500. if (this._barOffset.toString(this._host) === value) {
  2501. return;
  2502. }
  2503. if (this._barOffset.fromString(value)) {
  2504. this._markAsDirty();
  2505. }
  2506. },
  2507. enumerable: true,
  2508. configurable: true
  2509. });
  2510. Object.defineProperty(Slider.prototype, "barOffsetInPixels", {
  2511. get: function () {
  2512. return this._barOffset.getValueInPixel(this._host, this._cachedParentMeasure.width);
  2513. },
  2514. enumerable: true,
  2515. configurable: true
  2516. });
  2517. Object.defineProperty(Slider.prototype, "thumbWidth", {
  2518. get: function () {
  2519. return this._thumbWidth.toString(this._host);
  2520. },
  2521. set: function (value) {
  2522. if (this._thumbWidth.toString(this._host) === value) {
  2523. return;
  2524. }
  2525. if (this._thumbWidth.fromString(value)) {
  2526. this._markAsDirty();
  2527. }
  2528. },
  2529. enumerable: true,
  2530. configurable: true
  2531. });
  2532. Object.defineProperty(Slider.prototype, "thumbWidthInPixels", {
  2533. get: function () {
  2534. return this._thumbWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
  2535. },
  2536. enumerable: true,
  2537. configurable: true
  2538. });
  2539. Object.defineProperty(Slider.prototype, "minimum", {
  2540. get: function () {
  2541. return this._minimum;
  2542. },
  2543. set: function (value) {
  2544. if (this._minimum === value) {
  2545. return;
  2546. }
  2547. this._minimum = value;
  2548. this._markAsDirty();
  2549. this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
  2550. },
  2551. enumerable: true,
  2552. configurable: true
  2553. });
  2554. Object.defineProperty(Slider.prototype, "maximum", {
  2555. get: function () {
  2556. return this._maximum;
  2557. },
  2558. set: function (value) {
  2559. if (this._maximum === value) {
  2560. return;
  2561. }
  2562. this._maximum = value;
  2563. this._markAsDirty();
  2564. this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
  2565. },
  2566. enumerable: true,
  2567. configurable: true
  2568. });
  2569. Object.defineProperty(Slider.prototype, "value", {
  2570. get: function () {
  2571. return this._value;
  2572. },
  2573. set: function (value) {
  2574. value = Math.max(Math.min(value, this._maximum), this._minimum);
  2575. if (this._value === value) {
  2576. return;
  2577. }
  2578. this._value = value;
  2579. this._markAsDirty();
  2580. this.onValueChangedObservable.notifyObservers(this._value);
  2581. },
  2582. enumerable: true,
  2583. configurable: true
  2584. });
  2585. Slider.prototype._getTypeName = function () {
  2586. return "Slider";
  2587. };
  2588. Slider.prototype._draw = function (parentMeasure, context) {
  2589. context.save();
  2590. this._applyStates(context);
  2591. if (this._processMeasures(parentMeasure, context)) {
  2592. // Main bar
  2593. var effectiveThumbWidth;
  2594. var effectiveBarOffset;
  2595. if (this._thumbWidth.isPixel) {
  2596. effectiveThumbWidth = Math.min(this._thumbWidth.getValue(this._host), this._currentMeasure.height);
  2597. }
  2598. else {
  2599. effectiveThumbWidth = this._currentMeasure.height * this._thumbWidth.getValue(this._host);
  2600. }
  2601. if (this._barOffset.isPixel) {
  2602. effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), this._currentMeasure.height);
  2603. }
  2604. else {
  2605. effectiveBarOffset = this._currentMeasure.height * this._barOffset.getValue(this._host);
  2606. }
  2607. var left = this._currentMeasure.left + effectiveThumbWidth / 2;
  2608. var width = this._currentMeasure.width - effectiveThumbWidth;
  2609. var thumbPosition = (this._value - this._minimum) / (this._maximum - this._minimum) * width;
  2610. // Bar
  2611. context.fillStyle = this._background;
  2612. context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, width, this._currentMeasure.height - effectiveBarOffset * 2);
  2613. context.fillStyle = this.color;
  2614. context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, thumbPosition, this._currentMeasure.height - effectiveBarOffset * 2);
  2615. // Thumb
  2616. context.fillRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
  2617. context.strokeStyle = this._borderColor;
  2618. context.strokeRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
  2619. }
  2620. context.restore();
  2621. };
  2622. Slider.prototype._updateValueFromPointer = function (x) {
  2623. this.value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
  2624. };
  2625. Slider.prototype._onPointerDown = function (coordinates, buttonIndex) {
  2626. if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
  2627. return false;
  2628. }
  2629. this._pointerIsDown = true;
  2630. this._updateValueFromPointer(coordinates.x);
  2631. this._host._capturingControl = this;
  2632. return true;
  2633. };
  2634. Slider.prototype._onPointerMove = function (coordinates) {
  2635. if (this._pointerIsDown) {
  2636. this._updateValueFromPointer(coordinates.x);
  2637. }
  2638. };
  2639. Slider.prototype._onPointerUp = function (coordinates, buttonIndex) {
  2640. this._pointerIsDown = false;
  2641. this._host._capturingControl = null;
  2642. _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
  2643. };
  2644. return Slider;
  2645. }(GUI.Control));
  2646. GUI.Slider = Slider;
  2647. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  2648. })(BABYLON || (BABYLON = {}));
  2649. //# sourceMappingURL=slider.js.map
  2650. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2651. var BABYLON;
  2652. (function (BABYLON) {
  2653. var GUI;
  2654. (function (GUI) {
  2655. var Checkbox = (function (_super) {
  2656. __extends(Checkbox, _super);
  2657. function Checkbox(name) {
  2658. var _this = _super.call(this, name) || this;
  2659. _this.name = name;
  2660. _this._isChecked = false;
  2661. _this._background = "black";
  2662. _this._checkSizeRatio = 0.8;
  2663. _this._thickness = 1;
  2664. _this.onIsCheckedChangedObservable = new BABYLON.Observable();
  2665. _this.isPointerBlocker = true;
  2666. return _this;
  2667. }
  2668. Object.defineProperty(Checkbox.prototype, "thickness", {
  2669. get: function () {
  2670. return this._thickness;
  2671. },
  2672. set: function (value) {
  2673. if (this._thickness === value) {
  2674. return;
  2675. }
  2676. this._thickness = value;
  2677. this._markAsDirty();
  2678. },
  2679. enumerable: true,
  2680. configurable: true
  2681. });
  2682. Object.defineProperty(Checkbox.prototype, "checkSizeRatio", {
  2683. get: function () {
  2684. return this._checkSizeRatio;
  2685. },
  2686. set: function (value) {
  2687. value = Math.max(Math.min(1, value), 0);
  2688. if (this._checkSizeRatio === value) {
  2689. return;
  2690. }
  2691. this._checkSizeRatio = value;
  2692. this._markAsDirty();
  2693. },
  2694. enumerable: true,
  2695. configurable: true
  2696. });
  2697. Object.defineProperty(Checkbox.prototype, "background", {
  2698. get: function () {
  2699. return this._background;
  2700. },
  2701. set: function (value) {
  2702. if (this._background === value) {
  2703. return;
  2704. }
  2705. this._background = value;
  2706. this._markAsDirty();
  2707. },
  2708. enumerable: true,
  2709. configurable: true
  2710. });
  2711. Object.defineProperty(Checkbox.prototype, "isChecked", {
  2712. get: function () {
  2713. return this._isChecked;
  2714. },
  2715. set: function (value) {
  2716. if (this._isChecked === value) {
  2717. return;
  2718. }
  2719. this._isChecked = value;
  2720. this._markAsDirty();
  2721. this.onIsCheckedChangedObservable.notifyObservers(value);
  2722. },
  2723. enumerable: true,
  2724. configurable: true
  2725. });
  2726. Checkbox.prototype._getTypeName = function () {
  2727. return "CheckBox";
  2728. };
  2729. Checkbox.prototype._draw = function (parentMeasure, context) {
  2730. context.save();
  2731. this._applyStates(context);
  2732. if (this._processMeasures(parentMeasure, context)) {
  2733. var actualWidth = this._currentMeasure.width - this._thickness;
  2734. var actualHeight = this._currentMeasure.height - this._thickness;
  2735. context.fillStyle = this._background;
  2736. context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
  2737. if (this._isChecked) {
  2738. context.fillStyle = this.color;
  2739. var offsetWidth = actualWidth * this._checkSizeRatio;
  2740. var offseHeight = actualHeight * this._checkSizeRatio;
  2741. context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);
  2742. }
  2743. context.strokeStyle = this.color;
  2744. context.lineWidth = this._thickness;
  2745. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
  2746. }
  2747. context.restore();
  2748. };
  2749. // Events
  2750. Checkbox.prototype._onPointerDown = function (coordinates, buttonIndex) {
  2751. if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
  2752. return false;
  2753. }
  2754. this.isChecked = !this.isChecked;
  2755. return true;
  2756. };
  2757. return Checkbox;
  2758. }(GUI.Control));
  2759. GUI.Checkbox = Checkbox;
  2760. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  2761. })(BABYLON || (BABYLON = {}));
  2762. //# sourceMappingURL=checkBox.js.map
  2763. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2764. var BABYLON;
  2765. (function (BABYLON) {
  2766. var GUI;
  2767. (function (GUI) {
  2768. var RadioButton = (function (_super) {
  2769. __extends(RadioButton, _super);
  2770. function RadioButton(name) {
  2771. var _this = _super.call(this, name) || this;
  2772. _this.name = name;
  2773. _this._isChecked = false;
  2774. _this._background = "black";
  2775. _this._checkSizeRatio = 0.8;
  2776. _this._thickness = 1;
  2777. _this.group = "";
  2778. _this.onIsCheckedChangedObservable = new BABYLON.Observable();
  2779. _this.isPointerBlocker = true;
  2780. return _this;
  2781. }
  2782. Object.defineProperty(RadioButton.prototype, "thickness", {
  2783. get: function () {
  2784. return this._thickness;
  2785. },
  2786. set: function (value) {
  2787. if (this._thickness === value) {
  2788. return;
  2789. }
  2790. this._thickness = value;
  2791. this._markAsDirty();
  2792. },
  2793. enumerable: true,
  2794. configurable: true
  2795. });
  2796. Object.defineProperty(RadioButton.prototype, "checkSizeRatio", {
  2797. get: function () {
  2798. return this._checkSizeRatio;
  2799. },
  2800. set: function (value) {
  2801. value = Math.max(Math.min(1, value), 0);
  2802. if (this._checkSizeRatio === value) {
  2803. return;
  2804. }
  2805. this._checkSizeRatio = value;
  2806. this._markAsDirty();
  2807. },
  2808. enumerable: true,
  2809. configurable: true
  2810. });
  2811. Object.defineProperty(RadioButton.prototype, "background", {
  2812. get: function () {
  2813. return this._background;
  2814. },
  2815. set: function (value) {
  2816. if (this._background === value) {
  2817. return;
  2818. }
  2819. this._background = value;
  2820. this._markAsDirty();
  2821. },
  2822. enumerable: true,
  2823. configurable: true
  2824. });
  2825. Object.defineProperty(RadioButton.prototype, "isChecked", {
  2826. get: function () {
  2827. return this._isChecked;
  2828. },
  2829. set: function (value) {
  2830. var _this = this;
  2831. if (this._isChecked === value) {
  2832. return;
  2833. }
  2834. this._isChecked = value;
  2835. this._markAsDirty();
  2836. this.onIsCheckedChangedObservable.notifyObservers(value);
  2837. if (this._isChecked) {
  2838. // Update all controls from same group
  2839. this._host.executeOnAllControls(function (control) {
  2840. if (control === _this) {
  2841. return;
  2842. }
  2843. if (control.group === undefined) {
  2844. return;
  2845. }
  2846. var childRadio = control;
  2847. if (childRadio.group === _this.group) {
  2848. childRadio.isChecked = false;
  2849. }
  2850. });
  2851. }
  2852. },
  2853. enumerable: true,
  2854. configurable: true
  2855. });
  2856. RadioButton.prototype._getTypeName = function () {
  2857. return "RadioButton";
  2858. };
  2859. RadioButton.prototype._draw = function (parentMeasure, context) {
  2860. context.save();
  2861. this._applyStates(context);
  2862. if (this._processMeasures(parentMeasure, context)) {
  2863. var actualWidth = this._currentMeasure.width - this._thickness;
  2864. var actualHeight = this._currentMeasure.height - this._thickness;
  2865. // Outer
  2866. GUI.Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);
  2867. context.fillStyle = this._background;
  2868. context.fill();
  2869. context.strokeStyle = this.color;
  2870. context.lineWidth = this._thickness;
  2871. context.stroke();
  2872. // Inner
  2873. if (this._isChecked) {
  2874. context.fillStyle = this.color;
  2875. var offsetWidth = actualWidth * this._checkSizeRatio;
  2876. var offseHeight = actualHeight * this._checkSizeRatio;
  2877. GUI.Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, offsetWidth / 2 - this._thickness / 2, offseHeight / 2 - this._thickness / 2, context);
  2878. context.fill();
  2879. }
  2880. }
  2881. context.restore();
  2882. };
  2883. // Events
  2884. RadioButton.prototype._onPointerDown = function (coordinates, buttonIndex) {
  2885. if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
  2886. return false;
  2887. }
  2888. this.isChecked = !this.isChecked;
  2889. return true;
  2890. };
  2891. return RadioButton;
  2892. }(GUI.Control));
  2893. GUI.RadioButton = RadioButton;
  2894. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  2895. })(BABYLON || (BABYLON = {}));
  2896. //# sourceMappingURL=radioButton.js.map
  2897. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2898. var BABYLON;
  2899. (function (BABYLON) {
  2900. var GUI;
  2901. (function (GUI) {
  2902. var TextBlock = (function (_super) {
  2903. __extends(TextBlock, _super);
  2904. function TextBlock(name, text) {
  2905. if (text === void 0) { text = ""; }
  2906. var _this = _super.call(this, name) || this;
  2907. _this.name = name;
  2908. _this._text = "";
  2909. _this._textWrapping = false;
  2910. _this._textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
  2911. _this._textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
  2912. _this._resizeToFit = false;
  2913. /**
  2914. * An event triggered after the text is changed
  2915. * @type {BABYLON.Observable}
  2916. */
  2917. _this.onTextChangedObservable = new BABYLON.Observable();
  2918. _this.text = text;
  2919. return _this;
  2920. }
  2921. Object.defineProperty(TextBlock.prototype, "resizeToFit", {
  2922. get: function () {
  2923. return this._resizeToFit;
  2924. },
  2925. set: function (value) {
  2926. this._resizeToFit = value;
  2927. if (this._resizeToFit) {
  2928. this._width.ignoreAdaptiveScaling = true;
  2929. this._height.ignoreAdaptiveScaling = true;
  2930. }
  2931. },
  2932. enumerable: true,
  2933. configurable: true
  2934. });
  2935. Object.defineProperty(TextBlock.prototype, "textWrapping", {
  2936. get: function () {
  2937. return this._textWrapping;
  2938. },
  2939. set: function (value) {
  2940. if (this._textWrapping === value) {
  2941. return;
  2942. }
  2943. this._textWrapping = value;
  2944. this._markAsDirty();
  2945. },
  2946. enumerable: true,
  2947. configurable: true
  2948. });
  2949. Object.defineProperty(TextBlock.prototype, "text", {
  2950. get: function () {
  2951. return this._text;
  2952. },
  2953. set: function (value) {
  2954. if (this._text === value) {
  2955. return;
  2956. }
  2957. this._text = value;
  2958. this._markAsDirty();
  2959. this.onTextChangedObservable.notifyObservers(this);
  2960. },
  2961. enumerable: true,
  2962. configurable: true
  2963. });
  2964. Object.defineProperty(TextBlock.prototype, "textHorizontalAlignment", {
  2965. get: function () {
  2966. return this._textHorizontalAlignment;
  2967. },
  2968. set: function (value) {
  2969. if (this._textHorizontalAlignment === value) {
  2970. return;
  2971. }
  2972. this._textHorizontalAlignment = value;
  2973. this._markAsDirty();
  2974. },
  2975. enumerable: true,
  2976. configurable: true
  2977. });
  2978. Object.defineProperty(TextBlock.prototype, "textVerticalAlignment", {
  2979. get: function () {
  2980. return this._textVerticalAlignment;
  2981. },
  2982. set: function (value) {
  2983. if (this._textVerticalAlignment === value) {
  2984. return;
  2985. }
  2986. this._textVerticalAlignment = value;
  2987. this._markAsDirty();
  2988. },
  2989. enumerable: true,
  2990. configurable: true
  2991. });
  2992. TextBlock.prototype._getTypeName = function () {
  2993. return "TextBlock";
  2994. };
  2995. TextBlock.prototype._drawText = function (text, textWidth, y, context) {
  2996. var width = this._currentMeasure.width;
  2997. var x = 0;
  2998. switch (this._textHorizontalAlignment) {
  2999. case GUI.Control.HORIZONTAL_ALIGNMENT_LEFT:
  3000. x = 0;
  3001. break;
  3002. case GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT:
  3003. x = width - textWidth;
  3004. break;
  3005. case GUI.Control.HORIZONTAL_ALIGNMENT_CENTER:
  3006. x = (width - textWidth) / 2;
  3007. break;
  3008. }
  3009. context.fillText(text, this._currentMeasure.left + x, y);
  3010. };
  3011. TextBlock.prototype._draw = function (parentMeasure, context) {
  3012. context.save();
  3013. this._applyStates(context);
  3014. if (this._processMeasures(parentMeasure, context)) {
  3015. // Render lines
  3016. this._renderLines(context);
  3017. }
  3018. context.restore();
  3019. };
  3020. TextBlock.prototype._additionalProcessing = function (parentMeasure, context) {
  3021. this._lines = [];
  3022. var _lines = this.text.split("\n");
  3023. if (this._textWrapping && !this._resizeToFit) {
  3024. for (var _i = 0, _lines_1 = _lines; _i < _lines_1.length; _i++) {
  3025. var _line = _lines_1[_i];
  3026. this._lines.push(this._parseLineWithTextWrapping(_line, context));
  3027. }
  3028. }
  3029. else {
  3030. for (var _a = 0, _lines_2 = _lines; _a < _lines_2.length; _a++) {
  3031. var _line = _lines_2[_a];
  3032. this._lines.push(this._parseLine(_line, context));
  3033. }
  3034. }
  3035. };
  3036. TextBlock.prototype._parseLine = function (line, context) {
  3037. if (line === void 0) { line = ''; }
  3038. return { text: line, width: context.measureText(line).width };
  3039. };
  3040. TextBlock.prototype._parseLineWithTextWrapping = function (line, context) {
  3041. if (line === void 0) { line = ''; }
  3042. var words = line.split(' ');
  3043. var width = this._currentMeasure.width;
  3044. var lineWidth = 0;
  3045. for (var n = 0; n < words.length; n++) {
  3046. var testLine = n > 0 ? line + " " + words[n] : words[0];
  3047. var metrics = context.measureText(testLine);
  3048. var testWidth = metrics.width;
  3049. if (testWidth > width && n > 0) {
  3050. this._lines.push({ text: line, width: lineWidth });
  3051. line = words[n];
  3052. lineWidth = context.measureText(line).width;
  3053. }
  3054. else {
  3055. lineWidth = testWidth;
  3056. line = testLine;
  3057. }
  3058. }
  3059. return { text: line, width: lineWidth };
  3060. };
  3061. TextBlock.prototype._renderLines = function (context) {
  3062. var width = this._currentMeasure.width;
  3063. var height = this._currentMeasure.height;
  3064. if (!this._fontOffset) {
  3065. this._fontOffset = GUI.Control._GetFontOffset(context.font);
  3066. }
  3067. var rootY = 0;
  3068. switch (this._textVerticalAlignment) {
  3069. case GUI.Control.VERTICAL_ALIGNMENT_TOP:
  3070. rootY = this._fontOffset.ascent;
  3071. break;
  3072. case GUI.Control.VERTICAL_ALIGNMENT_BOTTOM:
  3073. rootY = height - this._fontOffset.height * (this._lines.length - 1) - this._fontOffset.descent;
  3074. break;
  3075. case GUI.Control.VERTICAL_ALIGNMENT_CENTER:
  3076. rootY = this._fontOffset.ascent + (height - this._fontOffset.height * this._lines.length) / 2;
  3077. break;
  3078. }
  3079. rootY += this._currentMeasure.top;
  3080. var maxLineWidth = 0;
  3081. for (var _i = 0, _a = this._lines; _i < _a.length; _i++) {
  3082. var line = _a[_i];
  3083. this._drawText(line.text, line.width, rootY, context);
  3084. rootY += this._fontOffset.height;
  3085. if (line.width > maxLineWidth)
  3086. maxLineWidth = line.width;
  3087. }
  3088. if (this._resizeToFit) {
  3089. this.width = this.paddingLeftInPixels + this.paddingRightInPixels + maxLineWidth + 'px';
  3090. this.height = this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * this._lines.length + 'px';
  3091. }
  3092. };
  3093. TextBlock.prototype.dispose = function () {
  3094. _super.prototype.dispose.call(this);
  3095. this.onTextChangedObservable.clear();
  3096. };
  3097. return TextBlock;
  3098. }(GUI.Control));
  3099. GUI.TextBlock = TextBlock;
  3100. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  3101. })(BABYLON || (BABYLON = {}));
  3102. //# sourceMappingURL=textBlock.js.map
  3103. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  3104. var DOMImage = Image;
  3105. var BABYLON;
  3106. (function (BABYLON) {
  3107. var GUI;
  3108. (function (GUI) {
  3109. var Image = (function (_super) {
  3110. __extends(Image, _super);
  3111. function Image(name, url) {
  3112. var _this = _super.call(this, name) || this;
  3113. _this.name = name;
  3114. _this._loaded = false;
  3115. _this._stretch = Image.STRETCH_FILL;
  3116. _this._autoScale = false;
  3117. _this._sourceLeft = 0;
  3118. _this._sourceTop = 0;
  3119. _this._sourceWidth = 0;
  3120. _this._sourceHeight = 0;
  3121. _this.source = url;
  3122. return _this;
  3123. }
  3124. Object.defineProperty(Image.prototype, "sourceLeft", {
  3125. get: function () {
  3126. return this._sourceLeft;
  3127. },
  3128. set: function (value) {
  3129. if (this._sourceLeft === value) {
  3130. return;
  3131. }
  3132. this._sourceLeft = value;
  3133. this._markAsDirty();
  3134. },
  3135. enumerable: true,
  3136. configurable: true
  3137. });
  3138. Object.defineProperty(Image.prototype, "sourceTop", {
  3139. get: function () {
  3140. return this._sourceTop;
  3141. },
  3142. set: function (value) {
  3143. if (this._sourceTop === value) {
  3144. return;
  3145. }
  3146. this._sourceTop = value;
  3147. this._markAsDirty();
  3148. },
  3149. enumerable: true,
  3150. configurable: true
  3151. });
  3152. Object.defineProperty(Image.prototype, "sourceWidth", {
  3153. get: function () {
  3154. return this._sourceWidth;
  3155. },
  3156. set: function (value) {
  3157. if (this._sourceWidth === value) {
  3158. return;
  3159. }
  3160. this._sourceWidth = value;
  3161. this._markAsDirty();
  3162. },
  3163. enumerable: true,
  3164. configurable: true
  3165. });
  3166. Object.defineProperty(Image.prototype, "sourceHeight", {
  3167. get: function () {
  3168. return this._sourceHeight;
  3169. },
  3170. set: function (value) {
  3171. if (this._sourceHeight === value) {
  3172. return;
  3173. }
  3174. this._sourceHeight = value;
  3175. this._markAsDirty();
  3176. },
  3177. enumerable: true,
  3178. configurable: true
  3179. });
  3180. Object.defineProperty(Image.prototype, "autoScale", {
  3181. get: function () {
  3182. return this._autoScale;
  3183. },
  3184. set: function (value) {
  3185. if (this._autoScale === value) {
  3186. return;
  3187. }
  3188. this._autoScale = value;
  3189. if (value && this._loaded) {
  3190. this.synchronizeSizeWithContent();
  3191. }
  3192. },
  3193. enumerable: true,
  3194. configurable: true
  3195. });
  3196. Object.defineProperty(Image.prototype, "stretch", {
  3197. get: function () {
  3198. return this._stretch;
  3199. },
  3200. set: function (value) {
  3201. if (this._stretch === value) {
  3202. return;
  3203. }
  3204. this._stretch = value;
  3205. this._markAsDirty();
  3206. },
  3207. enumerable: true,
  3208. configurable: true
  3209. });
  3210. Object.defineProperty(Image.prototype, "domImage", {
  3211. get: function () {
  3212. return this._domImage;
  3213. },
  3214. set: function (value) {
  3215. var _this = this;
  3216. this._domImage = value;
  3217. this._loaded = false;
  3218. if (this._domImage.width) {
  3219. this._onImageLoaded();
  3220. }
  3221. else {
  3222. this._domImage.onload = function () {
  3223. _this._onImageLoaded();
  3224. };
  3225. }
  3226. },
  3227. enumerable: true,
  3228. configurable: true
  3229. });
  3230. Image.prototype._onImageLoaded = function () {
  3231. this._imageWidth = this._domImage.width;
  3232. this._imageHeight = this._domImage.height;
  3233. this._loaded = true;
  3234. if (this._autoScale) {
  3235. this.synchronizeSizeWithContent();
  3236. }
  3237. this._markAsDirty();
  3238. };
  3239. Object.defineProperty(Image.prototype, "source", {
  3240. set: function (value) {
  3241. var _this = this;
  3242. if (this._source === value) {
  3243. return;
  3244. }
  3245. this._loaded = false;
  3246. this._source = value;
  3247. this._domImage = new DOMImage();
  3248. this._domImage.onload = function () {
  3249. _this._onImageLoaded();
  3250. };
  3251. this._domImage.crossOrigin = "anonymous";
  3252. this._domImage.src = value;
  3253. },
  3254. enumerable: true,
  3255. configurable: true
  3256. });
  3257. Image.prototype._getTypeName = function () {
  3258. return "Image";
  3259. };
  3260. Image.prototype.synchronizeSizeWithContent = function () {
  3261. if (!this._loaded) {
  3262. return;
  3263. }
  3264. this.width = this._domImage.width + "px";
  3265. this.height = this._domImage.height + "px";
  3266. };
  3267. Image.prototype._draw = function (parentMeasure, context) {
  3268. context.save();
  3269. var x = this._sourceLeft;
  3270. var y = this._sourceTop;
  3271. var width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
  3272. var height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
  3273. this._applyStates(context);
  3274. if (this._processMeasures(parentMeasure, context)) {
  3275. if (this._loaded) {
  3276. switch (this._stretch) {
  3277. case Image.STRETCH_NONE:
  3278. context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  3279. break;
  3280. case Image.STRETCH_FILL:
  3281. context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  3282. break;
  3283. case Image.STRETCH_UNIFORM:
  3284. var hRatio = this._currentMeasure.width / width;
  3285. var vRatio = this._currentMeasure.height / height;
  3286. var ratio = Math.min(hRatio, vRatio);
  3287. var centerX = (this._currentMeasure.width - width * ratio) / 2;
  3288. var centerY = (this._currentMeasure.height - height * ratio) / 2;
  3289. context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
  3290. break;
  3291. case Image.STRETCH_EXTEND:
  3292. context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  3293. if (this._autoScale) {
  3294. this.synchronizeSizeWithContent();
  3295. }
  3296. this._root.width = this.width;
  3297. this._root.height = this.height;
  3298. break;
  3299. }
  3300. }
  3301. }
  3302. context.restore();
  3303. };
  3304. Object.defineProperty(Image, "STRETCH_NONE", {
  3305. get: function () {
  3306. return Image._STRETCH_NONE;
  3307. },
  3308. enumerable: true,
  3309. configurable: true
  3310. });
  3311. Object.defineProperty(Image, "STRETCH_FILL", {
  3312. get: function () {
  3313. return Image._STRETCH_FILL;
  3314. },
  3315. enumerable: true,
  3316. configurable: true
  3317. });
  3318. Object.defineProperty(Image, "STRETCH_UNIFORM", {
  3319. get: function () {
  3320. return Image._STRETCH_UNIFORM;
  3321. },
  3322. enumerable: true,
  3323. configurable: true
  3324. });
  3325. Object.defineProperty(Image, "STRETCH_EXTEND", {
  3326. get: function () {
  3327. return Image._STRETCH_EXTEND;
  3328. },
  3329. enumerable: true,
  3330. configurable: true
  3331. });
  3332. // Static
  3333. Image._STRETCH_NONE = 0;
  3334. Image._STRETCH_FILL = 1;
  3335. Image._STRETCH_UNIFORM = 2;
  3336. Image._STRETCH_EXTEND = 3;
  3337. return Image;
  3338. }(GUI.Control));
  3339. GUI.Image = Image;
  3340. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  3341. })(BABYLON || (BABYLON = {}));
  3342. //# sourceMappingURL=image.js.map
  3343. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  3344. var BABYLON;
  3345. (function (BABYLON) {
  3346. var GUI;
  3347. (function (GUI) {
  3348. var Button = (function (_super) {
  3349. __extends(Button, _super);
  3350. function Button(name) {
  3351. var _this = _super.call(this, name) || this;
  3352. _this.name = name;
  3353. _this.thickness = 1;
  3354. _this.isPointerBlocker = true;
  3355. _this.pointerEnterAnimation = function () {
  3356. _this.alpha -= 0.1;
  3357. };
  3358. _this.pointerOutAnimation = function () {
  3359. _this.alpha += 0.1;
  3360. };
  3361. _this.pointerDownAnimation = function () {
  3362. _this.scaleX -= 0.05;
  3363. _this.scaleY -= 0.05;
  3364. };
  3365. _this.pointerUpAnimation = function () {
  3366. _this.scaleX += 0.05;
  3367. _this.scaleY += 0.05;
  3368. };
  3369. return _this;
  3370. }
  3371. Button.prototype._getTypeName = function () {
  3372. return "Button";
  3373. };
  3374. // While being a container, the button behaves like a control.
  3375. Button.prototype._processPicking = function (x, y, type, buttonIndex) {
  3376. if (!this.isHitTestVisible || !this.isVisible || this.notRenderable) {
  3377. return false;
  3378. }
  3379. if (!_super.prototype.contains.call(this, x, y)) {
  3380. return false;
  3381. }
  3382. this._processObservables(type, x, y, buttonIndex);
  3383. return true;
  3384. };
  3385. Button.prototype._onPointerEnter = function () {
  3386. if (!_super.prototype._onPointerEnter.call(this)) {
  3387. return false;
  3388. }
  3389. if (this.pointerEnterAnimation) {
  3390. this.pointerEnterAnimation();
  3391. }
  3392. return true;
  3393. };
  3394. Button.prototype._onPointerOut = function () {
  3395. if (this.pointerOutAnimation) {
  3396. this.pointerOutAnimation();
  3397. }
  3398. _super.prototype._onPointerOut.call(this);
  3399. };
  3400. Button.prototype._onPointerDown = function (coordinates, buttonIndex) {
  3401. if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
  3402. return false;
  3403. }
  3404. if (this.pointerDownAnimation) {
  3405. this.pointerDownAnimation();
  3406. }
  3407. return true;
  3408. };
  3409. Button.prototype._onPointerUp = function (coordinates, buttonIndex) {
  3410. if (this.pointerUpAnimation) {
  3411. this.pointerUpAnimation();
  3412. }
  3413. _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
  3414. };
  3415. // Statics
  3416. Button.CreateImageButton = function (name, text, imageUrl) {
  3417. var result = new Button(name);
  3418. // Adding text
  3419. var textBlock = new BABYLON.GUI.TextBlock(name + "_button", text);
  3420. textBlock.textWrapping = true;
  3421. textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
  3422. textBlock.paddingLeft = "20%";
  3423. result.addControl(textBlock);
  3424. // Adding image
  3425. var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
  3426. iconImage.width = "20%";
  3427. iconImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
  3428. iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
  3429. result.addControl(iconImage);
  3430. return result;
  3431. };
  3432. Button.CreateImageOnlyButton = function (name, imageUrl) {
  3433. var result = new Button(name);
  3434. // Adding image
  3435. var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
  3436. iconImage.stretch = BABYLON.GUI.Image.STRETCH_FILL;
  3437. iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
  3438. result.addControl(iconImage);
  3439. return result;
  3440. };
  3441. Button.CreateSimpleButton = function (name, text) {
  3442. var result = new Button(name);
  3443. // Adding text
  3444. var textBlock = new BABYLON.GUI.TextBlock(name + "_button", text);
  3445. textBlock.textWrapping = true;
  3446. textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
  3447. result.addControl(textBlock);
  3448. return result;
  3449. };
  3450. Button.CreateImageWithCenterTextButton = function (name, text, imageUrl) {
  3451. var result = new Button(name);
  3452. // Adding image
  3453. var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
  3454. iconImage.stretch = BABYLON.GUI.Image.STRETCH_FILL;
  3455. result.addControl(iconImage);
  3456. // Adding text
  3457. var textBlock = new BABYLON.GUI.TextBlock(name + "_button", text);
  3458. textBlock.textWrapping = true;
  3459. textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
  3460. result.addControl(textBlock);
  3461. return result;
  3462. };
  3463. return Button;
  3464. }(GUI.Rectangle));
  3465. GUI.Button = Button;
  3466. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  3467. })(BABYLON || (BABYLON = {}));
  3468. //# sourceMappingURL=button.js.map
  3469. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  3470. var BABYLON;
  3471. (function (BABYLON) {
  3472. var GUI;
  3473. (function (GUI) {
  3474. var ColorPicker = (function (_super) {
  3475. __extends(ColorPicker, _super);
  3476. function ColorPicker(name) {
  3477. var _this = _super.call(this, name) || this;
  3478. _this.name = name;
  3479. _this._value = BABYLON.Color3.Red();
  3480. _this._tmpColor = new BABYLON.Color3();
  3481. _this._pointerStartedOnSquare = false;
  3482. _this._pointerStartedOnWheel = false;
  3483. _this._squareLeft = 0;
  3484. _this._squareTop = 0;
  3485. _this._squareSize = 0;
  3486. _this._h = 360;
  3487. _this._s = 1;
  3488. _this._v = 1;
  3489. _this.onValueChangedObservable = new BABYLON.Observable();
  3490. // Events
  3491. _this._pointerIsDown = false;
  3492. _this.value = new BABYLON.Color3(.88, .1, .1);
  3493. _this.size = "200px";
  3494. _this.isPointerBlocker = true;
  3495. return _this;
  3496. }
  3497. Object.defineProperty(ColorPicker.prototype, "value", {
  3498. get: function () {
  3499. return this._value;
  3500. },
  3501. set: function (value) {
  3502. if (this._value.equals(value)) {
  3503. return;
  3504. }
  3505. this._value.copyFrom(value);
  3506. this._RGBtoHSV(this._value, this._tmpColor);
  3507. this._h = this._tmpColor.r;
  3508. this._s = Math.max(this._tmpColor.g, 0.00001);
  3509. this._v = Math.max(this._tmpColor.b, 0.00001);
  3510. this._markAsDirty();
  3511. this.onValueChangedObservable.notifyObservers(this._value);
  3512. },
  3513. enumerable: true,
  3514. configurable: true
  3515. });
  3516. Object.defineProperty(ColorPicker.prototype, "width", {
  3517. set: function (value) {
  3518. if (this._width.toString(this._host) === value) {
  3519. return;
  3520. }
  3521. if (this._width.fromString(value)) {
  3522. this._height.fromString(value);
  3523. this._markAsDirty();
  3524. }
  3525. },
  3526. enumerable: true,
  3527. configurable: true
  3528. });
  3529. Object.defineProperty(ColorPicker.prototype, "height", {
  3530. set: function (value) {
  3531. if (this._height.toString(this._host) === value) {
  3532. return;
  3533. }
  3534. if (this._height.fromString(value)) {
  3535. this._width.fromString(value);
  3536. this._markAsDirty();
  3537. }
  3538. },
  3539. enumerable: true,
  3540. configurable: true
  3541. });
  3542. Object.defineProperty(ColorPicker.prototype, "size", {
  3543. get: function () {
  3544. return this.width;
  3545. },
  3546. set: function (value) {
  3547. this.width = value;
  3548. },
  3549. enumerable: true,
  3550. configurable: true
  3551. });
  3552. ColorPicker.prototype._getTypeName = function () {
  3553. return "ColorPicker";
  3554. };
  3555. ColorPicker.prototype._updateSquareProps = function () {
  3556. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  3557. var wheelThickness = radius * .2;
  3558. var innerDiameter = (radius - wheelThickness) * 2;
  3559. var squareSize = innerDiameter / (Math.sqrt(2));
  3560. var offset = radius - squareSize * .5;
  3561. this._squareLeft = this._currentMeasure.left + offset;
  3562. this._squareTop = this._currentMeasure.top + offset;
  3563. this._squareSize = squareSize;
  3564. };
  3565. ColorPicker.prototype._drawGradientSquare = function (hueValue, left, top, width, height, context) {
  3566. var lgh = context.createLinearGradient(left, top, width + left, top);
  3567. lgh.addColorStop(0, '#fff');
  3568. lgh.addColorStop(1, 'hsl(' + hueValue + ', 100%, 50%)');
  3569. context.fillStyle = lgh;
  3570. context.fillRect(left, top, width, height);
  3571. var lgv = context.createLinearGradient(left, top, left, height + top);
  3572. lgv.addColorStop(0, 'rgba(0,0,0,0)');
  3573. lgv.addColorStop(1, '#000');
  3574. context.fillStyle = lgv;
  3575. context.fillRect(left, top, width, height);
  3576. };
  3577. ColorPicker.prototype._drawCircle = function (centerX, centerY, radius, context) {
  3578. context.beginPath();
  3579. context.arc(centerX, centerY, radius + 1, 0, 2 * Math.PI, false);
  3580. context.lineWidth = 3;
  3581. context.strokeStyle = '#333333';
  3582. context.stroke();
  3583. context.beginPath();
  3584. context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  3585. context.lineWidth = 3;
  3586. context.strokeStyle = '#ffffff';
  3587. context.stroke();
  3588. };
  3589. ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
  3590. var canvas = document.createElement("canvas");
  3591. canvas.width = radius * 2;
  3592. canvas.height = radius * 2;
  3593. var context = canvas.getContext("2d");
  3594. var image = context.getImageData(0, 0, radius * 2, radius * 2);
  3595. var data = image.data;
  3596. var color = this._tmpColor;
  3597. var maxDistSq = radius * radius;
  3598. var innerRadius = radius - thickness;
  3599. var minDistSq = innerRadius * innerRadius;
  3600. for (var x = -radius; x < radius; x++) {
  3601. for (var y = -radius; y < radius; y++) {
  3602. var distSq = x * x + y * y;
  3603. if (distSq > maxDistSq || distSq < minDistSq) {
  3604. continue;
  3605. }
  3606. var dist = Math.sqrt(distSq);
  3607. var ang = Math.atan2(y, x);
  3608. this._HSVtoRGB(ang * 180 / Math.PI + 180, dist / radius, 1, color);
  3609. var index = ((x + radius) + ((y + radius) * 2 * radius)) * 4;
  3610. data[index] = color.r * 255;
  3611. data[index + 1] = color.g * 255;
  3612. data[index + 2] = color.b * 255;
  3613. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  3614. //apply less alpha to bigger color pickers
  3615. var alphaAmount = .2;
  3616. var maxAlpha = .2;
  3617. var minAlpha = .04;
  3618. var lowerRadius = 50;
  3619. var upperRadius = 150;
  3620. if (radius < lowerRadius) {
  3621. alphaAmount = maxAlpha;
  3622. }
  3623. else if (radius > upperRadius) {
  3624. alphaAmount = minAlpha;
  3625. }
  3626. else {
  3627. alphaAmount = (minAlpha - maxAlpha) * (radius - lowerRadius) / (upperRadius - lowerRadius) + maxAlpha;
  3628. }
  3629. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  3630. if (alphaRatio < alphaAmount) {
  3631. data[index + 3] = 255 * (alphaRatio / alphaAmount);
  3632. }
  3633. else if (alphaRatio > 1 - alphaAmount) {
  3634. data[index + 3] = 255 * (1.0 - ((alphaRatio - (1 - alphaAmount)) / alphaAmount));
  3635. }
  3636. else {
  3637. data[index + 3] = 255;
  3638. }
  3639. }
  3640. }
  3641. context.putImageData(image, 0, 0);
  3642. return canvas;
  3643. };
  3644. ColorPicker.prototype._RGBtoHSV = function (color, result) {
  3645. var r = color.r;
  3646. var g = color.g;
  3647. var b = color.b;
  3648. var max = Math.max(r, g, b);
  3649. var min = Math.min(r, g, b);
  3650. var h = 0;
  3651. var s = 0;
  3652. var v = max;
  3653. var dm = max - min;
  3654. if (max !== 0) {
  3655. s = dm / max;
  3656. }
  3657. if (max != min) {
  3658. if (max == r) {
  3659. h = (g - b) / dm;
  3660. if (g < b) {
  3661. h += 6;
  3662. }
  3663. }
  3664. else if (max == g) {
  3665. h = (b - r) / dm + 2;
  3666. }
  3667. else if (max == b) {
  3668. h = (r - g) / dm + 4;
  3669. }
  3670. h *= 60;
  3671. }
  3672. result.r = h;
  3673. result.g = s;
  3674. result.b = v;
  3675. };
  3676. ColorPicker.prototype._HSVtoRGB = function (hue, saturation, value, result) {
  3677. var chroma = value * saturation;
  3678. var h = hue / 60;
  3679. var x = chroma * (1 - Math.abs((h % 2) - 1));
  3680. var r = 0;
  3681. var g = 0;
  3682. var b = 0;
  3683. if (h >= 0 && h <= 1) {
  3684. r = chroma;
  3685. g = x;
  3686. }
  3687. else if (h >= 1 && h <= 2) {
  3688. r = x;
  3689. g = chroma;
  3690. }
  3691. else if (h >= 2 && h <= 3) {
  3692. g = chroma;
  3693. b = x;
  3694. }
  3695. else if (h >= 3 && h <= 4) {
  3696. g = x;
  3697. b = chroma;
  3698. }
  3699. else if (h >= 4 && h <= 5) {
  3700. r = x;
  3701. b = chroma;
  3702. }
  3703. else if (h >= 5 && h <= 6) {
  3704. r = chroma;
  3705. b = x;
  3706. }
  3707. var m = value - chroma;
  3708. result.set((r + m), (g + m), (b + m));
  3709. };
  3710. ColorPicker.prototype._draw = function (parentMeasure, context) {
  3711. context.save();
  3712. this._applyStates(context);
  3713. if (this._processMeasures(parentMeasure, context)) {
  3714. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  3715. var wheelThickness = radius * .2;
  3716. var left = this._currentMeasure.left;
  3717. var top = this._currentMeasure.top;
  3718. if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
  3719. this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
  3720. }
  3721. context.drawImage(this._colorWheelCanvas, left, top);
  3722. this._updateSquareProps();
  3723. this._drawGradientSquare(this._h, this._squareLeft, this._squareTop, this._squareSize, this._squareSize, context);
  3724. var cx = this._squareLeft + this._squareSize * this._s;
  3725. var cy = this._squareTop + this._squareSize * (1 - this._v);
  3726. this._drawCircle(cx, cy, radius * .04, context);
  3727. var dist = radius - wheelThickness * .5;
  3728. cx = left + radius + Math.cos((this._h - 180) * Math.PI / 180) * dist;
  3729. cy = top + radius + Math.sin((this._h - 180) * Math.PI / 180) * dist;
  3730. this._drawCircle(cx, cy, wheelThickness * .35, context);
  3731. }
  3732. context.restore();
  3733. };
  3734. ColorPicker.prototype._updateValueFromPointer = function (x, y) {
  3735. if (this._pointerStartedOnWheel) {
  3736. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  3737. var centerX = radius + this._currentMeasure.left;
  3738. var centerY = radius + this._currentMeasure.top;
  3739. this._h = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI + 180;
  3740. }
  3741. else if (this._pointerStartedOnSquare) {
  3742. this._updateSquareProps();
  3743. this._s = (x - this._squareLeft) / this._squareSize;
  3744. this._v = 1 - (y - this._squareTop) / this._squareSize;
  3745. this._s = Math.min(this._s, 1);
  3746. this._s = Math.max(this._s, 0.00001);
  3747. this._v = Math.min(this._v, 1);
  3748. this._v = Math.max(this._v, 0.00001);
  3749. }
  3750. this._HSVtoRGB(this._h, this._s, this._v, this._tmpColor);
  3751. this.value = this._tmpColor;
  3752. };
  3753. ColorPicker.prototype._isPointOnSquare = function (coordinates) {
  3754. this._updateSquareProps();
  3755. var left = this._squareLeft;
  3756. var top = this._squareTop;
  3757. var size = this._squareSize;
  3758. if (coordinates.x >= left && coordinates.x <= left + size &&
  3759. coordinates.y >= top && coordinates.y <= top + size) {
  3760. return true;
  3761. }
  3762. return false;
  3763. };
  3764. ColorPicker.prototype._isPointOnWheel = function (coordinates) {
  3765. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  3766. var centerX = radius + this._currentMeasure.left;
  3767. var centerY = radius + this._currentMeasure.top;
  3768. var wheelThickness = radius * .2;
  3769. var innerRadius = radius - wheelThickness;
  3770. var radiusSq = radius * radius;
  3771. var innerRadiusSq = innerRadius * innerRadius;
  3772. var dx = coordinates.x - centerX;
  3773. var dy = coordinates.y - centerY;
  3774. var distSq = dx * dx + dy * dy;
  3775. if (distSq <= radiusSq && distSq >= innerRadiusSq) {
  3776. return true;
  3777. }
  3778. return false;
  3779. };
  3780. ColorPicker.prototype._onPointerDown = function (coordinates, buttonIndex) {
  3781. if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
  3782. return false;
  3783. }
  3784. this._pointerIsDown = true;
  3785. this._pointerStartedOnSquare = false;
  3786. this._pointerStartedOnWheel = false;
  3787. if (this._isPointOnSquare(coordinates)) {
  3788. this._pointerStartedOnSquare = true;
  3789. }
  3790. else if (this._isPointOnWheel(coordinates)) {
  3791. this._pointerStartedOnWheel = true;
  3792. }
  3793. this._updateValueFromPointer(coordinates.x, coordinates.y);
  3794. this._host._capturingControl = this;
  3795. return true;
  3796. };
  3797. ColorPicker.prototype._onPointerMove = function (coordinates) {
  3798. if (this._pointerIsDown) {
  3799. this._updateValueFromPointer(coordinates.x, coordinates.y);
  3800. }
  3801. _super.prototype._onPointerMove.call(this, coordinates);
  3802. };
  3803. ColorPicker.prototype._onPointerUp = function (coordinates, buttonIndex) {
  3804. this._pointerIsDown = false;
  3805. this._host._capturingControl = null;
  3806. _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
  3807. };
  3808. return ColorPicker;
  3809. }(GUI.Control));
  3810. GUI.ColorPicker = ColorPicker;
  3811. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  3812. })(BABYLON || (BABYLON = {}));
  3813. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  3814. var BABYLON;
  3815. (function (BABYLON) {
  3816. var GUI;
  3817. (function (GUI) {
  3818. var InputText = (function (_super) {
  3819. __extends(InputText, _super);
  3820. function InputText(name, text) {
  3821. if (text === void 0) { text = ""; }
  3822. var _this = _super.call(this, name) || this;
  3823. _this.name = name;
  3824. _this._text = "";
  3825. _this._placeholderText = "";
  3826. _this._background = "#222222";
  3827. _this._focusedBackground = "#000000";
  3828. _this._placeholderColor = "gray";
  3829. _this._thickness = 1;
  3830. _this._margin = new GUI.ValueAndUnit(10, GUI.ValueAndUnit.UNITMODE_PIXEL);
  3831. _this._autoStretchWidth = true;
  3832. _this._maxWidth = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
  3833. _this._isFocused = false;
  3834. _this._blinkIsEven = false;
  3835. _this._cursorOffset = 0;
  3836. _this.promptMessage = "Please enter text:";
  3837. _this.onTextChangedObservable = new BABYLON.Observable();
  3838. _this.onFocusObservable = new BABYLON.Observable();
  3839. _this.onBlurObservable = new BABYLON.Observable();
  3840. _this.text = text;
  3841. return _this;
  3842. }
  3843. Object.defineProperty(InputText.prototype, "maxWidth", {
  3844. get: function () {
  3845. return this._maxWidth.toString(this._host);
  3846. },
  3847. set: function (value) {
  3848. if (this._maxWidth.toString(this._host) === value) {
  3849. return;
  3850. }
  3851. if (this._maxWidth.fromString(value)) {
  3852. this._markAsDirty();
  3853. }
  3854. },
  3855. enumerable: true,
  3856. configurable: true
  3857. });
  3858. Object.defineProperty(InputText.prototype, "maxWidthInPixels", {
  3859. get: function () {
  3860. return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
  3861. },
  3862. enumerable: true,
  3863. configurable: true
  3864. });
  3865. Object.defineProperty(InputText.prototype, "margin", {
  3866. get: function () {
  3867. return this._margin.toString(this._host);
  3868. },
  3869. set: function (value) {
  3870. if (this._margin.toString(this._host) === value) {
  3871. return;
  3872. }
  3873. if (this._margin.fromString(value)) {
  3874. this._markAsDirty();
  3875. }
  3876. },
  3877. enumerable: true,
  3878. configurable: true
  3879. });
  3880. Object.defineProperty(InputText.prototype, "marginInPixels", {
  3881. get: function () {
  3882. return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
  3883. },
  3884. enumerable: true,
  3885. configurable: true
  3886. });
  3887. Object.defineProperty(InputText.prototype, "autoStretchWidth", {
  3888. get: function () {
  3889. return this._autoStretchWidth;
  3890. },
  3891. set: function (value) {
  3892. if (this._autoStretchWidth === value) {
  3893. return;
  3894. }
  3895. this._autoStretchWidth = value;
  3896. this._markAsDirty();
  3897. },
  3898. enumerable: true,
  3899. configurable: true
  3900. });
  3901. Object.defineProperty(InputText.prototype, "thickness", {
  3902. get: function () {
  3903. return this._thickness;
  3904. },
  3905. set: function (value) {
  3906. if (this._thickness === value) {
  3907. return;
  3908. }
  3909. this._thickness = value;
  3910. this._markAsDirty();
  3911. },
  3912. enumerable: true,
  3913. configurable: true
  3914. });
  3915. Object.defineProperty(InputText.prototype, "focusedBackground", {
  3916. get: function () {
  3917. return this._focusedBackground;
  3918. },
  3919. set: function (value) {
  3920. if (this._focusedBackground === value) {
  3921. return;
  3922. }
  3923. this._focusedBackground = value;
  3924. this._markAsDirty();
  3925. },
  3926. enumerable: true,
  3927. configurable: true
  3928. });
  3929. Object.defineProperty(InputText.prototype, "background", {
  3930. get: function () {
  3931. return this._background;
  3932. },
  3933. set: function (value) {
  3934. if (this._background === value) {
  3935. return;
  3936. }
  3937. this._background = value;
  3938. this._markAsDirty();
  3939. },
  3940. enumerable: true,
  3941. configurable: true
  3942. });
  3943. Object.defineProperty(InputText.prototype, "placeholderColor", {
  3944. get: function () {
  3945. return this._placeholderColor;
  3946. },
  3947. set: function (value) {
  3948. if (this._placeholderColor === value) {
  3949. return;
  3950. }
  3951. this._placeholderColor = value;
  3952. this._markAsDirty();
  3953. },
  3954. enumerable: true,
  3955. configurable: true
  3956. });
  3957. Object.defineProperty(InputText.prototype, "placeholderText", {
  3958. get: function () {
  3959. return this._placeholderText;
  3960. },
  3961. set: function (value) {
  3962. if (this._placeholderText === value) {
  3963. return;
  3964. }
  3965. this._placeholderText = value;
  3966. this._markAsDirty();
  3967. },
  3968. enumerable: true,
  3969. configurable: true
  3970. });
  3971. Object.defineProperty(InputText.prototype, "text", {
  3972. get: function () {
  3973. return this._text;
  3974. },
  3975. set: function (value) {
  3976. if (this._text === value) {
  3977. return;
  3978. }
  3979. this._text = value;
  3980. this._markAsDirty();
  3981. this.onTextChangedObservable.notifyObservers(this);
  3982. },
  3983. enumerable: true,
  3984. configurable: true
  3985. });
  3986. InputText.prototype.onBlur = function () {
  3987. this._isFocused = false;
  3988. this._scrollLeft = null;
  3989. this._cursorOffset = 0;
  3990. clearTimeout(this._blinkTimeout);
  3991. this._markAsDirty();
  3992. this.onBlurObservable.notifyObservers(this);
  3993. };
  3994. InputText.prototype.onFocus = function () {
  3995. this._scrollLeft = null;
  3996. this._isFocused = true;
  3997. this._blinkIsEven = false;
  3998. this._cursorOffset = 0;
  3999. this._markAsDirty();
  4000. this.onFocusObservable.notifyObservers(this);
  4001. if (navigator.userAgent.indexOf("Mobile") !== -1) {
  4002. var value = prompt(this.promptMessage);
  4003. if (value !== null) {
  4004. this.text = value;
  4005. }
  4006. this._host.focusedControl = null;
  4007. return;
  4008. }
  4009. };
  4010. InputText.prototype._getTypeName = function () {
  4011. return "InputText";
  4012. };
  4013. InputText.prototype.processKey = function (keyCode, key) {
  4014. // Specific cases
  4015. switch (keyCode) {
  4016. case 8:// BACKSPACE
  4017. if (this._text && this._text.length > 0) {
  4018. if (this._cursorOffset === 0) {
  4019. this.text = this._text.substr(0, this._text.length - 1);
  4020. }
  4021. else {
  4022. var deletePosition = this._text.length - this._cursorOffset;
  4023. if (deletePosition > 0) {
  4024. this.text = this._text.slice(0, deletePosition - 1) + this._text.slice(deletePosition);
  4025. }
  4026. }
  4027. }
  4028. return;
  4029. case 46:// DELETE
  4030. if (this._text && this._text.length > 0) {
  4031. var deletePosition = this._text.length - this._cursorOffset;
  4032. this.text = this._text.slice(0, deletePosition) + this._text.slice(deletePosition + 1);
  4033. this._cursorOffset--;
  4034. }
  4035. return;
  4036. case 13:// RETURN
  4037. this._host.focusedControl = null;
  4038. return;
  4039. case 35:// END
  4040. this._cursorOffset = 0;
  4041. this._blinkIsEven = false;
  4042. this._markAsDirty();
  4043. return;
  4044. case 36:// HOME
  4045. this._cursorOffset = this._text.length;
  4046. this._blinkIsEven = false;
  4047. this._markAsDirty();
  4048. return;
  4049. case 37:// LEFT
  4050. this._cursorOffset++;
  4051. if (this._cursorOffset > this._text.length) {
  4052. this._cursorOffset = this._text.length;
  4053. }
  4054. this._blinkIsEven = false;
  4055. this._markAsDirty();
  4056. return;
  4057. case 39:// RIGHT
  4058. this._cursorOffset--;
  4059. if (this._cursorOffset < 0) {
  4060. this._cursorOffset = 0;
  4061. }
  4062. this._blinkIsEven = false;
  4063. this._markAsDirty();
  4064. return;
  4065. }
  4066. // Printable characters
  4067. if ((keyCode === -1) ||
  4068. (keyCode === 32) ||
  4069. (keyCode > 47 && keyCode < 58) ||
  4070. (keyCode > 64 && keyCode < 91) ||
  4071. (keyCode > 185 && keyCode < 193) ||
  4072. (keyCode > 218 && keyCode < 223) ||
  4073. (keyCode > 95 && keyCode < 112)) {
  4074. if (this._cursorOffset === 0) {
  4075. this.text += key;
  4076. }
  4077. else {
  4078. var insertPosition = this._text.length - this._cursorOffset;
  4079. this.text = this._text.slice(0, insertPosition) + key + this._text.slice(insertPosition);
  4080. }
  4081. }
  4082. };
  4083. InputText.prototype.processKeyboard = function (evt) {
  4084. this.processKey(evt.keyCode, evt.key);
  4085. };
  4086. InputText.prototype._draw = function (parentMeasure, context) {
  4087. var _this = this;
  4088. context.save();
  4089. this._applyStates(context);
  4090. if (this._processMeasures(parentMeasure, context)) {
  4091. // Background
  4092. if (this._isFocused) {
  4093. if (this._focusedBackground) {
  4094. context.fillStyle = this._focusedBackground;
  4095. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  4096. }
  4097. }
  4098. else if (this._background) {
  4099. context.fillStyle = this._background;
  4100. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  4101. }
  4102. if (!this._fontOffset) {
  4103. this._fontOffset = GUI.Control._GetFontOffset(context.font);
  4104. }
  4105. // Text
  4106. var clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, parentMeasure.width);
  4107. if (this.color) {
  4108. context.fillStyle = this.color;
  4109. }
  4110. var text = this._text;
  4111. if (!this._isFocused && !this._text && this._placeholderText) {
  4112. text = this._placeholderText;
  4113. if (this._placeholderColor) {
  4114. context.fillStyle = this._placeholderColor;
  4115. }
  4116. }
  4117. this._textWidth = context.measureText(text).width;
  4118. var marginWidth = this._margin.getValueInPixel(this._host, parentMeasure.width) * 2;
  4119. if (this._autoStretchWidth) {
  4120. this.width = Math.min(this._maxWidth.getValueInPixel(this._host, parentMeasure.width), this._textWidth + marginWidth) + "px";
  4121. }
  4122. var rootY = this._fontOffset.ascent + (this._currentMeasure.height - this._fontOffset.height) / 2;
  4123. var availableWidth = this._width.getValueInPixel(this._host, parentMeasure.width) - marginWidth;
  4124. context.save();
  4125. context.beginPath();
  4126. context.rect(clipTextLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, availableWidth + 2, this._currentMeasure.height);
  4127. context.clip();
  4128. if (this._isFocused && this._textWidth > availableWidth) {
  4129. var textLeft = clipTextLeft - this._textWidth + availableWidth;
  4130. if (!this._scrollLeft) {
  4131. this._scrollLeft = textLeft;
  4132. }
  4133. }
  4134. else {
  4135. this._scrollLeft = clipTextLeft;
  4136. }
  4137. context.fillText(text, this._scrollLeft, this._currentMeasure.top + rootY);
  4138. // Cursor
  4139. if (this._isFocused) {
  4140. // Need to move cursor
  4141. if (this._clickedCoordinate) {
  4142. var rightPosition = this._scrollLeft + this._textWidth;
  4143. var absoluteCursorPosition = rightPosition - this._clickedCoordinate;
  4144. var currentSize = 0;
  4145. this._cursorOffset = 0;
  4146. var previousDist = 0;
  4147. do {
  4148. if (this._cursorOffset) {
  4149. previousDist = Math.abs(absoluteCursorPosition - currentSize);
  4150. }
  4151. this._cursorOffset++;
  4152. currentSize = context.measureText(text.substr(text.length - this._cursorOffset, this._cursorOffset)).width;
  4153. } while (currentSize < absoluteCursorPosition);
  4154. // Find closest move
  4155. if (Math.abs(absoluteCursorPosition - currentSize) > previousDist) {
  4156. this._cursorOffset--;
  4157. }
  4158. this._blinkIsEven = false;
  4159. this._clickedCoordinate = null;
  4160. }
  4161. // Render cursor
  4162. if (!this._blinkIsEven) {
  4163. var cursorOffsetText = this.text.substr(this._text.length - this._cursorOffset);
  4164. var cursorOffsetWidth = context.measureText(cursorOffsetText).width;
  4165. var cursorLeft = this._scrollLeft + this._textWidth - cursorOffsetWidth;
  4166. if (cursorLeft < clipTextLeft) {
  4167. this._scrollLeft += (clipTextLeft - cursorLeft);
  4168. cursorLeft = clipTextLeft;
  4169. this._markAsDirty();
  4170. }
  4171. else if (cursorLeft > clipTextLeft + availableWidth) {
  4172. this._scrollLeft += (clipTextLeft + availableWidth - cursorLeft);
  4173. cursorLeft = clipTextLeft + availableWidth;
  4174. this._markAsDirty();
  4175. }
  4176. context.fillRect(cursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, 2, this._fontOffset.height);
  4177. }
  4178. clearTimeout(this._blinkTimeout);
  4179. this._blinkTimeout = setTimeout(function () {
  4180. _this._blinkIsEven = !_this._blinkIsEven;
  4181. _this._markAsDirty();
  4182. }, 500);
  4183. }
  4184. context.restore();
  4185. // Border
  4186. if (this._thickness) {
  4187. if (this.color) {
  4188. context.strokeStyle = this.color;
  4189. }
  4190. context.lineWidth = this._thickness;
  4191. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
  4192. }
  4193. }
  4194. context.restore();
  4195. };
  4196. InputText.prototype._onPointerDown = function (coordinates, buttonIndex) {
  4197. if (!_super.prototype._onPointerDown.call(this, coordinates, buttonIndex)) {
  4198. return false;
  4199. }
  4200. this._clickedCoordinate = coordinates.x;
  4201. if (this._host.focusedControl === this) {
  4202. // Move cursor
  4203. clearTimeout(this._blinkTimeout);
  4204. this._markAsDirty();
  4205. return true;
  4206. }
  4207. this._host.focusedControl = this;
  4208. return true;
  4209. };
  4210. InputText.prototype._onPointerUp = function (coordinates, buttonIndex) {
  4211. _super.prototype._onPointerUp.call(this, coordinates, buttonIndex);
  4212. };
  4213. InputText.prototype.dispose = function () {
  4214. _super.prototype.dispose.call(this);
  4215. this.onBlurObservable.clear();
  4216. this.onFocusObservable.clear();
  4217. this.onTextChangedObservable.clear();
  4218. };
  4219. return InputText;
  4220. }(GUI.Control));
  4221. GUI.InputText = InputText;
  4222. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  4223. })(BABYLON || (BABYLON = {}));
  4224. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  4225. var BABYLON;
  4226. (function (BABYLON) {
  4227. var GUI;
  4228. (function (GUI) {
  4229. var KeyPropertySet = (function () {
  4230. function KeyPropertySet() {
  4231. }
  4232. return KeyPropertySet;
  4233. }());
  4234. GUI.KeyPropertySet = KeyPropertySet;
  4235. var VirtualKeyboard = (function (_super) {
  4236. __extends(VirtualKeyboard, _super);
  4237. function VirtualKeyboard() {
  4238. var _this = _super !== null && _super.apply(this, arguments) || this;
  4239. _this.onKeyPressObservable = new BABYLON.Observable();
  4240. _this.defaultButtonWidth = "40px";
  4241. _this.defaultButtonHeight = "40px";
  4242. _this.defaultButtonPaddingLeft = "2px";
  4243. _this.defaultButtonPaddingRight = "2px";
  4244. _this.defaultButtonPaddingTop = "2px";
  4245. _this.defaultButtonPaddingBottom = "2px";
  4246. _this.defaultButtonColor = "#DDD";
  4247. _this.defaultButtonBackground = "#070707";
  4248. return _this;
  4249. }
  4250. VirtualKeyboard.prototype._getTypeName = function () {
  4251. return "VirtualKeyboard";
  4252. };
  4253. VirtualKeyboard.prototype._createKey = function (key, propertySet) {
  4254. var _this = this;
  4255. var button = GUI.Button.CreateSimpleButton(key, key);
  4256. button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
  4257. button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
  4258. button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor;
  4259. button.background = propertySet && propertySet.background ? propertySet.background : this.defaultButtonBackground;
  4260. button.paddingLeft = propertySet && propertySet.paddingLeft ? propertySet.paddingLeft : this.defaultButtonPaddingLeft;
  4261. button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight;
  4262. button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop;
  4263. button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom;
  4264. button.thickness = 0;
  4265. button.isFocusInvisible = true;
  4266. button.onPointerUpObservable.add(function () {
  4267. _this.onKeyPressObservable.notifyObservers(key);
  4268. });
  4269. return button;
  4270. };
  4271. VirtualKeyboard.prototype.addKeysRow = function (keys, propertySets) {
  4272. var panel = new GUI.StackPanel();
  4273. panel.isVertical = false;
  4274. panel.isFocusInvisible = true;
  4275. for (var i = 0; i < keys.length; i++) {
  4276. var properties = null;
  4277. if (propertySets && propertySets.length === keys.length) {
  4278. properties = propertySets[i];
  4279. }
  4280. panel.addControl(this._createKey(keys[i], properties));
  4281. }
  4282. this.addControl(panel);
  4283. };
  4284. Object.defineProperty(VirtualKeyboard.prototype, "connectedInputText", {
  4285. get: function () {
  4286. return this._connectedInputText;
  4287. },
  4288. enumerable: true,
  4289. configurable: true
  4290. });
  4291. VirtualKeyboard.prototype.connect = function (input) {
  4292. var _this = this;
  4293. this.isVisible = false;
  4294. this._connectedInputText = input;
  4295. // Events hooking
  4296. this._onFocusObserver = input.onFocusObservable.add(function () {
  4297. _this.isVisible = true;
  4298. });
  4299. this._onBlurObserver = input.onBlurObservable.add(function () {
  4300. _this.isVisible = false;
  4301. });
  4302. this._onKeyPressObserver = this.onKeyPressObservable.add(function (key) {
  4303. switch (key) {
  4304. case "\u2190":
  4305. _this._connectedInputText.processKey(8);
  4306. return;
  4307. case "\u21B5":
  4308. _this._connectedInputText.processKey(13);
  4309. return;
  4310. }
  4311. _this._connectedInputText.processKey(-1, key);
  4312. });
  4313. };
  4314. VirtualKeyboard.prototype.disconnect = function () {
  4315. if (!this._connectedInputText) {
  4316. return;
  4317. }
  4318. this._connectedInputText.onFocusObservable.remove(this._onFocusObserver);
  4319. this._connectedInputText.onBlurObservable.remove(this._onBlurObserver);
  4320. this.onKeyPressObservable.remove(this._onKeyPressObserver);
  4321. this._connectedInputText = null;
  4322. };
  4323. // Statics
  4324. VirtualKeyboard.CreateDefaultLayout = function () {
  4325. var returnValue = new VirtualKeyboard();
  4326. returnValue.addKeysRow(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "\u2190"]);
  4327. returnValue.addKeysRow(["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]);
  4328. returnValue.addKeysRow(["a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "\u21B5"]);
  4329. returnValue.addKeysRow(["z", "x", "c", "v", "b", "n", "m", ",", ".", "/"]);
  4330. returnValue.addKeysRow([" "], [{ width: "200px" }]);
  4331. return returnValue;
  4332. };
  4333. return VirtualKeyboard;
  4334. }(GUI.StackPanel));
  4335. GUI.VirtualKeyboard = VirtualKeyboard;
  4336. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  4337. })(BABYLON || (BABYLON = {}));
  4338. (function universalModuleDefinition(root, factory) {
  4339. if (root && root["BABYLON"]) {
  4340. return;
  4341. }
  4342. if(typeof exports === 'object' && typeof module === 'object')
  4343. module.exports = factory();
  4344. else if(typeof define === 'function' && define.amd)
  4345. define([], factory);
  4346. else if(typeof exports === 'object')
  4347. exports["GUI"] = factory();
  4348. else {
  4349. root["BABYLON"]["GUI"] = factory();
  4350. }
  4351. })(this, function() {
  4352. return BABYLON.GUI;
  4353. });