WebCAD/src/index.tsx

import * as React from "react";
import * as ReactDOM from 'react-dom';
import '../node_modules/golden-layout/src/css/goldenlayout-base.css';
import '../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css';
import "./UI/Css/style.less"
import { LoadLayoutNotHead } from './UI/Layout/Layout';
import { CommandComponent } from "./UI/Components/Command";
import { App } from './UI/App';
import { commandStore, CommandMsg } from './UI/Store/CommandStore';
import { autorun, observable } from 'mobx';
import { Provider } from "mobx-react";
import { ApplicationService, app } from './ApplicationServices/Application';
import { DownPanel } from './UI/Components/Panel';
import { DownPanelStore } from './UI/Store/DownPanelStore';
import { DrawLine, Undo, Redo } from './Add-on/DrawLine';
import { UndoData } from './DatabaseServices/UndoData';
function createRootElement()
{
    var root = document.createElement('div');
    root.id = "app"
    root.style.height = "100%";
    document.body.appendChild(root);
    return root;
}

function renderCommand()
{
    let commandEl = document.getElementById("commandContainer")
    ReactDOM.render(
        <Provider commandStore={commandStore}>
            <CommandComponent />
        </Provider>,
        commandEl
    )
}

function renderDownPanel()
{
    let downPanelEl = document.getElementById("DownPanel")
    let downPanelStore = new DownPanelStore();
    ReactDOM.render(
        <Provider store={downPanelStore}>
            <DownPanel />
        </Provider>,
        downPanelEl
    )
}

function initApp()
{
    new ApplicationService();
    //TODO: Test
    window["undoData"] = new UndoData(app);

    app.m_Editor.m_CommandMachine.m_CommandList.set("line", new DrawLine())
    app.m_Editor.m_CommandMachine.m_CommandList.set("undo", new Undo())
    app.m_Editor.m_CommandMachine.m_CommandList.set("redo", new Redo())
}

window.onload = function ()
{
    createRootElement();
    LoadLayoutNotHead();
    initApp();
    renderCommand();
    renderDownPanel()
};