命令栏

Doc/ui.md

@@ -22,3 +22,7 @@ UI/Layout/Layout.ts定义了绘图界面和命令行的容器,使用户可以拽
 
 #使用css-element-queries 监测容器大小变化
 说明:在操作Layout容器时,遇到了监听容器大小变化的问题,于是找到该库.
+
+
+#禁止页面选中
+document.onselectstart = () => false

src/UI/Components/Command.tsx

@@ -1,14 +1,31 @@
 import * as React from "React";
-
-export class CommandComponent extends React.Component<{}, null>
+import { observer } from "mobx-react";
+import { CommandStore, commandStore } from '../Store/CommandStore';
+import { autorun } from 'mobx';
+import * as ReactDOM from "react-dom";
+@observer
+export class CommandComponent extends React.Component<{ commandStore: CommandStore }, null>
 {
+    outputEl: HTMLElement
+    commandListEl: HTMLElement
+    inputEl: HTMLInputElement
+    constructor()
+    {
+        super()
+
+    }
+    componentDidUpdate()
+    {
+        this.outputEl.scrollTop = this.commandListEl.offsetHeight;
+    }
     render()
     {
         return (
-            <div id="commands" className="win" style=
+            <div id="commands" className="win"
+                style=
                 {{
                     height: "100%",
-                    width: "100%",
+                    width: "99.5%",
                     borderTopWidth: "5px",
                     borderLeftWidth: "5px"
                 }}
@@ -17,17 +34,49 @@ export class CommandComponent extends React.Component<{}, null>
                 <div className="content panel"
                     style={{ padding: 0 }}
                 >
-                    <div className='terminal-output-area scroll'>
+                    <div className='terminal-output-area scroll'
+                        ref={o => { this.outputEl = o }}
+                    >
                         <div className='terminal-pusher'></div>
-                        <div className='terminal-output'></div>
+                        <div className='terminal-output'
+                            ref={o => { this.commandListEl = o }}
+                        >
+                            {
+                                this.props.commandStore.commands.map(c =>
+                                    <div className="terminal-commandResult">{c}</div>
+                                )
+                            }
+                        </div>
                     </div>
                     <div className='terminal-input'>
                         <input type="text"
-                            placeholder="(type a command)"
+                            ref={o => { this.inputEl = o }}
+                            placeholder="(请输入命令:)"
+                            onKeyDown={this.inputKeyDown}
                         />
                     </div>
                 </div>
             </div >
         );
     }
+
+    inputKeyDown = (e: React.KeyboardEvent<object>) =>
+    {
+        console.log(this.inputEl);
+        console.log(this.inputEl.value === "");
+        switch (e.keyCode)
+        {
+            case 13:
+            case 32:
+                this.props.commandStore.commands.push(this.inputEl.value)
+                this.inputEl.value = ""
+                break;
+            case 27:
+                this.inputEl.value = ""
+                this.props.commandStore.commands.push("取消.")
+            default:
+                break;
+        }
+        console.log(e.keyCode);
+    }
 }

src/UI/Store/CommandStore.ts

@@ -0,0 +1,38 @@
+import { observable, runInAction, autorun } from 'mobx';
+export class CommandStore
+{
+    @observable commands = ["测试第一条命令!"];
+    @observable scrollTop: number = 0;
+}
+
+
+export var commandStore = new CommandStore()
+autorun(() =>
+{
+    if (commandStore.commands.length > 10)
+    {
+        commandStore.commands.splice(0, 5);
+    }
+})
+
+
+// import * as THREE from 'three';
+    // static setMouseCoord(p: THREE.Vector3): void
+    // {
+    //     let norm = new THREE.Vector3(0, 0, 1);
+    //     let plan = new THREE.Plane(norm);
+    //     // plan.setFromNormalAndCoplanarPoint
+
+    //     // let p2 = p.clone().add(app.m_Viewer.m_Direction.clone().multiplyScalar(1000));
+    //     let p2;
+    //     let p3 = plan.intersectLine(new THREE.Line3(p, p2));
+    //     if (p3)
+    //     {
+    //         let strarr = [];
+    //         p3.toArray().forEach(o =>
+    //         {
+    //             strarr.push(o.toFixed(3));
+    //         })
+    //         document.getElementById("MouseCoordinates").innerText = strarr.join(",")
+    //     }
+    // }

src/UI/UIManage.ts

@@ -1,25 +0,0 @@
-import * as THREE from 'three';
-import { Line } from '../DatabaseServices/Entity';
-export class UiManage
-{
-
-    static setMouseCoord(p: THREE.Vector3): void
-    {
-        let norm = new THREE.Vector3(0, 0, 1);
-        let plan = new THREE.Plane(norm);
-        // plan.setFromNormalAndCoplanarPoint
-
-        // let p2 = p.clone().add(app.m_Viewer.m_Direction.clone().multiplyScalar(1000));
-        let p2;
-        let p3 = plan.intersectLine(new THREE.Line3(p, p2));
-        if (p3)
-        {
-            let strarr = [];
-            p3.toArray().forEach(o =>
-            {
-                strarr.push(o.toFixed(3));
-            })
-            document.getElementById("MouseCoordinates").innerText = strarr.join(",")
-        }
-    }
-}

src/index.tsx

@@ -6,6 +6,8 @@ import "./UI/Css/style.less"
 import { LoadLayoutNotHead } from './UI/Layout/Layout';
 import { CommandComponent } from "./UI/Components/Command";
 import { App } from './UI/App';
+import { commandStore } from './UI/Store/CommandStore';
+import { autorun } from 'mobx';
 
 function createRootElement()
 {
@@ -19,22 +21,17 @@ function renderCommand()
 {
     let commandEl = document.getElementById("commandContainer")
     ReactDOM.render(
-        <CommandComponent />
-        ,
+        <CommandComponent commandStore={commandStore} />,
         commandEl
     )
 }
 
-
 window.onload = function ()
 {
     createRootElement();
-    document.onselectstart = () =>
-    {
-        return false;
-    }
+
     LoadLayoutNotHead();
     renderCommand();
 };
 
-
+window["tt"] = commandStore;

tsconfig.json

@@ -12,7 +12,8 @@
             "jquery"
         ],
         "module": "commonjs",
-        "jsx": "react"
+        "jsx": "react",
+        "experimentalDecorators": true
     },
     "include": [
         "./src/**/*",