How to use babylonjs-editor - 10 common examples

this.tool.add(node.properties, property.name, property.enums).name(property.name).onChange(r => {
                    if (property.enumsTarget)
                        node.properties[property.name] = property.enumsTarget[r];
                });
                continue;
            }

            // Variable
            if (property.name === 'Variable') {
                const variables = node.graph.variables.map(v => v.name);
                this.tool.add(node.properties, property.name, variables).name(property.name);
                continue;
            }

            // Other
            const ctor = Tools.GetConstructorName(value).toLowerCase();

            switch (ctor) {
                // Primitives
                case 'number':
                case 'string':
                case 'boolean':
                    this.tool.add(node.properties, property.name).name(property.name);
                    break;

                // Vectors
                case 'array':
                    switch (value.length) {
                        case 2:
                        case 3:
                        case 4:
                            const names = ['x', 'y', 'z', 'w'];

private _setupNodeType (node: GraphTypeNode): void {
        const value = node.properties.value;
        const ctor = Tools.GetConstructorName(value).toLowerCase();

        switch (ctor) {
            // Primitives
            case 'number':
            case 'string':
            case 'boolean':
                this.tool.add(node.properties, 'value').name('Value');
                break;

            // Vectors
            case 'array':
                switch (value.length) {
                    case 2:
                    case 3:
                    case 4:
                        const names = ['x', 'y', 'z', 'w'];

this.contextMenu.tree.onClick = async (id) => {
            // Custom callback?
            const customItem = items.find(i => i.callback && i.id === id);
            if (customItem) {
                customItem.callback(asset);
                return this.contextMenu.hide();
            }

            switch (id) {
                // Rename the asset
                case 'rename':
                    if (!component.onRenameAsset)
                        return;
                    
                    const oldName = asset.name;
                    const newName = await Dialog.CreateWithTextInput('New asset name');

                    asset.name = newName;
                    component.onRenameAsset(asset, newName);

                    UndoRedo.Push({
                        fn: (type) => {
                            if (type === 'from')
                                component.onRenameAsset(asset, oldName);
                            else
                                component.onRenameAsset(asset, newName);

                            this.refresh();
                            this.showTab(component.id);
                        }
                    });
                    break;

protected async add (): Promise {
        // Configure
        GraphExtension.ClearNodes();
        GraphExtension.RegisterNodes(this.node);

        // Create data
        const name = await Dialog.CreateWithTextInput('Graph Name');
        const data: BehaviorGraph = {
            name: name,
            active: true,
            graph: new LGraph().serialize()
        };
        this.datas.metadatas.push(data);

        // Add to grid
        this.grid.addRow({
            recid: this.datas.metadatas.length - 1,
            name: data.name,
            active: true
        });

        // Select latest script
        this.grid.select([this.datas.metadatas.length - 1]);

// Create tab
        this.codeEditor.codeLayout.layout.addPanelToStack('edit-panel', {
            type: 'component',
            title: code.name,
            componentName: code.id,
            html: `<div style="width: 100%; height: 100%;" id="${code.id}-editor"></div>`,
            onClose: () =&gt; {
                this.code.dispose();
                
                if (this.onClose)
                    this.onClose();
            }
        });

        // Create editor
        this.code = new CodeEditor('typescript', code.code);
        await this.code.build(code.id + '-editor');

        // On the user changes the code
        let compileTimeoutId = -1;

        this.code.onChange = value =&gt; {
            // Set a timeout before transpilation until the user
            // finished typings his code
            clearTimeout(compileTimeoutId);

            compileTimeoutId = setTimeout(() =&gt; {
                const config = {
                    module: 'cjs',
                    target: 'es5',
                    experimentalDecorators: true,
                };

public async create(): Promise {
        // Layout
        this.layout = new Layout(this.divElement.id);
        this.layout.panels = [
            { type: 'top', size: 30, resizable: false, content: '<div style="width: 100%; height: 100%;" id="METADATA-EDITOR-TOOLBAR"></div>' },
            { type: 'main', content: '<div style="width: 100%; height: 100%;" id="METADATA-EDITOR-EDITOR"></div>' }
        ]
        this.layout.build(this.divElement.id);

        // Toolbar
        this.toolbar = new Toolbar('METADATA-EDITOR-TOOLBAR');
        this.toolbar.build('METADATA-EDITOR-TOOLBAR');

        // Create json editor
        this.code = new CodeEditor('json', '{\n\n}');
        this.code.onChange = (value) =&gt; {
            if (!this.selectedNode)
                return;

            // Clear JSON checker timeout
            if (this._checkTimeout !== -1) {
                clearTimeout(this._checkTimeout);
                this._checkTimeout = -1;
            }
            
            try {
                // Parse JSON text value
                const data = JSON.parse(value);
                this.selectedNode['metadata'].customMetadatas = data;
                this.toolbar.notifyMessage('');
            } catch (e) {

private async _editVariable (id: number): Promise {
        const v = this.object.graph.variables[id];

        // Create window
        const window = new Window('GraphToolAddVariable');
        window.buttons = ['Ok', 'Cancel'];
        window.width = 450;
        window.height = 170;
        window.body = `<div style="width: 100%; height: 100%;" id="GRAPH-TOOL-EDIT-VARIABLE"></div>`;
        window.open();

        // Create form
        const form = new Form('GRAPH-TOOL-EDIT-VARIABLE');
        form.fields = [
            { name: 'name', type: 'text', required: true, html: { span: 10, caption: 'The name of the variable.' } }
        ];
        switch (this._getType(v.value)) {
            case 'String':
                form.fields.push({ name: 'value', type: 'text', required: true, html: { span: 10, caption: 'Value' } });
                break;
            case 'Number':
                form.fields.push({ name: 'value', type: 'float', required: true, html: { span: 10, caption: 'Value' } });
                break;
            case 'Boolean':
                form.fields.push({ name: 'value', type: 'checkbox', required: true, html: { span: 10, caption: 'Value' } });
                break;
            case 'Vector 2D':
                form.fields.push({ name: 'x', type: 'float', required: true, html: { span: 10, caption: 'X' } });
                form.fields.push({ name: 'y', type: 'float', required: true, html: { span: 10, caption: 'Y' } });

private _addVariable (): void {
        // Create window
        const window = new Window('GraphToolAddVariable');
        window.buttons = ['Ok', 'Cancel'];
        window.width = 450;
        window.height = 170;
        window.body = `<div style="width: 100%; height: 100%;" id="GRAPH-TOOL-ADD-VARIABLE"></div>`;
        window.open();

        // Create form
        const form = new Form('GRAPH-TOOL-ADD-VARIABLE');
        form.fields = [
            { name: 'name', type: 'text', required: true, html: { span: 10, caption: 'The name of the variable.' } },
            { name: 'type', type: 'list', required: true, html: { span: 10, caption: 'Format' }, options: {
                items: ['String', 'Boolean', 'Number', 'Vector 2D', 'Vector 3D', 'Vector 4D'] 
            } }
        ];
        form.build('GRAPH-TOOL-ADD-VARIABLE');
        form.element.record['name'] = 'My Variable';
        form.element.record['type'] = 'Number';
        form.element.refresh();

        // Events
        window.onButtonClick = (id =&gt; {
            if (id === 'Cancel')
                return window.close();

// Create layout
        this.layout = new Layout('Code');
        this.layout.panels = [
            { type: 'top', content: '<div id="CODE-BEHAVIOR-TOOLBAR"></div>', size: 30, resizable: false },
            { type: 'left', content: '<div style="width: 100%; height: 100%;" id="CODE-BEHAVIOR-LIST"></div>', size: 250, overflow: 'auto', resizable: true },
            { type: 'main', content: '<div style="width: 100%; height: 100%;" id="CODE-BEHAVIOR-EDITOR"></div>', resizable: true }
        ];
        this.layout.build(div.attr('id'));

        // Add toolbar
        this.toolbar = new Toolbar('CodeToolbar');
        this.toolbar.items = [{ id: 'add', text: 'Add...', caption: 'Add...', img: 'icon-add' }];
        this.toolbar.build('CODE-BEHAVIOR-TOOLBAR');

        // Add grid
        this.grid = new Grid('CodeGrid', {
            toolbarReload: false,
            toolbarSearch: false,
            toolbarEdit: false
        });
        this.grid.columns = [{ field: 'name', caption: 'Name', size: '100%', editable: { type: 'string' } }];
        this.grid.onClick = (id) =&gt; this.selectCode(id[0]);
        this.grid.onAdd = () =&gt; this.add();
        this.grid.onDelete = (ids) =&gt; this.delete(ids);
        this.grid.onChange = (id, value) =&gt; this.change(id, value);
        this.grid.build('CODE-BEHAVIOR-LIST');

        // Add code editor
        await this.createEditor();
        this.template = await Tools.LoadFile('./assets/templates/code.txt', false);

        // Events

private _buildGrid (): void {
        if (this._grid)
            return;
        
        // Configure div
        const div = $('#' + this.divId);
        div.css('width', '100%');
        div.css('height', '100%');

        // Build grid
        this._grid = new Grid('BEHAVIOR-GRAPH-TOOL', {
            header: 'Variables',
            toolbarReload: false,
            toolbarSearch: false,
            toolbarEdit: true
        });
        this._grid.columns = [
            { field: 'name', caption: 'Name', size: '60%', editable: { type: 'string' } },
            { field: 'type', caption: 'Type', size: '20%', editable: { type: 'string' } },
            { field: 'value', caption: 'Value', size: '20%', editable: { type: 'string' } }
        ];
        this._grid.onAdd = () => this._addVariable();
        this._grid.onDelete = (ids) => this._removeVariables(ids);
        this._grid.onEdit = (id) => this._editVariable(id);
        this._grid.build('BEHAVIOR-GRAPH-TOOL');
    }