How to use the babylonjs-editor.Form function in babylonjs-editor

To help you get started, we’ve selected a few babylonjs-editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github BabylonJS / Editor / src / tools / graph-behavior / graph-tool.ts View on Github external
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' } });
github BabylonJS / Editor / src / tools / graph-behavior / graph-tool.ts View on Github external
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();