babylon.gui.js 192 KB

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