WebCAD/src/index.tsx

import { ApplicationService } from "./Application";

import * as React from "react";
import * as ReactDOM from 'react-dom';
import { AppUi, CommandComponent, Contain } from './UI/AppUI';
import { Dialog, Terminal } from './UI/Dialog';

import '../node_modules/golden-layout/src/css/goldenlayout-base.css';
import '../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css';
import "./UI/test.less"
import { Props } from './UI/demo';
import GoldenLayout = require('golden-layout')


// window.onload = function ()
// {
//     var root = document.createElement('div');
//     root.style.height = "100%";
//     root.style.widows = "100%";
//     document.body.appendChild(root);
//     ReactDOM.render(<AppUi />,
//         root
//     );

//     document.onselectstart = () =>
//     {
//         return false;
//     }

//     // let command = new Dialog("commands");
//     // new Terminal(command);

//     //test2();
//     //test3();
//     //test4()
//     test5()
//     // new ApplicationService();

// };


function test2()
{
    var config = {
        settings: {
            hasHeaders: false,
            showMaximiseIcon: true,
            showCloseIcon: true
        },
        content: [{
            type: 'column',
            content: [{
                type: 'component',
                componentName: 'example',
                componentState: { startCount: 6 }
            }, {
                type: 'stack',
                content: [{
                    type: 'component',
                    componentName: 'example',
                    componentState: { startCount: 1 }
                }, {
                    type: 'component',
                    componentName: 'example',
                    componentState: { startCount: 2 }
                }]
            }]
        }]
    };
    let el = document.getElementById("webgl")

    var myLayout = new GoldenLayout(config, document.body);

    myLayout.registerComponent('example', function (container, state)
    {
        var counter = $('<div class="messageCounter">' + state.startCount + '</div>'),
            btnContainer = $('<div class="btnContainer"></div>'),
            count = state.startCount;

        container.getElement().append(btnContainer);

        function makeButton(label, increment)
        {
            var button = $('<button class="button">' + label + '</button>');

            button.click(function ()
            {
                count += increment;
                counter.text(count);
            });

            btnContainer.append(button);
        }

        // Add the counter element whenever a tab is created
        container.on('tab', function (tab)
        {
            tab.element.append(counter);
        });
        container.on("resize", function ()
        {
            console.log("resize")
        })

        makeButton('+', 1);
        makeButton('-', -1);
    });

    myLayout.init();

    /*
    * Since our layout is not a direct child
    * of the body we need to tell it when to resize
    */
    $(window).resize(function ()
    {
        myLayout.updateSize();
    })
}

function test3()
{
    var config = {
        content: [{
            type: 'row',
            content: [
                {
                    title: 'A react component',
                    type: 'react-component',
                    component: 'testItem',
                    props: { value: 'I\'m on the left 121' }
                },
                {
                    title: 'Another react component',
                    type: 'react-component',
                    component: 'testItem'
                }
            ]
        }]
    };

    let el = document.getElementById("webgl")

    var myLayout = new GoldenLayout(config, el);

    myLayout.registerComponent('testItem', React.createClass({
        getInitialState: function ()
        {
            return { value: this.props.value || 'bla' };
        },
        setValue: function (e)
        {
            this.setState({ value: e.target.value });
        },
        setContainerTitle: function ()
        {
            this.props.glContainer.setTitle(this.state.value);
        },
        render: function ()
        {
            return (
                <div>
                    <input type="text" value={this.state.value} onChange={this.setValue} />
                    <button onClick={this.setContainerTitle}>set title</button>
                </div>
            )
        }
    }));

    myLayout.init()
}



//绘制无标题
function test4()
{
    var config = {
        settings: {
            hasHeaders: false,
            showMaximiseIcon: true,
            showCloseIcon: true
        },
        dimensions: { borderWidth: 1 },
        content: [{
            type: 'column',
            content: [{
                type: 'row',
                height: 8,
                content: [{
                    type: 'react-component',
                    component: 'Contain',
                    props: { id: "webgl2" }
                }],
            },
            {
                type: 'row',
                height: 2,
                content: [{
                    type: 'react-component',
                    component: 'CommandComponent',
                }]
            }
            ]
        }]
    };

    let el = document.getElementById("webgl")
    var myLayout = new GoldenLayout(config, el);


    myLayout.registerComponent('Contain', Contain);

    myLayout.registerComponent('CommandComponent', CommandComponent);
    myLayout.init()

    myLayout.container.on("resize", (v) =>
    {
        console.log("test")
    })
    myLayout.eventHub.on("resize", () =>
    {
        console.log("ddd")
    })
    /*
* Since our layout is not a direct child
* of the body we need to tell it when to resize
*/
    $(window).resize(function ()
    {
        myLayout.updateSize();
    })
}


function test5()
{
    var config = {
        content: [{
            type: 'column',
            content: [{
                type: 'component',
                componentName: 'example',
                componentState: { startCount: 6 }
            }, {
                type: 'stack',
                content: [{
                    type: 'component',
                    componentName: 'example',
                    componentState: { startCount: 1 }
                }, {
                    type: 'component',
                    componentName: 'example',
                    componentState: { startCount: 2 }
                }]
            }]
        }]
    };
    let el = document.getElementById("webgl")

    var myLayout = new GoldenLayout(config, el);

    myLayout.registerComponent('example', function (container, state)
    {
        var counter = $('<div class="messageCounter">' + state.startCount + 'hello</div>');
        container.on('tab', function (tab)
        {
            tab.element.append(counter);
        });
        container.on("resize", function ()
        {
            console.log("resize")
        })
    });

    myLayout.init();
}

function test6()
{
    var config = {
        settings: {
            hasHeaders: false,
            showMaximiseIcon: true,
            showCloseIcon: true
        },
        dimensions: { borderWidth: 1 },
        content: [{
            type: 'column',
            content: [{
                type: 'row',
                height: 8,
                content: [{
                    type: 'component',
                    componentName: 'container',
                    props: { id: "webgl2" }
                }],
            },
            {
                type: 'row',
                height: 2,
                content: [{
                    type: 'component',
                    componentName: 'container',
                    props: { id: "webgl" }
                }]
            }
            ]
        }]
    };


    var myLayout = new GoldenLayout(config, document.body);
    myLayout.registerComponent('container', function (container, state)
    {
        var counter = $('<div>' + state.startCount + '</div>'),
            btnContainer = $(`<div id=${state.id} class="btnContainer"></div>`),
            count = state.startCount;

        container.getElement().append(btnContainer);
        container.getElement().append($("<div>hello word</div>"))

        function makeButton(label, increment)
        {
            var button = $('<button class="button">' + label + '</button>');

            button.click(function ()
            {
                count += increment;
                counter.text(count);
            });

            btnContainer.append(button);
        }

        // Add the counter element whenever a tab is created
        container.on('tab', function (tab)
        {
            tab.element.append(counter);
        });
        container.on("resize", function ()
        {
            console.log("resize")
        })

        makeButton('+', 1);
        makeButton('-', -1);
    });
    myLayout.init()
}

window.onload = () =>
{
    test6()
}