babylon.gui.js 775 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220622162226223622462256226622762286229623062316232623362346235623662376238623962406241624262436244624562466247624862496250625162526253625462556256625762586259626062616262626362646265626662676268626962706271627262736274627562766277627862796280628162826283628462856286628762886289629062916292629362946295629662976298629963006301630263036304630563066307630863096310631163126313631463156316631763186319632063216322632363246325632663276328632963306331633263336334633563366337633863396340634163426343634463456346634763486349635063516352635363546355635663576358635963606361636263636364636563666367636863696370637163726373637463756376637763786379638063816382638363846385638663876388638963906391639263936394639563966397639863996400640164026403640464056406640764086409641064116412641364146415641664176418641964206421642264236424642564266427642864296430643164326433643464356436643764386439644064416442644364446445644664476448644964506451645264536454645564566457645864596460646164626463646464656466646764686469647064716472647364746475647664776478647964806481648264836484648564866487648864896490649164926493649464956496649764986499650065016502650365046505650665076508650965106511651265136514651565166517651865196520652165226523652465256526652765286529653065316532653365346535653665376538653965406541654265436544654565466547654865496550655165526553655465556556655765586559656065616562656365646565656665676568656965706571657265736574657565766577657865796580658165826583658465856586658765886589659065916592659365946595659665976598659966006601660266036604660566066607660866096610661166126613661466156616661766186619662066216622662366246625662666276628662966306631663266336634663566366637663866396640664166426643664466456646664766486649665066516652665366546655665666576658665966606661666266636664666566666667666866696670667166726673667466756676667766786679668066816682668366846685668666876688668966906691669266936694669566966697669866996700670167026703670467056706670767086709671067116712671367146715671667176718671967206721672267236724672567266727672867296730673167326733673467356736673767386739674067416742674367446745674667476748674967506751675267536754675567566757675867596760676167626763676467656766676767686769677067716772677367746775677667776778677967806781678267836784678567866787678867896790679167926793679467956796679767986799680068016802680368046805680668076808680968106811681268136814681568166817681868196820682168226823682468256826682768286829683068316832683368346835683668376838683968406841684268436844684568466847684868496850685168526853685468556856685768586859686068616862686368646865686668676868686968706871687268736874687568766877687868796880688168826883688468856886688768886889689068916892689368946895689668976898689969006901690269036904690569066907690869096910691169126913691469156916691769186919692069216922692369246925692669276928692969306931693269336934693569366937693869396940694169426943694469456946694769486949695069516952695369546955695669576958695969606961696269636964696569666967696869696970697169726973697469756976697769786979698069816982698369846985698669876988698969906991699269936994699569966997699869997000700170027003700470057006700770087009701070117012701370147015701670177018701970207021702270237024702570267027702870297030703170327033703470357036703770387039704070417042704370447045704670477048704970507051705270537054705570567057705870597060706170627063706470657066706770687069707070717072707370747075707670777078707970807081708270837084708570867087708870897090709170927093709470957096709770987099710071017102710371047105710671077108710971107111711271137114711571167117711871197120712171227123712471257126712771287129713071317132713371347135713671377138713971407141714271437144714571467147714871497150715171527153715471557156715771587159716071617162716371647165716671677168716971707171717271737174717571767177717871797180718171827183718471857186718771887189719071917192719371947195719671977198719972007201720272037204720572067207720872097210721172127213721472157216721772187219722072217222722372247225722672277228722972307231723272337234723572367237723872397240724172427243724472457246724772487249725072517252725372547255725672577258725972607261726272637264726572667267726872697270727172727273727472757276727772787279728072817282728372847285728672877288728972907291729272937294729572967297729872997300730173027303730473057306730773087309731073117312731373147315731673177318731973207321732273237324732573267327732873297330733173327333733473357336733773387339734073417342734373447345734673477348734973507351735273537354735573567357735873597360736173627363736473657366736773687369737073717372737373747375737673777378737973807381738273837384738573867387738873897390739173927393739473957396739773987399740074017402740374047405740674077408740974107411741274137414741574167417741874197420742174227423742474257426742774287429743074317432743374347435743674377438743974407441744274437444744574467447744874497450745174527453745474557456745774587459746074617462746374647465746674677468746974707471747274737474747574767477747874797480748174827483748474857486748774887489749074917492749374947495749674977498749975007501750275037504750575067507750875097510751175127513751475157516751775187519752075217522752375247525752675277528752975307531753275337534753575367537753875397540754175427543754475457546754775487549755075517552755375547555755675577558755975607561756275637564756575667567756875697570757175727573757475757576757775787579758075817582758375847585758675877588758975907591759275937594759575967597759875997600760176027603760476057606760776087609761076117612761376147615761676177618761976207621762276237624762576267627762876297630763176327633763476357636763776387639764076417642764376447645764676477648764976507651765276537654765576567657765876597660766176627663766476657666766776687669767076717672767376747675767676777678767976807681768276837684768576867687768876897690769176927693769476957696769776987699770077017702770377047705770677077708770977107711771277137714771577167717771877197720772177227723772477257726772777287729773077317732773377347735773677377738773977407741774277437744774577467747774877497750775177527753775477557756775777587759776077617762776377647765776677677768776977707771777277737774777577767777777877797780778177827783778477857786778777887789779077917792779377947795779677977798779978007801780278037804780578067807780878097810781178127813781478157816781778187819782078217822782378247825782678277828782978307831783278337834783578367837783878397840784178427843784478457846784778487849785078517852785378547855785678577858785978607861786278637864786578667867786878697870787178727873787478757876787778787879788078817882788378847885788678877888788978907891789278937894789578967897789878997900790179027903790479057906790779087909791079117912791379147915791679177918791979207921792279237924792579267927792879297930793179327933793479357936793779387939794079417942794379447945794679477948794979507951795279537954795579567957795879597960796179627963796479657966796779687969797079717972797379747975797679777978797979807981798279837984798579867987798879897990799179927993799479957996799779987999800080018002800380048005800680078008800980108011801280138014801580168017801880198020802180228023802480258026802780288029803080318032803380348035803680378038803980408041804280438044804580468047804880498050805180528053805480558056805780588059806080618062806380648065806680678068806980708071807280738074807580768077807880798080808180828083808480858086808780888089809080918092809380948095809680978098809981008101810281038104810581068107810881098110811181128113811481158116811781188119812081218122812381248125812681278128812981308131813281338134813581368137813881398140814181428143814481458146814781488149815081518152815381548155815681578158815981608161816281638164816581668167816881698170817181728173817481758176817781788179818081818182818381848185818681878188818981908191819281938194819581968197819881998200820182028203820482058206820782088209821082118212821382148215821682178218821982208221822282238224822582268227822882298230823182328233823482358236823782388239824082418242824382448245824682478248824982508251825282538254825582568257825882598260826182628263826482658266826782688269827082718272827382748275827682778278827982808281828282838284828582868287828882898290829182928293829482958296829782988299830083018302830383048305830683078308830983108311831283138314831583168317831883198320832183228323832483258326832783288329833083318332833383348335833683378338833983408341834283438344834583468347834883498350835183528353835483558356835783588359836083618362836383648365836683678368836983708371837283738374837583768377837883798380838183828383838483858386838783888389839083918392839383948395839683978398839984008401840284038404840584068407840884098410841184128413841484158416841784188419842084218422842384248425842684278428842984308431843284338434843584368437843884398440844184428443844484458446844784488449845084518452845384548455845684578458845984608461846284638464846584668467846884698470847184728473847484758476847784788479848084818482848384848485848684878488848984908491849284938494849584968497849884998500850185028503850485058506850785088509851085118512851385148515851685178518851985208521852285238524852585268527852885298530853185328533853485358536853785388539854085418542854385448545854685478548854985508551855285538554855585568557855885598560856185628563856485658566856785688569857085718572857385748575857685778578857985808581858285838584858585868587858885898590859185928593859485958596859785988599860086018602860386048605860686078608860986108611861286138614861586168617861886198620862186228623862486258626862786288629863086318632863386348635863686378638863986408641864286438644864586468647864886498650865186528653865486558656865786588659866086618662866386648665866686678668866986708671867286738674867586768677867886798680868186828683868486858686868786888689869086918692869386948695869686978698869987008701870287038704870587068707870887098710871187128713871487158716871787188719872087218722872387248725872687278728872987308731873287338734873587368737873887398740874187428743874487458746874787488749875087518752875387548755875687578758875987608761876287638764876587668767876887698770877187728773877487758776877787788779878087818782878387848785878687878788878987908791879287938794879587968797879887998800880188028803880488058806880788088809881088118812881388148815881688178818881988208821882288238824882588268827882888298830883188328833883488358836883788388839884088418842884388448845884688478848884988508851885288538854885588568857885888598860886188628863886488658866886788688869887088718872887388748875887688778878887988808881888288838884888588868887888888898890889188928893889488958896889788988899890089018902890389048905890689078908890989108911891289138914891589168917891889198920892189228923892489258926892789288929893089318932893389348935893689378938893989408941894289438944894589468947894889498950895189528953895489558956895789588959896089618962896389648965896689678968896989708971897289738974897589768977897889798980898189828983898489858986898789888989899089918992899389948995899689978998899990009001900290039004900590069007900890099010901190129013901490159016901790189019902090219022902390249025902690279028902990309031903290339034903590369037903890399040904190429043904490459046904790489049905090519052905390549055905690579058905990609061906290639064906590669067906890699070907190729073907490759076907790789079908090819082908390849085908690879088908990909091909290939094909590969097909890999100910191029103910491059106910791089109911091119112911391149115911691179118911991209121912291239124912591269127912891299130913191329133913491359136913791389139914091419142914391449145914691479148914991509151915291539154915591569157915891599160916191629163916491659166916791689169917091719172917391749175917691779178917991809181918291839184918591869187918891899190919191929193919491959196919791989199920092019202920392049205920692079208920992109211921292139214921592169217921892199220922192229223922492259226922792289229923092319232923392349235923692379238923992409241924292439244924592469247924892499250925192529253925492559256925792589259926092619262926392649265926692679268926992709271927292739274927592769277927892799280928192829283928492859286928792889289929092919292929392949295929692979298929993009301930293039304930593069307930893099310931193129313931493159316931793189319932093219322932393249325932693279328932993309331933293339334933593369337933893399340934193429343934493459346934793489349935093519352935393549355935693579358935993609361936293639364936593669367936893699370937193729373937493759376937793789379938093819382938393849385938693879388938993909391939293939394939593969397939893999400940194029403940494059406940794089409941094119412941394149415941694179418941994209421942294239424942594269427942894299430943194329433943494359436943794389439944094419442944394449445944694479448944994509451945294539454945594569457945894599460946194629463946494659466946794689469947094719472947394749475947694779478947994809481948294839484948594869487948894899490949194929493949494959496949794989499950095019502950395049505950695079508950995109511951295139514951595169517951895199520952195229523952495259526952795289529953095319532953395349535953695379538953995409541954295439544954595469547954895499550955195529553955495559556955795589559956095619562956395649565956695679568956995709571957295739574957595769577957895799580958195829583958495859586958795889589959095919592959395949595959695979598959996009601960296039604960596069607960896099610961196129613961496159616961796189619962096219622962396249625962696279628962996309631963296339634963596369637963896399640964196429643964496459646964796489649965096519652965396549655965696579658965996609661966296639664966596669667966896699670967196729673967496759676967796789679968096819682968396849685968696879688968996909691969296939694969596969697969896999700970197029703970497059706970797089709971097119712971397149715971697179718971997209721972297239724972597269727972897299730973197329733973497359736973797389739974097419742974397449745974697479748974997509751975297539754975597569757975897599760976197629763976497659766976797689769977097719772977397749775977697779778977997809781978297839784978597869787978897899790979197929793979497959796979797989799980098019802980398049805980698079808980998109811981298139814981598169817981898199820982198229823982498259826982798289829983098319832983398349835983698379838983998409841984298439844984598469847984898499850985198529853985498559856985798589859986098619862986398649865986698679868986998709871987298739874987598769877987898799880988198829883988498859886988798889889989098919892989398949895989698979898989999009901990299039904990599069907990899099910991199129913991499159916991799189919992099219922992399249925992699279928992999309931993299339934993599369937993899399940994199429943994499459946994799489949995099519952995399549955995699579958995999609961996299639964996599669967996899699970997199729973997499759976997799789979998099819982998399849985998699879988998999909991999299939994999599969997999899991000010001100021000310004100051000610007100081000910010100111001210013100141001510016100171001810019100201002110022100231002410025100261002710028100291003010031100321003310034100351003610037100381003910040100411004210043100441004510046100471004810049100501005110052100531005410055100561005710058100591006010061100621006310064100651006610067100681006910070100711007210073100741007510076100771007810079100801008110082100831008410085100861008710088100891009010091100921009310094100951009610097100981009910100101011010210103101041010510106101071010810109101101011110112101131011410115101161011710118101191012010121101221012310124101251012610127101281012910130101311013210133101341013510136101371013810139101401014110142101431014410145101461014710148101491015010151101521015310154101551015610157101581015910160101611016210163101641016510166101671016810169101701017110172101731017410175101761017710178101791018010181101821018310184101851018610187101881018910190101911019210193101941019510196101971019810199102001020110202102031020410205102061020710208102091021010211102121021310214102151021610217102181021910220102211022210223102241022510226102271022810229102301023110232102331023410235102361023710238102391024010241102421024310244102451024610247102481024910250102511025210253102541025510256102571025810259102601026110262102631026410265102661026710268102691027010271102721027310274102751027610277102781027910280102811028210283102841028510286102871028810289102901029110292102931029410295102961029710298102991030010301103021030310304103051030610307103081030910310103111031210313103141031510316103171031810319103201032110322103231032410325103261032710328103291033010331103321033310334103351033610337103381033910340103411034210343103441034510346103471034810349103501035110352103531035410355103561035710358103591036010361103621036310364103651036610367103681036910370103711037210373103741037510376103771037810379103801038110382103831038410385103861038710388103891039010391103921039310394103951039610397103981039910400104011040210403104041040510406104071040810409104101041110412104131041410415104161041710418104191042010421104221042310424104251042610427104281042910430104311043210433104341043510436104371043810439104401044110442104431044410445104461044710448104491045010451104521045310454104551045610457104581045910460104611046210463104641046510466104671046810469104701047110472104731047410475104761047710478104791048010481104821048310484104851048610487104881048910490104911049210493104941049510496104971049810499105001050110502105031050410505105061050710508105091051010511105121051310514105151051610517105181051910520105211052210523105241052510526105271052810529105301053110532105331053410535105361053710538105391054010541105421054310544105451054610547105481054910550105511055210553105541055510556105571055810559105601056110562105631056410565105661056710568105691057010571105721057310574105751057610577105781057910580105811058210583105841058510586105871058810589105901059110592105931059410595105961059710598105991060010601106021060310604106051060610607106081060910610106111061210613106141061510616106171061810619106201062110622106231062410625106261062710628106291063010631106321063310634106351063610637106381063910640106411064210643106441064510646106471064810649106501065110652106531065410655106561065710658106591066010661106621066310664106651066610667106681066910670106711067210673106741067510676106771067810679106801068110682106831068410685106861068710688106891069010691106921069310694106951069610697106981069910700107011070210703107041070510706107071070810709107101071110712107131071410715107161071710718107191072010721107221072310724107251072610727107281072910730107311073210733107341073510736107371073810739107401074110742107431074410745107461074710748107491075010751107521075310754107551075610757107581075910760107611076210763107641076510766107671076810769107701077110772107731077410775107761077710778107791078010781107821078310784107851078610787107881078910790107911079210793107941079510796107971079810799108001080110802108031080410805108061080710808108091081010811108121081310814108151081610817108181081910820108211082210823108241082510826108271082810829108301083110832108331083410835108361083710838108391084010841108421084310844108451084610847108481084910850108511085210853108541085510856108571085810859108601086110862108631086410865108661086710868108691087010871108721087310874108751087610877108781087910880108811088210883108841088510886108871088810889108901089110892108931089410895108961089710898108991090010901109021090310904109051090610907109081090910910109111091210913109141091510916109171091810919109201092110922109231092410925109261092710928109291093010931109321093310934109351093610937109381093910940109411094210943109441094510946109471094810949109501095110952109531095410955109561095710958109591096010961109621096310964109651096610967109681096910970109711097210973109741097510976109771097810979109801098110982109831098410985109861098710988109891099010991109921099310994109951099610997109981099911000110011100211003110041100511006110071100811009110101101111012110131101411015110161101711018110191102011021110221102311024110251102611027110281102911030110311103211033110341103511036110371103811039110401104111042110431104411045110461104711048110491105011051110521105311054110551105611057110581105911060110611106211063110641106511066110671106811069110701107111072110731107411075110761107711078110791108011081110821108311084110851108611087110881108911090110911109211093110941109511096110971109811099111001110111102111031110411105111061110711108111091111011111111121111311114111151111611117111181111911120111211112211123111241112511126111271112811129111301113111132111331113411135111361113711138111391114011141111421114311144111451114611147111481114911150111511115211153111541115511156111571115811159111601116111162111631116411165111661116711168111691117011171111721117311174111751117611177111781117911180111811118211183111841118511186111871118811189111901119111192111931119411195111961119711198111991120011201112021120311204112051120611207112081120911210112111121211213112141121511216112171121811219112201122111222112231122411225112261122711228112291123011231112321123311234112351123611237112381123911240112411124211243112441124511246112471124811249112501125111252112531125411255112561125711258112591126011261112621126311264112651126611267112681126911270112711127211273112741127511276112771127811279112801128111282112831128411285112861128711288112891129011291112921129311294112951129611297112981129911300113011130211303113041130511306113071130811309113101131111312113131131411315113161131711318113191132011321113221132311324113251132611327113281132911330113311133211333113341133511336113371133811339113401134111342113431134411345113461134711348113491135011351113521135311354113551135611357113581135911360113611136211363113641136511366113671136811369113701137111372113731137411375113761137711378113791138011381113821138311384113851138611387113881138911390113911139211393113941139511396113971139811399114001140111402114031140411405114061140711408114091141011411114121141311414114151141611417114181141911420114211142211423114241142511426114271142811429114301143111432114331143411435114361143711438114391144011441114421144311444114451144611447114481144911450114511145211453114541145511456114571145811459114601146111462114631146411465114661146711468114691147011471114721147311474114751147611477114781147911480114811148211483114841148511486114871148811489114901149111492114931149411495114961149711498114991150011501115021150311504115051150611507115081150911510115111151211513115141151511516115171151811519115201152111522115231152411525115261152711528115291153011531115321153311534115351153611537115381153911540115411154211543115441154511546115471154811549115501155111552115531155411555115561155711558115591156011561115621156311564115651156611567115681156911570115711157211573115741157511576115771157811579115801158111582115831158411585115861158711588115891159011591115921159311594115951159611597115981159911600116011160211603116041160511606116071160811609116101161111612116131161411615116161161711618116191162011621116221162311624116251162611627116281162911630116311163211633116341163511636116371163811639116401164111642116431164411645116461164711648116491165011651116521165311654116551165611657116581165911660116611166211663116641166511666116671166811669116701167111672116731167411675116761167711678116791168011681116821168311684116851168611687116881168911690116911169211693116941169511696116971169811699117001170111702117031170411705117061170711708117091171011711117121171311714117151171611717117181171911720117211172211723117241172511726117271172811729117301173111732117331173411735117361173711738117391174011741117421174311744117451174611747117481174911750117511175211753117541175511756117571175811759117601176111762117631176411765117661176711768117691177011771117721177311774117751177611777117781177911780117811178211783117841178511786117871178811789117901179111792117931179411795117961179711798117991180011801118021180311804118051180611807118081180911810118111181211813118141181511816118171181811819118201182111822118231182411825118261182711828118291183011831118321183311834118351183611837118381183911840118411184211843118441184511846118471184811849118501185111852118531185411855118561185711858118591186011861118621186311864118651186611867118681186911870118711187211873118741187511876118771187811879118801188111882118831188411885118861188711888118891189011891118921189311894118951189611897118981189911900119011190211903119041190511906119071190811909119101191111912119131191411915119161191711918119191192011921119221192311924119251192611927119281192911930119311193211933119341193511936119371193811939119401194111942119431194411945119461194711948119491195011951119521195311954119551195611957119581195911960119611196211963119641196511966119671196811969119701197111972119731197411975119761197711978119791198011981119821198311984119851198611987119881198911990119911199211993119941199511996119971199811999120001200112002120031200412005120061200712008120091201012011120121201312014120151201612017120181201912020120211202212023120241202512026120271202812029120301203112032120331203412035120361203712038120391204012041120421204312044120451204612047120481204912050120511205212053120541205512056120571205812059120601206112062120631206412065120661206712068120691207012071120721207312074120751207612077120781207912080120811208212083120841208512086120871208812089120901209112092120931209412095120961209712098120991210012101121021210312104121051210612107121081210912110121111211212113121141211512116121171211812119121201212112122121231212412125121261212712128121291213012131121321213312134121351213612137121381213912140121411214212143121441214512146121471214812149121501215112152121531215412155121561215712158121591216012161121621216312164121651216612167121681216912170121711217212173121741217512176121771217812179121801218112182121831218412185121861218712188121891219012191121921219312194121951219612197121981219912200122011220212203122041220512206122071220812209122101221112212122131221412215122161221712218122191222012221122221222312224122251222612227122281222912230122311223212233122341223512236122371223812239122401224112242122431224412245122461224712248122491225012251122521225312254122551225612257122581225912260122611226212263122641226512266122671226812269122701227112272122731227412275122761227712278122791228012281122821228312284122851228612287122881228912290122911229212293122941229512296122971229812299123001230112302123031230412305123061230712308123091231012311123121231312314123151231612317123181231912320123211232212323123241232512326123271232812329123301233112332123331233412335123361233712338123391234012341123421234312344123451234612347123481234912350123511235212353123541235512356123571235812359123601236112362123631236412365123661236712368123691237012371123721237312374123751237612377123781237912380123811238212383123841238512386123871238812389123901239112392123931239412395123961239712398123991240012401124021240312404124051240612407124081240912410124111241212413124141241512416124171241812419124201242112422124231242412425124261242712428124291243012431124321243312434124351243612437124381243912440124411244212443124441244512446124471244812449124501245112452124531245412455124561245712458124591246012461124621246312464124651246612467124681246912470124711247212473124741247512476124771247812479124801248112482124831248412485124861248712488124891249012491124921249312494124951249612497124981249912500125011250212503125041250512506125071250812509125101251112512125131251412515125161251712518125191252012521125221252312524125251252612527125281252912530125311253212533125341253512536125371253812539125401254112542125431254412545125461254712548125491255012551125521255312554125551255612557125581255912560125611256212563125641256512566125671256812569125701257112572125731257412575125761257712578125791258012581125821258312584125851258612587125881258912590125911259212593125941259512596125971259812599126001260112602126031260412605126061260712608126091261012611126121261312614126151261612617126181261912620126211262212623126241262512626126271262812629126301263112632126331263412635126361263712638126391264012641126421264312644126451264612647126481264912650126511265212653126541265512656126571265812659126601266112662126631266412665126661266712668126691267012671126721267312674126751267612677126781267912680126811268212683126841268512686126871268812689126901269112692126931269412695126961269712698126991270012701127021270312704127051270612707127081270912710127111271212713127141271512716127171271812719127201272112722127231272412725127261272712728127291273012731127321273312734127351273612737127381273912740127411274212743127441274512746127471274812749127501275112752127531275412755127561275712758127591276012761127621276312764127651276612767127681276912770127711277212773127741277512776127771277812779127801278112782127831278412785127861278712788127891279012791127921279312794127951279612797127981279912800128011280212803128041280512806128071280812809128101281112812128131281412815128161281712818128191282012821128221282312824128251282612827128281282912830128311283212833128341283512836128371283812839128401284112842128431284412845128461284712848128491285012851128521285312854128551285612857128581285912860128611286212863128641286512866128671286812869128701287112872128731287412875128761287712878128791288012881128821288312884128851288612887128881288912890128911289212893128941289512896128971289812899129001290112902129031290412905129061290712908129091291012911129121291312914129151291612917129181291912920129211292212923129241292512926129271292812929129301293112932129331293412935129361293712938129391294012941129421294312944129451294612947129481294912950129511295212953129541295512956129571295812959129601296112962129631296412965129661296712968129691297012971129721297312974129751297612977129781297912980129811298212983129841298512986129871298812989129901299112992129931299412995129961299712998129991300013001130021300313004130051300613007130081300913010130111301213013130141301513016130171301813019130201302113022130231302413025130261302713028130291303013031130321303313034130351303613037130381303913040130411304213043130441304513046130471304813049130501305113052130531305413055130561305713058130591306013061130621306313064130651306613067130681306913070130711307213073130741307513076130771307813079130801308113082130831308413085130861308713088130891309013091130921309313094130951309613097130981309913100131011310213103131041310513106131071310813109131101311113112131131311413115131161311713118131191312013121131221312313124131251312613127131281312913130131311313213133131341313513136131371313813139131401314113142131431314413145131461314713148131491315013151131521315313154131551315613157131581315913160131611316213163131641316513166131671316813169131701317113172131731317413175131761317713178131791318013181131821318313184131851318613187131881318913190131911319213193131941319513196131971319813199132001320113202132031320413205132061320713208132091321013211132121321313214132151321613217132181321913220132211322213223132241322513226132271322813229132301323113232132331323413235132361323713238132391324013241132421324313244132451324613247132481324913250132511325213253132541325513256132571325813259132601326113262132631326413265132661326713268132691327013271132721327313274132751327613277132781327913280132811328213283132841328513286132871328813289132901329113292132931329413295132961329713298132991330013301133021330313304133051330613307133081330913310133111331213313133141331513316133171331813319133201332113322133231332413325133261332713328133291333013331133321333313334133351333613337133381333913340133411334213343133441334513346133471334813349133501335113352133531335413355133561335713358133591336013361133621336313364133651336613367133681336913370133711337213373133741337513376133771337813379133801338113382133831338413385133861338713388133891339013391133921339313394133951339613397133981339913400134011340213403134041340513406134071340813409134101341113412134131341413415134161341713418134191342013421134221342313424134251342613427134281342913430134311343213433134341343513436134371343813439134401344113442134431344413445134461344713448134491345013451134521345313454134551345613457134581345913460134611346213463134641346513466134671346813469134701347113472134731347413475134761347713478134791348013481134821348313484134851348613487134881348913490134911349213493134941349513496134971349813499135001350113502135031350413505135061350713508135091351013511135121351313514135151351613517135181351913520135211352213523135241352513526135271352813529135301353113532135331353413535135361353713538135391354013541135421354313544135451354613547135481354913550135511355213553135541355513556135571355813559135601356113562135631356413565135661356713568135691357013571135721357313574135751357613577135781357913580135811358213583135841358513586135871358813589135901359113592135931359413595135961359713598135991360013601136021360313604136051360613607136081360913610136111361213613136141361513616136171361813619136201362113622136231362413625136261362713628136291363013631136321363313634136351363613637136381363913640136411364213643136441364513646136471364813649136501365113652136531365413655136561365713658136591366013661136621366313664136651366613667136681366913670136711367213673136741367513676136771367813679136801368113682136831368413685136861368713688136891369013691136921369313694136951369613697136981369913700137011370213703137041370513706137071370813709137101371113712137131371413715137161371713718137191372013721137221372313724137251372613727137281372913730137311373213733137341373513736137371373813739137401374113742137431374413745137461374713748137491375013751137521375313754137551375613757137581375913760137611376213763137641376513766137671376813769137701377113772137731377413775137761377713778137791378013781137821378313784137851378613787137881378913790137911379213793137941379513796137971379813799138001380113802138031380413805138061380713808138091381013811138121381313814138151381613817138181381913820138211382213823138241382513826138271382813829138301383113832138331383413835138361383713838138391384013841138421384313844138451384613847138481384913850138511385213853138541385513856138571385813859138601386113862138631386413865138661386713868138691387013871138721387313874138751387613877138781387913880138811388213883138841388513886138871388813889138901389113892138931389413895138961389713898138991390013901139021390313904139051390613907139081390913910139111391213913139141391513916139171391813919139201392113922139231392413925139261392713928139291393013931139321393313934139351393613937139381393913940139411394213943139441394513946139471394813949139501395113952139531395413955139561395713958139591396013961139621396313964139651396613967139681396913970139711397213973139741397513976139771397813979139801398113982139831398413985139861398713988139891399013991139921399313994139951399613997139981399914000140011400214003140041400514006140071400814009140101401114012140131401414015140161401714018140191402014021140221402314024140251402614027140281402914030140311403214033140341403514036140371403814039140401404114042140431404414045140461404714048140491405014051140521405314054140551405614057140581405914060140611406214063140641406514066140671406814069140701407114072140731407414075140761407714078140791408014081140821408314084140851408614087140881408914090140911409214093140941409514096140971409814099141001410114102141031410414105141061410714108141091411014111141121411314114141151411614117141181411914120141211412214123141241412514126141271412814129141301413114132141331413414135141361413714138141391414014141141421414314144141451414614147141481414914150141511415214153141541415514156141571415814159141601416114162141631416414165141661416714168141691417014171141721417314174141751417614177141781417914180141811418214183141841418514186141871418814189141901419114192141931419414195141961419714198141991420014201142021420314204142051420614207142081420914210142111421214213142141421514216142171421814219142201422114222142231422414225142261422714228142291423014231142321423314234142351423614237142381423914240142411424214243142441424514246142471424814249142501425114252142531425414255142561425714258142591426014261142621426314264142651426614267142681426914270142711427214273142741427514276142771427814279142801428114282142831428414285142861428714288142891429014291142921429314294142951429614297142981429914300143011430214303143041430514306143071430814309143101431114312143131431414315143161431714318143191432014321143221432314324143251432614327143281432914330143311433214333143341433514336143371433814339143401434114342143431434414345143461434714348143491435014351143521435314354143551435614357143581435914360143611436214363143641436514366143671436814369143701437114372143731437414375143761437714378143791438014381143821438314384143851438614387143881438914390143911439214393143941439514396143971439814399144001440114402144031440414405144061440714408144091441014411144121441314414144151441614417144181441914420144211442214423144241442514426144271442814429144301443114432144331443414435144361443714438144391444014441144421444314444144451444614447144481444914450144511445214453144541445514456144571445814459144601446114462144631446414465144661446714468144691447014471144721447314474144751447614477144781447914480144811448214483144841448514486144871448814489144901449114492144931449414495144961449714498144991450014501145021450314504145051450614507145081450914510145111451214513145141451514516145171451814519145201452114522145231452414525145261452714528145291453014531145321453314534145351453614537145381453914540145411454214543145441454514546145471454814549145501455114552145531455414555145561455714558145591456014561145621456314564145651456614567145681456914570145711457214573145741457514576145771457814579145801458114582145831458414585145861458714588145891459014591145921459314594145951459614597145981459914600146011460214603146041460514606146071460814609146101461114612146131461414615146161461714618146191462014621146221462314624146251462614627146281462914630146311463214633146341463514636146371463814639146401464114642146431464414645146461464714648146491465014651146521465314654146551465614657146581465914660146611466214663146641466514666146671466814669146701467114672146731467414675146761467714678146791468014681146821468314684146851468614687146881468914690146911469214693146941469514696146971469814699147001470114702147031470414705147061470714708147091471014711147121471314714147151471614717147181471914720147211472214723147241472514726147271472814729147301473114732147331473414735147361473714738147391474014741147421474314744147451474614747147481474914750147511475214753147541475514756147571475814759147601476114762147631476414765147661476714768147691477014771147721477314774147751477614777147781477914780147811478214783147841478514786147871478814789147901479114792147931479414795147961479714798147991480014801148021480314804148051480614807148081480914810148111481214813148141481514816148171481814819148201482114822148231482414825148261482714828148291483014831148321483314834148351483614837148381483914840148411484214843148441484514846148471484814849148501485114852148531485414855148561485714858148591486014861148621486314864148651486614867148681486914870148711487214873148741487514876148771487814879148801488114882148831488414885148861488714888148891489014891148921489314894148951489614897148981489914900149011490214903149041490514906149071490814909149101491114912149131491414915149161491714918149191492014921149221492314924149251492614927149281492914930149311493214933149341493514936149371493814939149401494114942149431494414945149461494714948149491495014951149521495314954149551495614957149581495914960149611496214963149641496514966149671496814969149701497114972149731497414975149761497714978149791498014981149821498314984149851498614987149881498914990149911499214993149941499514996149971499814999150001500115002150031500415005150061500715008150091501015011150121501315014150151501615017150181501915020150211502215023150241502515026150271502815029150301503115032150331503415035150361503715038150391504015041150421504315044150451504615047150481504915050150511505215053150541505515056150571505815059150601506115062150631506415065150661506715068150691507015071150721507315074150751507615077150781507915080150811508215083150841508515086150871508815089150901509115092150931509415095150961509715098150991510015101151021510315104151051510615107151081510915110151111511215113151141511515116151171511815119151201512115122151231512415125151261512715128151291513015131151321513315134151351513615137151381513915140151411514215143151441514515146151471514815149151501515115152151531515415155151561515715158151591516015161151621516315164151651516615167151681516915170151711517215173151741517515176151771517815179151801518115182151831518415185151861518715188151891519015191151921519315194151951519615197151981519915200152011520215203152041520515206152071520815209152101521115212152131521415215152161521715218152191522015221152221522315224152251522615227152281522915230152311523215233152341523515236152371523815239152401524115242152431524415245152461524715248152491525015251152521525315254152551525615257152581525915260152611526215263152641526515266152671526815269152701527115272152731527415275152761527715278152791528015281152821528315284152851528615287152881528915290152911529215293152941529515296152971529815299153001530115302153031530415305153061530715308153091531015311153121531315314153151531615317153181531915320153211532215323153241532515326153271532815329153301533115332153331533415335153361533715338153391534015341153421534315344153451534615347153481534915350153511535215353153541535515356153571535815359153601536115362153631536415365153661536715368153691537015371153721537315374153751537615377153781537915380153811538215383153841538515386153871538815389153901539115392153931539415395153961539715398153991540015401154021540315404154051540615407154081540915410154111541215413154141541515416154171541815419154201542115422154231542415425154261542715428154291543015431154321543315434154351543615437154381543915440154411544215443154441544515446154471544815449154501545115452154531545415455154561545715458154591546015461154621546315464154651546615467154681546915470154711547215473154741547515476154771547815479154801548115482154831548415485154861548715488154891549015491154921549315494154951549615497154981549915500155011550215503155041550515506155071550815509155101551115512155131551415515155161551715518155191552015521155221552315524155251552615527155281552915530155311553215533155341553515536155371553815539155401554115542155431554415545155461554715548155491555015551155521555315554155551555615557155581555915560155611556215563155641556515566155671556815569155701557115572155731557415575155761557715578155791558015581155821558315584155851558615587155881558915590155911559215593155941559515596155971559815599156001560115602156031560415605156061560715608156091561015611156121561315614156151561615617156181561915620156211562215623156241562515626156271562815629156301563115632156331563415635156361563715638156391564015641156421564315644156451564615647156481564915650156511565215653156541565515656156571565815659156601566115662156631566415665156661566715668156691567015671156721567315674156751567615677156781567915680156811568215683156841568515686156871568815689156901569115692156931569415695156961569715698156991570015701157021570315704157051570615707157081570915710157111571215713157141571515716157171571815719157201572115722157231572415725157261572715728157291573015731157321573315734157351573615737157381573915740157411574215743157441574515746157471574815749157501575115752157531575415755157561575715758157591576015761157621576315764157651576615767157681576915770157711577215773157741577515776157771577815779157801578115782157831578415785157861578715788157891579015791157921579315794157951579615797157981579915800158011580215803158041580515806158071580815809158101581115812158131581415815158161581715818158191582015821158221582315824158251582615827158281582915830158311583215833158341583515836158371583815839158401584115842158431584415845158461584715848158491585015851158521585315854158551585615857158581585915860158611586215863158641586515866158671586815869158701587115872158731587415875158761587715878158791588015881158821588315884158851588615887158881588915890158911589215893158941589515896158971589815899159001590115902159031590415905159061590715908159091591015911159121591315914159151591615917159181591915920159211592215923159241592515926159271592815929159301593115932159331593415935159361593715938159391594015941159421594315944159451594615947159481594915950159511595215953159541595515956159571595815959159601596115962159631596415965159661596715968159691597015971159721597315974159751597615977159781597915980159811598215983159841598515986159871598815989159901599115992159931599415995159961599715998159991600016001160021600316004160051600616007160081600916010160111601216013160141601516016160171601816019160201602116022160231602416025160261602716028160291603016031160321603316034160351603616037160381603916040160411604216043160441604516046160471604816049160501605116052160531605416055160561605716058160591606016061160621606316064160651606616067160681606916070160711607216073160741607516076160771607816079160801608116082160831608416085160861608716088160891609016091160921609316094160951609616097160981609916100161011610216103161041610516106161071610816109161101611116112161131611416115161161611716118161191612016121161221612316124161251612616127161281612916130161311613216133161341613516136161371613816139161401614116142161431614416145161461614716148161491615016151161521615316154161551615616157161581615916160161611616216163161641616516166161671616816169161701617116172161731617416175161761617716178161791618016181161821618316184161851618616187161881618916190161911619216193161941619516196161971619816199162001620116202162031620416205162061620716208162091621016211162121621316214162151621616217162181621916220162211622216223162241622516226162271622816229162301623116232162331623416235162361623716238162391624016241162421624316244162451624616247162481624916250162511625216253162541625516256162571625816259162601626116262162631626416265162661626716268162691627016271162721627316274162751627616277162781627916280162811628216283162841628516286162871628816289162901629116292162931629416295162961629716298162991630016301163021630316304163051630616307163081630916310163111631216313163141631516316163171631816319163201632116322163231632416325163261632716328163291633016331163321633316334163351633616337163381633916340163411634216343163441634516346163471634816349163501635116352163531635416355163561635716358163591636016361163621636316364163651636616367163681636916370163711637216373163741637516376163771637816379163801638116382163831638416385163861638716388163891639016391163921639316394163951639616397163981639916400164011640216403164041640516406164071640816409164101641116412164131641416415164161641716418164191642016421164221642316424164251642616427164281642916430164311643216433164341643516436164371643816439164401644116442164431644416445164461644716448164491645016451164521645316454164551645616457164581645916460164611646216463164641646516466164671646816469164701647116472164731647416475164761647716478164791648016481164821648316484164851648616487164881648916490164911649216493164941649516496164971649816499165001650116502165031650416505165061650716508165091651016511165121651316514165151651616517165181651916520165211652216523165241652516526165271652816529165301653116532165331653416535165361653716538165391654016541165421654316544165451654616547165481654916550165511655216553165541655516556165571655816559165601656116562165631656416565165661656716568165691657016571165721657316574165751657616577165781657916580165811658216583165841658516586165871658816589165901659116592165931659416595165961659716598165991660016601166021660316604166051660616607166081660916610166111661216613166141661516616166171661816619166201662116622166231662416625166261662716628166291663016631166321663316634166351663616637166381663916640166411664216643166441664516646166471664816649166501665116652166531665416655166561665716658166591666016661166621666316664166651666616667166681666916670166711667216673166741667516676166771667816679166801668116682166831668416685166861668716688166891669016691166921669316694166951669616697166981669916700167011670216703167041670516706167071670816709167101671116712167131671416715167161671716718167191672016721167221672316724167251672616727167281672916730167311673216733167341673516736167371673816739167401674116742167431674416745167461674716748167491675016751167521675316754167551675616757167581675916760167611676216763167641676516766167671676816769167701677116772167731677416775167761677716778167791678016781167821678316784167851678616787167881678916790167911679216793167941679516796167971679816799168001680116802168031680416805168061680716808168091681016811168121681316814168151681616817168181681916820168211682216823168241682516826168271682816829168301683116832168331683416835168361683716838168391684016841168421684316844168451684616847168481684916850168511685216853168541685516856168571685816859168601686116862168631686416865168661686716868168691687016871168721687316874168751687616877168781687916880168811688216883168841688516886168871688816889168901689116892168931689416895168961689716898168991690016901169021690316904169051690616907169081690916910169111691216913169141691516916169171691816919169201692116922169231692416925169261692716928169291693016931169321693316934169351693616937169381693916940169411694216943169441694516946169471694816949169501695116952169531695416955169561695716958169591696016961169621696316964169651696616967169681696916970169711697216973169741697516976169771697816979169801698116982169831698416985169861698716988169891699016991169921699316994169951699616997169981699917000170011700217003170041700517006170071700817009170101701117012170131701417015170161701717018170191702017021170221702317024170251702617027170281702917030170311703217033170341703517036170371703817039170401704117042170431704417045170461704717048170491705017051170521705317054170551705617057170581705917060170611706217063170641706517066170671706817069170701707117072170731707417075170761707717078170791708017081170821708317084170851708617087170881708917090170911709217093170941709517096170971709817099171001710117102171031710417105171061710717108171091711017111171121711317114171151711617117171181711917120171211712217123171241712517126171271712817129171301713117132171331713417135171361713717138171391714017141171421714317144171451714617147171481714917150171511715217153171541715517156171571715817159171601716117162171631716417165171661716717168171691717017171171721717317174171751717617177171781717917180171811718217183171841718517186171871718817189171901719117192171931719417195171961719717198171991720017201172021720317204172051720617207172081720917210172111721217213172141721517216172171721817219172201722117222172231722417225172261722717228172291723017231172321723317234172351723617237172381723917240172411724217243172441724517246172471724817249172501725117252172531725417255172561725717258172591726017261172621726317264172651726617267172681726917270172711727217273172741727517276172771727817279172801728117282172831728417285172861728717288172891729017291172921729317294172951729617297172981729917300173011730217303173041730517306173071730817309173101731117312173131731417315173161731717318173191732017321173221732317324173251732617327173281732917330173311733217333173341733517336173371733817339173401734117342173431734417345173461734717348173491735017351173521735317354173551735617357173581735917360173611736217363173641736517366173671736817369173701737117372173731737417375173761737717378173791738017381173821738317384173851738617387173881738917390173911739217393173941739517396173971739817399174001740117402174031740417405174061740717408174091741017411174121741317414174151741617417174181741917420174211742217423174241742517426174271742817429174301743117432174331743417435174361743717438174391744017441174421744317444174451744617447174481744917450174511745217453174541745517456174571745817459174601746117462174631746417465174661746717468174691747017471174721747317474174751747617477174781747917480174811748217483174841748517486174871748817489174901749117492174931749417495174961749717498174991750017501175021750317504175051750617507175081750917510175111751217513175141751517516175171751817519175201752117522175231752417525175261752717528175291753017531175321753317534175351753617537175381753917540175411754217543175441754517546175471754817549175501755117552175531755417555175561755717558175591756017561175621756317564175651756617567175681756917570175711757217573175741757517576175771757817579175801758117582175831758417585175861758717588175891759017591175921759317594175951759617597175981759917600176011760217603176041760517606176071760817609176101761117612176131761417615176161761717618176191762017621176221762317624176251762617627176281762917630176311763217633176341763517636176371763817639176401764117642176431764417645176461764717648176491765017651176521765317654176551765617657176581765917660176611766217663176641766517666176671766817669176701767117672176731767417675176761767717678176791768017681176821768317684176851768617687176881768917690176911769217693176941769517696176971769817699177001770117702177031770417705177061770717708177091771017711177121771317714177151771617717177181771917720177211772217723177241772517726177271772817729177301773117732177331773417735177361773717738177391774017741177421774317744177451774617747177481774917750177511775217753177541775517756177571775817759177601776117762177631776417765177661776717768177691777017771177721777317774177751777617777
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2. if(typeof exports === 'object' && typeof module === 'object')
  3. module.exports = factory(require("babylonjs"));
  4. else if(typeof define === 'function' && define.amd)
  5. define("babylonjs-gui", ["babylonjs"], factory);
  6. else if(typeof exports === 'object')
  7. exports["babylonjs-gui"] = factory(require("babylonjs"));
  8. else
  9. root["BABYLON"] = root["BABYLON"] || {}, root["BABYLON"]["GUI"] = factory(root["BABYLON"]);
  10. })((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_perfCounter__) {
  11. return /******/ (function(modules) { // webpackBootstrap
  12. /******/ // The module cache
  13. /******/ var installedModules = {};
  14. /******/
  15. /******/ // The require function
  16. /******/ function __webpack_require__(moduleId) {
  17. /******/
  18. /******/ // Check if module is in cache
  19. /******/ if(installedModules[moduleId]) {
  20. /******/ return installedModules[moduleId].exports;
  21. /******/ }
  22. /******/ // Create a new module (and put it into the cache)
  23. /******/ var module = installedModules[moduleId] = {
  24. /******/ i: moduleId,
  25. /******/ l: false,
  26. /******/ exports: {}
  27. /******/ };
  28. /******/
  29. /******/ // Execute the module function
  30. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31. /******/
  32. /******/ // Flag the module as loaded
  33. /******/ module.l = true;
  34. /******/
  35. /******/ // Return the exports of the module
  36. /******/ return module.exports;
  37. /******/ }
  38. /******/
  39. /******/
  40. /******/ // expose the modules object (__webpack_modules__)
  41. /******/ __webpack_require__.m = modules;
  42. /******/
  43. /******/ // expose the module cache
  44. /******/ __webpack_require__.c = installedModules;
  45. /******/
  46. /******/ // define getter function for harmony exports
  47. /******/ __webpack_require__.d = function(exports, name, getter) {
  48. /******/ if(!__webpack_require__.o(exports, name)) {
  49. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  50. /******/ }
  51. /******/ };
  52. /******/
  53. /******/ // define __esModule on exports
  54. /******/ __webpack_require__.r = function(exports) {
  55. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  56. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  57. /******/ }
  58. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  59. /******/ };
  60. /******/
  61. /******/ // create a fake namespace object
  62. /******/ // mode & 1: value is a module id, require it
  63. /******/ // mode & 2: merge all properties of value into the ns
  64. /******/ // mode & 4: return value when already ns object
  65. /******/ // mode & 8|1: behave like require
  66. /******/ __webpack_require__.t = function(value, mode) {
  67. /******/ if(mode & 1) value = __webpack_require__(value);
  68. /******/ if(mode & 8) return value;
  69. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  70. /******/ var ns = Object.create(null);
  71. /******/ __webpack_require__.r(ns);
  72. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  73. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  74. /******/ return ns;
  75. /******/ };
  76. /******/
  77. /******/ // getDefaultExport function for compatibility with non-harmony modules
  78. /******/ __webpack_require__.n = function(module) {
  79. /******/ var getter = module && module.__esModule ?
  80. /******/ function getDefault() { return module['default']; } :
  81. /******/ function getModuleExports() { return module; };
  82. /******/ __webpack_require__.d(getter, 'a', getter);
  83. /******/ return getter;
  84. /******/ };
  85. /******/
  86. /******/ // Object.prototype.hasOwnProperty.call
  87. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  88. /******/
  89. /******/ // __webpack_public_path__
  90. /******/ __webpack_require__.p = "";
  91. /******/
  92. /******/
  93. /******/ // Load entry module and return exports
  94. /******/ return __webpack_require__(__webpack_require__.s = "./legacy/legacy.ts");
  95. /******/ })
  96. /************************************************************************/
  97. /******/ ({
  98. /***/ "../../node_modules/tslib/tslib.es6.js":
  99. /*!***********************************************************!*\
  100. !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
  101. \***********************************************************/
  102. /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __createBinding, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet */
  103. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  104. "use strict";
  105. __webpack_require__.r(__webpack_exports__);
  106. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__extends", function() { return __extends; });
  107. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__assign", function() { return __assign; });
  108. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__rest", function() { return __rest; });
  109. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__decorate", function() { return __decorate; });
  110. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__param", function() { return __param; });
  111. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__metadata", function() { return __metadata; });
  112. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__awaiter", function() { return __awaiter; });
  113. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__generator", function() { return __generator; });
  114. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__createBinding", function() { return __createBinding; });
  115. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__exportStar", function() { return __exportStar; });
  116. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__values", function() { return __values; });
  117. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__read", function() { return __read; });
  118. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__spread", function() { return __spread; });
  119. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__spreadArrays", function() { return __spreadArrays; });
  120. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__await", function() { return __await; });
  121. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__asyncGenerator", function() { return __asyncGenerator; });
  122. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__asyncDelegator", function() { return __asyncDelegator; });
  123. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__asyncValues", function() { return __asyncValues; });
  124. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__makeTemplateObject", function() { return __makeTemplateObject; });
  125. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__importStar", function() { return __importStar; });
  126. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__importDefault", function() { return __importDefault; });
  127. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__classPrivateFieldGet", function() { return __classPrivateFieldGet; });
  128. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__classPrivateFieldSet", function() { return __classPrivateFieldSet; });
  129. /*! *****************************************************************************
  130. Copyright (c) Microsoft Corporation.
  131. Permission to use, copy, modify, and/or distribute this software for any
  132. purpose with or without fee is hereby granted.
  133. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  134. REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  135. AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  136. INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  137. LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  138. OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  139. PERFORMANCE OF THIS SOFTWARE.
  140. ***************************************************************************** */
  141. /* global Reflect, Promise */
  142. var extendStatics = function(d, b) {
  143. extendStatics = Object.setPrototypeOf ||
  144. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  145. function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
  146. return extendStatics(d, b);
  147. };
  148. function __extends(d, b) {
  149. extendStatics(d, b);
  150. function __() { this.constructor = d; }
  151. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  152. }
  153. var __assign = function() {
  154. __assign = Object.assign || function __assign(t) {
  155. for (var s, i = 1, n = arguments.length; i < n; i++) {
  156. s = arguments[i];
  157. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  158. }
  159. return t;
  160. }
  161. return __assign.apply(this, arguments);
  162. }
  163. function __rest(s, e) {
  164. var t = {};
  165. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  166. t[p] = s[p];
  167. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  168. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  169. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  170. t[p[i]] = s[p[i]];
  171. }
  172. return t;
  173. }
  174. function __decorate(decorators, target, key, desc) {
  175. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  176. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  177. 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;
  178. return c > 3 && r && Object.defineProperty(target, key, r), r;
  179. }
  180. function __param(paramIndex, decorator) {
  181. return function (target, key) { decorator(target, key, paramIndex); }
  182. }
  183. function __metadata(metadataKey, metadataValue) {
  184. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
  185. }
  186. function __awaiter(thisArg, _arguments, P, generator) {
  187. function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  188. return new (P || (P = Promise))(function (resolve, reject) {
  189. function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  190. function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  191. function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
  192. step((generator = generator.apply(thisArg, _arguments || [])).next());
  193. });
  194. }
  195. function __generator(thisArg, body) {
  196. var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
  197. return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
  198. function verb(n) { return function (v) { return step([n, v]); }; }
  199. function step(op) {
  200. if (f) throw new TypeError("Generator is already executing.");
  201. while (_) try {
  202. if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
  203. if (y = 0, t) op = [op[0] & 2, t.value];
  204. switch (op[0]) {
  205. case 0: case 1: t = op; break;
  206. case 4: _.label++; return { value: op[1], done: false };
  207. case 5: _.label++; y = op[1]; op = [0]; continue;
  208. case 7: op = _.ops.pop(); _.trys.pop(); continue;
  209. default:
  210. if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
  211. if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
  212. if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
  213. if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
  214. if (t[2]) _.ops.pop();
  215. _.trys.pop(); continue;
  216. }
  217. op = body.call(thisArg, _);
  218. } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
  219. if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
  220. }
  221. }
  222. var __createBinding = Object.create ? (function(o, m, k, k2) {
  223. if (k2 === undefined) k2 = k;
  224. Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
  225. }) : (function(o, m, k, k2) {
  226. if (k2 === undefined) k2 = k;
  227. o[k2] = m[k];
  228. });
  229. function __exportStar(m, o) {
  230. for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
  231. }
  232. function __values(o) {
  233. var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
  234. if (m) return m.call(o);
  235. if (o && typeof o.length === "number") return {
  236. next: function () {
  237. if (o && i >= o.length) o = void 0;
  238. return { value: o && o[i++], done: !o };
  239. }
  240. };
  241. throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
  242. }
  243. function __read(o, n) {
  244. var m = typeof Symbol === "function" && o[Symbol.iterator];
  245. if (!m) return o;
  246. var i = m.call(o), r, ar = [], e;
  247. try {
  248. while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  249. }
  250. catch (error) { e = { error: error }; }
  251. finally {
  252. try {
  253. if (r && !r.done && (m = i["return"])) m.call(i);
  254. }
  255. finally { if (e) throw e.error; }
  256. }
  257. return ar;
  258. }
  259. function __spread() {
  260. for (var ar = [], i = 0; i < arguments.length; i++)
  261. ar = ar.concat(__read(arguments[i]));
  262. return ar;
  263. }
  264. function __spreadArrays() {
  265. for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
  266. for (var r = Array(s), k = 0, i = 0; i < il; i++)
  267. for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
  268. r[k] = a[j];
  269. return r;
  270. };
  271. function __await(v) {
  272. return this instanceof __await ? (this.v = v, this) : new __await(v);
  273. }
  274. function __asyncGenerator(thisArg, _arguments, generator) {
  275. if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
  276. var g = generator.apply(thisArg, _arguments || []), i, q = [];
  277. return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
  278. function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
  279. function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
  280. function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
  281. function fulfill(value) { resume("next", value); }
  282. function reject(value) { resume("throw", value); }
  283. function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
  284. }
  285. function __asyncDelegator(o) {
  286. var i, p;
  287. return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
  288. function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
  289. }
  290. function __asyncValues(o) {
  291. if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
  292. var m = o[Symbol.asyncIterator], i;
  293. return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
  294. function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
  295. function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
  296. }
  297. function __makeTemplateObject(cooked, raw) {
  298. if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  299. return cooked;
  300. };
  301. var __setModuleDefault = Object.create ? (function(o, v) {
  302. Object.defineProperty(o, "default", { enumerable: true, value: v });
  303. }) : function(o, v) {
  304. o["default"] = v;
  305. };
  306. function __importStar(mod) {
  307. if (mod && mod.__esModule) return mod;
  308. var result = {};
  309. if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
  310. __setModuleDefault(result, mod);
  311. return result;
  312. }
  313. function __importDefault(mod) {
  314. return (mod && mod.__esModule) ? mod : { default: mod };
  315. }
  316. function __classPrivateFieldGet(receiver, privateMap) {
  317. if (!privateMap.has(receiver)) {
  318. throw new TypeError("attempted to get private field on non-instance");
  319. }
  320. return privateMap.get(receiver);
  321. }
  322. function __classPrivateFieldSet(receiver, privateMap, value) {
  323. if (!privateMap.has(receiver)) {
  324. throw new TypeError("attempted to set private field on non-instance");
  325. }
  326. privateMap.set(receiver, value);
  327. return value;
  328. }
  329. /***/ }),
  330. /***/ "../../node_modules/webpack/buildin/global.js":
  331. /*!***********************************!*\
  332. !*** (webpack)/buildin/global.js ***!
  333. \***********************************/
  334. /*! no static exports found */
  335. /***/ (function(module, exports) {
  336. var g;
  337. // This works in non-strict mode
  338. g = (function() {
  339. return this;
  340. })();
  341. try {
  342. // This works if eval is allowed (see CSP)
  343. g = g || new Function("return this")();
  344. } catch (e) {
  345. // This works if the window reference is available
  346. if (typeof window === "object") g = window;
  347. }
  348. // g can still be undefined, but nothing to do about it...
  349. // We return undefined, instead of nothing here, so it's
  350. // easier to handle this case. if(!global) { ...}
  351. module.exports = g;
  352. /***/ }),
  353. /***/ "./2D/adtInstrumentation.ts":
  354. /*!**********************************!*\
  355. !*** ./2D/adtInstrumentation.ts ***!
  356. \**********************************/
  357. /*! exports provided: AdvancedDynamicTextureInstrumentation */
  358. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  359. "use strict";
  360. __webpack_require__.r(__webpack_exports__);
  361. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return AdvancedDynamicTextureInstrumentation; });
  362. /* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/perfCounter */ "babylonjs/Misc/perfCounter");
  363. /* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__);
  364. /**
  365. * This class can be used to get instrumentation data from a AdvancedDynamicTexture object
  366. */
  367. var AdvancedDynamicTextureInstrumentation = /** @class */ (function () {
  368. /**
  369. * Instantiates a new advanced dynamic texture instrumentation.
  370. * This class can be used to get instrumentation data from an AdvancedDynamicTexture object
  371. * @param texture Defines the AdvancedDynamicTexture to instrument
  372. */
  373. function AdvancedDynamicTextureInstrumentation(
  374. /**
  375. * Define the instrumented AdvancedDynamicTexture.
  376. */
  377. texture) {
  378. this.texture = texture;
  379. this._captureRenderTime = false;
  380. this._renderTime = new babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__["PerfCounter"]();
  381. this._captureLayoutTime = false;
  382. this._layoutTime = new babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__["PerfCounter"]();
  383. // Observers
  384. this._onBeginRenderObserver = null;
  385. this._onEndRenderObserver = null;
  386. this._onBeginLayoutObserver = null;
  387. this._onEndLayoutObserver = null;
  388. }
  389. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "renderTimeCounter", {
  390. // Properties
  391. /**
  392. * Gets the perf counter used to capture render time
  393. */
  394. get: function () {
  395. return this._renderTime;
  396. },
  397. enumerable: false,
  398. configurable: true
  399. });
  400. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "layoutTimeCounter", {
  401. /**
  402. * Gets the perf counter used to capture layout time
  403. */
  404. get: function () {
  405. return this._layoutTime;
  406. },
  407. enumerable: false,
  408. configurable: true
  409. });
  410. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "captureRenderTime", {
  411. /**
  412. * Enable or disable the render time capture
  413. */
  414. get: function () {
  415. return this._captureRenderTime;
  416. },
  417. set: function (value) {
  418. var _this = this;
  419. if (value === this._captureRenderTime) {
  420. return;
  421. }
  422. this._captureRenderTime = value;
  423. if (value) {
  424. this._onBeginRenderObserver = this.texture.onBeginRenderObservable.add(function () {
  425. _this._renderTime.beginMonitoring();
  426. });
  427. this._onEndRenderObserver = this.texture.onEndRenderObservable.add(function () {
  428. _this._renderTime.endMonitoring(true);
  429. });
  430. }
  431. else {
  432. this.texture.onBeginRenderObservable.remove(this._onBeginRenderObserver);
  433. this._onBeginRenderObserver = null;
  434. this.texture.onEndRenderObservable.remove(this._onEndRenderObserver);
  435. this._onEndRenderObserver = null;
  436. }
  437. },
  438. enumerable: false,
  439. configurable: true
  440. });
  441. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "captureLayoutTime", {
  442. /**
  443. * Enable or disable the layout time capture
  444. */
  445. get: function () {
  446. return this._captureLayoutTime;
  447. },
  448. set: function (value) {
  449. var _this = this;
  450. if (value === this._captureLayoutTime) {
  451. return;
  452. }
  453. this._captureLayoutTime = value;
  454. if (value) {
  455. this._onBeginLayoutObserver = this.texture.onBeginLayoutObservable.add(function () {
  456. _this._layoutTime.beginMonitoring();
  457. });
  458. this._onEndLayoutObserver = this.texture.onEndLayoutObservable.add(function () {
  459. _this._layoutTime.endMonitoring(true);
  460. });
  461. }
  462. else {
  463. this.texture.onBeginLayoutObservable.remove(this._onBeginLayoutObserver);
  464. this._onBeginLayoutObserver = null;
  465. this.texture.onEndLayoutObservable.remove(this._onEndLayoutObserver);
  466. this._onEndLayoutObserver = null;
  467. }
  468. },
  469. enumerable: false,
  470. configurable: true
  471. });
  472. /**
  473. * Dispose and release associated resources.
  474. */
  475. AdvancedDynamicTextureInstrumentation.prototype.dispose = function () {
  476. this.texture.onBeginRenderObservable.remove(this._onBeginRenderObserver);
  477. this._onBeginRenderObserver = null;
  478. this.texture.onEndRenderObservable.remove(this._onEndRenderObserver);
  479. this._onEndRenderObserver = null;
  480. this.texture.onBeginLayoutObservable.remove(this._onBeginLayoutObserver);
  481. this._onBeginLayoutObserver = null;
  482. this.texture.onEndLayoutObservable.remove(this._onEndLayoutObserver);
  483. this._onEndLayoutObserver = null;
  484. this.texture = null;
  485. };
  486. return AdvancedDynamicTextureInstrumentation;
  487. }());
  488. /***/ }),
  489. /***/ "./2D/advancedDynamicTexture.ts":
  490. /*!**************************************!*\
  491. !*** ./2D/advancedDynamicTexture.ts ***!
  492. \**************************************/
  493. /*! exports provided: AdvancedDynamicTexture */
  494. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  495. "use strict";
  496. __webpack_require__.r(__webpack_exports__);
  497. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return AdvancedDynamicTexture; });
  498. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  499. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  500. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  501. /* harmony import */ var _controls_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/container */ "./2D/controls/container.ts");
  502. /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
  503. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./measure */ "./2D/measure.ts");
  504. /**
  505. * Class used to create texture to support 2D GUI elements
  506. * @see https://doc.babylonjs.com/how_to/gui
  507. */
  508. var AdvancedDynamicTexture = /** @class */ (function (_super) {
  509. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(AdvancedDynamicTexture, _super);
  510. /**
  511. * Creates a new AdvancedDynamicTexture
  512. * @param name defines the name of the texture
  513. * @param width defines the width of the texture
  514. * @param height defines the height of the texture
  515. * @param scene defines the hosting scene
  516. * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
  517. * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
  518. * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
  519. */
  520. function AdvancedDynamicTexture(name, width, height, scene, generateMipMaps, samplingMode, invertY) {
  521. if (width === void 0) { width = 0; }
  522. if (height === void 0) { height = 0; }
  523. if (generateMipMaps === void 0) { generateMipMaps = false; }
  524. if (samplingMode === void 0) { samplingMode = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE; }
  525. var _this = _super.call(this, name, { width: width, height: height }, scene, generateMipMaps, samplingMode, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Constants"].TEXTUREFORMAT_RGBA, invertY) || this;
  526. _this._isDirty = false;
  527. /** @hidden */
  528. _this._rootContainer = new _controls_container__WEBPACK_IMPORTED_MODULE_2__["Container"]("root");
  529. /** @hidden */
  530. _this._lastControlOver = {};
  531. /** @hidden */
  532. _this._lastControlDown = {};
  533. /** @hidden */
  534. _this._capturingControl = {};
  535. /** @hidden */
  536. _this._linkedControls = new Array();
  537. _this._isFullscreen = false;
  538. _this._fullscreenViewport = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Viewport"](0, 0, 1, 1);
  539. _this._idealWidth = 0;
  540. _this._idealHeight = 0;
  541. _this._useSmallestIdeal = false;
  542. _this._renderAtIdealSize = false;
  543. _this._blockNextFocusCheck = false;
  544. _this._renderScale = 1;
  545. _this._cursorChanged = false;
  546. _this._defaultMousePointerId = 0;
  547. /** @hidden */
  548. _this._numLayoutCalls = 0;
  549. /** @hidden */
  550. _this._numRenderCalls = 0;
  551. /**
  552. * Define type to string to ensure compatibility across browsers
  553. * Safari doesn't support DataTransfer constructor
  554. */
  555. _this._clipboardData = "";
  556. /**
  557. * Observable event triggered each time an clipboard event is received from the rendering canvas
  558. */
  559. _this.onClipboardObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  560. /**
  561. * Observable event triggered each time a pointer down is intercepted by a control
  562. */
  563. _this.onControlPickedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  564. /**
  565. * Observable event triggered before layout is evaluated
  566. */
  567. _this.onBeginLayoutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  568. /**
  569. * Observable event triggered after the layout was evaluated
  570. */
  571. _this.onEndLayoutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  572. /**
  573. * Observable event triggered before the texture is rendered
  574. */
  575. _this.onBeginRenderObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  576. /**
  577. * Observable event triggered after the texture was rendered
  578. */
  579. _this.onEndRenderObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  580. /**
  581. * Gets or sets a boolean defining if alpha is stored as premultiplied
  582. */
  583. _this.premulAlpha = false;
  584. /**
  585. * Gets or sets a boolean indicating that the canvas must be reverted on Y when updating the texture
  586. */
  587. _this.applyYInversionOnUpdate = true;
  588. _this._useInvalidateRectOptimization = true;
  589. // Invalidated rectangle which is the combination of all invalidated controls after they have been rotated into absolute position
  590. _this._invalidatedRectangle = null;
  591. _this._clearMeasure = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](0, 0, 0, 0);
  592. /** @hidden */
  593. _this.onClipboardCopy = function (rawEvt) {
  594. var evt = rawEvt;
  595. var ev = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardInfo"](babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].COPY, evt);
  596. _this.onClipboardObservable.notifyObservers(ev);
  597. evt.preventDefault();
  598. };
  599. /** @hidden */
  600. _this.onClipboardCut = function (rawEvt) {
  601. var evt = rawEvt;
  602. var ev = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardInfo"](babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].CUT, evt);
  603. _this.onClipboardObservable.notifyObservers(ev);
  604. evt.preventDefault();
  605. };
  606. /** @hidden */
  607. _this.onClipboardPaste = function (rawEvt) {
  608. var evt = rawEvt;
  609. var ev = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardInfo"](babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].PASTE, evt);
  610. _this.onClipboardObservable.notifyObservers(ev);
  611. evt.preventDefault();
  612. };
  613. scene = _this.getScene();
  614. if (!scene || !_this._texture) {
  615. return _this;
  616. }
  617. _this._rootElement = scene.getEngine().getInputElement();
  618. _this._renderObserver = scene.onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
  619. _this._preKeyboardObserver = scene.onPreKeyboardObservable.add(function (info) {
  620. if (!_this._focusedControl) {
  621. return;
  622. }
  623. if (info.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["KeyboardEventTypes"].KEYDOWN) {
  624. _this._focusedControl.processKeyboard(info.event);
  625. }
  626. info.skipOnPointerObservable = true;
  627. });
  628. _this._rootContainer._link(_this);
  629. _this.hasAlpha = true;
  630. if (!width || !height) {
  631. _this._resizeObserver = scene.getEngine().onResizeObservable.add(function () { return _this._onResize(); });
  632. _this._onResize();
  633. }
  634. _this._texture.isReady = true;
  635. return _this;
  636. }
  637. Object.defineProperty(AdvancedDynamicTexture.prototype, "numLayoutCalls", {
  638. /** Gets the number of layout calls made the last time the ADT has been rendered */
  639. get: function () {
  640. return this._numLayoutCalls;
  641. },
  642. enumerable: false,
  643. configurable: true
  644. });
  645. Object.defineProperty(AdvancedDynamicTexture.prototype, "numRenderCalls", {
  646. /** Gets the number of render calls made the last time the ADT has been rendered */
  647. get: function () {
  648. return this._numRenderCalls;
  649. },
  650. enumerable: false,
  651. configurable: true
  652. });
  653. Object.defineProperty(AdvancedDynamicTexture.prototype, "renderScale", {
  654. /**
  655. * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
  656. * Useful when you want more antialiasing
  657. */
  658. get: function () {
  659. return this._renderScale;
  660. },
  661. set: function (value) {
  662. if (value === this._renderScale) {
  663. return;
  664. }
  665. this._renderScale = value;
  666. this._onResize();
  667. },
  668. enumerable: false,
  669. configurable: true
  670. });
  671. Object.defineProperty(AdvancedDynamicTexture.prototype, "background", {
  672. /** Gets or sets the background color */
  673. get: function () {
  674. return this._background;
  675. },
  676. set: function (value) {
  677. if (this._background === value) {
  678. return;
  679. }
  680. this._background = value;
  681. this.markAsDirty();
  682. },
  683. enumerable: false,
  684. configurable: true
  685. });
  686. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealWidth", {
  687. /**
  688. * Gets or sets the ideal width used to design controls.
  689. * The GUI will then rescale everything accordingly
  690. * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
  691. */
  692. get: function () {
  693. return this._idealWidth;
  694. },
  695. set: function (value) {
  696. if (this._idealWidth === value) {
  697. return;
  698. }
  699. this._idealWidth = value;
  700. this.markAsDirty();
  701. this._rootContainer._markAllAsDirty();
  702. },
  703. enumerable: false,
  704. configurable: true
  705. });
  706. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealHeight", {
  707. /**
  708. * Gets or sets the ideal height used to design controls.
  709. * The GUI will then rescale everything accordingly
  710. * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
  711. */
  712. get: function () {
  713. return this._idealHeight;
  714. },
  715. set: function (value) {
  716. if (this._idealHeight === value) {
  717. return;
  718. }
  719. this._idealHeight = value;
  720. this.markAsDirty();
  721. this._rootContainer._markAllAsDirty();
  722. },
  723. enumerable: false,
  724. configurable: true
  725. });
  726. Object.defineProperty(AdvancedDynamicTexture.prototype, "useSmallestIdeal", {
  727. /**
  728. * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
  729. * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
  730. */
  731. get: function () {
  732. return this._useSmallestIdeal;
  733. },
  734. set: function (value) {
  735. if (this._useSmallestIdeal === value) {
  736. return;
  737. }
  738. this._useSmallestIdeal = value;
  739. this.markAsDirty();
  740. this._rootContainer._markAllAsDirty();
  741. },
  742. enumerable: false,
  743. configurable: true
  744. });
  745. Object.defineProperty(AdvancedDynamicTexture.prototype, "renderAtIdealSize", {
  746. /**
  747. * Gets or sets a boolean indicating if adaptive scaling must be used
  748. * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
  749. */
  750. get: function () {
  751. return this._renderAtIdealSize;
  752. },
  753. set: function (value) {
  754. if (this._renderAtIdealSize === value) {
  755. return;
  756. }
  757. this._renderAtIdealSize = value;
  758. this._onResize();
  759. },
  760. enumerable: false,
  761. configurable: true
  762. });
  763. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealRatio", {
  764. /**
  765. * Gets the ratio used when in "ideal mode"
  766. * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
  767. * */
  768. get: function () {
  769. var rwidth = 0;
  770. var rheight = 0;
  771. if (this._idealWidth) {
  772. rwidth = (this.getSize().width) / this._idealWidth;
  773. }
  774. if (this._idealHeight) {
  775. rheight = (this.getSize().height) / this._idealHeight;
  776. }
  777. if (this._useSmallestIdeal && this._idealWidth && this._idealHeight) {
  778. return window.innerWidth < window.innerHeight ? rwidth : rheight;
  779. }
  780. if (this._idealWidth) { // horizontal
  781. return rwidth;
  782. }
  783. if (this._idealHeight) { // vertical
  784. return rheight;
  785. }
  786. return 1;
  787. },
  788. enumerable: false,
  789. configurable: true
  790. });
  791. Object.defineProperty(AdvancedDynamicTexture.prototype, "layer", {
  792. /**
  793. * Gets the underlying layer used to render the texture when in fullscreen mode
  794. */
  795. get: function () {
  796. return this._layerToDispose;
  797. },
  798. enumerable: false,
  799. configurable: true
  800. });
  801. Object.defineProperty(AdvancedDynamicTexture.prototype, "rootContainer", {
  802. /**
  803. * Gets the root container control
  804. */
  805. get: function () {
  806. return this._rootContainer;
  807. },
  808. enumerable: false,
  809. configurable: true
  810. });
  811. /**
  812. * Returns an array containing the root container.
  813. * This is mostly used to let the Inspector introspects the ADT
  814. * @returns an array containing the rootContainer
  815. */
  816. AdvancedDynamicTexture.prototype.getChildren = function () {
  817. return [this._rootContainer];
  818. };
  819. /**
  820. * Will return all controls that are inside this texture
  821. * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
  822. * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
  823. * @return all child controls
  824. */
  825. AdvancedDynamicTexture.prototype.getDescendants = function (directDescendantsOnly, predicate) {
  826. return this._rootContainer.getDescendants(directDescendantsOnly, predicate);
  827. };
  828. Object.defineProperty(AdvancedDynamicTexture.prototype, "focusedControl", {
  829. /**
  830. * Gets or sets the current focused control
  831. */
  832. get: function () {
  833. return this._focusedControl;
  834. },
  835. set: function (control) {
  836. if (this._focusedControl == control) {
  837. return;
  838. }
  839. if (this._focusedControl) {
  840. this._focusedControl.onBlur();
  841. }
  842. if (control) {
  843. control.onFocus();
  844. }
  845. this._focusedControl = control;
  846. },
  847. enumerable: false,
  848. configurable: true
  849. });
  850. Object.defineProperty(AdvancedDynamicTexture.prototype, "isForeground", {
  851. /**
  852. * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
  853. */
  854. get: function () {
  855. if (!this.layer) {
  856. return true;
  857. }
  858. return (!this.layer.isBackground);
  859. },
  860. set: function (value) {
  861. if (!this.layer) {
  862. return;
  863. }
  864. if (this.layer.isBackground === !value) {
  865. return;
  866. }
  867. this.layer.isBackground = !value;
  868. },
  869. enumerable: false,
  870. configurable: true
  871. });
  872. Object.defineProperty(AdvancedDynamicTexture.prototype, "clipboardData", {
  873. /**
  874. * Gets or set information about clipboardData
  875. */
  876. get: function () {
  877. return this._clipboardData;
  878. },
  879. set: function (value) {
  880. this._clipboardData = value;
  881. },
  882. enumerable: false,
  883. configurable: true
  884. });
  885. /**
  886. * Get the current class name of the texture useful for serialization or dynamic coding.
  887. * @returns "AdvancedDynamicTexture"
  888. */
  889. AdvancedDynamicTexture.prototype.getClassName = function () {
  890. return "AdvancedDynamicTexture";
  891. };
  892. /**
  893. * Function used to execute a function on all controls
  894. * @param func defines the function to execute
  895. * @param container defines the container where controls belong. If null the root container will be used
  896. */
  897. AdvancedDynamicTexture.prototype.executeOnAllControls = function (func, container) {
  898. if (!container) {
  899. container = this._rootContainer;
  900. }
  901. func(container);
  902. for (var _i = 0, _a = container.children; _i < _a.length; _i++) {
  903. var child = _a[_i];
  904. if (child.children) {
  905. this.executeOnAllControls(func, child);
  906. continue;
  907. }
  908. func(child);
  909. }
  910. };
  911. Object.defineProperty(AdvancedDynamicTexture.prototype, "useInvalidateRectOptimization", {
  912. /**
  913. * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
  914. */
  915. get: function () {
  916. return this._useInvalidateRectOptimization;
  917. },
  918. set: function (value) {
  919. this._useInvalidateRectOptimization = value;
  920. },
  921. enumerable: false,
  922. configurable: true
  923. });
  924. /**
  925. * Invalidates a rectangle area on the gui texture
  926. * @param invalidMinX left most position of the rectangle to invalidate in the texture
  927. * @param invalidMinY top most position of the rectangle to invalidate in the texture
  928. * @param invalidMaxX right most position of the rectangle to invalidate in the texture
  929. * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
  930. */
  931. AdvancedDynamicTexture.prototype.invalidateRect = function (invalidMinX, invalidMinY, invalidMaxX, invalidMaxY) {
  932. if (!this._useInvalidateRectOptimization) {
  933. return;
  934. }
  935. if (!this._invalidatedRectangle) {
  936. this._invalidatedRectangle = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](invalidMinX, invalidMinY, invalidMaxX - invalidMinX + 1, invalidMaxY - invalidMinY + 1);
  937. }
  938. else {
  939. // Compute intersection
  940. var maxX = Math.ceil(Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, invalidMaxX));
  941. var maxY = Math.ceil(Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, invalidMaxY));
  942. this._invalidatedRectangle.left = Math.floor(Math.min(this._invalidatedRectangle.left, invalidMinX));
  943. this._invalidatedRectangle.top = Math.floor(Math.min(this._invalidatedRectangle.top, invalidMinY));
  944. this._invalidatedRectangle.width = maxX - this._invalidatedRectangle.left + 1;
  945. this._invalidatedRectangle.height = maxY - this._invalidatedRectangle.top + 1;
  946. }
  947. };
  948. /**
  949. * Marks the texture as dirty forcing a complete update
  950. */
  951. AdvancedDynamicTexture.prototype.markAsDirty = function () {
  952. this._isDirty = true;
  953. };
  954. /**
  955. * Helper function used to create a new style
  956. * @returns a new style
  957. * @see https://doc.babylonjs.com/how_to/gui#styles
  958. */
  959. AdvancedDynamicTexture.prototype.createStyle = function () {
  960. return new _style__WEBPACK_IMPORTED_MODULE_3__["Style"](this);
  961. };
  962. /**
  963. * Adds a new control to the root container
  964. * @param control defines the control to add
  965. * @returns the current texture
  966. */
  967. AdvancedDynamicTexture.prototype.addControl = function (control) {
  968. this._rootContainer.addControl(control);
  969. return this;
  970. };
  971. /**
  972. * Removes a control from the root container
  973. * @param control defines the control to remove
  974. * @returns the current texture
  975. */
  976. AdvancedDynamicTexture.prototype.removeControl = function (control) {
  977. this._rootContainer.removeControl(control);
  978. return this;
  979. };
  980. /**
  981. * Release all resources
  982. */
  983. AdvancedDynamicTexture.prototype.dispose = function () {
  984. var scene = this.getScene();
  985. if (!scene) {
  986. return;
  987. }
  988. this._rootElement = null;
  989. scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
  990. if (this._resizeObserver) {
  991. scene.getEngine().onResizeObservable.remove(this._resizeObserver);
  992. }
  993. if (this._pointerMoveObserver) {
  994. scene.onPrePointerObservable.remove(this._pointerMoveObserver);
  995. }
  996. if (this._pointerObserver) {
  997. scene.onPointerObservable.remove(this._pointerObserver);
  998. }
  999. if (this._preKeyboardObserver) {
  1000. scene.onPreKeyboardObservable.remove(this._preKeyboardObserver);
  1001. }
  1002. if (this._canvasPointerOutObserver) {
  1003. scene.getEngine().onCanvasPointerOutObservable.remove(this._canvasPointerOutObserver);
  1004. }
  1005. if (this._canvasBlurObserver) {
  1006. scene.getEngine().onCanvasBlurObservable.remove(this._canvasBlurObserver);
  1007. }
  1008. if (this._layerToDispose) {
  1009. this._layerToDispose.texture = null;
  1010. this._layerToDispose.dispose();
  1011. this._layerToDispose = null;
  1012. }
  1013. this._rootContainer.dispose();
  1014. this.onClipboardObservable.clear();
  1015. this.onControlPickedObservable.clear();
  1016. this.onBeginRenderObservable.clear();
  1017. this.onEndRenderObservable.clear();
  1018. this.onBeginLayoutObservable.clear();
  1019. this.onEndLayoutObservable.clear();
  1020. _super.prototype.dispose.call(this);
  1021. };
  1022. AdvancedDynamicTexture.prototype._onResize = function () {
  1023. var scene = this.getScene();
  1024. if (!scene) {
  1025. return;
  1026. }
  1027. // Check size
  1028. var engine = scene.getEngine();
  1029. var textureSize = this.getSize();
  1030. var renderWidth = engine.getRenderWidth() * this._renderScale;
  1031. var renderHeight = engine.getRenderHeight() * this._renderScale;
  1032. if (this._renderAtIdealSize) {
  1033. if (this._idealWidth) {
  1034. renderHeight = (renderHeight * this._idealWidth) / renderWidth;
  1035. renderWidth = this._idealWidth;
  1036. }
  1037. else if (this._idealHeight) {
  1038. renderWidth = (renderWidth * this._idealHeight) / renderHeight;
  1039. renderHeight = this._idealHeight;
  1040. }
  1041. }
  1042. if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
  1043. this.scaleTo(renderWidth, renderHeight);
  1044. this.markAsDirty();
  1045. if (this._idealWidth || this._idealHeight) {
  1046. this._rootContainer._markAllAsDirty();
  1047. }
  1048. }
  1049. this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1);
  1050. };
  1051. /** @hidden */
  1052. AdvancedDynamicTexture.prototype._getGlobalViewport = function (scene) {
  1053. var engine = scene.getEngine();
  1054. return this._fullscreenViewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
  1055. };
  1056. /**
  1057. * Get screen coordinates for a vector3
  1058. * @param position defines the position to project
  1059. * @param worldMatrix defines the world matrix to use
  1060. * @returns the projected position
  1061. */
  1062. AdvancedDynamicTexture.prototype.getProjectedPosition = function (position, worldMatrix) {
  1063. var scene = this.getScene();
  1064. if (!scene) {
  1065. return babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector2"].Zero();
  1066. }
  1067. var globalViewport = this._getGlobalViewport(scene);
  1068. var projectedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
  1069. projectedPosition.scaleInPlace(this.renderScale);
  1070. return new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector2"](projectedPosition.x, projectedPosition.y);
  1071. };
  1072. /**
  1073. * Get screen coordinates for a vector3
  1074. * @param position defines the position to project
  1075. * @param worldMatrix defines the world matrix to use
  1076. * @returns the projected position with Z
  1077. */
  1078. AdvancedDynamicTexture.prototype.getProjectedPositionWithZ = function (position, worldMatrix) {
  1079. var scene = this.getScene();
  1080. if (!scene) {
  1081. return babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero();
  1082. }
  1083. var globalViewport = this._getGlobalViewport(scene);
  1084. var projectedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
  1085. projectedPosition.scaleInPlace(this.renderScale);
  1086. return new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"](projectedPosition.x, projectedPosition.y, projectedPosition.z);
  1087. };
  1088. AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
  1089. if (this._layerToDispose) {
  1090. if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {
  1091. return;
  1092. }
  1093. }
  1094. if (this._isFullscreen && this._linkedControls.length) {
  1095. var scene = this.getScene();
  1096. if (!scene) {
  1097. return;
  1098. }
  1099. var globalViewport = this._getGlobalViewport(scene);
  1100. var _loop_1 = function (control) {
  1101. if (!control.isVisible) {
  1102. return "continue";
  1103. }
  1104. var mesh = control._linkedMesh;
  1105. if (!mesh || mesh.isDisposed()) {
  1106. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  1107. control.linkWithMesh(null);
  1108. });
  1109. return "continue";
  1110. }
  1111. var position = mesh.getBoundingInfo ? mesh.getBoundingInfo().boundingSphere.center : babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].ZeroReadOnly;
  1112. var projectedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Project(position, mesh.getWorldMatrix(), scene.getTransformMatrix(), globalViewport);
  1113. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  1114. control.notRenderable = true;
  1115. return "continue";
  1116. }
  1117. control.notRenderable = false;
  1118. // Account for RenderScale.
  1119. projectedPosition.scaleInPlace(this_1.renderScale);
  1120. control._moveToProjectedPosition(projectedPosition);
  1121. };
  1122. var this_1 = this;
  1123. for (var _i = 0, _a = this._linkedControls; _i < _a.length; _i++) {
  1124. var control = _a[_i];
  1125. _loop_1(control);
  1126. }
  1127. }
  1128. if (!this._isDirty && !this._rootContainer.isDirty) {
  1129. return;
  1130. }
  1131. this._isDirty = false;
  1132. this._render();
  1133. this.update(this.applyYInversionOnUpdate, this.premulAlpha);
  1134. };
  1135. AdvancedDynamicTexture.prototype._render = function () {
  1136. var textureSize = this.getSize();
  1137. var renderWidth = textureSize.width;
  1138. var renderHeight = textureSize.height;
  1139. var context = this.getContext();
  1140. context.font = "18px Arial";
  1141. context.strokeStyle = "white";
  1142. // Layout
  1143. this.onBeginLayoutObservable.notifyObservers(this);
  1144. var measure = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](0, 0, renderWidth, renderHeight);
  1145. this._numLayoutCalls = 0;
  1146. this._rootContainer._layout(measure, context);
  1147. this.onEndLayoutObservable.notifyObservers(this);
  1148. this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
  1149. // Clear
  1150. if (this._invalidatedRectangle) {
  1151. this._clearMeasure.copyFrom(this._invalidatedRectangle);
  1152. }
  1153. else {
  1154. this._clearMeasure.copyFromFloats(0, 0, renderWidth, renderHeight);
  1155. }
  1156. context.clearRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
  1157. if (this._background) {
  1158. context.save();
  1159. context.fillStyle = this._background;
  1160. context.fillRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
  1161. context.restore();
  1162. }
  1163. // Render
  1164. this.onBeginRenderObservable.notifyObservers(this);
  1165. this._numRenderCalls = 0;
  1166. this._rootContainer._render(context, this._invalidatedRectangle);
  1167. this.onEndRenderObservable.notifyObservers(this);
  1168. this._invalidatedRectangle = null;
  1169. };
  1170. /** @hidden */
  1171. AdvancedDynamicTexture.prototype._changeCursor = function (cursor) {
  1172. if (this._rootElement) {
  1173. this._rootElement.style.cursor = cursor;
  1174. this._cursorChanged = true;
  1175. }
  1176. };
  1177. /** @hidden */
  1178. AdvancedDynamicTexture.prototype._registerLastControlDown = function (control, pointerId) {
  1179. this._lastControlDown[pointerId] = control;
  1180. this.onControlPickedObservable.notifyObservers(control);
  1181. };
  1182. AdvancedDynamicTexture.prototype._doPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
  1183. var scene = this.getScene();
  1184. if (!scene) {
  1185. return;
  1186. }
  1187. var engine = scene.getEngine();
  1188. var textureSize = this.getSize();
  1189. if (this._isFullscreen) {
  1190. var camera = scene.cameraToUseForPointers || scene.activeCamera;
  1191. var viewport = camera.viewport;
  1192. x = x * (textureSize.width / (engine.getRenderWidth() * viewport.width));
  1193. y = y * (textureSize.height / (engine.getRenderHeight() * viewport.height));
  1194. }
  1195. if (this._capturingControl[pointerId]) {
  1196. this._capturingControl[pointerId]._processObservables(type, x, y, pi, pointerId, buttonIndex);
  1197. return;
  1198. }
  1199. this._cursorChanged = false;
  1200. if (!this._rootContainer._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
  1201. this._changeCursor("");
  1202. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE) {
  1203. if (this._lastControlOver[pointerId]) {
  1204. this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId], pi);
  1205. delete this._lastControlOver[pointerId];
  1206. }
  1207. }
  1208. }
  1209. if (!this._cursorChanged) {
  1210. this._changeCursor("");
  1211. }
  1212. this._manageFocus();
  1213. };
  1214. /** @hidden */
  1215. AdvancedDynamicTexture.prototype._cleanControlAfterRemovalFromList = function (list, control) {
  1216. for (var pointerId in list) {
  1217. if (!list.hasOwnProperty(pointerId)) {
  1218. continue;
  1219. }
  1220. var lastControlOver = list[pointerId];
  1221. if (lastControlOver === control) {
  1222. delete list[pointerId];
  1223. }
  1224. }
  1225. };
  1226. /** @hidden */
  1227. AdvancedDynamicTexture.prototype._cleanControlAfterRemoval = function (control) {
  1228. this._cleanControlAfterRemovalFromList(this._lastControlDown, control);
  1229. this._cleanControlAfterRemovalFromList(this._lastControlOver, control);
  1230. };
  1231. /** Attach to all scene events required to support pointer events */
  1232. AdvancedDynamicTexture.prototype.attach = function () {
  1233. var _this = this;
  1234. var scene = this.getScene();
  1235. if (!scene) {
  1236. return;
  1237. }
  1238. var tempViewport = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Viewport"](0, 0, 0, 0);
  1239. this._pointerMoveObserver = scene.onPrePointerObservable.add(function (pi, state) {
  1240. if (scene.isPointerCaptured((pi.event).pointerId)) {
  1241. return;
  1242. }
  1243. if (pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE
  1244. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERUP
  1245. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERDOWN
  1246. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERWHEEL) {
  1247. return;
  1248. }
  1249. if (!scene) {
  1250. return;
  1251. }
  1252. if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE && pi.event.pointerId) {
  1253. _this._defaultMousePointerId = pi.event.pointerId; // This is required to make sure we have the correct pointer ID for wheel
  1254. }
  1255. var camera = scene.cameraToUseForPointers || scene.activeCamera;
  1256. var engine = scene.getEngine();
  1257. if (!camera) {
  1258. tempViewport.x = 0;
  1259. tempViewport.y = 0;
  1260. tempViewport.width = engine.getRenderWidth();
  1261. tempViewport.height = engine.getRenderHeight();
  1262. }
  1263. else {
  1264. camera.viewport.toGlobalToRef(engine.getRenderWidth(), engine.getRenderHeight(), tempViewport);
  1265. }
  1266. var x = scene.pointerX / engine.getHardwareScalingLevel() - tempViewport.x;
  1267. var y = scene.pointerY / engine.getHardwareScalingLevel() - (engine.getRenderHeight() - tempViewport.y - tempViewport.height);
  1268. _this._shouldBlockPointer = false;
  1269. // Do picking modifies _shouldBlockPointer
  1270. var pointerId = pi.event.pointerId || _this._defaultMousePointerId;
  1271. _this._doPicking(x, y, pi, pi.type, pointerId, pi.event.button, pi.event.deltaX, pi.event.deltaY);
  1272. // Avoid overwriting a true skipOnPointerObservable to false
  1273. if (_this._shouldBlockPointer) {
  1274. pi.skipOnPointerObservable = _this._shouldBlockPointer;
  1275. }
  1276. });
  1277. this._attachToOnPointerOut(scene);
  1278. this._attachToOnBlur(scene);
  1279. };
  1280. /**
  1281. * Register the clipboard Events onto the canvas
  1282. */
  1283. AdvancedDynamicTexture.prototype.registerClipboardEvents = function () {
  1284. self.addEventListener("copy", this.onClipboardCopy, false);
  1285. self.addEventListener("cut", this.onClipboardCut, false);
  1286. self.addEventListener("paste", this.onClipboardPaste, false);
  1287. };
  1288. /**
  1289. * Unregister the clipboard Events from the canvas
  1290. */
  1291. AdvancedDynamicTexture.prototype.unRegisterClipboardEvents = function () {
  1292. self.removeEventListener("copy", this.onClipboardCopy);
  1293. self.removeEventListener("cut", this.onClipboardCut);
  1294. self.removeEventListener("paste", this.onClipboardPaste);
  1295. };
  1296. /**
  1297. * Connect the texture to a hosting mesh to enable interactions
  1298. * @param mesh defines the mesh to attach to
  1299. * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
  1300. */
  1301. AdvancedDynamicTexture.prototype.attachToMesh = function (mesh, supportPointerMove) {
  1302. var _this = this;
  1303. if (supportPointerMove === void 0) { supportPointerMove = true; }
  1304. var scene = this.getScene();
  1305. if (!scene) {
  1306. return;
  1307. }
  1308. this._pointerObserver = scene.onPointerObservable.add(function (pi, state) {
  1309. if (pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE
  1310. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERUP
  1311. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERDOWN) {
  1312. return;
  1313. }
  1314. var pointerId = pi.event.pointerId || _this._defaultMousePointerId;
  1315. if (pi.pickInfo && pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
  1316. var uv = pi.pickInfo.getTextureCoordinates();
  1317. if (uv) {
  1318. var size = _this.getSize();
  1319. _this._doPicking(uv.x * size.width, (_this.applyYInversionOnUpdate ? (1.0 - uv.y) : uv.y) * size.height, pi, pi.type, pointerId, pi.event.button);
  1320. }
  1321. }
  1322. else if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERUP) {
  1323. if (_this._lastControlDown[pointerId]) {
  1324. _this._lastControlDown[pointerId]._forcePointerUp(pointerId);
  1325. }
  1326. delete _this._lastControlDown[pointerId];
  1327. if (_this.focusedControl) {
  1328. var friendlyControls = _this.focusedControl.keepsFocusWith();
  1329. var canMoveFocus = true;
  1330. if (friendlyControls) {
  1331. for (var _i = 0, friendlyControls_1 = friendlyControls; _i < friendlyControls_1.length; _i++) {
  1332. var control = friendlyControls_1[_i];
  1333. // Same host, no need to keep the focus
  1334. if (_this === control._host) {
  1335. continue;
  1336. }
  1337. // Different hosts
  1338. var otherHost = control._host;
  1339. if (otherHost._lastControlOver[pointerId] && otherHost._lastControlOver[pointerId].isAscendant(control)) {
  1340. canMoveFocus = false;
  1341. break;
  1342. }
  1343. }
  1344. }
  1345. if (canMoveFocus) {
  1346. _this.focusedControl = null;
  1347. }
  1348. }
  1349. }
  1350. else if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE) {
  1351. if (_this._lastControlOver[pointerId]) {
  1352. _this._lastControlOver[pointerId]._onPointerOut(_this._lastControlOver[pointerId], pi, true);
  1353. }
  1354. delete _this._lastControlOver[pointerId];
  1355. }
  1356. });
  1357. mesh.enablePointerMoveEvents = supportPointerMove;
  1358. this._attachToOnPointerOut(scene);
  1359. this._attachToOnBlur(scene);
  1360. };
  1361. /**
  1362. * Move the focus to a specific control
  1363. * @param control defines the control which will receive the focus
  1364. */
  1365. AdvancedDynamicTexture.prototype.moveFocusToControl = function (control) {
  1366. this.focusedControl = control;
  1367. this._lastPickedControl = control;
  1368. this._blockNextFocusCheck = true;
  1369. };
  1370. AdvancedDynamicTexture.prototype._manageFocus = function () {
  1371. if (this._blockNextFocusCheck) {
  1372. this._blockNextFocusCheck = false;
  1373. this._lastPickedControl = this._focusedControl;
  1374. return;
  1375. }
  1376. // Focus management
  1377. if (this._focusedControl) {
  1378. if (this._focusedControl !== this._lastPickedControl) {
  1379. if (this._lastPickedControl.isFocusInvisible) {
  1380. return;
  1381. }
  1382. this.focusedControl = null;
  1383. }
  1384. }
  1385. };
  1386. AdvancedDynamicTexture.prototype._attachToOnPointerOut = function (scene) {
  1387. var _this = this;
  1388. this._canvasPointerOutObserver = scene.getEngine().onCanvasPointerOutObservable.add(function (pointerEvent) {
  1389. if (_this._lastControlOver[pointerEvent.pointerId]) {
  1390. _this._lastControlOver[pointerEvent.pointerId]._onPointerOut(_this._lastControlOver[pointerEvent.pointerId], null);
  1391. }
  1392. delete _this._lastControlOver[pointerEvent.pointerId];
  1393. if (_this._lastControlDown[pointerEvent.pointerId] && _this._lastControlDown[pointerEvent.pointerId] !== _this._capturingControl[pointerEvent.pointerId]) {
  1394. _this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
  1395. delete _this._lastControlDown[pointerEvent.pointerId];
  1396. }
  1397. });
  1398. };
  1399. AdvancedDynamicTexture.prototype._attachToOnBlur = function (scene) {
  1400. var _this = this;
  1401. this._canvasBlurObserver = scene.getEngine().onCanvasBlurObservable.add(function (pointerEvent) {
  1402. Object.entries(_this._lastControlDown).forEach(function (_a) {
  1403. var key = _a[0], value = _a[1];
  1404. value._onCanvasBlur();
  1405. });
  1406. _this._lastControlDown = {};
  1407. });
  1408. };
  1409. // Statics
  1410. /**
  1411. * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
  1412. * @param mesh defines the mesh which will receive the texture
  1413. * @param width defines the texture width (1024 by default)
  1414. * @param height defines the texture height (1024 by default)
  1415. * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
  1416. * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
  1417. * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
  1418. * @returns a new AdvancedDynamicTexture
  1419. */
  1420. AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height, supportPointerMove, onlyAlphaTesting, invertY) {
  1421. if (width === void 0) { width = 1024; }
  1422. if (height === void 0) { height = 1024; }
  1423. if (supportPointerMove === void 0) { supportPointerMove = true; }
  1424. if (onlyAlphaTesting === void 0) { onlyAlphaTesting = false; }
  1425. var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].TRILINEAR_SAMPLINGMODE, invertY);
  1426. var material = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["StandardMaterial"]("AdvancedDynamicTextureMaterial", mesh.getScene());
  1427. material.backFaceCulling = false;
  1428. material.diffuseColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  1429. material.specularColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  1430. if (onlyAlphaTesting) {
  1431. material.diffuseTexture = result;
  1432. material.emissiveTexture = result;
  1433. result.hasAlpha = true;
  1434. }
  1435. else {
  1436. material.emissiveTexture = result;
  1437. material.opacityTexture = result;
  1438. }
  1439. mesh.material = material;
  1440. result.attachToMesh(mesh, supportPointerMove);
  1441. return result;
  1442. };
  1443. /**
  1444. * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh) BUT do not create a new material for the mesh. You will be responsible for connecting the texture
  1445. * @param mesh defines the mesh which will receive the texture
  1446. * @param width defines the texture width (1024 by default)
  1447. * @param height defines the texture height (1024 by default)
  1448. * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
  1449. * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
  1450. * @returns a new AdvancedDynamicTexture
  1451. */
  1452. AdvancedDynamicTexture.CreateForMeshTexture = function (mesh, width, height, supportPointerMove, invertY) {
  1453. if (width === void 0) { width = 1024; }
  1454. if (height === void 0) { height = 1024; }
  1455. if (supportPointerMove === void 0) { supportPointerMove = true; }
  1456. var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].TRILINEAR_SAMPLINGMODE, invertY);
  1457. result.attachToMesh(mesh, supportPointerMove);
  1458. return result;
  1459. };
  1460. /**
  1461. * Creates a new AdvancedDynamicTexture in fullscreen mode.
  1462. * In this mode the texture will rely on a layer for its rendering.
  1463. * This allows it to be treated like any other layer.
  1464. * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
  1465. * LayerMask is set through advancedTexture.layer.layerMask
  1466. * @param name defines name for the texture
  1467. * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
  1468. * @param scene defines the hsoting scene
  1469. * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
  1470. * @returns a new AdvancedDynamicTexture
  1471. */
  1472. AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene, sampling) {
  1473. if (foreground === void 0) { foreground = true; }
  1474. if (scene === void 0) { scene = null; }
  1475. if (sampling === void 0) { sampling = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].BILINEAR_SAMPLINGMODE; }
  1476. var result = new AdvancedDynamicTexture(name, 0, 0, scene, false, sampling);
  1477. // Display
  1478. var layer = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Layer"](name + "_layer", null, scene, !foreground);
  1479. layer.texture = result;
  1480. result._layerToDispose = layer;
  1481. result._isFullscreen = true;
  1482. // Attach
  1483. result.attach();
  1484. return result;
  1485. };
  1486. return AdvancedDynamicTexture;
  1487. }(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DynamicTexture"]));
  1488. /***/ }),
  1489. /***/ "./2D/controls/button.ts":
  1490. /*!*******************************!*\
  1491. !*** ./2D/controls/button.ts ***!
  1492. \*******************************/
  1493. /*! exports provided: Button */
  1494. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1495. "use strict";
  1496. __webpack_require__.r(__webpack_exports__);
  1497. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return Button; });
  1498. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  1499. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  1500. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  1501. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  1502. /* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./image */ "./2D/controls/image.ts");
  1503. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  1504. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__);
  1505. /**
  1506. * Class used to create 2D buttons
  1507. */
  1508. var Button = /** @class */ (function (_super) {
  1509. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Button, _super);
  1510. /**
  1511. * Creates a new Button
  1512. * @param name defines the name of the button
  1513. */
  1514. function Button(name) {
  1515. var _this = _super.call(this, name) || this;
  1516. _this.name = name;
  1517. /**
  1518. * Gets or sets a boolean indicating that the button will let internal controls handle picking instead of doing it directly using its bounding info
  1519. */
  1520. _this.delegatePickingToChildren = false;
  1521. _this.thickness = 1;
  1522. _this.isPointerBlocker = true;
  1523. var alphaStore = null;
  1524. _this.pointerEnterAnimation = function () {
  1525. alphaStore = _this.alpha;
  1526. _this.alpha -= 0.1;
  1527. };
  1528. _this.pointerOutAnimation = function () {
  1529. if (alphaStore !== null) {
  1530. _this.alpha = alphaStore;
  1531. }
  1532. };
  1533. _this.pointerDownAnimation = function () {
  1534. _this.scaleX -= 0.05;
  1535. _this.scaleY -= 0.05;
  1536. };
  1537. _this.pointerUpAnimation = function () {
  1538. _this.scaleX += 0.05;
  1539. _this.scaleY += 0.05;
  1540. };
  1541. return _this;
  1542. }
  1543. Object.defineProperty(Button.prototype, "image", {
  1544. /**
  1545. * Returns the image part of the button (if any)
  1546. */
  1547. get: function () {
  1548. return this._image;
  1549. },
  1550. enumerable: false,
  1551. configurable: true
  1552. });
  1553. Object.defineProperty(Button.prototype, "textBlock", {
  1554. /**
  1555. * Returns the image part of the button (if any)
  1556. */
  1557. get: function () {
  1558. return this._textBlock;
  1559. },
  1560. enumerable: false,
  1561. configurable: true
  1562. });
  1563. Button.prototype._getTypeName = function () {
  1564. return "Button";
  1565. };
  1566. // While being a container, the button behaves like a control.
  1567. /** @hidden */
  1568. Button.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
  1569. if (!this._isEnabled || !this.isHitTestVisible || !this.isVisible || this.notRenderable) {
  1570. return false;
  1571. }
  1572. if (!_super.prototype.contains.call(this, x, y)) {
  1573. return false;
  1574. }
  1575. if (this.delegatePickingToChildren) {
  1576. var contains = false;
  1577. for (var index = this._children.length - 1; index >= 0; index--) {
  1578. var child = this._children[index];
  1579. if (child.isEnabled && child.isHitTestVisible && child.isVisible && !child.notRenderable && child.contains(x, y)) {
  1580. contains = true;
  1581. break;
  1582. }
  1583. }
  1584. if (!contains) {
  1585. return false;
  1586. }
  1587. }
  1588. this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
  1589. return true;
  1590. };
  1591. /** @hidden */
  1592. Button.prototype._onPointerEnter = function (target, pi) {
  1593. if (!_super.prototype._onPointerEnter.call(this, target, pi)) {
  1594. return false;
  1595. }
  1596. if (this.pointerEnterAnimation) {
  1597. this.pointerEnterAnimation();
  1598. }
  1599. return true;
  1600. };
  1601. /** @hidden */
  1602. Button.prototype._onPointerOut = function (target, pi, force) {
  1603. if (force === void 0) { force = false; }
  1604. if (this.pointerOutAnimation) {
  1605. this.pointerOutAnimation();
  1606. }
  1607. _super.prototype._onPointerOut.call(this, target, pi, force);
  1608. };
  1609. /** @hidden */
  1610. Button.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  1611. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
  1612. return false;
  1613. }
  1614. if (this.pointerDownAnimation) {
  1615. this.pointerDownAnimation();
  1616. }
  1617. return true;
  1618. };
  1619. /** @hidden */
  1620. Button.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
  1621. if (this.pointerUpAnimation) {
  1622. this.pointerUpAnimation();
  1623. }
  1624. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick, pi);
  1625. };
  1626. // Statics
  1627. /**
  1628. * Creates a new button made with an image and a text
  1629. * @param name defines the name of the button
  1630. * @param text defines the text of the button
  1631. * @param imageUrl defines the url of the image
  1632. * @returns a new Button
  1633. */
  1634. Button.CreateImageButton = function (name, text, imageUrl) {
  1635. var result = new this(name);
  1636. // Adding text
  1637. var textBlock = new _textBlock__WEBPACK_IMPORTED_MODULE_3__["TextBlock"](name + "_button", text);
  1638. textBlock.textWrapping = true;
  1639. textBlock.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  1640. textBlock.paddingLeft = "20%";
  1641. result.addControl(textBlock);
  1642. // Adding image
  1643. var iconImage = new _image__WEBPACK_IMPORTED_MODULE_4__["Image"](name + "_icon", imageUrl);
  1644. iconImage.width = "20%";
  1645. iconImage.stretch = _image__WEBPACK_IMPORTED_MODULE_4__["Image"].STRETCH_UNIFORM;
  1646. iconImage.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  1647. result.addControl(iconImage);
  1648. // Store
  1649. result._image = iconImage;
  1650. result._textBlock = textBlock;
  1651. return result;
  1652. };
  1653. /**
  1654. * Creates a new button made with an image
  1655. * @param name defines the name of the button
  1656. * @param imageUrl defines the url of the image
  1657. * @returns a new Button
  1658. */
  1659. Button.CreateImageOnlyButton = function (name, imageUrl) {
  1660. var result = new this(name);
  1661. // Adding image
  1662. var iconImage = new _image__WEBPACK_IMPORTED_MODULE_4__["Image"](name + "_icon", imageUrl);
  1663. iconImage.stretch = _image__WEBPACK_IMPORTED_MODULE_4__["Image"].STRETCH_FILL;
  1664. iconImage.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  1665. result.addControl(iconImage);
  1666. // Store
  1667. result._image = iconImage;
  1668. return result;
  1669. };
  1670. /**
  1671. * Creates a new button made with a text
  1672. * @param name defines the name of the button
  1673. * @param text defines the text of the button
  1674. * @returns a new Button
  1675. */
  1676. Button.CreateSimpleButton = function (name, text) {
  1677. var result = new this(name);
  1678. // Adding text
  1679. var textBlock = new _textBlock__WEBPACK_IMPORTED_MODULE_3__["TextBlock"](name + "_button", text);
  1680. textBlock.textWrapping = true;
  1681. textBlock.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  1682. result.addControl(textBlock);
  1683. // Store
  1684. result._textBlock = textBlock;
  1685. return result;
  1686. };
  1687. /**
  1688. * Creates a new button made with an image and a centered text
  1689. * @param name defines the name of the button
  1690. * @param text defines the text of the button
  1691. * @param imageUrl defines the url of the image
  1692. * @returns a new Button
  1693. */
  1694. Button.CreateImageWithCenterTextButton = function (name, text, imageUrl) {
  1695. var result = new this(name);
  1696. // Adding image
  1697. var iconImage = new _image__WEBPACK_IMPORTED_MODULE_4__["Image"](name + "_icon", imageUrl);
  1698. iconImage.stretch = _image__WEBPACK_IMPORTED_MODULE_4__["Image"].STRETCH_FILL;
  1699. result.addControl(iconImage);
  1700. // Adding text
  1701. var textBlock = new _textBlock__WEBPACK_IMPORTED_MODULE_3__["TextBlock"](name + "_button", text);
  1702. textBlock.textWrapping = true;
  1703. textBlock.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  1704. result.addControl(textBlock);
  1705. // Store
  1706. result._image = iconImage;
  1707. result._textBlock = textBlock;
  1708. return result;
  1709. };
  1710. return Button;
  1711. }(_rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]));
  1712. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Button"] = Button;
  1713. /***/ }),
  1714. /***/ "./2D/controls/checkbox.ts":
  1715. /*!*********************************!*\
  1716. !*** ./2D/controls/checkbox.ts ***!
  1717. \*********************************/
  1718. /*! exports provided: Checkbox */
  1719. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1720. "use strict";
  1721. __webpack_require__.r(__webpack_exports__);
  1722. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return Checkbox; });
  1723. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  1724. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  1725. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  1726. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  1727. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  1728. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  1729. /**
  1730. * Class used to represent a 2D checkbox
  1731. */
  1732. var Checkbox = /** @class */ (function (_super) {
  1733. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Checkbox, _super);
  1734. /**
  1735. * Creates a new CheckBox
  1736. * @param name defines the control name
  1737. */
  1738. function Checkbox(name) {
  1739. var _this = _super.call(this, name) || this;
  1740. _this.name = name;
  1741. _this._isChecked = false;
  1742. _this._background = "black";
  1743. _this._checkSizeRatio = 0.8;
  1744. _this._thickness = 1;
  1745. /**
  1746. * Observable raised when isChecked property changes
  1747. */
  1748. _this.onIsCheckedChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  1749. _this.isPointerBlocker = true;
  1750. return _this;
  1751. }
  1752. Object.defineProperty(Checkbox.prototype, "thickness", {
  1753. /** Gets or sets border thickness */
  1754. get: function () {
  1755. return this._thickness;
  1756. },
  1757. set: function (value) {
  1758. if (this._thickness === value) {
  1759. return;
  1760. }
  1761. this._thickness = value;
  1762. this._markAsDirty();
  1763. },
  1764. enumerable: false,
  1765. configurable: true
  1766. });
  1767. Object.defineProperty(Checkbox.prototype, "checkSizeRatio", {
  1768. /** Gets or sets a value indicating the ratio between overall size and check size */
  1769. get: function () {
  1770. return this._checkSizeRatio;
  1771. },
  1772. set: function (value) {
  1773. value = Math.max(Math.min(1, value), 0);
  1774. if (this._checkSizeRatio === value) {
  1775. return;
  1776. }
  1777. this._checkSizeRatio = value;
  1778. this._markAsDirty();
  1779. },
  1780. enumerable: false,
  1781. configurable: true
  1782. });
  1783. Object.defineProperty(Checkbox.prototype, "background", {
  1784. /** Gets or sets background color */
  1785. get: function () {
  1786. return this._background;
  1787. },
  1788. set: function (value) {
  1789. if (this._background === value) {
  1790. return;
  1791. }
  1792. this._background = value;
  1793. this._markAsDirty();
  1794. },
  1795. enumerable: false,
  1796. configurable: true
  1797. });
  1798. Object.defineProperty(Checkbox.prototype, "isChecked", {
  1799. /** Gets or sets a boolean indicating if the checkbox is checked or not */
  1800. get: function () {
  1801. return this._isChecked;
  1802. },
  1803. set: function (value) {
  1804. if (this._isChecked === value) {
  1805. return;
  1806. }
  1807. this._isChecked = value;
  1808. this._markAsDirty();
  1809. this.onIsCheckedChangedObservable.notifyObservers(value);
  1810. },
  1811. enumerable: false,
  1812. configurable: true
  1813. });
  1814. Checkbox.prototype._getTypeName = function () {
  1815. return "Checkbox";
  1816. };
  1817. /** @hidden */
  1818. Checkbox.prototype._draw = function (context, invalidatedRectangle) {
  1819. context.save();
  1820. this._applyStates(context);
  1821. var actualWidth = this._currentMeasure.width - this._thickness;
  1822. var actualHeight = this._currentMeasure.height - this._thickness;
  1823. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  1824. context.shadowColor = this.shadowColor;
  1825. context.shadowBlur = this.shadowBlur;
  1826. context.shadowOffsetX = this.shadowOffsetX;
  1827. context.shadowOffsetY = this.shadowOffsetY;
  1828. }
  1829. context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
  1830. context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
  1831. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  1832. context.shadowBlur = 0;
  1833. context.shadowOffsetX = 0;
  1834. context.shadowOffsetY = 0;
  1835. }
  1836. if (this._isChecked) {
  1837. context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;
  1838. var offsetWidth = actualWidth * this._checkSizeRatio;
  1839. var offseHeight = actualHeight * this._checkSizeRatio;
  1840. context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);
  1841. }
  1842. context.strokeStyle = this.color;
  1843. context.lineWidth = this._thickness;
  1844. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
  1845. context.restore();
  1846. };
  1847. // Events
  1848. /** @hidden */
  1849. Checkbox.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  1850. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
  1851. return false;
  1852. }
  1853. this.isChecked = !this.isChecked;
  1854. return true;
  1855. };
  1856. /**
  1857. * Utility function to easily create a checkbox with a header
  1858. * @param title defines the label to use for the header
  1859. * @param onValueChanged defines the callback to call when value changes
  1860. * @returns a StackPanel containing the checkbox and a textBlock
  1861. */
  1862. Checkbox.AddCheckBoxWithHeader = function (title, onValueChanged) {
  1863. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_3__["StackPanel"]();
  1864. panel.isVertical = false;
  1865. panel.height = "30px";
  1866. var checkbox = new Checkbox();
  1867. checkbox.width = "20px";
  1868. checkbox.height = "20px";
  1869. checkbox.isChecked = true;
  1870. checkbox.color = "green";
  1871. checkbox.onIsCheckedChangedObservable.add(onValueChanged);
  1872. panel.addControl(checkbox);
  1873. var header = new _textBlock__WEBPACK_IMPORTED_MODULE_4__["TextBlock"]();
  1874. header.text = title;
  1875. header.width = "180px";
  1876. header.paddingLeft = "5px";
  1877. header.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  1878. header.color = "white";
  1879. panel.addControl(header);
  1880. return panel;
  1881. };
  1882. return Checkbox;
  1883. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  1884. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Checkbox"] = Checkbox;
  1885. /***/ }),
  1886. /***/ "./2D/controls/colorpicker.ts":
  1887. /*!************************************!*\
  1888. !*** ./2D/controls/colorpicker.ts ***!
  1889. \************************************/
  1890. /*! exports provided: ColorPicker */
  1891. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1892. "use strict";
  1893. __webpack_require__.r(__webpack_exports__);
  1894. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return ColorPicker; });
  1895. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  1896. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  1897. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  1898. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  1899. /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
  1900. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  1901. /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
  1902. /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./grid */ "./2D/controls/grid.ts");
  1903. /* harmony import */ var _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../controls/textBlock */ "./2D/controls/textBlock.ts");
  1904. /** Class used to create color pickers */
  1905. var ColorPicker = /** @class */ (function (_super) {
  1906. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorPicker, _super);
  1907. /**
  1908. * Creates a new ColorPicker
  1909. * @param name defines the control name
  1910. */
  1911. function ColorPicker(name) {
  1912. var _this = _super.call(this, name) || this;
  1913. _this.name = name;
  1914. _this._value = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Red();
  1915. _this._tmpColor = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"]();
  1916. _this._pointerStartedOnSquare = false;
  1917. _this._pointerStartedOnWheel = false;
  1918. _this._squareLeft = 0;
  1919. _this._squareTop = 0;
  1920. _this._squareSize = 0;
  1921. _this._h = 360;
  1922. _this._s = 1;
  1923. _this._v = 1;
  1924. _this._lastPointerDownID = -1;
  1925. /**
  1926. * Observable raised when the value changes
  1927. */
  1928. _this.onValueChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  1929. // Events
  1930. _this._pointerIsDown = false;
  1931. _this.value = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](.88, .1, .1);
  1932. _this.size = "200px";
  1933. _this.isPointerBlocker = true;
  1934. return _this;
  1935. }
  1936. Object.defineProperty(ColorPicker.prototype, "value", {
  1937. /** Gets or sets the color of the color picker */
  1938. get: function () {
  1939. return this._value;
  1940. },
  1941. set: function (value) {
  1942. if (this._value.equals(value)) {
  1943. return;
  1944. }
  1945. this._value.copyFrom(value);
  1946. this._value.toHSVToRef(this._tmpColor);
  1947. this._h = this._tmpColor.r;
  1948. this._s = Math.max(this._tmpColor.g, 0.00001);
  1949. this._v = Math.max(this._tmpColor.b, 0.00001);
  1950. this._markAsDirty();
  1951. if (this._value.r <= ColorPicker._Epsilon) {
  1952. this._value.r = 0;
  1953. }
  1954. if (this._value.g <= ColorPicker._Epsilon) {
  1955. this._value.g = 0;
  1956. }
  1957. if (this._value.b <= ColorPicker._Epsilon) {
  1958. this._value.b = 0;
  1959. }
  1960. if (this._value.r >= 1.0 - ColorPicker._Epsilon) {
  1961. this._value.r = 1.0;
  1962. }
  1963. if (this._value.g >= 1.0 - ColorPicker._Epsilon) {
  1964. this._value.g = 1.0;
  1965. }
  1966. if (this._value.b >= 1.0 - ColorPicker._Epsilon) {
  1967. this._value.b = 1.0;
  1968. }
  1969. this.onValueChangedObservable.notifyObservers(this._value);
  1970. },
  1971. enumerable: false,
  1972. configurable: true
  1973. });
  1974. Object.defineProperty(ColorPicker.prototype, "width", {
  1975. /**
  1976. * Gets or sets control width
  1977. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  1978. */
  1979. get: function () {
  1980. return this._width.toString(this._host);
  1981. },
  1982. set: function (value) {
  1983. if (this._width.toString(this._host) === value) {
  1984. return;
  1985. }
  1986. if (this._width.fromString(value)) {
  1987. this._height.fromString(value);
  1988. this._markAsDirty();
  1989. }
  1990. },
  1991. enumerable: false,
  1992. configurable: true
  1993. });
  1994. Object.defineProperty(ColorPicker.prototype, "height", {
  1995. /**
  1996. * Gets or sets control height
  1997. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  1998. */
  1999. get: function () {
  2000. return this._height.toString(this._host);
  2001. },
  2002. /** Gets or sets control height */
  2003. set: function (value) {
  2004. if (this._height.toString(this._host) === value) {
  2005. return;
  2006. }
  2007. if (this._height.fromString(value)) {
  2008. this._width.fromString(value);
  2009. this._markAsDirty();
  2010. }
  2011. },
  2012. enumerable: false,
  2013. configurable: true
  2014. });
  2015. Object.defineProperty(ColorPicker.prototype, "size", {
  2016. /** Gets or sets control size */
  2017. get: function () {
  2018. return this.width;
  2019. },
  2020. set: function (value) {
  2021. this.width = value;
  2022. },
  2023. enumerable: false,
  2024. configurable: true
  2025. });
  2026. ColorPicker.prototype._getTypeName = function () {
  2027. return "ColorPicker";
  2028. };
  2029. /** @hidden */
  2030. ColorPicker.prototype._preMeasure = function (parentMeasure, context) {
  2031. if (parentMeasure.width < parentMeasure.height) {
  2032. this._currentMeasure.height = parentMeasure.width;
  2033. }
  2034. else {
  2035. this._currentMeasure.width = parentMeasure.height;
  2036. }
  2037. };
  2038. ColorPicker.prototype._updateSquareProps = function () {
  2039. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  2040. var wheelThickness = radius * .2;
  2041. var innerDiameter = (radius - wheelThickness) * 2;
  2042. var squareSize = innerDiameter / (Math.sqrt(2));
  2043. var offset = radius - squareSize * .5;
  2044. this._squareLeft = this._currentMeasure.left + offset;
  2045. this._squareTop = this._currentMeasure.top + offset;
  2046. this._squareSize = squareSize;
  2047. };
  2048. ColorPicker.prototype._drawGradientSquare = function (hueValue, left, top, width, height, context) {
  2049. var lgh = context.createLinearGradient(left, top, width + left, top);
  2050. lgh.addColorStop(0, '#fff');
  2051. lgh.addColorStop(1, 'hsl(' + hueValue + ', 100%, 50%)');
  2052. context.fillStyle = lgh;
  2053. context.fillRect(left, top, width, height);
  2054. var lgv = context.createLinearGradient(left, top, left, height + top);
  2055. lgv.addColorStop(0, 'rgba(0,0,0,0)');
  2056. lgv.addColorStop(1, '#000');
  2057. context.fillStyle = lgv;
  2058. context.fillRect(left, top, width, height);
  2059. };
  2060. ColorPicker.prototype._drawCircle = function (centerX, centerY, radius, context) {
  2061. context.beginPath();
  2062. context.arc(centerX, centerY, radius + 1, 0, 2 * Math.PI, false);
  2063. context.lineWidth = 3;
  2064. context.strokeStyle = '#333333';
  2065. context.stroke();
  2066. context.beginPath();
  2067. context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  2068. context.lineWidth = 3;
  2069. context.strokeStyle = '#ffffff';
  2070. context.stroke();
  2071. };
  2072. ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
  2073. var canvas = document.createElement("canvas");
  2074. canvas.width = radius * 2;
  2075. canvas.height = radius * 2;
  2076. var context = canvas.getContext("2d");
  2077. var image = context.getImageData(0, 0, radius * 2, radius * 2);
  2078. var data = image.data;
  2079. var color = this._tmpColor;
  2080. var maxDistSq = radius * radius;
  2081. var innerRadius = radius - thickness;
  2082. var minDistSq = innerRadius * innerRadius;
  2083. for (var x = -radius; x < radius; x++) {
  2084. for (var y = -radius; y < radius; y++) {
  2085. var distSq = x * x + y * y;
  2086. if (distSq > maxDistSq || distSq < minDistSq) {
  2087. continue;
  2088. }
  2089. var dist = Math.sqrt(distSq);
  2090. var ang = Math.atan2(y, x);
  2091. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].HSVtoRGBToRef(ang * 180 / Math.PI + 180, dist / radius, 1, color);
  2092. var index = ((x + radius) + ((y + radius) * 2 * radius)) * 4;
  2093. data[index] = color.r * 255;
  2094. data[index + 1] = color.g * 255;
  2095. data[index + 2] = color.b * 255;
  2096. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  2097. //apply less alpha to bigger color pickers
  2098. var alphaAmount = .2;
  2099. var maxAlpha = .2;
  2100. var minAlpha = .04;
  2101. var lowerRadius = 50;
  2102. var upperRadius = 150;
  2103. if (radius < lowerRadius) {
  2104. alphaAmount = maxAlpha;
  2105. }
  2106. else if (radius > upperRadius) {
  2107. alphaAmount = minAlpha;
  2108. }
  2109. else {
  2110. alphaAmount = (minAlpha - maxAlpha) * (radius - lowerRadius) / (upperRadius - lowerRadius) + maxAlpha;
  2111. }
  2112. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  2113. if (alphaRatio < alphaAmount) {
  2114. data[index + 3] = 255 * (alphaRatio / alphaAmount);
  2115. }
  2116. else if (alphaRatio > 1 - alphaAmount) {
  2117. data[index + 3] = 255 * (1.0 - ((alphaRatio - (1 - alphaAmount)) / alphaAmount));
  2118. }
  2119. else {
  2120. data[index + 3] = 255;
  2121. }
  2122. }
  2123. }
  2124. context.putImageData(image, 0, 0);
  2125. return canvas;
  2126. };
  2127. /** @hidden */
  2128. ColorPicker.prototype._draw = function (context) {
  2129. context.save();
  2130. this._applyStates(context);
  2131. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  2132. var wheelThickness = radius * .2;
  2133. var left = this._currentMeasure.left;
  2134. var top = this._currentMeasure.top;
  2135. if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
  2136. this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
  2137. }
  2138. this._updateSquareProps();
  2139. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  2140. context.shadowColor = this.shadowColor;
  2141. context.shadowBlur = this.shadowBlur;
  2142. context.shadowOffsetX = this.shadowOffsetX;
  2143. context.shadowOffsetY = this.shadowOffsetY;
  2144. context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
  2145. }
  2146. context.drawImage(this._colorWheelCanvas, left, top);
  2147. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  2148. context.shadowBlur = 0;
  2149. context.shadowOffsetX = 0;
  2150. context.shadowOffsetY = 0;
  2151. }
  2152. this._drawGradientSquare(this._h, this._squareLeft, this._squareTop, this._squareSize, this._squareSize, context);
  2153. var cx = this._squareLeft + this._squareSize * this._s;
  2154. var cy = this._squareTop + this._squareSize * (1 - this._v);
  2155. this._drawCircle(cx, cy, radius * .04, context);
  2156. var dist = radius - wheelThickness * .5;
  2157. cx = left + radius + Math.cos((this._h - 180) * Math.PI / 180) * dist;
  2158. cy = top + radius + Math.sin((this._h - 180) * Math.PI / 180) * dist;
  2159. this._drawCircle(cx, cy, wheelThickness * .35, context);
  2160. context.restore();
  2161. };
  2162. ColorPicker.prototype._updateValueFromPointer = function (x, y) {
  2163. if (this._pointerStartedOnWheel) {
  2164. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  2165. var centerX = radius + this._currentMeasure.left;
  2166. var centerY = radius + this._currentMeasure.top;
  2167. this._h = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI + 180;
  2168. }
  2169. else if (this._pointerStartedOnSquare) {
  2170. this._updateSquareProps();
  2171. this._s = (x - this._squareLeft) / this._squareSize;
  2172. this._v = 1 - (y - this._squareTop) / this._squareSize;
  2173. this._s = Math.min(this._s, 1);
  2174. this._s = Math.max(this._s, ColorPicker._Epsilon);
  2175. this._v = Math.min(this._v, 1);
  2176. this._v = Math.max(this._v, ColorPicker._Epsilon);
  2177. }
  2178. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].HSVtoRGBToRef(this._h, this._s, this._v, this._tmpColor);
  2179. this.value = this._tmpColor;
  2180. };
  2181. ColorPicker.prototype._isPointOnSquare = function (x, y) {
  2182. this._updateSquareProps();
  2183. var left = this._squareLeft;
  2184. var top = this._squareTop;
  2185. var size = this._squareSize;
  2186. if (x >= left && x <= left + size &&
  2187. y >= top && y <= top + size) {
  2188. return true;
  2189. }
  2190. return false;
  2191. };
  2192. ColorPicker.prototype._isPointOnWheel = function (x, y) {
  2193. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  2194. var centerX = radius + this._currentMeasure.left;
  2195. var centerY = radius + this._currentMeasure.top;
  2196. var wheelThickness = radius * .2;
  2197. var innerRadius = radius - wheelThickness;
  2198. var radiusSq = radius * radius;
  2199. var innerRadiusSq = innerRadius * innerRadius;
  2200. var dx = x - centerX;
  2201. var dy = y - centerY;
  2202. var distSq = dx * dx + dy * dy;
  2203. if (distSq <= radiusSq && distSq >= innerRadiusSq) {
  2204. return true;
  2205. }
  2206. return false;
  2207. };
  2208. ColorPicker.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  2209. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
  2210. return false;
  2211. }
  2212. this._pointerIsDown = true;
  2213. this._pointerStartedOnSquare = false;
  2214. this._pointerStartedOnWheel = false;
  2215. // Invert transform
  2216. this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
  2217. var x = this._transformedPosition.x;
  2218. var y = this._transformedPosition.y;
  2219. if (this._isPointOnSquare(x, y)) {
  2220. this._pointerStartedOnSquare = true;
  2221. }
  2222. else if (this._isPointOnWheel(x, y)) {
  2223. this._pointerStartedOnWheel = true;
  2224. }
  2225. this._updateValueFromPointer(x, y);
  2226. this._host._capturingControl[pointerId] = this;
  2227. this._lastPointerDownID = pointerId;
  2228. return true;
  2229. };
  2230. ColorPicker.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
  2231. // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
  2232. if (pointerId != this._lastPointerDownID) {
  2233. return;
  2234. }
  2235. // Invert transform
  2236. this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
  2237. var x = this._transformedPosition.x;
  2238. var y = this._transformedPosition.y;
  2239. if (this._pointerIsDown) {
  2240. this._updateValueFromPointer(x, y);
  2241. }
  2242. _super.prototype._onPointerMove.call(this, target, coordinates, pointerId, pi);
  2243. };
  2244. ColorPicker.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
  2245. this._pointerIsDown = false;
  2246. delete this._host._capturingControl[pointerId];
  2247. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick, pi);
  2248. };
  2249. ColorPicker.prototype._onCanvasBlur = function () {
  2250. this._forcePointerUp();
  2251. _super.prototype._onCanvasBlur.call(this);
  2252. };
  2253. /**
  2254. * This function expands the color picker by creating a color picker dialog with manual
  2255. * color value input and the ability to save colors into an array to be used later in
  2256. * subsequent launches of the dialogue.
  2257. * @param advancedTexture defines the AdvancedDynamicTexture the dialog is assigned to
  2258. * @param options defines size for dialog and options for saved colors. Also accepts last color picked as hex string and saved colors array as hex strings.
  2259. * @returns picked color as a hex string and the saved colors array as hex strings.
  2260. */
  2261. ColorPicker.ShowPickerDialogAsync = function (advancedTexture, options) {
  2262. return new Promise(function (resolve, reject) {
  2263. // Default options
  2264. options.pickerWidth = options.pickerWidth || "640px";
  2265. options.pickerHeight = options.pickerHeight || "400px";
  2266. options.headerHeight = options.headerHeight || "35px";
  2267. options.lastColor = options.lastColor || "#000000";
  2268. options.swatchLimit = options.swatchLimit || 20;
  2269. options.numSwatchesPerLine = options.numSwatchesPerLine || 10;
  2270. // Window size settings
  2271. var drawerMaxRows = options.swatchLimit / options.numSwatchesPerLine;
  2272. var rawSwatchSize = parseFloat(options.pickerWidth) / options.numSwatchesPerLine;
  2273. var gutterSize = Math.floor(rawSwatchSize * 0.25);
  2274. var colGutters = gutterSize * (options.numSwatchesPerLine + 1);
  2275. var swatchSize = Math.floor((parseFloat(options.pickerWidth) - colGutters) / options.numSwatchesPerLine);
  2276. var drawerMaxSize = (swatchSize * drawerMaxRows) + (gutterSize * (drawerMaxRows + 1));
  2277. var containerSize = (parseInt(options.pickerHeight) + drawerMaxSize + Math.floor(swatchSize * 0.25)).toString() + "px";
  2278. // Button Colors
  2279. var buttonColor = "#c0c0c0";
  2280. var buttonBackgroundColor = "#535353";
  2281. var buttonBackgroundHoverColor = "#414141";
  2282. var buttonBackgroundClickColor = "515151";
  2283. var buttonDisabledColor = "#555555";
  2284. var buttonDisabledBackgroundColor = "#454545";
  2285. var currentSwatchesOutlineColor = "#404040";
  2286. var luminanceLimitColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString("#dddddd");
  2287. var luminanceLimit = luminanceLimitColor.r + luminanceLimitColor.g + luminanceLimitColor.b;
  2288. var iconColorDark = "#aaaaaa";
  2289. var iconColorLight = "#ffffff";
  2290. var closeIconColor;
  2291. // Button settings
  2292. var buttonFontSize;
  2293. var butEdit;
  2294. var buttonWidth;
  2295. var buttonHeight;
  2296. // Input Text Colors
  2297. var inputFieldLabels = ["R", "G", "B"];
  2298. var inputTextBackgroundColor = "#454545";
  2299. var inputTextColor = "#f0f0f0";
  2300. // This is the current color as set by either the picker or by entering a value
  2301. var currentColor;
  2302. // This int is used for naming swatches and serves as the index for calling them from the list
  2303. var swatchNumber;
  2304. // Menu Panel options. We need to know if the swatchDrawer exists so we can create it if needed.
  2305. var swatchDrawer;
  2306. var editSwatchMode = false;
  2307. // Color InputText fields that will be updated upon value change
  2308. var picker;
  2309. var rValInt;
  2310. var gValInt;
  2311. var bValInt;
  2312. var rValDec;
  2313. var gValDec;
  2314. var bValDec;
  2315. var hexVal;
  2316. var newSwatch;
  2317. var lastVal;
  2318. var activeField;
  2319. /**
  2320. * Will update all values for InputText and ColorPicker controls based on the BABYLON.Color3 passed to this function.
  2321. * Each InputText control and the ColorPicker control will be tested to see if they are the activeField and if they
  2322. * are will receive no update. This is to prevent the input from the user being overwritten.
  2323. */
  2324. function updateValues(value, inputField) {
  2325. activeField = inputField;
  2326. var pickedColor = value.toHexString();
  2327. newSwatch.background = pickedColor;
  2328. if (rValInt.name != activeField) {
  2329. rValInt.text = Math.floor(value.r * 255).toString();
  2330. }
  2331. if (gValInt.name != activeField) {
  2332. gValInt.text = Math.floor(value.g * 255).toString();
  2333. }
  2334. if (bValInt.name != activeField) {
  2335. bValInt.text = Math.floor(value.b * 255).toString();
  2336. }
  2337. if (rValDec.name != activeField) {
  2338. rValDec.text = value.r.toString();
  2339. }
  2340. if (gValDec.name != activeField) {
  2341. gValDec.text = value.g.toString();
  2342. }
  2343. if (bValDec.name != activeField) {
  2344. bValDec.text = value.b.toString();
  2345. }
  2346. if (hexVal.name != activeField) {
  2347. var minusPound = pickedColor.split("#");
  2348. hexVal.text = minusPound[1];
  2349. }
  2350. if (picker.name != activeField) {
  2351. picker.value = value;
  2352. }
  2353. }
  2354. // When the user enters an integer for R, G, or B we check to make sure it is a valid number and replace if not.
  2355. function updateInt(field, channel) {
  2356. var newValue = field.text;
  2357. var checkVal = /[^0-9]/g.test(newValue);
  2358. if (checkVal) {
  2359. field.text = lastVal;
  2360. return;
  2361. }
  2362. else {
  2363. if (newValue != "") {
  2364. if (Math.floor(parseInt(newValue)) < 0) {
  2365. newValue = "0";
  2366. }
  2367. else if (Math.floor(parseInt(newValue)) > 255) {
  2368. newValue = "255";
  2369. }
  2370. else if (isNaN(parseInt(newValue))) {
  2371. newValue = "0";
  2372. }
  2373. }
  2374. if (activeField == field.name) {
  2375. lastVal = newValue;
  2376. }
  2377. }
  2378. if (newValue != "") {
  2379. newValue = parseInt(newValue).toString();
  2380. field.text = newValue;
  2381. var newSwatchRGB = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(newSwatch.background);
  2382. if (activeField == field.name) {
  2383. if (channel == "r") {
  2384. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"]((parseInt(newValue)) / 255, newSwatchRGB.g, newSwatchRGB.b), field.name);
  2385. }
  2386. else if (channel == "g") {
  2387. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, (parseInt(newValue)) / 255, newSwatchRGB.b), field.name);
  2388. }
  2389. else {
  2390. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, newSwatchRGB.g, (parseInt(newValue)) / 255), field.name);
  2391. }
  2392. }
  2393. }
  2394. }
  2395. // When the user enters a float for R, G, or B we check to make sure it is a valid number and replace if not.
  2396. function updateFloat(field, channel) {
  2397. var newValue = field.text;
  2398. var checkVal = /[^0-9\.]/g.test(newValue);
  2399. if (checkVal) {
  2400. field.text = lastVal;
  2401. return;
  2402. }
  2403. else {
  2404. if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
  2405. if (parseFloat(newValue) < 0.0) {
  2406. newValue = "0.0";
  2407. }
  2408. else if (parseFloat(newValue) > 1.0) {
  2409. newValue = "1.0";
  2410. }
  2411. else if (isNaN(parseFloat(newValue))) {
  2412. newValue = "0.0";
  2413. }
  2414. }
  2415. if (activeField == field.name) {
  2416. lastVal = newValue;
  2417. }
  2418. }
  2419. if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
  2420. newValue = parseFloat(newValue).toString();
  2421. field.text = newValue;
  2422. }
  2423. else {
  2424. newValue = "0.0";
  2425. }
  2426. var newSwatchRGB = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(newSwatch.background);
  2427. if (activeField == field.name) {
  2428. if (channel == "r") {
  2429. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](parseFloat(newValue), newSwatchRGB.g, newSwatchRGB.b), field.name);
  2430. }
  2431. else if (channel == "g") {
  2432. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, parseFloat(newValue), newSwatchRGB.b), field.name);
  2433. }
  2434. else {
  2435. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, newSwatchRGB.g, parseFloat(newValue)), field.name);
  2436. }
  2437. }
  2438. }
  2439. // Removes the current index from the savedColors array. Drawer can then be regenerated.
  2440. function deleteSwatch(index) {
  2441. if (options.savedColors) {
  2442. options.savedColors.splice(index, 1);
  2443. }
  2444. if (options.savedColors && options.savedColors.length == 0) {
  2445. setEditButtonVisibility(false);
  2446. editSwatchMode = false;
  2447. }
  2448. }
  2449. // Creates and styles an individual swatch when updateSwatches is called.
  2450. function createSwatch() {
  2451. if (options.savedColors && options.savedColors[swatchNumber]) {
  2452. if (editSwatchMode) {
  2453. var icon = "b";
  2454. }
  2455. else {
  2456. var icon = "";
  2457. }
  2458. var swatch = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("Swatch_" + swatchNumber, icon);
  2459. swatch.fontFamily = "BabylonJSglyphs";
  2460. var swatchColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.savedColors[swatchNumber]);
  2461. var swatchLuminence = swatchColor.r + swatchColor.g + swatchColor.b;
  2462. // Set color of outline and textBlock based on luminance of the color swatch so feedback always visible
  2463. if (swatchLuminence > luminanceLimit) {
  2464. swatch.color = iconColorDark;
  2465. }
  2466. else {
  2467. swatch.color = iconColorLight;
  2468. }
  2469. swatch.fontSize = Math.floor(swatchSize * 0.7);
  2470. swatch.textBlock.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2471. swatch.height = swatch.width = (swatchSize).toString() + "px";
  2472. swatch.background = options.savedColors[swatchNumber];
  2473. swatch.thickness = 2;
  2474. var metadata_1 = swatchNumber;
  2475. swatch.pointerDownAnimation = function () {
  2476. swatch.thickness = 4;
  2477. };
  2478. swatch.pointerUpAnimation = function () {
  2479. swatch.thickness = 3;
  2480. };
  2481. swatch.pointerEnterAnimation = function () {
  2482. swatch.thickness = 3;
  2483. };
  2484. swatch.pointerOutAnimation = function () {
  2485. swatch.thickness = 2;
  2486. };
  2487. swatch.onPointerClickObservable.add(function () {
  2488. if (!editSwatchMode) {
  2489. if (options.savedColors) {
  2490. updateValues(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.savedColors[metadata_1]), swatch.name);
  2491. }
  2492. }
  2493. else {
  2494. deleteSwatch(metadata_1);
  2495. updateSwatches("", butSave);
  2496. }
  2497. });
  2498. return swatch;
  2499. }
  2500. else {
  2501. return null;
  2502. }
  2503. }
  2504. // Mode switch to render button text and close symbols on swatch controls
  2505. function editSwatches(mode) {
  2506. if (mode !== undefined) {
  2507. editSwatchMode = mode;
  2508. }
  2509. if (editSwatchMode) {
  2510. for (var i = 0; i < swatchDrawer.children.length; i++) {
  2511. var thisButton = swatchDrawer.children[i];
  2512. thisButton.textBlock.text = "b";
  2513. }
  2514. if (butEdit !== undefined) {
  2515. butEdit.textBlock.text = "Done";
  2516. }
  2517. }
  2518. else {
  2519. for (var i = 0; i < swatchDrawer.children.length; i++) {
  2520. var thisButton = swatchDrawer.children[i];
  2521. thisButton.textBlock.text = "";
  2522. }
  2523. if (butEdit !== undefined) {
  2524. butEdit.textBlock.text = "Edit";
  2525. }
  2526. }
  2527. }
  2528. /**
  2529. * When Save Color button is pressed this function will first create a swatch drawer if one is not already
  2530. * made. Then all controls are removed from the drawer and we step through the savedColors array and
  2531. * creates one swatch per color. It will also set the height of the drawer control based on how many
  2532. * saved colors there are and how many can be stored per row.
  2533. */
  2534. function updateSwatches(color, button) {
  2535. if (options.savedColors) {
  2536. if (color != "") {
  2537. options.savedColors.push(color);
  2538. }
  2539. swatchNumber = 0;
  2540. swatchDrawer.clearControls();
  2541. var rowCount = Math.ceil(options.savedColors.length / options.numSwatchesPerLine);
  2542. if (rowCount == 0) {
  2543. var gutterCount = 0;
  2544. }
  2545. else {
  2546. var gutterCount = rowCount + 1;
  2547. }
  2548. if (swatchDrawer.rowCount != rowCount + gutterCount) {
  2549. var currentRows = swatchDrawer.rowCount;
  2550. for (var i = 0; i < currentRows; i++) {
  2551. swatchDrawer.removeRowDefinition(0);
  2552. }
  2553. for (var i = 0; i < rowCount + gutterCount; i++) {
  2554. if (i % 2) {
  2555. swatchDrawer.addRowDefinition(swatchSize, true);
  2556. }
  2557. else {
  2558. swatchDrawer.addRowDefinition(gutterSize, true);
  2559. }
  2560. }
  2561. }
  2562. swatchDrawer.height = ((swatchSize * rowCount) + (gutterCount * gutterSize)).toString() + "px";
  2563. for (var y = 1, thisRow = 1; y < rowCount + gutterCount; y += 2, thisRow++) {
  2564. // Determine number of buttons to create per row based on the button limit per row and number of saved colors
  2565. if (options.savedColors.length > thisRow * options.numSwatchesPerLine) {
  2566. var totalButtonsThisRow = options.numSwatchesPerLine;
  2567. }
  2568. else {
  2569. var totalButtonsThisRow = options.savedColors.length - ((thisRow - 1) * options.numSwatchesPerLine);
  2570. }
  2571. var buttonIterations = (Math.min(Math.max(totalButtonsThisRow, 0), options.numSwatchesPerLine));
  2572. for (var x = 0, w = 1; x < buttonIterations; x++) {
  2573. if (x > options.numSwatchesPerLine) {
  2574. continue;
  2575. }
  2576. var swatch = createSwatch();
  2577. if (swatch != null) {
  2578. swatchDrawer.addControl(swatch, y, w);
  2579. w += 2;
  2580. swatchNumber++;
  2581. }
  2582. else {
  2583. continue;
  2584. }
  2585. }
  2586. }
  2587. if (options.savedColors.length >= options.swatchLimit) {
  2588. disableButton(button, true);
  2589. }
  2590. else {
  2591. disableButton(button, false);
  2592. }
  2593. }
  2594. }
  2595. // Shows or hides edit swatches button depending on if there are saved swatches
  2596. function setEditButtonVisibility(enableButton) {
  2597. if (enableButton) {
  2598. butEdit = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butEdit", "Edit");
  2599. butEdit.width = buttonWidth;
  2600. butEdit.height = buttonHeight;
  2601. butEdit.left = (Math.floor(parseInt(buttonWidth) * 0.1)).toString() + "px";
  2602. butEdit.top = (parseFloat(butEdit.left) * -1).toString() + "px";
  2603. butEdit.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_BOTTOM;
  2604. butEdit.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  2605. butEdit.thickness = 2;
  2606. butEdit.color = buttonColor;
  2607. butEdit.fontSize = buttonFontSize;
  2608. butEdit.background = buttonBackgroundColor;
  2609. butEdit.onPointerEnterObservable.add(function () {
  2610. butEdit.background = buttonBackgroundHoverColor;
  2611. });
  2612. butEdit.onPointerOutObservable.add(function () {
  2613. butEdit.background = buttonBackgroundColor;
  2614. });
  2615. butEdit.pointerDownAnimation = function () {
  2616. butEdit.background = buttonBackgroundClickColor;
  2617. };
  2618. butEdit.pointerUpAnimation = function () {
  2619. butEdit.background = buttonBackgroundHoverColor;
  2620. };
  2621. butEdit.onPointerClickObservable.add(function () {
  2622. if (editSwatchMode) {
  2623. editSwatchMode = false;
  2624. }
  2625. else {
  2626. editSwatchMode = true;
  2627. }
  2628. editSwatches();
  2629. });
  2630. pickerGrid.addControl(butEdit, 1, 0);
  2631. }
  2632. else {
  2633. pickerGrid.removeControl(butEdit);
  2634. }
  2635. }
  2636. // Called when the user hits the limit of saved colors in the drawer.
  2637. function disableButton(button, disabled) {
  2638. if (disabled) {
  2639. button.color = buttonDisabledColor;
  2640. button.background = buttonDisabledBackgroundColor;
  2641. }
  2642. else {
  2643. button.color = buttonColor;
  2644. button.background = buttonBackgroundColor;
  2645. }
  2646. }
  2647. // Passes last chosen color back to scene and kills dialog by removing from AdvancedDynamicTexture
  2648. function closePicker(color) {
  2649. if (options.savedColors && options.savedColors.length > 0) {
  2650. resolve({
  2651. savedColors: options.savedColors,
  2652. pickedColor: color
  2653. });
  2654. }
  2655. else {
  2656. resolve({
  2657. pickedColor: color
  2658. });
  2659. }
  2660. advancedTexture.removeControl(dialogContainer);
  2661. }
  2662. // Dialogue menu container which will contain both the main dialogue window and the swatch drawer which opens once a color is saved.
  2663. var dialogContainer = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2664. dialogContainer.name = "Dialog Container";
  2665. dialogContainer.width = options.pickerWidth;
  2666. if (options.savedColors) {
  2667. dialogContainer.height = containerSize;
  2668. var topRow = parseInt(options.pickerHeight) / parseInt(containerSize);
  2669. dialogContainer.addRowDefinition(topRow, false);
  2670. dialogContainer.addRowDefinition(1.0 - topRow, false);
  2671. }
  2672. else {
  2673. dialogContainer.height = options.pickerHeight;
  2674. dialogContainer.addRowDefinition(1.0, false);
  2675. }
  2676. advancedTexture.addControl(dialogContainer);
  2677. // Swatch drawer which contains all saved color buttons
  2678. if (options.savedColors) {
  2679. swatchDrawer = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2680. swatchDrawer.name = "Swatch Drawer";
  2681. swatchDrawer.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_TOP;
  2682. swatchDrawer.background = buttonBackgroundColor;
  2683. swatchDrawer.width = options.pickerWidth;
  2684. var initialRows = options.savedColors.length / options.numSwatchesPerLine;
  2685. if (initialRows == 0) {
  2686. var gutterCount = 0;
  2687. }
  2688. else {
  2689. var gutterCount = initialRows + 1;
  2690. }
  2691. swatchDrawer.height = ((swatchSize * initialRows) + (gutterCount * gutterSize)).toString() + "px";
  2692. swatchDrawer.top = Math.floor(swatchSize * 0.25).toString() + "px";
  2693. for (var i = 0; i < (Math.ceil(options.savedColors.length / options.numSwatchesPerLine) * 2) + 1; i++) {
  2694. if (i % 2 != 0) {
  2695. swatchDrawer.addRowDefinition(swatchSize, true);
  2696. }
  2697. else {
  2698. swatchDrawer.addRowDefinition(gutterSize, true);
  2699. }
  2700. }
  2701. for (var i = 0; i < options.numSwatchesPerLine * 2 + 1; i++) {
  2702. if (i % 2 != 0) {
  2703. swatchDrawer.addColumnDefinition(swatchSize, true);
  2704. }
  2705. else {
  2706. swatchDrawer.addColumnDefinition(gutterSize, true);
  2707. }
  2708. }
  2709. dialogContainer.addControl(swatchDrawer, 1, 0);
  2710. }
  2711. // Picker container
  2712. var pickerPanel = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2713. pickerPanel.name = "Picker Panel";
  2714. pickerPanel.height = options.pickerHeight;
  2715. var panelHead = parseInt(options.headerHeight) / parseInt(options.pickerHeight);
  2716. var pickerPanelRows = [panelHead, 1.0 - panelHead];
  2717. pickerPanel.addRowDefinition(pickerPanelRows[0], false);
  2718. pickerPanel.addRowDefinition(pickerPanelRows[1], false);
  2719. dialogContainer.addControl(pickerPanel, 0, 0);
  2720. // Picker container header
  2721. var header = new _rectangle__WEBPACK_IMPORTED_MODULE_4__["Rectangle"]();
  2722. header.name = "Dialogue Header Bar";
  2723. header.background = "#cccccc";
  2724. header.thickness = 0;
  2725. pickerPanel.addControl(header, 0, 0);
  2726. // Header close button
  2727. var closeButton = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("closeButton", "a");
  2728. closeButton.fontFamily = "BabylonJSglyphs";
  2729. var headerColor3 = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(header.background);
  2730. closeIconColor = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](1.0 - headerColor3.r, 1.0 - headerColor3.g, 1.0 - headerColor3.b);
  2731. closeButton.color = closeIconColor.toHexString();
  2732. closeButton.fontSize = Math.floor(parseInt(options.headerHeight) * 0.6);
  2733. closeButton.textBlock.textVerticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2734. closeButton.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_RIGHT;
  2735. closeButton.height = closeButton.width = options.headerHeight;
  2736. closeButton.background = header.background;
  2737. closeButton.thickness = 0;
  2738. closeButton.pointerDownAnimation = function () {
  2739. };
  2740. closeButton.pointerUpAnimation = function () {
  2741. closeButton.background = header.background;
  2742. };
  2743. closeButton.pointerEnterAnimation = function () {
  2744. closeButton.color = header.background;
  2745. closeButton.background = "red";
  2746. };
  2747. closeButton.pointerOutAnimation = function () {
  2748. closeButton.color = closeIconColor.toHexString();
  2749. closeButton.background = header.background;
  2750. };
  2751. closeButton.onPointerClickObservable.add(function () {
  2752. closePicker(currentSwatch.background);
  2753. });
  2754. pickerPanel.addControl(closeButton, 0, 0);
  2755. // Dialog container body
  2756. var dialogBody = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2757. dialogBody.name = "Dialogue Body";
  2758. dialogBody.background = buttonBackgroundColor;
  2759. var dialogBodyCols = [0.4375, 0.5625];
  2760. dialogBody.addRowDefinition(1.0, false);
  2761. dialogBody.addColumnDefinition(dialogBodyCols[0], false);
  2762. dialogBody.addColumnDefinition(dialogBodyCols[1], false);
  2763. pickerPanel.addControl(dialogBody, 1, 0);
  2764. // Picker grid
  2765. var pickerGrid = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2766. pickerGrid.name = "Picker Grid";
  2767. pickerGrid.addRowDefinition(0.85, false);
  2768. pickerGrid.addRowDefinition(0.15, false);
  2769. dialogBody.addControl(pickerGrid, 0, 0);
  2770. // Picker control
  2771. picker = new ColorPicker();
  2772. picker.name = "GUI Color Picker";
  2773. if (options.pickerHeight < options.pickerWidth) {
  2774. picker.width = 0.89;
  2775. }
  2776. else {
  2777. picker.height = 0.89;
  2778. }
  2779. picker.value = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.lastColor);
  2780. picker.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  2781. picker.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2782. picker.onPointerDownObservable.add(function () {
  2783. activeField = picker.name;
  2784. lastVal = "";
  2785. editSwatches(false);
  2786. });
  2787. picker.onValueChangedObservable.add(function (value) {
  2788. if (activeField == picker.name) {
  2789. updateValues(value, picker.name);
  2790. }
  2791. });
  2792. pickerGrid.addControl(picker, 0, 0);
  2793. // Picker body right quarant
  2794. var pickerBodyRight = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2795. pickerBodyRight.name = "Dialogue Right Half";
  2796. pickerBodyRight.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  2797. var pickerBodyRightRows = [0.514, 0.486];
  2798. pickerBodyRight.addRowDefinition(pickerBodyRightRows[0], false);
  2799. pickerBodyRight.addRowDefinition(pickerBodyRightRows[1], false);
  2800. dialogBody.addControl(pickerBodyRight, 1, 1);
  2801. // Picker container swatches and buttons
  2802. var pickerSwatchesButtons = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2803. pickerSwatchesButtons.name = "Swatches and Buttons";
  2804. var pickerButtonsCol = [0.417, 0.583];
  2805. pickerSwatchesButtons.addRowDefinition(1.0, false);
  2806. pickerSwatchesButtons.addColumnDefinition(pickerButtonsCol[0], false);
  2807. pickerSwatchesButtons.addColumnDefinition(pickerButtonsCol[1], false);
  2808. pickerBodyRight.addControl(pickerSwatchesButtons, 0, 0);
  2809. // Picker Swatches quadrant
  2810. var pickerSwatches = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2811. pickerSwatches.name = "New and Current Swatches";
  2812. var pickeSwatchesRows = [0.04, 0.16, 0.64, 0.16];
  2813. pickerSwatches.addRowDefinition(pickeSwatchesRows[0], false);
  2814. pickerSwatches.addRowDefinition(pickeSwatchesRows[1], false);
  2815. pickerSwatches.addRowDefinition(pickeSwatchesRows[2], false);
  2816. pickerSwatches.addRowDefinition(pickeSwatchesRows[3], false);
  2817. pickerSwatchesButtons.addControl(pickerSwatches, 0, 0);
  2818. // Active swatches
  2819. var activeSwatches = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2820. activeSwatches.name = "Active Swatches";
  2821. activeSwatches.width = 0.67;
  2822. activeSwatches.addRowDefinition(0.5, false);
  2823. activeSwatches.addRowDefinition(0.5, false);
  2824. pickerSwatches.addControl(activeSwatches, 2, 0);
  2825. var labelWidth = (Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[0] * 0.11));
  2826. var labelHeight = (Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * pickeSwatchesRows[1] * 0.5));
  2827. if (options.pickerWidth > options.pickerHeight) {
  2828. var labelTextSize = labelHeight;
  2829. }
  2830. else {
  2831. var labelTextSize = labelWidth;
  2832. }
  2833. // New color swatch and previous color button
  2834. var newText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  2835. newText.text = "new";
  2836. newText.name = "New Color Label";
  2837. newText.color = buttonColor;
  2838. newText.fontSize = labelTextSize;
  2839. pickerSwatches.addControl(newText, 1, 0);
  2840. newSwatch = new _rectangle__WEBPACK_IMPORTED_MODULE_4__["Rectangle"]();
  2841. newSwatch.name = "New Color Swatch";
  2842. newSwatch.background = options.lastColor;
  2843. newSwatch.thickness = 0;
  2844. activeSwatches.addControl(newSwatch, 0, 0);
  2845. var currentSwatch = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("currentSwatch", "");
  2846. currentSwatch.background = options.lastColor;
  2847. currentSwatch.thickness = 0;
  2848. currentSwatch.onPointerClickObservable.add(function () {
  2849. var revertColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(currentSwatch.background);
  2850. updateValues(revertColor, currentSwatch.name);
  2851. editSwatches(false);
  2852. });
  2853. currentSwatch.pointerDownAnimation = function () { };
  2854. currentSwatch.pointerUpAnimation = function () { };
  2855. currentSwatch.pointerEnterAnimation = function () { };
  2856. currentSwatch.pointerOutAnimation = function () { };
  2857. activeSwatches.addControl(currentSwatch, 1, 0);
  2858. var swatchOutline = new _rectangle__WEBPACK_IMPORTED_MODULE_4__["Rectangle"]();
  2859. swatchOutline.name = "Swatch Outline";
  2860. swatchOutline.width = 0.67;
  2861. swatchOutline.thickness = 2;
  2862. swatchOutline.color = currentSwatchesOutlineColor;
  2863. swatchOutline.isHitTestVisible = false;
  2864. pickerSwatches.addControl(swatchOutline, 2, 0);
  2865. var currentText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  2866. currentText.name = "Current Color Label";
  2867. currentText.text = "current";
  2868. currentText.color = buttonColor;
  2869. currentText.fontSize = labelTextSize;
  2870. pickerSwatches.addControl(currentText, 3, 0);
  2871. // Buttons grid
  2872. var buttonGrid = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2873. buttonGrid.name = "Button Grid";
  2874. buttonGrid.height = 0.8;
  2875. var buttonGridRows = 1 / 3;
  2876. buttonGrid.addRowDefinition(buttonGridRows, false);
  2877. buttonGrid.addRowDefinition(buttonGridRows, false);
  2878. buttonGrid.addRowDefinition(buttonGridRows, false);
  2879. pickerSwatchesButtons.addControl(buttonGrid, 0, 1);
  2880. // Determine pixel width and height for all buttons from overall panel dimensions
  2881. buttonWidth = (Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[1] * 0.67)).toString() + "px";
  2882. buttonHeight = (Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * (parseFloat(buttonGrid.height.toString()) / 100) * buttonGridRows * 0.7)).toString() + "px";
  2883. // Determine button type size
  2884. if (parseFloat(buttonWidth) > parseFloat(buttonHeight)) {
  2885. buttonFontSize = Math.floor(parseFloat(buttonHeight) * 0.45);
  2886. }
  2887. else {
  2888. buttonFontSize = Math.floor(parseFloat(buttonWidth) * 0.11);
  2889. }
  2890. // Panel Buttons
  2891. var butOK = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butOK", "OK");
  2892. butOK.width = buttonWidth;
  2893. butOK.height = buttonHeight;
  2894. butOK.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2895. butOK.thickness = 2;
  2896. butOK.color = buttonColor;
  2897. butOK.fontSize = buttonFontSize;
  2898. butOK.background = buttonBackgroundColor;
  2899. butOK.onPointerEnterObservable.add(function () { butOK.background = buttonBackgroundHoverColor; });
  2900. butOK.onPointerOutObservable.add(function () { butOK.background = buttonBackgroundColor; });
  2901. butOK.pointerDownAnimation = function () {
  2902. butOK.background = buttonBackgroundClickColor;
  2903. };
  2904. butOK.pointerUpAnimation = function () {
  2905. butOK.background = buttonBackgroundHoverColor;
  2906. };
  2907. butOK.onPointerClickObservable.add(function () {
  2908. editSwatches(false);
  2909. closePicker(newSwatch.background);
  2910. });
  2911. buttonGrid.addControl(butOK, 0, 0);
  2912. var butCancel = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butCancel", "Cancel");
  2913. butCancel.width = buttonWidth;
  2914. butCancel.height = buttonHeight;
  2915. butCancel.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2916. butCancel.thickness = 2;
  2917. butCancel.color = buttonColor;
  2918. butCancel.fontSize = buttonFontSize;
  2919. butCancel.background = buttonBackgroundColor;
  2920. butCancel.onPointerEnterObservable.add(function () { butCancel.background = buttonBackgroundHoverColor; });
  2921. butCancel.onPointerOutObservable.add(function () { butCancel.background = buttonBackgroundColor; });
  2922. butCancel.pointerDownAnimation = function () {
  2923. butCancel.background = buttonBackgroundClickColor;
  2924. };
  2925. butCancel.pointerUpAnimation = function () {
  2926. butCancel.background = buttonBackgroundHoverColor;
  2927. };
  2928. butCancel.onPointerClickObservable.add(function () {
  2929. editSwatches(false);
  2930. closePicker(currentSwatch.background);
  2931. });
  2932. buttonGrid.addControl(butCancel, 1, 0);
  2933. if (options.savedColors) {
  2934. var butSave = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butSave", "Save");
  2935. butSave.width = buttonWidth;
  2936. butSave.height = buttonHeight;
  2937. butSave.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2938. butSave.thickness = 2;
  2939. butSave.fontSize = buttonFontSize;
  2940. if (options.savedColors.length < options.swatchLimit) {
  2941. butSave.color = buttonColor;
  2942. butSave.background = buttonBackgroundColor;
  2943. }
  2944. else {
  2945. disableButton(butSave, true);
  2946. }
  2947. butSave.onPointerEnterObservable.add(function () {
  2948. if (options.savedColors) {
  2949. if (options.savedColors.length < options.swatchLimit) {
  2950. butSave.background = buttonBackgroundHoverColor;
  2951. }
  2952. }
  2953. });
  2954. butSave.onPointerOutObservable.add(function () {
  2955. if (options.savedColors) {
  2956. if (options.savedColors.length < options.swatchLimit) {
  2957. butSave.background = buttonBackgroundColor;
  2958. }
  2959. }
  2960. });
  2961. butSave.pointerDownAnimation = function () {
  2962. if (options.savedColors) {
  2963. if (options.savedColors.length < options.swatchLimit) {
  2964. butSave.background = buttonBackgroundClickColor;
  2965. }
  2966. }
  2967. };
  2968. butSave.pointerUpAnimation = function () {
  2969. if (options.savedColors) {
  2970. if (options.savedColors.length < options.swatchLimit) {
  2971. butSave.background = buttonBackgroundHoverColor;
  2972. }
  2973. }
  2974. };
  2975. butSave.onPointerClickObservable.add(function () {
  2976. if (options.savedColors) {
  2977. if (options.savedColors.length == 0) {
  2978. setEditButtonVisibility(true);
  2979. }
  2980. if (options.savedColors.length < options.swatchLimit) {
  2981. updateSwatches(newSwatch.background, butSave);
  2982. }
  2983. editSwatches(false);
  2984. }
  2985. });
  2986. if (options.savedColors.length > 0) {
  2987. setEditButtonVisibility(true);
  2988. }
  2989. buttonGrid.addControl(butSave, 2, 0);
  2990. }
  2991. // Picker color values input
  2992. var pickerColorValues = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2993. pickerColorValues.name = "Dialog Lower Right";
  2994. pickerColorValues.addRowDefinition(0.02, false);
  2995. pickerColorValues.addRowDefinition(0.63, false);
  2996. pickerColorValues.addRowDefinition(0.21, false);
  2997. pickerColorValues.addRowDefinition(0.14, false);
  2998. pickerBodyRight.addControl(pickerColorValues, 1, 0);
  2999. // RGB values text boxes
  3000. currentColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.lastColor);
  3001. var rgbValuesQuadrant = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  3002. rgbValuesQuadrant.name = "RGB Values";
  3003. rgbValuesQuadrant.width = 0.82;
  3004. rgbValuesQuadrant.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  3005. rgbValuesQuadrant.addRowDefinition(1 / 3, false);
  3006. rgbValuesQuadrant.addRowDefinition(1 / 3, false);
  3007. rgbValuesQuadrant.addRowDefinition(1 / 3, false);
  3008. rgbValuesQuadrant.addColumnDefinition(0.1, false);
  3009. rgbValuesQuadrant.addColumnDefinition(0.2, false);
  3010. rgbValuesQuadrant.addColumnDefinition(0.7, false);
  3011. pickerColorValues.addControl(rgbValuesQuadrant, 1, 0);
  3012. for (var i = 0; i < inputFieldLabels.length; i++) {
  3013. var labelText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  3014. labelText.text = inputFieldLabels[i];
  3015. labelText.color = buttonColor;
  3016. labelText.fontSize = buttonFontSize;
  3017. rgbValuesQuadrant.addControl(labelText, i, 0);
  3018. }
  3019. // Input fields for RGB values
  3020. rValInt = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3021. rValInt.width = 0.83;
  3022. rValInt.height = 0.72;
  3023. rValInt.name = "rIntField";
  3024. rValInt.fontSize = buttonFontSize;
  3025. rValInt.text = (currentColor.r * 255).toString();
  3026. rValInt.color = inputTextColor;
  3027. rValInt.background = inputTextBackgroundColor;
  3028. rValInt.onFocusObservable.add(function () {
  3029. activeField = rValInt.name;
  3030. lastVal = rValInt.text;
  3031. editSwatches(false);
  3032. });
  3033. rValInt.onBlurObservable.add(function () {
  3034. if (rValInt.text == "") {
  3035. rValInt.text = "0";
  3036. }
  3037. updateInt(rValInt, "r");
  3038. if (activeField == rValInt.name) {
  3039. activeField = "";
  3040. }
  3041. });
  3042. rValInt.onTextChangedObservable.add(function () {
  3043. if (activeField == rValInt.name) {
  3044. updateInt(rValInt, "r");
  3045. }
  3046. });
  3047. rgbValuesQuadrant.addControl(rValInt, 0, 1);
  3048. gValInt = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3049. gValInt.width = 0.83;
  3050. gValInt.height = 0.72;
  3051. gValInt.name = "gIntField";
  3052. gValInt.fontSize = buttonFontSize;
  3053. gValInt.text = (currentColor.g * 255).toString();
  3054. gValInt.color = inputTextColor;
  3055. gValInt.background = inputTextBackgroundColor;
  3056. gValInt.onFocusObservable.add(function () {
  3057. activeField = gValInt.name;
  3058. lastVal = gValInt.text;
  3059. editSwatches(false);
  3060. });
  3061. gValInt.onBlurObservable.add(function () {
  3062. if (gValInt.text == "") {
  3063. gValInt.text = "0";
  3064. }
  3065. updateInt(gValInt, "g");
  3066. if (activeField == gValInt.name) {
  3067. activeField = "";
  3068. }
  3069. });
  3070. gValInt.onTextChangedObservable.add(function () {
  3071. if (activeField == gValInt.name) {
  3072. updateInt(gValInt, "g");
  3073. }
  3074. });
  3075. rgbValuesQuadrant.addControl(gValInt, 1, 1);
  3076. bValInt = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3077. bValInt.width = 0.83;
  3078. bValInt.height = 0.72;
  3079. bValInt.name = "bIntField";
  3080. bValInt.fontSize = buttonFontSize;
  3081. bValInt.text = (currentColor.b * 255).toString();
  3082. bValInt.color = inputTextColor;
  3083. bValInt.background = inputTextBackgroundColor;
  3084. bValInt.onFocusObservable.add(function () {
  3085. activeField = bValInt.name;
  3086. lastVal = bValInt.text;
  3087. editSwatches(false);
  3088. });
  3089. bValInt.onBlurObservable.add(function () {
  3090. if (bValInt.text == "") {
  3091. bValInt.text = "0";
  3092. }
  3093. updateInt(bValInt, "b");
  3094. if (activeField == bValInt.name) {
  3095. activeField = "";
  3096. }
  3097. });
  3098. bValInt.onTextChangedObservable.add(function () {
  3099. if (activeField == bValInt.name) {
  3100. updateInt(bValInt, "b");
  3101. }
  3102. });
  3103. rgbValuesQuadrant.addControl(bValInt, 2, 1);
  3104. rValDec = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3105. rValDec.width = 0.95;
  3106. rValDec.height = 0.72;
  3107. rValDec.name = "rDecField";
  3108. rValDec.fontSize = buttonFontSize;
  3109. rValDec.text = currentColor.r.toString();
  3110. rValDec.color = inputTextColor;
  3111. rValDec.background = inputTextBackgroundColor;
  3112. rValDec.onFocusObservable.add(function () {
  3113. activeField = rValDec.name;
  3114. lastVal = rValDec.text;
  3115. editSwatches(false);
  3116. });
  3117. rValDec.onBlurObservable.add(function () {
  3118. if (parseFloat(rValDec.text) == 0 || rValDec.text == "") {
  3119. rValDec.text = "0";
  3120. updateFloat(rValDec, "r");
  3121. }
  3122. if (activeField == rValDec.name) {
  3123. activeField = "";
  3124. }
  3125. });
  3126. rValDec.onTextChangedObservable.add(function () {
  3127. if (activeField == rValDec.name) {
  3128. updateFloat(rValDec, "r");
  3129. }
  3130. });
  3131. rgbValuesQuadrant.addControl(rValDec, 0, 2);
  3132. gValDec = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3133. gValDec.width = 0.95;
  3134. gValDec.height = 0.72;
  3135. gValDec.name = "gDecField";
  3136. gValDec.fontSize = buttonFontSize;
  3137. gValDec.text = currentColor.g.toString();
  3138. gValDec.color = inputTextColor;
  3139. gValDec.background = inputTextBackgroundColor;
  3140. gValDec.onFocusObservable.add(function () {
  3141. activeField = gValDec.name;
  3142. lastVal = gValDec.text;
  3143. editSwatches(false);
  3144. });
  3145. gValDec.onBlurObservable.add(function () {
  3146. if (parseFloat(gValDec.text) == 0 || gValDec.text == "") {
  3147. gValDec.text = "0";
  3148. updateFloat(gValDec, "g");
  3149. }
  3150. if (activeField == gValDec.name) {
  3151. activeField = "";
  3152. }
  3153. });
  3154. gValDec.onTextChangedObservable.add(function () {
  3155. if (activeField == gValDec.name) {
  3156. updateFloat(gValDec, "g");
  3157. }
  3158. });
  3159. rgbValuesQuadrant.addControl(gValDec, 1, 2);
  3160. bValDec = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3161. bValDec.width = 0.95;
  3162. bValDec.height = 0.72;
  3163. bValDec.name = "bDecField";
  3164. bValDec.fontSize = buttonFontSize;
  3165. bValDec.text = currentColor.b.toString();
  3166. bValDec.color = inputTextColor;
  3167. bValDec.background = inputTextBackgroundColor;
  3168. bValDec.onFocusObservable.add(function () {
  3169. activeField = bValDec.name;
  3170. lastVal = bValDec.text;
  3171. editSwatches(false);
  3172. });
  3173. bValDec.onBlurObservable.add(function () {
  3174. if (parseFloat(bValDec.text) == 0 || bValDec.text == "") {
  3175. bValDec.text = "0";
  3176. updateFloat(bValDec, "b");
  3177. }
  3178. if (activeField == bValDec.name) {
  3179. activeField = "";
  3180. }
  3181. });
  3182. bValDec.onTextChangedObservable.add(function () {
  3183. if (activeField == bValDec.name) {
  3184. updateFloat(bValDec, "b");
  3185. }
  3186. });
  3187. rgbValuesQuadrant.addControl(bValDec, 2, 2);
  3188. // Hex value input
  3189. var hexValueQuadrant = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  3190. hexValueQuadrant.name = "Hex Value";
  3191. hexValueQuadrant.width = 0.82;
  3192. hexValueQuadrant.addRowDefinition(1.0, false);
  3193. hexValueQuadrant.addColumnDefinition(0.1, false);
  3194. hexValueQuadrant.addColumnDefinition(0.9, false);
  3195. pickerColorValues.addControl(hexValueQuadrant, 2, 0);
  3196. var labelText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  3197. labelText.text = "#";
  3198. labelText.color = buttonColor;
  3199. labelText.fontSize = buttonFontSize;
  3200. hexValueQuadrant.addControl(labelText, 0, 0);
  3201. hexVal = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3202. hexVal.width = 0.96;
  3203. hexVal.height = 0.72;
  3204. hexVal.name = "hexField";
  3205. hexVal.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  3206. hexVal.fontSize = buttonFontSize;
  3207. var minusPound = options.lastColor.split("#");
  3208. hexVal.text = minusPound[1];
  3209. hexVal.color = inputTextColor;
  3210. hexVal.background = inputTextBackgroundColor;
  3211. hexVal.onFocusObservable.add(function () {
  3212. activeField = hexVal.name;
  3213. lastVal = hexVal.text;
  3214. editSwatches(false);
  3215. });
  3216. hexVal.onBlurObservable.add(function () {
  3217. if (hexVal.text.length == 3) {
  3218. var val = hexVal.text.split("");
  3219. hexVal.text = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
  3220. }
  3221. if (hexVal.text == "") {
  3222. hexVal.text = "000000";
  3223. updateValues(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(hexVal.text), "b");
  3224. }
  3225. if (activeField == hexVal.name) {
  3226. activeField = "";
  3227. }
  3228. });
  3229. hexVal.onTextChangedObservable.add(function () {
  3230. var newHexValue = hexVal.text;
  3231. var checkHex = /[^0-9A-F]/i.test(newHexValue);
  3232. if ((hexVal.text.length > 6 || checkHex) && activeField == hexVal.name) {
  3233. hexVal.text = lastVal;
  3234. }
  3235. else {
  3236. if (hexVal.text.length < 6) {
  3237. var leadingZero = 6 - hexVal.text.length;
  3238. for (var i = 0; i < leadingZero; i++) {
  3239. newHexValue = "0" + newHexValue;
  3240. }
  3241. }
  3242. if (hexVal.text.length == 3) {
  3243. var val = hexVal.text.split("");
  3244. newHexValue = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
  3245. }
  3246. newHexValue = "#" + newHexValue;
  3247. if (activeField == hexVal.name) {
  3248. lastVal = hexVal.text;
  3249. updateValues(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(newHexValue), hexVal.name);
  3250. }
  3251. }
  3252. });
  3253. hexValueQuadrant.addControl(hexVal, 0, 1);
  3254. if (options.savedColors && options.savedColors.length > 0) {
  3255. updateSwatches("", butSave);
  3256. }
  3257. });
  3258. };
  3259. ColorPicker._Epsilon = 0.000001;
  3260. return ColorPicker;
  3261. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  3262. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.ColorPicker"] = ColorPicker;
  3263. /***/ }),
  3264. /***/ "./2D/controls/container.ts":
  3265. /*!**********************************!*\
  3266. !*** ./2D/controls/container.ts ***!
  3267. \**********************************/
  3268. /*! exports provided: Container */
  3269. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  3270. "use strict";
  3271. __webpack_require__.r(__webpack_exports__);
  3272. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return Container; });
  3273. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  3274. /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/perfCounter");
  3275. /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
  3276. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  3277. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
  3278. /**
  3279. * Root class for 2D containers
  3280. * @see https://doc.babylonjs.com/how_to/gui#containers
  3281. */
  3282. var Container = /** @class */ (function (_super) {
  3283. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Container, _super);
  3284. /**
  3285. * Creates a new Container
  3286. * @param name defines the name of the container
  3287. */
  3288. function Container(name) {
  3289. var _this = _super.call(this, name) || this;
  3290. _this.name = name;
  3291. /** @hidden */
  3292. _this._children = new Array();
  3293. /** @hidden */
  3294. _this._measureForChildren = _measure__WEBPACK_IMPORTED_MODULE_3__["Measure"].Empty();
  3295. /** @hidden */
  3296. _this._background = "";
  3297. /** @hidden */
  3298. _this._adaptWidthToChildren = false;
  3299. /** @hidden */
  3300. _this._adaptHeightToChildren = false;
  3301. /**
  3302. * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
  3303. */
  3304. _this.logLayoutCycleErrors = false;
  3305. /**
  3306. * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
  3307. */
  3308. _this.maxLayoutCycle = 3;
  3309. return _this;
  3310. }
  3311. Object.defineProperty(Container.prototype, "adaptHeightToChildren", {
  3312. /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
  3313. get: function () {
  3314. return this._adaptHeightToChildren;
  3315. },
  3316. set: function (value) {
  3317. if (this._adaptHeightToChildren === value) {
  3318. return;
  3319. }
  3320. this._adaptHeightToChildren = value;
  3321. if (value) {
  3322. this.height = "100%";
  3323. }
  3324. this._markAsDirty();
  3325. },
  3326. enumerable: false,
  3327. configurable: true
  3328. });
  3329. Object.defineProperty(Container.prototype, "adaptWidthToChildren", {
  3330. /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
  3331. get: function () {
  3332. return this._adaptWidthToChildren;
  3333. },
  3334. set: function (value) {
  3335. if (this._adaptWidthToChildren === value) {
  3336. return;
  3337. }
  3338. this._adaptWidthToChildren = value;
  3339. if (value) {
  3340. this.width = "100%";
  3341. }
  3342. this._markAsDirty();
  3343. },
  3344. enumerable: false,
  3345. configurable: true
  3346. });
  3347. Object.defineProperty(Container.prototype, "background", {
  3348. /** Gets or sets background color */
  3349. get: function () {
  3350. return this._background;
  3351. },
  3352. set: function (value) {
  3353. if (this._background === value) {
  3354. return;
  3355. }
  3356. this._background = value;
  3357. this._markAsDirty();
  3358. },
  3359. enumerable: false,
  3360. configurable: true
  3361. });
  3362. Object.defineProperty(Container.prototype, "children", {
  3363. /** Gets the list of children */
  3364. get: function () {
  3365. return this._children;
  3366. },
  3367. enumerable: false,
  3368. configurable: true
  3369. });
  3370. Container.prototype._getTypeName = function () {
  3371. return "Container";
  3372. };
  3373. Container.prototype._flagDescendantsAsMatrixDirty = function () {
  3374. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3375. var child = _a[_i];
  3376. child._markMatrixAsDirty();
  3377. }
  3378. };
  3379. /**
  3380. * Gets a child using its name
  3381. * @param name defines the child name to look for
  3382. * @returns the child control if found
  3383. */
  3384. Container.prototype.getChildByName = function (name) {
  3385. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3386. var child = _a[_i];
  3387. if (child.name === name) {
  3388. return child;
  3389. }
  3390. }
  3391. return null;
  3392. };
  3393. /**
  3394. * Gets a child using its type and its name
  3395. * @param name defines the child name to look for
  3396. * @param type defines the child type to look for
  3397. * @returns the child control if found
  3398. */
  3399. Container.prototype.getChildByType = function (name, type) {
  3400. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3401. var child = _a[_i];
  3402. if (child.typeName === type) {
  3403. return child;
  3404. }
  3405. }
  3406. return null;
  3407. };
  3408. /**
  3409. * Search for a specific control in children
  3410. * @param control defines the control to look for
  3411. * @returns true if the control is in child list
  3412. */
  3413. Container.prototype.containsControl = function (control) {
  3414. return this.children.indexOf(control) !== -1;
  3415. };
  3416. /**
  3417. * Adds a new control to the current container
  3418. * @param control defines the control to add
  3419. * @returns the current container
  3420. */
  3421. Container.prototype.addControl = function (control) {
  3422. if (!control) {
  3423. return this;
  3424. }
  3425. var index = this._children.indexOf(control);
  3426. if (index !== -1) {
  3427. return this;
  3428. }
  3429. control._link(this._host);
  3430. control._markAllAsDirty();
  3431. this._reOrderControl(control);
  3432. this._markAsDirty();
  3433. return this;
  3434. };
  3435. /**
  3436. * Removes all controls from the current container
  3437. * @returns the current container
  3438. */
  3439. Container.prototype.clearControls = function () {
  3440. var children = this.children.slice();
  3441. for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
  3442. var child = children_1[_i];
  3443. this.removeControl(child);
  3444. }
  3445. return this;
  3446. };
  3447. /**
  3448. * Removes a control from the current container
  3449. * @param control defines the control to remove
  3450. * @returns the current container
  3451. */
  3452. Container.prototype.removeControl = function (control) {
  3453. var index = this._children.indexOf(control);
  3454. if (index !== -1) {
  3455. this._children.splice(index, 1);
  3456. control.parent = null;
  3457. }
  3458. control.linkWithMesh(null);
  3459. if (this._host) {
  3460. this._host._cleanControlAfterRemoval(control);
  3461. }
  3462. this._markAsDirty();
  3463. return this;
  3464. };
  3465. /** @hidden */
  3466. Container.prototype._reOrderControl = function (control) {
  3467. this.removeControl(control);
  3468. var wasAdded = false;
  3469. for (var index = 0; index < this._children.length; index++) {
  3470. if (this._children[index].zIndex > control.zIndex) {
  3471. this._children.splice(index, 0, control);
  3472. wasAdded = true;
  3473. break;
  3474. }
  3475. }
  3476. if (!wasAdded) {
  3477. this._children.push(control);
  3478. }
  3479. control.parent = this;
  3480. this._markAsDirty();
  3481. };
  3482. /** @hidden */
  3483. Container.prototype._offsetLeft = function (offset) {
  3484. _super.prototype._offsetLeft.call(this, offset);
  3485. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3486. var child = _a[_i];
  3487. child._offsetLeft(offset);
  3488. }
  3489. };
  3490. /** @hidden */
  3491. Container.prototype._offsetTop = function (offset) {
  3492. _super.prototype._offsetTop.call(this, offset);
  3493. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3494. var child = _a[_i];
  3495. child._offsetTop(offset);
  3496. }
  3497. };
  3498. /** @hidden */
  3499. Container.prototype._markAllAsDirty = function () {
  3500. _super.prototype._markAllAsDirty.call(this);
  3501. for (var index = 0; index < this._children.length; index++) {
  3502. this._children[index]._markAllAsDirty();
  3503. }
  3504. };
  3505. /** @hidden */
  3506. Container.prototype._localDraw = function (context) {
  3507. if (this._background) {
  3508. context.save();
  3509. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  3510. context.shadowColor = this.shadowColor;
  3511. context.shadowBlur = this.shadowBlur;
  3512. context.shadowOffsetX = this.shadowOffsetX;
  3513. context.shadowOffsetY = this.shadowOffsetY;
  3514. }
  3515. context.fillStyle = this._background;
  3516. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  3517. context.restore();
  3518. }
  3519. };
  3520. /** @hidden */
  3521. Container.prototype._link = function (host) {
  3522. _super.prototype._link.call(this, host);
  3523. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3524. var child = _a[_i];
  3525. child._link(host);
  3526. }
  3527. };
  3528. /** @hidden */
  3529. Container.prototype._beforeLayout = function () {
  3530. // Do nothing
  3531. };
  3532. /** @hidden */
  3533. Container.prototype._processMeasures = function (parentMeasure, context) {
  3534. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  3535. _super.prototype._processMeasures.call(this, parentMeasure, context);
  3536. this._evaluateClippingState(parentMeasure);
  3537. }
  3538. };
  3539. /** @hidden */
  3540. Container.prototype._layout = function (parentMeasure, context) {
  3541. if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
  3542. return false;
  3543. }
  3544. this.host._numLayoutCalls++;
  3545. if (this._isDirty) {
  3546. this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
  3547. }
  3548. var rebuildCount = 0;
  3549. context.save();
  3550. this._applyStates(context);
  3551. this._beforeLayout();
  3552. do {
  3553. var computedWidth = -1;
  3554. var computedHeight = -1;
  3555. this._rebuildLayout = false;
  3556. this._processMeasures(parentMeasure, context);
  3557. if (!this._isClipped) {
  3558. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3559. var child = _a[_i];
  3560. child._tempParentMeasure.copyFrom(this._measureForChildren);
  3561. if (child._layout(this._measureForChildren, context)) {
  3562. if (this.adaptWidthToChildren && child._width.isPixel) {
  3563. computedWidth = Math.max(computedWidth, child._currentMeasure.width + child.paddingLeftInPixels + child.paddingRightInPixels);
  3564. }
  3565. if (this.adaptHeightToChildren && child._height.isPixel) {
  3566. computedHeight = Math.max(computedHeight, child._currentMeasure.height + child.paddingTopInPixels + child.paddingBottomInPixels);
  3567. }
  3568. }
  3569. }
  3570. if (this.adaptWidthToChildren && computedWidth >= 0) {
  3571. computedWidth += this.paddingLeftInPixels + this.paddingRightInPixels;
  3572. if (this.width !== computedWidth + "px") {
  3573. this.width = computedWidth + "px";
  3574. this._rebuildLayout = true;
  3575. }
  3576. }
  3577. if (this.adaptHeightToChildren && computedHeight >= 0) {
  3578. computedHeight += this.paddingTopInPixels + this.paddingBottomInPixels;
  3579. if (this.height !== computedHeight + "px") {
  3580. this.height = computedHeight + "px";
  3581. this._rebuildLayout = true;
  3582. }
  3583. }
  3584. this._postMeasure();
  3585. }
  3586. rebuildCount++;
  3587. } while (this._rebuildLayout && rebuildCount < this.maxLayoutCycle);
  3588. if (rebuildCount >= 3 && this.logLayoutCycleErrors) {
  3589. babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["Logger"].Error("Layout cycle detected in GUI (Container name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
  3590. }
  3591. context.restore();
  3592. if (this._isDirty) {
  3593. this.invalidateRect();
  3594. this._isDirty = false;
  3595. }
  3596. return true;
  3597. };
  3598. Container.prototype._postMeasure = function () {
  3599. // Do nothing by default
  3600. };
  3601. /** @hidden */
  3602. Container.prototype._draw = function (context, invalidatedRectangle) {
  3603. this._localDraw(context);
  3604. if (this.clipChildren) {
  3605. this._clipForChildren(context);
  3606. }
  3607. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3608. var child = _a[_i];
  3609. // Only redraw parts of the screen that are invalidated
  3610. if (invalidatedRectangle) {
  3611. if (!child._intersectsRect(invalidatedRectangle)) {
  3612. continue;
  3613. }
  3614. }
  3615. child._render(context, invalidatedRectangle);
  3616. }
  3617. };
  3618. Container.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
  3619. if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
  3620. if (!this.children) {
  3621. return;
  3622. }
  3623. for (var index = 0; index < this.children.length; index++) {
  3624. var item = this.children[index];
  3625. if (!predicate || predicate(item)) {
  3626. results.push(item);
  3627. }
  3628. if (!directDescendantsOnly) {
  3629. item.getDescendantsToRef(results, false, predicate);
  3630. }
  3631. }
  3632. };
  3633. /** @hidden */
  3634. Container.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
  3635. if (!this._isEnabled || !this.isVisible || this.notRenderable) {
  3636. return false;
  3637. }
  3638. if (!_super.prototype.contains.call(this, x, y)) {
  3639. return false;
  3640. }
  3641. // Checking backwards to pick closest first
  3642. for (var index = this._children.length - 1; index >= 0; index--) {
  3643. var child = this._children[index];
  3644. if (child._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
  3645. if (child.hoverCursor) {
  3646. this._host._changeCursor(child.hoverCursor);
  3647. }
  3648. return true;
  3649. }
  3650. }
  3651. if (!this.isHitTestVisible) {
  3652. return false;
  3653. }
  3654. return this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
  3655. };
  3656. /** @hidden */
  3657. Container.prototype._additionalProcessing = function (parentMeasure, context) {
  3658. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  3659. this._measureForChildren.copyFrom(this._currentMeasure);
  3660. };
  3661. /** Releases associated resources */
  3662. Container.prototype.dispose = function () {
  3663. _super.prototype.dispose.call(this);
  3664. for (var index = this.children.length - 1; index >= 0; index--) {
  3665. this.children[index].dispose();
  3666. }
  3667. };
  3668. return Container;
  3669. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  3670. babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Container"] = Container;
  3671. /***/ }),
  3672. /***/ "./2D/controls/control.ts":
  3673. /*!********************************!*\
  3674. !*** ./2D/controls/control.ts ***!
  3675. \********************************/
  3676. /*! exports provided: Control */
  3677. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  3678. "use strict";
  3679. __webpack_require__.r(__webpack_exports__);
  3680. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return Control; });
  3681. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  3682. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  3683. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  3684. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
  3685. /* harmony import */ var _math2D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../math2D */ "./2D/math2D.ts");
  3686. /**
  3687. * Root class used for all 2D controls
  3688. * @see https://doc.babylonjs.com/how_to/gui#controls
  3689. */
  3690. var Control = /** @class */ (function () {
  3691. // Functions
  3692. /**
  3693. * Creates a new control
  3694. * @param name defines the name of the control
  3695. */
  3696. function Control(
  3697. /** defines the name of the control */
  3698. name) {
  3699. this.name = name;
  3700. this._alpha = 1;
  3701. this._alphaSet = false;
  3702. this._zIndex = 0;
  3703. /** @hidden */
  3704. this._currentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3705. this._fontFamily = "Arial";
  3706. this._fontStyle = "";
  3707. this._fontWeight = "";
  3708. this._fontSize = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](18, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PIXEL, false);
  3709. /** @hidden */
  3710. this._width = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](1, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PERCENTAGE, false);
  3711. /** @hidden */
  3712. this._height = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](1, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PERCENTAGE, false);
  3713. this._color = "";
  3714. this._style = null;
  3715. /** @hidden */
  3716. this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
  3717. /** @hidden */
  3718. this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
  3719. /** @hidden */
  3720. this._isDirty = true;
  3721. /** @hidden */
  3722. this._wasDirty = false;
  3723. /** @hidden */
  3724. this._tempParentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3725. /** @hidden */
  3726. this._prevCurrentMeasureTransformedIntoGlobalSpace = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3727. /** @hidden */
  3728. this._cachedParentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3729. this._paddingLeft = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3730. this._paddingRight = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3731. this._paddingTop = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3732. this._paddingBottom = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3733. /** @hidden */
  3734. this._left = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3735. /** @hidden */
  3736. this._top = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3737. this._scaleX = 1.0;
  3738. this._scaleY = 1.0;
  3739. this._rotation = 0;
  3740. this._transformCenterX = 0.5;
  3741. this._transformCenterY = 0.5;
  3742. /** @hidden */
  3743. this._transformMatrix = _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].Identity();
  3744. /** @hidden */
  3745. this._invertTransformMatrix = _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].Identity();
  3746. /** @hidden */
  3747. this._transformedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  3748. this._isMatrixDirty = true;
  3749. this._isVisible = true;
  3750. this._isHighlighted = false;
  3751. this._fontSet = false;
  3752. this._dummyVector2 = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  3753. this._downCount = 0;
  3754. this._enterCount = -1;
  3755. this._doNotRender = false;
  3756. this._downPointerIds = {};
  3757. this._isEnabled = true;
  3758. this._disabledColor = "#9a9a9a";
  3759. this._disabledColorItem = "#6a6a6a";
  3760. /** @hidden */
  3761. this._rebuildLayout = false;
  3762. /** @hidden */
  3763. this._customData = {};
  3764. /** @hidden */
  3765. this._isClipped = false;
  3766. /** @hidden */
  3767. this._automaticSize = false;
  3768. /**
  3769. * Gets or sets an object used to store user defined information for the node
  3770. */
  3771. this.metadata = null;
  3772. /** Gets or sets a boolean indicating if the control can be hit with pointer events */
  3773. this.isHitTestVisible = true;
  3774. /** Gets or sets a boolean indicating if the control can block pointer events */
  3775. this.isPointerBlocker = false;
  3776. /** Gets or sets a boolean indicating if the control can be focusable */
  3777. this.isFocusInvisible = false;
  3778. /**
  3779. * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
  3780. * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
  3781. */
  3782. this.clipChildren = true;
  3783. /**
  3784. * Gets or sets a boolean indicating that control content must be clipped
  3785. * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
  3786. */
  3787. this.clipContent = true;
  3788. /**
  3789. * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
  3790. */
  3791. this.useBitmapCache = false;
  3792. this._shadowOffsetX = 0;
  3793. this._shadowOffsetY = 0;
  3794. this._shadowBlur = 0;
  3795. this._shadowColor = 'black';
  3796. /** Gets or sets the cursor to use when the control is hovered */
  3797. this.hoverCursor = "";
  3798. /** @hidden */
  3799. this._linkOffsetX = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3800. /** @hidden */
  3801. this._linkOffsetY = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3802. /**
  3803. * An event triggered when pointer wheel is scrolled
  3804. */
  3805. this.onWheelObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3806. /**
  3807. * An event triggered when the pointer move over the control.
  3808. */
  3809. this.onPointerMoveObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3810. /**
  3811. * An event triggered when the pointer move out of the control.
  3812. */
  3813. this.onPointerOutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3814. /**
  3815. * An event triggered when the pointer taps the control
  3816. */
  3817. this.onPointerDownObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3818. /**
  3819. * An event triggered when pointer up
  3820. */
  3821. this.onPointerUpObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3822. /**
  3823. * An event triggered when a control is clicked on
  3824. */
  3825. this.onPointerClickObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3826. /**
  3827. * An event triggered when pointer enters the control
  3828. */
  3829. this.onPointerEnterObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3830. /**
  3831. * An event triggered when the control is marked as dirty
  3832. */
  3833. this.onDirtyObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3834. /**
  3835. * An event triggered before drawing the control
  3836. */
  3837. this.onBeforeDrawObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3838. /**
  3839. * An event triggered after the control was drawn
  3840. */
  3841. this.onAfterDrawObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3842. /**
  3843. * An event triggered when the control has been disposed
  3844. */
  3845. this.onDisposeObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3846. /**
  3847. * Gets or sets a fixed ratio for this control.
  3848. * When different from 0, the ratio is used to compute the "second" dimension.
  3849. * The first dimension used in the computation is the last one set (by setting width / widthInPixels or height / heightInPixels), and the
  3850. * second dimension is computed as first dimension * fixedRatio
  3851. */
  3852. this.fixedRatio = 0;
  3853. this._fixedRatioMasterIsWidth = true;
  3854. this._tmpMeasureA = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  3855. }
  3856. Object.defineProperty(Control.prototype, "shadowOffsetX", {
  3857. /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
  3858. get: function () {
  3859. return this._shadowOffsetX;
  3860. },
  3861. set: function (value) {
  3862. if (this._shadowOffsetX === value) {
  3863. return;
  3864. }
  3865. this._shadowOffsetX = value;
  3866. this._markAsDirty();
  3867. },
  3868. enumerable: false,
  3869. configurable: true
  3870. });
  3871. Object.defineProperty(Control.prototype, "shadowOffsetY", {
  3872. /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
  3873. get: function () {
  3874. return this._shadowOffsetY;
  3875. },
  3876. set: function (value) {
  3877. if (this._shadowOffsetY === value) {
  3878. return;
  3879. }
  3880. this._shadowOffsetY = value;
  3881. this._markAsDirty();
  3882. },
  3883. enumerable: false,
  3884. configurable: true
  3885. });
  3886. Object.defineProperty(Control.prototype, "shadowBlur", {
  3887. /** Gets or sets a value indicating the amount of blur to use to render the shadow */
  3888. get: function () {
  3889. return this._shadowBlur;
  3890. },
  3891. set: function (value) {
  3892. if (this._shadowBlur === value) {
  3893. return;
  3894. }
  3895. this._shadowBlur = value;
  3896. this._markAsDirty();
  3897. },
  3898. enumerable: false,
  3899. configurable: true
  3900. });
  3901. Object.defineProperty(Control.prototype, "shadowColor", {
  3902. /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
  3903. get: function () {
  3904. return this._shadowColor;
  3905. },
  3906. set: function (value) {
  3907. if (this._shadowColor === value) {
  3908. return;
  3909. }
  3910. this._shadowColor = value;
  3911. this._markAsDirty();
  3912. },
  3913. enumerable: false,
  3914. configurable: true
  3915. });
  3916. Object.defineProperty(Control.prototype, "typeName", {
  3917. // Properties
  3918. /** Gets the control type name */
  3919. get: function () {
  3920. return this._getTypeName();
  3921. },
  3922. enumerable: false,
  3923. configurable: true
  3924. });
  3925. /**
  3926. * Get the current class name of the control.
  3927. * @returns current class name
  3928. */
  3929. Control.prototype.getClassName = function () {
  3930. return this._getTypeName();
  3931. };
  3932. Object.defineProperty(Control.prototype, "host", {
  3933. /**
  3934. * Get the hosting AdvancedDynamicTexture
  3935. */
  3936. get: function () {
  3937. return this._host;
  3938. },
  3939. enumerable: false,
  3940. configurable: true
  3941. });
  3942. Object.defineProperty(Control.prototype, "fontOffset", {
  3943. /** Gets or set information about font offsets (used to render and align text) */
  3944. get: function () {
  3945. return this._fontOffset;
  3946. },
  3947. set: function (offset) {
  3948. this._fontOffset = offset;
  3949. },
  3950. enumerable: false,
  3951. configurable: true
  3952. });
  3953. Object.defineProperty(Control.prototype, "alpha", {
  3954. /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
  3955. get: function () {
  3956. return this._alpha;
  3957. },
  3958. set: function (value) {
  3959. if (this._alpha === value) {
  3960. return;
  3961. }
  3962. this._alphaSet = true;
  3963. this._alpha = value;
  3964. this._markAsDirty();
  3965. },
  3966. enumerable: false,
  3967. configurable: true
  3968. });
  3969. Object.defineProperty(Control.prototype, "isHighlighted", {
  3970. /**
  3971. * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
  3972. */
  3973. get: function () {
  3974. return this._isHighlighted;
  3975. },
  3976. set: function (value) {
  3977. if (this._isHighlighted === value) {
  3978. return;
  3979. }
  3980. this._isHighlighted = value;
  3981. this._markAsDirty();
  3982. },
  3983. enumerable: false,
  3984. configurable: true
  3985. });
  3986. Object.defineProperty(Control.prototype, "scaleX", {
  3987. /** Gets or sets a value indicating the scale factor on X axis (1 by default)
  3988. * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  3989. */
  3990. get: function () {
  3991. return this._scaleX;
  3992. },
  3993. set: function (value) {
  3994. if (this._scaleX === value) {
  3995. return;
  3996. }
  3997. this._scaleX = value;
  3998. this._markAsDirty();
  3999. this._markMatrixAsDirty();
  4000. },
  4001. enumerable: false,
  4002. configurable: true
  4003. });
  4004. Object.defineProperty(Control.prototype, "scaleY", {
  4005. /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
  4006. * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  4007. */
  4008. get: function () {
  4009. return this._scaleY;
  4010. },
  4011. set: function (value) {
  4012. if (this._scaleY === value) {
  4013. return;
  4014. }
  4015. this._scaleY = value;
  4016. this._markAsDirty();
  4017. this._markMatrixAsDirty();
  4018. },
  4019. enumerable: false,
  4020. configurable: true
  4021. });
  4022. Object.defineProperty(Control.prototype, "rotation", {
  4023. /** Gets or sets the rotation angle (0 by default)
  4024. * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  4025. */
  4026. get: function () {
  4027. return this._rotation;
  4028. },
  4029. set: function (value) {
  4030. if (this._rotation === value) {
  4031. return;
  4032. }
  4033. this._rotation = value;
  4034. this._markAsDirty();
  4035. this._markMatrixAsDirty();
  4036. },
  4037. enumerable: false,
  4038. configurable: true
  4039. });
  4040. Object.defineProperty(Control.prototype, "transformCenterY", {
  4041. /** Gets or sets the transformation center on Y axis (0 by default)
  4042. * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  4043. */
  4044. get: function () {
  4045. return this._transformCenterY;
  4046. },
  4047. set: function (value) {
  4048. if (this._transformCenterY === value) {
  4049. return;
  4050. }
  4051. this._transformCenterY = value;
  4052. this._markAsDirty();
  4053. this._markMatrixAsDirty();
  4054. },
  4055. enumerable: false,
  4056. configurable: true
  4057. });
  4058. Object.defineProperty(Control.prototype, "transformCenterX", {
  4059. /** Gets or sets the transformation center on X axis (0 by default)
  4060. * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  4061. */
  4062. get: function () {
  4063. return this._transformCenterX;
  4064. },
  4065. set: function (value) {
  4066. if (this._transformCenterX === value) {
  4067. return;
  4068. }
  4069. this._transformCenterX = value;
  4070. this._markAsDirty();
  4071. this._markMatrixAsDirty();
  4072. },
  4073. enumerable: false,
  4074. configurable: true
  4075. });
  4076. Object.defineProperty(Control.prototype, "horizontalAlignment", {
  4077. /**
  4078. * Gets or sets the horizontal alignment
  4079. * @see https://doc.babylonjs.com/how_to/gui#alignments
  4080. */
  4081. get: function () {
  4082. return this._horizontalAlignment;
  4083. },
  4084. set: function (value) {
  4085. if (this._horizontalAlignment === value) {
  4086. return;
  4087. }
  4088. this._horizontalAlignment = value;
  4089. this._markAsDirty();
  4090. },
  4091. enumerable: false,
  4092. configurable: true
  4093. });
  4094. Object.defineProperty(Control.prototype, "verticalAlignment", {
  4095. /**
  4096. * Gets or sets the vertical alignment
  4097. * @see https://doc.babylonjs.com/how_to/gui#alignments
  4098. */
  4099. get: function () {
  4100. return this._verticalAlignment;
  4101. },
  4102. set: function (value) {
  4103. if (this._verticalAlignment === value) {
  4104. return;
  4105. }
  4106. this._verticalAlignment = value;
  4107. this._markAsDirty();
  4108. },
  4109. enumerable: false,
  4110. configurable: true
  4111. });
  4112. Object.defineProperty(Control.prototype, "width", {
  4113. /**
  4114. * Gets or sets control width
  4115. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4116. */
  4117. get: function () {
  4118. return this._width.toString(this._host);
  4119. },
  4120. set: function (value) {
  4121. this._fixedRatioMasterIsWidth = true;
  4122. if (this._width.toString(this._host) === value) {
  4123. return;
  4124. }
  4125. if (this._width.fromString(value)) {
  4126. this._markAsDirty();
  4127. }
  4128. },
  4129. enumerable: false,
  4130. configurable: true
  4131. });
  4132. Object.defineProperty(Control.prototype, "widthInPixels", {
  4133. /**
  4134. * Gets or sets the control width in pixel
  4135. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4136. */
  4137. get: function () {
  4138. return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4139. },
  4140. set: function (value) {
  4141. if (isNaN(value)) {
  4142. return;
  4143. }
  4144. this._fixedRatioMasterIsWidth = true;
  4145. this.width = value + "px";
  4146. },
  4147. enumerable: false,
  4148. configurable: true
  4149. });
  4150. Object.defineProperty(Control.prototype, "height", {
  4151. /**
  4152. * Gets or sets control height
  4153. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4154. */
  4155. get: function () {
  4156. return this._height.toString(this._host);
  4157. },
  4158. set: function (value) {
  4159. this._fixedRatioMasterIsWidth = false;
  4160. if (this._height.toString(this._host) === value) {
  4161. return;
  4162. }
  4163. if (this._height.fromString(value)) {
  4164. this._markAsDirty();
  4165. }
  4166. },
  4167. enumerable: false,
  4168. configurable: true
  4169. });
  4170. Object.defineProperty(Control.prototype, "heightInPixels", {
  4171. /**
  4172. * Gets or sets control height in pixel
  4173. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4174. */
  4175. get: function () {
  4176. return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4177. },
  4178. set: function (value) {
  4179. if (isNaN(value)) {
  4180. return;
  4181. }
  4182. this._fixedRatioMasterIsWidth = false;
  4183. this.height = value + "px";
  4184. },
  4185. enumerable: false,
  4186. configurable: true
  4187. });
  4188. Object.defineProperty(Control.prototype, "fontFamily", {
  4189. /** Gets or set font family */
  4190. get: function () {
  4191. if (!this._fontSet) {
  4192. return "";
  4193. }
  4194. return this._fontFamily;
  4195. },
  4196. set: function (value) {
  4197. if (this._fontFamily === value) {
  4198. return;
  4199. }
  4200. this._fontFamily = value;
  4201. this._resetFontCache();
  4202. },
  4203. enumerable: false,
  4204. configurable: true
  4205. });
  4206. Object.defineProperty(Control.prototype, "fontStyle", {
  4207. /** Gets or sets font style */
  4208. get: function () {
  4209. return this._fontStyle;
  4210. },
  4211. set: function (value) {
  4212. if (this._fontStyle === value) {
  4213. return;
  4214. }
  4215. this._fontStyle = value;
  4216. this._resetFontCache();
  4217. },
  4218. enumerable: false,
  4219. configurable: true
  4220. });
  4221. Object.defineProperty(Control.prototype, "fontWeight", {
  4222. /** Gets or sets font weight */
  4223. get: function () {
  4224. return this._fontWeight;
  4225. },
  4226. set: function (value) {
  4227. if (this._fontWeight === value) {
  4228. return;
  4229. }
  4230. this._fontWeight = value;
  4231. this._resetFontCache();
  4232. },
  4233. enumerable: false,
  4234. configurable: true
  4235. });
  4236. Object.defineProperty(Control.prototype, "style", {
  4237. /**
  4238. * Gets or sets style
  4239. * @see https://doc.babylonjs.com/how_to/gui#styles
  4240. */
  4241. get: function () {
  4242. return this._style;
  4243. },
  4244. set: function (value) {
  4245. var _this = this;
  4246. if (this._style) {
  4247. this._style.onChangedObservable.remove(this._styleObserver);
  4248. this._styleObserver = null;
  4249. }
  4250. this._style = value;
  4251. if (this._style) {
  4252. this._styleObserver = this._style.onChangedObservable.add(function () {
  4253. _this._markAsDirty();
  4254. _this._resetFontCache();
  4255. });
  4256. }
  4257. this._markAsDirty();
  4258. this._resetFontCache();
  4259. },
  4260. enumerable: false,
  4261. configurable: true
  4262. });
  4263. Object.defineProperty(Control.prototype, "_isFontSizeInPercentage", {
  4264. /** @hidden */
  4265. get: function () {
  4266. return this._fontSize.isPercentage;
  4267. },
  4268. enumerable: false,
  4269. configurable: true
  4270. });
  4271. Object.defineProperty(Control.prototype, "fontSizeInPixels", {
  4272. /** Gets or sets font size in pixels */
  4273. get: function () {
  4274. var fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
  4275. if (fontSizeToUse.isPixel) {
  4276. return fontSizeToUse.getValue(this._host);
  4277. }
  4278. return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
  4279. },
  4280. set: function (value) {
  4281. if (isNaN(value)) {
  4282. return;
  4283. }
  4284. this.fontSize = value + "px";
  4285. },
  4286. enumerable: false,
  4287. configurable: true
  4288. });
  4289. Object.defineProperty(Control.prototype, "fontSize", {
  4290. /** Gets or sets font size */
  4291. get: function () {
  4292. return this._fontSize.toString(this._host);
  4293. },
  4294. set: function (value) {
  4295. if (this._fontSize.toString(this._host) === value) {
  4296. return;
  4297. }
  4298. if (this._fontSize.fromString(value)) {
  4299. this._markAsDirty();
  4300. this._resetFontCache();
  4301. }
  4302. },
  4303. enumerable: false,
  4304. configurable: true
  4305. });
  4306. Object.defineProperty(Control.prototype, "color", {
  4307. /** Gets or sets foreground color */
  4308. get: function () {
  4309. return this._color;
  4310. },
  4311. set: function (value) {
  4312. if (this._color === value) {
  4313. return;
  4314. }
  4315. this._color = value;
  4316. this._markAsDirty();
  4317. },
  4318. enumerable: false,
  4319. configurable: true
  4320. });
  4321. Object.defineProperty(Control.prototype, "zIndex", {
  4322. /** Gets or sets z index which is used to reorder controls on the z axis */
  4323. get: function () {
  4324. return this._zIndex;
  4325. },
  4326. set: function (value) {
  4327. if (this.zIndex === value) {
  4328. return;
  4329. }
  4330. this._zIndex = value;
  4331. if (this.parent) {
  4332. this.parent._reOrderControl(this);
  4333. }
  4334. },
  4335. enumerable: false,
  4336. configurable: true
  4337. });
  4338. Object.defineProperty(Control.prototype, "notRenderable", {
  4339. /** Gets or sets a boolean indicating if the control can be rendered */
  4340. get: function () {
  4341. return this._doNotRender;
  4342. },
  4343. set: function (value) {
  4344. if (this._doNotRender === value) {
  4345. return;
  4346. }
  4347. this._doNotRender = value;
  4348. this._markAsDirty();
  4349. },
  4350. enumerable: false,
  4351. configurable: true
  4352. });
  4353. Object.defineProperty(Control.prototype, "isVisible", {
  4354. /** Gets or sets a boolean indicating if the control is visible */
  4355. get: function () {
  4356. return this._isVisible;
  4357. },
  4358. set: function (value) {
  4359. if (this._isVisible === value) {
  4360. return;
  4361. }
  4362. this._isVisible = value;
  4363. this._markAsDirty(true);
  4364. },
  4365. enumerable: false,
  4366. configurable: true
  4367. });
  4368. Object.defineProperty(Control.prototype, "isDirty", {
  4369. /** Gets a boolean indicating that the control needs to update its rendering */
  4370. get: function () {
  4371. return this._isDirty;
  4372. },
  4373. enumerable: false,
  4374. configurable: true
  4375. });
  4376. Object.defineProperty(Control.prototype, "linkedMesh", {
  4377. /**
  4378. * Gets the current linked mesh (or null if none)
  4379. */
  4380. get: function () {
  4381. return this._linkedMesh;
  4382. },
  4383. enumerable: false,
  4384. configurable: true
  4385. });
  4386. Object.defineProperty(Control.prototype, "paddingLeft", {
  4387. /**
  4388. * Gets or sets a value indicating the padding to use on the left of the control
  4389. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4390. */
  4391. get: function () {
  4392. return this._paddingLeft.toString(this._host);
  4393. },
  4394. set: function (value) {
  4395. if (this._paddingLeft.fromString(value)) {
  4396. this._markAsDirty();
  4397. }
  4398. },
  4399. enumerable: false,
  4400. configurable: true
  4401. });
  4402. Object.defineProperty(Control.prototype, "paddingLeftInPixels", {
  4403. /**
  4404. * Gets or sets a value indicating the padding in pixels to use on the left of the control
  4405. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4406. */
  4407. get: function () {
  4408. return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4409. },
  4410. set: function (value) {
  4411. if (isNaN(value)) {
  4412. return;
  4413. }
  4414. this.paddingLeft = value + "px";
  4415. },
  4416. enumerable: false,
  4417. configurable: true
  4418. });
  4419. Object.defineProperty(Control.prototype, "paddingRight", {
  4420. /**
  4421. * Gets or sets a value indicating the padding to use on the right of the control
  4422. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4423. */
  4424. get: function () {
  4425. return this._paddingRight.toString(this._host);
  4426. },
  4427. set: function (value) {
  4428. if (this._paddingRight.fromString(value)) {
  4429. this._markAsDirty();
  4430. }
  4431. },
  4432. enumerable: false,
  4433. configurable: true
  4434. });
  4435. Object.defineProperty(Control.prototype, "paddingRightInPixels", {
  4436. /**
  4437. * Gets or sets a value indicating the padding in pixels to use on the right of the control
  4438. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4439. */
  4440. get: function () {
  4441. return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4442. },
  4443. set: function (value) {
  4444. if (isNaN(value)) {
  4445. return;
  4446. }
  4447. this.paddingRight = value + "px";
  4448. },
  4449. enumerable: false,
  4450. configurable: true
  4451. });
  4452. Object.defineProperty(Control.prototype, "paddingTop", {
  4453. /**
  4454. * Gets or sets a value indicating the padding to use on the top of the control
  4455. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4456. */
  4457. get: function () {
  4458. return this._paddingTop.toString(this._host);
  4459. },
  4460. set: function (value) {
  4461. if (this._paddingTop.fromString(value)) {
  4462. this._markAsDirty();
  4463. }
  4464. },
  4465. enumerable: false,
  4466. configurable: true
  4467. });
  4468. Object.defineProperty(Control.prototype, "paddingTopInPixels", {
  4469. /**
  4470. * Gets or sets a value indicating the padding in pixels to use on the top of the control
  4471. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4472. */
  4473. get: function () {
  4474. return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4475. },
  4476. set: function (value) {
  4477. if (isNaN(value)) {
  4478. return;
  4479. }
  4480. this.paddingTop = value + "px";
  4481. },
  4482. enumerable: false,
  4483. configurable: true
  4484. });
  4485. Object.defineProperty(Control.prototype, "paddingBottom", {
  4486. /**
  4487. * Gets or sets a value indicating the padding to use on the bottom of the control
  4488. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4489. */
  4490. get: function () {
  4491. return this._paddingBottom.toString(this._host);
  4492. },
  4493. set: function (value) {
  4494. if (this._paddingBottom.fromString(value)) {
  4495. this._markAsDirty();
  4496. }
  4497. },
  4498. enumerable: false,
  4499. configurable: true
  4500. });
  4501. Object.defineProperty(Control.prototype, "paddingBottomInPixels", {
  4502. /**
  4503. * Gets or sets a value indicating the padding in pixels to use on the bottom of the control
  4504. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4505. */
  4506. get: function () {
  4507. return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4508. },
  4509. set: function (value) {
  4510. if (isNaN(value)) {
  4511. return;
  4512. }
  4513. this.paddingBottom = value + "px";
  4514. },
  4515. enumerable: false,
  4516. configurable: true
  4517. });
  4518. Object.defineProperty(Control.prototype, "left", {
  4519. /**
  4520. * Gets or sets a value indicating the left coordinate of the control
  4521. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4522. */
  4523. get: function () {
  4524. return this._left.toString(this._host);
  4525. },
  4526. set: function (value) {
  4527. if (this._left.fromString(value)) {
  4528. this._markAsDirty();
  4529. }
  4530. },
  4531. enumerable: false,
  4532. configurable: true
  4533. });
  4534. Object.defineProperty(Control.prototype, "leftInPixels", {
  4535. /**
  4536. * Gets or sets a value indicating the left coordinate in pixels of the control
  4537. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4538. */
  4539. get: function () {
  4540. return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4541. },
  4542. set: function (value) {
  4543. if (isNaN(value)) {
  4544. return;
  4545. }
  4546. this.left = value + "px";
  4547. },
  4548. enumerable: false,
  4549. configurable: true
  4550. });
  4551. Object.defineProperty(Control.prototype, "top", {
  4552. /**
  4553. * Gets or sets a value indicating the top coordinate of the control
  4554. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4555. */
  4556. get: function () {
  4557. return this._top.toString(this._host);
  4558. },
  4559. set: function (value) {
  4560. if (this._top.fromString(value)) {
  4561. this._markAsDirty();
  4562. }
  4563. },
  4564. enumerable: false,
  4565. configurable: true
  4566. });
  4567. Object.defineProperty(Control.prototype, "topInPixels", {
  4568. /**
  4569. * Gets or sets a value indicating the top coordinate in pixels of the control
  4570. * @see https://doc.babylonjs.com/how_to/gui#position-and-size
  4571. */
  4572. get: function () {
  4573. return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4574. },
  4575. set: function (value) {
  4576. if (isNaN(value)) {
  4577. return;
  4578. }
  4579. this.top = value + "px";
  4580. },
  4581. enumerable: false,
  4582. configurable: true
  4583. });
  4584. Object.defineProperty(Control.prototype, "linkOffsetX", {
  4585. /**
  4586. * Gets or sets a value indicating the offset on X axis to the linked mesh
  4587. * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
  4588. */
  4589. get: function () {
  4590. return this._linkOffsetX.toString(this._host);
  4591. },
  4592. set: function (value) {
  4593. if (this._linkOffsetX.fromString(value)) {
  4594. this._markAsDirty();
  4595. }
  4596. },
  4597. enumerable: false,
  4598. configurable: true
  4599. });
  4600. Object.defineProperty(Control.prototype, "linkOffsetXInPixels", {
  4601. /**
  4602. * Gets or sets a value indicating the offset in pixels on X axis to the linked mesh
  4603. * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
  4604. */
  4605. get: function () {
  4606. return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4607. },
  4608. set: function (value) {
  4609. if (isNaN(value)) {
  4610. return;
  4611. }
  4612. this.linkOffsetX = value + "px";
  4613. },
  4614. enumerable: false,
  4615. configurable: true
  4616. });
  4617. Object.defineProperty(Control.prototype, "linkOffsetY", {
  4618. /**
  4619. * Gets or sets a value indicating the offset on Y axis to the linked mesh
  4620. * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
  4621. */
  4622. get: function () {
  4623. return this._linkOffsetY.toString(this._host);
  4624. },
  4625. set: function (value) {
  4626. if (this._linkOffsetY.fromString(value)) {
  4627. this._markAsDirty();
  4628. }
  4629. },
  4630. enumerable: false,
  4631. configurable: true
  4632. });
  4633. Object.defineProperty(Control.prototype, "linkOffsetYInPixels", {
  4634. /**
  4635. * Gets or sets a value indicating the offset in pixels on Y axis to the linked mesh
  4636. * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
  4637. */
  4638. get: function () {
  4639. return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4640. },
  4641. set: function (value) {
  4642. if (isNaN(value)) {
  4643. return;
  4644. }
  4645. this.linkOffsetY = value + "px";
  4646. },
  4647. enumerable: false,
  4648. configurable: true
  4649. });
  4650. Object.defineProperty(Control.prototype, "centerX", {
  4651. /** Gets the center coordinate on X axis */
  4652. get: function () {
  4653. return this._currentMeasure.left + this._currentMeasure.width / 2;
  4654. },
  4655. enumerable: false,
  4656. configurable: true
  4657. });
  4658. Object.defineProperty(Control.prototype, "centerY", {
  4659. /** Gets the center coordinate on Y axis */
  4660. get: function () {
  4661. return this._currentMeasure.top + this._currentMeasure.height / 2;
  4662. },
  4663. enumerable: false,
  4664. configurable: true
  4665. });
  4666. Object.defineProperty(Control.prototype, "isEnabled", {
  4667. /** Gets or sets if control is Enabled*/
  4668. get: function () {
  4669. return this._isEnabled;
  4670. },
  4671. set: function (value) {
  4672. if (this._isEnabled === value) {
  4673. return;
  4674. }
  4675. this._isEnabled = value;
  4676. this._markAsDirty();
  4677. },
  4678. enumerable: false,
  4679. configurable: true
  4680. });
  4681. Object.defineProperty(Control.prototype, "disabledColor", {
  4682. /** Gets or sets background color of control if it's disabled*/
  4683. get: function () {
  4684. return this._disabledColor;
  4685. },
  4686. set: function (value) {
  4687. if (this._disabledColor === value) {
  4688. return;
  4689. }
  4690. this._disabledColor = value;
  4691. this._markAsDirty();
  4692. },
  4693. enumerable: false,
  4694. configurable: true
  4695. });
  4696. Object.defineProperty(Control.prototype, "disabledColorItem", {
  4697. /** Gets or sets front color of control if it's disabled*/
  4698. get: function () {
  4699. return this._disabledColorItem;
  4700. },
  4701. set: function (value) {
  4702. if (this._disabledColorItem === value) {
  4703. return;
  4704. }
  4705. this._disabledColorItem = value;
  4706. this._markAsDirty();
  4707. },
  4708. enumerable: false,
  4709. configurable: true
  4710. });
  4711. /** @hidden */
  4712. Control.prototype._getTypeName = function () {
  4713. return "Control";
  4714. };
  4715. /**
  4716. * Gets the first ascendant in the hierarchy of the given type
  4717. * @param className defines the required type
  4718. * @returns the ascendant or null if not found
  4719. */
  4720. Control.prototype.getAscendantOfClass = function (className) {
  4721. if (!this.parent) {
  4722. return null;
  4723. }
  4724. if (this.parent.getClassName() === className) {
  4725. return this.parent;
  4726. }
  4727. return this.parent.getAscendantOfClass(className);
  4728. };
  4729. /** @hidden */
  4730. Control.prototype._resetFontCache = function () {
  4731. this._fontSet = true;
  4732. this._markAsDirty();
  4733. };
  4734. /**
  4735. * Determines if a container is an ascendant of the current control
  4736. * @param container defines the container to look for
  4737. * @returns true if the container is one of the ascendant of the control
  4738. */
  4739. Control.prototype.isAscendant = function (container) {
  4740. if (!this.parent) {
  4741. return false;
  4742. }
  4743. if (this.parent === container) {
  4744. return true;
  4745. }
  4746. return this.parent.isAscendant(container);
  4747. };
  4748. /**
  4749. * Gets coordinates in local control space
  4750. * @param globalCoordinates defines the coordinates to transform
  4751. * @returns the new coordinates in local space
  4752. */
  4753. Control.prototype.getLocalCoordinates = function (globalCoordinates) {
  4754. var result = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  4755. this.getLocalCoordinatesToRef(globalCoordinates, result);
  4756. return result;
  4757. };
  4758. /**
  4759. * Gets coordinates in local control space
  4760. * @param globalCoordinates defines the coordinates to transform
  4761. * @param result defines the target vector2 where to store the result
  4762. * @returns the current control
  4763. */
  4764. Control.prototype.getLocalCoordinatesToRef = function (globalCoordinates, result) {
  4765. result.x = globalCoordinates.x - this._currentMeasure.left;
  4766. result.y = globalCoordinates.y - this._currentMeasure.top;
  4767. return this;
  4768. };
  4769. /**
  4770. * Gets coordinates in parent local control space
  4771. * @param globalCoordinates defines the coordinates to transform
  4772. * @returns the new coordinates in parent local space
  4773. */
  4774. Control.prototype.getParentLocalCoordinates = function (globalCoordinates) {
  4775. var result = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  4776. result.x = globalCoordinates.x - this._cachedParentMeasure.left;
  4777. result.y = globalCoordinates.y - this._cachedParentMeasure.top;
  4778. return result;
  4779. };
  4780. /**
  4781. * Move the current control to a vector3 position projected onto the screen.
  4782. * @param position defines the target position
  4783. * @param scene defines the hosting scene
  4784. */
  4785. Control.prototype.moveToVector3 = function (position, scene) {
  4786. if (!this._host || this.parent !== this._host._rootContainer) {
  4787. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Tools"].Error("Cannot move a control to a vector3 if the control is not at root level");
  4788. return;
  4789. }
  4790. this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  4791. this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  4792. var globalViewport = this._host._getGlobalViewport(scene);
  4793. var projectedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Project(position, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Matrix"].Identity(), scene.getTransformMatrix(), globalViewport);
  4794. this._moveToProjectedPosition(projectedPosition);
  4795. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  4796. this.notRenderable = true;
  4797. return;
  4798. }
  4799. this.notRenderable = false;
  4800. };
  4801. /**
  4802. * Will store all controls that have this control as ascendant in a given array
  4803. * @param results defines the array where to store the descendants
  4804. * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
  4805. * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
  4806. */
  4807. Control.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
  4808. if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
  4809. // Do nothing by default
  4810. };
  4811. /**
  4812. * Will return all controls that have this control as ascendant
  4813. * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
  4814. * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
  4815. * @return all child controls
  4816. */
  4817. Control.prototype.getDescendants = function (directDescendantsOnly, predicate) {
  4818. var results = new Array();
  4819. this.getDescendantsToRef(results, directDescendantsOnly, predicate);
  4820. return results;
  4821. };
  4822. /**
  4823. * Link current control with a target mesh
  4824. * @param mesh defines the mesh to link with
  4825. * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
  4826. */
  4827. Control.prototype.linkWithMesh = function (mesh) {
  4828. if (!this._host || this.parent && this.parent !== this._host._rootContainer) {
  4829. if (mesh) {
  4830. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Tools"].Error("Cannot link a control to a mesh if the control is not at root level");
  4831. }
  4832. return;
  4833. }
  4834. var index = this._host._linkedControls.indexOf(this);
  4835. if (index !== -1) {
  4836. this._linkedMesh = mesh;
  4837. if (!mesh) {
  4838. this._host._linkedControls.splice(index, 1);
  4839. }
  4840. return;
  4841. }
  4842. else if (!mesh) {
  4843. return;
  4844. }
  4845. this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  4846. this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  4847. this._linkedMesh = mesh;
  4848. this._host._linkedControls.push(this);
  4849. };
  4850. /** @hidden */
  4851. Control.prototype._moveToProjectedPosition = function (projectedPosition) {
  4852. var oldLeft = this._left.getValue(this._host);
  4853. var oldTop = this._top.getValue(this._host);
  4854. var newLeft = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2);
  4855. var newTop = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2);
  4856. if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
  4857. if (Math.abs(newLeft - oldLeft) < 0.5) {
  4858. newLeft = oldLeft;
  4859. }
  4860. if (Math.abs(newTop - oldTop) < 0.5) {
  4861. newTop = oldTop;
  4862. }
  4863. }
  4864. this.left = newLeft + "px";
  4865. this.top = newTop + "px";
  4866. this._left.ignoreAdaptiveScaling = true;
  4867. this._top.ignoreAdaptiveScaling = true;
  4868. this._markAsDirty();
  4869. };
  4870. /** @hidden */
  4871. Control.prototype._offsetLeft = function (offset) {
  4872. this._isDirty = true;
  4873. this._currentMeasure.left += offset;
  4874. };
  4875. /** @hidden */
  4876. Control.prototype._offsetTop = function (offset) {
  4877. this._isDirty = true;
  4878. this._currentMeasure.top += offset;
  4879. };
  4880. /** @hidden */
  4881. Control.prototype._markMatrixAsDirty = function () {
  4882. this._isMatrixDirty = true;
  4883. this._flagDescendantsAsMatrixDirty();
  4884. };
  4885. /** @hidden */
  4886. Control.prototype._flagDescendantsAsMatrixDirty = function () {
  4887. // No child
  4888. };
  4889. /** @hidden */
  4890. Control.prototype._intersectsRect = function (rect) {
  4891. // Rotate the control's current measure into local space and check if it intersects the passed in rectangle
  4892. this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
  4893. if (this._tmpMeasureA.left >= rect.left + rect.width) {
  4894. return false;
  4895. }
  4896. if (this._tmpMeasureA.top >= rect.top + rect.height) {
  4897. return false;
  4898. }
  4899. if (this._tmpMeasureA.left + this._tmpMeasureA.width <= rect.left) {
  4900. return false;
  4901. }
  4902. if (this._tmpMeasureA.top + this._tmpMeasureA.height <= rect.top) {
  4903. return false;
  4904. }
  4905. return true;
  4906. };
  4907. /** @hidden */
  4908. Control.prototype.invalidateRect = function () {
  4909. this._transform();
  4910. if (this.host && this.host.useInvalidateRectOptimization) {
  4911. // Rotate by transform to get the measure transformed to global space
  4912. this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
  4913. // get the boudning box of the current measure and last frames measure in global space and invalidate it
  4914. // the previous measure is used to properly clear a control that is scaled down
  4915. _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
  4916. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  4917. // Expand rect based on shadows
  4918. var shadowOffsetX = this.shadowOffsetX;
  4919. var shadowOffsetY = this.shadowOffsetY;
  4920. var shadowBlur = this.shadowBlur;
  4921. var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
  4922. var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
  4923. var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
  4924. var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
  4925. this.host.invalidateRect(Math.floor(this._tmpMeasureA.left + leftShadowOffset), Math.floor(this._tmpMeasureA.top + topShadowOffset), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width + rightShadowOffset), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height + bottomShadowOffset));
  4926. }
  4927. else {
  4928. this.host.invalidateRect(Math.floor(this._tmpMeasureA.left), Math.floor(this._tmpMeasureA.top), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height));
  4929. }
  4930. }
  4931. };
  4932. /** @hidden */
  4933. Control.prototype._markAsDirty = function (force) {
  4934. if (force === void 0) { force = false; }
  4935. if (!this._isVisible && !force) {
  4936. return;
  4937. }
  4938. this._isDirty = true;
  4939. // Redraw only this rectangle
  4940. if (this._host) {
  4941. this._host.markAsDirty();
  4942. }
  4943. };
  4944. /** @hidden */
  4945. Control.prototype._markAllAsDirty = function () {
  4946. this._markAsDirty();
  4947. if (this._font) {
  4948. this._prepareFont();
  4949. }
  4950. };
  4951. /** @hidden */
  4952. Control.prototype._link = function (host) {
  4953. this._host = host;
  4954. if (this._host) {
  4955. this.uniqueId = this._host.getScene().getUniqueId();
  4956. }
  4957. };
  4958. /** @hidden */
  4959. Control.prototype._transform = function (context) {
  4960. if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
  4961. return;
  4962. }
  4963. // postTranslate
  4964. var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
  4965. var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
  4966. if (context) {
  4967. context.translate(offsetX, offsetY);
  4968. // rotate
  4969. context.rotate(this._rotation);
  4970. // scale
  4971. context.scale(this._scaleX, this._scaleY);
  4972. // preTranslate
  4973. context.translate(-offsetX, -offsetY);
  4974. }
  4975. // Need to update matrices?
  4976. if (this._isMatrixDirty || this._cachedOffsetX !== offsetX || this._cachedOffsetY !== offsetY) {
  4977. this._cachedOffsetX = offsetX;
  4978. this._cachedOffsetY = offsetY;
  4979. this._isMatrixDirty = false;
  4980. this._flagDescendantsAsMatrixDirty();
  4981. _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].ComposeToRef(-offsetX, -offsetY, this._rotation, this._scaleX, this._scaleY, this.parent ? this.parent._transformMatrix : null, this._transformMatrix);
  4982. this._transformMatrix.invertToRef(this._invertTransformMatrix);
  4983. }
  4984. };
  4985. /** @hidden */
  4986. Control.prototype._renderHighlight = function (context) {
  4987. if (!this.isHighlighted) {
  4988. return;
  4989. }
  4990. context.save();
  4991. context.strokeStyle = "#4affff";
  4992. context.lineWidth = 2;
  4993. this._renderHighlightSpecific(context);
  4994. context.restore();
  4995. };
  4996. /** @hidden */
  4997. Control.prototype._renderHighlightSpecific = function (context) {
  4998. context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  4999. };
  5000. /** @hidden */
  5001. Control.prototype._applyStates = function (context) {
  5002. if (this._isFontSizeInPercentage) {
  5003. this._fontSet = true;
  5004. }
  5005. if (this._fontSet) {
  5006. this._prepareFont();
  5007. this._fontSet = false;
  5008. }
  5009. if (this._font) {
  5010. context.font = this._font;
  5011. }
  5012. if (this._color) {
  5013. context.fillStyle = this._color;
  5014. }
  5015. if (Control.AllowAlphaInheritance) {
  5016. context.globalAlpha *= this._alpha;
  5017. }
  5018. else if (this._alphaSet) {
  5019. context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;
  5020. }
  5021. };
  5022. /** @hidden */
  5023. Control.prototype._layout = function (parentMeasure, context) {
  5024. if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
  5025. return false;
  5026. }
  5027. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  5028. this.host._numLayoutCalls++;
  5029. this._currentMeasure.addAndTransformToRef(this._transformMatrix, -this.paddingLeftInPixels | 0, -this.paddingTopInPixels | 0, this.paddingRightInPixels | 0, this.paddingBottomInPixels | 0, this._prevCurrentMeasureTransformedIntoGlobalSpace);
  5030. context.save();
  5031. this._applyStates(context);
  5032. var rebuildCount = 0;
  5033. do {
  5034. this._rebuildLayout = false;
  5035. this._processMeasures(parentMeasure, context);
  5036. rebuildCount++;
  5037. } while (this._rebuildLayout && rebuildCount < 3);
  5038. if (rebuildCount >= 3) {
  5039. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Logger"].Error("Layout cycle detected in GUI (Control name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
  5040. }
  5041. context.restore();
  5042. this.invalidateRect();
  5043. this._evaluateClippingState(parentMeasure);
  5044. }
  5045. this._wasDirty = this._isDirty;
  5046. this._isDirty = false;
  5047. return true;
  5048. };
  5049. /** @hidden */
  5050. Control.prototype._processMeasures = function (parentMeasure, context) {
  5051. this._currentMeasure.copyFrom(parentMeasure);
  5052. // Let children take some pre-measurement actions
  5053. this._preMeasure(parentMeasure, context);
  5054. this._measure();
  5055. this._computeAlignment(parentMeasure, context);
  5056. // Convert to int values
  5057. this._currentMeasure.left = this._currentMeasure.left | 0;
  5058. this._currentMeasure.top = this._currentMeasure.top | 0;
  5059. this._currentMeasure.width = this._currentMeasure.width | 0;
  5060. this._currentMeasure.height = this._currentMeasure.height | 0;
  5061. // Let children add more features
  5062. this._additionalProcessing(parentMeasure, context);
  5063. this._cachedParentMeasure.copyFrom(parentMeasure);
  5064. if (this.onDirtyObservable.hasObservers()) {
  5065. this.onDirtyObservable.notifyObservers(this);
  5066. }
  5067. };
  5068. Control.prototype._evaluateClippingState = function (parentMeasure) {
  5069. if (this.parent && this.parent.clipChildren) {
  5070. // Early clip
  5071. if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
  5072. this._isClipped = true;
  5073. return;
  5074. }
  5075. if (this._currentMeasure.left + this._currentMeasure.width < parentMeasure.left) {
  5076. this._isClipped = true;
  5077. return;
  5078. }
  5079. if (this._currentMeasure.top > parentMeasure.top + parentMeasure.height) {
  5080. this._isClipped = true;
  5081. return;
  5082. }
  5083. if (this._currentMeasure.top + this._currentMeasure.height < parentMeasure.top) {
  5084. this._isClipped = true;
  5085. return;
  5086. }
  5087. }
  5088. this._isClipped = false;
  5089. };
  5090. /** @hidden */
  5091. Control.prototype._measure = function () {
  5092. // Width / Height
  5093. if (this._width.isPixel) {
  5094. this._currentMeasure.width = this._width.getValue(this._host);
  5095. }
  5096. else {
  5097. this._currentMeasure.width *= this._width.getValue(this._host);
  5098. }
  5099. if (this._height.isPixel) {
  5100. this._currentMeasure.height = this._height.getValue(this._host);
  5101. }
  5102. else {
  5103. this._currentMeasure.height *= this._height.getValue(this._host);
  5104. }
  5105. if (this.fixedRatio !== 0) {
  5106. if (this._fixedRatioMasterIsWidth) {
  5107. this._currentMeasure.height = this._currentMeasure.width * this.fixedRatio;
  5108. }
  5109. else {
  5110. this._currentMeasure.width = this._currentMeasure.height * this.fixedRatio;
  5111. }
  5112. }
  5113. };
  5114. /** @hidden */
  5115. Control.prototype._computeAlignment = function (parentMeasure, context) {
  5116. var width = this._currentMeasure.width;
  5117. var height = this._currentMeasure.height;
  5118. var parentWidth = parentMeasure.width;
  5119. var parentHeight = parentMeasure.height;
  5120. // Left / top
  5121. var x = 0;
  5122. var y = 0;
  5123. switch (this.horizontalAlignment) {
  5124. case Control.HORIZONTAL_ALIGNMENT_LEFT:
  5125. x = 0;
  5126. break;
  5127. case Control.HORIZONTAL_ALIGNMENT_RIGHT:
  5128. x = parentWidth - width;
  5129. break;
  5130. case Control.HORIZONTAL_ALIGNMENT_CENTER:
  5131. x = (parentWidth - width) / 2;
  5132. break;
  5133. }
  5134. switch (this.verticalAlignment) {
  5135. case Control.VERTICAL_ALIGNMENT_TOP:
  5136. y = 0;
  5137. break;
  5138. case Control.VERTICAL_ALIGNMENT_BOTTOM:
  5139. y = parentHeight - height;
  5140. break;
  5141. case Control.VERTICAL_ALIGNMENT_CENTER:
  5142. y = (parentHeight - height) / 2;
  5143. break;
  5144. }
  5145. if (this._paddingLeft.isPixel) {
  5146. this._currentMeasure.left += this._paddingLeft.getValue(this._host);
  5147. this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
  5148. }
  5149. else {
  5150. this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
  5151. this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
  5152. }
  5153. if (this._paddingRight.isPixel) {
  5154. this._currentMeasure.width -= this._paddingRight.getValue(this._host);
  5155. }
  5156. else {
  5157. this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
  5158. }
  5159. if (this._paddingTop.isPixel) {
  5160. this._currentMeasure.top += this._paddingTop.getValue(this._host);
  5161. this._currentMeasure.height -= this._paddingTop.getValue(this._host);
  5162. }
  5163. else {
  5164. this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
  5165. this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
  5166. }
  5167. if (this._paddingBottom.isPixel) {
  5168. this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
  5169. }
  5170. else {
  5171. this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
  5172. }
  5173. if (this._left.isPixel) {
  5174. this._currentMeasure.left += this._left.getValue(this._host);
  5175. }
  5176. else {
  5177. this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
  5178. }
  5179. if (this._top.isPixel) {
  5180. this._currentMeasure.top += this._top.getValue(this._host);
  5181. }
  5182. else {
  5183. this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
  5184. }
  5185. this._currentMeasure.left += x;
  5186. this._currentMeasure.top += y;
  5187. };
  5188. /** @hidden */
  5189. Control.prototype._preMeasure = function (parentMeasure, context) {
  5190. // Do nothing
  5191. };
  5192. /** @hidden */
  5193. Control.prototype._additionalProcessing = function (parentMeasure, context) {
  5194. // Do nothing
  5195. };
  5196. /** @hidden */
  5197. Control.prototype._clipForChildren = function (context) {
  5198. // DO nothing
  5199. };
  5200. Control.prototype._clip = function (context, invalidatedRectangle) {
  5201. context.beginPath();
  5202. Control._ClipMeasure.copyFrom(this._currentMeasure);
  5203. if (invalidatedRectangle) {
  5204. // Rotate the invalidated rect into the control's space
  5205. invalidatedRectangle.transformToRef(this._invertTransformMatrix, this._tmpMeasureA);
  5206. // Get the intersection of the rect in context space and the current context
  5207. var intersection = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  5208. intersection.left = Math.max(this._tmpMeasureA.left, this._currentMeasure.left);
  5209. intersection.top = Math.max(this._tmpMeasureA.top, this._currentMeasure.top);
  5210. intersection.width = Math.min(this._tmpMeasureA.left + this._tmpMeasureA.width, this._currentMeasure.left + this._currentMeasure.width) - intersection.left;
  5211. intersection.height = Math.min(this._tmpMeasureA.top + this._tmpMeasureA.height, this._currentMeasure.top + this._currentMeasure.height) - intersection.top;
  5212. Control._ClipMeasure.copyFrom(intersection);
  5213. }
  5214. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  5215. var shadowOffsetX = this.shadowOffsetX;
  5216. var shadowOffsetY = this.shadowOffsetY;
  5217. var shadowBlur = this.shadowBlur;
  5218. var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
  5219. var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
  5220. var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
  5221. var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
  5222. context.rect(Control._ClipMeasure.left + leftShadowOffset, Control._ClipMeasure.top + topShadowOffset, Control._ClipMeasure.width + rightShadowOffset - leftShadowOffset, Control._ClipMeasure.height + bottomShadowOffset - topShadowOffset);
  5223. }
  5224. else {
  5225. context.rect(Control._ClipMeasure.left, Control._ClipMeasure.top, Control._ClipMeasure.width, Control._ClipMeasure.height);
  5226. }
  5227. context.clip();
  5228. };
  5229. /** @hidden */
  5230. Control.prototype._render = function (context, invalidatedRectangle) {
  5231. if (!this.isVisible || this.notRenderable || this._isClipped) {
  5232. this._isDirty = false;
  5233. return false;
  5234. }
  5235. this.host._numRenderCalls++;
  5236. context.save();
  5237. this._applyStates(context);
  5238. // Transform
  5239. this._transform(context);
  5240. // Clip
  5241. if (this.clipContent) {
  5242. this._clip(context, invalidatedRectangle);
  5243. }
  5244. if (this.onBeforeDrawObservable.hasObservers()) {
  5245. this.onBeforeDrawObservable.notifyObservers(this);
  5246. }
  5247. if (this.useBitmapCache && !this._wasDirty && this._cacheData) {
  5248. context.putImageData(this._cacheData, this._currentMeasure.left, this._currentMeasure.top);
  5249. }
  5250. else {
  5251. this._draw(context, invalidatedRectangle);
  5252. }
  5253. if (this.useBitmapCache && this._wasDirty) {
  5254. this._cacheData = context.getImageData(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  5255. }
  5256. this._renderHighlight(context);
  5257. if (this.onAfterDrawObservable.hasObservers()) {
  5258. this.onAfterDrawObservable.notifyObservers(this);
  5259. }
  5260. context.restore();
  5261. return true;
  5262. };
  5263. /** @hidden */
  5264. Control.prototype._draw = function (context, invalidatedRectangle) {
  5265. // Do nothing
  5266. };
  5267. /**
  5268. * Tests if a given coordinates belong to the current control
  5269. * @param x defines x coordinate to test
  5270. * @param y defines y coordinate to test
  5271. * @returns true if the coordinates are inside the control
  5272. */
  5273. Control.prototype.contains = function (x, y) {
  5274. // Invert transform
  5275. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  5276. x = this._transformedPosition.x;
  5277. y = this._transformedPosition.y;
  5278. // Check
  5279. if (x < this._currentMeasure.left) {
  5280. return false;
  5281. }
  5282. if (x > this._currentMeasure.left + this._currentMeasure.width) {
  5283. return false;
  5284. }
  5285. if (y < this._currentMeasure.top) {
  5286. return false;
  5287. }
  5288. if (y > this._currentMeasure.top + this._currentMeasure.height) {
  5289. return false;
  5290. }
  5291. if (this.isPointerBlocker) {
  5292. this._host._shouldBlockPointer = true;
  5293. }
  5294. return true;
  5295. };
  5296. /** @hidden */
  5297. Control.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
  5298. if (!this._isEnabled) {
  5299. return false;
  5300. }
  5301. if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
  5302. return false;
  5303. }
  5304. if (!this.contains(x, y)) {
  5305. return false;
  5306. }
  5307. this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
  5308. return true;
  5309. };
  5310. /** @hidden */
  5311. Control.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
  5312. var canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this, pi);
  5313. if (canNotify && this.parent != null) {
  5314. this.parent._onPointerMove(target, coordinates, pointerId, pi);
  5315. }
  5316. };
  5317. /** @hidden */
  5318. Control.prototype._onPointerEnter = function (target, pi) {
  5319. if (!this._isEnabled) {
  5320. return false;
  5321. }
  5322. if (this._enterCount > 0) {
  5323. return false;
  5324. }
  5325. if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
  5326. this._enterCount = 0;
  5327. }
  5328. this._enterCount++;
  5329. var canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this, pi);
  5330. if (canNotify && this.parent != null) {
  5331. this.parent._onPointerEnter(target, pi);
  5332. }
  5333. return true;
  5334. };
  5335. /** @hidden */
  5336. Control.prototype._onPointerOut = function (target, pi, force) {
  5337. if (force === void 0) { force = false; }
  5338. if (!force && (!this._isEnabled || target === this)) {
  5339. return;
  5340. }
  5341. this._enterCount = 0;
  5342. var canNotify = true;
  5343. if (!target.isAscendant(this)) {
  5344. canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this, pi);
  5345. }
  5346. if (canNotify && this.parent != null) {
  5347. this.parent._onPointerOut(target, pi, force);
  5348. }
  5349. };
  5350. /** @hidden */
  5351. Control.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  5352. // Prevent pointerout to lose control context.
  5353. // Event redundancy is checked inside the function.
  5354. this._onPointerEnter(this, pi);
  5355. if (this._downCount !== 0) {
  5356. return false;
  5357. }
  5358. this._downCount++;
  5359. this._downPointerIds[pointerId] = true;
  5360. var canNotify = this.onPointerDownObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"](coordinates, buttonIndex), -1, target, this, pi);
  5361. if (canNotify && this.parent != null) {
  5362. this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
  5363. }
  5364. return true;
  5365. };
  5366. /** @hidden */
  5367. Control.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
  5368. if (!this._isEnabled) {
  5369. return;
  5370. }
  5371. this._downCount = 0;
  5372. delete this._downPointerIds[pointerId];
  5373. var canNotifyClick = notifyClick;
  5374. if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
  5375. canNotifyClick = this.onPointerClickObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"](coordinates, buttonIndex), -1, target, this, pi);
  5376. }
  5377. var canNotify = this.onPointerUpObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"](coordinates, buttonIndex), -1, target, this, pi);
  5378. if (canNotify && this.parent != null) {
  5379. this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick, pi);
  5380. }
  5381. };
  5382. /** @hidden */
  5383. Control.prototype._forcePointerUp = function (pointerId) {
  5384. if (pointerId === void 0) { pointerId = null; }
  5385. if (pointerId !== null) {
  5386. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero(), pointerId, 0, true);
  5387. }
  5388. else {
  5389. for (var key in this._downPointerIds) {
  5390. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero(), +key, 0, true);
  5391. }
  5392. }
  5393. };
  5394. /** @hidden */
  5395. Control.prototype._onWheelScroll = function (deltaX, deltaY) {
  5396. if (!this._isEnabled) {
  5397. return;
  5398. }
  5399. var canNotify = this.onWheelObservable.notifyObservers(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"](deltaX, deltaY));
  5400. if (canNotify && this.parent != null) {
  5401. this.parent._onWheelScroll(deltaX, deltaY);
  5402. }
  5403. };
  5404. /** @hidden */
  5405. Control.prototype._onCanvasBlur = function () { };
  5406. /** @hidden */
  5407. Control.prototype._processObservables = function (type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY) {
  5408. if (!this._isEnabled) {
  5409. return false;
  5410. }
  5411. this._dummyVector2.copyFromFloats(x, y);
  5412. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERMOVE) {
  5413. this._onPointerMove(this, this._dummyVector2, pointerId, pi);
  5414. var previousControlOver = this._host._lastControlOver[pointerId];
  5415. if (previousControlOver && previousControlOver !== this) {
  5416. previousControlOver._onPointerOut(this, pi);
  5417. }
  5418. if (previousControlOver !== this) {
  5419. this._onPointerEnter(this, pi);
  5420. }
  5421. this._host._lastControlOver[pointerId] = this;
  5422. return true;
  5423. }
  5424. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERDOWN) {
  5425. this._onPointerDown(this, this._dummyVector2, pointerId, buttonIndex, pi);
  5426. this._host._registerLastControlDown(this, pointerId);
  5427. this._host._lastPickedControl = this;
  5428. return true;
  5429. }
  5430. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP) {
  5431. if (this._host._lastControlDown[pointerId]) {
  5432. this._host._lastControlDown[pointerId]._onPointerUp(this, this._dummyVector2, pointerId, buttonIndex, true, pi);
  5433. }
  5434. delete this._host._lastControlDown[pointerId];
  5435. return true;
  5436. }
  5437. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERWHEEL) {
  5438. if (this._host._lastControlOver[pointerId]) {
  5439. this._host._lastControlOver[pointerId]._onWheelScroll(deltaX, deltaY);
  5440. return true;
  5441. }
  5442. }
  5443. return false;
  5444. };
  5445. Control.prototype._prepareFont = function () {
  5446. if (!this._font && !this._fontSet) {
  5447. return;
  5448. }
  5449. if (this._style) {
  5450. this._font = this._style.fontStyle + " " + this._style.fontWeight + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
  5451. }
  5452. else {
  5453. this._font = this._fontStyle + " " + this._fontWeight + " " + this.fontSizeInPixels + "px " + this._fontFamily;
  5454. }
  5455. this._fontOffset = Control._GetFontOffset(this._font);
  5456. };
  5457. /** Releases associated resources */
  5458. Control.prototype.dispose = function () {
  5459. this.onDirtyObservable.clear();
  5460. this.onBeforeDrawObservable.clear();
  5461. this.onAfterDrawObservable.clear();
  5462. this.onPointerDownObservable.clear();
  5463. this.onPointerEnterObservable.clear();
  5464. this.onPointerMoveObservable.clear();
  5465. this.onPointerOutObservable.clear();
  5466. this.onPointerUpObservable.clear();
  5467. this.onPointerClickObservable.clear();
  5468. this.onWheelObservable.clear();
  5469. if (this._styleObserver && this._style) {
  5470. this._style.onChangedObservable.remove(this._styleObserver);
  5471. this._styleObserver = null;
  5472. }
  5473. if (this.parent) {
  5474. this.parent.removeControl(this);
  5475. this.parent = null;
  5476. }
  5477. if (this._host) {
  5478. var index = this._host._linkedControls.indexOf(this);
  5479. if (index > -1) {
  5480. this.linkWithMesh(null);
  5481. }
  5482. }
  5483. // Callback
  5484. this.onDisposeObservable.notifyObservers(this);
  5485. this.onDisposeObservable.clear();
  5486. };
  5487. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
  5488. /** HORIZONTAL_ALIGNMENT_LEFT */
  5489. get: function () {
  5490. return Control._HORIZONTAL_ALIGNMENT_LEFT;
  5491. },
  5492. enumerable: false,
  5493. configurable: true
  5494. });
  5495. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
  5496. /** HORIZONTAL_ALIGNMENT_RIGHT */
  5497. get: function () {
  5498. return Control._HORIZONTAL_ALIGNMENT_RIGHT;
  5499. },
  5500. enumerable: false,
  5501. configurable: true
  5502. });
  5503. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
  5504. /** HORIZONTAL_ALIGNMENT_CENTER */
  5505. get: function () {
  5506. return Control._HORIZONTAL_ALIGNMENT_CENTER;
  5507. },
  5508. enumerable: false,
  5509. configurable: true
  5510. });
  5511. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
  5512. /** VERTICAL_ALIGNMENT_TOP */
  5513. get: function () {
  5514. return Control._VERTICAL_ALIGNMENT_TOP;
  5515. },
  5516. enumerable: false,
  5517. configurable: true
  5518. });
  5519. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
  5520. /** VERTICAL_ALIGNMENT_BOTTOM */
  5521. get: function () {
  5522. return Control._VERTICAL_ALIGNMENT_BOTTOM;
  5523. },
  5524. enumerable: false,
  5525. configurable: true
  5526. });
  5527. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
  5528. /** VERTICAL_ALIGNMENT_CENTER */
  5529. get: function () {
  5530. return Control._VERTICAL_ALIGNMENT_CENTER;
  5531. },
  5532. enumerable: false,
  5533. configurable: true
  5534. });
  5535. /** @hidden */
  5536. Control._GetFontOffset = function (font) {
  5537. if (Control._FontHeightSizes[font]) {
  5538. return Control._FontHeightSizes[font];
  5539. }
  5540. var text = document.createElement("span");
  5541. text.innerHTML = "Hg";
  5542. text.style.font = font;
  5543. var block = document.createElement("div");
  5544. block.style.display = "inline-block";
  5545. block.style.width = "1px";
  5546. block.style.height = "0px";
  5547. block.style.verticalAlign = "bottom";
  5548. var div = document.createElement("div");
  5549. div.style.whiteSpace = "nowrap";
  5550. div.appendChild(text);
  5551. div.appendChild(block);
  5552. document.body.appendChild(div);
  5553. var fontAscent = 0;
  5554. var fontHeight = 0;
  5555. try {
  5556. fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  5557. block.style.verticalAlign = "baseline";
  5558. fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  5559. }
  5560. finally {
  5561. document.body.removeChild(div);
  5562. }
  5563. var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
  5564. Control._FontHeightSizes[font] = result;
  5565. return result;
  5566. };
  5567. /** @hidden */
  5568. Control.drawEllipse = function (x, y, width, height, context) {
  5569. context.translate(x, y);
  5570. context.scale(width, height);
  5571. context.beginPath();
  5572. context.arc(0, 0, 1, 0, 2 * Math.PI);
  5573. context.closePath();
  5574. context.scale(1 / width, 1 / height);
  5575. context.translate(-x, -y);
  5576. };
  5577. /**
  5578. * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
  5579. */
  5580. Control.AllowAlphaInheritance = false;
  5581. Control._ClipMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  5582. // Statics
  5583. Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
  5584. Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
  5585. Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
  5586. Control._VERTICAL_ALIGNMENT_TOP = 0;
  5587. Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
  5588. Control._VERTICAL_ALIGNMENT_CENTER = 2;
  5589. Control._FontHeightSizes = {};
  5590. /**
  5591. * Creates a stack panel that can be used to render headers
  5592. * @param control defines the control to associate with the header
  5593. * @param text defines the text of the header
  5594. * @param size defines the size of the header
  5595. * @param options defines options used to configure the header
  5596. * @returns a new StackPanel
  5597. * @ignore
  5598. * @hidden
  5599. */
  5600. Control.AddHeader = function () { };
  5601. return Control;
  5602. }());
  5603. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Control"] = Control;
  5604. /***/ }),
  5605. /***/ "./2D/controls/displayGrid.ts":
  5606. /*!************************************!*\
  5607. !*** ./2D/controls/displayGrid.ts ***!
  5608. \************************************/
  5609. /*! exports provided: DisplayGrid */
  5610. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  5611. "use strict";
  5612. __webpack_require__.r(__webpack_exports__);
  5613. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return DisplayGrid; });
  5614. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  5615. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  5616. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  5617. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  5618. /** Class used to render a grid */
  5619. var DisplayGrid = /** @class */ (function (_super) {
  5620. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(DisplayGrid, _super);
  5621. /**
  5622. * Creates a new GridDisplayRectangle
  5623. * @param name defines the control name
  5624. */
  5625. function DisplayGrid(name) {
  5626. var _this = _super.call(this, name) || this;
  5627. _this.name = name;
  5628. _this._cellWidth = 20;
  5629. _this._cellHeight = 20;
  5630. _this._minorLineTickness = 1;
  5631. _this._minorLineColor = "DarkGray";
  5632. _this._majorLineTickness = 2;
  5633. _this._majorLineColor = "White";
  5634. _this._majorLineFrequency = 5;
  5635. _this._background = "Black";
  5636. _this._displayMajorLines = true;
  5637. _this._displayMinorLines = true;
  5638. return _this;
  5639. }
  5640. Object.defineProperty(DisplayGrid.prototype, "displayMinorLines", {
  5641. /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
  5642. get: function () {
  5643. return this._displayMinorLines;
  5644. },
  5645. set: function (value) {
  5646. if (this._displayMinorLines === value) {
  5647. return;
  5648. }
  5649. this._displayMinorLines = value;
  5650. this._markAsDirty();
  5651. },
  5652. enumerable: false,
  5653. configurable: true
  5654. });
  5655. Object.defineProperty(DisplayGrid.prototype, "displayMajorLines", {
  5656. /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
  5657. get: function () {
  5658. return this._displayMajorLines;
  5659. },
  5660. set: function (value) {
  5661. if (this._displayMajorLines === value) {
  5662. return;
  5663. }
  5664. this._displayMajorLines = value;
  5665. this._markAsDirty();
  5666. },
  5667. enumerable: false,
  5668. configurable: true
  5669. });
  5670. Object.defineProperty(DisplayGrid.prototype, "background", {
  5671. /** Gets or sets background color (Black by default) */
  5672. get: function () {
  5673. return this._background;
  5674. },
  5675. set: function (value) {
  5676. if (this._background === value) {
  5677. return;
  5678. }
  5679. this._background = value;
  5680. this._markAsDirty();
  5681. },
  5682. enumerable: false,
  5683. configurable: true
  5684. });
  5685. Object.defineProperty(DisplayGrid.prototype, "cellWidth", {
  5686. /** Gets or sets the width of each cell (20 by default) */
  5687. get: function () {
  5688. return this._cellWidth;
  5689. },
  5690. set: function (value) {
  5691. this._cellWidth = value;
  5692. this._markAsDirty();
  5693. },
  5694. enumerable: false,
  5695. configurable: true
  5696. });
  5697. Object.defineProperty(DisplayGrid.prototype, "cellHeight", {
  5698. /** Gets or sets the height of each cell (20 by default) */
  5699. get: function () {
  5700. return this._cellHeight;
  5701. },
  5702. set: function (value) {
  5703. this._cellHeight = value;
  5704. this._markAsDirty();
  5705. },
  5706. enumerable: false,
  5707. configurable: true
  5708. });
  5709. Object.defineProperty(DisplayGrid.prototype, "minorLineTickness", {
  5710. /** Gets or sets the tickness of minor lines (1 by default) */
  5711. get: function () {
  5712. return this._minorLineTickness;
  5713. },
  5714. set: function (value) {
  5715. this._minorLineTickness = value;
  5716. this._markAsDirty();
  5717. },
  5718. enumerable: false,
  5719. configurable: true
  5720. });
  5721. Object.defineProperty(DisplayGrid.prototype, "minorLineColor", {
  5722. /** Gets or sets the color of minor lines (DarkGray by default) */
  5723. get: function () {
  5724. return this._minorLineColor;
  5725. },
  5726. set: function (value) {
  5727. this._minorLineColor = value;
  5728. this._markAsDirty();
  5729. },
  5730. enumerable: false,
  5731. configurable: true
  5732. });
  5733. Object.defineProperty(DisplayGrid.prototype, "majorLineTickness", {
  5734. /** Gets or sets the tickness of major lines (2 by default) */
  5735. get: function () {
  5736. return this._majorLineTickness;
  5737. },
  5738. set: function (value) {
  5739. this._majorLineTickness = value;
  5740. this._markAsDirty();
  5741. },
  5742. enumerable: false,
  5743. configurable: true
  5744. });
  5745. Object.defineProperty(DisplayGrid.prototype, "majorLineColor", {
  5746. /** Gets or sets the color of major lines (White by default) */
  5747. get: function () {
  5748. return this._majorLineColor;
  5749. },
  5750. set: function (value) {
  5751. this._majorLineColor = value;
  5752. this._markAsDirty();
  5753. },
  5754. enumerable: false,
  5755. configurable: true
  5756. });
  5757. Object.defineProperty(DisplayGrid.prototype, "majorLineFrequency", {
  5758. /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/
  5759. get: function () {
  5760. return this._majorLineFrequency;
  5761. },
  5762. set: function (value) {
  5763. this._majorLineFrequency = value;
  5764. this._markAsDirty();
  5765. },
  5766. enumerable: false,
  5767. configurable: true
  5768. });
  5769. DisplayGrid.prototype._draw = function (context, invalidatedRectangle) {
  5770. context.save();
  5771. this._applyStates(context);
  5772. if (this._isEnabled) {
  5773. if (this._background) {
  5774. context.fillStyle = this._background;
  5775. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  5776. }
  5777. var cellCountX = this._currentMeasure.width / this._cellWidth;
  5778. var cellCountY = this._currentMeasure.height / this._cellHeight;
  5779. // Minor lines
  5780. var left = this._currentMeasure.left + this._currentMeasure.width / 2;
  5781. var top_1 = this._currentMeasure.top + this._currentMeasure.height / 2;
  5782. if (this._displayMinorLines) {
  5783. context.strokeStyle = this._minorLineColor;
  5784. context.lineWidth = this._minorLineTickness;
  5785. for (var x = -cellCountX / 2; x < cellCountX / 2; x++) {
  5786. var cellX = left + x * this.cellWidth;
  5787. context.beginPath();
  5788. context.moveTo(cellX, this._currentMeasure.top);
  5789. context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
  5790. context.stroke();
  5791. }
  5792. for (var y = -cellCountY / 2; y < cellCountY / 2; y++) {
  5793. var cellY = top_1 + y * this.cellHeight;
  5794. context.beginPath();
  5795. context.moveTo(this._currentMeasure.left, cellY);
  5796. context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
  5797. context.stroke();
  5798. }
  5799. }
  5800. // Major lines
  5801. if (this._displayMajorLines) {
  5802. context.strokeStyle = this._majorLineColor;
  5803. context.lineWidth = this._majorLineTickness;
  5804. for (var x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {
  5805. var cellX = left + x * this.cellWidth;
  5806. context.beginPath();
  5807. context.moveTo(cellX, this._currentMeasure.top);
  5808. context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
  5809. context.stroke();
  5810. }
  5811. for (var y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {
  5812. var cellY = top_1 + y * this.cellHeight;
  5813. context.moveTo(this._currentMeasure.left, cellY);
  5814. context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
  5815. context.closePath();
  5816. context.stroke();
  5817. }
  5818. }
  5819. }
  5820. context.restore();
  5821. };
  5822. DisplayGrid.prototype._getTypeName = function () {
  5823. return "DisplayGrid";
  5824. };
  5825. return DisplayGrid;
  5826. }(_control__WEBPACK_IMPORTED_MODULE_1__["Control"]));
  5827. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.DisplayGrid"] = DisplayGrid;
  5828. /***/ }),
  5829. /***/ "./2D/controls/ellipse.ts":
  5830. /*!********************************!*\
  5831. !*** ./2D/controls/ellipse.ts ***!
  5832. \********************************/
  5833. /*! exports provided: Ellipse */
  5834. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  5835. "use strict";
  5836. __webpack_require__.r(__webpack_exports__);
  5837. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return Ellipse; });
  5838. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  5839. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  5840. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  5841. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  5842. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__);
  5843. /** Class used to create 2D ellipse containers */
  5844. var Ellipse = /** @class */ (function (_super) {
  5845. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Ellipse, _super);
  5846. /**
  5847. * Creates a new Ellipse
  5848. * @param name defines the control name
  5849. */
  5850. function Ellipse(name) {
  5851. var _this = _super.call(this, name) || this;
  5852. _this.name = name;
  5853. _this._thickness = 1;
  5854. return _this;
  5855. }
  5856. Object.defineProperty(Ellipse.prototype, "thickness", {
  5857. /** Gets or sets border thickness */
  5858. get: function () {
  5859. return this._thickness;
  5860. },
  5861. set: function (value) {
  5862. if (this._thickness === value) {
  5863. return;
  5864. }
  5865. this._thickness = value;
  5866. this._markAsDirty();
  5867. },
  5868. enumerable: false,
  5869. configurable: true
  5870. });
  5871. Ellipse.prototype._getTypeName = function () {
  5872. return "Ellipse";
  5873. };
  5874. Ellipse.prototype._localDraw = function (context) {
  5875. context.save();
  5876. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  5877. context.shadowColor = this.shadowColor;
  5878. context.shadowBlur = this.shadowBlur;
  5879. context.shadowOffsetX = this.shadowOffsetX;
  5880. context.shadowOffsetY = this.shadowOffsetY;
  5881. }
  5882. _control__WEBPACK_IMPORTED_MODULE_2__["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);
  5883. if (this._background) {
  5884. context.fillStyle = this._background;
  5885. context.fill();
  5886. }
  5887. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  5888. context.shadowBlur = 0;
  5889. context.shadowOffsetX = 0;
  5890. context.shadowOffsetY = 0;
  5891. }
  5892. if (this._thickness) {
  5893. if (this.color) {
  5894. context.strokeStyle = this.color;
  5895. }
  5896. context.lineWidth = this._thickness;
  5897. context.stroke();
  5898. }
  5899. context.restore();
  5900. };
  5901. Ellipse.prototype._additionalProcessing = function (parentMeasure, context) {
  5902. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  5903. this._measureForChildren.width -= 2 * this._thickness;
  5904. this._measureForChildren.height -= 2 * this._thickness;
  5905. this._measureForChildren.left += this._thickness;
  5906. this._measureForChildren.top += this._thickness;
  5907. };
  5908. Ellipse.prototype._clipForChildren = function (context) {
  5909. _control__WEBPACK_IMPORTED_MODULE_2__["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);
  5910. context.clip();
  5911. };
  5912. return Ellipse;
  5913. }(_container__WEBPACK_IMPORTED_MODULE_1__["Container"]));
  5914. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Ellipse"] = Ellipse;
  5915. /***/ }),
  5916. /***/ "./2D/controls/focusableButton.ts":
  5917. /*!****************************************!*\
  5918. !*** ./2D/controls/focusableButton.ts ***!
  5919. \****************************************/
  5920. /*! exports provided: FocusableButton */
  5921. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  5922. "use strict";
  5923. __webpack_require__.r(__webpack_exports__);
  5924. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusableButton", function() { return FocusableButton; });
  5925. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  5926. /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
  5927. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  5928. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  5929. /**
  5930. * Class used to create a focusable button that can easily handle keyboard events
  5931. */
  5932. var FocusableButton = /** @class */ (function (_super) {
  5933. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FocusableButton, _super);
  5934. function FocusableButton(name) {
  5935. var _this = _super.call(this, name) || this;
  5936. _this.name = name;
  5937. /** Highlight color when button is focused */
  5938. _this.focusedColor = null;
  5939. _this._isFocused = false;
  5940. _this._unfocusedColor = null;
  5941. /** Observable raised when the control gets the focus */
  5942. _this.onFocusObservable = new babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["Observable"]();
  5943. /** Observable raised when the control loses the focus */
  5944. _this.onBlurObservable = new babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["Observable"]();
  5945. /** Observable raised when a key event was processed */
  5946. _this.onKeyboardEventProcessedObservable = new babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["Observable"]();
  5947. _this._unfocusedColor = _this.color;
  5948. return _this;
  5949. }
  5950. /** @hidden */
  5951. FocusableButton.prototype.onBlur = function () {
  5952. if (this._isFocused) {
  5953. this._isFocused = false;
  5954. if (this.focusedColor && this._unfocusedColor != null) {
  5955. // Set color back to saved unfocused color
  5956. this.color = this._unfocusedColor;
  5957. }
  5958. this.onBlurObservable.notifyObservers(this);
  5959. }
  5960. };
  5961. /** @hidden */
  5962. FocusableButton.prototype.onFocus = function () {
  5963. this._isFocused = true;
  5964. if (this.focusedColor) {
  5965. // Save the unfocused color
  5966. this._unfocusedColor = this.color;
  5967. this.color = this.focusedColor;
  5968. }
  5969. this.onFocusObservable.notifyObservers(this);
  5970. };
  5971. /**
  5972. * Function called to get the list of controls that should not steal the focus from this control
  5973. * @returns an array of controls
  5974. */
  5975. FocusableButton.prototype.keepsFocusWith = function () {
  5976. return null;
  5977. };
  5978. /**
  5979. * Function to focus a button programmatically
  5980. */
  5981. FocusableButton.prototype.focus = function () {
  5982. this._host.moveFocusToControl(this);
  5983. };
  5984. /**
  5985. * Function to unfocus a button programmatically
  5986. */
  5987. FocusableButton.prototype.blur = function () {
  5988. this._host.focusedControl = null;
  5989. };
  5990. /**
  5991. * Handles the keyboard event
  5992. * @param evt Defines the KeyboardEvent
  5993. */
  5994. FocusableButton.prototype.processKeyboard = function (evt) {
  5995. this.onKeyboardEventProcessedObservable.notifyObservers(evt, -1, this);
  5996. };
  5997. /** @hidden */
  5998. FocusableButton.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  5999. // Clicking on button should focus
  6000. this.focus();
  6001. return _super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi);
  6002. };
  6003. /** @hidden */
  6004. FocusableButton.prototype.displose = function () {
  6005. _super.prototype.dispose.call(this);
  6006. this.onBlurObservable.clear();
  6007. this.onFocusObservable.clear();
  6008. this.onKeyboardEventProcessedObservable.clear();
  6009. };
  6010. return FocusableButton;
  6011. }(_button__WEBPACK_IMPORTED_MODULE_1__["Button"]));
  6012. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.FocusableButton"] = FocusableButton;
  6013. /***/ }),
  6014. /***/ "./2D/controls/grid.ts":
  6015. /*!*****************************!*\
  6016. !*** ./2D/controls/grid.ts ***!
  6017. \*****************************/
  6018. /*! exports provided: Grid */
  6019. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  6020. "use strict";
  6021. __webpack_require__.r(__webpack_exports__);
  6022. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return Grid; });
  6023. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  6024. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  6025. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  6026. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  6027. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  6028. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__);
  6029. /**
  6030. * Class used to create a 2D grid container
  6031. */
  6032. var Grid = /** @class */ (function (_super) {
  6033. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Grid, _super);
  6034. /**
  6035. * Creates a new Grid
  6036. * @param name defines control name
  6037. */
  6038. function Grid(name) {
  6039. var _this = _super.call(this, name) || this;
  6040. _this.name = name;
  6041. _this._rowDefinitions = new Array();
  6042. _this._columnDefinitions = new Array();
  6043. _this._cells = {};
  6044. _this._childControls = new Array();
  6045. return _this;
  6046. }
  6047. Object.defineProperty(Grid.prototype, "columnCount", {
  6048. /**
  6049. * Gets the number of columns
  6050. */
  6051. get: function () {
  6052. return this._columnDefinitions.length;
  6053. },
  6054. enumerable: false,
  6055. configurable: true
  6056. });
  6057. Object.defineProperty(Grid.prototype, "rowCount", {
  6058. /**
  6059. * Gets the number of rows
  6060. */
  6061. get: function () {
  6062. return this._rowDefinitions.length;
  6063. },
  6064. enumerable: false,
  6065. configurable: true
  6066. });
  6067. Object.defineProperty(Grid.prototype, "children", {
  6068. /** Gets the list of children */
  6069. get: function () {
  6070. return this._childControls;
  6071. },
  6072. enumerable: false,
  6073. configurable: true
  6074. });
  6075. Object.defineProperty(Grid.prototype, "cells", {
  6076. /** Gets the list of cells (e.g. the containers) */
  6077. get: function () {
  6078. return this._cells;
  6079. },
  6080. enumerable: false,
  6081. configurable: true
  6082. });
  6083. /**
  6084. * Gets the definition of a specific row
  6085. * @param index defines the index of the row
  6086. * @returns the row definition
  6087. */
  6088. Grid.prototype.getRowDefinition = function (index) {
  6089. if (index < 0 || index >= this._rowDefinitions.length) {
  6090. return null;
  6091. }
  6092. return this._rowDefinitions[index];
  6093. };
  6094. /**
  6095. * Gets the definition of a specific column
  6096. * @param index defines the index of the column
  6097. * @returns the column definition
  6098. */
  6099. Grid.prototype.getColumnDefinition = function (index) {
  6100. if (index < 0 || index >= this._columnDefinitions.length) {
  6101. return null;
  6102. }
  6103. return this._columnDefinitions[index];
  6104. };
  6105. /**
  6106. * Adds a new row to the grid
  6107. * @param height defines the height of the row (either in pixel or a value between 0 and 1)
  6108. * @param isPixel defines if the height is expressed in pixel (or in percentage)
  6109. * @returns the current grid
  6110. */
  6111. Grid.prototype.addRowDefinition = function (height, isPixel) {
  6112. if (isPixel === void 0) { isPixel = false; }
  6113. this._rowDefinitions.push(new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"](height, isPixel ? _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL : _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PERCENTAGE));
  6114. this._markAsDirty();
  6115. return this;
  6116. };
  6117. /**
  6118. * Adds a new column to the grid
  6119. * @param width defines the width of the column (either in pixel or a value between 0 and 1)
  6120. * @param isPixel defines if the width is expressed in pixel (or in percentage)
  6121. * @returns the current grid
  6122. */
  6123. Grid.prototype.addColumnDefinition = function (width, isPixel) {
  6124. if (isPixel === void 0) { isPixel = false; }
  6125. this._columnDefinitions.push(new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"](width, isPixel ? _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL : _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PERCENTAGE));
  6126. this._markAsDirty();
  6127. return this;
  6128. };
  6129. /**
  6130. * Update a row definition
  6131. * @param index defines the index of the row to update
  6132. * @param height defines the height of the row (either in pixel or a value between 0 and 1)
  6133. * @param isPixel defines if the weight is expressed in pixel (or in percentage)
  6134. * @returns the current grid
  6135. */
  6136. Grid.prototype.setRowDefinition = function (index, height, isPixel) {
  6137. if (isPixel === void 0) { isPixel = false; }
  6138. if (index < 0 || index >= this._rowDefinitions.length) {
  6139. return this;
  6140. }
  6141. var current = this._rowDefinitions[index];
  6142. if (current && current.isPixel === isPixel && current.internalValue === height) {
  6143. return this;
  6144. }
  6145. this._rowDefinitions[index] = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"](height, isPixel ? _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL : _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PERCENTAGE);
  6146. this._markAsDirty();
  6147. return this;
  6148. };
  6149. /**
  6150. * Update a column definition
  6151. * @param index defines the index of the column to update
  6152. * @param width defines the width of the column (either in pixel or a value between 0 and 1)
  6153. * @param isPixel defines if the width is expressed in pixel (or in percentage)
  6154. * @returns the current grid
  6155. */
  6156. Grid.prototype.setColumnDefinition = function (index, width, isPixel) {
  6157. if (isPixel === void 0) { isPixel = false; }
  6158. if (index < 0 || index >= this._columnDefinitions.length) {
  6159. return this;
  6160. }
  6161. var current = this._columnDefinitions[index];
  6162. if (current && current.isPixel === isPixel && current.internalValue === width) {
  6163. return this;
  6164. }
  6165. this._columnDefinitions[index] = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"](width, isPixel ? _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL : _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PERCENTAGE);
  6166. this._markAsDirty();
  6167. return this;
  6168. };
  6169. /**
  6170. * Gets the list of children stored in a specific cell
  6171. * @param row defines the row to check
  6172. * @param column defines the column to check
  6173. * @returns the list of controls
  6174. */
  6175. Grid.prototype.getChildrenAt = function (row, column) {
  6176. var cell = this._cells[row + ":" + column];
  6177. if (!cell) {
  6178. return null;
  6179. }
  6180. return cell.children;
  6181. };
  6182. /**
  6183. * Gets a string representing the child cell info (row x column)
  6184. * @param child defines the control to get info from
  6185. * @returns a string containing the child cell info (row x column)
  6186. */
  6187. Grid.prototype.getChildCellInfo = function (child) {
  6188. return child._tag;
  6189. };
  6190. Grid.prototype._removeCell = function (cell, key) {
  6191. if (!cell) {
  6192. return;
  6193. }
  6194. _super.prototype.removeControl.call(this, cell);
  6195. for (var _i = 0, _a = cell.children; _i < _a.length; _i++) {
  6196. var control = _a[_i];
  6197. var childIndex = this._childControls.indexOf(control);
  6198. if (childIndex !== -1) {
  6199. this._childControls.splice(childIndex, 1);
  6200. }
  6201. }
  6202. delete this._cells[key];
  6203. };
  6204. Grid.prototype._offsetCell = function (previousKey, key) {
  6205. if (!this._cells[key]) {
  6206. return;
  6207. }
  6208. this._cells[previousKey] = this._cells[key];
  6209. for (var _i = 0, _a = this._cells[previousKey].children; _i < _a.length; _i++) {
  6210. var control = _a[_i];
  6211. control._tag = previousKey;
  6212. }
  6213. delete this._cells[key];
  6214. };
  6215. /**
  6216. * Remove a column definition at specified index
  6217. * @param index defines the index of the column to remove
  6218. * @returns the current grid
  6219. */
  6220. Grid.prototype.removeColumnDefinition = function (index) {
  6221. if (index < 0 || index >= this._columnDefinitions.length) {
  6222. return this;
  6223. }
  6224. for (var x = 0; x < this._rowDefinitions.length; x++) {
  6225. var key = x + ":" + index;
  6226. var cell = this._cells[key];
  6227. this._removeCell(cell, key);
  6228. }
  6229. for (var x = 0; x < this._rowDefinitions.length; x++) {
  6230. for (var y = index + 1; y < this._columnDefinitions.length; y++) {
  6231. var previousKey = x + ":" + (y - 1);
  6232. var key = x + ":" + y;
  6233. this._offsetCell(previousKey, key);
  6234. }
  6235. }
  6236. this._columnDefinitions.splice(index, 1);
  6237. this._markAsDirty();
  6238. return this;
  6239. };
  6240. /**
  6241. * Remove a row definition at specified index
  6242. * @param index defines the index of the row to remove
  6243. * @returns the current grid
  6244. */
  6245. Grid.prototype.removeRowDefinition = function (index) {
  6246. if (index < 0 || index >= this._rowDefinitions.length) {
  6247. return this;
  6248. }
  6249. for (var y = 0; y < this._columnDefinitions.length; y++) {
  6250. var key = index + ":" + y;
  6251. var cell = this._cells[key];
  6252. this._removeCell(cell, key);
  6253. }
  6254. for (var y = 0; y < this._columnDefinitions.length; y++) {
  6255. for (var x = index + 1; x < this._rowDefinitions.length; x++) {
  6256. var previousKey = x - 1 + ":" + y;
  6257. var key = x + ":" + y;
  6258. this._offsetCell(previousKey, key);
  6259. }
  6260. }
  6261. this._rowDefinitions.splice(index, 1);
  6262. this._markAsDirty();
  6263. return this;
  6264. };
  6265. /**
  6266. * Adds a new control to the current grid
  6267. * @param control defines the control to add
  6268. * @param row defines the row where to add the control (0 by default)
  6269. * @param column defines the column where to add the control (0 by default)
  6270. * @returns the current grid
  6271. */
  6272. Grid.prototype.addControl = function (control, row, column) {
  6273. if (row === void 0) { row = 0; }
  6274. if (column === void 0) { column = 0; }
  6275. if (this._rowDefinitions.length === 0) {
  6276. // Add default row definition
  6277. this.addRowDefinition(1, false);
  6278. }
  6279. if (this._columnDefinitions.length === 0) {
  6280. // Add default column definition
  6281. this.addColumnDefinition(1, false);
  6282. }
  6283. if (this._childControls.indexOf(control) !== -1) {
  6284. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Tools"].Warn("Control (Name:" + control.name + ", UniqueId:" + control.uniqueId + ") is already associated with this grid. You must remove it before reattaching it");
  6285. return this;
  6286. }
  6287. var x = Math.min(row, this._rowDefinitions.length - 1);
  6288. var y = Math.min(column, this._columnDefinitions.length - 1);
  6289. var key = x + ":" + y;
  6290. var goodContainer = this._cells[key];
  6291. if (!goodContainer) {
  6292. goodContainer = new _container__WEBPACK_IMPORTED_MODULE_1__["Container"](key);
  6293. this._cells[key] = goodContainer;
  6294. goodContainer.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  6295. goodContainer.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  6296. _super.prototype.addControl.call(this, goodContainer);
  6297. }
  6298. goodContainer.addControl(control);
  6299. this._childControls.push(control);
  6300. control._tag = key;
  6301. control.parent = this;
  6302. this._markAsDirty();
  6303. return this;
  6304. };
  6305. /**
  6306. * Removes a control from the current container
  6307. * @param control defines the control to remove
  6308. * @returns the current container
  6309. */
  6310. Grid.prototype.removeControl = function (control) {
  6311. var index = this._childControls.indexOf(control);
  6312. if (index !== -1) {
  6313. this._childControls.splice(index, 1);
  6314. }
  6315. var cell = this._cells[control._tag];
  6316. if (cell) {
  6317. cell.removeControl(control);
  6318. control._tag = null;
  6319. }
  6320. this._markAsDirty();
  6321. return this;
  6322. };
  6323. Grid.prototype._getTypeName = function () {
  6324. return "Grid";
  6325. };
  6326. Grid.prototype._getGridDefinitions = function (definitionCallback) {
  6327. var widths = [];
  6328. var heights = [];
  6329. var lefts = [];
  6330. var tops = [];
  6331. var availableWidth = this._currentMeasure.width;
  6332. var globalWidthPercentage = 0;
  6333. var availableHeight = this._currentMeasure.height;
  6334. var globalHeightPercentage = 0;
  6335. // Heights
  6336. var index = 0;
  6337. for (var _i = 0, _a = this._rowDefinitions; _i < _a.length; _i++) {
  6338. var value = _a[_i];
  6339. if (value.isPixel) {
  6340. var height = value.getValue(this._host);
  6341. availableHeight -= height;
  6342. heights[index] = height;
  6343. }
  6344. else {
  6345. globalHeightPercentage += value.internalValue;
  6346. }
  6347. index++;
  6348. }
  6349. var top = 0;
  6350. index = 0;
  6351. for (var _b = 0, _c = this._rowDefinitions; _b < _c.length; _b++) {
  6352. var value = _c[_b];
  6353. tops.push(top);
  6354. if (!value.isPixel) {
  6355. var height = (value.internalValue / globalHeightPercentage) * availableHeight;
  6356. top += height;
  6357. heights[index] = height;
  6358. }
  6359. else {
  6360. top += value.getValue(this._host);
  6361. }
  6362. index++;
  6363. }
  6364. // Widths
  6365. index = 0;
  6366. for (var _d = 0, _e = this._columnDefinitions; _d < _e.length; _d++) {
  6367. var value = _e[_d];
  6368. if (value.isPixel) {
  6369. var width = value.getValue(this._host);
  6370. availableWidth -= width;
  6371. widths[index] = width;
  6372. }
  6373. else {
  6374. globalWidthPercentage += value.internalValue;
  6375. }
  6376. index++;
  6377. }
  6378. var left = 0;
  6379. index = 0;
  6380. for (var _f = 0, _g = this._columnDefinitions; _f < _g.length; _f++) {
  6381. var value = _g[_f];
  6382. lefts.push(left);
  6383. if (!value.isPixel) {
  6384. var width = (value.internalValue / globalWidthPercentage) * availableWidth;
  6385. left += width;
  6386. widths[index] = width;
  6387. }
  6388. else {
  6389. left += value.getValue(this._host);
  6390. }
  6391. index++;
  6392. }
  6393. definitionCallback(lefts, tops, widths, heights);
  6394. };
  6395. Grid.prototype._additionalProcessing = function (parentMeasure, context) {
  6396. var _this = this;
  6397. this._getGridDefinitions(function (lefts, tops, widths, heights) {
  6398. // Setting child sizes
  6399. for (var key in _this._cells) {
  6400. if (!_this._cells.hasOwnProperty(key)) {
  6401. continue;
  6402. }
  6403. var split = key.split(":");
  6404. var x = parseInt(split[0]);
  6405. var y = parseInt(split[1]);
  6406. var cell = _this._cells[key];
  6407. cell.left = lefts[y] + "px";
  6408. cell.top = tops[x] + "px";
  6409. cell.width = widths[y] + "px";
  6410. cell.height = heights[x] + "px";
  6411. cell._left.ignoreAdaptiveScaling = true;
  6412. cell._top.ignoreAdaptiveScaling = true;
  6413. cell._width.ignoreAdaptiveScaling = true;
  6414. cell._height.ignoreAdaptiveScaling = true;
  6415. }
  6416. });
  6417. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  6418. };
  6419. Grid.prototype._flagDescendantsAsMatrixDirty = function () {
  6420. for (var key in this._cells) {
  6421. if (!this._cells.hasOwnProperty(key)) {
  6422. continue;
  6423. }
  6424. var child = this._cells[key];
  6425. child._markMatrixAsDirty();
  6426. }
  6427. };
  6428. Grid.prototype._renderHighlightSpecific = function (context) {
  6429. var _this = this;
  6430. _super.prototype._renderHighlightSpecific.call(this, context);
  6431. this._getGridDefinitions(function (lefts, tops, widths, heights) {
  6432. // Columns
  6433. for (var index = 0; index < lefts.length; index++) {
  6434. var left = _this._currentMeasure.left + lefts[index] + widths[index];
  6435. context.beginPath();
  6436. context.moveTo(left, _this._currentMeasure.top);
  6437. context.lineTo(left, _this._currentMeasure.top + _this._currentMeasure.height);
  6438. context.stroke();
  6439. }
  6440. // Rows
  6441. for (var index = 0; index < tops.length; index++) {
  6442. var top_1 = _this._currentMeasure.top + tops[index] + heights[index];
  6443. context.beginPath();
  6444. context.moveTo(_this._currentMeasure.left, top_1);
  6445. context.lineTo(_this._currentMeasure.left + _this._currentMeasure.width, top_1);
  6446. context.stroke();
  6447. }
  6448. });
  6449. context.restore();
  6450. };
  6451. /** Releases associated resources */
  6452. Grid.prototype.dispose = function () {
  6453. _super.prototype.dispose.call(this);
  6454. for (var _i = 0, _a = this._childControls; _i < _a.length; _i++) {
  6455. var control = _a[_i];
  6456. control.dispose();
  6457. }
  6458. this._childControls = [];
  6459. };
  6460. return Grid;
  6461. }(_container__WEBPACK_IMPORTED_MODULE_1__["Container"]));
  6462. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Grid"] = Grid;
  6463. /***/ }),
  6464. /***/ "./2D/controls/image.ts":
  6465. /*!******************************!*\
  6466. !*** ./2D/controls/image.ts ***!
  6467. \******************************/
  6468. /*! exports provided: Image */
  6469. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  6470. "use strict";
  6471. __webpack_require__.r(__webpack_exports__);
  6472. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return Image; });
  6473. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  6474. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  6475. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  6476. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  6477. /**
  6478. * Class used to create 2D images
  6479. */
  6480. var Image = /** @class */ (function (_super) {
  6481. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Image, _super);
  6482. /**
  6483. * Creates a new Image
  6484. * @param name defines the control name
  6485. * @param url defines the image url
  6486. */
  6487. function Image(name, url) {
  6488. if (url === void 0) { url = null; }
  6489. var _this = _super.call(this, name) || this;
  6490. _this.name = name;
  6491. _this._workingCanvas = null;
  6492. _this._loaded = false;
  6493. _this._stretch = Image.STRETCH_FILL;
  6494. _this._autoScale = false;
  6495. _this._sourceLeft = 0;
  6496. _this._sourceTop = 0;
  6497. _this._sourceWidth = 0;
  6498. _this._sourceHeight = 0;
  6499. _this._svgAttributesComputationCompleted = false;
  6500. _this._isSVG = false;
  6501. _this._cellWidth = 0;
  6502. _this._cellHeight = 0;
  6503. _this._cellId = -1;
  6504. _this._populateNinePatchSlicesFromImage = false;
  6505. _this._imageDataCache = { data: null, key: "" };
  6506. /**
  6507. * Observable notified when the content is loaded
  6508. */
  6509. _this.onImageLoadedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  6510. /**
  6511. * Observable notified when _sourceLeft, _sourceTop, _sourceWidth and _sourceHeight are computed
  6512. */
  6513. _this.onSVGAttributesComputedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  6514. _this.source = url;
  6515. return _this;
  6516. }
  6517. Object.defineProperty(Image.prototype, "isLoaded", {
  6518. /**
  6519. * Gets a boolean indicating that the content is loaded
  6520. */
  6521. get: function () {
  6522. return this._loaded;
  6523. },
  6524. enumerable: false,
  6525. configurable: true
  6526. });
  6527. Object.defineProperty(Image.prototype, "populateNinePatchSlicesFromImage", {
  6528. /**
  6529. * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
  6530. */
  6531. get: function () {
  6532. return this._populateNinePatchSlicesFromImage;
  6533. },
  6534. set: function (value) {
  6535. if (this._populateNinePatchSlicesFromImage === value) {
  6536. return;
  6537. }
  6538. this._populateNinePatchSlicesFromImage = value;
  6539. if (this._populateNinePatchSlicesFromImage && this._loaded) {
  6540. this._extractNinePatchSliceDataFromImage();
  6541. }
  6542. },
  6543. enumerable: false,
  6544. configurable: true
  6545. });
  6546. Object.defineProperty(Image.prototype, "detectPointerOnOpaqueOnly", {
  6547. /**
  6548. * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
  6549. * Beware using this as this will comsume more memory as the image has to be stored twice
  6550. */
  6551. get: function () {
  6552. return this._detectPointerOnOpaqueOnly;
  6553. },
  6554. set: function (value) {
  6555. if (this._detectPointerOnOpaqueOnly === value) {
  6556. return;
  6557. }
  6558. this._detectPointerOnOpaqueOnly = value;
  6559. },
  6560. enumerable: false,
  6561. configurable: true
  6562. });
  6563. Object.defineProperty(Image.prototype, "sliceLeft", {
  6564. /**
  6565. * Gets or sets the left value for slicing (9-patch)
  6566. */
  6567. get: function () {
  6568. return this._sliceLeft;
  6569. },
  6570. set: function (value) {
  6571. if (this._sliceLeft === value) {
  6572. return;
  6573. }
  6574. this._sliceLeft = value;
  6575. this._markAsDirty();
  6576. },
  6577. enumerable: false,
  6578. configurable: true
  6579. });
  6580. Object.defineProperty(Image.prototype, "sliceRight", {
  6581. /**
  6582. * Gets or sets the right value for slicing (9-patch)
  6583. */
  6584. get: function () {
  6585. return this._sliceRight;
  6586. },
  6587. set: function (value) {
  6588. if (this._sliceRight === value) {
  6589. return;
  6590. }
  6591. this._sliceRight = value;
  6592. this._markAsDirty();
  6593. },
  6594. enumerable: false,
  6595. configurable: true
  6596. });
  6597. Object.defineProperty(Image.prototype, "sliceTop", {
  6598. /**
  6599. * Gets or sets the top value for slicing (9-patch)
  6600. */
  6601. get: function () {
  6602. return this._sliceTop;
  6603. },
  6604. set: function (value) {
  6605. if (this._sliceTop === value) {
  6606. return;
  6607. }
  6608. this._sliceTop = value;
  6609. this._markAsDirty();
  6610. },
  6611. enumerable: false,
  6612. configurable: true
  6613. });
  6614. Object.defineProperty(Image.prototype, "sliceBottom", {
  6615. /**
  6616. * Gets or sets the bottom value for slicing (9-patch)
  6617. */
  6618. get: function () {
  6619. return this._sliceBottom;
  6620. },
  6621. set: function (value) {
  6622. if (this._sliceBottom === value) {
  6623. return;
  6624. }
  6625. this._sliceBottom = value;
  6626. this._markAsDirty();
  6627. },
  6628. enumerable: false,
  6629. configurable: true
  6630. });
  6631. Object.defineProperty(Image.prototype, "sourceLeft", {
  6632. /**
  6633. * Gets or sets the left coordinate in the source image
  6634. */
  6635. get: function () {
  6636. return this._sourceLeft;
  6637. },
  6638. set: function (value) {
  6639. if (this._sourceLeft === value) {
  6640. return;
  6641. }
  6642. this._sourceLeft = value;
  6643. this._markAsDirty();
  6644. },
  6645. enumerable: false,
  6646. configurable: true
  6647. });
  6648. Object.defineProperty(Image.prototype, "sourceTop", {
  6649. /**
  6650. * Gets or sets the top coordinate in the source image
  6651. */
  6652. get: function () {
  6653. return this._sourceTop;
  6654. },
  6655. set: function (value) {
  6656. if (this._sourceTop === value) {
  6657. return;
  6658. }
  6659. this._sourceTop = value;
  6660. this._markAsDirty();
  6661. },
  6662. enumerable: false,
  6663. configurable: true
  6664. });
  6665. Object.defineProperty(Image.prototype, "sourceWidth", {
  6666. /**
  6667. * Gets or sets the width to capture in the source image
  6668. */
  6669. get: function () {
  6670. return this._sourceWidth;
  6671. },
  6672. set: function (value) {
  6673. if (this._sourceWidth === value) {
  6674. return;
  6675. }
  6676. this._sourceWidth = value;
  6677. this._markAsDirty();
  6678. },
  6679. enumerable: false,
  6680. configurable: true
  6681. });
  6682. Object.defineProperty(Image.prototype, "sourceHeight", {
  6683. /**
  6684. * Gets or sets the height to capture in the source image
  6685. */
  6686. get: function () {
  6687. return this._sourceHeight;
  6688. },
  6689. set: function (value) {
  6690. if (this._sourceHeight === value) {
  6691. return;
  6692. }
  6693. this._sourceHeight = value;
  6694. this._markAsDirty();
  6695. },
  6696. enumerable: false,
  6697. configurable: true
  6698. });
  6699. Object.defineProperty(Image.prototype, "isSVG", {
  6700. /** Indicates if the format of the image is SVG */
  6701. get: function () {
  6702. return this._isSVG;
  6703. },
  6704. enumerable: false,
  6705. configurable: true
  6706. });
  6707. Object.defineProperty(Image.prototype, "svgAttributesComputationCompleted", {
  6708. /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
  6709. get: function () {
  6710. return this._svgAttributesComputationCompleted;
  6711. },
  6712. enumerable: false,
  6713. configurable: true
  6714. });
  6715. Object.defineProperty(Image.prototype, "autoScale", {
  6716. /**
  6717. * Gets or sets a boolean indicating if the image can force its container to adapt its size
  6718. * @see https://doc.babylonjs.com/how_to/gui#image
  6719. */
  6720. get: function () {
  6721. return this._autoScale;
  6722. },
  6723. set: function (value) {
  6724. if (this._autoScale === value) {
  6725. return;
  6726. }
  6727. this._autoScale = value;
  6728. if (value && this._loaded) {
  6729. this.synchronizeSizeWithContent();
  6730. }
  6731. },
  6732. enumerable: false,
  6733. configurable: true
  6734. });
  6735. Object.defineProperty(Image.prototype, "stretch", {
  6736. /** Gets or sets the streching mode used by the image */
  6737. get: function () {
  6738. return this._stretch;
  6739. },
  6740. set: function (value) {
  6741. if (this._stretch === value) {
  6742. return;
  6743. }
  6744. this._stretch = value;
  6745. this._markAsDirty();
  6746. },
  6747. enumerable: false,
  6748. configurable: true
  6749. });
  6750. /** @hidden */
  6751. Image.prototype._rotate90 = function (n, preserveProperties) {
  6752. if (preserveProperties === void 0) { preserveProperties = false; }
  6753. var canvas = document.createElement('canvas');
  6754. var context = canvas.getContext('2d');
  6755. var width = this._domImage.width;
  6756. var height = this._domImage.height;
  6757. canvas.width = height;
  6758. canvas.height = width;
  6759. context.translate(canvas.width / 2, canvas.height / 2);
  6760. context.rotate(n * Math.PI / 2);
  6761. context.drawImage(this._domImage, 0, 0, width, height, -width / 2, -height / 2, width, height);
  6762. var dataUrl = canvas.toDataURL("image/jpg");
  6763. var rotatedImage = new Image(this.name + "rotated", dataUrl);
  6764. if (preserveProperties) {
  6765. rotatedImage._stretch = this._stretch;
  6766. rotatedImage._autoScale = this._autoScale;
  6767. rotatedImage._cellId = this._cellId;
  6768. rotatedImage._cellWidth = n % 1 ? this._cellHeight : this._cellWidth;
  6769. rotatedImage._cellHeight = n % 1 ? this._cellWidth : this._cellHeight;
  6770. }
  6771. this._handleRotationForSVGImage(this, rotatedImage, n);
  6772. this._imageDataCache.data = null;
  6773. return rotatedImage;
  6774. };
  6775. Image.prototype._handleRotationForSVGImage = function (srcImage, dstImage, n) {
  6776. var _this = this;
  6777. if (!srcImage._isSVG) {
  6778. return;
  6779. }
  6780. if (srcImage._svgAttributesComputationCompleted) {
  6781. this._rotate90SourceProperties(srcImage, dstImage, n);
  6782. this._markAsDirty();
  6783. }
  6784. else {
  6785. srcImage.onSVGAttributesComputedObservable.addOnce(function () {
  6786. _this._rotate90SourceProperties(srcImage, dstImage, n);
  6787. _this._markAsDirty();
  6788. });
  6789. }
  6790. };
  6791. Image.prototype._rotate90SourceProperties = function (srcImage, dstImage, n) {
  6792. var _a, _b;
  6793. var srcLeft = srcImage.sourceLeft, srcTop = srcImage.sourceTop, srcWidth = srcImage.domImage.width, srcHeight = srcImage.domImage.height;
  6794. var dstLeft = srcLeft, dstTop = srcTop, dstWidth = srcImage.sourceWidth, dstHeight = srcImage.sourceHeight;
  6795. if (n != 0) {
  6796. var mult = n < 0 ? -1 : 1;
  6797. n = n % 4;
  6798. for (var i = 0; i < Math.abs(n); ++i) {
  6799. dstLeft = -(srcTop - srcHeight / 2) * mult + srcHeight / 2;
  6800. dstTop = (srcLeft - srcWidth / 2) * mult + srcWidth / 2;
  6801. _a = [dstHeight, dstWidth], dstWidth = _a[0], dstHeight = _a[1];
  6802. if (n < 0) {
  6803. dstTop -= dstHeight;
  6804. }
  6805. else {
  6806. dstLeft -= dstWidth;
  6807. }
  6808. srcLeft = dstLeft;
  6809. srcTop = dstTop;
  6810. _b = [srcHeight, srcWidth], srcWidth = _b[0], srcHeight = _b[1];
  6811. }
  6812. }
  6813. dstImage.sourceLeft = dstLeft;
  6814. dstImage.sourceTop = dstTop;
  6815. dstImage.sourceWidth = dstWidth;
  6816. dstImage.sourceHeight = dstHeight;
  6817. };
  6818. Object.defineProperty(Image.prototype, "domImage", {
  6819. get: function () {
  6820. return this._domImage;
  6821. },
  6822. /**
  6823. * Gets or sets the internal DOM image used to render the control
  6824. */
  6825. set: function (value) {
  6826. var _this = this;
  6827. this._domImage = value;
  6828. this._loaded = false;
  6829. this._imageDataCache.data = null;
  6830. if (this._domImage.width) {
  6831. this._onImageLoaded();
  6832. }
  6833. else {
  6834. this._domImage.onload = function () {
  6835. _this._onImageLoaded();
  6836. };
  6837. }
  6838. },
  6839. enumerable: false,
  6840. configurable: true
  6841. });
  6842. Image.prototype._onImageLoaded = function () {
  6843. this._imageDataCache.data = null;
  6844. this._imageWidth = this._domImage.width;
  6845. this._imageHeight = this._domImage.height;
  6846. this._loaded = true;
  6847. if (this._populateNinePatchSlicesFromImage) {
  6848. this._extractNinePatchSliceDataFromImage();
  6849. }
  6850. if (this._autoScale) {
  6851. this.synchronizeSizeWithContent();
  6852. }
  6853. this.onImageLoadedObservable.notifyObservers(this);
  6854. this._markAsDirty();
  6855. };
  6856. Image.prototype._extractNinePatchSliceDataFromImage = function () {
  6857. if (!this._workingCanvas) {
  6858. this._workingCanvas = document.createElement('canvas');
  6859. }
  6860. var canvas = this._workingCanvas;
  6861. var context = canvas.getContext('2d');
  6862. var width = this._domImage.width;
  6863. var height = this._domImage.height;
  6864. canvas.width = width;
  6865. canvas.height = height;
  6866. context.drawImage(this._domImage, 0, 0, width, height);
  6867. var imageData = context.getImageData(0, 0, width, height);
  6868. // Left and right
  6869. this._sliceLeft = -1;
  6870. this._sliceRight = -1;
  6871. for (var x = 0; x < width; x++) {
  6872. var alpha = imageData.data[x * 4 + 3];
  6873. if (alpha > 127 && this._sliceLeft === -1) {
  6874. this._sliceLeft = x;
  6875. continue;
  6876. }
  6877. if (alpha < 127 && this._sliceLeft > -1) {
  6878. this._sliceRight = x;
  6879. break;
  6880. }
  6881. }
  6882. // top and bottom
  6883. this._sliceTop = -1;
  6884. this._sliceBottom = -1;
  6885. for (var y = 0; y < height; y++) {
  6886. var alpha = imageData.data[y * width * 4 + 3];
  6887. if (alpha > 127 && this._sliceTop === -1) {
  6888. this._sliceTop = y;
  6889. continue;
  6890. }
  6891. if (alpha < 127 && this._sliceTop > -1) {
  6892. this._sliceBottom = y;
  6893. break;
  6894. }
  6895. }
  6896. };
  6897. Object.defineProperty(Image.prototype, "source", {
  6898. /**
  6899. * Gets or sets image source url
  6900. */
  6901. set: function (value) {
  6902. var _this = this;
  6903. if (this._source === value) {
  6904. return;
  6905. }
  6906. this._loaded = false;
  6907. this._source = value;
  6908. this._imageDataCache.data = null;
  6909. if (value) {
  6910. value = this._svgCheck(value);
  6911. }
  6912. this._domImage = document.createElement("img");
  6913. this._domImage.onload = function () {
  6914. _this._onImageLoaded();
  6915. };
  6916. if (value) {
  6917. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetCorsBehavior(value, this._domImage);
  6918. this._domImage.src = value;
  6919. }
  6920. },
  6921. enumerable: false,
  6922. configurable: true
  6923. });
  6924. /**
  6925. * Checks for svg document with icon id present
  6926. */
  6927. Image.prototype._svgCheck = function (value) {
  6928. var _this = this;
  6929. if (window.SVGSVGElement && (value.search(/.svg#/gi) !== -1) && (value.indexOf("#") === value.lastIndexOf("#"))) {
  6930. this._isSVG = true;
  6931. var svgsrc = value.split('#')[0];
  6932. var elemid = value.split('#')[1];
  6933. // check if object alr exist in document
  6934. var svgExist = document.body.querySelector('object[data="' + svgsrc + '"]');
  6935. if (svgExist) {
  6936. var svgDoc = svgExist.contentDocument;
  6937. // get viewbox width and height, get svg document width and height in px
  6938. if (svgDoc && svgDoc.documentElement) {
  6939. var vb = svgDoc.documentElement.getAttribute("viewBox");
  6940. var docwidth = Number(svgDoc.documentElement.getAttribute("width"));
  6941. var docheight = Number(svgDoc.documentElement.getAttribute("height"));
  6942. var elem = svgDoc.getElementById(elemid);
  6943. if (elem && vb && docwidth && docheight) {
  6944. this._getSVGAttribs(svgExist, elemid);
  6945. return value;
  6946. }
  6947. }
  6948. // wait for object to load
  6949. svgExist.addEventListener("load", function () {
  6950. _this._getSVGAttribs(svgExist, elemid);
  6951. });
  6952. }
  6953. else {
  6954. // create document object
  6955. var svgImage = document.createElement("object");
  6956. svgImage.data = svgsrc;
  6957. svgImage.type = "image/svg+xml";
  6958. svgImage.width = "0%";
  6959. svgImage.height = "0%";
  6960. document.body.appendChild(svgImage);
  6961. // when the object has loaded, get the element attribs
  6962. svgImage.onload = function () {
  6963. var svgobj = document.body.querySelector('object[data="' + svgsrc + '"]');
  6964. if (svgobj) {
  6965. _this._getSVGAttribs(svgobj, elemid);
  6966. }
  6967. };
  6968. }
  6969. return svgsrc;
  6970. }
  6971. else {
  6972. return value;
  6973. }
  6974. };
  6975. /**
  6976. * Sets sourceLeft, sourceTop, sourceWidth, sourceHeight automatically
  6977. * given external svg file and icon id
  6978. */
  6979. Image.prototype._getSVGAttribs = function (svgsrc, elemid) {
  6980. var svgDoc = svgsrc.contentDocument;
  6981. // get viewbox width and height, get svg document width and height in px
  6982. if (svgDoc && svgDoc.documentElement) {
  6983. var vb = svgDoc.documentElement.getAttribute("viewBox");
  6984. var docwidth = Number(svgDoc.documentElement.getAttribute("width"));
  6985. var docheight = Number(svgDoc.documentElement.getAttribute("height"));
  6986. // get element bbox and matrix transform
  6987. var elem = svgDoc.getElementById(elemid);
  6988. if (vb && docwidth && docheight && elem) {
  6989. var vb_width = Number(vb.split(" ")[2]);
  6990. var vb_height = Number(vb.split(" ")[3]);
  6991. var elem_bbox = elem.getBBox();
  6992. var elem_matrix_a = 1;
  6993. var elem_matrix_d = 1;
  6994. var elem_matrix_e = 0;
  6995. var elem_matrix_f = 0;
  6996. if (elem.transform && elem.transform.baseVal.consolidate()) {
  6997. elem_matrix_a = elem.transform.baseVal.consolidate().matrix.a;
  6998. elem_matrix_d = elem.transform.baseVal.consolidate().matrix.d;
  6999. elem_matrix_e = elem.transform.baseVal.consolidate().matrix.e;
  7000. elem_matrix_f = elem.transform.baseVal.consolidate().matrix.f;
  7001. }
  7002. // compute source coordinates and dimensions
  7003. this.sourceLeft = ((elem_matrix_a * elem_bbox.x + elem_matrix_e) * docwidth) / vb_width;
  7004. this.sourceTop = ((elem_matrix_d * elem_bbox.y + elem_matrix_f) * docheight) / vb_height;
  7005. this.sourceWidth = (elem_bbox.width * elem_matrix_a) * (docwidth / vb_width);
  7006. this.sourceHeight = (elem_bbox.height * elem_matrix_d) * (docheight / vb_height);
  7007. this._svgAttributesComputationCompleted = true;
  7008. this.onSVGAttributesComputedObservable.notifyObservers(this);
  7009. }
  7010. }
  7011. };
  7012. Object.defineProperty(Image.prototype, "cellWidth", {
  7013. /**
  7014. * Gets or sets the cell width to use when animation sheet is enabled
  7015. * @see https://doc.babylonjs.com/how_to/gui#image
  7016. */
  7017. get: function () {
  7018. return this._cellWidth;
  7019. },
  7020. set: function (value) {
  7021. if (this._cellWidth === value) {
  7022. return;
  7023. }
  7024. this._cellWidth = value;
  7025. this._markAsDirty();
  7026. },
  7027. enumerable: false,
  7028. configurable: true
  7029. });
  7030. Object.defineProperty(Image.prototype, "cellHeight", {
  7031. /**
  7032. * Gets or sets the cell height to use when animation sheet is enabled
  7033. * @see https://doc.babylonjs.com/how_to/gui#image
  7034. */
  7035. get: function () {
  7036. return this._cellHeight;
  7037. },
  7038. set: function (value) {
  7039. if (this._cellHeight === value) {
  7040. return;
  7041. }
  7042. this._cellHeight = value;
  7043. this._markAsDirty();
  7044. },
  7045. enumerable: false,
  7046. configurable: true
  7047. });
  7048. Object.defineProperty(Image.prototype, "cellId", {
  7049. /**
  7050. * Gets or sets the cell id to use (this will turn on the animation sheet mode)
  7051. * @see https://doc.babylonjs.com/how_to/gui#image
  7052. */
  7053. get: function () {
  7054. return this._cellId;
  7055. },
  7056. set: function (value) {
  7057. if (this._cellId === value) {
  7058. return;
  7059. }
  7060. this._cellId = value;
  7061. this._markAsDirty();
  7062. },
  7063. enumerable: false,
  7064. configurable: true
  7065. });
  7066. /**
  7067. * Tests if a given coordinates belong to the current control
  7068. * @param x defines x coordinate to test
  7069. * @param y defines y coordinate to test
  7070. * @returns true if the coordinates are inside the control
  7071. */
  7072. Image.prototype.contains = function (x, y) {
  7073. if (!_super.prototype.contains.call(this, x, y)) {
  7074. return false;
  7075. }
  7076. if (!this._detectPointerOnOpaqueOnly || !this._workingCanvas) {
  7077. return true;
  7078. }
  7079. var width = this._currentMeasure.width | 0;
  7080. var height = this._currentMeasure.height | 0;
  7081. var key = width + "_" + height;
  7082. var imageData = this._imageDataCache.data;
  7083. if (!imageData || this._imageDataCache.key !== key) {
  7084. var canvas = this._workingCanvas;
  7085. var context_1 = canvas.getContext("2d");
  7086. this._imageDataCache.data = imageData = context_1.getImageData(0, 0, width, height).data;
  7087. this._imageDataCache.key = key;
  7088. }
  7089. x = (x - this._currentMeasure.left) | 0;
  7090. y = (y - this._currentMeasure.top) | 0;
  7091. var pickedPixel = imageData[(x + y * width) * 4 + 3];
  7092. return pickedPixel > 0;
  7093. };
  7094. Image.prototype._getTypeName = function () {
  7095. return "Image";
  7096. };
  7097. /** Force the control to synchronize with its content */
  7098. Image.prototype.synchronizeSizeWithContent = function () {
  7099. if (!this._loaded) {
  7100. return;
  7101. }
  7102. this.width = this._domImage.width + "px";
  7103. this.height = this._domImage.height + "px";
  7104. };
  7105. Image.prototype._processMeasures = function (parentMeasure, context) {
  7106. if (this._loaded) {
  7107. switch (this._stretch) {
  7108. case Image.STRETCH_NONE:
  7109. break;
  7110. case Image.STRETCH_FILL:
  7111. break;
  7112. case Image.STRETCH_UNIFORM:
  7113. break;
  7114. case Image.STRETCH_NINE_PATCH:
  7115. break;
  7116. case Image.STRETCH_EXTEND:
  7117. if (this._autoScale) {
  7118. this.synchronizeSizeWithContent();
  7119. }
  7120. if (this.parent && this.parent.parent) { // Will update root size if root is not the top root
  7121. this.parent.adaptWidthToChildren = true;
  7122. this.parent.adaptHeightToChildren = true;
  7123. }
  7124. break;
  7125. }
  7126. }
  7127. _super.prototype._processMeasures.call(this, parentMeasure, context);
  7128. };
  7129. Image.prototype._prepareWorkingCanvasForOpaqueDetection = function () {
  7130. if (!this._detectPointerOnOpaqueOnly) {
  7131. return;
  7132. }
  7133. if (!this._workingCanvas) {
  7134. this._workingCanvas = document.createElement('canvas');
  7135. }
  7136. var canvas = this._workingCanvas;
  7137. var width = this._currentMeasure.width;
  7138. var height = this._currentMeasure.height;
  7139. var context = canvas.getContext("2d");
  7140. canvas.width = width;
  7141. canvas.height = height;
  7142. context.clearRect(0, 0, width, height);
  7143. };
  7144. Image.prototype._drawImage = function (context, sx, sy, sw, sh, tx, ty, tw, th) {
  7145. context.drawImage(this._domImage, sx, sy, sw, sh, tx, ty, tw, th);
  7146. if (!this._detectPointerOnOpaqueOnly) {
  7147. return;
  7148. }
  7149. var canvas = this._workingCanvas;
  7150. context = canvas.getContext("2d");
  7151. context.drawImage(this._domImage, sx, sy, sw, sh, tx - this._currentMeasure.left, ty - this._currentMeasure.top, tw, th);
  7152. };
  7153. Image.prototype._draw = function (context) {
  7154. context.save();
  7155. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  7156. context.shadowColor = this.shadowColor;
  7157. context.shadowBlur = this.shadowBlur;
  7158. context.shadowOffsetX = this.shadowOffsetX;
  7159. context.shadowOffsetY = this.shadowOffsetY;
  7160. }
  7161. var x, y, width, height;
  7162. if (this.cellId == -1) {
  7163. x = this._sourceLeft;
  7164. y = this._sourceTop;
  7165. width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
  7166. height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
  7167. }
  7168. else {
  7169. var rowCount = this._domImage.naturalWidth / this.cellWidth;
  7170. var column = (this.cellId / rowCount) >> 0;
  7171. var row = this.cellId % rowCount;
  7172. x = this.cellWidth * row;
  7173. y = this.cellHeight * column;
  7174. width = this.cellWidth;
  7175. height = this.cellHeight;
  7176. }
  7177. this._prepareWorkingCanvasForOpaqueDetection();
  7178. this._applyStates(context);
  7179. if (this._loaded) {
  7180. switch (this._stretch) {
  7181. case Image.STRETCH_NONE:
  7182. this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  7183. break;
  7184. case Image.STRETCH_FILL:
  7185. this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  7186. break;
  7187. case Image.STRETCH_UNIFORM:
  7188. var hRatio = this._currentMeasure.width / width;
  7189. var vRatio = this._currentMeasure.height / height;
  7190. var ratio = Math.min(hRatio, vRatio);
  7191. var centerX = (this._currentMeasure.width - width * ratio) / 2;
  7192. var centerY = (this._currentMeasure.height - height * ratio) / 2;
  7193. this._drawImage(context, x, y, width, height, this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
  7194. break;
  7195. case Image.STRETCH_EXTEND:
  7196. this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  7197. break;
  7198. case Image.STRETCH_NINE_PATCH:
  7199. this._renderNinePatch(context);
  7200. break;
  7201. }
  7202. }
  7203. context.restore();
  7204. };
  7205. Image.prototype._renderCornerPatch = function (context, x, y, width, height, targetX, targetY) {
  7206. this._drawImage(context, x, y, width, height, this._currentMeasure.left + targetX, this._currentMeasure.top + targetY, width, height);
  7207. };
  7208. Image.prototype._renderNinePatch = function (context) {
  7209. var height = this._imageHeight;
  7210. var leftWidth = this._sliceLeft;
  7211. var topHeight = this._sliceTop;
  7212. var bottomHeight = this._imageHeight - this._sliceBottom;
  7213. var rightWidth = this._imageWidth - this._sliceRight;
  7214. var left = 0;
  7215. var top = 0;
  7216. if (this._populateNinePatchSlicesFromImage) {
  7217. left = 1;
  7218. top = 1;
  7219. height -= 2;
  7220. leftWidth -= 1;
  7221. topHeight -= 1;
  7222. bottomHeight -= 1;
  7223. rightWidth -= 1;
  7224. }
  7225. var centerWidth = this._sliceRight - this._sliceLeft;
  7226. var targetCenterWidth = this._currentMeasure.width - rightWidth - this.sliceLeft;
  7227. var targetTopHeight = this._currentMeasure.height - height + this._sliceBottom;
  7228. // Corners
  7229. this._renderCornerPatch(context, left, top, leftWidth, topHeight, 0, 0);
  7230. this._renderCornerPatch(context, left, this._sliceBottom, leftWidth, height - this._sliceBottom, 0, targetTopHeight);
  7231. this._renderCornerPatch(context, this._sliceRight, top, rightWidth, topHeight, this._currentMeasure.width - rightWidth, 0);
  7232. this._renderCornerPatch(context, this._sliceRight, this._sliceBottom, rightWidth, height - this._sliceBottom, this._currentMeasure.width - rightWidth, targetTopHeight);
  7233. // Center
  7234. this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + leftWidth, this._currentMeasure.top + topHeight, targetCenterWidth, targetTopHeight - topHeight);
  7235. // Borders
  7236. this._drawImage(context, left, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
  7237. this._drawImage(context, this._sliceRight, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + this._currentMeasure.width - rightWidth, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
  7238. this._drawImage(context, this._sliceLeft, top, centerWidth, topHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top, targetCenterWidth, topHeight);
  7239. this._drawImage(context, this._sliceLeft, this._sliceBottom, centerWidth, bottomHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top + targetTopHeight, targetCenterWidth, bottomHeight);
  7240. };
  7241. Image.prototype.dispose = function () {
  7242. _super.prototype.dispose.call(this);
  7243. this.onImageLoadedObservable.clear();
  7244. this.onSVGAttributesComputedObservable.clear();
  7245. };
  7246. // Static
  7247. /** STRETCH_NONE */
  7248. Image.STRETCH_NONE = 0;
  7249. /** STRETCH_FILL */
  7250. Image.STRETCH_FILL = 1;
  7251. /** STRETCH_UNIFORM */
  7252. Image.STRETCH_UNIFORM = 2;
  7253. /** STRETCH_EXTEND */
  7254. Image.STRETCH_EXTEND = 3;
  7255. /** NINE_PATCH */
  7256. Image.STRETCH_NINE_PATCH = 4;
  7257. return Image;
  7258. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  7259. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Image"] = Image;
  7260. /***/ }),
  7261. /***/ "./2D/controls/index.ts":
  7262. /*!******************************!*\
  7263. !*** ./2D/controls/index.ts ***!
  7264. \******************************/
  7265. /*! exports provided: Button, Checkbox, ColorPicker, Container, Control, Ellipse, FocusableButton, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, TextWrapper, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name */
  7266. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  7267. "use strict";
  7268. __webpack_require__.r(__webpack_exports__);
  7269. /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
  7270. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _button__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  7271. /* harmony import */ var _checkbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./checkbox */ "./2D/controls/checkbox.ts");
  7272. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _checkbox__WEBPACK_IMPORTED_MODULE_1__["Checkbox"]; });
  7273. /* harmony import */ var _colorpicker__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./colorpicker */ "./2D/controls/colorpicker.ts");
  7274. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _colorpicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"]; });
  7275. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  7276. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _container__WEBPACK_IMPORTED_MODULE_3__["Container"]; });
  7277. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  7278. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _control__WEBPACK_IMPORTED_MODULE_4__["Control"]; });
  7279. /* harmony import */ var _ellipse__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ellipse */ "./2D/controls/ellipse.ts");
  7280. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _ellipse__WEBPACK_IMPORTED_MODULE_5__["Ellipse"]; });
  7281. /* harmony import */ var _focusableButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./focusableButton */ "./2D/controls/focusableButton.ts");
  7282. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FocusableButton", function() { return _focusableButton__WEBPACK_IMPORTED_MODULE_6__["FocusableButton"]; });
  7283. /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./grid */ "./2D/controls/grid.ts");
  7284. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _grid__WEBPACK_IMPORTED_MODULE_7__["Grid"]; });
  7285. /* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./image */ "./2D/controls/image.ts");
  7286. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _image__WEBPACK_IMPORTED_MODULE_8__["Image"]; });
  7287. /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
  7288. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _inputText__WEBPACK_IMPORTED_MODULE_9__["InputText"]; });
  7289. /* harmony import */ var _inputPassword__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./inputPassword */ "./2D/controls/inputPassword.ts");
  7290. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _inputPassword__WEBPACK_IMPORTED_MODULE_10__["InputPassword"]; });
  7291. /* harmony import */ var _line__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./line */ "./2D/controls/line.ts");
  7292. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _line__WEBPACK_IMPORTED_MODULE_11__["Line"]; });
  7293. /* harmony import */ var _multiLine__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./multiLine */ "./2D/controls/multiLine.ts");
  7294. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _multiLine__WEBPACK_IMPORTED_MODULE_12__["MultiLine"]; });
  7295. /* harmony import */ var _radioButton__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./radioButton */ "./2D/controls/radioButton.ts");
  7296. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _radioButton__WEBPACK_IMPORTED_MODULE_13__["RadioButton"]; });
  7297. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  7298. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _stackPanel__WEBPACK_IMPORTED_MODULE_14__["StackPanel"]; });
  7299. /* harmony import */ var _selector__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./selector */ "./2D/controls/selector.ts");
  7300. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_15__["SelectorGroup"]; });
  7301. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_15__["CheckboxGroup"]; });
  7302. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_15__["RadioGroup"]; });
  7303. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_15__["SliderGroup"]; });
  7304. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _selector__WEBPACK_IMPORTED_MODULE_15__["SelectionPanel"]; });
  7305. /* harmony import */ var _scrollViewers_scrollViewer__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./scrollViewers/scrollViewer */ "./2D/controls/scrollViewers/scrollViewer.ts");
  7306. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _scrollViewers_scrollViewer__WEBPACK_IMPORTED_MODULE_16__["ScrollViewer"]; });
  7307. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  7308. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _textBlock__WEBPACK_IMPORTED_MODULE_17__["TextWrapping"]; });
  7309. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _textBlock__WEBPACK_IMPORTED_MODULE_17__["TextBlock"]; });
  7310. /* harmony import */ var _textWrapper__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./textWrapper */ "./2D/controls/textWrapper.ts");
  7311. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapper", function() { return _textWrapper__WEBPACK_IMPORTED_MODULE_18__["TextWrapper"]; });
  7312. /* harmony import */ var _virtualKeyboard__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./virtualKeyboard */ "./2D/controls/virtualKeyboard.ts");
  7313. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _virtualKeyboard__WEBPACK_IMPORTED_MODULE_19__["KeyPropertySet"]; });
  7314. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _virtualKeyboard__WEBPACK_IMPORTED_MODULE_19__["VirtualKeyboard"]; });
  7315. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  7316. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _rectangle__WEBPACK_IMPORTED_MODULE_20__["Rectangle"]; });
  7317. /* harmony import */ var _displayGrid__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./displayGrid */ "./2D/controls/displayGrid.ts");
  7318. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _displayGrid__WEBPACK_IMPORTED_MODULE_21__["DisplayGrid"]; });
  7319. /* harmony import */ var _sliders_baseSlider__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./sliders/baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  7320. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _sliders_baseSlider__WEBPACK_IMPORTED_MODULE_22__["BaseSlider"]; });
  7321. /* harmony import */ var _sliders_slider__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./sliders/slider */ "./2D/controls/sliders/slider.ts");
  7322. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _sliders_slider__WEBPACK_IMPORTED_MODULE_23__["Slider"]; });
  7323. /* harmony import */ var _sliders_imageBasedSlider__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./sliders/imageBasedSlider */ "./2D/controls/sliders/imageBasedSlider.ts");
  7324. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _sliders_imageBasedSlider__WEBPACK_IMPORTED_MODULE_24__["ImageBasedSlider"]; });
  7325. /* harmony import */ var _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./sliders/scrollBar */ "./2D/controls/sliders/scrollBar.ts");
  7326. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_25__["ScrollBar"]; });
  7327. /* harmony import */ var _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./sliders/imageScrollBar */ "./2D/controls/sliders/imageScrollBar.ts");
  7328. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_26__["ImageScrollBar"]; });
  7329. /* harmony import */ var _statics__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./statics */ "./2D/controls/statics.ts");
  7330. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _statics__WEBPACK_IMPORTED_MODULE_27__["name"]; });
  7331. /***/ }),
  7332. /***/ "./2D/controls/inputPassword.ts":
  7333. /*!**************************************!*\
  7334. !*** ./2D/controls/inputPassword.ts ***!
  7335. \**************************************/
  7336. /*! exports provided: InputPassword */
  7337. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  7338. "use strict";
  7339. __webpack_require__.r(__webpack_exports__);
  7340. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return InputPassword; });
  7341. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  7342. /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
  7343. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  7344. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  7345. /* harmony import */ var _textWrapper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./textWrapper */ "./2D/controls/textWrapper.ts");
  7346. /**
  7347. * Class used to create a password control
  7348. */
  7349. var InputPassword = /** @class */ (function (_super) {
  7350. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputPassword, _super);
  7351. function InputPassword() {
  7352. return _super !== null && _super.apply(this, arguments) || this;
  7353. }
  7354. InputPassword.prototype._beforeRenderText = function (textWrapper) {
  7355. var pwdTextWrapper = new _textWrapper__WEBPACK_IMPORTED_MODULE_3__["TextWrapper"]();
  7356. var txt = "";
  7357. for (var i = 0; i < textWrapper.length; i++) {
  7358. txt += "\u2022";
  7359. }
  7360. pwdTextWrapper.text = txt;
  7361. return pwdTextWrapper;
  7362. };
  7363. return InputPassword;
  7364. }(_inputText__WEBPACK_IMPORTED_MODULE_1__["InputText"]));
  7365. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.InputPassword"] = InputPassword;
  7366. /***/ }),
  7367. /***/ "./2D/controls/inputText.ts":
  7368. /*!**********************************!*\
  7369. !*** ./2D/controls/inputText.ts ***!
  7370. \**********************************/
  7371. /*! exports provided: InputText */
  7372. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  7373. "use strict";
  7374. __webpack_require__.r(__webpack_exports__);
  7375. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return InputText; });
  7376. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  7377. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  7378. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  7379. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  7380. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  7381. /* harmony import */ var _textWrapper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textWrapper */ "./2D/controls/textWrapper.ts");
  7382. /**
  7383. * Class used to create input text control
  7384. */
  7385. var InputText = /** @class */ (function (_super) {
  7386. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputText, _super);
  7387. /**
  7388. * Creates a new InputText
  7389. * @param name defines the control name
  7390. * @param text defines the text of the control
  7391. */
  7392. function InputText(name, text) {
  7393. if (text === void 0) { text = ""; }
  7394. var _this = _super.call(this, name) || this;
  7395. _this.name = name;
  7396. _this._placeholderText = "";
  7397. _this._background = "#222222";
  7398. _this._focusedBackground = "#000000";
  7399. _this._focusedColor = "white";
  7400. _this._placeholderColor = "gray";
  7401. _this._thickness = 1;
  7402. _this._margin = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](10, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL);
  7403. _this._autoStretchWidth = true;
  7404. _this._maxWidth = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](1, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PERCENTAGE, false);
  7405. _this._isFocused = false;
  7406. _this._blinkIsEven = false;
  7407. _this._cursorOffset = 0;
  7408. _this._deadKey = false;
  7409. _this._addKey = true;
  7410. _this._currentKey = "";
  7411. _this._isTextHighlightOn = false;
  7412. _this._textHighlightColor = "#d5e0ff";
  7413. _this._highligherOpacity = 0.4;
  7414. _this._highlightedText = "";
  7415. _this._startHighlightIndex = 0;
  7416. _this._endHighlightIndex = 0;
  7417. _this._cursorIndex = -1;
  7418. _this._onFocusSelectAll = false;
  7419. _this._isPointerDown = false;
  7420. /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
  7421. _this.promptMessage = "Please enter text:";
  7422. /** Force disable prompt on mobile device */
  7423. _this.disableMobilePrompt = false;
  7424. /** Observable raised when the text changes */
  7425. _this.onTextChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7426. /** Observable raised just before an entered character is to be added */
  7427. _this.onBeforeKeyAddObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7428. /** Observable raised when the control gets the focus */
  7429. _this.onFocusObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7430. /** Observable raised when the control loses the focus */
  7431. _this.onBlurObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7432. /**Observable raised when the text is highlighted */
  7433. _this.onTextHighlightObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7434. /**Observable raised when copy event is triggered */
  7435. _this.onTextCopyObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7436. /** Observable raised when cut event is triggered */
  7437. _this.onTextCutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7438. /** Observable raised when paste event is triggered */
  7439. _this.onTextPasteObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7440. /** Observable raised when a key event was processed */
  7441. _this.onKeyboardEventProcessedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7442. _this.text = text;
  7443. _this.isPointerBlocker = true;
  7444. return _this;
  7445. }
  7446. Object.defineProperty(InputText.prototype, "maxWidth", {
  7447. /** Gets or sets the maximum width allowed by the control */
  7448. get: function () {
  7449. return this._maxWidth.toString(this._host);
  7450. },
  7451. set: function (value) {
  7452. if (this._maxWidth.toString(this._host) === value) {
  7453. return;
  7454. }
  7455. if (this._maxWidth.fromString(value)) {
  7456. this._markAsDirty();
  7457. }
  7458. },
  7459. enumerable: false,
  7460. configurable: true
  7461. });
  7462. Object.defineProperty(InputText.prototype, "maxWidthInPixels", {
  7463. /** Gets the maximum width allowed by the control in pixels */
  7464. get: function () {
  7465. return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
  7466. },
  7467. enumerable: false,
  7468. configurable: true
  7469. });
  7470. Object.defineProperty(InputText.prototype, "highligherOpacity", {
  7471. /** Gets or sets the text highlighter transparency; default: 0.4 */
  7472. get: function () {
  7473. return this._highligherOpacity;
  7474. },
  7475. set: function (value) {
  7476. if (this._highligherOpacity === value) {
  7477. return;
  7478. }
  7479. this._highligherOpacity = value;
  7480. this._markAsDirty();
  7481. },
  7482. enumerable: false,
  7483. configurable: true
  7484. });
  7485. Object.defineProperty(InputText.prototype, "onFocusSelectAll", {
  7486. /** Gets or sets a boolean indicating whether to select complete text by default on input focus */
  7487. get: function () {
  7488. return this._onFocusSelectAll;
  7489. },
  7490. set: function (value) {
  7491. if (this._onFocusSelectAll === value) {
  7492. return;
  7493. }
  7494. this._onFocusSelectAll = value;
  7495. this._markAsDirty();
  7496. },
  7497. enumerable: false,
  7498. configurable: true
  7499. });
  7500. Object.defineProperty(InputText.prototype, "textHighlightColor", {
  7501. /** Gets or sets the text hightlight color */
  7502. get: function () {
  7503. return this._textHighlightColor;
  7504. },
  7505. set: function (value) {
  7506. if (this._textHighlightColor === value) {
  7507. return;
  7508. }
  7509. this._textHighlightColor = value;
  7510. this._markAsDirty();
  7511. },
  7512. enumerable: false,
  7513. configurable: true
  7514. });
  7515. Object.defineProperty(InputText.prototype, "margin", {
  7516. /** Gets or sets control margin */
  7517. get: function () {
  7518. return this._margin.toString(this._host);
  7519. },
  7520. set: function (value) {
  7521. if (this._margin.toString(this._host) === value) {
  7522. return;
  7523. }
  7524. if (this._margin.fromString(value)) {
  7525. this._markAsDirty();
  7526. }
  7527. },
  7528. enumerable: false,
  7529. configurable: true
  7530. });
  7531. Object.defineProperty(InputText.prototype, "marginInPixels", {
  7532. /** Gets control margin in pixels */
  7533. get: function () {
  7534. return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
  7535. },
  7536. enumerable: false,
  7537. configurable: true
  7538. });
  7539. Object.defineProperty(InputText.prototype, "autoStretchWidth", {
  7540. /** Gets or sets a boolean indicating if the control can auto stretch its width to adapt to the text */
  7541. get: function () {
  7542. return this._autoStretchWidth;
  7543. },
  7544. set: function (value) {
  7545. if (this._autoStretchWidth === value) {
  7546. return;
  7547. }
  7548. this._autoStretchWidth = value;
  7549. this._markAsDirty();
  7550. },
  7551. enumerable: false,
  7552. configurable: true
  7553. });
  7554. Object.defineProperty(InputText.prototype, "thickness", {
  7555. /** Gets or sets border thickness */
  7556. get: function () {
  7557. return this._thickness;
  7558. },
  7559. set: function (value) {
  7560. if (this._thickness === value) {
  7561. return;
  7562. }
  7563. this._thickness = value;
  7564. this._markAsDirty();
  7565. },
  7566. enumerable: false,
  7567. configurable: true
  7568. });
  7569. Object.defineProperty(InputText.prototype, "focusedBackground", {
  7570. /** Gets or sets the background color when focused */
  7571. get: function () {
  7572. return this._focusedBackground;
  7573. },
  7574. set: function (value) {
  7575. if (this._focusedBackground === value) {
  7576. return;
  7577. }
  7578. this._focusedBackground = value;
  7579. this._markAsDirty();
  7580. },
  7581. enumerable: false,
  7582. configurable: true
  7583. });
  7584. Object.defineProperty(InputText.prototype, "focusedColor", {
  7585. /** Gets or sets the background color when focused */
  7586. get: function () {
  7587. return this._focusedColor;
  7588. },
  7589. set: function (value) {
  7590. if (this._focusedColor === value) {
  7591. return;
  7592. }
  7593. this._focusedColor = value;
  7594. this._markAsDirty();
  7595. },
  7596. enumerable: false,
  7597. configurable: true
  7598. });
  7599. Object.defineProperty(InputText.prototype, "background", {
  7600. /** Gets or sets the background color */
  7601. get: function () {
  7602. return this._background;
  7603. },
  7604. set: function (value) {
  7605. if (this._background === value) {
  7606. return;
  7607. }
  7608. this._background = value;
  7609. this._markAsDirty();
  7610. },
  7611. enumerable: false,
  7612. configurable: true
  7613. });
  7614. Object.defineProperty(InputText.prototype, "placeholderColor", {
  7615. /** Gets or sets the placeholder color */
  7616. get: function () {
  7617. return this._placeholderColor;
  7618. },
  7619. set: function (value) {
  7620. if (this._placeholderColor === value) {
  7621. return;
  7622. }
  7623. this._placeholderColor = value;
  7624. this._markAsDirty();
  7625. },
  7626. enumerable: false,
  7627. configurable: true
  7628. });
  7629. Object.defineProperty(InputText.prototype, "placeholderText", {
  7630. /** Gets or sets the text displayed when the control is empty */
  7631. get: function () {
  7632. return this._placeholderText;
  7633. },
  7634. set: function (value) {
  7635. if (this._placeholderText === value) {
  7636. return;
  7637. }
  7638. this._placeholderText = value;
  7639. this._markAsDirty();
  7640. },
  7641. enumerable: false,
  7642. configurable: true
  7643. });
  7644. Object.defineProperty(InputText.prototype, "deadKey", {
  7645. /** Gets or sets the dead key flag */
  7646. get: function () {
  7647. return this._deadKey;
  7648. },
  7649. set: function (flag) {
  7650. this._deadKey = flag;
  7651. },
  7652. enumerable: false,
  7653. configurable: true
  7654. });
  7655. Object.defineProperty(InputText.prototype, "highlightedText", {
  7656. /** Gets or sets the highlight text */
  7657. get: function () {
  7658. return this._highlightedText;
  7659. },
  7660. set: function (text) {
  7661. if (this._highlightedText === text) {
  7662. return;
  7663. }
  7664. this._highlightedText = text;
  7665. this._markAsDirty();
  7666. },
  7667. enumerable: false,
  7668. configurable: true
  7669. });
  7670. Object.defineProperty(InputText.prototype, "addKey", {
  7671. /** Gets or sets if the current key should be added */
  7672. get: function () {
  7673. return this._addKey;
  7674. },
  7675. set: function (flag) {
  7676. this._addKey = flag;
  7677. },
  7678. enumerable: false,
  7679. configurable: true
  7680. });
  7681. Object.defineProperty(InputText.prototype, "currentKey", {
  7682. /** Gets or sets the value of the current key being entered */
  7683. get: function () {
  7684. return this._currentKey;
  7685. },
  7686. set: function (key) {
  7687. this._currentKey = key;
  7688. },
  7689. enumerable: false,
  7690. configurable: true
  7691. });
  7692. Object.defineProperty(InputText.prototype, "text", {
  7693. /** Gets or sets the text displayed in the control */
  7694. get: function () {
  7695. return this._textWrapper.text;
  7696. },
  7697. set: function (value) {
  7698. var valueAsString = value.toString(); // Forcing convertion
  7699. if (!this._textWrapper) {
  7700. this._textWrapper = new _textWrapper__WEBPACK_IMPORTED_MODULE_4__["TextWrapper"]();
  7701. }
  7702. if (this._textWrapper.text === valueAsString) {
  7703. return;
  7704. }
  7705. this._textWrapper.text = valueAsString;
  7706. this._textHasChanged();
  7707. },
  7708. enumerable: false,
  7709. configurable: true
  7710. });
  7711. InputText.prototype._textHasChanged = function () {
  7712. this._markAsDirty();
  7713. this.onTextChangedObservable.notifyObservers(this);
  7714. };
  7715. Object.defineProperty(InputText.prototype, "width", {
  7716. /** Gets or sets control width */
  7717. get: function () {
  7718. return this._width.toString(this._host);
  7719. },
  7720. set: function (value) {
  7721. if (this._width.toString(this._host) === value) {
  7722. return;
  7723. }
  7724. if (this._width.fromString(value)) {
  7725. this._markAsDirty();
  7726. }
  7727. this.autoStretchWidth = false;
  7728. },
  7729. enumerable: false,
  7730. configurable: true
  7731. });
  7732. /** @hidden */
  7733. InputText.prototype.onBlur = function () {
  7734. this._isFocused = false;
  7735. this._scrollLeft = null;
  7736. this._cursorOffset = 0;
  7737. clearTimeout(this._blinkTimeout);
  7738. this._markAsDirty();
  7739. this.onBlurObservable.notifyObservers(this);
  7740. this._host.unRegisterClipboardEvents();
  7741. if (this._onClipboardObserver) {
  7742. this._host.onClipboardObservable.remove(this._onClipboardObserver);
  7743. }
  7744. var scene = this._host.getScene();
  7745. if (this._onPointerDblTapObserver && scene) {
  7746. scene.onPointerObservable.remove(this._onPointerDblTapObserver);
  7747. }
  7748. };
  7749. /** @hidden */
  7750. InputText.prototype.onFocus = function () {
  7751. var _this = this;
  7752. if (!this._isEnabled) {
  7753. return;
  7754. }
  7755. this._scrollLeft = null;
  7756. this._isFocused = true;
  7757. this._blinkIsEven = false;
  7758. this._cursorOffset = 0;
  7759. this._markAsDirty();
  7760. this.onFocusObservable.notifyObservers(this);
  7761. if (navigator.userAgent.indexOf("Mobile") !== -1 && !this.disableMobilePrompt) {
  7762. var value = prompt(this.promptMessage);
  7763. if (value !== null) {
  7764. this.text = value;
  7765. }
  7766. this._host.focusedControl = null;
  7767. return;
  7768. }
  7769. this._host.registerClipboardEvents();
  7770. this._onClipboardObserver = this._host.onClipboardObservable.add(function (clipboardInfo) {
  7771. // process clipboard event, can be configured.
  7772. switch (clipboardInfo.type) {
  7773. case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].COPY:
  7774. _this._onCopyText(clipboardInfo.event);
  7775. _this.onTextCopyObservable.notifyObservers(_this);
  7776. break;
  7777. case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].CUT:
  7778. _this._onCutText(clipboardInfo.event);
  7779. _this.onTextCutObservable.notifyObservers(_this);
  7780. break;
  7781. case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].PASTE:
  7782. _this._onPasteText(clipboardInfo.event);
  7783. _this.onTextPasteObservable.notifyObservers(_this);
  7784. break;
  7785. default: return;
  7786. }
  7787. });
  7788. var scene = this._host.getScene();
  7789. if (scene) {
  7790. //register the pointer double tap event
  7791. this._onPointerDblTapObserver = scene.onPointerObservable.add(function (pointerInfo) {
  7792. if (!_this._isFocused) {
  7793. return;
  7794. }
  7795. if (pointerInfo.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERDOUBLETAP) {
  7796. _this._processDblClick(pointerInfo);
  7797. }
  7798. });
  7799. }
  7800. if (this._onFocusSelectAll) {
  7801. this._selectAllText();
  7802. }
  7803. };
  7804. /**
  7805. * Function to focus an inputText programmatically
  7806. */
  7807. InputText.prototype.focus = function () {
  7808. this._host.moveFocusToControl(this);
  7809. };
  7810. /**
  7811. * Function to unfocus an inputText programmatically
  7812. */
  7813. InputText.prototype.blur = function () {
  7814. this._host.focusedControl = null;
  7815. };
  7816. InputText.prototype._getTypeName = function () {
  7817. return "InputText";
  7818. };
  7819. /**
  7820. * Function called to get the list of controls that should not steal the focus from this control
  7821. * @returns an array of controls
  7822. */
  7823. InputText.prototype.keepsFocusWith = function () {
  7824. if (!this._connectedVirtualKeyboard) {
  7825. return null;
  7826. }
  7827. return [this._connectedVirtualKeyboard];
  7828. };
  7829. /** @hidden */
  7830. InputText.prototype.processKey = function (keyCode, key, evt) {
  7831. //return if clipboard event keys (i.e -ctr/cmd + c,v,x)
  7832. if (evt && (evt.ctrlKey || evt.metaKey) && (keyCode === 67 || keyCode === 86 || keyCode === 88)) {
  7833. return;
  7834. }
  7835. //select all
  7836. if (evt && (evt.ctrlKey || evt.metaKey) && keyCode === 65) {
  7837. this._selectAllText();
  7838. evt.preventDefault();
  7839. return;
  7840. }
  7841. // Specific cases
  7842. switch (keyCode) {
  7843. case 32: //SPACE
  7844. key = " "; //ie11 key for space is "Spacebar"
  7845. break;
  7846. case 191: //SLASH
  7847. if (evt) {
  7848. evt.preventDefault();
  7849. }
  7850. break;
  7851. case 8: // BACKSPACE
  7852. if (this._textWrapper.text && this._textWrapper.length > 0) {
  7853. //delete the highlighted text
  7854. if (this._isTextHighlightOn) {
  7855. this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
  7856. this._textHasChanged();
  7857. this._isTextHighlightOn = false;
  7858. this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
  7859. this._blinkIsEven = false;
  7860. if (evt) {
  7861. evt.preventDefault();
  7862. }
  7863. return;
  7864. }
  7865. //delete single character
  7866. if (this._cursorOffset === 0) {
  7867. this.text = this._textWrapper.substr(0, this._textWrapper.length - 1);
  7868. }
  7869. else {
  7870. var deletePosition = this._textWrapper.length - this._cursorOffset;
  7871. if (deletePosition > 0) {
  7872. this._textWrapper.removePart(deletePosition - 1, deletePosition);
  7873. this._textHasChanged();
  7874. }
  7875. }
  7876. }
  7877. if (evt) {
  7878. evt.preventDefault();
  7879. }
  7880. return;
  7881. case 46: // DELETE
  7882. if (this._isTextHighlightOn) {
  7883. this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
  7884. this._textHasChanged();
  7885. this._isTextHighlightOn = false;
  7886. this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
  7887. if (evt) {
  7888. evt.preventDefault();
  7889. }
  7890. return;
  7891. }
  7892. if (this._textWrapper.text && this._textWrapper.length > 0 && this._cursorOffset > 0) {
  7893. var deletePosition = this._textWrapper.length - this._cursorOffset;
  7894. this._textWrapper.removePart(deletePosition, deletePosition + 1);
  7895. this._textHasChanged();
  7896. this._cursorOffset--;
  7897. }
  7898. if (evt) {
  7899. evt.preventDefault();
  7900. }
  7901. return;
  7902. case 13: // RETURN
  7903. this._host.focusedControl = null;
  7904. this._isTextHighlightOn = false;
  7905. return;
  7906. case 35: // END
  7907. this._cursorOffset = 0;
  7908. this._blinkIsEven = false;
  7909. this._isTextHighlightOn = false;
  7910. this._markAsDirty();
  7911. return;
  7912. case 36: // HOME
  7913. this._cursorOffset = this._textWrapper.length;
  7914. this._blinkIsEven = false;
  7915. this._isTextHighlightOn = false;
  7916. this._markAsDirty();
  7917. return;
  7918. case 37: // LEFT
  7919. this._cursorOffset++;
  7920. if (this._cursorOffset > this._textWrapper.length) {
  7921. this._cursorOffset = this._textWrapper.length;
  7922. }
  7923. if (evt && evt.shiftKey) {
  7924. // update the cursor
  7925. this._blinkIsEven = false;
  7926. // shift + ctrl/cmd + <-
  7927. if (evt.ctrlKey || evt.metaKey) {
  7928. if (!this._isTextHighlightOn) {
  7929. if (this._textWrapper.length === this._cursorOffset) {
  7930. return;
  7931. }
  7932. else {
  7933. this._endHighlightIndex = this._textWrapper.length - this._cursorOffset + 1;
  7934. }
  7935. }
  7936. this._startHighlightIndex = 0;
  7937. this._cursorIndex = this._textWrapper.length - this._endHighlightIndex;
  7938. this._cursorOffset = this._textWrapper.length;
  7939. this._isTextHighlightOn = true;
  7940. this._markAsDirty();
  7941. return;
  7942. }
  7943. //store the starting point
  7944. if (!this._isTextHighlightOn) {
  7945. this._isTextHighlightOn = true;
  7946. this._cursorIndex = (this._cursorOffset >= this._textWrapper.length) ? this._textWrapper.length : this._cursorOffset - 1;
  7947. }
  7948. //if text is already highlighted
  7949. else if (this._cursorIndex === -1) {
  7950. this._cursorIndex = this._textWrapper.length - this._endHighlightIndex;
  7951. this._cursorOffset = (this._startHighlightIndex === 0) ? this._textWrapper.length : this._textWrapper.length - this._startHighlightIndex + 1;
  7952. }
  7953. //set the highlight indexes
  7954. if (this._cursorIndex < this._cursorOffset) {
  7955. this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
  7956. this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
  7957. }
  7958. else if (this._cursorIndex > this._cursorOffset) {
  7959. this._endHighlightIndex = this._textWrapper.length - this._cursorOffset;
  7960. this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
  7961. }
  7962. else {
  7963. this._isTextHighlightOn = false;
  7964. }
  7965. this._markAsDirty();
  7966. return;
  7967. }
  7968. if (this._isTextHighlightOn) {
  7969. this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
  7970. this._isTextHighlightOn = false;
  7971. }
  7972. if (evt && (evt.ctrlKey || evt.metaKey)) {
  7973. this._cursorOffset = this._textWrapper.length;
  7974. evt.preventDefault();
  7975. }
  7976. this._blinkIsEven = false;
  7977. this._isTextHighlightOn = false;
  7978. this._cursorIndex = -1;
  7979. this._markAsDirty();
  7980. return;
  7981. case 39: // RIGHT
  7982. this._cursorOffset--;
  7983. if (this._cursorOffset < 0) {
  7984. this._cursorOffset = 0;
  7985. }
  7986. if (evt && evt.shiftKey) {
  7987. //update the cursor
  7988. this._blinkIsEven = false;
  7989. //shift + ctrl/cmd + ->
  7990. if (evt.ctrlKey || evt.metaKey) {
  7991. if (!this._isTextHighlightOn) {
  7992. if (this._cursorOffset === 0) {
  7993. return;
  7994. }
  7995. else {
  7996. this._startHighlightIndex = this._textWrapper.length - this._cursorOffset - 1;
  7997. }
  7998. }
  7999. this._endHighlightIndex = this._textWrapper.length;
  8000. this._isTextHighlightOn = true;
  8001. this._cursorIndex = this._textWrapper.length - this._startHighlightIndex;
  8002. this._cursorOffset = 0;
  8003. this._markAsDirty();
  8004. return;
  8005. }
  8006. if (!this._isTextHighlightOn) {
  8007. this._isTextHighlightOn = true;
  8008. this._cursorIndex = (this._cursorOffset <= 0) ? 0 : this._cursorOffset + 1;
  8009. }
  8010. //if text is already highlighted
  8011. else if (this._cursorIndex === -1) {
  8012. this._cursorIndex = this._textWrapper.length - this._startHighlightIndex;
  8013. this._cursorOffset = (this._textWrapper.length === this._endHighlightIndex) ? 0 : this._textWrapper.length - this._endHighlightIndex - 1;
  8014. }
  8015. //set the highlight indexes
  8016. if (this._cursorIndex < this._cursorOffset) {
  8017. this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
  8018. this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
  8019. }
  8020. else if (this._cursorIndex > this._cursorOffset) {
  8021. this._endHighlightIndex = this._textWrapper.length - this._cursorOffset;
  8022. this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
  8023. }
  8024. else {
  8025. this._isTextHighlightOn = false;
  8026. }
  8027. this._markAsDirty();
  8028. return;
  8029. }
  8030. if (this._isTextHighlightOn) {
  8031. this._cursorOffset = this._textWrapper.length - this._endHighlightIndex;
  8032. this._isTextHighlightOn = false;
  8033. }
  8034. //ctr + ->
  8035. if (evt && (evt.ctrlKey || evt.metaKey)) {
  8036. this._cursorOffset = 0;
  8037. evt.preventDefault();
  8038. }
  8039. this._blinkIsEven = false;
  8040. this._isTextHighlightOn = false;
  8041. this._cursorIndex = -1;
  8042. this._markAsDirty();
  8043. return;
  8044. case 222: // Dead
  8045. if (evt) {
  8046. evt.preventDefault();
  8047. }
  8048. this._cursorIndex = -1;
  8049. this.deadKey = true;
  8050. break;
  8051. }
  8052. // Printable characters
  8053. if (key &&
  8054. ((keyCode === -1) || // Direct access
  8055. (keyCode === 32) || // Space
  8056. (keyCode > 47 && keyCode < 64) || // Numbers
  8057. (keyCode > 64 && keyCode < 91) || // Letters
  8058. (keyCode > 159 && keyCode < 193) || // Special characters
  8059. (keyCode > 218 && keyCode < 223) || // Special characters
  8060. (keyCode > 95 && keyCode < 112))) { // Numpad
  8061. this._currentKey = key;
  8062. this.onBeforeKeyAddObservable.notifyObservers(this);
  8063. key = this._currentKey;
  8064. if (this._addKey) {
  8065. if (this._isTextHighlightOn) {
  8066. this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex, key);
  8067. this._textHasChanged();
  8068. this._cursorOffset = this._textWrapper.length - (this._startHighlightIndex + 1);
  8069. this._isTextHighlightOn = false;
  8070. this._blinkIsEven = false;
  8071. this._markAsDirty();
  8072. }
  8073. else if (this._cursorOffset === 0) {
  8074. this.text += key;
  8075. }
  8076. else {
  8077. var insertPosition = this._textWrapper.length - this._cursorOffset;
  8078. this._textWrapper.removePart(insertPosition, insertPosition, key);
  8079. this._textHasChanged();
  8080. }
  8081. }
  8082. }
  8083. };
  8084. /** @hidden */
  8085. InputText.prototype._updateValueFromCursorIndex = function (offset) {
  8086. //update the cursor
  8087. this._blinkIsEven = false;
  8088. if (this._cursorIndex === -1) {
  8089. this._cursorIndex = offset;
  8090. }
  8091. else {
  8092. if (this._cursorIndex < this._cursorOffset) {
  8093. this._endHighlightIndex = this._textWrapper.length - this._cursorIndex;
  8094. this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
  8095. }
  8096. else if (this._cursorIndex > this._cursorOffset) {
  8097. this._endHighlightIndex = this._textWrapper.length - this._cursorOffset;
  8098. this._startHighlightIndex = this._textWrapper.length - this._cursorIndex;
  8099. }
  8100. else {
  8101. this._isTextHighlightOn = false;
  8102. this._markAsDirty();
  8103. return;
  8104. }
  8105. }
  8106. this._isTextHighlightOn = true;
  8107. this._markAsDirty();
  8108. };
  8109. /** @hidden */
  8110. InputText.prototype._processDblClick = function (evt) {
  8111. //pre-find the start and end index of the word under cursor, speeds up the rendering
  8112. this._startHighlightIndex = this._textWrapper.length - this._cursorOffset;
  8113. this._endHighlightIndex = this._startHighlightIndex;
  8114. var moveLeft, moveRight;
  8115. do {
  8116. moveRight = this._endHighlightIndex < this._textWrapper.length && this._textWrapper.isWord(this._endHighlightIndex) ? ++this._endHighlightIndex : 0;
  8117. moveLeft = this._startHighlightIndex > 0 && this._textWrapper.isWord(this._startHighlightIndex - 1) ? --this._startHighlightIndex : 0;
  8118. } while (moveLeft || moveRight);
  8119. this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
  8120. this.onTextHighlightObservable.notifyObservers(this);
  8121. this._isTextHighlightOn = true;
  8122. this._clickedCoordinate = null;
  8123. this._blinkIsEven = true;
  8124. this._cursorIndex = -1;
  8125. this._markAsDirty();
  8126. };
  8127. /** @hidden */
  8128. InputText.prototype._selectAllText = function () {
  8129. this._blinkIsEven = true;
  8130. this._isTextHighlightOn = true;
  8131. this._startHighlightIndex = 0;
  8132. this._endHighlightIndex = this._textWrapper.length;
  8133. this._cursorOffset = this._textWrapper.length;
  8134. this._cursorIndex = -1;
  8135. this._markAsDirty();
  8136. };
  8137. /**
  8138. * Handles the keyboard event
  8139. * @param evt Defines the KeyboardEvent
  8140. */
  8141. InputText.prototype.processKeyboard = function (evt) {
  8142. // process pressed key
  8143. this.processKey(evt.keyCode, evt.key, evt);
  8144. this.onKeyboardEventProcessedObservable.notifyObservers(evt);
  8145. };
  8146. /** @hidden */
  8147. InputText.prototype._onCopyText = function (ev) {
  8148. this._isTextHighlightOn = false;
  8149. //when write permission to clipbaord data is denied
  8150. try {
  8151. ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
  8152. }
  8153. catch (_a) { } //pass
  8154. this._host.clipboardData = this._highlightedText;
  8155. };
  8156. /** @hidden */
  8157. InputText.prototype._onCutText = function (ev) {
  8158. if (!this._highlightedText) {
  8159. return;
  8160. }
  8161. this._textWrapper.removePart(this._startHighlightIndex, this._endHighlightIndex);
  8162. this._textHasChanged();
  8163. this._isTextHighlightOn = false;
  8164. this._cursorOffset = this._textWrapper.length - this._startHighlightIndex;
  8165. //when write permission to clipbaord data is denied
  8166. try {
  8167. ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
  8168. }
  8169. catch (_a) { } //pass
  8170. this._host.clipboardData = this._highlightedText;
  8171. this._highlightedText = "";
  8172. };
  8173. /** @hidden */
  8174. InputText.prototype._onPasteText = function (ev) {
  8175. var data = "";
  8176. if (ev.clipboardData && ev.clipboardData.types.indexOf("text/plain") !== -1) {
  8177. data = ev.clipboardData.getData("text/plain");
  8178. }
  8179. else {
  8180. //get the cached data; returns blank string by default
  8181. data = this._host.clipboardData;
  8182. }
  8183. var insertPosition = this._textWrapper.length - this._cursorOffset;
  8184. this._textWrapper.removePart(insertPosition, insertPosition, data);
  8185. this._textHasChanged();
  8186. };
  8187. InputText.prototype._draw = function (context, invalidatedRectangle) {
  8188. var _this = this;
  8189. context.save();
  8190. this._applyStates(context);
  8191. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8192. context.shadowColor = this.shadowColor;
  8193. context.shadowBlur = this.shadowBlur;
  8194. context.shadowOffsetX = this.shadowOffsetX;
  8195. context.shadowOffsetY = this.shadowOffsetY;
  8196. }
  8197. // Background
  8198. if (this._isFocused) {
  8199. if (this._focusedBackground) {
  8200. context.fillStyle = this._isEnabled ? this._focusedBackground : this._disabledColor;
  8201. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  8202. }
  8203. }
  8204. else if (this._background) {
  8205. context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
  8206. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  8207. }
  8208. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8209. context.shadowBlur = 0;
  8210. context.shadowOffsetX = 0;
  8211. context.shadowOffsetY = 0;
  8212. }
  8213. if (!this._fontOffset) {
  8214. this._fontOffset = _control__WEBPACK_IMPORTED_MODULE_2__["Control"]._GetFontOffset(context.font);
  8215. }
  8216. // Text
  8217. var clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, this._tempParentMeasure.width);
  8218. if (this.color) {
  8219. context.fillStyle = this.color;
  8220. }
  8221. var text = this._beforeRenderText(this._textWrapper);
  8222. if (!this._isFocused && !this._textWrapper.text && this._placeholderText) {
  8223. text = new _textWrapper__WEBPACK_IMPORTED_MODULE_4__["TextWrapper"]();
  8224. text.text = this._placeholderText;
  8225. if (this._placeholderColor) {
  8226. context.fillStyle = this._placeholderColor;
  8227. }
  8228. }
  8229. this._textWidth = context.measureText(text.text).width;
  8230. var marginWidth = this._margin.getValueInPixel(this._host, this._tempParentMeasure.width) * 2;
  8231. if (this._autoStretchWidth) {
  8232. this.width = Math.min(this._maxWidth.getValueInPixel(this._host, this._tempParentMeasure.width), this._textWidth + marginWidth) + "px";
  8233. }
  8234. var rootY = this._fontOffset.ascent + (this._currentMeasure.height - this._fontOffset.height) / 2;
  8235. var availableWidth = this._width.getValueInPixel(this._host, this._tempParentMeasure.width) - marginWidth;
  8236. context.save();
  8237. context.beginPath();
  8238. context.rect(clipTextLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, availableWidth + 2, this._currentMeasure.height);
  8239. context.clip();
  8240. if (this._isFocused && this._textWidth > availableWidth) {
  8241. var textLeft = clipTextLeft - this._textWidth + availableWidth;
  8242. if (!this._scrollLeft) {
  8243. this._scrollLeft = textLeft;
  8244. }
  8245. }
  8246. else {
  8247. this._scrollLeft = clipTextLeft;
  8248. }
  8249. context.fillText(text.text, this._scrollLeft, this._currentMeasure.top + rootY);
  8250. // Cursor
  8251. if (this._isFocused) {
  8252. // Need to move cursor
  8253. if (this._clickedCoordinate) {
  8254. var rightPosition = this._scrollLeft + this._textWidth;
  8255. var absoluteCursorPosition = rightPosition - this._clickedCoordinate;
  8256. var currentSize = 0;
  8257. this._cursorOffset = 0;
  8258. var previousDist = 0;
  8259. do {
  8260. if (this._cursorOffset) {
  8261. previousDist = Math.abs(absoluteCursorPosition - currentSize);
  8262. }
  8263. this._cursorOffset++;
  8264. currentSize = context.measureText(text.substr(text.length - this._cursorOffset, this._cursorOffset)).width;
  8265. } while (currentSize < absoluteCursorPosition && (text.length >= this._cursorOffset));
  8266. // Find closest move
  8267. if (Math.abs(absoluteCursorPosition - currentSize) > previousDist) {
  8268. this._cursorOffset--;
  8269. }
  8270. this._blinkIsEven = false;
  8271. this._clickedCoordinate = null;
  8272. }
  8273. // Render cursor
  8274. if (!this._blinkIsEven) {
  8275. var cursorOffsetText = text.substr(text.length - this._cursorOffset);
  8276. var cursorOffsetWidth = context.measureText(cursorOffsetText).width;
  8277. var cursorLeft = this._scrollLeft + this._textWidth - cursorOffsetWidth;
  8278. if (cursorLeft < clipTextLeft) {
  8279. this._scrollLeft += (clipTextLeft - cursorLeft);
  8280. cursorLeft = clipTextLeft;
  8281. this._markAsDirty();
  8282. }
  8283. else if (cursorLeft > clipTextLeft + availableWidth) {
  8284. this._scrollLeft += (clipTextLeft + availableWidth - cursorLeft);
  8285. cursorLeft = clipTextLeft + availableWidth;
  8286. this._markAsDirty();
  8287. }
  8288. if (!this._isTextHighlightOn) {
  8289. context.fillRect(cursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, 2, this._fontOffset.height);
  8290. }
  8291. }
  8292. clearTimeout(this._blinkTimeout);
  8293. this._blinkTimeout = setTimeout(function () {
  8294. _this._blinkIsEven = !_this._blinkIsEven;
  8295. _this._markAsDirty();
  8296. }, 500);
  8297. //show the highlighted text
  8298. if (this._isTextHighlightOn) {
  8299. clearTimeout(this._blinkTimeout);
  8300. var highlightCursorOffsetWidth = context.measureText(text.substring(this._startHighlightIndex)).width;
  8301. var highlightCursorLeft = this._scrollLeft + this._textWidth - highlightCursorOffsetWidth;
  8302. this._highlightedText = text.substring(this._startHighlightIndex, this._endHighlightIndex);
  8303. var width = context.measureText(text.substring(this._startHighlightIndex, this._endHighlightIndex)).width;
  8304. if (highlightCursorLeft < clipTextLeft) {
  8305. width = width - (clipTextLeft - highlightCursorLeft);
  8306. if (!width) {
  8307. // when using left arrow on text.length > availableWidth;
  8308. // assigns the width of the first letter after clipTextLeft
  8309. width = context.measureText(text.charAt(text.length - this._cursorOffset)).width;
  8310. }
  8311. highlightCursorLeft = clipTextLeft;
  8312. }
  8313. //for transparancy
  8314. context.globalAlpha = this._highligherOpacity;
  8315. context.fillStyle = this._textHighlightColor;
  8316. context.fillRect(highlightCursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, width, this._fontOffset.height);
  8317. context.globalAlpha = 1.0;
  8318. }
  8319. }
  8320. context.restore();
  8321. // Border
  8322. if (this._thickness) {
  8323. if (this._isFocused) {
  8324. if (this.focusedColor) {
  8325. context.strokeStyle = this.focusedColor;
  8326. }
  8327. }
  8328. else {
  8329. if (this.color) {
  8330. context.strokeStyle = this.color;
  8331. }
  8332. }
  8333. context.lineWidth = this._thickness;
  8334. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
  8335. }
  8336. context.restore();
  8337. };
  8338. InputText.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  8339. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
  8340. return false;
  8341. }
  8342. this._clickedCoordinate = coordinates.x;
  8343. this._isTextHighlightOn = false;
  8344. this._highlightedText = "";
  8345. this._cursorIndex = -1;
  8346. this._isPointerDown = true;
  8347. this._host._capturingControl[pointerId] = this;
  8348. if (this._host.focusedControl === this) {
  8349. // Move cursor
  8350. clearTimeout(this._blinkTimeout);
  8351. this._markAsDirty();
  8352. return true;
  8353. }
  8354. if (!this._isEnabled) {
  8355. return false;
  8356. }
  8357. this._host.focusedControl = this;
  8358. return true;
  8359. };
  8360. InputText.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
  8361. if (this._host.focusedControl === this && this._isPointerDown) {
  8362. this._clickedCoordinate = coordinates.x;
  8363. this._markAsDirty();
  8364. this._updateValueFromCursorIndex(this._cursorOffset);
  8365. }
  8366. _super.prototype._onPointerMove.call(this, target, coordinates, pointerId, pi);
  8367. };
  8368. InputText.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  8369. this._isPointerDown = false;
  8370. delete this._host._capturingControl[pointerId];
  8371. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick);
  8372. };
  8373. InputText.prototype._beforeRenderText = function (textWrapper) {
  8374. return textWrapper;
  8375. };
  8376. InputText.prototype.dispose = function () {
  8377. _super.prototype.dispose.call(this);
  8378. this.onBlurObservable.clear();
  8379. this.onFocusObservable.clear();
  8380. this.onTextChangedObservable.clear();
  8381. this.onTextCopyObservable.clear();
  8382. this.onTextCutObservable.clear();
  8383. this.onTextPasteObservable.clear();
  8384. this.onTextHighlightObservable.clear();
  8385. this.onKeyboardEventProcessedObservable.clear();
  8386. };
  8387. return InputText;
  8388. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  8389. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.InputText"] = InputText;
  8390. /***/ }),
  8391. /***/ "./2D/controls/line.ts":
  8392. /*!*****************************!*\
  8393. !*** ./2D/controls/line.ts ***!
  8394. \*****************************/
  8395. /*! exports provided: Line */
  8396. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8397. "use strict";
  8398. __webpack_require__.r(__webpack_exports__);
  8399. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return Line; });
  8400. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8401. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
  8402. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
  8403. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  8404. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  8405. /** Class used to render 2D lines */
  8406. var Line = /** @class */ (function (_super) {
  8407. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Line, _super);
  8408. /**
  8409. * Creates a new Line
  8410. * @param name defines the control name
  8411. */
  8412. function Line(name) {
  8413. var _this = _super.call(this, name) || this;
  8414. _this.name = name;
  8415. _this._lineWidth = 1;
  8416. _this._x1 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8417. _this._y1 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8418. _this._x2 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8419. _this._y2 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8420. _this._dash = new Array();
  8421. _this._automaticSize = true;
  8422. _this.isHitTestVisible = false;
  8423. _this._horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  8424. _this._verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_TOP;
  8425. return _this;
  8426. }
  8427. Object.defineProperty(Line.prototype, "dash", {
  8428. /** Gets or sets the dash pattern */
  8429. get: function () {
  8430. return this._dash;
  8431. },
  8432. set: function (value) {
  8433. if (this._dash === value) {
  8434. return;
  8435. }
  8436. this._dash = value;
  8437. this._markAsDirty();
  8438. },
  8439. enumerable: false,
  8440. configurable: true
  8441. });
  8442. Object.defineProperty(Line.prototype, "connectedControl", {
  8443. /** Gets or sets the control connected with the line end */
  8444. get: function () {
  8445. return this._connectedControl;
  8446. },
  8447. set: function (value) {
  8448. var _this = this;
  8449. if (this._connectedControl === value) {
  8450. return;
  8451. }
  8452. if (this._connectedControlDirtyObserver && this._connectedControl) {
  8453. this._connectedControl.onDirtyObservable.remove(this._connectedControlDirtyObserver);
  8454. this._connectedControlDirtyObserver = null;
  8455. }
  8456. if (value) {
  8457. this._connectedControlDirtyObserver = value.onDirtyObservable.add(function () { return _this._markAsDirty(); });
  8458. }
  8459. this._connectedControl = value;
  8460. this._markAsDirty();
  8461. },
  8462. enumerable: false,
  8463. configurable: true
  8464. });
  8465. Object.defineProperty(Line.prototype, "x1", {
  8466. /** Gets or sets start coordinates on X axis */
  8467. get: function () {
  8468. return this._x1.toString(this._host);
  8469. },
  8470. set: function (value) {
  8471. if (this._x1.toString(this._host) === value) {
  8472. return;
  8473. }
  8474. if (this._x1.fromString(value)) {
  8475. this._markAsDirty();
  8476. }
  8477. },
  8478. enumerable: false,
  8479. configurable: true
  8480. });
  8481. Object.defineProperty(Line.prototype, "y1", {
  8482. /** Gets or sets start coordinates on Y axis */
  8483. get: function () {
  8484. return this._y1.toString(this._host);
  8485. },
  8486. set: function (value) {
  8487. if (this._y1.toString(this._host) === value) {
  8488. return;
  8489. }
  8490. if (this._y1.fromString(value)) {
  8491. this._markAsDirty();
  8492. }
  8493. },
  8494. enumerable: false,
  8495. configurable: true
  8496. });
  8497. Object.defineProperty(Line.prototype, "x2", {
  8498. /** Gets or sets end coordinates on X axis */
  8499. get: function () {
  8500. return this._x2.toString(this._host);
  8501. },
  8502. set: function (value) {
  8503. if (this._x2.toString(this._host) === value) {
  8504. return;
  8505. }
  8506. if (this._x2.fromString(value)) {
  8507. this._markAsDirty();
  8508. }
  8509. },
  8510. enumerable: false,
  8511. configurable: true
  8512. });
  8513. Object.defineProperty(Line.prototype, "y2", {
  8514. /** Gets or sets end coordinates on Y axis */
  8515. get: function () {
  8516. return this._y2.toString(this._host);
  8517. },
  8518. set: function (value) {
  8519. if (this._y2.toString(this._host) === value) {
  8520. return;
  8521. }
  8522. if (this._y2.fromString(value)) {
  8523. this._markAsDirty();
  8524. }
  8525. },
  8526. enumerable: false,
  8527. configurable: true
  8528. });
  8529. Object.defineProperty(Line.prototype, "lineWidth", {
  8530. /** Gets or sets line width */
  8531. get: function () {
  8532. return this._lineWidth;
  8533. },
  8534. set: function (value) {
  8535. if (this._lineWidth === value) {
  8536. return;
  8537. }
  8538. this._lineWidth = value;
  8539. this._markAsDirty();
  8540. },
  8541. enumerable: false,
  8542. configurable: true
  8543. });
  8544. Object.defineProperty(Line.prototype, "horizontalAlignment", {
  8545. /** Gets or sets horizontal alignment */
  8546. set: function (value) {
  8547. return;
  8548. },
  8549. enumerable: false,
  8550. configurable: true
  8551. });
  8552. Object.defineProperty(Line.prototype, "verticalAlignment", {
  8553. /** Gets or sets vertical alignment */
  8554. set: function (value) {
  8555. return;
  8556. },
  8557. enumerable: false,
  8558. configurable: true
  8559. });
  8560. Object.defineProperty(Line.prototype, "_effectiveX2", {
  8561. get: function () {
  8562. return (this._connectedControl ? this._connectedControl.centerX : 0) + this._x2.getValue(this._host);
  8563. },
  8564. enumerable: false,
  8565. configurable: true
  8566. });
  8567. Object.defineProperty(Line.prototype, "_effectiveY2", {
  8568. get: function () {
  8569. return (this._connectedControl ? this._connectedControl.centerY : 0) + this._y2.getValue(this._host);
  8570. },
  8571. enumerable: false,
  8572. configurable: true
  8573. });
  8574. Line.prototype._getTypeName = function () {
  8575. return "Line";
  8576. };
  8577. Line.prototype._draw = function (context) {
  8578. context.save();
  8579. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8580. context.shadowColor = this.shadowColor;
  8581. context.shadowBlur = this.shadowBlur;
  8582. context.shadowOffsetX = this.shadowOffsetX;
  8583. context.shadowOffsetY = this.shadowOffsetY;
  8584. }
  8585. this._applyStates(context);
  8586. context.strokeStyle = this.color;
  8587. context.lineWidth = this._lineWidth;
  8588. context.setLineDash(this._dash);
  8589. context.beginPath();
  8590. context.moveTo(this._cachedParentMeasure.left + this._x1.getValue(this._host), this._cachedParentMeasure.top + this._y1.getValue(this._host));
  8591. context.lineTo(this._cachedParentMeasure.left + this._effectiveX2, this._cachedParentMeasure.top + this._effectiveY2);
  8592. context.stroke();
  8593. context.restore();
  8594. };
  8595. Line.prototype._measure = function () {
  8596. // Width / Height
  8597. this._currentMeasure.width = Math.abs(this._x1.getValue(this._host) - this._effectiveX2) + this._lineWidth;
  8598. this._currentMeasure.height = Math.abs(this._y1.getValue(this._host) - this._effectiveY2) + this._lineWidth;
  8599. };
  8600. Line.prototype._computeAlignment = function (parentMeasure, context) {
  8601. this._currentMeasure.left = parentMeasure.left + Math.min(this._x1.getValue(this._host), this._effectiveX2) - this._lineWidth / 2;
  8602. this._currentMeasure.top = parentMeasure.top + Math.min(this._y1.getValue(this._host), this._effectiveY2) - this._lineWidth / 2;
  8603. };
  8604. /**
  8605. * Move one end of the line given 3D cartesian coordinates.
  8606. * @param position Targeted world position
  8607. * @param scene Scene
  8608. * @param end (opt) Set to true to assign x2 and y2 coordinates of the line. Default assign to x1 and y1.
  8609. */
  8610. Line.prototype.moveToVector3 = function (position, scene, end) {
  8611. if (end === void 0) { end = false; }
  8612. if (!this._host || this.parent !== this._host._rootContainer) {
  8613. babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Tools"].Error("Cannot move a control to a vector3 if the control is not at root level");
  8614. return;
  8615. }
  8616. var globalViewport = this._host._getGlobalViewport(scene);
  8617. var projectedPosition = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Project(position, babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Matrix"].Identity(), scene.getTransformMatrix(), globalViewport);
  8618. this._moveToProjectedPosition(projectedPosition, end);
  8619. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  8620. this.notRenderable = true;
  8621. return;
  8622. }
  8623. this.notRenderable = false;
  8624. };
  8625. /**
  8626. * Move one end of the line to a position in screen absolute space.
  8627. * @param projectedPosition Position in screen absolute space (X, Y)
  8628. * @param end (opt) Set to true to assign x2 and y2 coordinates of the line. Default assign to x1 and y1.
  8629. */
  8630. Line.prototype._moveToProjectedPosition = function (projectedPosition, end) {
  8631. if (end === void 0) { end = false; }
  8632. var x = (projectedPosition.x + this._linkOffsetX.getValue(this._host)) + "px";
  8633. var y = (projectedPosition.y + this._linkOffsetY.getValue(this._host)) + "px";
  8634. if (end) {
  8635. this.x2 = x;
  8636. this.y2 = y;
  8637. this._x2.ignoreAdaptiveScaling = true;
  8638. this._y2.ignoreAdaptiveScaling = true;
  8639. }
  8640. else {
  8641. this.x1 = x;
  8642. this.y1 = y;
  8643. this._x1.ignoreAdaptiveScaling = true;
  8644. this._y1.ignoreAdaptiveScaling = true;
  8645. }
  8646. };
  8647. return Line;
  8648. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  8649. babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Line"] = Line;
  8650. /***/ }),
  8651. /***/ "./2D/controls/multiLine.ts":
  8652. /*!**********************************!*\
  8653. !*** ./2D/controls/multiLine.ts ***!
  8654. \**********************************/
  8655. /*! exports provided: MultiLine */
  8656. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8657. "use strict";
  8658. __webpack_require__.r(__webpack_exports__);
  8659. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return MultiLine; });
  8660. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8661. /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/perfCounter");
  8662. /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__);
  8663. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  8664. /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../multiLinePoint */ "./2D/multiLinePoint.ts");
  8665. /**
  8666. * Class used to create multi line control
  8667. */
  8668. var MultiLine = /** @class */ (function (_super) {
  8669. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(MultiLine, _super);
  8670. /**
  8671. * Creates a new MultiLine
  8672. * @param name defines the control name
  8673. */
  8674. function MultiLine(name) {
  8675. var _this = _super.call(this, name) || this;
  8676. _this.name = name;
  8677. _this._lineWidth = 1;
  8678. /** Function called when a point is updated */
  8679. _this.onPointUpdate = function () {
  8680. _this._markAsDirty();
  8681. };
  8682. _this._automaticSize = true;
  8683. _this.isHitTestVisible = false;
  8684. _this._horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  8685. _this._verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_TOP;
  8686. _this._dash = [];
  8687. _this._points = [];
  8688. return _this;
  8689. }
  8690. Object.defineProperty(MultiLine.prototype, "dash", {
  8691. /** Gets or sets dash pattern */
  8692. get: function () {
  8693. return this._dash;
  8694. },
  8695. set: function (value) {
  8696. if (this._dash === value) {
  8697. return;
  8698. }
  8699. this._dash = value;
  8700. this._markAsDirty();
  8701. },
  8702. enumerable: false,
  8703. configurable: true
  8704. });
  8705. /**
  8706. * Gets point stored at specified index
  8707. * @param index defines the index to look for
  8708. * @returns the requested point if found
  8709. */
  8710. MultiLine.prototype.getAt = function (index) {
  8711. if (!this._points[index]) {
  8712. this._points[index] = new _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__["MultiLinePoint"](this);
  8713. }
  8714. return this._points[index];
  8715. };
  8716. /**
  8717. * Adds new points to the point collection
  8718. * @param items defines the list of items (mesh, control or 2d coordiantes) to add
  8719. * @returns the list of created MultiLinePoint
  8720. */
  8721. MultiLine.prototype.add = function () {
  8722. var _this = this;
  8723. var items = [];
  8724. for (var _i = 0; _i < arguments.length; _i++) {
  8725. items[_i] = arguments[_i];
  8726. }
  8727. return items.map(function (item) { return _this.push(item); });
  8728. };
  8729. /**
  8730. * Adds a new point to the point collection
  8731. * @param item defines the item (mesh, control or 2d coordiantes) to add
  8732. * @returns the created MultiLinePoint
  8733. */
  8734. MultiLine.prototype.push = function (item) {
  8735. var point = this.getAt(this._points.length);
  8736. if (item == null) {
  8737. return point;
  8738. }
  8739. if (item instanceof babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__["AbstractMesh"]) {
  8740. point.mesh = item;
  8741. }
  8742. else if (item instanceof _control__WEBPACK_IMPORTED_MODULE_2__["Control"]) {
  8743. point.control = item;
  8744. }
  8745. else if (item.x != null && item.y != null) {
  8746. point.x = item.x;
  8747. point.y = item.y;
  8748. }
  8749. return point;
  8750. };
  8751. /**
  8752. * Remove a specific value or point from the active point collection
  8753. * @param value defines the value or point to remove
  8754. */
  8755. MultiLine.prototype.remove = function (value) {
  8756. var index;
  8757. if (value instanceof _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__["MultiLinePoint"]) {
  8758. index = this._points.indexOf(value);
  8759. if (index === -1) {
  8760. return;
  8761. }
  8762. }
  8763. else {
  8764. index = value;
  8765. }
  8766. var point = this._points[index];
  8767. if (!point) {
  8768. return;
  8769. }
  8770. point.dispose();
  8771. this._points.splice(index, 1);
  8772. };
  8773. /**
  8774. * Resets this object to initial state (no point)
  8775. */
  8776. MultiLine.prototype.reset = function () {
  8777. while (this._points.length > 0) {
  8778. this.remove(this._points.length - 1);
  8779. }
  8780. };
  8781. /**
  8782. * Resets all links
  8783. */
  8784. MultiLine.prototype.resetLinks = function () {
  8785. this._points.forEach(function (point) {
  8786. if (point != null) {
  8787. point.resetLinks();
  8788. }
  8789. });
  8790. };
  8791. Object.defineProperty(MultiLine.prototype, "lineWidth", {
  8792. /** Gets or sets line width */
  8793. get: function () {
  8794. return this._lineWidth;
  8795. },
  8796. set: function (value) {
  8797. if (this._lineWidth === value) {
  8798. return;
  8799. }
  8800. this._lineWidth = value;
  8801. this._markAsDirty();
  8802. },
  8803. enumerable: false,
  8804. configurable: true
  8805. });
  8806. Object.defineProperty(MultiLine.prototype, "horizontalAlignment", {
  8807. set: function (value) {
  8808. return;
  8809. },
  8810. enumerable: false,
  8811. configurable: true
  8812. });
  8813. Object.defineProperty(MultiLine.prototype, "verticalAlignment", {
  8814. set: function (value) {
  8815. return;
  8816. },
  8817. enumerable: false,
  8818. configurable: true
  8819. });
  8820. MultiLine.prototype._getTypeName = function () {
  8821. return "MultiLine";
  8822. };
  8823. MultiLine.prototype._draw = function (context, invalidatedRectangle) {
  8824. context.save();
  8825. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8826. context.shadowColor = this.shadowColor;
  8827. context.shadowBlur = this.shadowBlur;
  8828. context.shadowOffsetX = this.shadowOffsetX;
  8829. context.shadowOffsetY = this.shadowOffsetY;
  8830. }
  8831. this._applyStates(context);
  8832. context.strokeStyle = this.color;
  8833. context.lineWidth = this._lineWidth;
  8834. context.setLineDash(this._dash);
  8835. context.beginPath();
  8836. var first = true; //first index is not necessarily 0
  8837. var previousPoint;
  8838. this._points.forEach(function (point) {
  8839. if (!point) {
  8840. return;
  8841. }
  8842. if (first) {
  8843. context.moveTo(point._point.x, point._point.y);
  8844. first = false;
  8845. }
  8846. else {
  8847. if (point._point.z < 1 && previousPoint.z < 1) {
  8848. context.lineTo(point._point.x, point._point.y);
  8849. }
  8850. else {
  8851. context.moveTo(point._point.x, point._point.y);
  8852. }
  8853. }
  8854. previousPoint = point._point;
  8855. });
  8856. context.stroke();
  8857. context.restore();
  8858. };
  8859. MultiLine.prototype._additionalProcessing = function (parentMeasure, context) {
  8860. var _this = this;
  8861. this._minX = null;
  8862. this._minY = null;
  8863. this._maxX = null;
  8864. this._maxY = null;
  8865. this._points.forEach(function (point, index) {
  8866. if (!point) {
  8867. return;
  8868. }
  8869. point.translate();
  8870. if (_this._minX == null || point._point.x < _this._minX) {
  8871. _this._minX = point._point.x;
  8872. }
  8873. if (_this._minY == null || point._point.y < _this._minY) {
  8874. _this._minY = point._point.y;
  8875. }
  8876. if (_this._maxX == null || point._point.x > _this._maxX) {
  8877. _this._maxX = point._point.x;
  8878. }
  8879. if (_this._maxY == null || point._point.y > _this._maxY) {
  8880. _this._maxY = point._point.y;
  8881. }
  8882. });
  8883. if (this._minX == null) {
  8884. this._minX = 0;
  8885. }
  8886. if (this._minY == null) {
  8887. this._minY = 0;
  8888. }
  8889. if (this._maxX == null) {
  8890. this._maxX = 0;
  8891. }
  8892. if (this._maxY == null) {
  8893. this._maxY = 0;
  8894. }
  8895. };
  8896. MultiLine.prototype._measure = function () {
  8897. if (this._minX == null || this._maxX == null || this._minY == null || this._maxY == null) {
  8898. return;
  8899. }
  8900. this._currentMeasure.width = Math.abs(this._maxX - this._minX) + this._lineWidth;
  8901. this._currentMeasure.height = Math.abs(this._maxY - this._minY) + this._lineWidth;
  8902. };
  8903. MultiLine.prototype._computeAlignment = function (parentMeasure, context) {
  8904. if (this._minX == null || this._minY == null) {
  8905. return;
  8906. }
  8907. this._currentMeasure.left = this._minX - this._lineWidth / 2;
  8908. this._currentMeasure.top = this._minY - this._lineWidth / 2;
  8909. };
  8910. MultiLine.prototype.dispose = function () {
  8911. this.reset();
  8912. _super.prototype.dispose.call(this);
  8913. };
  8914. return MultiLine;
  8915. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  8916. babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.MultiLine"] = MultiLine;
  8917. /***/ }),
  8918. /***/ "./2D/controls/radioButton.ts":
  8919. /*!************************************!*\
  8920. !*** ./2D/controls/radioButton.ts ***!
  8921. \************************************/
  8922. /*! exports provided: RadioButton */
  8923. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8924. "use strict";
  8925. __webpack_require__.r(__webpack_exports__);
  8926. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return RadioButton; });
  8927. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8928. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  8929. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  8930. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  8931. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  8932. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  8933. /**
  8934. * Class used to create radio button controls
  8935. */
  8936. var RadioButton = /** @class */ (function (_super) {
  8937. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(RadioButton, _super);
  8938. /**
  8939. * Creates a new RadioButton
  8940. * @param name defines the control name
  8941. */
  8942. function RadioButton(name) {
  8943. var _this = _super.call(this, name) || this;
  8944. _this.name = name;
  8945. _this._isChecked = false;
  8946. _this._background = "black";
  8947. _this._checkSizeRatio = 0.8;
  8948. _this._thickness = 1;
  8949. /** Gets or sets group name */
  8950. _this.group = "";
  8951. /** Observable raised when isChecked is changed */
  8952. _this.onIsCheckedChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  8953. _this.isPointerBlocker = true;
  8954. return _this;
  8955. }
  8956. Object.defineProperty(RadioButton.prototype, "thickness", {
  8957. /** Gets or sets border thickness */
  8958. get: function () {
  8959. return this._thickness;
  8960. },
  8961. set: function (value) {
  8962. if (this._thickness === value) {
  8963. return;
  8964. }
  8965. this._thickness = value;
  8966. this._markAsDirty();
  8967. },
  8968. enumerable: false,
  8969. configurable: true
  8970. });
  8971. Object.defineProperty(RadioButton.prototype, "checkSizeRatio", {
  8972. /** Gets or sets a value indicating the ratio between overall size and check size */
  8973. get: function () {
  8974. return this._checkSizeRatio;
  8975. },
  8976. set: function (value) {
  8977. value = Math.max(Math.min(1, value), 0);
  8978. if (this._checkSizeRatio === value) {
  8979. return;
  8980. }
  8981. this._checkSizeRatio = value;
  8982. this._markAsDirty();
  8983. },
  8984. enumerable: false,
  8985. configurable: true
  8986. });
  8987. Object.defineProperty(RadioButton.prototype, "background", {
  8988. /** Gets or sets background color */
  8989. get: function () {
  8990. return this._background;
  8991. },
  8992. set: function (value) {
  8993. if (this._background === value) {
  8994. return;
  8995. }
  8996. this._background = value;
  8997. this._markAsDirty();
  8998. },
  8999. enumerable: false,
  9000. configurable: true
  9001. });
  9002. Object.defineProperty(RadioButton.prototype, "isChecked", {
  9003. /** Gets or sets a boolean indicating if the checkbox is checked or not */
  9004. get: function () {
  9005. return this._isChecked;
  9006. },
  9007. set: function (value) {
  9008. var _this = this;
  9009. if (this._isChecked === value) {
  9010. return;
  9011. }
  9012. this._isChecked = value;
  9013. this._markAsDirty();
  9014. this.onIsCheckedChangedObservable.notifyObservers(value);
  9015. if (this._isChecked && this._host) {
  9016. // Update all controls from same group
  9017. this._host.executeOnAllControls(function (control) {
  9018. if (control === _this) {
  9019. return;
  9020. }
  9021. if (control.group === undefined) {
  9022. return;
  9023. }
  9024. var childRadio = control;
  9025. if (childRadio.group === _this.group) {
  9026. childRadio.isChecked = false;
  9027. }
  9028. });
  9029. }
  9030. },
  9031. enumerable: false,
  9032. configurable: true
  9033. });
  9034. RadioButton.prototype._getTypeName = function () {
  9035. return "RadioButton";
  9036. };
  9037. RadioButton.prototype._draw = function (context) {
  9038. context.save();
  9039. this._applyStates(context);
  9040. var actualWidth = this._currentMeasure.width - this._thickness;
  9041. var actualHeight = this._currentMeasure.height - this._thickness;
  9042. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  9043. context.shadowColor = this.shadowColor;
  9044. context.shadowBlur = this.shadowBlur;
  9045. context.shadowOffsetX = this.shadowOffsetX;
  9046. context.shadowOffsetY = this.shadowOffsetY;
  9047. }
  9048. // Outer
  9049. _control__WEBPACK_IMPORTED_MODULE_2__["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);
  9050. context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
  9051. context.fill();
  9052. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  9053. context.shadowBlur = 0;
  9054. context.shadowOffsetX = 0;
  9055. context.shadowOffsetY = 0;
  9056. }
  9057. context.strokeStyle = this.color;
  9058. context.lineWidth = this._thickness;
  9059. context.stroke();
  9060. // Inner
  9061. if (this._isChecked) {
  9062. context.fillStyle = this._isEnabled ? this.color : this._disabledColor;
  9063. var offsetWidth = actualWidth * this._checkSizeRatio;
  9064. var offseHeight = actualHeight * this._checkSizeRatio;
  9065. _control__WEBPACK_IMPORTED_MODULE_2__["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);
  9066. context.fill();
  9067. }
  9068. context.restore();
  9069. };
  9070. // Events
  9071. RadioButton.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  9072. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
  9073. return false;
  9074. }
  9075. if (!this.isChecked) {
  9076. this.isChecked = true;
  9077. }
  9078. return true;
  9079. };
  9080. /**
  9081. * Utility function to easily create a radio button with a header
  9082. * @param title defines the label to use for the header
  9083. * @param group defines the group to use for the radio button
  9084. * @param isChecked defines the initial state of the radio button
  9085. * @param onValueChanged defines the callback to call when value changes
  9086. * @returns a StackPanel containing the radio button and a textBlock
  9087. */
  9088. RadioButton.AddRadioButtonWithHeader = function (title, group, isChecked, onValueChanged) {
  9089. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_3__["StackPanel"]();
  9090. panel.isVertical = false;
  9091. panel.height = "30px";
  9092. var radio = new RadioButton();
  9093. radio.width = "20px";
  9094. radio.height = "20px";
  9095. radio.isChecked = isChecked;
  9096. radio.color = "green";
  9097. radio.group = group;
  9098. radio.onIsCheckedChangedObservable.add(function (value) { return onValueChanged(radio, value); });
  9099. panel.addControl(radio);
  9100. var header = new _textBlock__WEBPACK_IMPORTED_MODULE_4__["TextBlock"]();
  9101. header.text = title;
  9102. header.width = "180px";
  9103. header.paddingLeft = "5px";
  9104. header.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9105. header.color = "white";
  9106. panel.addControl(header);
  9107. return panel;
  9108. };
  9109. return RadioButton;
  9110. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  9111. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.RadioButton"] = RadioButton;
  9112. /***/ }),
  9113. /***/ "./2D/controls/rectangle.ts":
  9114. /*!**********************************!*\
  9115. !*** ./2D/controls/rectangle.ts ***!
  9116. \**********************************/
  9117. /*! exports provided: Rectangle */
  9118. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  9119. "use strict";
  9120. __webpack_require__.r(__webpack_exports__);
  9121. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return Rectangle; });
  9122. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  9123. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  9124. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  9125. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  9126. /** Class used to create rectangle container */
  9127. var Rectangle = /** @class */ (function (_super) {
  9128. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Rectangle, _super);
  9129. /**
  9130. * Creates a new Rectangle
  9131. * @param name defines the control name
  9132. */
  9133. function Rectangle(name) {
  9134. var _this = _super.call(this, name) || this;
  9135. _this.name = name;
  9136. _this._thickness = 1;
  9137. _this._cornerRadius = 0;
  9138. return _this;
  9139. }
  9140. Object.defineProperty(Rectangle.prototype, "thickness", {
  9141. /** Gets or sets border thickness */
  9142. get: function () {
  9143. return this._thickness;
  9144. },
  9145. set: function (value) {
  9146. if (this._thickness === value) {
  9147. return;
  9148. }
  9149. this._thickness = value;
  9150. this._markAsDirty();
  9151. },
  9152. enumerable: false,
  9153. configurable: true
  9154. });
  9155. Object.defineProperty(Rectangle.prototype, "cornerRadius", {
  9156. /** Gets or sets the corner radius angle */
  9157. get: function () {
  9158. return this._cornerRadius;
  9159. },
  9160. set: function (value) {
  9161. if (value < 0) {
  9162. value = 0;
  9163. }
  9164. if (this._cornerRadius === value) {
  9165. return;
  9166. }
  9167. this._cornerRadius = value;
  9168. this._markAsDirty();
  9169. },
  9170. enumerable: false,
  9171. configurable: true
  9172. });
  9173. Rectangle.prototype._getTypeName = function () {
  9174. return "Rectangle";
  9175. };
  9176. Rectangle.prototype._localDraw = function (context) {
  9177. context.save();
  9178. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  9179. context.shadowColor = this.shadowColor;
  9180. context.shadowBlur = this.shadowBlur;
  9181. context.shadowOffsetX = this.shadowOffsetX;
  9182. context.shadowOffsetY = this.shadowOffsetY;
  9183. }
  9184. if (this._background) {
  9185. context.fillStyle = this._background;
  9186. if (this._cornerRadius) {
  9187. this._drawRoundedRect(context, this._thickness / 2);
  9188. context.fill();
  9189. }
  9190. else {
  9191. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  9192. }
  9193. }
  9194. if (this._thickness) {
  9195. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  9196. context.shadowBlur = 0;
  9197. context.shadowOffsetX = 0;
  9198. context.shadowOffsetY = 0;
  9199. }
  9200. if (this.color) {
  9201. context.strokeStyle = this.color;
  9202. }
  9203. context.lineWidth = this._thickness;
  9204. if (this._cornerRadius) {
  9205. this._drawRoundedRect(context, this._thickness / 2);
  9206. context.stroke();
  9207. }
  9208. else {
  9209. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
  9210. }
  9211. }
  9212. context.restore();
  9213. };
  9214. Rectangle.prototype._additionalProcessing = function (parentMeasure, context) {
  9215. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  9216. this._measureForChildren.width -= 2 * this._thickness;
  9217. this._measureForChildren.height -= 2 * this._thickness;
  9218. this._measureForChildren.left += this._thickness;
  9219. this._measureForChildren.top += this._thickness;
  9220. };
  9221. Rectangle.prototype._drawRoundedRect = function (context, offset) {
  9222. if (offset === void 0) { offset = 0; }
  9223. var x = this._currentMeasure.left + offset;
  9224. var y = this._currentMeasure.top + offset;
  9225. var width = this._currentMeasure.width - offset * 2;
  9226. var height = this._currentMeasure.height - offset * 2;
  9227. var radius = Math.min(height / 2 - 2, Math.min(width / 2 - 2, this._cornerRadius));
  9228. context.beginPath();
  9229. context.moveTo(x + radius, y);
  9230. context.lineTo(x + width - radius, y);
  9231. context.quadraticCurveTo(x + width, y, x + width, y + radius);
  9232. context.lineTo(x + width, y + height - radius);
  9233. context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  9234. context.lineTo(x + radius, y + height);
  9235. context.quadraticCurveTo(x, y + height, x, y + height - radius);
  9236. context.lineTo(x, y + radius);
  9237. context.quadraticCurveTo(x, y, x + radius, y);
  9238. context.closePath();
  9239. };
  9240. Rectangle.prototype._clipForChildren = function (context) {
  9241. if (this._cornerRadius) {
  9242. this._drawRoundedRect(context, this._thickness);
  9243. context.clip();
  9244. }
  9245. };
  9246. return Rectangle;
  9247. }(_container__WEBPACK_IMPORTED_MODULE_1__["Container"]));
  9248. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Rectangle"] = Rectangle;
  9249. /***/ }),
  9250. /***/ "./2D/controls/scrollViewers/scrollViewer.ts":
  9251. /*!***************************************************!*\
  9252. !*** ./2D/controls/scrollViewers/scrollViewer.ts ***!
  9253. \***************************************************/
  9254. /*! exports provided: ScrollViewer */
  9255. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  9256. "use strict";
  9257. __webpack_require__.r(__webpack_exports__);
  9258. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return ScrollViewer; });
  9259. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  9260. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../rectangle */ "./2D/controls/rectangle.ts");
  9261. /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../grid */ "./2D/controls/grid.ts");
  9262. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
  9263. /* harmony import */ var _scrollViewerWindow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./scrollViewerWindow */ "./2D/controls/scrollViewers/scrollViewerWindow.ts");
  9264. /* harmony import */ var _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../sliders/scrollBar */ "./2D/controls/sliders/scrollBar.ts");
  9265. /* harmony import */ var _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../sliders/imageScrollBar */ "./2D/controls/sliders/imageScrollBar.ts");
  9266. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  9267. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__);
  9268. /**
  9269. * Class used to hold a viewer window and sliders in a grid
  9270. */
  9271. var ScrollViewer = /** @class */ (function (_super) {
  9272. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScrollViewer, _super);
  9273. /**
  9274. * Creates a new ScrollViewer
  9275. * @param name of ScrollViewer
  9276. */
  9277. function ScrollViewer(name, isImageBased) {
  9278. var _this = _super.call(this, name) || this;
  9279. _this._barSize = 20;
  9280. _this._pointerIsOver = false;
  9281. _this._wheelPrecision = 0.05;
  9282. _this._thumbLength = 0.5;
  9283. _this._thumbHeight = 1;
  9284. _this._barImageHeight = 1;
  9285. _this._horizontalBarImageHeight = 1;
  9286. _this._verticalBarImageHeight = 1;
  9287. _this._oldWindowContentsWidth = 0;
  9288. _this._oldWindowContentsHeight = 0;
  9289. _this._forceHorizontalBar = false;
  9290. _this._forceVerticalBar = false;
  9291. _this._useImageBar = isImageBased ? isImageBased : false;
  9292. _this.onDirtyObservable.add(function () {
  9293. _this._horizontalBarSpace.color = _this.color;
  9294. _this._verticalBarSpace.color = _this.color;
  9295. _this._dragSpace.color = _this.color;
  9296. });
  9297. _this.onPointerEnterObservable.add(function () {
  9298. _this._pointerIsOver = true;
  9299. });
  9300. _this.onPointerOutObservable.add(function () {
  9301. _this._pointerIsOver = false;
  9302. });
  9303. _this._grid = new _grid__WEBPACK_IMPORTED_MODULE_2__["Grid"]();
  9304. if (_this._useImageBar) {
  9305. _this._horizontalBar = new _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_6__["ImageScrollBar"]();
  9306. _this._verticalBar = new _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_6__["ImageScrollBar"]();
  9307. }
  9308. else {
  9309. _this._horizontalBar = new _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_5__["ScrollBar"]();
  9310. _this._verticalBar = new _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_5__["ScrollBar"]();
  9311. }
  9312. _this._window = new _scrollViewerWindow__WEBPACK_IMPORTED_MODULE_4__["_ScrollViewerWindow"]("scrollViewer_window");
  9313. _this._window.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9314. _this._window.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  9315. _this._grid.addColumnDefinition(1);
  9316. _this._grid.addColumnDefinition(0, true);
  9317. _this._grid.addRowDefinition(1);
  9318. _this._grid.addRowDefinition(0, true);
  9319. _super.prototype.addControl.call(_this, _this._grid);
  9320. _this._grid.addControl(_this._window, 0, 0);
  9321. _this._verticalBarSpace = new _rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]();
  9322. _this._verticalBarSpace.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9323. _this._verticalBarSpace.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  9324. _this._verticalBarSpace.thickness = 1;
  9325. _this._grid.addControl(_this._verticalBarSpace, 0, 1);
  9326. _this._addBar(_this._verticalBar, _this._verticalBarSpace, true, Math.PI);
  9327. _this._horizontalBarSpace = new _rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]();
  9328. _this._horizontalBarSpace.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9329. _this._horizontalBarSpace.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  9330. _this._horizontalBarSpace.thickness = 1;
  9331. _this._grid.addControl(_this._horizontalBarSpace, 1, 0);
  9332. _this._addBar(_this._horizontalBar, _this._horizontalBarSpace, false, 0);
  9333. _this._dragSpace = new _rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]();
  9334. _this._dragSpace.thickness = 1;
  9335. _this._grid.addControl(_this._dragSpace, 1, 1);
  9336. // Colors
  9337. if (!_this._useImageBar) {
  9338. _this.barColor = "grey";
  9339. _this.barBackground = "transparent";
  9340. }
  9341. return _this;
  9342. }
  9343. Object.defineProperty(ScrollViewer.prototype, "horizontalBar", {
  9344. /**
  9345. * Gets the horizontal scrollbar
  9346. */
  9347. get: function () {
  9348. return this._horizontalBar;
  9349. },
  9350. enumerable: false,
  9351. configurable: true
  9352. });
  9353. Object.defineProperty(ScrollViewer.prototype, "verticalBar", {
  9354. /**
  9355. * Gets the vertical scrollbar
  9356. */
  9357. get: function () {
  9358. return this._verticalBar;
  9359. },
  9360. enumerable: false,
  9361. configurable: true
  9362. });
  9363. /**
  9364. * Adds a new control to the current container
  9365. * @param control defines the control to add
  9366. * @returns the current container
  9367. */
  9368. ScrollViewer.prototype.addControl = function (control) {
  9369. if (!control) {
  9370. return this;
  9371. }
  9372. this._window.addControl(control);
  9373. return this;
  9374. };
  9375. /**
  9376. * Removes a control from the current container
  9377. * @param control defines the control to remove
  9378. * @returns the current container
  9379. */
  9380. ScrollViewer.prototype.removeControl = function (control) {
  9381. this._window.removeControl(control);
  9382. return this;
  9383. };
  9384. Object.defineProperty(ScrollViewer.prototype, "children", {
  9385. /** Gets the list of children */
  9386. get: function () {
  9387. return this._window.children;
  9388. },
  9389. enumerable: false,
  9390. configurable: true
  9391. });
  9392. ScrollViewer.prototype._flagDescendantsAsMatrixDirty = function () {
  9393. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  9394. var child = _a[_i];
  9395. child._markMatrixAsDirty();
  9396. }
  9397. };
  9398. Object.defineProperty(ScrollViewer.prototype, "freezeControls", {
  9399. /**
  9400. * Freezes or unfreezes the controls in the window.
  9401. * When controls are frozen, the scroll viewer can render a lot more quickly but updates to positions/sizes of controls
  9402. * are not taken into account. If you want to change positions/sizes, unfreeze, perform the changes then freeze again
  9403. */
  9404. get: function () {
  9405. return this._window.freezeControls;
  9406. },
  9407. set: function (value) {
  9408. this._window.freezeControls = value;
  9409. },
  9410. enumerable: false,
  9411. configurable: true
  9412. });
  9413. Object.defineProperty(ScrollViewer.prototype, "bucketWidth", {
  9414. /** Gets the bucket width */
  9415. get: function () {
  9416. return this._window.bucketWidth;
  9417. },
  9418. enumerable: false,
  9419. configurable: true
  9420. });
  9421. Object.defineProperty(ScrollViewer.prototype, "bucketHeight", {
  9422. /** Gets the bucket height */
  9423. get: function () {
  9424. return this._window.bucketHeight;
  9425. },
  9426. enumerable: false,
  9427. configurable: true
  9428. });
  9429. /**
  9430. * Sets the bucket sizes.
  9431. * When freezeControls is true, setting a non-zero bucket size will improve performances by updating only
  9432. * controls that are visible. The bucket sizes is used to subdivide (internally) the window area to smaller areas into which
  9433. * controls are dispatched. So, the size should be roughly equals to the mean size of all the controls of
  9434. * the window. To disable the usage of buckets, sets either width or height (or both) to 0.
  9435. * Please note that using this option will raise the memory usage (the higher the bucket sizes, the less memory
  9436. * used), that's why it is not enabled by default.
  9437. * @param width width of the bucket
  9438. * @param height height of the bucket
  9439. */
  9440. ScrollViewer.prototype.setBucketSizes = function (width, height) {
  9441. this._window.setBucketSizes(width, height);
  9442. };
  9443. Object.defineProperty(ScrollViewer.prototype, "forceHorizontalBar", {
  9444. /**
  9445. * Forces the horizontal scroll bar to be displayed
  9446. */
  9447. get: function () {
  9448. return this._forceHorizontalBar;
  9449. },
  9450. set: function (value) {
  9451. this._grid.setRowDefinition(1, value ? this._barSize : 0, true);
  9452. this._horizontalBar.isVisible = value;
  9453. this._forceHorizontalBar = value;
  9454. },
  9455. enumerable: false,
  9456. configurable: true
  9457. });
  9458. Object.defineProperty(ScrollViewer.prototype, "forceVerticalBar", {
  9459. /**
  9460. * Forces the vertical scroll bar to be displayed
  9461. */
  9462. get: function () {
  9463. return this._forceVerticalBar;
  9464. },
  9465. set: function (value) {
  9466. this._grid.setColumnDefinition(1, value ? this._barSize : 0, true);
  9467. this._verticalBar.isVisible = value;
  9468. this._forceVerticalBar = value;
  9469. },
  9470. enumerable: false,
  9471. configurable: true
  9472. });
  9473. /** Reset the scroll viewer window to initial size */
  9474. ScrollViewer.prototype.resetWindow = function () {
  9475. this._window.width = "100%";
  9476. this._window.height = "100%";
  9477. };
  9478. ScrollViewer.prototype._getTypeName = function () {
  9479. return "ScrollViewer";
  9480. };
  9481. ScrollViewer.prototype._buildClientSizes = function () {
  9482. var ratio = this.host.idealRatio;
  9483. this._window.parentClientWidth = this._currentMeasure.width - (this._verticalBar.isVisible || this.forceVerticalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
  9484. this._window.parentClientHeight = this._currentMeasure.height - (this._horizontalBar.isVisible || this.forceHorizontalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
  9485. this._clientWidth = this._window.parentClientWidth;
  9486. this._clientHeight = this._window.parentClientHeight;
  9487. };
  9488. ScrollViewer.prototype._additionalProcessing = function (parentMeasure, context) {
  9489. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  9490. this._buildClientSizes();
  9491. };
  9492. ScrollViewer.prototype._postMeasure = function () {
  9493. _super.prototype._postMeasure.call(this);
  9494. this._updateScroller();
  9495. this._setWindowPosition(false);
  9496. };
  9497. Object.defineProperty(ScrollViewer.prototype, "wheelPrecision", {
  9498. /**
  9499. * Gets or sets the mouse wheel precision
  9500. * from 0 to 1 with a default value of 0.05
  9501. * */
  9502. get: function () {
  9503. return this._wheelPrecision;
  9504. },
  9505. set: function (value) {
  9506. if (this._wheelPrecision === value) {
  9507. return;
  9508. }
  9509. if (value < 0) {
  9510. value = 0;
  9511. }
  9512. if (value > 1) {
  9513. value = 1;
  9514. }
  9515. this._wheelPrecision = value;
  9516. },
  9517. enumerable: false,
  9518. configurable: true
  9519. });
  9520. Object.defineProperty(ScrollViewer.prototype, "scrollBackground", {
  9521. /** Gets or sets the scroll bar container background color */
  9522. get: function () {
  9523. return this._horizontalBarSpace.background;
  9524. },
  9525. set: function (color) {
  9526. if (this._horizontalBarSpace.background === color) {
  9527. return;
  9528. }
  9529. this._horizontalBarSpace.background = color;
  9530. this._verticalBarSpace.background = color;
  9531. },
  9532. enumerable: false,
  9533. configurable: true
  9534. });
  9535. Object.defineProperty(ScrollViewer.prototype, "barColor", {
  9536. /** Gets or sets the bar color */
  9537. get: function () {
  9538. return this._barColor;
  9539. },
  9540. set: function (color) {
  9541. if (this._barColor === color) {
  9542. return;
  9543. }
  9544. this._barColor = color;
  9545. this._horizontalBar.color = color;
  9546. this._verticalBar.color = color;
  9547. },
  9548. enumerable: false,
  9549. configurable: true
  9550. });
  9551. Object.defineProperty(ScrollViewer.prototype, "thumbImage", {
  9552. /** Gets or sets the bar image */
  9553. get: function () {
  9554. return this._barImage;
  9555. },
  9556. set: function (value) {
  9557. if (this._barImage === value) {
  9558. return;
  9559. }
  9560. this._barImage = value;
  9561. var hb = this._horizontalBar;
  9562. var vb = this._verticalBar;
  9563. hb.thumbImage = value;
  9564. vb.thumbImage = value;
  9565. },
  9566. enumerable: false,
  9567. configurable: true
  9568. });
  9569. Object.defineProperty(ScrollViewer.prototype, "horizontalThumbImage", {
  9570. /** Gets or sets the horizontal bar image */
  9571. get: function () {
  9572. return this._horizontalBarImage;
  9573. },
  9574. set: function (value) {
  9575. if (this._horizontalBarImage === value) {
  9576. return;
  9577. }
  9578. this._horizontalBarImage = value;
  9579. var hb = this._horizontalBar;
  9580. hb.thumbImage = value;
  9581. },
  9582. enumerable: false,
  9583. configurable: true
  9584. });
  9585. Object.defineProperty(ScrollViewer.prototype, "verticalThumbImage", {
  9586. /** Gets or sets the vertical bar image */
  9587. get: function () {
  9588. return this._verticalBarImage;
  9589. },
  9590. set: function (value) {
  9591. if (this._verticalBarImage === value) {
  9592. return;
  9593. }
  9594. this._verticalBarImage = value;
  9595. var vb = this._verticalBar;
  9596. vb.thumbImage = value;
  9597. },
  9598. enumerable: false,
  9599. configurable: true
  9600. });
  9601. Object.defineProperty(ScrollViewer.prototype, "barSize", {
  9602. /** Gets or sets the size of the bar */
  9603. get: function () {
  9604. return this._barSize;
  9605. },
  9606. set: function (value) {
  9607. if (this._barSize === value) {
  9608. return;
  9609. }
  9610. this._barSize = value;
  9611. this._markAsDirty();
  9612. if (this._horizontalBar.isVisible) {
  9613. this._grid.setRowDefinition(1, this._barSize, true);
  9614. }
  9615. if (this._verticalBar.isVisible) {
  9616. this._grid.setColumnDefinition(1, this._barSize, true);
  9617. }
  9618. },
  9619. enumerable: false,
  9620. configurable: true
  9621. });
  9622. Object.defineProperty(ScrollViewer.prototype, "thumbLength", {
  9623. /** Gets or sets the length of the thumb */
  9624. get: function () {
  9625. return this._thumbLength;
  9626. },
  9627. set: function (value) {
  9628. if (this._thumbLength === value) {
  9629. return;
  9630. }
  9631. if (value <= 0) {
  9632. value = 0.1;
  9633. }
  9634. if (value > 1) {
  9635. value = 1;
  9636. }
  9637. this._thumbLength = value;
  9638. var hb = this._horizontalBar;
  9639. var vb = this._verticalBar;
  9640. hb.thumbLength = value;
  9641. vb.thumbLength = value;
  9642. this._markAsDirty();
  9643. },
  9644. enumerable: false,
  9645. configurable: true
  9646. });
  9647. Object.defineProperty(ScrollViewer.prototype, "thumbHeight", {
  9648. /** Gets or sets the height of the thumb */
  9649. get: function () {
  9650. return this._thumbHeight;
  9651. },
  9652. set: function (value) {
  9653. if (this._thumbHeight === value) {
  9654. return;
  9655. }
  9656. if (value <= 0) {
  9657. value = 0.1;
  9658. }
  9659. if (value > 1) {
  9660. value = 1;
  9661. }
  9662. this._thumbHeight = value;
  9663. var hb = this._horizontalBar;
  9664. var vb = this._verticalBar;
  9665. hb.thumbHeight = value;
  9666. vb.thumbHeight = value;
  9667. this._markAsDirty();
  9668. },
  9669. enumerable: false,
  9670. configurable: true
  9671. });
  9672. Object.defineProperty(ScrollViewer.prototype, "barImageHeight", {
  9673. /** Gets or sets the height of the bar image */
  9674. get: function () {
  9675. return this._barImageHeight;
  9676. },
  9677. set: function (value) {
  9678. if (this._barImageHeight === value) {
  9679. return;
  9680. }
  9681. if (value <= 0) {
  9682. value = 0.1;
  9683. }
  9684. if (value > 1) {
  9685. value = 1;
  9686. }
  9687. this._barImageHeight = value;
  9688. var hb = this._horizontalBar;
  9689. var vb = this._verticalBar;
  9690. hb.barImageHeight = value;
  9691. vb.barImageHeight = value;
  9692. this._markAsDirty();
  9693. },
  9694. enumerable: false,
  9695. configurable: true
  9696. });
  9697. Object.defineProperty(ScrollViewer.prototype, "horizontalBarImageHeight", {
  9698. /** Gets or sets the height of the horizontal bar image */
  9699. get: function () {
  9700. return this._horizontalBarImageHeight;
  9701. },
  9702. set: function (value) {
  9703. if (this._horizontalBarImageHeight === value) {
  9704. return;
  9705. }
  9706. if (value <= 0) {
  9707. value = 0.1;
  9708. }
  9709. if (value > 1) {
  9710. value = 1;
  9711. }
  9712. this._horizontalBarImageHeight = value;
  9713. var hb = this._horizontalBar;
  9714. hb.barImageHeight = value;
  9715. this._markAsDirty();
  9716. },
  9717. enumerable: false,
  9718. configurable: true
  9719. });
  9720. Object.defineProperty(ScrollViewer.prototype, "verticalBarImageHeight", {
  9721. /** Gets or sets the height of the vertical bar image */
  9722. get: function () {
  9723. return this._verticalBarImageHeight;
  9724. },
  9725. set: function (value) {
  9726. if (this._verticalBarImageHeight === value) {
  9727. return;
  9728. }
  9729. if (value <= 0) {
  9730. value = 0.1;
  9731. }
  9732. if (value > 1) {
  9733. value = 1;
  9734. }
  9735. this._verticalBarImageHeight = value;
  9736. var vb = this._verticalBar;
  9737. vb.barImageHeight = value;
  9738. this._markAsDirty();
  9739. },
  9740. enumerable: false,
  9741. configurable: true
  9742. });
  9743. Object.defineProperty(ScrollViewer.prototype, "barBackground", {
  9744. /** Gets or sets the bar background */
  9745. get: function () {
  9746. return this._barBackground;
  9747. },
  9748. set: function (color) {
  9749. if (this._barBackground === color) {
  9750. return;
  9751. }
  9752. this._barBackground = color;
  9753. var hb = this._horizontalBar;
  9754. var vb = this._verticalBar;
  9755. hb.background = color;
  9756. vb.background = color;
  9757. this._dragSpace.background = color;
  9758. },
  9759. enumerable: false,
  9760. configurable: true
  9761. });
  9762. Object.defineProperty(ScrollViewer.prototype, "barImage", {
  9763. /** Gets or sets the bar background image */
  9764. get: function () {
  9765. return this._barBackgroundImage;
  9766. },
  9767. set: function (value) {
  9768. if (this._barBackgroundImage === value) {
  9769. }
  9770. this._barBackgroundImage = value;
  9771. var hb = this._horizontalBar;
  9772. var vb = this._verticalBar;
  9773. hb.backgroundImage = value;
  9774. vb.backgroundImage = value;
  9775. },
  9776. enumerable: false,
  9777. configurable: true
  9778. });
  9779. Object.defineProperty(ScrollViewer.prototype, "horizontalBarImage", {
  9780. /** Gets or sets the horizontal bar background image */
  9781. get: function () {
  9782. return this._horizontalBarBackgroundImage;
  9783. },
  9784. set: function (value) {
  9785. if (this._horizontalBarBackgroundImage === value) {
  9786. }
  9787. this._horizontalBarBackgroundImage = value;
  9788. var hb = this._horizontalBar;
  9789. hb.backgroundImage = value;
  9790. },
  9791. enumerable: false,
  9792. configurable: true
  9793. });
  9794. Object.defineProperty(ScrollViewer.prototype, "verticalBarImage", {
  9795. /** Gets or sets the vertical bar background image */
  9796. get: function () {
  9797. return this._verticalBarBackgroundImage;
  9798. },
  9799. set: function (value) {
  9800. if (this._verticalBarBackgroundImage === value) {
  9801. }
  9802. this._verticalBarBackgroundImage = value;
  9803. var vb = this._verticalBar;
  9804. vb.backgroundImage = value;
  9805. },
  9806. enumerable: false,
  9807. configurable: true
  9808. });
  9809. ScrollViewer.prototype._setWindowPosition = function (force) {
  9810. if (force === void 0) { force = true; }
  9811. var ratio = this.host.idealRatio;
  9812. var windowContentsWidth = this._window._currentMeasure.width;
  9813. var windowContentsHeight = this._window._currentMeasure.height;
  9814. if (!force && this._oldWindowContentsWidth === windowContentsWidth && this._oldWindowContentsHeight === windowContentsHeight) {
  9815. return;
  9816. }
  9817. this._oldWindowContentsWidth = windowContentsWidth;
  9818. this._oldWindowContentsHeight = windowContentsHeight;
  9819. var _endLeft = this._clientWidth - windowContentsWidth;
  9820. var _endTop = this._clientHeight - windowContentsHeight;
  9821. var newLeft = (this._horizontalBar.value / ratio) * _endLeft + "px";
  9822. var newTop = (this._verticalBar.value / ratio) * _endTop + "px";
  9823. if (newLeft !== this._window.left) {
  9824. this._window.left = newLeft;
  9825. if (!this.freezeControls) {
  9826. this._rebuildLayout = true;
  9827. }
  9828. }
  9829. if (newTop !== this._window.top) {
  9830. this._window.top = newTop;
  9831. if (!this.freezeControls) {
  9832. this._rebuildLayout = true;
  9833. }
  9834. }
  9835. };
  9836. /** @hidden */
  9837. ScrollViewer.prototype._updateScroller = function () {
  9838. var windowContentsWidth = this._window._currentMeasure.width;
  9839. var windowContentsHeight = this._window._currentMeasure.height;
  9840. if (this._horizontalBar.isVisible && windowContentsWidth <= this._clientWidth && !this.forceHorizontalBar) {
  9841. this._grid.setRowDefinition(1, 0, true);
  9842. this._horizontalBar.isVisible = false;
  9843. this._horizontalBar.value = 0;
  9844. this._rebuildLayout = true;
  9845. }
  9846. else if (!this._horizontalBar.isVisible && (windowContentsWidth > this._clientWidth || this.forceHorizontalBar)) {
  9847. this._grid.setRowDefinition(1, this._barSize, true);
  9848. this._horizontalBar.isVisible = true;
  9849. this._rebuildLayout = true;
  9850. }
  9851. if (this._verticalBar.isVisible && windowContentsHeight <= this._clientHeight && !this.forceVerticalBar) {
  9852. this._grid.setColumnDefinition(1, 0, true);
  9853. this._verticalBar.isVisible = false;
  9854. this._verticalBar.value = 0;
  9855. this._rebuildLayout = true;
  9856. }
  9857. else if (!this._verticalBar.isVisible && (windowContentsHeight > this._clientHeight || this.forceVerticalBar)) {
  9858. this._grid.setColumnDefinition(1, this._barSize, true);
  9859. this._verticalBar.isVisible = true;
  9860. this._rebuildLayout = true;
  9861. }
  9862. this._buildClientSizes();
  9863. var ratio = this.host.idealRatio;
  9864. this._horizontalBar.thumbWidth = this._thumbLength * 0.9 * (this._clientWidth / ratio) + "px";
  9865. this._verticalBar.thumbWidth = this._thumbLength * 0.9 * (this._clientHeight / ratio) + "px";
  9866. };
  9867. ScrollViewer.prototype._link = function (host) {
  9868. _super.prototype._link.call(this, host);
  9869. this._attachWheel();
  9870. };
  9871. /** @hidden */
  9872. ScrollViewer.prototype._addBar = function (barControl, barContainer, isVertical, rotation) {
  9873. var _this = this;
  9874. barControl.paddingLeft = 0;
  9875. barControl.width = "100%";
  9876. barControl.height = "100%";
  9877. barControl.barOffset = 0;
  9878. barControl.value = 0;
  9879. barControl.maximum = 1;
  9880. barControl.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  9881. barControl.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER;
  9882. barControl.isVertical = isVertical;
  9883. barControl.rotation = rotation;
  9884. barControl.isVisible = false;
  9885. barContainer.addControl(barControl);
  9886. barControl.onValueChangedObservable.add(function (value) {
  9887. _this._setWindowPosition();
  9888. });
  9889. };
  9890. /** @hidden */
  9891. ScrollViewer.prototype._attachWheel = function () {
  9892. var _this = this;
  9893. if (!this._host || this._onWheelObserver) {
  9894. return;
  9895. }
  9896. this._onWheelObserver = this.onWheelObservable.add(function (pi) {
  9897. if (!_this._pointerIsOver) {
  9898. return;
  9899. }
  9900. if (_this._verticalBar.isVisible == true) {
  9901. if (pi.y < 0 && _this._verticalBar.value > 0) {
  9902. _this._verticalBar.value -= _this._wheelPrecision;
  9903. }
  9904. else if (pi.y > 0 && _this._verticalBar.value < _this._verticalBar.maximum) {
  9905. _this._verticalBar.value += _this._wheelPrecision;
  9906. }
  9907. }
  9908. if (_this._horizontalBar.isVisible == true) {
  9909. if (pi.x < 0 && _this._horizontalBar.value < _this._horizontalBar.maximum) {
  9910. _this._horizontalBar.value += _this._wheelPrecision;
  9911. }
  9912. else if (pi.x > 0 && _this._horizontalBar.value > 0) {
  9913. _this._horizontalBar.value -= _this._wheelPrecision;
  9914. }
  9915. }
  9916. });
  9917. };
  9918. ScrollViewer.prototype._renderHighlightSpecific = function (context) {
  9919. if (!this.isHighlighted) {
  9920. return;
  9921. }
  9922. _super.prototype._renderHighlightSpecific.call(this, context);
  9923. this._grid._renderHighlightSpecific(context);
  9924. context.restore();
  9925. };
  9926. /** Releases associated resources */
  9927. ScrollViewer.prototype.dispose = function () {
  9928. this.onWheelObservable.remove(this._onWheelObserver);
  9929. this._onWheelObserver = null;
  9930. _super.prototype.dispose.call(this);
  9931. };
  9932. return ScrollViewer;
  9933. }(_rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]));
  9934. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__["_TypeStore"].RegisteredTypes["BABYLON.GUI.ScrollViewer"] = ScrollViewer;
  9935. /***/ }),
  9936. /***/ "./2D/controls/scrollViewers/scrollViewerWindow.ts":
  9937. /*!*********************************************************!*\
  9938. !*** ./2D/controls/scrollViewers/scrollViewerWindow.ts ***!
  9939. \*********************************************************/
  9940. /*! exports provided: _ScrollViewerWindow */
  9941. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  9942. "use strict";
  9943. __webpack_require__.r(__webpack_exports__);
  9944. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_ScrollViewerWindow", function() { return _ScrollViewerWindow; });
  9945. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  9946. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  9947. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../container */ "./2D/controls/container.ts");
  9948. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
  9949. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
  9950. /**
  9951. * Class used to hold a the container for ScrollViewer
  9952. * @hidden
  9953. */
  9954. var _ScrollViewerWindow = /** @class */ (function (_super) {
  9955. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(_ScrollViewerWindow, _super);
  9956. /**
  9957. * Creates a new ScrollViewerWindow
  9958. * @param name of ScrollViewerWindow
  9959. */
  9960. function _ScrollViewerWindow(name) {
  9961. var _this = _super.call(this, name) || this;
  9962. _this._freezeControls = false;
  9963. _this._bucketWidth = 0;
  9964. _this._bucketHeight = 0;
  9965. _this._buckets = {};
  9966. return _this;
  9967. }
  9968. Object.defineProperty(_ScrollViewerWindow.prototype, "freezeControls", {
  9969. get: function () {
  9970. return this._freezeControls;
  9971. },
  9972. set: function (value) {
  9973. if (this._freezeControls === value) {
  9974. return;
  9975. }
  9976. if (!value) {
  9977. this._restoreMeasures();
  9978. }
  9979. // trigger a full normal layout calculation to be sure all children have their measures up to date
  9980. this._freezeControls = false;
  9981. var textureSize = this.host.getSize();
  9982. var renderWidth = textureSize.width;
  9983. var renderHeight = textureSize.height;
  9984. var context = this.host.getContext();
  9985. var measure = new _measure__WEBPACK_IMPORTED_MODULE_1__["Measure"](0, 0, renderWidth, renderHeight);
  9986. this.host._numLayoutCalls = 0;
  9987. this.host._rootContainer._layout(measure, context);
  9988. // in freeze mode, prepare children measures accordingly
  9989. if (value) {
  9990. this._updateMeasures();
  9991. if (this._useBuckets()) {
  9992. this._makeBuckets();
  9993. }
  9994. }
  9995. this._freezeControls = value;
  9996. this.host.markAsDirty(); // redraw with the (new) current settings
  9997. },
  9998. enumerable: false,
  9999. configurable: true
  10000. });
  10001. Object.defineProperty(_ScrollViewerWindow.prototype, "bucketWidth", {
  10002. get: function () {
  10003. return this._bucketWidth;
  10004. },
  10005. enumerable: false,
  10006. configurable: true
  10007. });
  10008. Object.defineProperty(_ScrollViewerWindow.prototype, "bucketHeight", {
  10009. get: function () {
  10010. return this._bucketHeight;
  10011. },
  10012. enumerable: false,
  10013. configurable: true
  10014. });
  10015. _ScrollViewerWindow.prototype.setBucketSizes = function (width, height) {
  10016. this._bucketWidth = width;
  10017. this._bucketHeight = height;
  10018. if (this._useBuckets()) {
  10019. if (this._freezeControls) {
  10020. this._makeBuckets();
  10021. }
  10022. }
  10023. else {
  10024. this._buckets = {};
  10025. }
  10026. };
  10027. _ScrollViewerWindow.prototype._useBuckets = function () {
  10028. return this._bucketWidth > 0 && this._bucketHeight > 0;
  10029. };
  10030. _ScrollViewerWindow.prototype._makeBuckets = function () {
  10031. this._buckets = {};
  10032. this._bucketLen = Math.ceil(this.widthInPixels / this._bucketWidth);
  10033. this._dispatchInBuckets(this._children);
  10034. this._oldLeft = null;
  10035. this._oldTop = null;
  10036. };
  10037. _ScrollViewerWindow.prototype._dispatchInBuckets = function (children) {
  10038. for (var i = 0; i < children.length; ++i) {
  10039. var child = children[i];
  10040. var bStartX = Math.max(0, Math.floor((child._customData._origLeft - this._customData.origLeft) / this._bucketWidth)), bEndX = Math.floor((child._customData._origLeft - this._customData.origLeft + child._currentMeasure.width - 1) / this._bucketWidth), bStartY = Math.max(0, Math.floor((child._customData._origTop - this._customData.origTop) / this._bucketHeight)), bEndY = Math.floor((child._customData._origTop - this._customData.origTop + child._currentMeasure.height - 1) / this._bucketHeight);
  10041. while (bStartY <= bEndY) {
  10042. for (var x = bStartX; x <= bEndX; ++x) {
  10043. var bucket = bStartY * this._bucketLen + x, lstc = this._buckets[bucket];
  10044. if (!lstc) {
  10045. lstc = [];
  10046. this._buckets[bucket] = lstc;
  10047. }
  10048. lstc.push(child);
  10049. }
  10050. bStartY++;
  10051. }
  10052. if (child instanceof _container__WEBPACK_IMPORTED_MODULE_2__["Container"] && child._children.length > 0) {
  10053. this._dispatchInBuckets(child._children);
  10054. }
  10055. }
  10056. };
  10057. // reset left and top measures for the window and all its children
  10058. _ScrollViewerWindow.prototype._updateMeasures = function () {
  10059. var left = this.leftInPixels | 0, top = this.topInPixels | 0;
  10060. this._measureForChildren.left -= left;
  10061. this._measureForChildren.top -= top;
  10062. this._currentMeasure.left -= left;
  10063. this._currentMeasure.top -= top;
  10064. this._customData.origLeftForChildren = this._measureForChildren.left;
  10065. this._customData.origTopForChildren = this._measureForChildren.top;
  10066. this._customData.origLeft = this._currentMeasure.left;
  10067. this._customData.origTop = this._currentMeasure.top;
  10068. this._updateChildrenMeasures(this._children, left, top);
  10069. };
  10070. _ScrollViewerWindow.prototype._updateChildrenMeasures = function (children, left, top) {
  10071. for (var i = 0; i < children.length; ++i) {
  10072. var child = children[i];
  10073. child._currentMeasure.left -= left;
  10074. child._currentMeasure.top -= top;
  10075. child._customData._origLeft = child._currentMeasure.left; // save the original left and top values for each child
  10076. child._customData._origTop = child._currentMeasure.top;
  10077. if (child instanceof _container__WEBPACK_IMPORTED_MODULE_2__["Container"] && child._children.length > 0) {
  10078. this._updateChildrenMeasures(child._children, left, top);
  10079. }
  10080. }
  10081. };
  10082. _ScrollViewerWindow.prototype._restoreMeasures = function () {
  10083. var left = this.leftInPixels | 0, top = this.topInPixels | 0;
  10084. this._measureForChildren.left = this._customData.origLeftForChildren + left;
  10085. this._measureForChildren.top = this._customData.origTopForChildren + top;
  10086. this._currentMeasure.left = this._customData.origLeft + left;
  10087. this._currentMeasure.top = this._customData.origTop + top;
  10088. };
  10089. _ScrollViewerWindow.prototype._getTypeName = function () {
  10090. return "ScrollViewerWindow";
  10091. };
  10092. /** @hidden */
  10093. _ScrollViewerWindow.prototype._additionalProcessing = function (parentMeasure, context) {
  10094. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  10095. this._parentMeasure = parentMeasure;
  10096. this._measureForChildren.left = this._currentMeasure.left;
  10097. this._measureForChildren.top = this._currentMeasure.top;
  10098. this._measureForChildren.width = parentMeasure.width;
  10099. this._measureForChildren.height = parentMeasure.height;
  10100. };
  10101. /** @hidden */
  10102. _ScrollViewerWindow.prototype._layout = function (parentMeasure, context) {
  10103. if (this._freezeControls) {
  10104. this.invalidateRect(); // will trigger a redraw of the window
  10105. return false;
  10106. }
  10107. return _super.prototype._layout.call(this, parentMeasure, context);
  10108. };
  10109. _ScrollViewerWindow.prototype._scrollChildren = function (children, left, top) {
  10110. for (var i = 0; i < children.length; ++i) {
  10111. var child = children[i];
  10112. child._currentMeasure.left = child._customData._origLeft + left;
  10113. child._currentMeasure.top = child._customData._origTop + top;
  10114. child._isClipped = false; // clipping will be handled by _draw and the call to _intersectsRect()
  10115. if (child instanceof _container__WEBPACK_IMPORTED_MODULE_2__["Container"] && child._children.length > 0) {
  10116. this._scrollChildren(child._children, left, top);
  10117. }
  10118. }
  10119. };
  10120. _ScrollViewerWindow.prototype._scrollChildrenWithBuckets = function (left, top, scrollLeft, scrollTop) {
  10121. var bStartX = Math.max(0, Math.floor(-left / this._bucketWidth)), bEndX = Math.floor((-left + this._parentMeasure.width - 1) / this._bucketWidth), bStartY = Math.max(0, Math.floor(-top / this._bucketHeight)), bEndY = Math.floor((-top + this._parentMeasure.height - 1) / this._bucketHeight);
  10122. while (bStartY <= bEndY) {
  10123. for (var x = bStartX; x <= bEndX; ++x) {
  10124. var bucket = bStartY * this._bucketLen + x, lstc = this._buckets[bucket];
  10125. if (lstc) {
  10126. for (var i = 0; i < lstc.length; ++i) {
  10127. var child = lstc[i];
  10128. child._currentMeasure.left = child._customData._origLeft + scrollLeft;
  10129. child._currentMeasure.top = child._customData._origTop + scrollTop;
  10130. child._isClipped = false; // clipping will be handled by _draw and the call to _intersectsRect()
  10131. }
  10132. }
  10133. }
  10134. bStartY++;
  10135. }
  10136. };
  10137. /** @hidden */
  10138. _ScrollViewerWindow.prototype._draw = function (context, invalidatedRectangle) {
  10139. if (!this._freezeControls) {
  10140. _super.prototype._draw.call(this, context, invalidatedRectangle);
  10141. return;
  10142. }
  10143. this._localDraw(context);
  10144. if (this.clipChildren) {
  10145. this._clipForChildren(context);
  10146. }
  10147. var left = this.leftInPixels | 0, top = this.topInPixels | 0;
  10148. if (this._useBuckets()) {
  10149. if (this._oldLeft !== null && this._oldTop !== null) {
  10150. this._scrollChildrenWithBuckets(this._oldLeft, this._oldTop, left, top);
  10151. this._scrollChildrenWithBuckets(left, top, left, top);
  10152. }
  10153. else {
  10154. this._scrollChildren(this._children, left, top);
  10155. }
  10156. }
  10157. else {
  10158. this._scrollChildren(this._children, left, top);
  10159. }
  10160. this._oldLeft = left;
  10161. this._oldTop = top;
  10162. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  10163. var child = _a[_i];
  10164. if (!child._intersectsRect(this._parentMeasure)) {
  10165. continue;
  10166. }
  10167. child._render(context, this._parentMeasure);
  10168. }
  10169. };
  10170. _ScrollViewerWindow.prototype._postMeasure = function () {
  10171. if (this._freezeControls) {
  10172. _super.prototype._postMeasure.call(this);
  10173. return;
  10174. }
  10175. var maxWidth = this.parentClientWidth;
  10176. var maxHeight = this.parentClientHeight;
  10177. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  10178. var child = _a[_i];
  10179. if (!child.isVisible || child.notRenderable) {
  10180. continue;
  10181. }
  10182. if (child.horizontalAlignment === _control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_CENTER) {
  10183. child._offsetLeft(this._currentMeasure.left - child._currentMeasure.left);
  10184. }
  10185. if (child.verticalAlignment === _control__WEBPACK_IMPORTED_MODULE_4__["Control"].VERTICAL_ALIGNMENT_CENTER) {
  10186. child._offsetTop(this._currentMeasure.top - child._currentMeasure.top);
  10187. }
  10188. maxWidth = Math.max(maxWidth, child._currentMeasure.left - this._currentMeasure.left + child._currentMeasure.width + child.paddingRightInPixels);
  10189. maxHeight = Math.max(maxHeight, child._currentMeasure.top - this._currentMeasure.top + child._currentMeasure.height + child.paddingBottomInPixels);
  10190. }
  10191. if (this._currentMeasure.width !== maxWidth) {
  10192. this._width.updateInPlace(maxWidth, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL);
  10193. this._currentMeasure.width = maxWidth;
  10194. this._rebuildLayout = true;
  10195. this._isDirty = true;
  10196. }
  10197. if (this._currentMeasure.height !== maxHeight) {
  10198. this._height.updateInPlace(maxHeight, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL);
  10199. this._currentMeasure.height = maxHeight;
  10200. this._rebuildLayout = true;
  10201. this._isDirty = true;
  10202. }
  10203. _super.prototype._postMeasure.call(this);
  10204. };
  10205. return _ScrollViewerWindow;
  10206. }(_container__WEBPACK_IMPORTED_MODULE_2__["Container"]));
  10207. /***/ }),
  10208. /***/ "./2D/controls/selector.ts":
  10209. /*!*********************************!*\
  10210. !*** ./2D/controls/selector.ts ***!
  10211. \*********************************/
  10212. /*! exports provided: SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel */
  10213. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  10214. "use strict";
  10215. __webpack_require__.r(__webpack_exports__);
  10216. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return SelectorGroup; });
  10217. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return CheckboxGroup; });
  10218. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return RadioGroup; });
  10219. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return SliderGroup; });
  10220. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return SelectionPanel; });
  10221. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  10222. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  10223. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  10224. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  10225. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  10226. /* harmony import */ var _checkbox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./checkbox */ "./2D/controls/checkbox.ts");
  10227. /* harmony import */ var _radioButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./radioButton */ "./2D/controls/radioButton.ts");
  10228. /* harmony import */ var _sliders_slider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./sliders/slider */ "./2D/controls/sliders/slider.ts");
  10229. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  10230. /** Class used to create a RadioGroup
  10231. * which contains groups of radio buttons
  10232. */
  10233. var SelectorGroup = /** @class */ (function () {
  10234. /**
  10235. * Creates a new SelectorGroup
  10236. * @param name of group, used as a group heading
  10237. */
  10238. function SelectorGroup(
  10239. /** name of SelectorGroup */
  10240. name) {
  10241. this.name = name;
  10242. this._groupPanel = new _stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]();
  10243. this._selectors = new Array();
  10244. this._groupPanel.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  10245. this._groupPanel.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10246. this._groupHeader = this._addGroupHeader(name);
  10247. }
  10248. Object.defineProperty(SelectorGroup.prototype, "groupPanel", {
  10249. /** Gets the groupPanel of the SelectorGroup */
  10250. get: function () {
  10251. return this._groupPanel;
  10252. },
  10253. enumerable: false,
  10254. configurable: true
  10255. });
  10256. Object.defineProperty(SelectorGroup.prototype, "selectors", {
  10257. /** Gets the selectors array */
  10258. get: function () {
  10259. return this._selectors;
  10260. },
  10261. enumerable: false,
  10262. configurable: true
  10263. });
  10264. Object.defineProperty(SelectorGroup.prototype, "header", {
  10265. /** Gets and sets the group header */
  10266. get: function () {
  10267. return this._groupHeader.text;
  10268. },
  10269. set: function (label) {
  10270. if (this._groupHeader.text === "label") {
  10271. return;
  10272. }
  10273. this._groupHeader.text = label;
  10274. },
  10275. enumerable: false,
  10276. configurable: true
  10277. });
  10278. /** @hidden */
  10279. SelectorGroup.prototype._addGroupHeader = function (text) {
  10280. var groupHeading = new _textBlock__WEBPACK_IMPORTED_MODULE_4__["TextBlock"]("groupHead", text);
  10281. groupHeading.width = 0.9;
  10282. groupHeading.height = "30px";
  10283. groupHeading.textWrapping = true;
  10284. groupHeading.color = "black";
  10285. groupHeading.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10286. groupHeading.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10287. groupHeading.left = "2px";
  10288. this._groupPanel.addControl(groupHeading);
  10289. return groupHeading;
  10290. };
  10291. /** @hidden*/
  10292. SelectorGroup.prototype._getSelector = function (selectorNb) {
  10293. if (selectorNb < 0 || selectorNb >= this._selectors.length) {
  10294. return;
  10295. }
  10296. return this._selectors[selectorNb];
  10297. };
  10298. /** Removes the selector at the given position
  10299. * @param selectorNb the position of the selector within the group
  10300. */
  10301. SelectorGroup.prototype.removeSelector = function (selectorNb) {
  10302. if (selectorNb < 0 || selectorNb >= this._selectors.length) {
  10303. return;
  10304. }
  10305. this._groupPanel.removeControl(this._selectors[selectorNb]);
  10306. this._selectors.splice(selectorNb, 1);
  10307. };
  10308. return SelectorGroup;
  10309. }());
  10310. /** Class used to create a CheckboxGroup
  10311. * which contains groups of checkbox buttons
  10312. */
  10313. var CheckboxGroup = /** @class */ (function (_super) {
  10314. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CheckboxGroup, _super);
  10315. function CheckboxGroup() {
  10316. return _super !== null && _super.apply(this, arguments) || this;
  10317. }
  10318. /** Adds a checkbox as a control
  10319. * @param text is the label for the selector
  10320. * @param func is the function called when the Selector is checked
  10321. * @param checked is true when Selector is checked
  10322. */
  10323. CheckboxGroup.prototype.addCheckbox = function (text, func, checked) {
  10324. if (func === void 0) { func = function (s) { }; }
  10325. if (checked === void 0) { checked = false; }
  10326. var checked = checked || false;
  10327. var button = new _checkbox__WEBPACK_IMPORTED_MODULE_5__["Checkbox"]();
  10328. button.width = "20px";
  10329. button.height = "20px";
  10330. button.color = "#364249";
  10331. button.background = "#CCCCCC";
  10332. button.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10333. button.onIsCheckedChangedObservable.add(function (state) {
  10334. func(state);
  10335. });
  10336. var _selector = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
  10337. _selector.height = "30px";
  10338. _selector.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10339. _selector.left = "4px";
  10340. this.groupPanel.addControl(_selector);
  10341. this.selectors.push(_selector);
  10342. button.isChecked = checked;
  10343. if (this.groupPanel.parent && this.groupPanel.parent.parent) {
  10344. button.color = this.groupPanel.parent.parent.buttonColor;
  10345. button.background = this.groupPanel.parent.parent.buttonBackground;
  10346. }
  10347. };
  10348. /** @hidden */
  10349. CheckboxGroup.prototype._setSelectorLabel = function (selectorNb, label) {
  10350. this.selectors[selectorNb].children[1].text = label;
  10351. };
  10352. /** @hidden */
  10353. CheckboxGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
  10354. this.selectors[selectorNb].children[1].color = color;
  10355. };
  10356. /** @hidden */
  10357. CheckboxGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
  10358. this.selectors[selectorNb].children[0].color = color;
  10359. };
  10360. /** @hidden */
  10361. CheckboxGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
  10362. this.selectors[selectorNb].children[0].background = color;
  10363. };
  10364. return CheckboxGroup;
  10365. }(SelectorGroup));
  10366. /** Class used to create a RadioGroup
  10367. * which contains groups of radio buttons
  10368. */
  10369. var RadioGroup = /** @class */ (function (_super) {
  10370. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(RadioGroup, _super);
  10371. function RadioGroup() {
  10372. var _this = _super !== null && _super.apply(this, arguments) || this;
  10373. _this._selectNb = 0;
  10374. return _this;
  10375. }
  10376. /** Adds a radio button as a control
  10377. * @param label is the label for the selector
  10378. * @param func is the function called when the Selector is checked
  10379. * @param checked is true when Selector is checked
  10380. */
  10381. RadioGroup.prototype.addRadio = function (label, func, checked) {
  10382. if (func === void 0) { func = function (n) { }; }
  10383. if (checked === void 0) { checked = false; }
  10384. var nb = this._selectNb++;
  10385. var button = new _radioButton__WEBPACK_IMPORTED_MODULE_6__["RadioButton"]();
  10386. button.name = label;
  10387. button.width = "20px";
  10388. button.height = "20px";
  10389. button.color = "#364249";
  10390. button.background = "#CCCCCC";
  10391. button.group = this.name;
  10392. button.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10393. button.onIsCheckedChangedObservable.add(function (state) {
  10394. if (state) {
  10395. func(nb);
  10396. }
  10397. });
  10398. var _selector = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].AddHeader(button, label, "200px", { isHorizontal: true, controlFirst: true });
  10399. _selector.height = "30px";
  10400. _selector.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10401. _selector.left = "4px";
  10402. this.groupPanel.addControl(_selector);
  10403. this.selectors.push(_selector);
  10404. button.isChecked = checked;
  10405. if (this.groupPanel.parent && this.groupPanel.parent.parent) {
  10406. button.color = this.groupPanel.parent.parent.buttonColor;
  10407. button.background = this.groupPanel.parent.parent.buttonBackground;
  10408. }
  10409. };
  10410. /** @hidden */
  10411. RadioGroup.prototype._setSelectorLabel = function (selectorNb, label) {
  10412. this.selectors[selectorNb].children[1].text = label;
  10413. };
  10414. /** @hidden */
  10415. RadioGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
  10416. this.selectors[selectorNb].children[1].color = color;
  10417. };
  10418. /** @hidden */
  10419. RadioGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
  10420. this.selectors[selectorNb].children[0].color = color;
  10421. };
  10422. /** @hidden */
  10423. RadioGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
  10424. this.selectors[selectorNb].children[0].background = color;
  10425. };
  10426. return RadioGroup;
  10427. }(SelectorGroup));
  10428. /** Class used to create a SliderGroup
  10429. * which contains groups of slider buttons
  10430. */
  10431. var SliderGroup = /** @class */ (function (_super) {
  10432. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SliderGroup, _super);
  10433. function SliderGroup() {
  10434. return _super !== null && _super.apply(this, arguments) || this;
  10435. }
  10436. /**
  10437. * Adds a slider to the SelectorGroup
  10438. * @param label is the label for the SliderBar
  10439. * @param func is the function called when the Slider moves
  10440. * @param unit is a string describing the units used, eg degrees or metres
  10441. * @param min is the minimum value for the Slider
  10442. * @param max is the maximum value for the Slider
  10443. * @param value is the start value for the Slider between min and max
  10444. * @param onValueChange is the function used to format the value displayed, eg radians to degrees
  10445. */
  10446. SliderGroup.prototype.addSlider = function (label, func, unit, min, max, value, onValueChange) {
  10447. if (func === void 0) { func = function (v) { }; }
  10448. if (unit === void 0) { unit = "Units"; }
  10449. if (min === void 0) { min = 0; }
  10450. if (max === void 0) { max = 0; }
  10451. if (value === void 0) { value = 0; }
  10452. if (onValueChange === void 0) { onValueChange = function (v) { return v | 0; }; }
  10453. var button = new _sliders_slider__WEBPACK_IMPORTED_MODULE_7__["Slider"]();
  10454. button.name = unit;
  10455. button.value = value;
  10456. button.minimum = min;
  10457. button.maximum = max;
  10458. button.width = 0.9;
  10459. button.height = "20px";
  10460. button.color = "#364249";
  10461. button.background = "#CCCCCC";
  10462. button.borderColor = "black";
  10463. button.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10464. button.left = "4px";
  10465. button.paddingBottom = "4px";
  10466. button.onValueChangedObservable.add(function (value) {
  10467. button.parent.children[0].text = button.parent.children[0].name + ": " + onValueChange(value) + " " + button.name;
  10468. func(value);
  10469. });
  10470. var _selector = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].AddHeader(button, label + ": " + onValueChange(value) + " " + unit, "30px", { isHorizontal: false, controlFirst: false });
  10471. _selector.height = "60px";
  10472. _selector.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10473. _selector.left = "4px";
  10474. _selector.children[0].name = label;
  10475. this.groupPanel.addControl(_selector);
  10476. this.selectors.push(_selector);
  10477. if (this.groupPanel.parent && this.groupPanel.parent.parent) {
  10478. button.color = this.groupPanel.parent.parent.buttonColor;
  10479. button.background = this.groupPanel.parent.parent.buttonBackground;
  10480. }
  10481. };
  10482. /** @hidden */
  10483. SliderGroup.prototype._setSelectorLabel = function (selectorNb, label) {
  10484. this.selectors[selectorNb].children[0].name = label;
  10485. this.selectors[selectorNb].children[0].text = label + ": " + this.selectors[selectorNb].children[1].value + " " + this.selectors[selectorNb].children[1].name;
  10486. };
  10487. /** @hidden */
  10488. SliderGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
  10489. this.selectors[selectorNb].children[0].color = color;
  10490. };
  10491. /** @hidden */
  10492. SliderGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
  10493. this.selectors[selectorNb].children[1].color = color;
  10494. };
  10495. /** @hidden */
  10496. SliderGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
  10497. this.selectors[selectorNb].children[1].background = color;
  10498. };
  10499. return SliderGroup;
  10500. }(SelectorGroup));
  10501. /** Class used to hold the controls for the checkboxes, radio buttons and sliders
  10502. * @see https://doc.babylonjs.com/how_to/selector
  10503. */
  10504. var SelectionPanel = /** @class */ (function (_super) {
  10505. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SelectionPanel, _super);
  10506. /**
  10507. * Creates a new SelectionPanel
  10508. * @param name of SelectionPanel
  10509. * @param groups is an array of SelectionGroups
  10510. */
  10511. function SelectionPanel(
  10512. /** name of SelectionPanel */
  10513. name,
  10514. /** an array of SelectionGroups */
  10515. groups) {
  10516. if (groups === void 0) { groups = []; }
  10517. var _this = _super.call(this, name) || this;
  10518. _this.name = name;
  10519. _this.groups = groups;
  10520. _this._buttonColor = "#364249";
  10521. _this._buttonBackground = "#CCCCCC";
  10522. _this._headerColor = "black";
  10523. _this._barColor = "white";
  10524. _this._barHeight = "2px";
  10525. _this._spacerHeight = "20px";
  10526. _this._bars = new Array();
  10527. _this._groups = groups;
  10528. _this.thickness = 2;
  10529. _this._panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]();
  10530. _this._panel.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  10531. _this._panel.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10532. _this._panel.top = 5;
  10533. _this._panel.left = 5;
  10534. _this._panel.width = 0.95;
  10535. if (groups.length > 0) {
  10536. for (var i = 0; i < groups.length - 1; i++) {
  10537. _this._panel.addControl(groups[i].groupPanel);
  10538. _this._addSpacer();
  10539. }
  10540. _this._panel.addControl(groups[groups.length - 1].groupPanel);
  10541. }
  10542. _this.addControl(_this._panel);
  10543. return _this;
  10544. }
  10545. SelectionPanel.prototype._getTypeName = function () {
  10546. return "SelectionPanel";
  10547. };
  10548. Object.defineProperty(SelectionPanel.prototype, "panel", {
  10549. /** Gets the (stack) panel of the SelectionPanel */
  10550. get: function () {
  10551. return this._panel;
  10552. },
  10553. enumerable: false,
  10554. configurable: true
  10555. });
  10556. Object.defineProperty(SelectionPanel.prototype, "headerColor", {
  10557. /** Gets or sets the headerColor */
  10558. get: function () {
  10559. return this._headerColor;
  10560. },
  10561. set: function (color) {
  10562. if (this._headerColor === color) {
  10563. return;
  10564. }
  10565. this._headerColor = color;
  10566. this._setHeaderColor();
  10567. },
  10568. enumerable: false,
  10569. configurable: true
  10570. });
  10571. SelectionPanel.prototype._setHeaderColor = function () {
  10572. for (var i = 0; i < this._groups.length; i++) {
  10573. this._groups[i].groupPanel.children[0].color = this._headerColor;
  10574. }
  10575. };
  10576. Object.defineProperty(SelectionPanel.prototype, "buttonColor", {
  10577. /** Gets or sets the button color */
  10578. get: function () {
  10579. return this._buttonColor;
  10580. },
  10581. set: function (color) {
  10582. if (this._buttonColor === color) {
  10583. return;
  10584. }
  10585. this._buttonColor = color;
  10586. this._setbuttonColor();
  10587. },
  10588. enumerable: false,
  10589. configurable: true
  10590. });
  10591. SelectionPanel.prototype._setbuttonColor = function () {
  10592. for (var i = 0; i < this._groups.length; i++) {
  10593. for (var j = 0; j < this._groups[i].selectors.length; j++) {
  10594. this._groups[i]._setSelectorButtonColor(j, this._buttonColor);
  10595. }
  10596. }
  10597. };
  10598. Object.defineProperty(SelectionPanel.prototype, "labelColor", {
  10599. /** Gets or sets the label color */
  10600. get: function () {
  10601. return this._labelColor;
  10602. },
  10603. set: function (color) {
  10604. if (this._labelColor === color) {
  10605. return;
  10606. }
  10607. this._labelColor = color;
  10608. this._setLabelColor();
  10609. },
  10610. enumerable: false,
  10611. configurable: true
  10612. });
  10613. SelectionPanel.prototype._setLabelColor = function () {
  10614. for (var i = 0; i < this._groups.length; i++) {
  10615. for (var j = 0; j < this._groups[i].selectors.length; j++) {
  10616. this._groups[i]._setSelectorLabelColor(j, this._labelColor);
  10617. }
  10618. }
  10619. };
  10620. Object.defineProperty(SelectionPanel.prototype, "buttonBackground", {
  10621. /** Gets or sets the button background */
  10622. get: function () {
  10623. return this._buttonBackground;
  10624. },
  10625. set: function (color) {
  10626. if (this._buttonBackground === color) {
  10627. return;
  10628. }
  10629. this._buttonBackground = color;
  10630. this._setButtonBackground();
  10631. },
  10632. enumerable: false,
  10633. configurable: true
  10634. });
  10635. SelectionPanel.prototype._setButtonBackground = function () {
  10636. for (var i = 0; i < this._groups.length; i++) {
  10637. for (var j = 0; j < this._groups[i].selectors.length; j++) {
  10638. this._groups[i]._setSelectorButtonBackground(j, this._buttonBackground);
  10639. }
  10640. }
  10641. };
  10642. Object.defineProperty(SelectionPanel.prototype, "barColor", {
  10643. /** Gets or sets the color of separator bar */
  10644. get: function () {
  10645. return this._barColor;
  10646. },
  10647. set: function (color) {
  10648. if (this._barColor === color) {
  10649. return;
  10650. }
  10651. this._barColor = color;
  10652. this._setBarColor();
  10653. },
  10654. enumerable: false,
  10655. configurable: true
  10656. });
  10657. SelectionPanel.prototype._setBarColor = function () {
  10658. for (var i = 0; i < this._bars.length; i++) {
  10659. this._bars[i].children[0].background = this._barColor;
  10660. }
  10661. };
  10662. Object.defineProperty(SelectionPanel.prototype, "barHeight", {
  10663. /** Gets or sets the height of separator bar */
  10664. get: function () {
  10665. return this._barHeight;
  10666. },
  10667. set: function (value) {
  10668. if (this._barHeight === value) {
  10669. return;
  10670. }
  10671. this._barHeight = value;
  10672. this._setBarHeight();
  10673. },
  10674. enumerable: false,
  10675. configurable: true
  10676. });
  10677. SelectionPanel.prototype._setBarHeight = function () {
  10678. for (var i = 0; i < this._bars.length; i++) {
  10679. this._bars[i].children[0].height = this._barHeight;
  10680. }
  10681. };
  10682. Object.defineProperty(SelectionPanel.prototype, "spacerHeight", {
  10683. /** Gets or sets the height of spacers*/
  10684. get: function () {
  10685. return this._spacerHeight;
  10686. },
  10687. set: function (value) {
  10688. if (this._spacerHeight === value) {
  10689. return;
  10690. }
  10691. this._spacerHeight = value;
  10692. this._setSpacerHeight();
  10693. },
  10694. enumerable: false,
  10695. configurable: true
  10696. });
  10697. SelectionPanel.prototype._setSpacerHeight = function () {
  10698. for (var i = 0; i < this._bars.length; i++) {
  10699. this._bars[i].height = this._spacerHeight;
  10700. }
  10701. };
  10702. /** Adds a bar between groups */
  10703. SelectionPanel.prototype._addSpacer = function () {
  10704. var separator = new _container__WEBPACK_IMPORTED_MODULE_8__["Container"]();
  10705. separator.width = 1;
  10706. separator.height = this._spacerHeight;
  10707. separator.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10708. var bar = new _rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]();
  10709. bar.width = 1;
  10710. bar.height = this._barHeight;
  10711. bar.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10712. bar.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER;
  10713. bar.background = this._barColor;
  10714. bar.color = "transparent";
  10715. separator.addControl(bar);
  10716. this._panel.addControl(separator);
  10717. this._bars.push(separator);
  10718. };
  10719. /** Add a group to the selection panel
  10720. * @param group is the selector group to add
  10721. */
  10722. SelectionPanel.prototype.addGroup = function (group) {
  10723. if (this._groups.length > 0) {
  10724. this._addSpacer();
  10725. }
  10726. this._panel.addControl(group.groupPanel);
  10727. this._groups.push(group);
  10728. group.groupPanel.children[0].color = this._headerColor;
  10729. for (var j = 0; j < group.selectors.length; j++) {
  10730. group._setSelectorButtonColor(j, this._buttonColor);
  10731. group._setSelectorButtonBackground(j, this._buttonBackground);
  10732. }
  10733. };
  10734. /** Remove the group from the given position
  10735. * @param groupNb is the position of the group in the list
  10736. */
  10737. SelectionPanel.prototype.removeGroup = function (groupNb) {
  10738. if (groupNb < 0 || groupNb >= this._groups.length) {
  10739. return;
  10740. }
  10741. var group = this._groups[groupNb];
  10742. this._panel.removeControl(group.groupPanel);
  10743. this._groups.splice(groupNb, 1);
  10744. if (groupNb < this._bars.length) {
  10745. this._panel.removeControl(this._bars[groupNb]);
  10746. this._bars.splice(groupNb, 1);
  10747. }
  10748. };
  10749. /** Change a group header label
  10750. * @param label is the new group header label
  10751. * @param groupNb is the number of the group to relabel
  10752. * */
  10753. SelectionPanel.prototype.setHeaderName = function (label, groupNb) {
  10754. if (groupNb < 0 || groupNb >= this._groups.length) {
  10755. return;
  10756. }
  10757. var group = this._groups[groupNb];
  10758. group.groupPanel.children[0].text = label;
  10759. };
  10760. /** Change selector label to the one given
  10761. * @param label is the new selector label
  10762. * @param groupNb is the number of the groupcontaining the selector
  10763. * @param selectorNb is the number of the selector within a group to relabel
  10764. * */
  10765. SelectionPanel.prototype.relabel = function (label, groupNb, selectorNb) {
  10766. if (groupNb < 0 || groupNb >= this._groups.length) {
  10767. return;
  10768. }
  10769. var group = this._groups[groupNb];
  10770. if (selectorNb < 0 || selectorNb >= group.selectors.length) {
  10771. return;
  10772. }
  10773. group._setSelectorLabel(selectorNb, label);
  10774. };
  10775. /** For a given group position remove the selector at the given position
  10776. * @param groupNb is the number of the group to remove the selector from
  10777. * @param selectorNb is the number of the selector within the group
  10778. */
  10779. SelectionPanel.prototype.removeFromGroupSelector = function (groupNb, selectorNb) {
  10780. if (groupNb < 0 || groupNb >= this._groups.length) {
  10781. return;
  10782. }
  10783. var group = this._groups[groupNb];
  10784. if (selectorNb < 0 || selectorNb >= group.selectors.length) {
  10785. return;
  10786. }
  10787. group.removeSelector(selectorNb);
  10788. };
  10789. /** For a given group position of correct type add a checkbox button
  10790. * @param groupNb is the number of the group to remove the selector from
  10791. * @param label is the label for the selector
  10792. * @param func is the function called when the Selector is checked
  10793. * @param checked is true when Selector is checked
  10794. */
  10795. SelectionPanel.prototype.addToGroupCheckbox = function (groupNb, label, func, checked) {
  10796. if (func === void 0) { func = function () { }; }
  10797. if (checked === void 0) { checked = false; }
  10798. if (groupNb < 0 || groupNb >= this._groups.length) {
  10799. return;
  10800. }
  10801. var group = this._groups[groupNb];
  10802. group.addCheckbox(label, func, checked);
  10803. };
  10804. /** For a given group position of correct type add a radio button
  10805. * @param groupNb is the number of the group to remove the selector from
  10806. * @param label is the label for the selector
  10807. * @param func is the function called when the Selector is checked
  10808. * @param checked is true when Selector is checked
  10809. */
  10810. SelectionPanel.prototype.addToGroupRadio = function (groupNb, label, func, checked) {
  10811. if (func === void 0) { func = function () { }; }
  10812. if (checked === void 0) { checked = false; }
  10813. if (groupNb < 0 || groupNb >= this._groups.length) {
  10814. return;
  10815. }
  10816. var group = this._groups[groupNb];
  10817. group.addRadio(label, func, checked);
  10818. };
  10819. /**
  10820. * For a given slider group add a slider
  10821. * @param groupNb is the number of the group to add the slider to
  10822. * @param label is the label for the Slider
  10823. * @param func is the function called when the Slider moves
  10824. * @param unit is a string describing the units used, eg degrees or metres
  10825. * @param min is the minimum value for the Slider
  10826. * @param max is the maximum value for the Slider
  10827. * @param value is the start value for the Slider between min and max
  10828. * @param onVal is the function used to format the value displayed, eg radians to degrees
  10829. */
  10830. SelectionPanel.prototype.addToGroupSlider = function (groupNb, label, func, unit, min, max, value, onVal) {
  10831. if (func === void 0) { func = function () { }; }
  10832. if (unit === void 0) { unit = "Units"; }
  10833. if (min === void 0) { min = 0; }
  10834. if (max === void 0) { max = 0; }
  10835. if (value === void 0) { value = 0; }
  10836. if (onVal === void 0) { onVal = function (v) { return v | 0; }; }
  10837. if (groupNb < 0 || groupNb >= this._groups.length) {
  10838. return;
  10839. }
  10840. var group = this._groups[groupNb];
  10841. group.addSlider(label, func, unit, min, max, value, onVal);
  10842. };
  10843. return SelectionPanel;
  10844. }(_rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]));
  10845. /***/ }),
  10846. /***/ "./2D/controls/sliders/baseSlider.ts":
  10847. /*!*******************************************!*\
  10848. !*** ./2D/controls/sliders/baseSlider.ts ***!
  10849. \*******************************************/
  10850. /*! exports provided: BaseSlider */
  10851. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  10852. "use strict";
  10853. __webpack_require__.r(__webpack_exports__);
  10854. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return BaseSlider; });
  10855. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  10856. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  10857. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  10858. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
  10859. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
  10860. /**
  10861. * Class used to create slider controls
  10862. */
  10863. var BaseSlider = /** @class */ (function (_super) {
  10864. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(BaseSlider, _super);
  10865. /**
  10866. * Creates a new BaseSlider
  10867. * @param name defines the control name
  10868. */
  10869. function BaseSlider(name) {
  10870. var _this = _super.call(this, name) || this;
  10871. _this.name = name;
  10872. _this._thumbWidth = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](20, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL, false);
  10873. _this._minimum = 0;
  10874. _this._maximum = 100;
  10875. _this._value = 50;
  10876. _this._isVertical = false;
  10877. _this._barOffset = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](5, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL, false);
  10878. _this._isThumbClamped = false;
  10879. _this._displayThumb = true;
  10880. _this._step = 0;
  10881. _this._lastPointerDownID = -1;
  10882. // Shared rendering info
  10883. _this._effectiveBarOffset = 0;
  10884. /** Observable raised when the sldier value changes */
  10885. _this.onValueChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  10886. // Events
  10887. _this._pointerIsDown = false;
  10888. _this.isPointerBlocker = true;
  10889. return _this;
  10890. }
  10891. Object.defineProperty(BaseSlider.prototype, "displayThumb", {
  10892. /** Gets or sets a boolean indicating if the thumb must be rendered */
  10893. get: function () {
  10894. return this._displayThumb;
  10895. },
  10896. set: function (value) {
  10897. if (this._displayThumb === value) {
  10898. return;
  10899. }
  10900. this._displayThumb = value;
  10901. this._markAsDirty();
  10902. },
  10903. enumerable: false,
  10904. configurable: true
  10905. });
  10906. Object.defineProperty(BaseSlider.prototype, "step", {
  10907. /** Gets or sets a step to apply to values (0 by default) */
  10908. get: function () {
  10909. return this._step;
  10910. },
  10911. set: function (value) {
  10912. if (this._step === value) {
  10913. return;
  10914. }
  10915. this._step = value;
  10916. this._markAsDirty();
  10917. },
  10918. enumerable: false,
  10919. configurable: true
  10920. });
  10921. Object.defineProperty(BaseSlider.prototype, "barOffset", {
  10922. /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
  10923. get: function () {
  10924. return this._barOffset.toString(this._host);
  10925. },
  10926. set: function (value) {
  10927. if (this._barOffset.toString(this._host) === value) {
  10928. return;
  10929. }
  10930. if (this._barOffset.fromString(value)) {
  10931. this._markAsDirty();
  10932. }
  10933. },
  10934. enumerable: false,
  10935. configurable: true
  10936. });
  10937. Object.defineProperty(BaseSlider.prototype, "barOffsetInPixels", {
  10938. /** Gets main bar offset in pixels*/
  10939. get: function () {
  10940. return this._barOffset.getValueInPixel(this._host, this._cachedParentMeasure.width);
  10941. },
  10942. enumerable: false,
  10943. configurable: true
  10944. });
  10945. Object.defineProperty(BaseSlider.prototype, "thumbWidth", {
  10946. /** Gets or sets thumb width */
  10947. get: function () {
  10948. return this._thumbWidth.toString(this._host);
  10949. },
  10950. set: function (value) {
  10951. if (this._thumbWidth.toString(this._host) === value) {
  10952. return;
  10953. }
  10954. if (this._thumbWidth.fromString(value)) {
  10955. this._markAsDirty();
  10956. }
  10957. },
  10958. enumerable: false,
  10959. configurable: true
  10960. });
  10961. Object.defineProperty(BaseSlider.prototype, "thumbWidthInPixels", {
  10962. /** Gets thumb width in pixels */
  10963. get: function () {
  10964. return this._thumbWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
  10965. },
  10966. enumerable: false,
  10967. configurable: true
  10968. });
  10969. Object.defineProperty(BaseSlider.prototype, "minimum", {
  10970. /** Gets or sets minimum value */
  10971. get: function () {
  10972. return this._minimum;
  10973. },
  10974. set: function (value) {
  10975. if (this._minimum === value) {
  10976. return;
  10977. }
  10978. this._minimum = value;
  10979. this._markAsDirty();
  10980. this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
  10981. },
  10982. enumerable: false,
  10983. configurable: true
  10984. });
  10985. Object.defineProperty(BaseSlider.prototype, "maximum", {
  10986. /** Gets or sets maximum value */
  10987. get: function () {
  10988. return this._maximum;
  10989. },
  10990. set: function (value) {
  10991. if (this._maximum === value) {
  10992. return;
  10993. }
  10994. this._maximum = value;
  10995. this._markAsDirty();
  10996. this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
  10997. },
  10998. enumerable: false,
  10999. configurable: true
  11000. });
  11001. Object.defineProperty(BaseSlider.prototype, "value", {
  11002. /** Gets or sets current value */
  11003. get: function () {
  11004. return this._value;
  11005. },
  11006. set: function (value) {
  11007. value = Math.max(Math.min(value, this._maximum), this._minimum);
  11008. if (this._value === value) {
  11009. return;
  11010. }
  11011. this._value = value;
  11012. this._markAsDirty();
  11013. this.onValueChangedObservable.notifyObservers(this._value);
  11014. },
  11015. enumerable: false,
  11016. configurable: true
  11017. });
  11018. Object.defineProperty(BaseSlider.prototype, "isVertical", {
  11019. /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */
  11020. get: function () {
  11021. return this._isVertical;
  11022. },
  11023. set: function (value) {
  11024. if (this._isVertical === value) {
  11025. return;
  11026. }
  11027. this._isVertical = value;
  11028. this._markAsDirty();
  11029. },
  11030. enumerable: false,
  11031. configurable: true
  11032. });
  11033. Object.defineProperty(BaseSlider.prototype, "isThumbClamped", {
  11034. /** Gets or sets a value indicating if the thumb can go over main bar extends */
  11035. get: function () {
  11036. return this._isThumbClamped;
  11037. },
  11038. set: function (value) {
  11039. if (this._isThumbClamped === value) {
  11040. return;
  11041. }
  11042. this._isThumbClamped = value;
  11043. this._markAsDirty();
  11044. },
  11045. enumerable: false,
  11046. configurable: true
  11047. });
  11048. BaseSlider.prototype._getTypeName = function () {
  11049. return "BaseSlider";
  11050. };
  11051. BaseSlider.prototype._getThumbPosition = function () {
  11052. if (this.isVertical) {
  11053. return ((this.maximum - this.value) / (this.maximum - this.minimum)) * this._backgroundBoxLength;
  11054. }
  11055. return ((this.value - this.minimum) / (this.maximum - this.minimum)) * this._backgroundBoxLength;
  11056. };
  11057. BaseSlider.prototype._getThumbThickness = function (type) {
  11058. var thumbThickness = 0;
  11059. switch (type) {
  11060. case "circle":
  11061. if (this._thumbWidth.isPixel) {
  11062. thumbThickness = Math.max(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);
  11063. }
  11064. else {
  11065. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  11066. }
  11067. break;
  11068. case "rectangle":
  11069. if (this._thumbWidth.isPixel) {
  11070. thumbThickness = Math.min(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);
  11071. }
  11072. else {
  11073. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  11074. }
  11075. }
  11076. return thumbThickness;
  11077. };
  11078. BaseSlider.prototype._prepareRenderingData = function (type) {
  11079. // Main bar
  11080. this._effectiveBarOffset = 0;
  11081. this._renderLeft = this._currentMeasure.left;
  11082. this._renderTop = this._currentMeasure.top;
  11083. this._renderWidth = this._currentMeasure.width;
  11084. this._renderHeight = this._currentMeasure.height;
  11085. this._backgroundBoxLength = Math.max(this._currentMeasure.width, this._currentMeasure.height);
  11086. this._backgroundBoxThickness = Math.min(this._currentMeasure.width, this._currentMeasure.height);
  11087. this._effectiveThumbThickness = this._getThumbThickness(type);
  11088. if (this.displayThumb) {
  11089. this._backgroundBoxLength -= this._effectiveThumbThickness;
  11090. }
  11091. //throw error when height is less than width for vertical slider
  11092. if ((this.isVertical && this._currentMeasure.height < this._currentMeasure.width)) {
  11093. console.error("Height should be greater than width");
  11094. return;
  11095. }
  11096. if (this._barOffset.isPixel) {
  11097. this._effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), this._backgroundBoxThickness);
  11098. }
  11099. else {
  11100. this._effectiveBarOffset = this._backgroundBoxThickness * this._barOffset.getValue(this._host);
  11101. }
  11102. this._backgroundBoxThickness -= (this._effectiveBarOffset * 2);
  11103. if (this.isVertical) {
  11104. this._renderLeft += this._effectiveBarOffset;
  11105. if (!this.isThumbClamped && this.displayThumb) {
  11106. this._renderTop += (this._effectiveThumbThickness / 2);
  11107. }
  11108. this._renderHeight = this._backgroundBoxLength;
  11109. this._renderWidth = this._backgroundBoxThickness;
  11110. }
  11111. else {
  11112. this._renderTop += this._effectiveBarOffset;
  11113. if (!this.isThumbClamped && this.displayThumb) {
  11114. this._renderLeft += (this._effectiveThumbThickness / 2);
  11115. }
  11116. this._renderHeight = this._backgroundBoxThickness;
  11117. this._renderWidth = this._backgroundBoxLength;
  11118. }
  11119. };
  11120. /** @hidden */
  11121. BaseSlider.prototype._updateValueFromPointer = function (x, y) {
  11122. if (this.rotation != 0) {
  11123. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  11124. x = this._transformedPosition.x;
  11125. y = this._transformedPosition.y;
  11126. }
  11127. var value;
  11128. if (this._isVertical) {
  11129. value = this._minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this._maximum - this._minimum);
  11130. }
  11131. else {
  11132. value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
  11133. }
  11134. var mult = (1 / this._step) | 0;
  11135. this.value = this._step ? ((value * mult) | 0) / mult : value;
  11136. };
  11137. BaseSlider.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  11138. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
  11139. return false;
  11140. }
  11141. this._pointerIsDown = true;
  11142. this._updateValueFromPointer(coordinates.x, coordinates.y);
  11143. this._host._capturingControl[pointerId] = this;
  11144. this._lastPointerDownID = pointerId;
  11145. return true;
  11146. };
  11147. BaseSlider.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
  11148. // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
  11149. if (pointerId != this._lastPointerDownID) {
  11150. return;
  11151. }
  11152. if (this._pointerIsDown) {
  11153. this._updateValueFromPointer(coordinates.x, coordinates.y);
  11154. }
  11155. _super.prototype._onPointerMove.call(this, target, coordinates, pointerId, pi);
  11156. };
  11157. BaseSlider.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  11158. this._pointerIsDown = false;
  11159. delete this._host._capturingControl[pointerId];
  11160. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick);
  11161. };
  11162. BaseSlider.prototype._onCanvasBlur = function () {
  11163. this._forcePointerUp();
  11164. _super.prototype._onCanvasBlur.call(this);
  11165. };
  11166. return BaseSlider;
  11167. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  11168. /***/ }),
  11169. /***/ "./2D/controls/sliders/imageBasedSlider.ts":
  11170. /*!*************************************************!*\
  11171. !*** ./2D/controls/sliders/imageBasedSlider.ts ***!
  11172. \*************************************************/
  11173. /*! exports provided: ImageBasedSlider */
  11174. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11175. "use strict";
  11176. __webpack_require__.r(__webpack_exports__);
  11177. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return ImageBasedSlider; });
  11178. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11179. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  11180. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  11181. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  11182. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__);
  11183. /**
  11184. * Class used to create slider controls based on images
  11185. */
  11186. var ImageBasedSlider = /** @class */ (function (_super) {
  11187. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ImageBasedSlider, _super);
  11188. /**
  11189. * Creates a new ImageBasedSlider
  11190. * @param name defines the control name
  11191. */
  11192. function ImageBasedSlider(name) {
  11193. var _this = _super.call(this, name) || this;
  11194. _this.name = name;
  11195. _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  11196. return _this;
  11197. }
  11198. Object.defineProperty(ImageBasedSlider.prototype, "displayThumb", {
  11199. get: function () {
  11200. return this._displayThumb && this.thumbImage != null;
  11201. },
  11202. set: function (value) {
  11203. if (this._displayThumb === value) {
  11204. return;
  11205. }
  11206. this._displayThumb = value;
  11207. this._markAsDirty();
  11208. },
  11209. enumerable: false,
  11210. configurable: true
  11211. });
  11212. Object.defineProperty(ImageBasedSlider.prototype, "backgroundImage", {
  11213. /**
  11214. * Gets or sets the image used to render the background
  11215. */
  11216. get: function () {
  11217. return this._backgroundImage;
  11218. },
  11219. set: function (value) {
  11220. var _this = this;
  11221. if (this._backgroundImage === value) {
  11222. return;
  11223. }
  11224. this._backgroundImage = value;
  11225. if (value && !value.isLoaded) {
  11226. value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
  11227. }
  11228. this._markAsDirty();
  11229. },
  11230. enumerable: false,
  11231. configurable: true
  11232. });
  11233. Object.defineProperty(ImageBasedSlider.prototype, "valueBarImage", {
  11234. /**
  11235. * Gets or sets the image used to render the value bar
  11236. */
  11237. get: function () {
  11238. return this._valueBarImage;
  11239. },
  11240. set: function (value) {
  11241. var _this = this;
  11242. if (this._valueBarImage === value) {
  11243. return;
  11244. }
  11245. this._valueBarImage = value;
  11246. if (value && !value.isLoaded) {
  11247. value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
  11248. }
  11249. this._markAsDirty();
  11250. },
  11251. enumerable: false,
  11252. configurable: true
  11253. });
  11254. Object.defineProperty(ImageBasedSlider.prototype, "thumbImage", {
  11255. /**
  11256. * Gets or sets the image used to render the thumb
  11257. */
  11258. get: function () {
  11259. return this._thumbImage;
  11260. },
  11261. set: function (value) {
  11262. var _this = this;
  11263. if (this._thumbImage === value) {
  11264. return;
  11265. }
  11266. this._thumbImage = value;
  11267. if (value && !value.isLoaded) {
  11268. value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
  11269. }
  11270. this._markAsDirty();
  11271. },
  11272. enumerable: false,
  11273. configurable: true
  11274. });
  11275. ImageBasedSlider.prototype._getTypeName = function () {
  11276. return "ImageBasedSlider";
  11277. };
  11278. ImageBasedSlider.prototype._draw = function (context, invalidatedRectangle) {
  11279. context.save();
  11280. this._applyStates(context);
  11281. this._prepareRenderingData("rectangle");
  11282. var thumbPosition = this._getThumbPosition();
  11283. var left = this._renderLeft;
  11284. var top = this._renderTop;
  11285. var width = this._renderWidth;
  11286. var height = this._renderHeight;
  11287. // Background
  11288. if (this._backgroundImage) {
  11289. this._tempMeasure.copyFromFloats(left, top, width, height);
  11290. if (this.isThumbClamped && this.displayThumb) {
  11291. if (this.isVertical) {
  11292. this._tempMeasure.height += this._effectiveThumbThickness;
  11293. }
  11294. else {
  11295. this._tempMeasure.width += this._effectiveThumbThickness;
  11296. }
  11297. }
  11298. this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);
  11299. this._backgroundImage._draw(context);
  11300. }
  11301. // Bar
  11302. if (this._valueBarImage) {
  11303. if (this.isVertical) {
  11304. if (this.isThumbClamped && this.displayThumb) {
  11305. this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);
  11306. }
  11307. else {
  11308. this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
  11309. }
  11310. }
  11311. else {
  11312. if (this.isThumbClamped && this.displayThumb) {
  11313. this._tempMeasure.copyFromFloats(left, top, thumbPosition + this._effectiveThumbThickness / 2, height);
  11314. }
  11315. else {
  11316. this._tempMeasure.copyFromFloats(left, top, thumbPosition, height);
  11317. }
  11318. }
  11319. this._valueBarImage._currentMeasure.copyFrom(this._tempMeasure);
  11320. this._valueBarImage._draw(context);
  11321. }
  11322. // Thumb
  11323. if (this.displayThumb) {
  11324. if (this.isVertical) {
  11325. this._tempMeasure.copyFromFloats(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
  11326. }
  11327. else {
  11328. this._tempMeasure.copyFromFloats(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
  11329. }
  11330. this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
  11331. this._thumbImage._draw(context);
  11332. }
  11333. context.restore();
  11334. };
  11335. return ImageBasedSlider;
  11336. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  11337. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__["_TypeStore"].RegisteredTypes["BABYLON.GUI.ImageBasedSlider"] = ImageBasedSlider;
  11338. /***/ }),
  11339. /***/ "./2D/controls/sliders/imageScrollBar.ts":
  11340. /*!***********************************************!*\
  11341. !*** ./2D/controls/sliders/imageScrollBar.ts ***!
  11342. \***********************************************/
  11343. /*! exports provided: ImageScrollBar */
  11344. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11345. "use strict";
  11346. __webpack_require__.r(__webpack_exports__);
  11347. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return ImageScrollBar; });
  11348. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11349. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  11350. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  11351. /**
  11352. * Class used to create slider controls
  11353. */
  11354. var ImageScrollBar = /** @class */ (function (_super) {
  11355. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ImageScrollBar, _super);
  11356. /**
  11357. * Creates a new ImageScrollBar
  11358. * @param name defines the control name
  11359. */
  11360. function ImageScrollBar(name) {
  11361. var _this = _super.call(this, name) || this;
  11362. _this.name = name;
  11363. _this._thumbLength = 0.5;
  11364. _this._thumbHeight = 1;
  11365. _this._barImageHeight = 1;
  11366. _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  11367. /** Number of 90° rotation to apply on the images when in vertical mode */
  11368. _this.num90RotationInVerticalMode = 1;
  11369. return _this;
  11370. }
  11371. Object.defineProperty(ImageScrollBar.prototype, "backgroundImage", {
  11372. /**
  11373. * Gets or sets the image used to render the background for horizontal bar
  11374. */
  11375. get: function () {
  11376. return this._backgroundBaseImage;
  11377. },
  11378. set: function (value) {
  11379. var _this = this;
  11380. if (this._backgroundBaseImage === value) {
  11381. return;
  11382. }
  11383. this._backgroundBaseImage = value;
  11384. if (this.isVertical && this.num90RotationInVerticalMode !== 0) {
  11385. if (!value.isLoaded) {
  11386. value.onImageLoadedObservable.addOnce(function () {
  11387. var rotatedValue = value._rotate90(_this.num90RotationInVerticalMode, true);
  11388. _this._backgroundImage = rotatedValue;
  11389. if (!rotatedValue.isLoaded) {
  11390. rotatedValue.onImageLoadedObservable.addOnce(function () {
  11391. _this._markAsDirty();
  11392. });
  11393. }
  11394. _this._markAsDirty();
  11395. });
  11396. }
  11397. else {
  11398. this._backgroundImage = value._rotate90(this.num90RotationInVerticalMode, true);
  11399. this._markAsDirty();
  11400. }
  11401. }
  11402. else {
  11403. this._backgroundImage = value;
  11404. if (value && !value.isLoaded) {
  11405. value.onImageLoadedObservable.addOnce(function () {
  11406. _this._markAsDirty();
  11407. });
  11408. }
  11409. this._markAsDirty();
  11410. }
  11411. },
  11412. enumerable: false,
  11413. configurable: true
  11414. });
  11415. Object.defineProperty(ImageScrollBar.prototype, "thumbImage", {
  11416. /**
  11417. * Gets or sets the image used to render the thumb
  11418. */
  11419. get: function () {
  11420. return this._thumbBaseImage;
  11421. },
  11422. set: function (value) {
  11423. var _this = this;
  11424. if (this._thumbBaseImage === value) {
  11425. return;
  11426. }
  11427. this._thumbBaseImage = value;
  11428. if (this.isVertical && this.num90RotationInVerticalMode !== 0) {
  11429. if (!value.isLoaded) {
  11430. value.onImageLoadedObservable.addOnce(function () {
  11431. var rotatedValue = value._rotate90(-_this.num90RotationInVerticalMode, true);
  11432. _this._thumbImage = rotatedValue;
  11433. if (!rotatedValue.isLoaded) {
  11434. rotatedValue.onImageLoadedObservable.addOnce(function () {
  11435. _this._markAsDirty();
  11436. });
  11437. }
  11438. _this._markAsDirty();
  11439. });
  11440. }
  11441. else {
  11442. this._thumbImage = value._rotate90(-this.num90RotationInVerticalMode, true);
  11443. this._markAsDirty();
  11444. }
  11445. }
  11446. else {
  11447. this._thumbImage = value;
  11448. if (value && !value.isLoaded) {
  11449. value.onImageLoadedObservable.addOnce(function () {
  11450. _this._markAsDirty();
  11451. });
  11452. }
  11453. this._markAsDirty();
  11454. }
  11455. },
  11456. enumerable: false,
  11457. configurable: true
  11458. });
  11459. Object.defineProperty(ImageScrollBar.prototype, "thumbLength", {
  11460. /**
  11461. * Gets or sets the length of the thumb
  11462. */
  11463. get: function () {
  11464. return this._thumbLength;
  11465. },
  11466. set: function (value) {
  11467. if (this._thumbLength === value) {
  11468. return;
  11469. }
  11470. this._thumbLength = value;
  11471. this._markAsDirty();
  11472. },
  11473. enumerable: false,
  11474. configurable: true
  11475. });
  11476. Object.defineProperty(ImageScrollBar.prototype, "thumbHeight", {
  11477. /**
  11478. * Gets or sets the height of the thumb
  11479. */
  11480. get: function () {
  11481. return this._thumbHeight;
  11482. },
  11483. set: function (value) {
  11484. if (this._thumbLength === value) {
  11485. return;
  11486. }
  11487. this._thumbHeight = value;
  11488. this._markAsDirty();
  11489. },
  11490. enumerable: false,
  11491. configurable: true
  11492. });
  11493. Object.defineProperty(ImageScrollBar.prototype, "barImageHeight", {
  11494. /**
  11495. * Gets or sets the height of the bar image
  11496. */
  11497. get: function () {
  11498. return this._barImageHeight;
  11499. },
  11500. set: function (value) {
  11501. if (this._barImageHeight === value) {
  11502. return;
  11503. }
  11504. this._barImageHeight = value;
  11505. this._markAsDirty();
  11506. },
  11507. enumerable: false,
  11508. configurable: true
  11509. });
  11510. ImageScrollBar.prototype._getTypeName = function () {
  11511. return "ImageScrollBar";
  11512. };
  11513. ImageScrollBar.prototype._getThumbThickness = function () {
  11514. var thumbThickness = 0;
  11515. if (this._thumbWidth.isPixel) {
  11516. thumbThickness = this._thumbWidth.getValue(this._host);
  11517. }
  11518. else {
  11519. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  11520. }
  11521. return thumbThickness;
  11522. };
  11523. ImageScrollBar.prototype._draw = function (context) {
  11524. context.save();
  11525. this._applyStates(context);
  11526. this._prepareRenderingData("rectangle");
  11527. var thumbPosition = this._getThumbPosition();
  11528. var left = this._renderLeft;
  11529. var top = this._renderTop;
  11530. var width = this._renderWidth;
  11531. var height = this._renderHeight;
  11532. // Background
  11533. if (this._backgroundImage) {
  11534. this._tempMeasure.copyFromFloats(left, top, width, height);
  11535. if (this.isVertical) {
  11536. this._tempMeasure.copyFromFloats(left + width * (1 - this._barImageHeight) * 0.5, this._currentMeasure.top, width * this._barImageHeight, height);
  11537. this._tempMeasure.height += this._effectiveThumbThickness;
  11538. this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);
  11539. }
  11540. else {
  11541. this._tempMeasure.copyFromFloats(this._currentMeasure.left, top + height * (1 - this._barImageHeight) * 0.5, width, height * this._barImageHeight);
  11542. this._tempMeasure.width += this._effectiveThumbThickness;
  11543. this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);
  11544. }
  11545. this._backgroundImage._draw(context);
  11546. }
  11547. // Thumb
  11548. if (this.isVertical) {
  11549. this._tempMeasure.copyFromFloats(left - this._effectiveBarOffset + this._currentMeasure.width * (1 - this._thumbHeight) * 0.5, this._currentMeasure.top + thumbPosition, this._currentMeasure.width * this._thumbHeight, this._effectiveThumbThickness);
  11550. }
  11551. else {
  11552. this._tempMeasure.copyFromFloats(this._currentMeasure.left + thumbPosition, this._currentMeasure.top + this._currentMeasure.height * (1 - this._thumbHeight) * 0.5, this._effectiveThumbThickness, this._currentMeasure.height * this._thumbHeight);
  11553. }
  11554. if (this._thumbImage) {
  11555. this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
  11556. this._thumbImage._draw(context);
  11557. }
  11558. context.restore();
  11559. };
  11560. /** @hidden */
  11561. ImageScrollBar.prototype._updateValueFromPointer = function (x, y) {
  11562. if (this.rotation != 0) {
  11563. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  11564. x = this._transformedPosition.x;
  11565. y = this._transformedPosition.y;
  11566. }
  11567. if (this._first) {
  11568. this._first = false;
  11569. this._originX = x;
  11570. this._originY = y;
  11571. // Check if move is required
  11572. if (x < this._tempMeasure.left || x > this._tempMeasure.left + this._tempMeasure.width || y < this._tempMeasure.top || y > this._tempMeasure.top + this._tempMeasure.height) {
  11573. if (this.isVertical) {
  11574. this.value = this.minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this.maximum - this.minimum);
  11575. }
  11576. else {
  11577. this.value = this.minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this.maximum - this.minimum);
  11578. }
  11579. }
  11580. }
  11581. // Delta mode
  11582. var delta = 0;
  11583. if (this.isVertical) {
  11584. delta = -((y - this._originY) / (this._currentMeasure.height - this._effectiveThumbThickness));
  11585. }
  11586. else {
  11587. delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);
  11588. }
  11589. this.value += delta * (this.maximum - this.minimum);
  11590. this._originX = x;
  11591. this._originY = y;
  11592. };
  11593. ImageScrollBar.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  11594. this._first = true;
  11595. return _super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi);
  11596. };
  11597. return ImageScrollBar;
  11598. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  11599. /***/ }),
  11600. /***/ "./2D/controls/sliders/scrollBar.ts":
  11601. /*!******************************************!*\
  11602. !*** ./2D/controls/sliders/scrollBar.ts ***!
  11603. \******************************************/
  11604. /*! exports provided: ScrollBar */
  11605. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11606. "use strict";
  11607. __webpack_require__.r(__webpack_exports__);
  11608. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return ScrollBar; });
  11609. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11610. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  11611. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  11612. /**
  11613. * Class used to create slider controls
  11614. */
  11615. var ScrollBar = /** @class */ (function (_super) {
  11616. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScrollBar, _super);
  11617. /**
  11618. * Creates a new Slider
  11619. * @param name defines the control name
  11620. */
  11621. function ScrollBar(name) {
  11622. var _this = _super.call(this, name) || this;
  11623. _this.name = name;
  11624. _this._background = "black";
  11625. _this._borderColor = "white";
  11626. _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  11627. return _this;
  11628. }
  11629. Object.defineProperty(ScrollBar.prototype, "borderColor", {
  11630. /** Gets or sets border color */
  11631. get: function () {
  11632. return this._borderColor;
  11633. },
  11634. set: function (value) {
  11635. if (this._borderColor === value) {
  11636. return;
  11637. }
  11638. this._borderColor = value;
  11639. this._markAsDirty();
  11640. },
  11641. enumerable: false,
  11642. configurable: true
  11643. });
  11644. Object.defineProperty(ScrollBar.prototype, "background", {
  11645. /** Gets or sets background color */
  11646. get: function () {
  11647. return this._background;
  11648. },
  11649. set: function (value) {
  11650. if (this._background === value) {
  11651. return;
  11652. }
  11653. this._background = value;
  11654. this._markAsDirty();
  11655. },
  11656. enumerable: false,
  11657. configurable: true
  11658. });
  11659. ScrollBar.prototype._getTypeName = function () {
  11660. return "Scrollbar";
  11661. };
  11662. ScrollBar.prototype._getThumbThickness = function () {
  11663. var thumbThickness = 0;
  11664. if (this._thumbWidth.isPixel) {
  11665. thumbThickness = this._thumbWidth.getValue(this._host);
  11666. }
  11667. else {
  11668. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  11669. }
  11670. return thumbThickness;
  11671. };
  11672. ScrollBar.prototype._draw = function (context) {
  11673. context.save();
  11674. this._applyStates(context);
  11675. this._prepareRenderingData("rectangle");
  11676. var left = this._renderLeft;
  11677. var thumbPosition = this._getThumbPosition();
  11678. context.fillStyle = this._background;
  11679. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  11680. // Value bar
  11681. context.fillStyle = this.color;
  11682. // Thumb
  11683. if (this.isVertical) {
  11684. this._tempMeasure.left = left - this._effectiveBarOffset;
  11685. this._tempMeasure.top = this._currentMeasure.top + thumbPosition;
  11686. this._tempMeasure.width = this._currentMeasure.width;
  11687. this._tempMeasure.height = this._effectiveThumbThickness;
  11688. }
  11689. else {
  11690. this._tempMeasure.left = this._currentMeasure.left + thumbPosition;
  11691. this._tempMeasure.top = this._currentMeasure.top;
  11692. this._tempMeasure.width = this._effectiveThumbThickness;
  11693. this._tempMeasure.height = this._currentMeasure.height;
  11694. }
  11695. context.fillRect(this._tempMeasure.left, this._tempMeasure.top, this._tempMeasure.width, this._tempMeasure.height);
  11696. context.restore();
  11697. };
  11698. /** @hidden */
  11699. ScrollBar.prototype._updateValueFromPointer = function (x, y) {
  11700. if (this.rotation != 0) {
  11701. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  11702. x = this._transformedPosition.x;
  11703. y = this._transformedPosition.y;
  11704. }
  11705. if (this._first) {
  11706. this._first = false;
  11707. this._originX = x;
  11708. this._originY = y;
  11709. // Check if move is required
  11710. if (x < this._tempMeasure.left || x > this._tempMeasure.left + this._tempMeasure.width || y < this._tempMeasure.top || y > this._tempMeasure.top + this._tempMeasure.height) {
  11711. if (this.isVertical) {
  11712. this.value = this.minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this.maximum - this.minimum);
  11713. }
  11714. else {
  11715. this.value = this.minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this.maximum - this.minimum);
  11716. }
  11717. }
  11718. }
  11719. // Delta mode
  11720. var delta = 0;
  11721. if (this.isVertical) {
  11722. delta = -((y - this._originY) / (this._currentMeasure.height - this._effectiveThumbThickness));
  11723. }
  11724. else {
  11725. delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);
  11726. }
  11727. this.value += delta * (this.maximum - this.minimum);
  11728. this._originX = x;
  11729. this._originY = y;
  11730. };
  11731. ScrollBar.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
  11732. this._first = true;
  11733. return _super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi);
  11734. };
  11735. return ScrollBar;
  11736. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  11737. /***/ }),
  11738. /***/ "./2D/controls/sliders/slider.ts":
  11739. /*!***************************************!*\
  11740. !*** ./2D/controls/sliders/slider.ts ***!
  11741. \***************************************/
  11742. /*! exports provided: Slider */
  11743. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11744. "use strict";
  11745. __webpack_require__.r(__webpack_exports__);
  11746. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return Slider; });
  11747. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11748. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  11749. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  11750. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  11751. /**
  11752. * Class used to create slider controls
  11753. */
  11754. var Slider = /** @class */ (function (_super) {
  11755. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Slider, _super);
  11756. /**
  11757. * Creates a new Slider
  11758. * @param name defines the control name
  11759. */
  11760. function Slider(name) {
  11761. var _this = _super.call(this, name) || this;
  11762. _this.name = name;
  11763. _this._background = "black";
  11764. _this._borderColor = "white";
  11765. _this._thumbColor = "";
  11766. _this._isThumbCircle = false;
  11767. _this._displayValueBar = true;
  11768. return _this;
  11769. }
  11770. Object.defineProperty(Slider.prototype, "displayValueBar", {
  11771. /** Gets or sets a boolean indicating if the value bar must be rendered */
  11772. get: function () {
  11773. return this._displayValueBar;
  11774. },
  11775. set: function (value) {
  11776. if (this._displayValueBar === value) {
  11777. return;
  11778. }
  11779. this._displayValueBar = value;
  11780. this._markAsDirty();
  11781. },
  11782. enumerable: false,
  11783. configurable: true
  11784. });
  11785. Object.defineProperty(Slider.prototype, "borderColor", {
  11786. /** Gets or sets border color */
  11787. get: function () {
  11788. return this._borderColor;
  11789. },
  11790. set: function (value) {
  11791. if (this._borderColor === value) {
  11792. return;
  11793. }
  11794. this._borderColor = value;
  11795. this._markAsDirty();
  11796. },
  11797. enumerable: false,
  11798. configurable: true
  11799. });
  11800. Object.defineProperty(Slider.prototype, "background", {
  11801. /** Gets or sets background color */
  11802. get: function () {
  11803. return this._background;
  11804. },
  11805. set: function (value) {
  11806. if (this._background === value) {
  11807. return;
  11808. }
  11809. this._background = value;
  11810. this._markAsDirty();
  11811. },
  11812. enumerable: false,
  11813. configurable: true
  11814. });
  11815. Object.defineProperty(Slider.prototype, "thumbColor", {
  11816. /** Gets or sets thumb's color */
  11817. get: function () {
  11818. return this._thumbColor;
  11819. },
  11820. set: function (value) {
  11821. if (this._thumbColor === value) {
  11822. return;
  11823. }
  11824. this._thumbColor = value;
  11825. this._markAsDirty();
  11826. },
  11827. enumerable: false,
  11828. configurable: true
  11829. });
  11830. Object.defineProperty(Slider.prototype, "isThumbCircle", {
  11831. /** Gets or sets a boolean indicating if the thumb should be round or square */
  11832. get: function () {
  11833. return this._isThumbCircle;
  11834. },
  11835. set: function (value) {
  11836. if (this._isThumbCircle === value) {
  11837. return;
  11838. }
  11839. this._isThumbCircle = value;
  11840. this._markAsDirty();
  11841. },
  11842. enumerable: false,
  11843. configurable: true
  11844. });
  11845. Slider.prototype._getTypeName = function () {
  11846. return "Slider";
  11847. };
  11848. Slider.prototype._draw = function (context, invalidatedRectangle) {
  11849. context.save();
  11850. this._applyStates(context);
  11851. this._prepareRenderingData(this.isThumbCircle ? "circle" : "rectangle");
  11852. var left = this._renderLeft;
  11853. var top = this._renderTop;
  11854. var width = this._renderWidth;
  11855. var height = this._renderHeight;
  11856. var radius = 0;
  11857. if (this.isThumbClamped && this.isThumbCircle) {
  11858. if (this.isVertical) {
  11859. top += (this._effectiveThumbThickness / 2);
  11860. }
  11861. else {
  11862. left += (this._effectiveThumbThickness / 2);
  11863. }
  11864. radius = this._backgroundBoxThickness / 2;
  11865. }
  11866. else {
  11867. radius = (this._effectiveThumbThickness - this._effectiveBarOffset) / 2;
  11868. }
  11869. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11870. context.shadowColor = this.shadowColor;
  11871. context.shadowBlur = this.shadowBlur;
  11872. context.shadowOffsetX = this.shadowOffsetX;
  11873. context.shadowOffsetY = this.shadowOffsetY;
  11874. }
  11875. var thumbPosition = this._getThumbPosition();
  11876. context.fillStyle = this._background;
  11877. if (this.isVertical) {
  11878. if (this.isThumbClamped) {
  11879. if (this.isThumbCircle) {
  11880. context.beginPath();
  11881. context.arc(left + this._backgroundBoxThickness / 2, top, radius, Math.PI, 2 * Math.PI);
  11882. context.fill();
  11883. context.fillRect(left, top, width, height);
  11884. }
  11885. else {
  11886. context.fillRect(left, top, width, height + this._effectiveThumbThickness);
  11887. }
  11888. }
  11889. else {
  11890. context.fillRect(left, top, width, height);
  11891. }
  11892. }
  11893. else {
  11894. if (this.isThumbClamped) {
  11895. if (this.isThumbCircle) {
  11896. context.beginPath();
  11897. context.arc(left + this._backgroundBoxLength, top + (this._backgroundBoxThickness / 2), radius, 0, 2 * Math.PI);
  11898. context.fill();
  11899. context.fillRect(left, top, width, height);
  11900. }
  11901. else {
  11902. context.fillRect(left, top, width + this._effectiveThumbThickness, height);
  11903. }
  11904. }
  11905. else {
  11906. context.fillRect(left, top, width, height);
  11907. }
  11908. }
  11909. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11910. context.shadowBlur = 0;
  11911. context.shadowOffsetX = 0;
  11912. context.shadowOffsetY = 0;
  11913. }
  11914. // Value bar
  11915. context.fillStyle = this.color;
  11916. if (this._displayValueBar) {
  11917. if (this.isVertical) {
  11918. if (this.isThumbClamped) {
  11919. if (this.isThumbCircle) {
  11920. context.beginPath();
  11921. context.arc(left + this._backgroundBoxThickness / 2, top + this._backgroundBoxLength, radius, 0, 2 * Math.PI);
  11922. context.fill();
  11923. context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
  11924. }
  11925. else {
  11926. context.fillRect(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);
  11927. }
  11928. }
  11929. else {
  11930. context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
  11931. }
  11932. }
  11933. else {
  11934. if (this.isThumbClamped) {
  11935. if (this.isThumbCircle) {
  11936. context.beginPath();
  11937. context.arc(left, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);
  11938. context.fill();
  11939. context.fillRect(left, top, thumbPosition, height);
  11940. }
  11941. else {
  11942. context.fillRect(left, top, thumbPosition, height);
  11943. }
  11944. }
  11945. else {
  11946. context.fillRect(left, top, thumbPosition, height);
  11947. }
  11948. }
  11949. }
  11950. // Thumb
  11951. context.fillStyle = this._thumbColor || this.color;
  11952. if (this.displayThumb) {
  11953. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11954. context.shadowColor = this.shadowColor;
  11955. context.shadowBlur = this.shadowBlur;
  11956. context.shadowOffsetX = this.shadowOffsetX;
  11957. context.shadowOffsetY = this.shadowOffsetY;
  11958. }
  11959. if (this._isThumbCircle) {
  11960. context.beginPath();
  11961. if (this.isVertical) {
  11962. context.arc(left + this._backgroundBoxThickness / 2, top + thumbPosition, radius, 0, 2 * Math.PI);
  11963. }
  11964. else {
  11965. context.arc(left + thumbPosition, top + (this._backgroundBoxThickness / 2), radius, 0, 2 * Math.PI);
  11966. }
  11967. context.fill();
  11968. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11969. context.shadowBlur = 0;
  11970. context.shadowOffsetX = 0;
  11971. context.shadowOffsetY = 0;
  11972. }
  11973. context.strokeStyle = this._borderColor;
  11974. context.stroke();
  11975. }
  11976. else {
  11977. if (this.isVertical) {
  11978. context.fillRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
  11979. }
  11980. else {
  11981. context.fillRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
  11982. }
  11983. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11984. context.shadowBlur = 0;
  11985. context.shadowOffsetX = 0;
  11986. context.shadowOffsetY = 0;
  11987. }
  11988. context.strokeStyle = this._borderColor;
  11989. if (this.isVertical) {
  11990. context.strokeRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
  11991. }
  11992. else {
  11993. context.strokeRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
  11994. }
  11995. }
  11996. }
  11997. context.restore();
  11998. };
  11999. return Slider;
  12000. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  12001. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Slider"] = Slider;
  12002. /***/ }),
  12003. /***/ "./2D/controls/stackPanel.ts":
  12004. /*!***********************************!*\
  12005. !*** ./2D/controls/stackPanel.ts ***!
  12006. \***********************************/
  12007. /*! exports provided: StackPanel */
  12008. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12009. "use strict";
  12010. __webpack_require__.r(__webpack_exports__);
  12011. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return StackPanel; });
  12012. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  12013. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  12014. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  12015. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  12016. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  12017. /**
  12018. * Class used to create a 2D stack panel container
  12019. */
  12020. var StackPanel = /** @class */ (function (_super) {
  12021. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(StackPanel, _super);
  12022. /**
  12023. * Creates a new StackPanel
  12024. * @param name defines control name
  12025. */
  12026. function StackPanel(name) {
  12027. var _this = _super.call(this, name) || this;
  12028. _this.name = name;
  12029. _this._isVertical = true;
  12030. _this._manualWidth = false;
  12031. _this._manualHeight = false;
  12032. _this._doNotTrackManualChanges = false;
  12033. /**
  12034. * Gets or sets a boolean indicating that layou warnings should be ignored
  12035. */
  12036. _this.ignoreLayoutWarnings = false;
  12037. return _this;
  12038. }
  12039. Object.defineProperty(StackPanel.prototype, "isVertical", {
  12040. /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
  12041. get: function () {
  12042. return this._isVertical;
  12043. },
  12044. set: function (value) {
  12045. if (this._isVertical === value) {
  12046. return;
  12047. }
  12048. this._isVertical = value;
  12049. this._markAsDirty();
  12050. },
  12051. enumerable: false,
  12052. configurable: true
  12053. });
  12054. Object.defineProperty(StackPanel.prototype, "width", {
  12055. get: function () {
  12056. return this._width.toString(this._host);
  12057. },
  12058. /**
  12059. * Gets or sets panel width.
  12060. * This value should not be set when in horizontal mode as it will be computed automatically
  12061. */
  12062. set: function (value) {
  12063. if (!this._doNotTrackManualChanges) {
  12064. this._manualWidth = true;
  12065. }
  12066. if (this._width.toString(this._host) === value) {
  12067. return;
  12068. }
  12069. if (this._width.fromString(value)) {
  12070. this._markAsDirty();
  12071. }
  12072. },
  12073. enumerable: false,
  12074. configurable: true
  12075. });
  12076. Object.defineProperty(StackPanel.prototype, "height", {
  12077. get: function () {
  12078. return this._height.toString(this._host);
  12079. },
  12080. /**
  12081. * Gets or sets panel height.
  12082. * This value should not be set when in vertical mode as it will be computed automatically
  12083. */
  12084. set: function (value) {
  12085. if (!this._doNotTrackManualChanges) {
  12086. this._manualHeight = true;
  12087. }
  12088. if (this._height.toString(this._host) === value) {
  12089. return;
  12090. }
  12091. if (this._height.fromString(value)) {
  12092. this._markAsDirty();
  12093. }
  12094. },
  12095. enumerable: false,
  12096. configurable: true
  12097. });
  12098. StackPanel.prototype._getTypeName = function () {
  12099. return "StackPanel";
  12100. };
  12101. /** @hidden */
  12102. StackPanel.prototype._preMeasure = function (parentMeasure, context) {
  12103. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  12104. var child = _a[_i];
  12105. if (this._isVertical) {
  12106. child.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  12107. }
  12108. else {
  12109. child.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  12110. }
  12111. }
  12112. _super.prototype._preMeasure.call(this, parentMeasure, context);
  12113. };
  12114. StackPanel.prototype._additionalProcessing = function (parentMeasure, context) {
  12115. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  12116. this._measureForChildren.copyFrom(parentMeasure);
  12117. this._measureForChildren.left = this._currentMeasure.left;
  12118. this._measureForChildren.top = this._currentMeasure.top;
  12119. if (!this.isVertical || this._manualWidth) {
  12120. this._measureForChildren.width = this._currentMeasure.width;
  12121. }
  12122. if (this.isVertical || this._manualHeight) {
  12123. this._measureForChildren.height = this._currentMeasure.height;
  12124. }
  12125. };
  12126. StackPanel.prototype._postMeasure = function () {
  12127. var stackWidth = 0;
  12128. var stackHeight = 0;
  12129. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  12130. var child = _a[_i];
  12131. if (!child.isVisible || child.notRenderable) {
  12132. continue;
  12133. }
  12134. if (this._isVertical) {
  12135. if (child.top !== stackHeight + "px") {
  12136. child.top = stackHeight + "px";
  12137. this._rebuildLayout = true;
  12138. child._top.ignoreAdaptiveScaling = true;
  12139. }
  12140. if (child._height.isPercentage && !child._automaticSize) {
  12141. if (!this.ignoreLayoutWarnings) {
  12142. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using height in percentage mode inside a vertical StackPanel");
  12143. }
  12144. }
  12145. else {
  12146. stackHeight += child._currentMeasure.height + child.paddingTopInPixels + child.paddingBottomInPixels;
  12147. }
  12148. }
  12149. else {
  12150. if (child.left !== stackWidth + "px") {
  12151. child.left = stackWidth + "px";
  12152. this._rebuildLayout = true;
  12153. child._left.ignoreAdaptiveScaling = true;
  12154. }
  12155. if (child._width.isPercentage && !child._automaticSize) {
  12156. if (!this.ignoreLayoutWarnings) {
  12157. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using width in percentage mode inside a horizontal StackPanel");
  12158. }
  12159. }
  12160. else {
  12161. stackWidth += child._currentMeasure.width + child.paddingLeftInPixels + child.paddingRightInPixels;
  12162. }
  12163. }
  12164. }
  12165. stackWidth += this.paddingLeftInPixels + this.paddingRightInPixels;
  12166. stackHeight += this.paddingTopInPixels + this.paddingBottomInPixels;
  12167. this._doNotTrackManualChanges = true;
  12168. // Let stack panel width or height default to stackHeight and stackWidth if dimensions are not specified.
  12169. // User can now define their own height and width for stack panel.
  12170. var panelWidthChanged = false;
  12171. var panelHeightChanged = false;
  12172. if (!this._manualHeight && this._isVertical) { // do not specify height if strictly defined by user
  12173. var previousHeight = this.height;
  12174. this.height = stackHeight + "px";
  12175. panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
  12176. }
  12177. if (!this._manualWidth && !this._isVertical) { // do not specify width if strictly defined by user
  12178. var previousWidth = this.width;
  12179. this.width = stackWidth + "px";
  12180. panelWidthChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
  12181. }
  12182. if (panelHeightChanged) {
  12183. this._height.ignoreAdaptiveScaling = true;
  12184. }
  12185. if (panelWidthChanged) {
  12186. this._width.ignoreAdaptiveScaling = true;
  12187. }
  12188. this._doNotTrackManualChanges = false;
  12189. if (panelWidthChanged || panelHeightChanged) {
  12190. this._rebuildLayout = true;
  12191. }
  12192. _super.prototype._postMeasure.call(this);
  12193. };
  12194. return StackPanel;
  12195. }(_container__WEBPACK_IMPORTED_MODULE_2__["Container"]));
  12196. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.StackPanel"] = StackPanel;
  12197. /***/ }),
  12198. /***/ "./2D/controls/statics.ts":
  12199. /*!********************************!*\
  12200. !*** ./2D/controls/statics.ts ***!
  12201. \********************************/
  12202. /*! exports provided: name */
  12203. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12204. "use strict";
  12205. __webpack_require__.r(__webpack_exports__);
  12206. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "name", function() { return name; });
  12207. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  12208. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  12209. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  12210. /**
  12211. * Forcing an export so that this code will execute
  12212. * @hidden
  12213. */
  12214. var name = "Statics";
  12215. /**
  12216. * Creates a stack panel that can be used to render headers
  12217. * @param control defines the control to associate with the header
  12218. * @param text defines the text of the header
  12219. * @param size defines the size of the header
  12220. * @param options defines options used to configure the header
  12221. * @returns a new StackPanel
  12222. */
  12223. _control__WEBPACK_IMPORTED_MODULE_0__["Control"].AddHeader = function (control, text, size, options) {
  12224. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_1__["StackPanel"]("panel");
  12225. var isHorizontal = options ? options.isHorizontal : true;
  12226. var controlFirst = options ? options.controlFirst : true;
  12227. panel.isVertical = !isHorizontal;
  12228. var header = new _textBlock__WEBPACK_IMPORTED_MODULE_2__["TextBlock"]("header");
  12229. header.text = text;
  12230. header.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  12231. if (isHorizontal) {
  12232. header.width = size;
  12233. }
  12234. else {
  12235. header.height = size;
  12236. }
  12237. if (controlFirst) {
  12238. panel.addControl(control);
  12239. panel.addControl(header);
  12240. header.paddingLeft = "5px";
  12241. }
  12242. else {
  12243. panel.addControl(header);
  12244. panel.addControl(control);
  12245. header.paddingRight = "5px";
  12246. }
  12247. header.shadowBlur = control.shadowBlur;
  12248. header.shadowColor = control.shadowColor;
  12249. header.shadowOffsetX = control.shadowOffsetX;
  12250. header.shadowOffsetY = control.shadowOffsetY;
  12251. return panel;
  12252. };
  12253. /***/ }),
  12254. /***/ "./2D/controls/textBlock.ts":
  12255. /*!**********************************!*\
  12256. !*** ./2D/controls/textBlock.ts ***!
  12257. \**********************************/
  12258. /*! exports provided: TextWrapping, TextBlock */
  12259. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12260. "use strict";
  12261. __webpack_require__.r(__webpack_exports__);
  12262. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return TextWrapping; });
  12263. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return TextBlock; });
  12264. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  12265. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  12266. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  12267. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  12268. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  12269. /**
  12270. * Enum that determines the text-wrapping mode to use.
  12271. */
  12272. var TextWrapping;
  12273. (function (TextWrapping) {
  12274. /**
  12275. * Clip the text when it's larger than Control.width; this is the default mode.
  12276. */
  12277. TextWrapping[TextWrapping["Clip"] = 0] = "Clip";
  12278. /**
  12279. * Wrap the text word-wise, i.e. try to add line-breaks at word boundary to fit within Control.width.
  12280. */
  12281. TextWrapping[TextWrapping["WordWrap"] = 1] = "WordWrap";
  12282. /**
  12283. * Ellipsize the text, i.e. shrink with trailing … when text is larger than Control.width.
  12284. */
  12285. TextWrapping[TextWrapping["Ellipsis"] = 2] = "Ellipsis";
  12286. })(TextWrapping || (TextWrapping = {}));
  12287. /**
  12288. * Class used to create text block control
  12289. */
  12290. var TextBlock = /** @class */ (function (_super) {
  12291. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(TextBlock, _super);
  12292. /**
  12293. * Creates a new TextBlock object
  12294. * @param name defines the name of the control
  12295. * @param text defines the text to display (emptry string by default)
  12296. */
  12297. function TextBlock(
  12298. /**
  12299. * Defines the name of the control
  12300. */
  12301. name, text) {
  12302. if (text === void 0) { text = ""; }
  12303. var _this = _super.call(this, name) || this;
  12304. _this.name = name;
  12305. _this._text = "";
  12306. _this._textWrapping = TextWrapping.Clip;
  12307. _this._textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  12308. _this._textVerticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER;
  12309. _this._resizeToFit = false;
  12310. _this._lineSpacing = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"](0);
  12311. _this._outlineWidth = 0;
  12312. _this._outlineColor = "white";
  12313. _this._underline = false;
  12314. _this._lineThrough = false;
  12315. /**
  12316. * An event triggered after the text is changed
  12317. */
  12318. _this.onTextChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  12319. /**
  12320. * An event triggered after the text was broken up into lines
  12321. */
  12322. _this.onLinesReadyObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  12323. _this.text = text;
  12324. return _this;
  12325. }
  12326. Object.defineProperty(TextBlock.prototype, "lines", {
  12327. /**
  12328. * Return the line list (you may need to use the onLinesReadyObservable to make sure the list is ready)
  12329. */
  12330. get: function () {
  12331. return this._lines;
  12332. },
  12333. enumerable: false,
  12334. configurable: true
  12335. });
  12336. Object.defineProperty(TextBlock.prototype, "resizeToFit", {
  12337. /**
  12338. * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
  12339. */
  12340. get: function () {
  12341. return this._resizeToFit;
  12342. },
  12343. /**
  12344. * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
  12345. */
  12346. set: function (value) {
  12347. if (this._resizeToFit === value) {
  12348. return;
  12349. }
  12350. this._resizeToFit = value;
  12351. if (this._resizeToFit) {
  12352. this._width.ignoreAdaptiveScaling = true;
  12353. this._height.ignoreAdaptiveScaling = true;
  12354. }
  12355. this._markAsDirty();
  12356. },
  12357. enumerable: false,
  12358. configurable: true
  12359. });
  12360. Object.defineProperty(TextBlock.prototype, "textWrapping", {
  12361. /**
  12362. * Gets or sets a boolean indicating if text must be wrapped
  12363. */
  12364. get: function () {
  12365. return this._textWrapping;
  12366. },
  12367. /**
  12368. * Gets or sets a boolean indicating if text must be wrapped
  12369. */
  12370. set: function (value) {
  12371. if (this._textWrapping === value) {
  12372. return;
  12373. }
  12374. this._textWrapping = +value;
  12375. this._markAsDirty();
  12376. },
  12377. enumerable: false,
  12378. configurable: true
  12379. });
  12380. Object.defineProperty(TextBlock.prototype, "text", {
  12381. /**
  12382. * Gets or sets text to display
  12383. */
  12384. get: function () {
  12385. return this._text;
  12386. },
  12387. /**
  12388. * Gets or sets text to display
  12389. */
  12390. set: function (value) {
  12391. if (this._text === value) {
  12392. return;
  12393. }
  12394. this._text = value;
  12395. this._markAsDirty();
  12396. this.onTextChangedObservable.notifyObservers(this);
  12397. },
  12398. enumerable: false,
  12399. configurable: true
  12400. });
  12401. Object.defineProperty(TextBlock.prototype, "textHorizontalAlignment", {
  12402. /**
  12403. * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
  12404. */
  12405. get: function () {
  12406. return this._textHorizontalAlignment;
  12407. },
  12408. /**
  12409. * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
  12410. */
  12411. set: function (value) {
  12412. if (this._textHorizontalAlignment === value) {
  12413. return;
  12414. }
  12415. this._textHorizontalAlignment = value;
  12416. this._markAsDirty();
  12417. },
  12418. enumerable: false,
  12419. configurable: true
  12420. });
  12421. Object.defineProperty(TextBlock.prototype, "textVerticalAlignment", {
  12422. /**
  12423. * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
  12424. */
  12425. get: function () {
  12426. return this._textVerticalAlignment;
  12427. },
  12428. /**
  12429. * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
  12430. */
  12431. set: function (value) {
  12432. if (this._textVerticalAlignment === value) {
  12433. return;
  12434. }
  12435. this._textVerticalAlignment = value;
  12436. this._markAsDirty();
  12437. },
  12438. enumerable: false,
  12439. configurable: true
  12440. });
  12441. Object.defineProperty(TextBlock.prototype, "lineSpacing", {
  12442. /**
  12443. * Gets or sets line spacing value
  12444. */
  12445. get: function () {
  12446. return this._lineSpacing.toString(this._host);
  12447. },
  12448. /**
  12449. * Gets or sets line spacing value
  12450. */
  12451. set: function (value) {
  12452. if (this._lineSpacing.fromString(value)) {
  12453. this._markAsDirty();
  12454. }
  12455. },
  12456. enumerable: false,
  12457. configurable: true
  12458. });
  12459. Object.defineProperty(TextBlock.prototype, "outlineWidth", {
  12460. /**
  12461. * Gets or sets outlineWidth of the text to display
  12462. */
  12463. get: function () {
  12464. return this._outlineWidth;
  12465. },
  12466. /**
  12467. * Gets or sets outlineWidth of the text to display
  12468. */
  12469. set: function (value) {
  12470. if (this._outlineWidth === value) {
  12471. return;
  12472. }
  12473. this._outlineWidth = value;
  12474. this._markAsDirty();
  12475. },
  12476. enumerable: false,
  12477. configurable: true
  12478. });
  12479. Object.defineProperty(TextBlock.prototype, "underline", {
  12480. /**
  12481. * Gets or sets a boolean indicating that text must have underline
  12482. */
  12483. get: function () {
  12484. return this._underline;
  12485. },
  12486. /**
  12487. * Gets or sets a boolean indicating that text must have underline
  12488. */
  12489. set: function (value) {
  12490. if (this._underline === value) {
  12491. return;
  12492. }
  12493. this._underline = value;
  12494. this._markAsDirty();
  12495. },
  12496. enumerable: false,
  12497. configurable: true
  12498. });
  12499. Object.defineProperty(TextBlock.prototype, "lineThrough", {
  12500. /**
  12501. * Gets or sets an boolean indicating that text must be crossed out
  12502. */
  12503. get: function () {
  12504. return this._lineThrough;
  12505. },
  12506. /**
  12507. * Gets or sets an boolean indicating that text must be crossed out
  12508. */
  12509. set: function (value) {
  12510. if (this._lineThrough === value) {
  12511. return;
  12512. }
  12513. this._lineThrough = value;
  12514. this._markAsDirty();
  12515. },
  12516. enumerable: false,
  12517. configurable: true
  12518. });
  12519. Object.defineProperty(TextBlock.prototype, "outlineColor", {
  12520. /**
  12521. * Gets or sets outlineColor of the text to display
  12522. */
  12523. get: function () {
  12524. return this._outlineColor;
  12525. },
  12526. /**
  12527. * Gets or sets outlineColor of the text to display
  12528. */
  12529. set: function (value) {
  12530. if (this._outlineColor === value) {
  12531. return;
  12532. }
  12533. this._outlineColor = value;
  12534. this._markAsDirty();
  12535. },
  12536. enumerable: false,
  12537. configurable: true
  12538. });
  12539. TextBlock.prototype._getTypeName = function () {
  12540. return "TextBlock";
  12541. };
  12542. TextBlock.prototype._processMeasures = function (parentMeasure, context) {
  12543. if (!this._fontOffset) {
  12544. this._fontOffset = _control__WEBPACK_IMPORTED_MODULE_3__["Control"]._GetFontOffset(context.font);
  12545. }
  12546. _super.prototype._processMeasures.call(this, parentMeasure, context);
  12547. // Prepare lines
  12548. this._lines = this._breakLines(this._currentMeasure.width, context);
  12549. this.onLinesReadyObservable.notifyObservers(this);
  12550. var maxLineWidth = 0;
  12551. for (var i = 0; i < this._lines.length; i++) {
  12552. var line = this._lines[i];
  12553. if (line.width > maxLineWidth) {
  12554. maxLineWidth = line.width;
  12555. }
  12556. }
  12557. if (this._resizeToFit) {
  12558. if (this._textWrapping === TextWrapping.Clip) {
  12559. var newWidth = (this.paddingLeftInPixels + this.paddingRightInPixels + maxLineWidth) | 0;
  12560. if (newWidth !== this._width.internalValue) {
  12561. this._width.updateInPlace(newWidth, _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL);
  12562. this._rebuildLayout = true;
  12563. }
  12564. }
  12565. var newHeight = (this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * this._lines.length) | 0;
  12566. if (this._lines.length > 0 && this._lineSpacing.internalValue !== 0) {
  12567. var lineSpacing = 0;
  12568. if (this._lineSpacing.isPixel) {
  12569. lineSpacing = this._lineSpacing.getValue(this._host);
  12570. }
  12571. else {
  12572. lineSpacing = this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
  12573. }
  12574. newHeight += (this._lines.length - 1) * lineSpacing;
  12575. }
  12576. if (newHeight !== this._height.internalValue) {
  12577. this._height.updateInPlace(newHeight, _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL);
  12578. this._rebuildLayout = true;
  12579. }
  12580. }
  12581. };
  12582. TextBlock.prototype._drawText = function (text, textWidth, y, context) {
  12583. var width = this._currentMeasure.width;
  12584. var x = 0;
  12585. switch (this._textHorizontalAlignment) {
  12586. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
  12587. x = 0;
  12588. break;
  12589. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
  12590. x = width - textWidth;
  12591. break;
  12592. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER:
  12593. x = (width - textWidth) / 2;
  12594. break;
  12595. }
  12596. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  12597. context.shadowColor = this.shadowColor;
  12598. context.shadowBlur = this.shadowBlur;
  12599. context.shadowOffsetX = this.shadowOffsetX;
  12600. context.shadowOffsetY = this.shadowOffsetY;
  12601. }
  12602. if (this.outlineWidth) {
  12603. context.strokeText(text, this._currentMeasure.left + x, y);
  12604. }
  12605. context.fillText(text, this._currentMeasure.left + x, y);
  12606. if (this._underline) {
  12607. context.beginPath();
  12608. context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
  12609. context.moveTo(this._currentMeasure.left + x, y + 3);
  12610. context.lineTo(this._currentMeasure.left + x + textWidth, y + 3);
  12611. context.stroke();
  12612. context.closePath();
  12613. }
  12614. if (this._lineThrough) {
  12615. context.beginPath();
  12616. context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
  12617. context.moveTo(this._currentMeasure.left + x, y - this.fontSizeInPixels / 3);
  12618. context.lineTo(this._currentMeasure.left + x + textWidth, y - this.fontSizeInPixels / 3);
  12619. context.stroke();
  12620. context.closePath();
  12621. }
  12622. };
  12623. /** @hidden */
  12624. TextBlock.prototype._draw = function (context, invalidatedRectangle) {
  12625. context.save();
  12626. this._applyStates(context);
  12627. // Render lines
  12628. this._renderLines(context);
  12629. context.restore();
  12630. };
  12631. TextBlock.prototype._applyStates = function (context) {
  12632. _super.prototype._applyStates.call(this, context);
  12633. if (this.outlineWidth) {
  12634. context.lineWidth = this.outlineWidth;
  12635. context.strokeStyle = this.outlineColor;
  12636. context.lineJoin = 'miter';
  12637. context.miterLimit = 2;
  12638. }
  12639. };
  12640. TextBlock.prototype._breakLines = function (refWidth, context) {
  12641. var lines = [];
  12642. var _lines = this.text.split("\n");
  12643. if (this._textWrapping === TextWrapping.Ellipsis) {
  12644. for (var _i = 0, _lines_1 = _lines; _i < _lines_1.length; _i++) {
  12645. var _line = _lines_1[_i];
  12646. lines.push(this._parseLineEllipsis(_line, refWidth, context));
  12647. }
  12648. }
  12649. else if (this._textWrapping === TextWrapping.WordWrap) {
  12650. for (var _a = 0, _lines_2 = _lines; _a < _lines_2.length; _a++) {
  12651. var _line = _lines_2[_a];
  12652. lines.push.apply(lines, this._parseLineWordWrap(_line, refWidth, context));
  12653. }
  12654. }
  12655. else {
  12656. for (var _b = 0, _lines_3 = _lines; _b < _lines_3.length; _b++) {
  12657. var _line = _lines_3[_b];
  12658. lines.push(this._parseLine(_line, context));
  12659. }
  12660. }
  12661. return lines;
  12662. };
  12663. TextBlock.prototype._parseLine = function (line, context) {
  12664. if (line === void 0) { line = ""; }
  12665. return { text: line, width: context.measureText(line).width };
  12666. };
  12667. TextBlock.prototype._parseLineEllipsis = function (line, width, context) {
  12668. if (line === void 0) { line = ""; }
  12669. var lineWidth = context.measureText(line).width;
  12670. if (lineWidth > width) {
  12671. line += "…";
  12672. }
  12673. // unicode support. split('') does not work with unicode!
  12674. // make sure Array.from is available
  12675. var characters = Array.from && Array.from(line);
  12676. if (!characters) {
  12677. // no array.from, use the old method
  12678. while (line.length > 2 && lineWidth > width) {
  12679. line = line.slice(0, -2) + "…";
  12680. lineWidth = context.measureText(line).width;
  12681. }
  12682. }
  12683. else {
  12684. while (characters.length && lineWidth > width) {
  12685. characters.pop();
  12686. line = characters.join("") + "...";
  12687. lineWidth = context.measureText(line).width;
  12688. }
  12689. }
  12690. return { text: line, width: lineWidth };
  12691. };
  12692. TextBlock.prototype._parseLineWordWrap = function (line, width, context) {
  12693. if (line === void 0) { line = ""; }
  12694. var lines = [];
  12695. var words = this.wordSplittingFunction ? this.wordSplittingFunction(line) : line.split(" ");
  12696. var lineWidth = 0;
  12697. for (var n = 0; n < words.length; n++) {
  12698. var testLine = n > 0 ? line + " " + words[n] : words[0];
  12699. var metrics = context.measureText(testLine);
  12700. var testWidth = metrics.width;
  12701. if (testWidth > width && n > 0) {
  12702. lines.push({ text: line, width: lineWidth });
  12703. line = words[n];
  12704. lineWidth = context.measureText(line).width;
  12705. }
  12706. else {
  12707. lineWidth = testWidth;
  12708. line = testLine;
  12709. }
  12710. }
  12711. lines.push({ text: line, width: lineWidth });
  12712. return lines;
  12713. };
  12714. TextBlock.prototype._renderLines = function (context) {
  12715. var height = this._currentMeasure.height;
  12716. var rootY = 0;
  12717. switch (this._textVerticalAlignment) {
  12718. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP:
  12719. rootY = this._fontOffset.ascent;
  12720. break;
  12721. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
  12722. rootY = height - this._fontOffset.height * (this._lines.length - 1) - this._fontOffset.descent;
  12723. break;
  12724. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER:
  12725. rootY = this._fontOffset.ascent + (height - this._fontOffset.height * this._lines.length) / 2;
  12726. break;
  12727. }
  12728. rootY += this._currentMeasure.top;
  12729. for (var i = 0; i < this._lines.length; i++) {
  12730. var line = this._lines[i];
  12731. if (i !== 0 && this._lineSpacing.internalValue !== 0) {
  12732. if (this._lineSpacing.isPixel) {
  12733. rootY += this._lineSpacing.getValue(this._host);
  12734. }
  12735. else {
  12736. rootY = rootY + this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
  12737. }
  12738. }
  12739. this._drawText(line.text, line.width, rootY, context);
  12740. rootY += this._fontOffset.height;
  12741. }
  12742. };
  12743. /**
  12744. * Given a width constraint applied on the text block, find the expected height
  12745. * @returns expected height
  12746. */
  12747. TextBlock.prototype.computeExpectedHeight = function () {
  12748. if (this.text && this.widthInPixels) {
  12749. var context_1 = document.createElement("canvas").getContext("2d");
  12750. if (context_1) {
  12751. this._applyStates(context_1);
  12752. if (!this._fontOffset) {
  12753. this._fontOffset = _control__WEBPACK_IMPORTED_MODULE_3__["Control"]._GetFontOffset(context_1.font);
  12754. }
  12755. var lines = this._lines ? this._lines : this._breakLines(this.widthInPixels - this.paddingLeftInPixels - this.paddingRightInPixels, context_1);
  12756. var newHeight = this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * lines.length;
  12757. if (lines.length > 0 && this._lineSpacing.internalValue !== 0) {
  12758. var lineSpacing = 0;
  12759. if (this._lineSpacing.isPixel) {
  12760. lineSpacing = this._lineSpacing.getValue(this._host);
  12761. }
  12762. else {
  12763. lineSpacing = this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
  12764. }
  12765. newHeight += (lines.length - 1) * lineSpacing;
  12766. }
  12767. return newHeight;
  12768. }
  12769. }
  12770. return 0;
  12771. };
  12772. TextBlock.prototype.dispose = function () {
  12773. _super.prototype.dispose.call(this);
  12774. this.onTextChangedObservable.clear();
  12775. };
  12776. return TextBlock;
  12777. }(_control__WEBPACK_IMPORTED_MODULE_3__["Control"]));
  12778. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.TextBlock"] = TextBlock;
  12779. /***/ }),
  12780. /***/ "./2D/controls/textWrapper.ts":
  12781. /*!************************************!*\
  12782. !*** ./2D/controls/textWrapper.ts ***!
  12783. \************************************/
  12784. /*! exports provided: TextWrapper */
  12785. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12786. "use strict";
  12787. __webpack_require__.r(__webpack_exports__);
  12788. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextWrapper", function() { return TextWrapper; });
  12789. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  12790. /** @hidden */
  12791. var TextWrapper = /** @class */ (function () {
  12792. function TextWrapper() {
  12793. }
  12794. Object.defineProperty(TextWrapper.prototype, "text", {
  12795. get: function () {
  12796. return this._characters ? this._characters.join("") : this._text;
  12797. },
  12798. set: function (txt) {
  12799. this._text = txt;
  12800. this._characters = Array.from && Array.from(txt);
  12801. },
  12802. enumerable: false,
  12803. configurable: true
  12804. });
  12805. Object.defineProperty(TextWrapper.prototype, "length", {
  12806. get: function () {
  12807. return this._characters ? this._characters.length : this._text.length;
  12808. },
  12809. enumerable: false,
  12810. configurable: true
  12811. });
  12812. TextWrapper.prototype.removePart = function (idxStart, idxEnd, insertTxt) {
  12813. var _a;
  12814. this._text = this._text.slice(0, idxStart) + (insertTxt ? insertTxt : "") + this._text.slice(idxEnd);
  12815. if (this._characters) {
  12816. var newCharacters = insertTxt ? Array.from(insertTxt) : [];
  12817. (_a = this._characters).splice.apply(_a, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spreadArrays"])([idxStart, idxEnd - idxStart], newCharacters));
  12818. }
  12819. };
  12820. TextWrapper.prototype.charAt = function (idx) {
  12821. return this._characters ? this._characters[idx] : this._text.charAt(idx);
  12822. };
  12823. TextWrapper.prototype.substr = function (from, length) {
  12824. if (this._characters) {
  12825. if (isNaN(from)) {
  12826. from = 0;
  12827. }
  12828. else if (from >= 0) {
  12829. from = Math.min(from, this._characters.length);
  12830. }
  12831. else {
  12832. from = this._characters.length + Math.max(from, -this._characters.length);
  12833. }
  12834. if (length === undefined) {
  12835. length = this._characters.length - from;
  12836. }
  12837. else if (isNaN(length)) {
  12838. length = 0;
  12839. }
  12840. else if (length < 0) {
  12841. length = 0;
  12842. }
  12843. var temp = [];
  12844. while (--length >= 0) {
  12845. temp[length] = this._characters[from + length];
  12846. }
  12847. return temp.join("");
  12848. }
  12849. return this._text.substr(from, length);
  12850. };
  12851. TextWrapper.prototype.substring = function (from, to) {
  12852. if (this._characters) {
  12853. if (isNaN(from)) {
  12854. from = 0;
  12855. }
  12856. else if (from > this._characters.length) {
  12857. from = this._characters.length;
  12858. }
  12859. else if (from < 0) {
  12860. from = 0;
  12861. }
  12862. if (to === undefined) {
  12863. to = this._characters.length;
  12864. }
  12865. else if (isNaN(to)) {
  12866. to = 0;
  12867. }
  12868. else if (to > this._characters.length) {
  12869. to = this._characters.length;
  12870. }
  12871. else if (to < 0) {
  12872. to = 0;
  12873. }
  12874. var temp = [];
  12875. var idx = 0;
  12876. while (from < to) {
  12877. temp[idx++] = this._characters[from++];
  12878. }
  12879. return temp.join("");
  12880. }
  12881. return this._text.substring(from, to);
  12882. };
  12883. TextWrapper.prototype.isWord = function (index) {
  12884. var rWord = /\w/g;
  12885. return this._characters ? this._characters[index].search(rWord) !== -1 : this._text.search(rWord) !== -1;
  12886. };
  12887. return TextWrapper;
  12888. }());
  12889. /***/ }),
  12890. /***/ "./2D/controls/virtualKeyboard.ts":
  12891. /*!****************************************!*\
  12892. !*** ./2D/controls/virtualKeyboard.ts ***!
  12893. \****************************************/
  12894. /*! exports provided: KeyPropertySet, VirtualKeyboard */
  12895. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12896. "use strict";
  12897. __webpack_require__.r(__webpack_exports__);
  12898. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return KeyPropertySet; });
  12899. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return VirtualKeyboard; });
  12900. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  12901. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  12902. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  12903. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  12904. /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
  12905. /**
  12906. * Class used to store key control properties
  12907. */
  12908. var KeyPropertySet = /** @class */ (function () {
  12909. function KeyPropertySet() {
  12910. }
  12911. return KeyPropertySet;
  12912. }());
  12913. /**
  12914. * Class used to create virtual keyboard
  12915. */
  12916. var VirtualKeyboard = /** @class */ (function (_super) {
  12917. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(VirtualKeyboard, _super);
  12918. function VirtualKeyboard() {
  12919. var _this = _super !== null && _super.apply(this, arguments) || this;
  12920. /** Observable raised when a key is pressed */
  12921. _this.onKeyPressObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  12922. /** Gets or sets default key button width */
  12923. _this.defaultButtonWidth = "40px";
  12924. /** Gets or sets default key button height */
  12925. _this.defaultButtonHeight = "40px";
  12926. /** Gets or sets default key button left padding */
  12927. _this.defaultButtonPaddingLeft = "2px";
  12928. /** Gets or sets default key button right padding */
  12929. _this.defaultButtonPaddingRight = "2px";
  12930. /** Gets or sets default key button top padding */
  12931. _this.defaultButtonPaddingTop = "2px";
  12932. /** Gets or sets default key button bottom padding */
  12933. _this.defaultButtonPaddingBottom = "2px";
  12934. /** Gets or sets default key button foreground color */
  12935. _this.defaultButtonColor = "#DDD";
  12936. /** Gets or sets default key button background color */
  12937. _this.defaultButtonBackground = "#070707";
  12938. /** Gets or sets shift button foreground color */
  12939. _this.shiftButtonColor = "#7799FF";
  12940. /** Gets or sets shift button thickness*/
  12941. _this.selectedShiftThickness = 1;
  12942. /** Gets shift key state */
  12943. _this.shiftState = 0;
  12944. _this._currentlyConnectedInputText = null;
  12945. _this._connectedInputTexts = [];
  12946. _this._onKeyPressObserver = null;
  12947. return _this;
  12948. }
  12949. VirtualKeyboard.prototype._getTypeName = function () {
  12950. return "VirtualKeyboard";
  12951. };
  12952. VirtualKeyboard.prototype._createKey = function (key, propertySet) {
  12953. var _this = this;
  12954. var button = _button__WEBPACK_IMPORTED_MODULE_3__["Button"].CreateSimpleButton(key, key);
  12955. button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
  12956. button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
  12957. button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor;
  12958. button.background = propertySet && propertySet.background ? propertySet.background : this.defaultButtonBackground;
  12959. button.paddingLeft = propertySet && propertySet.paddingLeft ? propertySet.paddingLeft : this.defaultButtonPaddingLeft;
  12960. button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight;
  12961. button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop;
  12962. button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom;
  12963. button.thickness = 0;
  12964. button.isFocusInvisible = true;
  12965. button.shadowColor = this.shadowColor;
  12966. button.shadowBlur = this.shadowBlur;
  12967. button.shadowOffsetX = this.shadowOffsetX;
  12968. button.shadowOffsetY = this.shadowOffsetY;
  12969. button.onPointerUpObservable.add(function () {
  12970. _this.onKeyPressObservable.notifyObservers(key);
  12971. });
  12972. return button;
  12973. };
  12974. /**
  12975. * Adds a new row of keys
  12976. * @param keys defines the list of keys to add
  12977. * @param propertySets defines the associated property sets
  12978. */
  12979. VirtualKeyboard.prototype.addKeysRow = function (keys, propertySets) {
  12980. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]();
  12981. panel.isVertical = false;
  12982. panel.isFocusInvisible = true;
  12983. var maxKey = null;
  12984. for (var i = 0; i < keys.length; i++) {
  12985. var properties = null;
  12986. if (propertySets && propertySets.length === keys.length) {
  12987. properties = propertySets[i];
  12988. }
  12989. var key = this._createKey(keys[i], properties);
  12990. if (!maxKey || key.heightInPixels > maxKey.heightInPixels) {
  12991. maxKey = key;
  12992. }
  12993. panel.addControl(key);
  12994. }
  12995. panel.height = maxKey ? maxKey.height : this.defaultButtonHeight;
  12996. this.addControl(panel);
  12997. };
  12998. /**
  12999. * Set the shift key to a specific state
  13000. * @param shiftState defines the new shift state
  13001. */
  13002. VirtualKeyboard.prototype.applyShiftState = function (shiftState) {
  13003. if (!this.children) {
  13004. return;
  13005. }
  13006. for (var i = 0; i < this.children.length; i++) {
  13007. var row = this.children[i];
  13008. if (!row || !row.children) {
  13009. continue;
  13010. }
  13011. var rowContainer = row;
  13012. for (var j = 0; j < rowContainer.children.length; j++) {
  13013. var button = rowContainer.children[j];
  13014. if (!button || !button.children[0]) {
  13015. continue;
  13016. }
  13017. var button_tblock = button.children[0];
  13018. if (button_tblock.text === "\u21E7") {
  13019. button.color = (shiftState ? this.shiftButtonColor : this.defaultButtonColor);
  13020. button.thickness = (shiftState > 1 ? this.selectedShiftThickness : 0);
  13021. }
  13022. button_tblock.text = (shiftState > 0 ? button_tblock.text.toUpperCase() : button_tblock.text.toLowerCase());
  13023. }
  13024. }
  13025. };
  13026. Object.defineProperty(VirtualKeyboard.prototype, "connectedInputText", {
  13027. /** Gets the input text control currently attached to the keyboard */
  13028. get: function () {
  13029. return this._currentlyConnectedInputText;
  13030. },
  13031. enumerable: false,
  13032. configurable: true
  13033. });
  13034. /**
  13035. * Connects the keyboard with an input text control
  13036. *
  13037. * @param input defines the target control
  13038. */
  13039. VirtualKeyboard.prototype.connect = function (input) {
  13040. var _this = this;
  13041. var inputTextAlreadyConnected = this._connectedInputTexts.some(function (a) { return a.input === input; });
  13042. if (inputTextAlreadyConnected) {
  13043. return;
  13044. }
  13045. if (this._onKeyPressObserver === null) {
  13046. this._onKeyPressObserver = this.onKeyPressObservable.add(function (key) {
  13047. if (!_this._currentlyConnectedInputText) {
  13048. return;
  13049. }
  13050. _this._currentlyConnectedInputText._host.focusedControl = _this._currentlyConnectedInputText;
  13051. switch (key) {
  13052. case "\u21E7":
  13053. _this.shiftState++;
  13054. if (_this.shiftState > 2) {
  13055. _this.shiftState = 0;
  13056. }
  13057. _this.applyShiftState(_this.shiftState);
  13058. return;
  13059. case "\u2190":
  13060. _this._currentlyConnectedInputText.processKey(8);
  13061. return;
  13062. case "\u21B5":
  13063. _this._currentlyConnectedInputText.processKey(13);
  13064. return;
  13065. }
  13066. _this._currentlyConnectedInputText.processKey(-1, (_this.shiftState ? key.toUpperCase() : key));
  13067. if (_this.shiftState === 1) {
  13068. _this.shiftState = 0;
  13069. _this.applyShiftState(_this.shiftState);
  13070. }
  13071. });
  13072. }
  13073. this.isVisible = false;
  13074. this._currentlyConnectedInputText = input;
  13075. input._connectedVirtualKeyboard = this;
  13076. // Events hooking
  13077. var onFocusObserver = input.onFocusObservable.add(function () {
  13078. _this._currentlyConnectedInputText = input;
  13079. input._connectedVirtualKeyboard = _this;
  13080. _this.isVisible = true;
  13081. });
  13082. var onBlurObserver = input.onBlurObservable.add(function () {
  13083. input._connectedVirtualKeyboard = null;
  13084. _this._currentlyConnectedInputText = null;
  13085. _this.isVisible = false;
  13086. });
  13087. this._connectedInputTexts.push({
  13088. input: input,
  13089. onBlurObserver: onBlurObserver,
  13090. onFocusObserver: onFocusObserver
  13091. });
  13092. };
  13093. /**
  13094. * Disconnects the keyboard from connected InputText controls
  13095. *
  13096. * @param input optionally defines a target control, otherwise all are disconnected
  13097. */
  13098. VirtualKeyboard.prototype.disconnect = function (input) {
  13099. var _this = this;
  13100. if (input) {
  13101. // .find not available on IE
  13102. var filtered = this._connectedInputTexts.filter(function (a) { return a.input === input; });
  13103. if (filtered.length === 1) {
  13104. this._removeConnectedInputObservables(filtered[0]);
  13105. this._connectedInputTexts = this._connectedInputTexts.filter(function (a) { return a.input !== input; });
  13106. if (this._currentlyConnectedInputText === input) {
  13107. this._currentlyConnectedInputText = null;
  13108. }
  13109. }
  13110. }
  13111. else {
  13112. this._connectedInputTexts.forEach(function (connectedInputText) {
  13113. _this._removeConnectedInputObservables(connectedInputText);
  13114. });
  13115. this._connectedInputTexts = [];
  13116. }
  13117. if (this._connectedInputTexts.length === 0) {
  13118. this._currentlyConnectedInputText = null;
  13119. this.onKeyPressObservable.remove(this._onKeyPressObserver);
  13120. this._onKeyPressObserver = null;
  13121. }
  13122. };
  13123. VirtualKeyboard.prototype._removeConnectedInputObservables = function (connectedInputText) {
  13124. connectedInputText.input._connectedVirtualKeyboard = null;
  13125. connectedInputText.input.onFocusObservable.remove(connectedInputText.onFocusObserver);
  13126. connectedInputText.input.onBlurObservable.remove(connectedInputText.onBlurObserver);
  13127. };
  13128. /**
  13129. * Release all resources
  13130. */
  13131. VirtualKeyboard.prototype.dispose = function () {
  13132. _super.prototype.dispose.call(this);
  13133. this.disconnect();
  13134. };
  13135. // Statics
  13136. /**
  13137. * Creates a new keyboard using a default layout
  13138. *
  13139. * @param name defines control name
  13140. * @returns a new VirtualKeyboard
  13141. */
  13142. VirtualKeyboard.CreateDefaultLayout = function (name) {
  13143. var returnValue = new VirtualKeyboard(name);
  13144. returnValue.addKeysRow(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "\u2190"]);
  13145. returnValue.addKeysRow(["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]);
  13146. returnValue.addKeysRow(["a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "\u21B5"]);
  13147. returnValue.addKeysRow(["\u21E7", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/"]);
  13148. returnValue.addKeysRow([" "], [{ width: "200px" }]);
  13149. return returnValue;
  13150. };
  13151. return VirtualKeyboard;
  13152. }(_stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]));
  13153. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.VirtualKeyboard"] = VirtualKeyboard;
  13154. /***/ }),
  13155. /***/ "./2D/index.ts":
  13156. /*!*********************!*\
  13157. !*** ./2D/index.ts ***!
  13158. \*********************/
  13159. /*! exports provided: Button, Checkbox, ColorPicker, Container, Control, Ellipse, FocusableButton, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, TextWrapper, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name, AdvancedDynamicTexture, AdvancedDynamicTextureInstrumentation, Vector2WithInfo, Matrix2D, Measure, MultiLinePoint, Style, ValueAndUnit, XmlLoader */
  13160. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13161. "use strict";
  13162. __webpack_require__.r(__webpack_exports__);
  13163. /* harmony import */ var _controls__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./controls */ "./2D/controls/index.ts");
  13164. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  13165. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Checkbox"]; });
  13166. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ColorPicker"]; });
  13167. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Container"]; });
  13168. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Control"]; });
  13169. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Ellipse"]; });
  13170. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FocusableButton", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["FocusableButton"]; });
  13171. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Grid"]; });
  13172. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Image"]; });
  13173. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["InputText"]; });
  13174. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["InputPassword"]; });
  13175. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Line"]; });
  13176. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["MultiLine"]; });
  13177. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["RadioButton"]; });
  13178. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["StackPanel"]; });
  13179. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SelectorGroup"]; });
  13180. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["CheckboxGroup"]; });
  13181. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["RadioGroup"]; });
  13182. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SliderGroup"]; });
  13183. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SelectionPanel"]; });
  13184. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ScrollViewer"]; });
  13185. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["TextWrapping"]; });
  13186. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["TextBlock"]; });
  13187. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapper", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["TextWrapper"]; });
  13188. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["KeyPropertySet"]; });
  13189. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["VirtualKeyboard"]; });
  13190. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Rectangle"]; });
  13191. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["DisplayGrid"]; });
  13192. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["BaseSlider"]; });
  13193. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Slider"]; });
  13194. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ImageBasedSlider"]; });
  13195. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ScrollBar"]; });
  13196. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ImageScrollBar"]; });
  13197. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["name"]; });
  13198. /* harmony import */ var _advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
  13199. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return _advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_1__["AdvancedDynamicTexture"]; });
  13200. /* harmony import */ var _adtInstrumentation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./adtInstrumentation */ "./2D/adtInstrumentation.ts");
  13201. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return _adtInstrumentation__WEBPACK_IMPORTED_MODULE_2__["AdvancedDynamicTextureInstrumentation"]; });
  13202. /* harmony import */ var _math2D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./math2D */ "./2D/math2D.ts");
  13203. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"]; });
  13204. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"]; });
  13205. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./measure */ "./2D/measure.ts");
  13206. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"]; });
  13207. /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./multiLinePoint */ "./2D/multiLinePoint.ts");
  13208. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return _multiLinePoint__WEBPACK_IMPORTED_MODULE_5__["MultiLinePoint"]; });
  13209. /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
  13210. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return _style__WEBPACK_IMPORTED_MODULE_6__["Style"]; });
  13211. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
  13212. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return _valueAndUnit__WEBPACK_IMPORTED_MODULE_7__["ValueAndUnit"]; });
  13213. /* harmony import */ var _xmlLoader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./xmlLoader */ "./2D/xmlLoader.ts");
  13214. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return _xmlLoader__WEBPACK_IMPORTED_MODULE_8__["XmlLoader"]; });
  13215. /***/ }),
  13216. /***/ "./2D/math2D.ts":
  13217. /*!**********************!*\
  13218. !*** ./2D/math2D.ts ***!
  13219. \**********************/
  13220. /*! exports provided: Vector2WithInfo, Matrix2D */
  13221. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13222. "use strict";
  13223. __webpack_require__.r(__webpack_exports__);
  13224. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return Vector2WithInfo; });
  13225. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return Matrix2D; });
  13226. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  13227. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
  13228. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
  13229. /**
  13230. * Class used to transport Vector2 information for pointer events
  13231. */
  13232. var Vector2WithInfo = /** @class */ (function (_super) {
  13233. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Vector2WithInfo, _super);
  13234. /**
  13235. * Creates a new Vector2WithInfo
  13236. * @param source defines the vector2 data to transport
  13237. * @param buttonIndex defines the current mouse button index
  13238. */
  13239. function Vector2WithInfo(source,
  13240. /** defines the current mouse button index */
  13241. buttonIndex) {
  13242. if (buttonIndex === void 0) { buttonIndex = 0; }
  13243. var _this = _super.call(this, source.x, source.y) || this;
  13244. _this.buttonIndex = buttonIndex;
  13245. return _this;
  13246. }
  13247. return Vector2WithInfo;
  13248. }(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector2"]));
  13249. /** Class used to provide 2D matrix features */
  13250. var Matrix2D = /** @class */ (function () {
  13251. /**
  13252. * Creates a new matrix
  13253. * @param m00 defines value for (0, 0)
  13254. * @param m01 defines value for (0, 1)
  13255. * @param m10 defines value for (1, 0)
  13256. * @param m11 defines value for (1, 1)
  13257. * @param m20 defines value for (2, 0)
  13258. * @param m21 defines value for (2, 1)
  13259. */
  13260. function Matrix2D(m00, m01, m10, m11, m20, m21) {
  13261. /** Gets the internal array of 6 floats used to store matrix data */
  13262. this.m = new Float32Array(6);
  13263. this.fromValues(m00, m01, m10, m11, m20, m21);
  13264. }
  13265. /**
  13266. * Fills the matrix from direct values
  13267. * @param m00 defines value for (0, 0)
  13268. * @param m01 defines value for (0, 1)
  13269. * @param m10 defines value for (1, 0)
  13270. * @param m11 defines value for (1, 1)
  13271. * @param m20 defines value for (2, 0)
  13272. * @param m21 defines value for (2, 1)
  13273. * @returns the current modified matrix
  13274. */
  13275. Matrix2D.prototype.fromValues = function (m00, m01, m10, m11, m20, m21) {
  13276. this.m[0] = m00;
  13277. this.m[1] = m01;
  13278. this.m[2] = m10;
  13279. this.m[3] = m11;
  13280. this.m[4] = m20;
  13281. this.m[5] = m21;
  13282. return this;
  13283. };
  13284. /**
  13285. * Gets matrix determinant
  13286. * @returns the determinant
  13287. */
  13288. Matrix2D.prototype.determinant = function () {
  13289. return this.m[0] * this.m[3] - this.m[1] * this.m[2];
  13290. };
  13291. /**
  13292. * Inverses the matrix and stores it in a target matrix
  13293. * @param result defines the target matrix
  13294. * @returns the current matrix
  13295. */
  13296. Matrix2D.prototype.invertToRef = function (result) {
  13297. var l0 = this.m[0];
  13298. var l1 = this.m[1];
  13299. var l2 = this.m[2];
  13300. var l3 = this.m[3];
  13301. var l4 = this.m[4];
  13302. var l5 = this.m[5];
  13303. var det = this.determinant();
  13304. if (det < (babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Epsilon"] * babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Epsilon"])) {
  13305. result.m[0] = 0;
  13306. result.m[1] = 0;
  13307. result.m[2] = 0;
  13308. result.m[3] = 0;
  13309. result.m[4] = 0;
  13310. result.m[5] = 0;
  13311. return this;
  13312. }
  13313. var detDiv = 1 / det;
  13314. var det4 = l2 * l5 - l3 * l4;
  13315. var det5 = l1 * l4 - l0 * l5;
  13316. result.m[0] = l3 * detDiv;
  13317. result.m[1] = -l1 * detDiv;
  13318. result.m[2] = -l2 * detDiv;
  13319. result.m[3] = l0 * detDiv;
  13320. result.m[4] = det4 * detDiv;
  13321. result.m[5] = det5 * detDiv;
  13322. return this;
  13323. };
  13324. /**
  13325. * Multiplies the current matrix with another one
  13326. * @param other defines the second operand
  13327. * @param result defines the target matrix
  13328. * @returns the current matrix
  13329. */
  13330. Matrix2D.prototype.multiplyToRef = function (other, result) {
  13331. var l0 = this.m[0];
  13332. var l1 = this.m[1];
  13333. var l2 = this.m[2];
  13334. var l3 = this.m[3];
  13335. var l4 = this.m[4];
  13336. var l5 = this.m[5];
  13337. var r0 = other.m[0];
  13338. var r1 = other.m[1];
  13339. var r2 = other.m[2];
  13340. var r3 = other.m[3];
  13341. var r4 = other.m[4];
  13342. var r5 = other.m[5];
  13343. result.m[0] = l0 * r0 + l1 * r2;
  13344. result.m[1] = l0 * r1 + l1 * r3;
  13345. result.m[2] = l2 * r0 + l3 * r2;
  13346. result.m[3] = l2 * r1 + l3 * r3;
  13347. result.m[4] = l4 * r0 + l5 * r2 + r4;
  13348. result.m[5] = l4 * r1 + l5 * r3 + r5;
  13349. return this;
  13350. };
  13351. /**
  13352. * Applies the current matrix to a set of 2 floats and stores the result in a vector2
  13353. * @param x defines the x coordinate to transform
  13354. * @param y defines the x coordinate to transform
  13355. * @param result defines the target vector2
  13356. * @returns the current matrix
  13357. */
  13358. Matrix2D.prototype.transformCoordinates = function (x, y, result) {
  13359. result.x = x * this.m[0] + y * this.m[2] + this.m[4];
  13360. result.y = x * this.m[1] + y * this.m[3] + this.m[5];
  13361. return this;
  13362. };
  13363. // Statics
  13364. /**
  13365. * Creates an identity matrix
  13366. * @returns a new matrix
  13367. */
  13368. Matrix2D.Identity = function () {
  13369. return new Matrix2D(1, 0, 0, 1, 0, 0);
  13370. };
  13371. /**
  13372. * Creates a translation matrix and stores it in a target matrix
  13373. * @param x defines the x coordinate of the translation
  13374. * @param y defines the y coordinate of the translation
  13375. * @param result defines the target matrix
  13376. */
  13377. Matrix2D.TranslationToRef = function (x, y, result) {
  13378. result.fromValues(1, 0, 0, 1, x, y);
  13379. };
  13380. /**
  13381. * Creates a scaling matrix and stores it in a target matrix
  13382. * @param x defines the x coordinate of the scaling
  13383. * @param y defines the y coordinate of the scaling
  13384. * @param result defines the target matrix
  13385. */
  13386. Matrix2D.ScalingToRef = function (x, y, result) {
  13387. result.fromValues(x, 0, 0, y, 0, 0);
  13388. };
  13389. /**
  13390. * Creates a rotation matrix and stores it in a target matrix
  13391. * @param angle defines the rotation angle
  13392. * @param result defines the target matrix
  13393. */
  13394. Matrix2D.RotationToRef = function (angle, result) {
  13395. var s = Math.sin(angle);
  13396. var c = Math.cos(angle);
  13397. result.fromValues(c, s, -s, c, 0, 0);
  13398. };
  13399. /**
  13400. * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
  13401. * @param tx defines the x coordinate of the translation
  13402. * @param ty defines the y coordinate of the translation
  13403. * @param angle defines the rotation angle
  13404. * @param scaleX defines the x coordinate of the scaling
  13405. * @param scaleY defines the y coordinate of the scaling
  13406. * @param parentMatrix defines the parent matrix to multiply by (can be null)
  13407. * @param result defines the target matrix
  13408. */
  13409. Matrix2D.ComposeToRef = function (tx, ty, angle, scaleX, scaleY, parentMatrix, result) {
  13410. Matrix2D.TranslationToRef(tx, ty, Matrix2D._TempPreTranslationMatrix);
  13411. Matrix2D.ScalingToRef(scaleX, scaleY, Matrix2D._TempScalingMatrix);
  13412. Matrix2D.RotationToRef(angle, Matrix2D._TempRotationMatrix);
  13413. Matrix2D.TranslationToRef(-tx, -ty, Matrix2D._TempPostTranslationMatrix);
  13414. Matrix2D._TempPreTranslationMatrix.multiplyToRef(Matrix2D._TempScalingMatrix, Matrix2D._TempCompose0);
  13415. Matrix2D._TempCompose0.multiplyToRef(Matrix2D._TempRotationMatrix, Matrix2D._TempCompose1);
  13416. if (parentMatrix) {
  13417. Matrix2D._TempCompose1.multiplyToRef(Matrix2D._TempPostTranslationMatrix, Matrix2D._TempCompose2);
  13418. Matrix2D._TempCompose2.multiplyToRef(parentMatrix, result);
  13419. }
  13420. else {
  13421. Matrix2D._TempCompose1.multiplyToRef(Matrix2D._TempPostTranslationMatrix, result);
  13422. }
  13423. };
  13424. Matrix2D._TempPreTranslationMatrix = Matrix2D.Identity();
  13425. Matrix2D._TempPostTranslationMatrix = Matrix2D.Identity();
  13426. Matrix2D._TempRotationMatrix = Matrix2D.Identity();
  13427. Matrix2D._TempScalingMatrix = Matrix2D.Identity();
  13428. Matrix2D._TempCompose0 = Matrix2D.Identity();
  13429. Matrix2D._TempCompose1 = Matrix2D.Identity();
  13430. Matrix2D._TempCompose2 = Matrix2D.Identity();
  13431. return Matrix2D;
  13432. }());
  13433. /***/ }),
  13434. /***/ "./2D/measure.ts":
  13435. /*!***********************!*\
  13436. !*** ./2D/measure.ts ***!
  13437. \***********************/
  13438. /*! exports provided: Measure */
  13439. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13440. "use strict";
  13441. __webpack_require__.r(__webpack_exports__);
  13442. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return Measure; });
  13443. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
  13444. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__);
  13445. var tmpRect = [
  13446. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13447. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13448. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13449. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13450. ];
  13451. var tmpRect2 = [
  13452. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13453. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13454. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13455. new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  13456. ];
  13457. var tmpV1 = new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0);
  13458. var tmpV2 = new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0);
  13459. /**
  13460. * Class used to store 2D control sizes
  13461. */
  13462. var Measure = /** @class */ (function () {
  13463. /**
  13464. * Creates a new measure
  13465. * @param left defines left coordinate
  13466. * @param top defines top coordinate
  13467. * @param width defines width dimension
  13468. * @param height defines height dimension
  13469. */
  13470. function Measure(
  13471. /** defines left coordinate */
  13472. left,
  13473. /** defines top coordinate */
  13474. top,
  13475. /** defines width dimension */
  13476. width,
  13477. /** defines height dimension */
  13478. height) {
  13479. this.left = left;
  13480. this.top = top;
  13481. this.width = width;
  13482. this.height = height;
  13483. }
  13484. /**
  13485. * Copy from another measure
  13486. * @param other defines the other measure to copy from
  13487. */
  13488. Measure.prototype.copyFrom = function (other) {
  13489. this.left = other.left;
  13490. this.top = other.top;
  13491. this.width = other.width;
  13492. this.height = other.height;
  13493. };
  13494. /**
  13495. * Copy from a group of 4 floats
  13496. * @param left defines left coordinate
  13497. * @param top defines top coordinate
  13498. * @param width defines width dimension
  13499. * @param height defines height dimension
  13500. */
  13501. Measure.prototype.copyFromFloats = function (left, top, width, height) {
  13502. this.left = left;
  13503. this.top = top;
  13504. this.width = width;
  13505. this.height = height;
  13506. };
  13507. /**
  13508. * Computes the axis aligned bounding box measure for two given measures
  13509. * @param a Input measure
  13510. * @param b Input measure
  13511. * @param result the resulting bounding measure
  13512. */
  13513. Measure.CombineToRef = function (a, b, result) {
  13514. var left = Math.min(a.left, b.left);
  13515. var top = Math.min(a.top, b.top);
  13516. var right = Math.max(a.left + a.width, b.left + b.width);
  13517. var bottom = Math.max(a.top + a.height, b.top + b.height);
  13518. result.left = left;
  13519. result.top = top;
  13520. result.width = right - left;
  13521. result.height = bottom - top;
  13522. };
  13523. /**
  13524. * Computes the axis aligned bounding box of the measure after it is modified by a given transform
  13525. * @param transform the matrix to transform the measure before computing the AABB
  13526. * @param addX number to add to left
  13527. * @param addY number to add to top
  13528. * @param addWidth number to add to width
  13529. * @param addHeight number to add to height
  13530. * @param result the resulting AABB
  13531. */
  13532. Measure.prototype.addAndTransformToRef = function (transform, addX, addY, addWidth, addHeight, result) {
  13533. var left = this.left + addX;
  13534. var top = this.top + addY;
  13535. var width = this.width + addWidth;
  13536. var height = this.height + addHeight;
  13537. tmpRect[0].copyFromFloats(left, top);
  13538. tmpRect[1].copyFromFloats(left + width, top);
  13539. tmpRect[2].copyFromFloats(left + width, top + height);
  13540. tmpRect[3].copyFromFloats(left, top + height);
  13541. tmpV1.copyFromFloats(Number.MAX_VALUE, Number.MAX_VALUE);
  13542. tmpV2.copyFromFloats(0, 0);
  13543. for (var i = 0; i < 4; i++) {
  13544. transform.transformCoordinates(tmpRect[i].x, tmpRect[i].y, tmpRect2[i]);
  13545. tmpV1.x = Math.floor(Math.min(tmpV1.x, tmpRect2[i].x));
  13546. tmpV1.y = Math.floor(Math.min(tmpV1.y, tmpRect2[i].y));
  13547. tmpV2.x = Math.ceil(Math.max(tmpV2.x, tmpRect2[i].x));
  13548. tmpV2.y = Math.ceil(Math.max(tmpV2.y, tmpRect2[i].y));
  13549. }
  13550. result.left = tmpV1.x;
  13551. result.top = tmpV1.y;
  13552. result.width = tmpV2.x - tmpV1.x;
  13553. result.height = tmpV2.y - tmpV1.y;
  13554. };
  13555. /**
  13556. * Computes the axis aligned bounding box of the measure after it is modified by a given transform
  13557. * @param transform the matrix to transform the measure before computing the AABB
  13558. * @param result the resulting AABB
  13559. */
  13560. Measure.prototype.transformToRef = function (transform, result) {
  13561. this.addAndTransformToRef(transform, 0, 0, 0, 0, result);
  13562. };
  13563. /**
  13564. * Check equality between this measure and another one
  13565. * @param other defines the other measures
  13566. * @returns true if both measures are equals
  13567. */
  13568. Measure.prototype.isEqualsTo = function (other) {
  13569. if (this.left !== other.left) {
  13570. return false;
  13571. }
  13572. if (this.top !== other.top) {
  13573. return false;
  13574. }
  13575. if (this.width !== other.width) {
  13576. return false;
  13577. }
  13578. if (this.height !== other.height) {
  13579. return false;
  13580. }
  13581. return true;
  13582. };
  13583. /**
  13584. * Creates an empty measure
  13585. * @returns a new measure
  13586. */
  13587. Measure.Empty = function () {
  13588. return new Measure(0, 0, 0, 0);
  13589. };
  13590. return Measure;
  13591. }());
  13592. /***/ }),
  13593. /***/ "./2D/multiLinePoint.ts":
  13594. /*!******************************!*\
  13595. !*** ./2D/multiLinePoint.ts ***!
  13596. \******************************/
  13597. /*! exports provided: MultiLinePoint */
  13598. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13599. "use strict";
  13600. __webpack_require__.r(__webpack_exports__);
  13601. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return MultiLinePoint; });
  13602. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
  13603. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__);
  13604. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
  13605. /**
  13606. * Class used to store a point for a MultiLine object.
  13607. * The point can be pure 2D coordinates, a mesh or a control
  13608. */
  13609. var MultiLinePoint = /** @class */ (function () {
  13610. /**
  13611. * Creates a new MultiLinePoint
  13612. * @param multiLine defines the source MultiLine object
  13613. */
  13614. function MultiLinePoint(multiLine) {
  13615. this._multiLine = multiLine;
  13616. this._x = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  13617. this._y = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  13618. this._point = new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector3"](0, 0, 0);
  13619. }
  13620. Object.defineProperty(MultiLinePoint.prototype, "x", {
  13621. /** Gets or sets x coordinate */
  13622. get: function () {
  13623. return this._x.toString(this._multiLine._host);
  13624. },
  13625. set: function (value) {
  13626. if (this._x.toString(this._multiLine._host) === value) {
  13627. return;
  13628. }
  13629. if (this._x.fromString(value)) {
  13630. this._multiLine._markAsDirty();
  13631. }
  13632. },
  13633. enumerable: false,
  13634. configurable: true
  13635. });
  13636. Object.defineProperty(MultiLinePoint.prototype, "y", {
  13637. /** Gets or sets y coordinate */
  13638. get: function () {
  13639. return this._y.toString(this._multiLine._host);
  13640. },
  13641. set: function (value) {
  13642. if (this._y.toString(this._multiLine._host) === value) {
  13643. return;
  13644. }
  13645. if (this._y.fromString(value)) {
  13646. this._multiLine._markAsDirty();
  13647. }
  13648. },
  13649. enumerable: false,
  13650. configurable: true
  13651. });
  13652. Object.defineProperty(MultiLinePoint.prototype, "control", {
  13653. /** Gets or sets the control associated with this point */
  13654. get: function () {
  13655. return this._control;
  13656. },
  13657. set: function (value) {
  13658. if (this._control === value) {
  13659. return;
  13660. }
  13661. if (this._control && this._controlObserver) {
  13662. this._control.onDirtyObservable.remove(this._controlObserver);
  13663. this._controlObserver = null;
  13664. }
  13665. this._control = value;
  13666. if (this._control) {
  13667. this._controlObserver = this._control.onDirtyObservable.add(this._multiLine.onPointUpdate);
  13668. }
  13669. this._multiLine._markAsDirty();
  13670. },
  13671. enumerable: false,
  13672. configurable: true
  13673. });
  13674. Object.defineProperty(MultiLinePoint.prototype, "mesh", {
  13675. /** Gets or sets the mesh associated with this point */
  13676. get: function () {
  13677. return this._mesh;
  13678. },
  13679. set: function (value) {
  13680. if (this._mesh === value) {
  13681. return;
  13682. }
  13683. if (this._mesh && this._meshObserver) {
  13684. this._mesh.getScene().onAfterCameraRenderObservable.remove(this._meshObserver);
  13685. }
  13686. this._mesh = value;
  13687. if (this._mesh) {
  13688. this._meshObserver = this._mesh.getScene().onAfterCameraRenderObservable.add(this._multiLine.onPointUpdate);
  13689. }
  13690. this._multiLine._markAsDirty();
  13691. },
  13692. enumerable: false,
  13693. configurable: true
  13694. });
  13695. /** Resets links */
  13696. MultiLinePoint.prototype.resetLinks = function () {
  13697. this.control = null;
  13698. this.mesh = null;
  13699. };
  13700. /**
  13701. * Gets a translation vector with Z component
  13702. * @returns the translation vector
  13703. */
  13704. MultiLinePoint.prototype.translate = function () {
  13705. this._point = this._translatePoint();
  13706. return this._point;
  13707. };
  13708. MultiLinePoint.prototype._translatePoint = function () {
  13709. if (this._mesh != null) {
  13710. return this._multiLine._host.getProjectedPositionWithZ(this._mesh.getBoundingInfo().boundingSphere.center, this._mesh.getWorldMatrix());
  13711. }
  13712. else if (this._control != null) {
  13713. return new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector3"](this._control.centerX, this._control.centerY, 1. - babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Epsilon"]);
  13714. }
  13715. else {
  13716. var host = this._multiLine._host;
  13717. var xValue = this._x.getValueInPixel(host, Number(host._canvas.width));
  13718. var yValue = this._y.getValueInPixel(host, Number(host._canvas.height));
  13719. return new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Vector3"](xValue, yValue, 1. - babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__["Epsilon"]);
  13720. }
  13721. };
  13722. /** Release associated resources */
  13723. MultiLinePoint.prototype.dispose = function () {
  13724. this.resetLinks();
  13725. };
  13726. return MultiLinePoint;
  13727. }());
  13728. /***/ }),
  13729. /***/ "./2D/style.ts":
  13730. /*!*********************!*\
  13731. !*** ./2D/style.ts ***!
  13732. \*********************/
  13733. /*! exports provided: Style */
  13734. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13735. "use strict";
  13736. __webpack_require__.r(__webpack_exports__);
  13737. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return Style; });
  13738. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  13739. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  13740. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
  13741. /**
  13742. * Define a style used by control to automatically setup properties based on a template.
  13743. * Only support font related properties so far
  13744. */
  13745. var Style = /** @class */ (function () {
  13746. /**
  13747. * Creates a new style object
  13748. * @param host defines the AdvancedDynamicTexture which hosts this style
  13749. */
  13750. function Style(host) {
  13751. this._fontFamily = "Arial";
  13752. this._fontStyle = "";
  13753. this._fontWeight = "";
  13754. /** @hidden */
  13755. this._fontSize = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](18, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PIXEL, false);
  13756. /**
  13757. * Observable raised when the style values are changed
  13758. */
  13759. this.onChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  13760. this._host = host;
  13761. }
  13762. Object.defineProperty(Style.prototype, "fontSize", {
  13763. /**
  13764. * Gets or sets the font size
  13765. */
  13766. get: function () {
  13767. return this._fontSize.toString(this._host);
  13768. },
  13769. set: function (value) {
  13770. if (this._fontSize.toString(this._host) === value) {
  13771. return;
  13772. }
  13773. if (this._fontSize.fromString(value)) {
  13774. this.onChangedObservable.notifyObservers(this);
  13775. }
  13776. },
  13777. enumerable: false,
  13778. configurable: true
  13779. });
  13780. Object.defineProperty(Style.prototype, "fontFamily", {
  13781. /**
  13782. * Gets or sets the font family
  13783. */
  13784. get: function () {
  13785. return this._fontFamily;
  13786. },
  13787. set: function (value) {
  13788. if (this._fontFamily === value) {
  13789. return;
  13790. }
  13791. this._fontFamily = value;
  13792. this.onChangedObservable.notifyObservers(this);
  13793. },
  13794. enumerable: false,
  13795. configurable: true
  13796. });
  13797. Object.defineProperty(Style.prototype, "fontStyle", {
  13798. /**
  13799. * Gets or sets the font style
  13800. */
  13801. get: function () {
  13802. return this._fontStyle;
  13803. },
  13804. set: function (value) {
  13805. if (this._fontStyle === value) {
  13806. return;
  13807. }
  13808. this._fontStyle = value;
  13809. this.onChangedObservable.notifyObservers(this);
  13810. },
  13811. enumerable: false,
  13812. configurable: true
  13813. });
  13814. Object.defineProperty(Style.prototype, "fontWeight", {
  13815. /** Gets or sets font weight */
  13816. get: function () {
  13817. return this._fontWeight;
  13818. },
  13819. set: function (value) {
  13820. if (this._fontWeight === value) {
  13821. return;
  13822. }
  13823. this._fontWeight = value;
  13824. this.onChangedObservable.notifyObservers(this);
  13825. },
  13826. enumerable: false,
  13827. configurable: true
  13828. });
  13829. /** Dispose all associated resources */
  13830. Style.prototype.dispose = function () {
  13831. this.onChangedObservable.clear();
  13832. };
  13833. return Style;
  13834. }());
  13835. /***/ }),
  13836. /***/ "./2D/valueAndUnit.ts":
  13837. /*!****************************!*\
  13838. !*** ./2D/valueAndUnit.ts ***!
  13839. \****************************/
  13840. /*! exports provided: ValueAndUnit */
  13841. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13842. "use strict";
  13843. __webpack_require__.r(__webpack_exports__);
  13844. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return ValueAndUnit; });
  13845. /**
  13846. * Class used to specific a value and its associated unit
  13847. */
  13848. var ValueAndUnit = /** @class */ (function () {
  13849. /**
  13850. * Creates a new ValueAndUnit
  13851. * @param value defines the value to store
  13852. * @param unit defines the unit to store
  13853. * @param negativeValueAllowed defines a boolean indicating if the value can be negative
  13854. */
  13855. function ValueAndUnit(value,
  13856. /** defines the unit to store */
  13857. unit,
  13858. /** defines a boolean indicating if the value can be negative */
  13859. negativeValueAllowed) {
  13860. if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
  13861. if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
  13862. this.unit = unit;
  13863. this.negativeValueAllowed = negativeValueAllowed;
  13864. this._value = 1;
  13865. /**
  13866. * Gets or sets a value indicating that this value will not scale accordingly with adaptive scaling property
  13867. * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
  13868. */
  13869. this.ignoreAdaptiveScaling = false;
  13870. this._value = value;
  13871. this._originalUnit = unit;
  13872. }
  13873. Object.defineProperty(ValueAndUnit.prototype, "isPercentage", {
  13874. /** Gets a boolean indicating if the value is a percentage */
  13875. get: function () {
  13876. return this.unit === ValueAndUnit.UNITMODE_PERCENTAGE;
  13877. },
  13878. enumerable: false,
  13879. configurable: true
  13880. });
  13881. Object.defineProperty(ValueAndUnit.prototype, "isPixel", {
  13882. /** Gets a boolean indicating if the value is store as pixel */
  13883. get: function () {
  13884. return this.unit === ValueAndUnit.UNITMODE_PIXEL;
  13885. },
  13886. enumerable: false,
  13887. configurable: true
  13888. });
  13889. Object.defineProperty(ValueAndUnit.prototype, "internalValue", {
  13890. /** Gets direct internal value */
  13891. get: function () {
  13892. return this._value;
  13893. },
  13894. enumerable: false,
  13895. configurable: true
  13896. });
  13897. /**
  13898. * Gets value as pixel
  13899. * @param host defines the root host
  13900. * @param refValue defines the reference value for percentages
  13901. * @returns the value as pixel
  13902. */
  13903. ValueAndUnit.prototype.getValueInPixel = function (host, refValue) {
  13904. if (this.isPixel) {
  13905. return this.getValue(host);
  13906. }
  13907. return this.getValue(host) * refValue;
  13908. };
  13909. /**
  13910. * Update the current value and unit. This should be done cautiously as the GUi won't be marked as dirty with this function.
  13911. * @param value defines the value to store
  13912. * @param unit defines the unit to store
  13913. * @returns the current ValueAndUnit
  13914. */
  13915. ValueAndUnit.prototype.updateInPlace = function (value, unit) {
  13916. if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
  13917. this._value = value;
  13918. this.unit = unit;
  13919. return this;
  13920. };
  13921. /**
  13922. * Gets the value accordingly to its unit
  13923. * @param host defines the root host
  13924. * @returns the value
  13925. */
  13926. ValueAndUnit.prototype.getValue = function (host) {
  13927. if (host && !this.ignoreAdaptiveScaling && this.unit !== ValueAndUnit.UNITMODE_PERCENTAGE) {
  13928. var width = 0;
  13929. var height = 0;
  13930. if (host.idealWidth) {
  13931. width = (this._value * host.getSize().width) / host.idealWidth;
  13932. }
  13933. if (host.idealHeight) {
  13934. height = (this._value * host.getSize().height) / host.idealHeight;
  13935. }
  13936. if (host.useSmallestIdeal && host.idealWidth && host.idealHeight) {
  13937. return window.innerWidth < window.innerHeight ? width : height;
  13938. }
  13939. if (host.idealWidth) { // horizontal
  13940. return width;
  13941. }
  13942. if (host.idealHeight) { // vertical
  13943. return height;
  13944. }
  13945. }
  13946. return this._value;
  13947. };
  13948. /**
  13949. * Gets a string representation of the value
  13950. * @param host defines the root host
  13951. * @param decimals defines an optional number of decimals to display
  13952. * @returns a string
  13953. */
  13954. ValueAndUnit.prototype.toString = function (host, decimals) {
  13955. switch (this.unit) {
  13956. case ValueAndUnit.UNITMODE_PERCENTAGE:
  13957. var percentage = this.getValue(host) * 100;
  13958. return (decimals ? percentage.toFixed(decimals) : percentage) + "%";
  13959. case ValueAndUnit.UNITMODE_PIXEL:
  13960. var pixels = this.getValue(host);
  13961. return (decimals ? pixels.toFixed(decimals) : pixels) + "px";
  13962. }
  13963. return this.unit.toString();
  13964. };
  13965. /**
  13966. * Store a value parsed from a string
  13967. * @param source defines the source string
  13968. * @returns true if the value was successfully parsed
  13969. */
  13970. ValueAndUnit.prototype.fromString = function (source) {
  13971. var match = ValueAndUnit._Regex.exec(source.toString());
  13972. if (!match || match.length === 0) {
  13973. return false;
  13974. }
  13975. var sourceValue = parseFloat(match[1]);
  13976. var sourceUnit = this._originalUnit;
  13977. if (!this.negativeValueAllowed) {
  13978. if (sourceValue < 0) {
  13979. sourceValue = 0;
  13980. }
  13981. }
  13982. if (match.length === 4) {
  13983. switch (match[3]) {
  13984. case "px":
  13985. sourceUnit = ValueAndUnit.UNITMODE_PIXEL;
  13986. break;
  13987. case "%":
  13988. sourceUnit = ValueAndUnit.UNITMODE_PERCENTAGE;
  13989. sourceValue /= 100.0;
  13990. break;
  13991. }
  13992. }
  13993. if (sourceValue === this._value && sourceUnit === this.unit) {
  13994. return false;
  13995. }
  13996. this._value = sourceValue;
  13997. this.unit = sourceUnit;
  13998. return true;
  13999. };
  14000. Object.defineProperty(ValueAndUnit, "UNITMODE_PERCENTAGE", {
  14001. /** UNITMODE_PERCENTAGE */
  14002. get: function () {
  14003. return ValueAndUnit._UNITMODE_PERCENTAGE;
  14004. },
  14005. enumerable: false,
  14006. configurable: true
  14007. });
  14008. Object.defineProperty(ValueAndUnit, "UNITMODE_PIXEL", {
  14009. /** UNITMODE_PIXEL */
  14010. get: function () {
  14011. return ValueAndUnit._UNITMODE_PIXEL;
  14012. },
  14013. enumerable: false,
  14014. configurable: true
  14015. });
  14016. // Static
  14017. ValueAndUnit._Regex = /(^-?\d*(\.\d+)?)(%|px)?/;
  14018. ValueAndUnit._UNITMODE_PERCENTAGE = 0;
  14019. ValueAndUnit._UNITMODE_PIXEL = 1;
  14020. return ValueAndUnit;
  14021. }());
  14022. /***/ }),
  14023. /***/ "./2D/xmlLoader.ts":
  14024. /*!*************************!*\
  14025. !*** ./2D/xmlLoader.ts ***!
  14026. \*************************/
  14027. /*! exports provided: XmlLoader */
  14028. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14029. "use strict";
  14030. __webpack_require__.r(__webpack_exports__);
  14031. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return XmlLoader; });
  14032. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  14033. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__);
  14034. /**
  14035. * Class used to load GUI via XML.
  14036. */
  14037. var XmlLoader = /** @class */ (function () {
  14038. /**
  14039. * Create a new xml loader
  14040. * @param parentClass Sets the class context. Used when the loader is instanced inside a class and not in a global context
  14041. */
  14042. function XmlLoader(parentClass) {
  14043. if (parentClass === void 0) { parentClass = null; }
  14044. this._nodes = {};
  14045. this._nodeTypes = {
  14046. element: 1,
  14047. attribute: 2,
  14048. text: 3
  14049. };
  14050. this._isLoaded = false;
  14051. this._objectAttributes = {
  14052. "textHorizontalAlignment": 1,
  14053. "textVerticalAlignment": 2,
  14054. "horizontalAlignment": 3,
  14055. "verticalAlignment": 4,
  14056. "stretch": 5,
  14057. };
  14058. if (parentClass) {
  14059. this._parentClass = parentClass;
  14060. }
  14061. }
  14062. XmlLoader.prototype._getChainElement = function (attributeValue) {
  14063. var element = window;
  14064. if (this._parentClass) {
  14065. element = this._parentClass;
  14066. }
  14067. var value = attributeValue;
  14068. value = value.split(".");
  14069. for (var i = 0; i < value.length; i++) {
  14070. element = element[value[i]];
  14071. }
  14072. return element;
  14073. };
  14074. XmlLoader.prototype._getClassAttribute = function (attributeName) {
  14075. var attribute = attributeName.split(".");
  14076. var className = babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__["_TypeStore"].GetClass("BABYLON.GUI." + attribute[0]);
  14077. return className[attribute[1]];
  14078. };
  14079. XmlLoader.prototype._createGuiElement = function (node, parent, linkParent) {
  14080. if (linkParent === void 0) { linkParent = true; }
  14081. try {
  14082. var className = babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__["_TypeStore"].GetClass("BABYLON.GUI." + node.nodeName);
  14083. var guiNode = new className();
  14084. if (parent && linkParent) {
  14085. parent.addControl(guiNode);
  14086. }
  14087. for (var i = 0; i < node.attributes.length; i++) {
  14088. if (node.attributes[i].name.toLowerCase().includes("datasource")) {
  14089. continue;
  14090. }
  14091. if (node.attributes[i].name.toLowerCase().includes("observable")) {
  14092. var element = this._getChainElement(node.attributes[i].value);
  14093. guiNode[node.attributes[i].name].add(element);
  14094. continue;
  14095. }
  14096. else if (node.attributes[i].name == "linkWithMesh") {
  14097. if (this._parentClass) {
  14098. guiNode.linkWithMesh(this._parentClass[node.attributes[i].value]);
  14099. }
  14100. else {
  14101. guiNode.linkWithMesh(window[node.attributes[i].value]);
  14102. }
  14103. }
  14104. else if (node.attributes[i].value.startsWith("{{") && node.attributes[i].value.endsWith("}}")) {
  14105. var element = this._getChainElement(node.attributes[i].value.substring(2, node.attributes[i].value.length - 2));
  14106. guiNode[node.attributes[i].name] = element;
  14107. }
  14108. else if (!this._objectAttributes[node.attributes[i].name]) {
  14109. if (node.attributes[i].value == "true" || node.attributes[i].value == "false") {
  14110. guiNode[node.attributes[i].name] = (node.attributes[i].value == 'true');
  14111. }
  14112. else {
  14113. guiNode[node.attributes[i].name] = !isNaN(Number(node.attributes[i].value)) ? Number(node.attributes[i].value) : node.attributes[i].value;
  14114. }
  14115. }
  14116. else {
  14117. guiNode[node.attributes[i].name] = this._getClassAttribute(node.attributes[i].value);
  14118. }
  14119. }
  14120. if (!node.attributes.getNamedItem("id")) {
  14121. this._nodes[node.nodeName + Object.keys(this._nodes).length + "_gen"] = guiNode;
  14122. return guiNode;
  14123. }
  14124. var id = node.attributes.getNamedItem("id").value;
  14125. if (id.startsWith("{{") && id.endsWith("}}")) {
  14126. id = this._getChainElement(id.substring(2, id.length - 2));
  14127. }
  14128. if (!this._nodes[id]) {
  14129. this._nodes[id] = guiNode;
  14130. }
  14131. else {
  14132. throw "XmlLoader Exception : Duplicate ID, every element should have an unique ID attribute";
  14133. }
  14134. return guiNode;
  14135. }
  14136. catch (e) {
  14137. throw "XmlLoader Exception : Error parsing Control " + node.nodeName + "," + e + ".";
  14138. }
  14139. };
  14140. XmlLoader.prototype._parseGrid = function (node, guiNode, parent) {
  14141. var width;
  14142. var height;
  14143. var columns;
  14144. var rows = node.children;
  14145. var cells;
  14146. var isPixel = false;
  14147. var cellNode;
  14148. var rowNumber = -1;
  14149. var columnNumber = -1;
  14150. var totalColumnsNumber = 0;
  14151. for (var i = 0; i < rows.length; i++) {
  14152. if (rows[i].nodeType != this._nodeTypes.element) {
  14153. continue;
  14154. }
  14155. if (rows[i].nodeName != "Row") {
  14156. throw "XmlLoader Exception : Expecting Row node, received " + rows[i].nodeName;
  14157. }
  14158. rowNumber += 1;
  14159. columns = rows[i].children;
  14160. if (!rows[i].attributes.getNamedItem("height")) {
  14161. throw "XmlLoader Exception : Height must be defined for grid rows";
  14162. }
  14163. height = Number(rows[i].attributes.getNamedItem("height").nodeValue);
  14164. isPixel = rows[i].attributes.getNamedItem("isPixel") ? JSON.parse(rows[i].attributes.getNamedItem("isPixel").nodeValue) : false;
  14165. guiNode.addRowDefinition(height, isPixel);
  14166. for (var j = 0; j < columns.length; j++) {
  14167. if (columns[j].nodeType != this._nodeTypes.element) {
  14168. continue;
  14169. }
  14170. if (columns[j].nodeName != "Column") {
  14171. throw "XmlLoader Exception : Expecting Column node, received " + columns[j].nodeName;
  14172. }
  14173. columnNumber += 1;
  14174. if (rowNumber > 0 && columnNumber > totalColumnsNumber) {
  14175. throw "XmlLoader Exception : In the Grid element, the number of columns is defined in the first row, do not add more columns in the subsequent rows.";
  14176. }
  14177. if (rowNumber == 0) {
  14178. if (!columns[j].attributes.getNamedItem("width")) {
  14179. throw "XmlLoader Exception : Width must be defined for all the grid columns in the first row";
  14180. }
  14181. width = Number(columns[j].attributes.getNamedItem("width").nodeValue);
  14182. isPixel = columns[j].attributes.getNamedItem("isPixel") ? JSON.parse(columns[j].attributes.getNamedItem("isPixel").nodeValue) : false;
  14183. guiNode.addColumnDefinition(width, isPixel);
  14184. }
  14185. cells = columns[j].children;
  14186. for (var k = 0; k < cells.length; k++) {
  14187. if (cells[k].nodeType != this._nodeTypes.element) {
  14188. continue;
  14189. }
  14190. cellNode = this._createGuiElement(cells[k], guiNode, false);
  14191. guiNode.addControl(cellNode, rowNumber, columnNumber);
  14192. if (cells[k].firstChild) {
  14193. this._parseXml(cells[k].firstChild, cellNode);
  14194. }
  14195. }
  14196. }
  14197. if (rowNumber == 0) {
  14198. totalColumnsNumber = columnNumber;
  14199. }
  14200. columnNumber = -1;
  14201. }
  14202. if (node.nextSibling) {
  14203. this._parseXml(node.nextSibling, parent);
  14204. }
  14205. };
  14206. XmlLoader.prototype._parseElement = function (node, guiNode, parent) {
  14207. if (node.firstChild) {
  14208. this._parseXml(node.firstChild, guiNode);
  14209. }
  14210. if (node.nextSibling) {
  14211. this._parseXml(node.nextSibling, parent);
  14212. }
  14213. };
  14214. XmlLoader.prototype._prepareSourceElement = function (node, guiNode, variable, source, iterator) {
  14215. if (this._parentClass) {
  14216. this._parentClass[variable] = source[iterator];
  14217. }
  14218. else {
  14219. window[variable] = source[iterator];
  14220. }
  14221. if (node.firstChild) {
  14222. this._parseXml(node.firstChild, guiNode, true);
  14223. }
  14224. };
  14225. XmlLoader.prototype._parseElementsFromSource = function (node, guiNode, parent) {
  14226. var dataSource = node.attributes.getNamedItem("dataSource").value;
  14227. if (!dataSource.includes(" in ")) {
  14228. throw "XmlLoader Exception : Malformed XML, Data Source must include an in";
  14229. }
  14230. else {
  14231. var isArray = true;
  14232. var splittedSource = dataSource.split(" in ");
  14233. if (splittedSource.length < 2) {
  14234. throw "XmlLoader Exception : Malformed XML, Data Source must an iterator and a source";
  14235. }
  14236. var source = splittedSource[1];
  14237. if (source.startsWith("{") && source.endsWith("}")) {
  14238. isArray = false;
  14239. }
  14240. if (!isArray || (source.startsWith("[") && source.endsWith("]"))) {
  14241. source = source.substring(1, source.length - 1);
  14242. }
  14243. if (this._parentClass) {
  14244. source = this._parentClass[source];
  14245. }
  14246. else {
  14247. source = window[source];
  14248. }
  14249. if (isArray) {
  14250. for (var i = 0; i < source.length; i++) {
  14251. this._prepareSourceElement(node, guiNode, splittedSource[0], source, i);
  14252. }
  14253. }
  14254. else {
  14255. for (var i in source) {
  14256. this._prepareSourceElement(node, guiNode, splittedSource[0], source, i);
  14257. }
  14258. }
  14259. if (node.nextSibling) {
  14260. this._parseXml(node.nextSibling, parent);
  14261. }
  14262. }
  14263. };
  14264. XmlLoader.prototype._parseXml = function (node, parent, generated) {
  14265. if (generated === void 0) { generated = false; }
  14266. if (node.nodeType != this._nodeTypes.element) {
  14267. if (node.nextSibling) {
  14268. this._parseXml(node.nextSibling, parent, generated);
  14269. }
  14270. return;
  14271. }
  14272. if (generated) {
  14273. node.setAttribute("id", parent.id + (parent._children.length + 1));
  14274. }
  14275. var guiNode = this._createGuiElement(node, parent);
  14276. if (node.nodeName == "Grid") {
  14277. this._parseGrid(node, guiNode, parent);
  14278. }
  14279. else if (!node.attributes.getNamedItem("dataSource")) {
  14280. this._parseElement(node, guiNode, parent);
  14281. }
  14282. else {
  14283. this._parseElementsFromSource(node, guiNode, parent);
  14284. }
  14285. };
  14286. /**
  14287. * Gets if the loading has finished.
  14288. * @returns whether the loading has finished or not
  14289. */
  14290. XmlLoader.prototype.isLoaded = function () {
  14291. return this._isLoaded;
  14292. };
  14293. /**
  14294. * Gets a loaded node / control by id.
  14295. * @param id the Controls id set in the xml
  14296. * @returns element of type Control
  14297. */
  14298. XmlLoader.prototype.getNodeById = function (id) {
  14299. return this._nodes[id];
  14300. };
  14301. /**
  14302. * Gets all loaded nodes / controls
  14303. * @returns Array of controls
  14304. */
  14305. XmlLoader.prototype.getNodes = function () {
  14306. return this._nodes;
  14307. };
  14308. /**
  14309. * Initiates the xml layout loading
  14310. * @param xmlFile defines the xml layout to load
  14311. * @param rootNode defines the node / control to use as a parent for the loaded layout controls.
  14312. * @param callback defines the callback called on layout load.
  14313. */
  14314. XmlLoader.prototype.loadLayout = function (xmlFile, rootNode, callback) {
  14315. var xhttp = new XMLHttpRequest();
  14316. xhttp.onreadystatechange = function () {
  14317. if (xhttp.readyState == 4 && xhttp.status == 200) {
  14318. if (!xhttp.responseXML) {
  14319. throw "XmlLoader Exception : XML file is malformed or corrupted.";
  14320. }
  14321. var xmlDoc = xhttp.responseXML.documentElement;
  14322. this._parseXml(xmlDoc.firstChild, rootNode);
  14323. this._isLoaded = true;
  14324. if (callback) {
  14325. callback();
  14326. }
  14327. }
  14328. }.bind(this);
  14329. xhttp.open("GET", xmlFile, true);
  14330. xhttp.send();
  14331. };
  14332. return XmlLoader;
  14333. }());
  14334. /***/ }),
  14335. /***/ "./3D/controls/abstractButton3D.ts":
  14336. /*!*****************************************!*\
  14337. !*** ./3D/controls/abstractButton3D.ts ***!
  14338. \*****************************************/
  14339. /*! exports provided: AbstractButton3D */
  14340. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14341. "use strict";
  14342. __webpack_require__.r(__webpack_exports__);
  14343. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return AbstractButton3D; });
  14344. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  14345. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
  14346. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
  14347. /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
  14348. /**
  14349. * Class used as a root to all buttons
  14350. */
  14351. var AbstractButton3D = /** @class */ (function (_super) {
  14352. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(AbstractButton3D, _super);
  14353. /**
  14354. * Creates a new button
  14355. * @param name defines the control name
  14356. */
  14357. function AbstractButton3D(name) {
  14358. return _super.call(this, name) || this;
  14359. }
  14360. AbstractButton3D.prototype._getTypeName = function () {
  14361. return "AbstractButton3D";
  14362. };
  14363. // Mesh association
  14364. AbstractButton3D.prototype._createNode = function (scene) {
  14365. return new babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__["TransformNode"]("button" + this.name);
  14366. };
  14367. return AbstractButton3D;
  14368. }(_control3D__WEBPACK_IMPORTED_MODULE_2__["Control3D"]));
  14369. /***/ }),
  14370. /***/ "./3D/controls/button3D.ts":
  14371. /*!*********************************!*\
  14372. !*** ./3D/controls/button3D.ts ***!
  14373. \*********************************/
  14374. /*! exports provided: Button3D */
  14375. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14376. "use strict";
  14377. __webpack_require__.r(__webpack_exports__);
  14378. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return Button3D; });
  14379. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  14380. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
  14381. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
  14382. /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
  14383. /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
  14384. /**
  14385. * Class used to create a button in 3D
  14386. */
  14387. var Button3D = /** @class */ (function (_super) {
  14388. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Button3D, _super);
  14389. /**
  14390. * Creates a new button
  14391. * @param name defines the control name
  14392. */
  14393. function Button3D(name) {
  14394. var _this = _super.call(this, name) || this;
  14395. _this._contentResolution = 512;
  14396. _this._contentScaleRatio = 2;
  14397. // Default animations
  14398. _this.pointerEnterAnimation = function () {
  14399. if (!_this.mesh) {
  14400. return;
  14401. }
  14402. _this._currentMaterial.emissiveColor = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Color3"].Red();
  14403. };
  14404. _this.pointerOutAnimation = function () {
  14405. _this._currentMaterial.emissiveColor = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  14406. };
  14407. _this.pointerDownAnimation = function () {
  14408. if (!_this.mesh) {
  14409. return;
  14410. }
  14411. _this.mesh.scaling.scaleInPlace(0.95);
  14412. };
  14413. _this.pointerUpAnimation = function () {
  14414. if (!_this.mesh) {
  14415. return;
  14416. }
  14417. _this.mesh.scaling.scaleInPlace(1.0 / 0.95);
  14418. };
  14419. return _this;
  14420. }
  14421. Object.defineProperty(Button3D.prototype, "contentResolution", {
  14422. /**
  14423. * Gets or sets the texture resolution used to render content (512 by default)
  14424. */
  14425. get: function () {
  14426. return this._contentResolution;
  14427. },
  14428. set: function (value) {
  14429. if (this._contentResolution === value) {
  14430. return;
  14431. }
  14432. this._contentResolution = value;
  14433. this._resetContent();
  14434. },
  14435. enumerable: false,
  14436. configurable: true
  14437. });
  14438. Object.defineProperty(Button3D.prototype, "contentScaleRatio", {
  14439. /**
  14440. * Gets or sets the texture scale ratio used to render content (2 by default)
  14441. */
  14442. get: function () {
  14443. return this._contentScaleRatio;
  14444. },
  14445. set: function (value) {
  14446. if (this._contentScaleRatio === value) {
  14447. return;
  14448. }
  14449. this._contentScaleRatio = value;
  14450. this._resetContent();
  14451. },
  14452. enumerable: false,
  14453. configurable: true
  14454. });
  14455. Button3D.prototype._disposeFacadeTexture = function () {
  14456. if (this._facadeTexture) {
  14457. this._facadeTexture.dispose();
  14458. this._facadeTexture = null;
  14459. }
  14460. };
  14461. Button3D.prototype._resetContent = function () {
  14462. this._disposeFacadeTexture();
  14463. this.content = this._content;
  14464. };
  14465. Object.defineProperty(Button3D.prototype, "content", {
  14466. /**
  14467. * Gets or sets the GUI 2D content used to display the button's facade
  14468. */
  14469. get: function () {
  14470. return this._content;
  14471. },
  14472. set: function (value) {
  14473. this._content = value;
  14474. if (!this._host || !this._host.utilityLayer) {
  14475. return;
  14476. }
  14477. if (!this._facadeTexture) {
  14478. this._facadeTexture = new _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__["AdvancedDynamicTexture"]("Facade", this._contentResolution, this._contentResolution, this._host.utilityLayer.utilityLayerScene, true, babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Texture"].TRILINEAR_SAMPLINGMODE);
  14479. this._facadeTexture.rootContainer.scaleX = this._contentScaleRatio;
  14480. this._facadeTexture.rootContainer.scaleY = this._contentScaleRatio;
  14481. this._facadeTexture.premulAlpha = true;
  14482. }
  14483. else {
  14484. this._facadeTexture.rootContainer.clearControls();
  14485. }
  14486. this._facadeTexture.addControl(value);
  14487. this._applyFacade(this._facadeTexture);
  14488. },
  14489. enumerable: false,
  14490. configurable: true
  14491. });
  14492. /**
  14493. * Apply the facade texture (created from the content property).
  14494. * This function can be overloaded by child classes
  14495. * @param facadeTexture defines the AdvancedDynamicTexture to use
  14496. */
  14497. Button3D.prototype._applyFacade = function (facadeTexture) {
  14498. this._currentMaterial.emissiveTexture = facadeTexture;
  14499. };
  14500. Button3D.prototype._getTypeName = function () {
  14501. return "Button3D";
  14502. };
  14503. // Mesh association
  14504. Button3D.prototype._createNode = function (scene) {
  14505. var faceUV = new Array(6);
  14506. for (var i = 0; i < 6; i++) {
  14507. faceUV[i] = new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector4"](0, 0, 0, 0);
  14508. }
  14509. faceUV[1] = new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector4"](0, 0, 1, 1);
  14510. var mesh = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["BoxBuilder"].CreateBox(this.name + "_rootMesh", {
  14511. width: 1.0,
  14512. height: 1.0,
  14513. depth: 0.08,
  14514. faceUV: faceUV
  14515. }, scene);
  14516. return mesh;
  14517. };
  14518. Button3D.prototype._affectMaterial = function (mesh) {
  14519. var material = new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["StandardMaterial"](this.name + "Material", mesh.getScene());
  14520. material.specularColor = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  14521. mesh.material = material;
  14522. this._currentMaterial = material;
  14523. this._resetContent();
  14524. };
  14525. /**
  14526. * Releases all associated resources
  14527. */
  14528. Button3D.prototype.dispose = function () {
  14529. _super.prototype.dispose.call(this);
  14530. this._disposeFacadeTexture();
  14531. if (this._currentMaterial) {
  14532. this._currentMaterial.dispose();
  14533. }
  14534. };
  14535. return Button3D;
  14536. }(_abstractButton3D__WEBPACK_IMPORTED_MODULE_2__["AbstractButton3D"]));
  14537. /***/ }),
  14538. /***/ "./3D/controls/container3D.ts":
  14539. /*!************************************!*\
  14540. !*** ./3D/controls/container3D.ts ***!
  14541. \************************************/
  14542. /*! exports provided: Container3D */
  14543. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14544. "use strict";
  14545. __webpack_require__.r(__webpack_exports__);
  14546. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return Container3D; });
  14547. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  14548. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
  14549. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
  14550. /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
  14551. /**
  14552. * Class used to create containers for controls
  14553. */
  14554. var Container3D = /** @class */ (function (_super) {
  14555. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Container3D, _super);
  14556. /**
  14557. * Creates a new container
  14558. * @param name defines the container name
  14559. */
  14560. function Container3D(name) {
  14561. var _this = _super.call(this, name) || this;
  14562. _this._blockLayout = false;
  14563. /**
  14564. * Gets the list of child controls
  14565. */
  14566. _this._children = new Array();
  14567. return _this;
  14568. }
  14569. Object.defineProperty(Container3D.prototype, "children", {
  14570. /**
  14571. * Gets the list of child controls
  14572. */
  14573. get: function () {
  14574. return this._children;
  14575. },
  14576. enumerable: false,
  14577. configurable: true
  14578. });
  14579. Object.defineProperty(Container3D.prototype, "blockLayout", {
  14580. /**
  14581. * Gets or sets a boolean indicating if the layout must be blocked (default is false).
  14582. * This is helpful to optimize layout operation when adding multiple children in a row
  14583. */
  14584. get: function () {
  14585. return this._blockLayout;
  14586. },
  14587. set: function (value) {
  14588. if (this._blockLayout === value) {
  14589. return;
  14590. }
  14591. this._blockLayout = value;
  14592. if (!this._blockLayout) {
  14593. this._arrangeChildren();
  14594. }
  14595. },
  14596. enumerable: false,
  14597. configurable: true
  14598. });
  14599. /**
  14600. * Force the container to update the layout. Please note that it will not take blockLayout property in account
  14601. * @returns the current container
  14602. */
  14603. Container3D.prototype.updateLayout = function () {
  14604. this._arrangeChildren();
  14605. return this;
  14606. };
  14607. /**
  14608. * Gets a boolean indicating if the given control is in the children of this control
  14609. * @param control defines the control to check
  14610. * @returns true if the control is in the child list
  14611. */
  14612. Container3D.prototype.containsControl = function (control) {
  14613. return this._children.indexOf(control) !== -1;
  14614. };
  14615. /**
  14616. * Adds a control to the children of this control
  14617. * @param control defines the control to add
  14618. * @returns the current container
  14619. */
  14620. Container3D.prototype.addControl = function (control) {
  14621. var index = this._children.indexOf(control);
  14622. if (index !== -1) {
  14623. return this;
  14624. }
  14625. control.parent = this;
  14626. control._host = this._host;
  14627. this._children.push(control);
  14628. if (this._host.utilityLayer) {
  14629. control._prepareNode(this._host.utilityLayer.utilityLayerScene);
  14630. if (control.node) {
  14631. control.node.parent = this.node;
  14632. }
  14633. if (!this.blockLayout) {
  14634. this._arrangeChildren();
  14635. }
  14636. }
  14637. return this;
  14638. };
  14639. /**
  14640. * This function will be called everytime a new control is added
  14641. */
  14642. Container3D.prototype._arrangeChildren = function () {
  14643. };
  14644. Container3D.prototype._createNode = function (scene) {
  14645. return new babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__["TransformNode"]("ContainerNode", scene);
  14646. };
  14647. /**
  14648. * Removes a control from the children of this control
  14649. * @param control defines the control to remove
  14650. * @returns the current container
  14651. */
  14652. Container3D.prototype.removeControl = function (control) {
  14653. var index = this._children.indexOf(control);
  14654. if (index !== -1) {
  14655. this._children.splice(index, 1);
  14656. control.parent = null;
  14657. control._disposeNode();
  14658. }
  14659. return this;
  14660. };
  14661. Container3D.prototype._getTypeName = function () {
  14662. return "Container3D";
  14663. };
  14664. /**
  14665. * Releases all associated resources
  14666. */
  14667. Container3D.prototype.dispose = function () {
  14668. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  14669. var control = _a[_i];
  14670. control.dispose();
  14671. }
  14672. this._children = [];
  14673. _super.prototype.dispose.call(this);
  14674. };
  14675. /** Control rotation will remain unchanged */
  14676. Container3D.UNSET_ORIENTATION = 0;
  14677. /** Control will rotate to make it look at sphere central axis */
  14678. Container3D.FACEORIGIN_ORIENTATION = 1;
  14679. /** Control will rotate to make it look back at sphere central axis */
  14680. Container3D.FACEORIGINREVERSED_ORIENTATION = 2;
  14681. /** Control will rotate to look at z axis (0, 0, 1) */
  14682. Container3D.FACEFORWARD_ORIENTATION = 3;
  14683. /** Control will rotate to look at negative z axis (0, 0, -1) */
  14684. Container3D.FACEFORWARDREVERSED_ORIENTATION = 4;
  14685. return Container3D;
  14686. }(_control3D__WEBPACK_IMPORTED_MODULE_2__["Control3D"]));
  14687. /***/ }),
  14688. /***/ "./3D/controls/control3D.ts":
  14689. /*!**********************************!*\
  14690. !*** ./3D/controls/control3D.ts ***!
  14691. \**********************************/
  14692. /*! exports provided: Control3D */
  14693. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14694. "use strict";
  14695. __webpack_require__.r(__webpack_exports__);
  14696. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return Control3D; });
  14697. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  14698. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  14699. /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../vector3WithInfo */ "./3D/vector3WithInfo.ts");
  14700. /**
  14701. * Class used as base class for controls
  14702. */
  14703. var Control3D = /** @class */ (function () {
  14704. /**
  14705. * Creates a new control
  14706. * @param name defines the control name
  14707. */
  14708. function Control3D(
  14709. /** Defines the control name */
  14710. name) {
  14711. this.name = name;
  14712. this._downCount = 0;
  14713. this._enterCount = -1;
  14714. this._downPointerIds = {};
  14715. this._isVisible = true;
  14716. /**
  14717. * An event triggered when the pointer move over the control
  14718. */
  14719. this.onPointerMoveObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14720. /**
  14721. * An event triggered when the pointer move out of the control
  14722. */
  14723. this.onPointerOutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14724. /**
  14725. * An event triggered when the pointer taps the control
  14726. */
  14727. this.onPointerDownObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14728. /**
  14729. * An event triggered when pointer is up
  14730. */
  14731. this.onPointerUpObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14732. /**
  14733. * An event triggered when a control is clicked on (with a mouse)
  14734. */
  14735. this.onPointerClickObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14736. /**
  14737. * An event triggered when pointer enters the control
  14738. */
  14739. this.onPointerEnterObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14740. // Behaviors
  14741. this._behaviors = new Array();
  14742. }
  14743. Object.defineProperty(Control3D.prototype, "position", {
  14744. /** Gets or sets the control position in world space */
  14745. get: function () {
  14746. if (!this._node) {
  14747. return babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero();
  14748. }
  14749. return this._node.position;
  14750. },
  14751. set: function (value) {
  14752. if (!this._node) {
  14753. return;
  14754. }
  14755. this._node.position = value;
  14756. },
  14757. enumerable: false,
  14758. configurable: true
  14759. });
  14760. Object.defineProperty(Control3D.prototype, "scaling", {
  14761. /** Gets or sets the control scaling in world space */
  14762. get: function () {
  14763. if (!this._node) {
  14764. return new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"](1, 1, 1);
  14765. }
  14766. return this._node.scaling;
  14767. },
  14768. set: function (value) {
  14769. if (!this._node) {
  14770. return;
  14771. }
  14772. this._node.scaling = value;
  14773. },
  14774. enumerable: false,
  14775. configurable: true
  14776. });
  14777. Object.defineProperty(Control3D.prototype, "behaviors", {
  14778. /**
  14779. * Gets the list of attached behaviors
  14780. * @see https://doc.babylonjs.com/features/behaviour
  14781. */
  14782. get: function () {
  14783. return this._behaviors;
  14784. },
  14785. enumerable: false,
  14786. configurable: true
  14787. });
  14788. /**
  14789. * Attach a behavior to the control
  14790. * @see https://doc.babylonjs.com/features/behaviour
  14791. * @param behavior defines the behavior to attach
  14792. * @returns the current control
  14793. */
  14794. Control3D.prototype.addBehavior = function (behavior) {
  14795. var _this = this;
  14796. var index = this._behaviors.indexOf(behavior);
  14797. if (index !== -1) {
  14798. return this;
  14799. }
  14800. behavior.init();
  14801. var scene = this._host.scene;
  14802. if (scene.isLoading) {
  14803. // We defer the attach when the scene will be loaded
  14804. scene.onDataLoadedObservable.addOnce(function () {
  14805. behavior.attach(_this);
  14806. });
  14807. }
  14808. else {
  14809. behavior.attach(this);
  14810. }
  14811. this._behaviors.push(behavior);
  14812. return this;
  14813. };
  14814. /**
  14815. * Remove an attached behavior
  14816. * @see https://doc.babylonjs.com/features/behaviour
  14817. * @param behavior defines the behavior to attach
  14818. * @returns the current control
  14819. */
  14820. Control3D.prototype.removeBehavior = function (behavior) {
  14821. var index = this._behaviors.indexOf(behavior);
  14822. if (index === -1) {
  14823. return this;
  14824. }
  14825. this._behaviors[index].detach();
  14826. this._behaviors.splice(index, 1);
  14827. return this;
  14828. };
  14829. /**
  14830. * Gets an attached behavior by name
  14831. * @param name defines the name of the behavior to look for
  14832. * @see https://doc.babylonjs.com/features/behaviour
  14833. * @returns null if behavior was not found else the requested behavior
  14834. */
  14835. Control3D.prototype.getBehaviorByName = function (name) {
  14836. for (var _i = 0, _a = this._behaviors; _i < _a.length; _i++) {
  14837. var behavior = _a[_i];
  14838. if (behavior.name === name) {
  14839. return behavior;
  14840. }
  14841. }
  14842. return null;
  14843. };
  14844. Object.defineProperty(Control3D.prototype, "isVisible", {
  14845. /** Gets or sets a boolean indicating if the control is visible */
  14846. get: function () {
  14847. return this._isVisible;
  14848. },
  14849. set: function (value) {
  14850. if (this._isVisible === value) {
  14851. return;
  14852. }
  14853. this._isVisible = value;
  14854. var mesh = this.mesh;
  14855. if (mesh) {
  14856. mesh.setEnabled(value);
  14857. }
  14858. },
  14859. enumerable: false,
  14860. configurable: true
  14861. });
  14862. Object.defineProperty(Control3D.prototype, "typeName", {
  14863. /**
  14864. * Gets a string representing the class name
  14865. */
  14866. get: function () {
  14867. return this._getTypeName();
  14868. },
  14869. enumerable: false,
  14870. configurable: true
  14871. });
  14872. /**
  14873. * Get the current class name of the control.
  14874. * @returns current class name
  14875. */
  14876. Control3D.prototype.getClassName = function () {
  14877. return this._getTypeName();
  14878. };
  14879. Control3D.prototype._getTypeName = function () {
  14880. return "Control3D";
  14881. };
  14882. Object.defineProperty(Control3D.prototype, "node", {
  14883. /**
  14884. * Gets the transform node used by this control
  14885. */
  14886. get: function () {
  14887. return this._node;
  14888. },
  14889. enumerable: false,
  14890. configurable: true
  14891. });
  14892. Object.defineProperty(Control3D.prototype, "mesh", {
  14893. /**
  14894. * Gets the mesh used to render this control
  14895. */
  14896. get: function () {
  14897. if (this._node instanceof babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["AbstractMesh"]) {
  14898. return this._node;
  14899. }
  14900. return null;
  14901. },
  14902. enumerable: false,
  14903. configurable: true
  14904. });
  14905. /**
  14906. * Link the control as child of the given node
  14907. * @param node defines the node to link to. Use null to unlink the control
  14908. * @returns the current control
  14909. */
  14910. Control3D.prototype.linkToTransformNode = function (node) {
  14911. if (this._node) {
  14912. this._node.parent = node;
  14913. }
  14914. return this;
  14915. };
  14916. /** @hidden **/
  14917. Control3D.prototype._prepareNode = function (scene) {
  14918. if (!this._node) {
  14919. this._node = this._createNode(scene);
  14920. if (!this.node) {
  14921. return;
  14922. }
  14923. this._node.metadata = this; // Store the control on the metadata field in order to get it when picking
  14924. this._node.position = this.position;
  14925. this._node.scaling = this.scaling;
  14926. var mesh = this.mesh;
  14927. if (mesh) {
  14928. mesh.isPickable = true;
  14929. this._affectMaterial(mesh);
  14930. }
  14931. }
  14932. };
  14933. /**
  14934. * Node creation.
  14935. * Can be overriden by children
  14936. * @param scene defines the scene where the node must be attached
  14937. * @returns the attached node or null if none. Must return a Mesh or AbstractMesh if there is an atttached visible object
  14938. */
  14939. Control3D.prototype._createNode = function (scene) {
  14940. // Do nothing by default
  14941. return null;
  14942. };
  14943. /**
  14944. * Affect a material to the given mesh
  14945. * @param mesh defines the mesh which will represent the control
  14946. */
  14947. Control3D.prototype._affectMaterial = function (mesh) {
  14948. mesh.material = null;
  14949. };
  14950. // Pointers
  14951. /** @hidden */
  14952. Control3D.prototype._onPointerMove = function (target, coordinates) {
  14953. this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this);
  14954. };
  14955. /** @hidden */
  14956. Control3D.prototype._onPointerEnter = function (target) {
  14957. if (this._enterCount > 0) {
  14958. return false;
  14959. }
  14960. if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
  14961. this._enterCount = 0;
  14962. }
  14963. this._enterCount++;
  14964. this.onPointerEnterObservable.notifyObservers(this, -1, target, this);
  14965. if (this.pointerEnterAnimation) {
  14966. this.pointerEnterAnimation();
  14967. }
  14968. return true;
  14969. };
  14970. /** @hidden */
  14971. Control3D.prototype._onPointerOut = function (target) {
  14972. this._enterCount = 0;
  14973. this.onPointerOutObservable.notifyObservers(this, -1, target, this);
  14974. if (this.pointerOutAnimation) {
  14975. this.pointerOutAnimation();
  14976. }
  14977. };
  14978. /** @hidden */
  14979. Control3D.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  14980. if (this._downCount !== 0) {
  14981. this._downCount++;
  14982. return false;
  14983. }
  14984. this._downCount++;
  14985. this._downPointerIds[pointerId] = true;
  14986. this.onPointerDownObservable.notifyObservers(new _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"](coordinates, buttonIndex), -1, target, this);
  14987. if (this.pointerDownAnimation) {
  14988. this.pointerDownAnimation();
  14989. }
  14990. return true;
  14991. };
  14992. /** @hidden */
  14993. Control3D.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  14994. this._downCount--;
  14995. delete this._downPointerIds[pointerId];
  14996. if (this._downCount < 0) {
  14997. // Handle if forcePointerUp was called prior to this
  14998. this._downCount = 0;
  14999. return;
  15000. }
  15001. if (this._downCount == 0) {
  15002. if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
  15003. this.onPointerClickObservable.notifyObservers(new _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"](coordinates, buttonIndex), -1, target, this);
  15004. }
  15005. this.onPointerUpObservable.notifyObservers(new _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"](coordinates, buttonIndex), -1, target, this);
  15006. if (this.pointerUpAnimation) {
  15007. this.pointerUpAnimation();
  15008. }
  15009. }
  15010. };
  15011. /** @hidden */
  15012. Control3D.prototype.forcePointerUp = function (pointerId) {
  15013. if (pointerId === void 0) { pointerId = null; }
  15014. if (pointerId !== null) {
  15015. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero(), pointerId, 0, true);
  15016. }
  15017. else {
  15018. for (var key in this._downPointerIds) {
  15019. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero(), +key, 0, true);
  15020. }
  15021. if (this._downCount > 0) {
  15022. this._downCount = 1;
  15023. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero(), 0, 0, true);
  15024. }
  15025. }
  15026. };
  15027. /** @hidden */
  15028. Control3D.prototype._processObservables = function (type, pickedPoint, pointerId, buttonIndex) {
  15029. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERMOVE) {
  15030. this._onPointerMove(this, pickedPoint);
  15031. var previousControlOver = this._host._lastControlOver[pointerId];
  15032. if (previousControlOver && previousControlOver !== this) {
  15033. previousControlOver._onPointerOut(this);
  15034. }
  15035. if (previousControlOver !== this) {
  15036. this._onPointerEnter(this);
  15037. }
  15038. this._host._lastControlOver[pointerId] = this;
  15039. return true;
  15040. }
  15041. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERDOWN) {
  15042. this._onPointerDown(this, pickedPoint, pointerId, buttonIndex);
  15043. this._host._lastControlDown[pointerId] = this;
  15044. this._host._lastPickedControl = this;
  15045. return true;
  15046. }
  15047. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP || type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERDOUBLETAP) {
  15048. if (this._host._lastControlDown[pointerId]) {
  15049. this._host._lastControlDown[pointerId]._onPointerUp(this, pickedPoint, pointerId, buttonIndex, true);
  15050. }
  15051. delete this._host._lastControlDown[pointerId];
  15052. return true;
  15053. }
  15054. return false;
  15055. };
  15056. /** @hidden */
  15057. Control3D.prototype._disposeNode = function () {
  15058. if (this._node) {
  15059. this._node.dispose();
  15060. this._node = null;
  15061. }
  15062. };
  15063. /**
  15064. * Releases all associated resources
  15065. */
  15066. Control3D.prototype.dispose = function () {
  15067. this.onPointerDownObservable.clear();
  15068. this.onPointerEnterObservable.clear();
  15069. this.onPointerMoveObservable.clear();
  15070. this.onPointerOutObservable.clear();
  15071. this.onPointerUpObservable.clear();
  15072. this.onPointerClickObservable.clear();
  15073. this._disposeNode();
  15074. // Behaviors
  15075. for (var _i = 0, _a = this._behaviors; _i < _a.length; _i++) {
  15076. var behavior = _a[_i];
  15077. behavior.detach();
  15078. }
  15079. };
  15080. return Control3D;
  15081. }());
  15082. /***/ }),
  15083. /***/ "./3D/controls/cylinderPanel.ts":
  15084. /*!**************************************!*\
  15085. !*** ./3D/controls/cylinderPanel.ts ***!
  15086. \**************************************/
  15087. /*! exports provided: CylinderPanel */
  15088. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15089. "use strict";
  15090. __webpack_require__.r(__webpack_exports__);
  15091. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return CylinderPanel; });
  15092. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15093. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15094. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15095. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15096. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15097. /**
  15098. * Class used to create a container panel deployed on the surface of a cylinder
  15099. */
  15100. var CylinderPanel = /** @class */ (function (_super) {
  15101. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CylinderPanel, _super);
  15102. function CylinderPanel() {
  15103. var _this = _super !== null && _super.apply(this, arguments) || this;
  15104. _this._radius = 5.0;
  15105. return _this;
  15106. }
  15107. Object.defineProperty(CylinderPanel.prototype, "radius", {
  15108. /**
  15109. * Gets or sets the radius of the cylinder where to project controls (5 by default)
  15110. */
  15111. get: function () {
  15112. return this._radius;
  15113. },
  15114. set: function (value) {
  15115. var _this = this;
  15116. if (this._radius === value) {
  15117. return;
  15118. }
  15119. this._radius = value;
  15120. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15121. _this._arrangeChildren();
  15122. });
  15123. },
  15124. enumerable: false,
  15125. configurable: true
  15126. });
  15127. CylinderPanel.prototype._mapGridNode = function (control, nodePosition) {
  15128. var mesh = control.mesh;
  15129. if (!mesh) {
  15130. return;
  15131. }
  15132. var newPos = this._cylindricalMapping(nodePosition);
  15133. control.position = newPos;
  15134. switch (this.orientation) {
  15135. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGIN_ORIENTATION:
  15136. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](2 * newPos.x, newPos.y, 2 * newPos.z));
  15137. break;
  15138. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  15139. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](-newPos.x, newPos.y, -newPos.z));
  15140. break;
  15141. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARD_ORIENTATION:
  15142. break;
  15143. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  15144. mesh.rotate(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Axis"].Y, Math.PI, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Space"].LOCAL);
  15145. break;
  15146. }
  15147. };
  15148. CylinderPanel.prototype._cylindricalMapping = function (source) {
  15149. var newPos = new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, source.y, this._radius);
  15150. var yAngle = (source.x / this._radius);
  15151. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].RotationYawPitchRollToRef(yAngle, 0, 0, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15152. return babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormal(newPos, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15153. };
  15154. return CylinderPanel;
  15155. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__["VolumeBasedPanel"]));
  15156. /***/ }),
  15157. /***/ "./3D/controls/holographicButton.ts":
  15158. /*!******************************************!*\
  15159. !*** ./3D/controls/holographicButton.ts ***!
  15160. \******************************************/
  15161. /*! exports provided: HolographicButton */
  15162. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15163. "use strict";
  15164. __webpack_require__.r(__webpack_exports__);
  15165. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return HolographicButton; });
  15166. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15167. /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
  15168. /* harmony import */ var babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Materials/standardMaterial */ "babylonjs/Misc/perfCounter");
  15169. /* harmony import */ var babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__);
  15170. /* harmony import */ var _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../materials/fluentMaterial */ "./3D/materials/fluentMaterial.ts");
  15171. /* harmony import */ var _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../2D/controls/stackPanel */ "./2D/controls/stackPanel.ts");
  15172. /* harmony import */ var _2D_controls_image__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../2D/controls/image */ "./2D/controls/image.ts");
  15173. /* harmony import */ var _2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../2D/controls/textBlock */ "./2D/controls/textBlock.ts");
  15174. /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
  15175. /**
  15176. * Class used to create a holographic button in 3D
  15177. */
  15178. var HolographicButton = /** @class */ (function (_super) {
  15179. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(HolographicButton, _super);
  15180. /**
  15181. * Creates a new button
  15182. * @param name defines the control name
  15183. */
  15184. function HolographicButton(name, shareMaterials) {
  15185. if (shareMaterials === void 0) { shareMaterials = true; }
  15186. var _this = _super.call(this, name) || this;
  15187. _this._shareMaterials = true;
  15188. _this._shareMaterials = shareMaterials;
  15189. // Default animations
  15190. _this.pointerEnterAnimation = function () {
  15191. if (!_this.mesh) {
  15192. return;
  15193. }
  15194. _this._frontPlate.setEnabled(true);
  15195. };
  15196. _this.pointerOutAnimation = function () {
  15197. if (!_this.mesh) {
  15198. return;
  15199. }
  15200. _this._frontPlate.setEnabled(false);
  15201. };
  15202. return _this;
  15203. }
  15204. HolographicButton.prototype._disposeTooltip = function () {
  15205. this._tooltipFade = null;
  15206. if (this._tooltipTextBlock) {
  15207. this._tooltipTextBlock.dispose();
  15208. }
  15209. if (this._tooltipTexture) {
  15210. this._tooltipTexture.dispose();
  15211. }
  15212. if (this._tooltipMesh) {
  15213. this._tooltipMesh.dispose();
  15214. }
  15215. this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
  15216. this.onPointerOutObservable.remove(this._tooltipOutObserver);
  15217. };
  15218. Object.defineProperty(HolographicButton.prototype, "renderingGroupId", {
  15219. get: function () {
  15220. return this._backPlate.renderingGroupId;
  15221. },
  15222. /**
  15223. * Rendering ground id of all the mesh in the button
  15224. */
  15225. set: function (id) {
  15226. this._backPlate.renderingGroupId = id;
  15227. this._textPlate.renderingGroupId = id;
  15228. this._frontPlate.renderingGroupId = id;
  15229. if (this._tooltipMesh) {
  15230. this._tooltipMesh.renderingGroupId = id;
  15231. }
  15232. },
  15233. enumerable: false,
  15234. configurable: true
  15235. });
  15236. Object.defineProperty(HolographicButton.prototype, "tooltipText", {
  15237. get: function () {
  15238. if (this._tooltipTextBlock) {
  15239. return this._tooltipTextBlock.text;
  15240. }
  15241. return null;
  15242. },
  15243. /**
  15244. * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
  15245. */
  15246. set: function (text) {
  15247. var _this = this;
  15248. if (!text) {
  15249. this._disposeTooltip();
  15250. return;
  15251. }
  15252. if (!this._tooltipFade) {
  15253. // Create tooltip with mesh and text
  15254. this._tooltipMesh = babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["PlaneBuilder"].CreatePlane("", { size: 1 }, this._backPlate._scene);
  15255. var tooltipBackground = babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["PlaneBuilder"].CreatePlane("", { size: 1, sideOrientation: babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["Mesh"].DOUBLESIDE }, this._backPlate._scene);
  15256. var mat = new babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["StandardMaterial"]("", this._backPlate._scene);
  15257. mat.diffuseColor = babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["Color3"].FromHexString("#212121");
  15258. tooltipBackground.material = mat;
  15259. tooltipBackground.isPickable = false;
  15260. this._tooltipMesh.addChild(tooltipBackground);
  15261. tooltipBackground.position.z = 0.05;
  15262. this._tooltipMesh.scaling.y = 1 / 3;
  15263. this._tooltipMesh.position.y = 0.7;
  15264. this._tooltipMesh.position.z = -0.15;
  15265. this._tooltipMesh.isPickable = false;
  15266. this._tooltipMesh.parent = this._backPlate;
  15267. // Create text texture for the tooltip
  15268. this._tooltipTexture = _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_7__["AdvancedDynamicTexture"].CreateForMesh(this._tooltipMesh);
  15269. this._tooltipTextBlock = new _2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_6__["TextBlock"]();
  15270. this._tooltipTextBlock.scaleY = 3;
  15271. this._tooltipTextBlock.color = "white";
  15272. this._tooltipTextBlock.fontSize = 130;
  15273. this._tooltipTexture.addControl(this._tooltipTextBlock);
  15274. // Add hover action to tooltip
  15275. this._tooltipFade = new babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["FadeInOutBehavior"]();
  15276. this._tooltipFade.delay = 500;
  15277. this._tooltipMesh.addBehavior(this._tooltipFade);
  15278. this._tooltipHoverObserver = this.onPointerEnterObservable.add(function () {
  15279. if (_this._tooltipFade) {
  15280. _this._tooltipFade.fadeIn(true);
  15281. }
  15282. });
  15283. this._tooltipOutObserver = this.onPointerOutObservable.add(function () {
  15284. if (_this._tooltipFade) {
  15285. _this._tooltipFade.fadeIn(false);
  15286. }
  15287. });
  15288. }
  15289. if (this._tooltipTextBlock) {
  15290. this._tooltipTextBlock.text = text;
  15291. }
  15292. },
  15293. enumerable: false,
  15294. configurable: true
  15295. });
  15296. Object.defineProperty(HolographicButton.prototype, "text", {
  15297. /**
  15298. * Gets or sets text for the button
  15299. */
  15300. get: function () {
  15301. return this._text;
  15302. },
  15303. set: function (value) {
  15304. if (this._text === value) {
  15305. return;
  15306. }
  15307. this._text = value;
  15308. this._rebuildContent();
  15309. },
  15310. enumerable: false,
  15311. configurable: true
  15312. });
  15313. Object.defineProperty(HolographicButton.prototype, "imageUrl", {
  15314. /**
  15315. * Gets or sets the image url for the button
  15316. */
  15317. get: function () {
  15318. return this._imageUrl;
  15319. },
  15320. set: function (value) {
  15321. if (this._imageUrl === value) {
  15322. return;
  15323. }
  15324. this._imageUrl = value;
  15325. this._rebuildContent();
  15326. },
  15327. enumerable: false,
  15328. configurable: true
  15329. });
  15330. Object.defineProperty(HolographicButton.prototype, "backMaterial", {
  15331. /**
  15332. * Gets the back material used by this button
  15333. */
  15334. get: function () {
  15335. return this._backMaterial;
  15336. },
  15337. enumerable: false,
  15338. configurable: true
  15339. });
  15340. Object.defineProperty(HolographicButton.prototype, "frontMaterial", {
  15341. /**
  15342. * Gets the front material used by this button
  15343. */
  15344. get: function () {
  15345. return this._frontMaterial;
  15346. },
  15347. enumerable: false,
  15348. configurable: true
  15349. });
  15350. Object.defineProperty(HolographicButton.prototype, "plateMaterial", {
  15351. /**
  15352. * Gets the plate material used by this button
  15353. */
  15354. get: function () {
  15355. return this._plateMaterial;
  15356. },
  15357. enumerable: false,
  15358. configurable: true
  15359. });
  15360. Object.defineProperty(HolographicButton.prototype, "shareMaterials", {
  15361. /**
  15362. * Gets a boolean indicating if this button shares its material with other HolographicButtons
  15363. */
  15364. get: function () {
  15365. return this._shareMaterials;
  15366. },
  15367. enumerable: false,
  15368. configurable: true
  15369. });
  15370. HolographicButton.prototype._getTypeName = function () {
  15371. return "HolographicButton";
  15372. };
  15373. HolographicButton.prototype._rebuildContent = function () {
  15374. this._disposeFacadeTexture();
  15375. var panel = new _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__["StackPanel"]();
  15376. panel.isVertical = true;
  15377. if (this._imageUrl) {
  15378. var image = new _2D_controls_image__WEBPACK_IMPORTED_MODULE_5__["Image"]();
  15379. image.source = this._imageUrl;
  15380. image.paddingTop = "40px";
  15381. image.height = "180px";
  15382. image.width = "100px";
  15383. image.paddingBottom = "40px";
  15384. panel.addControl(image);
  15385. }
  15386. if (this._text) {
  15387. var text = new _2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_6__["TextBlock"]();
  15388. text.text = this._text;
  15389. text.color = "white";
  15390. text.height = "30px";
  15391. text.fontSize = 24;
  15392. panel.addControl(text);
  15393. }
  15394. if (this._frontPlate) {
  15395. this.content = panel;
  15396. }
  15397. };
  15398. // Mesh association
  15399. HolographicButton.prototype._createNode = function (scene) {
  15400. this._backPlate = babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["BoxBuilder"].CreateBox(this.name + "BackMesh", {
  15401. width: 1.0,
  15402. height: 1.0,
  15403. depth: 0.08
  15404. }, scene);
  15405. this._frontPlate = babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["BoxBuilder"].CreateBox(this.name + "FrontMesh", {
  15406. width: 1.0,
  15407. height: 1.0,
  15408. depth: 0.08
  15409. }, scene);
  15410. this._frontPlate.parent = this._backPlate;
  15411. this._frontPlate.position.z = -0.08;
  15412. this._frontPlate.isPickable = false;
  15413. this._frontPlate.setEnabled(false);
  15414. this._textPlate = _super.prototype._createNode.call(this, scene);
  15415. this._textPlate.parent = this._backPlate;
  15416. this._textPlate.position.z = -0.08;
  15417. this._textPlate.isPickable = false;
  15418. return this._backPlate;
  15419. };
  15420. HolographicButton.prototype._applyFacade = function (facadeTexture) {
  15421. this._plateMaterial.emissiveTexture = facadeTexture;
  15422. this._plateMaterial.opacityTexture = facadeTexture;
  15423. };
  15424. HolographicButton.prototype._createBackMaterial = function (mesh) {
  15425. var _this = this;
  15426. this._backMaterial = new _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__["FluentMaterial"](this.name + "Back Material", mesh.getScene());
  15427. this._backMaterial.renderHoverLight = true;
  15428. this._pickedPointObserver = this._host.onPickedPointChangedObservable.add(function (pickedPoint) {
  15429. if (pickedPoint) {
  15430. _this._backMaterial.hoverPosition = pickedPoint;
  15431. _this._backMaterial.hoverColor.a = 1.0;
  15432. }
  15433. else {
  15434. _this._backMaterial.hoverColor.a = 0;
  15435. }
  15436. });
  15437. };
  15438. HolographicButton.prototype._createFrontMaterial = function (mesh) {
  15439. this._frontMaterial = new _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__["FluentMaterial"](this.name + "Front Material", mesh.getScene());
  15440. this._frontMaterial.innerGlowColorIntensity = 0; // No inner glow
  15441. this._frontMaterial.alpha = 0.5; // Additive
  15442. this._frontMaterial.renderBorders = true;
  15443. };
  15444. HolographicButton.prototype._createPlateMaterial = function (mesh) {
  15445. this._plateMaterial = new babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["StandardMaterial"](this.name + "Plate Material", mesh.getScene());
  15446. this._plateMaterial.specularColor = babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__["Color3"].Black();
  15447. };
  15448. HolographicButton.prototype._affectMaterial = function (mesh) {
  15449. // Back
  15450. if (this._shareMaterials) {
  15451. if (!this._host._sharedMaterials["backFluentMaterial"]) {
  15452. this._createBackMaterial(mesh);
  15453. this._host._sharedMaterials["backFluentMaterial"] = this._backMaterial;
  15454. }
  15455. else {
  15456. this._backMaterial = this._host._sharedMaterials["backFluentMaterial"];
  15457. }
  15458. // Front
  15459. if (!this._host._sharedMaterials["frontFluentMaterial"]) {
  15460. this._createFrontMaterial(mesh);
  15461. this._host._sharedMaterials["frontFluentMaterial"] = this._frontMaterial;
  15462. }
  15463. else {
  15464. this._frontMaterial = this._host._sharedMaterials["frontFluentMaterial"];
  15465. }
  15466. }
  15467. else {
  15468. this._createBackMaterial(mesh);
  15469. this._createFrontMaterial(mesh);
  15470. }
  15471. this._createPlateMaterial(mesh);
  15472. this._backPlate.material = this._backMaterial;
  15473. this._frontPlate.material = this._frontMaterial;
  15474. this._textPlate.material = this._plateMaterial;
  15475. this._rebuildContent();
  15476. };
  15477. /**
  15478. * Releases all associated resources
  15479. */
  15480. HolographicButton.prototype.dispose = function () {
  15481. _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
  15482. this._disposeTooltip();
  15483. if (!this.shareMaterials) {
  15484. this._backMaterial.dispose();
  15485. this._frontMaterial.dispose();
  15486. this._plateMaterial.dispose();
  15487. if (this._pickedPointObserver) {
  15488. this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
  15489. this._pickedPointObserver = null;
  15490. }
  15491. }
  15492. };
  15493. return HolographicButton;
  15494. }(_button3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]));
  15495. /***/ }),
  15496. /***/ "./3D/controls/index.ts":
  15497. /*!******************************!*\
  15498. !*** ./3D/controls/index.ts ***!
  15499. \******************************/
  15500. /*! exports provided: AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel */
  15501. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15502. "use strict";
  15503. __webpack_require__.r(__webpack_exports__);
  15504. /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
  15505. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _abstractButton3D__WEBPACK_IMPORTED_MODULE_0__["AbstractButton3D"]; });
  15506. /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
  15507. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _button3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]; });
  15508. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15509. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"]; });
  15510. /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
  15511. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _control3D__WEBPACK_IMPORTED_MODULE_3__["Control3D"]; });
  15512. /* harmony import */ var _cylinderPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./cylinderPanel */ "./3D/controls/cylinderPanel.ts");
  15513. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _cylinderPanel__WEBPACK_IMPORTED_MODULE_4__["CylinderPanel"]; });
  15514. /* harmony import */ var _holographicButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./holographicButton */ "./3D/controls/holographicButton.ts");
  15515. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _holographicButton__WEBPACK_IMPORTED_MODULE_5__["HolographicButton"]; });
  15516. /* harmony import */ var _meshButton3D__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./meshButton3D */ "./3D/controls/meshButton3D.ts");
  15517. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _meshButton3D__WEBPACK_IMPORTED_MODULE_6__["MeshButton3D"]; });
  15518. /* harmony import */ var _planePanel__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./planePanel */ "./3D/controls/planePanel.ts");
  15519. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _planePanel__WEBPACK_IMPORTED_MODULE_7__["PlanePanel"]; });
  15520. /* harmony import */ var _scatterPanel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./scatterPanel */ "./3D/controls/scatterPanel.ts");
  15521. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _scatterPanel__WEBPACK_IMPORTED_MODULE_8__["ScatterPanel"]; });
  15522. /* harmony import */ var _spherePanel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./spherePanel */ "./3D/controls/spherePanel.ts");
  15523. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _spherePanel__WEBPACK_IMPORTED_MODULE_9__["SpherePanel"]; });
  15524. /* harmony import */ var _stackPanel3D__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./stackPanel3D */ "./3D/controls/stackPanel3D.ts");
  15525. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _stackPanel3D__WEBPACK_IMPORTED_MODULE_10__["StackPanel3D"]; });
  15526. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15527. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_11__["VolumeBasedPanel"]; });
  15528. /***/ }),
  15529. /***/ "./3D/controls/meshButton3D.ts":
  15530. /*!*************************************!*\
  15531. !*** ./3D/controls/meshButton3D.ts ***!
  15532. \*************************************/
  15533. /*! exports provided: MeshButton3D */
  15534. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15535. "use strict";
  15536. __webpack_require__.r(__webpack_exports__);
  15537. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return MeshButton3D; });
  15538. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15539. /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
  15540. /**
  15541. * Class used to create an interactable object. It's a 3D button using a mesh coming from the current scene
  15542. */
  15543. var MeshButton3D = /** @class */ (function (_super) {
  15544. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(MeshButton3D, _super);
  15545. /**
  15546. * Creates a new 3D button based on a mesh
  15547. * @param mesh mesh to become a 3D button
  15548. * @param name defines the control name
  15549. */
  15550. function MeshButton3D(mesh, name) {
  15551. var _this = _super.call(this, name) || this;
  15552. _this._currentMesh = mesh;
  15553. /**
  15554. * Provides a default behavior on hover/out & up/down
  15555. * Override those function to create your own desired behavior specific to your mesh
  15556. */
  15557. _this.pointerEnterAnimation = function () {
  15558. if (!_this.mesh) {
  15559. return;
  15560. }
  15561. _this.mesh.scaling.scaleInPlace(1.1);
  15562. };
  15563. _this.pointerOutAnimation = function () {
  15564. if (!_this.mesh) {
  15565. return;
  15566. }
  15567. _this.mesh.scaling.scaleInPlace(1.0 / 1.1);
  15568. };
  15569. _this.pointerDownAnimation = function () {
  15570. if (!_this.mesh) {
  15571. return;
  15572. }
  15573. _this.mesh.scaling.scaleInPlace(0.95);
  15574. };
  15575. _this.pointerUpAnimation = function () {
  15576. if (!_this.mesh) {
  15577. return;
  15578. }
  15579. _this.mesh.scaling.scaleInPlace(1.0 / 0.95);
  15580. };
  15581. return _this;
  15582. }
  15583. MeshButton3D.prototype._getTypeName = function () {
  15584. return "MeshButton3D";
  15585. };
  15586. // Mesh association
  15587. MeshButton3D.prototype._createNode = function (scene) {
  15588. var _this = this;
  15589. this._currentMesh.getChildMeshes().forEach(function (mesh) {
  15590. mesh.metadata = _this;
  15591. });
  15592. return this._currentMesh;
  15593. };
  15594. MeshButton3D.prototype._affectMaterial = function (mesh) {
  15595. };
  15596. return MeshButton3D;
  15597. }(_button3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]));
  15598. /***/ }),
  15599. /***/ "./3D/controls/planePanel.ts":
  15600. /*!***********************************!*\
  15601. !*** ./3D/controls/planePanel.ts ***!
  15602. \***********************************/
  15603. /*! exports provided: PlanePanel */
  15604. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15605. "use strict";
  15606. __webpack_require__.r(__webpack_exports__);
  15607. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return PlanePanel; });
  15608. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15609. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
  15610. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
  15611. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15612. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15613. /**
  15614. * Class used to create a container panel deployed on the surface of a plane
  15615. */
  15616. var PlanePanel = /** @class */ (function (_super) {
  15617. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PlanePanel, _super);
  15618. function PlanePanel() {
  15619. return _super !== null && _super.apply(this, arguments) || this;
  15620. }
  15621. PlanePanel.prototype._mapGridNode = function (control, nodePosition) {
  15622. var mesh = control.mesh;
  15623. if (!mesh) {
  15624. return;
  15625. }
  15626. control.position = nodePosition.clone();
  15627. var target = babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0];
  15628. target.copyFrom(nodePosition);
  15629. switch (this.orientation) {
  15630. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEORIGIN_ORIENTATION:
  15631. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEFORWARD_ORIENTATION:
  15632. target.addInPlace(new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, 1));
  15633. mesh.lookAt(target);
  15634. break;
  15635. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  15636. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  15637. target.addInPlace(new babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, -1));
  15638. mesh.lookAt(target);
  15639. break;
  15640. }
  15641. };
  15642. return PlanePanel;
  15643. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__["VolumeBasedPanel"]));
  15644. /***/ }),
  15645. /***/ "./3D/controls/scatterPanel.ts":
  15646. /*!*************************************!*\
  15647. !*** ./3D/controls/scatterPanel.ts ***!
  15648. \*************************************/
  15649. /*! exports provided: ScatterPanel */
  15650. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15651. "use strict";
  15652. __webpack_require__.r(__webpack_exports__);
  15653. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return ScatterPanel; });
  15654. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15655. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15656. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15657. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15658. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15659. /**
  15660. * Class used to create a container panel where items get randomized planar mapping
  15661. */
  15662. var ScatterPanel = /** @class */ (function (_super) {
  15663. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScatterPanel, _super);
  15664. function ScatterPanel() {
  15665. var _this = _super !== null && _super.apply(this, arguments) || this;
  15666. _this._iteration = 100.0;
  15667. return _this;
  15668. }
  15669. Object.defineProperty(ScatterPanel.prototype, "iteration", {
  15670. /**
  15671. * Gets or sets the number of iteration to use to scatter the controls (100 by default)
  15672. */
  15673. get: function () {
  15674. return this._iteration;
  15675. },
  15676. set: function (value) {
  15677. var _this = this;
  15678. if (this._iteration === value) {
  15679. return;
  15680. }
  15681. this._iteration = value;
  15682. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15683. _this._arrangeChildren();
  15684. });
  15685. },
  15686. enumerable: false,
  15687. configurable: true
  15688. });
  15689. ScatterPanel.prototype._mapGridNode = function (control, nodePosition) {
  15690. var mesh = control.mesh;
  15691. var newPos = this._scatterMapping(nodePosition);
  15692. if (!mesh) {
  15693. return;
  15694. }
  15695. switch (this.orientation) {
  15696. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGIN_ORIENTATION:
  15697. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARD_ORIENTATION:
  15698. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, 1));
  15699. break;
  15700. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  15701. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  15702. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, -1));
  15703. break;
  15704. }
  15705. control.position = newPos;
  15706. };
  15707. ScatterPanel.prototype._scatterMapping = function (source) {
  15708. source.x = (1.0 - Math.random() * 2.0) * this._cellWidth;
  15709. source.y = (1.0 - Math.random() * 2.0) * this._cellHeight;
  15710. return source;
  15711. };
  15712. ScatterPanel.prototype._finalProcessing = function () {
  15713. var meshes = [];
  15714. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  15715. var child = _a[_i];
  15716. if (!child.mesh) {
  15717. continue;
  15718. }
  15719. meshes.push(child.mesh);
  15720. }
  15721. for (var count = 0; count < this._iteration; count++) {
  15722. meshes.sort(function (a, b) {
  15723. var distance1 = a.position.lengthSquared();
  15724. var distance2 = b.position.lengthSquared();
  15725. if (distance1 < distance2) {
  15726. return 1;
  15727. }
  15728. else if (distance1 > distance2) {
  15729. return -1;
  15730. }
  15731. return 0;
  15732. });
  15733. var radiusPaddingSquared = Math.pow(this.margin, 2.0);
  15734. var cellSize = Math.max(this._cellWidth, this._cellHeight);
  15735. var difference2D = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector2[0];
  15736. var difference = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0];
  15737. for (var i = 0; i < meshes.length - 1; i++) {
  15738. for (var j = i + 1; j < meshes.length; j++) {
  15739. if (i != j) {
  15740. meshes[j].position.subtractToRef(meshes[i].position, difference);
  15741. // Ignore Z axis
  15742. difference2D.x = difference.x;
  15743. difference2D.y = difference.y;
  15744. var combinedRadius = cellSize;
  15745. var distance = difference2D.lengthSquared() - radiusPaddingSquared;
  15746. var minSeparation = Math.min(distance, radiusPaddingSquared);
  15747. distance -= minSeparation;
  15748. if (distance < (Math.pow(combinedRadius, 2.0))) {
  15749. difference2D.normalize();
  15750. difference.scaleInPlace((combinedRadius - Math.sqrt(distance)) * 0.5);
  15751. meshes[j].position.addInPlace(difference);
  15752. meshes[i].position.subtractInPlace(difference);
  15753. }
  15754. }
  15755. }
  15756. }
  15757. }
  15758. };
  15759. return ScatterPanel;
  15760. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__["VolumeBasedPanel"]));
  15761. /***/ }),
  15762. /***/ "./3D/controls/spherePanel.ts":
  15763. /*!************************************!*\
  15764. !*** ./3D/controls/spherePanel.ts ***!
  15765. \************************************/
  15766. /*! exports provided: SpherePanel */
  15767. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15768. "use strict";
  15769. __webpack_require__.r(__webpack_exports__);
  15770. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return SpherePanel; });
  15771. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15772. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15773. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15774. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15775. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15776. /**
  15777. * Class used to create a container panel deployed on the surface of a sphere
  15778. */
  15779. var SpherePanel = /** @class */ (function (_super) {
  15780. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SpherePanel, _super);
  15781. function SpherePanel() {
  15782. var _this = _super !== null && _super.apply(this, arguments) || this;
  15783. _this._radius = 5.0;
  15784. return _this;
  15785. }
  15786. Object.defineProperty(SpherePanel.prototype, "radius", {
  15787. /**
  15788. * Gets or sets the radius of the sphere where to project controls (5 by default)
  15789. */
  15790. get: function () {
  15791. return this._radius;
  15792. },
  15793. set: function (value) {
  15794. var _this = this;
  15795. if (this._radius === value) {
  15796. return;
  15797. }
  15798. this._radius = value;
  15799. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15800. _this._arrangeChildren();
  15801. });
  15802. },
  15803. enumerable: false,
  15804. configurable: true
  15805. });
  15806. SpherePanel.prototype._mapGridNode = function (control, nodePosition) {
  15807. var mesh = control.mesh;
  15808. if (!mesh) {
  15809. return;
  15810. }
  15811. var newPos = this._sphericalMapping(nodePosition);
  15812. control.position = newPos;
  15813. switch (this.orientation) {
  15814. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGIN_ORIENTATION:
  15815. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](2 * newPos.x, 2 * newPos.y, 2 * newPos.z));
  15816. break;
  15817. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  15818. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](-newPos.x, -newPos.y, -newPos.z));
  15819. break;
  15820. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARD_ORIENTATION:
  15821. break;
  15822. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  15823. mesh.rotate(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Axis"].Y, Math.PI, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Space"].LOCAL);
  15824. break;
  15825. }
  15826. };
  15827. SpherePanel.prototype._sphericalMapping = function (source) {
  15828. var newPos = new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, this._radius);
  15829. var xAngle = (source.y / this._radius);
  15830. var yAngle = -(source.x / this._radius);
  15831. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].RotationYawPitchRollToRef(yAngle, xAngle, 0, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15832. return babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormal(newPos, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15833. };
  15834. return SpherePanel;
  15835. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__["VolumeBasedPanel"]));
  15836. /***/ }),
  15837. /***/ "./3D/controls/stackPanel3D.ts":
  15838. /*!*************************************!*\
  15839. !*** ./3D/controls/stackPanel3D.ts ***!
  15840. \*************************************/
  15841. /*! exports provided: StackPanel3D */
  15842. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15843. "use strict";
  15844. __webpack_require__.r(__webpack_exports__);
  15845. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return StackPanel3D; });
  15846. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15847. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15848. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15849. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15850. /**
  15851. * Class used to create a stack panel in 3D on XY plane
  15852. */
  15853. var StackPanel3D = /** @class */ (function (_super) {
  15854. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(StackPanel3D, _super);
  15855. /**
  15856. * Creates new StackPanel
  15857. * @param isVertical
  15858. */
  15859. function StackPanel3D(isVertical) {
  15860. if (isVertical === void 0) { isVertical = false; }
  15861. var _this = _super.call(this) || this;
  15862. _this._isVertical = false;
  15863. /**
  15864. * Gets or sets the distance between elements
  15865. */
  15866. _this.margin = 0.1;
  15867. _this._isVertical = isVertical;
  15868. return _this;
  15869. }
  15870. Object.defineProperty(StackPanel3D.prototype, "isVertical", {
  15871. /**
  15872. * Gets or sets a boolean indicating if the stack panel is vertical or horizontal (horizontal by default)
  15873. */
  15874. get: function () {
  15875. return this._isVertical;
  15876. },
  15877. set: function (value) {
  15878. var _this = this;
  15879. if (this._isVertical === value) {
  15880. return;
  15881. }
  15882. this._isVertical = value;
  15883. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15884. _this._arrangeChildren();
  15885. });
  15886. },
  15887. enumerable: false,
  15888. configurable: true
  15889. });
  15890. StackPanel3D.prototype._arrangeChildren = function () {
  15891. var width = 0;
  15892. var height = 0;
  15893. var controlCount = 0;
  15894. var extendSizes = [];
  15895. var currentInverseWorld = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].Invert(this.node.computeWorldMatrix(true));
  15896. // Measure
  15897. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  15898. var child = _a[_i];
  15899. if (!child.mesh) {
  15900. continue;
  15901. }
  15902. controlCount++;
  15903. child.mesh.computeWorldMatrix(true);
  15904. child.mesh.getWorldMatrix().multiplyToRef(currentInverseWorld, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15905. var boundingBox = child.mesh.getBoundingInfo().boundingBox;
  15906. var extendSize = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormal(boundingBox.extendSize, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15907. extendSizes.push(extendSize);
  15908. if (this._isVertical) {
  15909. height += extendSize.y;
  15910. }
  15911. else {
  15912. width += extendSize.x;
  15913. }
  15914. }
  15915. if (this._isVertical) {
  15916. height += (controlCount - 1) * this.margin / 2;
  15917. }
  15918. else {
  15919. width += (controlCount - 1) * this.margin / 2;
  15920. }
  15921. // Arrange
  15922. var offset;
  15923. if (this._isVertical) {
  15924. offset = -height;
  15925. }
  15926. else {
  15927. offset = -width;
  15928. }
  15929. var index = 0;
  15930. for (var _b = 0, _c = this._children; _b < _c.length; _b++) {
  15931. var child = _c[_b];
  15932. if (!child.mesh) {
  15933. continue;
  15934. }
  15935. controlCount--;
  15936. var extendSize = extendSizes[index++];
  15937. if (this._isVertical) {
  15938. child.position.y = offset + extendSize.y;
  15939. child.position.x = 0;
  15940. offset += extendSize.y * 2;
  15941. }
  15942. else {
  15943. child.position.x = offset + extendSize.x;
  15944. child.position.y = 0;
  15945. offset += extendSize.x * 2;
  15946. }
  15947. offset += (controlCount > 0 ? this.margin : 0);
  15948. }
  15949. };
  15950. return StackPanel3D;
  15951. }(_container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"]));
  15952. /***/ }),
  15953. /***/ "./3D/controls/volumeBasedPanel.ts":
  15954. /*!*****************************************!*\
  15955. !*** ./3D/controls/volumeBasedPanel.ts ***!
  15956. \*****************************************/
  15957. /*! exports provided: VolumeBasedPanel */
  15958. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15959. "use strict";
  15960. __webpack_require__.r(__webpack_exports__);
  15961. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return VolumeBasedPanel; });
  15962. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15963. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15964. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15965. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15966. /**
  15967. * Abstract class used to create a container panel deployed on the surface of a volume
  15968. */
  15969. var VolumeBasedPanel = /** @class */ (function (_super) {
  15970. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(VolumeBasedPanel, _super);
  15971. /**
  15972. * Creates new VolumeBasedPanel
  15973. */
  15974. function VolumeBasedPanel() {
  15975. var _this = _super.call(this) || this;
  15976. _this._columns = 10;
  15977. _this._rows = 0;
  15978. _this._rowThenColum = true;
  15979. _this._orientation = _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEORIGIN_ORIENTATION;
  15980. /**
  15981. * Gets or sets the distance between elements
  15982. */
  15983. _this.margin = 0;
  15984. return _this;
  15985. }
  15986. Object.defineProperty(VolumeBasedPanel.prototype, "orientation", {
  15987. /**
  15988. * Gets or sets the orientation to apply to all controls (BABYLON.Container3D.FaceOriginReversedOrientation by default)
  15989. * | Value | Type | Description |
  15990. * | ----- | ----------------------------------- | ----------- |
  15991. * | 0 | UNSET_ORIENTATION | Control rotation will remain unchanged |
  15992. * | 1 | FACEORIGIN_ORIENTATION | Control will rotate to make it look at sphere central axis |
  15993. * | 2 | FACEORIGINREVERSED_ORIENTATION | Control will rotate to make it look back at sphere central axis |
  15994. * | 3 | FACEFORWARD_ORIENTATION | Control will rotate to look at z axis (0, 0, 1) |
  15995. * | 4 | FACEFORWARDREVERSED_ORIENTATION | Control will rotate to look at negative z axis (0, 0, -1) |
  15996. */
  15997. get: function () {
  15998. return this._orientation;
  15999. },
  16000. set: function (value) {
  16001. var _this = this;
  16002. if (this._orientation === value) {
  16003. return;
  16004. }
  16005. this._orientation = value;
  16006. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  16007. _this._arrangeChildren();
  16008. });
  16009. },
  16010. enumerable: false,
  16011. configurable: true
  16012. });
  16013. Object.defineProperty(VolumeBasedPanel.prototype, "columns", {
  16014. /**
  16015. * Gets or sets the number of columns requested (10 by default).
  16016. * The panel will automatically compute the number of rows based on number of child controls.
  16017. */
  16018. get: function () {
  16019. return this._columns;
  16020. },
  16021. set: function (value) {
  16022. var _this = this;
  16023. if (this._columns === value) {
  16024. return;
  16025. }
  16026. this._columns = value;
  16027. this._rowThenColum = true;
  16028. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  16029. _this._arrangeChildren();
  16030. });
  16031. },
  16032. enumerable: false,
  16033. configurable: true
  16034. });
  16035. Object.defineProperty(VolumeBasedPanel.prototype, "rows", {
  16036. /**
  16037. * Gets or sets a the number of rows requested.
  16038. * The panel will automatically compute the number of columns based on number of child controls.
  16039. */
  16040. get: function () {
  16041. return this._rows;
  16042. },
  16043. set: function (value) {
  16044. var _this = this;
  16045. if (this._rows === value) {
  16046. return;
  16047. }
  16048. this._rows = value;
  16049. this._rowThenColum = false;
  16050. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  16051. _this._arrangeChildren();
  16052. });
  16053. },
  16054. enumerable: false,
  16055. configurable: true
  16056. });
  16057. VolumeBasedPanel.prototype._arrangeChildren = function () {
  16058. this._cellWidth = 0;
  16059. this._cellHeight = 0;
  16060. var rows = 0;
  16061. var columns = 0;
  16062. var controlCount = 0;
  16063. var currentInverseWorld = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].Invert(this.node.computeWorldMatrix(true));
  16064. // Measure
  16065. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  16066. var child = _a[_i];
  16067. if (!child.mesh) {
  16068. continue;
  16069. }
  16070. controlCount++;
  16071. child.mesh.computeWorldMatrix(true);
  16072. // child.mesh.getWorldMatrix().multiplyToRef(currentInverseWorld, Tmp.Matrix[0]);
  16073. var boundingBox = child.mesh.getHierarchyBoundingVectors();
  16074. var extendSize = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0];
  16075. var diff = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[1];
  16076. boundingBox.max.subtractToRef(boundingBox.min, diff);
  16077. diff.scaleInPlace(0.5);
  16078. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormalToRef(diff, currentInverseWorld, extendSize);
  16079. this._cellWidth = Math.max(this._cellWidth, extendSize.x * 2);
  16080. this._cellHeight = Math.max(this._cellHeight, extendSize.y * 2);
  16081. }
  16082. this._cellWidth += this.margin * 2;
  16083. this._cellHeight += this.margin * 2;
  16084. // Arrange
  16085. if (this._rowThenColum) {
  16086. columns = this._columns;
  16087. rows = Math.ceil(controlCount / this._columns);
  16088. }
  16089. else {
  16090. rows = this._rows;
  16091. columns = Math.ceil(controlCount / this._rows);
  16092. }
  16093. var startOffsetX = (columns * 0.5) * this._cellWidth;
  16094. var startOffsetY = (rows * 0.5) * this._cellHeight;
  16095. var nodeGrid = [];
  16096. var cellCounter = 0;
  16097. if (this._rowThenColum) {
  16098. for (var r = 0; r < rows; r++) {
  16099. for (var c = 0; c < columns; c++) {
  16100. nodeGrid.push(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"]((c * this._cellWidth) - startOffsetX + this._cellWidth / 2, (r * this._cellHeight) - startOffsetY + this._cellHeight / 2, 0));
  16101. cellCounter++;
  16102. if (cellCounter > controlCount) {
  16103. break;
  16104. }
  16105. }
  16106. }
  16107. }
  16108. else {
  16109. for (var c = 0; c < columns; c++) {
  16110. for (var r = 0; r < rows; r++) {
  16111. nodeGrid.push(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"]((c * this._cellWidth) - startOffsetX + this._cellWidth / 2, (r * this._cellHeight) - startOffsetY + this._cellHeight / 2, 0));
  16112. cellCounter++;
  16113. if (cellCounter > controlCount) {
  16114. break;
  16115. }
  16116. }
  16117. }
  16118. }
  16119. cellCounter = 0;
  16120. for (var _b = 0, _c = this._children; _b < _c.length; _b++) {
  16121. var child = _c[_b];
  16122. if (!child.mesh) {
  16123. continue;
  16124. }
  16125. this._mapGridNode(child, nodeGrid[cellCounter]);
  16126. cellCounter++;
  16127. }
  16128. this._finalProcessing();
  16129. };
  16130. /** Child classes can implement this function to provide additional processing */
  16131. VolumeBasedPanel.prototype._finalProcessing = function () {
  16132. };
  16133. return VolumeBasedPanel;
  16134. }(_container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"]));
  16135. /***/ }),
  16136. /***/ "./3D/gui3DManager.ts":
  16137. /*!****************************!*\
  16138. !*** ./3D/gui3DManager.ts ***!
  16139. \****************************/
  16140. /*! exports provided: GUI3DManager */
  16141. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16142. "use strict";
  16143. __webpack_require__.r(__webpack_exports__);
  16144. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return GUI3DManager; });
  16145. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  16146. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  16147. /* harmony import */ var _controls_container3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./controls/container3D */ "./3D/controls/container3D.ts");
  16148. /**
  16149. * Class used to manage 3D user interface
  16150. * @see https://doc.babylonjs.com/how_to/gui3d
  16151. */
  16152. var GUI3DManager = /** @class */ (function () {
  16153. /**
  16154. * Creates a new GUI3DManager
  16155. * @param scene
  16156. */
  16157. function GUI3DManager(scene) {
  16158. var _this = this;
  16159. /** @hidden */
  16160. this._lastControlOver = {};
  16161. /** @hidden */
  16162. this._lastControlDown = {};
  16163. /**
  16164. * Observable raised when the point picked by the pointer events changed
  16165. */
  16166. this.onPickedPointChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  16167. // Shared resources
  16168. /** @hidden */
  16169. this._sharedMaterials = {};
  16170. this._scene = scene || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["EngineStore"].LastCreatedScene;
  16171. this._sceneDisposeObserver = this._scene.onDisposeObservable.add(function () {
  16172. _this._sceneDisposeObserver = null;
  16173. _this._utilityLayer = null;
  16174. _this.dispose();
  16175. });
  16176. this._utilityLayer = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["UtilityLayerRenderer"](this._scene);
  16177. this._utilityLayer.onlyCheckPointerDownEvents = false;
  16178. this._utilityLayer.pickUtilitySceneFirst = false;
  16179. this._utilityLayer.mainSceneTrackerPredicate = function (mesh) {
  16180. return mesh && mesh.metadata && mesh.metadata._node;
  16181. };
  16182. // Root
  16183. this._rootContainer = new _controls_container3D__WEBPACK_IMPORTED_MODULE_1__["Container3D"]("RootContainer");
  16184. this._rootContainer._host = this;
  16185. var utilityLayerScene = this._utilityLayer.utilityLayerScene;
  16186. // Events
  16187. this._pointerOutObserver = this._utilityLayer.onPointerOutObservable.add(function (pointerId) {
  16188. _this._handlePointerOut(pointerId, true);
  16189. });
  16190. this._pointerObserver = utilityLayerScene.onPointerObservable.add(function (pi, state) {
  16191. _this._doPicking(pi);
  16192. });
  16193. // Scene
  16194. this._utilityLayer.utilityLayerScene.autoClear = false;
  16195. this._utilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
  16196. new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["HemisphericLight"]("hemi", babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Up(), this._utilityLayer.utilityLayerScene);
  16197. }
  16198. Object.defineProperty(GUI3DManager.prototype, "scene", {
  16199. /** Gets the hosting scene */
  16200. get: function () {
  16201. return this._scene;
  16202. },
  16203. enumerable: false,
  16204. configurable: true
  16205. });
  16206. Object.defineProperty(GUI3DManager.prototype, "utilityLayer", {
  16207. /** Gets associated utility layer */
  16208. get: function () {
  16209. return this._utilityLayer;
  16210. },
  16211. enumerable: false,
  16212. configurable: true
  16213. });
  16214. GUI3DManager.prototype._handlePointerOut = function (pointerId, isPointerUp) {
  16215. var previousControlOver = this._lastControlOver[pointerId];
  16216. if (previousControlOver) {
  16217. previousControlOver._onPointerOut(previousControlOver);
  16218. delete this._lastControlOver[pointerId];
  16219. }
  16220. if (isPointerUp) {
  16221. if (this._lastControlDown[pointerId]) {
  16222. this._lastControlDown[pointerId].forcePointerUp();
  16223. delete this._lastControlDown[pointerId];
  16224. }
  16225. }
  16226. this.onPickedPointChangedObservable.notifyObservers(null);
  16227. };
  16228. GUI3DManager.prototype._doPicking = function (pi) {
  16229. if (!this._utilityLayer || !this._utilityLayer.shouldRender || !this._utilityLayer.utilityLayerScene.activeCamera) {
  16230. return false;
  16231. }
  16232. var pointerEvent = (pi.event);
  16233. var pointerId = pointerEvent.pointerId || 0;
  16234. var buttonIndex = pointerEvent.button;
  16235. var pickingInfo = pi.pickInfo;
  16236. if (!pickingInfo || !pickingInfo.hit) {
  16237. this._handlePointerOut(pointerId, pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP);
  16238. return false;
  16239. }
  16240. var control = (pickingInfo.pickedMesh.metadata);
  16241. if (pickingInfo.pickedPoint) {
  16242. this.onPickedPointChangedObservable.notifyObservers(pickingInfo.pickedPoint);
  16243. }
  16244. if (!control._processObservables(pi.type, pickingInfo.pickedPoint, pointerId, buttonIndex)) {
  16245. if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERMOVE) {
  16246. if (this._lastControlOver[pointerId]) {
  16247. this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId]);
  16248. }
  16249. delete this._lastControlOver[pointerId];
  16250. }
  16251. }
  16252. if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP) {
  16253. if (this._lastControlDown[pointerEvent.pointerId]) {
  16254. this._lastControlDown[pointerEvent.pointerId].forcePointerUp();
  16255. delete this._lastControlDown[pointerEvent.pointerId];
  16256. }
  16257. if (pointerEvent.pointerType === "touch") {
  16258. this._handlePointerOut(pointerId, false);
  16259. }
  16260. }
  16261. return true;
  16262. };
  16263. Object.defineProperty(GUI3DManager.prototype, "rootContainer", {
  16264. /**
  16265. * Gets the root container
  16266. */
  16267. get: function () {
  16268. return this._rootContainer;
  16269. },
  16270. enumerable: false,
  16271. configurable: true
  16272. });
  16273. /**
  16274. * Gets a boolean indicating if the given control is in the root child list
  16275. * @param control defines the control to check
  16276. * @returns true if the control is in the root child list
  16277. */
  16278. GUI3DManager.prototype.containsControl = function (control) {
  16279. return this._rootContainer.containsControl(control);
  16280. };
  16281. /**
  16282. * Adds a control to the root child list
  16283. * @param control defines the control to add
  16284. * @returns the current manager
  16285. */
  16286. GUI3DManager.prototype.addControl = function (control) {
  16287. this._rootContainer.addControl(control);
  16288. return this;
  16289. };
  16290. /**
  16291. * Removes a control from the root child list
  16292. * @param control defines the control to remove
  16293. * @returns the current container
  16294. */
  16295. GUI3DManager.prototype.removeControl = function (control) {
  16296. this._rootContainer.removeControl(control);
  16297. return this;
  16298. };
  16299. /**
  16300. * Releases all associated resources
  16301. */
  16302. GUI3DManager.prototype.dispose = function () {
  16303. this._rootContainer.dispose();
  16304. for (var materialName in this._sharedMaterials) {
  16305. if (!this._sharedMaterials.hasOwnProperty(materialName)) {
  16306. continue;
  16307. }
  16308. this._sharedMaterials[materialName].dispose();
  16309. }
  16310. this._sharedMaterials = {};
  16311. if (this._pointerOutObserver && this._utilityLayer) {
  16312. this._utilityLayer.onPointerOutObservable.remove(this._pointerOutObserver);
  16313. this._pointerOutObserver = null;
  16314. }
  16315. this.onPickedPointChangedObservable.clear();
  16316. var utilityLayerScene = this._utilityLayer ? this._utilityLayer.utilityLayerScene : null;
  16317. if (utilityLayerScene) {
  16318. if (this._pointerObserver) {
  16319. utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
  16320. this._pointerObserver = null;
  16321. }
  16322. }
  16323. if (this._scene) {
  16324. if (this._sceneDisposeObserver) {
  16325. this._scene.onDisposeObservable.remove(this._sceneDisposeObserver);
  16326. this._sceneDisposeObserver = null;
  16327. }
  16328. }
  16329. if (this._utilityLayer) {
  16330. this._utilityLayer.dispose();
  16331. }
  16332. };
  16333. return GUI3DManager;
  16334. }());
  16335. /***/ }),
  16336. /***/ "./3D/index.ts":
  16337. /*!*********************!*\
  16338. !*** ./3D/index.ts ***!
  16339. \*********************/
  16340. /*! exports provided: AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel, FluentMaterialDefines, FluentMaterial, GUI3DManager, Vector3WithInfo */
  16341. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16342. "use strict";
  16343. __webpack_require__.r(__webpack_exports__);
  16344. /* harmony import */ var _controls__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./controls */ "./3D/controls/index.ts");
  16345. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["AbstractButton3D"]; });
  16346. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Button3D"]; });
  16347. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Container3D"]; });
  16348. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Control3D"]; });
  16349. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["CylinderPanel"]; });
  16350. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["HolographicButton"]; });
  16351. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["MeshButton3D"]; });
  16352. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["PlanePanel"]; });
  16353. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ScatterPanel"]; });
  16354. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SpherePanel"]; });
  16355. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["StackPanel3D"]; });
  16356. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["VolumeBasedPanel"]; });
  16357. /* harmony import */ var _materials__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./materials */ "./3D/materials/index.ts");
  16358. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _materials__WEBPACK_IMPORTED_MODULE_1__["FluentMaterialDefines"]; });
  16359. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _materials__WEBPACK_IMPORTED_MODULE_1__["FluentMaterial"]; });
  16360. /* harmony import */ var _gui3DManager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./gui3DManager */ "./3D/gui3DManager.ts");
  16361. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return _gui3DManager__WEBPACK_IMPORTED_MODULE_2__["GUI3DManager"]; });
  16362. /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./vector3WithInfo */ "./3D/vector3WithInfo.ts");
  16363. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return _vector3WithInfo__WEBPACK_IMPORTED_MODULE_3__["Vector3WithInfo"]; });
  16364. /***/ }),
  16365. /***/ "./3D/materials/fluentMaterial.ts":
  16366. /*!****************************************!*\
  16367. !*** ./3D/materials/fluentMaterial.ts ***!
  16368. \****************************************/
  16369. /*! exports provided: FluentMaterialDefines, FluentMaterial */
  16370. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16371. "use strict";
  16372. __webpack_require__.r(__webpack_exports__);
  16373. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return FluentMaterialDefines; });
  16374. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return FluentMaterial; });
  16375. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  16376. /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/perfCounter");
  16377. /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
  16378. /* harmony import */ var _shaders_fluent_vertex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shaders/fluent.vertex */ "./3D/materials/shaders/fluent.vertex.ts");
  16379. /* harmony import */ var _shaders_fluent_fragment__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shaders/fluent.fragment */ "./3D/materials/shaders/fluent.fragment.ts");
  16380. /** @hidden */
  16381. var FluentMaterialDefines = /** @class */ (function (_super) {
  16382. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FluentMaterialDefines, _super);
  16383. function FluentMaterialDefines() {
  16384. var _this = _super.call(this) || this;
  16385. _this.INNERGLOW = false;
  16386. _this.BORDER = false;
  16387. _this.HOVERLIGHT = false;
  16388. _this.TEXTURE = false;
  16389. _this.rebuild();
  16390. return _this;
  16391. }
  16392. return FluentMaterialDefines;
  16393. }(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["MaterialDefines"]));
  16394. /**
  16395. * Class used to render controls with fluent desgin
  16396. */
  16397. var FluentMaterial = /** @class */ (function (_super) {
  16398. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FluentMaterial, _super);
  16399. /**
  16400. * Creates a new Fluent material
  16401. * @param name defines the name of the material
  16402. * @param scene defines the hosting scene
  16403. */
  16404. function FluentMaterial(name, scene) {
  16405. var _this = _super.call(this, name, scene) || this;
  16406. /**
  16407. * Gets or sets inner glow intensity. A value of 0 means no glow (default is 0.5)
  16408. */
  16409. _this.innerGlowColorIntensity = 0.5;
  16410. /**
  16411. * Gets or sets the inner glow color (white by default)
  16412. */
  16413. _this.innerGlowColor = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Color3"](1.0, 1.0, 1.0);
  16414. /**
  16415. * Gets or sets the albedo color (Default is Color3(0.3, 0.35, 0.4))
  16416. */
  16417. _this.albedoColor = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Color3"](0.3, 0.35, 0.4);
  16418. /**
  16419. * Gets or sets a boolean indicating if borders must be rendered (default is false)
  16420. */
  16421. _this.renderBorders = false;
  16422. /**
  16423. * Gets or sets border width (default is 0.5)
  16424. */
  16425. _this.borderWidth = 0.5;
  16426. /**
  16427. * Gets or sets a value indicating the smoothing value applied to border edges (0.02 by default)
  16428. */
  16429. _this.edgeSmoothingValue = 0.02;
  16430. /**
  16431. * Gets or sets the minimum value that can be applied to border width (default is 0.1)
  16432. */
  16433. _this.borderMinValue = 0.1;
  16434. /**
  16435. * Gets or sets a boolean indicating if hover light must be rendered (default is false)
  16436. */
  16437. _this.renderHoverLight = false;
  16438. /**
  16439. * Gets or sets the radius used to render the hover light (default is 1.0)
  16440. */
  16441. _this.hoverRadius = 1.0;
  16442. /**
  16443. * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))
  16444. */
  16445. _this.hoverColor = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Color4"](0.3, 0.3, 0.3, 1.0);
  16446. /**
  16447. * Gets or sets the hover light position in world space (default is Vector3.Zero())
  16448. */
  16449. _this.hoverPosition = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero();
  16450. return _this;
  16451. }
  16452. FluentMaterial.prototype.needAlphaBlending = function () {
  16453. return this.alpha !== 1.0;
  16454. };
  16455. FluentMaterial.prototype.needAlphaTesting = function () {
  16456. return false;
  16457. };
  16458. FluentMaterial.prototype.getAlphaTestTexture = function () {
  16459. return null;
  16460. };
  16461. FluentMaterial.prototype.isReadyForSubMesh = function (mesh, subMesh, useInstances) {
  16462. if (this.isFrozen) {
  16463. if (subMesh.effect && subMesh.effect._wasPreviouslyReady) {
  16464. return true;
  16465. }
  16466. }
  16467. if (!subMesh._materialDefines) {
  16468. subMesh._materialDefines = new FluentMaterialDefines();
  16469. }
  16470. var scene = this.getScene();
  16471. var defines = subMesh._materialDefines;
  16472. if (!this.checkReadyOnEveryCall && subMesh.effect) {
  16473. if (defines._renderId === scene.getRenderId()) {
  16474. return true;
  16475. }
  16476. }
  16477. if (defines._areTexturesDirty) {
  16478. defines.INNERGLOW = this.innerGlowColorIntensity > 0;
  16479. defines.BORDER = this.renderBorders;
  16480. defines.HOVERLIGHT = this.renderHoverLight;
  16481. if (this._albedoTexture) {
  16482. if (!this._albedoTexture.isReadyOrNotBlocking()) {
  16483. return false;
  16484. }
  16485. else {
  16486. defines.TEXTURE = true;
  16487. }
  16488. }
  16489. else {
  16490. defines.TEXTURE = false;
  16491. }
  16492. }
  16493. var engine = scene.getEngine();
  16494. // Get correct effect
  16495. if (defines.isDirty) {
  16496. defines.markAsProcessed();
  16497. scene.resetCachedMaterial();
  16498. //Attributes
  16499. var attribs = [babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["VertexBuffer"].PositionKind];
  16500. attribs.push(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["VertexBuffer"].NormalKind);
  16501. attribs.push(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["VertexBuffer"].UVKind);
  16502. var shaderName = "fluent";
  16503. var uniforms = ["world", "viewProjection", "innerGlowColor", "albedoColor", "borderWidth", "edgeSmoothingValue", "scaleFactor", "borderMinValue",
  16504. "hoverColor", "hoverPosition", "hoverRadius"
  16505. ];
  16506. var samplers = ["albedoSampler"];
  16507. var uniformBuffers = new Array();
  16508. babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["MaterialHelper"].PrepareUniformsAndSamplersList({
  16509. uniformsNames: uniforms,
  16510. uniformBuffersNames: uniformBuffers,
  16511. samplers: samplers,
  16512. defines: defines,
  16513. maxSimultaneousLights: 4
  16514. });
  16515. var join = defines.toString();
  16516. subMesh.setEffect(scene.getEngine().createEffect(shaderName, {
  16517. attributes: attribs,
  16518. uniformsNames: uniforms,
  16519. uniformBuffersNames: uniformBuffers,
  16520. samplers: samplers,
  16521. defines: join,
  16522. fallbacks: null,
  16523. onCompiled: this.onCompiled,
  16524. onError: this.onError,
  16525. indexParameters: { maxSimultaneousLights: 4 }
  16526. }, engine));
  16527. }
  16528. if (!subMesh.effect || !subMesh.effect.isReady()) {
  16529. return false;
  16530. }
  16531. defines._renderId = scene.getRenderId();
  16532. subMesh.effect._wasPreviouslyReady = true;
  16533. return true;
  16534. };
  16535. FluentMaterial.prototype.bindForSubMesh = function (world, mesh, subMesh) {
  16536. var scene = this.getScene();
  16537. var defines = subMesh._materialDefines;
  16538. if (!defines) {
  16539. return;
  16540. }
  16541. var effect = subMesh.effect;
  16542. if (!effect) {
  16543. return;
  16544. }
  16545. this._activeEffect = effect;
  16546. // Matrices
  16547. this.bindOnlyWorldMatrix(world);
  16548. this._activeEffect.setMatrix("viewProjection", scene.getTransformMatrix());
  16549. if (this._mustRebind(scene, effect)) {
  16550. this._activeEffect.setColor4("albedoColor", this.albedoColor, this.alpha);
  16551. if (defines.INNERGLOW) {
  16552. this._activeEffect.setColor4("innerGlowColor", this.innerGlowColor, this.innerGlowColorIntensity);
  16553. }
  16554. if (defines.BORDER) {
  16555. this._activeEffect.setFloat("borderWidth", this.borderWidth);
  16556. this._activeEffect.setFloat("edgeSmoothingValue", this.edgeSmoothingValue);
  16557. this._activeEffect.setFloat("borderMinValue", this.borderMinValue);
  16558. mesh.getBoundingInfo().boundingBox.extendSize.multiplyToRef(mesh.scaling, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0]);
  16559. this._activeEffect.setVector3("scaleFactor", babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0]);
  16560. }
  16561. if (defines.HOVERLIGHT) {
  16562. this._activeEffect.setDirectColor4("hoverColor", this.hoverColor);
  16563. this._activeEffect.setFloat("hoverRadius", this.hoverRadius);
  16564. this._activeEffect.setVector3("hoverPosition", this.hoverPosition);
  16565. }
  16566. if (defines.TEXTURE) {
  16567. this._activeEffect.setTexture("albedoSampler", this._albedoTexture);
  16568. }
  16569. }
  16570. this._afterBind(mesh, this._activeEffect);
  16571. };
  16572. FluentMaterial.prototype.getActiveTextures = function () {
  16573. var activeTextures = _super.prototype.getActiveTextures.call(this);
  16574. return activeTextures;
  16575. };
  16576. FluentMaterial.prototype.hasTexture = function (texture) {
  16577. if (_super.prototype.hasTexture.call(this, texture)) {
  16578. return true;
  16579. }
  16580. return false;
  16581. };
  16582. FluentMaterial.prototype.dispose = function (forceDisposeEffect) {
  16583. _super.prototype.dispose.call(this, forceDisposeEffect);
  16584. };
  16585. FluentMaterial.prototype.clone = function (name) {
  16586. var _this = this;
  16587. return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new FluentMaterial(name, _this.getScene()); }, this);
  16588. };
  16589. FluentMaterial.prototype.serialize = function () {
  16590. var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
  16591. serializationObject.customType = "BABYLON.GUI.FluentMaterial";
  16592. return serializationObject;
  16593. };
  16594. FluentMaterial.prototype.getClassName = function () {
  16595. return "FluentMaterial";
  16596. };
  16597. // Statics
  16598. FluentMaterial.Parse = function (source, scene, rootUrl) {
  16599. return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Parse(function () { return new FluentMaterial(source.name, scene); }, source, scene, rootUrl);
  16600. };
  16601. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16602. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])(),
  16603. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesDirty")
  16604. ], FluentMaterial.prototype, "innerGlowColorIntensity", void 0);
  16605. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16606. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsColor3"])()
  16607. ], FluentMaterial.prototype, "innerGlowColor", void 0);
  16608. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16609. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsColor3"])()
  16610. ], FluentMaterial.prototype, "albedoColor", void 0);
  16611. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16612. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])(),
  16613. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesDirty")
  16614. ], FluentMaterial.prototype, "renderBorders", void 0);
  16615. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16616. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16617. ], FluentMaterial.prototype, "borderWidth", void 0);
  16618. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16619. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16620. ], FluentMaterial.prototype, "edgeSmoothingValue", void 0);
  16621. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16622. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16623. ], FluentMaterial.prototype, "borderMinValue", void 0);
  16624. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16625. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])(),
  16626. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesDirty")
  16627. ], FluentMaterial.prototype, "renderHoverLight", void 0);
  16628. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16629. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16630. ], FluentMaterial.prototype, "hoverRadius", void 0);
  16631. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16632. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsColor4"])()
  16633. ], FluentMaterial.prototype, "hoverColor", void 0);
  16634. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16635. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsVector3"])()
  16636. ], FluentMaterial.prototype, "hoverPosition", void 0);
  16637. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16638. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsTexture"])("albedoTexture")
  16639. ], FluentMaterial.prototype, "_albedoTexture", void 0);
  16640. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16641. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesAndMiscDirty")
  16642. ], FluentMaterial.prototype, "albedoTexture", void 0);
  16643. return FluentMaterial;
  16644. }(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["PushMaterial"]));
  16645. babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.FluentMaterial"] = FluentMaterial;
  16646. /***/ }),
  16647. /***/ "./3D/materials/index.ts":
  16648. /*!*******************************!*\
  16649. !*** ./3D/materials/index.ts ***!
  16650. \*******************************/
  16651. /*! exports provided: FluentMaterialDefines, FluentMaterial */
  16652. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16653. "use strict";
  16654. __webpack_require__.r(__webpack_exports__);
  16655. /* harmony import */ var _fluentMaterial__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./fluentMaterial */ "./3D/materials/fluentMaterial.ts");
  16656. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _fluentMaterial__WEBPACK_IMPORTED_MODULE_0__["FluentMaterialDefines"]; });
  16657. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _fluentMaterial__WEBPACK_IMPORTED_MODULE_0__["FluentMaterial"]; });
  16658. /***/ }),
  16659. /***/ "./3D/materials/shaders/fluent.fragment.ts":
  16660. /*!*************************************************!*\
  16661. !*** ./3D/materials/shaders/fluent.fragment.ts ***!
  16662. \*************************************************/
  16663. /*! exports provided: fluentPixelShader */
  16664. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16665. "use strict";
  16666. __webpack_require__.r(__webpack_exports__);
  16667. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentPixelShader", function() { return fluentPixelShader; });
  16668. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
  16669. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
  16670. var name = 'fluentPixelShader';
  16671. var shader = "precision highp float;\nvarying vec2 vUV;\nuniform vec4 albedoColor;\n#ifdef INNERGLOW\nuniform vec4 innerGlowColor;\n#endif\n#ifdef BORDER\nvarying vec2 scaleInfo;\nuniform float edgeSmoothingValue;\nuniform float borderMinValue;\n#endif\n#ifdef HOVERLIGHT\nvarying vec3 worldPosition;\nuniform vec3 hoverPosition;\nuniform vec4 hoverColor;\nuniform float hoverRadius;\n#endif\n#ifdef TEXTURE\nuniform sampler2D albedoSampler;\n#endif\nvoid main(void) {\nvec3 albedo=albedoColor.rgb;\nfloat alpha=albedoColor.a;\n#ifdef TEXTURE\nalbedo=texture2D(albedoSampler,vUV).rgb;\n#endif\n#ifdef HOVERLIGHT\nfloat pointToHover=(1.0-clamp(length(hoverPosition-worldPosition)/hoverRadius,0.,1.))*hoverColor.a;\nalbedo=clamp(albedo+hoverColor.rgb*pointToHover,0.,1.);\n#else\nfloat pointToHover=1.0;\n#endif\n#ifdef BORDER\nfloat borderPower=10.0;\nfloat inverseBorderPower=1.0/borderPower;\nvec3 borderColor=albedo*borderPower;\nvec2 distanceToEdge;\ndistanceToEdge.x=abs(vUV.x-0.5)*2.0;\ndistanceToEdge.y=abs(vUV.y-0.5)*2.0;\nfloat borderValue=max(smoothstep(scaleInfo.x-edgeSmoothingValue,scaleInfo.x+edgeSmoothingValue,distanceToEdge.x),\nsmoothstep(scaleInfo.y-edgeSmoothingValue,scaleInfo.y+edgeSmoothingValue,distanceToEdge.y));\nborderColor=borderColor*borderValue*max(borderMinValue*inverseBorderPower,pointToHover);\nalbedo+=borderColor;\nalpha=max(alpha,borderValue);\n#endif\n#ifdef INNERGLOW\n\nvec2 uvGlow=(vUV-vec2(0.5,0.5))*(innerGlowColor.a*2.0);\nuvGlow=uvGlow*uvGlow;\nuvGlow=uvGlow*uvGlow;\nalbedo+=mix(vec3(0.0,0.0,0.0),innerGlowColor.rgb,uvGlow.x+uvGlow.y);\n#endif\ngl_FragColor=vec4(albedo,alpha);\n}";
  16672. babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
  16673. /** @hidden */
  16674. var fluentPixelShader = { name: name, shader: shader };
  16675. /***/ }),
  16676. /***/ "./3D/materials/shaders/fluent.vertex.ts":
  16677. /*!***********************************************!*\
  16678. !*** ./3D/materials/shaders/fluent.vertex.ts ***!
  16679. \***********************************************/
  16680. /*! exports provided: fluentVertexShader */
  16681. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16682. "use strict";
  16683. __webpack_require__.r(__webpack_exports__);
  16684. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentVertexShader", function() { return fluentVertexShader; });
  16685. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
  16686. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
  16687. var name = 'fluentVertexShader';
  16688. var shader = "precision highp float;\n\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\n\nuniform mat4 world;\nuniform mat4 viewProjection;\nvarying vec2 vUV;\n#ifdef BORDER\nvarying vec2 scaleInfo;\nuniform float borderWidth;\nuniform vec3 scaleFactor;\n#endif\n#ifdef HOVERLIGHT\nvarying vec3 worldPosition;\n#endif\nvoid main(void) {\nvUV=uv;\n#ifdef BORDER\nvec3 scale=scaleFactor;\nfloat minScale=min(min(scale.x,scale.y),scale.z);\nfloat maxScale=max(max(scale.x,scale.y),scale.z);\nfloat minOverMiddleScale=minScale/(scale.x+scale.y+scale.z-minScale-maxScale);\nfloat areaYZ=scale.y*scale.z;\nfloat areaXZ=scale.x*scale.z;\nfloat areaXY=scale.x*scale.y;\nfloat scaledBorderWidth=borderWidth;\nif (abs(normal.x) == 1.0)\n{\nscale.x=scale.y;\nscale.y=scale.z;\nif (areaYZ>areaXZ && areaYZ>areaXY)\n{\nscaledBorderWidth*=minOverMiddleScale;\n}\n}\nelse if (abs(normal.y) == 1.0)\n{\nscale.x=scale.z;\nif (areaXZ>areaXY && areaXZ>areaYZ)\n{\nscaledBorderWidth*=minOverMiddleScale;\n}\n}\nelse\n{\nif (areaXY>areaYZ && areaXY>areaXZ)\n{\nscaledBorderWidth*=minOverMiddleScale;\n}\n}\nfloat scaleRatio=min(scale.x,scale.y)/max(scale.x,scale.y);\nif (scale.x>scale.y)\n{\nscaleInfo.x=1.0-(scaledBorderWidth*scaleRatio);\nscaleInfo.y=1.0-scaledBorderWidth;\n}\nelse\n{\nscaleInfo.x=1.0-scaledBorderWidth;\nscaleInfo.y=1.0-(scaledBorderWidth*scaleRatio);\n}\n#endif\nvec4 worldPos=world*vec4(position,1.0);\n#ifdef HOVERLIGHT\nworldPosition=worldPos.xyz;\n#endif\ngl_Position=viewProjection*worldPos;\n}\n";
  16689. babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
  16690. /** @hidden */
  16691. var fluentVertexShader = { name: name, shader: shader };
  16692. /***/ }),
  16693. /***/ "./3D/vector3WithInfo.ts":
  16694. /*!*******************************!*\
  16695. !*** ./3D/vector3WithInfo.ts ***!
  16696. \*******************************/
  16697. /*! exports provided: Vector3WithInfo */
  16698. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16699. "use strict";
  16700. __webpack_require__.r(__webpack_exports__);
  16701. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return Vector3WithInfo; });
  16702. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  16703. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
  16704. /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
  16705. /**
  16706. * Class used to transport Vector3 information for pointer events
  16707. */
  16708. var Vector3WithInfo = /** @class */ (function (_super) {
  16709. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Vector3WithInfo, _super);
  16710. /**
  16711. * Creates a new Vector3WithInfo
  16712. * @param source defines the vector3 data to transport
  16713. * @param buttonIndex defines the current mouse button index
  16714. */
  16715. function Vector3WithInfo(source,
  16716. /** defines the current mouse button index */
  16717. buttonIndex) {
  16718. if (buttonIndex === void 0) { buttonIndex = 0; }
  16719. var _this = _super.call(this, source.x, source.y, source.z) || this;
  16720. _this.buttonIndex = buttonIndex;
  16721. return _this;
  16722. }
  16723. return Vector3WithInfo;
  16724. }(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"]));
  16725. /***/ }),
  16726. /***/ "./index.ts":
  16727. /*!******************!*\
  16728. !*** ./index.ts ***!
  16729. \******************/
  16730. /*! exports provided: Button, Checkbox, ColorPicker, Container, Control, Ellipse, FocusableButton, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, TextWrapper, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name, AdvancedDynamicTexture, AdvancedDynamicTextureInstrumentation, Vector2WithInfo, Matrix2D, Measure, MultiLinePoint, Style, ValueAndUnit, XmlLoader, AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel, FluentMaterialDefines, FluentMaterial, GUI3DManager, Vector3WithInfo */
  16731. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16732. "use strict";
  16733. __webpack_require__.r(__webpack_exports__);
  16734. /* harmony import */ var _2D__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./2D */ "./2D/index.ts");
  16735. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  16736. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Checkbox"]; });
  16737. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ColorPicker"]; });
  16738. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Container"]; });
  16739. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Control"]; });
  16740. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Ellipse"]; });
  16741. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FocusableButton", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["FocusableButton"]; });
  16742. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Grid"]; });
  16743. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Image"]; });
  16744. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["InputText"]; });
  16745. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["InputPassword"]; });
  16746. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Line"]; });
  16747. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["MultiLine"]; });
  16748. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["RadioButton"]; });
  16749. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["StackPanel"]; });
  16750. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["SelectorGroup"]; });
  16751. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["CheckboxGroup"]; });
  16752. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["RadioGroup"]; });
  16753. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["SliderGroup"]; });
  16754. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["SelectionPanel"]; });
  16755. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ScrollViewer"]; });
  16756. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["TextWrapping"]; });
  16757. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["TextBlock"]; });
  16758. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapper", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["TextWrapper"]; });
  16759. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["KeyPropertySet"]; });
  16760. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["VirtualKeyboard"]; });
  16761. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Rectangle"]; });
  16762. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["DisplayGrid"]; });
  16763. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["BaseSlider"]; });
  16764. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Slider"]; });
  16765. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ImageBasedSlider"]; });
  16766. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ScrollBar"]; });
  16767. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ImageScrollBar"]; });
  16768. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["name"]; });
  16769. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTexture"]; });
  16770. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTextureInstrumentation"]; });
  16771. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Vector2WithInfo"]; });
  16772. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"]; });
  16773. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Measure"]; });
  16774. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["MultiLinePoint"]; });
  16775. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Style"]; });
  16776. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ValueAndUnit"]; });
  16777. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["XmlLoader"]; });
  16778. /* harmony import */ var _3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./3D */ "./3D/index.ts");
  16779. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["AbstractButton3D"]; });
  16780. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]; });
  16781. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Container3D"]; });
  16782. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Control3D"]; });
  16783. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["CylinderPanel"]; });
  16784. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["HolographicButton"]; });
  16785. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["MeshButton3D"]; });
  16786. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["PlanePanel"]; });
  16787. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["ScatterPanel"]; });
  16788. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["SpherePanel"]; });
  16789. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["StackPanel3D"]; });
  16790. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["VolumeBasedPanel"]; });
  16791. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["FluentMaterialDefines"]; });
  16792. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["FluentMaterial"]; });
  16793. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["GUI3DManager"]; });
  16794. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"]; });
  16795. /***/ }),
  16796. /***/ "./legacy/legacy.ts":
  16797. /*!**************************!*\
  16798. !*** ./legacy/legacy.ts ***!
  16799. \**************************/
  16800. /*! exports provided: Button, Checkbox, ColorPicker, Container, Control, Ellipse, FocusableButton, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, TextWrapper, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name, AdvancedDynamicTexture, AdvancedDynamicTextureInstrumentation, Vector2WithInfo, Matrix2D, Measure, MultiLinePoint, Style, ValueAndUnit, XmlLoader, AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel, FluentMaterialDefines, FluentMaterial, GUI3DManager, Vector3WithInfo */
  16801. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16802. "use strict";
  16803. __webpack_require__.r(__webpack_exports__);
  16804. /* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index */ "./index.ts");
  16805. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  16806. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Checkbox"]; });
  16807. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ColorPicker"]; });
  16808. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Container"]; });
  16809. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Control"]; });
  16810. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Ellipse"]; });
  16811. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FocusableButton", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["FocusableButton"]; });
  16812. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Grid"]; });
  16813. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Image"]; });
  16814. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["InputText"]; });
  16815. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["InputPassword"]; });
  16816. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Line"]; });
  16817. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["MultiLine"]; });
  16818. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["RadioButton"]; });
  16819. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["StackPanel"]; });
  16820. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SelectorGroup"]; });
  16821. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["CheckboxGroup"]; });
  16822. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["RadioGroup"]; });
  16823. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SliderGroup"]; });
  16824. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SelectionPanel"]; });
  16825. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ScrollViewer"]; });
  16826. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["TextWrapping"]; });
  16827. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["TextBlock"]; });
  16828. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapper", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["TextWrapper"]; });
  16829. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["KeyPropertySet"]; });
  16830. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["VirtualKeyboard"]; });
  16831. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Rectangle"]; });
  16832. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["DisplayGrid"]; });
  16833. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["BaseSlider"]; });
  16834. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Slider"]; });
  16835. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ImageBasedSlider"]; });
  16836. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ScrollBar"]; });
  16837. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ImageScrollBar"]; });
  16838. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["name"]; });
  16839. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTexture"]; });
  16840. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTextureInstrumentation"]; });
  16841. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Vector2WithInfo"]; });
  16842. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"]; });
  16843. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Measure"]; });
  16844. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["MultiLinePoint"]; });
  16845. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Style"]; });
  16846. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ValueAndUnit"]; });
  16847. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["XmlLoader"]; });
  16848. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["AbstractButton3D"]; });
  16849. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Button3D"]; });
  16850. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Container3D"]; });
  16851. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Control3D"]; });
  16852. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["CylinderPanel"]; });
  16853. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["HolographicButton"]; });
  16854. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["MeshButton3D"]; });
  16855. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["PlanePanel"]; });
  16856. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ScatterPanel"]; });
  16857. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SpherePanel"]; });
  16858. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["StackPanel3D"]; });
  16859. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["VolumeBasedPanel"]; });
  16860. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["FluentMaterialDefines"]; });
  16861. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["FluentMaterial"]; });
  16862. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["GUI3DManager"]; });
  16863. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Vector3WithInfo"]; });
  16864. /**
  16865. * Legacy support, defining window.BABYLON.GUI (global variable).
  16866. *
  16867. * This is the entry point for the UMD module.
  16868. * The entry point for a future ESM package should be index.ts
  16869. */
  16870. var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : undefined);
  16871. if (typeof globalObject !== "undefined") {
  16872. globalObject.BABYLON = globalObject.BABYLON || {};
  16873. globalObject.BABYLON.GUI = _index__WEBPACK_IMPORTED_MODULE_0__;
  16874. }
  16875. /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../node_modules/webpack/buildin/global.js */ "../../node_modules/webpack/buildin/global.js")))
  16876. /***/ }),
  16877. /***/ "babylonjs/Misc/perfCounter":
  16878. /*!****************************************************************************************************!*\
  16879. !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
  16880. \****************************************************************************************************/
  16881. /*! no static exports found */
  16882. /***/ (function(module, exports) {
  16883. module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_perfCounter__;
  16884. /***/ })
  16885. /******/ });
  16886. });
  16887. //# sourceMappingURL=babylon.gui.js.map