babylon.gui.js 241 KB

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