清理 重构 渲染命令行组件

src/UI/App.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { CommandComponent } from './components/Command';
 //界面数据
 export class App extends React.Component<{}, null> {
     render()

src/UI/Components/Command.tsx

@@ -1,6 +1,6 @@
 import * as React from "React";
 
-export class CommandComponent extends React.Component<{}, {}>
+export class CommandComponent extends React.Component<{}, null>
 {
     render()
     {
@@ -14,13 +14,17 @@ export class CommandComponent extends React.Component<{}, {}>
                 }}
             >
                 <div className="tool-caption">命令栏</div>
-                <div className="content panel" style={{ padding: 0 }}>
+                <div className="content panel"
+                    style={{ padding: 0 }}
+                >
                     <div className='terminal-output-area scroll'>
                         <div className='terminal-pusher'></div>
                         <div className='terminal-output'></div>
                     </div>
                     <div className='terminal-input'>
-                        <input type="text" placeholder="(type a command)" />
+                        <input type="text"
+                            placeholder="(type a command)"
+                        />
                     </div>
                 </div>
             </div >

src/UI/Layout/Layout.ts

@@ -1,75 +1,47 @@
 import GoldenLayout = require('golden-layout')
-import ResizeSensor = require("../../../node_modules/css-element-queries/src/ResizeSensor.js")
+const containerComponenName = "container"
-
+//界面的布局定义
+const layoutConfig: GoldenLayout.Config = {
+    settings: {
+        hasHeaders: false,
+        showMaximiseIcon: true,
+        showCloseIcon: true
+    },
+    dimensions: { borderWidth: 1 },
+    content: [{
+        type: 'column',
+        content: [{
+            type: 'row',
+            height: 8,
+            content: [{
+                type: 'component',
+                componentName: containerComponenName,
+                componentState: { id: "test1" }
+            }],
+        },
+        {
+            type: 'row',
+            height: 2,
+            content: [{
+                type: 'component',
+                componentName: containerComponenName,
+                componentState: { id: "commandContainer" }
+            }]
+        }
+        ]
+    }]
+};
 //绘制无标题
 export function LoadLayoutNotHead()
 {
-    var config = {
-        settings: {
-            hasHeaders: false,
-            showMaximiseIcon: true,
-            showCloseIcon: true
-        },
-        dimensions: { borderWidth: 1 },
-        content: [{
-            type: 'column',
-            content: [{
-                type: 'row',
-                height: 8,
-                content: [{
-                    type: 'component',
-                    componentName: 'test',
-                    componentState: { id: "test1" }
-                }],
-            },
-            {
-                type: 'row',
-                height: 2,
-                content: [{
-                    type: 'component',
-                    componentName: 'test',
-                    componentState: { id: "test1" }
-                }]
-            }
-            ]
-        }]
-    };
-
     let el = document.getElementById("app")
-    var myLayout = new GoldenLayout(config, el);
+    var myLayout = new GoldenLayout(layoutConfig, el);
-    myLayout.registerComponent('test', function (container: GoldenLayout.Container, state)
+    myLayout.registerComponent(containerComponenName, function (container: GoldenLayout.Container, state)
     {
-        container.getElement().html(`<h2 id=${state.id}>hello word</h2>`)
+        container.getElement().html(`<div id=${state.id}></div>`)
     });
     myLayout.init()
-
+    //监听resize
-    let testEl = $("#test1");
-
-    var element = document.getElementById('test1').parentElement;
-    new ResizeSensor(element, function ()
-    {
-        console.log('Changed to ' + element.clientWidth);
-    });
-    console.log(testEl);
-    console.log(testEl.parent());
-    console.log(testEl.parent().parent().parent());
-    testEl.parent().parent().parent().on("resize", () =>
-    {
-        console.log("ddd");
-    });
-    myLayout.root.contentItems[0].contentItems.forEach(o =>
-    {
-        // console.log(o);
-        // o.on("resize", () =>
-        // {
-        //     console.log(o);
-        // })
-    })
-
-    /*
-* Since our layout is not a direct child
-* of the body we need to tell it when to resize
-*/
     $(window).resize(function ()
     {
         myLayout.updateSize();

src/UI/LayoutManage.ts

@@ -1,30 +0,0 @@
-var layoutConfig = {
-    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" }
-            }]
-        }
-        ]
-    }]
-};

src/index.tsx

@@ -2,9 +2,12 @@ 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 { LoadLayoutNotHead } from './UI/LayoutDemo/test';
 import "./UI/Css/style.less"
-function CreateRootElement()
+import { LoadLayoutNotHead } from './UI/Layout/Layout';
+import { CommandComponent } from "./UI/Components/Command";
+import { App } from './UI/App';
+
+function createRootElement()
 {
     var root = document.createElement('div');
     root.id = "app"
@@ -12,15 +15,26 @@ function CreateRootElement()
     document.body.appendChild(root);
 }
 
+function renderCommand()
+{
+    let commandEl = document.getElementById("commandContainer")
+    ReactDOM.render(
+        <CommandComponent />
+        ,
+        commandEl
+    )
+}
+
+
 window.onload = function ()
 {
-    CreateRootElement();
+    createRootElement();
     document.onselectstart = () =>
     {
         return false;
     }
-
     LoadLayoutNotHead();
+    renderCommand();
 };