livecodingspace-app/public/drivers/view/editor.js

//"use strict";
/*
The MIT License (MIT)
Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)

Virtual World Framework Apache 2.0 license  (https://github.com/NikolaySuslov/livecodingspace/blob/master/licenses/LICENSE_VWF.md)
*/

//
/// vwf/view/editor creates a view interface for editor functions. 
/// 
/// @module vwf/view/editor
/// @requires version
/// @requires vwf/view
/// @requires vwf/utility

import { Widgets } from '/lib/ui/widgets.js';
import { Utility } from '/core/vwf/utility/utility.js';
import { Fabric } from '/core/vwf/fabric.js';

class LCSEditor extends Fabric {

    constructor(module) {

        console.log("Editor constructor");
        super(module, 'View');
        this.widgets = new Widgets;

    }

    factory(){

      let _self_ = this;

      return this.load( this.module, 
        {

            // == Module Definition ====================================================================
    
            initialize: function () {
                let self = this;
                this.ace = window.ace;
                this.widgets = _self_.widgets; //widgets;
                this.lang = _LangManager.language;
                this.helpers = _self_.helpers;
    
                this.nodes = {};
                this.scenes = {};
                this.allScripts = {};
    

               document.querySelector('body').classList.add("editor-body", "mdc-typography");
                document.querySelector('body').innerHTML +=
                `<div id="ui-controls" class="guiwindow">
                    <i id="hideui" class="mdc-icon-button material-icons" role="button" aria-pressed="true"
                        aria-label="Hide Toollbar" tabindex="0" data-toggle-on='{"label": "Hide", "content": "grid_on"}'
                        data-toggle-off='{"label": "Show", "content": "grid_off"}'>
                        grid_on
                    </i>
                    <i id="fullscreenui" class="mdc-icon-button material-icons" role="button" aria-pressed="true"
                        aria-label="Hide Toollbar" tabindex="0" data-toggle-on='{"label": "Hide", "content": "fullscreen"}'
                        data-toggle-off='{"label": "Show", "content": "fullscreen_exit"}'>
                        fullscreen
                    </i>
                </div>
                `
                function initOverGUI() {

                    // window.addEventListener("load", function (event) {
                
                    //   console.log("All resources finished loading!");
                
                      const iconEl = document.querySelector('#hideui');
                      const compHideUI = new mdc.iconButton.MDCIconButtonToggle(iconEl);
                      iconEl.addEventListener('MDCIconButtonToggle:change', (e) => {
                
                          let ui = document.querySelector('.mdc-top-app-bar');
                          if (ui) {
                
                              let chkAttr = e.detail.isOn;
                              if (chkAttr) {
                                  ui.style.visibility = 'visible'
                              } else {
                                  ui.style.visibility = 'hidden'
                              }
                          }
                
                      });
                
                      const fullScreenToggle = document.querySelector('#fullscreenui');
                      const compfullScreen = new mdc.iconButton.MDCIconButtonToggle(fullScreenToggle);
                      fullScreenToggle.addEventListener('MDCIconButtonToggle:change', (e) => {
                
                          if (screenfull.enabled) {
                              screenfull.toggle();
                          } else {
                              // Ignore or do something else
                          }
                      });
                
                  //});
                
                  }

                  mdc.autoInit();
                  initOverGUI();
                // $('body').append('<script>mdc.autoInit()</script>');
    
    
                ["drawer", "toolbar", "sideBar", "propWindow", "clientsWindow", "codeEditorWindow", "propEditorWindow", "viewSceneProps"].forEach(item => {
                    let el = document.createElement("div");
                    el.setAttribute("id", item);
                    document.body.appendChild(el);
                }
                );
    
                _LCSDB.on('auth', function (ack) {
                    if (ack.sea.pub) {
                        self.helpers.checkUserCollision();
    
                        console.log(_LCSDB.user().is);
                        let loadSave = document.querySelector('#loadSaveSettings');
                        if(loadSave){
                           
                        }
                        //self.authGUI();
                    }
                    
                });
    
                this.avatarCardDef = function (src, desc, onclickfunc) {
    
                    return {
                        $cell: true,
                        $type: "div",
                        class: "mdc-card avatar-card",
                        $init: function () {
                            this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0) ), url(' + src + ')'
    
                        },
                        onclick: onclickfunc,
                        $components: [
                            {
                                $type: "section",
                                class: "mdc-card__primary",
                                style: "padding: 1rem;",
                                $components: [
                                    {
                                        $type: "h1",
                                        class: "mdc-card__title mdc-typography--title",
                                        $text: desc.subtitle
                                    },
                                    {
                                        $type: "h2",
                                        class: "mdc-typography--subheading1",
                                        $text: desc.title
                                    }
                                ]
                            },
                            {
                                $type: "section",
                                class: "mdc-card__actions",
                                $components: [
                                    {
                                        $type: "button",
                                        class: "mdc-button mdc-button--compact mdc-card__action",
                                        //$text: "Use it",
                                        onclick: onclickfunc
                                    }
                                ]
                            }
                        ]
                    }
                }
    
                let createSettings =
                {
                    $cell: true,
                    $type: "div",
                    class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
                    $components: [
                        self.widgets.listTitle({text: 'Primitives'}),
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: make3DPrimitiveList()
                        },
                        self.widgets.listTitle({text: 'Lights'}),
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: makeLightsList()
                        },
                        self.widgets.listTitle({text: 'Objects'}),
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                self.widgets.gridListItem({
                                    imgSrc: "/drivers/view/editor/images/ui/icons/camera.png",
                                    title: 'Camera',
                                    imgSize: '30px',
                                    styleClass: "",
                                    onclickfunc: function () {
                                        let avatarID = 'avatar-' + vwf.moniker_;
                                        //let cubeName = self.GUID();
                                        vwf_view.kernel.callMethod(vwf.application(), "createCamera", [null, null, avatarID])
                                        //let cubeName = self.GUID();
                                        // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
                                    }
    
                                }),
                                self.widgets.gridListItem({
                                    imgSrc: "/drivers/view/editor/images/ui/icons/camera_offset.png",
                                    title: 'Camera with view offset',
                                    imgSize: '30px',
                                    styleClass: "",
                                    onclickfunc: function () {
                                        let avatarID = 'avatar-' + vwf.moniker_;
                                        //let cubeName = self.GUID();
                                        vwf_view.kernel.callMethod(vwf.application(), "createCameraWithOffset", [null, null, avatarID])
                                        //let cubeName = self.GUID();
                                        // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
                                    }
                                }),
                                self.widgets.gridListItem({
                                    imgSrc: "/drivers/view/editor/images/ui/icons/mirror.png",
                                    title: 'Mirror',
                                    imgSize: '30px',
                                    styleClass: "",
                                    onclickfunc: function () {
                                        let avatarID = 'avatar-' + vwf.moniker_;
                                        //let cubeName = self.GUID();
                                        vwf_view.kernel.callMethod(vwf.application(), "createMirror", [null, null, avatarID])
                                        //let cubeName = self.GUID();
                                        // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
                                    }
    
                                }),
    
    
                            ]
                        },
                        self.widgets.listTitle({text: 'Assets'}),
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                self.widgets.inputTextFieldOutlined({
                                    "id": 'assetsrc',
                                    "fieldStyle": 'width: 400px',
                                    "label": "Enter URL to asset source",
                                    "value": '',
                                    "change": function (e) {
                                        console.log(this.value)
                                    }
                                })
                            ]
                        }
    
                            ]
                        },
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
    
                                        self.widgets.buttonSimple(
                                            {
                                                label: "Image",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#assetsrc');
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    vwf_view.kernel.callMethod(vwf.application(), "createImage", [srcEl.value, null, null, avatarID])
    
                                                }
                                            }
                                        ),
                                        self.widgets.buttonSimple(
                                            {
                                                label: "Sound",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#assetsrc');
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    vwf_view.kernel.callMethod(vwf.application(), "createAudio", [srcEl.value, null, null, avatarID])
                                                }
                                            }
                                        ),
                                        self.widgets.buttonSimple(
                                            {
                                                label: "Video",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#assetsrc');
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    vwf_view.kernel.callMethod(vwf.application(), "createVideo", [srcEl.value, null, null, avatarID])
                                                }
                                            }
                                        ),
    
                                        self.widgets.buttonSimple(
                                            {
                                                label: "GLTF",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#assetsrc');
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    if (srcEl.value.includes('.gltf'))
                                                        vwf_view.kernel.callMethod(vwf.application(), "createModel", ['GLTF', srcEl.value, avatarID])
                                                }
                                            }
                                        ),
                                        self.widgets.buttonSimple(
                                            {
                                                label: "DAE",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#assetsrc');
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    if (srcEl.value.includes('.dae'))
                                                        vwf_view.kernel.callMethod(vwf.application(), "createModel", ['DAE', srcEl.value, avatarID])
                                                }
                                            }
                                        ),
                                        self.widgets.buttonSimple(
                                            {
                                                label: "OBJ",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#assetsrc');
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    if (srcEl.value.includes('.obj'))
                                                        vwf_view.kernel.callMethod(vwf.application(), "createModel", ['OBJ', srcEl.value, avatarID])
                                                }
                                            }
                                        )
    
    
                                    ]
                                }
    
    
                            ]
                        },
                        self.widgets.listTitle({text: 'Resources'}),
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
    
                                        self.widgets.gridListItem({
                                            imgSrc: "/drivers/view/editor/images/ui/icons/3ditem.png",
                                            title: 'Asset item',
                                            imgSize: '30px',
                                            styleClass: "",
                                            onclickfunc: function () {
                                                let srcEl = document.querySelector('#assetsrc');
                                                vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['ITEM', srcEl.value])
                                            }
                                        }),
                                        self.widgets.gridListItem({
                                            imgSrc: "/drivers/view/editor/images/ui/icons/image.png",
                                            title: 'Image',
                                            imgSize: '30px',
                                            styleClass: "",
                                            onclickfunc: function () {
                                                //let cubeName = self.GUID();
                                                let srcEl = document.querySelector('#assetsrc');
                                                vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['IMG', srcEl.value])
                                            }
                                        }),
                                        self.widgets.gridListItem({
                                            imgSrc: "/drivers/view/editor/images/ui/icons/video.png",
                                            title: 'Video',
                                            imgSize: '30px',
                                            styleClass: "",
                                            onclickfunc: function () {
                                                let srcEl = document.querySelector('#assetsrc');
                                                vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['VIDEO', srcEl.value])
                                            }
                                        }),
                                        self.widgets.gridListItem({
                                            imgSrc: "/drivers/view/editor/images/ui/icons/sound.png",
                                            title: 'Sound',
                                            imgSize: '30px',
                                            styleClass: "",
                                            onclickfunc: function () {
                                                let srcEl = document.querySelector('#assetsrc');
                                                vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['AUDIO', srcEl.value])
                                            }
                                        }),
                                        self.widgets.buttonSimple(
                                            {
                                                label: "MTL",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#assetsrc');
                                                    if (srcEl.value.includes('.mtl'))
                                                        vwf_view.kernel.callMethod(vwf.application(), "createAssetResource", ['ITEM', srcEl.value])
                                                }
                                            }
                                        )
    
    
                            ]
                        },
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        self.widgets.divider
                                    ]
                                },
                                
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        {
                                            $type: "h3",
                                            class: "",
                                            $text: 'Google Poly'
                                        }
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        self.widgets.inputTextFieldOutlined({
                                            "id": 'googlepolyid',
                                            "fieldStyle": 'width: 400px',
                                            "label": "Enter Google Poly model ID",
                                            "value": '',
                                            "change": function (e) {
                                                console.log(this.value)
                                            }
                                        })
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        self.widgets.buttonSimple(
                                            {
                                                label: "Load from Poly",
                                                onclick: function (e) {
                                                    let srcEl = document.querySelector('#googlepolyid');
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    vwf_view.kernel.callMethod(vwf.application(), "createGooglePoly", [srcEl.value, null, null, avatarID])
                                                }
                                            }
                                        )
                                    ]
                                }
                            ]
                        }
    
                      
    
                    ]
                }
    
                function getUniqueDisplayName(newname, addcount) {
                    if (!addcount) addcount = 0;
                    if (!newname) newname = 'Object';
                    newname = newname.replace(/[0-9]*$/g, "");
                    var nodes = self.nodes; //vwf.models.object.objects;
                    var count = 1 + addcount;
                    for (var i in nodes) {
                        if (nodes[i].id !== 0) {
                            if (nodes[i].id !== "" && nodes[i].properties.length !== 0) {
                                let thisname = vwf.getProperty(nodes[i].ID, 'displayName') || '';
                                console.log(thisname);
                                if (thisname.replace(/[0-9]*$/g, "") == newname)
                                    count++;
                            }
                        }
                    }
                    return newname + count;
                }
    
                
                function make3DPrimitiveList() {
                    let nodeNames = ['Plane', 'Cube', 'Sphere', 'Cylinder', 'Cone', 'Text'];
                    return nodeNames.map(el => {
                        return self.widgets.gridListItem({
                            imgSrc: "/drivers/view/editor/images/ui/icons/" + el.toLowerCase() + ".png",
                            imgSize: "30px",
                            styleClass:"", //"createListItem",
                            title: el,
                            onclickfunc: function () {
                                let avatarID = 'avatar-' + vwf.moniker_;
                                //let cubeName = self.GUID();
                                let displayName = getUniqueDisplayName.call(self, el.toLowerCase());
                                vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", [el.toLowerCase(), null, displayName, null, avatarID])
                            }
                        })
                    })
                }
    
                function makeLightsList() {
                    let nodeNames = ['Ambient', 'Directional', 'Hemisphere', 'Point', 'Spot'];
                    return nodeNames.map(el => {
                        return self.widgets.gridListItem({
                            imgSize: "30px",
                            styleClass: "",
                            imgSrc: "/drivers/view/editor/images/ui/icons/light_" + el.toLowerCase() + ".png",
                            title: el,
                            onclickfunc: function () {
                                let avatarID = 'avatar-' + vwf.moniker_;
                                //let cubeName = self.GUID();
                                let displayName = getUniqueDisplayName.call(self, el.toLowerCase());
                                vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", ["light", el.toLowerCase(), displayName, null, avatarID])
                            }
                        })
                    })
                }
    
                var saveAvatar = {};
                var loadAvatar = {};
                if (_LCSDB.user().is) {
                    saveAvatar = self.widgets.floatActionButton({
                        label: "save",
                        styleClass: "mdc-fab--mini",
                        onclickfunc: function () {
                            //var nodeID = document.querySelector('#currentNode')._currentNode;
                            let nodeID = 'avatar-' + self.kernel.moniker();
                            let node = self.nodes[nodeID];
                            let nodeDef = self.helpers.getNodeDef(nodeID).children.avatarNode;
                            console.log(nodeDef);
    
                            _LCSDB.user().get('profile').get('avatarNode').put(JSON.stringify(nodeDef), acc => {
                                console.log("saved: " + acc)
                            });
    
                            //vwf_view.kernel.deleteChild(node.parentID, node.name);
                            //vwf_view.kernel.deleteNode(nodeID);
                            //vwf_view.kernel.callMethod(node.parentID, "deleteNode", [node.name])
                        }
                    });
                    loadAvatar = self.widgets.floatActionButton({
                        label: "restore",
                        styleClass: "mdc-fab--mini",
                        onclickfunc: function () {
                            let nodeID = 'avatar-' + self.kernel.moniker();
                            _LCSDB.user().get('profile').get('avatarNode').once(res => {
                                if (res) {
                                    var myNode = res;
    
                                    if (self.helpers.testJSON(res)){
                                        myNode = JSON.parse(res);
                                    }  
    
                                    vwf_view.kernel.callMethod(nodeID, "changeCostume", [myNode, true]);
                                }
                            })
                        }
                    })
                }
    
                let avatarSettings =
                {
                    $cell: true,
                    $type: "div",
                    class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
                    $components: [
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        self.widgets.icontoggle({
                                            'id': "mobile_joystick",
                                            'label': 'visibility',
                                            'on': JSON.stringify({ "content": "gamepad", "label": "Show" }),
                                            'off': JSON.stringify({ "content": "gamepad", "label": "Hide" }),
                                            'state': false,
                                            'init': function () {
                                                this._driver = vwf.views["/drivers/view/aframe"];
                                                this._comp = new mdc.iconButton.MDCIconButtonToggle(this);
                                                //mdc.iconButton.MDCIconButtonToggle.attachTo(this);
                                                if (document.getElementsByClassName('touchZone').length > 0){
                                                    this._comp.on = true;
                                                    this.style.color = "#3e7e40";
                                                } else {
                                                    this._comp.on = false;
                                                    this.style.color = "#333333";
                                                }
                                                
    
                                                    this.addEventListener('MDCIconButtonToggle:change', (e) => {
                                                        let chkAttr = e.detail.isOn;
                                                        let driver = e.target._driver;
                                                        if (chkAttr) {
                                                        driver.state.showMobileJoystick();
                                                        this.style.color = "#3e7e40";
                                                       // this.classList.add('mdc-icon-toggle--enabled');
                                                            console.log("on");
        
                                                        } else {
                                                            driver.state.hideMobileJoystick();
                                                            this.style.color = "#333333";
                                                            //this.classList.add('mdc-icon-toggle--disabled');
                                                            console.log("off")
                                                        }
    
                                                    });
                                            }
                                        }),
                                        self.widgets.divider
    
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        saveAvatar,
                                        loadAvatar,
                                        self.widgets.divider,
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "Reset camera view",
                                                "onclick": function (e) {
                                                    //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                                    let controlEl = document.querySelector('#avatarControl');
                                                    controlEl.setAttribute('camera', 'active', true);
                                                }
                                            }),
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "Hide cursor",
                                                "onclick": function (e) {
                                                    //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                                    let avatarID = 'avatar-' + self.kernel.moniker();
                                                    let cursorID = vwf.find(avatarID, "./avatarNode/myHead/myCursor")[0];
                                                    //let cursorID = 'myCursor-' + avatarID;
                                                    let controlEl = document.querySelector("[id='" + cursorID + "']");
                                                    let vis = controlEl.getAttribute('visible');
                                                    this.$text = vis ? 'Show cursor' : 'Hide cursor';
    
                                                    vwf_view.kernel.callMethod(avatarID, "showHideCursor", [!vis]);
                                                    //controlEl.setAttribute('visible', !vis);
                                                }
                                            }),
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "Hide Avatar",
                                                "onclick": function (e) {
                                                    //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                                    let avatarID = 'avatar-' + self.kernel.moniker();
                                                    //let cursorID = 'myCursor-' + avatarID;
                                                    let controlEl = document.querySelector("[id='" + avatarID + "']");
                                                    let vis = controlEl.getAttribute('visible');
                                                    this.$text = vis ? 'Show Avatar' : 'Show Avatar';
                                                    vwf_view.kernel.callMethod(avatarID, "showHideAvatar", [!vis]);
                                                    //controlEl.setAttribute('visible', !vis);
                                                }
                                            }
                                        ),
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "Reset Avatar",
                                                "onclick": function (e) {
                                                    let avatarID = 'avatar-' + self.kernel.moniker();
                                                    //TODO: add XR check
                                                    vwf_view.kernel.callMethod(avatarID, "resetAvatar", []);
                                                }
                                            }
                                        )
    
    
    
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
    
                                        {
                                            $type: "div",
                                            class: "mdc-layout-grid",
                                            $components: [
                                                {
                                                    $type: "div",
                                                    class: "mdc-layout-grid__inner",
                                                    $components: [
    
                                                        {
                                                            $type: "div",
                                                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                            $components: [
    
                                                                self.avatarCardDef("/defaults/assets/avatars/ico/simple.jpg", { title: "Simple", subtitle: "Cube" },
                                                                    function (e) {
                                                                        let avatarID = 'avatar-' + self.kernel.moniker();
                                                                        vwf_view.kernel.callMethod(avatarID, "createSimpleAvatar");
    
                                                                    }
                                                                )
                                                            ]
                                                        },
                                                        {
                                                            $type: "div",
                                                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                            $components: [
                                                                self.avatarCardDef("/defaults/assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
                                                                    function (e) {
                                                                        let avatarID = 'avatar-' + self.kernel.moniker();
                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/defaults/assets/avatars/female/avatar1.gltf"]);
                                                                    }
                                                                )]
                                                        },
                                                        {
                                                            $type: "div",
                                                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                            $components: [
                                                                self.avatarCardDef("/defaults/assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
                                                                    function (e) {
                                                                        let avatarID = 'avatar-' + self.kernel.moniker();
                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/defaults/assets/avatars/male/avatar1.gltf"]);
                                                                    }
                                                                )]
                                                        }
    
                                                    ]
                                                }
                                            ]
    
                                        }
    
    
    
    
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "Wide",
                                                "onclick": function (e) {
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    vwf_view.kernel.callMethod(avatarID, "setBigVideoHead", []);
    
                                                }
                                            }),
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "Small",
                                                "onclick": function (e) {
                                                    let avatarID = 'avatar-' + vwf.moniker_;
                                                    vwf_view.kernel.callMethod(avatarID, "setSmallVideoHead", []);
    
                                                }
                                            })
    
    
                                    ]
    
                                }
                            ]
                        }
                    ]
                }
    
                let viewSettings =
                {
                    $cell: true,
                    $type: "div",
                    class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
                    $components: [
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "OSC Settings",
                                                "onclick": function (e) {
                                                    let sideBar = document.querySelector('#sideBar');
                                                    sideBar._sideBarComponent = oscSettings;
                                                    //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                                }
                                            })
                                    ]
                                }
                            ]
                        }
                    ]
                }
    
                let savedStateEl = function (item) {
                    return {
    
                        $type: "li",
                        class: "mdc-list-item",
                        role: "option",
                        $components: [
                            {
                                $text: "Saved world"
                            }
                        ]
    
                    }
                }
    
                let stateListElement = function (item) {
    
                    let liEl = {
                        $type: "option",
                        id: "",
                        applicationpath: "",
                        value: "no_saves",
                        $components: [
                            {
                                $text: "no saves"
                            }
                        ]
                    }
    
                    let applicationName = item.applicationpath.split("/");
    
    
                    if (applicationName == "") {
                        return liEl
                    }
    
                    if (applicationName.length > 0) {
                        applicationName = applicationName[applicationName.length - 1];
                    }
    
                    if (applicationName.length > 0) {
                        applicationName = applicationName.charAt(0).toUpperCase() + applicationName.slice(1);
                    }
    
                    if (item.latestsave) {
                        liEl = {
                            $type: "option",
                            id: item.savename,
                            value: item.savename,
                            applicationpath: item.applicationpath,
                            $components: [
                                {
                                    $text: applicationName + ": " + item.savename
                                }
                            ]
                        }
    
                    }
                    else {
                        liEl = {
                            $type: "option",
                            id: item.savename,
                            value: item.savename,
                            revision: item.revision,
                            applicationpath: item.applicationpath,
                            $components: [
                                {
                                    $text: applicationName + ": " + item.savename + " Rev(" + item.revision + ")"
                                }
                            ]
                        }
    
    
                    }
                    return liEl
    
                }
    
                let oscSettings =
                {
                    $cell: true,
                    $type: "div",
                    id: "oscSettings",
                    class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
                    _oscHost: '',
                    _oscPort: '',
                    _oscStatus: '',
                    _updateStatus: function () {
                        this._oscStatus = window._OSCManager.getStatus()
                    },
                    $init: function () {
                        if (window._OSCManager) {
                            this._oscHost = window._OSCManager.hostValue;
                            this._oscPort = window._OSCManager.portValue;
                            this._oscStatus = window._OSCManager.getStatus();
    
                            // var t = this;
                            // setInterval(function () {
                            //     t._updateStatus();
                            // }, 1000);
    
                        }
                    },
                    $update: function () {
    
                        let that = this
                        var buttonText = "Connect";
                        var buttonFunc = function (e) {
                        }
    
                        if (this._oscStatus == 1) {
                            buttonText = "Disconnect";
                            buttonFunc = function (e) {
                                window._OSCManager.disconnect();
                            }
                        } else {
    
    
                            var buttonFunc = function (e) {
                                window._OSCManager.connect();
                                window._OSCManager.port.on("open", function () {
                                    that._oscStatus = window._OSCManager.getStatus();
                                    console.log("connected");
                                });
                                window._OSCManager.port.on("close", function () {
                                    that._oscStatus = window._OSCManager.getStatus();
                                    console.log("disconnected");
                                });
    
                            }
    
                        }
    
                        this.$components = [
                            {
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            self.widgets.inputTextFieldOutlined({
                                                "id": 'oscHostInput',
                                                "label": "Host",
                                                "value": this._oscHost,
                                                "change": function (e) {
                                                    this._oscHost = this.value;
                                                    window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
                                                }
                                            })
                                            // {
                                            //     $type: "span",
                                            //     $text: "Host: "
                                            // },
                                            // {
                                            //     class: "mdc-text-field",
                                            //     $type: "span",
                                            //     $components: [
                                            //         {
                                            //             class: "mdc-text-field__input prop-text-field-input",
                                            //             id: "oscHost",
                                            //             $type: "input",
                                            //             type: "text",
                                            //             value: this._oscHost,
                                            //             onchange: function (e) {
                                            //                 this._oscHost = this.value;
                                            //                 window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
                                            //             }
                                            //         }
    
                                            //     ]
    
                                            // }
    
                                        ]
                                    },
                                    {
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            self.widgets.inputTextFieldOutlined({
                                                "id": 'oscPortInput',
                                                "label": "Port",
                                                "value": this._oscPort,
                                                "change": function (e) {
                                                    this._oscPort = this.value;
                                                    window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
                                                }
                                            })
                                            // {
                                            //     $type: "span",
                                            //     $text: "Port: "
                                            // },
                                            // {
                                            //     class: "mdc-text-field",
                                            //     $type: "span",
                                            //     $components: [
                                            //         {
                                            //             class: "mdc-text-field__input prop-text-field-input",
                                            //             id: "oscPort",
                                            //             $type: "input",
                                            //             type: "text",
                                            //             value: this._oscPort,
                                            //             onchange: function (e) {
                                            //                 this._oscPort = this.value;
                                            //                 window._OSCManager.setOSCHostAndPort(this._oscHost, this._oscPort);
                                            //             }
                                            //         }
    
                                            //     ]
    
                                            // }
    
                                        ]
                                    },
                                    {
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            self.widgets.buttonStroked(
                                                {
                                                    "label": buttonText,
                                                    "onclick": buttonFunc
                                                })
    
    
    
                                        ]
                                    }
    
                                ]
                            }
                        ]
                    }
    
    
                }
    
                let loadSaveSettings =
                {
                    $cell: true,
                    $type: "div",
                    id: "loadSaveSettings",
                    class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
                    $init: function () {
    
    
    
                        var userGUI = [];
    
                        let worldOwner = self.helpers.getRoot().user;
    
                        let genWorldID = 'world' + self.helpers.randId();
    
                        if (_LCSDB.user().is) {
                            if (worldOwner == _LCSDB.user().is.alias) {
    
                                userGUI.push(
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            {
    
                                                $type: "h3",
                                                class: "mdc-typography--title",
                                                $text: self.helpers.appPath
    
                                            },
                                            self.widgets.buttonStroked(
                                                {
                                                    "label": "Save world",
                                                    "onclick": function (e) {
    
                                                        _app.saveWorld();
    
                                                        //let fileName = self.helpers.getRoot().root;
                                                        //_app.saveState(fileName);
    
                                                       //// let fileName = self.helpers.worldStateName;
                                                        ////_app.saveStateAsFile(fileName);
    
                                                        //document.querySelector('#fileName')
                                                        //document.querySelector("#fileName").value = '';
                                                        //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                                    }
                                                })
    
    
                                        ]
                                    }
                                );
                                
                            }
    
                            userGUI.push(
    
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        {
                                            $type: "div",
                                            $components: [
                                                self.widgets.inputTextFieldOutlined({
                                                    "id": 'fileName',
                                                    "label": genWorldID,
                                                    //"value": 'world' + self.helpers.randId(), //self.getSaveName() //self.getRoot()
                                                    "change": function (e) {
                                                    }
                                                })
                                                // {
                                                //     class: "mdc-text-field__input prop-text-field-input",
                                                //     id: "fileName",
                                                //     $type: "input",
                                                //     type: "text",
                                                //     value: 'world' + self.helpers.randId() //self.getSaveName() //self.getRoot()
    
    
                                                // }
                                            ]
    
                                        }
    
                                    ]
                                },
    
                                {
    
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        self.widgets.buttonStroked(
                                            {
                                                "label": "Clone world",
                                                "onclick": function (e) {
                                                    let fileName = document.querySelector('#fileName')
    
                                                    let worldOwner = self.helpers.getRoot().user;
                                                    let worldName = _app.worldName;
    
                                                    if (_LCSDB.user().is) {
    
                                                        let wn = fileName.value ? fileName.value : genWorldID;
                                                        _app.cloneWorld(worldName, worldOwner, wn, true)
                                                        // if (worldOwner == _LCSDB.user().is.alias) {
                                                        //     _app.saveStateAsFile(fileName.value);
                                                        // } else {
                                                        //     console.log('clone world with prototype to: ' + fileName);
                                                        //     _app.cloneWorldState(fileName.value);
                                                        // }
                                                    }
    
                                                    //saveStateAsFile.call(self, fileName.value);
    
                                                    //document.querySelector("#fileName").value = '';
                                                    //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                                }
                                            })
    
    
                                    ]
                                }
    
    
                            );
                            if (worldOwner == _LCSDB.user().is.alias) {
    
                                userGUI.push(
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            {
                                                $type: "p",
                                            },
                                            self.widgets.buttonStroked(
                                                {
                                                    "label": "Save state",
                                                    "onclick": function (e) {
    
                                                       // _app.saveWorld();
                                                       let myWorldName = self.helpers.getRoot().root;
                                                       let fileName = document.querySelector('#fileName');
                                                       let wn = fileName.value ? fileName.value : myWorldName;
                                                        _app.saveState(wn);
    
                                                        //document.querySelector('#fileName')
                                                        //document.querySelector("#fileName").value = '';
                                                        //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                                    }
                                                })
    
    
                                        ]
                                    }
                                );
    
                            }
    
                            // let saveGUI = document.querySelector('#saveGUI');
                            // saveGUI.$components = userGUI.concat(saveGUI.$components);
                            //document.querySelector('#fileName').value = 'world' + _app.helpers.randId();
    
                        } else {
                            userGUI.push(
                                self.widgets.getLoginGUI()
                            );
                        }
                        
                        let saveGUI = document.querySelector('#saveGUI');
                        saveGUI.$components = userGUI.concat(saveGUI.$components);
                    },
                    $update: function () {
                    },
                    $components:
                        [
                            {
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                id: "saveGUI",
                                $components: [
    
                                ]
                            }
                        ]
    
    
    
    
                }
    
    
                let protoPropertiesCell = function (m) {
                    return {
                        $type: "div",
                        class: "mdc-layout-grid__inner",
                        _prop: {},
                        $init: function () {
    
                            let prop = m[1].prop;
    
                            if (prop.value == undefined && this._currentNode !== undefined) {
                                prop.value = JSON.stringify(LCSEditor.utility.transform(vwf.getProperty(this._currentNode, prop.name, []), LCSEditor.utility.transforms.transit));
                            }
                            this._prop = prop
                        },
                        $update: function () {
                            this.$components = [
    
                                // {
                                //     $type: "div",
                                //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-10",
                                //     $components: [
                                //         { $text: this._prop.name }
                                //     ]
                                // },
                                // {
                                //     $type: "div",
                                //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                // },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        // {
                                        //     $type: "span",
                                        //     class: "mdc-typography--body2 mdc-typography--adjust-margin protoPropLabel",
                                        //     $text: this._prop.name + ': '
                                        // },
                                        {
                                            $type: "div",
                                            $components: [
                                                self.widgets.inputTextFieldStandart({
                                                    "id": 'proto_' + this._prop.name,
                                                    "label": this._prop.name,
                                                    "value": this._prop.getValue(),
                                                    "change": function (e) {
    
    
                                                           //set property
    
                                                    let value = this.value;
                                                    var propValue = value;
    
                                                  
                                                if (self.helpers.testJSON(value)){
                                                            propValue = JSON.parse(value);
                                                        }  else {
                                                        propValue = value;
                                                    }
    
                                                    self.kernel.setProperty(this._currentNode, this._prop.name, propValue);
    
    
                                                        // let propValue = this.value;
                                                        // try {
                                                        //     propValue = JSON.parse(propValue);
                                                        //     self.kernel.setProperty(this._currentNode, this._prop.name, propValue);
                                                        // } catch (e) {
                                                        //     // restore the original value on error
                                                        //     this.value = propValue;
                                                        // }
    
    
    
                                                    }
                                                })
                                            ]
    
                                        }
                                    ]
    
                                }
                            ]
                        }
    
                    }
                }
    
                let propertiesCell = function (m) {
    
                    var editComponents = [{}, {}];
    
                    // fullWidth:
                    // fullHeight:
                    // xoffset:
                    // yoffset:
                    // width:
                    // height:
    
                    let sliderPropNames = ['width', 'height', 'depth', 'fullWidth', 'fullHeight', 'xoffset', 'yoffset', 'subcamWidth', 'subcamHeight'];
                    let sliderProps = {
                        'width': {
                            min: 0,
                            max: 30
                        },
                        'height': {
                            min: 0,
                            max: 30
                        },
                        'depth': {
                            min: 0,
                            max: 30
                        },
                        'fullWidth': {
                            min: 0,
                            max: 5000,
                            step: 10
                        },
                        'fullHeight': {
                            min: 0,
                            max: 5000,
                            step: 10
                        },
                        'xoffset': {
                            min: -10000,
                            max: 10000,
                            step: 10
                        },
                        'yoffset': {
                            min: -10000,
                            max: 10000,
                            step: 10
                        },
                        'subcamWidth': {
                            min: 0,
                            max: 5000,
                            step: 10
                        },
                        'subcamHeight': {
                            min: 0,
                            max: 5000,
                            step: 10
                        }
                    }
                    if (sliderPropNames.includes(m.name)) {
    
                        let currenValue = JSON.parse(m.getValue());
    
                        var sliderComponent = self.widgets.sliderContinuous({
                            'id': 'prop-slider-' + m.name,
                            'label': 'Slider',
                            'min': sliderProps[m.name].min,
                            'max': sliderProps[m.name].max,
                            'step': sliderProps[m.name].step ? sliderProps[m.name].step : 0.1,
                            'value': currenValue,
                            'init': function () {
    
    
                                const myEl = this;
                                var continuousSlider = new mdc.slider.MDCSlider(myEl);
                                this._comp = continuousSlider;
                                continuousSlider.listen('MDCSlider:input', function (e) {
                                    // console.log(continuousSlider.value)
                                    let myEl = e.currentTarget;
                                    // let prop = myEl._prop.body;
                                    //document.querySelector('#propAceEditor').env.editor.setValue(prop);
                                    self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
                                    //continuousValue.textContent = continuousSlider.value;
    
                                });
                                continuousSlider.listen('MDCSlider:change', function (e) {
                                    //console.log(continuousSlider.value);
                                    let myEl = e.currentTarget;
                                    // let prop = myEl._prop.body;
                                    //document.querySelector('#propAceEditor').env.editor.setValue(prop);
                                    self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
    
                                    //continuousCommittedValue.textContent = continuousSlider.value;
                                })
                            }
                        })
    
                    } else {
                        sliderComponent = {}
                    }
    
                    if (m.name.indexOf("semantics") > -1) { }
                    else if (m.name.indexOf("grammar") > -1) { }
                    else if (m.name.indexOf("ohm") > -1) {
    
                        editComponents = [
    
                            {
                                $type: "div",
    
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
                                $components: [
                                    {
    
                                        $type: "button",
                                        class: "mdc-button",
                                        $text: "Edit", //edit grammar
                                        onclick: function (e) {
                                            var currentNode = document.querySelector('#currentNode')._currentNode;
                                            if (currentNode == '') {
                                                currentNode = vwf_view.kernel.find("", "/")[0];
                                            }
                                            let editor = document.querySelector('#livePropEditor');
                                            editor._setNode(currentNode);
                                            editor._propName = m.name;
                                            editor._prop = { body: m.rawValue, type: 'complex' }
    
                                            document.querySelector('#propEditorWindow').style.visibility = 'visible';
                                        }
    
    
                                    }
                                ]
                            },
                            {
                                $type: "div",
    
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
                                $components: []
                            }
    
                        ]
    
                    } else {
    
                        editComponents = [
                            {
                                $type: "div",
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
                                $components: [
    
                                    sliderComponent,
    
                                    {
                                        class: "mdc-text-field prop-mdc-text-field",
    
                                        $type: "div",
                                        $components: [
                                            self.widgets.inputTextFieldStandart({
                                                "id": "prop-" + m.name,
                                                "label": m.name,
                                                "value": m.getValue(),
                                                "change": function (e) {
                                                    //set property
    
                                                    let value = this.value;
                                                    var propValue = value;
    
                                                  
                                                if (self.helpers.testJSON(value)){
                                                            propValue = JSON.parse(value);
                                                        }  else {
                                                        propValue = value;
                                                        //this.value = JSON.parse(JSON.stringify(propValue));
                                                    }
    
                                                     self.kernel.setProperty(this._currentNode, m.name, propValue);
                                                     //this.value = propValue.toString();
    
                                                    // let propValue = this.value;
                                                    // try {
                                                    //     propValue = JSON.parse(propValue);
                                                    //     self.kernel.setProperty(this._currentNode, m.name, propValue);
    
                                                    // } catch (e) {
                                                    //     // restore the original value on error
                                                    //     this.value = propValue;
                                                    // }
    
    
                                                }
                                            })
    
                                        ]
    
                                    }
                                ]
                            },
                            {
                                $type: "div",
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
                                $components: [
                                    {
    
                                        $type: "button",
                                        class: "mdc-button mdc-button--compact",
                                        $text: "^", //edit grammar
                                        onclick: function (e) {
                                            var currentNode = document.querySelector('#currentNode')._currentNode;
                                            if (currentNode == '') {
                                                currentNode = vwf_view.kernel.find("", "/")[0];
                                            }
                                            let editor = document.querySelector('#livePropEditor');
                                            editor._setNode(currentNode);
                                            editor._propName = m.name;
                                            editor._prop = { body: m.getValue(), type: 'simple' }
    
                                            document.querySelector('#propEditorWindow').style.visibility = 'visible';
                                        }
    
    
                                    }
                                ]
                            }
    
    
    
    
    
                        ];
                    }
    
                    return {
                        $type: "div",
                        class: "mdc-layout-grid__inner",
                        $components: [
                            {
                                $type: "div",
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                $components: [
                                    { $text: m.name }
                                ]
                            },
                            {
                                $type: "div",
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                            },
                            editComponents[0],
                            editComponents[1]
    
    
                        ]
                    }
                }
    
    
    
    
    
                let nodeLink = function (m) {
    
                    var myClass = "nodeItem";
                    let myAvatarName = 'avatar-' + self.kernel.moniker();
                    (myAvatarName == m.name) ? (myClass = "avatarName mdc-typography--subheading2") :
                        myClass = "nodeItem"
    
                    var nodeName = m.name;
    
                    let displayName = vwf.getProperty(m.ID, 'displayName');
                    if (displayName) {
                        nodeName = displayName
                    }
    
    
                    return {
                        $type: "li",
                        class: "mdc-list-item",
                        $components: [{
                            $type: "a",
                            class: "mdc-list-item",
                            $href: "#",
                            $components: [{
                                $type: 'span',
                                class: myClass,
                                $text: nodeName
                            }
                            ],
    
    
                            onclick: function (e) {
                                //self.currentNodeID = m.ID;
                                document.querySelector('#currentNode')._setNode(m.ID);
    
                                // document.querySelector('#liveCodeEditor')._editorNode = m.ID;
                                // createAceEditor(self, m.ID);
                            }
                        }]
                    }
                };
    
                let listDivider = {
    
                    $type: "hr",
                    class: "mdc-list-divider",
                }
    
                let webrtcGUI = {
    
                    $type: "div",
                    class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                    $components: [
                        {
    
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        {
                                            $type: "span",
                                            $text: "Chat"
                                        }
    
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        self.widgets.icontoggle({
                                            'id': "webrtcswitch",
                                            'label': 'visibility',
                                            'on': JSON.stringify({ "content": "visibility", "label": "Turn On Mic" }),
                                            'off': JSON.stringify({ "content": "visibility_off", "label": "Turn Off Mic" }),
                                            'state': false,
                                            'init': function () {
                                                this._driver = vwf.views["/drivers/view/webrtc"];
                                                if (!this._driver) {
                                                    //this.classList.add('mdc-icon-toggle--disabled');
                                                    this.setAttribute('disabled',"");
    
                                                }
                                                mdc.iconButton.MDCIconButtonToggle.attachTo(this);
                                                this.addEventListener('MDCIconButtonToggle:change', (e) => {
    
                                                    let driver = e.target._driver;
                                                    let chkAttr = e.detail.isOn;
                                                    let avatarID = 'avatar-' + self.kernel.moniker();
    
                                                    let micToggle = document.querySelector('#webrtcaudio');
                                                    let camToggle = document.querySelector('#webrtcvideo');
    
                                                    if (chkAttr) {
                                                        driver.startWebRTC(avatarID);
    
                                                        micToggle.removeAttribute('disabled');
                                                        camToggle.removeAttribute('disabled');
                                                        //micToggle.classList.remove('mdc-icon-toggle--disabled');
                                                        //camToggle.classList.remove('mdc-icon-toggle--disabled');
    
                                                        console.log("on")
    
                                                    } else {
                                                        driver.stopWebRTC(avatarID);
    
                                                        micToggle.setAttribute('disabled',"");
                                                        camToggle.setAttribute('disabled',"");
                                                        //micToggle.classList.add('mdc-icon-toggle--disabled');
                                                        //camToggle.classList.add('mdc-icon-toggle--disabled');
                                                        console.log("off")
                                                    }
    
                                                    //console.log(e, detail)
                                                    //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
                                                });
    
                                            }
                                        })
    
    
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        self.widgets.icontoggle({
                                            'id': "webrtcaudio",
                                            'label': 'mic',
                                            'on': JSON.stringify({ "content": "mic", "label": "Turn On Mic" }),
                                            'off': JSON.stringify({ "content": "mic_off", "label": "Turn Off Mic" }),
                                            'state': false,
                                            'init': function () {
                                                this._driver = vwf.views["/drivers/view/webrtc"];
                                                let webrtcswitch = document.querySelector('#webrtcswitch');
    
                                                if (!this._driver) {
                                                    //this.classList.add('mdc-icon-toggle--disabled');
                                                    this.setAttribute("disabled", "");
                                                }
                                                //this.classList.add('mdc-icon-toggle--disabled');
                                                this.setAttribute("disabled", "");
                                                this.addEventListener('MDCIconButtonToggle:change', (e) => {
    
                                                    let driver = e.target._driver;
                                                    let chkAttr = e.detail.isOn;
                                                    if (chkAttr) {
                                                        driver.muteAudio(chkAttr);
                                                        console.log("on")
    
                                                    } else {
                                                        driver.muteAudio(chkAttr);
                                                        console.log("off")
                                                    }
    
                                                    //console.log(e, detail)
                                                    //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
                                                });
    
                                            }
                                        })
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        self.widgets.icontoggle({
                                            'id': "webrtcvideo",
                                            'label': 'videocam',
                                            'on': JSON.stringify({ "content": "videocam", "label": "Turn On Video" }),
                                            'off': JSON.stringify({ "content": "videocam_off", "label": "Turn Off Video" }),
                                            'state': false,
                                            'init': function () {
                                                this._driver = vwf.views["/drivers/view/webrtc"];
    
                                                if (!this._driver) {
                                                    //this.classList.add('mdc-icon-toggle--disabled');
                                                    this.setAttribute("disabled", "");
                                                }
    
                                               // this.classList.add('mdc-icon-toggle--disabled');
                                               this.setAttribute("disabled", "");
                                                this.addEventListener('MDCIconButtonToggle:change', (e) => {
    
                                                    let driver = e.target._driver;
                                                    let chkAttr = e.detail.isOn;
                                                    if (chkAttr) {
                                                        driver.muteVideo(chkAttr);
                                                        console.log("on")
    
                                                    } else {
                                                        driver.muteVideo(chkAttr);
                                                        console.log("off")
                                                    }
    
                                                    //console.log(e, detail)
                                                    //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
                                                });
    
                                            }
                                        })
                                    ]
                                }
    
                            ]
                        }
    
                    ]
                }
    
                let audioGUI = {
                    $type: "div",
                    class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                    $components: [
                        {
    
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        {
    
    
                                            $type: "span",
                                            $text: "Sound: "
    
                                        }
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        self.widgets.icontoggle({
                                            'id': "soundStopStartSwitch",
                                            'label': 'play',
                                            'on': JSON.stringify({ "content": "pause", "label": "stop" }),
                                            'off': JSON.stringify({ "content": "play_arrow", "label": "play" }),
                                            'state': false,
                                            'init': function () {
                                                var nodeID = this._currentNode;
    
                                                this._comp = new mdc.iconButtonToggle.MDCIconButtonToggle(this);
    
                                                this.setAttribute('id', "soundStopStartSwitch-" + nodeID);
                                                let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
                                                //mdc.iconToggle.MDCIconToggle.attachTo(this);
                                                this._comp.on = isPlaying;
    
    
                                                this.addEventListener('MDCIconButtonToggle:change', (e) => {
    
                                                    // let avatarID = 'avatar-'+ vwf.moniker_;
                                                    // let avatarNode = self.nodes['avatar-'+ vwf.moniker_];
                                                    // let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
    
                                                    var nodeID = document.querySelector('#currentNode')._currentNode;
                                                    let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
    
                                                    if (isPlaying) {
    
                                                        console.log("stop");
                                                        vwf_view.kernel.callMethod(nodeID, "pauseSound");
    
                                                    } else {
    
                                                        console.log("play")
                                                        vwf_view.kernel.callMethod(nodeID, "playSound");
                                                    }
    
                                                });
    
                                            }
                                        })
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        {
                                            $type: "div",
                                            style: "padding: 12px",
                                            $components: [
                                                self.widgets.iconButton({
                                                    'label': 'stop',
                                                    onclickfunc: function () {
                                                        var nodeID = this._currentNode;
                                                        vwf_view.kernel.callMethod(nodeID, "stopSound");
                                                    }
    
                                                })
                                            ]
                                        }
                                    ]
                                }
    
    
                                // {
                                //     $type: "div",
                                //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                //     $components: [
                                //         widgets.switch({
                                //         'id': 'editnode', 
                                //         'init': function(){
                                //             vwf_view.kernel.getProperty(this._currentNode, 'edit');
                                //         },
                                //         'onchange': function(e){
    
                                //             var nodeID = document.querySelector('#currentNode')._currentNode;
                                //             let chkAttr = this.getAttribute('checked');
                                //             if (chkAttr == "") {
                                //                 self.kernel.setProperty(this._currentNode, 'edit', false);
    
                                //             } else {
                                //                 self.kernel.setProperty(this._currentNode, 'edit', true);
                                //             }
    
                                //             vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
                                //         }
                                //     }
                                //     )
                                //     ]
                                // }
                            ]
                        }
                    ]
                }
    
                var saveGUI = {};
    
                if (_LCSDB.user().is) {
                    saveGUI = self.widgets.floatActionButton({
                        label: "save",
                        styleClass: "mdc-fab--mini",
                        onclickfunc: function () {
                            var nodeID = document.querySelector('#currentNode')._currentNode;
                            let node = self.nodes[nodeID];
                            let nodeDef = self.helpers.getNodeDef(nodeID);
                            console.log(nodeDef);
                            //let saveID = this.GUID();
                            // _LCSUSER.get('saves').get(node.name).put(JSON.stringify(nodeDef), acc=>{
                            //     console.log("saved: " + acc + 'to '+ node.name)
                            // });
    
                        }
                    })
                }
    
                let gizmoEdit = {
    
                    $type: "div",
                    class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                    $components: [
                        {
    
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
                                        {
    
    
                                            $type: "span",
                                            $text: "Edit: ",
    
                                        }
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                    $components: [
                                        self.widgets.switch({
                                            'id': 'editnode',
                                            'init': function () {
                                                vwf_view.kernel.getProperty(this._currentNode, 'edit');
                                                this._switch = new mdc.switchControl.MDCSwitch(this);
                                                this._switch.checked = false;
                                            },
                                            'onchange': function (e) {
    
                                                var nodeID = document.querySelector('#currentNode')._currentNode;
                                                if (this._switch) {
                                                    let chkAttr = this._switch.checked;//this.getAttribute('checked');
                                                    if (chkAttr) {
                                                        self.kernel.setProperty(this._currentNode, 'edit', true);
                                                        //this._switch.checked = false;
                                                    } else {
                                                        self.kernel.setProperty(this._currentNode, 'edit', false);
                                                        //this._switch.checked = true;
                                                    }
    
                                                    vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
                                                }
                                            }
                                        }
                                        )
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
    
                                        self.widgets.imageButton({
                                            imgSrc: "/drivers/view/editor/images/ui/icons/translate.png",
                                            styleClass: "editButton",
                                            onclickfunc: function (e) {
                                                vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
                                            }
                                        })
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
    
                                        self.widgets.imageButton({
                                            imgSrc: "/drivers/view/editor/images/ui/icons/rotate.png",
                                            styleClass: "editButton",
                                            onclickfunc: function (e) {
                                                vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
                                            }
                                        })
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    $components: [
    
                                        self.widgets.imageButton({
                                            imgSrc: "/drivers/view/editor/images/ui/icons/scale.png",
                                            styleClass: "editButton",
                                            onclickfunc: function (e) {
                                                vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
                                            }
                                        })
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        // self.widgets.floatActionButton({
                                        //     label: "content_copy",
                                        //     styleClass: "mdc-fab--mini"
    
                                        // }),
                                        // {
                                        //     $type: "span",
                                        //     $text: " "
    
                                        // },
                                        self.widgets.floatActionButton({
                                            label: "delete_forever",
                                            styleClass: "mdc-fab--mini",
                                            onclickfunc: function () {
                                                var nodeID = document.querySelector('#currentNode')._currentNode;
                                                let node = self.nodes[nodeID];
                                                //vwf_view.kernel.deleteChild(node.parentID, node.name);
                                                //vwf_view.kernel.removeChild(node.parentID, nodeID);
                                                vwf_view.kernel.deleteNode(nodeID);                                                                           
                                                //vwf_view.kernel.callMethod(node.parentID, "deleteNode", [node.name])
                                            }
                                        }),
                                        
                                        // self.widgets.floatActionButton({
                                        //     label: "person",
                                        //     styleClass: "mdc-fab--mini",
                                        //     onclickfunc: function () {
                                        //         var nodeID = document.querySelector('#currentNode')._currentNode;
                                        //         let node = self.nodes[nodeID];
                                        //         //vwf_view.kernel.deleteChild(node.parentID, node.name);
    
                                        //         let me = self.kernel.moniker();
                                        //         vwf_view.kernel.setProperty(nodeID, 'ownedBy', me);
                                        //     }
                                        // }),
    
                                        saveGUI
    
                                    ]
                                },
                            ]
                        }
    
                    ]
                }
    
                let nodesCell = {
    
                    $cell: true,
                    $type: "div",
                    id: "currentNode",
                    _childNodes: [],
                    _currentNode: '',
                    _displayedProperties: {},
                    _setNode: function (aNode) {
                        this._currentNode = aNode;
                        document.querySelector('#sideBar')._sideCurrentNode = this._currentNode
                    },
                    $init: function () {
                        this._currentNode = document.querySelector('#sideBar')._sideCurrentNode
    
                        //this._currentNode = vwf_view.kernel.find("", "/")[0];
                        //this._currentNode = '3333';
                    },
                    _getChildNodes: function () {
                        this._childNodes = self.nodes[this._currentNode];
                        if (this._childNodes !== undefined) {
                            return this._childNodes.children
                        } else {
                            return []
                        }
                        //let nodeIDAlpha = he.encode(this._currentNode);
    
                    },
                    // _getNodeComplexProperties: function () {
                    //     let node = self.nodes[this._currentNode];
                    //     let props = this._getNodeProperties();
                    //     let filterFunction = function (prop) {
                    //         return (prop.name == 'ohmLang') 
                    //     };
                    //     let complexProps = props.filter(filterFunction.bind(this));
    
                    //     return complexProps
                    // },
                    _getNodeProperties: function () {
                        let node = self.nodes[this._currentNode];
                        this._displayedProperties = {};
                        let filterFunction = function (prop) {
                            return (!this._displayedProperties[prop.name] && prop.name.indexOf('$') === -1) ? (this._displayedProperties[prop.name] = "instance", true) : (false);
                        };
                        let props = node.properties.filter(filterFunction.bind(this));
                        return props
                    },
                    _getNodeProtoProperties: function () {
                        let node = self.nodes[this._currentNode];
    
                        let filterFunction = function (prop) {
                            return (!this._displayedProperties[prop[1].prop.name]) ? (this._displayedProperties[prop[1].prop.name] = prop[1].prototype, true) : (false);
                        };
                        let props = Object.entries(LCSEditor.getProperties.call(self, self.kernel, node.extendsID)).filter(filterFunction.bind(this));
                        return props
                    },
                    $update: function () {
                        //this.$text = this._currentNode;
    
                        let node = self.nodes[this._currentNode];
                        let nodeProtos = LCSEditor.getPrototypes.call(self, self.kernel, node.extendsID);
    
                        var viewerProps = {};
                        var viewerPropsCell = {};
    
                        var propsActions = {};
                        var propsActionsCell = {};
    
                        var gizmoCell = {};
                        if (this._currentNode !== self.kernel.application()) {
                            if (nodeProtos.includes('proxy/aframe/componentNode.vwf')) {
                                //gizmoCell = {};
                                if (nodeProtos.includes('proxy/aframe/a-sound-component.vwf')) {
                                    //console.log("sound gui")
                                    gizmoCell = audioGUI
                                }
    
                            } else {
                                gizmoCell = gizmoEdit
                            }
                        }
    
                        if (node !== undefined) {
    
                            propsActions = {
                                $type: "li",
                                class: "mdc-list-item",
                                $components: [
                                    {
                                        $text: "Actions",
                                        $type: "span",
                                        class: "mdc-list-item__text mdc-typography--button"
    
                                    }
                                ]
                            }
    
                            let actionsGUI = [];
    
                            if(node.properties.meta) {
                                if(node.properties.meta.rawValue == 'avatarCostume'){
                                    actionsGUI.push(self.widgets.buttonStroked(
                                        {
                                            "label": "Use this costume",
                                            "onclick": function (e) {
                                                console.log("COSTUME NEW!!!");
                                                let nodeDef = self.helpers.getNodeDef(this._currentNode);
                                                console.log(nodeDef);
                                                let avatarID = 'avatar-' + self.kernel.moniker();
                                                 vwf_view.kernel.callMethod(avatarID, "changeCostume", [nodeDef]);
                                                //vwf_view.kernel.callMethod(this._currentNode, "setCameraToActive", [vwf.moniker_]);
                                                
                                            }
                                        }))
                                    }
                            } else if(node.name.includes('xrcontroller')){
                                actionsGUI.push(self.widgets.buttonStroked(
                                    {
                                        "label": "Set as World default XR controller",
                                        "onclick": function (e) {
                                             vwf_view.kernel.callMethod(node.ID, "saveToScene", []);
                                            
                                        }
                                    }))
                            }
                           
    
                            propsActionsCell = {
                                $cell: true,
                                $type: "div",
                                class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                                $components: [
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__inner",
                                        $components: [
                                            {
    
                                                $type: "div",
                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                $components: [].concat(actionsGUI)
                                            }
                                        ]
                                    }
    
                                ]
                                //$components: this._getNodeProtoProperties().map(protoPropertiesCell)
                            }
    
    
                            if (node.extendsID == "proxy/aframe/acamera.vwf") {
                                viewerProps = {
                                    $type: "li",
                                    class: "mdc-list-item",
                                    $components: [
                                        {
                                            $text: "Viewer properties",
                                            $type: "span",
                                            class: "mdc-list-item__text mdc-typography--button"
    
                                        }
                                    ]
                                }
    
                                viewerPropsCell = {
                                    $cell: true,
                                    $type: "div",
                                    class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                                    $components: [
                                        {
    
                                            $type: "div",
                                            class: "mdc-layout-grid__inner",
                                            $components: [
                                                {
    
                                                    $type: "div",
                                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                    $components: [
                                                        self.widgets.buttonStroked(
                                                            {
                                                                "label": "Active",
                                                                "onclick": function (e) {
                                                                    //let camera = document.querySelector('#' + this._currentNode);
                                                                    vwf_view.kernel.callMethod(this._currentNode, "setCameraToActive", [vwf.moniker_]);
                                                                    //camera.setAttribute('camera', 'active', true);
                                                                }
                                                            })
    
    
                                                    ]
                                                }
                                            ]
                                        }
    
                                    ]
                                    //$components: this._getNodeProtoProperties().map(protoPropertiesCell)
                                }
    
    
                            } else {
                                viewerProps = {};
                                viewerPropsCell = {};
    
                            }
                        }
    
    
    
                        this.$components = [
                            {
    
                                $type: "ul",
                                class: "mdc-list",
                                $components: [
    
                                    self.widgets.buttonStroked(
                                        {
                                            "label": "<--",
                                            "onclick": function (e) {
                                                let node = self.nodes[this._currentNode];
                                                if (node.parentID !== 0) {
                                                    //self.currentNodeID = node.parentID,
                                                    document.querySelector('#currentNode')._setNode(node.parentID)
                                                }
    
                                            }
    
                                        }),
    
                                    {
                                        $type: "li",
                                        class: "mdc-list-item",
                                        $components: [
                                            {
                                                $text: "name",
                                                $type: "span",
                                                $init: function () {
                                                    let node = self.nodes[this._currentNode];
    
    
                                                    if (node) {
                                                        let displayName = vwf.getProperty(node.ID, 'displayName');
                                                        if (displayName) {
                                                            this.$text = displayName
                                                        } else {
                                                            this.$text = node.name;
                                                        }
                                                    }
    
    
    
    
    
                                                    //console.log(node.properties.displayName)
                                                },
                                                class: "mdc-list-item__text mdc-typography--headline"
                                                //<h1 class="mdc-typography--display4">Big header</h1>
                                            }]
                                    }, listDivider,
                                    {
                                        // $cell: true,
                                        // $type: "ul",
                                        // class: "mdc-list",
                                        $type: "div",
                                        class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                                        $components: [
                                            {
                                                $type: "div",
                                                class: "mdc-layout-grid__inner",
                                                $components: [
                                                    {
                                                        $type: "div",
                                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                        $components: [
                                                            self.widgets.buttonStroked(
                                                                {
                                                                    "label": "Methods browser",
                                                                    "onclick": function (e) {
                                                                        var currentNode = document.querySelector('#currentNode')._currentNode;
                                                                        if (currentNode == '') {
                                                                            currentNode = vwf_view.kernel.find("", "/")[0];
                                                                        }
    
    
                                                                        if (LCSEditor.isAFrameEntity.call(self, currentNode)) {
                                                                            vwf.views["/drivers/view/aframe"].nodes[currentNode].liveBindings = {};
                                                                        } else if(LCSEditor.isAFrameComponent.call(self, currentNode)) {
                                                                            vwf.views["/drivers/view/aframeComponent"].nodes[currentNode].liveBindings = {};
                                                                        }
    
                                                                        
    
                                                                        document.querySelector('#liveCodeEditor')._setNode(currentNode);
                                                                        //createAceEditor(self, currentNode);
                                                                        document.querySelector('#codeEditorWindow').style.visibility = 'visible';
                                                                    }
                                                                })
    
                                                        ]
                                                    }
    
                                                ]
                                            }
                                        ]
                                    },
                                    gizmoCell,
                                    listDivider,
                                    {
                                        $type: "li",
                                        class: "mdc-list-item",
                                        $components: [
                                            {
                                                $text: "Children",
                                                $type: "span",
                                                class: "mdc-list-item__text mdc-typography--button"
    
                                            }]
                                    },
                                    {
    
                                        $type: "ul",
                                        class: "mdc-list",
                                        $components: this._getChildNodes().map(nodeLink)
                                    }, listDivider, {
                                        $type: "li",
                                        class: "mdc-list-item",
                                        $components: [
                                            {
                                                $text: "Properties",
                                                $type: "span",
                                                class: "mdc-list-item__text mdc-typography--button"
                                                //<h1 class="mdc-typography--display4">Big header</h1>
                                            }]
                                    },
                                    {
                                        // $cell: true,
                                        // $type: "ul",
                                        // class: "mdc-list",
                                        $type: "div",
                                        class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                                        $components: this._getNodeProperties().map(propertiesCell)
                                    },
                                    listDivider,
                                    {
                                        $type: "li",
                                        class: "mdc-list-item",
                                        $components: [
                                            {
                                                $text: "Proto properties",
                                                $type: "span",
                                                class: "mdc-list-item__text mdc-typography--button"
    
                                            }]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                                        $components: this._getNodeProtoProperties().map(protoPropertiesCell)
                                    }, listDivider,
                                    propsActions,
                                    propsActionsCell,
                                    listDivider,
                                    viewerProps,
                                    viewerPropsCell
    
                                ]
                            }
    
    
    
    
                        ]
                    }
    
                }
    
                let numberSliderComponent = {
                    $cell: true,
                    $type: "div",
                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
                    $init: function () {
    
                    },
                    $components: [
                        {
    
                            $type: "div",
                            style: "padding: 0 16px;",
                            $components: [
                                {}
                            ]
                        }
    
    
    
                    ]
                }
    
                let colorPickerComponent = {
                    $cell: true,
                    $type: "div",
                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
                    $init: function () {
                        let myEl = this;
                        let cp = ColorPicker(
    
                            document.getElementById('slide'),
                            document.getElementById('picker'),
    
    
    
                            function (hex, hsv, rgb, mousePicker, mouseSlide) {
                                ColorPicker.positionIndicators(
                                    document.getElementById('slide-indicator'),
                                    document.getElementById('picker-indicator'),
                                    mouseSlide, mousePicker
                                );
                                if (myEl._propName.toLowerCase().includes('color')) {
    
                                    // console.log(hex);    
                                    document.querySelector('#propAceEditor').env.editor.setValue(JSON.stringify(hex));
                                    self.kernel.setProperty(myEl._editorNode, myEl._propName, hex);
                                }
                            });
                        if (myEl._propName.toLowerCase().includes('color')) {
                            cp.setHex(JSON.parse(myEl._prop.body));
                        }
                    },
                    $components: [
                        {
    
                            $type: "div",
                            id: "color-picker",
                            class: "cp-default",
                            $components: [
                                {
    
                                    $type: "div",
                                    class: "picker-wrapper",
                                    $components: [
                                        {
    
                                            $type: "div",
                                            id: "picker",
                                            class: "picker",
                                            style: "width: 130px; height: 130px"
                                        },
                                        {
    
                                            $type: "div",
                                            id: "picker-indicator",
                                            class: "picker-indicator"
                                        }
                                    ]
                                },
                                {
    
                                    $type: "div",
                                    class: "slide-wrapper",
                                    $components: [
                                        {
    
                                            $type: "div",
                                            id: "slide",
                                            class: "slide",
                                            style: "width: 30px; height: 130px"
                                        },
                                        {
    
                                            $type: "div",
                                            id: "slide-indicator",
                                            class: "slide-indicator"
                                        }
                                    ]
                                }
                            ]
                        }
                        // {
                        //     $cell: true,
                        //     $type: "div",
                        //     id: "color-picker",
                        //     $init: function () {
    
                        //     }
                        // }
    
                    ]
                }
    
    
                let propEditorWindow = {
                    $cell: true,
                    $type: "div",
                    _editorNode: '',
                    _prop: { body: '', type: 'simple' },
                    _propName: '',
                    id: "livePropEditor",
                    _setNode: function (node) {
                        this._editorNode = node;
                        this._prop.body = ''
                    },
                    class: "propEditorGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                    $update: function () {
    
                        var editorClass = "mdc-layout-grid__cell mdc-layout-grid__cell--span-8"
                        var livePropertyComponent = {}
    
                        if (this._prop.type == 'simple') {
                            if (this._propName.toLowerCase().includes('color')) {
                                livePropertyComponent = colorPickerComponent
                            }
    
    
                        } else {
                            editorClass = "mdc-layout-grid__cell mdc-layout-grid__cell--span-12"
                        }
    
    
                        this.$components = [
                            {
    
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
    
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                        $components: [
                                            self.widgets.buttonStroked(
                                                {
                                                    "label": "Update",
                                                    "onclick": function (e) {
                                                        let editor = document.querySelector("#propAceEditor").env.editor;
                                                        let value = editor.getValue();
    
                                                        var propValue = value;
    
                                                        if (this._prop.type == 'simple') {
                                                            if (self.helpers.testJSON(value)){
                                                                propValue = JSON.parse(value);
                                                            } 
                                                        } else {
                                                            propValue = value;
                                                        }
                                                        
                                                         self.kernel.setProperty(this._editorNode, this._propName, propValue);
    
    
                                                        // try {
                                                        //     let propValue = (this._prop.type == 'simple') ? (JSON.parse(value)) : (value)
                                                        //     //propValue = JSON.parse(value);
                                                        //     self.kernel.setProperty(this._editorNode, this._propName, propValue);
    
                                                        // } catch (e) {
                                                        //     // restore the original value on error
                                                        //     this.value = propValue;
                                                        // }
    
                                                    }
                                                }
                                            )]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-5",
                                        $components: [
                                            {
                                                $type: "h3",
                                                class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
                                                $text: this._editorNode
                                            }
    
                                        ]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-5",
                                        $components: [
                                            {
                                                $type: "h3",
                                                class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
                                                $text: this._propName
                                            }
    
                                        ]
                                    }
    
    
    
                                ]
                            },
                            {
    
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
    
                                        $type: "div",
                                        class: editorClass,
                                        $components: [
                                            {
    
                                                class: "aceEditor",
                                                id: "propAceEditor",
                                                $type: "div",
                                                $text: this._prop.body,
                                                $init: function () {
                                                    LCSEditor.createAceEditor.call(self, this._editorNode, "propAceEditor");
                                                    this.env.editor.$blockScrolling = Infinity
                                                }
                                            }
    
                                        ]
                                    }, livePropertyComponent
                                    // {
                                    //     $cell: true,
                                    //     $type: "div",
                                    //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                    //     $components: []
                                    // },
    
                                ]
                            }
    
                        ]
                        //$components: 
                    }
                }
    
                let codeEditorWindow = {
                    $cell: true,
                    $type: "div",
                    _editorNode: '',
                    _method: { body: '' },
                    _methodName: '',
                    _tabIndex: '',
                    _getNodeMethods: function () {
                        let node = self.nodes[this._editorNode];
                        return node.methods
                    },
                    _getProtoNodeMethods: function () {
                        let node = self.nodes[this._editorNode];
                        let prototypeMethods = LCSEditor.getMethods.call(self, self.kernel, node.extendsID);
                        return prototypeMethods
                    },
                    id: "liveCodeEditor",
                    _setNode: function (node) {
                        this._editorNode = node;
                        this._method.body = ''
                    },
                    class: "codeEditorGrid mdc-layout-grid max-width mdc-layout-grid--align-left resizable",
                    // _getComplexProps: function(){
                    //     let node = self.nodes[this._editorNode];
                    //     let currentNode = document.querySelector('#currentNode');
                    //     var props = {}
                    //     if (currentNode !== null) {
                    //         props = currentNode._getNodeComplexProperties();
                    //     }
                    //     return props
                    // },
                    // _listPropertyElement: function (m) {
    
                    //     return {
                    //         $type: "li",
                    //         class: "mdc-list-item",
                    //         $components: [{
                    //             $type: "a",
                    //             class: "mdc-list-item",
                    //             $href: "#",
                    //             $text: m[1].name,
    
                    //             onclick: function (e) {
    
                    //                 this._method = {};
                    //                 this._methodName = m[1].name;
                    //                 this._method.body = m[1].rawValue
                    //                 this._method.type = "complexProperty"
    
                    //             }
                    //         }]
                    //     }
                    // },
                    _listElement: function (m) {
    
                        return {
                            $type: "li",
                            class: "mdc-list-item",
                            $components: [{
                                $type: "a",
                                class: "mdc-list-item",
                                $href: "#",
                                $text: m[0],
    
                                onclick: function (e) {
                                    let method = vwf.getMethod(this._editorNode, m[0]);
                                    //document.querySelector('#aceEditor').
                                    this._method = method;
                                    this._methodName = m[0];
                                    //self.currentNodeID = m.ID;
                                    //document.querySelector('#currentNode')._setNode(m.ID);
                                }
                            }]
                        }
                    },
                    $update: function () {
                        this.$components = [
                            {
    
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                        $components: [
                                            {
                                                $type: "h3",
                                                class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
                                                $text: this._editorNode
                                            }
    
                                        ]
                                    },
    
    
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1 tooltip",
                                        $components: [
                                            {
                                                class: "tooltiptext",
                                                $type: "span",
                                                $text: "Update"
                                            },
                                            self.widgets.iconButton({
                                                'label': 'refresh',
                                                "styleClass": "mdc-button--outlined",
                                            // self.widgets.buttonStroked(
                                            //     {
                                            //         "label": "Update",
                                                    "onclick": function (e) {
                                                        let editor = document.querySelector("#aceEditor").env.editor;
                                                        let evalText = editor.getValue();
    
                                                        //    if (this._method.type == 'complexProperty') {
    
                                                        //         let propValue = evalText;
                                                        //         try {
                                                        //             //propValue = JSON.parse(propValue);
                                                        //             self.kernel.setProperty(this._editorNode, this._methodName, propValue);
    
                                                        //         } catch (e) {
                                                        //             // restore the original value on error
                                                        //             this.value = propValue;
                                                        //         }
                                                        //     } else {
    
                                                        //     }
                                                        self.kernel.setMethod(this._editorNode, this._methodName,
                                                            { body: evalText, type: "application/javascript", parameters: this._method.parameters });
                                                    }
    
                                                }
                                            )]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1 tooltip",
                                        $components: [
                                            {
                                                class: "tooltiptext",
                                                $type: "span",
                                                $text: "Call It"
                                            },
                                            self.widgets.iconButton({
                                                'label': 'play_arrow',
                                                "styleClass": "mdc-button--outlined",
                                            // self.widgets.buttonStroked(
                                            //     {
                                            //         "label": "Call",
                                                    "onclick": function (e) {
                                                        var params = [];
    
                                                        if (this._method.parameters) {
                                                            let paramsLength = this._method.parameters.length
    
    
                                                            if (paramsLength >= 1) {
                                                                let paramsVal = document.querySelector("#methodParams").value;
                                                                try {
                                                                    params = JSON.parse(paramsVal);
                                                                    //params.push(prmtr);
                                                                } catch (e) {
                                                                    self.logger.error('Invalid Value');
                                                                }
                                                            }
                                                        };
    
                                                        let editor = document.querySelector("#aceEditor").env.editor;
                                                        let evalText = editor.getValue();
                                                        let allLines = editor.selection.doc.getAllLines();
    
                                                        let search = this._methodName+'(';
                                                        let findLine = Object.entries(allLines).filter(el=>el[1].includes(search))[0];
                                                        
    
                                                        //TODO: temporal fix for recursive future call from the editor
                                                        if(findLine) {
                                                        if(findLine[1].includes(search)) {
    
                                                            let position = {
                                                                row: findLine[0],
                                                                column: 0
                                                            };
                                                            var Range = ace.require("ace/range").Range;
                                                            let tempString = "//CLICK FOR CALL AGAIN ";
    
                                                            if(findLine[1].includes(tempString)){
                                                                let newText = findLine[1].replace(tempString, "");
    
                                                                editor.session.replace(new Range(position.row, 0, position.row, Number.MAX_VALUE), newText);
                                                                self.kernel.setMethod(this._editorNode, this._methodName,
                                                                    { body: editor.getValue(), type: "application/javascript", parameters: this._method.parameters });
                                                            } else if(findLine[1].includes("//")) { //startsWith
                                                            } else {
    
                                                                let newText = tempString + findLine[1];
                                                                editor.session.replace(new Range(position.row, 0, position.row, Number.MAX_VALUE), newText);
                                                                self.kernel.setMethod(this._editorNode, this._methodName,
                                                                    { body: editor.getValue(), type: "application/javascript", parameters: this._method.parameters });
                                                            }
    
                                                        }
                                                        }
                                                        self.kernel.callMethod(this._editorNode, this._methodName, params);
                                                    }
                                                })
                                        ]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1 tooltip",
                                        $components: [
                                            {
                                                class: "tooltiptext",
                                                $type: "span",
                                                $text: "Do It"
                                            },
                                            self.widgets.iconButton({
                                                'label': 'arrow_forward',
                                                "styleClass": "mdc-button--outlined",
                                            // self.widgets.buttonStroked(
                                            //     {
                                            //         "label": "Do It",
                                                    "onclick": function (e) {
                                                        let editor = document.querySelector("#aceEditor").env.editor;
                                                        LCSEditor.codeEditorDoit.call(self, editor, this._editorNode);
                                                    }
                                                })
                                        ]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1 tooltip",
                                        $components: [
                                            {
                                                class: "tooltiptext",
                                                $type: "span",
                                                $text: "Print It"
                                            },
                                            self.widgets.iconButton({
                                                'label': 'details',
                                                "styleClass": "mdc-button--outlined",
                                            // self.widgets.buttonStroked(
                                            //     {
                                            //         "label": "Print It",
                                                    "onclick": function (e) {
                                                        let editor = document.querySelector("#aceEditor").env.editor;
                                                        LCSEditor.codeEditorPrintit.call(self, editor, this._editorNode);
                                                    }
                                                })
                                        ]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1 tooltip",
                                        $components: [
                                            {
                                                class: "tooltiptext",
                                                $type: "span",
                                                $text: "Print It on Console"
                                            },
                                            self.widgets.iconButton({
                                                'label': 'code',
                                                "styleClass": "mdc-button--outlined",
                                            // self.widgets.buttonStroked(
                                            //     {
                                            //         "label": "Print It on Console",
                                                    "onclick": function (e) {
                                                        let editor = document.querySelector("#aceEditor").env.editor;
                                                        LCSEditor.codeEditorPrintitInDebugger.call(self, editor, this._editorNode);
                                                    }
                                                })
                                        ]
                                    }
    
                                ]
                            },
                            {
    
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                        style: "overflow-y: scroll; max-height: 400px;",
                                        $components: [
                                            {
    
                                                $type: "div",
                                                class: "mdc-list-group",
    
                                                $components: [
    
                                                    {
                                                        $type: "h3",
                                                        class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
                                                        $text: "Node methods"
                                                    },
                                                    {
    
                                                        $type: "ul",
                                                        class: "mdc-list",
                                                        $components: Object.entries(this._getNodeMethods()).map(this._listElement)
                                                    }, listDivider,
                                                    {
                                                        $type: "h3",
                                                        class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
                                                        $text: "Proto methods"
                                                    },
                                                    {
    
                                                        $type: "ul",
                                                        class: "mdc-list",
                                                        $components: Object.entries(this._getProtoNodeMethods()).map(this._listElement)
                                                    }, listDivider,
                                                    {
                                                        $type: "h3",
                                                        class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
                                                        $text: "Events"
                                                    }
                                                    // {
                                                    //     
                                                    //     $type: "ul",
                                                    //     class: "mdc-list",
                                                    //     $components: Object.entries(this._getComplexProps()).map(this._listPropertyElement)
                                                    // }
    
                                                ]
    
    
                                            }
                                        ]
                                    },
    
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-9",
                                        $components: [
                                            {
    
                                                class: "aceEditor",
                                                id: "aceEditor",
                                                $type: "div",
                                                $text: this._method.body,
                                                $init: function () {
                                                    LCSEditor.createAceEditor.call(self, this._editorNode, "aceEditor");
                                                }
                                            }
    
                                        ]
                                    }
                                ]
                            },
                            {
    
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            {
                                                $type: "span",
                                                $text: "*"
                                            }
                                        ]
                                    }
                                ]
                            },
                            { //params input
    
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                        $components: [
                                            self.widgets.inputTextFieldOutlined({
                                                "id": 'methodName',
                                                "label": "Method name",
                                                "value": "newMethodName",
                                                "change": function (e) {
                                                    let propValue = this.value;
                                                    try {
    
                                                    } catch (e) {
                                                        // restore the original value on error
    
                                                    }
                                                }
                                            })
    
                                        ]
                                    },
    
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-7",
                                        $components: [
                                            self.widgets.inputTextFieldOutlined({
                                                "id": 'methodParams',
                                                "label": "Method parameters",
                                                "value": JSON.stringify(this._method.parameters),
                                                "change": function (e) {
                                                    let propValue = this.value;
                                                    try {
    
                                                    } catch (e) {
                                                        // restore the original value on error
    
                                                    }
                                                }
                                            })
    
                                        ]
                                    },
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                        $components: [
                                            self.widgets.buttonStroked(
                                                {
                                                    "label": "Create",
                                                    "onclick": function (e) {
                                                        let methodName = document.querySelector('#methodName').value;
                                                        //let methodParams = document.querySelector('#methodParams');
                                                        var params = [];
                                                        let body = '';
                                                        let paramsVal = document.querySelector("#methodParams").value;
                                                        if (paramsVal !== '') {
                                                            try {
                                                                params = JSON.parse(paramsVal);
                                                                //params.push(prmtr);
                                                            } catch (e) {
                                                                self.logger.error('Invalid Value');
                                                            }
                                                        }
    
    
                                                        self.kernel.createMethod(this._editorNode, methodName, params, body);
                                                        this._setNode(this._editorNode);
                                                        // let editor = document.querySelector("#aceEditor").env.editor;
                                                        // codeEditorDoit.call(self, editor, this._editorNode);
                                                    }
                                                })
                                        ]
                                    }
                                ]
                            }
    
                        ]
                        //$components: 
                    }
                }
    
                let propWindow = {
                    $cell: true,
                    $type: "div",
                    class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                    style: "overflow-y: scroll; max-height: 800px;",
    
                    $components: [
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
    
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
    
                                        nodesCell
    
                                    ]
                                }
                            ]
                        }
    
    
    
    
                        //     <button class="mdc-button">
                        //     Flat button
                        //   </button>
                    ]
    
                }
    
    
    
    
    
                let clientListCell = {
                    $cell: true,
                    $type: "div",
                    class: "mdc-list",
                    id: "clientsList",
                    _watchNodes: [],
                    _listElement: function (m) {
                        return {
    
                            $type: "a",
                            class: "mdc-list-item",
                            $href: "#",
                            $text: m.name,
    
                            onclick: function (e) {
                                //self.currentNodeID = m.ID;
                                //document.querySelector('#currentNode')._setNode(m.ID);
                            }
                        }
                    },
                    $init: function () {
                        var t = this;
                        setInterval(function () {
                            t._updateMe();
                        }, 1000);
                    },
                    _updateMe: function () {
                        let clientNodes = self.nodes["proxy/clients.vwf"];
                        if (clientNodes) this._watchNodes = self.nodes["proxy/clients.vwf"].children.slice();
                    },
                    $update: function () {
                        //this._clientNodes
                        this.$components = this._watchNodes.map(this._listElement)
                    }
                }
    
                //createCellWindow("clientsWindow", clientListCell, "Clients");
                //createCellWindow("propWindow", propWindow, "Scene");
                _self_.createCellWindow("codeEditorWindow", codeEditorWindow, "Code editor");
                _self_.createCellWindow("propEditorWindow", propEditorWindow, "Prop editor");
    
    
    
    
                let viewSceneProps = {
                    $cell: true,
                    $type: "div",
                    class: "propGrid mdc-layout-grid mdc-layout-grid--align-left",
                    //style: "overflow-y: scroll; max-height: 500px; overflow-x: hidden;",
                    $components: [
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
    
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
    
                                        nodesCell
    
                                    ]
                                }]
                        }
                    ]
                }
    
    
                let sideBar = {
                    $cell: true,
                    $type: "div",
                    id: 'sideBar',
                    class: "sideBar mdc-top-app-bar--fixed-adjust",
                    _sideBarComponent: {},
                    _sideCurrentNode: '',
                    $init: function () {
                        this.style.visibility = 'hidden';
                        let fileName = 'appui_js';
                        let worldName = self.helpers.getRoot().root;//url.split('/')[0];
                        let userDB = _LCSDB.user(_LCS_WORLD_USER.pub);
    
                        userDB.get('worlds').get(worldName).get(fileName).once(res => {
    
                            this._importScript(res);
                        })
    
    
                    },
                    _importScript: function (sSrc, fOnload) {
                        var oScript = document.createElement("script");
                        oScript.type = "text\/javascript";
                        oScript.async = false;
                        //oScript.onerror = loadError;
                        if (fOnload) { oScript.onload = fOnload; }
                        oScript.text = sSrc;
                        //let sideBar = document.querySelector('#sideBar');
                        this.appendChild(oScript);
                    },
                    _getAppDef: async function () {
                        // let response = await fetch("/" + self.getRoot() + "/appui.js");
                        // let data = await response.text();
                        // //console.log(data)
                        // return data
                    },
                    $update: function () {
                        this.$components = [
                            {
    
                                $type: "button",
                                class: "mdc-button mdc-button--compact",
                                $text: "X",
                                onclick: function (e) {
                                    document.querySelector('#sideBar').style.visibility = 'hidden';
                                    this._sideBarComponent = Object.assign({}, {});
                                }
    
                            },
                            {
                                $type: "button",
                                class: "mdc-button mdc-button--compact",
                                $text: " | ",
                                onclick: function (e) {
                                    if (document.querySelector('#currentNode')) 
                                        document.querySelector('#currentNode')._setNode(vwf.application())
                                }
                            },
                            
                           
                            this._sideBarComponent
                        ]
                    }
                    //$components: [this._sideComponents]
                }
    
                document.querySelector('#' + 'sideBar').$cell(sideBar)
    
                let defaultApp = function () {
                    return {
                        $cell: true,
                        $type: "div",
                        class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
                        $components: [
                            {
    
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
    
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            {
    
                                                $type: "h3",
                                                class: "mdc-typography--headline",
                                                $text: "Application",
    
    
                                            }
    
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                }
    
                let drawerCell = {
                    $cell: true,
                    $type: "div",
                    class: "mdc-drawer__content",
                    $components: [
                        {
                            $type: "nav",
                            class: "mdc-list",
                            $init: function () { },
                            $components: [
    
    
                                {
                                    $type: "a",
                                    class: "mdc-list-item mdc-list-item--activated",
                                    $href: "#",
                                    tabindex: "-1",
                                    onclick: function (e) {
                                        e.preventDefault();
                                        let sideBar = document.querySelector('#sideBar');
    
                                        try {
                                            sideBar._sideBarComponent = createApp.call(self);
                                        } catch (e) {
                                            sideBar._sideBarComponent = defaultApp();
                                        }
    
                                        self.drawer.open = false//!self.drawer.open
                                        //self.drawer.close();
                                        document.querySelector('#sideBar').style.visibility = 'visible';
                                    },
                                    $components: [{
                                        $type: "i",
                                        class: "material-icons mdc-list-item__graphic",
                                        'aria-hidden': "true",
                                        $text: "play_arrow"
                                    },
                                    {
                                        $text: self.lang.t("App")
                                    }]
    
                                },
                                {
    
                                    $type: "a",
                                    class: "mdc-list-item",
                                    $href: "#",
                                    tabindex: "-1",
                                    onclick: function (e) {
                                        e.preventDefault();
                                        let sideBar = document.querySelector('#sideBar');
                                        sideBar._sideBarComponent = viewSceneProps;
    
                                        let currentNode = document.querySelector('#sideBar')._sideCurrentNode;
                                        currentNode == '' ? document.querySelector('#sideBar')._sideCurrentNode = (vwf_view.kernel.find("", "/")[0]) :
                                            document.querySelector('#sideBar')._sideCurrentNode = currentNode;
    
                                        document.querySelector('#sideBar').style.visibility = 'visible';
                                        self.drawer.open = !self.drawer.open
                                        // let currentNode = document.querySelector('#currentNode')._currentNode;
                                        // currentNode == '' ? document.querySelector('#currentNode')._setNode(vwf_view.kernel.find("", "/")[0]) :
                                        //     document.querySelector('#currentNode')._setNode(currentNode);
    
    
    
    
                                    },
                                    $components: [{
    
                                        $type: "i",
                                        class: "material-icons mdc-list-item__graphic",
                                        $text: "description"
                                    },
                                    {
                                        $text: "Scene"
                                    }
                                    ]
    
                                },
    
                                {
    
                                    $type: "a",
                                    class: "mdc-list-item",
                                    $href: "#",
                                    tabindex: "-1",
                                    onclick: function (e) {
                                        e.preventDefault();
                                        //self.currentNodeID = m.ID;
    
                                        // document.querySelector('#clientsList')._setClientNodes(self.nodes["proxy/clients.vwf"]);
                                        // document.querySelector('#clientsWindow').style.visibility = 'visible';
                                        let sideBar = document.querySelector('#sideBar');
                                        sideBar._sideBarComponent = createSettings;
    
                                        self.drawer.open = !self.drawer.open
                                        document.querySelector('#sideBar').style.visibility = 'visible';
                                    },
                                    $components: [{
                                        $type: "i",
                                        class: "material-icons mdc-list-item__graphic",
                                        'aria-hidden': "true",
                                        $text: "create"
                                    },
                                    {
                                        $text: "Create"
                                    }]
    
                                },
    
                                {
    
                                    $type: "a",
                                    class: "mdc-list-item",
                                    $href: "#",
                                    tabindex: "-1",
                                    onclick: function (e) {
                                        e.preventDefault();
                                        // var currentNode = document.querySelector('#currentNode')._currentNode;
                                        // if (currentNode == '') {
                                        //     currentNode = vwf_view.kernel.find("", "/")[0];
                                        // }
                                        document.querySelector('#liveCodeEditor')._setNode(vwf_view.kernel.find("", "/")[0]);
                                        //createAceEditor(self, currentNode);
                                        document.querySelector('#codeEditorWindow').style.visibility = 'visible';
                                    },
                                    $components: [{
                                        $type: "i",
                                        class: "material-icons mdc-list-item__graphic",
                                        'aria-hidden': "true",
                                        $text: "code"
                                    },
                                    {
                                        $text: "Code editor"
                                    }]
    
                                },
    
                                {
    
                                    $type: "a",
                                    class: "mdc-list-item",
                                    $href: "#",
                                    tabindex: "-1",
                                    onclick: function (e) {
                                        e.preventDefault();
                                        //self.currentNodeID = m.ID;
    
                                        // document.querySelector('#clientsList')._setClientNodes(self.nodes["proxy/clients.vwf"]);
                                        // document.querySelector('#clientsWindow').style.visibility = 'visible';
                                        let sideBar = document.querySelector('#sideBar');
                                        sideBar._sideBarComponent = avatarSettings;
    
                                        self.drawer.open = !self.drawer.open
                                        document.querySelector('#sideBar').style.visibility = 'visible';
                                    },
                                    $components: [{
                                        $type: "i",
                                        class: "material-icons mdc-list-item__graphic",
                                        'aria-hidden': "true",
                                        $text: "account_circle"
                                    },
                                    {
                                        $text: "My Avatar"
                                    }]
    
                                },
    
    
                                {
    
                                    $type: "a",
                                    class: "mdc-list-item",
                                    $href: "#",
                                    tabindex: "-1",
                                    onclick: function (e) {
                                        e.preventDefault();
                                        //self.currentNodeID = m.ID;
    
                                        // document.querySelector('#clientsList')._setClientNodes(self.nodes["proxy/clients.vwf"]);
    
                                        let sideBar = document.querySelector('#sideBar');
                                        sideBar._sideBarComponent = viewSettings;
    
                                        self.drawer.open = !self.drawer.open
                                        document.querySelector('#sideBar').style.visibility = 'visible';
                                    },
                                    $components: [{
                                        $type: "i",
                                        class: "material-icons mdc-list-item__graphic",
                                        'aria-hidden': "true",
                                        $text: "settings"
                                    },
                                    {
                                        $text: "Settings"
                                    }]
    
                                },
                                {
    
                                    $type: "a",
                                    class: "mdc-list-item",
                                    $href: "#",
                                    tabindex: "-1",
                                    onclick: function (e) {
                                        e.preventDefault();
                                        //self.currentNodeID = m.ID;
    
                                        // document.querySelector('#clientsList')._setClientNodes(self.nodes["proxy/clients.vwf"]);
    
                                        let sideBar = document.querySelector('#sideBar');
    
                                        sideBar._sideBarComponent = loadSaveSettings;
    
                                        if (document.querySelector('#loadSaveSettings')) {
                                            //document.querySelector('#loadSaveSettings')._refresh();
                                            //document.querySelector('#loadSaveSettings')._getStates();
                                        }
                                        //sideBar._sideBarComponent._getStates();
                                        self.drawer.open = !self.drawer.open
                                        document.querySelector('#sideBar').style.visibility = 'visible';
    
    
    
                                    },
                                    $components: [{
                                        $type: "i",
                                        class: "material-icons mdc-list-item__graphic",
                                        'aria-hidden': "true",
                                        $text: "save"
                                    },
                                    {
                                        $text: "Clone/Save"
                                    }]
    
                                },
    
    
    
    
    
                                self.widgets.divider,
                                webrtcGUI,
                                self.widgets.divider,
                                self.widgets.headerH3("h3", "Users online", "userList mdc-list-group__subheader"),
                                clientListCell
                                //widgets.headerH3("h3", "WebRTC", "userList mdc-list-group__subheader"),
    
                            ]
                        }
    
                        // {
                        //     $cell: true,
                        //     $type: "div",
                        //     class: "mdc-persistent-drawer__toolbar-spacer",
                        // },
    
    
    
                        // {
                        //     $cell: true,
                        //     $type: "div",
                        //     class: "mdc-list-group",
                        //     $components: [{
                        //         $cell: true,
                        //         $type: "nav",
                        //         class: "mdc-list",
                        //         $components: [
    
    
                        //         ]
                        //     }]
                        // }
                    ]
    
                };
    
                //             <div class="mdc-form-field">
                //   <input type="checkbox" id="input">
                //   <label for="input">Input Label</label>
                // </div>
    
                document.querySelector("#drawer").$cell({
                    $cell: true,
                    $type: "aside",
                    class: "mdc-drawer mdc-drawer--modal",
                    $init: function () {
                        let elScrim = document.createElement("div");
                        elScrim.classList.add("mdc-drawer-scrim");
                        this.after(elScrim);
    
                        self.drawer = new mdc.drawer.MDCDrawer(this);
                    },
                    $components: [
                        {
                            $type: "div",
                            class: "mdc-drawer__header",
                            $components: [
                                {
                                    $type: "h3",
                                    class: "mdc-drawer__title",
                                    $text: self.lang.t("home")
                                },
                                {
                                    $type: "h6",
                                    class: "mdc-drawer__subtitle",
                                    $text: "menu"
                                }
                            ]
    
                        },
                        // {     
                        //         $type: "button"
                        // },
                        drawerCell]
                }
                );
    
    
    
    
                let toolbar = {
                    $cell: true,
                    $type: "div",
                    class: "mdc-top-app-bar__row",
                    $components: [{
                        $type: "section",
                        class: "mdc-top-app-bar__section mdc-top-app-bar__section--align-start",
                        $components: [
                            {
                                $type: "button",
                                type: "button",
                                class: "mdc-icon-button material-icons mdc-top-app-bar__navigation-icon",
                                $text: "menu"
    
    
                            },
                            {
                                $type: "span",
                                class: "mdc-top-app-bar__title catalog-title",
                                $text: "LiveCoding.space"
                            },
    
    
                            {
                                $type: "div",
                                class: "mdc-menu-anchor",
                                $components: [
                                    {
                                        $type: "a",
                                        class: "mdc-icon-button material-icons mdc-top-app-bar__action-item",
                                        id: "toggleCreate",
                                        $text: "apps",
                                        'aria-label': "More"
                                    },
                                    {
                                        $type: "div",
                                        class: "mdc-menu mdc-menu-surface",
                                        "tabindex": "-1",
                                        id: "create-menu",
                                        $init: function () {
    
                                            //var menuEl = document.querySelector('#demo-menu');
                                            var menu = new mdc.menu.MDCMenu(this);
                                            var toggle = document.querySelector('#toggleCreate');
                                            toggle.addEventListener('click', function () {
                                                menu.open = !menu.open;
                                            });
    
                                        },
                                        style: "transform-origin: right top 0px; right: 0px; top: 0px;",
                                        $components: [
                                            {
                                                $type: "ul",
                                                class: "mdc-menu__items mdc-list",
                                                role: "menu",
                                                'aria-hidden': "true",
                                                // style: "transform: scale(1, 1);",
                                                $components: [
                                                    {
                                                        $type: "li",
                                                        class: "mdc-list-item",
                                                        role: "menuitem",
                                                        tabindex: "0",
                                                        $text: "Apps"
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            },
    
                            self.widgets.icontoggle({
                                'styleClass': "mdc-top-app-bar__action-item",
                                'id': "selectNodeSwitch",
                                'label': 'select',
                                'on': JSON.stringify({ "content": "radio_button_checked", "label": "Select" }),
                                'off': JSON.stringify({ "content": "radio_button_unchecked", "label": "Unselect" }),
                                'state': false,
                                'init': function () {
    
                                    this._comp = mdc.iconButton.MDCIconButtonToggle.attachTo(this);
                                    this.addEventListener('MDCIconButtonToggle:change', (e) => {
    
                                        let avatarID = 'avatar-' + vwf.moniker_;
                                        let avatarNode = self.nodes['avatar-' + vwf.moniker_];
                                        let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
    
                                        if (mode) {
    
                                            console.log("unselect");
                                            vwf_view.kernel.setProperty(avatarID, "selectMode", false);
    
                                        } else {
    
                                            console.log("select")
                                            vwf_view.kernel.setProperty(avatarID, "selectMode", true);
                                        }
    
                                    });
    
                                }
                            })
    
                        ]
                    },
                    {
                        $type: "section",
                        class: "mdc-top-app-bar__section  mdc-top-app-bar__section--align-end",
                        $components: [
                            {
                                $type: "a",
                                href: "#",
                                class: "mdc-icon-button menuItem mdc-top-app-bar__action-item",
                                $text: "EN",
                                onclick: function () {
                                    //self.lang.changeLanguageTo('en')
                                    localStorage.setItem('krestianstvo_locale', 'en');
                                    window.location.reload(true);
                                }
                            },
                            {
                                $type: "a",
                                href: "#",
                                class: "mdc-icon-button menuItem mdc-top-app-bar__action-item",
                                $text: "RU",
                                onclick: function () {
                                    //self.lang.changeLanguageTo('ru')
                                    localStorage.setItem('krestianstvo_locale', 'ru');
                                    window.location.reload(true);
                                }
                            },
                            {
                                $type: "a",
                                href: "#",
                                class: "material-icons mdc-icon-button mdc-top-app-bar__action-item",
                                $text: "help",
                                'aria-label': "Help",
                                onclick: function (e) {
                                    e.preventDefault();
                                    console.log("TODO: help window")
                                }
                            }
    
                        ]
                    }
                    ]
    
                };
    
                document.querySelector("#toolbar").$cell({
                    $cell: true,
                    $type: "div",
                    class: "drawer-frame-app-content",
                    $components: [
                        {
                            $type: "header",
                            class: "mdc-top-app-bar drawer-top-app-bar",
                            $init: function () {
    
                                const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(this);
                                topAppBar.listen('MDCTopAppBar:nav', () => {
                                    self.drawer.open = !self.drawer.open;
                                });
                            },
                            $components: [
                                toolbar
                            ]
                        }
                    ]
                }
                );
    
                // var toggleNodes = document.querySelectorAll('.mdc-icon-button');
                // toggleNodes.forEach(el => {
                //     mdc.iconButton.MDCIconButtonToggle.attachTo(el);
                // });
    
    
                //==============
    
            },
    
            createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
                childSource, childType, childIndex, childName, callback /* ( ready ) */) {
    
                // var nodeIDAttribute = $.encoder.encodeForHTMLAttribute("id", nodeID, true);
                // var childIDAttribute = $.encoder.encodeForHTMLAttribute("id", childID, true);
                // var childIDAlpha = $.encoder.encodeForAlphaNumeric(childID);
                let self = this;

                var kernel = this.kernel;
                var parent = this.nodes[nodeID];
                var node = this.nodes[childID] = {
                    children: [],
                    properties: [],
                    events: {},
                    methods: {},
                    parent: parent,
                    parentID: nodeID,
                    ID: childID,
                    extendsID: childExtendsID,
                    implementsIDs: childImplementsIDs,
                    source: childSource,
                    name: childName,
                };
    
                if (parent) {
                    parent.children.push(node);
                }
    
                if (childID == vwf_view.kernel.find("", "/")[0] && childExtendsID && this.kernel.test(childExtendsID,
                    "self::element(*,'proxy/aframe/ascene.vwf')", childExtendsID)) {
                    this.scenes[childID] = node;
                }
    
    
                let nodeCell = document.querySelector("#currentNode");
    
                if (nodeCell !== null) {
                    if (nodeCell._currentNode === nodeID) {
                        nodeCell._getChildNodes();
    
                    }
                }
    
    
                if (nodeID === this.kernel.application()) {
                    // document.querySelector('a-scene').classList.add("mdc-toolbar-fixed-adjust");
                    //document.querySelector('body').classList.add("editor-body", "mdc-typography");
                }
    
    
    
            },
    
            createdProperty: function (nodeID, propertyName, propertyValue) {
    
                return this.initializedProperty(nodeID, propertyName, propertyValue);
            },
    
            initializedProperty: function (nodeID, propertyName, propertyValue) {
    
                var node = this.nodes[nodeID];
    
                if (!node) return;  // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
    
                var property = node.properties[propertyName] = LCSEditor.createProperty.call(this, node, propertyName, propertyValue);
    
                node.properties.push(property);
    
                let nodeCell = document.querySelector("#currentNode");
                if (nodeCell !== null) {
                    if (nodeCell._currentNode === nodeID) {
                        nodeCell._getNodeProperties();
                    }
                }
    
            },
    
            deletedNode: function (nodeID) {
                var node = this.nodes[nodeID];
                node.parent.children.splice(node.parent.children.indexOf(node), 1);
                delete this.nodes[nodeID];
    
                let nodeCell = document.querySelector("#currentNode");
    
    
                if (nodeCell) {
                    if (nodeCell._currentNode !== "") {
                        if (nodeCell._currentNode !== nodeID) {
                            //&& (this.nodes[nodeID] !== undefined)
                            nodeCell._getChildNodes();
                        } else {
                            nodeCell._setNode(vwf_view.kernel.find("", "/")[0]);
                            nodeCell._getChildNodes();
                        }
                    }
                }
    
    
    
            },
    
            //addedChild: [ /* nodeID, childID, childName */ ],
            //removedChild: [ /* nodeID, childID */ ],
    
            satProperty: function (nodeID, propertyName, propertyValue) {
                var node = this.nodes[nodeID];
    
                if (!node) return;  // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
    
                // It is possible for a property to have satProperty called for it without ever getting an
                // initializedProperty (if that property delegated to itself or another on replication)
                // Catch that case here and create the property
                if (!node.properties[propertyName]) {
    
                    var property = node.properties[propertyName] = LCSEditor.createProperty.call(this, node, propertyName, propertyValue);
    
                    node.properties.push(property);
                }
    
    
                try {
                    propertyValue = LCSEditor.utility.transform(propertyValue, LCSEditor.utility.transforms.transit);
                    node.properties[propertyName].value = JSON.stringify(propertyValue);
                    node.properties[propertyName].rawValue = propertyValue;
                } catch (e) {
                    this.logger.warnx("satProperty", nodeID, propertyName, propertyValue,
                        "stringify error:", e.message);
                    node.properties[propertyName].value = propertyValue;
                }
    
    
                let nodeCell = document.querySelector('#currentNode');
    
                if (nodeCell !== null) {
                    if (nodeCell._currentNode == nodeID && propertyName == 'isPlaying') {
                        console.log('SET PLAY !!!');
                        let compID = 'soundStopStartSwitch-' + nodeID;
                        let playSwitch = document.querySelector("[id='" + compID + "']");
    
                        if (playSwitch) {
                            // const mycomp = new mdc.iconToggle.MDCIconToggle(playSwitch); //new mdc.select.MDCIconToggle
                            playSwitch._comp.on = propertyValue;
                        }
                    }
    
                }
    
    
                if (nodeCell !== null) {
                    if (nodeCell._currentNode == nodeID && propertyName == 'edit') {
                        console.log('EDIT !!!')
                    }
    
                }
    
    
                let propCell = document.querySelector("#currentNode #prop-" + propertyName);
                let propSlider = document.querySelector("#currentNode #prop-slider-" + propertyName);
    
    
                if (propCell !== null) {
                    if (propCell._currentNode == nodeID) {
                        propCell.value = node.properties[propertyName].getValue();
                    }
                }
    
                if (propSlider !== null) {
                    if (propSlider._currentNode == nodeID) {
                        //const propSliderComp = new new mdc.slider.MDCSlider(propSlider);
                        propSlider._comp.value = node.properties[propertyName].getValue();
                    }
                }
    
            },
    
            //gotProperty: [ /* nodeID, propertyName, propertyValue */ ],
    
            gotProperty: function (nodeID, propertyName, propertyValue) {
                var node = this.nodes[nodeID];
    
                if (!node) return;  // TODO: patch until full-graph sync is working; drivers should be able to assume that nodeIDs refer to valid objects
    
                let nodeCell = document.querySelector('#currentNode');
    
                if (nodeCell !== null) {
    
                    if (nodeCell._currentNode == nodeID && propertyName == 'edit') {
    
                        let gizmoChild = node.children.filter(el=>el.ID.includes('gizmo'));
                        if (gizmoChild.length > 0) {
    
                        let editCheckBox = document.querySelector("#currentNode #editnode");
    
                        if (editCheckBox) {
                            let mdcSwitch = editCheckBox._switch;
                            if (mdcSwitch) {
                                mdcSwitch.checked = propertyValue
                            }
                        }
                        console.log('EDIT !!! is ' + propertyValue)
                    }
                    }
    
                }
                
    
    
            },
    
    
    
    
            createdMethod: function (nodeID, methodName, methodParameters, methodBody) {
                var node = this.nodes[nodeID];
                if (node) {
                    node.methods[methodName] = methodParameters;
                }
            },
    
            //calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
    
            //},
    
            createdEvent: function (nodeID, eventName, eventParameters) {
                var node = this.nodes[nodeID];
                if (node) {
                    node.events[eventName] = eventParameters;
                }
            },
    
            firedEvent: function (nodeID, eventName, eventParameters) {
                let self = this;
                var node = this.nodes[nodeID];
                if (node) {
                  
                    if (eventName == 'printEvent'){
    
                        var clientThatSatProperty = self.kernel.client();
                        var me = self.kernel.moniker();
                       
        
                        // If the transform property was initially updated by this view....
                        if ( clientThatSatProperty == me) {
        
    
                        let editor = document.querySelector("#aceEditor").env.editor;
                        if(editor){
    
                            var cursorPosition = editor.getCursorPosition();
                            var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());
    
                            if (selectedText !== "") {
                                cursorPosition = editor.selection.getRange().end;
                            }
                            let data = eventParameters[0];//JSON.stringify(eventParameters[0]);
                            editor.session.insert(cursorPosition, data);
                        }
                        //console.log(eventParameters);
                    
                    }
                }
    
    
                if (eventName == "printIt") {
    
                    var clientThatSatProperty = self.kernel.client();
                    var me = self.kernel.moniker();
    
    
                    // If the transform property was initially updated by this view....
                    if (clientThatSatProperty == me) {
    
    
                        let selectedText = eventParameters[0];
                        let printText = _app.helpers.replaceSubStringALL(selectedText, 'this', 'me');
    
                        if (!self.nodes[nodeID].liveBindings) {
                            self.nodes[nodeID].liveBindings = {}
                        }
    
                        //let bindObject = self.nodes[nodeID].liveBindings;
                        //let bindString = 'vwf.views["vwf/view/aframe"].nodes["' + nodeID + '"].liveBindings';
                        let bindString = 'vwf.views["/drivers/view/editor"].nodes["' + nodeID + '"].liveBindings';
                        let sender = JSON.stringify(eventParameters[1]);
    
                        let scriptText = 'let binding = ' + bindString + '; binding.me = this; binding.sender = ' + sender + '; lively.vm.syncEval("var print = ' + printText + '",{topLevelVarRecorder: binding});';
                        vwf_view.kernel.execute(nodeID, scriptText);
    
                    }
    
                }
    
    


                }
            },
    
            executed: function (nodeID, scriptText, scriptType) {
    
                let self = this;
                let node = this.nodes[nodeID];
    
                if (!(node)) {
                    return;
                }
    
                if (scriptText.includes('var print')) {
                    let print = self.nodes[nodeID].liveBindings.print;
    
                    let me = self.kernel.moniker();
                    let sender = self.nodes[nodeID].liveBindings.sender;
    
                    if (me == sender) {
                        let data = JSON.stringify(print); //lively.lang.obj.inspect(print); 
                        self.kernel.fireEvent(nodeID, "printEvent", [data]);
                    }
                }

                // var nodeScript = {
                //     text: scriptText,
                //     type: scriptType,
                // };
    
                // if ( !this.allScripts[ nodeID ] ) {
                //     var nodeScripts = new Array();
                //     nodeScripts.push(nodeScript);
    
                //     this.allScripts[ nodeID ] = nodeScripts;
                // }
    
                // else {
                //     this.allScripts[ nodeID ].push(nodeScript);
                // }
            },
    
            //ticked: [ /* time */ ],
    
        });
    


    }

    /////////Functions/////
           


    createCellWindow(elementID, cellNode, title) {

        document.querySelector('#' + elementID).$cell({
            $cell: true,
            $type: "div",
            id: elementID,
            style: 'position: absolute;',
            class: 'draggable',
            $init: function () {
                // let draggie = new Draggabilly('.draggable', {
                //     handle: '.handle',
                //     containment: true
                //   });

                // get all draggie elements
                var draggableElems = document.querySelectorAll('.draggable');
                // array of Draggabillies
                var draggies = []
                // init Draggabillies
                for (var i = 0, len = draggableElems.length; i < len; i++) {
                    var draggableElem = draggableElems[i];
                    var draggie = new Draggabilly(draggableElem, {
                        handle: '.handle'
                        //containment: true
                    });
                    draggies.push(draggie);
                }


                this.style.visibility = 'hidden';
            },
            $components: [

                {

                    $type: "div",
                    class: "handle"
                },

                {

                    $type: "button",
                    class: "mdc-button mdc-button--compact",
                    $text: "X",
                    onclick: function (e) {
                        //self.currentNodeID = m.ID;
                        if( elementID == 'codeEditorWindow'){
                            //self.nodes[currentNode].liveBindings = {};
                    }
                        document.querySelector('#' + elementID).style.visibility = 'hidden';

                    }

                },
                {

                    $type: "span",
                    class: "mdc-typography--button",
                    $text: title
                },




                cellNode,
                {

                    $type: "div",
                    class: "handle",
                    style: "height: 10px; width: inherit;",
                    //$text: "sdfsdf"
                }
                // { $text: "23423"}
            ]
        }
        )


    }


     // -- getChildByName --------------------------------------------------------------------


     static getChildByName(node, childName) {

        var childNode = undefined;
        for (var i = 0; i < node.children.length && childNode === undefined; i++) {
            if (node.children[i].name == childName) {
                childNode = node.children[i];
            }
        }
        return childNode;
    }


    // -- viewScript ------------------------------------------------------------------------

    static createAceEditor(nodeID, elID) {

        let self = this;
        var editor = self.ace.edit(elID);
        editor.setTheme("ace/theme/monokai");
        editor.setFontSize(20);
        editor.getSession().setMode("ace/mode/javascript");

        editor.commands.addCommand({
            name: "doit",
            bindKey: { win: "Ctrl-e", mac: "Command-e" },
            exec: function () {
                LCSEditor.codeEditorDoit.call(self, editor, nodeID);
            }
        });

        editor.commands.addCommand({
            name: "printit",
            bindKey: { win: "Ctrl-b", mac: "Command-b" },
            exec: function () {
                LCSEditor.codeEditorPrintit.call(self, editor, nodeID);
            }
        });

        return editor;

    }

    static isAFrameComponent(nodeID) {

        let self = this;
        let node = self.nodes[nodeID];
        let nodeProtos = LCSEditor.getPrototypes(self.kernel, node.extendsID);


            if (nodeProtos.includes('proxy/aframe/componentNode.vwf')) {
                return true
            }
        

        return false
    }

    static isAFrameEntity(nodeID) {
        let self = this;
        let node = self.nodes[nodeID];
        let nodeProtos = LCSEditor.getPrototypes(self.kernel, node.extendsID);

            if (nodeProtos.includes('proxy/aframe/node.vwf')) {
                return true
            }
        

        return false
    }

    static getPrototypes(kernel, extendsID) {
        var prototypes = [];
        var id = extendsID;

        while (id !== undefined) {
            prototypes.push(id);
            id = kernel.prototype(id);
        }

        return prototypes;
    }

    static createProperty(node, propertyName, propertyValue) {

        var property = {
            name: propertyName,
            rawValue: propertyValue,
            value: undefined,
            getValue: function () {
                var propertyValue;
                if (this.value == undefined) {
                    try {
                        propertyValue = LCSEditor.utility.transform(this.rawValue, LCSEditor.utility.transforms.transit);
                        this.value = JSON.stringify(propertyValue);
                    } catch (e) {
                        this.logger.warnx("createdProperty", nodeID, this.propertyName, this.rawValue,
                            "stringify error:", e.message);
                        this.value = this.rawValue;
                    }
                }
                return this.value;
            }
        };

        return property;
    }


    static getProperties(kernel, extendsID) {

        var pTypes = LCSEditor.getPrototypes(kernel, extendsID);
        var pProperties = {};
        if (pTypes) {
            for (var i = 0; i < pTypes.length; i++) {
                var nd = this.nodes[pTypes[i]];
                if (nd && nd.properties) {
                    for (var key in nd.properties) {
                        pProperties[key] = { "prop": nd.properties[key], "prototype": pTypes[i] };
                    }
                }
            }
        }
        return pProperties;
    }

    static getChildren(kernel, extendsID) {

        var pTypes = LCSEditor.getPrototypes(kernel, extendsID);
        var pChildren = {};
        if (pTypes) {
            for (var i = 0; i < pTypes.length; i++) {
                var nd = this.nodes[pTypes[i]];
                if (nd && nd.children) {
                    for (var key in nd.children) {
                        pChildren[key] = nd.children[key];
                    }
                }
            }
        }
        return pChildren;
    }

    static getEvents(kernel, extendsID) {

        var pTypes = LCSEditor.getPrototypes(kernel, extendsID);
        var events = {};
        if (pTypes) {
            for (var i = 0; i < pTypes.length; i++) {
                var nd = this.nodes[pTypes[i]];
                if (nd && nd.events) {
                    for (var key in nd.events) {
                        events[key] = nd.events[key];
                    }
                }
            }
        }
        return events;
    }

    static getMethods(kernel, extendsID) {

        var pTypes = LCSEditor.getPrototypes(kernel, extendsID);
        var methods = {};
        if (pTypes) {
            for (var i = 0; i < pTypes.length; i++) {
                var nd = this.nodes[pTypes[i]];
                if (nd && nd.methods) {
                    for (var key in nd.methods) {
                        methods[key] = nd.methods[key];
                    }
                }
            }
        }
        return methods;
    }


    // -- Show Code Editor tab



    static codeEditorDoit(editor, nodeID) {
        let self = this;
        var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());

        if (selectedText == "") {

            var currline = editor.getSelectionRange().start.row;
            var selectedText = editor.session.getLine(currline);

        }

        //console.log(selectedText);
        //var sceneID = self.kernel.application();
        vwf_view.kernel.execute(nodeID, selectedText);

    }

    static codeEditorPrintitInDebugger(editor, nodeID) {
        let self = this;
        var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());

        if (selectedText == "") {

            var currline = editor.getSelectionRange().start.row;
            var selectedText = editor.session.getLine(currline);

        }

        let scriptText = 'console.log(' + selectedText + ');'
        self.kernel.execute(nodeID, scriptText);


    }

    static codeEditorPrintit(editor, nodeID) {

        let self = this;
        var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());

        if (selectedText == "") {

            var currline = editor.getSelectionRange().start.row;
            var selectedText = editor.session.getLine(currline);

        }

        let me = self.kernel.moniker();
        vwf_view.kernel.fireEvent(nodeID, 'printIt', [selectedText, me]);
    }

    static codeEditorPrintitConsole (editor, nodeID) {
        let self = this;
        var selectedText = editor.getSession().doc.getTextRange(editor.selection.getRange());

        if (selectedText == "") {

            var currline = editor.getSelectionRange().start.row;
            var selectedText = editor.session.getLine(currline);

        }
  
        let scriptText = 'console.log(' + selectedText + ');'
        self.kernel.execute(nodeID, scriptText);
    }

}

LCSEditor.utility = new Utility();

export { LCSEditor as default}

  

// define([
//     "module",
//     "vwf/view/lib/colorpicker/colorpicker.min"
// ], function (module, colorpicker) {

//     var self;
//     const view = vwf.viewModule;
//     const utility = vwf.utility;

//     return view.load(module, 
        

// });