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 '../node_modules/golden-layout/src/css/goldenlayout-soda-theme.css';

//
import './UI/Css/style.less';

import { initDrawLayout } from './UI/Layout/Layout';
import { CommandComponent } from "./UI/Components/Command";
import { App } from './UI/App';
import { 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 { DrawBox, DrawCircle, DrawLine, DrawRect, DrawSphere, DrawTest, Redo, Undo, ZoomE } from './Add-on/DrawLine';
import { UndoData } from './DatabaseServices/UndoData';
import { Solid3d, Line } from './DatabaseServices/Entity';
import { Vector3 } from 'three';
import { Command_Move } from './Add-on/Move';
import { Command_Rotate } from './Add-on/Rotate';
import * as THREE from 'three';
import { MaterialAsset } from './UI/Editor/Asset/MaterialAsset';
import { LoadMater } from './UI/Layout/Material.layout';

document.onselectstart = () => false
/**
 * 创建总体布局. 上下分栏. 中间绘图层.
 * 
 * @returns 
 */
function initRootLayout()
{
    let top = document.createElement("div");
    top.style.height = "20px";
    top.id = "TopPanel";
    document.body.appendChild(top);


    var root = document.createElement('div');
    root.id = "app"
    root.style.height = "calc(100% - 35px)";
    document.body.appendChild(root);


    let down = document.createElement("div");
    down.style.height = "15px";
    down.id = "DownPanel";
    document.body.appendChild(down);
    return root;
}

//命令栏.
function renderCommand()
{
    let commandEl = document.getElementById("commandContainer")
    ReactDOM.render(
        <Provider commandStore={app.m_Editor.m_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("l", new DrawLine())
    app.m_Editor.m_CommandMachine.m_CommandList.set("u", new Undo())
    app.m_Editor.m_CommandMachine.m_CommandList.set("redo", new Redo())
    app.m_Editor.m_CommandMachine.m_CommandList.set("ze", new ZoomE())
    app.m_Editor.m_CommandMachine.m_CommandList.set("box", new DrawBox())
    app.m_Editor.m_CommandMachine.m_CommandList.set("rec", new DrawRect())
    app.m_Editor.m_CommandMachine.m_CommandList.set("c", new DrawCircle())

    app.m_Editor.m_CommandMachine.m_CommandList.set("t", new DrawTest())
    app.m_Editor.m_CommandMachine.m_CommandList.set("m", new Command_Move())
    app.m_Editor.m_CommandMachine.m_CommandList.set("ro", new Command_Rotate())

    app.m_Editor.m_CommandMachine.m_CommandList.set("sp", new DrawSphere())
}


window.onload = function ()
{
    initRootLayout();
    initDrawLayout();
    initApp();
    renderCommand();
    renderDownPanel();
    LoadMater();

    let mater = document.getElementById("materialManage");
    mater.style.overflowX = "hidden";
    mater.style.overflowY = "auto";
    mater.style.background = "#444";

    for (let i = 0; i < 15; i++)
    {
        let set = new MaterialAsset(mater);

        let mat = new THREE.MeshStandardMaterial({
            color: new THREE.Color(0, 1, 1)
        });
        set.setMaterial(mat);


        set.size.set(70, 70);
        set.setIcon("material.png");
        set.updateInterface();

        set.updateMetadata();
        set.setText("ddd");
    }
};