babylon.gui.js 192 KB

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