整合代码，清理代码，修改代码结构

src/Add-on/DrawLine.ts

@@ -13,7 +13,7 @@ export class DrawLine implements Command
 {
     async exec()
     {
-        app.m_Editor.m_CommandStore.Prompt("请输入一个点:");
+        app.m_Editor.m_CommandStore.commandHint = "请输入一个点:";
         let ptRes = await app.m_Editor.GetPoint();
         if (ptRes.Status != PromptStatus.OK)
         {
@@ -24,7 +24,7 @@ export class DrawLine implements Command
         let p2 = p1;
         while (true)
         {
-            app.m_Editor.m_CommandStore.Prompt("请输入点2:");
+            app.m_Editor.m_CommandStore.commandHint = "请输入点2:";
             ptRes = await app.m_Editor.GetPoint({ BasePoint: p1 });
             if (ptRes.Status != PromptStatus.OK)
             {

src/Add-on/Stretch.ts

@@ -17,12 +17,12 @@ export class Stretch implements Command
         {
             return;
         }
-        app.m_Editor.m_CommandStore.Prompt("请选择第一个拉伸点:");
+        app.m_Editor.m_CommandStore.commandHint = "请选择第一个拉伸点:";
 
         let p1 = await app.m_Editor.GetPoint({ Msg: "请选择第一个拉伸点:" });
         if (p1.Status != PromptStatus.OK) return;
 
-        app.m_Editor.m_CommandStore.Prompt("请选择第二个拉伸点:");
+        app.m_Editor.m_CommandStore.commandHint = "请选择第二个拉伸点:";
 
         let data = this.parse(ss);
 

src/Editor/SelectControls.ts

@@ -125,7 +125,7 @@ export class SelectControls
 
         app.m_Viewer.m_GripScene.Clear();
         app.m_Viewer.m_bNeedUpdate = true;
-        app.m_Editor.m_CommandStore.Prompt("拽拖开始:");
+        app.m_Editor.m_CommandStore.commandHint = "拽拖开始:";
 
 
         let en = app.m_CursorViewer.m_LastEntity as THREE.Mesh;

src/UI/Components/Command.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
+import { InputHint } from './commandLineInput/InputHint';
+import * as React from 'react';
 import { observer, inject, Provider } from 'mobx-react';
 import { CommandStore } from '../Store/CommandStore';
 import { autorun } from 'mobx';
-import * as ReactDOM from "react-dom";
+import * as ReactDOM from 'react-dom';
 import { CSSProperties } from 'react';
 import DevTools from 'mobx-react-devtools';
 import { CommandLineContainer } from "./CommandLineContainer";
 import { CommandLineInput } from './CommandLineInput';
-import InputHint from './commandLineInput/InputHint';
 
 @inject("commandStore") @observer
 export class CommandComponent extends React.Component<{ commandStore?: CommandStore }, null>

src/UI/Components/commandLineInput/InputHint.css

@@ -1,8 +1,8 @@
 /*
  * @Author: Zoe 
  * @Date: 2017-12-01 10:25:21 
- * @Last Modified by: Zoe
+ * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2017-12-01 17:31:41
+ * @Last Modified time: 2017-12-08 14:54:54
  * 命令框样式  
  */
 
@@ -20,6 +20,9 @@ a {
   width: 100%;
   position: fixed;
   color: #000;
+  z-index: 99;
+  left: 0;
+  bottom: 0
 }
 
 
@@ -78,11 +81,13 @@ a {
 #input-hint ul {
   position: absolute;
   left: -1rem;
+  bottom: 2rem;
   list-style: none;
   width: 10rem;
   background: #fff;
   margin: 0 2rem;
   padding: 0;
+  z-index: 2
 }
 
 #input-hint .history-command>li {

src/UI/Components/commandLineInput/InputHint.tsx

@@ -11,18 +11,13 @@ export interface InputHintProps
 }
 interface ITodoItemState
 {
-    command: string, //输入的命令
+    command: string //输入的命令
-    historyCommands: Array<string>,// 历史命令
+    isShow: React.CSSProperties
-    isShow: React.CSSProperties,// 是否显示历史命令框
+}
-    isShowSet: React.CSSProperties,//是否显示设置块
+
-    searchCommand: Array<string>, //联想命令库
+
-    executeCommand: string, //所执行的命令
+@observer
-    viceCommand: Array<{ title: string, keyboard: string }>,//副命令
+export class InputHint extends React.Component<{ commandStore?: CommandStore, isDrag: boolean }, ITodoItemState>
-    pos: React.CSSProperties,// 命令框位置
-    reUlPos: React.CSSProperties, //关联列表位置
-    hiUlPos: React.CSSProperties//历史命令列表位置
-}
-export default class InputHint extends React.Component<{ commandStore?: CommandStore, isDrag: boolean }, ITodoItemState>
 {
     private m_recommendUl: HTMLUListElement;//关联命令列表
     private m_historyUl: HTMLUListElement;//历史命令列表
@@ -30,36 +25,30 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
     private m_box: HTMLElement;//移动命令框区
     public state: ITodoItemState;
     private m_i: number = 0; //选择历史命令索引
+
     constructor(props)
     {
         super(props);
         this.state =
             {
                 command: "",
-                historyCommands: [],
+                isShow: { display: 'none' }
-                isShow: { display: 'none' },
-                hiUlPos: { bottom: '2rem' },
-                searchCommand: [],
-                executeCommand: '',
-                viceCommand: [],
-                pos: { left: 0, bottom: 0 },
-                reUlPos: { bottom: '2rem' },
-                isShowSet: { display: 'none' }
             }
     }
     // 获取input输入的命令
     public handleOnChange = (e: React.FormEvent<HTMLInputElement>) =>
     {
+        const store = this.props.commandStore;
+
         // 输入的命令
         let m_inputValue = e.currentTarget.value;
 
         this.setState({ command: m_inputValue });
-        //储存找到的相关命令
-        let m_searchCommand: Array<string> = [];
         // 
         if (!m_inputValue)
         {
-            this.setState({ searchCommand: [] })
+            store.searchCommand.splice(0, store.searchCommand.length);
+
             return;
         }
         // 动态生成正则表达式
@@ -69,33 +58,22 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
         m_searchReg = new RegExp(m_comTmp, 'i');
 
         //如果没有确认执行命令，将显示推荐索引的命令
-        if (!this.state.executeCommand)
+        if (!store.commandHint)
         {
-
+            store.CommandList.forEach((value: string) =>
-            this.props.commandStore.CommandList.forEach((value: string) =>
             {
 
                 if (m_searchReg.test(value))
                 {
-
+                    store.searchCommand.push(value);
-                    m_searchCommand.push(value);
-
                 }
             })
-            this.setState({ searchCommand: m_searchCommand });
-
         }
-
-
-    }
-    // 把确认输入命令,并添加到历史记录
-    public handleConfirmInput = (e: React.KeyboardEvent<HTMLInputElement>) =>  
-    {
     }
+
     // 是否显示历史命令
     public handleShowHistoryCommand = () =>
     {
-
         if (this.state.isShow.display === "none")
         {
             this.setState({ isShow: { display: 'block' } })
@@ -112,53 +90,37 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
     // 点击确认执行命令
     public handleConfirmCommand = (e: React.MouseEvent<HTMLLIElement>) =>
     {
-        let historyCommands = this.state.historyCommands;
+        const store = this.props.commandStore;
-        historyCommands.unshift(e.currentTarget.innerHTML);
+        store.Prompt(e.currentTarget.innerHTML);
-        //去掉重复历史命令
+        store.execCommand(e.currentTarget.innerHTML);
-        historyCommands = Array.from(new Set(historyCommands));
+
-        this.setState(
+        store.searchCommand.splice(0, store.searchCommand.length);
-            {
+
-                executeCommand: e.currentTarget.innerHTML,
-                searchCommand: [],
-                historyCommands
-            }
-        );
     }
     //绑定键盘命令
     public handleSelectCommand = (e: KeyboardEvent) =>
     {
         // if (document.activeElement.nodeName !== 'INPUT')
         //     (this.props.commandStore.elInput as HTMLInputElement).focus();
-
         let m_li: HTMLCollection = this.m_recommendUl.children;;
-        let historyCommands = this.state.historyCommands;
         this.m_liHover = this.m_recommendUl.querySelector('.hover');
+        const { searchCommand, commandHint, historyCommands, CommandList, viceCommand } = this.props.commandStore;
 
         //↑-38 ，↓-40 esc-27
         if (e.keyCode === 27) //按esc键,清空所有命令
         {
+            searchCommand.splice(0, searchCommand.length);
+
+            viceCommand.splice(0, viceCommand.length);
+
             this.setState(
                 {
-                    executeCommand: '',
                     command: '',
-                    searchCommand: [],
-                    viceCommand: [],
                     isShow: { display: 'none' }
                 }
             );
-            return;
+            // return;
         }
-        //如果没输入命令，空格键为上一次输入命令
-        if (!this.state.command && this.state.historyCommands.length > 0)
-        {
-            if (e.keyCode === 32)
-            {
-                this.setState({ command: this.state.historyCommands[0].trim() });
-                return;
-            }
-
-        }
-
         //放下键选择命令函数,des-方向
         let selectCommand = (des: string) => 
         {
@@ -192,7 +154,7 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
         }
 
         //如果有关联命令执行以下逻辑
-        if (this.state.searchCommand.length > 0)
+        if (searchCommand.length > 0)
         {
 
             if (e.keyCode === 38)
@@ -205,39 +167,30 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
             }
             if (e.keyCode === 13 || e.keyCode === 32)
             {
-                if (!this.state.executeCommand)
+                if (!commandHint)
                 {
-                    historyCommands.unshift(this.m_liHover.innerHTML);
+                    searchCommand.splice(0, searchCommand.length);
-                    //去掉重复历史命令
-                    historyCommands = Array.from(new Set(historyCommands));
-                    this.setState({ historyCommands });
-                    this.setState(
-                        {
-                            executeCommand: this.m_liHover.innerHTML,
-                            searchCommand: []
-                        }
-                    )
                     return;
                 }
             }
         }
-        else if (!this.state.executeCommand)  //否则如果没有执行命令
+        else if (!commandHint)  //否则如果没有执行命令
         {
             // 如果存在历史命令,方向键切换历史命令
-            if (this.state.historyCommands.length > 0)
+            if (historyCommands.length > 0)
             {
                 if (e.keyCode === 40)
                 {
 
-                    if (this.m_i >= this.state.historyCommands.length) this.m_i = 0;
+                    if (this.m_i >= historyCommands.length) this.m_i = 0;
-                    this.setState({ command: this.state.historyCommands[this.m_i] });
+                    this.setState({ command: historyCommands[this.m_i] });
                     this.m_i++;
                 }
                 else if (e.keyCode === 38)
                 {
 
-                    if (this.m_i < 0) this.m_i = this.state.historyCommands.length - 1;
+                    if (this.m_i < 0) this.m_i = historyCommands.length - 1;
-                    this.setState({ command: this.state.historyCommands[this.m_i] });
+                    this.setState({ command: historyCommands[this.m_i] });
                     this.m_i--;
                 }
             }
@@ -247,17 +200,13 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
         if (e.keyCode === 13 || e.keyCode === 32)
         {
             //如果没有确认执行命令，运行当前输入的命令，并将命令添加到历史
-            if (!this.state.executeCommand)
+            if (!commandHint)
             {
 
-                if (this.state.command && this.props.commandStore.CommandList.indexOf(this.state.command.trim()) !== -1)
+                if (this.state.command && CommandList.indexOf(this.state.command.trim()) !== -1)
-                {
-                    this.setState(
                 {
-                            executeCommand: this.state.command,
+                    searchCommand.splice(0, searchCommand.length);
-                            searchCommand: []
+
-                        }
-                    );
                 }
                 else
                 {
@@ -270,60 +219,24 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
 
                 if (this.state.command === 'U')
                 {
-                    this.setState({ viceCommand: [] });
+                    viceCommand.splice(0, viceCommand.length);
                     return;
                 }
-                this.setState(
+                viceCommand.push({ title: '放弃', keyboard: 'U' })
-                    {
-                        viceCommand: [{ title: '放弃', keyboard: 'U' }]
-                    }
-                );
 
-            }
 
             }
-    }
-    //移动命令框
-    public dragBox = () =>
-    {
-        //移动回调函数
-        let movePos = (e: MouseEvent) =>
-        {
-            if (e.clientY >= window.innerHeight - 20)
-            {
-                this.m_box.parentElement.style.width = '100%';
-                this.setState({ pos: { left: 0, bottom: 0 } });
-            } else if (e.clientY < 20)
-            {
-                this.m_box.parentElement.style.width = '100%';
-                this.setState({ pos: { left: 0, top: 0 } });
-            } else
-            {
-                this.m_box.parentElement.style.width = '80%';
-                this.setState({ pos: { left: e.clientX + 'px', top: e.clientY + 'px' } });
-            }
-            //调整位置
-            this.handleAdjustPos();
 
         }
-        this.m_box.onmousedown = () =>
-        {
-            document.addEventListener('mousemove', movePos);
-
-        }
-        this.m_box.onmouseup = () =>
-        {
-            document.removeEventListener('mousemove', movePos);
-        }
     }
     // 点击确认命令
     public handleClick = (e: React.MouseEvent<HTMLElement>) =>
     {
-
+        let { viceCommand } = this.props.commandStore;
         let m_key = e.currentTarget.firstElementChild.innerHTML.slice(1, 2);
         if (m_key === 'U')
         {
-            this.setState({ viceCommand: [] });
+            viceCommand.splice(0, viceCommand.length);
         }
     }
     //鼠标选择命令
@@ -353,39 +266,8 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
         let m_outPutDes = { m_actualTop, m_actualBottom };//输出距离对象
         return m_outPutDes;
     }
-    //调整弹出命令选择框位置
-    public handleAdjustPos = () =>
-    {
-        let m_reDes = this.handleGetElHeight(this.m_recommendUl);//关联命令列表
-        let m_hiDes = this.handleGetElHeight(this.m_historyUl); //历史命令列表
-        if (m_reDes.m_actualTop <= 0)
-        {
-            this.setState({ reUlPos: { top: '2rem' } });
-        }
-        if (m_reDes.m_actualBottom <= 0)
-        {
-            this.setState({ reUlPos: { bottom: '2rem' } });
-        }
-        if (m_hiDes.m_actualTop <= 0)
-        {
-            this.setState({ hiUlPos: { top: '2rem' } });
-        }
-        if (m_hiDes.m_actualBottom <= 0)
-        {
-            this.setState({ hiUlPos: { bottom: '2rem' } });
-
-        }
-    }
     componentDidMount()
     {
-        if (this.props.isDrag)
-        {
-            this.setState({ isShowSet: { display: 'inline-block' } });
-            this.dragBox();
-            //调整位置
-            this.handleAdjustPos();
-            this.m_recommendUl.parentElement.style.width = '98%';
-        }
         document.body.addEventListener('keydown', this.handleSelectCommand);
     }
     componentDidUpdate()
@@ -405,26 +287,17 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
     }
     public render()
     {
+        const store = this.props.commandStore;
         return (
-            <div id="input-hint" style={this.state.pos}>
+            <div id="input-hint">
-                <div
-                    className="set"
-                    ref={el => { this.m_box = el }}
-                    style={this.state.isShowSet}
-                >
-                    <a>
-                        <span className="pt-icon-standard pt-icon-drag-handle-vertical"></span>
-                    </a>
-                </div>
                 <div className="input">
                     <ul
                         className="recommend-command"
                         ref={ul => { this.m_recommendUl = ul }}
                         onMouseMove={this.handleSelectCom}
-                        style={this.state.reUlPos}
                     >
                         {
-                            this.state.searchCommand.map((item: string, index: number) =>
+                            store.searchCommand.map((item: string, index: number) =>
                             {
                                 return <li onClick={this.handleConfirmCommand} key={index}>{item}</li>
                             })
@@ -434,9 +307,9 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
                         className="pt-icon-standard pt-icon-sort-asc pt-intent-primary"
                         onClick={this.handleShowHistoryCommand}
                     />
-                    <span className="hint">{this.state.executeCommand}</span>
+                    <span className="hint">{store.commandHint}</span>
                     {
-                        this.state.viceCommand.map((item, index: number) =>
+                        store.viceCommand.map((item, index: number) =>
                         {
                             return (
                                 <span key={index}
@@ -452,18 +325,19 @@ export default class InputHint extends React.Component<{ commandStore?: CommandS
                     <input
                         type="text"
                         placeholder="请输入命令"
-                        ref={o => { this.props.commandStore.elInput = o; }}
+                        ref={o => { store.elInput = o; }}
                         // onKeyDown={e => { e.preventDefault() }}
                         onChange={this.handleOnChange}
                         value={this.state.command}
                     />
                     <ul
                         className="history-command"
-                        style={{ ...this.state.isShow, ...this.state.hiUlPos }}
+                        style={this.state.isShow}
                         ref={ul => { this.m_historyUl = ul }}
                     >
+
                         {
-                            this.state.historyCommands.map((item: string, index: number) =>
+                            store.historyCommands.map((item: string, index: number) =>
                             {
                                 return <li onClick={this.handleConfirmCommand} key={index}>{item}</li>
                             })

src/UI/Store/CommandStore.ts

@@ -23,18 +23,31 @@ export class CommandStore
         });
     }
     @observable commands: Array<CommandMsg> = [];
+    @observable viceCommand: Array<{ title: string, keyboard: string }> = [];//副命令
+
     //设置输入框为焦点
     isInputFocus: boolean;
     elInput: HTMLInputElement;
     outputContainer: HTMLElement;
     commandListContainer: HTMLElement;
-    index: number = 0
+    index: number = 0;
+    @observable searchCommand: Array<string> = []; //联想命令库
+
+    @observable historyCommands: string[] = [];
+    @observable commandHint: string = '';
     Prompt(msg: string)
     {
         this.commands.push({
             key: this.index,
             msg: ">" + msg
         });
+        // 添加历史命令
+        if (this.historyCommands.indexOf(msg) !== -1)
+        {
+            this.historyCommands.splice(this.historyCommands.indexOf(msg), 1).unshift(msg);
+        }
+        else this.historyCommands.unshift(msg);
+
         this.index++;
 
         if (this.commands.length > 100)
@@ -42,7 +55,6 @@ export class CommandStore
             this.commands.splice(0, 1);
         }
     }
-
     get InputIsFoucs(): Boolean
     {
         return document.activeElement.id == "command-input";
@@ -52,7 +64,11 @@ export class CommandStore
     {
         return commandMachine.CommandNameList;
     }
-
+    //执行命令
+    execCommand(cmd: string)
+    {
+        commandMachine.ExecCommand(cmd);
+    }
     keyDownHandle = (keyCode: number) =>
     {
         let inpValue: string = this.elInput.value.toUpperCase();
@@ -66,8 +82,20 @@ export class CommandStore
                     }
                     break
                 }
-            case 13:
             case 32:
+                //如果没输入命令，空格键为上一次输入命令
+                if (inpValue.trim() == "" && this.historyCommands.length > 0)
+                {
+                    commandMachine.ExecCommand(this.historyCommands[0]);
+                }
+                else
+                {
+                    commandMachine.ExecCommand(inpValue);
+                    this.Prompt(inpValue)
+                    this.elInput.value = ""
+                }
+                break;
+            case 13:
                 if (inpValue != "")
                 {
                     commandMachine.ExecCommand(inpValue);
@@ -78,9 +106,9 @@ export class CommandStore
             case 27:
                 if (inpValue != "")
                 {
-                    this.elInput.value = ""
+                    this.elInput.value = "";
-                    this.Prompt('取消')
                 }
+                this.commandHint = '';
                 if (!commandMachine.m_CommandIng)
                 {
                     app.m_Editor.m_SelectCtrl.cancel();