babylon.gui.js 746 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706770777087709771077117712771377147715771677177718771977207721772277237724772577267727772877297730773177327733773477357736773777387739774077417742774377447745774677477748774977507751775277537754775577567757775877597760776177627763776477657766776777687769777077717772777377747775777677777778777977807781778277837784778577867787778877897790779177927793779477957796779777987799780078017802780378047805780678077808780978107811781278137814781578167817781878197820782178227823782478257826782778287829783078317832783378347835783678377838783978407841784278437844784578467847784878497850785178527853785478557856785778587859786078617862786378647865786678677868786978707871787278737874787578767877787878797880788178827883788478857886788778887889789078917892789378947895789678977898789979007901790279037904790579067907790879097910791179127913791479157916791779187919792079217922792379247925792679277928792979307931793279337934793579367937793879397940794179427943794479457946794779487949795079517952795379547955795679577958795979607961796279637964796579667967796879697970797179727973797479757976797779787979798079817982798379847985798679877988798979907991799279937994799579967997799879998000800180028003800480058006800780088009801080118012801380148015801680178018801980208021802280238024802580268027802880298030803180328033803480358036803780388039804080418042804380448045804680478048804980508051805280538054805580568057805880598060806180628063806480658066806780688069807080718072807380748075807680778078807980808081808280838084808580868087808880898090809180928093809480958096809780988099810081018102810381048105810681078108810981108111811281138114811581168117811881198120812181228123812481258126812781288129813081318132813381348135813681378138813981408141814281438144814581468147814881498150815181528153815481558156815781588159816081618162816381648165816681678168816981708171817281738174817581768177817881798180818181828183818481858186818781888189819081918192819381948195819681978198819982008201820282038204820582068207820882098210821182128213821482158216821782188219822082218222822382248225822682278228822982308231823282338234823582368237823882398240824182428243824482458246824782488249825082518252825382548255825682578258825982608261826282638264826582668267826882698270827182728273827482758276827782788279828082818282828382848285828682878288828982908291829282938294829582968297829882998300830183028303830483058306830783088309831083118312831383148315831683178318831983208321832283238324832583268327832883298330833183328333833483358336833783388339834083418342834383448345834683478348834983508351835283538354835583568357835883598360836183628363836483658366836783688369837083718372837383748375837683778378837983808381838283838384838583868387838883898390839183928393839483958396839783988399840084018402840384048405840684078408840984108411841284138414841584168417841884198420842184228423842484258426842784288429843084318432843384348435843684378438843984408441844284438444844584468447844884498450845184528453845484558456845784588459846084618462846384648465846684678468846984708471847284738474847584768477847884798480848184828483848484858486848784888489849084918492849384948495849684978498849985008501850285038504850585068507850885098510851185128513851485158516851785188519852085218522852385248525852685278528852985308531853285338534853585368537853885398540854185428543854485458546854785488549855085518552855385548555855685578558855985608561856285638564856585668567856885698570857185728573857485758576857785788579858085818582858385848585858685878588858985908591859285938594859585968597859885998600860186028603860486058606860786088609861086118612861386148615861686178618861986208621862286238624862586268627862886298630863186328633863486358636863786388639864086418642864386448645864686478648864986508651865286538654865586568657865886598660866186628663866486658666866786688669867086718672867386748675867686778678867986808681868286838684868586868687868886898690869186928693869486958696869786988699870087018702870387048705870687078708870987108711871287138714871587168717871887198720872187228723872487258726872787288729873087318732873387348735873687378738873987408741874287438744874587468747874887498750875187528753875487558756875787588759876087618762876387648765876687678768876987708771877287738774877587768777877887798780878187828783878487858786878787888789879087918792879387948795879687978798879988008801880288038804880588068807880888098810881188128813881488158816881788188819882088218822882388248825882688278828882988308831883288338834883588368837883888398840884188428843884488458846884788488849885088518852885388548855885688578858885988608861886288638864886588668867886888698870887188728873887488758876887788788879888088818882888388848885888688878888888988908891889288938894889588968897889888998900890189028903890489058906890789088909891089118912891389148915891689178918891989208921892289238924892589268927892889298930893189328933893489358936893789388939894089418942894389448945894689478948894989508951895289538954895589568957895889598960896189628963896489658966896789688969897089718972897389748975897689778978897989808981898289838984898589868987898889898990899189928993899489958996899789988999900090019002900390049005900690079008900990109011901290139014901590169017901890199020902190229023902490259026902790289029903090319032903390349035903690379038903990409041904290439044904590469047904890499050905190529053905490559056905790589059906090619062906390649065906690679068906990709071907290739074907590769077907890799080908190829083908490859086908790889089909090919092909390949095909690979098909991009101910291039104910591069107910891099110911191129113911491159116911791189119912091219122912391249125912691279128912991309131913291339134913591369137913891399140914191429143914491459146914791489149915091519152915391549155915691579158915991609161916291639164916591669167916891699170917191729173917491759176917791789179918091819182918391849185918691879188918991909191919291939194919591969197919891999200920192029203920492059206920792089209921092119212921392149215921692179218921992209221922292239224922592269227922892299230923192329233923492359236923792389239924092419242924392449245924692479248924992509251925292539254925592569257925892599260926192629263926492659266926792689269927092719272927392749275927692779278927992809281928292839284928592869287928892899290929192929293929492959296929792989299930093019302930393049305930693079308930993109311931293139314931593169317931893199320932193229323932493259326932793289329933093319332933393349335933693379338933993409341934293439344934593469347934893499350935193529353935493559356935793589359936093619362936393649365936693679368936993709371937293739374937593769377937893799380938193829383938493859386938793889389939093919392939393949395939693979398939994009401940294039404940594069407940894099410941194129413941494159416941794189419942094219422942394249425942694279428942994309431943294339434943594369437943894399440944194429443944494459446944794489449945094519452945394549455945694579458945994609461946294639464946594669467946894699470947194729473947494759476947794789479948094819482948394849485948694879488948994909491949294939494949594969497949894999500950195029503950495059506950795089509951095119512951395149515951695179518951995209521952295239524952595269527952895299530953195329533953495359536953795389539954095419542954395449545954695479548954995509551955295539554955595569557955895599560956195629563956495659566956795689569957095719572957395749575957695779578957995809581958295839584958595869587958895899590959195929593959495959596959795989599960096019602960396049605960696079608960996109611961296139614961596169617961896199620962196229623962496259626962796289629963096319632963396349635963696379638963996409641964296439644964596469647964896499650965196529653965496559656965796589659966096619662966396649665966696679668966996709671967296739674967596769677967896799680968196829683968496859686968796889689969096919692969396949695969696979698969997009701970297039704970597069707970897099710971197129713971497159716971797189719972097219722972397249725972697279728972997309731973297339734973597369737973897399740974197429743974497459746974797489749975097519752975397549755975697579758975997609761976297639764976597669767976897699770977197729773977497759776977797789779978097819782978397849785978697879788978997909791979297939794979597969797979897999800980198029803980498059806980798089809981098119812981398149815981698179818981998209821982298239824982598269827982898299830983198329833983498359836983798389839984098419842984398449845984698479848984998509851985298539854985598569857985898599860986198629863986498659866986798689869987098719872987398749875987698779878987998809881988298839884988598869887988898899890989198929893989498959896989798989899990099019902990399049905990699079908990999109911991299139914991599169917991899199920992199229923992499259926992799289929993099319932993399349935993699379938993999409941994299439944994599469947994899499950995199529953995499559956995799589959996099619962996399649965996699679968996999709971997299739974997599769977997899799980998199829983998499859986998799889989999099919992999399949995999699979998999910000100011000210003100041000510006100071000810009100101001110012100131001410015100161001710018100191002010021100221002310024100251002610027100281002910030100311003210033100341003510036100371003810039100401004110042100431004410045100461004710048100491005010051100521005310054100551005610057100581005910060100611006210063100641006510066100671006810069100701007110072100731007410075100761007710078100791008010081100821008310084100851008610087100881008910090100911009210093100941009510096100971009810099101001010110102101031010410105101061010710108101091011010111101121011310114101151011610117101181011910120101211012210123101241012510126101271012810129101301013110132101331013410135101361013710138101391014010141101421014310144101451014610147101481014910150101511015210153101541015510156101571015810159101601016110162101631016410165101661016710168101691017010171101721017310174101751017610177101781017910180101811018210183101841018510186101871018810189101901019110192101931019410195101961019710198101991020010201102021020310204102051020610207102081020910210102111021210213102141021510216102171021810219102201022110222102231022410225102261022710228102291023010231102321023310234102351023610237102381023910240102411024210243102441024510246102471024810249102501025110252102531025410255102561025710258102591026010261102621026310264102651026610267102681026910270102711027210273102741027510276102771027810279102801028110282102831028410285102861028710288102891029010291102921029310294102951029610297102981029910300103011030210303103041030510306103071030810309103101031110312103131031410315103161031710318103191032010321103221032310324103251032610327103281032910330103311033210333103341033510336103371033810339103401034110342103431034410345103461034710348103491035010351103521035310354103551035610357103581035910360103611036210363103641036510366103671036810369103701037110372103731037410375103761037710378103791038010381103821038310384103851038610387103881038910390103911039210393103941039510396103971039810399104001040110402104031040410405104061040710408104091041010411104121041310414104151041610417104181041910420104211042210423104241042510426104271042810429104301043110432104331043410435104361043710438104391044010441104421044310444104451044610447104481044910450104511045210453104541045510456104571045810459104601046110462104631046410465104661046710468104691047010471104721047310474104751047610477104781047910480104811048210483104841048510486104871048810489104901049110492104931049410495104961049710498104991050010501105021050310504105051050610507105081050910510105111051210513105141051510516105171051810519105201052110522105231052410525105261052710528105291053010531105321053310534105351053610537105381053910540105411054210543105441054510546105471054810549105501055110552105531055410555105561055710558105591056010561105621056310564105651056610567105681056910570105711057210573105741057510576105771057810579105801058110582105831058410585105861058710588105891059010591105921059310594105951059610597105981059910600106011060210603106041060510606106071060810609106101061110612106131061410615106161061710618106191062010621106221062310624106251062610627106281062910630106311063210633106341063510636106371063810639106401064110642106431064410645106461064710648106491065010651106521065310654106551065610657106581065910660106611066210663106641066510666106671066810669106701067110672106731067410675106761067710678106791068010681106821068310684106851068610687106881068910690106911069210693106941069510696106971069810699107001070110702107031070410705107061070710708107091071010711107121071310714107151071610717107181071910720107211072210723107241072510726107271072810729107301073110732107331073410735107361073710738107391074010741107421074310744107451074610747107481074910750107511075210753107541075510756107571075810759107601076110762107631076410765107661076710768107691077010771107721077310774107751077610777107781077910780107811078210783107841078510786107871078810789107901079110792107931079410795107961079710798107991080010801108021080310804108051080610807108081080910810108111081210813108141081510816108171081810819108201082110822108231082410825108261082710828108291083010831108321083310834108351083610837108381083910840108411084210843108441084510846108471084810849108501085110852108531085410855108561085710858108591086010861108621086310864108651086610867108681086910870108711087210873108741087510876108771087810879108801088110882108831088410885108861088710888108891089010891108921089310894108951089610897108981089910900109011090210903109041090510906109071090810909109101091110912109131091410915109161091710918109191092010921109221092310924109251092610927109281092910930109311093210933109341093510936109371093810939109401094110942109431094410945109461094710948109491095010951109521095310954109551095610957109581095910960109611096210963109641096510966109671096810969109701097110972109731097410975109761097710978109791098010981109821098310984109851098610987109881098910990109911099210993109941099510996109971099810999110001100111002110031100411005110061100711008110091101011011110121101311014110151101611017110181101911020110211102211023110241102511026110271102811029110301103111032110331103411035110361103711038110391104011041110421104311044110451104611047110481104911050110511105211053110541105511056110571105811059110601106111062110631106411065110661106711068110691107011071110721107311074110751107611077110781107911080110811108211083110841108511086110871108811089110901109111092110931109411095110961109711098110991110011101111021110311104111051110611107111081110911110111111111211113111141111511116111171111811119111201112111122111231112411125111261112711128111291113011131111321113311134111351113611137111381113911140111411114211143111441114511146111471114811149111501115111152111531115411155111561115711158111591116011161111621116311164111651116611167111681116911170111711117211173111741117511176111771117811179111801118111182111831118411185111861118711188111891119011191111921119311194111951119611197111981119911200112011120211203112041120511206112071120811209112101121111212112131121411215112161121711218112191122011221112221122311224112251122611227112281122911230112311123211233112341123511236112371123811239112401124111242112431124411245112461124711248112491125011251112521125311254112551125611257112581125911260112611126211263112641126511266112671126811269112701127111272112731127411275112761127711278112791128011281112821128311284112851128611287112881128911290112911129211293112941129511296112971129811299113001130111302113031130411305113061130711308113091131011311113121131311314113151131611317113181131911320113211132211323113241132511326113271132811329113301133111332113331133411335113361133711338113391134011341113421134311344113451134611347113481134911350113511135211353113541135511356113571135811359113601136111362113631136411365113661136711368113691137011371113721137311374113751137611377113781137911380113811138211383113841138511386113871138811389113901139111392113931139411395113961139711398113991140011401114021140311404114051140611407114081140911410114111141211413114141141511416114171141811419114201142111422114231142411425114261142711428114291143011431114321143311434114351143611437114381143911440114411144211443114441144511446114471144811449114501145111452114531145411455114561145711458114591146011461114621146311464114651146611467114681146911470114711147211473114741147511476114771147811479114801148111482114831148411485114861148711488114891149011491114921149311494114951149611497114981149911500115011150211503115041150511506115071150811509115101151111512115131151411515115161151711518115191152011521115221152311524115251152611527115281152911530115311153211533115341153511536115371153811539115401154111542115431154411545115461154711548115491155011551115521155311554115551155611557115581155911560115611156211563115641156511566115671156811569115701157111572115731157411575115761157711578115791158011581115821158311584115851158611587115881158911590115911159211593115941159511596115971159811599116001160111602116031160411605116061160711608116091161011611116121161311614116151161611617116181161911620116211162211623116241162511626116271162811629116301163111632116331163411635116361163711638116391164011641116421164311644116451164611647116481164911650116511165211653116541165511656116571165811659116601166111662116631166411665116661166711668116691167011671116721167311674116751167611677116781167911680116811168211683116841168511686116871168811689116901169111692116931169411695116961169711698116991170011701117021170311704117051170611707117081170911710117111171211713117141171511716117171171811719117201172111722117231172411725117261172711728117291173011731117321173311734117351173611737117381173911740117411174211743117441174511746117471174811749117501175111752117531175411755117561175711758117591176011761117621176311764117651176611767117681176911770117711177211773117741177511776117771177811779117801178111782117831178411785117861178711788117891179011791117921179311794117951179611797117981179911800118011180211803118041180511806118071180811809118101181111812118131181411815118161181711818118191182011821118221182311824118251182611827118281182911830118311183211833118341183511836118371183811839118401184111842118431184411845118461184711848118491185011851118521185311854118551185611857118581185911860118611186211863118641186511866118671186811869118701187111872118731187411875118761187711878118791188011881118821188311884118851188611887118881188911890118911189211893118941189511896118971189811899119001190111902119031190411905119061190711908119091191011911119121191311914119151191611917119181191911920119211192211923119241192511926119271192811929119301193111932119331193411935119361193711938119391194011941119421194311944119451194611947119481194911950119511195211953119541195511956119571195811959119601196111962119631196411965119661196711968119691197011971119721197311974119751197611977119781197911980119811198211983119841198511986119871198811989119901199111992119931199411995119961199711998119991200012001120021200312004120051200612007120081200912010120111201212013120141201512016120171201812019120201202112022120231202412025120261202712028120291203012031120321203312034120351203612037120381203912040120411204212043120441204512046120471204812049120501205112052120531205412055120561205712058120591206012061120621206312064120651206612067120681206912070120711207212073120741207512076120771207812079120801208112082120831208412085120861208712088120891209012091120921209312094120951209612097120981209912100121011210212103121041210512106121071210812109121101211112112121131211412115121161211712118121191212012121121221212312124121251212612127121281212912130121311213212133121341213512136121371213812139121401214112142121431214412145121461214712148121491215012151121521215312154121551215612157121581215912160121611216212163121641216512166121671216812169121701217112172121731217412175121761217712178121791218012181121821218312184121851218612187121881218912190121911219212193121941219512196121971219812199122001220112202122031220412205122061220712208122091221012211122121221312214122151221612217122181221912220122211222212223122241222512226122271222812229122301223112232122331223412235122361223712238122391224012241122421224312244122451224612247122481224912250122511225212253122541225512256122571225812259122601226112262122631226412265122661226712268122691227012271122721227312274122751227612277122781227912280122811228212283122841228512286122871228812289122901229112292122931229412295122961229712298122991230012301123021230312304123051230612307123081230912310123111231212313123141231512316123171231812319123201232112322123231232412325123261232712328123291233012331123321233312334123351233612337123381233912340123411234212343123441234512346123471234812349123501235112352123531235412355123561235712358123591236012361123621236312364123651236612367123681236912370123711237212373123741237512376123771237812379123801238112382123831238412385123861238712388123891239012391123921239312394123951239612397123981239912400124011240212403124041240512406124071240812409124101241112412124131241412415124161241712418124191242012421124221242312424124251242612427124281242912430124311243212433124341243512436124371243812439124401244112442124431244412445124461244712448124491245012451124521245312454124551245612457124581245912460124611246212463124641246512466124671246812469124701247112472124731247412475124761247712478124791248012481124821248312484124851248612487124881248912490124911249212493124941249512496124971249812499125001250112502125031250412505125061250712508125091251012511125121251312514125151251612517125181251912520125211252212523125241252512526125271252812529125301253112532125331253412535125361253712538125391254012541125421254312544125451254612547125481254912550125511255212553125541255512556125571255812559125601256112562125631256412565125661256712568125691257012571125721257312574125751257612577125781257912580125811258212583125841258512586125871258812589125901259112592125931259412595125961259712598125991260012601126021260312604126051260612607126081260912610126111261212613126141261512616126171261812619126201262112622126231262412625126261262712628126291263012631126321263312634126351263612637126381263912640126411264212643126441264512646126471264812649126501265112652126531265412655126561265712658126591266012661126621266312664126651266612667126681266912670126711267212673126741267512676126771267812679126801268112682126831268412685126861268712688126891269012691126921269312694126951269612697126981269912700127011270212703127041270512706127071270812709127101271112712127131271412715127161271712718127191272012721127221272312724127251272612727127281272912730127311273212733127341273512736127371273812739127401274112742127431274412745127461274712748127491275012751127521275312754127551275612757127581275912760127611276212763127641276512766127671276812769127701277112772127731277412775127761277712778127791278012781127821278312784127851278612787127881278912790127911279212793127941279512796127971279812799128001280112802128031280412805128061280712808128091281012811128121281312814128151281612817128181281912820128211282212823128241282512826128271282812829128301283112832128331283412835128361283712838128391284012841128421284312844128451284612847128481284912850128511285212853128541285512856128571285812859128601286112862128631286412865128661286712868128691287012871128721287312874128751287612877128781287912880128811288212883128841288512886128871288812889128901289112892128931289412895128961289712898128991290012901129021290312904129051290612907129081290912910129111291212913129141291512916129171291812919129201292112922129231292412925129261292712928129291293012931129321293312934129351293612937129381293912940129411294212943129441294512946129471294812949129501295112952129531295412955129561295712958129591296012961129621296312964129651296612967129681296912970129711297212973129741297512976129771297812979129801298112982129831298412985129861298712988129891299012991129921299312994129951299612997129981299913000130011300213003130041300513006130071300813009130101301113012130131301413015130161301713018130191302013021130221302313024130251302613027130281302913030130311303213033130341303513036130371303813039130401304113042130431304413045130461304713048130491305013051130521305313054130551305613057130581305913060130611306213063130641306513066130671306813069130701307113072130731307413075130761307713078130791308013081130821308313084130851308613087130881308913090130911309213093130941309513096130971309813099131001310113102131031310413105131061310713108131091311013111131121311313114131151311613117131181311913120131211312213123131241312513126131271312813129131301313113132131331313413135131361313713138131391314013141131421314313144131451314613147131481314913150131511315213153131541315513156131571315813159131601316113162131631316413165131661316713168131691317013171131721317313174131751317613177131781317913180131811318213183131841318513186131871318813189131901319113192131931319413195131961319713198131991320013201132021320313204132051320613207132081320913210132111321213213132141321513216132171321813219132201322113222132231322413225132261322713228132291323013231132321323313234132351323613237132381323913240132411324213243132441324513246132471324813249132501325113252132531325413255132561325713258132591326013261132621326313264132651326613267132681326913270132711327213273132741327513276132771327813279132801328113282132831328413285132861328713288132891329013291132921329313294132951329613297132981329913300133011330213303133041330513306133071330813309133101331113312133131331413315133161331713318133191332013321133221332313324133251332613327133281332913330133311333213333133341333513336133371333813339133401334113342133431334413345133461334713348133491335013351133521335313354133551335613357133581335913360133611336213363133641336513366133671336813369133701337113372133731337413375133761337713378133791338013381133821338313384133851338613387133881338913390133911339213393133941339513396133971339813399134001340113402134031340413405134061340713408134091341013411134121341313414134151341613417134181341913420134211342213423134241342513426134271342813429134301343113432134331343413435134361343713438134391344013441134421344313444134451344613447134481344913450134511345213453134541345513456134571345813459134601346113462134631346413465134661346713468134691347013471134721347313474134751347613477134781347913480134811348213483134841348513486134871348813489134901349113492134931349413495134961349713498134991350013501135021350313504135051350613507135081350913510135111351213513135141351513516135171351813519135201352113522135231352413525135261352713528135291353013531135321353313534135351353613537135381353913540135411354213543135441354513546135471354813549135501355113552135531355413555135561355713558135591356013561135621356313564135651356613567135681356913570135711357213573135741357513576135771357813579135801358113582135831358413585135861358713588135891359013591135921359313594135951359613597135981359913600136011360213603136041360513606136071360813609136101361113612136131361413615136161361713618136191362013621136221362313624136251362613627136281362913630136311363213633136341363513636136371363813639136401364113642136431364413645136461364713648136491365013651136521365313654136551365613657136581365913660136611366213663136641366513666136671366813669136701367113672136731367413675136761367713678136791368013681136821368313684136851368613687136881368913690136911369213693136941369513696136971369813699137001370113702137031370413705137061370713708137091371013711137121371313714137151371613717137181371913720137211372213723137241372513726137271372813729137301373113732137331373413735137361373713738137391374013741137421374313744137451374613747137481374913750137511375213753137541375513756137571375813759137601376113762137631376413765137661376713768137691377013771137721377313774137751377613777137781377913780137811378213783137841378513786137871378813789137901379113792137931379413795137961379713798137991380013801138021380313804138051380613807138081380913810138111381213813138141381513816138171381813819138201382113822138231382413825138261382713828138291383013831138321383313834138351383613837138381383913840138411384213843138441384513846138471384813849138501385113852138531385413855138561385713858138591386013861138621386313864138651386613867138681386913870138711387213873138741387513876138771387813879138801388113882138831388413885138861388713888138891389013891138921389313894138951389613897138981389913900139011390213903139041390513906139071390813909139101391113912139131391413915139161391713918139191392013921139221392313924139251392613927139281392913930139311393213933139341393513936139371393813939139401394113942139431394413945139461394713948139491395013951139521395313954139551395613957139581395913960139611396213963139641396513966139671396813969139701397113972139731397413975139761397713978139791398013981139821398313984139851398613987139881398913990139911399213993139941399513996139971399813999140001400114002140031400414005140061400714008140091401014011140121401314014140151401614017140181401914020140211402214023140241402514026140271402814029140301403114032140331403414035140361403714038140391404014041140421404314044140451404614047140481404914050140511405214053140541405514056140571405814059140601406114062140631406414065140661406714068140691407014071140721407314074140751407614077140781407914080140811408214083140841408514086140871408814089140901409114092140931409414095140961409714098140991410014101141021410314104141051410614107141081410914110141111411214113141141411514116141171411814119141201412114122141231412414125141261412714128141291413014131141321413314134141351413614137141381413914140141411414214143141441414514146141471414814149141501415114152141531415414155141561415714158141591416014161141621416314164141651416614167141681416914170141711417214173141741417514176141771417814179141801418114182141831418414185141861418714188141891419014191141921419314194141951419614197141981419914200142011420214203142041420514206142071420814209142101421114212142131421414215142161421714218142191422014221142221422314224142251422614227142281422914230142311423214233142341423514236142371423814239142401424114242142431424414245142461424714248142491425014251142521425314254142551425614257142581425914260142611426214263142641426514266142671426814269142701427114272142731427414275142761427714278142791428014281142821428314284142851428614287142881428914290142911429214293142941429514296142971429814299143001430114302143031430414305143061430714308143091431014311143121431314314143151431614317143181431914320143211432214323143241432514326143271432814329143301433114332143331433414335143361433714338143391434014341143421434314344143451434614347143481434914350143511435214353143541435514356143571435814359143601436114362143631436414365143661436714368143691437014371143721437314374143751437614377143781437914380143811438214383143841438514386143871438814389143901439114392143931439414395143961439714398143991440014401144021440314404144051440614407144081440914410144111441214413144141441514416144171441814419144201442114422144231442414425144261442714428144291443014431144321443314434144351443614437144381443914440144411444214443144441444514446144471444814449144501445114452144531445414455144561445714458144591446014461144621446314464144651446614467144681446914470144711447214473144741447514476144771447814479144801448114482144831448414485144861448714488144891449014491144921449314494144951449614497144981449914500145011450214503145041450514506145071450814509145101451114512145131451414515145161451714518145191452014521145221452314524145251452614527145281452914530145311453214533145341453514536145371453814539145401454114542145431454414545145461454714548145491455014551145521455314554145551455614557145581455914560145611456214563145641456514566145671456814569145701457114572145731457414575145761457714578145791458014581145821458314584145851458614587145881458914590145911459214593145941459514596145971459814599146001460114602146031460414605146061460714608146091461014611146121461314614146151461614617146181461914620146211462214623146241462514626146271462814629146301463114632146331463414635146361463714638146391464014641146421464314644146451464614647146481464914650146511465214653146541465514656146571465814659146601466114662146631466414665146661466714668146691467014671146721467314674146751467614677146781467914680146811468214683146841468514686146871468814689146901469114692146931469414695146961469714698146991470014701147021470314704147051470614707147081470914710147111471214713147141471514716147171471814719147201472114722147231472414725147261472714728147291473014731147321473314734147351473614737147381473914740147411474214743147441474514746147471474814749147501475114752147531475414755147561475714758147591476014761147621476314764147651476614767147681476914770147711477214773147741477514776147771477814779147801478114782147831478414785147861478714788147891479014791147921479314794147951479614797147981479914800148011480214803148041480514806148071480814809148101481114812148131481414815148161481714818148191482014821148221482314824148251482614827148281482914830148311483214833148341483514836148371483814839148401484114842148431484414845148461484714848148491485014851148521485314854148551485614857148581485914860148611486214863148641486514866148671486814869148701487114872148731487414875148761487714878148791488014881148821488314884148851488614887148881488914890148911489214893148941489514896148971489814899149001490114902149031490414905149061490714908149091491014911149121491314914149151491614917149181491914920149211492214923149241492514926149271492814929149301493114932149331493414935149361493714938149391494014941149421494314944149451494614947149481494914950149511495214953149541495514956149571495814959149601496114962149631496414965149661496714968149691497014971149721497314974149751497614977149781497914980149811498214983149841498514986149871498814989149901499114992149931499414995149961499714998149991500015001150021500315004150051500615007150081500915010150111501215013150141501515016150171501815019150201502115022150231502415025150261502715028150291503015031150321503315034150351503615037150381503915040150411504215043150441504515046150471504815049150501505115052150531505415055150561505715058150591506015061150621506315064150651506615067150681506915070150711507215073150741507515076150771507815079150801508115082150831508415085150861508715088150891509015091150921509315094150951509615097150981509915100151011510215103151041510515106151071510815109151101511115112151131511415115151161511715118151191512015121151221512315124151251512615127151281512915130151311513215133151341513515136151371513815139151401514115142151431514415145151461514715148151491515015151151521515315154151551515615157151581515915160151611516215163151641516515166151671516815169151701517115172151731517415175151761517715178151791518015181151821518315184151851518615187151881518915190151911519215193151941519515196151971519815199152001520115202152031520415205152061520715208152091521015211152121521315214152151521615217152181521915220152211522215223152241522515226152271522815229152301523115232152331523415235152361523715238152391524015241152421524315244152451524615247152481524915250152511525215253152541525515256152571525815259152601526115262152631526415265152661526715268152691527015271152721527315274152751527615277152781527915280152811528215283152841528515286152871528815289152901529115292152931529415295152961529715298152991530015301153021530315304153051530615307153081530915310153111531215313153141531515316153171531815319153201532115322153231532415325153261532715328153291533015331153321533315334153351533615337153381533915340153411534215343153441534515346153471534815349153501535115352153531535415355153561535715358153591536015361153621536315364153651536615367153681536915370153711537215373153741537515376153771537815379153801538115382153831538415385153861538715388153891539015391153921539315394153951539615397153981539915400154011540215403154041540515406154071540815409154101541115412154131541415415154161541715418154191542015421154221542315424154251542615427154281542915430154311543215433154341543515436154371543815439154401544115442154431544415445154461544715448154491545015451154521545315454154551545615457154581545915460154611546215463154641546515466154671546815469154701547115472154731547415475154761547715478154791548015481154821548315484154851548615487154881548915490154911549215493154941549515496154971549815499155001550115502155031550415505155061550715508155091551015511155121551315514155151551615517155181551915520155211552215523155241552515526155271552815529155301553115532155331553415535155361553715538155391554015541155421554315544155451554615547155481554915550155511555215553155541555515556155571555815559155601556115562155631556415565155661556715568155691557015571155721557315574155751557615577155781557915580155811558215583155841558515586155871558815589155901559115592155931559415595155961559715598155991560015601156021560315604156051560615607156081560915610156111561215613156141561515616156171561815619156201562115622156231562415625156261562715628156291563015631156321563315634156351563615637156381563915640156411564215643156441564515646156471564815649156501565115652156531565415655156561565715658156591566015661156621566315664156651566615667156681566915670156711567215673156741567515676156771567815679156801568115682156831568415685156861568715688156891569015691156921569315694156951569615697156981569915700157011570215703157041570515706157071570815709157101571115712157131571415715157161571715718157191572015721157221572315724157251572615727157281572915730157311573215733157341573515736157371573815739157401574115742157431574415745157461574715748157491575015751157521575315754157551575615757157581575915760157611576215763157641576515766157671576815769157701577115772157731577415775157761577715778157791578015781157821578315784157851578615787157881578915790157911579215793157941579515796157971579815799158001580115802158031580415805158061580715808158091581015811158121581315814158151581615817158181581915820158211582215823158241582515826158271582815829158301583115832158331583415835158361583715838158391584015841158421584315844158451584615847158481584915850158511585215853158541585515856158571585815859158601586115862158631586415865158661586715868158691587015871158721587315874158751587615877158781587915880158811588215883158841588515886158871588815889158901589115892158931589415895158961589715898158991590015901159021590315904159051590615907159081590915910159111591215913159141591515916159171591815919159201592115922159231592415925159261592715928159291593015931159321593315934159351593615937159381593915940159411594215943159441594515946159471594815949159501595115952159531595415955159561595715958159591596015961159621596315964159651596615967159681596915970159711597215973159741597515976159771597815979159801598115982159831598415985159861598715988159891599015991159921599315994159951599615997159981599916000160011600216003160041600516006160071600816009160101601116012160131601416015160161601716018160191602016021160221602316024160251602616027160281602916030160311603216033160341603516036160371603816039160401604116042160431604416045160461604716048160491605016051160521605316054160551605616057160581605916060160611606216063160641606516066160671606816069160701607116072160731607416075160761607716078160791608016081160821608316084160851608616087160881608916090160911609216093160941609516096160971609816099161001610116102161031610416105161061610716108161091611016111161121611316114161151611616117161181611916120161211612216123161241612516126161271612816129161301613116132161331613416135161361613716138161391614016141161421614316144161451614616147161481614916150161511615216153161541615516156161571615816159161601616116162161631616416165161661616716168161691617016171161721617316174161751617616177161781617916180161811618216183161841618516186161871618816189161901619116192161931619416195161961619716198161991620016201162021620316204162051620616207162081620916210162111621216213162141621516216162171621816219162201622116222162231622416225162261622716228162291623016231162321623316234162351623616237162381623916240162411624216243162441624516246162471624816249162501625116252162531625416255162561625716258162591626016261162621626316264162651626616267162681626916270162711627216273162741627516276162771627816279162801628116282162831628416285162861628716288162891629016291162921629316294162951629616297162981629916300163011630216303163041630516306163071630816309163101631116312163131631416315163161631716318163191632016321163221632316324163251632616327163281632916330163311633216333163341633516336163371633816339163401634116342163431634416345163461634716348163491635016351163521635316354163551635616357163581635916360163611636216363163641636516366163671636816369163701637116372163731637416375163761637716378163791638016381163821638316384163851638616387163881638916390163911639216393163941639516396163971639816399164001640116402164031640416405164061640716408164091641016411164121641316414164151641616417164181641916420164211642216423164241642516426164271642816429164301643116432164331643416435164361643716438164391644016441164421644316444164451644616447164481644916450164511645216453164541645516456164571645816459164601646116462164631646416465164661646716468164691647016471164721647316474164751647616477164781647916480164811648216483164841648516486164871648816489164901649116492164931649416495164961649716498164991650016501165021650316504165051650616507165081650916510165111651216513165141651516516165171651816519165201652116522165231652416525165261652716528165291653016531165321653316534165351653616537165381653916540165411654216543165441654516546165471654816549165501655116552165531655416555165561655716558165591656016561165621656316564165651656616567165681656916570165711657216573165741657516576165771657816579165801658116582165831658416585165861658716588165891659016591165921659316594165951659616597165981659916600166011660216603166041660516606166071660816609166101661116612166131661416615166161661716618166191662016621166221662316624166251662616627166281662916630166311663216633166341663516636166371663816639166401664116642166431664416645166461664716648166491665016651166521665316654166551665616657166581665916660166611666216663166641666516666166671666816669166701667116672166731667416675166761667716678166791668016681166821668316684166851668616687166881668916690166911669216693166941669516696166971669816699167001670116702167031670416705167061670716708167091671016711167121671316714167151671616717167181671916720167211672216723167241672516726167271672816729167301673116732167331673416735167361673716738167391674016741167421674316744167451674616747167481674916750167511675216753167541675516756167571675816759167601676116762167631676416765167661676716768167691677016771167721677316774167751677616777167781677916780167811678216783167841678516786167871678816789167901679116792167931679416795167961679716798167991680016801168021680316804168051680616807168081680916810168111681216813168141681516816168171681816819168201682116822168231682416825168261682716828168291683016831168321683316834168351683616837168381683916840168411684216843168441684516846168471684816849168501685116852168531685416855168561685716858168591686016861168621686316864168651686616867168681686916870168711687216873168741687516876168771687816879168801688116882168831688416885168861688716888168891689016891168921689316894168951689616897168981689916900169011690216903169041690516906169071690816909169101691116912169131691416915169161691716918169191692016921169221692316924169251692616927169281692916930169311693216933169341693516936169371693816939169401694116942169431694416945169461694716948169491695016951169521695316954169551695616957169581695916960169611696216963169641696516966169671696816969169701697116972169731697416975169761697716978169791698016981169821698316984169851698616987169881698916990169911699216993169941699516996169971699816999170001700117002170031700417005170061700717008170091701017011170121701317014170151701617017170181701917020170211702217023170241702517026170271702817029170301703117032170331703417035170361703717038170391704017041170421704317044170451704617047170481704917050170511705217053170541705517056170571705817059170601706117062170631706417065170661706717068170691707017071170721707317074170751707617077170781707917080170811708217083170841708517086170871708817089170901709117092170931709417095170961709717098170991710017101171021710317104171051710617107171081710917110171111711217113171141711517116171171711817119171201712117122171231712417125171261712717128171291713017131171321713317134171351713617137171381713917140171411714217143171441714517146171471714817149171501715117152171531715417155171561715717158171591716017161171621716317164171651716617167171681716917170171711717217173
  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, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
  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__, "__exportStar", function() { return __exportStar; });
  115. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__values", function() { return __values; });
  116. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__read", function() { return __read; });
  117. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__spread", function() { return __spread; });
  118. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__spreadArrays", function() { return __spreadArrays; });
  119. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__await", function() { return __await; });
  120. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__asyncGenerator", function() { return __asyncGenerator; });
  121. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__asyncDelegator", function() { return __asyncDelegator; });
  122. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__asyncValues", function() { return __asyncValues; });
  123. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__makeTemplateObject", function() { return __makeTemplateObject; });
  124. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__importStar", function() { return __importStar; });
  125. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "__importDefault", function() { return __importDefault; });
  126. /*! *****************************************************************************
  127. Copyright (c) Microsoft Corporation. All rights reserved.
  128. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  129. this file except in compliance with the License. You may obtain a copy of the
  130. License at http://www.apache.org/licenses/LICENSE-2.0
  131. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  132. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  133. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  134. MERCHANTABLITY OR NON-INFRINGEMENT.
  135. See the Apache Version 2.0 License for specific language governing permissions
  136. and limitations under the License.
  137. ***************************************************************************** */
  138. /* global Reflect, Promise */
  139. var extendStatics = function(d, b) {
  140. extendStatics = Object.setPrototypeOf ||
  141. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  142. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  143. return extendStatics(d, b);
  144. };
  145. function __extends(d, b) {
  146. extendStatics(d, b);
  147. function __() { this.constructor = d; }
  148. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  149. }
  150. var __assign = function() {
  151. __assign = Object.assign || function __assign(t) {
  152. for (var s, i = 1, n = arguments.length; i < n; i++) {
  153. s = arguments[i];
  154. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  155. }
  156. return t;
  157. }
  158. return __assign.apply(this, arguments);
  159. }
  160. function __rest(s, e) {
  161. var t = {};
  162. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  163. t[p] = s[p];
  164. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  165. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  166. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  167. t[p[i]] = s[p[i]];
  168. }
  169. return t;
  170. }
  171. function __decorate(decorators, target, key, desc) {
  172. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  173. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  174. 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;
  175. return c > 3 && r && Object.defineProperty(target, key, r), r;
  176. }
  177. function __param(paramIndex, decorator) {
  178. return function (target, key) { decorator(target, key, paramIndex); }
  179. }
  180. function __metadata(metadataKey, metadataValue) {
  181. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
  182. }
  183. function __awaiter(thisArg, _arguments, P, generator) {
  184. return new (P || (P = Promise))(function (resolve, reject) {
  185. function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  186. function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  187. function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
  188. step((generator = generator.apply(thisArg, _arguments || [])).next());
  189. });
  190. }
  191. function __generator(thisArg, body) {
  192. var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
  193. return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
  194. function verb(n) { return function (v) { return step([n, v]); }; }
  195. function step(op) {
  196. if (f) throw new TypeError("Generator is already executing.");
  197. while (_) try {
  198. 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;
  199. if (y = 0, t) op = [op[0] & 2, t.value];
  200. switch (op[0]) {
  201. case 0: case 1: t = op; break;
  202. case 4: _.label++; return { value: op[1], done: false };
  203. case 5: _.label++; y = op[1]; op = [0]; continue;
  204. case 7: op = _.ops.pop(); _.trys.pop(); continue;
  205. default:
  206. if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
  207. if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
  208. if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
  209. if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
  210. if (t[2]) _.ops.pop();
  211. _.trys.pop(); continue;
  212. }
  213. op = body.call(thisArg, _);
  214. } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
  215. if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
  216. }
  217. }
  218. function __exportStar(m, exports) {
  219. for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  220. }
  221. function __values(o) {
  222. var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
  223. if (m) return m.call(o);
  224. return {
  225. next: function () {
  226. if (o && i >= o.length) o = void 0;
  227. return { value: o && o[i++], done: !o };
  228. }
  229. };
  230. }
  231. function __read(o, n) {
  232. var m = typeof Symbol === "function" && o[Symbol.iterator];
  233. if (!m) return o;
  234. var i = m.call(o), r, ar = [], e;
  235. try {
  236. while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  237. }
  238. catch (error) { e = { error: error }; }
  239. finally {
  240. try {
  241. if (r && !r.done && (m = i["return"])) m.call(i);
  242. }
  243. finally { if (e) throw e.error; }
  244. }
  245. return ar;
  246. }
  247. function __spread() {
  248. for (var ar = [], i = 0; i < arguments.length; i++)
  249. ar = ar.concat(__read(arguments[i]));
  250. return ar;
  251. }
  252. function __spreadArrays() {
  253. for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
  254. for (var r = Array(s), k = 0, i = 0; i < il; i++)
  255. for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
  256. r[k] = a[j];
  257. return r;
  258. };
  259. function __await(v) {
  260. return this instanceof __await ? (this.v = v, this) : new __await(v);
  261. }
  262. function __asyncGenerator(thisArg, _arguments, generator) {
  263. if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
  264. var g = generator.apply(thisArg, _arguments || []), i, q = [];
  265. return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
  266. 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); }); }; }
  267. function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
  268. function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
  269. function fulfill(value) { resume("next", value); }
  270. function reject(value) { resume("throw", value); }
  271. function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
  272. }
  273. function __asyncDelegator(o) {
  274. var i, p;
  275. return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
  276. 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; }
  277. }
  278. function __asyncValues(o) {
  279. if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
  280. var m = o[Symbol.asyncIterator], i;
  281. 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);
  282. 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); }); }; }
  283. function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
  284. }
  285. function __makeTemplateObject(cooked, raw) {
  286. if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  287. return cooked;
  288. };
  289. function __importStar(mod) {
  290. if (mod && mod.__esModule) return mod;
  291. var result = {};
  292. if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
  293. result.default = mod;
  294. return result;
  295. }
  296. function __importDefault(mod) {
  297. return (mod && mod.__esModule) ? mod : { default: mod };
  298. }
  299. /***/ }),
  300. /***/ "../../node_modules/webpack/buildin/global.js":
  301. /*!***********************************!*\
  302. !*** (webpack)/buildin/global.js ***!
  303. \***********************************/
  304. /*! no static exports found */
  305. /***/ (function(module, exports) {
  306. var g;
  307. // This works in non-strict mode
  308. g = (function() {
  309. return this;
  310. })();
  311. try {
  312. // This works if eval is allowed (see CSP)
  313. g = g || new Function("return this")();
  314. } catch (e) {
  315. // This works if the window reference is available
  316. if (typeof window === "object") g = window;
  317. }
  318. // g can still be undefined, but nothing to do about it...
  319. // We return undefined, instead of nothing here, so it's
  320. // easier to handle this case. if(!global) { ...}
  321. module.exports = g;
  322. /***/ }),
  323. /***/ "./2D/adtInstrumentation.ts":
  324. /*!**********************************!*\
  325. !*** ./2D/adtInstrumentation.ts ***!
  326. \**********************************/
  327. /*! exports provided: AdvancedDynamicTextureInstrumentation */
  328. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  329. "use strict";
  330. __webpack_require__.r(__webpack_exports__);
  331. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return AdvancedDynamicTextureInstrumentation; });
  332. /* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/perfCounter */ "babylonjs/Misc/perfCounter");
  333. /* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__);
  334. /**
  335. * This class can be used to get instrumentation data from a AdvancedDynamicTexture object
  336. */
  337. var AdvancedDynamicTextureInstrumentation = /** @class */ (function () {
  338. /**
  339. * Instantiates a new advanced dynamic texture instrumentation.
  340. * This class can be used to get instrumentation data from an AdvancedDynamicTexture object
  341. * @param texture Defines the AdvancedDynamicTexture to instrument
  342. */
  343. function AdvancedDynamicTextureInstrumentation(
  344. /**
  345. * Define the instrumented AdvancedDynamicTexture.
  346. */
  347. texture) {
  348. this.texture = texture;
  349. this._captureRenderTime = false;
  350. this._renderTime = new babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__["PerfCounter"]();
  351. this._captureLayoutTime = false;
  352. this._layoutTime = new babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__["PerfCounter"]();
  353. // Observers
  354. this._onBeginRenderObserver = null;
  355. this._onEndRenderObserver = null;
  356. this._onBeginLayoutObserver = null;
  357. this._onEndLayoutObserver = null;
  358. }
  359. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "renderTimeCounter", {
  360. // Properties
  361. /**
  362. * Gets the perf counter used to capture render time
  363. */
  364. get: function () {
  365. return this._renderTime;
  366. },
  367. enumerable: true,
  368. configurable: true
  369. });
  370. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "layoutTimeCounter", {
  371. /**
  372. * Gets the perf counter used to capture layout time
  373. */
  374. get: function () {
  375. return this._layoutTime;
  376. },
  377. enumerable: true,
  378. configurable: true
  379. });
  380. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "captureRenderTime", {
  381. /**
  382. * Enable or disable the render time capture
  383. */
  384. get: function () {
  385. return this._captureRenderTime;
  386. },
  387. set: function (value) {
  388. var _this = this;
  389. if (value === this._captureRenderTime) {
  390. return;
  391. }
  392. this._captureRenderTime = value;
  393. if (value) {
  394. this._onBeginRenderObserver = this.texture.onBeginRenderObservable.add(function () {
  395. _this._renderTime.beginMonitoring();
  396. });
  397. this._onEndRenderObserver = this.texture.onEndRenderObservable.add(function () {
  398. _this._renderTime.endMonitoring(true);
  399. });
  400. }
  401. else {
  402. this.texture.onBeginRenderObservable.remove(this._onBeginRenderObserver);
  403. this._onBeginRenderObserver = null;
  404. this.texture.onEndRenderObservable.remove(this._onEndRenderObserver);
  405. this._onEndRenderObserver = null;
  406. }
  407. },
  408. enumerable: true,
  409. configurable: true
  410. });
  411. Object.defineProperty(AdvancedDynamicTextureInstrumentation.prototype, "captureLayoutTime", {
  412. /**
  413. * Enable or disable the layout time capture
  414. */
  415. get: function () {
  416. return this._captureLayoutTime;
  417. },
  418. set: function (value) {
  419. var _this = this;
  420. if (value === this._captureLayoutTime) {
  421. return;
  422. }
  423. this._captureLayoutTime = value;
  424. if (value) {
  425. this._onBeginLayoutObserver = this.texture.onBeginLayoutObservable.add(function () {
  426. _this._layoutTime.beginMonitoring();
  427. });
  428. this._onEndLayoutObserver = this.texture.onEndLayoutObservable.add(function () {
  429. _this._layoutTime.endMonitoring(true);
  430. });
  431. }
  432. else {
  433. this.texture.onBeginLayoutObservable.remove(this._onBeginLayoutObserver);
  434. this._onBeginLayoutObserver = null;
  435. this.texture.onEndLayoutObservable.remove(this._onEndLayoutObserver);
  436. this._onEndLayoutObserver = null;
  437. }
  438. },
  439. enumerable: true,
  440. configurable: true
  441. });
  442. /**
  443. * Dispose and release associated resources.
  444. */
  445. AdvancedDynamicTextureInstrumentation.prototype.dispose = function () {
  446. this.texture.onBeginRenderObservable.remove(this._onBeginRenderObserver);
  447. this._onBeginRenderObserver = null;
  448. this.texture.onEndRenderObservable.remove(this._onEndRenderObserver);
  449. this._onEndRenderObserver = null;
  450. this.texture.onBeginLayoutObservable.remove(this._onBeginLayoutObserver);
  451. this._onBeginLayoutObserver = null;
  452. this.texture.onEndLayoutObservable.remove(this._onEndLayoutObserver);
  453. this._onEndLayoutObserver = null;
  454. this.texture = null;
  455. };
  456. return AdvancedDynamicTextureInstrumentation;
  457. }());
  458. /***/ }),
  459. /***/ "./2D/advancedDynamicTexture.ts":
  460. /*!**************************************!*\
  461. !*** ./2D/advancedDynamicTexture.ts ***!
  462. \**************************************/
  463. /*! exports provided: AdvancedDynamicTexture */
  464. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  465. "use strict";
  466. __webpack_require__.r(__webpack_exports__);
  467. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return AdvancedDynamicTexture; });
  468. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  469. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  470. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  471. /* harmony import */ var _controls_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/container */ "./2D/controls/container.ts");
  472. /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
  473. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./measure */ "./2D/measure.ts");
  474. /**
  475. * Class used to create texture to support 2D GUI elements
  476. * @see http://doc.babylonjs.com/how_to/gui
  477. */
  478. var AdvancedDynamicTexture = /** @class */ (function (_super) {
  479. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(AdvancedDynamicTexture, _super);
  480. /**
  481. * Creates a new AdvancedDynamicTexture
  482. * @param name defines the name of the texture
  483. * @param width defines the width of the texture
  484. * @param height defines the height of the texture
  485. * @param scene defines the hosting scene
  486. * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
  487. * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
  488. */
  489. function AdvancedDynamicTexture(name, width, height, scene, generateMipMaps, samplingMode) {
  490. if (width === void 0) { width = 0; }
  491. if (height === void 0) { height = 0; }
  492. if (generateMipMaps === void 0) { generateMipMaps = false; }
  493. if (samplingMode === void 0) { samplingMode = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].NEAREST_SAMPLINGMODE; }
  494. var _this = _super.call(this, name, { width: width, height: height }, scene, generateMipMaps, samplingMode, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Constants"].TEXTUREFORMAT_RGBA) || this;
  495. _this._isDirty = false;
  496. /** @hidden */
  497. _this._rootContainer = new _controls_container__WEBPACK_IMPORTED_MODULE_2__["Container"]("root");
  498. /** @hidden */
  499. _this._lastControlOver = {};
  500. /** @hidden */
  501. _this._lastControlDown = {};
  502. /** @hidden */
  503. _this._capturingControl = {};
  504. /** @hidden */
  505. _this._linkedControls = new Array();
  506. _this._isFullscreen = false;
  507. _this._fullscreenViewport = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Viewport"](0, 0, 1, 1);
  508. _this._idealWidth = 0;
  509. _this._idealHeight = 0;
  510. _this._useSmallestIdeal = false;
  511. _this._renderAtIdealSize = false;
  512. _this._blockNextFocusCheck = false;
  513. _this._renderScale = 1;
  514. _this._cursorChanged = false;
  515. /** @hidden */
  516. _this._numLayoutCalls = 0;
  517. /** @hidden */
  518. _this._numRenderCalls = 0;
  519. /**
  520. * Define type to string to ensure compatibility across browsers
  521. * Safari doesn't support DataTransfer constructor
  522. */
  523. _this._clipboardData = "";
  524. /**
  525. * Observable event triggered each time an clipboard event is received from the rendering canvas
  526. */
  527. _this.onClipboardObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  528. /**
  529. * Observable event triggered each time a pointer down is intercepted by a control
  530. */
  531. _this.onControlPickedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  532. /**
  533. * Observable event triggered before layout is evaluated
  534. */
  535. _this.onBeginLayoutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  536. /**
  537. * Observable event triggered after the layout was evaluated
  538. */
  539. _this.onEndLayoutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  540. /**
  541. * Observable event triggered before the texture is rendered
  542. */
  543. _this.onBeginRenderObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  544. /**
  545. * Observable event triggered after the texture was rendered
  546. */
  547. _this.onEndRenderObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  548. /**
  549. * Gets or sets a boolean defining if alpha is stored as premultiplied
  550. */
  551. _this.premulAlpha = false;
  552. _this._useInvalidateRectOptimization = true;
  553. // Invalidated rectangle which is the combination of all invalidated controls after they have been rotated into absolute position
  554. _this._invalidatedRectangle = null;
  555. _this._clearMeasure = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](0, 0, 0, 0);
  556. /** @hidden */
  557. _this.onClipboardCopy = function (rawEvt) {
  558. var evt = rawEvt;
  559. var ev = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardInfo"](babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].COPY, evt);
  560. _this.onClipboardObservable.notifyObservers(ev);
  561. evt.preventDefault();
  562. };
  563. /** @hidden */
  564. _this.onClipboardCut = function (rawEvt) {
  565. var evt = rawEvt;
  566. var ev = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardInfo"](babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].CUT, evt);
  567. _this.onClipboardObservable.notifyObservers(ev);
  568. evt.preventDefault();
  569. };
  570. /** @hidden */
  571. _this.onClipboardPaste = function (rawEvt) {
  572. var evt = rawEvt;
  573. var ev = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardInfo"](babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].PASTE, evt);
  574. _this.onClipboardObservable.notifyObservers(ev);
  575. evt.preventDefault();
  576. };
  577. scene = _this.getScene();
  578. if (!scene || !_this._texture) {
  579. return _this;
  580. }
  581. _this._rootElement = scene.getEngine().getInputElement();
  582. _this._renderObserver = scene.onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
  583. _this._preKeyboardObserver = scene.onPreKeyboardObservable.add(function (info) {
  584. if (!_this._focusedControl) {
  585. return;
  586. }
  587. if (info.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["KeyboardEventTypes"].KEYDOWN) {
  588. _this._focusedControl.processKeyboard(info.event);
  589. }
  590. info.skipOnPointerObservable = true;
  591. });
  592. _this._rootContainer._link(_this);
  593. _this.hasAlpha = true;
  594. if (!width || !height) {
  595. _this._resizeObserver = scene.getEngine().onResizeObservable.add(function () { return _this._onResize(); });
  596. _this._onResize();
  597. }
  598. _this._texture.isReady = true;
  599. return _this;
  600. }
  601. Object.defineProperty(AdvancedDynamicTexture.prototype, "numLayoutCalls", {
  602. /** Gets the number of layout calls made the last time the ADT has been rendered */
  603. get: function () {
  604. return this._numLayoutCalls;
  605. },
  606. enumerable: true,
  607. configurable: true
  608. });
  609. Object.defineProperty(AdvancedDynamicTexture.prototype, "numRenderCalls", {
  610. /** Gets the number of render calls made the last time the ADT has been rendered */
  611. get: function () {
  612. return this._numRenderCalls;
  613. },
  614. enumerable: true,
  615. configurable: true
  616. });
  617. Object.defineProperty(AdvancedDynamicTexture.prototype, "renderScale", {
  618. /**
  619. * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
  620. * Useful when you want more antialiasing
  621. */
  622. get: function () {
  623. return this._renderScale;
  624. },
  625. set: function (value) {
  626. if (value === this._renderScale) {
  627. return;
  628. }
  629. this._renderScale = value;
  630. this._onResize();
  631. },
  632. enumerable: true,
  633. configurable: true
  634. });
  635. Object.defineProperty(AdvancedDynamicTexture.prototype, "background", {
  636. /** Gets or sets the background color */
  637. get: function () {
  638. return this._background;
  639. },
  640. set: function (value) {
  641. if (this._background === value) {
  642. return;
  643. }
  644. this._background = value;
  645. this.markAsDirty();
  646. },
  647. enumerable: true,
  648. configurable: true
  649. });
  650. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealWidth", {
  651. /**
  652. * Gets or sets the ideal width used to design controls.
  653. * The GUI will then rescale everything accordingly
  654. * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
  655. */
  656. get: function () {
  657. return this._idealWidth;
  658. },
  659. set: function (value) {
  660. if (this._idealWidth === value) {
  661. return;
  662. }
  663. this._idealWidth = value;
  664. this.markAsDirty();
  665. this._rootContainer._markAllAsDirty();
  666. },
  667. enumerable: true,
  668. configurable: true
  669. });
  670. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealHeight", {
  671. /**
  672. * Gets or sets the ideal height used to design controls.
  673. * The GUI will then rescale everything accordingly
  674. * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
  675. */
  676. get: function () {
  677. return this._idealHeight;
  678. },
  679. set: function (value) {
  680. if (this._idealHeight === value) {
  681. return;
  682. }
  683. this._idealHeight = value;
  684. this.markAsDirty();
  685. this._rootContainer._markAllAsDirty();
  686. },
  687. enumerable: true,
  688. configurable: true
  689. });
  690. Object.defineProperty(AdvancedDynamicTexture.prototype, "useSmallestIdeal", {
  691. /**
  692. * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
  693. * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
  694. */
  695. get: function () {
  696. return this._useSmallestIdeal;
  697. },
  698. set: function (value) {
  699. if (this._useSmallestIdeal === value) {
  700. return;
  701. }
  702. this._useSmallestIdeal = value;
  703. this.markAsDirty();
  704. this._rootContainer._markAllAsDirty();
  705. },
  706. enumerable: true,
  707. configurable: true
  708. });
  709. Object.defineProperty(AdvancedDynamicTexture.prototype, "renderAtIdealSize", {
  710. /**
  711. * Gets or sets a boolean indicating if adaptive scaling must be used
  712. * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
  713. */
  714. get: function () {
  715. return this._renderAtIdealSize;
  716. },
  717. set: function (value) {
  718. if (this._renderAtIdealSize === value) {
  719. return;
  720. }
  721. this._renderAtIdealSize = value;
  722. this._onResize();
  723. },
  724. enumerable: true,
  725. configurable: true
  726. });
  727. Object.defineProperty(AdvancedDynamicTexture.prototype, "idealRatio", {
  728. /**
  729. * Gets the ratio used when in "ideal mode"
  730. * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
  731. * */
  732. get: function () {
  733. var rwidth = 0;
  734. var rheight = 0;
  735. if (this._idealWidth) {
  736. rwidth = (this.getSize().width) / this._idealWidth;
  737. }
  738. if (this._idealHeight) {
  739. rheight = (this.getSize().height) / this._idealHeight;
  740. }
  741. if (this._useSmallestIdeal && this._idealWidth && this._idealHeight) {
  742. return window.innerWidth < window.innerHeight ? rwidth : rheight;
  743. }
  744. if (this._idealWidth) { // horizontal
  745. return rwidth;
  746. }
  747. if (this._idealHeight) { // vertical
  748. return rheight;
  749. }
  750. return 1;
  751. },
  752. enumerable: true,
  753. configurable: true
  754. });
  755. Object.defineProperty(AdvancedDynamicTexture.prototype, "layer", {
  756. /**
  757. * Gets the underlying layer used to render the texture when in fullscreen mode
  758. */
  759. get: function () {
  760. return this._layerToDispose;
  761. },
  762. enumerable: true,
  763. configurable: true
  764. });
  765. Object.defineProperty(AdvancedDynamicTexture.prototype, "rootContainer", {
  766. /**
  767. * Gets the root container control
  768. */
  769. get: function () {
  770. return this._rootContainer;
  771. },
  772. enumerable: true,
  773. configurable: true
  774. });
  775. /**
  776. * Returns an array containing the root container.
  777. * This is mostly used to let the Inspector introspects the ADT
  778. * @returns an array containing the rootContainer
  779. */
  780. AdvancedDynamicTexture.prototype.getChildren = function () {
  781. return [this._rootContainer];
  782. };
  783. /**
  784. * Will return all controls that are inside this texture
  785. * @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
  786. * @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
  787. * @return all child controls
  788. */
  789. AdvancedDynamicTexture.prototype.getDescendants = function (directDescendantsOnly, predicate) {
  790. return this._rootContainer.getDescendants(directDescendantsOnly, predicate);
  791. };
  792. Object.defineProperty(AdvancedDynamicTexture.prototype, "focusedControl", {
  793. /**
  794. * Gets or sets the current focused control
  795. */
  796. get: function () {
  797. return this._focusedControl;
  798. },
  799. set: function (control) {
  800. if (this._focusedControl == control) {
  801. return;
  802. }
  803. if (this._focusedControl) {
  804. this._focusedControl.onBlur();
  805. }
  806. if (control) {
  807. control.onFocus();
  808. }
  809. this._focusedControl = control;
  810. },
  811. enumerable: true,
  812. configurable: true
  813. });
  814. Object.defineProperty(AdvancedDynamicTexture.prototype, "isForeground", {
  815. /**
  816. * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
  817. */
  818. get: function () {
  819. if (!this.layer) {
  820. return true;
  821. }
  822. return (!this.layer.isBackground);
  823. },
  824. set: function (value) {
  825. if (!this.layer) {
  826. return;
  827. }
  828. if (this.layer.isBackground === !value) {
  829. return;
  830. }
  831. this.layer.isBackground = !value;
  832. },
  833. enumerable: true,
  834. configurable: true
  835. });
  836. Object.defineProperty(AdvancedDynamicTexture.prototype, "clipboardData", {
  837. /**
  838. * Gets or set information about clipboardData
  839. */
  840. get: function () {
  841. return this._clipboardData;
  842. },
  843. set: function (value) {
  844. this._clipboardData = value;
  845. },
  846. enumerable: true,
  847. configurable: true
  848. });
  849. /**
  850. * Get the current class name of the texture useful for serialization or dynamic coding.
  851. * @returns "AdvancedDynamicTexture"
  852. */
  853. AdvancedDynamicTexture.prototype.getClassName = function () {
  854. return "AdvancedDynamicTexture";
  855. };
  856. /**
  857. * Function used to execute a function on all controls
  858. * @param func defines the function to execute
  859. * @param container defines the container where controls belong. If null the root container will be used
  860. */
  861. AdvancedDynamicTexture.prototype.executeOnAllControls = function (func, container) {
  862. if (!container) {
  863. container = this._rootContainer;
  864. }
  865. func(container);
  866. for (var _i = 0, _a = container.children; _i < _a.length; _i++) {
  867. var child = _a[_i];
  868. if (child.children) {
  869. this.executeOnAllControls(func, child);
  870. continue;
  871. }
  872. func(child);
  873. }
  874. };
  875. Object.defineProperty(AdvancedDynamicTexture.prototype, "useInvalidateRectOptimization", {
  876. /**
  877. * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
  878. */
  879. get: function () {
  880. return this._useInvalidateRectOptimization;
  881. },
  882. set: function (value) {
  883. this._useInvalidateRectOptimization = value;
  884. },
  885. enumerable: true,
  886. configurable: true
  887. });
  888. /**
  889. * Invalidates a rectangle area on the gui texture
  890. * @param invalidMinX left most position of the rectangle to invalidate in the texture
  891. * @param invalidMinY top most position of the rectangle to invalidate in the texture
  892. * @param invalidMaxX right most position of the rectangle to invalidate in the texture
  893. * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
  894. */
  895. AdvancedDynamicTexture.prototype.invalidateRect = function (invalidMinX, invalidMinY, invalidMaxX, invalidMaxY) {
  896. if (!this._useInvalidateRectOptimization) {
  897. return;
  898. }
  899. if (!this._invalidatedRectangle) {
  900. this._invalidatedRectangle = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](invalidMinX, invalidMinY, invalidMaxX - invalidMinX + 1, invalidMaxY - invalidMinY + 1);
  901. }
  902. else {
  903. // Compute intersection
  904. var maxX = Math.ceil(Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, invalidMaxX));
  905. var maxY = Math.ceil(Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, invalidMaxY));
  906. this._invalidatedRectangle.left = Math.floor(Math.min(this._invalidatedRectangle.left, invalidMinX));
  907. this._invalidatedRectangle.top = Math.floor(Math.min(this._invalidatedRectangle.top, invalidMinY));
  908. this._invalidatedRectangle.width = maxX - this._invalidatedRectangle.left + 1;
  909. this._invalidatedRectangle.height = maxY - this._invalidatedRectangle.top + 1;
  910. }
  911. };
  912. /**
  913. * Marks the texture as dirty forcing a complete update
  914. */
  915. AdvancedDynamicTexture.prototype.markAsDirty = function () {
  916. this._isDirty = true;
  917. };
  918. /**
  919. * Helper function used to create a new style
  920. * @returns a new style
  921. * @see http://doc.babylonjs.com/how_to/gui#styles
  922. */
  923. AdvancedDynamicTexture.prototype.createStyle = function () {
  924. return new _style__WEBPACK_IMPORTED_MODULE_3__["Style"](this);
  925. };
  926. /**
  927. * Adds a new control to the root container
  928. * @param control defines the control to add
  929. * @returns the current texture
  930. */
  931. AdvancedDynamicTexture.prototype.addControl = function (control) {
  932. this._rootContainer.addControl(control);
  933. return this;
  934. };
  935. /**
  936. * Removes a control from the root container
  937. * @param control defines the control to remove
  938. * @returns the current texture
  939. */
  940. AdvancedDynamicTexture.prototype.removeControl = function (control) {
  941. this._rootContainer.removeControl(control);
  942. return this;
  943. };
  944. /**
  945. * Release all resources
  946. */
  947. AdvancedDynamicTexture.prototype.dispose = function () {
  948. var scene = this.getScene();
  949. if (!scene) {
  950. return;
  951. }
  952. this._rootElement = null;
  953. scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
  954. if (this._resizeObserver) {
  955. scene.getEngine().onResizeObservable.remove(this._resizeObserver);
  956. }
  957. if (this._pointerMoveObserver) {
  958. scene.onPrePointerObservable.remove(this._pointerMoveObserver);
  959. }
  960. if (this._pointerObserver) {
  961. scene.onPointerObservable.remove(this._pointerObserver);
  962. }
  963. if (this._preKeyboardObserver) {
  964. scene.onPreKeyboardObservable.remove(this._preKeyboardObserver);
  965. }
  966. if (this._canvasPointerOutObserver) {
  967. scene.getEngine().onCanvasPointerOutObservable.remove(this._canvasPointerOutObserver);
  968. }
  969. if (this._layerToDispose) {
  970. this._layerToDispose.texture = null;
  971. this._layerToDispose.dispose();
  972. this._layerToDispose = null;
  973. }
  974. this._rootContainer.dispose();
  975. this.onClipboardObservable.clear();
  976. this.onControlPickedObservable.clear();
  977. this.onBeginRenderObservable.clear();
  978. this.onEndRenderObservable.clear();
  979. this.onBeginLayoutObservable.clear();
  980. this.onEndLayoutObservable.clear();
  981. _super.prototype.dispose.call(this);
  982. };
  983. AdvancedDynamicTexture.prototype._onResize = function () {
  984. var scene = this.getScene();
  985. if (!scene) {
  986. return;
  987. }
  988. // Check size
  989. var engine = scene.getEngine();
  990. var textureSize = this.getSize();
  991. var renderWidth = engine.getRenderWidth() * this._renderScale;
  992. var renderHeight = engine.getRenderHeight() * this._renderScale;
  993. if (this._renderAtIdealSize) {
  994. if (this._idealWidth) {
  995. renderHeight = (renderHeight * this._idealWidth) / renderWidth;
  996. renderWidth = this._idealWidth;
  997. }
  998. else if (this._idealHeight) {
  999. renderWidth = (renderWidth * this._idealHeight) / renderHeight;
  1000. renderHeight = this._idealHeight;
  1001. }
  1002. }
  1003. if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
  1004. this.scaleTo(renderWidth, renderHeight);
  1005. this.markAsDirty();
  1006. if (this._idealWidth || this._idealHeight) {
  1007. this._rootContainer._markAllAsDirty();
  1008. }
  1009. }
  1010. this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1);
  1011. };
  1012. /** @hidden */
  1013. AdvancedDynamicTexture.prototype._getGlobalViewport = function (scene) {
  1014. var engine = scene.getEngine();
  1015. return this._fullscreenViewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
  1016. };
  1017. /**
  1018. * Get screen coordinates for a vector3
  1019. * @param position defines the position to project
  1020. * @param worldMatrix defines the world matrix to use
  1021. * @returns the projected position
  1022. */
  1023. AdvancedDynamicTexture.prototype.getProjectedPosition = function (position, worldMatrix) {
  1024. var scene = this.getScene();
  1025. if (!scene) {
  1026. return babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector2"].Zero();
  1027. }
  1028. var globalViewport = this._getGlobalViewport(scene);
  1029. var projectedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
  1030. projectedPosition.scaleInPlace(this.renderScale);
  1031. return new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector2"](projectedPosition.x, projectedPosition.y);
  1032. };
  1033. AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
  1034. if (this._layerToDispose) {
  1035. if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {
  1036. return;
  1037. }
  1038. }
  1039. if (this._isFullscreen && this._linkedControls.length) {
  1040. var scene = this.getScene();
  1041. if (!scene) {
  1042. return;
  1043. }
  1044. var globalViewport = this._getGlobalViewport(scene);
  1045. for (var _i = 0, _a = this._linkedControls; _i < _a.length; _i++) {
  1046. var control = _a[_i];
  1047. if (!control.isVisible) {
  1048. continue;
  1049. }
  1050. var mesh = control._linkedMesh;
  1051. if (!mesh || mesh.isDisposed()) {
  1052. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  1053. control.linkWithMesh(null);
  1054. });
  1055. continue;
  1056. }
  1057. var position = mesh.getBoundingInfo ? mesh.getBoundingInfo().boundingSphere.center : babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].ZeroReadOnly;
  1058. var projectedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Project(position, mesh.getWorldMatrix(), scene.getTransformMatrix(), globalViewport);
  1059. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  1060. control.notRenderable = true;
  1061. continue;
  1062. }
  1063. control.notRenderable = false;
  1064. // Account for RenderScale.
  1065. projectedPosition.scaleInPlace(this.renderScale);
  1066. control._moveToProjectedPosition(projectedPosition);
  1067. }
  1068. }
  1069. if (!this._isDirty && !this._rootContainer.isDirty) {
  1070. return;
  1071. }
  1072. this._isDirty = false;
  1073. this._render();
  1074. this.update(true, this.premulAlpha);
  1075. };
  1076. AdvancedDynamicTexture.prototype._render = function () {
  1077. var textureSize = this.getSize();
  1078. var renderWidth = textureSize.width;
  1079. var renderHeight = textureSize.height;
  1080. var context = this.getContext();
  1081. context.font = "18px Arial";
  1082. context.strokeStyle = "white";
  1083. // Layout
  1084. this.onBeginLayoutObservable.notifyObservers(this);
  1085. var measure = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](0, 0, renderWidth, renderHeight);
  1086. this._numLayoutCalls = 0;
  1087. this._rootContainer._layout(measure, context);
  1088. this.onEndLayoutObservable.notifyObservers(this);
  1089. this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
  1090. // Clear
  1091. if (this._invalidatedRectangle) {
  1092. this._clearMeasure.copyFrom(this._invalidatedRectangle);
  1093. }
  1094. else {
  1095. this._clearMeasure.copyFromFloats(0, 0, renderWidth, renderHeight);
  1096. }
  1097. context.clearRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
  1098. if (this._background) {
  1099. context.save();
  1100. context.fillStyle = this._background;
  1101. context.fillRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
  1102. context.restore();
  1103. }
  1104. // Render
  1105. this.onBeginRenderObservable.notifyObservers(this);
  1106. this._numRenderCalls = 0;
  1107. this._rootContainer._render(context, this._invalidatedRectangle);
  1108. this.onEndRenderObservable.notifyObservers(this);
  1109. this._invalidatedRectangle = null;
  1110. };
  1111. /** @hidden */
  1112. AdvancedDynamicTexture.prototype._changeCursor = function (cursor) {
  1113. if (this._rootElement) {
  1114. this._rootElement.style.cursor = cursor;
  1115. this._cursorChanged = true;
  1116. }
  1117. };
  1118. /** @hidden */
  1119. AdvancedDynamicTexture.prototype._registerLastControlDown = function (control, pointerId) {
  1120. this._lastControlDown[pointerId] = control;
  1121. this.onControlPickedObservable.notifyObservers(control);
  1122. };
  1123. AdvancedDynamicTexture.prototype._doPicking = function (x, y, type, pointerId, buttonIndex) {
  1124. var scene = this.getScene();
  1125. if (!scene) {
  1126. return;
  1127. }
  1128. var engine = scene.getEngine();
  1129. var textureSize = this.getSize();
  1130. if (this._isFullscreen) {
  1131. var camera = scene.cameraToUseForPointers || scene.activeCamera;
  1132. var viewport = camera.viewport;
  1133. x = x * (textureSize.width / (engine.getRenderWidth() * viewport.width));
  1134. y = y * (textureSize.height / (engine.getRenderHeight() * viewport.height));
  1135. }
  1136. if (this._capturingControl[pointerId]) {
  1137. this._capturingControl[pointerId]._processObservables(type, x, y, pointerId, buttonIndex);
  1138. return;
  1139. }
  1140. this._cursorChanged = false;
  1141. if (!this._rootContainer._processPicking(x, y, type, pointerId, buttonIndex)) {
  1142. this._changeCursor("");
  1143. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE) {
  1144. if (this._lastControlOver[pointerId]) {
  1145. this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId]);
  1146. delete this._lastControlOver[pointerId];
  1147. }
  1148. }
  1149. }
  1150. if (!this._cursorChanged) {
  1151. this._changeCursor("");
  1152. }
  1153. this._manageFocus();
  1154. };
  1155. /** @hidden */
  1156. AdvancedDynamicTexture.prototype._cleanControlAfterRemovalFromList = function (list, control) {
  1157. for (var pointerId in list) {
  1158. if (!list.hasOwnProperty(pointerId)) {
  1159. continue;
  1160. }
  1161. var lastControlOver = list[pointerId];
  1162. if (lastControlOver === control) {
  1163. delete list[pointerId];
  1164. }
  1165. }
  1166. };
  1167. /** @hidden */
  1168. AdvancedDynamicTexture.prototype._cleanControlAfterRemoval = function (control) {
  1169. this._cleanControlAfterRemovalFromList(this._lastControlDown, control);
  1170. this._cleanControlAfterRemovalFromList(this._lastControlOver, control);
  1171. };
  1172. /** Attach to all scene events required to support pointer events */
  1173. AdvancedDynamicTexture.prototype.attach = function () {
  1174. var _this = this;
  1175. var scene = this.getScene();
  1176. if (!scene) {
  1177. return;
  1178. }
  1179. var tempViewport = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Viewport"](0, 0, 0, 0);
  1180. this._pointerMoveObserver = scene.onPrePointerObservable.add(function (pi, state) {
  1181. if (scene.isPointerCaptured((pi.event).pointerId)) {
  1182. return;
  1183. }
  1184. if (pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE
  1185. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERUP
  1186. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERDOWN) {
  1187. return;
  1188. }
  1189. if (!scene) {
  1190. return;
  1191. }
  1192. var camera = scene.cameraToUseForPointers || scene.activeCamera;
  1193. var engine = scene.getEngine();
  1194. if (!camera) {
  1195. tempViewport.x = 0;
  1196. tempViewport.y = 0;
  1197. tempViewport.width = engine.getRenderWidth();
  1198. tempViewport.height = engine.getRenderHeight();
  1199. }
  1200. else {
  1201. camera.viewport.toGlobalToRef(engine.getRenderWidth(), engine.getRenderHeight(), tempViewport);
  1202. }
  1203. var x = scene.pointerX / engine.getHardwareScalingLevel() - tempViewport.x;
  1204. var y = scene.pointerY / engine.getHardwareScalingLevel() - (engine.getRenderHeight() - tempViewport.y - tempViewport.height);
  1205. _this._shouldBlockPointer = false;
  1206. // Do picking modifies _shouldBlockPointer
  1207. _this._doPicking(x, y, pi.type, pi.event.pointerId || 0, pi.event.button);
  1208. // Avoid overwriting a true skipOnPointerObservable to false
  1209. if (_this._shouldBlockPointer) {
  1210. pi.skipOnPointerObservable = _this._shouldBlockPointer;
  1211. }
  1212. });
  1213. this._attachToOnPointerOut(scene);
  1214. };
  1215. /**
  1216. * Register the clipboard Events onto the canvas
  1217. */
  1218. AdvancedDynamicTexture.prototype.registerClipboardEvents = function () {
  1219. self.addEventListener("copy", this.onClipboardCopy, false);
  1220. self.addEventListener("cut", this.onClipboardCut, false);
  1221. self.addEventListener("paste", this.onClipboardPaste, false);
  1222. };
  1223. /**
  1224. * Unregister the clipboard Events from the canvas
  1225. */
  1226. AdvancedDynamicTexture.prototype.unRegisterClipboardEvents = function () {
  1227. self.removeEventListener("copy", this.onClipboardCopy);
  1228. self.removeEventListener("cut", this.onClipboardCut);
  1229. self.removeEventListener("paste", this.onClipboardPaste);
  1230. };
  1231. /**
  1232. * Connect the texture to a hosting mesh to enable interactions
  1233. * @param mesh defines the mesh to attach to
  1234. * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
  1235. */
  1236. AdvancedDynamicTexture.prototype.attachToMesh = function (mesh, supportPointerMove) {
  1237. var _this = this;
  1238. if (supportPointerMove === void 0) { supportPointerMove = true; }
  1239. var scene = this.getScene();
  1240. if (!scene) {
  1241. return;
  1242. }
  1243. this._pointerObserver = scene.onPointerObservable.add(function (pi, state) {
  1244. if (pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE
  1245. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERUP
  1246. && pi.type !== babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERDOWN) {
  1247. return;
  1248. }
  1249. var pointerId = pi.event.pointerId || 0;
  1250. if (pi.pickInfo && pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
  1251. var uv = pi.pickInfo.getTextureCoordinates();
  1252. if (uv) {
  1253. var size = _this.getSize();
  1254. _this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type, pointerId, pi.event.button);
  1255. }
  1256. }
  1257. else if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERUP) {
  1258. if (_this._lastControlDown[pointerId]) {
  1259. _this._lastControlDown[pointerId]._forcePointerUp(pointerId);
  1260. }
  1261. delete _this._lastControlDown[pointerId];
  1262. if (_this.focusedControl) {
  1263. var friendlyControls = _this.focusedControl.keepsFocusWith();
  1264. var canMoveFocus = true;
  1265. if (friendlyControls) {
  1266. for (var _i = 0, friendlyControls_1 = friendlyControls; _i < friendlyControls_1.length; _i++) {
  1267. var control = friendlyControls_1[_i];
  1268. // Same host, no need to keep the focus
  1269. if (_this === control._host) {
  1270. continue;
  1271. }
  1272. // Different hosts
  1273. var otherHost = control._host;
  1274. if (otherHost._lastControlOver[pointerId] && otherHost._lastControlOver[pointerId].isAscendant(control)) {
  1275. canMoveFocus = false;
  1276. break;
  1277. }
  1278. }
  1279. }
  1280. if (canMoveFocus) {
  1281. _this.focusedControl = null;
  1282. }
  1283. }
  1284. }
  1285. else if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERMOVE) {
  1286. if (_this._lastControlOver[pointerId]) {
  1287. _this._lastControlOver[pointerId]._onPointerOut(_this._lastControlOver[pointerId], true);
  1288. }
  1289. delete _this._lastControlOver[pointerId];
  1290. }
  1291. });
  1292. mesh.enablePointerMoveEvents = supportPointerMove;
  1293. this._attachToOnPointerOut(scene);
  1294. };
  1295. /**
  1296. * Move the focus to a specific control
  1297. * @param control defines the control which will receive the focus
  1298. */
  1299. AdvancedDynamicTexture.prototype.moveFocusToControl = function (control) {
  1300. this.focusedControl = control;
  1301. this._lastPickedControl = control;
  1302. this._blockNextFocusCheck = true;
  1303. };
  1304. AdvancedDynamicTexture.prototype._manageFocus = function () {
  1305. if (this._blockNextFocusCheck) {
  1306. this._blockNextFocusCheck = false;
  1307. this._lastPickedControl = this._focusedControl;
  1308. return;
  1309. }
  1310. // Focus management
  1311. if (this._focusedControl) {
  1312. if (this._focusedControl !== this._lastPickedControl) {
  1313. if (this._lastPickedControl.isFocusInvisible) {
  1314. return;
  1315. }
  1316. this.focusedControl = null;
  1317. }
  1318. }
  1319. };
  1320. AdvancedDynamicTexture.prototype._attachToOnPointerOut = function (scene) {
  1321. var _this = this;
  1322. this._canvasPointerOutObserver = scene.getEngine().onCanvasPointerOutObservable.add(function (pointerEvent) {
  1323. if (_this._lastControlOver[pointerEvent.pointerId]) {
  1324. _this._lastControlOver[pointerEvent.pointerId]._onPointerOut(_this._lastControlOver[pointerEvent.pointerId]);
  1325. }
  1326. delete _this._lastControlOver[pointerEvent.pointerId];
  1327. if (_this._lastControlDown[pointerEvent.pointerId] && _this._lastControlDown[pointerEvent.pointerId] !== _this._capturingControl[pointerEvent.pointerId]) {
  1328. _this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
  1329. delete _this._lastControlDown[pointerEvent.pointerId];
  1330. }
  1331. });
  1332. };
  1333. // Statics
  1334. /**
  1335. * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
  1336. * @param mesh defines the mesh which will receive the texture
  1337. * @param width defines the texture width (1024 by default)
  1338. * @param height defines the texture height (1024 by default)
  1339. * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
  1340. * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
  1341. * @returns a new AdvancedDynamicTexture
  1342. */
  1343. AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height, supportPointerMove, onlyAlphaTesting) {
  1344. if (width === void 0) { width = 1024; }
  1345. if (height === void 0) { height = 1024; }
  1346. if (supportPointerMove === void 0) { supportPointerMove = true; }
  1347. if (onlyAlphaTesting === void 0) { onlyAlphaTesting = false; }
  1348. var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].TRILINEAR_SAMPLINGMODE);
  1349. var material = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["StandardMaterial"]("AdvancedDynamicTextureMaterial", mesh.getScene());
  1350. material.backFaceCulling = false;
  1351. material.diffuseColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  1352. material.specularColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  1353. if (onlyAlphaTesting) {
  1354. material.diffuseTexture = result;
  1355. material.emissiveTexture = result;
  1356. result.hasAlpha = true;
  1357. }
  1358. else {
  1359. material.emissiveTexture = result;
  1360. material.opacityTexture = result;
  1361. }
  1362. mesh.material = material;
  1363. result.attachToMesh(mesh, supportPointerMove);
  1364. return result;
  1365. };
  1366. /**
  1367. * Creates a new AdvancedDynamicTexture in fullscreen mode.
  1368. * In this mode the texture will rely on a layer for its rendering.
  1369. * This allows it to be treated like any other layer.
  1370. * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
  1371. * LayerMask is set through advancedTexture.layer.layerMask
  1372. * @param name defines name for the texture
  1373. * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
  1374. * @param scene defines the hsoting scene
  1375. * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
  1376. * @returns a new AdvancedDynamicTexture
  1377. */
  1378. AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene, sampling) {
  1379. if (foreground === void 0) { foreground = true; }
  1380. if (scene === void 0) { scene = null; }
  1381. if (sampling === void 0) { sampling = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Texture"].BILINEAR_SAMPLINGMODE; }
  1382. var result = new AdvancedDynamicTexture(name, 0, 0, scene, false, sampling);
  1383. // Display
  1384. var layer = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Layer"](name + "_layer", null, scene, !foreground);
  1385. layer.texture = result;
  1386. result._layerToDispose = layer;
  1387. result._isFullscreen = true;
  1388. // Attach
  1389. result.attach();
  1390. return result;
  1391. };
  1392. return AdvancedDynamicTexture;
  1393. }(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DynamicTexture"]));
  1394. /***/ }),
  1395. /***/ "./2D/controls/button.ts":
  1396. /*!*******************************!*\
  1397. !*** ./2D/controls/button.ts ***!
  1398. \*******************************/
  1399. /*! exports provided: Button */
  1400. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1401. "use strict";
  1402. __webpack_require__.r(__webpack_exports__);
  1403. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return Button; });
  1404. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  1405. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  1406. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  1407. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  1408. /* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./image */ "./2D/controls/image.ts");
  1409. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  1410. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__);
  1411. /**
  1412. * Class used to create 2D buttons
  1413. */
  1414. var Button = /** @class */ (function (_super) {
  1415. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Button, _super);
  1416. /**
  1417. * Creates a new Button
  1418. * @param name defines the name of the button
  1419. */
  1420. function Button(name) {
  1421. var _this = _super.call(this, name) || this;
  1422. _this.name = name;
  1423. /**
  1424. * Gets or sets a boolean indicating that the button will let internal controls handle picking instead of doing it directly using its bounding info
  1425. */
  1426. _this.delegatePickingToChildren = false;
  1427. _this.thickness = 1;
  1428. _this.isPointerBlocker = true;
  1429. var alphaStore = null;
  1430. _this.pointerEnterAnimation = function () {
  1431. alphaStore = _this.alpha;
  1432. _this.alpha -= 0.1;
  1433. };
  1434. _this.pointerOutAnimation = function () {
  1435. if (alphaStore !== null) {
  1436. _this.alpha = alphaStore;
  1437. }
  1438. };
  1439. _this.pointerDownAnimation = function () {
  1440. _this.scaleX -= 0.05;
  1441. _this.scaleY -= 0.05;
  1442. };
  1443. _this.pointerUpAnimation = function () {
  1444. _this.scaleX += 0.05;
  1445. _this.scaleY += 0.05;
  1446. };
  1447. return _this;
  1448. }
  1449. Object.defineProperty(Button.prototype, "image", {
  1450. /**
  1451. * Returns the image part of the button (if any)
  1452. */
  1453. get: function () {
  1454. return this._image;
  1455. },
  1456. enumerable: true,
  1457. configurable: true
  1458. });
  1459. Object.defineProperty(Button.prototype, "textBlock", {
  1460. /**
  1461. * Returns the image part of the button (if any)
  1462. */
  1463. get: function () {
  1464. return this._textBlock;
  1465. },
  1466. enumerable: true,
  1467. configurable: true
  1468. });
  1469. Button.prototype._getTypeName = function () {
  1470. return "Button";
  1471. };
  1472. // While being a container, the button behaves like a control.
  1473. /** @hidden */
  1474. Button.prototype._processPicking = function (x, y, type, pointerId, buttonIndex) {
  1475. if (!this._isEnabled || !this.isHitTestVisible || !this.isVisible || this.notRenderable) {
  1476. return false;
  1477. }
  1478. if (!_super.prototype.contains.call(this, x, y)) {
  1479. return false;
  1480. }
  1481. if (this.delegatePickingToChildren) {
  1482. var contains = false;
  1483. for (var index = this._children.length - 1; index >= 0; index--) {
  1484. var child = this._children[index];
  1485. if (child.isEnabled && child.isHitTestVisible && child.isVisible && !child.notRenderable && child.contains(x, y)) {
  1486. contains = true;
  1487. break;
  1488. }
  1489. }
  1490. if (!contains) {
  1491. return false;
  1492. }
  1493. }
  1494. this._processObservables(type, x, y, pointerId, buttonIndex);
  1495. return true;
  1496. };
  1497. /** @hidden */
  1498. Button.prototype._onPointerEnter = function (target) {
  1499. if (!_super.prototype._onPointerEnter.call(this, target)) {
  1500. return false;
  1501. }
  1502. if (this.pointerEnterAnimation) {
  1503. this.pointerEnterAnimation();
  1504. }
  1505. return true;
  1506. };
  1507. /** @hidden */
  1508. Button.prototype._onPointerOut = function (target, force) {
  1509. if (force === void 0) { force = false; }
  1510. if (this.pointerOutAnimation) {
  1511. this.pointerOutAnimation();
  1512. }
  1513. _super.prototype._onPointerOut.call(this, target, force);
  1514. };
  1515. /** @hidden */
  1516. Button.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  1517. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {
  1518. return false;
  1519. }
  1520. if (this.pointerDownAnimation) {
  1521. this.pointerDownAnimation();
  1522. }
  1523. return true;
  1524. };
  1525. /** @hidden */
  1526. Button.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  1527. if (this.pointerUpAnimation) {
  1528. this.pointerUpAnimation();
  1529. }
  1530. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick);
  1531. };
  1532. // Statics
  1533. /**
  1534. * Creates a new button made with an image and a text
  1535. * @param name defines the name of the button
  1536. * @param text defines the text of the button
  1537. * @param imageUrl defines the url of the image
  1538. * @returns a new Button
  1539. */
  1540. Button.CreateImageButton = function (name, text, imageUrl) {
  1541. var result = new Button(name);
  1542. // Adding text
  1543. var textBlock = new _textBlock__WEBPACK_IMPORTED_MODULE_3__["TextBlock"](name + "_button", text);
  1544. textBlock.textWrapping = true;
  1545. textBlock.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  1546. textBlock.paddingLeft = "20%";
  1547. result.addControl(textBlock);
  1548. // Adding image
  1549. var iconImage = new _image__WEBPACK_IMPORTED_MODULE_4__["Image"](name + "_icon", imageUrl);
  1550. iconImage.width = "20%";
  1551. iconImage.stretch = _image__WEBPACK_IMPORTED_MODULE_4__["Image"].STRETCH_UNIFORM;
  1552. iconImage.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  1553. result.addControl(iconImage);
  1554. // Store
  1555. result._image = iconImage;
  1556. result._textBlock = textBlock;
  1557. return result;
  1558. };
  1559. /**
  1560. * Creates a new button made with an image
  1561. * @param name defines the name of the button
  1562. * @param imageUrl defines the url of the image
  1563. * @returns a new Button
  1564. */
  1565. Button.CreateImageOnlyButton = function (name, imageUrl) {
  1566. var result = new Button(name);
  1567. // Adding image
  1568. var iconImage = new _image__WEBPACK_IMPORTED_MODULE_4__["Image"](name + "_icon", imageUrl);
  1569. iconImage.stretch = _image__WEBPACK_IMPORTED_MODULE_4__["Image"].STRETCH_FILL;
  1570. iconImage.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  1571. result.addControl(iconImage);
  1572. // Store
  1573. result._image = iconImage;
  1574. return result;
  1575. };
  1576. /**
  1577. * Creates a new button made with a text
  1578. * @param name defines the name of the button
  1579. * @param text defines the text of the button
  1580. * @returns a new Button
  1581. */
  1582. Button.CreateSimpleButton = function (name, text) {
  1583. var result = new Button(name);
  1584. // Adding text
  1585. var textBlock = new _textBlock__WEBPACK_IMPORTED_MODULE_3__["TextBlock"](name + "_button", text);
  1586. textBlock.textWrapping = true;
  1587. textBlock.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  1588. result.addControl(textBlock);
  1589. // Store
  1590. result._textBlock = textBlock;
  1591. return result;
  1592. };
  1593. /**
  1594. * Creates a new button made with an image and a centered text
  1595. * @param name defines the name of the button
  1596. * @param text defines the text of the button
  1597. * @param imageUrl defines the url of the image
  1598. * @returns a new Button
  1599. */
  1600. Button.CreateImageWithCenterTextButton = function (name, text, imageUrl) {
  1601. var result = new Button(name);
  1602. // Adding image
  1603. var iconImage = new _image__WEBPACK_IMPORTED_MODULE_4__["Image"](name + "_icon", imageUrl);
  1604. iconImage.stretch = _image__WEBPACK_IMPORTED_MODULE_4__["Image"].STRETCH_FILL;
  1605. result.addControl(iconImage);
  1606. // Adding text
  1607. var textBlock = new _textBlock__WEBPACK_IMPORTED_MODULE_3__["TextBlock"](name + "_button", text);
  1608. textBlock.textWrapping = true;
  1609. textBlock.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  1610. result.addControl(textBlock);
  1611. // Store
  1612. result._image = iconImage;
  1613. result._textBlock = textBlock;
  1614. return result;
  1615. };
  1616. return Button;
  1617. }(_rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]));
  1618. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Button"] = Button;
  1619. /***/ }),
  1620. /***/ "./2D/controls/checkbox.ts":
  1621. /*!*********************************!*\
  1622. !*** ./2D/controls/checkbox.ts ***!
  1623. \*********************************/
  1624. /*! exports provided: Checkbox */
  1625. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1626. "use strict";
  1627. __webpack_require__.r(__webpack_exports__);
  1628. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return Checkbox; });
  1629. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  1630. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  1631. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  1632. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  1633. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  1634. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  1635. /**
  1636. * Class used to represent a 2D checkbox
  1637. */
  1638. var Checkbox = /** @class */ (function (_super) {
  1639. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Checkbox, _super);
  1640. /**
  1641. * Creates a new CheckBox
  1642. * @param name defines the control name
  1643. */
  1644. function Checkbox(name) {
  1645. var _this = _super.call(this, name) || this;
  1646. _this.name = name;
  1647. _this._isChecked = false;
  1648. _this._background = "black";
  1649. _this._checkSizeRatio = 0.8;
  1650. _this._thickness = 1;
  1651. /**
  1652. * Observable raised when isChecked property changes
  1653. */
  1654. _this.onIsCheckedChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  1655. _this.isPointerBlocker = true;
  1656. return _this;
  1657. }
  1658. Object.defineProperty(Checkbox.prototype, "thickness", {
  1659. /** Gets or sets border thickness */
  1660. get: function () {
  1661. return this._thickness;
  1662. },
  1663. set: function (value) {
  1664. if (this._thickness === value) {
  1665. return;
  1666. }
  1667. this._thickness = value;
  1668. this._markAsDirty();
  1669. },
  1670. enumerable: true,
  1671. configurable: true
  1672. });
  1673. Object.defineProperty(Checkbox.prototype, "checkSizeRatio", {
  1674. /** Gets or sets a value indicating the ratio between overall size and check size */
  1675. get: function () {
  1676. return this._checkSizeRatio;
  1677. },
  1678. set: function (value) {
  1679. value = Math.max(Math.min(1, value), 0);
  1680. if (this._checkSizeRatio === value) {
  1681. return;
  1682. }
  1683. this._checkSizeRatio = value;
  1684. this._markAsDirty();
  1685. },
  1686. enumerable: true,
  1687. configurable: true
  1688. });
  1689. Object.defineProperty(Checkbox.prototype, "background", {
  1690. /** Gets or sets background color */
  1691. get: function () {
  1692. return this._background;
  1693. },
  1694. set: function (value) {
  1695. if (this._background === value) {
  1696. return;
  1697. }
  1698. this._background = value;
  1699. this._markAsDirty();
  1700. },
  1701. enumerable: true,
  1702. configurable: true
  1703. });
  1704. Object.defineProperty(Checkbox.prototype, "isChecked", {
  1705. /** Gets or sets a boolean indicating if the checkbox is checked or not */
  1706. get: function () {
  1707. return this._isChecked;
  1708. },
  1709. set: function (value) {
  1710. if (this._isChecked === value) {
  1711. return;
  1712. }
  1713. this._isChecked = value;
  1714. this._markAsDirty();
  1715. this.onIsCheckedChangedObservable.notifyObservers(value);
  1716. },
  1717. enumerable: true,
  1718. configurable: true
  1719. });
  1720. Checkbox.prototype._getTypeName = function () {
  1721. return "Checkbox";
  1722. };
  1723. /** @hidden */
  1724. Checkbox.prototype._draw = function (context, invalidatedRectangle) {
  1725. context.save();
  1726. this._applyStates(context);
  1727. var actualWidth = this._currentMeasure.width - this._thickness;
  1728. var actualHeight = this._currentMeasure.height - this._thickness;
  1729. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  1730. context.shadowColor = this.shadowColor;
  1731. context.shadowBlur = this.shadowBlur;
  1732. context.shadowOffsetX = this.shadowOffsetX;
  1733. context.shadowOffsetY = this.shadowOffsetY;
  1734. }
  1735. context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
  1736. context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
  1737. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  1738. context.shadowBlur = 0;
  1739. context.shadowOffsetX = 0;
  1740. context.shadowOffsetY = 0;
  1741. }
  1742. if (this._isChecked) {
  1743. context.fillStyle = this._isEnabled ? this.color : this._disabledColor;
  1744. var offsetWidth = actualWidth * this._checkSizeRatio;
  1745. var offseHeight = actualHeight * this._checkSizeRatio;
  1746. context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);
  1747. }
  1748. context.strokeStyle = this.color;
  1749. context.lineWidth = this._thickness;
  1750. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
  1751. context.restore();
  1752. };
  1753. // Events
  1754. /** @hidden */
  1755. Checkbox.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  1756. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {
  1757. return false;
  1758. }
  1759. this.isChecked = !this.isChecked;
  1760. return true;
  1761. };
  1762. /**
  1763. * Utility function to easily create a checkbox with a header
  1764. * @param title defines the label to use for the header
  1765. * @param onValueChanged defines the callback to call when value changes
  1766. * @returns a StackPanel containing the checkbox and a textBlock
  1767. */
  1768. Checkbox.AddCheckBoxWithHeader = function (title, onValueChanged) {
  1769. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_3__["StackPanel"]();
  1770. panel.isVertical = false;
  1771. panel.height = "30px";
  1772. var checkbox = new Checkbox();
  1773. checkbox.width = "20px";
  1774. checkbox.height = "20px";
  1775. checkbox.isChecked = true;
  1776. checkbox.color = "green";
  1777. checkbox.onIsCheckedChangedObservable.add(onValueChanged);
  1778. panel.addControl(checkbox);
  1779. var header = new _textBlock__WEBPACK_IMPORTED_MODULE_4__["TextBlock"]();
  1780. header.text = title;
  1781. header.width = "180px";
  1782. header.paddingLeft = "5px";
  1783. header.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  1784. header.color = "white";
  1785. panel.addControl(header);
  1786. return panel;
  1787. };
  1788. return Checkbox;
  1789. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  1790. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Checkbox"] = Checkbox;
  1791. /***/ }),
  1792. /***/ "./2D/controls/colorpicker.ts":
  1793. /*!************************************!*\
  1794. !*** ./2D/controls/colorpicker.ts ***!
  1795. \************************************/
  1796. /*! exports provided: ColorPicker */
  1797. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1798. "use strict";
  1799. __webpack_require__.r(__webpack_exports__);
  1800. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return ColorPicker; });
  1801. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  1802. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  1803. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  1804. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  1805. /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
  1806. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  1807. /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
  1808. /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./grid */ "./2D/controls/grid.ts");
  1809. /* harmony import */ var _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../controls/textBlock */ "./2D/controls/textBlock.ts");
  1810. /** Class used to create color pickers */
  1811. var ColorPicker = /** @class */ (function (_super) {
  1812. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorPicker, _super);
  1813. /**
  1814. * Creates a new ColorPicker
  1815. * @param name defines the control name
  1816. */
  1817. function ColorPicker(name) {
  1818. var _this = _super.call(this, name) || this;
  1819. _this.name = name;
  1820. _this._value = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].Red();
  1821. _this._tmpColor = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"]();
  1822. _this._pointerStartedOnSquare = false;
  1823. _this._pointerStartedOnWheel = false;
  1824. _this._squareLeft = 0;
  1825. _this._squareTop = 0;
  1826. _this._squareSize = 0;
  1827. _this._h = 360;
  1828. _this._s = 1;
  1829. _this._v = 1;
  1830. _this._lastPointerDownID = -1;
  1831. /**
  1832. * Observable raised when the value changes
  1833. */
  1834. _this.onValueChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  1835. // Events
  1836. _this._pointerIsDown = false;
  1837. _this.value = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](.88, .1, .1);
  1838. _this.size = "200px";
  1839. _this.isPointerBlocker = true;
  1840. return _this;
  1841. }
  1842. Object.defineProperty(ColorPicker.prototype, "value", {
  1843. /** Gets or sets the color of the color picker */
  1844. get: function () {
  1845. return this._value;
  1846. },
  1847. set: function (value) {
  1848. if (this._value.equals(value)) {
  1849. return;
  1850. }
  1851. this._value.copyFrom(value);
  1852. this._value.toHSVToRef(this._tmpColor);
  1853. this._h = this._tmpColor.r;
  1854. this._s = Math.max(this._tmpColor.g, 0.00001);
  1855. this._v = Math.max(this._tmpColor.b, 0.00001);
  1856. this._markAsDirty();
  1857. if (this._value.r <= ColorPicker._Epsilon) {
  1858. this._value.r = 0;
  1859. }
  1860. if (this._value.g <= ColorPicker._Epsilon) {
  1861. this._value.g = 0;
  1862. }
  1863. if (this._value.b <= ColorPicker._Epsilon) {
  1864. this._value.b = 0;
  1865. }
  1866. if (this._value.r >= 1.0 - ColorPicker._Epsilon) {
  1867. this._value.r = 1.0;
  1868. }
  1869. if (this._value.g >= 1.0 - ColorPicker._Epsilon) {
  1870. this._value.g = 1.0;
  1871. }
  1872. if (this._value.b >= 1.0 - ColorPicker._Epsilon) {
  1873. this._value.b = 1.0;
  1874. }
  1875. this.onValueChangedObservable.notifyObservers(this._value);
  1876. },
  1877. enumerable: true,
  1878. configurable: true
  1879. });
  1880. Object.defineProperty(ColorPicker.prototype, "width", {
  1881. /**
  1882. * Gets or sets control width
  1883. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  1884. */
  1885. get: function () {
  1886. return this._width.toString(this._host);
  1887. },
  1888. set: function (value) {
  1889. if (this._width.toString(this._host) === value) {
  1890. return;
  1891. }
  1892. if (this._width.fromString(value)) {
  1893. this._height.fromString(value);
  1894. this._markAsDirty();
  1895. }
  1896. },
  1897. enumerable: true,
  1898. configurable: true
  1899. });
  1900. Object.defineProperty(ColorPicker.prototype, "height", {
  1901. /**
  1902. * Gets or sets control height
  1903. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  1904. */
  1905. get: function () {
  1906. return this._height.toString(this._host);
  1907. },
  1908. /** Gets or sets control height */
  1909. set: function (value) {
  1910. if (this._height.toString(this._host) === value) {
  1911. return;
  1912. }
  1913. if (this._height.fromString(value)) {
  1914. this._width.fromString(value);
  1915. this._markAsDirty();
  1916. }
  1917. },
  1918. enumerable: true,
  1919. configurable: true
  1920. });
  1921. Object.defineProperty(ColorPicker.prototype, "size", {
  1922. /** Gets or sets control size */
  1923. get: function () {
  1924. return this.width;
  1925. },
  1926. set: function (value) {
  1927. this.width = value;
  1928. },
  1929. enumerable: true,
  1930. configurable: true
  1931. });
  1932. ColorPicker.prototype._getTypeName = function () {
  1933. return "ColorPicker";
  1934. };
  1935. /** @hidden */
  1936. ColorPicker.prototype._preMeasure = function (parentMeasure, context) {
  1937. if (parentMeasure.width < parentMeasure.height) {
  1938. this._currentMeasure.height = parentMeasure.width;
  1939. }
  1940. else {
  1941. this._currentMeasure.width = parentMeasure.height;
  1942. }
  1943. };
  1944. ColorPicker.prototype._updateSquareProps = function () {
  1945. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  1946. var wheelThickness = radius * .2;
  1947. var innerDiameter = (radius - wheelThickness) * 2;
  1948. var squareSize = innerDiameter / (Math.sqrt(2));
  1949. var offset = radius - squareSize * .5;
  1950. this._squareLeft = this._currentMeasure.left + offset;
  1951. this._squareTop = this._currentMeasure.top + offset;
  1952. this._squareSize = squareSize;
  1953. };
  1954. ColorPicker.prototype._drawGradientSquare = function (hueValue, left, top, width, height, context) {
  1955. var lgh = context.createLinearGradient(left, top, width + left, top);
  1956. lgh.addColorStop(0, '#fff');
  1957. lgh.addColorStop(1, 'hsl(' + hueValue + ', 100%, 50%)');
  1958. context.fillStyle = lgh;
  1959. context.fillRect(left, top, width, height);
  1960. var lgv = context.createLinearGradient(left, top, left, height + top);
  1961. lgv.addColorStop(0, 'rgba(0,0,0,0)');
  1962. lgv.addColorStop(1, '#000');
  1963. context.fillStyle = lgv;
  1964. context.fillRect(left, top, width, height);
  1965. };
  1966. ColorPicker.prototype._drawCircle = function (centerX, centerY, radius, context) {
  1967. context.beginPath();
  1968. context.arc(centerX, centerY, radius + 1, 0, 2 * Math.PI, false);
  1969. context.lineWidth = 3;
  1970. context.strokeStyle = '#333333';
  1971. context.stroke();
  1972. context.beginPath();
  1973. context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  1974. context.lineWidth = 3;
  1975. context.strokeStyle = '#ffffff';
  1976. context.stroke();
  1977. };
  1978. ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
  1979. var canvas = document.createElement("canvas");
  1980. canvas.width = radius * 2;
  1981. canvas.height = radius * 2;
  1982. var context = canvas.getContext("2d");
  1983. var image = context.getImageData(0, 0, radius * 2, radius * 2);
  1984. var data = image.data;
  1985. var color = this._tmpColor;
  1986. var maxDistSq = radius * radius;
  1987. var innerRadius = radius - thickness;
  1988. var minDistSq = innerRadius * innerRadius;
  1989. for (var x = -radius; x < radius; x++) {
  1990. for (var y = -radius; y < radius; y++) {
  1991. var distSq = x * x + y * y;
  1992. if (distSq > maxDistSq || distSq < minDistSq) {
  1993. continue;
  1994. }
  1995. var dist = Math.sqrt(distSq);
  1996. var ang = Math.atan2(y, x);
  1997. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].HSVtoRGBToRef(ang * 180 / Math.PI + 180, dist / radius, 1, color);
  1998. var index = ((x + radius) + ((y + radius) * 2 * radius)) * 4;
  1999. data[index] = color.r * 255;
  2000. data[index + 1] = color.g * 255;
  2001. data[index + 2] = color.b * 255;
  2002. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  2003. //apply less alpha to bigger color pickers
  2004. var alphaAmount = .2;
  2005. var maxAlpha = .2;
  2006. var minAlpha = .04;
  2007. var lowerRadius = 50;
  2008. var upperRadius = 150;
  2009. if (radius < lowerRadius) {
  2010. alphaAmount = maxAlpha;
  2011. }
  2012. else if (radius > upperRadius) {
  2013. alphaAmount = minAlpha;
  2014. }
  2015. else {
  2016. alphaAmount = (minAlpha - maxAlpha) * (radius - lowerRadius) / (upperRadius - lowerRadius) + maxAlpha;
  2017. }
  2018. var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
  2019. if (alphaRatio < alphaAmount) {
  2020. data[index + 3] = 255 * (alphaRatio / alphaAmount);
  2021. }
  2022. else if (alphaRatio > 1 - alphaAmount) {
  2023. data[index + 3] = 255 * (1.0 - ((alphaRatio - (1 - alphaAmount)) / alphaAmount));
  2024. }
  2025. else {
  2026. data[index + 3] = 255;
  2027. }
  2028. }
  2029. }
  2030. context.putImageData(image, 0, 0);
  2031. return canvas;
  2032. };
  2033. /** @hidden */
  2034. ColorPicker.prototype._draw = function (context) {
  2035. context.save();
  2036. this._applyStates(context);
  2037. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  2038. var wheelThickness = radius * .2;
  2039. var left = this._currentMeasure.left;
  2040. var top = this._currentMeasure.top;
  2041. if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
  2042. this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
  2043. }
  2044. this._updateSquareProps();
  2045. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  2046. context.shadowColor = this.shadowColor;
  2047. context.shadowBlur = this.shadowBlur;
  2048. context.shadowOffsetX = this.shadowOffsetX;
  2049. context.shadowOffsetY = this.shadowOffsetY;
  2050. context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
  2051. }
  2052. context.drawImage(this._colorWheelCanvas, left, top);
  2053. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  2054. context.shadowBlur = 0;
  2055. context.shadowOffsetX = 0;
  2056. context.shadowOffsetY = 0;
  2057. }
  2058. this._drawGradientSquare(this._h, this._squareLeft, this._squareTop, this._squareSize, this._squareSize, context);
  2059. var cx = this._squareLeft + this._squareSize * this._s;
  2060. var cy = this._squareTop + this._squareSize * (1 - this._v);
  2061. this._drawCircle(cx, cy, radius * .04, context);
  2062. var dist = radius - wheelThickness * .5;
  2063. cx = left + radius + Math.cos((this._h - 180) * Math.PI / 180) * dist;
  2064. cy = top + radius + Math.sin((this._h - 180) * Math.PI / 180) * dist;
  2065. this._drawCircle(cx, cy, wheelThickness * .35, context);
  2066. context.restore();
  2067. };
  2068. ColorPicker.prototype._updateValueFromPointer = function (x, y) {
  2069. if (this._pointerStartedOnWheel) {
  2070. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  2071. var centerX = radius + this._currentMeasure.left;
  2072. var centerY = radius + this._currentMeasure.top;
  2073. this._h = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI + 180;
  2074. }
  2075. else if (this._pointerStartedOnSquare) {
  2076. this._updateSquareProps();
  2077. this._s = (x - this._squareLeft) / this._squareSize;
  2078. this._v = 1 - (y - this._squareTop) / this._squareSize;
  2079. this._s = Math.min(this._s, 1);
  2080. this._s = Math.max(this._s, ColorPicker._Epsilon);
  2081. this._v = Math.min(this._v, 1);
  2082. this._v = Math.max(this._v, ColorPicker._Epsilon);
  2083. }
  2084. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].HSVtoRGBToRef(this._h, this._s, this._v, this._tmpColor);
  2085. this.value = this._tmpColor;
  2086. };
  2087. ColorPicker.prototype._isPointOnSquare = function (x, y) {
  2088. this._updateSquareProps();
  2089. var left = this._squareLeft;
  2090. var top = this._squareTop;
  2091. var size = this._squareSize;
  2092. if (x >= left && x <= left + size &&
  2093. y >= top && y <= top + size) {
  2094. return true;
  2095. }
  2096. return false;
  2097. };
  2098. ColorPicker.prototype._isPointOnWheel = function (x, y) {
  2099. var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
  2100. var centerX = radius + this._currentMeasure.left;
  2101. var centerY = radius + this._currentMeasure.top;
  2102. var wheelThickness = radius * .2;
  2103. var innerRadius = radius - wheelThickness;
  2104. var radiusSq = radius * radius;
  2105. var innerRadiusSq = innerRadius * innerRadius;
  2106. var dx = x - centerX;
  2107. var dy = y - centerY;
  2108. var distSq = dx * dx + dy * dy;
  2109. if (distSq <= radiusSq && distSq >= innerRadiusSq) {
  2110. return true;
  2111. }
  2112. return false;
  2113. };
  2114. ColorPicker.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  2115. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {
  2116. return false;
  2117. }
  2118. this._pointerIsDown = true;
  2119. this._pointerStartedOnSquare = false;
  2120. this._pointerStartedOnWheel = false;
  2121. // Invert transform
  2122. this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
  2123. var x = this._transformedPosition.x;
  2124. var y = this._transformedPosition.y;
  2125. if (this._isPointOnSquare(x, y)) {
  2126. this._pointerStartedOnSquare = true;
  2127. }
  2128. else if (this._isPointOnWheel(x, y)) {
  2129. this._pointerStartedOnWheel = true;
  2130. }
  2131. this._updateValueFromPointer(x, y);
  2132. this._host._capturingControl[pointerId] = this;
  2133. this._lastPointerDownID = pointerId;
  2134. return true;
  2135. };
  2136. ColorPicker.prototype._onPointerMove = function (target, coordinates, pointerId) {
  2137. // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
  2138. if (pointerId != this._lastPointerDownID) {
  2139. return;
  2140. }
  2141. // Invert transform
  2142. this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
  2143. var x = this._transformedPosition.x;
  2144. var y = this._transformedPosition.y;
  2145. if (this._pointerIsDown) {
  2146. this._updateValueFromPointer(x, y);
  2147. }
  2148. _super.prototype._onPointerMove.call(this, target, coordinates, pointerId);
  2149. };
  2150. ColorPicker.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  2151. this._pointerIsDown = false;
  2152. delete this._host._capturingControl[pointerId];
  2153. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick);
  2154. };
  2155. /**
  2156. * This function expands the color picker by creating a color picker dialog with manual
  2157. * color value input and the ability to save colors into an array to be used later in
  2158. * subsequent launches of the dialogue.
  2159. * @param advancedTexture defines the AdvancedDynamicTexture the dialog is assigned to
  2160. * @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.
  2161. * @returns picked color as a hex string and the saved colors array as hex strings.
  2162. */
  2163. ColorPicker.ShowPickerDialogAsync = function (advancedTexture, options) {
  2164. return new Promise(function (resolve, reject) {
  2165. // Default options
  2166. options.pickerWidth = options.pickerWidth || "640px";
  2167. options.pickerHeight = options.pickerHeight || "400px";
  2168. options.headerHeight = options.headerHeight || "35px";
  2169. options.lastColor = options.lastColor || "#000000";
  2170. options.swatchLimit = options.swatchLimit || 20;
  2171. options.numSwatchesPerLine = options.numSwatchesPerLine || 10;
  2172. // Window size settings
  2173. var drawerMaxRows = options.swatchLimit / options.numSwatchesPerLine;
  2174. var rawSwatchSize = parseFloat(options.pickerWidth) / options.numSwatchesPerLine;
  2175. var gutterSize = Math.floor(rawSwatchSize * 0.25);
  2176. var colGutters = gutterSize * (options.numSwatchesPerLine + 1);
  2177. var swatchSize = Math.floor((parseFloat(options.pickerWidth) - colGutters) / options.numSwatchesPerLine);
  2178. var drawerMaxSize = (swatchSize * drawerMaxRows) + (gutterSize * (drawerMaxRows + 1));
  2179. var containerSize = (parseInt(options.pickerHeight) + drawerMaxSize + Math.floor(swatchSize * 0.25)).toString() + "px";
  2180. // Button Colors
  2181. var buttonColor = "#c0c0c0";
  2182. var buttonBackgroundColor = "#535353";
  2183. var buttonBackgroundHoverColor = "#414141";
  2184. var buttonBackgroundClickColor = "515151";
  2185. var buttonDisabledColor = "#555555";
  2186. var buttonDisabledBackgroundColor = "#454545";
  2187. var currentSwatchesOutlineColor = "#404040";
  2188. var luminanceLimitColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString("#dddddd");
  2189. var luminanceLimit = luminanceLimitColor.r + luminanceLimitColor.g + luminanceLimitColor.b;
  2190. var iconColorDark = "#aaaaaa";
  2191. var iconColorLight = "#ffffff";
  2192. var closeIconColor;
  2193. // Button settings
  2194. var buttonFontSize;
  2195. var butEdit;
  2196. var buttonWidth;
  2197. var buttonHeight;
  2198. // Input Text Colors
  2199. var inputFieldLabels = ["R", "G", "B"];
  2200. var inputTextBackgroundColor = "#454545";
  2201. var inputTextColor = "#f0f0f0";
  2202. // This is the current color as set by either the picker or by entering a value
  2203. var currentColor;
  2204. // This int is used for naming swatches and serves as the index for calling them from the list
  2205. var swatchNumber;
  2206. // Menu Panel options. We need to know if the swatchDrawer exists so we can create it if needed.
  2207. var swatchDrawer;
  2208. var editSwatchMode = false;
  2209. // Color InputText fields that will be updated upon value change
  2210. var picker;
  2211. var rValInt;
  2212. var gValInt;
  2213. var bValInt;
  2214. var rValDec;
  2215. var gValDec;
  2216. var bValDec;
  2217. var hexVal;
  2218. var newSwatch;
  2219. var lastVal;
  2220. var activeField;
  2221. /**
  2222. * Will update all values for InputText and ColorPicker controls based on the BABYLON.Color3 passed to this function.
  2223. * Each InputText control and the ColorPicker control will be tested to see if they are the activeField and if they
  2224. * are will receive no update. This is to prevent the input from the user being overwritten.
  2225. */
  2226. function updateValues(value, inputField) {
  2227. activeField = inputField;
  2228. var pickedColor = value.toHexString();
  2229. newSwatch.background = pickedColor;
  2230. if (rValInt.name != activeField) {
  2231. rValInt.text = Math.floor(value.r * 255).toString();
  2232. }
  2233. if (gValInt.name != activeField) {
  2234. gValInt.text = Math.floor(value.g * 255).toString();
  2235. }
  2236. if (bValInt.name != activeField) {
  2237. bValInt.text = Math.floor(value.b * 255).toString();
  2238. }
  2239. if (rValDec.name != activeField) {
  2240. rValDec.text = value.r.toString();
  2241. }
  2242. if (gValDec.name != activeField) {
  2243. gValDec.text = value.g.toString();
  2244. }
  2245. if (bValDec.name != activeField) {
  2246. bValDec.text = value.b.toString();
  2247. }
  2248. if (hexVal.name != activeField) {
  2249. var minusPound = pickedColor.split("#");
  2250. hexVal.text = minusPound[1];
  2251. }
  2252. if (picker.name != activeField) {
  2253. picker.value = value;
  2254. }
  2255. }
  2256. // 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.
  2257. function updateInt(field, channel) {
  2258. var newValue = field.text;
  2259. var checkVal = /[^0-9]/g.test(newValue);
  2260. if (checkVal) {
  2261. field.text = lastVal;
  2262. return;
  2263. }
  2264. else {
  2265. if (newValue != "") {
  2266. if (Math.floor(parseInt(newValue)) < 0) {
  2267. newValue = "0";
  2268. }
  2269. else if (Math.floor(parseInt(newValue)) > 255) {
  2270. newValue = "255";
  2271. }
  2272. else if (isNaN(parseInt(newValue))) {
  2273. newValue = "0";
  2274. }
  2275. }
  2276. if (activeField == field.name) {
  2277. lastVal = newValue;
  2278. }
  2279. }
  2280. if (newValue != "") {
  2281. newValue = parseInt(newValue).toString();
  2282. field.text = newValue;
  2283. var newSwatchRGB = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(newSwatch.background);
  2284. if (activeField == field.name) {
  2285. if (channel == "r") {
  2286. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"]((parseInt(newValue)) / 255, newSwatchRGB.g, newSwatchRGB.b), field.name);
  2287. }
  2288. else if (channel == "g") {
  2289. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, (parseInt(newValue)) / 255, newSwatchRGB.b), field.name);
  2290. }
  2291. else {
  2292. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, newSwatchRGB.g, (parseInt(newValue)) / 255), field.name);
  2293. }
  2294. }
  2295. }
  2296. }
  2297. // 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.
  2298. function updateFloat(field, channel) {
  2299. var newValue = field.text;
  2300. var checkVal = /[^0-9\.]/g.test(newValue);
  2301. if (checkVal) {
  2302. field.text = lastVal;
  2303. return;
  2304. }
  2305. else {
  2306. if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
  2307. if (parseFloat(newValue) < 0.0) {
  2308. newValue = "0.0";
  2309. }
  2310. else if (parseFloat(newValue) > 1.0) {
  2311. newValue = "1.0";
  2312. }
  2313. else if (isNaN(parseFloat(newValue))) {
  2314. newValue = "0.0";
  2315. }
  2316. }
  2317. if (activeField == field.name) {
  2318. lastVal = newValue;
  2319. }
  2320. }
  2321. if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
  2322. newValue = parseFloat(newValue).toString();
  2323. field.text = newValue;
  2324. }
  2325. else {
  2326. newValue = "0.0";
  2327. }
  2328. var newSwatchRGB = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(newSwatch.background);
  2329. if (activeField == field.name) {
  2330. if (channel == "r") {
  2331. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](parseFloat(newValue), newSwatchRGB.g, newSwatchRGB.b), field.name);
  2332. }
  2333. else if (channel == "g") {
  2334. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, parseFloat(newValue), newSwatchRGB.b), field.name);
  2335. }
  2336. else {
  2337. updateValues(new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](newSwatchRGB.r, newSwatchRGB.g, parseFloat(newValue)), field.name);
  2338. }
  2339. }
  2340. }
  2341. // Removes the current index from the savedColors array. Drawer can then be regenerated.
  2342. function deleteSwatch(index) {
  2343. if (options.savedColors) {
  2344. options.savedColors.splice(index, 1);
  2345. }
  2346. if (options.savedColors && options.savedColors.length == 0) {
  2347. setEditButtonVisibility(false);
  2348. editSwatchMode = false;
  2349. }
  2350. }
  2351. // Creates and styles an individual swatch when updateSwatches is called.
  2352. function createSwatch() {
  2353. if (options.savedColors && options.savedColors[swatchNumber]) {
  2354. if (editSwatchMode) {
  2355. var icon = "b";
  2356. }
  2357. else {
  2358. var icon = "";
  2359. }
  2360. var swatch = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("Swatch_" + swatchNumber, icon);
  2361. swatch.fontFamily = "BabylonJSglyphs";
  2362. var swatchColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.savedColors[swatchNumber]);
  2363. var swatchLuminence = swatchColor.r + swatchColor.g + swatchColor.b;
  2364. // Set color of outline and textBlock based on luminance of the color swatch so feedback always visible
  2365. if (swatchLuminence > luminanceLimit) {
  2366. swatch.color = iconColorDark;
  2367. }
  2368. else {
  2369. swatch.color = iconColorLight;
  2370. }
  2371. swatch.fontSize = Math.floor(swatchSize * 0.7);
  2372. swatch.textBlock.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2373. swatch.height = swatch.width = (swatchSize).toString() + "px";
  2374. swatch.background = options.savedColors[swatchNumber];
  2375. swatch.thickness = 2;
  2376. var metadata_1 = swatchNumber;
  2377. swatch.pointerDownAnimation = function () {
  2378. swatch.thickness = 4;
  2379. };
  2380. swatch.pointerUpAnimation = function () {
  2381. swatch.thickness = 3;
  2382. };
  2383. swatch.pointerEnterAnimation = function () {
  2384. swatch.thickness = 3;
  2385. };
  2386. swatch.pointerOutAnimation = function () {
  2387. swatch.thickness = 2;
  2388. };
  2389. swatch.onPointerClickObservable.add(function () {
  2390. if (!editSwatchMode) {
  2391. if (options.savedColors) {
  2392. updateValues(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.savedColors[metadata_1]), swatch.name);
  2393. }
  2394. }
  2395. else {
  2396. deleteSwatch(metadata_1);
  2397. updateSwatches("", butSave);
  2398. }
  2399. });
  2400. return swatch;
  2401. }
  2402. else {
  2403. return null;
  2404. }
  2405. }
  2406. // Mode switch to render button text and close symbols on swatch controls
  2407. function editSwatches(mode) {
  2408. if (mode !== undefined) {
  2409. editSwatchMode = mode;
  2410. }
  2411. if (editSwatchMode) {
  2412. for (var i = 0; i < swatchDrawer.children.length; i++) {
  2413. var thisButton = swatchDrawer.children[i];
  2414. thisButton.textBlock.text = "b";
  2415. }
  2416. if (butEdit !== undefined) {
  2417. butEdit.textBlock.text = "Done";
  2418. }
  2419. }
  2420. else {
  2421. for (var i = 0; i < swatchDrawer.children.length; i++) {
  2422. var thisButton = swatchDrawer.children[i];
  2423. thisButton.textBlock.text = "";
  2424. }
  2425. if (butEdit !== undefined) {
  2426. butEdit.textBlock.text = "Edit";
  2427. }
  2428. }
  2429. }
  2430. /**
  2431. * When Save Color button is pressed this function will first create a swatch drawer if one is not already
  2432. * made. Then all controls are removed from the drawer and we step through the savedColors array and
  2433. * creates one swatch per color. It will also set the height of the drawer control based on how many
  2434. * saved colors there are and how many can be stored per row.
  2435. */
  2436. function updateSwatches(color, button) {
  2437. if (options.savedColors) {
  2438. if (color != "") {
  2439. options.savedColors.push(color);
  2440. }
  2441. swatchNumber = 0;
  2442. swatchDrawer.clearControls();
  2443. var rowCount = Math.ceil(options.savedColors.length / options.numSwatchesPerLine);
  2444. if (rowCount == 0) {
  2445. var gutterCount = 0;
  2446. }
  2447. else {
  2448. var gutterCount = rowCount + 1;
  2449. }
  2450. if (swatchDrawer.rowCount != rowCount + gutterCount) {
  2451. var currentRows = swatchDrawer.rowCount;
  2452. for (var i = 0; i < currentRows; i++) {
  2453. swatchDrawer.removeRowDefinition(0);
  2454. }
  2455. for (var i = 0; i < rowCount + gutterCount; i++) {
  2456. if (i % 2) {
  2457. swatchDrawer.addRowDefinition(swatchSize, true);
  2458. }
  2459. else {
  2460. swatchDrawer.addRowDefinition(gutterSize, true);
  2461. }
  2462. }
  2463. }
  2464. swatchDrawer.height = ((swatchSize * rowCount) + (gutterCount * gutterSize)).toString() + "px";
  2465. for (var y = 1, thisRow = 1; y < rowCount + gutterCount; y += 2, thisRow++) {
  2466. // Determine number of buttons to create per row based on the button limit per row and number of saved colors
  2467. if (options.savedColors.length > thisRow * options.numSwatchesPerLine) {
  2468. var totalButtonsThisRow = options.numSwatchesPerLine;
  2469. }
  2470. else {
  2471. var totalButtonsThisRow = options.savedColors.length - ((thisRow - 1) * options.numSwatchesPerLine);
  2472. }
  2473. var buttonIterations = (Math.min(Math.max(totalButtonsThisRow, 0), options.numSwatchesPerLine));
  2474. for (var x = 0, w = 1; x < buttonIterations; x++) {
  2475. if (x > options.numSwatchesPerLine) {
  2476. continue;
  2477. }
  2478. var swatch = createSwatch();
  2479. if (swatch != null) {
  2480. swatchDrawer.addControl(swatch, y, w);
  2481. w += 2;
  2482. swatchNumber++;
  2483. }
  2484. else {
  2485. continue;
  2486. }
  2487. }
  2488. }
  2489. if (options.savedColors.length >= options.swatchLimit) {
  2490. disableButton(button, true);
  2491. }
  2492. else {
  2493. disableButton(button, false);
  2494. }
  2495. }
  2496. }
  2497. // Shows or hides edit swatches button depending on if there are saved swatches
  2498. function setEditButtonVisibility(enableButton) {
  2499. if (enableButton) {
  2500. butEdit = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butEdit", "Edit");
  2501. butEdit.width = buttonWidth;
  2502. butEdit.height = buttonHeight;
  2503. butEdit.left = (Math.floor(parseInt(buttonWidth) * 0.1)).toString() + "px";
  2504. butEdit.top = (parseFloat(butEdit.left) * -1).toString() + "px";
  2505. butEdit.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_BOTTOM;
  2506. butEdit.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  2507. butEdit.thickness = 2;
  2508. butEdit.color = buttonColor;
  2509. butEdit.fontSize = buttonFontSize;
  2510. butEdit.background = buttonBackgroundColor;
  2511. butEdit.onPointerEnterObservable.add(function () {
  2512. butEdit.background = buttonBackgroundHoverColor;
  2513. });
  2514. butEdit.onPointerOutObservable.add(function () {
  2515. butEdit.background = buttonBackgroundColor;
  2516. });
  2517. butEdit.pointerDownAnimation = function () {
  2518. butEdit.background = buttonBackgroundClickColor;
  2519. };
  2520. butEdit.pointerUpAnimation = function () {
  2521. butEdit.background = buttonBackgroundHoverColor;
  2522. };
  2523. butEdit.onPointerClickObservable.add(function () {
  2524. if (editSwatchMode) {
  2525. editSwatchMode = false;
  2526. }
  2527. else {
  2528. editSwatchMode = true;
  2529. }
  2530. editSwatches();
  2531. });
  2532. pickerGrid.addControl(butEdit, 1, 0);
  2533. }
  2534. else {
  2535. pickerGrid.removeControl(butEdit);
  2536. }
  2537. }
  2538. // Called when the user hits the limit of saved colors in the drawer.
  2539. function disableButton(button, disabled) {
  2540. if (disabled) {
  2541. button.color = buttonDisabledColor;
  2542. button.background = buttonDisabledBackgroundColor;
  2543. }
  2544. else {
  2545. button.color = buttonColor;
  2546. button.background = buttonBackgroundColor;
  2547. }
  2548. }
  2549. // Passes last chosen color back to scene and kills dialog by removing from AdvancedDynamicTexture
  2550. function closePicker(color) {
  2551. if (options.savedColors && options.savedColors.length > 0) {
  2552. resolve({
  2553. savedColors: options.savedColors,
  2554. pickedColor: color
  2555. });
  2556. }
  2557. else {
  2558. resolve({
  2559. pickedColor: color
  2560. });
  2561. }
  2562. advancedTexture.removeControl(dialogContainer);
  2563. }
  2564. // Dialogue menu container which will contain both the main dialogue window and the swatch drawer which opens once a color is saved.
  2565. var dialogContainer = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2566. dialogContainer.name = "Dialog Container";
  2567. dialogContainer.width = options.pickerWidth;
  2568. if (options.savedColors) {
  2569. dialogContainer.height = containerSize;
  2570. var topRow = parseInt(options.pickerHeight) / parseInt(containerSize);
  2571. dialogContainer.addRowDefinition(topRow, false);
  2572. dialogContainer.addRowDefinition(1.0 - topRow, false);
  2573. }
  2574. else {
  2575. dialogContainer.height = options.pickerHeight;
  2576. dialogContainer.addRowDefinition(1.0, false);
  2577. }
  2578. advancedTexture.addControl(dialogContainer);
  2579. // Swatch drawer which contains all saved color buttons
  2580. if (options.savedColors) {
  2581. swatchDrawer = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2582. swatchDrawer.name = "Swatch Drawer";
  2583. swatchDrawer.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_TOP;
  2584. swatchDrawer.background = buttonBackgroundColor;
  2585. swatchDrawer.width = options.pickerWidth;
  2586. var initialRows = options.savedColors.length / options.numSwatchesPerLine;
  2587. if (initialRows == 0) {
  2588. var gutterCount = 0;
  2589. }
  2590. else {
  2591. var gutterCount = initialRows + 1;
  2592. }
  2593. swatchDrawer.height = ((swatchSize * initialRows) + (gutterCount * gutterSize)).toString() + "px";
  2594. swatchDrawer.top = Math.floor(swatchSize * 0.25).toString() + "px";
  2595. for (var i = 0; i < (Math.ceil(options.savedColors.length / options.numSwatchesPerLine) * 2) + 1; i++) {
  2596. if (i % 2 != 0) {
  2597. swatchDrawer.addRowDefinition(swatchSize, true);
  2598. }
  2599. else {
  2600. swatchDrawer.addRowDefinition(gutterSize, true);
  2601. }
  2602. }
  2603. for (var i = 0; i < options.numSwatchesPerLine * 2 + 1; i++) {
  2604. if (i % 2 != 0) {
  2605. swatchDrawer.addColumnDefinition(swatchSize, true);
  2606. }
  2607. else {
  2608. swatchDrawer.addColumnDefinition(gutterSize, true);
  2609. }
  2610. }
  2611. dialogContainer.addControl(swatchDrawer, 1, 0);
  2612. }
  2613. // Picker container
  2614. var pickerPanel = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2615. pickerPanel.name = "Picker Panel";
  2616. pickerPanel.height = options.pickerHeight;
  2617. var panelHead = parseInt(options.headerHeight) / parseInt(options.pickerHeight);
  2618. var pickerPanelRows = [panelHead, 1.0 - panelHead];
  2619. pickerPanel.addRowDefinition(pickerPanelRows[0], false);
  2620. pickerPanel.addRowDefinition(pickerPanelRows[1], false);
  2621. dialogContainer.addControl(pickerPanel, 0, 0);
  2622. // Picker container header
  2623. var header = new _rectangle__WEBPACK_IMPORTED_MODULE_4__["Rectangle"]();
  2624. header.name = "Dialogue Header Bar";
  2625. header.background = "#cccccc";
  2626. header.thickness = 0;
  2627. pickerPanel.addControl(header, 0, 0);
  2628. // Header close button
  2629. var closeButton = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("closeButton", "a");
  2630. closeButton.fontFamily = "BabylonJSglyphs";
  2631. var headerColor3 = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(header.background);
  2632. closeIconColor = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](1.0 - headerColor3.r, 1.0 - headerColor3.g, 1.0 - headerColor3.b);
  2633. closeButton.color = closeIconColor.toHexString();
  2634. closeButton.fontSize = Math.floor(parseInt(options.headerHeight) * 0.6);
  2635. closeButton.textBlock.textVerticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2636. closeButton.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_RIGHT;
  2637. closeButton.height = closeButton.width = options.headerHeight;
  2638. closeButton.background = header.background;
  2639. closeButton.thickness = 0;
  2640. closeButton.pointerDownAnimation = function () {
  2641. };
  2642. closeButton.pointerUpAnimation = function () {
  2643. closeButton.background = header.background;
  2644. };
  2645. closeButton.pointerEnterAnimation = function () {
  2646. closeButton.color = header.background;
  2647. closeButton.background = "red";
  2648. };
  2649. closeButton.pointerOutAnimation = function () {
  2650. closeButton.color = closeIconColor.toHexString();
  2651. closeButton.background = header.background;
  2652. };
  2653. closeButton.onPointerClickObservable.add(function () {
  2654. closePicker(currentSwatch.background);
  2655. });
  2656. pickerPanel.addControl(closeButton, 0, 0);
  2657. // Dialog container body
  2658. var dialogBody = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2659. dialogBody.name = "Dialogue Body";
  2660. dialogBody.background = buttonBackgroundColor;
  2661. var dialogBodyCols = [0.4375, 0.5625];
  2662. dialogBody.addRowDefinition(1.0, false);
  2663. dialogBody.addColumnDefinition(dialogBodyCols[0], false);
  2664. dialogBody.addColumnDefinition(dialogBodyCols[1], false);
  2665. pickerPanel.addControl(dialogBody, 1, 0);
  2666. // Picker grid
  2667. var pickerGrid = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2668. pickerGrid.name = "Picker Grid";
  2669. pickerGrid.addRowDefinition(0.85, false);
  2670. pickerGrid.addRowDefinition(0.15, false);
  2671. dialogBody.addControl(pickerGrid, 0, 0);
  2672. // Picker control
  2673. picker = new ColorPicker();
  2674. picker.name = "GUI Color Picker";
  2675. if (options.pickerHeight < options.pickerWidth) {
  2676. picker.width = 0.89;
  2677. }
  2678. else {
  2679. picker.height = 0.89;
  2680. }
  2681. picker.value = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.lastColor);
  2682. picker.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  2683. picker.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2684. picker.onPointerDownObservable.add(function () {
  2685. activeField = picker.name;
  2686. lastVal = "";
  2687. editSwatches(false);
  2688. });
  2689. picker.onValueChangedObservable.add(function (value) {
  2690. if (activeField == picker.name) {
  2691. updateValues(value, picker.name);
  2692. }
  2693. });
  2694. pickerGrid.addControl(picker, 0, 0);
  2695. // Picker body right quarant
  2696. var pickerBodyRight = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2697. pickerBodyRight.name = "Dialogue Right Half";
  2698. pickerBodyRight.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  2699. var pickerBodyRightRows = [0.514, 0.486];
  2700. pickerBodyRight.addRowDefinition(pickerBodyRightRows[0], false);
  2701. pickerBodyRight.addRowDefinition(pickerBodyRightRows[1], false);
  2702. dialogBody.addControl(pickerBodyRight, 1, 1);
  2703. // Picker container swatches and buttons
  2704. var pickerSwatchesButtons = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2705. pickerSwatchesButtons.name = "Swatches and Buttons";
  2706. var pickerButtonsCol = [0.417, 0.583];
  2707. pickerSwatchesButtons.addRowDefinition(1.0, false);
  2708. pickerSwatchesButtons.addColumnDefinition(pickerButtonsCol[0], false);
  2709. pickerSwatchesButtons.addColumnDefinition(pickerButtonsCol[1], false);
  2710. pickerBodyRight.addControl(pickerSwatchesButtons, 0, 0);
  2711. // Picker Swatches quadrant
  2712. var pickerSwatches = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2713. pickerSwatches.name = "New and Current Swatches";
  2714. var pickeSwatchesRows = [0.04, 0.16, 0.64, 0.16];
  2715. pickerSwatches.addRowDefinition(pickeSwatchesRows[0], false);
  2716. pickerSwatches.addRowDefinition(pickeSwatchesRows[1], false);
  2717. pickerSwatches.addRowDefinition(pickeSwatchesRows[2], false);
  2718. pickerSwatches.addRowDefinition(pickeSwatchesRows[3], false);
  2719. pickerSwatchesButtons.addControl(pickerSwatches, 0, 0);
  2720. // Active swatches
  2721. var activeSwatches = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2722. activeSwatches.name = "Active Swatches";
  2723. activeSwatches.width = 0.67;
  2724. activeSwatches.addRowDefinition(0.5, false);
  2725. activeSwatches.addRowDefinition(0.5, false);
  2726. pickerSwatches.addControl(activeSwatches, 2, 0);
  2727. var labelWidth = (Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[0] * 0.11));
  2728. var labelHeight = (Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * pickeSwatchesRows[1] * 0.5));
  2729. if (options.pickerWidth > options.pickerHeight) {
  2730. var labelTextSize = labelHeight;
  2731. }
  2732. else {
  2733. var labelTextSize = labelWidth;
  2734. }
  2735. // New color swatch and previous color button
  2736. var newText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  2737. newText.text = "new";
  2738. newText.name = "New Color Label";
  2739. newText.color = buttonColor;
  2740. newText.fontSize = labelTextSize;
  2741. pickerSwatches.addControl(newText, 1, 0);
  2742. newSwatch = new _rectangle__WEBPACK_IMPORTED_MODULE_4__["Rectangle"]();
  2743. newSwatch.name = "New Color Swatch";
  2744. newSwatch.background = options.lastColor;
  2745. newSwatch.thickness = 0;
  2746. activeSwatches.addControl(newSwatch, 0, 0);
  2747. var currentSwatch = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("currentSwatch", "");
  2748. currentSwatch.background = options.lastColor;
  2749. currentSwatch.thickness = 0;
  2750. currentSwatch.onPointerClickObservable.add(function () {
  2751. var revertColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(currentSwatch.background);
  2752. updateValues(revertColor, currentSwatch.name);
  2753. editSwatches(false);
  2754. });
  2755. currentSwatch.pointerDownAnimation = function () { };
  2756. currentSwatch.pointerUpAnimation = function () { };
  2757. currentSwatch.pointerEnterAnimation = function () { };
  2758. currentSwatch.pointerOutAnimation = function () { };
  2759. activeSwatches.addControl(currentSwatch, 1, 0);
  2760. var swatchOutline = new _rectangle__WEBPACK_IMPORTED_MODULE_4__["Rectangle"]();
  2761. swatchOutline.name = "Swatch Outline";
  2762. swatchOutline.width = 0.67;
  2763. swatchOutline.thickness = 2;
  2764. swatchOutline.color = currentSwatchesOutlineColor;
  2765. swatchOutline.isHitTestVisible = false;
  2766. pickerSwatches.addControl(swatchOutline, 2, 0);
  2767. var currentText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  2768. currentText.name = "Current Color Label";
  2769. currentText.text = "current";
  2770. currentText.color = buttonColor;
  2771. currentText.fontSize = labelTextSize;
  2772. pickerSwatches.addControl(currentText, 3, 0);
  2773. // Buttons grid
  2774. var buttonGrid = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2775. buttonGrid.name = "Button Grid";
  2776. buttonGrid.height = 0.8;
  2777. var buttonGridRows = 1 / 3;
  2778. buttonGrid.addRowDefinition(buttonGridRows, false);
  2779. buttonGrid.addRowDefinition(buttonGridRows, false);
  2780. buttonGrid.addRowDefinition(buttonGridRows, false);
  2781. pickerSwatchesButtons.addControl(buttonGrid, 0, 1);
  2782. // Determine pixel width and height for all buttons from overall panel dimensions
  2783. buttonWidth = (Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[1] * 0.67)).toString() + "px";
  2784. buttonHeight = (Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * (parseFloat(buttonGrid.height.toString()) / 100) * buttonGridRows * 0.7)).toString() + "px";
  2785. // Determine button type size
  2786. if (parseFloat(buttonWidth) > parseFloat(buttonHeight)) {
  2787. buttonFontSize = Math.floor(parseFloat(buttonHeight) * 0.45);
  2788. }
  2789. else {
  2790. buttonFontSize = Math.floor(parseFloat(buttonWidth) * 0.11);
  2791. }
  2792. // Panel Buttons
  2793. var butOK = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butOK", "OK");
  2794. butOK.width = buttonWidth;
  2795. butOK.height = buttonHeight;
  2796. butOK.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2797. butOK.thickness = 2;
  2798. butOK.color = buttonColor;
  2799. butOK.fontSize = buttonFontSize;
  2800. butOK.background = buttonBackgroundColor;
  2801. butOK.onPointerEnterObservable.add(function () { butOK.background = buttonBackgroundHoverColor; });
  2802. butOK.onPointerOutObservable.add(function () { butOK.background = buttonBackgroundColor; });
  2803. butOK.pointerDownAnimation = function () {
  2804. butOK.background = buttonBackgroundClickColor;
  2805. };
  2806. butOK.pointerUpAnimation = function () {
  2807. butOK.background = buttonBackgroundHoverColor;
  2808. };
  2809. butOK.onPointerClickObservable.add(function () {
  2810. editSwatches(false);
  2811. closePicker(newSwatch.background);
  2812. });
  2813. buttonGrid.addControl(butOK, 0, 0);
  2814. var butCancel = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butCancel", "Cancel");
  2815. butCancel.width = buttonWidth;
  2816. butCancel.height = buttonHeight;
  2817. butCancel.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2818. butCancel.thickness = 2;
  2819. butCancel.color = buttonColor;
  2820. butCancel.fontSize = buttonFontSize;
  2821. butCancel.background = buttonBackgroundColor;
  2822. butCancel.onPointerEnterObservable.add(function () { butCancel.background = buttonBackgroundHoverColor; });
  2823. butCancel.onPointerOutObservable.add(function () { butCancel.background = buttonBackgroundColor; });
  2824. butCancel.pointerDownAnimation = function () {
  2825. butCancel.background = buttonBackgroundClickColor;
  2826. };
  2827. butCancel.pointerUpAnimation = function () {
  2828. butCancel.background = buttonBackgroundHoverColor;
  2829. };
  2830. butCancel.onPointerClickObservable.add(function () {
  2831. editSwatches(false);
  2832. closePicker(currentSwatch.background);
  2833. });
  2834. buttonGrid.addControl(butCancel, 1, 0);
  2835. if (options.savedColors) {
  2836. var butSave = _button__WEBPACK_IMPORTED_MODULE_5__["Button"].CreateSimpleButton("butSave", "Save");
  2837. butSave.width = buttonWidth;
  2838. butSave.height = buttonHeight;
  2839. butSave.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2840. butSave.thickness = 2;
  2841. butSave.fontSize = buttonFontSize;
  2842. if (options.savedColors.length < options.swatchLimit) {
  2843. butSave.color = buttonColor;
  2844. butSave.background = buttonBackgroundColor;
  2845. }
  2846. else {
  2847. disableButton(butSave, true);
  2848. }
  2849. butSave.onPointerEnterObservable.add(function () {
  2850. if (options.savedColors) {
  2851. if (options.savedColors.length < options.swatchLimit) {
  2852. butSave.background = buttonBackgroundHoverColor;
  2853. }
  2854. }
  2855. });
  2856. butSave.onPointerOutObservable.add(function () {
  2857. if (options.savedColors) {
  2858. if (options.savedColors.length < options.swatchLimit) {
  2859. butSave.background = buttonBackgroundColor;
  2860. }
  2861. }
  2862. });
  2863. butSave.pointerDownAnimation = function () {
  2864. if (options.savedColors) {
  2865. if (options.savedColors.length < options.swatchLimit) {
  2866. butSave.background = buttonBackgroundClickColor;
  2867. }
  2868. }
  2869. };
  2870. butSave.pointerUpAnimation = function () {
  2871. if (options.savedColors) {
  2872. if (options.savedColors.length < options.swatchLimit) {
  2873. butSave.background = buttonBackgroundHoverColor;
  2874. }
  2875. }
  2876. };
  2877. butSave.onPointerClickObservable.add(function () {
  2878. if (options.savedColors) {
  2879. if (options.savedColors.length == 0) {
  2880. setEditButtonVisibility(true);
  2881. }
  2882. if (options.savedColors.length < options.swatchLimit) {
  2883. updateSwatches(newSwatch.background, butSave);
  2884. }
  2885. editSwatches(false);
  2886. }
  2887. });
  2888. if (options.savedColors.length > 0) {
  2889. setEditButtonVisibility(true);
  2890. }
  2891. buttonGrid.addControl(butSave, 2, 0);
  2892. }
  2893. // Picker color values input
  2894. var pickerColorValues = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2895. pickerColorValues.name = "Dialog Lower Right";
  2896. pickerColorValues.addRowDefinition(0.02, false);
  2897. pickerColorValues.addRowDefinition(0.63, false);
  2898. pickerColorValues.addRowDefinition(0.21, false);
  2899. pickerColorValues.addRowDefinition(0.14, false);
  2900. pickerBodyRight.addControl(pickerColorValues, 1, 0);
  2901. // RGB values text boxes
  2902. currentColor = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(options.lastColor);
  2903. var rgbValuesQuadrant = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  2904. rgbValuesQuadrant.name = "RGB Values";
  2905. rgbValuesQuadrant.width = 0.82;
  2906. rgbValuesQuadrant.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_CENTER;
  2907. rgbValuesQuadrant.addRowDefinition(1 / 3, false);
  2908. rgbValuesQuadrant.addRowDefinition(1 / 3, false);
  2909. rgbValuesQuadrant.addRowDefinition(1 / 3, false);
  2910. rgbValuesQuadrant.addColumnDefinition(0.1, false);
  2911. rgbValuesQuadrant.addColumnDefinition(0.2, false);
  2912. rgbValuesQuadrant.addColumnDefinition(0.7, false);
  2913. pickerColorValues.addControl(rgbValuesQuadrant, 1, 0);
  2914. for (var i = 0; i < inputFieldLabels.length; i++) {
  2915. var labelText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  2916. labelText.text = inputFieldLabels[i];
  2917. labelText.color = buttonColor;
  2918. labelText.fontSize = buttonFontSize;
  2919. rgbValuesQuadrant.addControl(labelText, i, 0);
  2920. }
  2921. // Input fields for RGB values
  2922. rValInt = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  2923. rValInt.width = 0.83;
  2924. rValInt.height = 0.72;
  2925. rValInt.name = "rIntField";
  2926. rValInt.fontSize = buttonFontSize;
  2927. rValInt.text = (currentColor.r * 255).toString();
  2928. rValInt.color = inputTextColor;
  2929. rValInt.background = inputTextBackgroundColor;
  2930. rValInt.onFocusObservable.add(function () {
  2931. activeField = rValInt.name;
  2932. lastVal = rValInt.text;
  2933. editSwatches(false);
  2934. });
  2935. rValInt.onBlurObservable.add(function () {
  2936. if (rValInt.text == "") {
  2937. rValInt.text = "0";
  2938. }
  2939. updateInt(rValInt, "r");
  2940. if (activeField == rValInt.name) {
  2941. activeField = "";
  2942. }
  2943. });
  2944. rValInt.onTextChangedObservable.add(function () {
  2945. if (activeField == rValInt.name) {
  2946. updateInt(rValInt, "r");
  2947. }
  2948. });
  2949. rgbValuesQuadrant.addControl(rValInt, 0, 1);
  2950. gValInt = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  2951. gValInt.width = 0.83;
  2952. gValInt.height = 0.72;
  2953. gValInt.name = "gIntField";
  2954. gValInt.fontSize = buttonFontSize;
  2955. gValInt.text = (currentColor.g * 255).toString();
  2956. gValInt.color = inputTextColor;
  2957. gValInt.background = inputTextBackgroundColor;
  2958. gValInt.onFocusObservable.add(function () {
  2959. activeField = gValInt.name;
  2960. lastVal = gValInt.text;
  2961. editSwatches(false);
  2962. });
  2963. gValInt.onBlurObservable.add(function () {
  2964. if (gValInt.text == "") {
  2965. gValInt.text = "0";
  2966. }
  2967. updateInt(gValInt, "g");
  2968. if (activeField == gValInt.name) {
  2969. activeField = "";
  2970. }
  2971. });
  2972. gValInt.onTextChangedObservable.add(function () {
  2973. if (activeField == gValInt.name) {
  2974. updateInt(gValInt, "g");
  2975. }
  2976. });
  2977. rgbValuesQuadrant.addControl(gValInt, 1, 1);
  2978. bValInt = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  2979. bValInt.width = 0.83;
  2980. bValInt.height = 0.72;
  2981. bValInt.name = "bIntField";
  2982. bValInt.fontSize = buttonFontSize;
  2983. bValInt.text = (currentColor.b * 255).toString();
  2984. bValInt.color = inputTextColor;
  2985. bValInt.background = inputTextBackgroundColor;
  2986. bValInt.onFocusObservable.add(function () {
  2987. activeField = bValInt.name;
  2988. lastVal = bValInt.text;
  2989. editSwatches(false);
  2990. });
  2991. bValInt.onBlurObservable.add(function () {
  2992. if (bValInt.text == "") {
  2993. bValInt.text = "0";
  2994. }
  2995. updateInt(bValInt, "b");
  2996. if (activeField == bValInt.name) {
  2997. activeField = "";
  2998. }
  2999. });
  3000. bValInt.onTextChangedObservable.add(function () {
  3001. if (activeField == bValInt.name) {
  3002. updateInt(bValInt, "b");
  3003. }
  3004. });
  3005. rgbValuesQuadrant.addControl(bValInt, 2, 1);
  3006. rValDec = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3007. rValDec.width = 0.95;
  3008. rValDec.height = 0.72;
  3009. rValDec.name = "rDecField";
  3010. rValDec.fontSize = buttonFontSize;
  3011. rValDec.text = currentColor.r.toString();
  3012. rValDec.color = inputTextColor;
  3013. rValDec.background = inputTextBackgroundColor;
  3014. rValDec.onFocusObservable.add(function () {
  3015. activeField = rValDec.name;
  3016. lastVal = rValDec.text;
  3017. editSwatches(false);
  3018. });
  3019. rValDec.onBlurObservable.add(function () {
  3020. if (parseFloat(rValDec.text) == 0 || rValDec.text == "") {
  3021. rValDec.text = "0";
  3022. updateFloat(rValDec, "r");
  3023. }
  3024. if (activeField == rValDec.name) {
  3025. activeField = "";
  3026. }
  3027. });
  3028. rValDec.onTextChangedObservable.add(function () {
  3029. if (activeField == rValDec.name) {
  3030. updateFloat(rValDec, "r");
  3031. }
  3032. });
  3033. rgbValuesQuadrant.addControl(rValDec, 0, 2);
  3034. gValDec = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3035. gValDec.width = 0.95;
  3036. gValDec.height = 0.72;
  3037. gValDec.name = "gDecField";
  3038. gValDec.fontSize = buttonFontSize;
  3039. gValDec.text = currentColor.g.toString();
  3040. gValDec.color = inputTextColor;
  3041. gValDec.background = inputTextBackgroundColor;
  3042. gValDec.onFocusObservable.add(function () {
  3043. activeField = gValDec.name;
  3044. lastVal = gValDec.text;
  3045. editSwatches(false);
  3046. });
  3047. gValDec.onBlurObservable.add(function () {
  3048. if (parseFloat(gValDec.text) == 0 || gValDec.text == "") {
  3049. gValDec.text = "0";
  3050. updateFloat(gValDec, "g");
  3051. }
  3052. if (activeField == gValDec.name) {
  3053. activeField = "";
  3054. }
  3055. });
  3056. gValDec.onTextChangedObservable.add(function () {
  3057. if (activeField == gValDec.name) {
  3058. updateFloat(gValDec, "g");
  3059. }
  3060. });
  3061. rgbValuesQuadrant.addControl(gValDec, 1, 2);
  3062. bValDec = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3063. bValDec.width = 0.95;
  3064. bValDec.height = 0.72;
  3065. bValDec.name = "bDecField";
  3066. bValDec.fontSize = buttonFontSize;
  3067. bValDec.text = currentColor.b.toString();
  3068. bValDec.color = inputTextColor;
  3069. bValDec.background = inputTextBackgroundColor;
  3070. bValDec.onFocusObservable.add(function () {
  3071. activeField = bValDec.name;
  3072. lastVal = bValDec.text;
  3073. editSwatches(false);
  3074. });
  3075. bValDec.onBlurObservable.add(function () {
  3076. if (parseFloat(bValDec.text) == 0 || bValDec.text == "") {
  3077. bValDec.text = "0";
  3078. updateFloat(bValDec, "b");
  3079. }
  3080. if (activeField == bValDec.name) {
  3081. activeField = "";
  3082. }
  3083. });
  3084. bValDec.onTextChangedObservable.add(function () {
  3085. if (activeField == bValDec.name) {
  3086. updateFloat(bValDec, "b");
  3087. }
  3088. });
  3089. rgbValuesQuadrant.addControl(bValDec, 2, 2);
  3090. // Hex value input
  3091. var hexValueQuadrant = new _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]();
  3092. hexValueQuadrant.name = "Hex Value";
  3093. hexValueQuadrant.width = 0.82;
  3094. hexValueQuadrant.addRowDefinition(1.0, false);
  3095. hexValueQuadrant.addColumnDefinition(0.1, false);
  3096. hexValueQuadrant.addColumnDefinition(0.9, false);
  3097. pickerColorValues.addControl(hexValueQuadrant, 2, 0);
  3098. var labelText = new _controls_textBlock__WEBPACK_IMPORTED_MODULE_7__["TextBlock"]();
  3099. labelText.text = "#";
  3100. labelText.color = buttonColor;
  3101. labelText.fontSize = buttonFontSize;
  3102. hexValueQuadrant.addControl(labelText, 0, 0);
  3103. hexVal = new _inputText__WEBPACK_IMPORTED_MODULE_3__["InputText"]();
  3104. hexVal.width = 0.96;
  3105. hexVal.height = 0.72;
  3106. hexVal.name = "hexField";
  3107. hexVal.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  3108. hexVal.fontSize = buttonFontSize;
  3109. var minusPound = options.lastColor.split("#");
  3110. hexVal.text = minusPound[1];
  3111. hexVal.color = inputTextColor;
  3112. hexVal.background = inputTextBackgroundColor;
  3113. hexVal.onFocusObservable.add(function () {
  3114. activeField = hexVal.name;
  3115. lastVal = hexVal.text;
  3116. editSwatches(false);
  3117. });
  3118. hexVal.onBlurObservable.add(function () {
  3119. if (hexVal.text.length == 3) {
  3120. var val = hexVal.text.split("");
  3121. hexVal.text = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
  3122. }
  3123. if (hexVal.text == "") {
  3124. hexVal.text = "000000";
  3125. updateValues(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(hexVal.text), "b");
  3126. }
  3127. if (activeField == hexVal.name) {
  3128. activeField = "";
  3129. }
  3130. });
  3131. hexVal.onTextChangedObservable.add(function () {
  3132. var newHexValue = hexVal.text;
  3133. var checkHex = /[^0-9A-F]/i.test(newHexValue);
  3134. if ((hexVal.text.length > 6 || checkHex) && activeField == hexVal.name) {
  3135. hexVal.text = lastVal;
  3136. }
  3137. else {
  3138. if (hexVal.text.length < 6) {
  3139. var leadingZero = 6 - hexVal.text.length;
  3140. for (var i = 0; i < leadingZero; i++) {
  3141. newHexValue = "0" + newHexValue;
  3142. }
  3143. }
  3144. if (hexVal.text.length == 3) {
  3145. var val = hexVal.text.split("");
  3146. newHexValue = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
  3147. }
  3148. newHexValue = "#" + newHexValue;
  3149. if (activeField == hexVal.name) {
  3150. lastVal = hexVal.text;
  3151. updateValues(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].FromHexString(newHexValue), hexVal.name);
  3152. }
  3153. }
  3154. });
  3155. hexValueQuadrant.addControl(hexVal, 0, 1);
  3156. if (options.savedColors && options.savedColors.length > 0) {
  3157. updateSwatches("", butSave);
  3158. }
  3159. });
  3160. };
  3161. ColorPicker._Epsilon = 0.000001;
  3162. return ColorPicker;
  3163. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  3164. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.ColorPicker"] = ColorPicker;
  3165. /***/ }),
  3166. /***/ "./2D/controls/container.ts":
  3167. /*!**********************************!*\
  3168. !*** ./2D/controls/container.ts ***!
  3169. \**********************************/
  3170. /*! exports provided: Container */
  3171. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  3172. "use strict";
  3173. __webpack_require__.r(__webpack_exports__);
  3174. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return Container; });
  3175. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  3176. /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/perfCounter");
  3177. /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
  3178. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  3179. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
  3180. /**
  3181. * Root class for 2D containers
  3182. * @see http://doc.babylonjs.com/how_to/gui#containers
  3183. */
  3184. var Container = /** @class */ (function (_super) {
  3185. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Container, _super);
  3186. /**
  3187. * Creates a new Container
  3188. * @param name defines the name of the container
  3189. */
  3190. function Container(name) {
  3191. var _this = _super.call(this, name) || this;
  3192. _this.name = name;
  3193. /** @hidden */
  3194. _this._children = new Array();
  3195. /** @hidden */
  3196. _this._measureForChildren = _measure__WEBPACK_IMPORTED_MODULE_3__["Measure"].Empty();
  3197. /** @hidden */
  3198. _this._background = "";
  3199. /** @hidden */
  3200. _this._adaptWidthToChildren = false;
  3201. /** @hidden */
  3202. _this._adaptHeightToChildren = false;
  3203. /**
  3204. * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
  3205. */
  3206. _this.logLayoutCycleErrors = false;
  3207. /**
  3208. * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
  3209. */
  3210. _this.maxLayoutCycle = 3;
  3211. return _this;
  3212. }
  3213. Object.defineProperty(Container.prototype, "adaptHeightToChildren", {
  3214. /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
  3215. get: function () {
  3216. return this._adaptHeightToChildren;
  3217. },
  3218. set: function (value) {
  3219. if (this._adaptHeightToChildren === value) {
  3220. return;
  3221. }
  3222. this._adaptHeightToChildren = value;
  3223. if (value) {
  3224. this.height = "100%";
  3225. }
  3226. this._markAsDirty();
  3227. },
  3228. enumerable: true,
  3229. configurable: true
  3230. });
  3231. Object.defineProperty(Container.prototype, "adaptWidthToChildren", {
  3232. /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
  3233. get: function () {
  3234. return this._adaptWidthToChildren;
  3235. },
  3236. set: function (value) {
  3237. if (this._adaptWidthToChildren === value) {
  3238. return;
  3239. }
  3240. this._adaptWidthToChildren = value;
  3241. if (value) {
  3242. this.width = "100%";
  3243. }
  3244. this._markAsDirty();
  3245. },
  3246. enumerable: true,
  3247. configurable: true
  3248. });
  3249. Object.defineProperty(Container.prototype, "background", {
  3250. /** Gets or sets background color */
  3251. get: function () {
  3252. return this._background;
  3253. },
  3254. set: function (value) {
  3255. if (this._background === value) {
  3256. return;
  3257. }
  3258. this._background = value;
  3259. this._markAsDirty();
  3260. },
  3261. enumerable: true,
  3262. configurable: true
  3263. });
  3264. Object.defineProperty(Container.prototype, "children", {
  3265. /** Gets the list of children */
  3266. get: function () {
  3267. return this._children;
  3268. },
  3269. enumerable: true,
  3270. configurable: true
  3271. });
  3272. Container.prototype._getTypeName = function () {
  3273. return "Container";
  3274. };
  3275. Container.prototype._flagDescendantsAsMatrixDirty = function () {
  3276. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3277. var child = _a[_i];
  3278. child._markMatrixAsDirty();
  3279. }
  3280. };
  3281. /**
  3282. * Gets a child using its name
  3283. * @param name defines the child name to look for
  3284. * @returns the child control if found
  3285. */
  3286. Container.prototype.getChildByName = function (name) {
  3287. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3288. var child = _a[_i];
  3289. if (child.name === name) {
  3290. return child;
  3291. }
  3292. }
  3293. return null;
  3294. };
  3295. /**
  3296. * Gets a child using its type and its name
  3297. * @param name defines the child name to look for
  3298. * @param type defines the child type to look for
  3299. * @returns the child control if found
  3300. */
  3301. Container.prototype.getChildByType = function (name, type) {
  3302. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  3303. var child = _a[_i];
  3304. if (child.typeName === type) {
  3305. return child;
  3306. }
  3307. }
  3308. return null;
  3309. };
  3310. /**
  3311. * Search for a specific control in children
  3312. * @param control defines the control to look for
  3313. * @returns true if the control is in child list
  3314. */
  3315. Container.prototype.containsControl = function (control) {
  3316. return this.children.indexOf(control) !== -1;
  3317. };
  3318. /**
  3319. * Adds a new control to the current container
  3320. * @param control defines the control to add
  3321. * @returns the current container
  3322. */
  3323. Container.prototype.addControl = function (control) {
  3324. if (!control) {
  3325. return this;
  3326. }
  3327. var index = this._children.indexOf(control);
  3328. if (index !== -1) {
  3329. return this;
  3330. }
  3331. control._link(this._host);
  3332. control._markAllAsDirty();
  3333. this._reOrderControl(control);
  3334. this._markAsDirty();
  3335. return this;
  3336. };
  3337. /**
  3338. * Removes all controls from the current container
  3339. * @returns the current container
  3340. */
  3341. Container.prototype.clearControls = function () {
  3342. var children = this.children.slice();
  3343. for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
  3344. var child = children_1[_i];
  3345. this.removeControl(child);
  3346. }
  3347. return this;
  3348. };
  3349. /**
  3350. * Removes a control from the current container
  3351. * @param control defines the control to remove
  3352. * @returns the current container
  3353. */
  3354. Container.prototype.removeControl = function (control) {
  3355. var index = this._children.indexOf(control);
  3356. if (index !== -1) {
  3357. this._children.splice(index, 1);
  3358. control.parent = null;
  3359. }
  3360. control.linkWithMesh(null);
  3361. if (this._host) {
  3362. this._host._cleanControlAfterRemoval(control);
  3363. }
  3364. this._markAsDirty();
  3365. return this;
  3366. };
  3367. /** @hidden */
  3368. Container.prototype._reOrderControl = function (control) {
  3369. this.removeControl(control);
  3370. var wasAdded = false;
  3371. for (var index = 0; index < this._children.length; index++) {
  3372. if (this._children[index].zIndex > control.zIndex) {
  3373. this._children.splice(index, 0, control);
  3374. wasAdded = true;
  3375. break;
  3376. }
  3377. }
  3378. if (!wasAdded) {
  3379. this._children.push(control);
  3380. }
  3381. control.parent = this;
  3382. this._markAsDirty();
  3383. };
  3384. /** @hidden */
  3385. Container.prototype._offsetLeft = function (offset) {
  3386. _super.prototype._offsetLeft.call(this, offset);
  3387. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3388. var child = _a[_i];
  3389. child._offsetLeft(offset);
  3390. }
  3391. };
  3392. /** @hidden */
  3393. Container.prototype._offsetTop = function (offset) {
  3394. _super.prototype._offsetTop.call(this, offset);
  3395. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3396. var child = _a[_i];
  3397. child._offsetTop(offset);
  3398. }
  3399. };
  3400. /** @hidden */
  3401. Container.prototype._markAllAsDirty = function () {
  3402. _super.prototype._markAllAsDirty.call(this);
  3403. for (var index = 0; index < this._children.length; index++) {
  3404. this._children[index]._markAllAsDirty();
  3405. }
  3406. };
  3407. /** @hidden */
  3408. Container.prototype._localDraw = function (context) {
  3409. if (this._background) {
  3410. context.save();
  3411. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  3412. context.shadowColor = this.shadowColor;
  3413. context.shadowBlur = this.shadowBlur;
  3414. context.shadowOffsetX = this.shadowOffsetX;
  3415. context.shadowOffsetY = this.shadowOffsetY;
  3416. }
  3417. context.fillStyle = this._background;
  3418. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  3419. context.restore();
  3420. }
  3421. };
  3422. /** @hidden */
  3423. Container.prototype._link = function (host) {
  3424. _super.prototype._link.call(this, host);
  3425. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3426. var child = _a[_i];
  3427. child._link(host);
  3428. }
  3429. };
  3430. /** @hidden */
  3431. Container.prototype._beforeLayout = function () {
  3432. // Do nothing
  3433. };
  3434. /** @hidden */
  3435. Container.prototype._processMeasures = function (parentMeasure, context) {
  3436. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  3437. _super.prototype._processMeasures.call(this, parentMeasure, context);
  3438. this._evaluateClippingState(parentMeasure);
  3439. }
  3440. };
  3441. /** @hidden */
  3442. Container.prototype._layout = function (parentMeasure, context) {
  3443. if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
  3444. return false;
  3445. }
  3446. this.host._numLayoutCalls++;
  3447. if (this._isDirty) {
  3448. this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
  3449. }
  3450. var rebuildCount = 0;
  3451. context.save();
  3452. this._applyStates(context);
  3453. this._beforeLayout();
  3454. do {
  3455. var computedWidth = -1;
  3456. var computedHeight = -1;
  3457. this._rebuildLayout = false;
  3458. this._processMeasures(parentMeasure, context);
  3459. if (!this._isClipped) {
  3460. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3461. var child = _a[_i];
  3462. child._tempParentMeasure.copyFrom(this._measureForChildren);
  3463. if (child._layout(this._measureForChildren, context)) {
  3464. if (this.adaptWidthToChildren && child._width.isPixel) {
  3465. computedWidth = Math.max(computedWidth, child._currentMeasure.width);
  3466. }
  3467. if (this.adaptHeightToChildren && child._height.isPixel) {
  3468. computedHeight = Math.max(computedHeight, child._currentMeasure.height);
  3469. }
  3470. }
  3471. }
  3472. if (this.adaptWidthToChildren && computedWidth >= 0) {
  3473. if (this.width !== computedWidth + "px") {
  3474. this.width = computedWidth + "px";
  3475. this._rebuildLayout = true;
  3476. }
  3477. }
  3478. if (this.adaptHeightToChildren && computedHeight >= 0) {
  3479. if (this.height !== computedHeight + "px") {
  3480. this.height = computedHeight + "px";
  3481. this._rebuildLayout = true;
  3482. }
  3483. }
  3484. this._postMeasure();
  3485. }
  3486. rebuildCount++;
  3487. } while (this._rebuildLayout && rebuildCount < this.maxLayoutCycle);
  3488. if (rebuildCount >= 3 && this.logLayoutCycleErrors) {
  3489. babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["Logger"].Error("Layout cycle detected in GUI (Container name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
  3490. }
  3491. context.restore();
  3492. if (this._isDirty) {
  3493. this.invalidateRect();
  3494. this._isDirty = false;
  3495. }
  3496. return true;
  3497. };
  3498. Container.prototype._postMeasure = function () {
  3499. // Do nothing by default
  3500. };
  3501. /** @hidden */
  3502. Container.prototype._draw = function (context, invalidatedRectangle) {
  3503. this._localDraw(context);
  3504. if (this.clipChildren) {
  3505. this._clipForChildren(context);
  3506. }
  3507. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  3508. var child = _a[_i];
  3509. // Only redraw parts of the screen that are invalidated
  3510. if (invalidatedRectangle) {
  3511. if (!child._intersectsRect(invalidatedRectangle)) {
  3512. continue;
  3513. }
  3514. }
  3515. child._render(context, invalidatedRectangle);
  3516. }
  3517. };
  3518. Container.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
  3519. if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
  3520. if (!this.children) {
  3521. return;
  3522. }
  3523. for (var index = 0; index < this.children.length; index++) {
  3524. var item = this.children[index];
  3525. if (!predicate || predicate(item)) {
  3526. results.push(item);
  3527. }
  3528. if (!directDescendantsOnly) {
  3529. item.getDescendantsToRef(results, false, predicate);
  3530. }
  3531. }
  3532. };
  3533. /** @hidden */
  3534. Container.prototype._processPicking = function (x, y, type, pointerId, buttonIndex) {
  3535. if (!this._isEnabled || !this.isVisible || this.notRenderable) {
  3536. return false;
  3537. }
  3538. if (!_super.prototype.contains.call(this, x, y)) {
  3539. return false;
  3540. }
  3541. // Checking backwards to pick closest first
  3542. for (var index = this._children.length - 1; index >= 0; index--) {
  3543. var child = this._children[index];
  3544. if (child._processPicking(x, y, type, pointerId, buttonIndex)) {
  3545. if (child.hoverCursor) {
  3546. this._host._changeCursor(child.hoverCursor);
  3547. }
  3548. return true;
  3549. }
  3550. }
  3551. if (!this.isHitTestVisible) {
  3552. return false;
  3553. }
  3554. return this._processObservables(type, x, y, pointerId, buttonIndex);
  3555. };
  3556. /** @hidden */
  3557. Container.prototype._additionalProcessing = function (parentMeasure, context) {
  3558. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  3559. this._measureForChildren.copyFrom(this._currentMeasure);
  3560. };
  3561. /** Releases associated resources */
  3562. Container.prototype.dispose = function () {
  3563. _super.prototype.dispose.call(this);
  3564. for (var index = this.children.length - 1; index >= 0; index--) {
  3565. this.children[index].dispose();
  3566. }
  3567. };
  3568. return Container;
  3569. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  3570. babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Container"] = Container;
  3571. /***/ }),
  3572. /***/ "./2D/controls/control.ts":
  3573. /*!********************************!*\
  3574. !*** ./2D/controls/control.ts ***!
  3575. \********************************/
  3576. /*! exports provided: Control */
  3577. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  3578. "use strict";
  3579. __webpack_require__.r(__webpack_exports__);
  3580. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return Control; });
  3581. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  3582. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  3583. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  3584. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
  3585. /* harmony import */ var _math2D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../math2D */ "./2D/math2D.ts");
  3586. /**
  3587. * Root class used for all 2D controls
  3588. * @see http://doc.babylonjs.com/how_to/gui#controls
  3589. */
  3590. var Control = /** @class */ (function () {
  3591. // Functions
  3592. /**
  3593. * Creates a new control
  3594. * @param name defines the name of the control
  3595. */
  3596. function Control(
  3597. /** defines the name of the control */
  3598. name) {
  3599. this.name = name;
  3600. this._alpha = 1;
  3601. this._alphaSet = false;
  3602. this._zIndex = 0;
  3603. /** @hidden */
  3604. this._currentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3605. this._fontFamily = "Arial";
  3606. this._fontStyle = "";
  3607. this._fontWeight = "";
  3608. this._fontSize = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](18, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PIXEL, false);
  3609. /** @hidden */
  3610. this._width = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](1, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PERCENTAGE, false);
  3611. /** @hidden */
  3612. this._height = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](1, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PERCENTAGE, false);
  3613. this._color = "";
  3614. this._style = null;
  3615. /** @hidden */
  3616. this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
  3617. /** @hidden */
  3618. this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
  3619. /** @hidden */
  3620. this._isDirty = true;
  3621. /** @hidden */
  3622. this._wasDirty = false;
  3623. /** @hidden */
  3624. this._tempParentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3625. /** @hidden */
  3626. this._prevCurrentMeasureTransformedIntoGlobalSpace = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3627. /** @hidden */
  3628. this._cachedParentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
  3629. this._paddingLeft = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3630. this._paddingRight = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3631. this._paddingTop = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3632. this._paddingBottom = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3633. /** @hidden */
  3634. this._left = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3635. /** @hidden */
  3636. this._top = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3637. this._scaleX = 1.0;
  3638. this._scaleY = 1.0;
  3639. this._rotation = 0;
  3640. this._transformCenterX = 0.5;
  3641. this._transformCenterY = 0.5;
  3642. /** @hidden */
  3643. this._transformMatrix = _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].Identity();
  3644. /** @hidden */
  3645. this._invertTransformMatrix = _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].Identity();
  3646. /** @hidden */
  3647. this._transformedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  3648. this._isMatrixDirty = true;
  3649. this._isVisible = true;
  3650. this._isHighlighted = false;
  3651. this._fontSet = false;
  3652. this._dummyVector2 = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  3653. this._downCount = 0;
  3654. this._enterCount = -1;
  3655. this._doNotRender = false;
  3656. this._downPointerIds = {};
  3657. this._isEnabled = true;
  3658. this._disabledColor = "#9a9a9a";
  3659. /** @hidden */
  3660. this._rebuildLayout = false;
  3661. /** @hidden */
  3662. this._customData = {};
  3663. /** @hidden */
  3664. this._isClipped = false;
  3665. /** @hidden */
  3666. this._automaticSize = false;
  3667. /**
  3668. * Gets or sets an object used to store user defined information for the node
  3669. */
  3670. this.metadata = null;
  3671. /** Gets or sets a boolean indicating if the control can be hit with pointer events */
  3672. this.isHitTestVisible = true;
  3673. /** Gets or sets a boolean indicating if the control can block pointer events */
  3674. this.isPointerBlocker = false;
  3675. /** Gets or sets a boolean indicating if the control can be focusable */
  3676. this.isFocusInvisible = false;
  3677. /**
  3678. * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
  3679. * 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
  3680. */
  3681. this.clipChildren = true;
  3682. /**
  3683. * Gets or sets a boolean indicating that control content must be clipped
  3684. * 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
  3685. */
  3686. this.clipContent = true;
  3687. /**
  3688. * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
  3689. */
  3690. this.useBitmapCache = false;
  3691. this._shadowOffsetX = 0;
  3692. this._shadowOffsetY = 0;
  3693. this._shadowBlur = 0;
  3694. this._shadowColor = 'black';
  3695. /** Gets or sets the cursor to use when the control is hovered */
  3696. this.hoverCursor = "";
  3697. /** @hidden */
  3698. this._linkOffsetX = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3699. /** @hidden */
  3700. this._linkOffsetY = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  3701. /**
  3702. * An event triggered when the pointer move over the control.
  3703. */
  3704. this.onPointerMoveObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3705. /**
  3706. * An event triggered when the pointer move out of the control.
  3707. */
  3708. this.onPointerOutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3709. /**
  3710. * An event triggered when the pointer taps the control
  3711. */
  3712. this.onPointerDownObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3713. /**
  3714. * An event triggered when pointer up
  3715. */
  3716. this.onPointerUpObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3717. /**
  3718. * An event triggered when a control is clicked on
  3719. */
  3720. this.onPointerClickObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3721. /**
  3722. * An event triggered when pointer enters the control
  3723. */
  3724. this.onPointerEnterObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3725. /**
  3726. * An event triggered when the control is marked as dirty
  3727. */
  3728. this.onDirtyObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3729. /**
  3730. * An event triggered before drawing the control
  3731. */
  3732. this.onBeforeDrawObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3733. /**
  3734. * An event triggered after the control was drawn
  3735. */
  3736. this.onAfterDrawObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  3737. this._tmpMeasureA = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  3738. }
  3739. Object.defineProperty(Control.prototype, "shadowOffsetX", {
  3740. /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
  3741. get: function () {
  3742. return this._shadowOffsetX;
  3743. },
  3744. set: function (value) {
  3745. if (this._shadowOffsetX === value) {
  3746. return;
  3747. }
  3748. this._shadowOffsetX = value;
  3749. this._markAsDirty();
  3750. },
  3751. enumerable: true,
  3752. configurable: true
  3753. });
  3754. Object.defineProperty(Control.prototype, "shadowOffsetY", {
  3755. /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
  3756. get: function () {
  3757. return this._shadowOffsetY;
  3758. },
  3759. set: function (value) {
  3760. if (this._shadowOffsetY === value) {
  3761. return;
  3762. }
  3763. this._shadowOffsetY = value;
  3764. this._markAsDirty();
  3765. },
  3766. enumerable: true,
  3767. configurable: true
  3768. });
  3769. Object.defineProperty(Control.prototype, "shadowBlur", {
  3770. /** Gets or sets a value indicating the amount of blur to use to render the shadow */
  3771. get: function () {
  3772. return this._shadowBlur;
  3773. },
  3774. set: function (value) {
  3775. if (this._shadowBlur === value) {
  3776. return;
  3777. }
  3778. this._shadowBlur = value;
  3779. this._markAsDirty();
  3780. },
  3781. enumerable: true,
  3782. configurable: true
  3783. });
  3784. Object.defineProperty(Control.prototype, "shadowColor", {
  3785. /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
  3786. get: function () {
  3787. return this._shadowColor;
  3788. },
  3789. set: function (value) {
  3790. if (this._shadowColor === value) {
  3791. return;
  3792. }
  3793. this._shadowColor = value;
  3794. this._markAsDirty();
  3795. },
  3796. enumerable: true,
  3797. configurable: true
  3798. });
  3799. Object.defineProperty(Control.prototype, "typeName", {
  3800. // Properties
  3801. /** Gets the control type name */
  3802. get: function () {
  3803. return this._getTypeName();
  3804. },
  3805. enumerable: true,
  3806. configurable: true
  3807. });
  3808. /**
  3809. * Get the current class name of the control.
  3810. * @returns current class name
  3811. */
  3812. Control.prototype.getClassName = function () {
  3813. return this._getTypeName();
  3814. };
  3815. Object.defineProperty(Control.prototype, "host", {
  3816. /**
  3817. * Get the hosting AdvancedDynamicTexture
  3818. */
  3819. get: function () {
  3820. return this._host;
  3821. },
  3822. enumerable: true,
  3823. configurable: true
  3824. });
  3825. Object.defineProperty(Control.prototype, "fontOffset", {
  3826. /** Gets or set information about font offsets (used to render and align text) */
  3827. get: function () {
  3828. return this._fontOffset;
  3829. },
  3830. set: function (offset) {
  3831. this._fontOffset = offset;
  3832. },
  3833. enumerable: true,
  3834. configurable: true
  3835. });
  3836. Object.defineProperty(Control.prototype, "alpha", {
  3837. /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
  3838. get: function () {
  3839. return this._alpha;
  3840. },
  3841. set: function (value) {
  3842. if (this._alpha === value) {
  3843. return;
  3844. }
  3845. this._alphaSet = true;
  3846. this._alpha = value;
  3847. this._markAsDirty();
  3848. },
  3849. enumerable: true,
  3850. configurable: true
  3851. });
  3852. Object.defineProperty(Control.prototype, "isHighlighted", {
  3853. /**
  3854. * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
  3855. */
  3856. get: function () {
  3857. return this._isHighlighted;
  3858. },
  3859. set: function (value) {
  3860. if (this._isHighlighted === value) {
  3861. return;
  3862. }
  3863. this._isHighlighted = value;
  3864. this._markAsDirty();
  3865. },
  3866. enumerable: true,
  3867. configurable: true
  3868. });
  3869. Object.defineProperty(Control.prototype, "scaleX", {
  3870. /** Gets or sets a value indicating the scale factor on X axis (1 by default)
  3871. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  3872. */
  3873. get: function () {
  3874. return this._scaleX;
  3875. },
  3876. set: function (value) {
  3877. if (this._scaleX === value) {
  3878. return;
  3879. }
  3880. this._scaleX = value;
  3881. this._markAsDirty();
  3882. this._markMatrixAsDirty();
  3883. },
  3884. enumerable: true,
  3885. configurable: true
  3886. });
  3887. Object.defineProperty(Control.prototype, "scaleY", {
  3888. /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
  3889. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  3890. */
  3891. get: function () {
  3892. return this._scaleY;
  3893. },
  3894. set: function (value) {
  3895. if (this._scaleY === value) {
  3896. return;
  3897. }
  3898. this._scaleY = value;
  3899. this._markAsDirty();
  3900. this._markMatrixAsDirty();
  3901. },
  3902. enumerable: true,
  3903. configurable: true
  3904. });
  3905. Object.defineProperty(Control.prototype, "rotation", {
  3906. /** Gets or sets the rotation angle (0 by default)
  3907. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  3908. */
  3909. get: function () {
  3910. return this._rotation;
  3911. },
  3912. set: function (value) {
  3913. if (this._rotation === value) {
  3914. return;
  3915. }
  3916. this._rotation = value;
  3917. this._markAsDirty();
  3918. this._markMatrixAsDirty();
  3919. },
  3920. enumerable: true,
  3921. configurable: true
  3922. });
  3923. Object.defineProperty(Control.prototype, "transformCenterY", {
  3924. /** Gets or sets the transformation center on Y axis (0 by default)
  3925. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  3926. */
  3927. get: function () {
  3928. return this._transformCenterY;
  3929. },
  3930. set: function (value) {
  3931. if (this._transformCenterY === value) {
  3932. return;
  3933. }
  3934. this._transformCenterY = value;
  3935. this._markAsDirty();
  3936. this._markMatrixAsDirty();
  3937. },
  3938. enumerable: true,
  3939. configurable: true
  3940. });
  3941. Object.defineProperty(Control.prototype, "transformCenterX", {
  3942. /** Gets or sets the transformation center on X axis (0 by default)
  3943. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  3944. */
  3945. get: function () {
  3946. return this._transformCenterX;
  3947. },
  3948. set: function (value) {
  3949. if (this._transformCenterX === value) {
  3950. return;
  3951. }
  3952. this._transformCenterX = value;
  3953. this._markAsDirty();
  3954. this._markMatrixAsDirty();
  3955. },
  3956. enumerable: true,
  3957. configurable: true
  3958. });
  3959. Object.defineProperty(Control.prototype, "horizontalAlignment", {
  3960. /**
  3961. * Gets or sets the horizontal alignment
  3962. * @see http://doc.babylonjs.com/how_to/gui#alignments
  3963. */
  3964. get: function () {
  3965. return this._horizontalAlignment;
  3966. },
  3967. set: function (value) {
  3968. if (this._horizontalAlignment === value) {
  3969. return;
  3970. }
  3971. this._horizontalAlignment = value;
  3972. this._markAsDirty();
  3973. },
  3974. enumerable: true,
  3975. configurable: true
  3976. });
  3977. Object.defineProperty(Control.prototype, "verticalAlignment", {
  3978. /**
  3979. * Gets or sets the vertical alignment
  3980. * @see http://doc.babylonjs.com/how_to/gui#alignments
  3981. */
  3982. get: function () {
  3983. return this._verticalAlignment;
  3984. },
  3985. set: function (value) {
  3986. if (this._verticalAlignment === value) {
  3987. return;
  3988. }
  3989. this._verticalAlignment = value;
  3990. this._markAsDirty();
  3991. },
  3992. enumerable: true,
  3993. configurable: true
  3994. });
  3995. Object.defineProperty(Control.prototype, "width", {
  3996. /**
  3997. * Gets or sets control width
  3998. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  3999. */
  4000. get: function () {
  4001. return this._width.toString(this._host);
  4002. },
  4003. set: function (value) {
  4004. if (this._width.toString(this._host) === value) {
  4005. return;
  4006. }
  4007. if (this._width.fromString(value)) {
  4008. this._markAsDirty();
  4009. }
  4010. },
  4011. enumerable: true,
  4012. configurable: true
  4013. });
  4014. Object.defineProperty(Control.prototype, "widthInPixels", {
  4015. /**
  4016. * Gets or sets the control width in pixel
  4017. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4018. */
  4019. get: function () {
  4020. return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4021. },
  4022. set: function (value) {
  4023. if (isNaN(value)) {
  4024. return;
  4025. }
  4026. this.width = value + "px";
  4027. },
  4028. enumerable: true,
  4029. configurable: true
  4030. });
  4031. Object.defineProperty(Control.prototype, "height", {
  4032. /**
  4033. * Gets or sets control height
  4034. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4035. */
  4036. get: function () {
  4037. return this._height.toString(this._host);
  4038. },
  4039. set: function (value) {
  4040. if (this._height.toString(this._host) === value) {
  4041. return;
  4042. }
  4043. if (this._height.fromString(value)) {
  4044. this._markAsDirty();
  4045. }
  4046. },
  4047. enumerable: true,
  4048. configurable: true
  4049. });
  4050. Object.defineProperty(Control.prototype, "heightInPixels", {
  4051. /**
  4052. * Gets or sets control height in pixel
  4053. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4054. */
  4055. get: function () {
  4056. return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4057. },
  4058. set: function (value) {
  4059. if (isNaN(value)) {
  4060. return;
  4061. }
  4062. this.height = value + "px";
  4063. },
  4064. enumerable: true,
  4065. configurable: true
  4066. });
  4067. Object.defineProperty(Control.prototype, "fontFamily", {
  4068. /** Gets or set font family */
  4069. get: function () {
  4070. if (!this._fontSet) {
  4071. return "";
  4072. }
  4073. return this._fontFamily;
  4074. },
  4075. set: function (value) {
  4076. if (this._fontFamily === value) {
  4077. return;
  4078. }
  4079. this._fontFamily = value;
  4080. this._resetFontCache();
  4081. },
  4082. enumerable: true,
  4083. configurable: true
  4084. });
  4085. Object.defineProperty(Control.prototype, "fontStyle", {
  4086. /** Gets or sets font style */
  4087. get: function () {
  4088. return this._fontStyle;
  4089. },
  4090. set: function (value) {
  4091. if (this._fontStyle === value) {
  4092. return;
  4093. }
  4094. this._fontStyle = value;
  4095. this._resetFontCache();
  4096. },
  4097. enumerable: true,
  4098. configurable: true
  4099. });
  4100. Object.defineProperty(Control.prototype, "fontWeight", {
  4101. /** Gets or sets font weight */
  4102. get: function () {
  4103. return this._fontWeight;
  4104. },
  4105. set: function (value) {
  4106. if (this._fontWeight === value) {
  4107. return;
  4108. }
  4109. this._fontWeight = value;
  4110. this._resetFontCache();
  4111. },
  4112. enumerable: true,
  4113. configurable: true
  4114. });
  4115. Object.defineProperty(Control.prototype, "style", {
  4116. /**
  4117. * Gets or sets style
  4118. * @see http://doc.babylonjs.com/how_to/gui#styles
  4119. */
  4120. get: function () {
  4121. return this._style;
  4122. },
  4123. set: function (value) {
  4124. var _this = this;
  4125. if (this._style) {
  4126. this._style.onChangedObservable.remove(this._styleObserver);
  4127. this._styleObserver = null;
  4128. }
  4129. this._style = value;
  4130. if (this._style) {
  4131. this._styleObserver = this._style.onChangedObservable.add(function () {
  4132. _this._markAsDirty();
  4133. _this._resetFontCache();
  4134. });
  4135. }
  4136. this._markAsDirty();
  4137. this._resetFontCache();
  4138. },
  4139. enumerable: true,
  4140. configurable: true
  4141. });
  4142. Object.defineProperty(Control.prototype, "_isFontSizeInPercentage", {
  4143. /** @hidden */
  4144. get: function () {
  4145. return this._fontSize.isPercentage;
  4146. },
  4147. enumerable: true,
  4148. configurable: true
  4149. });
  4150. Object.defineProperty(Control.prototype, "fontSizeInPixels", {
  4151. /** Gets or sets font size in pixels */
  4152. get: function () {
  4153. var fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
  4154. if (fontSizeToUse.isPixel) {
  4155. return fontSizeToUse.getValue(this._host);
  4156. }
  4157. return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
  4158. },
  4159. set: function (value) {
  4160. if (isNaN(value)) {
  4161. return;
  4162. }
  4163. this.fontSize = value + "px";
  4164. },
  4165. enumerable: true,
  4166. configurable: true
  4167. });
  4168. Object.defineProperty(Control.prototype, "fontSize", {
  4169. /** Gets or sets font size */
  4170. get: function () {
  4171. return this._fontSize.toString(this._host);
  4172. },
  4173. set: function (value) {
  4174. if (this._fontSize.toString(this._host) === value) {
  4175. return;
  4176. }
  4177. if (this._fontSize.fromString(value)) {
  4178. this._markAsDirty();
  4179. this._resetFontCache();
  4180. }
  4181. },
  4182. enumerable: true,
  4183. configurable: true
  4184. });
  4185. Object.defineProperty(Control.prototype, "color", {
  4186. /** Gets or sets foreground color */
  4187. get: function () {
  4188. return this._color;
  4189. },
  4190. set: function (value) {
  4191. if (this._color === value) {
  4192. return;
  4193. }
  4194. this._color = value;
  4195. this._markAsDirty();
  4196. },
  4197. enumerable: true,
  4198. configurable: true
  4199. });
  4200. Object.defineProperty(Control.prototype, "zIndex", {
  4201. /** Gets or sets z index which is used to reorder controls on the z axis */
  4202. get: function () {
  4203. return this._zIndex;
  4204. },
  4205. set: function (value) {
  4206. if (this.zIndex === value) {
  4207. return;
  4208. }
  4209. this._zIndex = value;
  4210. if (this.parent) {
  4211. this.parent._reOrderControl(this);
  4212. }
  4213. },
  4214. enumerable: true,
  4215. configurable: true
  4216. });
  4217. Object.defineProperty(Control.prototype, "notRenderable", {
  4218. /** Gets or sets a boolean indicating if the control can be rendered */
  4219. get: function () {
  4220. return this._doNotRender;
  4221. },
  4222. set: function (value) {
  4223. if (this._doNotRender === value) {
  4224. return;
  4225. }
  4226. this._doNotRender = value;
  4227. this._markAsDirty();
  4228. },
  4229. enumerable: true,
  4230. configurable: true
  4231. });
  4232. Object.defineProperty(Control.prototype, "isVisible", {
  4233. /** Gets or sets a boolean indicating if the control is visible */
  4234. get: function () {
  4235. return this._isVisible;
  4236. },
  4237. set: function (value) {
  4238. if (this._isVisible === value) {
  4239. return;
  4240. }
  4241. this._isVisible = value;
  4242. this._markAsDirty(true);
  4243. },
  4244. enumerable: true,
  4245. configurable: true
  4246. });
  4247. Object.defineProperty(Control.prototype, "isDirty", {
  4248. /** Gets a boolean indicating that the control needs to update its rendering */
  4249. get: function () {
  4250. return this._isDirty;
  4251. },
  4252. enumerable: true,
  4253. configurable: true
  4254. });
  4255. Object.defineProperty(Control.prototype, "linkedMesh", {
  4256. /**
  4257. * Gets the current linked mesh (or null if none)
  4258. */
  4259. get: function () {
  4260. return this._linkedMesh;
  4261. },
  4262. enumerable: true,
  4263. configurable: true
  4264. });
  4265. Object.defineProperty(Control.prototype, "paddingLeft", {
  4266. /**
  4267. * Gets or sets a value indicating the padding to use on the left of the control
  4268. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4269. */
  4270. get: function () {
  4271. return this._paddingLeft.toString(this._host);
  4272. },
  4273. set: function (value) {
  4274. if (this._paddingLeft.fromString(value)) {
  4275. this._markAsDirty();
  4276. }
  4277. },
  4278. enumerable: true,
  4279. configurable: true
  4280. });
  4281. Object.defineProperty(Control.prototype, "paddingLeftInPixels", {
  4282. /**
  4283. * Gets or sets a value indicating the padding in pixels to use on the left of the control
  4284. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4285. */
  4286. get: function () {
  4287. return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4288. },
  4289. set: function (value) {
  4290. if (isNaN(value)) {
  4291. return;
  4292. }
  4293. this.paddingLeft = value + "px";
  4294. },
  4295. enumerable: true,
  4296. configurable: true
  4297. });
  4298. Object.defineProperty(Control.prototype, "paddingRight", {
  4299. /**
  4300. * Gets or sets a value indicating the padding to use on the right of the control
  4301. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4302. */
  4303. get: function () {
  4304. return this._paddingRight.toString(this._host);
  4305. },
  4306. set: function (value) {
  4307. if (this._paddingRight.fromString(value)) {
  4308. this._markAsDirty();
  4309. }
  4310. },
  4311. enumerable: true,
  4312. configurable: true
  4313. });
  4314. Object.defineProperty(Control.prototype, "paddingRightInPixels", {
  4315. /**
  4316. * Gets or sets a value indicating the padding in pixels to use on the right of the control
  4317. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4318. */
  4319. get: function () {
  4320. return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4321. },
  4322. set: function (value) {
  4323. if (isNaN(value)) {
  4324. return;
  4325. }
  4326. this.paddingRight = value + "px";
  4327. },
  4328. enumerable: true,
  4329. configurable: true
  4330. });
  4331. Object.defineProperty(Control.prototype, "paddingTop", {
  4332. /**
  4333. * Gets or sets a value indicating the padding to use on the top of the control
  4334. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4335. */
  4336. get: function () {
  4337. return this._paddingTop.toString(this._host);
  4338. },
  4339. set: function (value) {
  4340. if (this._paddingTop.fromString(value)) {
  4341. this._markAsDirty();
  4342. }
  4343. },
  4344. enumerable: true,
  4345. configurable: true
  4346. });
  4347. Object.defineProperty(Control.prototype, "paddingTopInPixels", {
  4348. /**
  4349. * Gets or sets a value indicating the padding in pixels to use on the top of the control
  4350. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4351. */
  4352. get: function () {
  4353. return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4354. },
  4355. set: function (value) {
  4356. if (isNaN(value)) {
  4357. return;
  4358. }
  4359. this.paddingTop = value + "px";
  4360. },
  4361. enumerable: true,
  4362. configurable: true
  4363. });
  4364. Object.defineProperty(Control.prototype, "paddingBottom", {
  4365. /**
  4366. * Gets or sets a value indicating the padding to use on the bottom of the control
  4367. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4368. */
  4369. get: function () {
  4370. return this._paddingBottom.toString(this._host);
  4371. },
  4372. set: function (value) {
  4373. if (this._paddingBottom.fromString(value)) {
  4374. this._markAsDirty();
  4375. }
  4376. },
  4377. enumerable: true,
  4378. configurable: true
  4379. });
  4380. Object.defineProperty(Control.prototype, "paddingBottomInPixels", {
  4381. /**
  4382. * Gets or sets a value indicating the padding in pixels to use on the bottom of the control
  4383. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4384. */
  4385. get: function () {
  4386. return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4387. },
  4388. set: function (value) {
  4389. if (isNaN(value)) {
  4390. return;
  4391. }
  4392. this.paddingBottom = value + "px";
  4393. },
  4394. enumerable: true,
  4395. configurable: true
  4396. });
  4397. Object.defineProperty(Control.prototype, "left", {
  4398. /**
  4399. * Gets or sets a value indicating the left coordinate of the control
  4400. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4401. */
  4402. get: function () {
  4403. return this._left.toString(this._host);
  4404. },
  4405. set: function (value) {
  4406. if (this._left.fromString(value)) {
  4407. this._markAsDirty();
  4408. }
  4409. },
  4410. enumerable: true,
  4411. configurable: true
  4412. });
  4413. Object.defineProperty(Control.prototype, "leftInPixels", {
  4414. /**
  4415. * Gets or sets a value indicating the left coordinate in pixels of the control
  4416. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4417. */
  4418. get: function () {
  4419. return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4420. },
  4421. set: function (value) {
  4422. if (isNaN(value)) {
  4423. return;
  4424. }
  4425. this.left = value + "px";
  4426. },
  4427. enumerable: true,
  4428. configurable: true
  4429. });
  4430. Object.defineProperty(Control.prototype, "top", {
  4431. /**
  4432. * Gets or sets a value indicating the top coordinate of the control
  4433. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4434. */
  4435. get: function () {
  4436. return this._top.toString(this._host);
  4437. },
  4438. set: function (value) {
  4439. if (this._top.fromString(value)) {
  4440. this._markAsDirty();
  4441. }
  4442. },
  4443. enumerable: true,
  4444. configurable: true
  4445. });
  4446. Object.defineProperty(Control.prototype, "topInPixels", {
  4447. /**
  4448. * Gets or sets a value indicating the top coordinate in pixels of the control
  4449. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  4450. */
  4451. get: function () {
  4452. return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4453. },
  4454. set: function (value) {
  4455. if (isNaN(value)) {
  4456. return;
  4457. }
  4458. this.top = value + "px";
  4459. },
  4460. enumerable: true,
  4461. configurable: true
  4462. });
  4463. Object.defineProperty(Control.prototype, "linkOffsetX", {
  4464. /**
  4465. * Gets or sets a value indicating the offset on X axis to the linked mesh
  4466. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  4467. */
  4468. get: function () {
  4469. return this._linkOffsetX.toString(this._host);
  4470. },
  4471. set: function (value) {
  4472. if (this._linkOffsetX.fromString(value)) {
  4473. this._markAsDirty();
  4474. }
  4475. },
  4476. enumerable: true,
  4477. configurable: true
  4478. });
  4479. Object.defineProperty(Control.prototype, "linkOffsetXInPixels", {
  4480. /**
  4481. * Gets or sets a value indicating the offset in pixels on X axis to the linked mesh
  4482. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  4483. */
  4484. get: function () {
  4485. return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
  4486. },
  4487. set: function (value) {
  4488. if (isNaN(value)) {
  4489. return;
  4490. }
  4491. this.linkOffsetX = value + "px";
  4492. },
  4493. enumerable: true,
  4494. configurable: true
  4495. });
  4496. Object.defineProperty(Control.prototype, "linkOffsetY", {
  4497. /**
  4498. * Gets or sets a value indicating the offset on Y axis to the linked mesh
  4499. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  4500. */
  4501. get: function () {
  4502. return this._linkOffsetY.toString(this._host);
  4503. },
  4504. set: function (value) {
  4505. if (this._linkOffsetY.fromString(value)) {
  4506. this._markAsDirty();
  4507. }
  4508. },
  4509. enumerable: true,
  4510. configurable: true
  4511. });
  4512. Object.defineProperty(Control.prototype, "linkOffsetYInPixels", {
  4513. /**
  4514. * Gets or sets a value indicating the offset in pixels on Y axis to the linked mesh
  4515. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  4516. */
  4517. get: function () {
  4518. return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
  4519. },
  4520. set: function (value) {
  4521. if (isNaN(value)) {
  4522. return;
  4523. }
  4524. this.linkOffsetY = value + "px";
  4525. },
  4526. enumerable: true,
  4527. configurable: true
  4528. });
  4529. Object.defineProperty(Control.prototype, "centerX", {
  4530. /** Gets the center coordinate on X axis */
  4531. get: function () {
  4532. return this._currentMeasure.left + this._currentMeasure.width / 2;
  4533. },
  4534. enumerable: true,
  4535. configurable: true
  4536. });
  4537. Object.defineProperty(Control.prototype, "centerY", {
  4538. /** Gets the center coordinate on Y axis */
  4539. get: function () {
  4540. return this._currentMeasure.top + this._currentMeasure.height / 2;
  4541. },
  4542. enumerable: true,
  4543. configurable: true
  4544. });
  4545. Object.defineProperty(Control.prototype, "isEnabled", {
  4546. /** Gets or sets if control is Enabled*/
  4547. get: function () {
  4548. return this._isEnabled;
  4549. },
  4550. set: function (value) {
  4551. if (this._isEnabled === value) {
  4552. return;
  4553. }
  4554. this._isEnabled = value;
  4555. this._markAsDirty();
  4556. },
  4557. enumerable: true,
  4558. configurable: true
  4559. });
  4560. Object.defineProperty(Control.prototype, "disabledColor", {
  4561. /** Gets or sets background color of control if it's disabled*/
  4562. get: function () {
  4563. return this._disabledColor;
  4564. },
  4565. set: function (value) {
  4566. if (this._disabledColor === value) {
  4567. return;
  4568. }
  4569. this._disabledColor = value;
  4570. this._markAsDirty();
  4571. },
  4572. enumerable: true,
  4573. configurable: true
  4574. });
  4575. /** @hidden */
  4576. Control.prototype._getTypeName = function () {
  4577. return "Control";
  4578. };
  4579. /**
  4580. * Gets the first ascendant in the hierarchy of the given type
  4581. * @param className defines the required type
  4582. * @returns the ascendant or null if not found
  4583. */
  4584. Control.prototype.getAscendantOfClass = function (className) {
  4585. if (!this.parent) {
  4586. return null;
  4587. }
  4588. if (this.parent.getClassName() === className) {
  4589. return this.parent;
  4590. }
  4591. return this.parent.getAscendantOfClass(className);
  4592. };
  4593. /** @hidden */
  4594. Control.prototype._resetFontCache = function () {
  4595. this._fontSet = true;
  4596. this._markAsDirty();
  4597. };
  4598. /**
  4599. * Determines if a container is an ascendant of the current control
  4600. * @param container defines the container to look for
  4601. * @returns true if the container is one of the ascendant of the control
  4602. */
  4603. Control.prototype.isAscendant = function (container) {
  4604. if (!this.parent) {
  4605. return false;
  4606. }
  4607. if (this.parent === container) {
  4608. return true;
  4609. }
  4610. return this.parent.isAscendant(container);
  4611. };
  4612. /**
  4613. * Gets coordinates in local control space
  4614. * @param globalCoordinates defines the coordinates to transform
  4615. * @returns the new coordinates in local space
  4616. */
  4617. Control.prototype.getLocalCoordinates = function (globalCoordinates) {
  4618. var result = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  4619. this.getLocalCoordinatesToRef(globalCoordinates, result);
  4620. return result;
  4621. };
  4622. /**
  4623. * Gets coordinates in local control space
  4624. * @param globalCoordinates defines the coordinates to transform
  4625. * @param result defines the target vector2 where to store the result
  4626. * @returns the current control
  4627. */
  4628. Control.prototype.getLocalCoordinatesToRef = function (globalCoordinates, result) {
  4629. result.x = globalCoordinates.x - this._currentMeasure.left;
  4630. result.y = globalCoordinates.y - this._currentMeasure.top;
  4631. return this;
  4632. };
  4633. /**
  4634. * Gets coordinates in parent local control space
  4635. * @param globalCoordinates defines the coordinates to transform
  4636. * @returns the new coordinates in parent local space
  4637. */
  4638. Control.prototype.getParentLocalCoordinates = function (globalCoordinates) {
  4639. var result = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero();
  4640. result.x = globalCoordinates.x - this._cachedParentMeasure.left;
  4641. result.y = globalCoordinates.y - this._cachedParentMeasure.top;
  4642. return result;
  4643. };
  4644. /**
  4645. * Move the current control to a vector3 position projected onto the screen.
  4646. * @param position defines the target position
  4647. * @param scene defines the hosting scene
  4648. */
  4649. Control.prototype.moveToVector3 = function (position, scene) {
  4650. if (!this._host || this.parent !== this._host._rootContainer) {
  4651. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Tools"].Error("Cannot move a control to a vector3 if the control is not at root level");
  4652. return;
  4653. }
  4654. this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  4655. this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  4656. var globalViewport = this._host._getGlobalViewport(scene);
  4657. var projectedPosition = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Project(position, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Matrix"].Identity(), scene.getTransformMatrix(), globalViewport);
  4658. this._moveToProjectedPosition(projectedPosition);
  4659. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  4660. this.notRenderable = true;
  4661. return;
  4662. }
  4663. this.notRenderable = false;
  4664. };
  4665. /**
  4666. * Will store all controls that have this control as ascendant in a given array
  4667. * @param results defines the array where to store the descendants
  4668. * @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
  4669. * @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
  4670. */
  4671. Control.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
  4672. if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
  4673. // Do nothing by default
  4674. };
  4675. /**
  4676. * Will return all controls that have this control as ascendant
  4677. * @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
  4678. * @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
  4679. * @return all child controls
  4680. */
  4681. Control.prototype.getDescendants = function (directDescendantsOnly, predicate) {
  4682. var results = new Array();
  4683. this.getDescendantsToRef(results, directDescendantsOnly, predicate);
  4684. return results;
  4685. };
  4686. /**
  4687. * Link current control with a target mesh
  4688. * @param mesh defines the mesh to link with
  4689. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  4690. */
  4691. Control.prototype.linkWithMesh = function (mesh) {
  4692. if (!this._host || this.parent && this.parent !== this._host._rootContainer) {
  4693. if (mesh) {
  4694. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Tools"].Error("Cannot link a control to a mesh if the control is not at root level");
  4695. }
  4696. return;
  4697. }
  4698. var index = this._host._linkedControls.indexOf(this);
  4699. if (index !== -1) {
  4700. this._linkedMesh = mesh;
  4701. if (!mesh) {
  4702. this._host._linkedControls.splice(index, 1);
  4703. }
  4704. return;
  4705. }
  4706. else if (!mesh) {
  4707. return;
  4708. }
  4709. this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  4710. this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  4711. this._linkedMesh = mesh;
  4712. this._host._linkedControls.push(this);
  4713. };
  4714. /** @hidden */
  4715. Control.prototype._moveToProjectedPosition = function (projectedPosition) {
  4716. var oldLeft = this._left.getValue(this._host);
  4717. var oldTop = this._top.getValue(this._host);
  4718. var newLeft = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2);
  4719. var newTop = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2);
  4720. if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
  4721. if (Math.abs(newLeft - oldLeft) < 0.5) {
  4722. newLeft = oldLeft;
  4723. }
  4724. if (Math.abs(newTop - oldTop) < 0.5) {
  4725. newTop = oldTop;
  4726. }
  4727. }
  4728. this.left = newLeft + "px";
  4729. this.top = newTop + "px";
  4730. this._left.ignoreAdaptiveScaling = true;
  4731. this._top.ignoreAdaptiveScaling = true;
  4732. this._markAsDirty();
  4733. };
  4734. /** @hidden */
  4735. Control.prototype._offsetLeft = function (offset) {
  4736. this._isDirty = true;
  4737. this._currentMeasure.left += offset;
  4738. };
  4739. /** @hidden */
  4740. Control.prototype._offsetTop = function (offset) {
  4741. this._isDirty = true;
  4742. this._currentMeasure.top += offset;
  4743. };
  4744. /** @hidden */
  4745. Control.prototype._markMatrixAsDirty = function () {
  4746. this._isMatrixDirty = true;
  4747. this._flagDescendantsAsMatrixDirty();
  4748. };
  4749. /** @hidden */
  4750. Control.prototype._flagDescendantsAsMatrixDirty = function () {
  4751. // No child
  4752. };
  4753. /** @hidden */
  4754. Control.prototype._intersectsRect = function (rect) {
  4755. // Rotate the control's current measure into local space and check if it intersects the passed in rectangle
  4756. this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
  4757. if (this._tmpMeasureA.left >= rect.left + rect.width) {
  4758. return false;
  4759. }
  4760. if (this._tmpMeasureA.top >= rect.top + rect.height) {
  4761. return false;
  4762. }
  4763. if (this._tmpMeasureA.left + this._tmpMeasureA.width <= rect.left) {
  4764. return false;
  4765. }
  4766. if (this._tmpMeasureA.top + this._tmpMeasureA.height <= rect.top) {
  4767. return false;
  4768. }
  4769. return true;
  4770. };
  4771. /** @hidden */
  4772. Control.prototype.invalidateRect = function () {
  4773. this._transform();
  4774. if (this.host && this.host.useInvalidateRectOptimization) {
  4775. // Rotate by transform to get the measure transformed to global space
  4776. this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
  4777. // get the boudning box of the current measure and last frames measure in global space and invalidate it
  4778. // the previous measure is used to properly clear a control that is scaled down
  4779. _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
  4780. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  4781. // Expand rect based on shadows
  4782. var shadowOffsetX = this.shadowOffsetX;
  4783. var shadowOffsetY = this.shadowOffsetY;
  4784. var shadowBlur = this.shadowBlur;
  4785. var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
  4786. var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
  4787. var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
  4788. var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
  4789. 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));
  4790. }
  4791. else {
  4792. 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));
  4793. }
  4794. }
  4795. };
  4796. /** @hidden */
  4797. Control.prototype._markAsDirty = function (force) {
  4798. if (force === void 0) { force = false; }
  4799. if (!this._isVisible && !force) {
  4800. return;
  4801. }
  4802. this._isDirty = true;
  4803. // Redraw only this rectangle
  4804. if (this._host) {
  4805. this._host.markAsDirty();
  4806. }
  4807. };
  4808. /** @hidden */
  4809. Control.prototype._markAllAsDirty = function () {
  4810. this._markAsDirty();
  4811. if (this._font) {
  4812. this._prepareFont();
  4813. }
  4814. };
  4815. /** @hidden */
  4816. Control.prototype._link = function (host) {
  4817. this._host = host;
  4818. if (this._host) {
  4819. this.uniqueId = this._host.getScene().getUniqueId();
  4820. }
  4821. };
  4822. /** @hidden */
  4823. Control.prototype._transform = function (context) {
  4824. if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
  4825. return;
  4826. }
  4827. // postTranslate
  4828. var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
  4829. var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
  4830. if (context) {
  4831. context.translate(offsetX, offsetY);
  4832. // rotate
  4833. context.rotate(this._rotation);
  4834. // scale
  4835. context.scale(this._scaleX, this._scaleY);
  4836. // preTranslate
  4837. context.translate(-offsetX, -offsetY);
  4838. }
  4839. // Need to update matrices?
  4840. if (this._isMatrixDirty || this._cachedOffsetX !== offsetX || this._cachedOffsetY !== offsetY) {
  4841. this._cachedOffsetX = offsetX;
  4842. this._cachedOffsetY = offsetY;
  4843. this._isMatrixDirty = false;
  4844. this._flagDescendantsAsMatrixDirty();
  4845. _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].ComposeToRef(-offsetX, -offsetY, this._rotation, this._scaleX, this._scaleY, this.parent ? this.parent._transformMatrix : null, this._transformMatrix);
  4846. this._transformMatrix.invertToRef(this._invertTransformMatrix);
  4847. }
  4848. };
  4849. /** @hidden */
  4850. Control.prototype._renderHighlight = function (context) {
  4851. if (!this.isHighlighted) {
  4852. return;
  4853. }
  4854. context.save();
  4855. context.strokeStyle = "#4affff";
  4856. context.lineWidth = 2;
  4857. this._renderHighlightSpecific(context);
  4858. context.restore();
  4859. };
  4860. /** @hidden */
  4861. Control.prototype._renderHighlightSpecific = function (context) {
  4862. context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  4863. };
  4864. /** @hidden */
  4865. Control.prototype._applyStates = function (context) {
  4866. if (this._isFontSizeInPercentage) {
  4867. this._fontSet = true;
  4868. }
  4869. if (this._fontSet) {
  4870. this._prepareFont();
  4871. this._fontSet = false;
  4872. }
  4873. if (this._font) {
  4874. context.font = this._font;
  4875. }
  4876. if (this._color) {
  4877. context.fillStyle = this._color;
  4878. }
  4879. if (Control.AllowAlphaInheritance) {
  4880. context.globalAlpha *= this._alpha;
  4881. }
  4882. else if (this._alphaSet) {
  4883. context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;
  4884. }
  4885. };
  4886. /** @hidden */
  4887. Control.prototype._layout = function (parentMeasure, context) {
  4888. if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
  4889. return false;
  4890. }
  4891. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  4892. this.host._numLayoutCalls++;
  4893. this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
  4894. context.save();
  4895. this._applyStates(context);
  4896. var rebuildCount = 0;
  4897. do {
  4898. this._rebuildLayout = false;
  4899. this._processMeasures(parentMeasure, context);
  4900. rebuildCount++;
  4901. } while (this._rebuildLayout && rebuildCount < 3);
  4902. if (rebuildCount >= 3) {
  4903. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Logger"].Error("Layout cycle detected in GUI (Control name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
  4904. }
  4905. context.restore();
  4906. this.invalidateRect();
  4907. this._evaluateClippingState(parentMeasure);
  4908. }
  4909. this._wasDirty = this._isDirty;
  4910. this._isDirty = false;
  4911. return true;
  4912. };
  4913. /** @hidden */
  4914. Control.prototype._processMeasures = function (parentMeasure, context) {
  4915. this._currentMeasure.copyFrom(parentMeasure);
  4916. // Let children take some pre-measurement actions
  4917. this._preMeasure(parentMeasure, context);
  4918. this._measure();
  4919. this._computeAlignment(parentMeasure, context);
  4920. // Convert to int values
  4921. this._currentMeasure.left = this._currentMeasure.left | 0;
  4922. this._currentMeasure.top = this._currentMeasure.top | 0;
  4923. this._currentMeasure.width = this._currentMeasure.width | 0;
  4924. this._currentMeasure.height = this._currentMeasure.height | 0;
  4925. // Let children add more features
  4926. this._additionalProcessing(parentMeasure, context);
  4927. this._cachedParentMeasure.copyFrom(parentMeasure);
  4928. if (this.onDirtyObservable.hasObservers()) {
  4929. this.onDirtyObservable.notifyObservers(this);
  4930. }
  4931. };
  4932. Control.prototype._evaluateClippingState = function (parentMeasure) {
  4933. if (this.parent && this.parent.clipChildren) {
  4934. // Early clip
  4935. if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
  4936. this._isClipped = true;
  4937. return;
  4938. }
  4939. if (this._currentMeasure.left + this._currentMeasure.width < parentMeasure.left) {
  4940. this._isClipped = true;
  4941. return;
  4942. }
  4943. if (this._currentMeasure.top > parentMeasure.top + parentMeasure.height) {
  4944. this._isClipped = true;
  4945. return;
  4946. }
  4947. if (this._currentMeasure.top + this._currentMeasure.height < parentMeasure.top) {
  4948. this._isClipped = true;
  4949. return;
  4950. }
  4951. }
  4952. this._isClipped = false;
  4953. };
  4954. /** @hidden */
  4955. Control.prototype._measure = function () {
  4956. // Width / Height
  4957. if (this._width.isPixel) {
  4958. this._currentMeasure.width = this._width.getValue(this._host);
  4959. }
  4960. else {
  4961. this._currentMeasure.width *= this._width.getValue(this._host);
  4962. }
  4963. if (this._height.isPixel) {
  4964. this._currentMeasure.height = this._height.getValue(this._host);
  4965. }
  4966. else {
  4967. this._currentMeasure.height *= this._height.getValue(this._host);
  4968. }
  4969. };
  4970. /** @hidden */
  4971. Control.prototype._computeAlignment = function (parentMeasure, context) {
  4972. var width = this._currentMeasure.width;
  4973. var height = this._currentMeasure.height;
  4974. var parentWidth = parentMeasure.width;
  4975. var parentHeight = parentMeasure.height;
  4976. // Left / top
  4977. var x = 0;
  4978. var y = 0;
  4979. switch (this.horizontalAlignment) {
  4980. case Control.HORIZONTAL_ALIGNMENT_LEFT:
  4981. x = 0;
  4982. break;
  4983. case Control.HORIZONTAL_ALIGNMENT_RIGHT:
  4984. x = parentWidth - width;
  4985. break;
  4986. case Control.HORIZONTAL_ALIGNMENT_CENTER:
  4987. x = (parentWidth - width) / 2;
  4988. break;
  4989. }
  4990. switch (this.verticalAlignment) {
  4991. case Control.VERTICAL_ALIGNMENT_TOP:
  4992. y = 0;
  4993. break;
  4994. case Control.VERTICAL_ALIGNMENT_BOTTOM:
  4995. y = parentHeight - height;
  4996. break;
  4997. case Control.VERTICAL_ALIGNMENT_CENTER:
  4998. y = (parentHeight - height) / 2;
  4999. break;
  5000. }
  5001. if (this._paddingLeft.isPixel) {
  5002. this._currentMeasure.left += this._paddingLeft.getValue(this._host);
  5003. this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
  5004. }
  5005. else {
  5006. this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
  5007. this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
  5008. }
  5009. if (this._paddingRight.isPixel) {
  5010. this._currentMeasure.width -= this._paddingRight.getValue(this._host);
  5011. }
  5012. else {
  5013. this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
  5014. }
  5015. if (this._paddingTop.isPixel) {
  5016. this._currentMeasure.top += this._paddingTop.getValue(this._host);
  5017. this._currentMeasure.height -= this._paddingTop.getValue(this._host);
  5018. }
  5019. else {
  5020. this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
  5021. this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
  5022. }
  5023. if (this._paddingBottom.isPixel) {
  5024. this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
  5025. }
  5026. else {
  5027. this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
  5028. }
  5029. if (this._left.isPixel) {
  5030. this._currentMeasure.left += this._left.getValue(this._host);
  5031. }
  5032. else {
  5033. this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
  5034. }
  5035. if (this._top.isPixel) {
  5036. this._currentMeasure.top += this._top.getValue(this._host);
  5037. }
  5038. else {
  5039. this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
  5040. }
  5041. this._currentMeasure.left += x;
  5042. this._currentMeasure.top += y;
  5043. };
  5044. /** @hidden */
  5045. Control.prototype._preMeasure = function (parentMeasure, context) {
  5046. // Do nothing
  5047. };
  5048. /** @hidden */
  5049. Control.prototype._additionalProcessing = function (parentMeasure, context) {
  5050. // Do nothing
  5051. };
  5052. /** @hidden */
  5053. Control.prototype._clipForChildren = function (context) {
  5054. // DO nothing
  5055. };
  5056. Control.prototype._clip = function (context, invalidatedRectangle) {
  5057. context.beginPath();
  5058. Control._ClipMeasure.copyFrom(this._currentMeasure);
  5059. if (invalidatedRectangle) {
  5060. // Rotate the invalidated rect into the control's space
  5061. invalidatedRectangle.transformToRef(this._invertTransformMatrix, this._tmpMeasureA);
  5062. // Get the intersection of the rect in context space and the current context
  5063. var intersection = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  5064. intersection.left = Math.max(this._tmpMeasureA.left, this._currentMeasure.left);
  5065. intersection.top = Math.max(this._tmpMeasureA.top, this._currentMeasure.top);
  5066. intersection.width = Math.min(this._tmpMeasureA.left + this._tmpMeasureA.width, this._currentMeasure.left + this._currentMeasure.width) - intersection.left;
  5067. intersection.height = Math.min(this._tmpMeasureA.top + this._tmpMeasureA.height, this._currentMeasure.top + this._currentMeasure.height) - intersection.top;
  5068. Control._ClipMeasure.copyFrom(intersection);
  5069. }
  5070. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  5071. var shadowOffsetX = this.shadowOffsetX;
  5072. var shadowOffsetY = this.shadowOffsetY;
  5073. var shadowBlur = this.shadowBlur;
  5074. var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
  5075. var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
  5076. var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
  5077. var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
  5078. context.rect(Control._ClipMeasure.left + leftShadowOffset, Control._ClipMeasure.top + topShadowOffset, Control._ClipMeasure.width + rightShadowOffset - leftShadowOffset, Control._ClipMeasure.height + bottomShadowOffset - topShadowOffset);
  5079. }
  5080. else {
  5081. context.rect(Control._ClipMeasure.left, Control._ClipMeasure.top, Control._ClipMeasure.width, Control._ClipMeasure.height);
  5082. }
  5083. context.clip();
  5084. };
  5085. /** @hidden */
  5086. Control.prototype._render = function (context, invalidatedRectangle) {
  5087. if (!this.isVisible || this.notRenderable || this._isClipped) {
  5088. this._isDirty = false;
  5089. return false;
  5090. }
  5091. this.host._numRenderCalls++;
  5092. context.save();
  5093. this._applyStates(context);
  5094. // Transform
  5095. this._transform(context);
  5096. // Clip
  5097. if (this.clipContent) {
  5098. this._clip(context, invalidatedRectangle);
  5099. }
  5100. if (this.onBeforeDrawObservable.hasObservers()) {
  5101. this.onBeforeDrawObservable.notifyObservers(this);
  5102. }
  5103. if (this.useBitmapCache && !this._wasDirty && this._cacheData) {
  5104. context.putImageData(this._cacheData, this._currentMeasure.left, this._currentMeasure.top);
  5105. }
  5106. else {
  5107. this._draw(context, invalidatedRectangle);
  5108. }
  5109. if (this.useBitmapCache && this._wasDirty) {
  5110. this._cacheData = context.getImageData(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  5111. }
  5112. this._renderHighlight(context);
  5113. if (this.onAfterDrawObservable.hasObservers()) {
  5114. this.onAfterDrawObservable.notifyObservers(this);
  5115. }
  5116. context.restore();
  5117. return true;
  5118. };
  5119. /** @hidden */
  5120. Control.prototype._draw = function (context, invalidatedRectangle) {
  5121. // Do nothing
  5122. };
  5123. /**
  5124. * Tests if a given coordinates belong to the current control
  5125. * @param x defines x coordinate to test
  5126. * @param y defines y coordinate to test
  5127. * @returns true if the coordinates are inside the control
  5128. */
  5129. Control.prototype.contains = function (x, y) {
  5130. // Invert transform
  5131. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  5132. x = this._transformedPosition.x;
  5133. y = this._transformedPosition.y;
  5134. // Check
  5135. if (x < this._currentMeasure.left) {
  5136. return false;
  5137. }
  5138. if (x > this._currentMeasure.left + this._currentMeasure.width) {
  5139. return false;
  5140. }
  5141. if (y < this._currentMeasure.top) {
  5142. return false;
  5143. }
  5144. if (y > this._currentMeasure.top + this._currentMeasure.height) {
  5145. return false;
  5146. }
  5147. if (this.isPointerBlocker) {
  5148. this._host._shouldBlockPointer = true;
  5149. }
  5150. return true;
  5151. };
  5152. /** @hidden */
  5153. Control.prototype._processPicking = function (x, y, type, pointerId, buttonIndex) {
  5154. if (!this._isEnabled) {
  5155. return false;
  5156. }
  5157. if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
  5158. return false;
  5159. }
  5160. if (!this.contains(x, y)) {
  5161. return false;
  5162. }
  5163. this._processObservables(type, x, y, pointerId, buttonIndex);
  5164. return true;
  5165. };
  5166. /** @hidden */
  5167. Control.prototype._onPointerMove = function (target, coordinates, pointerId) {
  5168. var canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this);
  5169. if (canNotify && this.parent != null) {
  5170. this.parent._onPointerMove(target, coordinates, pointerId);
  5171. }
  5172. };
  5173. /** @hidden */
  5174. Control.prototype._onPointerEnter = function (target) {
  5175. if (!this._isEnabled) {
  5176. return false;
  5177. }
  5178. if (this._enterCount > 0) {
  5179. return false;
  5180. }
  5181. if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
  5182. this._enterCount = 0;
  5183. }
  5184. this._enterCount++;
  5185. var canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this);
  5186. if (canNotify && this.parent != null) {
  5187. this.parent._onPointerEnter(target);
  5188. }
  5189. return true;
  5190. };
  5191. /** @hidden */
  5192. Control.prototype._onPointerOut = function (target, force) {
  5193. if (force === void 0) { force = false; }
  5194. if (!force && (!this._isEnabled || target === this)) {
  5195. return;
  5196. }
  5197. this._enterCount = 0;
  5198. var canNotify = true;
  5199. if (!target.isAscendant(this)) {
  5200. canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this);
  5201. }
  5202. if (canNotify && this.parent != null) {
  5203. this.parent._onPointerOut(target, force);
  5204. }
  5205. };
  5206. /** @hidden */
  5207. Control.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  5208. // Prevent pointerout to lose control context.
  5209. // Event redundancy is checked inside the function.
  5210. this._onPointerEnter(this);
  5211. if (this._downCount !== 0) {
  5212. return false;
  5213. }
  5214. this._downCount++;
  5215. this._downPointerIds[pointerId] = true;
  5216. var canNotify = this.onPointerDownObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"](coordinates, buttonIndex), -1, target, this);
  5217. if (canNotify && this.parent != null) {
  5218. this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex);
  5219. }
  5220. return true;
  5221. };
  5222. /** @hidden */
  5223. Control.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  5224. if (!this._isEnabled) {
  5225. return;
  5226. }
  5227. this._downCount = 0;
  5228. delete this._downPointerIds[pointerId];
  5229. var canNotifyClick = notifyClick;
  5230. if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
  5231. canNotifyClick = this.onPointerClickObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"](coordinates, buttonIndex), -1, target, this);
  5232. }
  5233. var canNotify = this.onPointerUpObservable.notifyObservers(new _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"](coordinates, buttonIndex), -1, target, this);
  5234. if (canNotify && this.parent != null) {
  5235. this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick);
  5236. }
  5237. };
  5238. /** @hidden */
  5239. Control.prototype._forcePointerUp = function (pointerId) {
  5240. if (pointerId === void 0) { pointerId = null; }
  5241. if (pointerId !== null) {
  5242. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero(), pointerId, 0, true);
  5243. }
  5244. else {
  5245. for (var key in this._downPointerIds) {
  5246. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"].Zero(), +key, 0, true);
  5247. }
  5248. }
  5249. };
  5250. /** @hidden */
  5251. Control.prototype._processObservables = function (type, x, y, pointerId, buttonIndex) {
  5252. if (!this._isEnabled) {
  5253. return false;
  5254. }
  5255. this._dummyVector2.copyFromFloats(x, y);
  5256. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERMOVE) {
  5257. this._onPointerMove(this, this._dummyVector2, pointerId);
  5258. var previousControlOver = this._host._lastControlOver[pointerId];
  5259. if (previousControlOver && previousControlOver !== this) {
  5260. previousControlOver._onPointerOut(this);
  5261. }
  5262. if (previousControlOver !== this) {
  5263. this._onPointerEnter(this);
  5264. }
  5265. this._host._lastControlOver[pointerId] = this;
  5266. return true;
  5267. }
  5268. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERDOWN) {
  5269. this._onPointerDown(this, this._dummyVector2, pointerId, buttonIndex);
  5270. this._host._registerLastControlDown(this, pointerId);
  5271. this._host._lastPickedControl = this;
  5272. return true;
  5273. }
  5274. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP) {
  5275. if (this._host._lastControlDown[pointerId]) {
  5276. this._host._lastControlDown[pointerId]._onPointerUp(this, this._dummyVector2, pointerId, buttonIndex, true);
  5277. }
  5278. delete this._host._lastControlDown[pointerId];
  5279. return true;
  5280. }
  5281. return false;
  5282. };
  5283. Control.prototype._prepareFont = function () {
  5284. if (!this._font && !this._fontSet) {
  5285. return;
  5286. }
  5287. if (this._style) {
  5288. this._font = this._style.fontStyle + " " + this._style.fontWeight + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
  5289. }
  5290. else {
  5291. this._font = this._fontStyle + " " + this._fontWeight + " " + this.fontSizeInPixels + "px " + this._fontFamily;
  5292. }
  5293. this._fontOffset = Control._GetFontOffset(this._font);
  5294. };
  5295. /** Releases associated resources */
  5296. Control.prototype.dispose = function () {
  5297. this.onDirtyObservable.clear();
  5298. this.onBeforeDrawObservable.clear();
  5299. this.onAfterDrawObservable.clear();
  5300. this.onPointerDownObservable.clear();
  5301. this.onPointerEnterObservable.clear();
  5302. this.onPointerMoveObservable.clear();
  5303. this.onPointerOutObservable.clear();
  5304. this.onPointerUpObservable.clear();
  5305. this.onPointerClickObservable.clear();
  5306. if (this._styleObserver && this._style) {
  5307. this._style.onChangedObservable.remove(this._styleObserver);
  5308. this._styleObserver = null;
  5309. }
  5310. if (this.parent) {
  5311. this.parent.removeControl(this);
  5312. this.parent = null;
  5313. }
  5314. if (this._host) {
  5315. var index = this._host._linkedControls.indexOf(this);
  5316. if (index > -1) {
  5317. this.linkWithMesh(null);
  5318. }
  5319. }
  5320. };
  5321. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
  5322. /** HORIZONTAL_ALIGNMENT_LEFT */
  5323. get: function () {
  5324. return Control._HORIZONTAL_ALIGNMENT_LEFT;
  5325. },
  5326. enumerable: true,
  5327. configurable: true
  5328. });
  5329. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
  5330. /** HORIZONTAL_ALIGNMENT_RIGHT */
  5331. get: function () {
  5332. return Control._HORIZONTAL_ALIGNMENT_RIGHT;
  5333. },
  5334. enumerable: true,
  5335. configurable: true
  5336. });
  5337. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
  5338. /** HORIZONTAL_ALIGNMENT_CENTER */
  5339. get: function () {
  5340. return Control._HORIZONTAL_ALIGNMENT_CENTER;
  5341. },
  5342. enumerable: true,
  5343. configurable: true
  5344. });
  5345. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
  5346. /** VERTICAL_ALIGNMENT_TOP */
  5347. get: function () {
  5348. return Control._VERTICAL_ALIGNMENT_TOP;
  5349. },
  5350. enumerable: true,
  5351. configurable: true
  5352. });
  5353. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
  5354. /** VERTICAL_ALIGNMENT_BOTTOM */
  5355. get: function () {
  5356. return Control._VERTICAL_ALIGNMENT_BOTTOM;
  5357. },
  5358. enumerable: true,
  5359. configurable: true
  5360. });
  5361. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
  5362. /** VERTICAL_ALIGNMENT_CENTER */
  5363. get: function () {
  5364. return Control._VERTICAL_ALIGNMENT_CENTER;
  5365. },
  5366. enumerable: true,
  5367. configurable: true
  5368. });
  5369. /** @hidden */
  5370. Control._GetFontOffset = function (font) {
  5371. if (Control._FontHeightSizes[font]) {
  5372. return Control._FontHeightSizes[font];
  5373. }
  5374. var text = document.createElement("span");
  5375. text.innerHTML = "Hg";
  5376. text.style.font = font;
  5377. var block = document.createElement("div");
  5378. block.style.display = "inline-block";
  5379. block.style.width = "1px";
  5380. block.style.height = "0px";
  5381. block.style.verticalAlign = "bottom";
  5382. var div = document.createElement("div");
  5383. div.appendChild(text);
  5384. div.appendChild(block);
  5385. document.body.appendChild(div);
  5386. var fontAscent = 0;
  5387. var fontHeight = 0;
  5388. try {
  5389. fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  5390. block.style.verticalAlign = "baseline";
  5391. fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  5392. }
  5393. finally {
  5394. document.body.removeChild(div);
  5395. }
  5396. var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
  5397. Control._FontHeightSizes[font] = result;
  5398. return result;
  5399. };
  5400. /** @hidden */
  5401. Control.drawEllipse = function (x, y, width, height, context) {
  5402. context.translate(x, y);
  5403. context.scale(width, height);
  5404. context.beginPath();
  5405. context.arc(0, 0, 1, 0, 2 * Math.PI);
  5406. context.closePath();
  5407. context.scale(1 / width, 1 / height);
  5408. context.translate(-x, -y);
  5409. };
  5410. /**
  5411. * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
  5412. */
  5413. Control.AllowAlphaInheritance = false;
  5414. Control._ClipMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  5415. // Statics
  5416. Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
  5417. Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
  5418. Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
  5419. Control._VERTICAL_ALIGNMENT_TOP = 0;
  5420. Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
  5421. Control._VERTICAL_ALIGNMENT_CENTER = 2;
  5422. Control._FontHeightSizes = {};
  5423. /**
  5424. * Creates a stack panel that can be used to render headers
  5425. * @param control defines the control to associate with the header
  5426. * @param text defines the text of the header
  5427. * @param size defines the size of the header
  5428. * @param options defines options used to configure the header
  5429. * @returns a new StackPanel
  5430. * @ignore
  5431. * @hidden
  5432. */
  5433. Control.AddHeader = function () { };
  5434. return Control;
  5435. }());
  5436. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Control"] = Control;
  5437. /***/ }),
  5438. /***/ "./2D/controls/displayGrid.ts":
  5439. /*!************************************!*\
  5440. !*** ./2D/controls/displayGrid.ts ***!
  5441. \************************************/
  5442. /*! exports provided: DisplayGrid */
  5443. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  5444. "use strict";
  5445. __webpack_require__.r(__webpack_exports__);
  5446. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return DisplayGrid; });
  5447. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  5448. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  5449. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  5450. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  5451. /** Class used to render a grid */
  5452. var DisplayGrid = /** @class */ (function (_super) {
  5453. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(DisplayGrid, _super);
  5454. /**
  5455. * Creates a new GridDisplayRectangle
  5456. * @param name defines the control name
  5457. */
  5458. function DisplayGrid(name) {
  5459. var _this = _super.call(this, name) || this;
  5460. _this.name = name;
  5461. _this._cellWidth = 20;
  5462. _this._cellHeight = 20;
  5463. _this._minorLineTickness = 1;
  5464. _this._minorLineColor = "DarkGray";
  5465. _this._majorLineTickness = 2;
  5466. _this._majorLineColor = "White";
  5467. _this._majorLineFrequency = 5;
  5468. _this._background = "Black";
  5469. _this._displayMajorLines = true;
  5470. _this._displayMinorLines = true;
  5471. return _this;
  5472. }
  5473. Object.defineProperty(DisplayGrid.prototype, "displayMinorLines", {
  5474. /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
  5475. get: function () {
  5476. return this._displayMinorLines;
  5477. },
  5478. set: function (value) {
  5479. if (this._displayMinorLines === value) {
  5480. return;
  5481. }
  5482. this._displayMinorLines = value;
  5483. this._markAsDirty();
  5484. },
  5485. enumerable: true,
  5486. configurable: true
  5487. });
  5488. Object.defineProperty(DisplayGrid.prototype, "displayMajorLines", {
  5489. /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
  5490. get: function () {
  5491. return this._displayMajorLines;
  5492. },
  5493. set: function (value) {
  5494. if (this._displayMajorLines === value) {
  5495. return;
  5496. }
  5497. this._displayMajorLines = value;
  5498. this._markAsDirty();
  5499. },
  5500. enumerable: true,
  5501. configurable: true
  5502. });
  5503. Object.defineProperty(DisplayGrid.prototype, "background", {
  5504. /** Gets or sets background color (Black by default) */
  5505. get: function () {
  5506. return this._background;
  5507. },
  5508. set: function (value) {
  5509. if (this._background === value) {
  5510. return;
  5511. }
  5512. this._background = value;
  5513. this._markAsDirty();
  5514. },
  5515. enumerable: true,
  5516. configurable: true
  5517. });
  5518. Object.defineProperty(DisplayGrid.prototype, "cellWidth", {
  5519. /** Gets or sets the width of each cell (20 by default) */
  5520. get: function () {
  5521. return this._cellWidth;
  5522. },
  5523. set: function (value) {
  5524. this._cellWidth = value;
  5525. this._markAsDirty();
  5526. },
  5527. enumerable: true,
  5528. configurable: true
  5529. });
  5530. Object.defineProperty(DisplayGrid.prototype, "cellHeight", {
  5531. /** Gets or sets the height of each cell (20 by default) */
  5532. get: function () {
  5533. return this._cellHeight;
  5534. },
  5535. set: function (value) {
  5536. this._cellHeight = value;
  5537. this._markAsDirty();
  5538. },
  5539. enumerable: true,
  5540. configurable: true
  5541. });
  5542. Object.defineProperty(DisplayGrid.prototype, "minorLineTickness", {
  5543. /** Gets or sets the tickness of minor lines (1 by default) */
  5544. get: function () {
  5545. return this._minorLineTickness;
  5546. },
  5547. set: function (value) {
  5548. this._minorLineTickness = value;
  5549. this._markAsDirty();
  5550. },
  5551. enumerable: true,
  5552. configurable: true
  5553. });
  5554. Object.defineProperty(DisplayGrid.prototype, "minorLineColor", {
  5555. /** Gets or sets the color of minor lines (DarkGray by default) */
  5556. get: function () {
  5557. return this._minorLineColor;
  5558. },
  5559. set: function (value) {
  5560. this._minorLineColor = value;
  5561. this._markAsDirty();
  5562. },
  5563. enumerable: true,
  5564. configurable: true
  5565. });
  5566. Object.defineProperty(DisplayGrid.prototype, "majorLineTickness", {
  5567. /** Gets or sets the tickness of major lines (2 by default) */
  5568. get: function () {
  5569. return this._majorLineTickness;
  5570. },
  5571. set: function (value) {
  5572. this._majorLineTickness = value;
  5573. this._markAsDirty();
  5574. },
  5575. enumerable: true,
  5576. configurable: true
  5577. });
  5578. Object.defineProperty(DisplayGrid.prototype, "majorLineColor", {
  5579. /** Gets or sets the color of major lines (White by default) */
  5580. get: function () {
  5581. return this._majorLineColor;
  5582. },
  5583. set: function (value) {
  5584. this._majorLineColor = value;
  5585. this._markAsDirty();
  5586. },
  5587. enumerable: true,
  5588. configurable: true
  5589. });
  5590. Object.defineProperty(DisplayGrid.prototype, "majorLineFrequency", {
  5591. /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/
  5592. get: function () {
  5593. return this._majorLineFrequency;
  5594. },
  5595. set: function (value) {
  5596. this._majorLineFrequency = value;
  5597. this._markAsDirty();
  5598. },
  5599. enumerable: true,
  5600. configurable: true
  5601. });
  5602. DisplayGrid.prototype._draw = function (context, invalidatedRectangle) {
  5603. context.save();
  5604. this._applyStates(context);
  5605. if (this._isEnabled) {
  5606. if (this._background) {
  5607. context.fillStyle = this._background;
  5608. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  5609. }
  5610. var cellCountX = this._currentMeasure.width / this._cellWidth;
  5611. var cellCountY = this._currentMeasure.height / this._cellHeight;
  5612. // Minor lines
  5613. var left = this._currentMeasure.left + this._currentMeasure.width / 2;
  5614. var top_1 = this._currentMeasure.top + this._currentMeasure.height / 2;
  5615. if (this._displayMinorLines) {
  5616. context.strokeStyle = this._minorLineColor;
  5617. context.lineWidth = this._minorLineTickness;
  5618. for (var x = -cellCountX / 2; x < cellCountX / 2; x++) {
  5619. var cellX = left + x * this.cellWidth;
  5620. context.beginPath();
  5621. context.moveTo(cellX, this._currentMeasure.top);
  5622. context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
  5623. context.stroke();
  5624. }
  5625. for (var y = -cellCountY / 2; y < cellCountY / 2; y++) {
  5626. var cellY = top_1 + y * this.cellHeight;
  5627. context.beginPath();
  5628. context.moveTo(this._currentMeasure.left, cellY);
  5629. context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
  5630. context.stroke();
  5631. }
  5632. }
  5633. // Major lines
  5634. if (this._displayMajorLines) {
  5635. context.strokeStyle = this._majorLineColor;
  5636. context.lineWidth = this._majorLineTickness;
  5637. for (var x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {
  5638. var cellX = left + x * this.cellWidth;
  5639. context.beginPath();
  5640. context.moveTo(cellX, this._currentMeasure.top);
  5641. context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
  5642. context.stroke();
  5643. }
  5644. for (var y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {
  5645. var cellY = top_1 + y * this.cellHeight;
  5646. context.moveTo(this._currentMeasure.left, cellY);
  5647. context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
  5648. context.closePath();
  5649. context.stroke();
  5650. }
  5651. }
  5652. }
  5653. context.restore();
  5654. };
  5655. DisplayGrid.prototype._getTypeName = function () {
  5656. return "DisplayGrid";
  5657. };
  5658. return DisplayGrid;
  5659. }(_control__WEBPACK_IMPORTED_MODULE_1__["Control"]));
  5660. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.DisplayGrid"] = DisplayGrid;
  5661. /***/ }),
  5662. /***/ "./2D/controls/ellipse.ts":
  5663. /*!********************************!*\
  5664. !*** ./2D/controls/ellipse.ts ***!
  5665. \********************************/
  5666. /*! exports provided: Ellipse */
  5667. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  5668. "use strict";
  5669. __webpack_require__.r(__webpack_exports__);
  5670. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return Ellipse; });
  5671. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  5672. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  5673. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  5674. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  5675. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__);
  5676. /** Class used to create 2D ellipse containers */
  5677. var Ellipse = /** @class */ (function (_super) {
  5678. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Ellipse, _super);
  5679. /**
  5680. * Creates a new Ellipse
  5681. * @param name defines the control name
  5682. */
  5683. function Ellipse(name) {
  5684. var _this = _super.call(this, name) || this;
  5685. _this.name = name;
  5686. _this._thickness = 1;
  5687. return _this;
  5688. }
  5689. Object.defineProperty(Ellipse.prototype, "thickness", {
  5690. /** Gets or sets border thickness */
  5691. get: function () {
  5692. return this._thickness;
  5693. },
  5694. set: function (value) {
  5695. if (this._thickness === value) {
  5696. return;
  5697. }
  5698. this._thickness = value;
  5699. this._markAsDirty();
  5700. },
  5701. enumerable: true,
  5702. configurable: true
  5703. });
  5704. Ellipse.prototype._getTypeName = function () {
  5705. return "Ellipse";
  5706. };
  5707. Ellipse.prototype._localDraw = function (context) {
  5708. context.save();
  5709. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  5710. context.shadowColor = this.shadowColor;
  5711. context.shadowBlur = this.shadowBlur;
  5712. context.shadowOffsetX = this.shadowOffsetX;
  5713. context.shadowOffsetY = this.shadowOffsetY;
  5714. }
  5715. _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);
  5716. if (this._background) {
  5717. context.fillStyle = this._background;
  5718. context.fill();
  5719. }
  5720. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  5721. context.shadowBlur = 0;
  5722. context.shadowOffsetX = 0;
  5723. context.shadowOffsetY = 0;
  5724. }
  5725. if (this._thickness) {
  5726. if (this.color) {
  5727. context.strokeStyle = this.color;
  5728. }
  5729. context.lineWidth = this._thickness;
  5730. context.stroke();
  5731. }
  5732. context.restore();
  5733. };
  5734. Ellipse.prototype._additionalProcessing = function (parentMeasure, context) {
  5735. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  5736. this._measureForChildren.width -= 2 * this._thickness;
  5737. this._measureForChildren.height -= 2 * this._thickness;
  5738. this._measureForChildren.left += this._thickness;
  5739. this._measureForChildren.top += this._thickness;
  5740. };
  5741. Ellipse.prototype._clipForChildren = function (context) {
  5742. _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);
  5743. context.clip();
  5744. };
  5745. return Ellipse;
  5746. }(_container__WEBPACK_IMPORTED_MODULE_1__["Container"]));
  5747. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Ellipse"] = Ellipse;
  5748. /***/ }),
  5749. /***/ "./2D/controls/grid.ts":
  5750. /*!*****************************!*\
  5751. !*** ./2D/controls/grid.ts ***!
  5752. \*****************************/
  5753. /*! exports provided: Grid */
  5754. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  5755. "use strict";
  5756. __webpack_require__.r(__webpack_exports__);
  5757. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return Grid; });
  5758. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  5759. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  5760. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  5761. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  5762. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  5763. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__);
  5764. /**
  5765. * Class used to create a 2D grid container
  5766. */
  5767. var Grid = /** @class */ (function (_super) {
  5768. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Grid, _super);
  5769. /**
  5770. * Creates a new Grid
  5771. * @param name defines control name
  5772. */
  5773. function Grid(name) {
  5774. var _this = _super.call(this, name) || this;
  5775. _this.name = name;
  5776. _this._rowDefinitions = new Array();
  5777. _this._columnDefinitions = new Array();
  5778. _this._cells = {};
  5779. _this._childControls = new Array();
  5780. return _this;
  5781. }
  5782. Object.defineProperty(Grid.prototype, "columnCount", {
  5783. /**
  5784. * Gets the number of columns
  5785. */
  5786. get: function () {
  5787. return this._columnDefinitions.length;
  5788. },
  5789. enumerable: true,
  5790. configurable: true
  5791. });
  5792. Object.defineProperty(Grid.prototype, "rowCount", {
  5793. /**
  5794. * Gets the number of rows
  5795. */
  5796. get: function () {
  5797. return this._rowDefinitions.length;
  5798. },
  5799. enumerable: true,
  5800. configurable: true
  5801. });
  5802. Object.defineProperty(Grid.prototype, "children", {
  5803. /** Gets the list of children */
  5804. get: function () {
  5805. return this._childControls;
  5806. },
  5807. enumerable: true,
  5808. configurable: true
  5809. });
  5810. Object.defineProperty(Grid.prototype, "cells", {
  5811. /** Gets the list of cells (e.g. the containers) */
  5812. get: function () {
  5813. return this._cells;
  5814. },
  5815. enumerable: true,
  5816. configurable: true
  5817. });
  5818. /**
  5819. * Gets the definition of a specific row
  5820. * @param index defines the index of the row
  5821. * @returns the row definition
  5822. */
  5823. Grid.prototype.getRowDefinition = function (index) {
  5824. if (index < 0 || index >= this._rowDefinitions.length) {
  5825. return null;
  5826. }
  5827. return this._rowDefinitions[index];
  5828. };
  5829. /**
  5830. * Gets the definition of a specific column
  5831. * @param index defines the index of the column
  5832. * @returns the column definition
  5833. */
  5834. Grid.prototype.getColumnDefinition = function (index) {
  5835. if (index < 0 || index >= this._columnDefinitions.length) {
  5836. return null;
  5837. }
  5838. return this._columnDefinitions[index];
  5839. };
  5840. /**
  5841. * Adds a new row to the grid
  5842. * @param height defines the height of the row (either in pixel or a value between 0 and 1)
  5843. * @param isPixel defines if the height is expressed in pixel (or in percentage)
  5844. * @returns the current grid
  5845. */
  5846. Grid.prototype.addRowDefinition = function (height, isPixel) {
  5847. if (isPixel === void 0) { isPixel = false; }
  5848. 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));
  5849. this._markAsDirty();
  5850. return this;
  5851. };
  5852. /**
  5853. * Adds a new column to the grid
  5854. * @param width defines the width of the column (either in pixel or a value between 0 and 1)
  5855. * @param isPixel defines if the width is expressed in pixel (or in percentage)
  5856. * @returns the current grid
  5857. */
  5858. Grid.prototype.addColumnDefinition = function (width, isPixel) {
  5859. if (isPixel === void 0) { isPixel = false; }
  5860. 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));
  5861. this._markAsDirty();
  5862. return this;
  5863. };
  5864. /**
  5865. * Update a row definition
  5866. * @param index defines the index of the row to update
  5867. * @param height defines the height of the row (either in pixel or a value between 0 and 1)
  5868. * @param isPixel defines if the weight is expressed in pixel (or in percentage)
  5869. * @returns the current grid
  5870. */
  5871. Grid.prototype.setRowDefinition = function (index, height, isPixel) {
  5872. if (isPixel === void 0) { isPixel = false; }
  5873. if (index < 0 || index >= this._rowDefinitions.length) {
  5874. return this;
  5875. }
  5876. var current = this._rowDefinitions[index];
  5877. if (current && current.isPixel === isPixel && current.internalValue === height) {
  5878. return this;
  5879. }
  5880. 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);
  5881. this._markAsDirty();
  5882. return this;
  5883. };
  5884. /**
  5885. * Update a column definition
  5886. * @param index defines the index of the column to update
  5887. * @param width defines the width of the column (either in pixel or a value between 0 and 1)
  5888. * @param isPixel defines if the width is expressed in pixel (or in percentage)
  5889. * @returns the current grid
  5890. */
  5891. Grid.prototype.setColumnDefinition = function (index, width, isPixel) {
  5892. if (isPixel === void 0) { isPixel = false; }
  5893. if (index < 0 || index >= this._columnDefinitions.length) {
  5894. return this;
  5895. }
  5896. var current = this._columnDefinitions[index];
  5897. if (current && current.isPixel === isPixel && current.internalValue === width) {
  5898. return this;
  5899. }
  5900. 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);
  5901. this._markAsDirty();
  5902. return this;
  5903. };
  5904. /**
  5905. * Gets the list of children stored in a specific cell
  5906. * @param row defines the row to check
  5907. * @param column defines the column to check
  5908. * @returns the list of controls
  5909. */
  5910. Grid.prototype.getChildrenAt = function (row, column) {
  5911. var cell = this._cells[row + ":" + column];
  5912. if (!cell) {
  5913. return null;
  5914. }
  5915. return cell.children;
  5916. };
  5917. /**
  5918. * Gets a string representing the child cell info (row x column)
  5919. * @param child defines the control to get info from
  5920. * @returns a string containing the child cell info (row x column)
  5921. */
  5922. Grid.prototype.getChildCellInfo = function (child) {
  5923. return child._tag;
  5924. };
  5925. Grid.prototype._removeCell = function (cell, key) {
  5926. if (!cell) {
  5927. return;
  5928. }
  5929. _super.prototype.removeControl.call(this, cell);
  5930. for (var _i = 0, _a = cell.children; _i < _a.length; _i++) {
  5931. var control = _a[_i];
  5932. var childIndex = this._childControls.indexOf(control);
  5933. if (childIndex !== -1) {
  5934. this._childControls.splice(childIndex, 1);
  5935. }
  5936. }
  5937. delete this._cells[key];
  5938. };
  5939. Grid.prototype._offsetCell = function (previousKey, key) {
  5940. if (!this._cells[key]) {
  5941. return;
  5942. }
  5943. this._cells[previousKey] = this._cells[key];
  5944. for (var _i = 0, _a = this._cells[previousKey].children; _i < _a.length; _i++) {
  5945. var control = _a[_i];
  5946. control._tag = previousKey;
  5947. }
  5948. delete this._cells[key];
  5949. };
  5950. /**
  5951. * Remove a column definition at specified index
  5952. * @param index defines the index of the column to remove
  5953. * @returns the current grid
  5954. */
  5955. Grid.prototype.removeColumnDefinition = function (index) {
  5956. if (index < 0 || index >= this._columnDefinitions.length) {
  5957. return this;
  5958. }
  5959. for (var x = 0; x < this._rowDefinitions.length; x++) {
  5960. var key = x + ":" + index;
  5961. var cell = this._cells[key];
  5962. this._removeCell(cell, key);
  5963. }
  5964. for (var x = 0; x < this._rowDefinitions.length; x++) {
  5965. for (var y = index + 1; y < this._columnDefinitions.length; y++) {
  5966. var previousKey = x + ":" + (y - 1);
  5967. var key = x + ":" + y;
  5968. this._offsetCell(previousKey, key);
  5969. }
  5970. }
  5971. this._columnDefinitions.splice(index, 1);
  5972. this._markAsDirty();
  5973. return this;
  5974. };
  5975. /**
  5976. * Remove a row definition at specified index
  5977. * @param index defines the index of the row to remove
  5978. * @returns the current grid
  5979. */
  5980. Grid.prototype.removeRowDefinition = function (index) {
  5981. if (index < 0 || index >= this._rowDefinitions.length) {
  5982. return this;
  5983. }
  5984. for (var y = 0; y < this._columnDefinitions.length; y++) {
  5985. var key = index + ":" + y;
  5986. var cell = this._cells[key];
  5987. this._removeCell(cell, key);
  5988. }
  5989. for (var y = 0; y < this._columnDefinitions.length; y++) {
  5990. for (var x = index + 1; x < this._rowDefinitions.length; x++) {
  5991. var previousKey = x - 1 + ":" + y;
  5992. var key = x + ":" + y;
  5993. this._offsetCell(previousKey, key);
  5994. }
  5995. }
  5996. this._rowDefinitions.splice(index, 1);
  5997. this._markAsDirty();
  5998. return this;
  5999. };
  6000. /**
  6001. * Adds a new control to the current grid
  6002. * @param control defines the control to add
  6003. * @param row defines the row where to add the control (0 by default)
  6004. * @param column defines the column where to add the control (0 by default)
  6005. * @returns the current grid
  6006. */
  6007. Grid.prototype.addControl = function (control, row, column) {
  6008. if (row === void 0) { row = 0; }
  6009. if (column === void 0) { column = 0; }
  6010. if (this._rowDefinitions.length === 0) {
  6011. // Add default row definition
  6012. this.addRowDefinition(1, false);
  6013. }
  6014. if (this._columnDefinitions.length === 0) {
  6015. // Add default column definition
  6016. this.addColumnDefinition(1, false);
  6017. }
  6018. if (this._childControls.indexOf(control) !== -1) {
  6019. 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");
  6020. return this;
  6021. }
  6022. var x = Math.min(row, this._rowDefinitions.length - 1);
  6023. var y = Math.min(column, this._columnDefinitions.length - 1);
  6024. var key = x + ":" + y;
  6025. var goodContainer = this._cells[key];
  6026. if (!goodContainer) {
  6027. goodContainer = new _container__WEBPACK_IMPORTED_MODULE_1__["Container"](key);
  6028. this._cells[key] = goodContainer;
  6029. goodContainer.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  6030. goodContainer.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  6031. _super.prototype.addControl.call(this, goodContainer);
  6032. }
  6033. goodContainer.addControl(control);
  6034. this._childControls.push(control);
  6035. control._tag = key;
  6036. control.parent = this;
  6037. this._markAsDirty();
  6038. return this;
  6039. };
  6040. /**
  6041. * Removes a control from the current container
  6042. * @param control defines the control to remove
  6043. * @returns the current container
  6044. */
  6045. Grid.prototype.removeControl = function (control) {
  6046. var index = this._childControls.indexOf(control);
  6047. if (index !== -1) {
  6048. this._childControls.splice(index, 1);
  6049. }
  6050. var cell = this._cells[control._tag];
  6051. if (cell) {
  6052. cell.removeControl(control);
  6053. control._tag = null;
  6054. }
  6055. this._markAsDirty();
  6056. return this;
  6057. };
  6058. Grid.prototype._getTypeName = function () {
  6059. return "Grid";
  6060. };
  6061. Grid.prototype._getGridDefinitions = function (definitionCallback) {
  6062. var widths = [];
  6063. var heights = [];
  6064. var lefts = [];
  6065. var tops = [];
  6066. var availableWidth = this._currentMeasure.width;
  6067. var globalWidthPercentage = 0;
  6068. var availableHeight = this._currentMeasure.height;
  6069. var globalHeightPercentage = 0;
  6070. // Heights
  6071. var index = 0;
  6072. for (var _i = 0, _a = this._rowDefinitions; _i < _a.length; _i++) {
  6073. var value = _a[_i];
  6074. if (value.isPixel) {
  6075. var height = value.getValue(this._host);
  6076. availableHeight -= height;
  6077. heights[index] = height;
  6078. }
  6079. else {
  6080. globalHeightPercentage += value.internalValue;
  6081. }
  6082. index++;
  6083. }
  6084. var top = 0;
  6085. index = 0;
  6086. for (var _b = 0, _c = this._rowDefinitions; _b < _c.length; _b++) {
  6087. var value = _c[_b];
  6088. tops.push(top);
  6089. if (!value.isPixel) {
  6090. var height = (value.internalValue / globalHeightPercentage) * availableHeight;
  6091. top += height;
  6092. heights[index] = height;
  6093. }
  6094. else {
  6095. top += value.getValue(this._host);
  6096. }
  6097. index++;
  6098. }
  6099. // Widths
  6100. index = 0;
  6101. for (var _d = 0, _e = this._columnDefinitions; _d < _e.length; _d++) {
  6102. var value = _e[_d];
  6103. if (value.isPixel) {
  6104. var width = value.getValue(this._host);
  6105. availableWidth -= width;
  6106. widths[index] = width;
  6107. }
  6108. else {
  6109. globalWidthPercentage += value.internalValue;
  6110. }
  6111. index++;
  6112. }
  6113. var left = 0;
  6114. index = 0;
  6115. for (var _f = 0, _g = this._columnDefinitions; _f < _g.length; _f++) {
  6116. var value = _g[_f];
  6117. lefts.push(left);
  6118. if (!value.isPixel) {
  6119. var width = (value.internalValue / globalWidthPercentage) * availableWidth;
  6120. left += width;
  6121. widths[index] = width;
  6122. }
  6123. else {
  6124. left += value.getValue(this._host);
  6125. }
  6126. index++;
  6127. }
  6128. definitionCallback(lefts, tops, widths, heights);
  6129. };
  6130. Grid.prototype._additionalProcessing = function (parentMeasure, context) {
  6131. var _this = this;
  6132. this._getGridDefinitions(function (lefts, tops, widths, heights) {
  6133. // Setting child sizes
  6134. for (var key in _this._cells) {
  6135. if (!_this._cells.hasOwnProperty(key)) {
  6136. continue;
  6137. }
  6138. var split = key.split(":");
  6139. var x = parseInt(split[0]);
  6140. var y = parseInt(split[1]);
  6141. var cell = _this._cells[key];
  6142. cell.left = lefts[y] + "px";
  6143. cell.top = tops[x] + "px";
  6144. cell.width = widths[y] + "px";
  6145. cell.height = heights[x] + "px";
  6146. cell._left.ignoreAdaptiveScaling = true;
  6147. cell._top.ignoreAdaptiveScaling = true;
  6148. cell._width.ignoreAdaptiveScaling = true;
  6149. cell._height.ignoreAdaptiveScaling = true;
  6150. }
  6151. });
  6152. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  6153. };
  6154. Grid.prototype._flagDescendantsAsMatrixDirty = function () {
  6155. for (var key in this._cells) {
  6156. if (!this._cells.hasOwnProperty(key)) {
  6157. continue;
  6158. }
  6159. var child = this._cells[key];
  6160. child._markMatrixAsDirty();
  6161. }
  6162. };
  6163. Grid.prototype._renderHighlightSpecific = function (context) {
  6164. var _this = this;
  6165. _super.prototype._renderHighlightSpecific.call(this, context);
  6166. this._getGridDefinitions(function (lefts, tops, widths, heights) {
  6167. // Columns
  6168. for (var index = 0; index < lefts.length; index++) {
  6169. var left = _this._currentMeasure.left + lefts[index] + widths[index];
  6170. context.beginPath();
  6171. context.moveTo(left, _this._currentMeasure.top);
  6172. context.lineTo(left, _this._currentMeasure.top + _this._currentMeasure.height);
  6173. context.stroke();
  6174. }
  6175. // Rows
  6176. for (var index = 0; index < tops.length; index++) {
  6177. var top_1 = _this._currentMeasure.top + tops[index] + heights[index];
  6178. context.beginPath();
  6179. context.moveTo(_this._currentMeasure.left, top_1);
  6180. context.lineTo(_this._currentMeasure.left + _this._currentMeasure.width, top_1);
  6181. context.stroke();
  6182. }
  6183. });
  6184. context.restore();
  6185. };
  6186. /** Releases associated resources */
  6187. Grid.prototype.dispose = function () {
  6188. _super.prototype.dispose.call(this);
  6189. for (var _i = 0, _a = this._childControls; _i < _a.length; _i++) {
  6190. var control = _a[_i];
  6191. control.dispose();
  6192. }
  6193. this._childControls = [];
  6194. };
  6195. return Grid;
  6196. }(_container__WEBPACK_IMPORTED_MODULE_1__["Container"]));
  6197. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Grid"] = Grid;
  6198. /***/ }),
  6199. /***/ "./2D/controls/image.ts":
  6200. /*!******************************!*\
  6201. !*** ./2D/controls/image.ts ***!
  6202. \******************************/
  6203. /*! exports provided: Image */
  6204. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  6205. "use strict";
  6206. __webpack_require__.r(__webpack_exports__);
  6207. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return Image; });
  6208. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  6209. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  6210. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  6211. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  6212. /**
  6213. * Class used to create 2D images
  6214. */
  6215. var Image = /** @class */ (function (_super) {
  6216. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Image, _super);
  6217. /**
  6218. * Creates a new Image
  6219. * @param name defines the control name
  6220. * @param url defines the image url
  6221. */
  6222. function Image(name, url) {
  6223. if (url === void 0) { url = null; }
  6224. var _this = _super.call(this, name) || this;
  6225. _this.name = name;
  6226. _this._workingCanvas = null;
  6227. _this._loaded = false;
  6228. _this._stretch = Image.STRETCH_FILL;
  6229. _this._autoScale = false;
  6230. _this._sourceLeft = 0;
  6231. _this._sourceTop = 0;
  6232. _this._sourceWidth = 0;
  6233. _this._sourceHeight = 0;
  6234. _this._svgAttributesComputationCompleted = false;
  6235. _this._isSVG = false;
  6236. _this._cellWidth = 0;
  6237. _this._cellHeight = 0;
  6238. _this._cellId = -1;
  6239. _this._populateNinePatchSlicesFromImage = false;
  6240. /**
  6241. * Observable notified when the content is loaded
  6242. */
  6243. _this.onImageLoadedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  6244. /**
  6245. * Observable notified when _sourceLeft, _sourceTop, _sourceWidth and _sourceHeight are computed
  6246. */
  6247. _this.onSVGAttributesComputedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  6248. _this.source = url;
  6249. return _this;
  6250. }
  6251. Object.defineProperty(Image.prototype, "isLoaded", {
  6252. /**
  6253. * Gets a boolean indicating that the content is loaded
  6254. */
  6255. get: function () {
  6256. return this._loaded;
  6257. },
  6258. enumerable: true,
  6259. configurable: true
  6260. });
  6261. Object.defineProperty(Image.prototype, "populateNinePatchSlicesFromImage", {
  6262. /**
  6263. * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
  6264. */
  6265. get: function () {
  6266. return this._populateNinePatchSlicesFromImage;
  6267. },
  6268. set: function (value) {
  6269. if (this._populateNinePatchSlicesFromImage === value) {
  6270. return;
  6271. }
  6272. this._populateNinePatchSlicesFromImage = value;
  6273. if (this._populateNinePatchSlicesFromImage && this._loaded) {
  6274. this._extractNinePatchSliceDataFromImage();
  6275. }
  6276. },
  6277. enumerable: true,
  6278. configurable: true
  6279. });
  6280. Object.defineProperty(Image.prototype, "detectPointerOnOpaqueOnly", {
  6281. /**
  6282. * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
  6283. * Beware using this as this will comsume more memory as the image has to be stored twice
  6284. */
  6285. get: function () {
  6286. return this._detectPointerOnOpaqueOnly;
  6287. },
  6288. set: function (value) {
  6289. if (this._detectPointerOnOpaqueOnly === value) {
  6290. return;
  6291. }
  6292. this._detectPointerOnOpaqueOnly = value;
  6293. },
  6294. enumerable: true,
  6295. configurable: true
  6296. });
  6297. Object.defineProperty(Image.prototype, "sliceLeft", {
  6298. /**
  6299. * Gets or sets the left value for slicing (9-patch)
  6300. */
  6301. get: function () {
  6302. return this._sliceLeft;
  6303. },
  6304. set: function (value) {
  6305. if (this._sliceLeft === value) {
  6306. return;
  6307. }
  6308. this._sliceLeft = value;
  6309. this._markAsDirty();
  6310. },
  6311. enumerable: true,
  6312. configurable: true
  6313. });
  6314. Object.defineProperty(Image.prototype, "sliceRight", {
  6315. /**
  6316. * Gets or sets the right value for slicing (9-patch)
  6317. */
  6318. get: function () {
  6319. return this._sliceRight;
  6320. },
  6321. set: function (value) {
  6322. if (this._sliceRight === value) {
  6323. return;
  6324. }
  6325. this._sliceRight = value;
  6326. this._markAsDirty();
  6327. },
  6328. enumerable: true,
  6329. configurable: true
  6330. });
  6331. Object.defineProperty(Image.prototype, "sliceTop", {
  6332. /**
  6333. * Gets or sets the top value for slicing (9-patch)
  6334. */
  6335. get: function () {
  6336. return this._sliceTop;
  6337. },
  6338. set: function (value) {
  6339. if (this._sliceTop === value) {
  6340. return;
  6341. }
  6342. this._sliceTop = value;
  6343. this._markAsDirty();
  6344. },
  6345. enumerable: true,
  6346. configurable: true
  6347. });
  6348. Object.defineProperty(Image.prototype, "sliceBottom", {
  6349. /**
  6350. * Gets or sets the bottom value for slicing (9-patch)
  6351. */
  6352. get: function () {
  6353. return this._sliceBottom;
  6354. },
  6355. set: function (value) {
  6356. if (this._sliceBottom === value) {
  6357. return;
  6358. }
  6359. this._sliceBottom = value;
  6360. this._markAsDirty();
  6361. },
  6362. enumerable: true,
  6363. configurable: true
  6364. });
  6365. Object.defineProperty(Image.prototype, "sourceLeft", {
  6366. /**
  6367. * Gets or sets the left coordinate in the source image
  6368. */
  6369. get: function () {
  6370. return this._sourceLeft;
  6371. },
  6372. set: function (value) {
  6373. if (this._sourceLeft === value) {
  6374. return;
  6375. }
  6376. this._sourceLeft = value;
  6377. this._markAsDirty();
  6378. },
  6379. enumerable: true,
  6380. configurable: true
  6381. });
  6382. Object.defineProperty(Image.prototype, "sourceTop", {
  6383. /**
  6384. * Gets or sets the top coordinate in the source image
  6385. */
  6386. get: function () {
  6387. return this._sourceTop;
  6388. },
  6389. set: function (value) {
  6390. if (this._sourceTop === value) {
  6391. return;
  6392. }
  6393. this._sourceTop = value;
  6394. this._markAsDirty();
  6395. },
  6396. enumerable: true,
  6397. configurable: true
  6398. });
  6399. Object.defineProperty(Image.prototype, "sourceWidth", {
  6400. /**
  6401. * Gets or sets the width to capture in the source image
  6402. */
  6403. get: function () {
  6404. return this._sourceWidth;
  6405. },
  6406. set: function (value) {
  6407. if (this._sourceWidth === value) {
  6408. return;
  6409. }
  6410. this._sourceWidth = value;
  6411. this._markAsDirty();
  6412. },
  6413. enumerable: true,
  6414. configurable: true
  6415. });
  6416. Object.defineProperty(Image.prototype, "sourceHeight", {
  6417. /**
  6418. * Gets or sets the height to capture in the source image
  6419. */
  6420. get: function () {
  6421. return this._sourceHeight;
  6422. },
  6423. set: function (value) {
  6424. if (this._sourceHeight === value) {
  6425. return;
  6426. }
  6427. this._sourceHeight = value;
  6428. this._markAsDirty();
  6429. },
  6430. enumerable: true,
  6431. configurable: true
  6432. });
  6433. Object.defineProperty(Image.prototype, "isSVG", {
  6434. /** Indicates if the format of the image is SVG */
  6435. get: function () {
  6436. return this._isSVG;
  6437. },
  6438. enumerable: true,
  6439. configurable: true
  6440. });
  6441. Object.defineProperty(Image.prototype, "svgAttributesComputationCompleted", {
  6442. /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
  6443. get: function () {
  6444. return this._svgAttributesComputationCompleted;
  6445. },
  6446. enumerable: true,
  6447. configurable: true
  6448. });
  6449. Object.defineProperty(Image.prototype, "autoScale", {
  6450. /**
  6451. * Gets or sets a boolean indicating if the image can force its container to adapt its size
  6452. * @see http://doc.babylonjs.com/how_to/gui#image
  6453. */
  6454. get: function () {
  6455. return this._autoScale;
  6456. },
  6457. set: function (value) {
  6458. if (this._autoScale === value) {
  6459. return;
  6460. }
  6461. this._autoScale = value;
  6462. if (value && this._loaded) {
  6463. this.synchronizeSizeWithContent();
  6464. }
  6465. },
  6466. enumerable: true,
  6467. configurable: true
  6468. });
  6469. Object.defineProperty(Image.prototype, "stretch", {
  6470. /** Gets or sets the streching mode used by the image */
  6471. get: function () {
  6472. return this._stretch;
  6473. },
  6474. set: function (value) {
  6475. if (this._stretch === value) {
  6476. return;
  6477. }
  6478. this._stretch = value;
  6479. this._markAsDirty();
  6480. },
  6481. enumerable: true,
  6482. configurable: true
  6483. });
  6484. /** @hidden */
  6485. Image.prototype._rotate90 = function (n, preserveProperties) {
  6486. if (preserveProperties === void 0) { preserveProperties = false; }
  6487. var canvas = document.createElement('canvas');
  6488. var context = canvas.getContext('2d');
  6489. var width = this._domImage.width;
  6490. var height = this._domImage.height;
  6491. canvas.width = height;
  6492. canvas.height = width;
  6493. context.translate(canvas.width / 2, canvas.height / 2);
  6494. context.rotate(n * Math.PI / 2);
  6495. context.drawImage(this._domImage, 0, 0, width, height, -width / 2, -height / 2, width, height);
  6496. var dataUrl = canvas.toDataURL("image/jpg");
  6497. var rotatedImage = new Image(this.name + "rotated", dataUrl);
  6498. if (preserveProperties) {
  6499. rotatedImage._stretch = this._stretch;
  6500. rotatedImage._autoScale = this._autoScale;
  6501. rotatedImage._cellId = this._cellId;
  6502. rotatedImage._cellWidth = n % 1 ? this._cellHeight : this._cellWidth;
  6503. rotatedImage._cellHeight = n % 1 ? this._cellWidth : this._cellHeight;
  6504. }
  6505. this._handleRotationForSVGImage(this, rotatedImage, n);
  6506. return rotatedImage;
  6507. };
  6508. Image.prototype._handleRotationForSVGImage = function (srcImage, dstImage, n) {
  6509. var _this = this;
  6510. if (!srcImage._isSVG) {
  6511. return;
  6512. }
  6513. if (srcImage._svgAttributesComputationCompleted) {
  6514. this._rotate90SourceProperties(srcImage, dstImage, n);
  6515. this._markAsDirty();
  6516. }
  6517. else {
  6518. srcImage.onSVGAttributesComputedObservable.addOnce(function () {
  6519. _this._rotate90SourceProperties(srcImage, dstImage, n);
  6520. _this._markAsDirty();
  6521. });
  6522. }
  6523. };
  6524. Image.prototype._rotate90SourceProperties = function (srcImage, dstImage, n) {
  6525. var _a, _b;
  6526. var srcLeft = srcImage.sourceLeft, srcTop = srcImage.sourceTop, srcWidth = srcImage.domImage.width, srcHeight = srcImage.domImage.height;
  6527. var dstLeft = srcLeft, dstTop = srcTop, dstWidth = srcImage.sourceWidth, dstHeight = srcImage.sourceHeight;
  6528. if (n != 0) {
  6529. var mult = n < 0 ? -1 : 1;
  6530. n = n % 4;
  6531. for (var i = 0; i < Math.abs(n); ++i) {
  6532. dstLeft = -(srcTop - srcHeight / 2) * mult + srcHeight / 2;
  6533. dstTop = (srcLeft - srcWidth / 2) * mult + srcWidth / 2;
  6534. _a = [dstHeight, dstWidth], dstWidth = _a[0], dstHeight = _a[1];
  6535. if (n < 0) {
  6536. dstTop -= dstHeight;
  6537. }
  6538. else {
  6539. dstLeft -= dstWidth;
  6540. }
  6541. srcLeft = dstLeft;
  6542. srcTop = dstTop;
  6543. _b = [srcHeight, srcWidth], srcWidth = _b[0], srcHeight = _b[1];
  6544. }
  6545. }
  6546. dstImage.sourceLeft = dstLeft;
  6547. dstImage.sourceTop = dstTop;
  6548. dstImage.sourceWidth = dstWidth;
  6549. dstImage.sourceHeight = dstHeight;
  6550. };
  6551. Object.defineProperty(Image.prototype, "domImage", {
  6552. get: function () {
  6553. return this._domImage;
  6554. },
  6555. /**
  6556. * Gets or sets the internal DOM image used to render the control
  6557. */
  6558. set: function (value) {
  6559. var _this = this;
  6560. this._domImage = value;
  6561. this._loaded = false;
  6562. if (this._domImage.width) {
  6563. this._onImageLoaded();
  6564. }
  6565. else {
  6566. this._domImage.onload = function () {
  6567. _this._onImageLoaded();
  6568. };
  6569. }
  6570. },
  6571. enumerable: true,
  6572. configurable: true
  6573. });
  6574. Image.prototype._onImageLoaded = function () {
  6575. this._imageWidth = this._domImage.width;
  6576. this._imageHeight = this._domImage.height;
  6577. this._loaded = true;
  6578. if (this._populateNinePatchSlicesFromImage) {
  6579. this._extractNinePatchSliceDataFromImage();
  6580. }
  6581. if (this._autoScale) {
  6582. this.synchronizeSizeWithContent();
  6583. }
  6584. this.onImageLoadedObservable.notifyObservers(this);
  6585. this._markAsDirty();
  6586. };
  6587. Image.prototype._extractNinePatchSliceDataFromImage = function () {
  6588. if (!this._workingCanvas) {
  6589. this._workingCanvas = document.createElement('canvas');
  6590. }
  6591. var canvas = this._workingCanvas;
  6592. var context = canvas.getContext('2d');
  6593. var width = this._domImage.width;
  6594. var height = this._domImage.height;
  6595. canvas.width = width;
  6596. canvas.height = height;
  6597. context.drawImage(this._domImage, 0, 0, width, height);
  6598. var imageData = context.getImageData(0, 0, width, height);
  6599. // Left and right
  6600. this._sliceLeft = -1;
  6601. this._sliceRight = -1;
  6602. for (var x = 0; x < width; x++) {
  6603. var alpha = imageData.data[x * 4 + 3];
  6604. if (alpha > 127 && this._sliceLeft === -1) {
  6605. this._sliceLeft = x;
  6606. continue;
  6607. }
  6608. if (alpha < 127 && this._sliceLeft > -1) {
  6609. this._sliceRight = x;
  6610. break;
  6611. }
  6612. }
  6613. // top and bottom
  6614. this._sliceTop = -1;
  6615. this._sliceBottom = -1;
  6616. for (var y = 0; y < height; y++) {
  6617. var alpha = imageData.data[y * width * 4 + 3];
  6618. if (alpha > 127 && this._sliceTop === -1) {
  6619. this._sliceTop = y;
  6620. continue;
  6621. }
  6622. if (alpha < 127 && this._sliceTop > -1) {
  6623. this._sliceBottom = y;
  6624. break;
  6625. }
  6626. }
  6627. };
  6628. Object.defineProperty(Image.prototype, "source", {
  6629. /**
  6630. * Gets or sets image source url
  6631. */
  6632. set: function (value) {
  6633. var _this = this;
  6634. if (this._source === value) {
  6635. return;
  6636. }
  6637. this._loaded = false;
  6638. this._source = value;
  6639. if (value) {
  6640. value = this._svgCheck(value);
  6641. }
  6642. this._domImage = document.createElement("img");
  6643. this._domImage.onload = function () {
  6644. _this._onImageLoaded();
  6645. };
  6646. if (value) {
  6647. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetCorsBehavior(value, this._domImage);
  6648. this._domImage.src = value;
  6649. }
  6650. },
  6651. enumerable: true,
  6652. configurable: true
  6653. });
  6654. /**
  6655. * Checks for svg document with icon id present
  6656. */
  6657. Image.prototype._svgCheck = function (value) {
  6658. var _this = this;
  6659. if (window.SVGSVGElement && (value.search(/.svg#/gi) !== -1) && (value.indexOf("#") === value.lastIndexOf("#"))) {
  6660. this._isSVG = true;
  6661. var svgsrc = value.split('#')[0];
  6662. var elemid = value.split('#')[1];
  6663. // check if object alr exist in document
  6664. var svgExist = document.body.querySelector('object[data="' + svgsrc + '"]');
  6665. if (svgExist) {
  6666. var svgDoc = svgExist.contentDocument;
  6667. // get viewbox width and height, get svg document width and height in px
  6668. if (svgDoc && svgDoc.documentElement) {
  6669. var vb = svgDoc.documentElement.getAttribute("viewBox");
  6670. var docwidth = Number(svgDoc.documentElement.getAttribute("width"));
  6671. var docheight = Number(svgDoc.documentElement.getAttribute("height"));
  6672. var elem = svgDoc.getElementById(elemid);
  6673. if (elem && vb && docwidth && docheight) {
  6674. this._getSVGAttribs(svgExist, elemid);
  6675. return value;
  6676. }
  6677. }
  6678. // wait for object to load
  6679. svgExist.addEventListener("load", function () {
  6680. _this._getSVGAttribs(svgExist, elemid);
  6681. });
  6682. }
  6683. else {
  6684. // create document object
  6685. var svgImage = document.createElement("object");
  6686. svgImage.data = svgsrc;
  6687. svgImage.type = "image/svg+xml";
  6688. svgImage.width = "0%";
  6689. svgImage.height = "0%";
  6690. document.body.appendChild(svgImage);
  6691. // when the object has loaded, get the element attribs
  6692. svgImage.onload = function () {
  6693. var svgobj = document.body.querySelector('object[data="' + svgsrc + '"]');
  6694. if (svgobj) {
  6695. _this._getSVGAttribs(svgobj, elemid);
  6696. }
  6697. };
  6698. }
  6699. return svgsrc;
  6700. }
  6701. else {
  6702. return value;
  6703. }
  6704. };
  6705. /**
  6706. * Sets sourceLeft, sourceTop, sourceWidth, sourceHeight automatically
  6707. * given external svg file and icon id
  6708. */
  6709. Image.prototype._getSVGAttribs = function (svgsrc, elemid) {
  6710. var svgDoc = svgsrc.contentDocument;
  6711. // get viewbox width and height, get svg document width and height in px
  6712. if (svgDoc && svgDoc.documentElement) {
  6713. var vb = svgDoc.documentElement.getAttribute("viewBox");
  6714. var docwidth = Number(svgDoc.documentElement.getAttribute("width"));
  6715. var docheight = Number(svgDoc.documentElement.getAttribute("height"));
  6716. // get element bbox and matrix transform
  6717. var elem = svgDoc.getElementById(elemid);
  6718. if (vb && docwidth && docheight && elem) {
  6719. var vb_width = Number(vb.split(" ")[2]);
  6720. var vb_height = Number(vb.split(" ")[3]);
  6721. var elem_bbox = elem.getBBox();
  6722. var elem_matrix_a = 1;
  6723. var elem_matrix_d = 1;
  6724. var elem_matrix_e = 0;
  6725. var elem_matrix_f = 0;
  6726. if (elem.transform && elem.transform.baseVal.consolidate()) {
  6727. elem_matrix_a = elem.transform.baseVal.consolidate().matrix.a;
  6728. elem_matrix_d = elem.transform.baseVal.consolidate().matrix.d;
  6729. elem_matrix_e = elem.transform.baseVal.consolidate().matrix.e;
  6730. elem_matrix_f = elem.transform.baseVal.consolidate().matrix.f;
  6731. }
  6732. // compute source coordinates and dimensions
  6733. this.sourceLeft = ((elem_matrix_a * elem_bbox.x + elem_matrix_e) * docwidth) / vb_width;
  6734. this.sourceTop = ((elem_matrix_d * elem_bbox.y + elem_matrix_f) * docheight) / vb_height;
  6735. this.sourceWidth = (elem_bbox.width * elem_matrix_a) * (docwidth / vb_width);
  6736. this.sourceHeight = (elem_bbox.height * elem_matrix_d) * (docheight / vb_height);
  6737. this._svgAttributesComputationCompleted = true;
  6738. this.onSVGAttributesComputedObservable.notifyObservers(this);
  6739. }
  6740. }
  6741. };
  6742. Object.defineProperty(Image.prototype, "cellWidth", {
  6743. /**
  6744. * Gets or sets the cell width to use when animation sheet is enabled
  6745. * @see http://doc.babylonjs.com/how_to/gui#image
  6746. */
  6747. get: function () {
  6748. return this._cellWidth;
  6749. },
  6750. set: function (value) {
  6751. if (this._cellWidth === value) {
  6752. return;
  6753. }
  6754. this._cellWidth = value;
  6755. this._markAsDirty();
  6756. },
  6757. enumerable: true,
  6758. configurable: true
  6759. });
  6760. Object.defineProperty(Image.prototype, "cellHeight", {
  6761. /**
  6762. * Gets or sets the cell height to use when animation sheet is enabled
  6763. * @see http://doc.babylonjs.com/how_to/gui#image
  6764. */
  6765. get: function () {
  6766. return this._cellHeight;
  6767. },
  6768. set: function (value) {
  6769. if (this._cellHeight === value) {
  6770. return;
  6771. }
  6772. this._cellHeight = value;
  6773. this._markAsDirty();
  6774. },
  6775. enumerable: true,
  6776. configurable: true
  6777. });
  6778. Object.defineProperty(Image.prototype, "cellId", {
  6779. /**
  6780. * Gets or sets the cell id to use (this will turn on the animation sheet mode)
  6781. * @see http://doc.babylonjs.com/how_to/gui#image
  6782. */
  6783. get: function () {
  6784. return this._cellId;
  6785. },
  6786. set: function (value) {
  6787. if (this._cellId === value) {
  6788. return;
  6789. }
  6790. this._cellId = value;
  6791. this._markAsDirty();
  6792. },
  6793. enumerable: true,
  6794. configurable: true
  6795. });
  6796. /**
  6797. * Tests if a given coordinates belong to the current control
  6798. * @param x defines x coordinate to test
  6799. * @param y defines y coordinate to test
  6800. * @returns true if the coordinates are inside the control
  6801. */
  6802. Image.prototype.contains = function (x, y) {
  6803. if (!_super.prototype.contains.call(this, x, y)) {
  6804. return false;
  6805. }
  6806. if (!this._detectPointerOnOpaqueOnly || !this._workingCanvas) {
  6807. return true;
  6808. }
  6809. var canvas = this._workingCanvas;
  6810. var context = canvas.getContext("2d");
  6811. var width = this._currentMeasure.width | 0;
  6812. var height = this._currentMeasure.height | 0;
  6813. var imageData = context.getImageData(0, 0, width, height).data;
  6814. x = (x - this._currentMeasure.left) | 0;
  6815. y = (y - this._currentMeasure.top) | 0;
  6816. var pickedPixel = imageData[(x + y * this._currentMeasure.width) * 4 + 3];
  6817. return pickedPixel > 0;
  6818. };
  6819. Image.prototype._getTypeName = function () {
  6820. return "Image";
  6821. };
  6822. /** Force the control to synchronize with its content */
  6823. Image.prototype.synchronizeSizeWithContent = function () {
  6824. if (!this._loaded) {
  6825. return;
  6826. }
  6827. this.width = this._domImage.width + "px";
  6828. this.height = this._domImage.height + "px";
  6829. };
  6830. Image.prototype._processMeasures = function (parentMeasure, context) {
  6831. if (this._loaded) {
  6832. switch (this._stretch) {
  6833. case Image.STRETCH_NONE:
  6834. break;
  6835. case Image.STRETCH_FILL:
  6836. break;
  6837. case Image.STRETCH_UNIFORM:
  6838. break;
  6839. case Image.STRETCH_NINE_PATCH:
  6840. break;
  6841. case Image.STRETCH_EXTEND:
  6842. if (this._autoScale) {
  6843. this.synchronizeSizeWithContent();
  6844. }
  6845. if (this.parent && this.parent.parent) { // Will update root size if root is not the top root
  6846. this.parent.adaptWidthToChildren = true;
  6847. this.parent.adaptHeightToChildren = true;
  6848. }
  6849. break;
  6850. }
  6851. }
  6852. _super.prototype._processMeasures.call(this, parentMeasure, context);
  6853. };
  6854. Image.prototype._prepareWorkingCanvasForOpaqueDetection = function () {
  6855. if (!this._detectPointerOnOpaqueOnly) {
  6856. return;
  6857. }
  6858. if (!this._workingCanvas) {
  6859. this._workingCanvas = document.createElement('canvas');
  6860. }
  6861. var canvas = this._workingCanvas;
  6862. var width = this._currentMeasure.width;
  6863. var height = this._currentMeasure.height;
  6864. var context = canvas.getContext("2d");
  6865. canvas.width = width;
  6866. canvas.height = height;
  6867. context.clearRect(0, 0, width, height);
  6868. };
  6869. Image.prototype._drawImage = function (context, sx, sy, sw, sh, tx, ty, tw, th) {
  6870. context.drawImage(this._domImage, sx, sy, sw, sh, tx, ty, tw, th);
  6871. if (!this._detectPointerOnOpaqueOnly) {
  6872. return;
  6873. }
  6874. var canvas = this._workingCanvas;
  6875. context = canvas.getContext("2d");
  6876. context.drawImage(this._domImage, sx, sy, sw, sh, tx - this._currentMeasure.left, ty - this._currentMeasure.top, tw, th);
  6877. };
  6878. Image.prototype._draw = function (context) {
  6879. context.save();
  6880. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  6881. context.shadowColor = this.shadowColor;
  6882. context.shadowBlur = this.shadowBlur;
  6883. context.shadowOffsetX = this.shadowOffsetX;
  6884. context.shadowOffsetY = this.shadowOffsetY;
  6885. }
  6886. var x, y, width, height;
  6887. if (this.cellId == -1) {
  6888. x = this._sourceLeft;
  6889. y = this._sourceTop;
  6890. width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
  6891. height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
  6892. }
  6893. else {
  6894. var rowCount = this._domImage.naturalWidth / this.cellWidth;
  6895. var column = (this.cellId / rowCount) >> 0;
  6896. var row = this.cellId % rowCount;
  6897. x = this.cellWidth * row;
  6898. y = this.cellHeight * column;
  6899. width = this.cellWidth;
  6900. height = this.cellHeight;
  6901. }
  6902. this._prepareWorkingCanvasForOpaqueDetection();
  6903. this._applyStates(context);
  6904. if (this._loaded) {
  6905. switch (this._stretch) {
  6906. case Image.STRETCH_NONE:
  6907. this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  6908. break;
  6909. case Image.STRETCH_FILL:
  6910. this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  6911. break;
  6912. case Image.STRETCH_UNIFORM:
  6913. var hRatio = this._currentMeasure.width / width;
  6914. var vRatio = this._currentMeasure.height / height;
  6915. var ratio = Math.min(hRatio, vRatio);
  6916. var centerX = (this._currentMeasure.width - width * ratio) / 2;
  6917. var centerY = (this._currentMeasure.height - height * ratio) / 2;
  6918. this._drawImage(context, x, y, width, height, this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
  6919. break;
  6920. case Image.STRETCH_EXTEND:
  6921. this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  6922. break;
  6923. case Image.STRETCH_NINE_PATCH:
  6924. this._renderNinePatch(context);
  6925. break;
  6926. }
  6927. }
  6928. context.restore();
  6929. };
  6930. Image.prototype._renderCornerPatch = function (context, x, y, width, height, targetX, targetY) {
  6931. this._drawImage(context, x, y, width, height, this._currentMeasure.left + targetX, this._currentMeasure.top + targetY, width, height);
  6932. };
  6933. Image.prototype._renderNinePatch = function (context) {
  6934. var height = this._imageHeight;
  6935. var leftWidth = this._sliceLeft;
  6936. var topHeight = this._sliceTop;
  6937. var bottomHeight = this._imageHeight - this._sliceBottom;
  6938. var rightWidth = this._imageWidth - this._sliceRight;
  6939. var left = 0;
  6940. var top = 0;
  6941. if (this._populateNinePatchSlicesFromImage) {
  6942. left = 1;
  6943. top = 1;
  6944. height -= 2;
  6945. leftWidth -= 1;
  6946. topHeight -= 1;
  6947. bottomHeight -= 1;
  6948. rightWidth -= 1;
  6949. }
  6950. var centerWidth = this._sliceRight - this._sliceLeft;
  6951. var targetCenterWidth = this._currentMeasure.width - rightWidth - this.sliceLeft;
  6952. var targetTopHeight = this._currentMeasure.height - height + this._sliceBottom;
  6953. // Corners
  6954. this._renderCornerPatch(context, left, top, leftWidth, topHeight, 0, 0);
  6955. this._renderCornerPatch(context, left, this._sliceBottom, leftWidth, height - this._sliceBottom, 0, targetTopHeight);
  6956. this._renderCornerPatch(context, this._sliceRight, top, rightWidth, topHeight, this._currentMeasure.width - rightWidth, 0);
  6957. this._renderCornerPatch(context, this._sliceRight, this._sliceBottom, rightWidth, height - this._sliceBottom, this._currentMeasure.width - rightWidth, targetTopHeight);
  6958. // Center
  6959. this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + leftWidth, this._currentMeasure.top + topHeight, targetCenterWidth, targetTopHeight - topHeight);
  6960. // Borders
  6961. this._drawImage(context, left, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
  6962. 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);
  6963. this._drawImage(context, this._sliceLeft, top, centerWidth, topHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top, targetCenterWidth, topHeight);
  6964. this._drawImage(context, this._sliceLeft, this._sliceBottom, centerWidth, bottomHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top + targetTopHeight, targetCenterWidth, bottomHeight);
  6965. };
  6966. Image.prototype.dispose = function () {
  6967. _super.prototype.dispose.call(this);
  6968. this.onImageLoadedObservable.clear();
  6969. this.onSVGAttributesComputedObservable.clear();
  6970. };
  6971. // Static
  6972. /** STRETCH_NONE */
  6973. Image.STRETCH_NONE = 0;
  6974. /** STRETCH_FILL */
  6975. Image.STRETCH_FILL = 1;
  6976. /** STRETCH_UNIFORM */
  6977. Image.STRETCH_UNIFORM = 2;
  6978. /** STRETCH_EXTEND */
  6979. Image.STRETCH_EXTEND = 3;
  6980. /** NINE_PATCH */
  6981. Image.STRETCH_NINE_PATCH = 4;
  6982. return Image;
  6983. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  6984. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Image"] = Image;
  6985. /***/ }),
  6986. /***/ "./2D/controls/index.ts":
  6987. /*!******************************!*\
  6988. !*** ./2D/controls/index.ts ***!
  6989. \******************************/
  6990. /*! exports provided: Button, Checkbox, ColorPicker, Container, Control, Ellipse, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name */
  6991. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  6992. "use strict";
  6993. __webpack_require__.r(__webpack_exports__);
  6994. /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
  6995. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _button__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  6996. /* harmony import */ var _checkbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./checkbox */ "./2D/controls/checkbox.ts");
  6997. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _checkbox__WEBPACK_IMPORTED_MODULE_1__["Checkbox"]; });
  6998. /* harmony import */ var _colorpicker__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./colorpicker */ "./2D/controls/colorpicker.ts");
  6999. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _colorpicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"]; });
  7000. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  7001. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _container__WEBPACK_IMPORTED_MODULE_3__["Container"]; });
  7002. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  7003. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _control__WEBPACK_IMPORTED_MODULE_4__["Control"]; });
  7004. /* harmony import */ var _ellipse__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ellipse */ "./2D/controls/ellipse.ts");
  7005. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _ellipse__WEBPACK_IMPORTED_MODULE_5__["Ellipse"]; });
  7006. /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./grid */ "./2D/controls/grid.ts");
  7007. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _grid__WEBPACK_IMPORTED_MODULE_6__["Grid"]; });
  7008. /* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./image */ "./2D/controls/image.ts");
  7009. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _image__WEBPACK_IMPORTED_MODULE_7__["Image"]; });
  7010. /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
  7011. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _inputText__WEBPACK_IMPORTED_MODULE_8__["InputText"]; });
  7012. /* harmony import */ var _inputPassword__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./inputPassword */ "./2D/controls/inputPassword.ts");
  7013. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _inputPassword__WEBPACK_IMPORTED_MODULE_9__["InputPassword"]; });
  7014. /* harmony import */ var _line__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./line */ "./2D/controls/line.ts");
  7015. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _line__WEBPACK_IMPORTED_MODULE_10__["Line"]; });
  7016. /* harmony import */ var _multiLine__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./multiLine */ "./2D/controls/multiLine.ts");
  7017. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _multiLine__WEBPACK_IMPORTED_MODULE_11__["MultiLine"]; });
  7018. /* harmony import */ var _radioButton__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./radioButton */ "./2D/controls/radioButton.ts");
  7019. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _radioButton__WEBPACK_IMPORTED_MODULE_12__["RadioButton"]; });
  7020. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  7021. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _stackPanel__WEBPACK_IMPORTED_MODULE_13__["StackPanel"]; });
  7022. /* harmony import */ var _selector__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./selector */ "./2D/controls/selector.ts");
  7023. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_14__["SelectorGroup"]; });
  7024. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_14__["CheckboxGroup"]; });
  7025. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_14__["RadioGroup"]; });
  7026. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _selector__WEBPACK_IMPORTED_MODULE_14__["SliderGroup"]; });
  7027. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _selector__WEBPACK_IMPORTED_MODULE_14__["SelectionPanel"]; });
  7028. /* harmony import */ var _scrollViewers_scrollViewer__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./scrollViewers/scrollViewer */ "./2D/controls/scrollViewers/scrollViewer.ts");
  7029. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _scrollViewers_scrollViewer__WEBPACK_IMPORTED_MODULE_15__["ScrollViewer"]; });
  7030. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  7031. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _textBlock__WEBPACK_IMPORTED_MODULE_16__["TextWrapping"]; });
  7032. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _textBlock__WEBPACK_IMPORTED_MODULE_16__["TextBlock"]; });
  7033. /* harmony import */ var _virtualKeyboard__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./virtualKeyboard */ "./2D/controls/virtualKeyboard.ts");
  7034. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _virtualKeyboard__WEBPACK_IMPORTED_MODULE_17__["KeyPropertySet"]; });
  7035. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _virtualKeyboard__WEBPACK_IMPORTED_MODULE_17__["VirtualKeyboard"]; });
  7036. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  7037. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _rectangle__WEBPACK_IMPORTED_MODULE_18__["Rectangle"]; });
  7038. /* harmony import */ var _displayGrid__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./displayGrid */ "./2D/controls/displayGrid.ts");
  7039. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _displayGrid__WEBPACK_IMPORTED_MODULE_19__["DisplayGrid"]; });
  7040. /* harmony import */ var _sliders_baseSlider__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./sliders/baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  7041. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _sliders_baseSlider__WEBPACK_IMPORTED_MODULE_20__["BaseSlider"]; });
  7042. /* harmony import */ var _sliders_slider__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./sliders/slider */ "./2D/controls/sliders/slider.ts");
  7043. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _sliders_slider__WEBPACK_IMPORTED_MODULE_21__["Slider"]; });
  7044. /* harmony import */ var _sliders_imageBasedSlider__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./sliders/imageBasedSlider */ "./2D/controls/sliders/imageBasedSlider.ts");
  7045. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _sliders_imageBasedSlider__WEBPACK_IMPORTED_MODULE_22__["ImageBasedSlider"]; });
  7046. /* harmony import */ var _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./sliders/scrollBar */ "./2D/controls/sliders/scrollBar.ts");
  7047. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_23__["ScrollBar"]; });
  7048. /* harmony import */ var _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./sliders/imageScrollBar */ "./2D/controls/sliders/imageScrollBar.ts");
  7049. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_24__["ImageScrollBar"]; });
  7050. /* harmony import */ var _statics__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./statics */ "./2D/controls/statics.ts");
  7051. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _statics__WEBPACK_IMPORTED_MODULE_25__["name"]; });
  7052. /***/ }),
  7053. /***/ "./2D/controls/inputPassword.ts":
  7054. /*!**************************************!*\
  7055. !*** ./2D/controls/inputPassword.ts ***!
  7056. \**************************************/
  7057. /*! exports provided: InputPassword */
  7058. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  7059. "use strict";
  7060. __webpack_require__.r(__webpack_exports__);
  7061. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return InputPassword; });
  7062. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  7063. /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
  7064. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  7065. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  7066. /**
  7067. * Class used to create a password control
  7068. */
  7069. var InputPassword = /** @class */ (function (_super) {
  7070. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputPassword, _super);
  7071. function InputPassword() {
  7072. return _super !== null && _super.apply(this, arguments) || this;
  7073. }
  7074. InputPassword.prototype._beforeRenderText = function (text) {
  7075. var txt = "";
  7076. for (var i = 0; i < text.length; i++) {
  7077. txt += "\u2022";
  7078. }
  7079. return txt;
  7080. };
  7081. return InputPassword;
  7082. }(_inputText__WEBPACK_IMPORTED_MODULE_1__["InputText"]));
  7083. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.InputPassword"] = InputPassword;
  7084. /***/ }),
  7085. /***/ "./2D/controls/inputText.ts":
  7086. /*!**********************************!*\
  7087. !*** ./2D/controls/inputText.ts ***!
  7088. \**********************************/
  7089. /*! exports provided: InputText */
  7090. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  7091. "use strict";
  7092. __webpack_require__.r(__webpack_exports__);
  7093. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return InputText; });
  7094. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  7095. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  7096. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  7097. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  7098. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  7099. /**
  7100. * Class used to create input text control
  7101. */
  7102. var InputText = /** @class */ (function (_super) {
  7103. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputText, _super);
  7104. /**
  7105. * Creates a new InputText
  7106. * @param name defines the control name
  7107. * @param text defines the text of the control
  7108. */
  7109. function InputText(name, text) {
  7110. if (text === void 0) { text = ""; }
  7111. var _this = _super.call(this, name) || this;
  7112. _this.name = name;
  7113. _this._text = "";
  7114. _this._placeholderText = "";
  7115. _this._background = "#222222";
  7116. _this._focusedBackground = "#000000";
  7117. _this._focusedColor = "white";
  7118. _this._placeholderColor = "gray";
  7119. _this._thickness = 1;
  7120. _this._margin = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](10, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL);
  7121. _this._autoStretchWidth = true;
  7122. _this._maxWidth = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](1, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PERCENTAGE, false);
  7123. _this._isFocused = false;
  7124. _this._blinkIsEven = false;
  7125. _this._cursorOffset = 0;
  7126. _this._deadKey = false;
  7127. _this._addKey = true;
  7128. _this._currentKey = "";
  7129. _this._isTextHighlightOn = false;
  7130. _this._textHighlightColor = "#d5e0ff";
  7131. _this._highligherOpacity = 0.4;
  7132. _this._highlightedText = "";
  7133. _this._startHighlightIndex = 0;
  7134. _this._endHighlightIndex = 0;
  7135. _this._cursorIndex = -1;
  7136. _this._onFocusSelectAll = false;
  7137. _this._isPointerDown = false;
  7138. /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
  7139. _this.promptMessage = "Please enter text:";
  7140. /** Force disable prompt on mobile device */
  7141. _this.disableMobilePrompt = false;
  7142. /** Observable raised when the text changes */
  7143. _this.onTextChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7144. /** Observable raised just before an entered character is to be added */
  7145. _this.onBeforeKeyAddObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7146. /** Observable raised when the control gets the focus */
  7147. _this.onFocusObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7148. /** Observable raised when the control loses the focus */
  7149. _this.onBlurObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7150. /**Observable raised when the text is highlighted */
  7151. _this.onTextHighlightObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7152. /**Observable raised when copy event is triggered */
  7153. _this.onTextCopyObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7154. /** Observable raised when cut event is triggered */
  7155. _this.onTextCutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7156. /** Observable raised when paste event is triggered */
  7157. _this.onTextPasteObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7158. /** Observable raised when a key event was processed */
  7159. _this.onKeyboardEventProcessedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  7160. _this.text = text;
  7161. _this.isPointerBlocker = true;
  7162. return _this;
  7163. }
  7164. Object.defineProperty(InputText.prototype, "maxWidth", {
  7165. /** Gets or sets the maximum width allowed by the control */
  7166. get: function () {
  7167. return this._maxWidth.toString(this._host);
  7168. },
  7169. set: function (value) {
  7170. if (this._maxWidth.toString(this._host) === value) {
  7171. return;
  7172. }
  7173. if (this._maxWidth.fromString(value)) {
  7174. this._markAsDirty();
  7175. }
  7176. },
  7177. enumerable: true,
  7178. configurable: true
  7179. });
  7180. Object.defineProperty(InputText.prototype, "maxWidthInPixels", {
  7181. /** Gets the maximum width allowed by the control in pixels */
  7182. get: function () {
  7183. return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
  7184. },
  7185. enumerable: true,
  7186. configurable: true
  7187. });
  7188. Object.defineProperty(InputText.prototype, "highligherOpacity", {
  7189. /** Gets or sets the text highlighter transparency; default: 0.4 */
  7190. get: function () {
  7191. return this._highligherOpacity;
  7192. },
  7193. set: function (value) {
  7194. if (this._highligherOpacity === value) {
  7195. return;
  7196. }
  7197. this._highligherOpacity = value;
  7198. this._markAsDirty();
  7199. },
  7200. enumerable: true,
  7201. configurable: true
  7202. });
  7203. Object.defineProperty(InputText.prototype, "onFocusSelectAll", {
  7204. /** Gets or sets a boolean indicating whether to select complete text by default on input focus */
  7205. get: function () {
  7206. return this._onFocusSelectAll;
  7207. },
  7208. set: function (value) {
  7209. if (this._onFocusSelectAll === value) {
  7210. return;
  7211. }
  7212. this._onFocusSelectAll = value;
  7213. this._markAsDirty();
  7214. },
  7215. enumerable: true,
  7216. configurable: true
  7217. });
  7218. Object.defineProperty(InputText.prototype, "textHighlightColor", {
  7219. /** Gets or sets the text hightlight color */
  7220. get: function () {
  7221. return this._textHighlightColor;
  7222. },
  7223. set: function (value) {
  7224. if (this._textHighlightColor === value) {
  7225. return;
  7226. }
  7227. this._textHighlightColor = value;
  7228. this._markAsDirty();
  7229. },
  7230. enumerable: true,
  7231. configurable: true
  7232. });
  7233. Object.defineProperty(InputText.prototype, "margin", {
  7234. /** Gets or sets control margin */
  7235. get: function () {
  7236. return this._margin.toString(this._host);
  7237. },
  7238. set: function (value) {
  7239. if (this._margin.toString(this._host) === value) {
  7240. return;
  7241. }
  7242. if (this._margin.fromString(value)) {
  7243. this._markAsDirty();
  7244. }
  7245. },
  7246. enumerable: true,
  7247. configurable: true
  7248. });
  7249. Object.defineProperty(InputText.prototype, "marginInPixels", {
  7250. /** Gets control margin in pixels */
  7251. get: function () {
  7252. return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
  7253. },
  7254. enumerable: true,
  7255. configurable: true
  7256. });
  7257. Object.defineProperty(InputText.prototype, "autoStretchWidth", {
  7258. /** Gets or sets a boolean indicating if the control can auto stretch its width to adapt to the text */
  7259. get: function () {
  7260. return this._autoStretchWidth;
  7261. },
  7262. set: function (value) {
  7263. if (this._autoStretchWidth === value) {
  7264. return;
  7265. }
  7266. this._autoStretchWidth = value;
  7267. this._markAsDirty();
  7268. },
  7269. enumerable: true,
  7270. configurable: true
  7271. });
  7272. Object.defineProperty(InputText.prototype, "thickness", {
  7273. /** Gets or sets border thickness */
  7274. get: function () {
  7275. return this._thickness;
  7276. },
  7277. set: function (value) {
  7278. if (this._thickness === value) {
  7279. return;
  7280. }
  7281. this._thickness = value;
  7282. this._markAsDirty();
  7283. },
  7284. enumerable: true,
  7285. configurable: true
  7286. });
  7287. Object.defineProperty(InputText.prototype, "focusedBackground", {
  7288. /** Gets or sets the background color when focused */
  7289. get: function () {
  7290. return this._focusedBackground;
  7291. },
  7292. set: function (value) {
  7293. if (this._focusedBackground === value) {
  7294. return;
  7295. }
  7296. this._focusedBackground = value;
  7297. this._markAsDirty();
  7298. },
  7299. enumerable: true,
  7300. configurable: true
  7301. });
  7302. Object.defineProperty(InputText.prototype, "focusedColor", {
  7303. /** Gets or sets the background color when focused */
  7304. get: function () {
  7305. return this._focusedColor;
  7306. },
  7307. set: function (value) {
  7308. if (this._focusedColor === value) {
  7309. return;
  7310. }
  7311. this._focusedColor = value;
  7312. this._markAsDirty();
  7313. },
  7314. enumerable: true,
  7315. configurable: true
  7316. });
  7317. Object.defineProperty(InputText.prototype, "background", {
  7318. /** Gets or sets the background color */
  7319. get: function () {
  7320. return this._background;
  7321. },
  7322. set: function (value) {
  7323. if (this._background === value) {
  7324. return;
  7325. }
  7326. this._background = value;
  7327. this._markAsDirty();
  7328. },
  7329. enumerable: true,
  7330. configurable: true
  7331. });
  7332. Object.defineProperty(InputText.prototype, "placeholderColor", {
  7333. /** Gets or sets the placeholder color */
  7334. get: function () {
  7335. return this._placeholderColor;
  7336. },
  7337. set: function (value) {
  7338. if (this._placeholderColor === value) {
  7339. return;
  7340. }
  7341. this._placeholderColor = value;
  7342. this._markAsDirty();
  7343. },
  7344. enumerable: true,
  7345. configurable: true
  7346. });
  7347. Object.defineProperty(InputText.prototype, "placeholderText", {
  7348. /** Gets or sets the text displayed when the control is empty */
  7349. get: function () {
  7350. return this._placeholderText;
  7351. },
  7352. set: function (value) {
  7353. if (this._placeholderText === value) {
  7354. return;
  7355. }
  7356. this._placeholderText = value;
  7357. this._markAsDirty();
  7358. },
  7359. enumerable: true,
  7360. configurable: true
  7361. });
  7362. Object.defineProperty(InputText.prototype, "deadKey", {
  7363. /** Gets or sets the dead key flag */
  7364. get: function () {
  7365. return this._deadKey;
  7366. },
  7367. set: function (flag) {
  7368. this._deadKey = flag;
  7369. },
  7370. enumerable: true,
  7371. configurable: true
  7372. });
  7373. Object.defineProperty(InputText.prototype, "highlightedText", {
  7374. /** Gets or sets the highlight text */
  7375. get: function () {
  7376. return this._highlightedText;
  7377. },
  7378. set: function (text) {
  7379. if (this._highlightedText === text) {
  7380. return;
  7381. }
  7382. this._highlightedText = text;
  7383. this._markAsDirty();
  7384. },
  7385. enumerable: true,
  7386. configurable: true
  7387. });
  7388. Object.defineProperty(InputText.prototype, "addKey", {
  7389. /** Gets or sets if the current key should be added */
  7390. get: function () {
  7391. return this._addKey;
  7392. },
  7393. set: function (flag) {
  7394. this._addKey = flag;
  7395. },
  7396. enumerable: true,
  7397. configurable: true
  7398. });
  7399. Object.defineProperty(InputText.prototype, "currentKey", {
  7400. /** Gets or sets the value of the current key being entered */
  7401. get: function () {
  7402. return this._currentKey;
  7403. },
  7404. set: function (key) {
  7405. this._currentKey = key;
  7406. },
  7407. enumerable: true,
  7408. configurable: true
  7409. });
  7410. Object.defineProperty(InputText.prototype, "text", {
  7411. /** Gets or sets the text displayed in the control */
  7412. get: function () {
  7413. return this._text;
  7414. },
  7415. set: function (value) {
  7416. var valueAsString = value.toString(); // Forcing convertion
  7417. if (this._text === valueAsString) {
  7418. return;
  7419. }
  7420. this._text = valueAsString;
  7421. this._markAsDirty();
  7422. this.onTextChangedObservable.notifyObservers(this);
  7423. },
  7424. enumerable: true,
  7425. configurable: true
  7426. });
  7427. Object.defineProperty(InputText.prototype, "width", {
  7428. /** Gets or sets control width */
  7429. get: function () {
  7430. return this._width.toString(this._host);
  7431. },
  7432. set: function (value) {
  7433. if (this._width.toString(this._host) === value) {
  7434. return;
  7435. }
  7436. if (this._width.fromString(value)) {
  7437. this._markAsDirty();
  7438. }
  7439. this.autoStretchWidth = false;
  7440. },
  7441. enumerable: true,
  7442. configurable: true
  7443. });
  7444. /** @hidden */
  7445. InputText.prototype.onBlur = function () {
  7446. this._isFocused = false;
  7447. this._scrollLeft = null;
  7448. this._cursorOffset = 0;
  7449. clearTimeout(this._blinkTimeout);
  7450. this._markAsDirty();
  7451. this.onBlurObservable.notifyObservers(this);
  7452. this._host.unRegisterClipboardEvents();
  7453. if (this._onClipboardObserver) {
  7454. this._host.onClipboardObservable.remove(this._onClipboardObserver);
  7455. }
  7456. var scene = this._host.getScene();
  7457. if (this._onPointerDblTapObserver && scene) {
  7458. scene.onPointerObservable.remove(this._onPointerDblTapObserver);
  7459. }
  7460. };
  7461. /** @hidden */
  7462. InputText.prototype.onFocus = function () {
  7463. var _this = this;
  7464. if (!this._isEnabled) {
  7465. return;
  7466. }
  7467. this._scrollLeft = null;
  7468. this._isFocused = true;
  7469. this._blinkIsEven = false;
  7470. this._cursorOffset = 0;
  7471. this._markAsDirty();
  7472. this.onFocusObservable.notifyObservers(this);
  7473. if (navigator.userAgent.indexOf("Mobile") !== -1 && !this.disableMobilePrompt) {
  7474. var value = prompt(this.promptMessage);
  7475. if (value !== null) {
  7476. this.text = value;
  7477. }
  7478. this._host.focusedControl = null;
  7479. return;
  7480. }
  7481. this._host.registerClipboardEvents();
  7482. this._onClipboardObserver = this._host.onClipboardObservable.add(function (clipboardInfo) {
  7483. // process clipboard event, can be configured.
  7484. switch (clipboardInfo.type) {
  7485. case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].COPY:
  7486. _this._onCopyText(clipboardInfo.event);
  7487. _this.onTextCopyObservable.notifyObservers(_this);
  7488. break;
  7489. case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].CUT:
  7490. _this._onCutText(clipboardInfo.event);
  7491. _this.onTextCutObservable.notifyObservers(_this);
  7492. break;
  7493. case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["ClipboardEventTypes"].PASTE:
  7494. _this._onPasteText(clipboardInfo.event);
  7495. _this.onTextPasteObservable.notifyObservers(_this);
  7496. break;
  7497. default: return;
  7498. }
  7499. });
  7500. var scene = this._host.getScene();
  7501. if (scene) {
  7502. //register the pointer double tap event
  7503. this._onPointerDblTapObserver = scene.onPointerObservable.add(function (pointerInfo) {
  7504. if (!_this._isFocused) {
  7505. return;
  7506. }
  7507. if (pointerInfo.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERDOUBLETAP) {
  7508. _this._processDblClick(pointerInfo);
  7509. }
  7510. });
  7511. }
  7512. if (this._onFocusSelectAll) {
  7513. this._selectAllText();
  7514. }
  7515. };
  7516. InputText.prototype._getTypeName = function () {
  7517. return "InputText";
  7518. };
  7519. /**
  7520. * Function called to get the list of controls that should not steal the focus from this control
  7521. * @returns an array of controls
  7522. */
  7523. InputText.prototype.keepsFocusWith = function () {
  7524. if (!this._connectedVirtualKeyboard) {
  7525. return null;
  7526. }
  7527. return [this._connectedVirtualKeyboard];
  7528. };
  7529. /** @hidden */
  7530. InputText.prototype.processKey = function (keyCode, key, evt) {
  7531. //return if clipboard event keys (i.e -ctr/cmd + c,v,x)
  7532. if (evt && (evt.ctrlKey || evt.metaKey) && (keyCode === 67 || keyCode === 86 || keyCode === 88)) {
  7533. return;
  7534. }
  7535. //select all
  7536. if (evt && (evt.ctrlKey || evt.metaKey) && keyCode === 65) {
  7537. this._selectAllText();
  7538. evt.preventDefault();
  7539. return;
  7540. }
  7541. // Specific cases
  7542. switch (keyCode) {
  7543. case 32: //SPACE
  7544. key = " "; //ie11 key for space is "Spacebar"
  7545. break;
  7546. case 191: //SLASH
  7547. if (evt) {
  7548. evt.preventDefault();
  7549. }
  7550. break;
  7551. case 8: // BACKSPACE
  7552. if (this._text && this._text.length > 0) {
  7553. //delete the highlighted text
  7554. if (this._isTextHighlightOn) {
  7555. this.text = this._text.slice(0, this._startHighlightIndex) + this._text.slice(this._endHighlightIndex);
  7556. this._isTextHighlightOn = false;
  7557. this._cursorOffset = this.text.length - this._startHighlightIndex;
  7558. this._blinkIsEven = false;
  7559. if (evt) {
  7560. evt.preventDefault();
  7561. }
  7562. return;
  7563. }
  7564. //delete single character
  7565. if (this._cursorOffset === 0) {
  7566. this.text = this._text.substr(0, this._text.length - 1);
  7567. }
  7568. else {
  7569. var deletePosition = this._text.length - this._cursorOffset;
  7570. if (deletePosition > 0) {
  7571. this.text = this._text.slice(0, deletePosition - 1) + this._text.slice(deletePosition);
  7572. }
  7573. }
  7574. }
  7575. if (evt) {
  7576. evt.preventDefault();
  7577. }
  7578. return;
  7579. case 46: // DELETE
  7580. if (this._isTextHighlightOn) {
  7581. this.text = this._text.slice(0, this._startHighlightIndex) + this._text.slice(this._endHighlightIndex);
  7582. var decrementor = (this._endHighlightIndex - this._startHighlightIndex);
  7583. while (decrementor > 0 && this._cursorOffset > 0) {
  7584. this._cursorOffset--;
  7585. }
  7586. this._isTextHighlightOn = false;
  7587. this._cursorOffset = this.text.length - this._startHighlightIndex;
  7588. if (evt) {
  7589. evt.preventDefault();
  7590. }
  7591. return;
  7592. }
  7593. if (this._text && this._text.length > 0 && this._cursorOffset > 0) {
  7594. var deletePosition = this._text.length - this._cursorOffset;
  7595. this.text = this._text.slice(0, deletePosition) + this._text.slice(deletePosition + 1);
  7596. this._cursorOffset--;
  7597. }
  7598. if (evt) {
  7599. evt.preventDefault();
  7600. }
  7601. return;
  7602. case 13: // RETURN
  7603. this._host.focusedControl = null;
  7604. this._isTextHighlightOn = false;
  7605. return;
  7606. case 35: // END
  7607. this._cursorOffset = 0;
  7608. this._blinkIsEven = false;
  7609. this._isTextHighlightOn = false;
  7610. this._markAsDirty();
  7611. return;
  7612. case 36: // HOME
  7613. this._cursorOffset = this._text.length;
  7614. this._blinkIsEven = false;
  7615. this._isTextHighlightOn = false;
  7616. this._markAsDirty();
  7617. return;
  7618. case 37: // LEFT
  7619. this._cursorOffset++;
  7620. if (this._cursorOffset > this._text.length) {
  7621. this._cursorOffset = this._text.length;
  7622. }
  7623. if (evt && evt.shiftKey) {
  7624. // update the cursor
  7625. this._blinkIsEven = false;
  7626. // shift + ctrl/cmd + <-
  7627. if (evt.ctrlKey || evt.metaKey) {
  7628. if (!this._isTextHighlightOn) {
  7629. if (this._text.length === this._cursorOffset) {
  7630. return;
  7631. }
  7632. else {
  7633. this._endHighlightIndex = this._text.length - this._cursorOffset + 1;
  7634. }
  7635. }
  7636. this._startHighlightIndex = 0;
  7637. this._cursorIndex = this._text.length - this._endHighlightIndex;
  7638. this._cursorOffset = this._text.length;
  7639. this._isTextHighlightOn = true;
  7640. this._markAsDirty();
  7641. return;
  7642. }
  7643. //store the starting point
  7644. if (!this._isTextHighlightOn) {
  7645. this._isTextHighlightOn = true;
  7646. this._cursorIndex = (this._cursorOffset >= this._text.length) ? this._text.length : this._cursorOffset - 1;
  7647. }
  7648. //if text is already highlighted
  7649. else if (this._cursorIndex === -1) {
  7650. this._cursorIndex = this._text.length - this._endHighlightIndex;
  7651. this._cursorOffset = (this._startHighlightIndex === 0) ? this._text.length : this._text.length - this._startHighlightIndex + 1;
  7652. }
  7653. //set the highlight indexes
  7654. if (this._cursorIndex < this._cursorOffset) {
  7655. this._endHighlightIndex = this._text.length - this._cursorIndex;
  7656. this._startHighlightIndex = this._text.length - this._cursorOffset;
  7657. }
  7658. else if (this._cursorIndex > this._cursorOffset) {
  7659. this._endHighlightIndex = this._text.length - this._cursorOffset;
  7660. this._startHighlightIndex = this._text.length - this._cursorIndex;
  7661. }
  7662. else {
  7663. this._isTextHighlightOn = false;
  7664. }
  7665. this._markAsDirty();
  7666. return;
  7667. }
  7668. if (this._isTextHighlightOn) {
  7669. this._cursorOffset = this._text.length - this._startHighlightIndex;
  7670. this._isTextHighlightOn = false;
  7671. }
  7672. if (evt && (evt.ctrlKey || evt.metaKey)) {
  7673. this._cursorOffset = this.text.length;
  7674. evt.preventDefault();
  7675. }
  7676. this._blinkIsEven = false;
  7677. this._isTextHighlightOn = false;
  7678. this._cursorIndex = -1;
  7679. this._markAsDirty();
  7680. return;
  7681. case 39: // RIGHT
  7682. this._cursorOffset--;
  7683. if (this._cursorOffset < 0) {
  7684. this._cursorOffset = 0;
  7685. }
  7686. if (evt && evt.shiftKey) {
  7687. //update the cursor
  7688. this._blinkIsEven = false;
  7689. //shift + ctrl/cmd + ->
  7690. if (evt.ctrlKey || evt.metaKey) {
  7691. if (!this._isTextHighlightOn) {
  7692. if (this._cursorOffset === 0) {
  7693. return;
  7694. }
  7695. else {
  7696. this._startHighlightIndex = this._text.length - this._cursorOffset - 1;
  7697. }
  7698. }
  7699. this._endHighlightIndex = this._text.length;
  7700. this._isTextHighlightOn = true;
  7701. this._cursorIndex = this._text.length - this._startHighlightIndex;
  7702. this._cursorOffset = 0;
  7703. this._markAsDirty();
  7704. return;
  7705. }
  7706. if (!this._isTextHighlightOn) {
  7707. this._isTextHighlightOn = true;
  7708. this._cursorIndex = (this._cursorOffset <= 0) ? 0 : this._cursorOffset + 1;
  7709. }
  7710. //if text is already highlighted
  7711. else if (this._cursorIndex === -1) {
  7712. this._cursorIndex = this._text.length - this._startHighlightIndex;
  7713. this._cursorOffset = (this._text.length === this._endHighlightIndex) ? 0 : this._text.length - this._endHighlightIndex - 1;
  7714. }
  7715. //set the highlight indexes
  7716. if (this._cursorIndex < this._cursorOffset) {
  7717. this._endHighlightIndex = this._text.length - this._cursorIndex;
  7718. this._startHighlightIndex = this._text.length - this._cursorOffset;
  7719. }
  7720. else if (this._cursorIndex > this._cursorOffset) {
  7721. this._endHighlightIndex = this._text.length - this._cursorOffset;
  7722. this._startHighlightIndex = this._text.length - this._cursorIndex;
  7723. }
  7724. else {
  7725. this._isTextHighlightOn = false;
  7726. }
  7727. this._markAsDirty();
  7728. return;
  7729. }
  7730. if (this._isTextHighlightOn) {
  7731. this._cursorOffset = this._text.length - this._endHighlightIndex;
  7732. this._isTextHighlightOn = false;
  7733. }
  7734. //ctr + ->
  7735. if (evt && (evt.ctrlKey || evt.metaKey)) {
  7736. this._cursorOffset = 0;
  7737. evt.preventDefault();
  7738. }
  7739. this._blinkIsEven = false;
  7740. this._isTextHighlightOn = false;
  7741. this._cursorIndex = -1;
  7742. this._markAsDirty();
  7743. return;
  7744. case 222: // Dead
  7745. if (evt) {
  7746. evt.preventDefault();
  7747. }
  7748. this._cursorIndex = -1;
  7749. this.deadKey = true;
  7750. break;
  7751. }
  7752. // Printable characters
  7753. if (key &&
  7754. ((keyCode === -1) || // Direct access
  7755. (keyCode === 32) || // Space
  7756. (keyCode > 47 && keyCode < 64) || // Numbers
  7757. (keyCode > 64 && keyCode < 91) || // Letters
  7758. (keyCode > 159 && keyCode < 193) || // Special characters
  7759. (keyCode > 218 && keyCode < 223) || // Special characters
  7760. (keyCode > 95 && keyCode < 112))) { // Numpad
  7761. this._currentKey = key;
  7762. this.onBeforeKeyAddObservable.notifyObservers(this);
  7763. key = this._currentKey;
  7764. if (this._addKey) {
  7765. if (this._isTextHighlightOn) {
  7766. this.text = this._text.slice(0, this._startHighlightIndex) + key + this._text.slice(this._endHighlightIndex);
  7767. this._cursorOffset = this.text.length - (this._startHighlightIndex + 1);
  7768. this._isTextHighlightOn = false;
  7769. this._blinkIsEven = false;
  7770. this._markAsDirty();
  7771. }
  7772. else if (this._cursorOffset === 0) {
  7773. this.text += key;
  7774. }
  7775. else {
  7776. var insertPosition = this._text.length - this._cursorOffset;
  7777. this.text = this._text.slice(0, insertPosition) + key + this._text.slice(insertPosition);
  7778. }
  7779. }
  7780. }
  7781. };
  7782. /** @hidden */
  7783. InputText.prototype._updateValueFromCursorIndex = function (offset) {
  7784. //update the cursor
  7785. this._blinkIsEven = false;
  7786. if (this._cursorIndex === -1) {
  7787. this._cursorIndex = offset;
  7788. }
  7789. else {
  7790. if (this._cursorIndex < this._cursorOffset) {
  7791. this._endHighlightIndex = this._text.length - this._cursorIndex;
  7792. this._startHighlightIndex = this._text.length - this._cursorOffset;
  7793. }
  7794. else if (this._cursorIndex > this._cursorOffset) {
  7795. this._endHighlightIndex = this._text.length - this._cursorOffset;
  7796. this._startHighlightIndex = this._text.length - this._cursorIndex;
  7797. }
  7798. else {
  7799. this._isTextHighlightOn = false;
  7800. this._markAsDirty();
  7801. return;
  7802. }
  7803. }
  7804. this._isTextHighlightOn = true;
  7805. this._markAsDirty();
  7806. };
  7807. /** @hidden */
  7808. InputText.prototype._processDblClick = function (evt) {
  7809. //pre-find the start and end index of the word under cursor, speeds up the rendering
  7810. this._startHighlightIndex = this._text.length - this._cursorOffset;
  7811. this._endHighlightIndex = this._startHighlightIndex;
  7812. var rWord = /\w+/g, moveLeft, moveRight;
  7813. do {
  7814. moveRight = this._endHighlightIndex < this._text.length && (this._text[this._endHighlightIndex].search(rWord) !== -1) ? ++this._endHighlightIndex : 0;
  7815. moveLeft = this._startHighlightIndex > 0 && (this._text[this._startHighlightIndex - 1].search(rWord) !== -1) ? --this._startHighlightIndex : 0;
  7816. } while (moveLeft || moveRight);
  7817. this._cursorOffset = this.text.length - this._startHighlightIndex;
  7818. this.onTextHighlightObservable.notifyObservers(this);
  7819. this._isTextHighlightOn = true;
  7820. this._clickedCoordinate = null;
  7821. this._blinkIsEven = true;
  7822. this._cursorIndex = -1;
  7823. this._markAsDirty();
  7824. };
  7825. /** @hidden */
  7826. InputText.prototype._selectAllText = function () {
  7827. this._blinkIsEven = true;
  7828. this._isTextHighlightOn = true;
  7829. this._startHighlightIndex = 0;
  7830. this._endHighlightIndex = this._text.length;
  7831. this._cursorOffset = this._text.length;
  7832. this._cursorIndex = -1;
  7833. this._markAsDirty();
  7834. };
  7835. /**
  7836. * Handles the keyboard event
  7837. * @param evt Defines the KeyboardEvent
  7838. */
  7839. InputText.prototype.processKeyboard = function (evt) {
  7840. // process pressed key
  7841. this.processKey(evt.keyCode, evt.key, evt);
  7842. this.onKeyboardEventProcessedObservable.notifyObservers(evt);
  7843. };
  7844. /** @hidden */
  7845. InputText.prototype._onCopyText = function (ev) {
  7846. this._isTextHighlightOn = false;
  7847. //when write permission to clipbaord data is denied
  7848. try {
  7849. ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
  7850. }
  7851. catch (_a) { } //pass
  7852. this._host.clipboardData = this._highlightedText;
  7853. };
  7854. /** @hidden */
  7855. InputText.prototype._onCutText = function (ev) {
  7856. if (!this._highlightedText) {
  7857. return;
  7858. }
  7859. this.text = this._text.slice(0, this._startHighlightIndex) + this._text.slice(this._endHighlightIndex);
  7860. this._isTextHighlightOn = false;
  7861. this._cursorOffset = this.text.length - this._startHighlightIndex;
  7862. //when write permission to clipbaord data is denied
  7863. try {
  7864. ev.clipboardData && ev.clipboardData.setData("text/plain", this._highlightedText);
  7865. }
  7866. catch (_a) { } //pass
  7867. this._host.clipboardData = this._highlightedText;
  7868. this._highlightedText = "";
  7869. };
  7870. /** @hidden */
  7871. InputText.prototype._onPasteText = function (ev) {
  7872. var data = "";
  7873. if (ev.clipboardData && ev.clipboardData.types.indexOf("text/plain") !== -1) {
  7874. data = ev.clipboardData.getData("text/plain");
  7875. }
  7876. else {
  7877. //get the cached data; returns blank string by default
  7878. data = this._host.clipboardData;
  7879. }
  7880. var insertPosition = this._text.length - this._cursorOffset;
  7881. this.text = this._text.slice(0, insertPosition) + data + this._text.slice(insertPosition);
  7882. };
  7883. InputText.prototype._draw = function (context, invalidatedRectangle) {
  7884. var _this = this;
  7885. context.save();
  7886. this._applyStates(context);
  7887. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  7888. context.shadowColor = this.shadowColor;
  7889. context.shadowBlur = this.shadowBlur;
  7890. context.shadowOffsetX = this.shadowOffsetX;
  7891. context.shadowOffsetY = this.shadowOffsetY;
  7892. }
  7893. // Background
  7894. if (this._isFocused) {
  7895. if (this._focusedBackground) {
  7896. context.fillStyle = this._isEnabled ? this._focusedBackground : this._disabledColor;
  7897. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  7898. }
  7899. }
  7900. else if (this._background) {
  7901. context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
  7902. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  7903. }
  7904. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  7905. context.shadowBlur = 0;
  7906. context.shadowOffsetX = 0;
  7907. context.shadowOffsetY = 0;
  7908. }
  7909. if (!this._fontOffset) {
  7910. this._fontOffset = _control__WEBPACK_IMPORTED_MODULE_2__["Control"]._GetFontOffset(context.font);
  7911. }
  7912. // Text
  7913. var clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, this._tempParentMeasure.width);
  7914. if (this.color) {
  7915. context.fillStyle = this.color;
  7916. }
  7917. var text = this._beforeRenderText(this._text);
  7918. if (!this._isFocused && !this._text && this._placeholderText) {
  7919. text = this._placeholderText;
  7920. if (this._placeholderColor) {
  7921. context.fillStyle = this._placeholderColor;
  7922. }
  7923. }
  7924. this._textWidth = context.measureText(text).width;
  7925. var marginWidth = this._margin.getValueInPixel(this._host, this._tempParentMeasure.width) * 2;
  7926. if (this._autoStretchWidth) {
  7927. this.width = Math.min(this._maxWidth.getValueInPixel(this._host, this._tempParentMeasure.width), this._textWidth + marginWidth) + "px";
  7928. }
  7929. var rootY = this._fontOffset.ascent + (this._currentMeasure.height - this._fontOffset.height) / 2;
  7930. var availableWidth = this._width.getValueInPixel(this._host, this._tempParentMeasure.width) - marginWidth;
  7931. context.save();
  7932. context.beginPath();
  7933. context.rect(clipTextLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, availableWidth + 2, this._currentMeasure.height);
  7934. context.clip();
  7935. if (this._isFocused && this._textWidth > availableWidth) {
  7936. var textLeft = clipTextLeft - this._textWidth + availableWidth;
  7937. if (!this._scrollLeft) {
  7938. this._scrollLeft = textLeft;
  7939. }
  7940. }
  7941. else {
  7942. this._scrollLeft = clipTextLeft;
  7943. }
  7944. context.fillText(text, this._scrollLeft, this._currentMeasure.top + rootY);
  7945. // Cursor
  7946. if (this._isFocused) {
  7947. // Need to move cursor
  7948. if (this._clickedCoordinate) {
  7949. var rightPosition = this._scrollLeft + this._textWidth;
  7950. var absoluteCursorPosition = rightPosition - this._clickedCoordinate;
  7951. var currentSize = 0;
  7952. this._cursorOffset = 0;
  7953. var previousDist = 0;
  7954. do {
  7955. if (this._cursorOffset) {
  7956. previousDist = Math.abs(absoluteCursorPosition - currentSize);
  7957. }
  7958. this._cursorOffset++;
  7959. currentSize = context.measureText(text.substr(text.length - this._cursorOffset, this._cursorOffset)).width;
  7960. } while (currentSize < absoluteCursorPosition && (text.length >= this._cursorOffset));
  7961. // Find closest move
  7962. if (Math.abs(absoluteCursorPosition - currentSize) > previousDist) {
  7963. this._cursorOffset--;
  7964. }
  7965. this._blinkIsEven = false;
  7966. this._clickedCoordinate = null;
  7967. }
  7968. // Render cursor
  7969. if (!this._blinkIsEven) {
  7970. var cursorOffsetText = this.text.substr(this._text.length - this._cursorOffset);
  7971. var cursorOffsetWidth = context.measureText(cursorOffsetText).width;
  7972. var cursorLeft = this._scrollLeft + this._textWidth - cursorOffsetWidth;
  7973. if (cursorLeft < clipTextLeft) {
  7974. this._scrollLeft += (clipTextLeft - cursorLeft);
  7975. cursorLeft = clipTextLeft;
  7976. this._markAsDirty();
  7977. }
  7978. else if (cursorLeft > clipTextLeft + availableWidth) {
  7979. this._scrollLeft += (clipTextLeft + availableWidth - cursorLeft);
  7980. cursorLeft = clipTextLeft + availableWidth;
  7981. this._markAsDirty();
  7982. }
  7983. if (!this._isTextHighlightOn) {
  7984. context.fillRect(cursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, 2, this._fontOffset.height);
  7985. }
  7986. }
  7987. clearTimeout(this._blinkTimeout);
  7988. this._blinkTimeout = setTimeout(function () {
  7989. _this._blinkIsEven = !_this._blinkIsEven;
  7990. _this._markAsDirty();
  7991. }, 500);
  7992. //show the highlighted text
  7993. if (this._isTextHighlightOn) {
  7994. clearTimeout(this._blinkTimeout);
  7995. var highlightCursorOffsetWidth = context.measureText(this.text.substring(this._startHighlightIndex)).width;
  7996. var highlightCursorLeft = this._scrollLeft + this._textWidth - highlightCursorOffsetWidth;
  7997. this._highlightedText = this.text.substring(this._startHighlightIndex, this._endHighlightIndex);
  7998. var width = context.measureText(this.text.substring(this._startHighlightIndex, this._endHighlightIndex)).width;
  7999. if (highlightCursorLeft < clipTextLeft) {
  8000. width = width - (clipTextLeft - highlightCursorLeft);
  8001. if (!width) {
  8002. // when using left arrow on text.length > availableWidth;
  8003. // assigns the width of the first letter after clipTextLeft
  8004. width = context.measureText(this.text.charAt(this.text.length - this._cursorOffset)).width;
  8005. }
  8006. highlightCursorLeft = clipTextLeft;
  8007. }
  8008. //for transparancy
  8009. context.globalAlpha = this._highligherOpacity;
  8010. context.fillStyle = this._textHighlightColor;
  8011. context.fillRect(highlightCursorLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, width, this._fontOffset.height);
  8012. context.globalAlpha = 1.0;
  8013. }
  8014. }
  8015. context.restore();
  8016. // Border
  8017. if (this._thickness) {
  8018. if (this._isFocused) {
  8019. if (this.focusedColor) {
  8020. context.strokeStyle = this.focusedColor;
  8021. }
  8022. }
  8023. else {
  8024. if (this.color) {
  8025. context.strokeStyle = this.color;
  8026. }
  8027. }
  8028. context.lineWidth = this._thickness;
  8029. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
  8030. }
  8031. context.restore();
  8032. };
  8033. InputText.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  8034. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {
  8035. return false;
  8036. }
  8037. this._clickedCoordinate = coordinates.x;
  8038. this._isTextHighlightOn = false;
  8039. this._highlightedText = "";
  8040. this._cursorIndex = -1;
  8041. this._isPointerDown = true;
  8042. this._host._capturingControl[pointerId] = this;
  8043. if (this._host.focusedControl === this) {
  8044. // Move cursor
  8045. clearTimeout(this._blinkTimeout);
  8046. this._markAsDirty();
  8047. return true;
  8048. }
  8049. if (!this._isEnabled) {
  8050. return false;
  8051. }
  8052. this._host.focusedControl = this;
  8053. return true;
  8054. };
  8055. InputText.prototype._onPointerMove = function (target, coordinates, pointerId) {
  8056. if (this._host.focusedControl === this && this._isPointerDown) {
  8057. this._clickedCoordinate = coordinates.x;
  8058. this._markAsDirty();
  8059. this._updateValueFromCursorIndex(this._cursorOffset);
  8060. }
  8061. _super.prototype._onPointerMove.call(this, target, coordinates, pointerId);
  8062. };
  8063. InputText.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  8064. this._isPointerDown = false;
  8065. delete this._host._capturingControl[pointerId];
  8066. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick);
  8067. };
  8068. InputText.prototype._beforeRenderText = function (text) {
  8069. return text;
  8070. };
  8071. InputText.prototype.dispose = function () {
  8072. _super.prototype.dispose.call(this);
  8073. this.onBlurObservable.clear();
  8074. this.onFocusObservable.clear();
  8075. this.onTextChangedObservable.clear();
  8076. this.onTextCopyObservable.clear();
  8077. this.onTextCutObservable.clear();
  8078. this.onTextPasteObservable.clear();
  8079. this.onTextHighlightObservable.clear();
  8080. this.onKeyboardEventProcessedObservable.clear();
  8081. };
  8082. return InputText;
  8083. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  8084. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.InputText"] = InputText;
  8085. /***/ }),
  8086. /***/ "./2D/controls/line.ts":
  8087. /*!*****************************!*\
  8088. !*** ./2D/controls/line.ts ***!
  8089. \*****************************/
  8090. /*! exports provided: Line */
  8091. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8092. "use strict";
  8093. __webpack_require__.r(__webpack_exports__);
  8094. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return Line; });
  8095. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8096. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  8097. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
  8098. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  8099. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  8100. /** Class used to render 2D lines */
  8101. var Line = /** @class */ (function (_super) {
  8102. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Line, _super);
  8103. /**
  8104. * Creates a new Line
  8105. * @param name defines the control name
  8106. */
  8107. function Line(name) {
  8108. var _this = _super.call(this, name) || this;
  8109. _this.name = name;
  8110. _this._lineWidth = 1;
  8111. _this._x1 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8112. _this._y1 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8113. _this._x2 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8114. _this._y2 = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](0);
  8115. _this._dash = new Array();
  8116. _this._automaticSize = true;
  8117. _this.isHitTestVisible = false;
  8118. _this._horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  8119. _this._verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_TOP;
  8120. return _this;
  8121. }
  8122. Object.defineProperty(Line.prototype, "dash", {
  8123. /** Gets or sets the dash pattern */
  8124. get: function () {
  8125. return this._dash;
  8126. },
  8127. set: function (value) {
  8128. if (this._dash === value) {
  8129. return;
  8130. }
  8131. this._dash = value;
  8132. this._markAsDirty();
  8133. },
  8134. enumerable: true,
  8135. configurable: true
  8136. });
  8137. Object.defineProperty(Line.prototype, "connectedControl", {
  8138. /** Gets or sets the control connected with the line end */
  8139. get: function () {
  8140. return this._connectedControl;
  8141. },
  8142. set: function (value) {
  8143. var _this = this;
  8144. if (this._connectedControl === value) {
  8145. return;
  8146. }
  8147. if (this._connectedControlDirtyObserver && this._connectedControl) {
  8148. this._connectedControl.onDirtyObservable.remove(this._connectedControlDirtyObserver);
  8149. this._connectedControlDirtyObserver = null;
  8150. }
  8151. if (value) {
  8152. this._connectedControlDirtyObserver = value.onDirtyObservable.add(function () { return _this._markAsDirty(); });
  8153. }
  8154. this._connectedControl = value;
  8155. this._markAsDirty();
  8156. },
  8157. enumerable: true,
  8158. configurable: true
  8159. });
  8160. Object.defineProperty(Line.prototype, "x1", {
  8161. /** Gets or sets start coordinates on X axis */
  8162. get: function () {
  8163. return this._x1.toString(this._host);
  8164. },
  8165. set: function (value) {
  8166. if (this._x1.toString(this._host) === value) {
  8167. return;
  8168. }
  8169. if (this._x1.fromString(value)) {
  8170. this._markAsDirty();
  8171. }
  8172. },
  8173. enumerable: true,
  8174. configurable: true
  8175. });
  8176. Object.defineProperty(Line.prototype, "y1", {
  8177. /** Gets or sets start coordinates on Y axis */
  8178. get: function () {
  8179. return this._y1.toString(this._host);
  8180. },
  8181. set: function (value) {
  8182. if (this._y1.toString(this._host) === value) {
  8183. return;
  8184. }
  8185. if (this._y1.fromString(value)) {
  8186. this._markAsDirty();
  8187. }
  8188. },
  8189. enumerable: true,
  8190. configurable: true
  8191. });
  8192. Object.defineProperty(Line.prototype, "x2", {
  8193. /** Gets or sets end coordinates on X axis */
  8194. get: function () {
  8195. return this._x2.toString(this._host);
  8196. },
  8197. set: function (value) {
  8198. if (this._x2.toString(this._host) === value) {
  8199. return;
  8200. }
  8201. if (this._x2.fromString(value)) {
  8202. this._markAsDirty();
  8203. }
  8204. },
  8205. enumerable: true,
  8206. configurable: true
  8207. });
  8208. Object.defineProperty(Line.prototype, "y2", {
  8209. /** Gets or sets end coordinates on Y axis */
  8210. get: function () {
  8211. return this._y2.toString(this._host);
  8212. },
  8213. set: function (value) {
  8214. if (this._y2.toString(this._host) === value) {
  8215. return;
  8216. }
  8217. if (this._y2.fromString(value)) {
  8218. this._markAsDirty();
  8219. }
  8220. },
  8221. enumerable: true,
  8222. configurable: true
  8223. });
  8224. Object.defineProperty(Line.prototype, "lineWidth", {
  8225. /** Gets or sets line width */
  8226. get: function () {
  8227. return this._lineWidth;
  8228. },
  8229. set: function (value) {
  8230. if (this._lineWidth === value) {
  8231. return;
  8232. }
  8233. this._lineWidth = value;
  8234. this._markAsDirty();
  8235. },
  8236. enumerable: true,
  8237. configurable: true
  8238. });
  8239. Object.defineProperty(Line.prototype, "horizontalAlignment", {
  8240. /** Gets or sets horizontal alignment */
  8241. set: function (value) {
  8242. return;
  8243. },
  8244. enumerable: true,
  8245. configurable: true
  8246. });
  8247. Object.defineProperty(Line.prototype, "verticalAlignment", {
  8248. /** Gets or sets vertical alignment */
  8249. set: function (value) {
  8250. return;
  8251. },
  8252. enumerable: true,
  8253. configurable: true
  8254. });
  8255. Object.defineProperty(Line.prototype, "_effectiveX2", {
  8256. get: function () {
  8257. return (this._connectedControl ? this._connectedControl.centerX : 0) + this._x2.getValue(this._host);
  8258. },
  8259. enumerable: true,
  8260. configurable: true
  8261. });
  8262. Object.defineProperty(Line.prototype, "_effectiveY2", {
  8263. get: function () {
  8264. return (this._connectedControl ? this._connectedControl.centerY : 0) + this._y2.getValue(this._host);
  8265. },
  8266. enumerable: true,
  8267. configurable: true
  8268. });
  8269. Line.prototype._getTypeName = function () {
  8270. return "Line";
  8271. };
  8272. Line.prototype._draw = function (context) {
  8273. context.save();
  8274. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8275. context.shadowColor = this.shadowColor;
  8276. context.shadowBlur = this.shadowBlur;
  8277. context.shadowOffsetX = this.shadowOffsetX;
  8278. context.shadowOffsetY = this.shadowOffsetY;
  8279. }
  8280. this._applyStates(context);
  8281. context.strokeStyle = this.color;
  8282. context.lineWidth = this._lineWidth;
  8283. context.setLineDash(this._dash);
  8284. context.beginPath();
  8285. context.moveTo(this._cachedParentMeasure.left + this._x1.getValue(this._host), this._cachedParentMeasure.top + this._y1.getValue(this._host));
  8286. context.lineTo(this._cachedParentMeasure.left + this._effectiveX2, this._cachedParentMeasure.top + this._effectiveY2);
  8287. context.stroke();
  8288. context.restore();
  8289. };
  8290. Line.prototype._measure = function () {
  8291. // Width / Height
  8292. this._currentMeasure.width = Math.abs(this._x1.getValue(this._host) - this._effectiveX2) + this._lineWidth;
  8293. this._currentMeasure.height = Math.abs(this._y1.getValue(this._host) - this._effectiveY2) + this._lineWidth;
  8294. };
  8295. Line.prototype._computeAlignment = function (parentMeasure, context) {
  8296. this._currentMeasure.left = parentMeasure.left + Math.min(this._x1.getValue(this._host), this._effectiveX2) - this._lineWidth / 2;
  8297. this._currentMeasure.top = parentMeasure.top + Math.min(this._y1.getValue(this._host), this._effectiveY2) - this._lineWidth / 2;
  8298. };
  8299. /**
  8300. * Move one end of the line given 3D cartesian coordinates.
  8301. * @param position Targeted world position
  8302. * @param scene Scene
  8303. * @param end (opt) Set to true to assign x2 and y2 coordinates of the line. Default assign to x1 and y1.
  8304. */
  8305. Line.prototype.moveToVector3 = function (position, scene, end) {
  8306. if (end === void 0) { end = false; }
  8307. if (!this._host || this.parent !== this._host._rootContainer) {
  8308. babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Tools"].Error("Cannot move a control to a vector3 if the control is not at root level");
  8309. return;
  8310. }
  8311. var globalViewport = this._host._getGlobalViewport(scene);
  8312. var projectedPosition = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Project(position, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Matrix"].Identity(), scene.getTransformMatrix(), globalViewport);
  8313. this._moveToProjectedPosition(projectedPosition, end);
  8314. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  8315. this.notRenderable = true;
  8316. return;
  8317. }
  8318. this.notRenderable = false;
  8319. };
  8320. /**
  8321. * Move one end of the line to a position in screen absolute space.
  8322. * @param projectedPosition Position in screen absolute space (X, Y)
  8323. * @param end (opt) Set to true to assign x2 and y2 coordinates of the line. Default assign to x1 and y1.
  8324. */
  8325. Line.prototype._moveToProjectedPosition = function (projectedPosition, end) {
  8326. if (end === void 0) { end = false; }
  8327. var x = (projectedPosition.x + this._linkOffsetX.getValue(this._host)) + "px";
  8328. var y = (projectedPosition.y + this._linkOffsetY.getValue(this._host)) + "px";
  8329. if (end) {
  8330. this.x2 = x;
  8331. this.y2 = y;
  8332. this._x2.ignoreAdaptiveScaling = true;
  8333. this._y2.ignoreAdaptiveScaling = true;
  8334. }
  8335. else {
  8336. this.x1 = x;
  8337. this.y1 = y;
  8338. this._x1.ignoreAdaptiveScaling = true;
  8339. this._y1.ignoreAdaptiveScaling = true;
  8340. }
  8341. };
  8342. return Line;
  8343. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  8344. babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Line"] = Line;
  8345. /***/ }),
  8346. /***/ "./2D/controls/multiLine.ts":
  8347. /*!**********************************!*\
  8348. !*** ./2D/controls/multiLine.ts ***!
  8349. \**********************************/
  8350. /*! exports provided: MultiLine */
  8351. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8352. "use strict";
  8353. __webpack_require__.r(__webpack_exports__);
  8354. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return MultiLine; });
  8355. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8356. /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/perfCounter");
  8357. /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__);
  8358. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  8359. /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../multiLinePoint */ "./2D/multiLinePoint.ts");
  8360. /**
  8361. * Class used to create multi line control
  8362. */
  8363. var MultiLine = /** @class */ (function (_super) {
  8364. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(MultiLine, _super);
  8365. /**
  8366. * Creates a new MultiLine
  8367. * @param name defines the control name
  8368. */
  8369. function MultiLine(name) {
  8370. var _this = _super.call(this, name) || this;
  8371. _this.name = name;
  8372. _this._lineWidth = 1;
  8373. /** Function called when a point is updated */
  8374. _this.onPointUpdate = function () {
  8375. _this._markAsDirty();
  8376. };
  8377. _this._automaticSize = true;
  8378. _this.isHitTestVisible = false;
  8379. _this._horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  8380. _this._verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].VERTICAL_ALIGNMENT_TOP;
  8381. _this._dash = [];
  8382. _this._points = [];
  8383. return _this;
  8384. }
  8385. Object.defineProperty(MultiLine.prototype, "dash", {
  8386. /** Gets or sets dash pattern */
  8387. get: function () {
  8388. return this._dash;
  8389. },
  8390. set: function (value) {
  8391. if (this._dash === value) {
  8392. return;
  8393. }
  8394. this._dash = value;
  8395. this._markAsDirty();
  8396. },
  8397. enumerable: true,
  8398. configurable: true
  8399. });
  8400. /**
  8401. * Gets point stored at specified index
  8402. * @param index defines the index to look for
  8403. * @returns the requested point if found
  8404. */
  8405. MultiLine.prototype.getAt = function (index) {
  8406. if (!this._points[index]) {
  8407. this._points[index] = new _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__["MultiLinePoint"](this);
  8408. }
  8409. return this._points[index];
  8410. };
  8411. /**
  8412. * Adds new points to the point collection
  8413. * @param items defines the list of items (mesh, control or 2d coordiantes) to add
  8414. * @returns the list of created MultiLinePoint
  8415. */
  8416. MultiLine.prototype.add = function () {
  8417. var _this = this;
  8418. var items = [];
  8419. for (var _i = 0; _i < arguments.length; _i++) {
  8420. items[_i] = arguments[_i];
  8421. }
  8422. return items.map(function (item) { return _this.push(item); });
  8423. };
  8424. /**
  8425. * Adds a new point to the point collection
  8426. * @param item defines the item (mesh, control or 2d coordiantes) to add
  8427. * @returns the created MultiLinePoint
  8428. */
  8429. MultiLine.prototype.push = function (item) {
  8430. var point = this.getAt(this._points.length);
  8431. if (item == null) {
  8432. return point;
  8433. }
  8434. if (item instanceof babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__["AbstractMesh"]) {
  8435. point.mesh = item;
  8436. }
  8437. else if (item instanceof _control__WEBPACK_IMPORTED_MODULE_2__["Control"]) {
  8438. point.control = item;
  8439. }
  8440. else if (item.x != null && item.y != null) {
  8441. point.x = item.x;
  8442. point.y = item.y;
  8443. }
  8444. return point;
  8445. };
  8446. /**
  8447. * Remove a specific value or point from the active point collection
  8448. * @param value defines the value or point to remove
  8449. */
  8450. MultiLine.prototype.remove = function (value) {
  8451. var index;
  8452. if (value instanceof _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__["MultiLinePoint"]) {
  8453. index = this._points.indexOf(value);
  8454. if (index === -1) {
  8455. return;
  8456. }
  8457. }
  8458. else {
  8459. index = value;
  8460. }
  8461. var point = this._points[index];
  8462. if (!point) {
  8463. return;
  8464. }
  8465. point.dispose();
  8466. this._points.splice(index, 1);
  8467. };
  8468. /**
  8469. * Resets this object to initial state (no point)
  8470. */
  8471. MultiLine.prototype.reset = function () {
  8472. while (this._points.length > 0) {
  8473. this.remove(this._points.length - 1);
  8474. }
  8475. };
  8476. /**
  8477. * Resets all links
  8478. */
  8479. MultiLine.prototype.resetLinks = function () {
  8480. this._points.forEach(function (point) {
  8481. if (point != null) {
  8482. point.resetLinks();
  8483. }
  8484. });
  8485. };
  8486. Object.defineProperty(MultiLine.prototype, "lineWidth", {
  8487. /** Gets or sets line width */
  8488. get: function () {
  8489. return this._lineWidth;
  8490. },
  8491. set: function (value) {
  8492. if (this._lineWidth === value) {
  8493. return;
  8494. }
  8495. this._lineWidth = value;
  8496. this._markAsDirty();
  8497. },
  8498. enumerable: true,
  8499. configurable: true
  8500. });
  8501. Object.defineProperty(MultiLine.prototype, "horizontalAlignment", {
  8502. set: function (value) {
  8503. return;
  8504. },
  8505. enumerable: true,
  8506. configurable: true
  8507. });
  8508. Object.defineProperty(MultiLine.prototype, "verticalAlignment", {
  8509. set: function (value) {
  8510. return;
  8511. },
  8512. enumerable: true,
  8513. configurable: true
  8514. });
  8515. MultiLine.prototype._getTypeName = function () {
  8516. return "MultiLine";
  8517. };
  8518. MultiLine.prototype._draw = function (context, invalidatedRectangle) {
  8519. context.save();
  8520. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8521. context.shadowColor = this.shadowColor;
  8522. context.shadowBlur = this.shadowBlur;
  8523. context.shadowOffsetX = this.shadowOffsetX;
  8524. context.shadowOffsetY = this.shadowOffsetY;
  8525. }
  8526. this._applyStates(context);
  8527. context.strokeStyle = this.color;
  8528. context.lineWidth = this._lineWidth;
  8529. context.setLineDash(this._dash);
  8530. context.beginPath();
  8531. var first = true; //first index is not necessarily 0
  8532. this._points.forEach(function (point) {
  8533. if (!point) {
  8534. return;
  8535. }
  8536. if (first) {
  8537. context.moveTo(point._point.x, point._point.y);
  8538. first = false;
  8539. }
  8540. else {
  8541. context.lineTo(point._point.x, point._point.y);
  8542. }
  8543. });
  8544. context.stroke();
  8545. context.restore();
  8546. };
  8547. MultiLine.prototype._additionalProcessing = function (parentMeasure, context) {
  8548. var _this = this;
  8549. this._minX = null;
  8550. this._minY = null;
  8551. this._maxX = null;
  8552. this._maxY = null;
  8553. this._points.forEach(function (point, index) {
  8554. if (!point) {
  8555. return;
  8556. }
  8557. point.translate();
  8558. if (_this._minX == null || point._point.x < _this._minX) {
  8559. _this._minX = point._point.x;
  8560. }
  8561. if (_this._minY == null || point._point.y < _this._minY) {
  8562. _this._minY = point._point.y;
  8563. }
  8564. if (_this._maxX == null || point._point.x > _this._maxX) {
  8565. _this._maxX = point._point.x;
  8566. }
  8567. if (_this._maxY == null || point._point.y > _this._maxY) {
  8568. _this._maxY = point._point.y;
  8569. }
  8570. });
  8571. if (this._minX == null) {
  8572. this._minX = 0;
  8573. }
  8574. if (this._minY == null) {
  8575. this._minY = 0;
  8576. }
  8577. if (this._maxX == null) {
  8578. this._maxX = 0;
  8579. }
  8580. if (this._maxY == null) {
  8581. this._maxY = 0;
  8582. }
  8583. };
  8584. MultiLine.prototype._measure = function () {
  8585. if (this._minX == null || this._maxX == null || this._minY == null || this._maxY == null) {
  8586. return;
  8587. }
  8588. this._currentMeasure.width = Math.abs(this._maxX - this._minX) + this._lineWidth;
  8589. this._currentMeasure.height = Math.abs(this._maxY - this._minY) + this._lineWidth;
  8590. };
  8591. MultiLine.prototype._computeAlignment = function (parentMeasure, context) {
  8592. if (this._minX == null || this._minY == null) {
  8593. return;
  8594. }
  8595. this._currentMeasure.left = this._minX - this._lineWidth / 2;
  8596. this._currentMeasure.top = this._minY - this._lineWidth / 2;
  8597. };
  8598. MultiLine.prototype.dispose = function () {
  8599. this.reset();
  8600. _super.prototype.dispose.call(this);
  8601. };
  8602. return MultiLine;
  8603. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  8604. babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.MultiLine"] = MultiLine;
  8605. /***/ }),
  8606. /***/ "./2D/controls/radioButton.ts":
  8607. /*!************************************!*\
  8608. !*** ./2D/controls/radioButton.ts ***!
  8609. \************************************/
  8610. /*! exports provided: RadioButton */
  8611. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8612. "use strict";
  8613. __webpack_require__.r(__webpack_exports__);
  8614. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return RadioButton; });
  8615. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8616. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  8617. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  8618. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  8619. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  8620. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  8621. /**
  8622. * Class used to create radio button controls
  8623. */
  8624. var RadioButton = /** @class */ (function (_super) {
  8625. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(RadioButton, _super);
  8626. /**
  8627. * Creates a new RadioButton
  8628. * @param name defines the control name
  8629. */
  8630. function RadioButton(name) {
  8631. var _this = _super.call(this, name) || this;
  8632. _this.name = name;
  8633. _this._isChecked = false;
  8634. _this._background = "black";
  8635. _this._checkSizeRatio = 0.8;
  8636. _this._thickness = 1;
  8637. /** Gets or sets group name */
  8638. _this.group = "";
  8639. /** Observable raised when isChecked is changed */
  8640. _this.onIsCheckedChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  8641. _this.isPointerBlocker = true;
  8642. return _this;
  8643. }
  8644. Object.defineProperty(RadioButton.prototype, "thickness", {
  8645. /** Gets or sets border thickness */
  8646. get: function () {
  8647. return this._thickness;
  8648. },
  8649. set: function (value) {
  8650. if (this._thickness === value) {
  8651. return;
  8652. }
  8653. this._thickness = value;
  8654. this._markAsDirty();
  8655. },
  8656. enumerable: true,
  8657. configurable: true
  8658. });
  8659. Object.defineProperty(RadioButton.prototype, "checkSizeRatio", {
  8660. /** Gets or sets a value indicating the ratio between overall size and check size */
  8661. get: function () {
  8662. return this._checkSizeRatio;
  8663. },
  8664. set: function (value) {
  8665. value = Math.max(Math.min(1, value), 0);
  8666. if (this._checkSizeRatio === value) {
  8667. return;
  8668. }
  8669. this._checkSizeRatio = value;
  8670. this._markAsDirty();
  8671. },
  8672. enumerable: true,
  8673. configurable: true
  8674. });
  8675. Object.defineProperty(RadioButton.prototype, "background", {
  8676. /** Gets or sets background color */
  8677. get: function () {
  8678. return this._background;
  8679. },
  8680. set: function (value) {
  8681. if (this._background === value) {
  8682. return;
  8683. }
  8684. this._background = value;
  8685. this._markAsDirty();
  8686. },
  8687. enumerable: true,
  8688. configurable: true
  8689. });
  8690. Object.defineProperty(RadioButton.prototype, "isChecked", {
  8691. /** Gets or sets a boolean indicating if the checkbox is checked or not */
  8692. get: function () {
  8693. return this._isChecked;
  8694. },
  8695. set: function (value) {
  8696. var _this = this;
  8697. if (this._isChecked === value) {
  8698. return;
  8699. }
  8700. this._isChecked = value;
  8701. this._markAsDirty();
  8702. this.onIsCheckedChangedObservable.notifyObservers(value);
  8703. if (this._isChecked && this._host) {
  8704. // Update all controls from same group
  8705. this._host.executeOnAllControls(function (control) {
  8706. if (control === _this) {
  8707. return;
  8708. }
  8709. if (control.group === undefined) {
  8710. return;
  8711. }
  8712. var childRadio = control;
  8713. if (childRadio.group === _this.group) {
  8714. childRadio.isChecked = false;
  8715. }
  8716. });
  8717. }
  8718. },
  8719. enumerable: true,
  8720. configurable: true
  8721. });
  8722. RadioButton.prototype._getTypeName = function () {
  8723. return "RadioButton";
  8724. };
  8725. RadioButton.prototype._draw = function (context) {
  8726. context.save();
  8727. this._applyStates(context);
  8728. var actualWidth = this._currentMeasure.width - this._thickness;
  8729. var actualHeight = this._currentMeasure.height - this._thickness;
  8730. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8731. context.shadowColor = this.shadowColor;
  8732. context.shadowBlur = this.shadowBlur;
  8733. context.shadowOffsetX = this.shadowOffsetX;
  8734. context.shadowOffsetY = this.shadowOffsetY;
  8735. }
  8736. // Outer
  8737. _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);
  8738. context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
  8739. context.fill();
  8740. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8741. context.shadowBlur = 0;
  8742. context.shadowOffsetX = 0;
  8743. context.shadowOffsetY = 0;
  8744. }
  8745. context.strokeStyle = this.color;
  8746. context.lineWidth = this._thickness;
  8747. context.stroke();
  8748. // Inner
  8749. if (this._isChecked) {
  8750. context.fillStyle = this._isEnabled ? this.color : this._disabledColor;
  8751. var offsetWidth = actualWidth * this._checkSizeRatio;
  8752. var offseHeight = actualHeight * this._checkSizeRatio;
  8753. _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);
  8754. context.fill();
  8755. }
  8756. context.restore();
  8757. };
  8758. // Events
  8759. RadioButton.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  8760. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {
  8761. return false;
  8762. }
  8763. if (!this.isChecked) {
  8764. this.isChecked = true;
  8765. }
  8766. return true;
  8767. };
  8768. /**
  8769. * Utility function to easily create a radio button with a header
  8770. * @param title defines the label to use for the header
  8771. * @param group defines the group to use for the radio button
  8772. * @param isChecked defines the initial state of the radio button
  8773. * @param onValueChanged defines the callback to call when value changes
  8774. * @returns a StackPanel containing the radio button and a textBlock
  8775. */
  8776. RadioButton.AddRadioButtonWithHeader = function (title, group, isChecked, onValueChanged) {
  8777. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_3__["StackPanel"]();
  8778. panel.isVertical = false;
  8779. panel.height = "30px";
  8780. var radio = new RadioButton();
  8781. radio.width = "20px";
  8782. radio.height = "20px";
  8783. radio.isChecked = isChecked;
  8784. radio.color = "green";
  8785. radio.group = group;
  8786. radio.onIsCheckedChangedObservable.add(function (value) { return onValueChanged(radio, value); });
  8787. panel.addControl(radio);
  8788. var header = new _textBlock__WEBPACK_IMPORTED_MODULE_4__["TextBlock"]();
  8789. header.text = title;
  8790. header.width = "180px";
  8791. header.paddingLeft = "5px";
  8792. header.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_2__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  8793. header.color = "white";
  8794. panel.addControl(header);
  8795. return panel;
  8796. };
  8797. return RadioButton;
  8798. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  8799. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.RadioButton"] = RadioButton;
  8800. /***/ }),
  8801. /***/ "./2D/controls/rectangle.ts":
  8802. /*!**********************************!*\
  8803. !*** ./2D/controls/rectangle.ts ***!
  8804. \**********************************/
  8805. /*! exports provided: Rectangle */
  8806. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8807. "use strict";
  8808. __webpack_require__.r(__webpack_exports__);
  8809. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return Rectangle; });
  8810. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8811. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  8812. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  8813. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  8814. /** Class used to create rectangle container */
  8815. var Rectangle = /** @class */ (function (_super) {
  8816. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Rectangle, _super);
  8817. /**
  8818. * Creates a new Rectangle
  8819. * @param name defines the control name
  8820. */
  8821. function Rectangle(name) {
  8822. var _this = _super.call(this, name) || this;
  8823. _this.name = name;
  8824. _this._thickness = 1;
  8825. _this._cornerRadius = 0;
  8826. return _this;
  8827. }
  8828. Object.defineProperty(Rectangle.prototype, "thickness", {
  8829. /** Gets or sets border thickness */
  8830. get: function () {
  8831. return this._thickness;
  8832. },
  8833. set: function (value) {
  8834. if (this._thickness === value) {
  8835. return;
  8836. }
  8837. this._thickness = value;
  8838. this._markAsDirty();
  8839. },
  8840. enumerable: true,
  8841. configurable: true
  8842. });
  8843. Object.defineProperty(Rectangle.prototype, "cornerRadius", {
  8844. /** Gets or sets the corner radius angle */
  8845. get: function () {
  8846. return this._cornerRadius;
  8847. },
  8848. set: function (value) {
  8849. if (value < 0) {
  8850. value = 0;
  8851. }
  8852. if (this._cornerRadius === value) {
  8853. return;
  8854. }
  8855. this._cornerRadius = value;
  8856. this._markAsDirty();
  8857. },
  8858. enumerable: true,
  8859. configurable: true
  8860. });
  8861. Rectangle.prototype._getTypeName = function () {
  8862. return "Rectangle";
  8863. };
  8864. Rectangle.prototype._localDraw = function (context) {
  8865. context.save();
  8866. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8867. context.shadowColor = this.shadowColor;
  8868. context.shadowBlur = this.shadowBlur;
  8869. context.shadowOffsetX = this.shadowOffsetX;
  8870. context.shadowOffsetY = this.shadowOffsetY;
  8871. }
  8872. if (this._background) {
  8873. context.fillStyle = this._background;
  8874. if (this._cornerRadius) {
  8875. this._drawRoundedRect(context, this._thickness / 2);
  8876. context.fill();
  8877. }
  8878. else {
  8879. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  8880. }
  8881. }
  8882. if (this._thickness) {
  8883. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  8884. context.shadowBlur = 0;
  8885. context.shadowOffsetX = 0;
  8886. context.shadowOffsetY = 0;
  8887. }
  8888. if (this.color) {
  8889. context.strokeStyle = this.color;
  8890. }
  8891. context.lineWidth = this._thickness;
  8892. if (this._cornerRadius) {
  8893. this._drawRoundedRect(context, this._thickness / 2);
  8894. context.stroke();
  8895. }
  8896. else {
  8897. context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
  8898. }
  8899. }
  8900. context.restore();
  8901. };
  8902. Rectangle.prototype._additionalProcessing = function (parentMeasure, context) {
  8903. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  8904. this._measureForChildren.width -= 2 * this._thickness;
  8905. this._measureForChildren.height -= 2 * this._thickness;
  8906. this._measureForChildren.left += this._thickness;
  8907. this._measureForChildren.top += this._thickness;
  8908. };
  8909. Rectangle.prototype._drawRoundedRect = function (context, offset) {
  8910. if (offset === void 0) { offset = 0; }
  8911. var x = this._currentMeasure.left + offset;
  8912. var y = this._currentMeasure.top + offset;
  8913. var width = this._currentMeasure.width - offset * 2;
  8914. var height = this._currentMeasure.height - offset * 2;
  8915. var radius = Math.min(height / 2 - 2, Math.min(width / 2 - 2, this._cornerRadius));
  8916. context.beginPath();
  8917. context.moveTo(x + radius, y);
  8918. context.lineTo(x + width - radius, y);
  8919. context.quadraticCurveTo(x + width, y, x + width, y + radius);
  8920. context.lineTo(x + width, y + height - radius);
  8921. context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  8922. context.lineTo(x + radius, y + height);
  8923. context.quadraticCurveTo(x, y + height, x, y + height - radius);
  8924. context.lineTo(x, y + radius);
  8925. context.quadraticCurveTo(x, y, x + radius, y);
  8926. context.closePath();
  8927. };
  8928. Rectangle.prototype._clipForChildren = function (context) {
  8929. if (this._cornerRadius) {
  8930. this._drawRoundedRect(context, this._thickness);
  8931. context.clip();
  8932. }
  8933. };
  8934. return Rectangle;
  8935. }(_container__WEBPACK_IMPORTED_MODULE_1__["Container"]));
  8936. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Rectangle"] = Rectangle;
  8937. /***/ }),
  8938. /***/ "./2D/controls/scrollViewers/scrollViewer.ts":
  8939. /*!***************************************************!*\
  8940. !*** ./2D/controls/scrollViewers/scrollViewer.ts ***!
  8941. \***************************************************/
  8942. /*! exports provided: ScrollViewer */
  8943. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  8944. "use strict";
  8945. __webpack_require__.r(__webpack_exports__);
  8946. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return ScrollViewer; });
  8947. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  8948. /* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Events/pointerEvents */ "babylonjs/Misc/perfCounter");
  8949. /* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__);
  8950. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../rectangle */ "./2D/controls/rectangle.ts");
  8951. /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../grid */ "./2D/controls/grid.ts");
  8952. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
  8953. /* harmony import */ var _scrollViewerWindow__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./scrollViewerWindow */ "./2D/controls/scrollViewers/scrollViewerWindow.ts");
  8954. /* harmony import */ var _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../sliders/scrollBar */ "./2D/controls/sliders/scrollBar.ts");
  8955. /* harmony import */ var _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../sliders/imageScrollBar */ "./2D/controls/sliders/imageScrollBar.ts");
  8956. /**
  8957. * Class used to hold a viewer window and sliders in a grid
  8958. */
  8959. var ScrollViewer = /** @class */ (function (_super) {
  8960. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScrollViewer, _super);
  8961. /**
  8962. * Creates a new ScrollViewer
  8963. * @param name of ScrollViewer
  8964. */
  8965. function ScrollViewer(name, isImageBased) {
  8966. var _this = _super.call(this, name) || this;
  8967. _this._barSize = 20;
  8968. _this._pointerIsOver = false;
  8969. _this._wheelPrecision = 0.05;
  8970. _this._thumbLength = 0.5;
  8971. _this._thumbHeight = 1;
  8972. _this._barImageHeight = 1;
  8973. _this._horizontalBarImageHeight = 1;
  8974. _this._verticalBarImageHeight = 1;
  8975. _this._forceHorizontalBar = false;
  8976. _this._forceVerticalBar = false;
  8977. _this._useImageBar = isImageBased ? isImageBased : false;
  8978. _this.onDirtyObservable.add(function () {
  8979. _this._horizontalBarSpace.color = _this.color;
  8980. _this._verticalBarSpace.color = _this.color;
  8981. _this._dragSpace.color = _this.color;
  8982. });
  8983. _this.onPointerEnterObservable.add(function () {
  8984. _this._pointerIsOver = true;
  8985. });
  8986. _this.onPointerOutObservable.add(function () {
  8987. _this._pointerIsOver = false;
  8988. });
  8989. _this._grid = new _grid__WEBPACK_IMPORTED_MODULE_3__["Grid"]();
  8990. if (_this._useImageBar) {
  8991. _this._horizontalBar = new _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_7__["ImageScrollBar"]();
  8992. _this._verticalBar = new _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_7__["ImageScrollBar"]();
  8993. }
  8994. else {
  8995. _this._horizontalBar = new _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_6__["ScrollBar"]();
  8996. _this._verticalBar = new _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_6__["ScrollBar"]();
  8997. }
  8998. _this._window = new _scrollViewerWindow__WEBPACK_IMPORTED_MODULE_5__["_ScrollViewerWindow"]("scrollViewer_window");
  8999. _this._window.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9000. _this._window.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].VERTICAL_ALIGNMENT_TOP;
  9001. _this._grid.addColumnDefinition(1);
  9002. _this._grid.addColumnDefinition(0, true);
  9003. _this._grid.addRowDefinition(1);
  9004. _this._grid.addRowDefinition(0, true);
  9005. _super.prototype.addControl.call(_this, _this._grid);
  9006. _this._grid.addControl(_this._window, 0, 0);
  9007. _this._verticalBarSpace = new _rectangle__WEBPACK_IMPORTED_MODULE_2__["Rectangle"]();
  9008. _this._verticalBarSpace.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9009. _this._verticalBarSpace.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].VERTICAL_ALIGNMENT_TOP;
  9010. _this._verticalBarSpace.thickness = 1;
  9011. _this._grid.addControl(_this._verticalBarSpace, 0, 1);
  9012. _this._addBar(_this._verticalBar, _this._verticalBarSpace, true, Math.PI);
  9013. _this._horizontalBarSpace = new _rectangle__WEBPACK_IMPORTED_MODULE_2__["Rectangle"]();
  9014. _this._horizontalBarSpace.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9015. _this._horizontalBarSpace.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].VERTICAL_ALIGNMENT_TOP;
  9016. _this._horizontalBarSpace.thickness = 1;
  9017. _this._grid.addControl(_this._horizontalBarSpace, 1, 0);
  9018. _this._addBar(_this._horizontalBar, _this._horizontalBarSpace, false, 0);
  9019. _this._dragSpace = new _rectangle__WEBPACK_IMPORTED_MODULE_2__["Rectangle"]();
  9020. _this._dragSpace.thickness = 1;
  9021. _this._grid.addControl(_this._dragSpace, 1, 1);
  9022. // Colors
  9023. if (!_this._useImageBar) {
  9024. _this.barColor = "grey";
  9025. _this.barBackground = "transparent";
  9026. }
  9027. return _this;
  9028. }
  9029. Object.defineProperty(ScrollViewer.prototype, "horizontalBar", {
  9030. /**
  9031. * Gets the horizontal scrollbar
  9032. */
  9033. get: function () {
  9034. return this._horizontalBar;
  9035. },
  9036. enumerable: true,
  9037. configurable: true
  9038. });
  9039. Object.defineProperty(ScrollViewer.prototype, "verticalBar", {
  9040. /**
  9041. * Gets the vertical scrollbar
  9042. */
  9043. get: function () {
  9044. return this._verticalBar;
  9045. },
  9046. enumerable: true,
  9047. configurable: true
  9048. });
  9049. /**
  9050. * Adds a new control to the current container
  9051. * @param control defines the control to add
  9052. * @returns the current container
  9053. */
  9054. ScrollViewer.prototype.addControl = function (control) {
  9055. if (!control) {
  9056. return this;
  9057. }
  9058. this._window.addControl(control);
  9059. return this;
  9060. };
  9061. /**
  9062. * Removes a control from the current container
  9063. * @param control defines the control to remove
  9064. * @returns the current container
  9065. */
  9066. ScrollViewer.prototype.removeControl = function (control) {
  9067. this._window.removeControl(control);
  9068. return this;
  9069. };
  9070. Object.defineProperty(ScrollViewer.prototype, "children", {
  9071. /** Gets the list of children */
  9072. get: function () {
  9073. return this._window.children;
  9074. },
  9075. enumerable: true,
  9076. configurable: true
  9077. });
  9078. ScrollViewer.prototype._flagDescendantsAsMatrixDirty = function () {
  9079. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  9080. var child = _a[_i];
  9081. child._markMatrixAsDirty();
  9082. }
  9083. };
  9084. Object.defineProperty(ScrollViewer.prototype, "freezeControls", {
  9085. /**
  9086. * Freezes or unfreezes the controls in the window.
  9087. * When controls are frozen, the scroll viewer can render a lot more quickly but updates to positions/sizes of controls
  9088. * are not taken into account. If you want to change positions/sizes, unfreeze, perform the changes then freeze again
  9089. */
  9090. get: function () {
  9091. return this._window.freezeControls;
  9092. },
  9093. set: function (value) {
  9094. this._window.freezeControls = value;
  9095. },
  9096. enumerable: true,
  9097. configurable: true
  9098. });
  9099. Object.defineProperty(ScrollViewer.prototype, "bucketWidth", {
  9100. /** Gets the bucket width */
  9101. get: function () {
  9102. return this._window.bucketWidth;
  9103. },
  9104. enumerable: true,
  9105. configurable: true
  9106. });
  9107. Object.defineProperty(ScrollViewer.prototype, "bucketHeight", {
  9108. /** Gets the bucket height */
  9109. get: function () {
  9110. return this._window.bucketHeight;
  9111. },
  9112. enumerable: true,
  9113. configurable: true
  9114. });
  9115. /**
  9116. * Sets the bucket sizes.
  9117. * When freezeControls is true, setting a non-zero bucket size will improve performances by updating only
  9118. * controls that are visible. The bucket sizes is used to subdivide (internally) the window area to smaller areas into which
  9119. * controls are dispatched. So, the size should be roughly equals to the mean size of all the controls of
  9120. * the window. To disable the usage of buckets, sets either width or height (or both) to 0.
  9121. * Please note that using this option will raise the memory usage (the higher the bucket sizes, the less memory
  9122. * used), that's why it is not enabled by default.
  9123. * @param width width of the bucket
  9124. * @param height height of the bucket
  9125. */
  9126. ScrollViewer.prototype.setBucketSizes = function (width, height) {
  9127. this._window.setBucketSizes(width, height);
  9128. };
  9129. Object.defineProperty(ScrollViewer.prototype, "forceHorizontalBar", {
  9130. /**
  9131. * Forces the horizontal scroll bar to be displayed
  9132. */
  9133. get: function () {
  9134. return this._forceHorizontalBar;
  9135. },
  9136. set: function (value) {
  9137. this._grid.setRowDefinition(1, value ? this._barSize : 0, true);
  9138. this._horizontalBar.isVisible = value;
  9139. this._forceHorizontalBar = value;
  9140. },
  9141. enumerable: true,
  9142. configurable: true
  9143. });
  9144. Object.defineProperty(ScrollViewer.prototype, "forceVerticalBar", {
  9145. /**
  9146. * Forces the vertical scroll bar to be displayed
  9147. */
  9148. get: function () {
  9149. return this._forceVerticalBar;
  9150. },
  9151. set: function (value) {
  9152. this._grid.setColumnDefinition(1, value ? this._barSize : 0, true);
  9153. this._verticalBar.isVisible = value;
  9154. this._forceVerticalBar = value;
  9155. },
  9156. enumerable: true,
  9157. configurable: true
  9158. });
  9159. /** Reset the scroll viewer window to initial size */
  9160. ScrollViewer.prototype.resetWindow = function () {
  9161. this._window.width = "100%";
  9162. this._window.height = "100%";
  9163. };
  9164. ScrollViewer.prototype._getTypeName = function () {
  9165. return "ScrollViewer";
  9166. };
  9167. ScrollViewer.prototype._buildClientSizes = function () {
  9168. var ratio = this.host.idealRatio;
  9169. this._window.parentClientWidth = this._currentMeasure.width - (this._verticalBar.isVisible || this.forceVerticalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
  9170. this._window.parentClientHeight = this._currentMeasure.height - (this._horizontalBar.isVisible || this.forceHorizontalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
  9171. this._clientWidth = this._window.parentClientWidth;
  9172. this._clientHeight = this._window.parentClientHeight;
  9173. };
  9174. ScrollViewer.prototype._additionalProcessing = function (parentMeasure, context) {
  9175. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  9176. this._buildClientSizes();
  9177. };
  9178. ScrollViewer.prototype._postMeasure = function () {
  9179. _super.prototype._postMeasure.call(this);
  9180. this._updateScroller();
  9181. };
  9182. Object.defineProperty(ScrollViewer.prototype, "wheelPrecision", {
  9183. /**
  9184. * Gets or sets the mouse wheel precision
  9185. * from 0 to 1 with a default value of 0.05
  9186. * */
  9187. get: function () {
  9188. return this._wheelPrecision;
  9189. },
  9190. set: function (value) {
  9191. if (this._wheelPrecision === value) {
  9192. return;
  9193. }
  9194. if (value < 0) {
  9195. value = 0;
  9196. }
  9197. if (value > 1) {
  9198. value = 1;
  9199. }
  9200. this._wheelPrecision = value;
  9201. },
  9202. enumerable: true,
  9203. configurable: true
  9204. });
  9205. Object.defineProperty(ScrollViewer.prototype, "scrollBackground", {
  9206. /** Gets or sets the scroll bar container background color */
  9207. get: function () {
  9208. return this._horizontalBarSpace.background;
  9209. },
  9210. set: function (color) {
  9211. if (this._horizontalBarSpace.background === color) {
  9212. return;
  9213. }
  9214. this._horizontalBarSpace.background = color;
  9215. this._verticalBarSpace.background = color;
  9216. },
  9217. enumerable: true,
  9218. configurable: true
  9219. });
  9220. Object.defineProperty(ScrollViewer.prototype, "barColor", {
  9221. /** Gets or sets the bar color */
  9222. get: function () {
  9223. return this._barColor;
  9224. },
  9225. set: function (color) {
  9226. if (this._barColor === color) {
  9227. return;
  9228. }
  9229. this._barColor = color;
  9230. this._horizontalBar.color = color;
  9231. this._verticalBar.color = color;
  9232. },
  9233. enumerable: true,
  9234. configurable: true
  9235. });
  9236. Object.defineProperty(ScrollViewer.prototype, "thumbImage", {
  9237. /** Gets or sets the bar image */
  9238. get: function () {
  9239. return this._barImage;
  9240. },
  9241. set: function (value) {
  9242. if (this._barImage === value) {
  9243. return;
  9244. }
  9245. this._barImage = value;
  9246. var hb = this._horizontalBar;
  9247. var vb = this._verticalBar;
  9248. hb.thumbImage = value;
  9249. vb.thumbImage = value;
  9250. },
  9251. enumerable: true,
  9252. configurable: true
  9253. });
  9254. Object.defineProperty(ScrollViewer.prototype, "horizontalThumbImage", {
  9255. /** Gets or sets the horizontal bar image */
  9256. get: function () {
  9257. return this._horizontalBarImage;
  9258. },
  9259. set: function (value) {
  9260. if (this._horizontalBarImage === value) {
  9261. return;
  9262. }
  9263. this._horizontalBarImage = value;
  9264. var hb = this._horizontalBar;
  9265. hb.thumbImage = value;
  9266. },
  9267. enumerable: true,
  9268. configurable: true
  9269. });
  9270. Object.defineProperty(ScrollViewer.prototype, "verticalThumbImage", {
  9271. /** Gets or sets the vertical bar image */
  9272. get: function () {
  9273. return this._verticalBarImage;
  9274. },
  9275. set: function (value) {
  9276. if (this._verticalBarImage === value) {
  9277. return;
  9278. }
  9279. this._verticalBarImage = value;
  9280. var vb = this._verticalBar;
  9281. vb.thumbImage = value;
  9282. },
  9283. enumerable: true,
  9284. configurable: true
  9285. });
  9286. Object.defineProperty(ScrollViewer.prototype, "barSize", {
  9287. /** Gets or sets the size of the bar */
  9288. get: function () {
  9289. return this._barSize;
  9290. },
  9291. set: function (value) {
  9292. if (this._barSize === value) {
  9293. return;
  9294. }
  9295. this._barSize = value;
  9296. this._markAsDirty();
  9297. if (this._horizontalBar.isVisible) {
  9298. this._grid.setRowDefinition(1, this._barSize, true);
  9299. }
  9300. if (this._verticalBar.isVisible) {
  9301. this._grid.setColumnDefinition(1, this._barSize, true);
  9302. }
  9303. },
  9304. enumerable: true,
  9305. configurable: true
  9306. });
  9307. Object.defineProperty(ScrollViewer.prototype, "thumbLength", {
  9308. /** Gets or sets the length of the thumb */
  9309. get: function () {
  9310. return this._thumbLength;
  9311. },
  9312. set: function (value) {
  9313. if (this._thumbLength === value) {
  9314. return;
  9315. }
  9316. if (value <= 0) {
  9317. value = 0.1;
  9318. }
  9319. if (value > 1) {
  9320. value = 1;
  9321. }
  9322. this._thumbLength = value;
  9323. var hb = this._horizontalBar;
  9324. var vb = this._verticalBar;
  9325. hb.thumbLength = value;
  9326. vb.thumbLength = value;
  9327. this._markAsDirty();
  9328. },
  9329. enumerable: true,
  9330. configurable: true
  9331. });
  9332. Object.defineProperty(ScrollViewer.prototype, "thumbHeight", {
  9333. /** Gets or sets the height of the thumb */
  9334. get: function () {
  9335. return this._thumbHeight;
  9336. },
  9337. set: function (value) {
  9338. if (this._thumbHeight === value) {
  9339. return;
  9340. }
  9341. if (value <= 0) {
  9342. value = 0.1;
  9343. }
  9344. if (value > 1) {
  9345. value = 1;
  9346. }
  9347. this._thumbHeight = value;
  9348. var hb = this._horizontalBar;
  9349. var vb = this._verticalBar;
  9350. hb.thumbHeight = value;
  9351. vb.thumbHeight = value;
  9352. this._markAsDirty();
  9353. },
  9354. enumerable: true,
  9355. configurable: true
  9356. });
  9357. Object.defineProperty(ScrollViewer.prototype, "barImageHeight", {
  9358. /** Gets or sets the height of the bar image */
  9359. get: function () {
  9360. return this._barImageHeight;
  9361. },
  9362. set: function (value) {
  9363. if (this._barImageHeight === value) {
  9364. return;
  9365. }
  9366. if (value <= 0) {
  9367. value = 0.1;
  9368. }
  9369. if (value > 1) {
  9370. value = 1;
  9371. }
  9372. this._barImageHeight = value;
  9373. var hb = this._horizontalBar;
  9374. var vb = this._verticalBar;
  9375. hb.barImageHeight = value;
  9376. vb.barImageHeight = value;
  9377. this._markAsDirty();
  9378. },
  9379. enumerable: true,
  9380. configurable: true
  9381. });
  9382. Object.defineProperty(ScrollViewer.prototype, "horizontalBarImageHeight", {
  9383. /** Gets or sets the height of the horizontal bar image */
  9384. get: function () {
  9385. return this._horizontalBarImageHeight;
  9386. },
  9387. set: function (value) {
  9388. if (this._horizontalBarImageHeight === value) {
  9389. return;
  9390. }
  9391. if (value <= 0) {
  9392. value = 0.1;
  9393. }
  9394. if (value > 1) {
  9395. value = 1;
  9396. }
  9397. this._horizontalBarImageHeight = value;
  9398. var hb = this._horizontalBar;
  9399. hb.barImageHeight = value;
  9400. this._markAsDirty();
  9401. },
  9402. enumerable: true,
  9403. configurable: true
  9404. });
  9405. Object.defineProperty(ScrollViewer.prototype, "verticalBarImageHeight", {
  9406. /** Gets or sets the height of the vertical bar image */
  9407. get: function () {
  9408. return this._verticalBarImageHeight;
  9409. },
  9410. set: function (value) {
  9411. if (this._verticalBarImageHeight === value) {
  9412. return;
  9413. }
  9414. if (value <= 0) {
  9415. value = 0.1;
  9416. }
  9417. if (value > 1) {
  9418. value = 1;
  9419. }
  9420. this._verticalBarImageHeight = value;
  9421. var vb = this._verticalBar;
  9422. vb.barImageHeight = value;
  9423. this._markAsDirty();
  9424. },
  9425. enumerable: true,
  9426. configurable: true
  9427. });
  9428. Object.defineProperty(ScrollViewer.prototype, "barBackground", {
  9429. /** Gets or sets the bar background */
  9430. get: function () {
  9431. return this._barBackground;
  9432. },
  9433. set: function (color) {
  9434. if (this._barBackground === color) {
  9435. return;
  9436. }
  9437. this._barBackground = color;
  9438. var hb = this._horizontalBar;
  9439. var vb = this._verticalBar;
  9440. hb.background = color;
  9441. vb.background = color;
  9442. this._dragSpace.background = color;
  9443. },
  9444. enumerable: true,
  9445. configurable: true
  9446. });
  9447. Object.defineProperty(ScrollViewer.prototype, "barImage", {
  9448. /** Gets or sets the bar background image */
  9449. get: function () {
  9450. return this._barBackgroundImage;
  9451. },
  9452. set: function (value) {
  9453. if (this._barBackgroundImage === value) {
  9454. }
  9455. this._barBackgroundImage = value;
  9456. var hb = this._horizontalBar;
  9457. var vb = this._verticalBar;
  9458. hb.backgroundImage = value;
  9459. vb.backgroundImage = value;
  9460. },
  9461. enumerable: true,
  9462. configurable: true
  9463. });
  9464. Object.defineProperty(ScrollViewer.prototype, "horizontalBarImage", {
  9465. /** Gets or sets the horizontal bar background image */
  9466. get: function () {
  9467. return this._horizontalBarBackgroundImage;
  9468. },
  9469. set: function (value) {
  9470. if (this._horizontalBarBackgroundImage === value) {
  9471. }
  9472. this._horizontalBarBackgroundImage = value;
  9473. var hb = this._horizontalBar;
  9474. hb.backgroundImage = value;
  9475. },
  9476. enumerable: true,
  9477. configurable: true
  9478. });
  9479. Object.defineProperty(ScrollViewer.prototype, "verticalBarImage", {
  9480. /** Gets or sets the vertical bar background image */
  9481. get: function () {
  9482. return this._verticalBarBackgroundImage;
  9483. },
  9484. set: function (value) {
  9485. if (this._verticalBarBackgroundImage === value) {
  9486. }
  9487. this._verticalBarBackgroundImage = value;
  9488. var vb = this._verticalBar;
  9489. vb.backgroundImage = value;
  9490. },
  9491. enumerable: true,
  9492. configurable: true
  9493. });
  9494. ScrollViewer.prototype._setWindowPosition = function () {
  9495. var ratio = this.host.idealRatio;
  9496. var windowContentsWidth = this._window._currentMeasure.width;
  9497. var windowContentsHeight = this._window._currentMeasure.height;
  9498. var _endLeft = this._clientWidth - windowContentsWidth;
  9499. var _endTop = this._clientHeight - windowContentsHeight;
  9500. var newLeft = (this._horizontalBar.value / ratio) * _endLeft + "px";
  9501. var newTop = (this._verticalBar.value / ratio) * _endTop + "px";
  9502. if (newLeft !== this._window.left) {
  9503. this._window.left = newLeft;
  9504. if (!this.freezeControls) {
  9505. this._rebuildLayout = true;
  9506. }
  9507. }
  9508. if (newTop !== this._window.top) {
  9509. this._window.top = newTop;
  9510. if (!this.freezeControls) {
  9511. this._rebuildLayout = true;
  9512. }
  9513. }
  9514. };
  9515. /** @hidden */
  9516. ScrollViewer.prototype._updateScroller = function () {
  9517. var windowContentsWidth = this._window._currentMeasure.width;
  9518. var windowContentsHeight = this._window._currentMeasure.height;
  9519. if (this._horizontalBar.isVisible && windowContentsWidth <= this._clientWidth && !this.forceHorizontalBar) {
  9520. this._grid.setRowDefinition(1, 0, true);
  9521. this._horizontalBar.isVisible = false;
  9522. this._horizontalBar.value = 0;
  9523. this._rebuildLayout = true;
  9524. }
  9525. else if (!this._horizontalBar.isVisible && (windowContentsWidth > this._clientWidth || this.forceHorizontalBar)) {
  9526. this._grid.setRowDefinition(1, this._barSize, true);
  9527. this._horizontalBar.isVisible = true;
  9528. this._rebuildLayout = true;
  9529. }
  9530. if (this._verticalBar.isVisible && windowContentsHeight <= this._clientHeight && !this.forceVerticalBar) {
  9531. this._grid.setColumnDefinition(1, 0, true);
  9532. this._verticalBar.isVisible = false;
  9533. this._verticalBar.value = 0;
  9534. this._rebuildLayout = true;
  9535. }
  9536. else if (!this._verticalBar.isVisible && (windowContentsHeight > this._clientHeight || this.forceVerticalBar)) {
  9537. this._grid.setColumnDefinition(1, this._barSize, true);
  9538. this._verticalBar.isVisible = true;
  9539. this._rebuildLayout = true;
  9540. }
  9541. this._buildClientSizes();
  9542. var ratio = this.host.idealRatio;
  9543. this._horizontalBar.thumbWidth = this._thumbLength * 0.9 * (this._clientWidth / ratio) + "px";
  9544. this._verticalBar.thumbWidth = this._thumbLength * 0.9 * (this._clientHeight / ratio) + "px";
  9545. };
  9546. ScrollViewer.prototype._link = function (host) {
  9547. _super.prototype._link.call(this, host);
  9548. this._attachWheel();
  9549. };
  9550. /** @hidden */
  9551. ScrollViewer.prototype._addBar = function (barControl, barContainer, isVertical, rotation) {
  9552. var _this = this;
  9553. barControl.paddingLeft = 0;
  9554. barControl.width = "100%";
  9555. barControl.height = "100%";
  9556. barControl.barOffset = 0;
  9557. barControl.value = 0;
  9558. barControl.maximum = 1;
  9559. barControl.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  9560. barControl.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_4__["Control"].VERTICAL_ALIGNMENT_CENTER;
  9561. barControl.isVertical = isVertical;
  9562. barControl.rotation = rotation;
  9563. barControl.isVisible = false;
  9564. barContainer.addControl(barControl);
  9565. barControl.onValueChangedObservable.add(function (value) {
  9566. _this._setWindowPosition();
  9567. });
  9568. };
  9569. /** @hidden */
  9570. ScrollViewer.prototype._attachWheel = function () {
  9571. var _this = this;
  9572. if (!this._host || this._onPointerObserver) {
  9573. return;
  9574. }
  9575. var scene = this._host.getScene();
  9576. this._onPointerObserver = scene.onPointerObservable.add(function (pi, state) {
  9577. if (!_this._pointerIsOver || pi.type !== babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__["PointerEventTypes"].POINTERWHEEL) {
  9578. return;
  9579. }
  9580. if (_this._verticalBar.isVisible == true) {
  9581. if (pi.event.deltaY < 0 && _this._verticalBar.value > 0) {
  9582. _this._verticalBar.value -= _this._wheelPrecision;
  9583. }
  9584. else if (pi.event.deltaY > 0 && _this._verticalBar.value < _this._verticalBar.maximum) {
  9585. _this._verticalBar.value += _this._wheelPrecision;
  9586. }
  9587. }
  9588. if (_this._horizontalBar.isVisible == true) {
  9589. if (pi.event.deltaX < 0 && _this._horizontalBar.value < _this._horizontalBar.maximum) {
  9590. _this._horizontalBar.value += _this._wheelPrecision;
  9591. }
  9592. else if (pi.event.deltaX > 0 && _this._horizontalBar.value > 0) {
  9593. _this._horizontalBar.value -= _this._wheelPrecision;
  9594. }
  9595. }
  9596. });
  9597. };
  9598. ScrollViewer.prototype._renderHighlightSpecific = function (context) {
  9599. if (!this.isHighlighted) {
  9600. return;
  9601. }
  9602. _super.prototype._renderHighlightSpecific.call(this, context);
  9603. this._grid._renderHighlightSpecific(context);
  9604. context.restore();
  9605. };
  9606. /** Releases associated resources */
  9607. ScrollViewer.prototype.dispose = function () {
  9608. var scene = this._host.getScene();
  9609. if (scene && this._onPointerObserver) {
  9610. scene.onPointerObservable.remove(this._onPointerObserver);
  9611. this._onPointerObserver = null;
  9612. }
  9613. _super.prototype.dispose.call(this);
  9614. };
  9615. return ScrollViewer;
  9616. }(_rectangle__WEBPACK_IMPORTED_MODULE_2__["Rectangle"]));
  9617. babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.ScrollViewer"] = ScrollViewer;
  9618. /***/ }),
  9619. /***/ "./2D/controls/scrollViewers/scrollViewerWindow.ts":
  9620. /*!*********************************************************!*\
  9621. !*** ./2D/controls/scrollViewers/scrollViewerWindow.ts ***!
  9622. \*********************************************************/
  9623. /*! exports provided: _ScrollViewerWindow */
  9624. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  9625. "use strict";
  9626. __webpack_require__.r(__webpack_exports__);
  9627. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_ScrollViewerWindow", function() { return _ScrollViewerWindow; });
  9628. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  9629. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  9630. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../container */ "./2D/controls/container.ts");
  9631. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
  9632. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
  9633. /**
  9634. * Class used to hold a the container for ScrollViewer
  9635. * @hidden
  9636. */
  9637. var _ScrollViewerWindow = /** @class */ (function (_super) {
  9638. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(_ScrollViewerWindow, _super);
  9639. /**
  9640. * Creates a new ScrollViewerWindow
  9641. * @param name of ScrollViewerWindow
  9642. */
  9643. function _ScrollViewerWindow(name) {
  9644. var _this = _super.call(this, name) || this;
  9645. _this._freezeControls = false;
  9646. _this._bucketWidth = 0;
  9647. _this._bucketHeight = 0;
  9648. _this._buckets = {};
  9649. return _this;
  9650. }
  9651. Object.defineProperty(_ScrollViewerWindow.prototype, "freezeControls", {
  9652. get: function () {
  9653. return this._freezeControls;
  9654. },
  9655. set: function (value) {
  9656. if (this._freezeControls === value) {
  9657. return;
  9658. }
  9659. // trigger a full normal layout calculation to be sure all children have their measures up to date
  9660. this._freezeControls = false;
  9661. var textureSize = this.host.getSize();
  9662. var renderWidth = textureSize.width;
  9663. var renderHeight = textureSize.height;
  9664. var context = this.host.getContext();
  9665. var measure = new _measure__WEBPACK_IMPORTED_MODULE_1__["Measure"](0, 0, renderWidth, renderHeight);
  9666. this.host._numLayoutCalls = 0;
  9667. this.host._rootContainer._layout(measure, context);
  9668. // in freeze mode, prepare children measures accordingly
  9669. if (value) {
  9670. this._updateMeasures();
  9671. if (this._useBuckets()) {
  9672. this._makeBuckets();
  9673. }
  9674. }
  9675. this._freezeControls = value;
  9676. this.host.markAsDirty(); // redraw with the (new) current settings
  9677. },
  9678. enumerable: true,
  9679. configurable: true
  9680. });
  9681. Object.defineProperty(_ScrollViewerWindow.prototype, "bucketWidth", {
  9682. get: function () {
  9683. return this._bucketWidth;
  9684. },
  9685. enumerable: true,
  9686. configurable: true
  9687. });
  9688. Object.defineProperty(_ScrollViewerWindow.prototype, "bucketHeight", {
  9689. get: function () {
  9690. return this._bucketHeight;
  9691. },
  9692. enumerable: true,
  9693. configurable: true
  9694. });
  9695. _ScrollViewerWindow.prototype.setBucketSizes = function (width, height) {
  9696. this._bucketWidth = width;
  9697. this._bucketHeight = height;
  9698. if (this._useBuckets()) {
  9699. if (this._freezeControls) {
  9700. this._makeBuckets();
  9701. }
  9702. }
  9703. else {
  9704. this._buckets = {};
  9705. }
  9706. };
  9707. _ScrollViewerWindow.prototype._useBuckets = function () {
  9708. return this._bucketWidth > 0 && this._bucketHeight > 0;
  9709. };
  9710. _ScrollViewerWindow.prototype._makeBuckets = function () {
  9711. this._buckets = {};
  9712. this._bucketLen = Math.ceil(this.widthInPixels / this._bucketWidth);
  9713. this._dispatchInBuckets(this._children);
  9714. };
  9715. _ScrollViewerWindow.prototype._dispatchInBuckets = function (children) {
  9716. for (var i = 0; i < children.length; ++i) {
  9717. var child = children[i];
  9718. var bStartX = Math.max(0, Math.floor((child._currentMeasure.left - this._currentMeasure.left) / this._bucketWidth)), bEndX = Math.floor((child._currentMeasure.left - this._currentMeasure.left + child._currentMeasure.width - 1) / this._bucketWidth), bStartY = Math.max(0, Math.floor((child._currentMeasure.top - this._currentMeasure.top) / this._bucketHeight)), bEndY = Math.floor((child._currentMeasure.top - this._currentMeasure.top + child._currentMeasure.height - 1) / this._bucketHeight);
  9719. while (bStartY <= bEndY) {
  9720. for (var x = bStartX; x <= bEndX; ++x) {
  9721. var bucket = bStartY * this._bucketLen + x, lstc = this._buckets[bucket];
  9722. if (!lstc) {
  9723. lstc = [];
  9724. this._buckets[bucket] = lstc;
  9725. }
  9726. lstc.push(child);
  9727. }
  9728. bStartY++;
  9729. }
  9730. if (child instanceof _container__WEBPACK_IMPORTED_MODULE_2__["Container"] && child._children.length > 0) {
  9731. this._dispatchInBuckets(child._children);
  9732. }
  9733. }
  9734. };
  9735. // reset left and top measures for the window and all its children
  9736. _ScrollViewerWindow.prototype._updateMeasures = function () {
  9737. var left = this.leftInPixels | 0, top = this.topInPixels | 0;
  9738. this._measureForChildren.left -= left;
  9739. this._measureForChildren.top -= top;
  9740. this._currentMeasure.left -= left;
  9741. this._currentMeasure.top -= top;
  9742. this._updateChildrenMeasures(this._children, left, top);
  9743. };
  9744. _ScrollViewerWindow.prototype._updateChildrenMeasures = function (children, left, top) {
  9745. for (var i = 0; i < children.length; ++i) {
  9746. var child = children[i];
  9747. child._currentMeasure.left -= left;
  9748. child._currentMeasure.top -= top;
  9749. child._customData._origLeft = child._currentMeasure.left; // save the original left and top values for each child
  9750. child._customData._origTop = child._currentMeasure.top;
  9751. if (child instanceof _container__WEBPACK_IMPORTED_MODULE_2__["Container"] && child._children.length > 0) {
  9752. this._updateChildrenMeasures(child._children, left, top);
  9753. }
  9754. }
  9755. };
  9756. _ScrollViewerWindow.prototype._getTypeName = function () {
  9757. return "ScrollViewerWindow";
  9758. };
  9759. /** @hidden */
  9760. _ScrollViewerWindow.prototype._additionalProcessing = function (parentMeasure, context) {
  9761. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  9762. this._parentMeasure = parentMeasure;
  9763. this._measureForChildren.left = this._currentMeasure.left;
  9764. this._measureForChildren.top = this._currentMeasure.top;
  9765. this._measureForChildren.width = parentMeasure.width;
  9766. this._measureForChildren.height = parentMeasure.height;
  9767. };
  9768. /** @hidden */
  9769. _ScrollViewerWindow.prototype._layout = function (parentMeasure, context) {
  9770. if (this._freezeControls) {
  9771. this.invalidateRect(); // will trigger a redraw of the window
  9772. return false;
  9773. }
  9774. return _super.prototype._layout.call(this, parentMeasure, context);
  9775. };
  9776. _ScrollViewerWindow.prototype._scrollChildren = function (children, left, top) {
  9777. for (var i = 0; i < children.length; ++i) {
  9778. var child = children[i];
  9779. child._currentMeasure.left = child._customData._origLeft + left;
  9780. child._currentMeasure.top = child._customData._origTop + top;
  9781. child._isClipped = false; // clipping will be handled by _draw and the call to _intersectsRect()
  9782. if (child instanceof _container__WEBPACK_IMPORTED_MODULE_2__["Container"] && child._children.length > 0) {
  9783. this._scrollChildren(child._children, left, top);
  9784. }
  9785. }
  9786. };
  9787. _ScrollViewerWindow.prototype._scrollChildrenWithBuckets = function (left, top, scrollLeft, scrollTop) {
  9788. 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);
  9789. while (bStartY <= bEndY) {
  9790. for (var x = bStartX; x <= bEndX; ++x) {
  9791. var bucket = bStartY * this._bucketLen + x, lstc = this._buckets[bucket];
  9792. if (lstc) {
  9793. for (var i = 0; i < lstc.length; ++i) {
  9794. var child = lstc[i];
  9795. child._currentMeasure.left = child._customData._origLeft + scrollLeft;
  9796. child._currentMeasure.top = child._customData._origTop + scrollTop;
  9797. child._isClipped = false; // clipping will be handled by _draw and the call to _intersectsRect()
  9798. }
  9799. }
  9800. }
  9801. bStartY++;
  9802. }
  9803. };
  9804. /** @hidden */
  9805. _ScrollViewerWindow.prototype._draw = function (context, invalidatedRectangle) {
  9806. if (!this._freezeControls) {
  9807. _super.prototype._draw.call(this, context, invalidatedRectangle);
  9808. return;
  9809. }
  9810. this._localDraw(context);
  9811. if (this.clipChildren) {
  9812. this._clipForChildren(context);
  9813. }
  9814. var left = this.leftInPixels, top = this.topInPixels;
  9815. if (this._useBuckets()) {
  9816. this._scrollChildrenWithBuckets(this._oldLeft, this._oldTop, left, top);
  9817. this._scrollChildrenWithBuckets(left, top, left, top);
  9818. }
  9819. else {
  9820. this._scrollChildren(this._children, left, top);
  9821. }
  9822. this._oldLeft = left;
  9823. this._oldTop = top;
  9824. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  9825. var child = _a[_i];
  9826. if (!child._intersectsRect(this._parentMeasure)) {
  9827. continue;
  9828. }
  9829. child._render(context, this._parentMeasure);
  9830. }
  9831. };
  9832. _ScrollViewerWindow.prototype._postMeasure = function () {
  9833. if (this._freezeControls) {
  9834. _super.prototype._postMeasure.call(this);
  9835. return;
  9836. }
  9837. var maxWidth = this.parentClientWidth;
  9838. var maxHeight = this.parentClientHeight;
  9839. for (var _i = 0, _a = this.children; _i < _a.length; _i++) {
  9840. var child = _a[_i];
  9841. if (!child.isVisible || child.notRenderable) {
  9842. continue;
  9843. }
  9844. if (child.horizontalAlignment === _control__WEBPACK_IMPORTED_MODULE_4__["Control"].HORIZONTAL_ALIGNMENT_CENTER) {
  9845. child._offsetLeft(this._currentMeasure.left - child._currentMeasure.left);
  9846. }
  9847. if (child.verticalAlignment === _control__WEBPACK_IMPORTED_MODULE_4__["Control"].VERTICAL_ALIGNMENT_CENTER) {
  9848. child._offsetTop(this._currentMeasure.top - child._currentMeasure.top);
  9849. }
  9850. maxWidth = Math.max(maxWidth, child._currentMeasure.left - this._currentMeasure.left + child._currentMeasure.width);
  9851. maxHeight = Math.max(maxHeight, child._currentMeasure.top - this._currentMeasure.top + child._currentMeasure.height);
  9852. }
  9853. if (this._currentMeasure.width !== maxWidth) {
  9854. this._width.updateInPlace(maxWidth, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL);
  9855. this._currentMeasure.width = maxWidth;
  9856. this._rebuildLayout = true;
  9857. this._isDirty = true;
  9858. }
  9859. if (this._currentMeasure.height !== maxHeight) {
  9860. this._height.updateInPlace(maxHeight, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL);
  9861. this._currentMeasure.height = maxHeight;
  9862. this._rebuildLayout = true;
  9863. this._isDirty = true;
  9864. }
  9865. _super.prototype._postMeasure.call(this);
  9866. };
  9867. return _ScrollViewerWindow;
  9868. }(_container__WEBPACK_IMPORTED_MODULE_2__["Container"]));
  9869. /***/ }),
  9870. /***/ "./2D/controls/selector.ts":
  9871. /*!*********************************!*\
  9872. !*** ./2D/controls/selector.ts ***!
  9873. \*********************************/
  9874. /*! exports provided: SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel */
  9875. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  9876. "use strict";
  9877. __webpack_require__.r(__webpack_exports__);
  9878. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return SelectorGroup; });
  9879. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return CheckboxGroup; });
  9880. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return RadioGroup; });
  9881. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return SliderGroup; });
  9882. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return SelectionPanel; });
  9883. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  9884. /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./rectangle */ "./2D/controls/rectangle.ts");
  9885. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  9886. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  9887. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  9888. /* harmony import */ var _checkbox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./checkbox */ "./2D/controls/checkbox.ts");
  9889. /* harmony import */ var _radioButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./radioButton */ "./2D/controls/radioButton.ts");
  9890. /* harmony import */ var _sliders_slider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./sliders/slider */ "./2D/controls/sliders/slider.ts");
  9891. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  9892. /** Class used to create a RadioGroup
  9893. * which contains groups of radio buttons
  9894. */
  9895. var SelectorGroup = /** @class */ (function () {
  9896. /**
  9897. * Creates a new SelectorGroup
  9898. * @param name of group, used as a group heading
  9899. */
  9900. function SelectorGroup(
  9901. /** name of SelectorGroup */
  9902. name) {
  9903. this.name = name;
  9904. this._groupPanel = new _stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]();
  9905. this._selectors = new Array();
  9906. this._groupPanel.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  9907. this._groupPanel.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9908. this._groupHeader = this._addGroupHeader(name);
  9909. }
  9910. Object.defineProperty(SelectorGroup.prototype, "groupPanel", {
  9911. /** Gets the groupPanel of the SelectorGroup */
  9912. get: function () {
  9913. return this._groupPanel;
  9914. },
  9915. enumerable: true,
  9916. configurable: true
  9917. });
  9918. Object.defineProperty(SelectorGroup.prototype, "selectors", {
  9919. /** Gets the selectors array */
  9920. get: function () {
  9921. return this._selectors;
  9922. },
  9923. enumerable: true,
  9924. configurable: true
  9925. });
  9926. Object.defineProperty(SelectorGroup.prototype, "header", {
  9927. /** Gets and sets the group header */
  9928. get: function () {
  9929. return this._groupHeader.text;
  9930. },
  9931. set: function (label) {
  9932. if (this._groupHeader.text === "label") {
  9933. return;
  9934. }
  9935. this._groupHeader.text = label;
  9936. },
  9937. enumerable: true,
  9938. configurable: true
  9939. });
  9940. /** @hidden */
  9941. SelectorGroup.prototype._addGroupHeader = function (text) {
  9942. var groupHeading = new _textBlock__WEBPACK_IMPORTED_MODULE_4__["TextBlock"]("groupHead", text);
  9943. groupHeading.width = 0.9;
  9944. groupHeading.height = "30px";
  9945. groupHeading.textWrapping = true;
  9946. groupHeading.color = "black";
  9947. groupHeading.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9948. groupHeading.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9949. groupHeading.left = "2px";
  9950. this._groupPanel.addControl(groupHeading);
  9951. return groupHeading;
  9952. };
  9953. /** @hidden*/
  9954. SelectorGroup.prototype._getSelector = function (selectorNb) {
  9955. if (selectorNb < 0 || selectorNb >= this._selectors.length) {
  9956. return;
  9957. }
  9958. return this._selectors[selectorNb];
  9959. };
  9960. /** Removes the selector at the given position
  9961. * @param selectorNb the position of the selector within the group
  9962. */
  9963. SelectorGroup.prototype.removeSelector = function (selectorNb) {
  9964. if (selectorNb < 0 || selectorNb >= this._selectors.length) {
  9965. return;
  9966. }
  9967. this._groupPanel.removeControl(this._selectors[selectorNb]);
  9968. this._selectors.splice(selectorNb, 1);
  9969. };
  9970. return SelectorGroup;
  9971. }());
  9972. /** Class used to create a CheckboxGroup
  9973. * which contains groups of checkbox buttons
  9974. */
  9975. var CheckboxGroup = /** @class */ (function (_super) {
  9976. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CheckboxGroup, _super);
  9977. function CheckboxGroup() {
  9978. return _super !== null && _super.apply(this, arguments) || this;
  9979. }
  9980. /** Adds a checkbox as a control
  9981. * @param text is the label for the selector
  9982. * @param func is the function called when the Selector is checked
  9983. * @param checked is true when Selector is checked
  9984. */
  9985. CheckboxGroup.prototype.addCheckbox = function (text, func, checked) {
  9986. if (func === void 0) { func = function (s) { }; }
  9987. if (checked === void 0) { checked = false; }
  9988. var checked = checked || false;
  9989. var button = new _checkbox__WEBPACK_IMPORTED_MODULE_5__["Checkbox"]();
  9990. button.width = "20px";
  9991. button.height = "20px";
  9992. button.color = "#364249";
  9993. button.background = "#CCCCCC";
  9994. button.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  9995. button.onIsCheckedChangedObservable.add(function (state) {
  9996. func(state);
  9997. });
  9998. var _selector = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
  9999. _selector.height = "30px";
  10000. _selector.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10001. _selector.left = "4px";
  10002. this.groupPanel.addControl(_selector);
  10003. this.selectors.push(_selector);
  10004. button.isChecked = checked;
  10005. if (this.groupPanel.parent && this.groupPanel.parent.parent) {
  10006. button.color = this.groupPanel.parent.parent.buttonColor;
  10007. button.background = this.groupPanel.parent.parent.buttonBackground;
  10008. }
  10009. };
  10010. /** @hidden */
  10011. CheckboxGroup.prototype._setSelectorLabel = function (selectorNb, label) {
  10012. this.selectors[selectorNb].children[1].text = label;
  10013. };
  10014. /** @hidden */
  10015. CheckboxGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
  10016. this.selectors[selectorNb].children[1].color = color;
  10017. };
  10018. /** @hidden */
  10019. CheckboxGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
  10020. this.selectors[selectorNb].children[0].color = color;
  10021. };
  10022. /** @hidden */
  10023. CheckboxGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
  10024. this.selectors[selectorNb].children[0].background = color;
  10025. };
  10026. return CheckboxGroup;
  10027. }(SelectorGroup));
  10028. /** Class used to create a RadioGroup
  10029. * which contains groups of radio buttons
  10030. */
  10031. var RadioGroup = /** @class */ (function (_super) {
  10032. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(RadioGroup, _super);
  10033. function RadioGroup() {
  10034. var _this = _super !== null && _super.apply(this, arguments) || this;
  10035. _this._selectNb = 0;
  10036. return _this;
  10037. }
  10038. /** Adds a radio button as a control
  10039. * @param label is the label for the selector
  10040. * @param func is the function called when the Selector is checked
  10041. * @param checked is true when Selector is checked
  10042. */
  10043. RadioGroup.prototype.addRadio = function (label, func, checked) {
  10044. if (func === void 0) { func = function (n) { }; }
  10045. if (checked === void 0) { checked = false; }
  10046. var nb = this._selectNb++;
  10047. var button = new _radioButton__WEBPACK_IMPORTED_MODULE_6__["RadioButton"]();
  10048. button.name = label;
  10049. button.width = "20px";
  10050. button.height = "20px";
  10051. button.color = "#364249";
  10052. button.background = "#CCCCCC";
  10053. button.group = this.name;
  10054. button.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10055. button.onIsCheckedChangedObservable.add(function (state) {
  10056. if (state) {
  10057. func(nb);
  10058. }
  10059. });
  10060. var _selector = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].AddHeader(button, label, "200px", { isHorizontal: true, controlFirst: true });
  10061. _selector.height = "30px";
  10062. _selector.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10063. _selector.left = "4px";
  10064. this.groupPanel.addControl(_selector);
  10065. this.selectors.push(_selector);
  10066. button.isChecked = checked;
  10067. if (this.groupPanel.parent && this.groupPanel.parent.parent) {
  10068. button.color = this.groupPanel.parent.parent.buttonColor;
  10069. button.background = this.groupPanel.parent.parent.buttonBackground;
  10070. }
  10071. };
  10072. /** @hidden */
  10073. RadioGroup.prototype._setSelectorLabel = function (selectorNb, label) {
  10074. this.selectors[selectorNb].children[1].text = label;
  10075. };
  10076. /** @hidden */
  10077. RadioGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
  10078. this.selectors[selectorNb].children[1].color = color;
  10079. };
  10080. /** @hidden */
  10081. RadioGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
  10082. this.selectors[selectorNb].children[0].color = color;
  10083. };
  10084. /** @hidden */
  10085. RadioGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
  10086. this.selectors[selectorNb].children[0].background = color;
  10087. };
  10088. return RadioGroup;
  10089. }(SelectorGroup));
  10090. /** Class used to create a SliderGroup
  10091. * which contains groups of slider buttons
  10092. */
  10093. var SliderGroup = /** @class */ (function (_super) {
  10094. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SliderGroup, _super);
  10095. function SliderGroup() {
  10096. return _super !== null && _super.apply(this, arguments) || this;
  10097. }
  10098. /**
  10099. * Adds a slider to the SelectorGroup
  10100. * @param label is the label for the SliderBar
  10101. * @param func is the function called when the Slider moves
  10102. * @param unit is a string describing the units used, eg degrees or metres
  10103. * @param min is the minimum value for the Slider
  10104. * @param max is the maximum value for the Slider
  10105. * @param value is the start value for the Slider between min and max
  10106. * @param onValueChange is the function used to format the value displayed, eg radians to degrees
  10107. */
  10108. SliderGroup.prototype.addSlider = function (label, func, unit, min, max, value, onValueChange) {
  10109. if (func === void 0) { func = function (v) { }; }
  10110. if (unit === void 0) { unit = "Units"; }
  10111. if (min === void 0) { min = 0; }
  10112. if (max === void 0) { max = 0; }
  10113. if (value === void 0) { value = 0; }
  10114. if (onValueChange === void 0) { onValueChange = function (v) { return v | 0; }; }
  10115. var button = new _sliders_slider__WEBPACK_IMPORTED_MODULE_7__["Slider"]();
  10116. button.name = unit;
  10117. button.value = value;
  10118. button.minimum = min;
  10119. button.maximum = max;
  10120. button.width = 0.9;
  10121. button.height = "20px";
  10122. button.color = "#364249";
  10123. button.background = "#CCCCCC";
  10124. button.borderColor = "black";
  10125. button.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10126. button.left = "4px";
  10127. button.paddingBottom = "4px";
  10128. button.onValueChangedObservable.add(function (value) {
  10129. button.parent.children[0].text = button.parent.children[0].name + ": " + onValueChange(value) + " " + button.name;
  10130. func(value);
  10131. });
  10132. var _selector = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].AddHeader(button, label + ": " + onValueChange(value) + " " + unit, "30px", { isHorizontal: false, controlFirst: false });
  10133. _selector.height = "60px";
  10134. _selector.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10135. _selector.left = "4px";
  10136. _selector.children[0].name = label;
  10137. this.groupPanel.addControl(_selector);
  10138. this.selectors.push(_selector);
  10139. if (this.groupPanel.parent && this.groupPanel.parent.parent) {
  10140. button.color = this.groupPanel.parent.parent.buttonColor;
  10141. button.background = this.groupPanel.parent.parent.buttonBackground;
  10142. }
  10143. };
  10144. /** @hidden */
  10145. SliderGroup.prototype._setSelectorLabel = function (selectorNb, label) {
  10146. this.selectors[selectorNb].children[0].name = label;
  10147. this.selectors[selectorNb].children[0].text = label + ": " + this.selectors[selectorNb].children[1].value + " " + this.selectors[selectorNb].children[1].name;
  10148. };
  10149. /** @hidden */
  10150. SliderGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
  10151. this.selectors[selectorNb].children[0].color = color;
  10152. };
  10153. /** @hidden */
  10154. SliderGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
  10155. this.selectors[selectorNb].children[1].color = color;
  10156. };
  10157. /** @hidden */
  10158. SliderGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
  10159. this.selectors[selectorNb].children[1].background = color;
  10160. };
  10161. return SliderGroup;
  10162. }(SelectorGroup));
  10163. /** Class used to hold the controls for the checkboxes, radio buttons and sliders
  10164. * @see http://doc.babylonjs.com/how_to/selector
  10165. */
  10166. var SelectionPanel = /** @class */ (function (_super) {
  10167. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SelectionPanel, _super);
  10168. /**
  10169. * Creates a new SelectionPanel
  10170. * @param name of SelectionPanel
  10171. * @param groups is an array of SelectionGroups
  10172. */
  10173. function SelectionPanel(
  10174. /** name of SelectionPanel */
  10175. name,
  10176. /** an array of SelectionGroups */
  10177. groups) {
  10178. if (groups === void 0) { groups = []; }
  10179. var _this = _super.call(this, name) || this;
  10180. _this.name = name;
  10181. _this.groups = groups;
  10182. _this._buttonColor = "#364249";
  10183. _this._buttonBackground = "#CCCCCC";
  10184. _this._headerColor = "black";
  10185. _this._barColor = "white";
  10186. _this._barHeight = "2px";
  10187. _this._spacerHeight = "20px";
  10188. _this._bars = new Array();
  10189. _this._groups = groups;
  10190. _this.thickness = 2;
  10191. _this._panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]();
  10192. _this._panel.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  10193. _this._panel.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10194. _this._panel.top = 5;
  10195. _this._panel.left = 5;
  10196. _this._panel.width = 0.95;
  10197. if (groups.length > 0) {
  10198. for (var i = 0; i < groups.length - 1; i++) {
  10199. _this._panel.addControl(groups[i].groupPanel);
  10200. _this._addSpacer();
  10201. }
  10202. _this._panel.addControl(groups[groups.length - 1].groupPanel);
  10203. }
  10204. _this.addControl(_this._panel);
  10205. return _this;
  10206. }
  10207. SelectionPanel.prototype._getTypeName = function () {
  10208. return "SelectionPanel";
  10209. };
  10210. Object.defineProperty(SelectionPanel.prototype, "headerColor", {
  10211. /** Gets or sets the headerColor */
  10212. get: function () {
  10213. return this._headerColor;
  10214. },
  10215. set: function (color) {
  10216. if (this._headerColor === color) {
  10217. return;
  10218. }
  10219. this._headerColor = color;
  10220. this._setHeaderColor();
  10221. },
  10222. enumerable: true,
  10223. configurable: true
  10224. });
  10225. SelectionPanel.prototype._setHeaderColor = function () {
  10226. for (var i = 0; i < this._groups.length; i++) {
  10227. this._groups[i].groupPanel.children[0].color = this._headerColor;
  10228. }
  10229. };
  10230. Object.defineProperty(SelectionPanel.prototype, "buttonColor", {
  10231. /** Gets or sets the button color */
  10232. get: function () {
  10233. return this._buttonColor;
  10234. },
  10235. set: function (color) {
  10236. if (this._buttonColor === color) {
  10237. return;
  10238. }
  10239. this._buttonColor = color;
  10240. this._setbuttonColor();
  10241. },
  10242. enumerable: true,
  10243. configurable: true
  10244. });
  10245. SelectionPanel.prototype._setbuttonColor = function () {
  10246. for (var i = 0; i < this._groups.length; i++) {
  10247. for (var j = 0; j < this._groups[i].selectors.length; j++) {
  10248. this._groups[i]._setSelectorButtonColor(j, this._buttonColor);
  10249. }
  10250. }
  10251. };
  10252. Object.defineProperty(SelectionPanel.prototype, "labelColor", {
  10253. /** Gets or sets the label color */
  10254. get: function () {
  10255. return this._labelColor;
  10256. },
  10257. set: function (color) {
  10258. if (this._labelColor === color) {
  10259. return;
  10260. }
  10261. this._labelColor = color;
  10262. this._setLabelColor();
  10263. },
  10264. enumerable: true,
  10265. configurable: true
  10266. });
  10267. SelectionPanel.prototype._setLabelColor = function () {
  10268. for (var i = 0; i < this._groups.length; i++) {
  10269. for (var j = 0; j < this._groups[i].selectors.length; j++) {
  10270. this._groups[i]._setSelectorLabelColor(j, this._labelColor);
  10271. }
  10272. }
  10273. };
  10274. Object.defineProperty(SelectionPanel.prototype, "buttonBackground", {
  10275. /** Gets or sets the button background */
  10276. get: function () {
  10277. return this._buttonBackground;
  10278. },
  10279. set: function (color) {
  10280. if (this._buttonBackground === color) {
  10281. return;
  10282. }
  10283. this._buttonBackground = color;
  10284. this._setButtonBackground();
  10285. },
  10286. enumerable: true,
  10287. configurable: true
  10288. });
  10289. SelectionPanel.prototype._setButtonBackground = function () {
  10290. for (var i = 0; i < this._groups.length; i++) {
  10291. for (var j = 0; j < this._groups[i].selectors.length; j++) {
  10292. this._groups[i]._setSelectorButtonBackground(j, this._buttonBackground);
  10293. }
  10294. }
  10295. };
  10296. Object.defineProperty(SelectionPanel.prototype, "barColor", {
  10297. /** Gets or sets the color of separator bar */
  10298. get: function () {
  10299. return this._barColor;
  10300. },
  10301. set: function (color) {
  10302. if (this._barColor === color) {
  10303. return;
  10304. }
  10305. this._barColor = color;
  10306. this._setBarColor();
  10307. },
  10308. enumerable: true,
  10309. configurable: true
  10310. });
  10311. SelectionPanel.prototype._setBarColor = function () {
  10312. for (var i = 0; i < this._bars.length; i++) {
  10313. this._bars[i].children[0].background = this._barColor;
  10314. }
  10315. };
  10316. Object.defineProperty(SelectionPanel.prototype, "barHeight", {
  10317. /** Gets or sets the height of separator bar */
  10318. get: function () {
  10319. return this._barHeight;
  10320. },
  10321. set: function (value) {
  10322. if (this._barHeight === value) {
  10323. return;
  10324. }
  10325. this._barHeight = value;
  10326. this._setBarHeight();
  10327. },
  10328. enumerable: true,
  10329. configurable: true
  10330. });
  10331. SelectionPanel.prototype._setBarHeight = function () {
  10332. for (var i = 0; i < this._bars.length; i++) {
  10333. this._bars[i].children[0].height = this._barHeight;
  10334. }
  10335. };
  10336. Object.defineProperty(SelectionPanel.prototype, "spacerHeight", {
  10337. /** Gets or sets the height of spacers*/
  10338. get: function () {
  10339. return this._spacerHeight;
  10340. },
  10341. set: function (value) {
  10342. if (this._spacerHeight === value) {
  10343. return;
  10344. }
  10345. this._spacerHeight = value;
  10346. this._setSpacerHeight();
  10347. },
  10348. enumerable: true,
  10349. configurable: true
  10350. });
  10351. SelectionPanel.prototype._setSpacerHeight = function () {
  10352. for (var i = 0; i < this._bars.length; i++) {
  10353. this._bars[i].height = this._spacerHeight;
  10354. }
  10355. };
  10356. /** Adds a bar between groups */
  10357. SelectionPanel.prototype._addSpacer = function () {
  10358. var separator = new _container__WEBPACK_IMPORTED_MODULE_8__["Container"]();
  10359. separator.width = 1;
  10360. separator.height = this._spacerHeight;
  10361. separator.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10362. var bar = new _rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]();
  10363. bar.width = 1;
  10364. bar.height = this._barHeight;
  10365. bar.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  10366. bar.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER;
  10367. bar.background = this._barColor;
  10368. bar.color = "transparent";
  10369. separator.addControl(bar);
  10370. this._panel.addControl(separator);
  10371. this._bars.push(separator);
  10372. };
  10373. /** Add a group to the selection panel
  10374. * @param group is the selector group to add
  10375. */
  10376. SelectionPanel.prototype.addGroup = function (group) {
  10377. if (this._groups.length > 0) {
  10378. this._addSpacer();
  10379. }
  10380. this._panel.addControl(group.groupPanel);
  10381. this._groups.push(group);
  10382. group.groupPanel.children[0].color = this._headerColor;
  10383. for (var j = 0; j < group.selectors.length; j++) {
  10384. group._setSelectorButtonColor(j, this._buttonColor);
  10385. group._setSelectorButtonBackground(j, this._buttonBackground);
  10386. }
  10387. };
  10388. /** Remove the group from the given position
  10389. * @param groupNb is the position of the group in the list
  10390. */
  10391. SelectionPanel.prototype.removeGroup = function (groupNb) {
  10392. if (groupNb < 0 || groupNb >= this._groups.length) {
  10393. return;
  10394. }
  10395. var group = this._groups[groupNb];
  10396. this._panel.removeControl(group.groupPanel);
  10397. this._groups.splice(groupNb, 1);
  10398. if (groupNb < this._bars.length) {
  10399. this._panel.removeControl(this._bars[groupNb]);
  10400. this._bars.splice(groupNb, 1);
  10401. }
  10402. };
  10403. /** Change a group header label
  10404. * @param label is the new group header label
  10405. * @param groupNb is the number of the group to relabel
  10406. * */
  10407. SelectionPanel.prototype.setHeaderName = function (label, groupNb) {
  10408. if (groupNb < 0 || groupNb >= this._groups.length) {
  10409. return;
  10410. }
  10411. var group = this._groups[groupNb];
  10412. group.groupPanel.children[0].text = label;
  10413. };
  10414. /** Change selector label to the one given
  10415. * @param label is the new selector label
  10416. * @param groupNb is the number of the groupcontaining the selector
  10417. * @param selectorNb is the number of the selector within a group to relabel
  10418. * */
  10419. SelectionPanel.prototype.relabel = function (label, groupNb, selectorNb) {
  10420. if (groupNb < 0 || groupNb >= this._groups.length) {
  10421. return;
  10422. }
  10423. var group = this._groups[groupNb];
  10424. if (selectorNb < 0 || selectorNb >= group.selectors.length) {
  10425. return;
  10426. }
  10427. group._setSelectorLabel(selectorNb, label);
  10428. };
  10429. /** For a given group position remove the selector at the given position
  10430. * @param groupNb is the number of the group to remove the selector from
  10431. * @param selectorNb is the number of the selector within the group
  10432. */
  10433. SelectionPanel.prototype.removeFromGroupSelector = function (groupNb, selectorNb) {
  10434. if (groupNb < 0 || groupNb >= this._groups.length) {
  10435. return;
  10436. }
  10437. var group = this._groups[groupNb];
  10438. if (selectorNb < 0 || selectorNb >= group.selectors.length) {
  10439. return;
  10440. }
  10441. group.removeSelector(selectorNb);
  10442. };
  10443. /** For a given group position of correct type add a checkbox button
  10444. * @param groupNb is the number of the group to remove the selector from
  10445. * @param label is the label for the selector
  10446. * @param func is the function called when the Selector is checked
  10447. * @param checked is true when Selector is checked
  10448. */
  10449. SelectionPanel.prototype.addToGroupCheckbox = function (groupNb, label, func, checked) {
  10450. if (func === void 0) { func = function () { }; }
  10451. if (checked === void 0) { checked = false; }
  10452. if (groupNb < 0 || groupNb >= this._groups.length) {
  10453. return;
  10454. }
  10455. var group = this._groups[groupNb];
  10456. group.addCheckbox(label, func, checked);
  10457. };
  10458. /** For a given group position of correct type add a radio button
  10459. * @param groupNb is the number of the group to remove the selector from
  10460. * @param label is the label for the selector
  10461. * @param func is the function called when the Selector is checked
  10462. * @param checked is true when Selector is checked
  10463. */
  10464. SelectionPanel.prototype.addToGroupRadio = function (groupNb, label, func, checked) {
  10465. if (func === void 0) { func = function () { }; }
  10466. if (checked === void 0) { checked = false; }
  10467. if (groupNb < 0 || groupNb >= this._groups.length) {
  10468. return;
  10469. }
  10470. var group = this._groups[groupNb];
  10471. group.addRadio(label, func, checked);
  10472. };
  10473. /**
  10474. * For a given slider group add a slider
  10475. * @param groupNb is the number of the group to add the slider to
  10476. * @param label is the label for the Slider
  10477. * @param func is the function called when the Slider moves
  10478. * @param unit is a string describing the units used, eg degrees or metres
  10479. * @param min is the minimum value for the Slider
  10480. * @param max is the maximum value for the Slider
  10481. * @param value is the start value for the Slider between min and max
  10482. * @param onVal is the function used to format the value displayed, eg radians to degrees
  10483. */
  10484. SelectionPanel.prototype.addToGroupSlider = function (groupNb, label, func, unit, min, max, value, onVal) {
  10485. if (func === void 0) { func = function () { }; }
  10486. if (unit === void 0) { unit = "Units"; }
  10487. if (min === void 0) { min = 0; }
  10488. if (max === void 0) { max = 0; }
  10489. if (value === void 0) { value = 0; }
  10490. if (onVal === void 0) { onVal = function (v) { return v | 0; }; }
  10491. if (groupNb < 0 || groupNb >= this._groups.length) {
  10492. return;
  10493. }
  10494. var group = this._groups[groupNb];
  10495. group.addSlider(label, func, unit, min, max, value, onVal);
  10496. };
  10497. return SelectionPanel;
  10498. }(_rectangle__WEBPACK_IMPORTED_MODULE_1__["Rectangle"]));
  10499. /***/ }),
  10500. /***/ "./2D/controls/sliders/baseSlider.ts":
  10501. /*!*******************************************!*\
  10502. !*** ./2D/controls/sliders/baseSlider.ts ***!
  10503. \*******************************************/
  10504. /*! exports provided: BaseSlider */
  10505. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  10506. "use strict";
  10507. __webpack_require__.r(__webpack_exports__);
  10508. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return BaseSlider; });
  10509. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  10510. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  10511. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  10512. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
  10513. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
  10514. /**
  10515. * Class used to create slider controls
  10516. */
  10517. var BaseSlider = /** @class */ (function (_super) {
  10518. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(BaseSlider, _super);
  10519. /**
  10520. * Creates a new BaseSlider
  10521. * @param name defines the control name
  10522. */
  10523. function BaseSlider(name) {
  10524. var _this = _super.call(this, name) || this;
  10525. _this.name = name;
  10526. _this._thumbWidth = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](20, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL, false);
  10527. _this._minimum = 0;
  10528. _this._maximum = 100;
  10529. _this._value = 50;
  10530. _this._isVertical = false;
  10531. _this._barOffset = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](5, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL, false);
  10532. _this._isThumbClamped = false;
  10533. _this._displayThumb = true;
  10534. _this._step = 0;
  10535. _this._lastPointerDownID = -1;
  10536. // Shared rendering info
  10537. _this._effectiveBarOffset = 0;
  10538. /** Observable raised when the sldier value changes */
  10539. _this.onValueChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  10540. // Events
  10541. _this._pointerIsDown = false;
  10542. _this.isPointerBlocker = true;
  10543. return _this;
  10544. }
  10545. Object.defineProperty(BaseSlider.prototype, "displayThumb", {
  10546. /** Gets or sets a boolean indicating if the thumb must be rendered */
  10547. get: function () {
  10548. return this._displayThumb;
  10549. },
  10550. set: function (value) {
  10551. if (this._displayThumb === value) {
  10552. return;
  10553. }
  10554. this._displayThumb = value;
  10555. this._markAsDirty();
  10556. },
  10557. enumerable: true,
  10558. configurable: true
  10559. });
  10560. Object.defineProperty(BaseSlider.prototype, "step", {
  10561. /** Gets or sets a step to apply to values (0 by default) */
  10562. get: function () {
  10563. return this._step;
  10564. },
  10565. set: function (value) {
  10566. if (this._step === value) {
  10567. return;
  10568. }
  10569. this._step = value;
  10570. this._markAsDirty();
  10571. },
  10572. enumerable: true,
  10573. configurable: true
  10574. });
  10575. Object.defineProperty(BaseSlider.prototype, "barOffset", {
  10576. /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
  10577. get: function () {
  10578. return this._barOffset.toString(this._host);
  10579. },
  10580. set: function (value) {
  10581. if (this._barOffset.toString(this._host) === value) {
  10582. return;
  10583. }
  10584. if (this._barOffset.fromString(value)) {
  10585. this._markAsDirty();
  10586. }
  10587. },
  10588. enumerable: true,
  10589. configurable: true
  10590. });
  10591. Object.defineProperty(BaseSlider.prototype, "barOffsetInPixels", {
  10592. /** Gets main bar offset in pixels*/
  10593. get: function () {
  10594. return this._barOffset.getValueInPixel(this._host, this._cachedParentMeasure.width);
  10595. },
  10596. enumerable: true,
  10597. configurable: true
  10598. });
  10599. Object.defineProperty(BaseSlider.prototype, "thumbWidth", {
  10600. /** Gets or sets thumb width */
  10601. get: function () {
  10602. return this._thumbWidth.toString(this._host);
  10603. },
  10604. set: function (value) {
  10605. if (this._thumbWidth.toString(this._host) === value) {
  10606. return;
  10607. }
  10608. if (this._thumbWidth.fromString(value)) {
  10609. this._markAsDirty();
  10610. }
  10611. },
  10612. enumerable: true,
  10613. configurable: true
  10614. });
  10615. Object.defineProperty(BaseSlider.prototype, "thumbWidthInPixels", {
  10616. /** Gets thumb width in pixels */
  10617. get: function () {
  10618. return this._thumbWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
  10619. },
  10620. enumerable: true,
  10621. configurable: true
  10622. });
  10623. Object.defineProperty(BaseSlider.prototype, "minimum", {
  10624. /** Gets or sets minimum value */
  10625. get: function () {
  10626. return this._minimum;
  10627. },
  10628. set: function (value) {
  10629. if (this._minimum === value) {
  10630. return;
  10631. }
  10632. this._minimum = value;
  10633. this._markAsDirty();
  10634. this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
  10635. },
  10636. enumerable: true,
  10637. configurable: true
  10638. });
  10639. Object.defineProperty(BaseSlider.prototype, "maximum", {
  10640. /** Gets or sets maximum value */
  10641. get: function () {
  10642. return this._maximum;
  10643. },
  10644. set: function (value) {
  10645. if (this._maximum === value) {
  10646. return;
  10647. }
  10648. this._maximum = value;
  10649. this._markAsDirty();
  10650. this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
  10651. },
  10652. enumerable: true,
  10653. configurable: true
  10654. });
  10655. Object.defineProperty(BaseSlider.prototype, "value", {
  10656. /** Gets or sets current value */
  10657. get: function () {
  10658. return this._value;
  10659. },
  10660. set: function (value) {
  10661. value = Math.max(Math.min(value, this._maximum), this._minimum);
  10662. if (this._value === value) {
  10663. return;
  10664. }
  10665. this._value = value;
  10666. this._markAsDirty();
  10667. this.onValueChangedObservable.notifyObservers(this._value);
  10668. },
  10669. enumerable: true,
  10670. configurable: true
  10671. });
  10672. Object.defineProperty(BaseSlider.prototype, "isVertical", {
  10673. /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */
  10674. get: function () {
  10675. return this._isVertical;
  10676. },
  10677. set: function (value) {
  10678. if (this._isVertical === value) {
  10679. return;
  10680. }
  10681. this._isVertical = value;
  10682. this._markAsDirty();
  10683. },
  10684. enumerable: true,
  10685. configurable: true
  10686. });
  10687. Object.defineProperty(BaseSlider.prototype, "isThumbClamped", {
  10688. /** Gets or sets a value indicating if the thumb can go over main bar extends */
  10689. get: function () {
  10690. return this._isThumbClamped;
  10691. },
  10692. set: function (value) {
  10693. if (this._isThumbClamped === value) {
  10694. return;
  10695. }
  10696. this._isThumbClamped = value;
  10697. this._markAsDirty();
  10698. },
  10699. enumerable: true,
  10700. configurable: true
  10701. });
  10702. BaseSlider.prototype._getTypeName = function () {
  10703. return "BaseSlider";
  10704. };
  10705. BaseSlider.prototype._getThumbPosition = function () {
  10706. if (this.isVertical) {
  10707. return ((this.maximum - this.value) / (this.maximum - this.minimum)) * this._backgroundBoxLength;
  10708. }
  10709. return ((this.value - this.minimum) / (this.maximum - this.minimum)) * this._backgroundBoxLength;
  10710. };
  10711. BaseSlider.prototype._getThumbThickness = function (type) {
  10712. var thumbThickness = 0;
  10713. switch (type) {
  10714. case "circle":
  10715. if (this._thumbWidth.isPixel) {
  10716. thumbThickness = Math.max(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);
  10717. }
  10718. else {
  10719. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  10720. }
  10721. break;
  10722. case "rectangle":
  10723. if (this._thumbWidth.isPixel) {
  10724. thumbThickness = Math.min(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);
  10725. }
  10726. else {
  10727. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  10728. }
  10729. }
  10730. return thumbThickness;
  10731. };
  10732. BaseSlider.prototype._prepareRenderingData = function (type) {
  10733. // Main bar
  10734. this._effectiveBarOffset = 0;
  10735. this._renderLeft = this._currentMeasure.left;
  10736. this._renderTop = this._currentMeasure.top;
  10737. this._renderWidth = this._currentMeasure.width;
  10738. this._renderHeight = this._currentMeasure.height;
  10739. this._backgroundBoxLength = Math.max(this._currentMeasure.width, this._currentMeasure.height);
  10740. this._backgroundBoxThickness = Math.min(this._currentMeasure.width, this._currentMeasure.height);
  10741. this._effectiveThumbThickness = this._getThumbThickness(type);
  10742. if (this.displayThumb) {
  10743. this._backgroundBoxLength -= this._effectiveThumbThickness;
  10744. }
  10745. //throw error when height is less than width for vertical slider
  10746. if ((this.isVertical && this._currentMeasure.height < this._currentMeasure.width)) {
  10747. console.error("Height should be greater than width");
  10748. return;
  10749. }
  10750. if (this._barOffset.isPixel) {
  10751. this._effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), this._backgroundBoxThickness);
  10752. }
  10753. else {
  10754. this._effectiveBarOffset = this._backgroundBoxThickness * this._barOffset.getValue(this._host);
  10755. }
  10756. this._backgroundBoxThickness -= (this._effectiveBarOffset * 2);
  10757. if (this.isVertical) {
  10758. this._renderLeft += this._effectiveBarOffset;
  10759. if (!this.isThumbClamped && this.displayThumb) {
  10760. this._renderTop += (this._effectiveThumbThickness / 2);
  10761. }
  10762. this._renderHeight = this._backgroundBoxLength;
  10763. this._renderWidth = this._backgroundBoxThickness;
  10764. }
  10765. else {
  10766. this._renderTop += this._effectiveBarOffset;
  10767. if (!this.isThumbClamped && this.displayThumb) {
  10768. this._renderLeft += (this._effectiveThumbThickness / 2);
  10769. }
  10770. this._renderHeight = this._backgroundBoxThickness;
  10771. this._renderWidth = this._backgroundBoxLength;
  10772. }
  10773. };
  10774. /** @hidden */
  10775. BaseSlider.prototype._updateValueFromPointer = function (x, y) {
  10776. if (this.rotation != 0) {
  10777. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  10778. x = this._transformedPosition.x;
  10779. y = this._transformedPosition.y;
  10780. }
  10781. var value;
  10782. if (this._isVertical) {
  10783. value = this._minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this._maximum - this._minimum);
  10784. }
  10785. else {
  10786. value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
  10787. }
  10788. var mult = (1 / this._step) | 0;
  10789. this.value = this._step ? ((value * mult) | 0) / mult : value;
  10790. };
  10791. BaseSlider.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  10792. if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {
  10793. return false;
  10794. }
  10795. this._pointerIsDown = true;
  10796. this._updateValueFromPointer(coordinates.x, coordinates.y);
  10797. this._host._capturingControl[pointerId] = this;
  10798. this._lastPointerDownID = pointerId;
  10799. return true;
  10800. };
  10801. BaseSlider.prototype._onPointerMove = function (target, coordinates, pointerId) {
  10802. // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
  10803. if (pointerId != this._lastPointerDownID) {
  10804. return;
  10805. }
  10806. if (this._pointerIsDown) {
  10807. this._updateValueFromPointer(coordinates.x, coordinates.y);
  10808. }
  10809. _super.prototype._onPointerMove.call(this, target, coordinates, pointerId);
  10810. };
  10811. BaseSlider.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  10812. this._pointerIsDown = false;
  10813. delete this._host._capturingControl[pointerId];
  10814. _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick);
  10815. };
  10816. return BaseSlider;
  10817. }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
  10818. /***/ }),
  10819. /***/ "./2D/controls/sliders/imageBasedSlider.ts":
  10820. /*!*************************************************!*\
  10821. !*** ./2D/controls/sliders/imageBasedSlider.ts ***!
  10822. \*************************************************/
  10823. /*! exports provided: ImageBasedSlider */
  10824. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  10825. "use strict";
  10826. __webpack_require__.r(__webpack_exports__);
  10827. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return ImageBasedSlider; });
  10828. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  10829. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  10830. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  10831. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  10832. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__);
  10833. /**
  10834. * Class used to create slider controls based on images
  10835. */
  10836. var ImageBasedSlider = /** @class */ (function (_super) {
  10837. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ImageBasedSlider, _super);
  10838. /**
  10839. * Creates a new ImageBasedSlider
  10840. * @param name defines the control name
  10841. */
  10842. function ImageBasedSlider(name) {
  10843. var _this = _super.call(this, name) || this;
  10844. _this.name = name;
  10845. _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  10846. return _this;
  10847. }
  10848. Object.defineProperty(ImageBasedSlider.prototype, "displayThumb", {
  10849. get: function () {
  10850. return this._displayThumb && this.thumbImage != null;
  10851. },
  10852. set: function (value) {
  10853. if (this._displayThumb === value) {
  10854. return;
  10855. }
  10856. this._displayThumb = value;
  10857. this._markAsDirty();
  10858. },
  10859. enumerable: true,
  10860. configurable: true
  10861. });
  10862. Object.defineProperty(ImageBasedSlider.prototype, "backgroundImage", {
  10863. /**
  10864. * Gets or sets the image used to render the background
  10865. */
  10866. get: function () {
  10867. return this._backgroundImage;
  10868. },
  10869. set: function (value) {
  10870. var _this = this;
  10871. if (this._backgroundImage === value) {
  10872. return;
  10873. }
  10874. this._backgroundImage = value;
  10875. if (value && !value.isLoaded) {
  10876. value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
  10877. }
  10878. this._markAsDirty();
  10879. },
  10880. enumerable: true,
  10881. configurable: true
  10882. });
  10883. Object.defineProperty(ImageBasedSlider.prototype, "valueBarImage", {
  10884. /**
  10885. * Gets or sets the image used to render the value bar
  10886. */
  10887. get: function () {
  10888. return this._valueBarImage;
  10889. },
  10890. set: function (value) {
  10891. var _this = this;
  10892. if (this._valueBarImage === value) {
  10893. return;
  10894. }
  10895. this._valueBarImage = value;
  10896. if (value && !value.isLoaded) {
  10897. value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
  10898. }
  10899. this._markAsDirty();
  10900. },
  10901. enumerable: true,
  10902. configurable: true
  10903. });
  10904. Object.defineProperty(ImageBasedSlider.prototype, "thumbImage", {
  10905. /**
  10906. * Gets or sets the image used to render the thumb
  10907. */
  10908. get: function () {
  10909. return this._thumbImage;
  10910. },
  10911. set: function (value) {
  10912. var _this = this;
  10913. if (this._thumbImage === value) {
  10914. return;
  10915. }
  10916. this._thumbImage = value;
  10917. if (value && !value.isLoaded) {
  10918. value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
  10919. }
  10920. this._markAsDirty();
  10921. },
  10922. enumerable: true,
  10923. configurable: true
  10924. });
  10925. ImageBasedSlider.prototype._getTypeName = function () {
  10926. return "ImageBasedSlider";
  10927. };
  10928. ImageBasedSlider.prototype._draw = function (context, invalidatedRectangle) {
  10929. context.save();
  10930. this._applyStates(context);
  10931. this._prepareRenderingData("rectangle");
  10932. var thumbPosition = this._getThumbPosition();
  10933. var left = this._renderLeft;
  10934. var top = this._renderTop;
  10935. var width = this._renderWidth;
  10936. var height = this._renderHeight;
  10937. // Background
  10938. if (this._backgroundImage) {
  10939. this._tempMeasure.copyFromFloats(left, top, width, height);
  10940. if (this.isThumbClamped && this.displayThumb) {
  10941. if (this.isVertical) {
  10942. this._tempMeasure.height += this._effectiveThumbThickness;
  10943. }
  10944. else {
  10945. this._tempMeasure.width += this._effectiveThumbThickness;
  10946. }
  10947. }
  10948. this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);
  10949. this._backgroundImage._draw(context);
  10950. }
  10951. // Bar
  10952. if (this._valueBarImage) {
  10953. if (this.isVertical) {
  10954. if (this.isThumbClamped && this.displayThumb) {
  10955. this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);
  10956. }
  10957. else {
  10958. this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
  10959. }
  10960. }
  10961. else {
  10962. if (this.isThumbClamped && this.displayThumb) {
  10963. this._tempMeasure.copyFromFloats(left, top, thumbPosition + this._effectiveThumbThickness / 2, height);
  10964. }
  10965. else {
  10966. this._tempMeasure.copyFromFloats(left, top, thumbPosition, height);
  10967. }
  10968. }
  10969. this._valueBarImage._currentMeasure.copyFrom(this._tempMeasure);
  10970. this._valueBarImage._draw(context);
  10971. }
  10972. // Thumb
  10973. if (this.displayThumb) {
  10974. if (this.isVertical) {
  10975. this._tempMeasure.copyFromFloats(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
  10976. }
  10977. else {
  10978. this._tempMeasure.copyFromFloats(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
  10979. }
  10980. this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
  10981. this._thumbImage._draw(context);
  10982. }
  10983. context.restore();
  10984. };
  10985. return ImageBasedSlider;
  10986. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  10987. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__["_TypeStore"].RegisteredTypes["BABYLON.GUI.ImageBasedSlider"] = ImageBasedSlider;
  10988. /***/ }),
  10989. /***/ "./2D/controls/sliders/imageScrollBar.ts":
  10990. /*!***********************************************!*\
  10991. !*** ./2D/controls/sliders/imageScrollBar.ts ***!
  10992. \***********************************************/
  10993. /*! exports provided: ImageScrollBar */
  10994. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  10995. "use strict";
  10996. __webpack_require__.r(__webpack_exports__);
  10997. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return ImageScrollBar; });
  10998. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  10999. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  11000. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  11001. /**
  11002. * Class used to create slider controls
  11003. */
  11004. var ImageScrollBar = /** @class */ (function (_super) {
  11005. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ImageScrollBar, _super);
  11006. /**
  11007. * Creates a new ImageScrollBar
  11008. * @param name defines the control name
  11009. */
  11010. function ImageScrollBar(name) {
  11011. var _this = _super.call(this, name) || this;
  11012. _this.name = name;
  11013. _this._thumbLength = 0.5;
  11014. _this._thumbHeight = 1;
  11015. _this._barImageHeight = 1;
  11016. _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  11017. /** Number of 90° rotation to apply on the images when in vertical mode */
  11018. _this.num90RotationInVerticalMode = 1;
  11019. return _this;
  11020. }
  11021. Object.defineProperty(ImageScrollBar.prototype, "backgroundImage", {
  11022. /**
  11023. * Gets or sets the image used to render the background for horizontal bar
  11024. */
  11025. get: function () {
  11026. return this._backgroundBaseImage;
  11027. },
  11028. set: function (value) {
  11029. var _this = this;
  11030. if (this._backgroundBaseImage === value) {
  11031. return;
  11032. }
  11033. this._backgroundBaseImage = value;
  11034. if (this.isVertical && this.num90RotationInVerticalMode !== 0) {
  11035. if (!value.isLoaded) {
  11036. value.onImageLoadedObservable.addOnce(function () {
  11037. var rotatedValue = value._rotate90(_this.num90RotationInVerticalMode, true);
  11038. _this._backgroundImage = rotatedValue;
  11039. if (!rotatedValue.isLoaded) {
  11040. rotatedValue.onImageLoadedObservable.addOnce(function () {
  11041. _this._markAsDirty();
  11042. });
  11043. }
  11044. _this._markAsDirty();
  11045. });
  11046. }
  11047. else {
  11048. this._backgroundImage = value._rotate90(this.num90RotationInVerticalMode, true);
  11049. this._markAsDirty();
  11050. }
  11051. }
  11052. else {
  11053. this._backgroundImage = value;
  11054. if (value && !value.isLoaded) {
  11055. value.onImageLoadedObservable.addOnce(function () {
  11056. _this._markAsDirty();
  11057. });
  11058. }
  11059. this._markAsDirty();
  11060. }
  11061. },
  11062. enumerable: true,
  11063. configurable: true
  11064. });
  11065. Object.defineProperty(ImageScrollBar.prototype, "thumbImage", {
  11066. /**
  11067. * Gets or sets the image used to render the thumb
  11068. */
  11069. get: function () {
  11070. return this._thumbBaseImage;
  11071. },
  11072. set: function (value) {
  11073. var _this = this;
  11074. if (this._thumbBaseImage === value) {
  11075. return;
  11076. }
  11077. this._thumbBaseImage = value;
  11078. if (this.isVertical && this.num90RotationInVerticalMode !== 0) {
  11079. if (!value.isLoaded) {
  11080. value.onImageLoadedObservable.addOnce(function () {
  11081. var rotatedValue = value._rotate90(-_this.num90RotationInVerticalMode, true);
  11082. _this._thumbImage = rotatedValue;
  11083. if (!rotatedValue.isLoaded) {
  11084. rotatedValue.onImageLoadedObservable.addOnce(function () {
  11085. _this._markAsDirty();
  11086. });
  11087. }
  11088. _this._markAsDirty();
  11089. });
  11090. }
  11091. else {
  11092. this._thumbImage = value._rotate90(-this.num90RotationInVerticalMode, true);
  11093. this._markAsDirty();
  11094. }
  11095. }
  11096. else {
  11097. this._thumbImage = value;
  11098. if (value && !value.isLoaded) {
  11099. value.onImageLoadedObservable.addOnce(function () {
  11100. _this._markAsDirty();
  11101. });
  11102. }
  11103. this._markAsDirty();
  11104. }
  11105. },
  11106. enumerable: true,
  11107. configurable: true
  11108. });
  11109. Object.defineProperty(ImageScrollBar.prototype, "thumbLength", {
  11110. /**
  11111. * Gets or sets the length of the thumb
  11112. */
  11113. get: function () {
  11114. return this._thumbLength;
  11115. },
  11116. set: function (value) {
  11117. if (this._thumbLength === value) {
  11118. return;
  11119. }
  11120. this._thumbLength = value;
  11121. this._markAsDirty();
  11122. },
  11123. enumerable: true,
  11124. configurable: true
  11125. });
  11126. Object.defineProperty(ImageScrollBar.prototype, "thumbHeight", {
  11127. /**
  11128. * Gets or sets the height of the thumb
  11129. */
  11130. get: function () {
  11131. return this._thumbHeight;
  11132. },
  11133. set: function (value) {
  11134. if (this._thumbLength === value) {
  11135. return;
  11136. }
  11137. this._thumbHeight = value;
  11138. this._markAsDirty();
  11139. },
  11140. enumerable: true,
  11141. configurable: true
  11142. });
  11143. Object.defineProperty(ImageScrollBar.prototype, "barImageHeight", {
  11144. /**
  11145. * Gets or sets the height of the bar image
  11146. */
  11147. get: function () {
  11148. return this._barImageHeight;
  11149. },
  11150. set: function (value) {
  11151. if (this._barImageHeight === value) {
  11152. return;
  11153. }
  11154. this._barImageHeight = value;
  11155. this._markAsDirty();
  11156. },
  11157. enumerable: true,
  11158. configurable: true
  11159. });
  11160. ImageScrollBar.prototype._getTypeName = function () {
  11161. return "ImageScrollBar";
  11162. };
  11163. ImageScrollBar.prototype._getThumbThickness = function () {
  11164. var thumbThickness = 0;
  11165. if (this._thumbWidth.isPixel) {
  11166. thumbThickness = this._thumbWidth.getValue(this._host);
  11167. }
  11168. else {
  11169. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  11170. }
  11171. return thumbThickness;
  11172. };
  11173. ImageScrollBar.prototype._draw = function (context) {
  11174. context.save();
  11175. this._applyStates(context);
  11176. this._prepareRenderingData("rectangle");
  11177. var thumbPosition = this._getThumbPosition();
  11178. var left = this._renderLeft;
  11179. var top = this._renderTop;
  11180. var width = this._renderWidth;
  11181. var height = this._renderHeight;
  11182. // Background
  11183. if (this._backgroundImage) {
  11184. this._tempMeasure.copyFromFloats(left, top, width, height);
  11185. if (this.isVertical) {
  11186. this._tempMeasure.copyFromFloats(left + width * (1 - this._barImageHeight) * 0.5, this._currentMeasure.top, width * this._barImageHeight, height);
  11187. this._tempMeasure.height += this._effectiveThumbThickness;
  11188. this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);
  11189. }
  11190. else {
  11191. this._tempMeasure.copyFromFloats(this._currentMeasure.left, top + height * (1 - this._barImageHeight) * 0.5, width, height * this._barImageHeight);
  11192. this._tempMeasure.width += this._effectiveThumbThickness;
  11193. this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);
  11194. }
  11195. this._backgroundImage._draw(context);
  11196. }
  11197. // Thumb
  11198. if (this.isVertical) {
  11199. 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);
  11200. }
  11201. else {
  11202. 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);
  11203. }
  11204. if (this._thumbImage) {
  11205. this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
  11206. this._thumbImage._draw(context);
  11207. }
  11208. context.restore();
  11209. };
  11210. /** @hidden */
  11211. ImageScrollBar.prototype._updateValueFromPointer = function (x, y) {
  11212. if (this.rotation != 0) {
  11213. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  11214. x = this._transformedPosition.x;
  11215. y = this._transformedPosition.y;
  11216. }
  11217. if (this._first) {
  11218. this._first = false;
  11219. this._originX = x;
  11220. this._originY = y;
  11221. // Check if move is required
  11222. if (x < this._tempMeasure.left || x > this._tempMeasure.left + this._tempMeasure.width || y < this._tempMeasure.top || y > this._tempMeasure.top + this._tempMeasure.height) {
  11223. if (this.isVertical) {
  11224. this.value = this.minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this.maximum - this.minimum);
  11225. }
  11226. else {
  11227. this.value = this.minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this.maximum - this.minimum);
  11228. }
  11229. }
  11230. }
  11231. // Delta mode
  11232. var delta = 0;
  11233. if (this.isVertical) {
  11234. delta = -((y - this._originY) / (this._currentMeasure.height - this._effectiveThumbThickness));
  11235. }
  11236. else {
  11237. delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);
  11238. }
  11239. this.value += delta * (this.maximum - this.minimum);
  11240. this._originX = x;
  11241. this._originY = y;
  11242. };
  11243. ImageScrollBar.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  11244. this._first = true;
  11245. return _super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex);
  11246. };
  11247. return ImageScrollBar;
  11248. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  11249. /***/ }),
  11250. /***/ "./2D/controls/sliders/scrollBar.ts":
  11251. /*!******************************************!*\
  11252. !*** ./2D/controls/sliders/scrollBar.ts ***!
  11253. \******************************************/
  11254. /*! exports provided: ScrollBar */
  11255. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11256. "use strict";
  11257. __webpack_require__.r(__webpack_exports__);
  11258. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return ScrollBar; });
  11259. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11260. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  11261. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
  11262. /**
  11263. * Class used to create slider controls
  11264. */
  11265. var ScrollBar = /** @class */ (function (_super) {
  11266. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScrollBar, _super);
  11267. /**
  11268. * Creates a new Slider
  11269. * @param name defines the control name
  11270. */
  11271. function ScrollBar(name) {
  11272. var _this = _super.call(this, name) || this;
  11273. _this.name = name;
  11274. _this._background = "black";
  11275. _this._borderColor = "white";
  11276. _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
  11277. return _this;
  11278. }
  11279. Object.defineProperty(ScrollBar.prototype, "borderColor", {
  11280. /** Gets or sets border color */
  11281. get: function () {
  11282. return this._borderColor;
  11283. },
  11284. set: function (value) {
  11285. if (this._borderColor === value) {
  11286. return;
  11287. }
  11288. this._borderColor = value;
  11289. this._markAsDirty();
  11290. },
  11291. enumerable: true,
  11292. configurable: true
  11293. });
  11294. Object.defineProperty(ScrollBar.prototype, "background", {
  11295. /** Gets or sets background color */
  11296. get: function () {
  11297. return this._background;
  11298. },
  11299. set: function (value) {
  11300. if (this._background === value) {
  11301. return;
  11302. }
  11303. this._background = value;
  11304. this._markAsDirty();
  11305. },
  11306. enumerable: true,
  11307. configurable: true
  11308. });
  11309. ScrollBar.prototype._getTypeName = function () {
  11310. return "Scrollbar";
  11311. };
  11312. ScrollBar.prototype._getThumbThickness = function () {
  11313. var thumbThickness = 0;
  11314. if (this._thumbWidth.isPixel) {
  11315. thumbThickness = this._thumbWidth.getValue(this._host);
  11316. }
  11317. else {
  11318. thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
  11319. }
  11320. return thumbThickness;
  11321. };
  11322. ScrollBar.prototype._draw = function (context) {
  11323. context.save();
  11324. this._applyStates(context);
  11325. this._prepareRenderingData("rectangle");
  11326. var left = this._renderLeft;
  11327. var thumbPosition = this._getThumbPosition();
  11328. context.fillStyle = this._background;
  11329. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  11330. // Value bar
  11331. context.fillStyle = this.color;
  11332. // Thumb
  11333. if (this.isVertical) {
  11334. this._tempMeasure.left = left - this._effectiveBarOffset;
  11335. this._tempMeasure.top = this._currentMeasure.top + thumbPosition;
  11336. this._tempMeasure.width = this._currentMeasure.width;
  11337. this._tempMeasure.height = this._effectiveThumbThickness;
  11338. }
  11339. else {
  11340. this._tempMeasure.left = this._currentMeasure.left + thumbPosition;
  11341. this._tempMeasure.top = this._currentMeasure.top;
  11342. this._tempMeasure.width = this._effectiveThumbThickness;
  11343. this._tempMeasure.height = this._currentMeasure.height;
  11344. }
  11345. context.fillRect(this._tempMeasure.left, this._tempMeasure.top, this._tempMeasure.width, this._tempMeasure.height);
  11346. context.restore();
  11347. };
  11348. /** @hidden */
  11349. ScrollBar.prototype._updateValueFromPointer = function (x, y) {
  11350. if (this.rotation != 0) {
  11351. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  11352. x = this._transformedPosition.x;
  11353. y = this._transformedPosition.y;
  11354. }
  11355. if (this._first) {
  11356. this._first = false;
  11357. this._originX = x;
  11358. this._originY = y;
  11359. // Check if move is required
  11360. if (x < this._tempMeasure.left || x > this._tempMeasure.left + this._tempMeasure.width || y < this._tempMeasure.top || y > this._tempMeasure.top + this._tempMeasure.height) {
  11361. if (this.isVertical) {
  11362. this.value = this.minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this.maximum - this.minimum);
  11363. }
  11364. else {
  11365. this.value = this.minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this.maximum - this.minimum);
  11366. }
  11367. }
  11368. }
  11369. // Delta mode
  11370. var delta = 0;
  11371. if (this.isVertical) {
  11372. delta = -((y - this._originY) / (this._currentMeasure.height - this._effectiveThumbThickness));
  11373. }
  11374. else {
  11375. delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);
  11376. }
  11377. this.value += delta * (this.maximum - this.minimum);
  11378. this._originX = x;
  11379. this._originY = y;
  11380. };
  11381. ScrollBar.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  11382. this._first = true;
  11383. return _super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex);
  11384. };
  11385. return ScrollBar;
  11386. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  11387. /***/ }),
  11388. /***/ "./2D/controls/sliders/slider.ts":
  11389. /*!***************************************!*\
  11390. !*** ./2D/controls/sliders/slider.ts ***!
  11391. \***************************************/
  11392. /*! exports provided: Slider */
  11393. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11394. "use strict";
  11395. __webpack_require__.r(__webpack_exports__);
  11396. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return Slider; });
  11397. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11398. /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
  11399. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  11400. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
  11401. /**
  11402. * Class used to create slider controls
  11403. */
  11404. var Slider = /** @class */ (function (_super) {
  11405. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Slider, _super);
  11406. /**
  11407. * Creates a new Slider
  11408. * @param name defines the control name
  11409. */
  11410. function Slider(name) {
  11411. var _this = _super.call(this, name) || this;
  11412. _this.name = name;
  11413. _this._background = "black";
  11414. _this._borderColor = "white";
  11415. _this._isThumbCircle = false;
  11416. _this._displayValueBar = true;
  11417. return _this;
  11418. }
  11419. Object.defineProperty(Slider.prototype, "displayValueBar", {
  11420. /** Gets or sets a boolean indicating if the value bar must be rendered */
  11421. get: function () {
  11422. return this._displayValueBar;
  11423. },
  11424. set: function (value) {
  11425. if (this._displayValueBar === value) {
  11426. return;
  11427. }
  11428. this._displayValueBar = value;
  11429. this._markAsDirty();
  11430. },
  11431. enumerable: true,
  11432. configurable: true
  11433. });
  11434. Object.defineProperty(Slider.prototype, "borderColor", {
  11435. /** Gets or sets border color */
  11436. get: function () {
  11437. return this._borderColor;
  11438. },
  11439. set: function (value) {
  11440. if (this._borderColor === value) {
  11441. return;
  11442. }
  11443. this._borderColor = value;
  11444. this._markAsDirty();
  11445. },
  11446. enumerable: true,
  11447. configurable: true
  11448. });
  11449. Object.defineProperty(Slider.prototype, "background", {
  11450. /** Gets or sets background color */
  11451. get: function () {
  11452. return this._background;
  11453. },
  11454. set: function (value) {
  11455. if (this._background === value) {
  11456. return;
  11457. }
  11458. this._background = value;
  11459. this._markAsDirty();
  11460. },
  11461. enumerable: true,
  11462. configurable: true
  11463. });
  11464. Object.defineProperty(Slider.prototype, "isThumbCircle", {
  11465. /** Gets or sets a boolean indicating if the thumb should be round or square */
  11466. get: function () {
  11467. return this._isThumbCircle;
  11468. },
  11469. set: function (value) {
  11470. if (this._isThumbCircle === value) {
  11471. return;
  11472. }
  11473. this._isThumbCircle = value;
  11474. this._markAsDirty();
  11475. },
  11476. enumerable: true,
  11477. configurable: true
  11478. });
  11479. Slider.prototype._getTypeName = function () {
  11480. return "Slider";
  11481. };
  11482. Slider.prototype._draw = function (context, invalidatedRectangle) {
  11483. context.save();
  11484. this._applyStates(context);
  11485. this._prepareRenderingData(this.isThumbCircle ? "circle" : "rectangle");
  11486. var left = this._renderLeft;
  11487. var top = this._renderTop;
  11488. var width = this._renderWidth;
  11489. var height = this._renderHeight;
  11490. var radius = 0;
  11491. if (this.isThumbClamped && this.isThumbCircle) {
  11492. if (this.isVertical) {
  11493. top += (this._effectiveThumbThickness / 2);
  11494. }
  11495. else {
  11496. left += (this._effectiveThumbThickness / 2);
  11497. }
  11498. radius = this._backgroundBoxThickness / 2;
  11499. }
  11500. else {
  11501. radius = (this._effectiveThumbThickness - this._effectiveBarOffset) / 2;
  11502. }
  11503. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11504. context.shadowColor = this.shadowColor;
  11505. context.shadowBlur = this.shadowBlur;
  11506. context.shadowOffsetX = this.shadowOffsetX;
  11507. context.shadowOffsetY = this.shadowOffsetY;
  11508. }
  11509. var thumbPosition = this._getThumbPosition();
  11510. context.fillStyle = this._background;
  11511. if (this.isVertical) {
  11512. if (this.isThumbClamped) {
  11513. if (this.isThumbCircle) {
  11514. context.beginPath();
  11515. context.arc(left + this._backgroundBoxThickness / 2, top, radius, Math.PI, 2 * Math.PI);
  11516. context.fill();
  11517. context.fillRect(left, top, width, height);
  11518. }
  11519. else {
  11520. context.fillRect(left, top, width, height + this._effectiveThumbThickness);
  11521. }
  11522. }
  11523. else {
  11524. context.fillRect(left, top, width, height);
  11525. }
  11526. }
  11527. else {
  11528. if (this.isThumbClamped) {
  11529. if (this.isThumbCircle) {
  11530. context.beginPath();
  11531. context.arc(left + this._backgroundBoxLength, top + (this._backgroundBoxThickness / 2), radius, 0, 2 * Math.PI);
  11532. context.fill();
  11533. context.fillRect(left, top, width, height);
  11534. }
  11535. else {
  11536. context.fillRect(left, top, width + this._effectiveThumbThickness, height);
  11537. }
  11538. }
  11539. else {
  11540. context.fillRect(left, top, width, height);
  11541. }
  11542. }
  11543. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11544. context.shadowBlur = 0;
  11545. context.shadowOffsetX = 0;
  11546. context.shadowOffsetY = 0;
  11547. }
  11548. // Value bar
  11549. context.fillStyle = this.color;
  11550. if (this._displayValueBar) {
  11551. if (this.isVertical) {
  11552. if (this.isThumbClamped) {
  11553. if (this.isThumbCircle) {
  11554. context.beginPath();
  11555. context.arc(left + this._backgroundBoxThickness / 2, top + this._backgroundBoxLength, radius, 0, 2 * Math.PI);
  11556. context.fill();
  11557. context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
  11558. }
  11559. else {
  11560. context.fillRect(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);
  11561. }
  11562. }
  11563. else {
  11564. context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
  11565. }
  11566. }
  11567. else {
  11568. if (this.isThumbClamped) {
  11569. if (this.isThumbCircle) {
  11570. context.beginPath();
  11571. context.arc(left, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);
  11572. context.fill();
  11573. context.fillRect(left, top, thumbPosition, height);
  11574. }
  11575. else {
  11576. context.fillRect(left, top, thumbPosition, height);
  11577. }
  11578. }
  11579. else {
  11580. context.fillRect(left, top, thumbPosition, height);
  11581. }
  11582. }
  11583. }
  11584. // Thumb
  11585. if (this.displayThumb) {
  11586. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11587. context.shadowColor = this.shadowColor;
  11588. context.shadowBlur = this.shadowBlur;
  11589. context.shadowOffsetX = this.shadowOffsetX;
  11590. context.shadowOffsetY = this.shadowOffsetY;
  11591. }
  11592. if (this._isThumbCircle) {
  11593. context.beginPath();
  11594. if (this.isVertical) {
  11595. context.arc(left + this._backgroundBoxThickness / 2, top + thumbPosition, radius, 0, 2 * Math.PI);
  11596. }
  11597. else {
  11598. context.arc(left + thumbPosition, top + (this._backgroundBoxThickness / 2), radius, 0, 2 * Math.PI);
  11599. }
  11600. context.fill();
  11601. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11602. context.shadowBlur = 0;
  11603. context.shadowOffsetX = 0;
  11604. context.shadowOffsetY = 0;
  11605. }
  11606. context.strokeStyle = this._borderColor;
  11607. context.stroke();
  11608. }
  11609. else {
  11610. if (this.isVertical) {
  11611. context.fillRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
  11612. }
  11613. else {
  11614. context.fillRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
  11615. }
  11616. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  11617. context.shadowBlur = 0;
  11618. context.shadowOffsetX = 0;
  11619. context.shadowOffsetY = 0;
  11620. }
  11621. context.strokeStyle = this._borderColor;
  11622. if (this.isVertical) {
  11623. context.strokeRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
  11624. }
  11625. else {
  11626. context.strokeRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
  11627. }
  11628. }
  11629. }
  11630. context.restore();
  11631. };
  11632. return Slider;
  11633. }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__["BaseSlider"]));
  11634. babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTypes["BABYLON.GUI.Slider"] = Slider;
  11635. /***/ }),
  11636. /***/ "./2D/controls/stackPanel.ts":
  11637. /*!***********************************!*\
  11638. !*** ./2D/controls/stackPanel.ts ***!
  11639. \***********************************/
  11640. /*! exports provided: StackPanel */
  11641. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11642. "use strict";
  11643. __webpack_require__.r(__webpack_exports__);
  11644. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return StackPanel; });
  11645. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11646. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  11647. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  11648. /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
  11649. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  11650. /**
  11651. * Class used to create a 2D stack panel container
  11652. */
  11653. var StackPanel = /** @class */ (function (_super) {
  11654. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(StackPanel, _super);
  11655. /**
  11656. * Creates a new StackPanel
  11657. * @param name defines control name
  11658. */
  11659. function StackPanel(name) {
  11660. var _this = _super.call(this, name) || this;
  11661. _this.name = name;
  11662. _this._isVertical = true;
  11663. _this._manualWidth = false;
  11664. _this._manualHeight = false;
  11665. _this._doNotTrackManualChanges = false;
  11666. /**
  11667. * Gets or sets a boolean indicating that layou warnings should be ignored
  11668. */
  11669. _this.ignoreLayoutWarnings = false;
  11670. return _this;
  11671. }
  11672. Object.defineProperty(StackPanel.prototype, "isVertical", {
  11673. /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
  11674. get: function () {
  11675. return this._isVertical;
  11676. },
  11677. set: function (value) {
  11678. if (this._isVertical === value) {
  11679. return;
  11680. }
  11681. this._isVertical = value;
  11682. this._markAsDirty();
  11683. },
  11684. enumerable: true,
  11685. configurable: true
  11686. });
  11687. Object.defineProperty(StackPanel.prototype, "width", {
  11688. get: function () {
  11689. return this._width.toString(this._host);
  11690. },
  11691. /**
  11692. * Gets or sets panel width.
  11693. * This value should not be set when in horizontal mode as it will be computed automatically
  11694. */
  11695. set: function (value) {
  11696. if (!this._doNotTrackManualChanges) {
  11697. this._manualWidth = true;
  11698. }
  11699. if (this._width.toString(this._host) === value) {
  11700. return;
  11701. }
  11702. if (this._width.fromString(value)) {
  11703. this._markAsDirty();
  11704. }
  11705. },
  11706. enumerable: true,
  11707. configurable: true
  11708. });
  11709. Object.defineProperty(StackPanel.prototype, "height", {
  11710. get: function () {
  11711. return this._height.toString(this._host);
  11712. },
  11713. /**
  11714. * Gets or sets panel height.
  11715. * This value should not be set when in vertical mode as it will be computed automatically
  11716. */
  11717. set: function (value) {
  11718. if (!this._doNotTrackManualChanges) {
  11719. this._manualHeight = true;
  11720. }
  11721. if (this._height.toString(this._host) === value) {
  11722. return;
  11723. }
  11724. if (this._height.fromString(value)) {
  11725. this._markAsDirty();
  11726. }
  11727. },
  11728. enumerable: true,
  11729. configurable: true
  11730. });
  11731. StackPanel.prototype._getTypeName = function () {
  11732. return "StackPanel";
  11733. };
  11734. /** @hidden */
  11735. StackPanel.prototype._preMeasure = function (parentMeasure, context) {
  11736. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  11737. var child = _a[_i];
  11738. if (this._isVertical) {
  11739. child.verticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP;
  11740. }
  11741. else {
  11742. child.horizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  11743. }
  11744. }
  11745. _super.prototype._preMeasure.call(this, parentMeasure, context);
  11746. };
  11747. StackPanel.prototype._additionalProcessing = function (parentMeasure, context) {
  11748. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  11749. this._measureForChildren.copyFrom(parentMeasure);
  11750. this._measureForChildren.left = this._currentMeasure.left;
  11751. this._measureForChildren.top = this._currentMeasure.top;
  11752. if (!this.isVertical || this._manualWidth) {
  11753. this._measureForChildren.width = this._currentMeasure.width;
  11754. }
  11755. if (this.isVertical || this._manualHeight) {
  11756. this._measureForChildren.height = this._currentMeasure.height;
  11757. }
  11758. };
  11759. StackPanel.prototype._postMeasure = function () {
  11760. var stackWidth = 0;
  11761. var stackHeight = 0;
  11762. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  11763. var child = _a[_i];
  11764. if (!child.isVisible || child.notRenderable) {
  11765. continue;
  11766. }
  11767. if (this._isVertical) {
  11768. if (child.top !== stackHeight + "px") {
  11769. child.top = stackHeight + "px";
  11770. this._rebuildLayout = true;
  11771. child._top.ignoreAdaptiveScaling = true;
  11772. }
  11773. if (child._height.isPercentage && !child._automaticSize) {
  11774. if (!this.ignoreLayoutWarnings) {
  11775. 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");
  11776. }
  11777. }
  11778. else {
  11779. stackHeight += child._currentMeasure.height + child.paddingTopInPixels + child.paddingBottomInPixels;
  11780. }
  11781. }
  11782. else {
  11783. if (child.left !== stackWidth + "px") {
  11784. child.left = stackWidth + "px";
  11785. this._rebuildLayout = true;
  11786. child._left.ignoreAdaptiveScaling = true;
  11787. }
  11788. if (child._width.isPercentage && !child._automaticSize) {
  11789. if (!this.ignoreLayoutWarnings) {
  11790. 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");
  11791. }
  11792. }
  11793. else {
  11794. stackWidth += child._currentMeasure.width + child.paddingLeftInPixels + child.paddingRightInPixels;
  11795. }
  11796. }
  11797. }
  11798. this._doNotTrackManualChanges = true;
  11799. // Let stack panel width or height default to stackHeight and stackWidth if dimensions are not specified.
  11800. // User can now define their own height and width for stack panel.
  11801. var panelWidthChanged = false;
  11802. var panelHeightChanged = false;
  11803. if (!this._manualHeight && this._isVertical) { // do not specify height if strictly defined by user
  11804. var previousHeight = this.height;
  11805. this.height = stackHeight + "px";
  11806. panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
  11807. }
  11808. if (!this._manualWidth && !this._isVertical) { // do not specify width if strictly defined by user
  11809. var previousWidth = this.width;
  11810. this.width = stackWidth + "px";
  11811. panelWidthChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
  11812. }
  11813. if (panelHeightChanged) {
  11814. this._height.ignoreAdaptiveScaling = true;
  11815. }
  11816. if (panelWidthChanged) {
  11817. this._width.ignoreAdaptiveScaling = true;
  11818. }
  11819. this._doNotTrackManualChanges = false;
  11820. if (panelWidthChanged || panelHeightChanged) {
  11821. this._rebuildLayout = true;
  11822. }
  11823. _super.prototype._postMeasure.call(this);
  11824. };
  11825. return StackPanel;
  11826. }(_container__WEBPACK_IMPORTED_MODULE_2__["Container"]));
  11827. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.StackPanel"] = StackPanel;
  11828. /***/ }),
  11829. /***/ "./2D/controls/statics.ts":
  11830. /*!********************************!*\
  11831. !*** ./2D/controls/statics.ts ***!
  11832. \********************************/
  11833. /*! exports provided: name */
  11834. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11835. "use strict";
  11836. __webpack_require__.r(__webpack_exports__);
  11837. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "name", function() { return name; });
  11838. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  11839. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  11840. /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
  11841. /**
  11842. * Forcing an export so that this code will execute
  11843. * @hidden
  11844. */
  11845. var name = "Statics";
  11846. /**
  11847. * Creates a stack panel that can be used to render headers
  11848. * @param control defines the control to associate with the header
  11849. * @param text defines the text of the header
  11850. * @param size defines the size of the header
  11851. * @param options defines options used to configure the header
  11852. * @returns a new StackPanel
  11853. */
  11854. _control__WEBPACK_IMPORTED_MODULE_0__["Control"].AddHeader = function (control, text, size, options) {
  11855. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_1__["StackPanel"]("panel");
  11856. var isHorizontal = options ? options.isHorizontal : true;
  11857. var controlFirst = options ? options.controlFirst : true;
  11858. panel.isVertical = !isHorizontal;
  11859. var header = new _textBlock__WEBPACK_IMPORTED_MODULE_2__["TextBlock"]("header");
  11860. header.text = text;
  11861. header.textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_LEFT;
  11862. if (isHorizontal) {
  11863. header.width = size;
  11864. }
  11865. else {
  11866. header.height = size;
  11867. }
  11868. if (controlFirst) {
  11869. panel.addControl(control);
  11870. panel.addControl(header);
  11871. header.paddingLeft = "5px";
  11872. }
  11873. else {
  11874. panel.addControl(header);
  11875. panel.addControl(control);
  11876. header.paddingRight = "5px";
  11877. }
  11878. header.shadowBlur = control.shadowBlur;
  11879. header.shadowColor = control.shadowColor;
  11880. header.shadowOffsetX = control.shadowOffsetX;
  11881. header.shadowOffsetY = control.shadowOffsetY;
  11882. return panel;
  11883. };
  11884. /***/ }),
  11885. /***/ "./2D/controls/textBlock.ts":
  11886. /*!**********************************!*\
  11887. !*** ./2D/controls/textBlock.ts ***!
  11888. \**********************************/
  11889. /*! exports provided: TextWrapping, TextBlock */
  11890. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11891. "use strict";
  11892. __webpack_require__.r(__webpack_exports__);
  11893. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return TextWrapping; });
  11894. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return TextBlock; });
  11895. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  11896. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  11897. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  11898. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
  11899. /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
  11900. /**
  11901. * Enum that determines the text-wrapping mode to use.
  11902. */
  11903. var TextWrapping;
  11904. (function (TextWrapping) {
  11905. /**
  11906. * Clip the text when it's larger than Control.width; this is the default mode.
  11907. */
  11908. TextWrapping[TextWrapping["Clip"] = 0] = "Clip";
  11909. /**
  11910. * Wrap the text word-wise, i.e. try to add line-breaks at word boundary to fit within Control.width.
  11911. */
  11912. TextWrapping[TextWrapping["WordWrap"] = 1] = "WordWrap";
  11913. /**
  11914. * Ellipsize the text, i.e. shrink with trailing … when text is larger than Control.width.
  11915. */
  11916. TextWrapping[TextWrapping["Ellipsis"] = 2] = "Ellipsis";
  11917. })(TextWrapping || (TextWrapping = {}));
  11918. /**
  11919. * Class used to create text block control
  11920. */
  11921. var TextBlock = /** @class */ (function (_super) {
  11922. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(TextBlock, _super);
  11923. /**
  11924. * Creates a new TextBlock object
  11925. * @param name defines the name of the control
  11926. * @param text defines the text to display (emptry string by default)
  11927. */
  11928. function TextBlock(
  11929. /**
  11930. * Defines the name of the control
  11931. */
  11932. name, text) {
  11933. if (text === void 0) { text = ""; }
  11934. var _this = _super.call(this, name) || this;
  11935. _this.name = name;
  11936. _this._text = "";
  11937. _this._textWrapping = TextWrapping.Clip;
  11938. _this._textHorizontalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
  11939. _this._textVerticalAlignment = _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER;
  11940. _this._resizeToFit = false;
  11941. _this._lineSpacing = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"](0);
  11942. _this._outlineWidth = 0;
  11943. _this._outlineColor = "white";
  11944. /**
  11945. * An event triggered after the text is changed
  11946. */
  11947. _this.onTextChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  11948. /**
  11949. * An event triggered after the text was broken up into lines
  11950. */
  11951. _this.onLinesReadyObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  11952. _this.text = text;
  11953. return _this;
  11954. }
  11955. Object.defineProperty(TextBlock.prototype, "lines", {
  11956. /**
  11957. * Return the line list (you may need to use the onLinesReadyObservable to make sure the list is ready)
  11958. */
  11959. get: function () {
  11960. return this._lines;
  11961. },
  11962. enumerable: true,
  11963. configurable: true
  11964. });
  11965. Object.defineProperty(TextBlock.prototype, "resizeToFit", {
  11966. /**
  11967. * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
  11968. */
  11969. get: function () {
  11970. return this._resizeToFit;
  11971. },
  11972. /**
  11973. * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
  11974. */
  11975. set: function (value) {
  11976. if (this._resizeToFit === value) {
  11977. return;
  11978. }
  11979. this._resizeToFit = value;
  11980. if (this._resizeToFit) {
  11981. this._width.ignoreAdaptiveScaling = true;
  11982. this._height.ignoreAdaptiveScaling = true;
  11983. }
  11984. this._markAsDirty();
  11985. },
  11986. enumerable: true,
  11987. configurable: true
  11988. });
  11989. Object.defineProperty(TextBlock.prototype, "textWrapping", {
  11990. /**
  11991. * Gets or sets a boolean indicating if text must be wrapped
  11992. */
  11993. get: function () {
  11994. return this._textWrapping;
  11995. },
  11996. /**
  11997. * Gets or sets a boolean indicating if text must be wrapped
  11998. */
  11999. set: function (value) {
  12000. if (this._textWrapping === value) {
  12001. return;
  12002. }
  12003. this._textWrapping = +value;
  12004. this._markAsDirty();
  12005. },
  12006. enumerable: true,
  12007. configurable: true
  12008. });
  12009. Object.defineProperty(TextBlock.prototype, "text", {
  12010. /**
  12011. * Gets or sets text to display
  12012. */
  12013. get: function () {
  12014. return this._text;
  12015. },
  12016. /**
  12017. * Gets or sets text to display
  12018. */
  12019. set: function (value) {
  12020. if (this._text === value) {
  12021. return;
  12022. }
  12023. this._text = value;
  12024. this._markAsDirty();
  12025. this.onTextChangedObservable.notifyObservers(this);
  12026. },
  12027. enumerable: true,
  12028. configurable: true
  12029. });
  12030. Object.defineProperty(TextBlock.prototype, "textHorizontalAlignment", {
  12031. /**
  12032. * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
  12033. */
  12034. get: function () {
  12035. return this._textHorizontalAlignment;
  12036. },
  12037. /**
  12038. * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
  12039. */
  12040. set: function (value) {
  12041. if (this._textHorizontalAlignment === value) {
  12042. return;
  12043. }
  12044. this._textHorizontalAlignment = value;
  12045. this._markAsDirty();
  12046. },
  12047. enumerable: true,
  12048. configurable: true
  12049. });
  12050. Object.defineProperty(TextBlock.prototype, "textVerticalAlignment", {
  12051. /**
  12052. * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
  12053. */
  12054. get: function () {
  12055. return this._textVerticalAlignment;
  12056. },
  12057. /**
  12058. * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
  12059. */
  12060. set: function (value) {
  12061. if (this._textVerticalAlignment === value) {
  12062. return;
  12063. }
  12064. this._textVerticalAlignment = value;
  12065. this._markAsDirty();
  12066. },
  12067. enumerable: true,
  12068. configurable: true
  12069. });
  12070. Object.defineProperty(TextBlock.prototype, "lineSpacing", {
  12071. /**
  12072. * Gets or sets line spacing value
  12073. */
  12074. get: function () {
  12075. return this._lineSpacing.toString(this._host);
  12076. },
  12077. /**
  12078. * Gets or sets line spacing value
  12079. */
  12080. set: function (value) {
  12081. if (this._lineSpacing.fromString(value)) {
  12082. this._markAsDirty();
  12083. }
  12084. },
  12085. enumerable: true,
  12086. configurable: true
  12087. });
  12088. Object.defineProperty(TextBlock.prototype, "outlineWidth", {
  12089. /**
  12090. * Gets or sets outlineWidth of the text to display
  12091. */
  12092. get: function () {
  12093. return this._outlineWidth;
  12094. },
  12095. /**
  12096. * Gets or sets outlineWidth of the text to display
  12097. */
  12098. set: function (value) {
  12099. if (this._outlineWidth === value) {
  12100. return;
  12101. }
  12102. this._outlineWidth = value;
  12103. this._markAsDirty();
  12104. },
  12105. enumerable: true,
  12106. configurable: true
  12107. });
  12108. Object.defineProperty(TextBlock.prototype, "outlineColor", {
  12109. /**
  12110. * Gets or sets outlineColor of the text to display
  12111. */
  12112. get: function () {
  12113. return this._outlineColor;
  12114. },
  12115. /**
  12116. * Gets or sets outlineColor of the text to display
  12117. */
  12118. set: function (value) {
  12119. if (this._outlineColor === value) {
  12120. return;
  12121. }
  12122. this._outlineColor = value;
  12123. this._markAsDirty();
  12124. },
  12125. enumerable: true,
  12126. configurable: true
  12127. });
  12128. TextBlock.prototype._getTypeName = function () {
  12129. return "TextBlock";
  12130. };
  12131. TextBlock.prototype._processMeasures = function (parentMeasure, context) {
  12132. if (!this._fontOffset) {
  12133. this._fontOffset = _control__WEBPACK_IMPORTED_MODULE_3__["Control"]._GetFontOffset(context.font);
  12134. }
  12135. _super.prototype._processMeasures.call(this, parentMeasure, context);
  12136. // Prepare lines
  12137. this._lines = this._breakLines(this._currentMeasure.width, context);
  12138. this.onLinesReadyObservable.notifyObservers(this);
  12139. var maxLineWidth = 0;
  12140. for (var i = 0; i < this._lines.length; i++) {
  12141. var line = this._lines[i];
  12142. if (line.width > maxLineWidth) {
  12143. maxLineWidth = line.width;
  12144. }
  12145. }
  12146. if (this._resizeToFit) {
  12147. if (this._textWrapping === TextWrapping.Clip) {
  12148. var newWidth = this.paddingLeftInPixels + this.paddingRightInPixels + maxLineWidth;
  12149. if (newWidth !== this._width.internalValue) {
  12150. this._width.updateInPlace(newWidth, _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL);
  12151. this._rebuildLayout = true;
  12152. }
  12153. }
  12154. var newHeight = this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * this._lines.length;
  12155. if (this._lines.length > 0 && this._lineSpacing.internalValue !== 0) {
  12156. var lineSpacing = 0;
  12157. if (this._lineSpacing.isPixel) {
  12158. lineSpacing = this._lineSpacing.getValue(this._host);
  12159. }
  12160. else {
  12161. lineSpacing = (this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height));
  12162. }
  12163. newHeight += (this._lines.length - 1) * lineSpacing;
  12164. }
  12165. if (newHeight !== this._height.internalValue) {
  12166. this._height.updateInPlace(newHeight, _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__["ValueAndUnit"].UNITMODE_PIXEL);
  12167. this._rebuildLayout = true;
  12168. }
  12169. }
  12170. };
  12171. TextBlock.prototype._drawText = function (text, textWidth, y, context) {
  12172. var width = this._currentMeasure.width;
  12173. var x = 0;
  12174. switch (this._textHorizontalAlignment) {
  12175. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
  12176. x = 0;
  12177. break;
  12178. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
  12179. x = width - textWidth;
  12180. break;
  12181. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER:
  12182. x = (width - textWidth) / 2;
  12183. break;
  12184. }
  12185. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  12186. context.shadowColor = this.shadowColor;
  12187. context.shadowBlur = this.shadowBlur;
  12188. context.shadowOffsetX = this.shadowOffsetX;
  12189. context.shadowOffsetY = this.shadowOffsetY;
  12190. }
  12191. if (this.outlineWidth) {
  12192. context.strokeText(text, this._currentMeasure.left + x, y);
  12193. }
  12194. context.fillText(text, this._currentMeasure.left + x, y);
  12195. };
  12196. /** @hidden */
  12197. TextBlock.prototype._draw = function (context, invalidatedRectangle) {
  12198. context.save();
  12199. this._applyStates(context);
  12200. // Render lines
  12201. this._renderLines(context);
  12202. context.restore();
  12203. };
  12204. TextBlock.prototype._applyStates = function (context) {
  12205. _super.prototype._applyStates.call(this, context);
  12206. if (this.outlineWidth) {
  12207. context.lineWidth = this.outlineWidth;
  12208. context.strokeStyle = this.outlineColor;
  12209. }
  12210. };
  12211. TextBlock.prototype._breakLines = function (refWidth, context) {
  12212. var lines = [];
  12213. var _lines = this.text.split("\n");
  12214. if (this._textWrapping === TextWrapping.Ellipsis) {
  12215. for (var _i = 0, _lines_1 = _lines; _i < _lines_1.length; _i++) {
  12216. var _line = _lines_1[_i];
  12217. lines.push(this._parseLineEllipsis(_line, refWidth, context));
  12218. }
  12219. }
  12220. else if (this._textWrapping === TextWrapping.WordWrap) {
  12221. for (var _a = 0, _lines_2 = _lines; _a < _lines_2.length; _a++) {
  12222. var _line = _lines_2[_a];
  12223. lines.push.apply(lines, this._parseLineWordWrap(_line, refWidth, context));
  12224. }
  12225. }
  12226. else {
  12227. for (var _b = 0, _lines_3 = _lines; _b < _lines_3.length; _b++) {
  12228. var _line = _lines_3[_b];
  12229. lines.push(this._parseLine(_line, context));
  12230. }
  12231. }
  12232. return lines;
  12233. };
  12234. TextBlock.prototype._parseLine = function (line, context) {
  12235. if (line === void 0) { line = ''; }
  12236. return { text: line, width: context.measureText(line).width };
  12237. };
  12238. TextBlock.prototype._parseLineEllipsis = function (line, width, context) {
  12239. if (line === void 0) { line = ''; }
  12240. var lineWidth = context.measureText(line).width;
  12241. if (lineWidth > width) {
  12242. line += '…';
  12243. }
  12244. while (line.length > 2 && lineWidth > width) {
  12245. line = line.slice(0, -2) + '…';
  12246. lineWidth = context.measureText(line).width;
  12247. }
  12248. return { text: line, width: lineWidth };
  12249. };
  12250. TextBlock.prototype._parseLineWordWrap = function (line, width, context) {
  12251. if (line === void 0) { line = ''; }
  12252. var lines = [];
  12253. var words = line.split(' ');
  12254. var lineWidth = 0;
  12255. for (var n = 0; n < words.length; n++) {
  12256. var testLine = n > 0 ? line + " " + words[n] : words[0];
  12257. var metrics = context.measureText(testLine);
  12258. var testWidth = metrics.width;
  12259. if (testWidth > width && n > 0) {
  12260. lines.push({ text: line, width: lineWidth });
  12261. line = words[n];
  12262. lineWidth = context.measureText(line).width;
  12263. }
  12264. else {
  12265. lineWidth = testWidth;
  12266. line = testLine;
  12267. }
  12268. }
  12269. lines.push({ text: line, width: lineWidth });
  12270. return lines;
  12271. };
  12272. TextBlock.prototype._renderLines = function (context) {
  12273. var height = this._currentMeasure.height;
  12274. var rootY = 0;
  12275. switch (this._textVerticalAlignment) {
  12276. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP:
  12277. rootY = this._fontOffset.ascent;
  12278. break;
  12279. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
  12280. rootY = height - this._fontOffset.height * (this._lines.length - 1) - this._fontOffset.descent;
  12281. break;
  12282. case _control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER:
  12283. rootY = this._fontOffset.ascent + (height - this._fontOffset.height * this._lines.length) / 2;
  12284. break;
  12285. }
  12286. rootY += this._currentMeasure.top;
  12287. for (var i = 0; i < this._lines.length; i++) {
  12288. var line = this._lines[i];
  12289. if (i !== 0 && this._lineSpacing.internalValue !== 0) {
  12290. if (this._lineSpacing.isPixel) {
  12291. rootY += this._lineSpacing.getValue(this._host);
  12292. }
  12293. else {
  12294. rootY = rootY + (this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height));
  12295. }
  12296. }
  12297. this._drawText(line.text, line.width, rootY, context);
  12298. rootY += this._fontOffset.height;
  12299. }
  12300. };
  12301. /**
  12302. * Given a width constraint applied on the text block, find the expected height
  12303. * @returns expected height
  12304. */
  12305. TextBlock.prototype.computeExpectedHeight = function () {
  12306. if (this.text && this.widthInPixels) {
  12307. var context_1 = document.createElement('canvas').getContext('2d');
  12308. if (context_1) {
  12309. this._applyStates(context_1);
  12310. if (!this._fontOffset) {
  12311. this._fontOffset = _control__WEBPACK_IMPORTED_MODULE_3__["Control"]._GetFontOffset(context_1.font);
  12312. }
  12313. var lines = this._lines ? this._lines : this._breakLines(this.widthInPixels - this.paddingLeftInPixels - this.paddingRightInPixels, context_1);
  12314. var newHeight = this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * lines.length;
  12315. if (lines.length > 0 && this._lineSpacing.internalValue !== 0) {
  12316. var lineSpacing = 0;
  12317. if (this._lineSpacing.isPixel) {
  12318. lineSpacing = this._lineSpacing.getValue(this._host);
  12319. }
  12320. else {
  12321. lineSpacing = (this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height));
  12322. }
  12323. newHeight += (lines.length - 1) * lineSpacing;
  12324. }
  12325. return newHeight;
  12326. }
  12327. }
  12328. return 0;
  12329. };
  12330. TextBlock.prototype.dispose = function () {
  12331. _super.prototype.dispose.call(this);
  12332. this.onTextChangedObservable.clear();
  12333. };
  12334. return TextBlock;
  12335. }(_control__WEBPACK_IMPORTED_MODULE_3__["Control"]));
  12336. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.TextBlock"] = TextBlock;
  12337. /***/ }),
  12338. /***/ "./2D/controls/virtualKeyboard.ts":
  12339. /*!****************************************!*\
  12340. !*** ./2D/controls/virtualKeyboard.ts ***!
  12341. \****************************************/
  12342. /*! exports provided: KeyPropertySet, VirtualKeyboard */
  12343. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12344. "use strict";
  12345. __webpack_require__.r(__webpack_exports__);
  12346. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return KeyPropertySet; });
  12347. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return VirtualKeyboard; });
  12348. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  12349. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  12350. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
  12351. /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
  12352. /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
  12353. /**
  12354. * Class used to store key control properties
  12355. */
  12356. var KeyPropertySet = /** @class */ (function () {
  12357. function KeyPropertySet() {
  12358. }
  12359. return KeyPropertySet;
  12360. }());
  12361. /**
  12362. * Class used to create virtual keyboard
  12363. */
  12364. var VirtualKeyboard = /** @class */ (function (_super) {
  12365. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(VirtualKeyboard, _super);
  12366. function VirtualKeyboard() {
  12367. var _this = _super !== null && _super.apply(this, arguments) || this;
  12368. /** Observable raised when a key is pressed */
  12369. _this.onKeyPressObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
  12370. /** Gets or sets default key button width */
  12371. _this.defaultButtonWidth = "40px";
  12372. /** Gets or sets default key button height */
  12373. _this.defaultButtonHeight = "40px";
  12374. /** Gets or sets default key button left padding */
  12375. _this.defaultButtonPaddingLeft = "2px";
  12376. /** Gets or sets default key button right padding */
  12377. _this.defaultButtonPaddingRight = "2px";
  12378. /** Gets or sets default key button top padding */
  12379. _this.defaultButtonPaddingTop = "2px";
  12380. /** Gets or sets default key button bottom padding */
  12381. _this.defaultButtonPaddingBottom = "2px";
  12382. /** Gets or sets default key button foreground color */
  12383. _this.defaultButtonColor = "#DDD";
  12384. /** Gets or sets default key button background color */
  12385. _this.defaultButtonBackground = "#070707";
  12386. /** Gets or sets shift button foreground color */
  12387. _this.shiftButtonColor = "#7799FF";
  12388. /** Gets or sets shift button thickness*/
  12389. _this.selectedShiftThickness = 1;
  12390. /** Gets shift key state */
  12391. _this.shiftState = 0;
  12392. _this._currentlyConnectedInputText = null;
  12393. _this._connectedInputTexts = [];
  12394. _this._onKeyPressObserver = null;
  12395. return _this;
  12396. }
  12397. VirtualKeyboard.prototype._getTypeName = function () {
  12398. return "VirtualKeyboard";
  12399. };
  12400. VirtualKeyboard.prototype._createKey = function (key, propertySet) {
  12401. var _this = this;
  12402. var button = _button__WEBPACK_IMPORTED_MODULE_3__["Button"].CreateSimpleButton(key, key);
  12403. button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
  12404. button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
  12405. button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor;
  12406. button.background = propertySet && propertySet.background ? propertySet.background : this.defaultButtonBackground;
  12407. button.paddingLeft = propertySet && propertySet.paddingLeft ? propertySet.paddingLeft : this.defaultButtonPaddingLeft;
  12408. button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight;
  12409. button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop;
  12410. button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom;
  12411. button.thickness = 0;
  12412. button.isFocusInvisible = true;
  12413. button.shadowColor = this.shadowColor;
  12414. button.shadowBlur = this.shadowBlur;
  12415. button.shadowOffsetX = this.shadowOffsetX;
  12416. button.shadowOffsetY = this.shadowOffsetY;
  12417. button.onPointerUpObservable.add(function () {
  12418. _this.onKeyPressObservable.notifyObservers(key);
  12419. });
  12420. return button;
  12421. };
  12422. /**
  12423. * Adds a new row of keys
  12424. * @param keys defines the list of keys to add
  12425. * @param propertySets defines the associated property sets
  12426. */
  12427. VirtualKeyboard.prototype.addKeysRow = function (keys, propertySets) {
  12428. var panel = new _stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]();
  12429. panel.isVertical = false;
  12430. panel.isFocusInvisible = true;
  12431. var maxKey = null;
  12432. for (var i = 0; i < keys.length; i++) {
  12433. var properties = null;
  12434. if (propertySets && propertySets.length === keys.length) {
  12435. properties = propertySets[i];
  12436. }
  12437. var key = this._createKey(keys[i], properties);
  12438. if (!maxKey || key.heightInPixels > maxKey.heightInPixels) {
  12439. maxKey = key;
  12440. }
  12441. panel.addControl(key);
  12442. }
  12443. panel.height = maxKey ? maxKey.height : this.defaultButtonHeight;
  12444. this.addControl(panel);
  12445. };
  12446. /**
  12447. * Set the shift key to a specific state
  12448. * @param shiftState defines the new shift state
  12449. */
  12450. VirtualKeyboard.prototype.applyShiftState = function (shiftState) {
  12451. if (!this.children) {
  12452. return;
  12453. }
  12454. for (var i = 0; i < this.children.length; i++) {
  12455. var row = this.children[i];
  12456. if (!row || !row.children) {
  12457. continue;
  12458. }
  12459. var rowContainer = row;
  12460. for (var j = 0; j < rowContainer.children.length; j++) {
  12461. var button = rowContainer.children[j];
  12462. if (!button || !button.children[0]) {
  12463. continue;
  12464. }
  12465. var button_tblock = button.children[0];
  12466. if (button_tblock.text === "\u21E7") {
  12467. button.color = (shiftState ? this.shiftButtonColor : this.defaultButtonColor);
  12468. button.thickness = (shiftState > 1 ? this.selectedShiftThickness : 0);
  12469. }
  12470. button_tblock.text = (shiftState > 0 ? button_tblock.text.toUpperCase() : button_tblock.text.toLowerCase());
  12471. }
  12472. }
  12473. };
  12474. Object.defineProperty(VirtualKeyboard.prototype, "connectedInputText", {
  12475. /** Gets the input text control currently attached to the keyboard */
  12476. get: function () {
  12477. return this._currentlyConnectedInputText;
  12478. },
  12479. enumerable: true,
  12480. configurable: true
  12481. });
  12482. /**
  12483. * Connects the keyboard with an input text control
  12484. *
  12485. * @param input defines the target control
  12486. */
  12487. VirtualKeyboard.prototype.connect = function (input) {
  12488. var _this = this;
  12489. var inputTextAlreadyConnected = this._connectedInputTexts.some(function (a) { return a.input === input; });
  12490. if (inputTextAlreadyConnected) {
  12491. return;
  12492. }
  12493. if (this._onKeyPressObserver === null) {
  12494. this._onKeyPressObserver = this.onKeyPressObservable.add(function (key) {
  12495. if (!_this._currentlyConnectedInputText) {
  12496. return;
  12497. }
  12498. _this._currentlyConnectedInputText._host.focusedControl = _this._currentlyConnectedInputText;
  12499. switch (key) {
  12500. case "\u21E7":
  12501. _this.shiftState++;
  12502. if (_this.shiftState > 2) {
  12503. _this.shiftState = 0;
  12504. }
  12505. _this.applyShiftState(_this.shiftState);
  12506. return;
  12507. case "\u2190":
  12508. _this._currentlyConnectedInputText.processKey(8);
  12509. return;
  12510. case "\u21B5":
  12511. _this._currentlyConnectedInputText.processKey(13);
  12512. return;
  12513. }
  12514. _this._currentlyConnectedInputText.processKey(-1, (_this.shiftState ? key.toUpperCase() : key));
  12515. if (_this.shiftState === 1) {
  12516. _this.shiftState = 0;
  12517. _this.applyShiftState(_this.shiftState);
  12518. }
  12519. });
  12520. }
  12521. this.isVisible = false;
  12522. this._currentlyConnectedInputText = input;
  12523. input._connectedVirtualKeyboard = this;
  12524. // Events hooking
  12525. var onFocusObserver = input.onFocusObservable.add(function () {
  12526. _this._currentlyConnectedInputText = input;
  12527. input._connectedVirtualKeyboard = _this;
  12528. _this.isVisible = true;
  12529. });
  12530. var onBlurObserver = input.onBlurObservable.add(function () {
  12531. input._connectedVirtualKeyboard = null;
  12532. _this._currentlyConnectedInputText = null;
  12533. _this.isVisible = false;
  12534. });
  12535. this._connectedInputTexts.push({
  12536. input: input,
  12537. onBlurObserver: onBlurObserver,
  12538. onFocusObserver: onFocusObserver
  12539. });
  12540. };
  12541. /**
  12542. * Disconnects the keyboard from connected InputText controls
  12543. *
  12544. * @param input optionally defines a target control, otherwise all are disconnected
  12545. */
  12546. VirtualKeyboard.prototype.disconnect = function (input) {
  12547. var _this = this;
  12548. if (input) {
  12549. // .find not available on IE
  12550. var filtered = this._connectedInputTexts.filter(function (a) { return a.input === input; });
  12551. if (filtered.length === 1) {
  12552. this._removeConnectedInputObservables(filtered[0]);
  12553. this._connectedInputTexts = this._connectedInputTexts.filter(function (a) { return a.input !== input; });
  12554. if (this._currentlyConnectedInputText === input) {
  12555. this._currentlyConnectedInputText = null;
  12556. }
  12557. }
  12558. }
  12559. else {
  12560. this._connectedInputTexts.forEach(function (connectedInputText) {
  12561. _this._removeConnectedInputObservables(connectedInputText);
  12562. });
  12563. this._connectedInputTexts = [];
  12564. }
  12565. if (this._connectedInputTexts.length === 0) {
  12566. this._currentlyConnectedInputText = null;
  12567. this.onKeyPressObservable.remove(this._onKeyPressObserver);
  12568. this._onKeyPressObserver = null;
  12569. }
  12570. };
  12571. VirtualKeyboard.prototype._removeConnectedInputObservables = function (connectedInputText) {
  12572. connectedInputText.input._connectedVirtualKeyboard = null;
  12573. connectedInputText.input.onFocusObservable.remove(connectedInputText.onFocusObserver);
  12574. connectedInputText.input.onBlurObservable.remove(connectedInputText.onBlurObserver);
  12575. };
  12576. /**
  12577. * Release all resources
  12578. */
  12579. VirtualKeyboard.prototype.dispose = function () {
  12580. _super.prototype.dispose.call(this);
  12581. this.disconnect();
  12582. };
  12583. // Statics
  12584. /**
  12585. * Creates a new keyboard using a default layout
  12586. *
  12587. * @param name defines control name
  12588. * @returns a new VirtualKeyboard
  12589. */
  12590. VirtualKeyboard.CreateDefaultLayout = function (name) {
  12591. var returnValue = new VirtualKeyboard(name);
  12592. returnValue.addKeysRow(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "\u2190"]);
  12593. returnValue.addKeysRow(["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]);
  12594. returnValue.addKeysRow(["a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "\u21B5"]);
  12595. returnValue.addKeysRow(["\u21E7", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/"]);
  12596. returnValue.addKeysRow([" "], [{ width: "200px" }]);
  12597. return returnValue;
  12598. };
  12599. return VirtualKeyboard;
  12600. }(_stackPanel__WEBPACK_IMPORTED_MODULE_2__["StackPanel"]));
  12601. babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.VirtualKeyboard"] = VirtualKeyboard;
  12602. /***/ }),
  12603. /***/ "./2D/index.ts":
  12604. /*!*********************!*\
  12605. !*** ./2D/index.ts ***!
  12606. \*********************/
  12607. /*! exports provided: AdvancedDynamicTexture, AdvancedDynamicTextureInstrumentation, Vector2WithInfo, Matrix2D, Measure, MultiLinePoint, Style, ValueAndUnit, XmlLoader, Button, Checkbox, ColorPicker, Container, Control, Ellipse, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name */
  12608. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12609. "use strict";
  12610. __webpack_require__.r(__webpack_exports__);
  12611. /* harmony import */ var _controls__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./controls */ "./2D/controls/index.ts");
  12612. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  12613. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Checkbox"]; });
  12614. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ColorPicker"]; });
  12615. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Container"]; });
  12616. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Control"]; });
  12617. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Ellipse"]; });
  12618. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Grid"]; });
  12619. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Image"]; });
  12620. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["InputText"]; });
  12621. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["InputPassword"]; });
  12622. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Line"]; });
  12623. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["MultiLine"]; });
  12624. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["RadioButton"]; });
  12625. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["StackPanel"]; });
  12626. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SelectorGroup"]; });
  12627. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["CheckboxGroup"]; });
  12628. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["RadioGroup"]; });
  12629. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SliderGroup"]; });
  12630. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SelectionPanel"]; });
  12631. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ScrollViewer"]; });
  12632. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["TextWrapping"]; });
  12633. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["TextBlock"]; });
  12634. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["KeyPropertySet"]; });
  12635. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["VirtualKeyboard"]; });
  12636. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Rectangle"]; });
  12637. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["DisplayGrid"]; });
  12638. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["BaseSlider"]; });
  12639. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Slider"]; });
  12640. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ImageBasedSlider"]; });
  12641. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ScrollBar"]; });
  12642. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ImageScrollBar"]; });
  12643. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["name"]; });
  12644. /* harmony import */ var _advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
  12645. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return _advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_1__["AdvancedDynamicTexture"]; });
  12646. /* harmony import */ var _adtInstrumentation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./adtInstrumentation */ "./2D/adtInstrumentation.ts");
  12647. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return _adtInstrumentation__WEBPACK_IMPORTED_MODULE_2__["AdvancedDynamicTextureInstrumentation"]; });
  12648. /* harmony import */ var _math2D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./math2D */ "./2D/math2D.ts");
  12649. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return _math2D__WEBPACK_IMPORTED_MODULE_3__["Vector2WithInfo"]; });
  12650. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"]; });
  12651. /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./measure */ "./2D/measure.ts");
  12652. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"]; });
  12653. /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./multiLinePoint */ "./2D/multiLinePoint.ts");
  12654. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return _multiLinePoint__WEBPACK_IMPORTED_MODULE_5__["MultiLinePoint"]; });
  12655. /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
  12656. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return _style__WEBPACK_IMPORTED_MODULE_6__["Style"]; });
  12657. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
  12658. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return _valueAndUnit__WEBPACK_IMPORTED_MODULE_7__["ValueAndUnit"]; });
  12659. /* harmony import */ var _xmlLoader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./xmlLoader */ "./2D/xmlLoader.ts");
  12660. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return _xmlLoader__WEBPACK_IMPORTED_MODULE_8__["XmlLoader"]; });
  12661. /***/ }),
  12662. /***/ "./2D/math2D.ts":
  12663. /*!**********************!*\
  12664. !*** ./2D/math2D.ts ***!
  12665. \**********************/
  12666. /*! exports provided: Vector2WithInfo, Matrix2D */
  12667. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12668. "use strict";
  12669. __webpack_require__.r(__webpack_exports__);
  12670. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return Vector2WithInfo; });
  12671. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return Matrix2D; });
  12672. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  12673. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  12674. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
  12675. /**
  12676. * Class used to transport Vector2 information for pointer events
  12677. */
  12678. var Vector2WithInfo = /** @class */ (function (_super) {
  12679. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Vector2WithInfo, _super);
  12680. /**
  12681. * Creates a new Vector2WithInfo
  12682. * @param source defines the vector2 data to transport
  12683. * @param buttonIndex defines the current mouse button index
  12684. */
  12685. function Vector2WithInfo(source,
  12686. /** defines the current mouse button index */
  12687. buttonIndex) {
  12688. if (buttonIndex === void 0) { buttonIndex = 0; }
  12689. var _this = _super.call(this, source.x, source.y) || this;
  12690. _this.buttonIndex = buttonIndex;
  12691. return _this;
  12692. }
  12693. return Vector2WithInfo;
  12694. }(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector2"]));
  12695. /** Class used to provide 2D matrix features */
  12696. var Matrix2D = /** @class */ (function () {
  12697. /**
  12698. * Creates a new matrix
  12699. * @param m00 defines value for (0, 0)
  12700. * @param m01 defines value for (0, 1)
  12701. * @param m10 defines value for (1, 0)
  12702. * @param m11 defines value for (1, 1)
  12703. * @param m20 defines value for (2, 0)
  12704. * @param m21 defines value for (2, 1)
  12705. */
  12706. function Matrix2D(m00, m01, m10, m11, m20, m21) {
  12707. /** Gets the internal array of 6 floats used to store matrix data */
  12708. this.m = new Float32Array(6);
  12709. this.fromValues(m00, m01, m10, m11, m20, m21);
  12710. }
  12711. /**
  12712. * Fills the matrix from direct values
  12713. * @param m00 defines value for (0, 0)
  12714. * @param m01 defines value for (0, 1)
  12715. * @param m10 defines value for (1, 0)
  12716. * @param m11 defines value for (1, 1)
  12717. * @param m20 defines value for (2, 0)
  12718. * @param m21 defines value for (2, 1)
  12719. * @returns the current modified matrix
  12720. */
  12721. Matrix2D.prototype.fromValues = function (m00, m01, m10, m11, m20, m21) {
  12722. this.m[0] = m00;
  12723. this.m[1] = m01;
  12724. this.m[2] = m10;
  12725. this.m[3] = m11;
  12726. this.m[4] = m20;
  12727. this.m[5] = m21;
  12728. return this;
  12729. };
  12730. /**
  12731. * Gets matrix determinant
  12732. * @returns the determinant
  12733. */
  12734. Matrix2D.prototype.determinant = function () {
  12735. return this.m[0] * this.m[3] - this.m[1] * this.m[2];
  12736. };
  12737. /**
  12738. * Inverses the matrix and stores it in a target matrix
  12739. * @param result defines the target matrix
  12740. * @returns the current matrix
  12741. */
  12742. Matrix2D.prototype.invertToRef = function (result) {
  12743. var l0 = this.m[0];
  12744. var l1 = this.m[1];
  12745. var l2 = this.m[2];
  12746. var l3 = this.m[3];
  12747. var l4 = this.m[4];
  12748. var l5 = this.m[5];
  12749. var det = this.determinant();
  12750. if (det < (babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Epsilon"] * babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Epsilon"])) {
  12751. result.m[0] = 0;
  12752. result.m[1] = 0;
  12753. result.m[2] = 0;
  12754. result.m[3] = 0;
  12755. result.m[4] = 0;
  12756. result.m[5] = 0;
  12757. return this;
  12758. }
  12759. var detDiv = 1 / det;
  12760. var det4 = l2 * l5 - l3 * l4;
  12761. var det5 = l1 * l4 - l0 * l5;
  12762. result.m[0] = l3 * detDiv;
  12763. result.m[1] = -l1 * detDiv;
  12764. result.m[2] = -l2 * detDiv;
  12765. result.m[3] = l0 * detDiv;
  12766. result.m[4] = det4 * detDiv;
  12767. result.m[5] = det5 * detDiv;
  12768. return this;
  12769. };
  12770. /**
  12771. * Multiplies the current matrix with another one
  12772. * @param other defines the second operand
  12773. * @param result defines the target matrix
  12774. * @returns the current matrix
  12775. */
  12776. Matrix2D.prototype.multiplyToRef = function (other, result) {
  12777. var l0 = this.m[0];
  12778. var l1 = this.m[1];
  12779. var l2 = this.m[2];
  12780. var l3 = this.m[3];
  12781. var l4 = this.m[4];
  12782. var l5 = this.m[5];
  12783. var r0 = other.m[0];
  12784. var r1 = other.m[1];
  12785. var r2 = other.m[2];
  12786. var r3 = other.m[3];
  12787. var r4 = other.m[4];
  12788. var r5 = other.m[5];
  12789. result.m[0] = l0 * r0 + l1 * r2;
  12790. result.m[1] = l0 * r1 + l1 * r3;
  12791. result.m[2] = l2 * r0 + l3 * r2;
  12792. result.m[3] = l2 * r1 + l3 * r3;
  12793. result.m[4] = l4 * r0 + l5 * r2 + r4;
  12794. result.m[5] = l4 * r1 + l5 * r3 + r5;
  12795. return this;
  12796. };
  12797. /**
  12798. * Applies the current matrix to a set of 2 floats and stores the result in a vector2
  12799. * @param x defines the x coordinate to transform
  12800. * @param y defines the x coordinate to transform
  12801. * @param result defines the target vector2
  12802. * @returns the current matrix
  12803. */
  12804. Matrix2D.prototype.transformCoordinates = function (x, y, result) {
  12805. result.x = x * this.m[0] + y * this.m[2] + this.m[4];
  12806. result.y = x * this.m[1] + y * this.m[3] + this.m[5];
  12807. return this;
  12808. };
  12809. // Statics
  12810. /**
  12811. * Creates an identity matrix
  12812. * @returns a new matrix
  12813. */
  12814. Matrix2D.Identity = function () {
  12815. return new Matrix2D(1, 0, 0, 1, 0, 0);
  12816. };
  12817. /**
  12818. * Creates a translation matrix and stores it in a target matrix
  12819. * @param x defines the x coordinate of the translation
  12820. * @param y defines the y coordinate of the translation
  12821. * @param result defines the target matrix
  12822. */
  12823. Matrix2D.TranslationToRef = function (x, y, result) {
  12824. result.fromValues(1, 0, 0, 1, x, y);
  12825. };
  12826. /**
  12827. * Creates a scaling matrix and stores it in a target matrix
  12828. * @param x defines the x coordinate of the scaling
  12829. * @param y defines the y coordinate of the scaling
  12830. * @param result defines the target matrix
  12831. */
  12832. Matrix2D.ScalingToRef = function (x, y, result) {
  12833. result.fromValues(x, 0, 0, y, 0, 0);
  12834. };
  12835. /**
  12836. * Creates a rotation matrix and stores it in a target matrix
  12837. * @param angle defines the rotation angle
  12838. * @param result defines the target matrix
  12839. */
  12840. Matrix2D.RotationToRef = function (angle, result) {
  12841. var s = Math.sin(angle);
  12842. var c = Math.cos(angle);
  12843. result.fromValues(c, s, -s, c, 0, 0);
  12844. };
  12845. /**
  12846. * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
  12847. * @param tx defines the x coordinate of the translation
  12848. * @param ty defines the y coordinate of the translation
  12849. * @param angle defines the rotation angle
  12850. * @param scaleX defines the x coordinate of the scaling
  12851. * @param scaleY defines the y coordinate of the scaling
  12852. * @param parentMatrix defines the parent matrix to multiply by (can be null)
  12853. * @param result defines the target matrix
  12854. */
  12855. Matrix2D.ComposeToRef = function (tx, ty, angle, scaleX, scaleY, parentMatrix, result) {
  12856. Matrix2D.TranslationToRef(tx, ty, Matrix2D._TempPreTranslationMatrix);
  12857. Matrix2D.ScalingToRef(scaleX, scaleY, Matrix2D._TempScalingMatrix);
  12858. Matrix2D.RotationToRef(angle, Matrix2D._TempRotationMatrix);
  12859. Matrix2D.TranslationToRef(-tx, -ty, Matrix2D._TempPostTranslationMatrix);
  12860. Matrix2D._TempPreTranslationMatrix.multiplyToRef(Matrix2D._TempScalingMatrix, Matrix2D._TempCompose0);
  12861. Matrix2D._TempCompose0.multiplyToRef(Matrix2D._TempRotationMatrix, Matrix2D._TempCompose1);
  12862. if (parentMatrix) {
  12863. Matrix2D._TempCompose1.multiplyToRef(Matrix2D._TempPostTranslationMatrix, Matrix2D._TempCompose2);
  12864. Matrix2D._TempCompose2.multiplyToRef(parentMatrix, result);
  12865. }
  12866. else {
  12867. Matrix2D._TempCompose1.multiplyToRef(Matrix2D._TempPostTranslationMatrix, result);
  12868. }
  12869. };
  12870. Matrix2D._TempPreTranslationMatrix = Matrix2D.Identity();
  12871. Matrix2D._TempPostTranslationMatrix = Matrix2D.Identity();
  12872. Matrix2D._TempRotationMatrix = Matrix2D.Identity();
  12873. Matrix2D._TempScalingMatrix = Matrix2D.Identity();
  12874. Matrix2D._TempCompose0 = Matrix2D.Identity();
  12875. Matrix2D._TempCompose1 = Matrix2D.Identity();
  12876. Matrix2D._TempCompose2 = Matrix2D.Identity();
  12877. return Matrix2D;
  12878. }());
  12879. /***/ }),
  12880. /***/ "./2D/measure.ts":
  12881. /*!***********************!*\
  12882. !*** ./2D/measure.ts ***!
  12883. \***********************/
  12884. /*! exports provided: Measure */
  12885. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  12886. "use strict";
  12887. __webpack_require__.r(__webpack_exports__);
  12888. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return Measure; });
  12889. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  12890. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
  12891. var tmpRect = [
  12892. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12893. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12894. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12895. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12896. ];
  12897. var tmpRect2 = [
  12898. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12899. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12900. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12901. new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0),
  12902. ];
  12903. var tmpV1 = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0);
  12904. var tmpV2 = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0);
  12905. /**
  12906. * Class used to store 2D control sizes
  12907. */
  12908. var Measure = /** @class */ (function () {
  12909. /**
  12910. * Creates a new measure
  12911. * @param left defines left coordinate
  12912. * @param top defines top coordinate
  12913. * @param width defines width dimension
  12914. * @param height defines height dimension
  12915. */
  12916. function Measure(
  12917. /** defines left coordinate */
  12918. left,
  12919. /** defines top coordinate */
  12920. top,
  12921. /** defines width dimension */
  12922. width,
  12923. /** defines height dimension */
  12924. height) {
  12925. this.left = left;
  12926. this.top = top;
  12927. this.width = width;
  12928. this.height = height;
  12929. }
  12930. /**
  12931. * Copy from another measure
  12932. * @param other defines the other measure to copy from
  12933. */
  12934. Measure.prototype.copyFrom = function (other) {
  12935. this.left = other.left;
  12936. this.top = other.top;
  12937. this.width = other.width;
  12938. this.height = other.height;
  12939. };
  12940. /**
  12941. * Copy from a group of 4 floats
  12942. * @param left defines left coordinate
  12943. * @param top defines top coordinate
  12944. * @param width defines width dimension
  12945. * @param height defines height dimension
  12946. */
  12947. Measure.prototype.copyFromFloats = function (left, top, width, height) {
  12948. this.left = left;
  12949. this.top = top;
  12950. this.width = width;
  12951. this.height = height;
  12952. };
  12953. /**
  12954. * Computes the axis aligned bounding box measure for two given measures
  12955. * @param a Input measure
  12956. * @param b Input measure
  12957. * @param result the resulting bounding measure
  12958. */
  12959. Measure.CombineToRef = function (a, b, result) {
  12960. var left = Math.min(a.left, b.left);
  12961. var top = Math.min(a.top, b.top);
  12962. var right = Math.max(a.left + a.width, b.left + b.width);
  12963. var bottom = Math.max(a.top + a.height, b.top + b.height);
  12964. result.left = left;
  12965. result.top = top;
  12966. result.width = right - left;
  12967. result.height = bottom - top;
  12968. };
  12969. /**
  12970. * Computes the axis aligned bounding box of the measure after it is modified by a given transform
  12971. * @param transform the matrix to transform the measure before computing the AABB
  12972. * @param result the resulting AABB
  12973. */
  12974. Measure.prototype.transformToRef = function (transform, result) {
  12975. tmpRect[0].copyFromFloats(this.left, this.top);
  12976. tmpRect[1].copyFromFloats(this.left + this.width, this.top);
  12977. tmpRect[2].copyFromFloats(this.left + this.width, this.top + this.height);
  12978. tmpRect[3].copyFromFloats(this.left, this.top + this.height);
  12979. tmpV1.copyFromFloats(Number.MAX_VALUE, Number.MAX_VALUE);
  12980. tmpV2.copyFromFloats(0, 0);
  12981. for (var i = 0; i < 4; i++) {
  12982. transform.transformCoordinates(tmpRect[i].x, tmpRect[i].y, tmpRect2[i]);
  12983. tmpV1.x = Math.floor(Math.min(tmpV1.x, tmpRect2[i].x));
  12984. tmpV1.y = Math.floor(Math.min(tmpV1.y, tmpRect2[i].y));
  12985. tmpV2.x = Math.ceil(Math.max(tmpV2.x, tmpRect2[i].x));
  12986. tmpV2.y = Math.ceil(Math.max(tmpV2.y, tmpRect2[i].y));
  12987. }
  12988. result.left = tmpV1.x;
  12989. result.top = tmpV1.y;
  12990. result.width = tmpV2.x - tmpV1.x;
  12991. result.height = tmpV2.y - tmpV1.y;
  12992. };
  12993. /**
  12994. * Check equality between this measure and another one
  12995. * @param other defines the other measures
  12996. * @returns true if both measures are equals
  12997. */
  12998. Measure.prototype.isEqualsTo = function (other) {
  12999. if (this.left !== other.left) {
  13000. return false;
  13001. }
  13002. if (this.top !== other.top) {
  13003. return false;
  13004. }
  13005. if (this.width !== other.width) {
  13006. return false;
  13007. }
  13008. if (this.height !== other.height) {
  13009. return false;
  13010. }
  13011. return true;
  13012. };
  13013. /**
  13014. * Creates an empty measure
  13015. * @returns a new measure
  13016. */
  13017. Measure.Empty = function () {
  13018. return new Measure(0, 0, 0, 0);
  13019. };
  13020. return Measure;
  13021. }());
  13022. /***/ }),
  13023. /***/ "./2D/multiLinePoint.ts":
  13024. /*!******************************!*\
  13025. !*** ./2D/multiLinePoint.ts ***!
  13026. \******************************/
  13027. /*! exports provided: MultiLinePoint */
  13028. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13029. "use strict";
  13030. __webpack_require__.r(__webpack_exports__);
  13031. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return MultiLinePoint; });
  13032. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  13033. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
  13034. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
  13035. /**
  13036. * Class used to store a point for a MultiLine object.
  13037. * The point can be pure 2D coordinates, a mesh or a control
  13038. */
  13039. var MultiLinePoint = /** @class */ (function () {
  13040. /**
  13041. * Creates a new MultiLinePoint
  13042. * @param multiLine defines the source MultiLine object
  13043. */
  13044. function MultiLinePoint(multiLine) {
  13045. this._multiLine = multiLine;
  13046. this._x = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  13047. this._y = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
  13048. this._point = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0);
  13049. }
  13050. Object.defineProperty(MultiLinePoint.prototype, "x", {
  13051. /** Gets or sets x coordinate */
  13052. get: function () {
  13053. return this._x.toString(this._multiLine._host);
  13054. },
  13055. set: function (value) {
  13056. if (this._x.toString(this._multiLine._host) === value) {
  13057. return;
  13058. }
  13059. if (this._x.fromString(value)) {
  13060. this._multiLine._markAsDirty();
  13061. }
  13062. },
  13063. enumerable: true,
  13064. configurable: true
  13065. });
  13066. Object.defineProperty(MultiLinePoint.prototype, "y", {
  13067. /** Gets or sets y coordinate */
  13068. get: function () {
  13069. return this._y.toString(this._multiLine._host);
  13070. },
  13071. set: function (value) {
  13072. if (this._y.toString(this._multiLine._host) === value) {
  13073. return;
  13074. }
  13075. if (this._y.fromString(value)) {
  13076. this._multiLine._markAsDirty();
  13077. }
  13078. },
  13079. enumerable: true,
  13080. configurable: true
  13081. });
  13082. Object.defineProperty(MultiLinePoint.prototype, "control", {
  13083. /** Gets or sets the control associated with this point */
  13084. get: function () {
  13085. return this._control;
  13086. },
  13087. set: function (value) {
  13088. if (this._control === value) {
  13089. return;
  13090. }
  13091. if (this._control && this._controlObserver) {
  13092. this._control.onDirtyObservable.remove(this._controlObserver);
  13093. this._controlObserver = null;
  13094. }
  13095. this._control = value;
  13096. if (this._control) {
  13097. this._controlObserver = this._control.onDirtyObservable.add(this._multiLine.onPointUpdate);
  13098. }
  13099. this._multiLine._markAsDirty();
  13100. },
  13101. enumerable: true,
  13102. configurable: true
  13103. });
  13104. Object.defineProperty(MultiLinePoint.prototype, "mesh", {
  13105. /** Gets or sets the mesh associated with this point */
  13106. get: function () {
  13107. return this._mesh;
  13108. },
  13109. set: function (value) {
  13110. if (this._mesh === value) {
  13111. return;
  13112. }
  13113. if (this._mesh && this._meshObserver) {
  13114. this._mesh.getScene().onAfterCameraRenderObservable.remove(this._meshObserver);
  13115. }
  13116. this._mesh = value;
  13117. if (this._mesh) {
  13118. this._meshObserver = this._mesh.getScene().onAfterCameraRenderObservable.add(this._multiLine.onPointUpdate);
  13119. }
  13120. this._multiLine._markAsDirty();
  13121. },
  13122. enumerable: true,
  13123. configurable: true
  13124. });
  13125. /** Resets links */
  13126. MultiLinePoint.prototype.resetLinks = function () {
  13127. this.control = null;
  13128. this.mesh = null;
  13129. };
  13130. /**
  13131. * Gets a translation vector
  13132. * @returns the translation vector
  13133. */
  13134. MultiLinePoint.prototype.translate = function () {
  13135. this._point = this._translatePoint();
  13136. return this._point;
  13137. };
  13138. MultiLinePoint.prototype._translatePoint = function () {
  13139. if (this._mesh != null) {
  13140. return this._multiLine._host.getProjectedPosition(this._mesh.getBoundingInfo().boundingSphere.center, this._mesh.getWorldMatrix());
  13141. }
  13142. else if (this._control != null) {
  13143. return new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](this._control.centerX, this._control.centerY);
  13144. }
  13145. else {
  13146. var host = this._multiLine._host;
  13147. var xValue = this._x.getValueInPixel(host, Number(host._canvas.width));
  13148. var yValue = this._y.getValueInPixel(host, Number(host._canvas.height));
  13149. return new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__["Vector2"](xValue, yValue);
  13150. }
  13151. };
  13152. /** Release associated resources */
  13153. MultiLinePoint.prototype.dispose = function () {
  13154. this.resetLinks();
  13155. };
  13156. return MultiLinePoint;
  13157. }());
  13158. /***/ }),
  13159. /***/ "./2D/style.ts":
  13160. /*!*********************!*\
  13161. !*** ./2D/style.ts ***!
  13162. \*********************/
  13163. /*! exports provided: Style */
  13164. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13165. "use strict";
  13166. __webpack_require__.r(__webpack_exports__);
  13167. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return Style; });
  13168. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  13169. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  13170. /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
  13171. /**
  13172. * Define a style used by control to automatically setup properties based on a template.
  13173. * Only support font related properties so far
  13174. */
  13175. var Style = /** @class */ (function () {
  13176. /**
  13177. * Creates a new style object
  13178. * @param host defines the AdvancedDynamicTexture which hosts this style
  13179. */
  13180. function Style(host) {
  13181. this._fontFamily = "Arial";
  13182. this._fontStyle = "";
  13183. this._fontWeight = "";
  13184. /** @hidden */
  13185. this._fontSize = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](18, _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PIXEL, false);
  13186. /**
  13187. * Observable raised when the style values are changed
  13188. */
  13189. this.onChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  13190. this._host = host;
  13191. }
  13192. Object.defineProperty(Style.prototype, "fontSize", {
  13193. /**
  13194. * Gets or sets the font size
  13195. */
  13196. get: function () {
  13197. return this._fontSize.toString(this._host);
  13198. },
  13199. set: function (value) {
  13200. if (this._fontSize.toString(this._host) === value) {
  13201. return;
  13202. }
  13203. if (this._fontSize.fromString(value)) {
  13204. this.onChangedObservable.notifyObservers(this);
  13205. }
  13206. },
  13207. enumerable: true,
  13208. configurable: true
  13209. });
  13210. Object.defineProperty(Style.prototype, "fontFamily", {
  13211. /**
  13212. * Gets or sets the font family
  13213. */
  13214. get: function () {
  13215. return this._fontFamily;
  13216. },
  13217. set: function (value) {
  13218. if (this._fontFamily === value) {
  13219. return;
  13220. }
  13221. this._fontFamily = value;
  13222. this.onChangedObservable.notifyObservers(this);
  13223. },
  13224. enumerable: true,
  13225. configurable: true
  13226. });
  13227. Object.defineProperty(Style.prototype, "fontStyle", {
  13228. /**
  13229. * Gets or sets the font style
  13230. */
  13231. get: function () {
  13232. return this._fontStyle;
  13233. },
  13234. set: function (value) {
  13235. if (this._fontStyle === value) {
  13236. return;
  13237. }
  13238. this._fontStyle = value;
  13239. this.onChangedObservable.notifyObservers(this);
  13240. },
  13241. enumerable: true,
  13242. configurable: true
  13243. });
  13244. Object.defineProperty(Style.prototype, "fontWeight", {
  13245. /** Gets or sets font weight */
  13246. get: function () {
  13247. return this._fontWeight;
  13248. },
  13249. set: function (value) {
  13250. if (this._fontWeight === value) {
  13251. return;
  13252. }
  13253. this._fontWeight = value;
  13254. this.onChangedObservable.notifyObservers(this);
  13255. },
  13256. enumerable: true,
  13257. configurable: true
  13258. });
  13259. /** Dispose all associated resources */
  13260. Style.prototype.dispose = function () {
  13261. this.onChangedObservable.clear();
  13262. };
  13263. return Style;
  13264. }());
  13265. /***/ }),
  13266. /***/ "./2D/valueAndUnit.ts":
  13267. /*!****************************!*\
  13268. !*** ./2D/valueAndUnit.ts ***!
  13269. \****************************/
  13270. /*! exports provided: ValueAndUnit */
  13271. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13272. "use strict";
  13273. __webpack_require__.r(__webpack_exports__);
  13274. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return ValueAndUnit; });
  13275. /**
  13276. * Class used to specific a value and its associated unit
  13277. */
  13278. var ValueAndUnit = /** @class */ (function () {
  13279. /**
  13280. * Creates a new ValueAndUnit
  13281. * @param value defines the value to store
  13282. * @param unit defines the unit to store
  13283. * @param negativeValueAllowed defines a boolean indicating if the value can be negative
  13284. */
  13285. function ValueAndUnit(value,
  13286. /** defines the unit to store */
  13287. unit,
  13288. /** defines a boolean indicating if the value can be negative */
  13289. negativeValueAllowed) {
  13290. if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
  13291. if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
  13292. this.unit = unit;
  13293. this.negativeValueAllowed = negativeValueAllowed;
  13294. this._value = 1;
  13295. /**
  13296. * Gets or sets a value indicating that this value will not scale accordingly with adaptive scaling property
  13297. * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
  13298. */
  13299. this.ignoreAdaptiveScaling = false;
  13300. this._value = value;
  13301. this._originalUnit = unit;
  13302. }
  13303. Object.defineProperty(ValueAndUnit.prototype, "isPercentage", {
  13304. /** Gets a boolean indicating if the value is a percentage */
  13305. get: function () {
  13306. return this.unit === ValueAndUnit.UNITMODE_PERCENTAGE;
  13307. },
  13308. enumerable: true,
  13309. configurable: true
  13310. });
  13311. Object.defineProperty(ValueAndUnit.prototype, "isPixel", {
  13312. /** Gets a boolean indicating if the value is store as pixel */
  13313. get: function () {
  13314. return this.unit === ValueAndUnit.UNITMODE_PIXEL;
  13315. },
  13316. enumerable: true,
  13317. configurable: true
  13318. });
  13319. Object.defineProperty(ValueAndUnit.prototype, "internalValue", {
  13320. /** Gets direct internal value */
  13321. get: function () {
  13322. return this._value;
  13323. },
  13324. enumerable: true,
  13325. configurable: true
  13326. });
  13327. /**
  13328. * Gets value as pixel
  13329. * @param host defines the root host
  13330. * @param refValue defines the reference value for percentages
  13331. * @returns the value as pixel
  13332. */
  13333. ValueAndUnit.prototype.getValueInPixel = function (host, refValue) {
  13334. if (this.isPixel) {
  13335. return this.getValue(host);
  13336. }
  13337. return this.getValue(host) * refValue;
  13338. };
  13339. /**
  13340. * Update the current value and unit. This should be done cautiously as the GUi won't be marked as dirty with this function.
  13341. * @param value defines the value to store
  13342. * @param unit defines the unit to store
  13343. * @returns the current ValueAndUnit
  13344. */
  13345. ValueAndUnit.prototype.updateInPlace = function (value, unit) {
  13346. if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
  13347. this._value = value;
  13348. this.unit = unit;
  13349. return this;
  13350. };
  13351. /**
  13352. * Gets the value accordingly to its unit
  13353. * @param host defines the root host
  13354. * @returns the value
  13355. */
  13356. ValueAndUnit.prototype.getValue = function (host) {
  13357. if (host && !this.ignoreAdaptiveScaling && this.unit !== ValueAndUnit.UNITMODE_PERCENTAGE) {
  13358. var width = 0;
  13359. var height = 0;
  13360. if (host.idealWidth) {
  13361. width = (this._value * host.getSize().width) / host.idealWidth;
  13362. }
  13363. if (host.idealHeight) {
  13364. height = (this._value * host.getSize().height) / host.idealHeight;
  13365. }
  13366. if (host.useSmallestIdeal && host.idealWidth && host.idealHeight) {
  13367. return window.innerWidth < window.innerHeight ? width : height;
  13368. }
  13369. if (host.idealWidth) { // horizontal
  13370. return width;
  13371. }
  13372. if (host.idealHeight) { // vertical
  13373. return height;
  13374. }
  13375. }
  13376. return this._value;
  13377. };
  13378. /**
  13379. * Gets a string representation of the value
  13380. * @param host defines the root host
  13381. * @param decimals defines an optional number of decimals to display
  13382. * @returns a string
  13383. */
  13384. ValueAndUnit.prototype.toString = function (host, decimals) {
  13385. switch (this.unit) {
  13386. case ValueAndUnit.UNITMODE_PERCENTAGE:
  13387. var percentage = this.getValue(host) * 100;
  13388. return (decimals ? percentage.toFixed(decimals) : percentage) + "%";
  13389. case ValueAndUnit.UNITMODE_PIXEL:
  13390. var pixels = this.getValue(host);
  13391. return (decimals ? pixels.toFixed(decimals) : pixels) + "px";
  13392. }
  13393. return this.unit.toString();
  13394. };
  13395. /**
  13396. * Store a value parsed from a string
  13397. * @param source defines the source string
  13398. * @returns true if the value was successfully parsed
  13399. */
  13400. ValueAndUnit.prototype.fromString = function (source) {
  13401. var match = ValueAndUnit._Regex.exec(source.toString());
  13402. if (!match || match.length === 0) {
  13403. return false;
  13404. }
  13405. var sourceValue = parseFloat(match[1]);
  13406. var sourceUnit = this._originalUnit;
  13407. if (!this.negativeValueAllowed) {
  13408. if (sourceValue < 0) {
  13409. sourceValue = 0;
  13410. }
  13411. }
  13412. if (match.length === 4) {
  13413. switch (match[3]) {
  13414. case "px":
  13415. sourceUnit = ValueAndUnit.UNITMODE_PIXEL;
  13416. break;
  13417. case "%":
  13418. sourceUnit = ValueAndUnit.UNITMODE_PERCENTAGE;
  13419. sourceValue /= 100.0;
  13420. break;
  13421. }
  13422. }
  13423. if (sourceValue === this._value && sourceUnit === this.unit) {
  13424. return false;
  13425. }
  13426. this._value = sourceValue;
  13427. this.unit = sourceUnit;
  13428. return true;
  13429. };
  13430. Object.defineProperty(ValueAndUnit, "UNITMODE_PERCENTAGE", {
  13431. /** UNITMODE_PERCENTAGE */
  13432. get: function () {
  13433. return ValueAndUnit._UNITMODE_PERCENTAGE;
  13434. },
  13435. enumerable: true,
  13436. configurable: true
  13437. });
  13438. Object.defineProperty(ValueAndUnit, "UNITMODE_PIXEL", {
  13439. /** UNITMODE_PIXEL */
  13440. get: function () {
  13441. return ValueAndUnit._UNITMODE_PIXEL;
  13442. },
  13443. enumerable: true,
  13444. configurable: true
  13445. });
  13446. // Static
  13447. ValueAndUnit._Regex = /(^-?\d*(\.\d+)?)(%|px)?/;
  13448. ValueAndUnit._UNITMODE_PERCENTAGE = 0;
  13449. ValueAndUnit._UNITMODE_PIXEL = 1;
  13450. return ValueAndUnit;
  13451. }());
  13452. /***/ }),
  13453. /***/ "./2D/xmlLoader.ts":
  13454. /*!*************************!*\
  13455. !*** ./2D/xmlLoader.ts ***!
  13456. \*************************/
  13457. /*! exports provided: XmlLoader */
  13458. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13459. "use strict";
  13460. __webpack_require__.r(__webpack_exports__);
  13461. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return XmlLoader; });
  13462. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
  13463. /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__);
  13464. /**
  13465. * Class used to load GUI via XML.
  13466. */
  13467. var XmlLoader = /** @class */ (function () {
  13468. /**
  13469. * Create a new xml loader
  13470. * @param parentClass Sets the class context. Used when the loader is instanced inside a class and not in a global context
  13471. */
  13472. function XmlLoader(parentClass) {
  13473. if (parentClass === void 0) { parentClass = null; }
  13474. this._nodes = {};
  13475. this._nodeTypes = {
  13476. element: 1,
  13477. attribute: 2,
  13478. text: 3
  13479. };
  13480. this._isLoaded = false;
  13481. this._objectAttributes = {
  13482. "textHorizontalAlignment": 1,
  13483. "textVerticalAlignment": 2,
  13484. "horizontalAlignment": 3,
  13485. "verticalAlignment": 4,
  13486. "stretch": 5,
  13487. };
  13488. if (parentClass) {
  13489. this._parentClass = parentClass;
  13490. }
  13491. }
  13492. XmlLoader.prototype._getChainElement = function (attributeValue) {
  13493. var element = window;
  13494. if (this._parentClass) {
  13495. element = this._parentClass;
  13496. }
  13497. var value = attributeValue;
  13498. value = value.split(".");
  13499. for (var i = 0; i < value.length; i++) {
  13500. element = element[value[i]];
  13501. }
  13502. return element;
  13503. };
  13504. XmlLoader.prototype._getClassAttribute = function (attributeName) {
  13505. var attribute = attributeName.split(".");
  13506. var className = babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__["_TypeStore"].GetClass("BABYLON.GUI." + attribute[0]);
  13507. return className[attribute[1]];
  13508. };
  13509. XmlLoader.prototype._createGuiElement = function (node, parent, linkParent) {
  13510. if (linkParent === void 0) { linkParent = true; }
  13511. try {
  13512. var className = babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__["_TypeStore"].GetClass("BABYLON.GUI." + node.nodeName);
  13513. var guiNode = new className();
  13514. if (parent && linkParent) {
  13515. parent.addControl(guiNode);
  13516. }
  13517. for (var i = 0; i < node.attributes.length; i++) {
  13518. if (node.attributes[i].name.toLowerCase().includes("datasource")) {
  13519. continue;
  13520. }
  13521. if (node.attributes[i].name.toLowerCase().includes("observable")) {
  13522. var element = this._getChainElement(node.attributes[i].value);
  13523. guiNode[node.attributes[i].name].add(element);
  13524. continue;
  13525. }
  13526. else if (node.attributes[i].name == "linkWithMesh") {
  13527. if (this._parentClass) {
  13528. guiNode.linkWithMesh(this._parentClass[node.attributes[i].value]);
  13529. }
  13530. else {
  13531. guiNode.linkWithMesh(window[node.attributes[i].value]);
  13532. }
  13533. }
  13534. else if (node.attributes[i].value.startsWith("{{") && node.attributes[i].value.endsWith("}}")) {
  13535. var element = this._getChainElement(node.attributes[i].value.substring(2, node.attributes[i].value.length - 2));
  13536. guiNode[node.attributes[i].name] = element;
  13537. }
  13538. else if (!this._objectAttributes[node.attributes[i].name]) {
  13539. if (node.attributes[i].value == "true" || node.attributes[i].value == "false") {
  13540. guiNode[node.attributes[i].name] = (node.attributes[i].value == 'true');
  13541. }
  13542. else {
  13543. guiNode[node.attributes[i].name] = !isNaN(Number(node.attributes[i].value)) ? Number(node.attributes[i].value) : node.attributes[i].value;
  13544. }
  13545. }
  13546. else {
  13547. guiNode[node.attributes[i].name] = this._getClassAttribute(node.attributes[i].value);
  13548. }
  13549. }
  13550. if (!node.attributes.getNamedItem("id")) {
  13551. this._nodes[node.nodeName + Object.keys(this._nodes).length + "_gen"] = guiNode;
  13552. return guiNode;
  13553. }
  13554. var id = node.attributes.getNamedItem("id").value;
  13555. if (id.startsWith("{{") && id.endsWith("}}")) {
  13556. id = this._getChainElement(id.substring(2, id.length - 2));
  13557. }
  13558. if (!this._nodes[id]) {
  13559. this._nodes[id] = guiNode;
  13560. }
  13561. else {
  13562. throw "XmlLoader Exception : Duplicate ID, every element should have an unique ID attribute";
  13563. }
  13564. return guiNode;
  13565. }
  13566. catch (e) {
  13567. throw "XmlLoader Exception : Error parsing Control " + node.nodeName + "," + e + ".";
  13568. }
  13569. };
  13570. XmlLoader.prototype._parseGrid = function (node, guiNode, parent) {
  13571. var width;
  13572. var height;
  13573. var columns;
  13574. var rows = node.children;
  13575. var cells;
  13576. var isPixel = false;
  13577. var cellNode;
  13578. var rowNumber = -1;
  13579. var columnNumber = -1;
  13580. var totalColumnsNumber = 0;
  13581. for (var i = 0; i < rows.length; i++) {
  13582. if (rows[i].nodeType != this._nodeTypes.element) {
  13583. continue;
  13584. }
  13585. if (rows[i].nodeName != "Row") {
  13586. throw "XmlLoader Exception : Expecting Row node, received " + rows[i].nodeName;
  13587. }
  13588. rowNumber += 1;
  13589. columns = rows[i].children;
  13590. if (!rows[i].attributes.getNamedItem("height")) {
  13591. throw "XmlLoader Exception : Height must be defined for grid rows";
  13592. }
  13593. height = Number(rows[i].attributes.getNamedItem("height").nodeValue);
  13594. isPixel = rows[i].attributes.getNamedItem("isPixel") ? JSON.parse(rows[i].attributes.getNamedItem("isPixel").nodeValue) : false;
  13595. guiNode.addRowDefinition(height, isPixel);
  13596. for (var j = 0; j < columns.length; j++) {
  13597. if (columns[j].nodeType != this._nodeTypes.element) {
  13598. continue;
  13599. }
  13600. if (columns[j].nodeName != "Column") {
  13601. throw "XmlLoader Exception : Expecting Column node, received " + columns[j].nodeName;
  13602. }
  13603. columnNumber += 1;
  13604. if (rowNumber > 0 && columnNumber > totalColumnsNumber) {
  13605. 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.";
  13606. }
  13607. if (rowNumber == 0) {
  13608. if (!columns[j].attributes.getNamedItem("width")) {
  13609. throw "XmlLoader Exception : Width must be defined for all the grid columns in the first row";
  13610. }
  13611. width = Number(columns[j].attributes.getNamedItem("width").nodeValue);
  13612. isPixel = columns[j].attributes.getNamedItem("isPixel") ? JSON.parse(columns[j].attributes.getNamedItem("isPixel").nodeValue) : false;
  13613. guiNode.addColumnDefinition(width, isPixel);
  13614. }
  13615. cells = columns[j].children;
  13616. for (var k = 0; k < cells.length; k++) {
  13617. if (cells[k].nodeType != this._nodeTypes.element) {
  13618. continue;
  13619. }
  13620. cellNode = this._createGuiElement(cells[k], guiNode, false);
  13621. guiNode.addControl(cellNode, rowNumber, columnNumber);
  13622. if (cells[k].firstChild) {
  13623. this._parseXml(cells[k].firstChild, cellNode);
  13624. }
  13625. }
  13626. }
  13627. if (rowNumber == 0) {
  13628. totalColumnsNumber = columnNumber;
  13629. }
  13630. columnNumber = -1;
  13631. }
  13632. if (node.nextSibling) {
  13633. this._parseXml(node.nextSibling, parent);
  13634. }
  13635. };
  13636. XmlLoader.prototype._parseElement = function (node, guiNode, parent) {
  13637. if (node.firstChild) {
  13638. this._parseXml(node.firstChild, guiNode);
  13639. }
  13640. if (node.nextSibling) {
  13641. this._parseXml(node.nextSibling, parent);
  13642. }
  13643. };
  13644. XmlLoader.prototype._prepareSourceElement = function (node, guiNode, variable, source, iterator) {
  13645. if (this._parentClass) {
  13646. this._parentClass[variable] = source[iterator];
  13647. }
  13648. else {
  13649. window[variable] = source[iterator];
  13650. }
  13651. if (node.firstChild) {
  13652. this._parseXml(node.firstChild, guiNode, true);
  13653. }
  13654. };
  13655. XmlLoader.prototype._parseElementsFromSource = function (node, guiNode, parent) {
  13656. var dataSource = node.attributes.getNamedItem("dataSource").value;
  13657. if (!dataSource.includes(" in ")) {
  13658. throw "XmlLoader Exception : Malformed XML, Data Source must include an in";
  13659. }
  13660. else {
  13661. var isArray = true;
  13662. var splittedSource = dataSource.split(" in ");
  13663. if (splittedSource.length < 2) {
  13664. throw "XmlLoader Exception : Malformed XML, Data Source must an iterator and a source";
  13665. }
  13666. var source = splittedSource[1];
  13667. if (source.startsWith("{") && source.endsWith("}")) {
  13668. isArray = false;
  13669. }
  13670. if (!isArray || (source.startsWith("[") && source.endsWith("]"))) {
  13671. source = source.substring(1, source.length - 1);
  13672. }
  13673. if (this._parentClass) {
  13674. source = this._parentClass[source];
  13675. }
  13676. else {
  13677. source = window[source];
  13678. }
  13679. if (isArray) {
  13680. for (var i = 0; i < source.length; i++) {
  13681. this._prepareSourceElement(node, guiNode, splittedSource[0], source, i);
  13682. }
  13683. }
  13684. else {
  13685. for (var i in source) {
  13686. this._prepareSourceElement(node, guiNode, splittedSource[0], source, i);
  13687. }
  13688. }
  13689. if (node.nextSibling) {
  13690. this._parseXml(node.nextSibling, parent);
  13691. }
  13692. }
  13693. };
  13694. XmlLoader.prototype._parseXml = function (node, parent, generated) {
  13695. if (generated === void 0) { generated = false; }
  13696. if (node.nodeType != this._nodeTypes.element) {
  13697. if (node.nextSibling) {
  13698. this._parseXml(node.nextSibling, parent, generated);
  13699. }
  13700. return;
  13701. }
  13702. if (generated) {
  13703. node.setAttribute("id", parent.id + (parent._children.length + 1));
  13704. }
  13705. var guiNode = this._createGuiElement(node, parent);
  13706. if (node.nodeName == "Grid") {
  13707. this._parseGrid(node, guiNode, parent);
  13708. }
  13709. else if (!node.attributes.getNamedItem("dataSource")) {
  13710. this._parseElement(node, guiNode, parent);
  13711. }
  13712. else {
  13713. this._parseElementsFromSource(node, guiNode, parent);
  13714. }
  13715. };
  13716. /**
  13717. * Gets if the loading has finished.
  13718. * @returns whether the loading has finished or not
  13719. */
  13720. XmlLoader.prototype.isLoaded = function () {
  13721. return this._isLoaded;
  13722. };
  13723. /**
  13724. * Gets a loaded node / control by id.
  13725. * @param id the Controls id set in the xml
  13726. * @returns element of type Control
  13727. */
  13728. XmlLoader.prototype.getNodeById = function (id) {
  13729. return this._nodes[id];
  13730. };
  13731. /**
  13732. * Gets all loaded nodes / controls
  13733. * @returns Array of controls
  13734. */
  13735. XmlLoader.prototype.getNodes = function () {
  13736. return this._nodes;
  13737. };
  13738. /**
  13739. * Initiates the xml layout loading
  13740. * @param xmlFile defines the xml layout to load
  13741. * @param rootNode defines the node / control to use as a parent for the loaded layout controls.
  13742. * @param callback defines the callback called on layout load.
  13743. */
  13744. XmlLoader.prototype.loadLayout = function (xmlFile, rootNode, callback) {
  13745. var xhttp = new XMLHttpRequest();
  13746. xhttp.onreadystatechange = function () {
  13747. if (xhttp.readyState == 4 && xhttp.status == 200) {
  13748. if (!xhttp.responseXML) {
  13749. throw "XmlLoader Exception : XML file is malformed or corrupted.";
  13750. }
  13751. var xmlDoc = xhttp.responseXML.documentElement;
  13752. this._parseXml(xmlDoc.firstChild, rootNode);
  13753. this._isLoaded = true;
  13754. if (callback) {
  13755. callback();
  13756. }
  13757. }
  13758. }.bind(this);
  13759. xhttp.open("GET", xmlFile, true);
  13760. xhttp.send();
  13761. };
  13762. return XmlLoader;
  13763. }());
  13764. /***/ }),
  13765. /***/ "./3D/controls/abstractButton3D.ts":
  13766. /*!*****************************************!*\
  13767. !*** ./3D/controls/abstractButton3D.ts ***!
  13768. \*****************************************/
  13769. /*! exports provided: AbstractButton3D */
  13770. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13771. "use strict";
  13772. __webpack_require__.r(__webpack_exports__);
  13773. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return AbstractButton3D; });
  13774. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  13775. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
  13776. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
  13777. /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
  13778. /**
  13779. * Class used as a root to all buttons
  13780. */
  13781. var AbstractButton3D = /** @class */ (function (_super) {
  13782. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(AbstractButton3D, _super);
  13783. /**
  13784. * Creates a new button
  13785. * @param name defines the control name
  13786. */
  13787. function AbstractButton3D(name) {
  13788. return _super.call(this, name) || this;
  13789. }
  13790. AbstractButton3D.prototype._getTypeName = function () {
  13791. return "AbstractButton3D";
  13792. };
  13793. // Mesh association
  13794. AbstractButton3D.prototype._createNode = function (scene) {
  13795. return new babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__["TransformNode"]("button" + this.name);
  13796. };
  13797. return AbstractButton3D;
  13798. }(_control3D__WEBPACK_IMPORTED_MODULE_2__["Control3D"]));
  13799. /***/ }),
  13800. /***/ "./3D/controls/button3D.ts":
  13801. /*!*********************************!*\
  13802. !*** ./3D/controls/button3D.ts ***!
  13803. \*********************************/
  13804. /*! exports provided: Button3D */
  13805. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13806. "use strict";
  13807. __webpack_require__.r(__webpack_exports__);
  13808. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return Button3D; });
  13809. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  13810. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  13811. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
  13812. /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
  13813. /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
  13814. /**
  13815. * Class used to create a button in 3D
  13816. */
  13817. var Button3D = /** @class */ (function (_super) {
  13818. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Button3D, _super);
  13819. /**
  13820. * Creates a new button
  13821. * @param name defines the control name
  13822. */
  13823. function Button3D(name) {
  13824. var _this = _super.call(this, name) || this;
  13825. _this._contentResolution = 512;
  13826. _this._contentScaleRatio = 2;
  13827. // Default animations
  13828. _this.pointerEnterAnimation = function () {
  13829. if (!_this.mesh) {
  13830. return;
  13831. }
  13832. _this._currentMaterial.emissiveColor = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Color3"].Red();
  13833. };
  13834. _this.pointerOutAnimation = function () {
  13835. _this._currentMaterial.emissiveColor = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  13836. };
  13837. _this.pointerDownAnimation = function () {
  13838. if (!_this.mesh) {
  13839. return;
  13840. }
  13841. _this.mesh.scaling.scaleInPlace(0.95);
  13842. };
  13843. _this.pointerUpAnimation = function () {
  13844. if (!_this.mesh) {
  13845. return;
  13846. }
  13847. _this.mesh.scaling.scaleInPlace(1.0 / 0.95);
  13848. };
  13849. return _this;
  13850. }
  13851. Object.defineProperty(Button3D.prototype, "contentResolution", {
  13852. /**
  13853. * Gets or sets the texture resolution used to render content (512 by default)
  13854. */
  13855. get: function () {
  13856. return this._contentResolution;
  13857. },
  13858. set: function (value) {
  13859. if (this._contentResolution === value) {
  13860. return;
  13861. }
  13862. this._contentResolution = value;
  13863. this._resetContent();
  13864. },
  13865. enumerable: true,
  13866. configurable: true
  13867. });
  13868. Object.defineProperty(Button3D.prototype, "contentScaleRatio", {
  13869. /**
  13870. * Gets or sets the texture scale ratio used to render content (2 by default)
  13871. */
  13872. get: function () {
  13873. return this._contentScaleRatio;
  13874. },
  13875. set: function (value) {
  13876. if (this._contentScaleRatio === value) {
  13877. return;
  13878. }
  13879. this._contentScaleRatio = value;
  13880. this._resetContent();
  13881. },
  13882. enumerable: true,
  13883. configurable: true
  13884. });
  13885. Button3D.prototype._disposeFacadeTexture = function () {
  13886. if (this._facadeTexture) {
  13887. this._facadeTexture.dispose();
  13888. this._facadeTexture = null;
  13889. }
  13890. };
  13891. Button3D.prototype._resetContent = function () {
  13892. this._disposeFacadeTexture();
  13893. this.content = this._content;
  13894. };
  13895. Object.defineProperty(Button3D.prototype, "content", {
  13896. /**
  13897. * Gets or sets the GUI 2D content used to display the button's facade
  13898. */
  13899. get: function () {
  13900. return this._content;
  13901. },
  13902. set: function (value) {
  13903. this._content = value;
  13904. if (!this._host || !this._host.utilityLayer) {
  13905. return;
  13906. }
  13907. if (!this._facadeTexture) {
  13908. this._facadeTexture = new _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__["AdvancedDynamicTexture"]("Facade", this._contentResolution, this._contentResolution, this._host.utilityLayer.utilityLayerScene, true, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Texture"].TRILINEAR_SAMPLINGMODE);
  13909. this._facadeTexture.rootContainer.scaleX = this._contentScaleRatio;
  13910. this._facadeTexture.rootContainer.scaleY = this._contentScaleRatio;
  13911. this._facadeTexture.premulAlpha = true;
  13912. }
  13913. else {
  13914. this._facadeTexture.rootContainer.clearControls();
  13915. }
  13916. this._facadeTexture.addControl(value);
  13917. this._applyFacade(this._facadeTexture);
  13918. },
  13919. enumerable: true,
  13920. configurable: true
  13921. });
  13922. /**
  13923. * Apply the facade texture (created from the content property).
  13924. * This function can be overloaded by child classes
  13925. * @param facadeTexture defines the AdvancedDynamicTexture to use
  13926. */
  13927. Button3D.prototype._applyFacade = function (facadeTexture) {
  13928. this._currentMaterial.emissiveTexture = facadeTexture;
  13929. };
  13930. Button3D.prototype._getTypeName = function () {
  13931. return "Button3D";
  13932. };
  13933. // Mesh association
  13934. Button3D.prototype._createNode = function (scene) {
  13935. var faceUV = new Array(6);
  13936. for (var i = 0; i < 6; i++) {
  13937. faceUV[i] = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector4"](0, 0, 0, 0);
  13938. }
  13939. faceUV[1] = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector4"](0, 0, 1, 1);
  13940. var mesh = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["BoxBuilder"].CreateBox(this.name + "_rootMesh", {
  13941. width: 1.0,
  13942. height: 1.0,
  13943. depth: 0.08,
  13944. faceUV: faceUV
  13945. }, scene);
  13946. return mesh;
  13947. };
  13948. Button3D.prototype._affectMaterial = function (mesh) {
  13949. var material = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["StandardMaterial"](this.name + "Material", mesh.getScene());
  13950. material.specularColor = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Color3"].Black();
  13951. mesh.material = material;
  13952. this._currentMaterial = material;
  13953. this._resetContent();
  13954. };
  13955. /**
  13956. * Releases all associated resources
  13957. */
  13958. Button3D.prototype.dispose = function () {
  13959. _super.prototype.dispose.call(this);
  13960. this._disposeFacadeTexture();
  13961. if (this._currentMaterial) {
  13962. this._currentMaterial.dispose();
  13963. }
  13964. };
  13965. return Button3D;
  13966. }(_abstractButton3D__WEBPACK_IMPORTED_MODULE_2__["AbstractButton3D"]));
  13967. /***/ }),
  13968. /***/ "./3D/controls/container3D.ts":
  13969. /*!************************************!*\
  13970. !*** ./3D/controls/container3D.ts ***!
  13971. \************************************/
  13972. /*! exports provided: Container3D */
  13973. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  13974. "use strict";
  13975. __webpack_require__.r(__webpack_exports__);
  13976. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return Container3D; });
  13977. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  13978. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
  13979. /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
  13980. /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
  13981. /**
  13982. * Class used to create containers for controls
  13983. */
  13984. var Container3D = /** @class */ (function (_super) {
  13985. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Container3D, _super);
  13986. /**
  13987. * Creates a new container
  13988. * @param name defines the container name
  13989. */
  13990. function Container3D(name) {
  13991. var _this = _super.call(this, name) || this;
  13992. _this._blockLayout = false;
  13993. /**
  13994. * Gets the list of child controls
  13995. */
  13996. _this._children = new Array();
  13997. return _this;
  13998. }
  13999. Object.defineProperty(Container3D.prototype, "children", {
  14000. /**
  14001. * Gets the list of child controls
  14002. */
  14003. get: function () {
  14004. return this._children;
  14005. },
  14006. enumerable: true,
  14007. configurable: true
  14008. });
  14009. Object.defineProperty(Container3D.prototype, "blockLayout", {
  14010. /**
  14011. * Gets or sets a boolean indicating if the layout must be blocked (default is false).
  14012. * This is helpful to optimize layout operation when adding multiple children in a row
  14013. */
  14014. get: function () {
  14015. return this._blockLayout;
  14016. },
  14017. set: function (value) {
  14018. if (this._blockLayout === value) {
  14019. return;
  14020. }
  14021. this._blockLayout = value;
  14022. if (!this._blockLayout) {
  14023. this._arrangeChildren();
  14024. }
  14025. },
  14026. enumerable: true,
  14027. configurable: true
  14028. });
  14029. /**
  14030. * Force the container to update the layout. Please note that it will not take blockLayout property in account
  14031. * @returns the current container
  14032. */
  14033. Container3D.prototype.updateLayout = function () {
  14034. this._arrangeChildren();
  14035. return this;
  14036. };
  14037. /**
  14038. * Gets a boolean indicating if the given control is in the children of this control
  14039. * @param control defines the control to check
  14040. * @returns true if the control is in the child list
  14041. */
  14042. Container3D.prototype.containsControl = function (control) {
  14043. return this._children.indexOf(control) !== -1;
  14044. };
  14045. /**
  14046. * Adds a control to the children of this control
  14047. * @param control defines the control to add
  14048. * @returns the current container
  14049. */
  14050. Container3D.prototype.addControl = function (control) {
  14051. var index = this._children.indexOf(control);
  14052. if (index !== -1) {
  14053. return this;
  14054. }
  14055. control.parent = this;
  14056. control._host = this._host;
  14057. this._children.push(control);
  14058. if (this._host.utilityLayer) {
  14059. control._prepareNode(this._host.utilityLayer.utilityLayerScene);
  14060. if (control.node) {
  14061. control.node.parent = this.node;
  14062. }
  14063. if (!this.blockLayout) {
  14064. this._arrangeChildren();
  14065. }
  14066. }
  14067. return this;
  14068. };
  14069. /**
  14070. * This function will be called everytime a new control is added
  14071. */
  14072. Container3D.prototype._arrangeChildren = function () {
  14073. };
  14074. Container3D.prototype._createNode = function (scene) {
  14075. return new babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__["TransformNode"]("ContainerNode", scene);
  14076. };
  14077. /**
  14078. * Removes a control from the children of this control
  14079. * @param control defines the control to remove
  14080. * @returns the current container
  14081. */
  14082. Container3D.prototype.removeControl = function (control) {
  14083. var index = this._children.indexOf(control);
  14084. if (index !== -1) {
  14085. this._children.splice(index, 1);
  14086. control.parent = null;
  14087. control._disposeNode();
  14088. }
  14089. return this;
  14090. };
  14091. Container3D.prototype._getTypeName = function () {
  14092. return "Container3D";
  14093. };
  14094. /**
  14095. * Releases all associated resources
  14096. */
  14097. Container3D.prototype.dispose = function () {
  14098. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  14099. var control = _a[_i];
  14100. control.dispose();
  14101. }
  14102. this._children = [];
  14103. _super.prototype.dispose.call(this);
  14104. };
  14105. /** Control rotation will remain unchanged */
  14106. Container3D.UNSET_ORIENTATION = 0;
  14107. /** Control will rotate to make it look at sphere central axis */
  14108. Container3D.FACEORIGIN_ORIENTATION = 1;
  14109. /** Control will rotate to make it look back at sphere central axis */
  14110. Container3D.FACEORIGINREVERSED_ORIENTATION = 2;
  14111. /** Control will rotate to look at z axis (0, 0, 1) */
  14112. Container3D.FACEFORWARD_ORIENTATION = 3;
  14113. /** Control will rotate to look at negative z axis (0, 0, -1) */
  14114. Container3D.FACEFORWARDREVERSED_ORIENTATION = 4;
  14115. return Container3D;
  14116. }(_control3D__WEBPACK_IMPORTED_MODULE_2__["Control3D"]));
  14117. /***/ }),
  14118. /***/ "./3D/controls/control3D.ts":
  14119. /*!**********************************!*\
  14120. !*** ./3D/controls/control3D.ts ***!
  14121. \**********************************/
  14122. /*! exports provided: Control3D */
  14123. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14124. "use strict";
  14125. __webpack_require__.r(__webpack_exports__);
  14126. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return Control3D; });
  14127. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  14128. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  14129. /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../vector3WithInfo */ "./3D/vector3WithInfo.ts");
  14130. /**
  14131. * Class used as base class for controls
  14132. */
  14133. var Control3D = /** @class */ (function () {
  14134. /**
  14135. * Creates a new control
  14136. * @param name defines the control name
  14137. */
  14138. function Control3D(
  14139. /** Defines the control name */
  14140. name) {
  14141. this.name = name;
  14142. this._downCount = 0;
  14143. this._enterCount = -1;
  14144. this._downPointerIds = {};
  14145. this._isVisible = true;
  14146. /**
  14147. * An event triggered when the pointer move over the control
  14148. */
  14149. this.onPointerMoveObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14150. /**
  14151. * An event triggered when the pointer move out of the control
  14152. */
  14153. this.onPointerOutObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14154. /**
  14155. * An event triggered when the pointer taps the control
  14156. */
  14157. this.onPointerDownObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14158. /**
  14159. * An event triggered when pointer is up
  14160. */
  14161. this.onPointerUpObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14162. /**
  14163. * An event triggered when a control is clicked on (with a mouse)
  14164. */
  14165. this.onPointerClickObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14166. /**
  14167. * An event triggered when pointer enters the control
  14168. */
  14169. this.onPointerEnterObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  14170. // Behaviors
  14171. this._behaviors = new Array();
  14172. }
  14173. Object.defineProperty(Control3D.prototype, "position", {
  14174. /** Gets or sets the control position in world space */
  14175. get: function () {
  14176. if (!this._node) {
  14177. return babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero();
  14178. }
  14179. return this._node.position;
  14180. },
  14181. set: function (value) {
  14182. if (!this._node) {
  14183. return;
  14184. }
  14185. this._node.position = value;
  14186. },
  14187. enumerable: true,
  14188. configurable: true
  14189. });
  14190. Object.defineProperty(Control3D.prototype, "scaling", {
  14191. /** Gets or sets the control scaling in world space */
  14192. get: function () {
  14193. if (!this._node) {
  14194. return new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"](1, 1, 1);
  14195. }
  14196. return this._node.scaling;
  14197. },
  14198. set: function (value) {
  14199. if (!this._node) {
  14200. return;
  14201. }
  14202. this._node.scaling = value;
  14203. },
  14204. enumerable: true,
  14205. configurable: true
  14206. });
  14207. Object.defineProperty(Control3D.prototype, "behaviors", {
  14208. /**
  14209. * Gets the list of attached behaviors
  14210. * @see http://doc.babylonjs.com/features/behaviour
  14211. */
  14212. get: function () {
  14213. return this._behaviors;
  14214. },
  14215. enumerable: true,
  14216. configurable: true
  14217. });
  14218. /**
  14219. * Attach a behavior to the control
  14220. * @see http://doc.babylonjs.com/features/behaviour
  14221. * @param behavior defines the behavior to attach
  14222. * @returns the current control
  14223. */
  14224. Control3D.prototype.addBehavior = function (behavior) {
  14225. var _this = this;
  14226. var index = this._behaviors.indexOf(behavior);
  14227. if (index !== -1) {
  14228. return this;
  14229. }
  14230. behavior.init();
  14231. var scene = this._host.scene;
  14232. if (scene.isLoading) {
  14233. // We defer the attach when the scene will be loaded
  14234. scene.onDataLoadedObservable.addOnce(function () {
  14235. behavior.attach(_this);
  14236. });
  14237. }
  14238. else {
  14239. behavior.attach(this);
  14240. }
  14241. this._behaviors.push(behavior);
  14242. return this;
  14243. };
  14244. /**
  14245. * Remove an attached behavior
  14246. * @see http://doc.babylonjs.com/features/behaviour
  14247. * @param behavior defines the behavior to attach
  14248. * @returns the current control
  14249. */
  14250. Control3D.prototype.removeBehavior = function (behavior) {
  14251. var index = this._behaviors.indexOf(behavior);
  14252. if (index === -1) {
  14253. return this;
  14254. }
  14255. this._behaviors[index].detach();
  14256. this._behaviors.splice(index, 1);
  14257. return this;
  14258. };
  14259. /**
  14260. * Gets an attached behavior by name
  14261. * @param name defines the name of the behavior to look for
  14262. * @see http://doc.babylonjs.com/features/behaviour
  14263. * @returns null if behavior was not found else the requested behavior
  14264. */
  14265. Control3D.prototype.getBehaviorByName = function (name) {
  14266. for (var _i = 0, _a = this._behaviors; _i < _a.length; _i++) {
  14267. var behavior = _a[_i];
  14268. if (behavior.name === name) {
  14269. return behavior;
  14270. }
  14271. }
  14272. return null;
  14273. };
  14274. Object.defineProperty(Control3D.prototype, "isVisible", {
  14275. /** Gets or sets a boolean indicating if the control is visible */
  14276. get: function () {
  14277. return this._isVisible;
  14278. },
  14279. set: function (value) {
  14280. if (this._isVisible === value) {
  14281. return;
  14282. }
  14283. this._isVisible = value;
  14284. var mesh = this.mesh;
  14285. if (mesh) {
  14286. mesh.setEnabled(value);
  14287. }
  14288. },
  14289. enumerable: true,
  14290. configurable: true
  14291. });
  14292. Object.defineProperty(Control3D.prototype, "typeName", {
  14293. /**
  14294. * Gets a string representing the class name
  14295. */
  14296. get: function () {
  14297. return this._getTypeName();
  14298. },
  14299. enumerable: true,
  14300. configurable: true
  14301. });
  14302. /**
  14303. * Get the current class name of the control.
  14304. * @returns current class name
  14305. */
  14306. Control3D.prototype.getClassName = function () {
  14307. return this._getTypeName();
  14308. };
  14309. Control3D.prototype._getTypeName = function () {
  14310. return "Control3D";
  14311. };
  14312. Object.defineProperty(Control3D.prototype, "node", {
  14313. /**
  14314. * Gets the transform node used by this control
  14315. */
  14316. get: function () {
  14317. return this._node;
  14318. },
  14319. enumerable: true,
  14320. configurable: true
  14321. });
  14322. Object.defineProperty(Control3D.prototype, "mesh", {
  14323. /**
  14324. * Gets the mesh used to render this control
  14325. */
  14326. get: function () {
  14327. if (this._node instanceof babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["AbstractMesh"]) {
  14328. return this._node;
  14329. }
  14330. return null;
  14331. },
  14332. enumerable: true,
  14333. configurable: true
  14334. });
  14335. /**
  14336. * Link the control as child of the given node
  14337. * @param node defines the node to link to. Use null to unlink the control
  14338. * @returns the current control
  14339. */
  14340. Control3D.prototype.linkToTransformNode = function (node) {
  14341. if (this._node) {
  14342. this._node.parent = node;
  14343. }
  14344. return this;
  14345. };
  14346. /** @hidden **/
  14347. Control3D.prototype._prepareNode = function (scene) {
  14348. if (!this._node) {
  14349. this._node = this._createNode(scene);
  14350. if (!this.node) {
  14351. return;
  14352. }
  14353. this._node.metadata = this; // Store the control on the metadata field in order to get it when picking
  14354. this._node.position = this.position;
  14355. this._node.scaling = this.scaling;
  14356. var mesh = this.mesh;
  14357. if (mesh) {
  14358. mesh.isPickable = true;
  14359. this._affectMaterial(mesh);
  14360. }
  14361. }
  14362. };
  14363. /**
  14364. * Node creation.
  14365. * Can be overriden by children
  14366. * @param scene defines the scene where the node must be attached
  14367. * @returns the attached node or null if none. Must return a Mesh or AbstractMesh if there is an atttached visible object
  14368. */
  14369. Control3D.prototype._createNode = function (scene) {
  14370. // Do nothing by default
  14371. return null;
  14372. };
  14373. /**
  14374. * Affect a material to the given mesh
  14375. * @param mesh defines the mesh which will represent the control
  14376. */
  14377. Control3D.prototype._affectMaterial = function (mesh) {
  14378. mesh.material = null;
  14379. };
  14380. // Pointers
  14381. /** @hidden */
  14382. Control3D.prototype._onPointerMove = function (target, coordinates) {
  14383. this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this);
  14384. };
  14385. /** @hidden */
  14386. Control3D.prototype._onPointerEnter = function (target) {
  14387. if (this._enterCount > 0) {
  14388. return false;
  14389. }
  14390. if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
  14391. this._enterCount = 0;
  14392. }
  14393. this._enterCount++;
  14394. this.onPointerEnterObservable.notifyObservers(this, -1, target, this);
  14395. if (this.pointerEnterAnimation) {
  14396. this.pointerEnterAnimation();
  14397. }
  14398. return true;
  14399. };
  14400. /** @hidden */
  14401. Control3D.prototype._onPointerOut = function (target) {
  14402. this._enterCount = 0;
  14403. this.onPointerOutObservable.notifyObservers(this, -1, target, this);
  14404. if (this.pointerOutAnimation) {
  14405. this.pointerOutAnimation();
  14406. }
  14407. };
  14408. /** @hidden */
  14409. Control3D.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
  14410. if (this._downCount !== 0) {
  14411. this._downCount++;
  14412. return false;
  14413. }
  14414. this._downCount++;
  14415. this._downPointerIds[pointerId] = true;
  14416. this.onPointerDownObservable.notifyObservers(new _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"](coordinates, buttonIndex), -1, target, this);
  14417. if (this.pointerDownAnimation) {
  14418. this.pointerDownAnimation();
  14419. }
  14420. return true;
  14421. };
  14422. /** @hidden */
  14423. Control3D.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
  14424. this._downCount--;
  14425. delete this._downPointerIds[pointerId];
  14426. if (this._downCount < 0) {
  14427. // Handle if forcePointerUp was called prior to this
  14428. this._downCount = 0;
  14429. return;
  14430. }
  14431. if (this._downCount == 0) {
  14432. if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
  14433. this.onPointerClickObservable.notifyObservers(new _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"](coordinates, buttonIndex), -1, target, this);
  14434. }
  14435. this.onPointerUpObservable.notifyObservers(new _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"](coordinates, buttonIndex), -1, target, this);
  14436. if (this.pointerUpAnimation) {
  14437. this.pointerUpAnimation();
  14438. }
  14439. }
  14440. };
  14441. /** @hidden */
  14442. Control3D.prototype.forcePointerUp = function (pointerId) {
  14443. if (pointerId === void 0) { pointerId = null; }
  14444. if (pointerId !== null) {
  14445. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero(), pointerId, 0, true);
  14446. }
  14447. else {
  14448. for (var key in this._downPointerIds) {
  14449. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero(), +key, 0, true);
  14450. }
  14451. if (this._downCount > 0) {
  14452. this._downCount = 1;
  14453. this._onPointerUp(this, babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Zero(), 0, 0, true);
  14454. }
  14455. }
  14456. };
  14457. /** @hidden */
  14458. Control3D.prototype._processObservables = function (type, pickedPoint, pointerId, buttonIndex) {
  14459. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERMOVE) {
  14460. this._onPointerMove(this, pickedPoint);
  14461. var previousControlOver = this._host._lastControlOver[pointerId];
  14462. if (previousControlOver && previousControlOver !== this) {
  14463. previousControlOver._onPointerOut(this);
  14464. }
  14465. if (previousControlOver !== this) {
  14466. this._onPointerEnter(this);
  14467. }
  14468. this._host._lastControlOver[pointerId] = this;
  14469. return true;
  14470. }
  14471. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERDOWN) {
  14472. this._onPointerDown(this, pickedPoint, pointerId, buttonIndex);
  14473. this._host._lastControlDown[pointerId] = this;
  14474. this._host._lastPickedControl = this;
  14475. return true;
  14476. }
  14477. if (type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP) {
  14478. if (this._host._lastControlDown[pointerId]) {
  14479. this._host._lastControlDown[pointerId]._onPointerUp(this, pickedPoint, pointerId, buttonIndex, true);
  14480. }
  14481. delete this._host._lastControlDown[pointerId];
  14482. return true;
  14483. }
  14484. return false;
  14485. };
  14486. /** @hidden */
  14487. Control3D.prototype._disposeNode = function () {
  14488. if (this._node) {
  14489. this._node.dispose();
  14490. this._node = null;
  14491. }
  14492. };
  14493. /**
  14494. * Releases all associated resources
  14495. */
  14496. Control3D.prototype.dispose = function () {
  14497. this.onPointerDownObservable.clear();
  14498. this.onPointerEnterObservable.clear();
  14499. this.onPointerMoveObservable.clear();
  14500. this.onPointerOutObservable.clear();
  14501. this.onPointerUpObservable.clear();
  14502. this.onPointerClickObservable.clear();
  14503. this._disposeNode();
  14504. // Behaviors
  14505. for (var _i = 0, _a = this._behaviors; _i < _a.length; _i++) {
  14506. var behavior = _a[_i];
  14507. behavior.detach();
  14508. }
  14509. };
  14510. return Control3D;
  14511. }());
  14512. /***/ }),
  14513. /***/ "./3D/controls/cylinderPanel.ts":
  14514. /*!**************************************!*\
  14515. !*** ./3D/controls/cylinderPanel.ts ***!
  14516. \**************************************/
  14517. /*! exports provided: CylinderPanel */
  14518. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14519. "use strict";
  14520. __webpack_require__.r(__webpack_exports__);
  14521. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return CylinderPanel; });
  14522. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  14523. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  14524. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  14525. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  14526. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  14527. /**
  14528. * Class used to create a container panel deployed on the surface of a cylinder
  14529. */
  14530. var CylinderPanel = /** @class */ (function (_super) {
  14531. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CylinderPanel, _super);
  14532. function CylinderPanel() {
  14533. var _this = _super !== null && _super.apply(this, arguments) || this;
  14534. _this._radius = 5.0;
  14535. return _this;
  14536. }
  14537. Object.defineProperty(CylinderPanel.prototype, "radius", {
  14538. /**
  14539. * Gets or sets the radius of the cylinder where to project controls (5 by default)
  14540. */
  14541. get: function () {
  14542. return this._radius;
  14543. },
  14544. set: function (value) {
  14545. var _this = this;
  14546. if (this._radius === value) {
  14547. return;
  14548. }
  14549. this._radius = value;
  14550. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  14551. _this._arrangeChildren();
  14552. });
  14553. },
  14554. enumerable: true,
  14555. configurable: true
  14556. });
  14557. CylinderPanel.prototype._mapGridNode = function (control, nodePosition) {
  14558. var mesh = control.mesh;
  14559. if (!mesh) {
  14560. return;
  14561. }
  14562. var newPos = this._cylindricalMapping(nodePosition);
  14563. control.position = newPos;
  14564. switch (this.orientation) {
  14565. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGIN_ORIENTATION:
  14566. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](2 * newPos.x, newPos.y, 2 * newPos.z));
  14567. break;
  14568. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  14569. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](-newPos.x, newPos.y, -newPos.z));
  14570. break;
  14571. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARD_ORIENTATION:
  14572. break;
  14573. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  14574. mesh.rotate(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Axis"].Y, Math.PI, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Space"].LOCAL);
  14575. break;
  14576. }
  14577. };
  14578. CylinderPanel.prototype._cylindricalMapping = function (source) {
  14579. var newPos = new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, source.y, this._radius);
  14580. var yAngle = (source.x / this._radius);
  14581. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].RotationYawPitchRollToRef(yAngle, 0, 0, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  14582. return babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormal(newPos, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  14583. };
  14584. return CylinderPanel;
  14585. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__["VolumeBasedPanel"]));
  14586. /***/ }),
  14587. /***/ "./3D/controls/holographicButton.ts":
  14588. /*!******************************************!*\
  14589. !*** ./3D/controls/holographicButton.ts ***!
  14590. \******************************************/
  14591. /*! exports provided: HolographicButton */
  14592. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14593. "use strict";
  14594. __webpack_require__.r(__webpack_exports__);
  14595. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return HolographicButton; });
  14596. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  14597. /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
  14598. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  14599. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__);
  14600. /* harmony import */ var _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../materials/fluentMaterial */ "./3D/materials/fluentMaterial.ts");
  14601. /* harmony import */ var _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../2D/controls/stackPanel */ "./2D/controls/stackPanel.ts");
  14602. /* harmony import */ var _2D_controls_image__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../2D/controls/image */ "./2D/controls/image.ts");
  14603. /* harmony import */ var _2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../2D/controls/textBlock */ "./2D/controls/textBlock.ts");
  14604. /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
  14605. /**
  14606. * Class used to create a holographic button in 3D
  14607. */
  14608. var HolographicButton = /** @class */ (function (_super) {
  14609. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(HolographicButton, _super);
  14610. /**
  14611. * Creates a new button
  14612. * @param name defines the control name
  14613. */
  14614. function HolographicButton(name, shareMaterials) {
  14615. if (shareMaterials === void 0) { shareMaterials = true; }
  14616. var _this = _super.call(this, name) || this;
  14617. _this._shareMaterials = true;
  14618. _this._shareMaterials = shareMaterials;
  14619. // Default animations
  14620. _this.pointerEnterAnimation = function () {
  14621. if (!_this.mesh) {
  14622. return;
  14623. }
  14624. _this._frontPlate.setEnabled(true);
  14625. };
  14626. _this.pointerOutAnimation = function () {
  14627. if (!_this.mesh) {
  14628. return;
  14629. }
  14630. _this._frontPlate.setEnabled(false);
  14631. };
  14632. return _this;
  14633. }
  14634. HolographicButton.prototype._disposeTooltip = function () {
  14635. this._tooltipFade = null;
  14636. if (this._tooltipTextBlock) {
  14637. this._tooltipTextBlock.dispose();
  14638. }
  14639. if (this._tooltipTexture) {
  14640. this._tooltipTexture.dispose();
  14641. }
  14642. if (this._tooltipMesh) {
  14643. this._tooltipMesh.dispose();
  14644. }
  14645. this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
  14646. this.onPointerOutObservable.remove(this._tooltipOutObserver);
  14647. };
  14648. Object.defineProperty(HolographicButton.prototype, "renderingGroupId", {
  14649. get: function () {
  14650. return this._backPlate.renderingGroupId;
  14651. },
  14652. /**
  14653. * Rendering ground id of all the mesh in the button
  14654. */
  14655. set: function (id) {
  14656. this._backPlate.renderingGroupId = id;
  14657. this._textPlate.renderingGroupId = id;
  14658. this._frontPlate.renderingGroupId = id;
  14659. if (this._tooltipMesh) {
  14660. this._tooltipMesh.renderingGroupId = id;
  14661. }
  14662. },
  14663. enumerable: true,
  14664. configurable: true
  14665. });
  14666. Object.defineProperty(HolographicButton.prototype, "tooltipText", {
  14667. get: function () {
  14668. if (this._tooltipTextBlock) {
  14669. return this._tooltipTextBlock.text;
  14670. }
  14671. return null;
  14672. },
  14673. /**
  14674. * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
  14675. */
  14676. set: function (text) {
  14677. var _this = this;
  14678. if (!text) {
  14679. this._disposeTooltip();
  14680. return;
  14681. }
  14682. if (!this._tooltipFade) {
  14683. // Create tooltip with mesh and text
  14684. this._tooltipMesh = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["PlaneBuilder"].CreatePlane("", { size: 1 }, this._backPlate._scene);
  14685. var tooltipBackground = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["PlaneBuilder"].CreatePlane("", { size: 1, sideOrientation: babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["Mesh"].DOUBLESIDE }, this._backPlate._scene);
  14686. var mat = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["StandardMaterial"]("", this._backPlate._scene);
  14687. mat.diffuseColor = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["Color3"].FromHexString("#212121");
  14688. tooltipBackground.material = mat;
  14689. tooltipBackground.isPickable = false;
  14690. this._tooltipMesh.addChild(tooltipBackground);
  14691. tooltipBackground.position.z = 0.05;
  14692. this._tooltipMesh.scaling.y = 1 / 3;
  14693. this._tooltipMesh.position.y = 0.7;
  14694. this._tooltipMesh.position.z = -0.15;
  14695. this._tooltipMesh.isPickable = false;
  14696. this._tooltipMesh.parent = this._backPlate;
  14697. // Create text texture for the tooltip
  14698. this._tooltipTexture = _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_7__["AdvancedDynamicTexture"].CreateForMesh(this._tooltipMesh);
  14699. this._tooltipTextBlock = new _2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_6__["TextBlock"]();
  14700. this._tooltipTextBlock.scaleY = 3;
  14701. this._tooltipTextBlock.color = "white";
  14702. this._tooltipTextBlock.fontSize = 130;
  14703. this._tooltipTexture.addControl(this._tooltipTextBlock);
  14704. // Add hover action to tooltip
  14705. this._tooltipFade = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["FadeInOutBehavior"]();
  14706. this._tooltipFade.delay = 500;
  14707. this._tooltipMesh.addBehavior(this._tooltipFade);
  14708. this._tooltipHoverObserver = this.onPointerEnterObservable.add(function () {
  14709. if (_this._tooltipFade) {
  14710. _this._tooltipFade.fadeIn(true);
  14711. }
  14712. });
  14713. this._tooltipOutObserver = this.onPointerOutObservable.add(function () {
  14714. if (_this._tooltipFade) {
  14715. _this._tooltipFade.fadeIn(false);
  14716. }
  14717. });
  14718. }
  14719. if (this._tooltipTextBlock) {
  14720. this._tooltipTextBlock.text = text;
  14721. }
  14722. },
  14723. enumerable: true,
  14724. configurable: true
  14725. });
  14726. Object.defineProperty(HolographicButton.prototype, "text", {
  14727. /**
  14728. * Gets or sets text for the button
  14729. */
  14730. get: function () {
  14731. return this._text;
  14732. },
  14733. set: function (value) {
  14734. if (this._text === value) {
  14735. return;
  14736. }
  14737. this._text = value;
  14738. this._rebuildContent();
  14739. },
  14740. enumerable: true,
  14741. configurable: true
  14742. });
  14743. Object.defineProperty(HolographicButton.prototype, "imageUrl", {
  14744. /**
  14745. * Gets or sets the image url for the button
  14746. */
  14747. get: function () {
  14748. return this._imageUrl;
  14749. },
  14750. set: function (value) {
  14751. if (this._imageUrl === value) {
  14752. return;
  14753. }
  14754. this._imageUrl = value;
  14755. this._rebuildContent();
  14756. },
  14757. enumerable: true,
  14758. configurable: true
  14759. });
  14760. Object.defineProperty(HolographicButton.prototype, "backMaterial", {
  14761. /**
  14762. * Gets the back material used by this button
  14763. */
  14764. get: function () {
  14765. return this._backMaterial;
  14766. },
  14767. enumerable: true,
  14768. configurable: true
  14769. });
  14770. Object.defineProperty(HolographicButton.prototype, "frontMaterial", {
  14771. /**
  14772. * Gets the front material used by this button
  14773. */
  14774. get: function () {
  14775. return this._frontMaterial;
  14776. },
  14777. enumerable: true,
  14778. configurable: true
  14779. });
  14780. Object.defineProperty(HolographicButton.prototype, "plateMaterial", {
  14781. /**
  14782. * Gets the plate material used by this button
  14783. */
  14784. get: function () {
  14785. return this._plateMaterial;
  14786. },
  14787. enumerable: true,
  14788. configurable: true
  14789. });
  14790. Object.defineProperty(HolographicButton.prototype, "shareMaterials", {
  14791. /**
  14792. * Gets a boolean indicating if this button shares its material with other HolographicButtons
  14793. */
  14794. get: function () {
  14795. return this._shareMaterials;
  14796. },
  14797. enumerable: true,
  14798. configurable: true
  14799. });
  14800. HolographicButton.prototype._getTypeName = function () {
  14801. return "HolographicButton";
  14802. };
  14803. HolographicButton.prototype._rebuildContent = function () {
  14804. this._disposeFacadeTexture();
  14805. var panel = new _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__["StackPanel"]();
  14806. panel.isVertical = true;
  14807. if (this._imageUrl) {
  14808. var image = new _2D_controls_image__WEBPACK_IMPORTED_MODULE_5__["Image"]();
  14809. image.source = this._imageUrl;
  14810. image.paddingTop = "40px";
  14811. image.height = "180px";
  14812. image.width = "100px";
  14813. image.paddingBottom = "40px";
  14814. panel.addControl(image);
  14815. }
  14816. if (this._text) {
  14817. var text = new _2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_6__["TextBlock"]();
  14818. text.text = this._text;
  14819. text.color = "white";
  14820. text.height = "30px";
  14821. text.fontSize = 24;
  14822. panel.addControl(text);
  14823. }
  14824. if (this._frontPlate) {
  14825. this.content = panel;
  14826. }
  14827. };
  14828. // Mesh association
  14829. HolographicButton.prototype._createNode = function (scene) {
  14830. this._backPlate = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["BoxBuilder"].CreateBox(this.name + "BackMesh", {
  14831. width: 1.0,
  14832. height: 1.0,
  14833. depth: 0.08
  14834. }, scene);
  14835. this._frontPlate = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["BoxBuilder"].CreateBox(this.name + "FrontMesh", {
  14836. width: 1.0,
  14837. height: 1.0,
  14838. depth: 0.08
  14839. }, scene);
  14840. this._frontPlate.parent = this._backPlate;
  14841. this._frontPlate.position.z = -0.08;
  14842. this._frontPlate.isPickable = false;
  14843. this._frontPlate.setEnabled(false);
  14844. this._textPlate = _super.prototype._createNode.call(this, scene);
  14845. this._textPlate.parent = this._backPlate;
  14846. this._textPlate.position.z = -0.08;
  14847. this._textPlate.isPickable = false;
  14848. return this._backPlate;
  14849. };
  14850. HolographicButton.prototype._applyFacade = function (facadeTexture) {
  14851. this._plateMaterial.emissiveTexture = facadeTexture;
  14852. this._plateMaterial.opacityTexture = facadeTexture;
  14853. };
  14854. HolographicButton.prototype._createBackMaterial = function (mesh) {
  14855. var _this = this;
  14856. this._backMaterial = new _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__["FluentMaterial"](this.name + "Back Material", mesh.getScene());
  14857. this._backMaterial.renderHoverLight = true;
  14858. this._pickedPointObserver = this._host.onPickedPointChangedObservable.add(function (pickedPoint) {
  14859. if (pickedPoint) {
  14860. _this._backMaterial.hoverPosition = pickedPoint;
  14861. _this._backMaterial.hoverColor.a = 1.0;
  14862. }
  14863. else {
  14864. _this._backMaterial.hoverColor.a = 0;
  14865. }
  14866. });
  14867. };
  14868. HolographicButton.prototype._createFrontMaterial = function (mesh) {
  14869. this._frontMaterial = new _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__["FluentMaterial"](this.name + "Front Material", mesh.getScene());
  14870. this._frontMaterial.innerGlowColorIntensity = 0; // No inner glow
  14871. this._frontMaterial.alpha = 0.5; // Additive
  14872. this._frontMaterial.renderBorders = true;
  14873. };
  14874. HolographicButton.prototype._createPlateMaterial = function (mesh) {
  14875. this._plateMaterial = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["StandardMaterial"](this.name + "Plate Material", mesh.getScene());
  14876. this._plateMaterial.specularColor = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__["Color3"].Black();
  14877. };
  14878. HolographicButton.prototype._affectMaterial = function (mesh) {
  14879. // Back
  14880. if (this._shareMaterials) {
  14881. if (!this._host._sharedMaterials["backFluentMaterial"]) {
  14882. this._createBackMaterial(mesh);
  14883. this._host._sharedMaterials["backFluentMaterial"] = this._backMaterial;
  14884. }
  14885. else {
  14886. this._backMaterial = this._host._sharedMaterials["backFluentMaterial"];
  14887. }
  14888. // Front
  14889. if (!this._host._sharedMaterials["frontFluentMaterial"]) {
  14890. this._createFrontMaterial(mesh);
  14891. this._host._sharedMaterials["frontFluentMaterial"] = this._frontMaterial;
  14892. }
  14893. else {
  14894. this._frontMaterial = this._host._sharedMaterials["frontFluentMaterial"];
  14895. }
  14896. }
  14897. else {
  14898. this._createBackMaterial(mesh);
  14899. this._createFrontMaterial(mesh);
  14900. }
  14901. this._createPlateMaterial(mesh);
  14902. this._backPlate.material = this._backMaterial;
  14903. this._frontPlate.material = this._frontMaterial;
  14904. this._textPlate.material = this._plateMaterial;
  14905. this._rebuildContent();
  14906. };
  14907. /**
  14908. * Releases all associated resources
  14909. */
  14910. HolographicButton.prototype.dispose = function () {
  14911. _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
  14912. this._disposeTooltip();
  14913. if (!this.shareMaterials) {
  14914. this._backMaterial.dispose();
  14915. this._frontMaterial.dispose();
  14916. this._plateMaterial.dispose();
  14917. if (this._pickedPointObserver) {
  14918. this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
  14919. this._pickedPointObserver = null;
  14920. }
  14921. }
  14922. };
  14923. return HolographicButton;
  14924. }(_button3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]));
  14925. /***/ }),
  14926. /***/ "./3D/controls/index.ts":
  14927. /*!******************************!*\
  14928. !*** ./3D/controls/index.ts ***!
  14929. \******************************/
  14930. /*! exports provided: AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel */
  14931. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14932. "use strict";
  14933. __webpack_require__.r(__webpack_exports__);
  14934. /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
  14935. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _abstractButton3D__WEBPACK_IMPORTED_MODULE_0__["AbstractButton3D"]; });
  14936. /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
  14937. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _button3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]; });
  14938. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  14939. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"]; });
  14940. /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
  14941. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _control3D__WEBPACK_IMPORTED_MODULE_3__["Control3D"]; });
  14942. /* harmony import */ var _cylinderPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./cylinderPanel */ "./3D/controls/cylinderPanel.ts");
  14943. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _cylinderPanel__WEBPACK_IMPORTED_MODULE_4__["CylinderPanel"]; });
  14944. /* harmony import */ var _holographicButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./holographicButton */ "./3D/controls/holographicButton.ts");
  14945. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _holographicButton__WEBPACK_IMPORTED_MODULE_5__["HolographicButton"]; });
  14946. /* harmony import */ var _meshButton3D__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./meshButton3D */ "./3D/controls/meshButton3D.ts");
  14947. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _meshButton3D__WEBPACK_IMPORTED_MODULE_6__["MeshButton3D"]; });
  14948. /* harmony import */ var _planePanel__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./planePanel */ "./3D/controls/planePanel.ts");
  14949. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _planePanel__WEBPACK_IMPORTED_MODULE_7__["PlanePanel"]; });
  14950. /* harmony import */ var _scatterPanel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./scatterPanel */ "./3D/controls/scatterPanel.ts");
  14951. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _scatterPanel__WEBPACK_IMPORTED_MODULE_8__["ScatterPanel"]; });
  14952. /* harmony import */ var _spherePanel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./spherePanel */ "./3D/controls/spherePanel.ts");
  14953. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _spherePanel__WEBPACK_IMPORTED_MODULE_9__["SpherePanel"]; });
  14954. /* harmony import */ var _stackPanel3D__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./stackPanel3D */ "./3D/controls/stackPanel3D.ts");
  14955. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _stackPanel3D__WEBPACK_IMPORTED_MODULE_10__["StackPanel3D"]; });
  14956. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  14957. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_11__["VolumeBasedPanel"]; });
  14958. /***/ }),
  14959. /***/ "./3D/controls/meshButton3D.ts":
  14960. /*!*************************************!*\
  14961. !*** ./3D/controls/meshButton3D.ts ***!
  14962. \*************************************/
  14963. /*! exports provided: MeshButton3D */
  14964. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  14965. "use strict";
  14966. __webpack_require__.r(__webpack_exports__);
  14967. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return MeshButton3D; });
  14968. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  14969. /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
  14970. /**
  14971. * Class used to create an interactable object. It's a 3D button using a mesh coming from the current scene
  14972. */
  14973. var MeshButton3D = /** @class */ (function (_super) {
  14974. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(MeshButton3D, _super);
  14975. /**
  14976. * Creates a new 3D button based on a mesh
  14977. * @param mesh mesh to become a 3D button
  14978. * @param name defines the control name
  14979. */
  14980. function MeshButton3D(mesh, name) {
  14981. var _this = _super.call(this, name) || this;
  14982. _this._currentMesh = mesh;
  14983. /**
  14984. * Provides a default behavior on hover/out & up/down
  14985. * Override those function to create your own desired behavior specific to your mesh
  14986. */
  14987. _this.pointerEnterAnimation = function () {
  14988. if (!_this.mesh) {
  14989. return;
  14990. }
  14991. _this.mesh.scaling.scaleInPlace(1.1);
  14992. };
  14993. _this.pointerOutAnimation = function () {
  14994. if (!_this.mesh) {
  14995. return;
  14996. }
  14997. _this.mesh.scaling.scaleInPlace(1.0 / 1.1);
  14998. };
  14999. _this.pointerDownAnimation = function () {
  15000. if (!_this.mesh) {
  15001. return;
  15002. }
  15003. _this.mesh.scaling.scaleInPlace(0.95);
  15004. };
  15005. _this.pointerUpAnimation = function () {
  15006. if (!_this.mesh) {
  15007. return;
  15008. }
  15009. _this.mesh.scaling.scaleInPlace(1.0 / 0.95);
  15010. };
  15011. return _this;
  15012. }
  15013. MeshButton3D.prototype._getTypeName = function () {
  15014. return "MeshButton3D";
  15015. };
  15016. // Mesh association
  15017. MeshButton3D.prototype._createNode = function (scene) {
  15018. var _this = this;
  15019. this._currentMesh.getChildMeshes().forEach(function (mesh) {
  15020. mesh.metadata = _this;
  15021. });
  15022. return this._currentMesh;
  15023. };
  15024. MeshButton3D.prototype._affectMaterial = function (mesh) {
  15025. };
  15026. return MeshButton3D;
  15027. }(_button3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]));
  15028. /***/ }),
  15029. /***/ "./3D/controls/planePanel.ts":
  15030. /*!***********************************!*\
  15031. !*** ./3D/controls/planePanel.ts ***!
  15032. \***********************************/
  15033. /*! exports provided: PlanePanel */
  15034. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15035. "use strict";
  15036. __webpack_require__.r(__webpack_exports__);
  15037. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return PlanePanel; });
  15038. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15039. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  15040. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
  15041. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15042. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15043. /**
  15044. * Class used to create a container panel deployed on the surface of a plane
  15045. */
  15046. var PlanePanel = /** @class */ (function (_super) {
  15047. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(PlanePanel, _super);
  15048. function PlanePanel() {
  15049. return _super !== null && _super.apply(this, arguments) || this;
  15050. }
  15051. PlanePanel.prototype._mapGridNode = function (control, nodePosition) {
  15052. var mesh = control.mesh;
  15053. if (!mesh) {
  15054. return;
  15055. }
  15056. control.position = nodePosition.clone();
  15057. var target = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0];
  15058. target.copyFrom(nodePosition);
  15059. switch (this.orientation) {
  15060. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEORIGIN_ORIENTATION:
  15061. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEFORWARD_ORIENTATION:
  15062. target.addInPlace(new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, 1));
  15063. mesh.lookAt(target);
  15064. break;
  15065. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  15066. case _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  15067. target.addInPlace(new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, -1));
  15068. mesh.lookAt(target);
  15069. break;
  15070. }
  15071. };
  15072. return PlanePanel;
  15073. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__["VolumeBasedPanel"]));
  15074. /***/ }),
  15075. /***/ "./3D/controls/scatterPanel.ts":
  15076. /*!*************************************!*\
  15077. !*** ./3D/controls/scatterPanel.ts ***!
  15078. \*************************************/
  15079. /*! exports provided: ScatterPanel */
  15080. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15081. "use strict";
  15082. __webpack_require__.r(__webpack_exports__);
  15083. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return ScatterPanel; });
  15084. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15085. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15086. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15087. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15088. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15089. /**
  15090. * Class used to create a container panel where items get randomized planar mapping
  15091. */
  15092. var ScatterPanel = /** @class */ (function (_super) {
  15093. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScatterPanel, _super);
  15094. function ScatterPanel() {
  15095. var _this = _super !== null && _super.apply(this, arguments) || this;
  15096. _this._iteration = 100.0;
  15097. return _this;
  15098. }
  15099. Object.defineProperty(ScatterPanel.prototype, "iteration", {
  15100. /**
  15101. * Gets or sets the number of iteration to use to scatter the controls (100 by default)
  15102. */
  15103. get: function () {
  15104. return this._iteration;
  15105. },
  15106. set: function (value) {
  15107. var _this = this;
  15108. if (this._iteration === value) {
  15109. return;
  15110. }
  15111. this._iteration = value;
  15112. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15113. _this._arrangeChildren();
  15114. });
  15115. },
  15116. enumerable: true,
  15117. configurable: true
  15118. });
  15119. ScatterPanel.prototype._mapGridNode = function (control, nodePosition) {
  15120. var mesh = control.mesh;
  15121. var newPos = this._scatterMapping(nodePosition);
  15122. if (!mesh) {
  15123. return;
  15124. }
  15125. switch (this.orientation) {
  15126. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGIN_ORIENTATION:
  15127. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARD_ORIENTATION:
  15128. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, 1));
  15129. break;
  15130. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  15131. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  15132. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, -1));
  15133. break;
  15134. }
  15135. control.position = newPos;
  15136. };
  15137. ScatterPanel.prototype._scatterMapping = function (source) {
  15138. source.x = (1.0 - Math.random() * 2.0) * this._cellWidth;
  15139. source.y = (1.0 - Math.random() * 2.0) * this._cellHeight;
  15140. return source;
  15141. };
  15142. ScatterPanel.prototype._finalProcessing = function () {
  15143. var meshes = [];
  15144. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  15145. var child = _a[_i];
  15146. if (!child.mesh) {
  15147. continue;
  15148. }
  15149. meshes.push(child.mesh);
  15150. }
  15151. for (var count = 0; count < this._iteration; count++) {
  15152. meshes.sort(function (a, b) {
  15153. var distance1 = a.position.lengthSquared();
  15154. var distance2 = b.position.lengthSquared();
  15155. if (distance1 < distance2) {
  15156. return 1;
  15157. }
  15158. else if (distance1 > distance2) {
  15159. return -1;
  15160. }
  15161. return 0;
  15162. });
  15163. var radiusPaddingSquared = Math.pow(this.margin, 2.0);
  15164. var cellSize = Math.max(this._cellWidth, this._cellHeight);
  15165. var difference2D = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector2[0];
  15166. var difference = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0];
  15167. for (var i = 0; i < meshes.length - 1; i++) {
  15168. for (var j = i + 1; j < meshes.length; j++) {
  15169. if (i != j) {
  15170. meshes[j].position.subtractToRef(meshes[i].position, difference);
  15171. // Ignore Z axis
  15172. difference2D.x = difference.x;
  15173. difference2D.y = difference.y;
  15174. var combinedRadius = cellSize;
  15175. var distance = difference2D.lengthSquared() - radiusPaddingSquared;
  15176. var minSeparation = Math.min(distance, radiusPaddingSquared);
  15177. distance -= minSeparation;
  15178. if (distance < (Math.pow(combinedRadius, 2.0))) {
  15179. difference2D.normalize();
  15180. difference.scaleInPlace((combinedRadius - Math.sqrt(distance)) * 0.5);
  15181. meshes[j].position.addInPlace(difference);
  15182. meshes[i].position.subtractInPlace(difference);
  15183. }
  15184. }
  15185. }
  15186. }
  15187. }
  15188. };
  15189. return ScatterPanel;
  15190. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__["VolumeBasedPanel"]));
  15191. /***/ }),
  15192. /***/ "./3D/controls/spherePanel.ts":
  15193. /*!************************************!*\
  15194. !*** ./3D/controls/spherePanel.ts ***!
  15195. \************************************/
  15196. /*! exports provided: SpherePanel */
  15197. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15198. "use strict";
  15199. __webpack_require__.r(__webpack_exports__);
  15200. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return SpherePanel; });
  15201. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15202. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15203. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15204. /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
  15205. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15206. /**
  15207. * Class used to create a container panel deployed on the surface of a sphere
  15208. */
  15209. var SpherePanel = /** @class */ (function (_super) {
  15210. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SpherePanel, _super);
  15211. function SpherePanel() {
  15212. var _this = _super !== null && _super.apply(this, arguments) || this;
  15213. _this._radius = 5.0;
  15214. return _this;
  15215. }
  15216. Object.defineProperty(SpherePanel.prototype, "radius", {
  15217. /**
  15218. * Gets or sets the radius of the sphere where to project controls (5 by default)
  15219. */
  15220. get: function () {
  15221. return this._radius;
  15222. },
  15223. set: function (value) {
  15224. var _this = this;
  15225. if (this._radius === value) {
  15226. return;
  15227. }
  15228. this._radius = value;
  15229. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15230. _this._arrangeChildren();
  15231. });
  15232. },
  15233. enumerable: true,
  15234. configurable: true
  15235. });
  15236. SpherePanel.prototype._mapGridNode = function (control, nodePosition) {
  15237. var mesh = control.mesh;
  15238. if (!mesh) {
  15239. return;
  15240. }
  15241. var newPos = this._sphericalMapping(nodePosition);
  15242. control.position = newPos;
  15243. switch (this.orientation) {
  15244. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGIN_ORIENTATION:
  15245. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](2 * newPos.x, 2 * newPos.y, 2 * newPos.z));
  15246. break;
  15247. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEORIGINREVERSED_ORIENTATION:
  15248. mesh.lookAt(new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](-newPos.x, -newPos.y, -newPos.z));
  15249. break;
  15250. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARD_ORIENTATION:
  15251. break;
  15252. case _container3D__WEBPACK_IMPORTED_MODULE_3__["Container3D"].FACEFORWARDREVERSED_ORIENTATION:
  15253. mesh.rotate(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Axis"].Y, Math.PI, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Space"].LOCAL);
  15254. break;
  15255. }
  15256. };
  15257. SpherePanel.prototype._sphericalMapping = function (source) {
  15258. var newPos = new babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0, 0, this._radius);
  15259. var xAngle = (source.y / this._radius);
  15260. var yAngle = -(source.x / this._radius);
  15261. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].RotationYawPitchRollToRef(yAngle, xAngle, 0, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15262. return babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormal(newPos, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15263. };
  15264. return SpherePanel;
  15265. }(_volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__["VolumeBasedPanel"]));
  15266. /***/ }),
  15267. /***/ "./3D/controls/stackPanel3D.ts":
  15268. /*!*************************************!*\
  15269. !*** ./3D/controls/stackPanel3D.ts ***!
  15270. \*************************************/
  15271. /*! exports provided: StackPanel3D */
  15272. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15273. "use strict";
  15274. __webpack_require__.r(__webpack_exports__);
  15275. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return StackPanel3D; });
  15276. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15277. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15278. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15279. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15280. /**
  15281. * Class used to create a stack panel in 3D on XY plane
  15282. */
  15283. var StackPanel3D = /** @class */ (function (_super) {
  15284. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(StackPanel3D, _super);
  15285. /**
  15286. * Creates new StackPanel
  15287. * @param isVertical
  15288. */
  15289. function StackPanel3D(isVertical) {
  15290. if (isVertical === void 0) { isVertical = false; }
  15291. var _this = _super.call(this) || this;
  15292. _this._isVertical = false;
  15293. /**
  15294. * Gets or sets the distance between elements
  15295. */
  15296. _this.margin = 0.1;
  15297. _this._isVertical = isVertical;
  15298. return _this;
  15299. }
  15300. Object.defineProperty(StackPanel3D.prototype, "isVertical", {
  15301. /**
  15302. * Gets or sets a boolean indicating if the stack panel is vertical or horizontal (horizontal by default)
  15303. */
  15304. get: function () {
  15305. return this._isVertical;
  15306. },
  15307. set: function (value) {
  15308. var _this = this;
  15309. if (this._isVertical === value) {
  15310. return;
  15311. }
  15312. this._isVertical = value;
  15313. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15314. _this._arrangeChildren();
  15315. });
  15316. },
  15317. enumerable: true,
  15318. configurable: true
  15319. });
  15320. StackPanel3D.prototype._arrangeChildren = function () {
  15321. var width = 0;
  15322. var height = 0;
  15323. var controlCount = 0;
  15324. var extendSizes = [];
  15325. var currentInverseWorld = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].Invert(this.node.computeWorldMatrix(true));
  15326. // Measure
  15327. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  15328. var child = _a[_i];
  15329. if (!child.mesh) {
  15330. continue;
  15331. }
  15332. controlCount++;
  15333. child.mesh.computeWorldMatrix(true);
  15334. child.mesh.getWorldMatrix().multiplyToRef(currentInverseWorld, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15335. var boundingBox = child.mesh.getBoundingInfo().boundingBox;
  15336. var extendSize = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormal(boundingBox.extendSize, babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Matrix[0]);
  15337. extendSizes.push(extendSize);
  15338. if (this._isVertical) {
  15339. height += extendSize.y;
  15340. }
  15341. else {
  15342. width += extendSize.x;
  15343. }
  15344. }
  15345. if (this._isVertical) {
  15346. height += (controlCount - 1) * this.margin / 2;
  15347. }
  15348. else {
  15349. width += (controlCount - 1) * this.margin / 2;
  15350. }
  15351. // Arrange
  15352. var offset;
  15353. if (this._isVertical) {
  15354. offset = -height;
  15355. }
  15356. else {
  15357. offset = -width;
  15358. }
  15359. var index = 0;
  15360. for (var _b = 0, _c = this._children; _b < _c.length; _b++) {
  15361. var child = _c[_b];
  15362. if (!child.mesh) {
  15363. continue;
  15364. }
  15365. controlCount--;
  15366. var extendSize = extendSizes[index++];
  15367. if (this._isVertical) {
  15368. child.position.y = offset + extendSize.y;
  15369. child.position.x = 0;
  15370. offset += extendSize.y * 2;
  15371. }
  15372. else {
  15373. child.position.x = offset + extendSize.x;
  15374. child.position.y = 0;
  15375. offset += extendSize.x * 2;
  15376. }
  15377. offset += (controlCount > 0 ? this.margin : 0);
  15378. }
  15379. };
  15380. return StackPanel3D;
  15381. }(_container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"]));
  15382. /***/ }),
  15383. /***/ "./3D/controls/volumeBasedPanel.ts":
  15384. /*!*****************************************!*\
  15385. !*** ./3D/controls/volumeBasedPanel.ts ***!
  15386. \*****************************************/
  15387. /*! exports provided: VolumeBasedPanel */
  15388. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15389. "use strict";
  15390. __webpack_require__.r(__webpack_exports__);
  15391. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return VolumeBasedPanel; });
  15392. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15393. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
  15394. /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
  15395. /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
  15396. /**
  15397. * Abstract class used to create a container panel deployed on the surface of a volume
  15398. */
  15399. var VolumeBasedPanel = /** @class */ (function (_super) {
  15400. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(VolumeBasedPanel, _super);
  15401. /**
  15402. * Creates new VolumeBasedPanel
  15403. */
  15404. function VolumeBasedPanel() {
  15405. var _this = _super.call(this) || this;
  15406. _this._columns = 10;
  15407. _this._rows = 0;
  15408. _this._rowThenColum = true;
  15409. _this._orientation = _container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"].FACEORIGIN_ORIENTATION;
  15410. /**
  15411. * Gets or sets the distance between elements
  15412. */
  15413. _this.margin = 0;
  15414. return _this;
  15415. }
  15416. Object.defineProperty(VolumeBasedPanel.prototype, "orientation", {
  15417. /**
  15418. * Gets or sets the orientation to apply to all controls (BABYLON.Container3D.FaceOriginReversedOrientation by default)
  15419. * | Value | Type | Description |
  15420. * | ----- | ----------------------------------- | ----------- |
  15421. * | 0 | UNSET_ORIENTATION | Control rotation will remain unchanged |
  15422. * | 1 | FACEORIGIN_ORIENTATION | Control will rotate to make it look at sphere central axis |
  15423. * | 2 | FACEORIGINREVERSED_ORIENTATION | Control will rotate to make it look back at sphere central axis |
  15424. * | 3 | FACEFORWARD_ORIENTATION | Control will rotate to look at z axis (0, 0, 1) |
  15425. * | 4 | FACEFORWARDREVERSED_ORIENTATION | Control will rotate to look at negative z axis (0, 0, -1) |
  15426. */
  15427. get: function () {
  15428. return this._orientation;
  15429. },
  15430. set: function (value) {
  15431. var _this = this;
  15432. if (this._orientation === value) {
  15433. return;
  15434. }
  15435. this._orientation = value;
  15436. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15437. _this._arrangeChildren();
  15438. });
  15439. },
  15440. enumerable: true,
  15441. configurable: true
  15442. });
  15443. Object.defineProperty(VolumeBasedPanel.prototype, "columns", {
  15444. /**
  15445. * Gets or sets the number of columns requested (10 by default).
  15446. * The panel will automatically compute the number of rows based on number of child controls.
  15447. */
  15448. get: function () {
  15449. return this._columns;
  15450. },
  15451. set: function (value) {
  15452. var _this = this;
  15453. if (this._columns === value) {
  15454. return;
  15455. }
  15456. this._columns = value;
  15457. this._rowThenColum = true;
  15458. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15459. _this._arrangeChildren();
  15460. });
  15461. },
  15462. enumerable: true,
  15463. configurable: true
  15464. });
  15465. Object.defineProperty(VolumeBasedPanel.prototype, "rows", {
  15466. /**
  15467. * Gets or sets a the number of rows requested.
  15468. * The panel will automatically compute the number of columns based on number of child controls.
  15469. */
  15470. get: function () {
  15471. return this._rows;
  15472. },
  15473. set: function (value) {
  15474. var _this = this;
  15475. if (this._rows === value) {
  15476. return;
  15477. }
  15478. this._rows = value;
  15479. this._rowThenColum = false;
  15480. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SetImmediate(function () {
  15481. _this._arrangeChildren();
  15482. });
  15483. },
  15484. enumerable: true,
  15485. configurable: true
  15486. });
  15487. VolumeBasedPanel.prototype._arrangeChildren = function () {
  15488. this._cellWidth = 0;
  15489. this._cellHeight = 0;
  15490. var rows = 0;
  15491. var columns = 0;
  15492. var controlCount = 0;
  15493. var currentInverseWorld = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Matrix"].Invert(this.node.computeWorldMatrix(true));
  15494. // Measure
  15495. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  15496. var child = _a[_i];
  15497. if (!child.mesh) {
  15498. continue;
  15499. }
  15500. controlCount++;
  15501. child.mesh.computeWorldMatrix(true);
  15502. // child.mesh.getWorldMatrix().multiplyToRef(currentInverseWorld, Tmp.Matrix[0]);
  15503. var boundingBox = child.mesh.getHierarchyBoundingVectors();
  15504. var extendSize = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0];
  15505. var diff = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[1];
  15506. boundingBox.max.subtractToRef(boundingBox.min, diff);
  15507. diff.scaleInPlace(0.5);
  15508. babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Vector3"].TransformNormalToRef(diff, currentInverseWorld, extendSize);
  15509. this._cellWidth = Math.max(this._cellWidth, extendSize.x * 2);
  15510. this._cellHeight = Math.max(this._cellHeight, extendSize.y * 2);
  15511. }
  15512. this._cellWidth += this.margin * 2;
  15513. this._cellHeight += this.margin * 2;
  15514. // Arrange
  15515. if (this._rowThenColum) {
  15516. columns = this._columns;
  15517. rows = Math.ceil(controlCount / this._columns);
  15518. }
  15519. else {
  15520. rows = this._rows;
  15521. columns = Math.ceil(controlCount / this._rows);
  15522. }
  15523. var startOffsetX = (columns * 0.5) * this._cellWidth;
  15524. var startOffsetY = (rows * 0.5) * this._cellHeight;
  15525. var nodeGrid = [];
  15526. var cellCounter = 0;
  15527. if (this._rowThenColum) {
  15528. for (var r = 0; r < rows; r++) {
  15529. for (var c = 0; c < columns; c++) {
  15530. 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));
  15531. cellCounter++;
  15532. if (cellCounter > controlCount) {
  15533. break;
  15534. }
  15535. }
  15536. }
  15537. }
  15538. else {
  15539. for (var c = 0; c < columns; c++) {
  15540. for (var r = 0; r < rows; r++) {
  15541. 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));
  15542. cellCounter++;
  15543. if (cellCounter > controlCount) {
  15544. break;
  15545. }
  15546. }
  15547. }
  15548. }
  15549. cellCounter = 0;
  15550. for (var _b = 0, _c = this._children; _b < _c.length; _b++) {
  15551. var child = _c[_b];
  15552. if (!child.mesh) {
  15553. continue;
  15554. }
  15555. this._mapGridNode(child, nodeGrid[cellCounter]);
  15556. cellCounter++;
  15557. }
  15558. this._finalProcessing();
  15559. };
  15560. /** Child classes can implement this function to provide additional processing */
  15561. VolumeBasedPanel.prototype._finalProcessing = function () {
  15562. };
  15563. return VolumeBasedPanel;
  15564. }(_container3D__WEBPACK_IMPORTED_MODULE_2__["Container3D"]));
  15565. /***/ }),
  15566. /***/ "./3D/gui3DManager.ts":
  15567. /*!****************************!*\
  15568. !*** ./3D/gui3DManager.ts ***!
  15569. \****************************/
  15570. /*! exports provided: GUI3DManager */
  15571. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15572. "use strict";
  15573. __webpack_require__.r(__webpack_exports__);
  15574. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return GUI3DManager; });
  15575. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
  15576. /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
  15577. /* harmony import */ var _controls_container3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./controls/container3D */ "./3D/controls/container3D.ts");
  15578. /**
  15579. * Class used to manage 3D user interface
  15580. * @see http://doc.babylonjs.com/how_to/gui3d
  15581. */
  15582. var GUI3DManager = /** @class */ (function () {
  15583. /**
  15584. * Creates a new GUI3DManager
  15585. * @param scene
  15586. */
  15587. function GUI3DManager(scene) {
  15588. var _this = this;
  15589. /** @hidden */
  15590. this._lastControlOver = {};
  15591. /** @hidden */
  15592. this._lastControlDown = {};
  15593. /**
  15594. * Observable raised when the point picked by the pointer events changed
  15595. */
  15596. this.onPickedPointChangedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
  15597. // Shared resources
  15598. /** @hidden */
  15599. this._sharedMaterials = {};
  15600. this._scene = scene || babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["EngineStore"].LastCreatedScene;
  15601. this._sceneDisposeObserver = this._scene.onDisposeObservable.add(function () {
  15602. _this._sceneDisposeObserver = null;
  15603. _this._utilityLayer = null;
  15604. _this.dispose();
  15605. });
  15606. this._utilityLayer = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["UtilityLayerRenderer"](this._scene);
  15607. this._utilityLayer.onlyCheckPointerDownEvents = false;
  15608. this._utilityLayer.pickUtilitySceneFirst = false;
  15609. this._utilityLayer.mainSceneTrackerPredicate = function (mesh) {
  15610. return mesh && mesh.metadata && mesh.metadata._node;
  15611. };
  15612. // Root
  15613. this._rootContainer = new _controls_container3D__WEBPACK_IMPORTED_MODULE_1__["Container3D"]("RootContainer");
  15614. this._rootContainer._host = this;
  15615. var utilityLayerScene = this._utilityLayer.utilityLayerScene;
  15616. // Events
  15617. this._pointerOutObserver = this._utilityLayer.onPointerOutObservable.add(function (pointerId) {
  15618. _this._handlePointerOut(pointerId, true);
  15619. });
  15620. this._pointerObserver = utilityLayerScene.onPointerObservable.add(function (pi, state) {
  15621. _this._doPicking(pi);
  15622. });
  15623. // Scene
  15624. this._utilityLayer.utilityLayerScene.autoClear = false;
  15625. this._utilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
  15626. new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["HemisphericLight"]("hemi", babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Up(), this._utilityLayer.utilityLayerScene);
  15627. }
  15628. Object.defineProperty(GUI3DManager.prototype, "scene", {
  15629. /** Gets the hosting scene */
  15630. get: function () {
  15631. return this._scene;
  15632. },
  15633. enumerable: true,
  15634. configurable: true
  15635. });
  15636. Object.defineProperty(GUI3DManager.prototype, "utilityLayer", {
  15637. /** Gets associated utility layer */
  15638. get: function () {
  15639. return this._utilityLayer;
  15640. },
  15641. enumerable: true,
  15642. configurable: true
  15643. });
  15644. GUI3DManager.prototype._handlePointerOut = function (pointerId, isPointerUp) {
  15645. var previousControlOver = this._lastControlOver[pointerId];
  15646. if (previousControlOver) {
  15647. previousControlOver._onPointerOut(previousControlOver);
  15648. delete this._lastControlOver[pointerId];
  15649. }
  15650. if (isPointerUp) {
  15651. if (this._lastControlDown[pointerId]) {
  15652. this._lastControlDown[pointerId].forcePointerUp();
  15653. delete this._lastControlDown[pointerId];
  15654. }
  15655. }
  15656. this.onPickedPointChangedObservable.notifyObservers(null);
  15657. };
  15658. GUI3DManager.prototype._doPicking = function (pi) {
  15659. if (!this._utilityLayer || !this._utilityLayer.shouldRender || !this._utilityLayer.utilityLayerScene.activeCamera) {
  15660. return false;
  15661. }
  15662. var pointerEvent = (pi.event);
  15663. var pointerId = pointerEvent.pointerId || 0;
  15664. var buttonIndex = pointerEvent.button;
  15665. var pickingInfo = pi.pickInfo;
  15666. if (!pickingInfo || !pickingInfo.hit) {
  15667. this._handlePointerOut(pointerId, pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP);
  15668. return false;
  15669. }
  15670. var control = (pickingInfo.pickedMesh.metadata);
  15671. if (pickingInfo.pickedPoint) {
  15672. this.onPickedPointChangedObservable.notifyObservers(pickingInfo.pickedPoint);
  15673. }
  15674. if (!control._processObservables(pi.type, pickingInfo.pickedPoint, pointerId, buttonIndex)) {
  15675. if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERMOVE) {
  15676. if (this._lastControlOver[pointerId]) {
  15677. this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId]);
  15678. }
  15679. delete this._lastControlOver[pointerId];
  15680. }
  15681. }
  15682. if (pi.type === babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["PointerEventTypes"].POINTERUP) {
  15683. if (this._lastControlDown[pointerEvent.pointerId]) {
  15684. this._lastControlDown[pointerEvent.pointerId].forcePointerUp();
  15685. delete this._lastControlDown[pointerEvent.pointerId];
  15686. }
  15687. if (pointerEvent.pointerType === "touch") {
  15688. this._handlePointerOut(pointerId, false);
  15689. }
  15690. }
  15691. return true;
  15692. };
  15693. Object.defineProperty(GUI3DManager.prototype, "rootContainer", {
  15694. /**
  15695. * Gets the root container
  15696. */
  15697. get: function () {
  15698. return this._rootContainer;
  15699. },
  15700. enumerable: true,
  15701. configurable: true
  15702. });
  15703. /**
  15704. * Gets a boolean indicating if the given control is in the root child list
  15705. * @param control defines the control to check
  15706. * @returns true if the control is in the root child list
  15707. */
  15708. GUI3DManager.prototype.containsControl = function (control) {
  15709. return this._rootContainer.containsControl(control);
  15710. };
  15711. /**
  15712. * Adds a control to the root child list
  15713. * @param control defines the control to add
  15714. * @returns the current manager
  15715. */
  15716. GUI3DManager.prototype.addControl = function (control) {
  15717. this._rootContainer.addControl(control);
  15718. return this;
  15719. };
  15720. /**
  15721. * Removes a control from the root child list
  15722. * @param control defines the control to remove
  15723. * @returns the current container
  15724. */
  15725. GUI3DManager.prototype.removeControl = function (control) {
  15726. this._rootContainer.removeControl(control);
  15727. return this;
  15728. };
  15729. /**
  15730. * Releases all associated resources
  15731. */
  15732. GUI3DManager.prototype.dispose = function () {
  15733. this._rootContainer.dispose();
  15734. for (var materialName in this._sharedMaterials) {
  15735. if (!this._sharedMaterials.hasOwnProperty(materialName)) {
  15736. continue;
  15737. }
  15738. this._sharedMaterials[materialName].dispose();
  15739. }
  15740. this._sharedMaterials = {};
  15741. if (this._pointerOutObserver && this._utilityLayer) {
  15742. this._utilityLayer.onPointerOutObservable.remove(this._pointerOutObserver);
  15743. this._pointerOutObserver = null;
  15744. }
  15745. this.onPickedPointChangedObservable.clear();
  15746. var utilityLayerScene = this._utilityLayer ? this._utilityLayer.utilityLayerScene : null;
  15747. if (utilityLayerScene) {
  15748. if (this._pointerObserver) {
  15749. utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
  15750. this._pointerObserver = null;
  15751. }
  15752. }
  15753. if (this._scene) {
  15754. if (this._sceneDisposeObserver) {
  15755. this._scene.onDisposeObservable.remove(this._sceneDisposeObserver);
  15756. this._sceneDisposeObserver = null;
  15757. }
  15758. }
  15759. if (this._utilityLayer) {
  15760. this._utilityLayer.dispose();
  15761. }
  15762. };
  15763. return GUI3DManager;
  15764. }());
  15765. /***/ }),
  15766. /***/ "./3D/index.ts":
  15767. /*!*********************!*\
  15768. !*** ./3D/index.ts ***!
  15769. \*********************/
  15770. /*! exports provided: GUI3DManager, Vector3WithInfo, AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel, FluentMaterialDefines, FluentMaterial */
  15771. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15772. "use strict";
  15773. __webpack_require__.r(__webpack_exports__);
  15774. /* harmony import */ var _controls__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./controls */ "./3D/controls/index.ts");
  15775. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["AbstractButton3D"]; });
  15776. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Button3D"]; });
  15777. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Container3D"]; });
  15778. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["Control3D"]; });
  15779. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["CylinderPanel"]; });
  15780. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["HolographicButton"]; });
  15781. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["MeshButton3D"]; });
  15782. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["PlanePanel"]; });
  15783. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["ScatterPanel"]; });
  15784. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["SpherePanel"]; });
  15785. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["StackPanel3D"]; });
  15786. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _controls__WEBPACK_IMPORTED_MODULE_0__["VolumeBasedPanel"]; });
  15787. /* harmony import */ var _materials__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./materials */ "./3D/materials/index.ts");
  15788. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _materials__WEBPACK_IMPORTED_MODULE_1__["FluentMaterialDefines"]; });
  15789. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _materials__WEBPACK_IMPORTED_MODULE_1__["FluentMaterial"]; });
  15790. /* harmony import */ var _gui3DManager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./gui3DManager */ "./3D/gui3DManager.ts");
  15791. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return _gui3DManager__WEBPACK_IMPORTED_MODULE_2__["GUI3DManager"]; });
  15792. /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./vector3WithInfo */ "./3D/vector3WithInfo.ts");
  15793. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return _vector3WithInfo__WEBPACK_IMPORTED_MODULE_3__["Vector3WithInfo"]; });
  15794. /***/ }),
  15795. /***/ "./3D/materials/fluentMaterial.ts":
  15796. /*!****************************************!*\
  15797. !*** ./3D/materials/fluentMaterial.ts ***!
  15798. \****************************************/
  15799. /*! exports provided: FluentMaterialDefines, FluentMaterial */
  15800. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  15801. "use strict";
  15802. __webpack_require__.r(__webpack_exports__);
  15803. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return FluentMaterialDefines; });
  15804. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return FluentMaterial; });
  15805. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  15806. /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/perfCounter");
  15807. /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
  15808. /* harmony import */ var _shaders_fluent_vertex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shaders/fluent.vertex */ "./3D/materials/shaders/fluent.vertex.ts");
  15809. /* harmony import */ var _shaders_fluent_fragment__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shaders/fluent.fragment */ "./3D/materials/shaders/fluent.fragment.ts");
  15810. /** @hidden */
  15811. var FluentMaterialDefines = /** @class */ (function (_super) {
  15812. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FluentMaterialDefines, _super);
  15813. function FluentMaterialDefines() {
  15814. var _this = _super.call(this) || this;
  15815. _this.INNERGLOW = false;
  15816. _this.BORDER = false;
  15817. _this.HOVERLIGHT = false;
  15818. _this.TEXTURE = false;
  15819. _this.rebuild();
  15820. return _this;
  15821. }
  15822. return FluentMaterialDefines;
  15823. }(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["MaterialDefines"]));
  15824. /**
  15825. * Class used to render controls with fluent desgin
  15826. */
  15827. var FluentMaterial = /** @class */ (function (_super) {
  15828. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FluentMaterial, _super);
  15829. /**
  15830. * Creates a new Fluent material
  15831. * @param name defines the name of the material
  15832. * @param scene defines the hosting scene
  15833. */
  15834. function FluentMaterial(name, scene) {
  15835. var _this = _super.call(this, name, scene) || this;
  15836. /**
  15837. * Gets or sets inner glow intensity. A value of 0 means no glow (default is 0.5)
  15838. */
  15839. _this.innerGlowColorIntensity = 0.5;
  15840. /**
  15841. * Gets or sets the inner glow color (white by default)
  15842. */
  15843. _this.innerGlowColor = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Color3"](1.0, 1.0, 1.0);
  15844. /**
  15845. * Gets or sets alpha value (default is 1.0)
  15846. */
  15847. _this.alpha = 1.0;
  15848. /**
  15849. * Gets or sets the albedo color (Default is Color3(0.3, 0.35, 0.4))
  15850. */
  15851. _this.albedoColor = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Color3"](0.3, 0.35, 0.4);
  15852. /**
  15853. * Gets or sets a boolean indicating if borders must be rendered (default is false)
  15854. */
  15855. _this.renderBorders = false;
  15856. /**
  15857. * Gets or sets border width (default is 0.5)
  15858. */
  15859. _this.borderWidth = 0.5;
  15860. /**
  15861. * Gets or sets a value indicating the smoothing value applied to border edges (0.02 by default)
  15862. */
  15863. _this.edgeSmoothingValue = 0.02;
  15864. /**
  15865. * Gets or sets the minimum value that can be applied to border width (default is 0.1)
  15866. */
  15867. _this.borderMinValue = 0.1;
  15868. /**
  15869. * Gets or sets a boolean indicating if hover light must be rendered (default is false)
  15870. */
  15871. _this.renderHoverLight = false;
  15872. /**
  15873. * Gets or sets the radius used to render the hover light (default is 1.0)
  15874. */
  15875. _this.hoverRadius = 1.0;
  15876. /**
  15877. * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))
  15878. */
  15879. _this.hoverColor = new babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Color4"](0.3, 0.3, 0.3, 1.0);
  15880. /**
  15881. * Gets or sets the hover light position in world space (default is Vector3.Zero())
  15882. */
  15883. _this.hoverPosition = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero();
  15884. return _this;
  15885. }
  15886. FluentMaterial.prototype.needAlphaBlending = function () {
  15887. return this.alpha !== 1.0;
  15888. };
  15889. FluentMaterial.prototype.needAlphaTesting = function () {
  15890. return false;
  15891. };
  15892. FluentMaterial.prototype.getAlphaTestTexture = function () {
  15893. return null;
  15894. };
  15895. FluentMaterial.prototype.isReadyForSubMesh = function (mesh, subMesh, useInstances) {
  15896. if (this.isFrozen) {
  15897. if (subMesh.effect && subMesh.effect._wasPreviouslyReady) {
  15898. return true;
  15899. }
  15900. }
  15901. if (!subMesh._materialDefines) {
  15902. subMesh._materialDefines = new FluentMaterialDefines();
  15903. }
  15904. var scene = this.getScene();
  15905. var defines = subMesh._materialDefines;
  15906. if (!this.checkReadyOnEveryCall && subMesh.effect) {
  15907. if (defines._renderId === scene.getRenderId()) {
  15908. return true;
  15909. }
  15910. }
  15911. if (defines._areTexturesDirty) {
  15912. defines.INNERGLOW = this.innerGlowColorIntensity > 0;
  15913. defines.BORDER = this.renderBorders;
  15914. defines.HOVERLIGHT = this.renderHoverLight;
  15915. if (this._albedoTexture) {
  15916. if (!this._albedoTexture.isReadyOrNotBlocking()) {
  15917. return false;
  15918. }
  15919. else {
  15920. defines.TEXTURE = true;
  15921. }
  15922. }
  15923. else {
  15924. defines.TEXTURE = false;
  15925. }
  15926. }
  15927. var engine = scene.getEngine();
  15928. // Get correct effect
  15929. if (defines.isDirty) {
  15930. defines.markAsProcessed();
  15931. scene.resetCachedMaterial();
  15932. //Attributes
  15933. var attribs = [babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["VertexBuffer"].PositionKind];
  15934. attribs.push(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["VertexBuffer"].NormalKind);
  15935. attribs.push(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["VertexBuffer"].UVKind);
  15936. var shaderName = "fluent";
  15937. var uniforms = ["world", "viewProjection", "innerGlowColor", "albedoColor", "borderWidth", "edgeSmoothingValue", "scaleFactor", "borderMinValue",
  15938. "hoverColor", "hoverPosition", "hoverRadius"
  15939. ];
  15940. var samplers = ["albedoSampler"];
  15941. var uniformBuffers = new Array();
  15942. babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["MaterialHelper"].PrepareUniformsAndSamplersList({
  15943. uniformsNames: uniforms,
  15944. uniformBuffersNames: uniformBuffers,
  15945. samplers: samplers,
  15946. defines: defines,
  15947. maxSimultaneousLights: 4
  15948. });
  15949. var join = defines.toString();
  15950. subMesh.setEffect(scene.getEngine().createEffect(shaderName, {
  15951. attributes: attribs,
  15952. uniformsNames: uniforms,
  15953. uniformBuffersNames: uniformBuffers,
  15954. samplers: samplers,
  15955. defines: join,
  15956. fallbacks: null,
  15957. onCompiled: this.onCompiled,
  15958. onError: this.onError,
  15959. indexParameters: { maxSimultaneousLights: 4 }
  15960. }, engine));
  15961. }
  15962. if (!subMesh.effect || !subMesh.effect.isReady()) {
  15963. return false;
  15964. }
  15965. defines._renderId = scene.getRenderId();
  15966. subMesh.effect._wasPreviouslyReady = true;
  15967. return true;
  15968. };
  15969. FluentMaterial.prototype.bindForSubMesh = function (world, mesh, subMesh) {
  15970. var scene = this.getScene();
  15971. var defines = subMesh._materialDefines;
  15972. if (!defines) {
  15973. return;
  15974. }
  15975. var effect = subMesh.effect;
  15976. if (!effect) {
  15977. return;
  15978. }
  15979. this._activeEffect = effect;
  15980. // Matrices
  15981. this.bindOnlyWorldMatrix(world);
  15982. this._activeEffect.setMatrix("viewProjection", scene.getTransformMatrix());
  15983. if (this._mustRebind(scene, effect)) {
  15984. this._activeEffect.setColor4("albedoColor", this.albedoColor, this.alpha);
  15985. if (defines.INNERGLOW) {
  15986. this._activeEffect.setColor4("innerGlowColor", this.innerGlowColor, this.innerGlowColorIntensity);
  15987. }
  15988. if (defines.BORDER) {
  15989. this._activeEffect.setFloat("borderWidth", this.borderWidth);
  15990. this._activeEffect.setFloat("edgeSmoothingValue", this.edgeSmoothingValue);
  15991. this._activeEffect.setFloat("borderMinValue", this.borderMinValue);
  15992. mesh.getBoundingInfo().boundingBox.extendSize.multiplyToRef(mesh.scaling, babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0]);
  15993. this._activeEffect.setVector3("scaleFactor", babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["TmpVectors"].Vector3[0]);
  15994. }
  15995. if (defines.HOVERLIGHT) {
  15996. this._activeEffect.setDirectColor4("hoverColor", this.hoverColor);
  15997. this._activeEffect.setFloat("hoverRadius", this.hoverRadius);
  15998. this._activeEffect.setVector3("hoverPosition", this.hoverPosition);
  15999. }
  16000. if (defines.TEXTURE) {
  16001. this._activeEffect.setTexture("albedoSampler", this._albedoTexture);
  16002. }
  16003. }
  16004. this._afterBind(mesh, this._activeEffect);
  16005. };
  16006. FluentMaterial.prototype.getActiveTextures = function () {
  16007. var activeTextures = _super.prototype.getActiveTextures.call(this);
  16008. return activeTextures;
  16009. };
  16010. FluentMaterial.prototype.hasTexture = function (texture) {
  16011. if (_super.prototype.hasTexture.call(this, texture)) {
  16012. return true;
  16013. }
  16014. return false;
  16015. };
  16016. FluentMaterial.prototype.dispose = function (forceDisposeEffect) {
  16017. _super.prototype.dispose.call(this, forceDisposeEffect);
  16018. };
  16019. FluentMaterial.prototype.clone = function (name) {
  16020. var _this = this;
  16021. return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Clone(function () { return new FluentMaterial(name, _this.getScene()); }, this);
  16022. };
  16023. FluentMaterial.prototype.serialize = function () {
  16024. var serializationObject = babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Serialize(this);
  16025. serializationObject.customType = "BABYLON.GUI.FluentMaterial";
  16026. return serializationObject;
  16027. };
  16028. FluentMaterial.prototype.getClassName = function () {
  16029. return "FluentMaterial";
  16030. };
  16031. // Statics
  16032. FluentMaterial.Parse = function (source, scene, rootUrl) {
  16033. return babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["SerializationHelper"].Parse(function () { return new FluentMaterial(source.name, scene); }, source, scene, rootUrl);
  16034. };
  16035. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16036. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])(),
  16037. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesDirty")
  16038. ], FluentMaterial.prototype, "innerGlowColorIntensity", void 0);
  16039. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16040. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsColor3"])()
  16041. ], FluentMaterial.prototype, "innerGlowColor", void 0);
  16042. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16043. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16044. ], FluentMaterial.prototype, "alpha", void 0);
  16045. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16046. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsColor3"])()
  16047. ], FluentMaterial.prototype, "albedoColor", void 0);
  16048. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16049. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])(),
  16050. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesDirty")
  16051. ], FluentMaterial.prototype, "renderBorders", void 0);
  16052. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16053. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16054. ], FluentMaterial.prototype, "borderWidth", void 0);
  16055. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16056. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16057. ], FluentMaterial.prototype, "edgeSmoothingValue", void 0);
  16058. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16059. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16060. ], FluentMaterial.prototype, "borderMinValue", void 0);
  16061. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16062. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])(),
  16063. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesDirty")
  16064. ], FluentMaterial.prototype, "renderHoverLight", void 0);
  16065. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16066. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
  16067. ], FluentMaterial.prototype, "hoverRadius", void 0);
  16068. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16069. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsColor4"])()
  16070. ], FluentMaterial.prototype, "hoverColor", void 0);
  16071. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16072. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsVector3"])()
  16073. ], FluentMaterial.prototype, "hoverPosition", void 0);
  16074. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16075. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["serializeAsTexture"])("albedoTexture")
  16076. ], FluentMaterial.prototype, "_albedoTexture", void 0);
  16077. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
  16078. Object(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("_markAllSubMeshesAsTexturesAndMiscDirty")
  16079. ], FluentMaterial.prototype, "albedoTexture", void 0);
  16080. return FluentMaterial;
  16081. }(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["PushMaterial"]));
  16082. babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes["BABYLON.GUI.FluentMaterial"] = FluentMaterial;
  16083. /***/ }),
  16084. /***/ "./3D/materials/index.ts":
  16085. /*!*******************************!*\
  16086. !*** ./3D/materials/index.ts ***!
  16087. \*******************************/
  16088. /*! exports provided: FluentMaterialDefines, FluentMaterial */
  16089. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16090. "use strict";
  16091. __webpack_require__.r(__webpack_exports__);
  16092. /* harmony import */ var _fluentMaterial__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./fluentMaterial */ "./3D/materials/fluentMaterial.ts");
  16093. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _fluentMaterial__WEBPACK_IMPORTED_MODULE_0__["FluentMaterialDefines"]; });
  16094. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _fluentMaterial__WEBPACK_IMPORTED_MODULE_0__["FluentMaterial"]; });
  16095. /***/ }),
  16096. /***/ "./3D/materials/shaders/fluent.fragment.ts":
  16097. /*!*************************************************!*\
  16098. !*** ./3D/materials/shaders/fluent.fragment.ts ***!
  16099. \*************************************************/
  16100. /*! exports provided: fluentPixelShader */
  16101. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16102. "use strict";
  16103. __webpack_require__.r(__webpack_exports__);
  16104. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentPixelShader", function() { return fluentPixelShader; });
  16105. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
  16106. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
  16107. var name = 'fluentPixelShader';
  16108. 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}";
  16109. babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
  16110. /** @hidden */
  16111. var fluentPixelShader = { name: name, shader: shader };
  16112. /***/ }),
  16113. /***/ "./3D/materials/shaders/fluent.vertex.ts":
  16114. /*!***********************************************!*\
  16115. !*** ./3D/materials/shaders/fluent.vertex.ts ***!
  16116. \***********************************************/
  16117. /*! exports provided: fluentVertexShader */
  16118. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16119. "use strict";
  16120. __webpack_require__.r(__webpack_exports__);
  16121. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentVertexShader", function() { return fluentVertexShader; });
  16122. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
  16123. /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
  16124. var name = 'fluentVertexShader';
  16125. 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";
  16126. babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__["Effect"].ShadersStore[name] = shader;
  16127. /** @hidden */
  16128. var fluentVertexShader = { name: name, shader: shader };
  16129. /***/ }),
  16130. /***/ "./3D/vector3WithInfo.ts":
  16131. /*!*******************************!*\
  16132. !*** ./3D/vector3WithInfo.ts ***!
  16133. \*******************************/
  16134. /*! exports provided: Vector3WithInfo */
  16135. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16136. "use strict";
  16137. __webpack_require__.r(__webpack_exports__);
  16138. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return Vector3WithInfo; });
  16139. /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
  16140. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
  16141. /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
  16142. /**
  16143. * Class used to transport Vector3 information for pointer events
  16144. */
  16145. var Vector3WithInfo = /** @class */ (function (_super) {
  16146. Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Vector3WithInfo, _super);
  16147. /**
  16148. * Creates a new Vector3WithInfo
  16149. * @param source defines the vector3 data to transport
  16150. * @param buttonIndex defines the current mouse button index
  16151. */
  16152. function Vector3WithInfo(source,
  16153. /** defines the current mouse button index */
  16154. buttonIndex) {
  16155. if (buttonIndex === void 0) { buttonIndex = 0; }
  16156. var _this = _super.call(this, source.x, source.y, source.z) || this;
  16157. _this.buttonIndex = buttonIndex;
  16158. return _this;
  16159. }
  16160. return Vector3WithInfo;
  16161. }(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"]));
  16162. /***/ }),
  16163. /***/ "./index.ts":
  16164. /*!******************!*\
  16165. !*** ./index.ts ***!
  16166. \******************/
  16167. /*! exports provided: AdvancedDynamicTexture, AdvancedDynamicTextureInstrumentation, Vector2WithInfo, Matrix2D, Measure, MultiLinePoint, Style, ValueAndUnit, XmlLoader, GUI3DManager, Vector3WithInfo, Button, Checkbox, ColorPicker, Container, Control, Ellipse, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name, AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel, FluentMaterialDefines, FluentMaterial */
  16168. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16169. "use strict";
  16170. __webpack_require__.r(__webpack_exports__);
  16171. /* harmony import */ var _2D__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./2D */ "./2D/index.ts");
  16172. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTexture"]; });
  16173. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTextureInstrumentation"]; });
  16174. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Vector2WithInfo"]; });
  16175. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"]; });
  16176. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Measure"]; });
  16177. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["MultiLinePoint"]; });
  16178. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Style"]; });
  16179. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ValueAndUnit"]; });
  16180. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["XmlLoader"]; });
  16181. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  16182. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Checkbox"]; });
  16183. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ColorPicker"]; });
  16184. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Container"]; });
  16185. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Control"]; });
  16186. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Ellipse"]; });
  16187. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Grid"]; });
  16188. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Image"]; });
  16189. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["InputText"]; });
  16190. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["InputPassword"]; });
  16191. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Line"]; });
  16192. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["MultiLine"]; });
  16193. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["RadioButton"]; });
  16194. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["StackPanel"]; });
  16195. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["SelectorGroup"]; });
  16196. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["CheckboxGroup"]; });
  16197. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["RadioGroup"]; });
  16198. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["SliderGroup"]; });
  16199. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["SelectionPanel"]; });
  16200. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ScrollViewer"]; });
  16201. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["TextWrapping"]; });
  16202. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["TextBlock"]; });
  16203. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["KeyPropertySet"]; });
  16204. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["VirtualKeyboard"]; });
  16205. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Rectangle"]; });
  16206. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["DisplayGrid"]; });
  16207. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["BaseSlider"]; });
  16208. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["Slider"]; });
  16209. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ImageBasedSlider"]; });
  16210. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ScrollBar"]; });
  16211. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["ImageScrollBar"]; });
  16212. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _2D__WEBPACK_IMPORTED_MODULE_0__["name"]; });
  16213. /* harmony import */ var _3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./3D */ "./3D/index.ts");
  16214. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["GUI3DManager"]; });
  16215. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Vector3WithInfo"]; });
  16216. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["AbstractButton3D"]; });
  16217. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Button3D"]; });
  16218. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Container3D"]; });
  16219. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["Control3D"]; });
  16220. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["CylinderPanel"]; });
  16221. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["HolographicButton"]; });
  16222. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["MeshButton3D"]; });
  16223. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["PlanePanel"]; });
  16224. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["ScatterPanel"]; });
  16225. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["SpherePanel"]; });
  16226. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["StackPanel3D"]; });
  16227. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["VolumeBasedPanel"]; });
  16228. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["FluentMaterialDefines"]; });
  16229. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _3D__WEBPACK_IMPORTED_MODULE_1__["FluentMaterial"]; });
  16230. /***/ }),
  16231. /***/ "./legacy/legacy.ts":
  16232. /*!**************************!*\
  16233. !*** ./legacy/legacy.ts ***!
  16234. \**************************/
  16235. /*! exports provided: AdvancedDynamicTexture, AdvancedDynamicTextureInstrumentation, Vector2WithInfo, Matrix2D, Measure, MultiLinePoint, Style, ValueAndUnit, XmlLoader, GUI3DManager, Vector3WithInfo, Button, Checkbox, ColorPicker, Container, Control, Ellipse, Grid, Image, InputText, InputPassword, Line, MultiLine, RadioButton, StackPanel, SelectorGroup, CheckboxGroup, RadioGroup, SliderGroup, SelectionPanel, ScrollViewer, TextWrapping, TextBlock, KeyPropertySet, VirtualKeyboard, Rectangle, DisplayGrid, BaseSlider, Slider, ImageBasedSlider, ScrollBar, ImageScrollBar, name, AbstractButton3D, Button3D, Container3D, Control3D, CylinderPanel, HolographicButton, MeshButton3D, PlanePanel, ScatterPanel, SpherePanel, StackPanel3D, VolumeBasedPanel, FluentMaterialDefines, FluentMaterial */
  16236. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  16237. "use strict";
  16238. __webpack_require__.r(__webpack_exports__);
  16239. /* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index */ "./index.ts");
  16240. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTexture"]; });
  16241. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["AdvancedDynamicTextureInstrumentation"]; });
  16242. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Vector2WithInfo"]; });
  16243. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"]; });
  16244. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Measure"]; });
  16245. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["MultiLinePoint"]; });
  16246. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Style"]; });
  16247. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ValueAndUnit", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ValueAndUnit"]; });
  16248. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["XmlLoader"]; });
  16249. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["GUI3DManager"]; });
  16250. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Vector3WithInfo"]; });
  16251. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Button"]; });
  16252. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Checkbox"]; });
  16253. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ColorPicker"]; });
  16254. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Container"]; });
  16255. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Control"]; });
  16256. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Ellipse", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Ellipse"]; });
  16257. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Grid", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Grid"]; });
  16258. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Image"]; });
  16259. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["InputText"]; });
  16260. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["InputPassword"]; });
  16261. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Line"]; });
  16262. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["MultiLine"]; });
  16263. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["RadioButton"]; });
  16264. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["StackPanel"]; });
  16265. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectorGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SelectorGroup"]; });
  16266. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["CheckboxGroup"]; });
  16267. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["RadioGroup"]; });
  16268. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SliderGroup", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SliderGroup"]; });
  16269. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SelectionPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SelectionPanel"]; });
  16270. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ScrollViewer"]; });
  16271. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["TextWrapping"]; });
  16272. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["TextBlock"]; });
  16273. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["KeyPropertySet"]; });
  16274. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["VirtualKeyboard"]; });
  16275. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Rectangle"]; });
  16276. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["DisplayGrid"]; });
  16277. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["BaseSlider"]; });
  16278. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Slider"]; });
  16279. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageBasedSlider", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ImageBasedSlider"]; });
  16280. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollBar", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ScrollBar"]; });
  16281. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageScrollBar", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ImageScrollBar"]; });
  16282. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "name", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["name"]; });
  16283. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["AbstractButton3D"]; });
  16284. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Button3D"]; });
  16285. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Container3D"]; });
  16286. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["Control3D"]; });
  16287. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["CylinderPanel"]; });
  16288. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["HolographicButton"]; });
  16289. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "MeshButton3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["MeshButton3D"]; });
  16290. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["PlanePanel"]; });
  16291. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["ScatterPanel"]; });
  16292. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["SpherePanel"]; });
  16293. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["StackPanel3D"]; });
  16294. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["VolumeBasedPanel"]; });
  16295. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["FluentMaterialDefines"]; });
  16296. /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return _index__WEBPACK_IMPORTED_MODULE_0__["FluentMaterial"]; });
  16297. /**
  16298. * Legacy support, defining window.BABYLON.GUI (global variable).
  16299. *
  16300. * This is the entry point for the UMD module.
  16301. * The entry point for a future ESM package should be index.ts
  16302. */
  16303. var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : undefined);
  16304. if (typeof globalObject !== "undefined") {
  16305. globalObject.BABYLON = globalObject.BABYLON || {};
  16306. globalObject.BABYLON.GUI = _index__WEBPACK_IMPORTED_MODULE_0__;
  16307. }
  16308. /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../node_modules/webpack/buildin/global.js */ "../../node_modules/webpack/buildin/global.js")))
  16309. /***/ }),
  16310. /***/ "babylonjs/Misc/perfCounter":
  16311. /*!****************************************************************************************************!*\
  16312. !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
  16313. \****************************************************************************************************/
  16314. /*! no static exports found */
  16315. /***/ (function(module, exports) {
  16316. module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_perfCounter__;
  16317. /***/ })
  16318. /******/ });
  16319. });
  16320. //# sourceMappingURL=babylon.gui.js.map