editor-new.js 183 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167
  1. "use strict";
  2. /*
  3. The MIT License (MIT)
  4. Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  5. Virtual World Framework Apache 2.0 license (https://github.com/NikolaySuslov/livecodingspace/blob/master/licenses/LICENSE_VWF.md)
  6. */
  7. //
  8. /// vwf/view/editor creates a view interface for editor functions.
  9. ///
  10. /// @module vwf/view/editor
  11. /// @requires version
  12. /// @requires vwf/view
  13. /// @requires vwf/utility
  14. define([
  15. "module",
  16. "version",
  17. "vwf/view",
  18. "vwf/utility",
  19. "vwf/view/lib/colorpicker/colorpicker.min"
  20. ], function (module, version, view, utility, colorpicker) {
  21. var self;
  22. return view.load(module, {
  23. // == Module Definition ====================================================================
  24. initialize: function () {
  25. self = this;
  26. this.ace = window.ace;
  27. this.widgets = window._cellWidgets; //widgets;
  28. this.lang = _LangManager.language;
  29. this.helpers = _app.helpers;
  30. this.nodes = {};
  31. this.scenes = {};
  32. this.allScripts = {};
  33. //$(document.head).append('<style type="text/css" media="screen"> #editorlive { height: 500px; width: 800px; } </style>');
  34. document.querySelector('head').innerHTML += '<style type="text/css" media="screen"> #editorlive { height: 500px; width: 800px; } </style>';
  35. document.querySelector('head').innerHTML += '<link rel="stylesheet" href="/vwf/view/lib/editorLive.css">';
  36. //document.querySelector('head').innerHTML += '<script type="text/javascript" src="vwf/view/lib/colorpicker/colorpicker.min.js">';
  37. document.querySelector('head').innerHTML += '<link rel="stylesheet" href="/vwf/view/lib/colorpicker/themes.css">';
  38. //$(document.head).append('<meta name="viewport" content="width=device-width, initial-scale=1">');
  39. document.querySelector('head').innerHTML += '<meta name="viewport" content="width=device-width, initial-scale=1">';
  40. // $('body').append('<script>mdc.autoInit()</script>');
  41. ["drawer", "toolbar", "sideBar", "propWindow", "clientsWindow", "codeEditorWindow", "propEditorWindow", "viewSceneProps"].forEach(item => {
  42. let el = document.createElement("div");
  43. el.setAttribute("id", item);
  44. document.body.appendChild(el);
  45. }
  46. );
  47. this.avatarCardDef = function (src, desc, onclickfunc) {
  48. return {
  49. $cell: true,
  50. $type: "div",
  51. class: "mdc-card avatar-card",
  52. $init: function () {
  53. this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0) ), url(' + src + ')'
  54. },
  55. onclick: onclickfunc,
  56. $components: [
  57. {
  58. $type: "section",
  59. class: "mdc-card__primary",
  60. style: "padding: 1rem;",
  61. $components: [
  62. {
  63. $type: "h1",
  64. class: "mdc-card__title mdc-typography--title",
  65. $text: desc.subtitle
  66. },
  67. {
  68. $type: "h2",
  69. class: "mdc-typography--subheading1",
  70. $text: desc.title
  71. }
  72. ]
  73. },
  74. {
  75. $type: "section",
  76. class: "mdc-card__actions",
  77. $components: [
  78. {
  79. $type: "button",
  80. class: "mdc-button mdc-button--compact mdc-card__action",
  81. //$text: "Use it",
  82. onclick: onclickfunc
  83. }
  84. ]
  85. }
  86. ]
  87. }
  88. }
  89. let createSettings =
  90. {
  91. $cell: true,
  92. $type: "div",
  93. class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
  94. $components: [
  95. {
  96. $type: "section",
  97. $components: [
  98. {
  99. $type: "h3",
  100. class: "mdc-typography--title",
  101. $text: "Primitives"
  102. },
  103. {
  104. $type: "div",
  105. class: "mdc-grid-list",
  106. $components: [
  107. {
  108. $type: "ul",
  109. class: "mdc-grid-list__tiles",
  110. $components: make3DPrimitiveList()
  111. }
  112. ]
  113. },
  114. //widgets.divider,
  115. {
  116. $type: "h3",
  117. $text: "Lights",
  118. class: "mdc-typography--title"
  119. },
  120. {
  121. $type: "div",
  122. class: "mdc-grid-list",
  123. $components: [
  124. {
  125. $type: "ul",
  126. class: "mdc-grid-list__tiles",
  127. $components: makeLightsList()
  128. }
  129. ]
  130. },
  131. //widgets.divider,
  132. {
  133. $type: "h3",
  134. class: "mdc-typography--title",
  135. $text: "Objects"
  136. },
  137. {
  138. $type: "div",
  139. class: "mdc-grid-list",
  140. $components: [
  141. {
  142. $type: "ul",
  143. class: "mdc-grid-list__tiles",
  144. $components: [
  145. self.widgets.gridListItem({
  146. imgSrc: "/vwf/view/lib/images/ui/icons/camera.png",
  147. title: 'Camera',
  148. styleClass: "createListItem",
  149. onclickfunc: function () {
  150. let avatarID = 'avatar-' + vwf.moniker_;
  151. //let cubeName = self.GUID();
  152. vwf_view.kernel.callMethod(vwf.application(), "createCamera", [null, null, avatarID])
  153. //let cubeName = self.GUID();
  154. // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
  155. }
  156. }),
  157. self.widgets.gridListItem({
  158. imgSrc: "/vwf/view/lib/images/ui/icons/camera_offset.png",
  159. title: 'Camera with view offset',
  160. styleClass: "createListItem",
  161. onclickfunc: function () {
  162. let avatarID = 'avatar-' + vwf.moniker_;
  163. //let cubeName = self.GUID();
  164. vwf_view.kernel.callMethod(vwf.application(), "createCameraWithOffset", [null, null, avatarID])
  165. //let cubeName = self.GUID();
  166. // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
  167. }
  168. })
  169. ]
  170. }
  171. ]
  172. },
  173. //self.widgets.divider,
  174. {
  175. $type: "h3",
  176. class: "mdc-typography--title",
  177. $text: "Assets"
  178. },
  179. self.widgets.inputTextFieldOutlined({
  180. "id": 'assetsrc',
  181. "label": "Enter URL to asset source",
  182. "value": '',
  183. "change": function (e) {
  184. console.log(this.value)
  185. }
  186. }),
  187. // self.widgets.textField({
  188. // id: "assetsrc",
  189. // value: "Enter URL to asset source",
  190. // funconchange: function (e) {
  191. // console.log(this.value)
  192. // }
  193. // }),
  194. {
  195. $type: "div",
  196. class: "mdc-grid-list",
  197. $components: [
  198. {
  199. $type: "ul",
  200. class: "mdc-grid-list__tiles",
  201. $components: [
  202. self.widgets.buttonSimple(
  203. {
  204. label: "Image",
  205. onclick: function (e) {
  206. let srcEl = document.querySelector('#assetsrc');
  207. let avatarID = 'avatar-' + vwf.moniker_;
  208. vwf_view.kernel.callMethod(vwf.application(), "createImage", [srcEl.value, null, null, avatarID])
  209. }
  210. }
  211. ),
  212. self.widgets.buttonSimple(
  213. {
  214. label: "Sound",
  215. onclick: function (e) {
  216. let srcEl = document.querySelector('#assetsrc');
  217. let avatarID = 'avatar-' + vwf.moniker_;
  218. vwf_view.kernel.callMethod(vwf.application(), "createAudio", [srcEl.value, null, null, avatarID])
  219. }
  220. }
  221. ),
  222. self.widgets.buttonSimple(
  223. {
  224. label: "Video",
  225. onclick: function (e) {
  226. let srcEl = document.querySelector('#assetsrc');
  227. let avatarID = 'avatar-' + vwf.moniker_;
  228. vwf_view.kernel.callMethod(vwf.application(), "createVideo", [srcEl.value, null, null, avatarID])
  229. }
  230. }
  231. ),
  232. self.widgets.buttonSimple(
  233. {
  234. label: "GLTF",
  235. onclick: function (e) {
  236. let srcEl = document.querySelector('#assetsrc');
  237. let avatarID = 'avatar-' + vwf.moniker_;
  238. if (srcEl.value.includes('.gltf'))
  239. vwf_view.kernel.callMethod(vwf.application(), "createModel", ['GLTF', srcEl.value, avatarID])
  240. }
  241. }
  242. ),
  243. self.widgets.buttonSimple(
  244. {
  245. label: "DAE",
  246. onclick: function (e) {
  247. let srcEl = document.querySelector('#assetsrc');
  248. let avatarID = 'avatar-' + vwf.moniker_;
  249. if (srcEl.value.includes('.dae'))
  250. vwf_view.kernel.callMethod(vwf.application(), "createModel", ['DAE', srcEl.value, avatarID])
  251. }
  252. }
  253. ),
  254. self.widgets.buttonSimple(
  255. {
  256. label: "OBJ",
  257. onclick: function (e) {
  258. let srcEl = document.querySelector('#assetsrc');
  259. let avatarID = 'avatar-' + vwf.moniker_;
  260. if (srcEl.value.includes('.obj'))
  261. vwf_view.kernel.callMethod(vwf.application(), "createModel", ['OBJ', srcEl.value, avatarID])
  262. }
  263. }
  264. )
  265. ]
  266. }
  267. ]
  268. },
  269. //self.widgets.divider,
  270. {
  271. $type: "h3",
  272. class: "mdc-typography--title",
  273. $text: "Resources"
  274. },
  275. {
  276. $type: "div",
  277. class: "mdc-grid-list",
  278. $components: [
  279. {
  280. $type: "ul",
  281. class: "mdc-grid-list__tiles",
  282. $components: [
  283. self.widgets.gridListItem({
  284. imgSrc: "/vwf/view/lib/images/ui/icons/3ditem.png",
  285. title: 'Asset item',
  286. styleClass: "createListItem",
  287. onclickfunc: function () {
  288. let srcEl = document.querySelector('#assetsrc');
  289. vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['ITEM', srcEl.value])
  290. }
  291. }),
  292. self.widgets.gridListItem({
  293. imgSrc: "/vwf/view/lib/images/ui/icons/image.png",
  294. title: 'Image',
  295. styleClass: "createListItem",
  296. onclickfunc: function () {
  297. //let cubeName = self.GUID();
  298. let srcEl = document.querySelector('#assetsrc');
  299. vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['IMG', srcEl.value])
  300. }
  301. }),
  302. self.widgets.gridListItem({
  303. imgSrc: "/vwf/view/lib/images/ui/icons/video.png",
  304. title: 'Video',
  305. styleClass: "createListItem",
  306. onclickfunc: function () {
  307. let srcEl = document.querySelector('#assetsrc');
  308. vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['VIDEO', srcEl.value])
  309. }
  310. }),
  311. self.widgets.gridListItem({
  312. imgSrc: "/vwf/view/lib/images/ui/icons/sound.png",
  313. title: 'Sound',
  314. styleClass: "createListItem",
  315. onclickfunc: function () {
  316. let srcEl = document.querySelector('#assetsrc');
  317. vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['AUDIO', srcEl.value])
  318. }
  319. }),
  320. self.widgets.buttonSimple(
  321. {
  322. label: "MTL",
  323. onclick: function (e) {
  324. let srcEl = document.querySelector('#assetsrc');
  325. if (srcEl.value.includes('.mtl'))
  326. vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['ITEM', srcEl.value])
  327. }
  328. }
  329. )
  330. ]
  331. }
  332. ]
  333. },
  334. {
  335. $type: "h3",
  336. class: "mdc-typography--title",
  337. $text: "Google Poly"
  338. },
  339. self.widgets.inputTextFieldOutlined({
  340. "id": 'googlepolyid',
  341. "label": "Enter Google Poly model ID",
  342. "value": '',
  343. "change": function (e) {
  344. console.log(this.value)
  345. }
  346. }),
  347. // self.widgets.textField({
  348. // id: "googlepolyid",
  349. // value: "Enter Google Poly model ID",
  350. // funconchange: function (e) {
  351. // console.log(this.value)
  352. // }
  353. // }),
  354. self.widgets.buttonSimple(
  355. {
  356. label: "Load Model from Poly",
  357. onclick: function (e) {
  358. let srcEl = document.querySelector('#googlepolyid');
  359. let avatarID = 'avatar-' + vwf.moniker_;
  360. vwf_view.kernel.callMethod(vwf.application(), "createGooglePoly", [srcEl.value, null, null, avatarID])
  361. }
  362. }
  363. )
  364. ]
  365. }
  366. ]
  367. }
  368. function getUniqueDisplayName(newname, addcount) {
  369. if (!addcount) addcount = 0;
  370. if (!newname) newname = 'Object';
  371. newname = newname.replace(/[0-9]*$/g, "");
  372. var nodes = self.nodes; //vwf.models.object.objects;
  373. var count = 1 + addcount;
  374. for (var i in nodes) {
  375. if (nodes[i].id !== 0) {
  376. if (nodes[i].id !== "" && nodes[i].properties.length !== 0) {
  377. let thisname = vwf.getProperty(nodes[i].ID, 'displayName') || '';
  378. console.log(thisname);
  379. if (thisname.replace(/[0-9]*$/g, "") == newname)
  380. count++;
  381. }
  382. }
  383. }
  384. return newname + count;
  385. }
  386. function make3DPrimitiveList() {
  387. let nodeNames = ['Plane', 'Cube', 'Sphere', 'Cylinder', 'Cone', 'Text'];
  388. return nodeNames.map(el => {
  389. return self.widgets.gridListItem({
  390. imgSrc: "/vwf/view/lib/images/ui/icons/" + el.toLowerCase() + ".png",
  391. styleClass: "createListItem",
  392. title: el,
  393. onclickfunc: function () {
  394. let avatarID = 'avatar-' + vwf.moniker_;
  395. //let cubeName = self.GUID();
  396. let displayName = getUniqueDisplayName.call(self, el.toLowerCase());
  397. vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", [el.toLowerCase(), null, displayName, null, avatarID])
  398. }
  399. })
  400. })
  401. }
  402. function makeLightsList() {
  403. let nodeNames = ['Ambient', 'Directional', 'Hemisphere', 'Point', 'Spot'];
  404. return nodeNames.map(el => {
  405. return self.widgets.gridListItem({
  406. styleClass: "createListItem",
  407. imgSrc: "/vwf/view/lib/images/ui/icons/light_" + el.toLowerCase() + ".png",
  408. title: el,
  409. onclickfunc: function () {
  410. let avatarID = 'avatar-' + vwf.moniker_;
  411. //let cubeName = self.GUID();
  412. let displayName = getUniqueDisplayName.call(self, el.toLowerCase());
  413. vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", ["light", el.toLowerCase(), displayName, null, avatarID])
  414. }
  415. })
  416. })
  417. }
  418. let saveAvatar = {};
  419. if (_LCSUSER.is) {
  420. saveAvatar = self.widgets.floatActionButton({
  421. label: "save",
  422. styleClass: "mdc-fab--mini",
  423. onclickfunc: function () {
  424. //var nodeID = document.querySelector('#currentNode')._currentNode;
  425. let nodeID = 'avatar-' + self.kernel.moniker();
  426. let node = self.nodes[nodeID];
  427. let nodeDef = self.helpers.getNodeDef(nodeID).children.avatarNode;
  428. console.log(nodeDef);
  429. _LCSUSER.get('profile').get('avatarNode').put(JSON.stringify(nodeDef), acc => {
  430. console.log("saved: " + acc)
  431. });
  432. //vwf_view.kernel.deleteChild(node.parentID, node.name);
  433. //vwf_view.kernel.deleteNode(nodeID);
  434. //vwf_view.kernel.callMethod(node.parentID, "deleteNode", [node.name])
  435. }
  436. })
  437. }
  438. let avatarSettings =
  439. {
  440. $cell: true,
  441. $type: "div",
  442. class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
  443. $components: [
  444. {
  445. $type: "div",
  446. class: "mdc-layout-grid__inner",
  447. $components: [
  448. {
  449. $type: "div",
  450. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  451. $components: [
  452. self.widgets.buttonStroked(
  453. {
  454. "label": "Go forward",
  455. "onclick": function (e) {
  456. function getMovementVector(el) {
  457. var directionVector = new THREE.Vector3(0, 0, 0);
  458. var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');
  459. var rotation = el.getAttribute('rotation');
  460. var velocity = new THREE.Vector3(0, 0, -0.5);
  461. var xRotation;
  462. directionVector.copy(velocity);
  463. directionVector.multiplyScalar(1.0);
  464. // Absolute.
  465. if (!rotation) { return directionVector; }
  466. xRotation = 0;
  467. // Transform direction relative to heading.
  468. rotationEuler.set(THREE.Math.degToRad(xRotation), THREE.Math.degToRad(rotation.y), 0);
  469. directionVector.applyEuler(rotationEuler);
  470. return directionVector;
  471. }
  472. let el = document.querySelector('#avatarControl');
  473. let currentPosition = el.getAttribute('position');
  474. let movementVector = getMovementVector(el);
  475. let position = {};
  476. position.x = currentPosition.x + movementVector.x;
  477. position.y = currentPosition.y + movementVector.y;
  478. position.z = currentPosition.z + movementVector.z;
  479. el.setAttribute('position', position);
  480. }
  481. }),
  482. self.widgets.divider
  483. ]
  484. },
  485. {
  486. $type: "div",
  487. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  488. $components: [
  489. saveAvatar,
  490. self.widgets.divider,
  491. self.widgets.buttonStroked(
  492. {
  493. "label": "Reset camera view",
  494. "onclick": function (e) {
  495. //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
  496. let controlEl = document.querySelector('#avatarControl');
  497. controlEl.setAttribute('camera', 'active', true);
  498. }
  499. }),
  500. self.widgets.buttonStroked(
  501. {
  502. "label": "Hide cursor",
  503. "onclick": function (e) {
  504. //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
  505. let avatarID = 'avatar-' + self.kernel.moniker();
  506. let cursorID = 'myCursor-' + avatarID;
  507. let controlEl = document.querySelector("[id='" + cursorID + "']");
  508. let vis = controlEl.getAttribute('visible');
  509. this.$text = vis ? 'Show cursor' : 'Hide cursor';
  510. vwf_view.kernel.callMethod(avatarID, "showHideCursor", [!vis]);
  511. //controlEl.setAttribute('visible', !vis);
  512. }
  513. }),
  514. self.widgets.buttonStroked(
  515. {
  516. "label": "Hide Avatar",
  517. "onclick": function (e) {
  518. //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
  519. let avatarID = 'avatar-' + self.kernel.moniker();
  520. //let cursorID = 'myCursor-' + avatarID;
  521. let controlEl = document.querySelector("[id='" + avatarID + "']");
  522. let vis = controlEl.getAttribute('visible');
  523. this.$text = vis ? 'Show Avatar' : 'Show Avatar';
  524. vwf_view.kernel.callMethod(avatarID, "showHideAvatar", [!vis]);
  525. //controlEl.setAttribute('visible', !vis);
  526. }
  527. }
  528. )
  529. ]
  530. },
  531. {
  532. $type: "div",
  533. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  534. $components: [
  535. {
  536. $type: "div",
  537. class: "mdc-layout-grid",
  538. $components: [
  539. {
  540. $type: "div",
  541. class: "mdc-layout-grid__inner",
  542. $components: [
  543. {
  544. $type: "div",
  545. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  546. $components: [
  547. self.avatarCardDef("/defaults/assets/avatars/ico/simple.jpg", { title: "Simple", subtitle: "Cube" },
  548. function (e) {
  549. let avatarID = 'avatar-' + self.kernel.moniker();
  550. vwf_view.kernel.callMethod(avatarID, "createSimpleAvatar");
  551. }
  552. )
  553. ]
  554. },
  555. {
  556. $type: "div",
  557. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  558. $components: [
  559. self.avatarCardDef("/defaults/assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
  560. function (e) {
  561. let avatarID = 'avatar-' + self.kernel.moniker();
  562. vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/defaults/assets/avatars/female/avatar1.gltf"]);
  563. }
  564. )]
  565. },
  566. {
  567. $type: "div",
  568. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  569. $components: [
  570. self.avatarCardDef("/defaults/assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
  571. function (e) {
  572. let avatarID = 'avatar-' + self.kernel.moniker();
  573. vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/defaults/assets/avatars/male/avatar1.gltf"]);
  574. }
  575. )]
  576. }
  577. ]
  578. }
  579. ]
  580. }
  581. ]
  582. },
  583. {
  584. $type: "div",
  585. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  586. $components: [
  587. self.widgets.buttonStroked(
  588. {
  589. "label": "Wide",
  590. "onclick": function (e) {
  591. let avatarID = 'avatar-' + vwf.moniker_;
  592. vwf_view.kernel.callMethod(avatarID, "setBigVideoHead", []);
  593. }
  594. }),
  595. self.widgets.buttonStroked(
  596. {
  597. "label": "Small",
  598. "onclick": function (e) {
  599. let avatarID = 'avatar-' + vwf.moniker_;
  600. vwf_view.kernel.callMethod(avatarID, "setSmallVideoHead", []);
  601. }
  602. })
  603. ]
  604. }
  605. ]
  606. }
  607. ]
  608. }
  609. let viewSettings =
  610. {
  611. $cell: true,
  612. $type: "div",
  613. class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
  614. $components: [
  615. {
  616. $type: "div",
  617. class: "mdc-layout-grid__inner",
  618. $components: [
  619. {
  620. $type: "div",
  621. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  622. $components: [
  623. self.widgets.buttonStroked(
  624. {
  625. "label": "OSC Settings",
  626. "onclick": function (e) {
  627. let sideBar = document.querySelector('#sideBar');
  628. sideBar._sideBarComponent = oscSettings;
  629. //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
  630. }
  631. })
  632. ]
  633. }
  634. ]
  635. }
  636. ]
  637. }
  638. let savedStateEl = function (item) {
  639. return {
  640. $type: "li",
  641. class: "mdc-list-item",
  642. role: "option",
  643. $components: [
  644. {
  645. $text: "Saved world"
  646. }
  647. ]
  648. }
  649. }
  650. let stateListElement = function (item) {
  651. let liEl = {
  652. $type: "option",
  653. id: "",
  654. applicationpath: "",
  655. value: "no_saves",
  656. $components: [
  657. {
  658. $text: "no saves"
  659. }
  660. ]
  661. }
  662. let applicationName = item.applicationpath.split("/");
  663. if (applicationName == "") {
  664. return liEl
  665. }
  666. if (applicationName.length > 0) {
  667. applicationName = applicationName[applicationName.length - 1];
  668. }
  669. if (applicationName.length > 0) {
  670. applicationName = applicationName.charAt(0).toUpperCase() + applicationName.slice(1);
  671. }
  672. if (item.latestsave) {
  673. liEl = {
  674. $type: "option",
  675. id: item.savename,
  676. value: item.savename,
  677. applicationpath: item.applicationpath,
  678. $components: [
  679. {
  680. $text: applicationName + ": " + item.savename
  681. }
  682. ]
  683. }
  684. }
  685. else {
  686. liEl = {
  687. $type: "option",
  688. id: item.savename,
  689. value: item.savename,
  690. revision: item.revision,
  691. applicationpath: item.applicationpath,
  692. $components: [
  693. {
  694. $text: applicationName + ": " + item.savename + " Rev(" + item.revision + ")"
  695. }
  696. ]
  697. }
  698. }
  699. return liEl
  700. }
  701. let oscSettings =
  702. {
  703. $cell: true,
  704. $type: "div",
  705. id: "oscSettings",
  706. class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
  707. _oscHost: '',
  708. _oscPort: '',
  709. _oscStatus: '',
  710. _updateStatus: function () {
  711. this._oscStatus = window._OSCManager.getStatus()
  712. },
  713. $init: function () {
  714. if (window._OSCManager) {
  715. this._oscHost = window._OSCManager.hostValue;
  716. this._oscPort = window._OSCManager.portValue;
  717. this._oscStatus = window._OSCManager.getStatus();
  718. // var t = this;
  719. // setInterval(function () {
  720. // t._updateStatus();
  721. // }, 1000);
  722. }
  723. },
  724. $update: function () {
  725. let that = this
  726. var buttonText = "Connect";
  727. var buttonFunc = function (e) {
  728. }
  729. if (this._oscStatus == 1) {
  730. buttonText = "Disconnect";
  731. buttonFunc = function (e) {
  732. window._OSCManager.disconnect();
  733. }
  734. } else {
  735. var buttonFunc = function (e) {
  736. window._OSCManager.connect();
  737. window._OSCManager.port.on("open", function () {
  738. that._oscStatus = window._OSCManager.getStatus();
  739. console.log("connected");
  740. });
  741. window._OSCManager.port.on("close", function () {
  742. that._oscStatus = window._OSCManager.getStatus();
  743. console.log("disconnected");
  744. });
  745. }
  746. }
  747. this.$components = [
  748. {
  749. $type: "div",
  750. class: "mdc-layout-grid__inner",
  751. $components: [
  752. {
  753. $type: "div",
  754. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  755. $components: [
  756. self.widgets.inputTextFieldOutlined({
  757. "id": 'oscHostInput',
  758. "label": "Host",
  759. "value": this._oscHost,
  760. "change": function (e) {
  761. this._oscHost = this.value;
  762. window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
  763. }
  764. })
  765. // {
  766. // $type: "span",
  767. // $text: "Host: "
  768. // },
  769. // {
  770. // class: "mdc-text-field",
  771. // $type: "span",
  772. // $components: [
  773. // {
  774. // class: "mdc-text-field__input prop-text-field-input",
  775. // id: "oscHost",
  776. // $type: "input",
  777. // type: "text",
  778. // value: this._oscHost,
  779. // onchange: function (e) {
  780. // this._oscHost = this.value;
  781. // window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
  782. // }
  783. // }
  784. // ]
  785. // }
  786. ]
  787. },
  788. {
  789. $type: "div",
  790. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  791. $components: [
  792. self.widgets.inputTextFieldOutlined({
  793. "id": 'oscPortInput',
  794. "label": "Port",
  795. "value": this._oscPort,
  796. "change": function (e) {
  797. this._oscPort = this.value;
  798. window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
  799. }
  800. })
  801. // {
  802. // $type: "span",
  803. // $text: "Port: "
  804. // },
  805. // {
  806. // class: "mdc-text-field",
  807. // $type: "span",
  808. // $components: [
  809. // {
  810. // class: "mdc-text-field__input prop-text-field-input",
  811. // id: "oscPort",
  812. // $type: "input",
  813. // type: "text",
  814. // value: this._oscPort,
  815. // onchange: function (e) {
  816. // this._oscPort = this.value;
  817. // window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
  818. // }
  819. // }
  820. // ]
  821. // }
  822. ]
  823. },
  824. {
  825. $type: "div",
  826. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  827. $components: [
  828. self.widgets.buttonStroked(
  829. {
  830. "label": buttonText,
  831. "onclick": buttonFunc
  832. })
  833. ]
  834. }
  835. ]
  836. }
  837. ]
  838. }
  839. }
  840. let loadSaveSettings =
  841. {
  842. $cell: true,
  843. $type: "div",
  844. id: "loadSaveSettings",
  845. class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
  846. $init: function () {
  847. var userGUI = [];
  848. let worldOwner = self.helpers.getRoot(false).root.split('/')[0];
  849. if (_LCSUSER.is) {
  850. if (worldOwner == _LCSUSER.is.alias) {
  851. userGUI.push(
  852. {
  853. $type: "div",
  854. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  855. $components: [
  856. {
  857. $type: "h3",
  858. class: "mdc-typography--title",
  859. $text: self.helpers.worldStateName
  860. },
  861. self.widgets.buttonStroked(
  862. {
  863. "label": "Save world",
  864. "onclick": function (e) {
  865. let fileName = self.helpers.worldStateName;//document.querySelector('#fileName')
  866. _app.saveStateAsFile(fileName);
  867. //document.querySelector("#fileName").value = '';
  868. //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
  869. }
  870. })
  871. ]
  872. }
  873. );
  874. }
  875. userGUI.push(
  876. {
  877. $type: "div",
  878. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  879. $components: [
  880. {
  881. $type: "div",
  882. $components: [
  883. self.widgets.inputTextFieldOutlined({
  884. "id": 'fileName',
  885. "label": "World clone name",
  886. "value": 'world' + self.helpers.randId(), //self.getSaveName() //self.getRoot()
  887. "change": function (e) {
  888. }
  889. })
  890. // {
  891. // class: "mdc-text-field__input prop-text-field-input",
  892. // id: "fileName",
  893. // $type: "input",
  894. // type: "text",
  895. // value: 'world' + self.helpers.randId() //self.getSaveName() //self.getRoot()
  896. // }
  897. ]
  898. }
  899. ]
  900. },
  901. {
  902. $type: "div",
  903. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  904. $components: [
  905. self.widgets.buttonStroked(
  906. {
  907. "label": "Clone world",
  908. "onclick": function (e) {
  909. let fileName = document.querySelector('#fileName')
  910. let worldOwner = self.helpers.getRoot(false).root.split('/')[0];
  911. if (_LCSUSER.is) {
  912. if (worldOwner == _LCSUSER.is.alias) {
  913. _app.saveStateAsFile(fileName.value);
  914. } else {
  915. console.log('clone world with prototype to: ' + fileName);
  916. _app.cloneWorldState(fileName.value);
  917. }
  918. }
  919. //saveStateAsFile.call(self, fileName.value);
  920. //document.querySelector("#fileName").value = '';
  921. //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
  922. }
  923. })
  924. ]
  925. }
  926. )
  927. let saveGUI = document.querySelector('#saveGUI');
  928. saveGUI.$components = userGUI.concat(saveGUI.$components);
  929. //document.querySelector('#fileName').value = 'world' + _app.helpers.randId();
  930. }
  931. },
  932. $update: function () {
  933. },
  934. $components:
  935. [
  936. {
  937. $type: "div",
  938. class: "mdc-layout-grid__inner",
  939. id: "saveGUI",
  940. $components: [
  941. ]
  942. }
  943. ]
  944. }
  945. let protoPropertiesCell = function (m) {
  946. return {
  947. $type: "div",
  948. class: "mdc-layout-grid__inner",
  949. _prop: {},
  950. $init: function () {
  951. let prop = m[1].prop;
  952. if (prop.value == undefined && this._currentNode !== undefined) {
  953. prop.value = JSON.stringify(utility.transform(vwf.getProperty(this._currentNode, prop.name, []), utility.transforms.transit));
  954. }
  955. this._prop = prop
  956. },
  957. $update: function () {
  958. this.$components = [
  959. // {
  960. // $type: "div",
  961. // class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-10",
  962. // $components: [
  963. // { $text: this._prop.name }
  964. // ]
  965. // },
  966. // {
  967. // $type: "div",
  968. // class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  969. // },
  970. {
  971. $type: "div",
  972. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  973. $components: [
  974. // {
  975. // $type: "span",
  976. // class: "mdc-typography--body2 mdc-typography--adjust-margin protoPropLabel",
  977. // $text: this._prop.name + ': '
  978. // },
  979. {
  980. $type: "div",
  981. $components: [
  982. self.widgets.inputTextFieldStandart({
  983. "id": 'proto_' + this._prop.name,
  984. "label": this._prop.name,
  985. "value": this._prop.getValue(),
  986. "change": function (e) {
  987. let propValue = this.value;
  988. try {
  989. propValue = JSON.parse(propValue);
  990. self.kernel.setProperty(this._currentNode, this._prop.name, propValue);
  991. } catch (e) {
  992. // restore the original value on error
  993. this.value = propValue;
  994. }
  995. }
  996. })
  997. ]
  998. }
  999. ]
  1000. }
  1001. ]
  1002. }
  1003. }
  1004. }
  1005. let propertiesCell = function (m) {
  1006. var editComponents = [{}, {}];
  1007. // fullWidth:
  1008. // fullHeight:
  1009. // xoffset:
  1010. // yoffset:
  1011. // width:
  1012. // height:
  1013. let sliderPropNames = ['width', 'height', 'depth', 'fullWidth', 'fullHeight', 'xoffset', 'yoffset', 'subcamWidth', 'subcamHeight'];
  1014. let sliderProps = {
  1015. 'width': {
  1016. min: 0,
  1017. max: 30
  1018. },
  1019. 'height': {
  1020. min: 0,
  1021. max: 30
  1022. },
  1023. 'depth': {
  1024. min: 0,
  1025. max: 30
  1026. },
  1027. 'fullWidth': {
  1028. min: 0,
  1029. max: 5000,
  1030. step: 10
  1031. },
  1032. 'fullHeight': {
  1033. min: 0,
  1034. max: 5000,
  1035. step: 10
  1036. },
  1037. 'xoffset': {
  1038. min: -10000,
  1039. max: 10000,
  1040. step: 10
  1041. },
  1042. 'yoffset': {
  1043. min: -10000,
  1044. max: 10000,
  1045. step: 10
  1046. },
  1047. 'subcamWidth': {
  1048. min: 0,
  1049. max: 5000,
  1050. step: 10
  1051. },
  1052. 'subcamHeight': {
  1053. min: 0,
  1054. max: 5000,
  1055. step: 10
  1056. }
  1057. }
  1058. if (sliderPropNames.includes(m.name)) {
  1059. let currenValue = JSON.parse(m.getValue());
  1060. var sliderComponent = self.widgets.sliderContinuous({
  1061. 'id': 'prop-slider-' + m.name,
  1062. 'label': 'Slider',
  1063. 'min': sliderProps[m.name].min,
  1064. 'max': sliderProps[m.name].max,
  1065. 'step': sliderProps[m.name].step ? sliderProps[m.name].step : 0.1,
  1066. 'value': currenValue,
  1067. 'init': function () {
  1068. const myEl = this;
  1069. var continuousSlider = new mdc.slider.MDCSlider(myEl);
  1070. this._comp = continuousSlider;
  1071. continuousSlider.listen('MDCSlider:input', function (e) {
  1072. // console.log(continuousSlider.value)
  1073. let myEl = e.currentTarget;
  1074. // let prop = myEl._prop.body;
  1075. //document.querySelector('#propAceEditor').env.editor.setValue(prop);
  1076. self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
  1077. //continuousValue.textContent = continuousSlider.value;
  1078. });
  1079. continuousSlider.listen('MDCSlider:change', function (e) {
  1080. //console.log(continuousSlider.value);
  1081. let myEl = e.currentTarget;
  1082. // let prop = myEl._prop.body;
  1083. //document.querySelector('#propAceEditor').env.editor.setValue(prop);
  1084. self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
  1085. //continuousCommittedValue.textContent = continuousSlider.value;
  1086. })
  1087. }
  1088. })
  1089. } else {
  1090. sliderComponent = {}
  1091. }
  1092. if (m.name.indexOf("semantics") > -1) { }
  1093. else if (m.name.indexOf("grammar") > -1) { }
  1094. else if (m.name.indexOf("ohm") > -1) {
  1095. editComponents = [
  1096. {
  1097. $type: "div",
  1098. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
  1099. $components: [
  1100. {
  1101. $type: "button",
  1102. class: "mdc-button",
  1103. $text: "Edit", //edit grammar
  1104. onclick: function (e) {
  1105. var currentNode = document.querySelector('#currentNode')._currentNode;
  1106. if (currentNode == '') {
  1107. currentNode = vwf_view.kernel.find("", "/")[0];
  1108. }
  1109. let editor = document.querySelector('#livePropEditor');
  1110. editor._setNode(currentNode);
  1111. editor._propName = m.name;
  1112. editor._prop = { body: m.rawValue, type: 'complex' }
  1113. document.querySelector('#propEditorWindow').style.visibility = 'visible';
  1114. }
  1115. }
  1116. ]
  1117. },
  1118. {
  1119. $type: "div",
  1120. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
  1121. $components: []
  1122. }
  1123. ]
  1124. } else {
  1125. editComponents = [
  1126. {
  1127. $type: "div",
  1128. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
  1129. $components: [
  1130. sliderComponent,
  1131. {
  1132. class: "mdc-text-field prop-mdc-text-field",
  1133. $type: "div",
  1134. $components: [
  1135. self.widgets.inputTextFieldStandart({
  1136. "id": "prop-" + m.name,
  1137. "label": m.name,
  1138. "value": m.getValue(),
  1139. "change": function (e) {
  1140. let propValue = this.value;
  1141. try {
  1142. propValue = JSON.parse(propValue);
  1143. self.kernel.setProperty(this._currentNode, m.name, propValue);
  1144. } catch (e) {
  1145. // restore the original value on error
  1146. this.value = propValue;
  1147. }
  1148. }
  1149. })
  1150. ]
  1151. }
  1152. ]
  1153. },
  1154. {
  1155. $type: "div",
  1156. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
  1157. $components: [
  1158. {
  1159. $type: "button",
  1160. class: "mdc-button mdc-button--compact",
  1161. $text: "^", //edit grammar
  1162. onclick: function (e) {
  1163. var currentNode = document.querySelector('#currentNode')._currentNode;
  1164. if (currentNode == '') {
  1165. currentNode = vwf_view.kernel.find("", "/")[0];
  1166. }
  1167. let editor = document.querySelector('#livePropEditor');
  1168. editor._setNode(currentNode);
  1169. editor._propName = m.name;
  1170. editor._prop = { body: m.getValue(), type: 'simple' }
  1171. document.querySelector('#propEditorWindow').style.visibility = 'visible';
  1172. }
  1173. }
  1174. ]
  1175. }
  1176. ];
  1177. }
  1178. return {
  1179. $type: "div",
  1180. class: "mdc-layout-grid__inner",
  1181. $components: [
  1182. {
  1183. $type: "div",
  1184. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
  1185. $components: [
  1186. { $text: m.name }
  1187. ]
  1188. },
  1189. {
  1190. $type: "div",
  1191. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1192. },
  1193. editComponents[0],
  1194. editComponents[1]
  1195. ]
  1196. }
  1197. }
  1198. let nodeLink = function (m) {
  1199. var myClass = "nodeItem";
  1200. let myAvatarName = 'avatar-' + self.kernel.moniker();
  1201. (myAvatarName == m.name) ? (myClass = "avatarName mdc-typography--subheading2") :
  1202. myClass = "nodeItem"
  1203. var nodeName = m.name;
  1204. let displayName = vwf.getProperty(m.ID, 'displayName');
  1205. if (displayName) {
  1206. nodeName = displayName
  1207. }
  1208. return {
  1209. $type: "li",
  1210. class: "mdc-list-item",
  1211. $components: [{
  1212. $type: "a",
  1213. class: "mdc-list-item",
  1214. $href: "#",
  1215. $components: [{
  1216. $type: 'span',
  1217. class: myClass,
  1218. $text: nodeName
  1219. }
  1220. ],
  1221. onclick: function (e) {
  1222. //self.currentNodeID = m.ID;
  1223. document.querySelector('#currentNode')._setNode(m.ID);
  1224. // document.querySelector('#liveCodeEditor')._editorNode = m.ID;
  1225. // createAceEditor(self, m.ID);
  1226. }
  1227. }]
  1228. }
  1229. };
  1230. let listDivider = {
  1231. $type: "hr",
  1232. class: "mdc-list-divider",
  1233. }
  1234. let webrtcGUI = {
  1235. $type: "div",
  1236. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1237. $components: [
  1238. {
  1239. $type: "div",
  1240. class: "mdc-layout-grid__inner",
  1241. $components: [
  1242. {
  1243. $type: "div",
  1244. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1245. $components: [
  1246. {
  1247. $type: "span",
  1248. $text: "Chat"
  1249. }
  1250. ]
  1251. },
  1252. {
  1253. $type: "div",
  1254. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1255. $components: [
  1256. self.widgets.icontoggle({
  1257. 'id': "webrtcswitch",
  1258. 'label': 'visibility',
  1259. 'on': JSON.stringify({ "content": "visibility", "label": "Turn On Mic" }),
  1260. 'off': JSON.stringify({ "content": "visibility_off", "label": "Turn Off Mic" }),
  1261. 'state': false,
  1262. 'init': function () {
  1263. this._driver = vwf.views["vwf/view/webrtc"];
  1264. if (!this._driver) {
  1265. this.classList.add('mdc-icon-toggle--disabled');
  1266. }
  1267. this.addEventListener('MDCIconToggle:change', (e) => {
  1268. let driver = e.target._driver;
  1269. let chkAttr = e.detail.isOn;
  1270. let avatarID = 'avatar-' + self.kernel.moniker();
  1271. let micToggle = document.querySelector('#webrtcaudio');
  1272. let camToggle = document.querySelector('#webrtcvideo');
  1273. if (chkAttr) {
  1274. driver.startWebRTC(avatarID);
  1275. micToggle.classList.remove('mdc-icon-toggle--disabled');
  1276. camToggle.classList.remove('mdc-icon-toggle--disabled');
  1277. console.log("on")
  1278. } else {
  1279. driver.stopWebRTC(avatarID);
  1280. micToggle.classList.add('mdc-icon-toggle--disabled');
  1281. camToggle.classList.add('mdc-icon-toggle--disabled');
  1282. console.log("off")
  1283. }
  1284. //console.log(e, detail)
  1285. //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
  1286. });
  1287. }
  1288. })
  1289. ]
  1290. },
  1291. {
  1292. $type: "div",
  1293. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1294. $components: [
  1295. self.widgets.icontoggle({
  1296. 'id': "webrtcaudio",
  1297. 'label': 'mic',
  1298. 'on': JSON.stringify({ "content": "mic", "label": "Turn On Mic" }),
  1299. 'off': JSON.stringify({ "content": "mic_off", "label": "Turn Off Mic" }),
  1300. 'state': false,
  1301. 'init': function () {
  1302. this._driver = vwf.views["vwf/view/webrtc"];
  1303. let webrtcswitch = document.querySelector('#webrtcswitch');
  1304. if (!this._driver) {
  1305. this.classList.add('mdc-icon-toggle--disabled');
  1306. }
  1307. this.classList.add('mdc-icon-toggle--disabled');
  1308. this.addEventListener('MDCIconToggle:change', (e) => {
  1309. let driver = e.target._driver;
  1310. let chkAttr = e.detail.isOn;
  1311. if (chkAttr) {
  1312. driver.muteAudio(chkAttr);
  1313. console.log("on")
  1314. } else {
  1315. driver.muteAudio(chkAttr);
  1316. console.log("off")
  1317. }
  1318. //console.log(e, detail)
  1319. //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
  1320. });
  1321. }
  1322. })
  1323. ]
  1324. },
  1325. {
  1326. $type: "div",
  1327. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1328. $components: [
  1329. self.widgets.icontoggle({
  1330. 'id': "webrtcvideo",
  1331. 'label': 'videocam',
  1332. 'on': JSON.stringify({ "content": "videocam", "label": "Turn On Video" }),
  1333. 'off': JSON.stringify({ "content": "videocam_off", "label": "Turn Off Video" }),
  1334. 'state': false,
  1335. 'init': function () {
  1336. this._driver = vwf.views["vwf/view/webrtc"];
  1337. if (!this._driver) {
  1338. this.classList.add('mdc-icon-toggle--disabled');
  1339. }
  1340. this.classList.add('mdc-icon-toggle--disabled');
  1341. this.addEventListener('MDCIconToggle:change', (e) => {
  1342. let driver = e.target._driver;
  1343. let chkAttr = e.detail.isOn;
  1344. if (chkAttr) {
  1345. driver.muteVideo(chkAttr);
  1346. console.log("on")
  1347. } else {
  1348. driver.muteVideo(chkAttr);
  1349. console.log("off")
  1350. }
  1351. //console.log(e, detail)
  1352. //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
  1353. });
  1354. }
  1355. })
  1356. ]
  1357. }
  1358. ]
  1359. }
  1360. ]
  1361. }
  1362. let audioGUI = {
  1363. $type: "div",
  1364. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1365. $components: [
  1366. {
  1367. $type: "div",
  1368. class: "mdc-layout-grid__inner",
  1369. $components: [
  1370. {
  1371. $type: "div",
  1372. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1373. $components: [
  1374. {
  1375. $type: "span",
  1376. $text: "Sound: "
  1377. }
  1378. ]
  1379. },
  1380. {
  1381. $type: "div",
  1382. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1383. $components: [
  1384. self.widgets.icontoggle({
  1385. 'id': "soundStopStartSwitch",
  1386. 'label': 'play',
  1387. 'on': JSON.stringify({ "content": "pause", "label": "stop" }),
  1388. 'off': JSON.stringify({ "content": "play_arrow", "label": "play" }),
  1389. 'state': false,
  1390. 'init': function () {
  1391. var nodeID = this._currentNode;
  1392. this._comp = new mdc.iconToggle.MDCIconToggle(this);
  1393. this.setAttribute('id', "soundStopStartSwitch-" + nodeID);
  1394. let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
  1395. mdc.iconToggle.MDCIconToggle.attachTo(this);
  1396. this._comp.on = isPlaying;
  1397. this.addEventListener('MDCIconToggle:change', (e) => {
  1398. // let avatarID = 'avatar-'+ vwf.moniker_;
  1399. // let avatarNode = self.nodes['avatar-'+ vwf.moniker_];
  1400. // let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
  1401. var nodeID = document.querySelector('#currentNode')._currentNode;
  1402. let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
  1403. if (isPlaying) {
  1404. console.log("stop");
  1405. vwf_view.kernel.callMethod(nodeID, "pauseSound");
  1406. } else {
  1407. console.log("play")
  1408. vwf_view.kernel.callMethod(nodeID, "playSound");
  1409. }
  1410. });
  1411. }
  1412. })
  1413. ]
  1414. },
  1415. {
  1416. $type: "div",
  1417. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1418. $components: [
  1419. {
  1420. $type: "div",
  1421. style: "padding: 12px",
  1422. $components: [
  1423. self.widgets.iconButton({
  1424. 'label': 'stop',
  1425. onclickfunc: function () {
  1426. var nodeID = this._currentNode;
  1427. vwf_view.kernel.callMethod(nodeID, "stopSound");
  1428. }
  1429. })
  1430. ]
  1431. }
  1432. ]
  1433. }
  1434. // {
  1435. // $type: "div",
  1436. // class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
  1437. // $components: [
  1438. // widgets.switch({
  1439. // 'id': 'editnode',
  1440. // 'init': function(){
  1441. // vwf_view.kernel.getProperty(this._currentNode, 'edit');
  1442. // },
  1443. // 'onchange': function(e){
  1444. // var nodeID = document.querySelector('#currentNode')._currentNode;
  1445. // let chkAttr = this.getAttribute('checked');
  1446. // if (chkAttr == "") {
  1447. // self.kernel.setProperty(this._currentNode, 'edit', false);
  1448. // } else {
  1449. // self.kernel.setProperty(this._currentNode, 'edit', true);
  1450. // }
  1451. // vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
  1452. // }
  1453. // }
  1454. // )
  1455. // ]
  1456. // }
  1457. ]
  1458. }
  1459. ]
  1460. }
  1461. var saveGUI = {};
  1462. if (_LCSUSER.is) {
  1463. saveGUI = self.widgets.floatActionButton({
  1464. label: "save",
  1465. styleClass: "mdc-fab--mini",
  1466. onclickfunc: function () {
  1467. var nodeID = document.querySelector('#currentNode')._currentNode;
  1468. let node = self.nodes[nodeID];
  1469. let nodeDef = self.helpers.getNodeDef(nodeID);
  1470. console.log(nodeDef);
  1471. //let saveID = this.GUID();
  1472. // _LCSUSER.get('saves').get(node.name).put(JSON.stringify(nodeDef), acc=>{
  1473. // console.log("saved: " + acc + 'to '+ node.name)
  1474. // });
  1475. }
  1476. })
  1477. }
  1478. let gizmoEdit = {
  1479. $type: "div",
  1480. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1481. $components: [
  1482. {
  1483. $type: "div",
  1484. class: "mdc-layout-grid__inner",
  1485. $components: [
  1486. {
  1487. $type: "div",
  1488. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1489. $components: [
  1490. {
  1491. $type: "span",
  1492. $text: "Edit: ",
  1493. }
  1494. ]
  1495. },
  1496. {
  1497. $type: "div",
  1498. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
  1499. $components: [
  1500. self.widgets.switch({
  1501. 'id': 'editnode',
  1502. 'init': function () {
  1503. vwf_view.kernel.getProperty(this._currentNode, 'edit');
  1504. this._switch = new mdc.switchControl.MDCSwitch(this);
  1505. this._switch.checked = false;
  1506. },
  1507. 'onchange': function (e) {
  1508. var nodeID = document.querySelector('#currentNode')._currentNode;
  1509. if (this._switch) {
  1510. let chkAttr = this._switch.checked;//this.getAttribute('checked');
  1511. if (chkAttr) {
  1512. self.kernel.setProperty(this._currentNode, 'edit', true);
  1513. //this._switch.checked = false;
  1514. } else {
  1515. self.kernel.setProperty(this._currentNode, 'edit', false);
  1516. //this._switch.checked = true;
  1517. }
  1518. vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
  1519. }
  1520. }
  1521. }
  1522. )
  1523. ]
  1524. },
  1525. {
  1526. $type: "div",
  1527. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1528. $components: [
  1529. self.widgets.imageButton({
  1530. imgSrc: "/vwf/view/lib/images/ui/icons/translate.png",
  1531. styleClass: "editButton",
  1532. onclickfunc: function (e) {
  1533. vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
  1534. }
  1535. })
  1536. ]
  1537. },
  1538. {
  1539. $type: "div",
  1540. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1541. $components: [
  1542. self.widgets.imageButton({
  1543. imgSrc: "/vwf/view/lib/images/ui/icons/rotate.png",
  1544. styleClass: "editButton",
  1545. onclickfunc: function (e) {
  1546. vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
  1547. }
  1548. })
  1549. ]
  1550. },
  1551. {
  1552. $type: "div",
  1553. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1554. $components: [
  1555. self.widgets.imageButton({
  1556. imgSrc: "/vwf/view/lib/images/ui/icons/scale.png",
  1557. styleClass: "editButton",
  1558. onclickfunc: function (e) {
  1559. vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
  1560. }
  1561. })
  1562. ]
  1563. },
  1564. {
  1565. $type: "div",
  1566. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  1567. $components: [
  1568. // self.widgets.floatActionButton({
  1569. // label: "content_copy",
  1570. // styleClass: "mdc-fab--mini"
  1571. // }),
  1572. // {
  1573. // $type: "span",
  1574. // $text: " "
  1575. // },
  1576. self.widgets.floatActionButton({
  1577. label: "delete_forever",
  1578. styleClass: "mdc-fab--mini",
  1579. onclickfunc: function () {
  1580. var nodeID = document.querySelector('#currentNode')._currentNode;
  1581. let node = self.nodes[nodeID];
  1582. //vwf_view.kernel.deleteChild(node.parentID, node.name);
  1583. vwf_view.kernel.deleteNode(nodeID);
  1584. //vwf_view.kernel.callMethod(node.parentID, "deleteNode", [node.name])
  1585. }
  1586. }),
  1587. self.widgets.floatActionButton({
  1588. label: "priority_high",
  1589. styleClass: "mdc-fab--mini",
  1590. onclickfunc: function () {
  1591. var nodeID = document.querySelector('#currentNode')._currentNode;
  1592. let node = self.nodes[nodeID];
  1593. //vwf_view.kernel.deleteChild(node.parentID, node.name);
  1594. let me = self.kernel.moniker();
  1595. vwf_view.kernel.setProperty(nodeID, 'ownedBy', me);
  1596. // let me = self.kernel.moniker();
  1597. // let viewDriver = vwf.views["vwf/view/aframe"];
  1598. // let nodeComponents = viewDriver.nodes[nodeID].components;
  1599. // let raycasterID = Object.entries(nodeComponents).find(el =>
  1600. // el[0] == 'raycaster'
  1601. // )[1];
  1602. // if (raycasterID){
  1603. // vwf_view.kernel.setProperty(raycasterID, 'ownedby', me);
  1604. // }
  1605. // else {
  1606. // console.log("no raycaster component on: " + nodeID);
  1607. // }
  1608. //let nodeComponents = node.components
  1609. //vwf_view.kernel.callMethod(node.parentID, "deleteNode", [node.name])
  1610. }
  1611. }),
  1612. saveGUI
  1613. ]
  1614. },
  1615. ]
  1616. }
  1617. ]
  1618. }
  1619. let nodesCell = {
  1620. $cell: true,
  1621. $type: "div",
  1622. id: "currentNode",
  1623. _childNodes: [],
  1624. _currentNode: '',
  1625. _displayedProperties: {},
  1626. _setNode: function (aNode) {
  1627. this._currentNode = aNode;
  1628. document.querySelector('#sideBar')._sideCurrentNode = this._currentNode
  1629. },
  1630. $init: function () {
  1631. this._currentNode = document.querySelector('#sideBar')._sideCurrentNode
  1632. //this._currentNode = vwf_view.kernel.find("", "/")[0];
  1633. //this._currentNode = '3333';
  1634. },
  1635. _getChildNodes: function () {
  1636. this._childNodes = self.nodes[this._currentNode];
  1637. if (this._childNodes !== undefined) {
  1638. return this._childNodes.children
  1639. } else {
  1640. return []
  1641. }
  1642. //let nodeIDAlpha = he.encode(this._currentNode);
  1643. },
  1644. // _getNodeComplexProperties: function () {
  1645. // let node = self.nodes[this._currentNode];
  1646. // let props = this._getNodeProperties();
  1647. // let filterFunction = function (prop) {
  1648. // return (prop.name == 'ohmLang')
  1649. // };
  1650. // let complexProps = props.filter(filterFunction.bind(this));
  1651. // return complexProps
  1652. // },
  1653. _getNodeProperties: function () {
  1654. let node = self.nodes[this._currentNode];
  1655. this._displayedProperties = {};
  1656. let filterFunction = function (prop) {
  1657. return (!this._displayedProperties[prop.name] && prop.name.indexOf('$') === -1) ? (this._displayedProperties[prop.name] = "instance", true) : (false);
  1658. };
  1659. let props = node.properties.filter(filterFunction.bind(this));
  1660. return props
  1661. },
  1662. _getNodeProtoProperties: function () {
  1663. let node = self.nodes[this._currentNode];
  1664. let filterFunction = function (prop) {
  1665. return (!this._displayedProperties[prop[1].prop.name]) ? (this._displayedProperties[prop[1].prop.name] = prop[1].prototype, true) : (false);
  1666. };
  1667. let props = Object.entries(getProperties.call(self, self.kernel, node.extendsID)).filter(filterFunction.bind(this));
  1668. return props
  1669. },
  1670. $update: function () {
  1671. //this.$text = this._currentNode;
  1672. let node = self.nodes[this._currentNode];
  1673. let nodeProtos = getPrototypes(self.kernel, node.extendsID);
  1674. var viewerProps = {};
  1675. var viewerPropsCell = {};
  1676. var gizmoCell = {};
  1677. if (this._currentNode !== self.kernel.application()) {
  1678. if (nodeProtos.includes('http://vwf.example.com/aframe/componentNode.vwf')) {
  1679. //gizmoCell = {};
  1680. if (nodeProtos.includes('http://vwf.example.com/aframe/a-sound-component.vwf')) {
  1681. //console.log("sound gui")
  1682. gizmoCell = audioGUI
  1683. }
  1684. } else {
  1685. gizmoCell = gizmoEdit
  1686. }
  1687. }
  1688. if (node !== undefined) {
  1689. if (node.extendsID == "http://vwf.example.com/aframe/acamera.vwf") {
  1690. viewerProps = {
  1691. $type: "li",
  1692. class: "mdc-list-item",
  1693. $components: [
  1694. {
  1695. $text: "Viewer properties",
  1696. $type: "span",
  1697. class: "mdc-list-item__text mdc-typography--button"
  1698. }
  1699. ]
  1700. }
  1701. viewerPropsCell = {
  1702. $cell: true,
  1703. $type: "div",
  1704. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1705. $components: [
  1706. {
  1707. $type: "div",
  1708. class: "mdc-layout-grid__inner",
  1709. $components: [
  1710. {
  1711. $type: "div",
  1712. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  1713. $components: [
  1714. self.widgets.buttonStroked(
  1715. {
  1716. "label": "Active",
  1717. "onclick": function (e) {
  1718. //let camera = document.querySelector('#' + this._currentNode);
  1719. vwf_view.kernel.callMethod(this._currentNode, "setCameraToActive", [vwf.moniker_]);
  1720. //camera.setAttribute('camera', 'active', true);
  1721. }
  1722. })
  1723. ]
  1724. }
  1725. ]
  1726. }
  1727. ]
  1728. //$components: this._getNodeProtoProperties().map(protoPropertiesCell)
  1729. }
  1730. } else {
  1731. viewerProps = {};
  1732. viewerPropsCell = {};
  1733. }
  1734. }
  1735. this.$components = [
  1736. {
  1737. $type: "ul",
  1738. class: "mdc-list",
  1739. $components: [
  1740. self.widgets.buttonStroked(
  1741. {
  1742. "label": "<--",
  1743. "onclick": function (e) {
  1744. let node = self.nodes[this._currentNode];
  1745. if (node.parentID !== 0) {
  1746. //self.currentNodeID = node.parentID,
  1747. document.querySelector('#currentNode')._setNode(node.parentID)
  1748. }
  1749. }
  1750. }),
  1751. {
  1752. $type: "li",
  1753. class: "mdc-list-item",
  1754. $components: [
  1755. {
  1756. $text: "name",
  1757. $type: "span",
  1758. $init: function () {
  1759. let node = self.nodes[this._currentNode];
  1760. if (node) {
  1761. let displayName = vwf.getProperty(node.ID, 'displayName');
  1762. if (displayName) {
  1763. this.$text = displayName
  1764. } else {
  1765. this.$text = node.name;
  1766. }
  1767. }
  1768. //console.log(node.properties.displayName)
  1769. },
  1770. class: "mdc-list-item__text mdc-typography--headline"
  1771. //<h1 class="mdc-typography--display4">Big header</h1>
  1772. }]
  1773. }, listDivider,
  1774. {
  1775. // $cell: true,
  1776. // $type: "ul",
  1777. // class: "mdc-list",
  1778. $type: "div",
  1779. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1780. $components: [
  1781. {
  1782. $type: "div",
  1783. class: "mdc-layout-grid__inner",
  1784. $components: [
  1785. {
  1786. $type: "div",
  1787. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  1788. $components: [
  1789. self.widgets.buttonStroked(
  1790. {
  1791. "label": "Methods browser",
  1792. "onclick": function (e) {
  1793. var currentNode = document.querySelector('#currentNode')._currentNode;
  1794. if (currentNode == '') {
  1795. currentNode = vwf_view.kernel.find("", "/")[0];
  1796. }
  1797. if (isAFrameEntity(currentNode)) {
  1798. vwf.views["vwf/view/aframe"].nodes[currentNode].liveBindings = {};
  1799. } else if(isAFrameComponent(currentNode)) {
  1800. vwf.views["vwf/view/aframeComponent"].nodes[currentNode].liveBindings = {};
  1801. }
  1802. document.querySelector('#liveCodeEditor')._setNode(currentNode);
  1803. //createAceEditor(self, currentNode);
  1804. document.querySelector('#codeEditorWindow').style.visibility = 'visible';
  1805. }
  1806. })
  1807. ]
  1808. }
  1809. ]
  1810. }
  1811. ]
  1812. },
  1813. gizmoCell,
  1814. listDivider,
  1815. {
  1816. $type: "li",
  1817. class: "mdc-list-item",
  1818. $components: [
  1819. {
  1820. $text: "Children",
  1821. $type: "span",
  1822. class: "mdc-list-item__text mdc-typography--button"
  1823. }]
  1824. },
  1825. {
  1826. $type: "ul",
  1827. class: "mdc-list",
  1828. $components: this._getChildNodes().map(nodeLink)
  1829. }, listDivider, {
  1830. $type: "li",
  1831. class: "mdc-list-item",
  1832. $components: [
  1833. {
  1834. $text: "Properties",
  1835. $type: "span",
  1836. class: "mdc-list-item__text mdc-typography--button"
  1837. //<h1 class="mdc-typography--display4">Big header</h1>
  1838. }]
  1839. },
  1840. {
  1841. // $cell: true,
  1842. // $type: "ul",
  1843. // class: "mdc-list",
  1844. $type: "div",
  1845. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1846. $components: this._getNodeProperties().map(propertiesCell)
  1847. },
  1848. listDivider,
  1849. {
  1850. $type: "li",
  1851. class: "mdc-list-item",
  1852. $components: [
  1853. {
  1854. $text: "Proto properties",
  1855. $type: "span",
  1856. class: "mdc-list-item__text mdc-typography--button"
  1857. }]
  1858. },
  1859. {
  1860. $type: "div",
  1861. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1862. $components: this._getNodeProtoProperties().map(protoPropertiesCell)
  1863. }, listDivider,
  1864. viewerProps,
  1865. viewerPropsCell
  1866. ]
  1867. }
  1868. ]
  1869. }
  1870. }
  1871. let numberSliderComponent = {
  1872. $cell: true,
  1873. $type: "div",
  1874. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
  1875. $init: function () {
  1876. },
  1877. $components: [
  1878. {
  1879. $type: "div",
  1880. style: "padding: 0 16px;",
  1881. $components: [
  1882. {}
  1883. ]
  1884. }
  1885. ]
  1886. }
  1887. let colorPickerComponent = {
  1888. $cell: true,
  1889. $type: "div",
  1890. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
  1891. $init: function () {
  1892. let myEl = this;
  1893. let cp = ColorPicker(
  1894. document.getElementById('slide'),
  1895. document.getElementById('picker'),
  1896. function (hex, hsv, rgb, mousePicker, mouseSlide) {
  1897. ColorPicker.positionIndicators(
  1898. document.getElementById('slide-indicator'),
  1899. document.getElementById('picker-indicator'),
  1900. mouseSlide, mousePicker
  1901. );
  1902. if (myEl._propName.toLowerCase().includes('color')) {
  1903. // console.log(hex);
  1904. document.querySelector('#propAceEditor').env.editor.setValue(JSON.stringify(hex));
  1905. self.kernel.setProperty(myEl._editorNode, myEl._propName, hex);
  1906. }
  1907. });
  1908. if (myEl._propName.toLowerCase().includes('color')) {
  1909. cp.setHex(JSON.parse(myEl._prop.body));
  1910. }
  1911. },
  1912. $components: [
  1913. {
  1914. $type: "div",
  1915. id: "color-picker",
  1916. class: "cp-default",
  1917. $components: [
  1918. {
  1919. $type: "div",
  1920. class: "picker-wrapper",
  1921. $components: [
  1922. {
  1923. $type: "div",
  1924. id: "picker",
  1925. class: "picker",
  1926. style: "width: 130px; height: 130px"
  1927. },
  1928. {
  1929. $type: "div",
  1930. id: "picker-indicator",
  1931. class: "picker-indicator"
  1932. }
  1933. ]
  1934. },
  1935. {
  1936. $type: "div",
  1937. class: "slide-wrapper",
  1938. $components: [
  1939. {
  1940. $type: "div",
  1941. id: "slide",
  1942. class: "slide",
  1943. style: "width: 30px; height: 130px"
  1944. },
  1945. {
  1946. $type: "div",
  1947. id: "slide-indicator",
  1948. class: "slide-indicator"
  1949. }
  1950. ]
  1951. }
  1952. ]
  1953. }
  1954. // {
  1955. // $cell: true,
  1956. // $type: "div",
  1957. // id: "color-picker",
  1958. // $init: function () {
  1959. // }
  1960. // }
  1961. ]
  1962. }
  1963. let propEditorWindow = {
  1964. $cell: true,
  1965. $type: "div",
  1966. _editorNode: '',
  1967. _prop: { body: '', type: 'simple' },
  1968. _propName: '',
  1969. id: "livePropEditor",
  1970. _setNode: function (node) {
  1971. this._editorNode = node;
  1972. this._prop.body = ''
  1973. },
  1974. class: "propEditorGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  1975. $update: function () {
  1976. var editorClass = "mdc-layout-grid__cell mdc-layout-grid__cell--span-8"
  1977. var livePropertyComponent = {}
  1978. if (this._prop.type == 'simple') {
  1979. if (this._propName.toLowerCase().includes('color')) {
  1980. livePropertyComponent = colorPickerComponent
  1981. }
  1982. } else {
  1983. editorClass = "mdc-layout-grid__cell mdc-layout-grid__cell--span-12"
  1984. }
  1985. this.$components = [
  1986. {
  1987. $type: "div",
  1988. class: "mdc-layout-grid__inner",
  1989. $components: [
  1990. {
  1991. $type: "div",
  1992. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  1993. $components: [
  1994. self.widgets.buttonStroked(
  1995. {
  1996. "label": "Update",
  1997. "onclick": function (e) {
  1998. let editor = document.querySelector("#propAceEditor").env.editor;
  1999. let value = editor.getValue();
  2000. try {
  2001. let propValue = (this._prop.type == 'simple') ? (JSON.parse(value)) : (value)
  2002. //propValue = JSON.parse(value);
  2003. self.kernel.setProperty(this._editorNode, this._propName, propValue);
  2004. } catch (e) {
  2005. // restore the original value on error
  2006. this.value = propValue;
  2007. }
  2008. }
  2009. }
  2010. )]
  2011. },
  2012. {
  2013. $type: "div",
  2014. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-5",
  2015. $components: [
  2016. {
  2017. $type: "h3",
  2018. class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
  2019. $text: this._editorNode
  2020. }
  2021. ]
  2022. },
  2023. {
  2024. $type: "div",
  2025. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-5",
  2026. $components: [
  2027. {
  2028. $type: "h3",
  2029. class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
  2030. $text: this._propName
  2031. }
  2032. ]
  2033. }
  2034. ]
  2035. },
  2036. {
  2037. $type: "div",
  2038. class: "mdc-layout-grid__inner",
  2039. $components: [
  2040. {
  2041. $type: "div",
  2042. class: editorClass,
  2043. $components: [
  2044. {
  2045. class: "aceEditor",
  2046. id: "propAceEditor",
  2047. $type: "div",
  2048. $text: this._prop.body,
  2049. $init: function () {
  2050. createAceEditor(self, this._editorNode, "propAceEditor");
  2051. this.env.editor.$blockScrolling = Infinity
  2052. }
  2053. }
  2054. ]
  2055. }, livePropertyComponent
  2056. // {
  2057. // $cell: true,
  2058. // $type: "div",
  2059. // class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  2060. // $components: []
  2061. // },
  2062. ]
  2063. }
  2064. ]
  2065. //$components:
  2066. }
  2067. }
  2068. let codeEditorWindow = {
  2069. $cell: true,
  2070. $type: "div",
  2071. _editorNode: '',
  2072. _method: { body: '' },
  2073. _methodName: '',
  2074. _getNodeMethods: function () {
  2075. let node = self.nodes[this._editorNode];
  2076. return node.methods
  2077. },
  2078. _getProtoNodeMethods: function () {
  2079. let node = self.nodes[this._editorNode];
  2080. let prototypeMethods = getMethods.call(self, self.kernel, node.extendsID);
  2081. return prototypeMethods
  2082. },
  2083. id: "liveCodeEditor",
  2084. _setNode: function (node) {
  2085. this._editorNode = node;
  2086. this._method.body = ''
  2087. },
  2088. class: "codeEditorGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  2089. // _getComplexProps: function(){
  2090. // let node = self.nodes[this._editorNode];
  2091. // let currentNode = document.querySelector('#currentNode');
  2092. // var props = {}
  2093. // if (currentNode !== null) {
  2094. // props = currentNode._getNodeComplexProperties();
  2095. // }
  2096. // return props
  2097. // },
  2098. // _listPropertyElement: function (m) {
  2099. // return {
  2100. // $type: "li",
  2101. // class: "mdc-list-item",
  2102. // $components: [{
  2103. // $type: "a",
  2104. // class: "mdc-list-item",
  2105. // $href: "#",
  2106. // $text: m[1].name,
  2107. // onclick: function (e) {
  2108. // this._method = {};
  2109. // this._methodName = m[1].name;
  2110. // this._method.body = m[1].rawValue
  2111. // this._method.type = "complexProperty"
  2112. // }
  2113. // }]
  2114. // }
  2115. // },
  2116. _listElement: function (m) {
  2117. return {
  2118. $type: "li",
  2119. class: "mdc-list-item",
  2120. $components: [{
  2121. $type: "a",
  2122. class: "mdc-list-item",
  2123. $href: "#",
  2124. $text: m[0],
  2125. onclick: function (e) {
  2126. let method = vwf.getMethod(this._editorNode, m[0]);
  2127. //document.querySelector('#aceEditor').
  2128. this._method = method;
  2129. this._methodName = m[0];
  2130. //self.currentNodeID = m.ID;
  2131. //document.querySelector('#currentNode')._setNode(m.ID);
  2132. }
  2133. }]
  2134. }
  2135. },
  2136. $update: function () {
  2137. this.$components = [
  2138. {
  2139. $type: "div",
  2140. class: "mdc-layout-grid__inner",
  2141. $components: [
  2142. {
  2143. $type: "div",
  2144. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
  2145. $components: [
  2146. {
  2147. $type: "h3",
  2148. class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
  2149. $text: this._editorNode
  2150. }
  2151. ]
  2152. },
  2153. {
  2154. $type: "div",
  2155. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  2156. $components: [
  2157. self.widgets.buttonStroked(
  2158. {
  2159. "label": "Update",
  2160. "onclick": function (e) {
  2161. let editor = document.querySelector("#aceEditor").env.editor;
  2162. let evalText = editor.getValue();
  2163. // if (this._method.type == 'complexProperty') {
  2164. // let propValue = evalText;
  2165. // try {
  2166. // //propValue = JSON.parse(propValue);
  2167. // self.kernel.setProperty(this._editorNode, this._methodName, propValue);
  2168. // } catch (e) {
  2169. // // restore the original value on error
  2170. // this.value = propValue;
  2171. // }
  2172. // } else {
  2173. // }
  2174. self.kernel.setMethod(this._editorNode, this._methodName,
  2175. { body: evalText, type: "application/javascript", parameters: this._method.parameters });
  2176. }
  2177. }
  2178. )]
  2179. },
  2180. {
  2181. $type: "div",
  2182. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  2183. $components: [
  2184. self.widgets.buttonStroked(
  2185. {
  2186. "label": "Call",
  2187. "onclick": function (e) {
  2188. var params = [];
  2189. if (this._method.parameters) {
  2190. let paramsLength = this._method.parameters.length
  2191. if (paramsLength >= 1) {
  2192. let paramsVal = document.querySelector("#methodParams").value;
  2193. try {
  2194. params = JSON.parse(paramsVal);
  2195. //params.push(prmtr);
  2196. } catch (e) {
  2197. self.logger.error('Invalid Value');
  2198. }
  2199. }
  2200. };
  2201. self.kernel.callMethod(this._editorNode, this._methodName, params);
  2202. }
  2203. })
  2204. ]
  2205. },
  2206. {
  2207. $type: "div",
  2208. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  2209. $components: [
  2210. self.widgets.buttonStroked(
  2211. {
  2212. "label": "Do It",
  2213. "onclick": function (e) {
  2214. let editor = document.querySelector("#aceEditor").env.editor;
  2215. codeEditorDoit.call(self, editor, this._editorNode);
  2216. }
  2217. })
  2218. ]
  2219. },
  2220. {
  2221. $type: "div",
  2222. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
  2223. $components: [
  2224. self.widgets.buttonStroked(
  2225. {
  2226. "label": "Print It",
  2227. "onclick": function (e) {
  2228. let editor = document.querySelector("#aceEditor").env.editor;
  2229. codeEditorPrintit.call(self, editor, this._editorNode);
  2230. }
  2231. })
  2232. ]
  2233. }
  2234. ]
  2235. },
  2236. {
  2237. $type: "div",
  2238. class: "mdc-layout-grid__inner",
  2239. $components: [
  2240. {
  2241. $type: "div",
  2242. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
  2243. style: "overflow-y: scroll; max-height: 400px;",
  2244. $components: [
  2245. {
  2246. $type: "div",
  2247. class: "mdc-list-group",
  2248. $components: [
  2249. {
  2250. $type: "h3",
  2251. class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
  2252. $text: "Node methods"
  2253. },
  2254. {
  2255. $type: "ul",
  2256. class: "mdc-list",
  2257. $components: Object.entries(this._getNodeMethods()).map(this._listElement)
  2258. }, listDivider,
  2259. {
  2260. $type: "h3",
  2261. class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
  2262. $text: "Proto methods"
  2263. },
  2264. {
  2265. $type: "ul",
  2266. class: "mdc-list",
  2267. $components: Object.entries(this._getProtoNodeMethods()).map(this._listElement)
  2268. }, listDivider,
  2269. {
  2270. $type: "h3",
  2271. class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
  2272. $text: "Events"
  2273. }
  2274. // {
  2275. //
  2276. // $type: "ul",
  2277. // class: "mdc-list",
  2278. // $components: Object.entries(this._getComplexProps()).map(this._listPropertyElement)
  2279. // }
  2280. ]
  2281. }
  2282. ]
  2283. },
  2284. {
  2285. $type: "div",
  2286. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-9",
  2287. $components: [
  2288. {
  2289. class: "aceEditor",
  2290. id: "aceEditor",
  2291. $type: "div",
  2292. $text: this._method.body,
  2293. $init: function () {
  2294. createAceEditor(self, this._editorNode, "aceEditor");
  2295. }
  2296. }
  2297. ]
  2298. }
  2299. ]
  2300. },
  2301. {
  2302. $type: "div",
  2303. class: "mdc-layout-grid__inner",
  2304. $components: [
  2305. {
  2306. $type: "div",
  2307. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  2308. $components: [
  2309. {
  2310. $type: "span",
  2311. $text: "*"
  2312. }
  2313. ]
  2314. }
  2315. ]
  2316. },
  2317. { //params input
  2318. $type: "div",
  2319. class: "mdc-layout-grid__inner",
  2320. $components: [
  2321. {
  2322. $type: "div",
  2323. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
  2324. $components: [
  2325. self.widgets.inputTextFieldOutlined({
  2326. "id": 'methodName',
  2327. "label": "Method name",
  2328. "value": "newMethodName",
  2329. "change": function (e) {
  2330. let propValue = this.value;
  2331. try {
  2332. } catch (e) {
  2333. // restore the original value on error
  2334. }
  2335. }
  2336. })
  2337. ]
  2338. },
  2339. {
  2340. $type: "div",
  2341. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-7",
  2342. $components: [
  2343. self.widgets.inputTextFieldOutlined({
  2344. "id": 'methodParams',
  2345. "label": "Method parameters",
  2346. "value": JSON.stringify(this._method.parameters),
  2347. "change": function (e) {
  2348. let propValue = this.value;
  2349. try {
  2350. } catch (e) {
  2351. // restore the original value on error
  2352. }
  2353. }
  2354. })
  2355. ]
  2356. },
  2357. {
  2358. $type: "div",
  2359. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
  2360. $components: [
  2361. self.widgets.buttonStroked(
  2362. {
  2363. "label": "Create",
  2364. "onclick": function (e) {
  2365. let methodName = document.querySelector('#methodName').value;
  2366. //let methodParams = document.querySelector('#methodParams');
  2367. var params = [];
  2368. let body = '';
  2369. let paramsVal = document.querySelector("#methodParams").value;
  2370. if (paramsVal !== '') {
  2371. try {
  2372. params = JSON.parse(paramsVal);
  2373. //params.push(prmtr);
  2374. } catch (e) {
  2375. self.logger.error('Invalid Value');
  2376. }
  2377. }
  2378. self.kernel.createMethod(this._editorNode, methodName, params, body);
  2379. this._setNode(this._editorNode);
  2380. // let editor = document.querySelector("#aceEditor").env.editor;
  2381. // codeEditorDoit.call(self, editor, this._editorNode);
  2382. }
  2383. })
  2384. ]
  2385. }
  2386. ]
  2387. }
  2388. ]
  2389. //$components:
  2390. }
  2391. }
  2392. let propWindow = {
  2393. $cell: true,
  2394. $type: "div",
  2395. class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
  2396. style: "overflow-y: scroll; max-height: 800px;",
  2397. $components: [
  2398. {
  2399. $type: "div",
  2400. class: "mdc-layout-grid__inner",
  2401. $components: [
  2402. {
  2403. $type: "div",
  2404. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  2405. $components: [
  2406. nodesCell
  2407. ]
  2408. }
  2409. ]
  2410. }
  2411. // <button class="mdc-button">
  2412. // Flat button
  2413. // </button>
  2414. ]
  2415. }
  2416. let clientListCell = {
  2417. $cell: true,
  2418. $type: "div",
  2419. class: "mdc-list",
  2420. id: "clientsList",
  2421. _watchNodes: [],
  2422. _listElement: function (m) {
  2423. return {
  2424. $type: "a",
  2425. class: "mdc-list-item",
  2426. $href: "#",
  2427. $text: m.name,
  2428. onclick: function (e) {
  2429. //self.currentNodeID = m.ID;
  2430. //document.querySelector('#currentNode')._setNode(m.ID);
  2431. }
  2432. }
  2433. },
  2434. $init: function () {
  2435. var t = this;
  2436. setInterval(function () {
  2437. t._updateMe();
  2438. }, 1000);
  2439. },
  2440. _updateMe: function () {
  2441. let clientNodes = self.nodes["http://vwf.example.com/clients.vwf"];
  2442. if (clientNodes) this._watchNodes = self.nodes["http://vwf.example.com/clients.vwf"].children.slice();
  2443. },
  2444. $update: function () {
  2445. //this._clientNodes
  2446. this.$components = this._watchNodes.map(this._listElement)
  2447. }
  2448. }
  2449. //createCellWindow("clientsWindow", clientListCell, "Clients");
  2450. //createCellWindow("propWindow", propWindow, "Scene");
  2451. createCellWindow("codeEditorWindow", codeEditorWindow, "Code editor");
  2452. createCellWindow("propEditorWindow", propEditorWindow, "Prop editor");
  2453. let viewSceneProps = {
  2454. $cell: true,
  2455. $type: "div",
  2456. class: "propGrid mdc-layout-grid mdc-layout-grid--align-left",
  2457. //style: "overflow-y: scroll; max-height: 500px; overflow-x: hidden;",
  2458. $components: [
  2459. {
  2460. $type: "div",
  2461. class: "mdc-layout-grid__inner",
  2462. $components: [
  2463. {
  2464. $type: "div",
  2465. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  2466. $components: [
  2467. nodesCell
  2468. ]
  2469. }
  2470. ]
  2471. }
  2472. ]
  2473. }
  2474. let sideBar = {
  2475. $cell: true,
  2476. $type: "div",
  2477. id: 'sideBar',
  2478. class: "sideBar mdc-top-app-bar--fixed-adjust",
  2479. _sideBarComponent: {},
  2480. _sideCurrentNode: '',
  2481. $init: function () {
  2482. this.style.visibility = 'hidden';
  2483. let fileName = 'appui_js';
  2484. let worldName = self.helpers.getRoot(true).root;//url.split('/')[0];
  2485. _LCS_WORLD_USER.get('worlds').get(worldName).get(fileName).once(res => {
  2486. this._importScript(res.file);
  2487. })
  2488. },
  2489. _importScript: function (sSrc, fOnload) {
  2490. var oScript = document.createElement("script");
  2491. oScript.type = "text\/javascript";
  2492. oScript.async = false;
  2493. //oScript.onerror = loadError;
  2494. if (fOnload) { oScript.onload = fOnload; }
  2495. oScript.text = sSrc;
  2496. //let sideBar = document.querySelector('#sideBar');
  2497. this.appendChild(oScript);
  2498. },
  2499. _getAppDef: async function () {
  2500. // let response = await fetch("/" + self.getRoot() + "/appui.js");
  2501. // let data = await response.text();
  2502. // //console.log(data)
  2503. // return data
  2504. },
  2505. $update: function () {
  2506. this.$components = [
  2507. {
  2508. $type: "button",
  2509. class: "mdc-button mdc-button--compact",
  2510. $text: "X",
  2511. onclick: function (e) {
  2512. document.querySelector('#sideBar').style.visibility = 'hidden';
  2513. this._sideBarComponent = Object.assign({}, {});
  2514. }
  2515. },
  2516. this._sideBarComponent
  2517. ]
  2518. }
  2519. //$components: [this._sideComponents]
  2520. }
  2521. document.querySelector('#' + 'sideBar').$cell(sideBar)
  2522. let defaultApp = function () {
  2523. return {
  2524. $cell: true,
  2525. $type: "div",
  2526. class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
  2527. $components: [
  2528. {
  2529. $type: "div",
  2530. class: "mdc-layout-grid__inner",
  2531. $components: [
  2532. {
  2533. $type: "div",
  2534. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  2535. $components: [
  2536. {
  2537. $type: "h3",
  2538. class: "mdc-typography--headline",
  2539. $text: "Application",
  2540. }
  2541. ]
  2542. }
  2543. ]
  2544. }
  2545. ]
  2546. }
  2547. }
  2548. let drawerCell = {
  2549. $cell: true,
  2550. $type: "div",
  2551. class: "mdc-drawer__content",
  2552. $components: [
  2553. {
  2554. $type: "nav",
  2555. class: "mdc-list",
  2556. $init: function () { },
  2557. $components: [
  2558. {
  2559. $type: "a",
  2560. class: "mdc-list-item mdc-list-item--activated",
  2561. $href: "#",
  2562. tabindex: "-1",
  2563. onclick: function (e) {
  2564. e.preventDefault();
  2565. let sideBar = document.querySelector('#sideBar');
  2566. try {
  2567. sideBar._sideBarComponent = createApp.call(self);
  2568. } catch (e) {
  2569. sideBar._sideBarComponent = defaultApp();
  2570. }
  2571. self.drawer.open = false//!self.drawer.open
  2572. //self.drawer.close();
  2573. document.querySelector('#sideBar').style.visibility = 'visible';
  2574. },
  2575. $components: [{
  2576. $type: "i",
  2577. class: "material-icons mdc-list-item__graphic",
  2578. 'aria-hidden': "true",
  2579. $text: "play_arrow"
  2580. },
  2581. {
  2582. $text: self.lang.t("App")
  2583. }]
  2584. },
  2585. {
  2586. $type: "a",
  2587. class: "mdc-list-item",
  2588. $href: "#",
  2589. tabindex: "-1",
  2590. onclick: function (e) {
  2591. e.preventDefault();
  2592. let sideBar = document.querySelector('#sideBar');
  2593. sideBar._sideBarComponent = viewSceneProps;
  2594. let currentNode = document.querySelector('#sideBar')._sideCurrentNode;
  2595. currentNode == '' ? document.querySelector('#sideBar')._sideCurrentNode = (vwf_view.kernel.find("", "/")[0]) :
  2596. document.querySelector('#sideBar')._sideCurrentNode = currentNode;
  2597. document.querySelector('#sideBar').style.visibility = 'visible';
  2598. self.drawer.open = !self.drawer.open
  2599. // let currentNode = document.querySelector('#currentNode')._currentNode;
  2600. // currentNode == '' ? document.querySelector('#currentNode')._setNode(vwf_view.kernel.find("", "/")[0]) :
  2601. // document.querySelector('#currentNode')._setNode(currentNode);
  2602. },
  2603. $components: [{
  2604. $type: "i",
  2605. class: "material-icons mdc-list-item__graphic",
  2606. $text: "description"
  2607. },
  2608. {
  2609. $text: "Scene"
  2610. }
  2611. ]
  2612. },
  2613. {
  2614. $type: "a",
  2615. class: "mdc-list-item",
  2616. $href: "#",
  2617. tabindex: "-1",
  2618. onclick: function (e) {
  2619. e.preventDefault();
  2620. //self.currentNodeID = m.ID;
  2621. // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
  2622. // document.querySelector('#clientsWindow').style.visibility = 'visible';
  2623. let sideBar = document.querySelector('#sideBar');
  2624. sideBar._sideBarComponent = createSettings;
  2625. self.drawer.open = !self.drawer.open
  2626. document.querySelector('#sideBar').style.visibility = 'visible';
  2627. },
  2628. $components: [{
  2629. $type: "i",
  2630. class: "material-icons mdc-list-item__graphic",
  2631. 'aria-hidden': "true",
  2632. $text: "create"
  2633. },
  2634. {
  2635. $text: "Create"
  2636. }]
  2637. },
  2638. {
  2639. $type: "a",
  2640. class: "mdc-list-item",
  2641. $href: "#",
  2642. tabindex: "-1",
  2643. onclick: function (e) {
  2644. e.preventDefault();
  2645. // var currentNode = document.querySelector('#currentNode')._currentNode;
  2646. // if (currentNode == '') {
  2647. // currentNode = vwf_view.kernel.find("", "/")[0];
  2648. // }
  2649. document.querySelector('#liveCodeEditor')._setNode(vwf_view.kernel.find("", "/")[0]);
  2650. //createAceEditor(self, currentNode);
  2651. document.querySelector('#codeEditorWindow').style.visibility = 'visible';
  2652. },
  2653. $components: [{
  2654. $type: "i",
  2655. class: "material-icons mdc-list-item__graphic",
  2656. 'aria-hidden': "true",
  2657. $text: "code"
  2658. },
  2659. {
  2660. $text: "Code editor"
  2661. }]
  2662. },
  2663. {
  2664. $type: "a",
  2665. class: "mdc-list-item",
  2666. $href: "#",
  2667. tabindex: "-1",
  2668. onclick: function (e) {
  2669. e.preventDefault();
  2670. //self.currentNodeID = m.ID;
  2671. // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
  2672. // document.querySelector('#clientsWindow').style.visibility = 'visible';
  2673. let sideBar = document.querySelector('#sideBar');
  2674. sideBar._sideBarComponent = avatarSettings;
  2675. self.drawer.open = !self.drawer.open
  2676. document.querySelector('#sideBar').style.visibility = 'visible';
  2677. },
  2678. $components: [{
  2679. $type: "i",
  2680. class: "material-icons mdc-list-item__graphic",
  2681. 'aria-hidden': "true",
  2682. $text: "account_circle"
  2683. },
  2684. {
  2685. $text: "My Avatar"
  2686. }]
  2687. },
  2688. {
  2689. $type: "a",
  2690. class: "mdc-list-item",
  2691. $href: "#",
  2692. tabindex: "-1",
  2693. onclick: function (e) {
  2694. e.preventDefault();
  2695. //self.currentNodeID = m.ID;
  2696. // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
  2697. let sideBar = document.querySelector('#sideBar');
  2698. sideBar._sideBarComponent = viewSettings;
  2699. self.drawer.open = !self.drawer.open
  2700. document.querySelector('#sideBar').style.visibility = 'visible';
  2701. },
  2702. $components: [{
  2703. $type: "i",
  2704. class: "material-icons mdc-list-item__graphic",
  2705. 'aria-hidden': "true",
  2706. $text: "settings"
  2707. },
  2708. {
  2709. $text: "Settings"
  2710. }]
  2711. },
  2712. {
  2713. $type: "a",
  2714. class: "mdc-list-item",
  2715. $href: "#",
  2716. tabindex: "-1",
  2717. onclick: function (e) {
  2718. e.preventDefault();
  2719. //self.currentNodeID = m.ID;
  2720. // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
  2721. let sideBar = document.querySelector('#sideBar');
  2722. sideBar._sideBarComponent = loadSaveSettings;
  2723. if (document.querySelector('#loadSaveSettings')) {
  2724. //document.querySelector('#loadSaveSettings')._refresh();
  2725. //document.querySelector('#loadSaveSettings')._getStates();
  2726. }
  2727. //sideBar._sideBarComponent._getStates();
  2728. self.drawer.open = !self.drawer.open
  2729. document.querySelector('#sideBar').style.visibility = 'visible';
  2730. },
  2731. $components: [{
  2732. $type: "i",
  2733. class: "material-icons mdc-list-item__graphic",
  2734. 'aria-hidden': "true",
  2735. $text: "save"
  2736. },
  2737. {
  2738. $text: "Clone/Save"
  2739. }]
  2740. },
  2741. self.widgets.divider,
  2742. webrtcGUI,
  2743. self.widgets.divider,
  2744. self.widgets.headerH3("h3", "Users online", "userList mdc-list-group__subheader"),
  2745. clientListCell
  2746. //widgets.headerH3("h3", "WebRTC", "userList mdc-list-group__subheader"),
  2747. ]
  2748. }
  2749. // {
  2750. // $cell: true,
  2751. // $type: "div",
  2752. // class: "mdc-persistent-drawer__toolbar-spacer",
  2753. // },
  2754. // {
  2755. // $cell: true,
  2756. // $type: "div",
  2757. // class: "mdc-list-group",
  2758. // $components: [{
  2759. // $cell: true,
  2760. // $type: "nav",
  2761. // class: "mdc-list",
  2762. // $components: [
  2763. // ]
  2764. // }]
  2765. // }
  2766. ]
  2767. };
  2768. // <div class="mdc-form-field">
  2769. // <input type="checkbox" id="input">
  2770. // <label for="input">Input Label</label>
  2771. // </div>
  2772. document.querySelector("#drawer").$cell({
  2773. $cell: true,
  2774. $type: "aside",
  2775. class: "mdc-drawer mdc-drawer--modal",
  2776. $init: function () {
  2777. let elScrim = document.createElement("div");
  2778. elScrim.classList.add("mdc-drawer-scrim");
  2779. this.after(elScrim);
  2780. self.drawer = new mdc.drawer.MDCDrawer(this);
  2781. },
  2782. $components: [
  2783. {
  2784. $type: "div",
  2785. class: "mdc-drawer__header",
  2786. $components: [
  2787. {
  2788. $type: "h3",
  2789. class: "mdc-drawer__title",
  2790. $text: self.lang.t("home")
  2791. },
  2792. {
  2793. $type: "h6",
  2794. class: "mdc-drawer__subtitle",
  2795. $text: "menu"
  2796. }
  2797. ]
  2798. },
  2799. // {
  2800. // $type: "button"
  2801. // },
  2802. drawerCell]
  2803. }
  2804. );
  2805. let toolbar = {
  2806. $cell: true,
  2807. $type: "div",
  2808. class: "mdc-top-app-bar__row",
  2809. $components: [{
  2810. $type: "section",
  2811. class: "mdc-top-app-bar__section mdc-top-app-bar__section--align-start",
  2812. $components: [
  2813. {
  2814. $type: "button",
  2815. type: "button",
  2816. class: "material-icons mdc-top-app-bar__navigation-icon",
  2817. $text: "menu"
  2818. },
  2819. {
  2820. $type: "span",
  2821. class: "mdc-top-app-bar__title catalog-title",
  2822. $text: "LiveCoding.space"
  2823. },
  2824. {
  2825. $type: "div",
  2826. class: "mdc-menu-anchor",
  2827. $components: [
  2828. {
  2829. $type: "a",
  2830. class: "material-icons mdc-top-app-bar__action-item",
  2831. id: "toggleCreate",
  2832. $text: "apps",
  2833. 'aria-label': "More"
  2834. },
  2835. {
  2836. $type: "div",
  2837. class: "mdc-menu mdc-menu-surface",
  2838. "tabindex": "-1",
  2839. id: "create-menu",
  2840. $init: function () {
  2841. //var menuEl = document.querySelector('#demo-menu');
  2842. var menu = new mdc.menu.MDCMenu(this);
  2843. var toggle = document.querySelector('#toggleCreate');
  2844. toggle.addEventListener('click', function () {
  2845. menu.open = !menu.open;
  2846. });
  2847. },
  2848. style: "transform-origin: right top 0px; right: 0px; top: 0px;",
  2849. $components: [
  2850. {
  2851. $type: "ul",
  2852. class: "mdc-menu__items mdc-list",
  2853. role: "menu",
  2854. 'aria-hidden': "true",
  2855. // style: "transform: scale(1, 1);",
  2856. $components: [
  2857. {
  2858. $type: "li",
  2859. class: "mdc-list-item",
  2860. role: "menuitem",
  2861. tabindex: "0",
  2862. $text: "Apps"
  2863. }
  2864. ]
  2865. }
  2866. ]
  2867. }
  2868. ]
  2869. },
  2870. self.widgets.icontoggle({
  2871. 'styleClass': "mdc-top-app-bar__action-item",
  2872. 'id': "selectNodeSwitch",
  2873. 'label': 'select',
  2874. 'on': JSON.stringify({ "content": "radio_button_checked", "label": "Select" }),
  2875. 'off': JSON.stringify({ "content": "radio_button_unchecked", "label": "Unselect" }),
  2876. 'state': false,
  2877. 'init': function () {
  2878. this.addEventListener('MDCIconToggle:change', (e) => {
  2879. let avatarID = 'avatar-' + vwf.moniker_;
  2880. let avatarNode = self.nodes['avatar-' + vwf.moniker_];
  2881. let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
  2882. if (mode) {
  2883. console.log("unselect");
  2884. vwf_view.kernel.setProperty(avatarID, "selectMode", false);
  2885. } else {
  2886. console.log("select")
  2887. vwf_view.kernel.setProperty(avatarID, "selectMode", true);
  2888. }
  2889. });
  2890. }
  2891. })
  2892. ]
  2893. },
  2894. {
  2895. $type: "section",
  2896. class: "mdc-top-app-bar__section mdc-top-app-bar__section--align-end",
  2897. $components: [
  2898. {
  2899. $type: "a",
  2900. href: "#",
  2901. class: "mdc-top-app-bar__action-item",
  2902. $text: "EN",
  2903. onclick: function () {
  2904. //self.lang.changeLanguageTo('en')
  2905. localStorage.setItem('krestianstvo_locale', 'en');
  2906. window.location.reload(true);
  2907. }
  2908. },
  2909. {
  2910. $type: "a",
  2911. href: "#",
  2912. class: "mdc-top-app-bar__action-item",
  2913. $text: "RU",
  2914. onclick: function () {
  2915. //self.lang.changeLanguageTo('ru')
  2916. localStorage.setItem('krestianstvo_locale', 'ru');
  2917. window.location.reload(true);
  2918. }
  2919. },
  2920. {
  2921. $type: "a",
  2922. href: "#",
  2923. class: "material-icons mdc-top-app-bar__action-item",
  2924. $text: "help",
  2925. 'aria-label': "Help",
  2926. onclick: function (e) {
  2927. e.preventDefault();
  2928. console.log("TODO: help window")
  2929. }
  2930. }
  2931. ]
  2932. }
  2933. ]
  2934. };
  2935. document.querySelector("#toolbar").$cell({
  2936. $cell: true,
  2937. $type: "div",
  2938. class: "drawer-frame-app-content",
  2939. $components: [
  2940. {
  2941. $type: "header",
  2942. class: "mdc-top-app-bar drawer-top-app-bar",
  2943. $init: function () {
  2944. const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(this);
  2945. topAppBar.listen('MDCTopAppBar:nav', () => {
  2946. self.drawer.open = !self.drawer.open;
  2947. });
  2948. },
  2949. $components: [
  2950. toolbar
  2951. ]
  2952. }
  2953. ]
  2954. }
  2955. );
  2956. var toggleNodes = document.querySelectorAll('.mdc-icon-toggle');
  2957. toggleNodes.forEach(el => {
  2958. mdc.iconToggle.MDCIconToggle.attachTo(el);
  2959. });
  2960. //==============
  2961. },
  2962. createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  2963. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  2964. // var nodeIDAttribute = $.encoder.encodeForHTMLAttribute("id", nodeID, true);
  2965. // var childIDAttribute = $.encoder.encodeForHTMLAttribute("id", childID, true);
  2966. // var childIDAlpha = $.encoder.encodeForAlphaNumeric(childID);
  2967. var kernel = this.kernel;
  2968. var self = this;
  2969. var parent = this.nodes[nodeID];
  2970. var node = this.nodes[childID] = {
  2971. children: [],
  2972. properties: [],
  2973. events: {},
  2974. methods: {},
  2975. parent: parent,
  2976. parentID: nodeID,
  2977. ID: childID,
  2978. extendsID: childExtendsID,
  2979. implementsIDs: childImplementsIDs,
  2980. source: childSource,
  2981. name: childName,
  2982. };
  2983. if (parent) {
  2984. parent.children.push(node);
  2985. }
  2986. if (childID == vwf_view.kernel.find("", "/")[0] && childExtendsID && this.kernel.test(childExtendsID,
  2987. "self::element(*,'http://vwf.example.com/aframe/ascene.vwf')", childExtendsID)) {
  2988. this.scenes[childID] = node;
  2989. }
  2990. let nodeCell = document.querySelector("#currentNode");
  2991. if (nodeCell !== null) {
  2992. if (nodeCell._currentNode === nodeID) {
  2993. nodeCell._getChildNodes();
  2994. }
  2995. }
  2996. if (nodeID === this.kernel.application()) {
  2997. // document.querySelector('a-scene').classList.add("mdc-toolbar-fixed-adjust");
  2998. document.querySelector('body').classList.add("editor-body");
  2999. }
  3000. },
  3001. createdProperty: function (nodeID, propertyName, propertyValue) {
  3002. return this.initializedProperty(nodeID, propertyName, propertyValue);
  3003. },
  3004. initializedProperty: function (nodeID, propertyName, propertyValue) {
  3005. var node = this.nodes[nodeID];
  3006. if (!node) return; // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
  3007. var property = node.properties[propertyName] = createProperty.call(this, node, propertyName, propertyValue);
  3008. node.properties.push(property);
  3009. },
  3010. deletedNode: function (nodeID) {
  3011. var node = this.nodes[nodeID];
  3012. node.parent.children.splice(node.parent.children.indexOf(node), 1);
  3013. delete this.nodes[nodeID];
  3014. let nodeCell = document.querySelector("#currentNode");
  3015. if (nodeCell) {
  3016. if (nodeCell._currentNode !== "") {
  3017. if (nodeCell._currentNode !== nodeID) {
  3018. //&& (this.nodes[nodeID] !== undefined)
  3019. nodeCell._getChildNodes();
  3020. } else {
  3021. nodeCell._setNode(vwf_view.kernel.find("", "/")[0]);
  3022. nodeCell._getChildNodes();
  3023. }
  3024. }
  3025. }
  3026. },
  3027. //addedChild: [ /* nodeID, childID, childName */ ],
  3028. //removedChild: [ /* nodeID, childID */ ],
  3029. satProperty: function (nodeID, propertyName, propertyValue) {
  3030. var node = this.nodes[nodeID];
  3031. if (!node) return; // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
  3032. // It is possible for a property to have satProperty called for it without ever getting an
  3033. // initializedProperty (if that property delegated to itself or another on replication)
  3034. // Catch that case here and create the property
  3035. if (!node.properties[propertyName]) {
  3036. var property = node.properties[propertyName] = createProperty.call(this, node, propertyName, propertyValue);
  3037. node.properties.push(property);
  3038. }
  3039. try {
  3040. propertyValue = utility.transform(propertyValue, utility.transforms.transit);
  3041. node.properties[propertyName].value = JSON.stringify(propertyValue);
  3042. node.properties[propertyName].rawValue = propertyValue;
  3043. } catch (e) {
  3044. this.logger.warnx("satProperty", nodeID, propertyName, propertyValue,
  3045. "stringify error:", e.message);
  3046. node.properties[propertyName].value = propertyValue;
  3047. }
  3048. let nodeCell = document.querySelector('#currentNode');
  3049. if (nodeCell !== null) {
  3050. if (nodeCell._currentNode == nodeID && propertyName == 'isPlaying') {
  3051. console.log('SET PLAY !!!');
  3052. let compID = 'soundStopStartSwitch-' + nodeID;
  3053. let playSwitch = document.querySelector("[id='" + compID + "']");
  3054. if (playSwitch) {
  3055. // const mycomp = new mdc.iconToggle.MDCIconToggle(playSwitch); //new mdc.select.MDCIconToggle
  3056. playSwitch._comp.on = propertyValue;
  3057. }
  3058. }
  3059. }
  3060. if (nodeCell !== null) {
  3061. if (nodeCell._currentNode == nodeID && propertyName == 'edit') {
  3062. console.log('EDIT !!!')
  3063. }
  3064. }
  3065. let propCell = document.querySelector("#currentNode #prop-" + propertyName);
  3066. let propSlider = document.querySelector("#currentNode #prop-slider-" + propertyName);
  3067. if (propCell !== null) {
  3068. if (propCell._currentNode == nodeID) {
  3069. propCell.value = node.properties[propertyName].getValue();
  3070. }
  3071. }
  3072. if (propSlider !== null) {
  3073. if (propSlider._currentNode == nodeID) {
  3074. //const propSliderComp = new new mdc.slider.MDCSlider(propSlider);
  3075. propSlider._comp.value = node.properties[propertyName].getValue();
  3076. }
  3077. }
  3078. },
  3079. //gotProperty: [ /* nodeID, propertyName, propertyValue */ ],
  3080. gotProperty: function (nodeID, propertyName, propertyValue) {
  3081. var node = this.nodes[nodeID];
  3082. if (!node) return; // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
  3083. let nodeCell = document.querySelector('#currentNode');
  3084. if (nodeCell !== null) {
  3085. if (nodeCell._currentNode == nodeID && propertyName == 'edit') {
  3086. let editCheckBox = document.querySelector("#currentNode #editnode");
  3087. if (editCheckBox) {
  3088. let mdcSwitch = editCheckBox._switch;
  3089. if (mdcSwitch) {
  3090. if (propertyValue) {
  3091. //editCheckBox.setAttribute('checked', '');
  3092. //editCheckBox.classList.add("mdc-switch--checked");
  3093. mdcSwitch.checked = true;
  3094. } else {
  3095. // let checkAttr = editCheckBox.getAttribute('checked');
  3096. // if (checkAttr) editCheckBox.removeAttribute('checked');
  3097. mdcSwitch.checked = false;
  3098. }
  3099. }
  3100. }
  3101. console.log('EDIT !!! is ' + propertyValue)
  3102. }
  3103. }
  3104. },
  3105. createdMethod: function (nodeID, methodName, methodParameters, methodBody) {
  3106. var node = this.nodes[nodeID];
  3107. if (node) {
  3108. node.methods[methodName] = methodParameters;
  3109. }
  3110. },
  3111. //calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
  3112. //},
  3113. createdEvent: function (nodeID, eventName, eventParameters) {
  3114. var node = this.nodes[nodeID];
  3115. if (node) {
  3116. node.events[eventName] = eventParameters;
  3117. }
  3118. },
  3119. firedEvent: function (nodeID, eventName, eventParameters) {
  3120. var node = this.nodes[nodeID];
  3121. if (node) {
  3122. if (eventName == 'printEvent'){
  3123. var clientThatSatProperty = self.kernel.client();
  3124. var me = self.kernel.moniker();
  3125. // If the transform property was initially updated by this view....
  3126. if ( clientThatSatProperty == me) {
  3127. let editor = document.querySelector("#aceEditor").env.editor;
  3128. if(editor){
  3129. var cursorPosition = editor.getCursorPosition();
  3130. var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
  3131. if (selectedText !== "") {
  3132. cursorPosition = editor.selection.getRange().end;
  3133. }
  3134. let data = eventParameters[0];//JSON.stringify(eventParameters[0]);
  3135. editor.session.insert(cursorPosition, data);
  3136. }
  3137. //console.log(eventParameters);
  3138. }
  3139. }
  3140. }
  3141. },
  3142. executed: function (nodeID, scriptText, scriptType) {
  3143. // var nodeScript = {
  3144. // text: scriptText,
  3145. // type: scriptType,
  3146. // };
  3147. // if ( !this.allScripts[ nodeID ] ) {
  3148. // var nodeScripts = new Array();
  3149. // nodeScripts.push(nodeScript);
  3150. // this.allScripts[ nodeID ] = nodeScripts;
  3151. // }
  3152. // else {
  3153. // this.allScripts[ nodeID ].push(nodeScript);
  3154. // }
  3155. },
  3156. //ticked: [ /* time */ ],
  3157. });
  3158. function createCellWindow(elementID, cellNode, title) {
  3159. document.querySelector('#' + elementID).$cell({
  3160. $cell: true,
  3161. $type: "div",
  3162. id: elementID,
  3163. style: 'position: absolute;',
  3164. class: 'draggable',
  3165. $init: function () {
  3166. // let draggie = new Draggabilly('.draggable', {
  3167. // handle: '.handle',
  3168. // containment: true
  3169. // });
  3170. // get all draggie elements
  3171. var draggableElems = document.querySelectorAll('.draggable');
  3172. // array of Draggabillies
  3173. var draggies = []
  3174. // init Draggabillies
  3175. for (var i = 0, len = draggableElems.length; i < len; i++) {
  3176. var draggableElem = draggableElems[i];
  3177. var draggie = new Draggabilly(draggableElem, {
  3178. handle: '.handle'
  3179. //containment: true
  3180. });
  3181. draggies.push(draggie);
  3182. }
  3183. this.style.visibility = 'hidden';
  3184. },
  3185. $components: [
  3186. {
  3187. $type: "div",
  3188. class: "handle"
  3189. },
  3190. {
  3191. $type: "button",
  3192. class: "mdc-button mdc-button--compact",
  3193. $text: "X",
  3194. onclick: function (e) {
  3195. //self.currentNodeID = m.ID;
  3196. if( elementID == 'codeEditorWindow'){
  3197. //self.nodes[currentNode].liveBindings = {};
  3198. }
  3199. document.querySelector('#' + elementID).style.visibility = 'hidden';
  3200. }
  3201. },
  3202. {
  3203. $type: "span",
  3204. class: "mdc-typography--button",
  3205. $text: title
  3206. },
  3207. cellNode,
  3208. {
  3209. $type: "div",
  3210. class: "handle",
  3211. style: "height: 10px; width: inherit;",
  3212. //$text: "sdfsdf"
  3213. }
  3214. // { $text: "23423"}
  3215. ]
  3216. }
  3217. );
  3218. }
  3219. // -- getChildByName --------------------------------------------------------------------
  3220. function getChildByName(node, childName) {
  3221. var childNode = undefined;
  3222. for (var i = 0; i < node.children.length && childNode === undefined; i++) {
  3223. if (node.children[i].name == childName) {
  3224. childNode = node.children[i];
  3225. }
  3226. }
  3227. return childNode;
  3228. };
  3229. // -- viewScript ------------------------------------------------------------------------
  3230. function createAceEditor(view, nodeID, elID) {
  3231. var editor = view.ace.edit(elID);
  3232. editor.setTheme("ace/theme/monokai");
  3233. editor.setFontSize(16);
  3234. editor.getSession().setMode("ace/mode/javascript");
  3235. editor.commands.addCommand({
  3236. name: "doit",
  3237. bindKey: { win: "Ctrl-e", mac: "Command-e" },
  3238. exec: function () {
  3239. codeEditorDoit(editor, nodeID);
  3240. }
  3241. });
  3242. editor.commands.addCommand({
  3243. name: "printit",
  3244. bindKey: { win: "Ctrl-b", mac: "Command-b" },
  3245. exec: function () {
  3246. codeEditorPrintit(editor, nodeID);
  3247. }
  3248. });
  3249. return editor;
  3250. }
  3251. function isAFrameComponent(nodeID) {
  3252. let node = self.nodes[nodeID];
  3253. let nodeProtos = getPrototypes(self.kernel, node.extendsID);
  3254. if (nodeProtos.includes('http://vwf.example.com/aframe/componentNode.vwf')) {
  3255. return true
  3256. }
  3257. return false
  3258. }
  3259. function isAFrameEntity(nodeID) {
  3260. let node = self.nodes[nodeID];
  3261. let nodeProtos = getPrototypes(self.kernel, node.extendsID);
  3262. if (nodeProtos.includes('http://vwf.example.com/aframe/node.vwf')) {
  3263. return true
  3264. }
  3265. return false
  3266. }
  3267. function getPrototypes(kernel, extendsID) {
  3268. var prototypes = [];
  3269. var id = extendsID;
  3270. while (id !== undefined) {
  3271. prototypes.push(id);
  3272. id = kernel.prototype(id);
  3273. }
  3274. return prototypes;
  3275. }
  3276. function getPrototypes(kernel, extendsID) {
  3277. var prototypes = [];
  3278. var id = extendsID;
  3279. while (id !== undefined) {
  3280. prototypes.push(id);
  3281. id = kernel.prototype(id);
  3282. }
  3283. return prototypes;
  3284. }
  3285. function createProperty(node, propertyName, propertyValue) {
  3286. var property = {
  3287. name: propertyName,
  3288. rawValue: propertyValue,
  3289. value: undefined,
  3290. getValue: function () {
  3291. var propertyValue;
  3292. if (this.value == undefined) {
  3293. try {
  3294. propertyValue = utility.transform(this.rawValue, utility.transforms.transit);
  3295. this.value = JSON.stringify(propertyValue);
  3296. } catch (e) {
  3297. this.logger.warnx("createdProperty", nodeID, this.propertyName, this.rawValue,
  3298. "stringify error:", e.message);
  3299. this.value = this.rawValue;
  3300. }
  3301. }
  3302. return this.value;
  3303. }
  3304. };
  3305. return property;
  3306. }
  3307. function getProperties(kernel, extendsID) {
  3308. var pTypes = getPrototypes(kernel, extendsID);
  3309. var pProperties = {};
  3310. if (pTypes) {
  3311. for (var i = 0; i < pTypes.length; i++) {
  3312. var nd = this.nodes[pTypes[i]];
  3313. if (nd && nd.properties) {
  3314. for (var key in nd.properties) {
  3315. pProperties[key] = { "prop": nd.properties[key], "prototype": pTypes[i] };
  3316. }
  3317. }
  3318. }
  3319. }
  3320. return pProperties;
  3321. }
  3322. function getChildren(kernel, extendsID) {
  3323. var pTypes = getPrototypes(kernel, extendsID);
  3324. var pChildren = {};
  3325. if (pTypes) {
  3326. for (var i = 0; i < pTypes.length; i++) {
  3327. var nd = this.nodes[pTypes[i]];
  3328. if (nd && nd.children) {
  3329. for (var key in nd.children) {
  3330. pChildren[key] = nd.children[key];
  3331. }
  3332. }
  3333. }
  3334. }
  3335. return pChildren;
  3336. }
  3337. function getEvents(kernel, extendsID) {
  3338. var pTypes = getPrototypes(kernel, extendsID);
  3339. var events = {};
  3340. if (pTypes) {
  3341. for (var i = 0; i < pTypes.length; i++) {
  3342. var nd = this.nodes[pTypes[i]];
  3343. if (nd && nd.events) {
  3344. for (var key in nd.events) {
  3345. events[key] = nd.events[key];
  3346. }
  3347. }
  3348. }
  3349. }
  3350. return events;
  3351. }
  3352. function getMethods(kernel, extendsID) {
  3353. var pTypes = getPrototypes(kernel, extendsID);
  3354. var methods = {};
  3355. if (pTypes) {
  3356. for (var i = 0; i < pTypes.length; i++) {
  3357. var nd = this.nodes[pTypes[i]];
  3358. if (nd && nd.methods) {
  3359. for (var key in nd.methods) {
  3360. methods[key] = nd.methods[key];
  3361. }
  3362. }
  3363. }
  3364. }
  3365. return methods;
  3366. }
  3367. // -- Show Code Editor tab
  3368. function codeEditorDoit(editor, nodeID) {
  3369. var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
  3370. if (selectedText == "") {
  3371. var currline = editor.getSelectionRange().start.row;
  3372. var selectedText = editor.session.getLine(currline);
  3373. }
  3374. //console.log(selectedText);
  3375. //var sceneID = self.kernel.application();
  3376. vwf_view.kernel.execute(nodeID, selectedText);
  3377. }
  3378. function codeEditorPrintit(editor, nodeID) {
  3379. var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
  3380. if (selectedText == "") {
  3381. var currline = editor.getSelectionRange().start.row;
  3382. var selectedText = editor.session.getLine(currline);
  3383. }
  3384. //console.log(selectedText);
  3385. //var sceneID = self.kernel.application();
  3386. //vwf.views["vwf/view/editor-new"].nodes[this.id].liveBindings
  3387. //let node = self.nodes[nodeID];
  3388. let me = self.kernel.moniker();
  3389. vwf_view.kernel.fireEvent(nodeID, 'printIt', [selectedText, me]);
  3390. // let printText = _app.helpers.replaceSubStringALL(selectedText,'this','me');
  3391. // let bindString = 'vwf.views["vwf/view/aframe"].nodes["'+ nodeID + '"].liveBindings';
  3392. // let scriptText = 'let binding = '+ bindString +'; binding.me = this; lively.vm.syncEval("var print = ' + printText + '",{topLevelVarRecorder: binding});';
  3393. // vwf_view.kernel.execute(nodeID, scriptText);
  3394. // let scriptText = 'console.log(' + selectedText + ');'
  3395. // self.kernel.execute(nodeID, scriptText);
  3396. }
  3397. function codeEditorPrintitConsole (editor, nodeID) {
  3398. var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
  3399. if (selectedText == "") {
  3400. var currline = editor.getSelectionRange().start.row;
  3401. var selectedText = editor.session.getLine(currline);
  3402. }
  3403. let scriptText = 'console.log(' + selectedText + ');'
  3404. self.kernel.execute(nodeID, scriptText);
  3405. }
  3406. // -- SupportAjax -----------------------------------------------------------------------------
  3407. // function supportAjaxUploadWithProgress() {
  3408. // return supportAjaxUploadProgressEvents();
  3409. // function supportAjaxUploadProgressEvents() {
  3410. // var xhr = new XMLHttpRequest();
  3411. // return !!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
  3412. // }
  3413. // }
  3414. });