babylon.gui.js 193 KB

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