diff --git a/src/Add-on/DrawLine.ts b/src/Add-on/DrawLine.ts index 7a23039dd..6698636e4 100644 --- a/src/Add-on/DrawLine.ts +++ b/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) { diff --git a/src/Add-on/Stretch.ts b/src/Add-on/Stretch.ts index 16c1a3223..b273bb09d 100644 --- a/src/Add-on/Stretch.ts +++ b/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); diff --git a/src/Editor/SelectControls.ts b/src/Editor/SelectControls.ts index 684aa9ee3..bb393de65 100644 --- a/src/Editor/SelectControls.ts +++ b/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; diff --git a/src/UI/Components/Command.tsx b/src/UI/Components/Command.tsx index 2e9240628..8ad1533d2 100644 --- a/src/UI/Components/Command.tsx +++ b/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> diff --git a/src/UI/Components/commandLineInput/InputHint.css b/src/UI/Components/commandLineInput/InputHint.css index 898cba7b4..39cd95473 100644 --- a/src/UI/Components/commandLineInput/InputHint.css +++ b/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 time: 2017-12-01 17:31:41 + * @Last Modified by: mikey.zhaopeng + * @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 { diff --git a/src/UI/Components/commandLineInput/InputHint.tsx b/src/UI/Components/commandLineInput/InputHint.tsx index 458789d35..300c7c129 100644 --- a/src/UI/Components/commandLineInput/InputHint.tsx +++ b/src/UI/Components/commandLineInput/InputHint.tsx @@ -11,18 +11,13 @@ export interface InputHintProps } interface ITodoItemState { - command: string, //输入的命令 - historyCommands: Array,// 历史命令 - isShow: React.CSSProperties,// 是否显示历史命令框 - isShowSet: React.CSSProperties,//是否显示设置块 - searchCommand: Array, //联想命令库 - executeCommand: string, //所执行的命令 - viceCommand: Array<{ title: string, keyboard: string }>,//副命令 - pos: React.CSSProperties,// 命令框位置 - reUlPos: React.CSSProperties, //关联列表位置 - hiUlPos: React.CSSProperties//历史命令列表位置 + command: string //输入的命令 + isShow: React.CSSProperties } -export default class InputHint extends React.Component<{ commandStore?: CommandStore, isDrag: boolean }, ITodoItemState> + + +@observer +export 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' }, - hiUlPos: { bottom: '2rem' }, - searchCommand: [], - executeCommand: '', - viceCommand: [], - pos: { left: 0, bottom: 0 }, - reUlPos: { bottom: '2rem' }, - isShowSet: { display: 'none' } + isShow: { display: 'none' } } } // 获取input输入的命令 public handleOnChange = (e: React.FormEvent) => { + const store = this.props.commandStore; + // 输入的命令 let m_inputValue = e.currentTarget.value; this.setState({ command: m_inputValue }); - //储存找到的相关命令 - let m_searchCommand: Array = []; // 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) { - - this.props.commandStore.CommandList.forEach((value: string) => + store.CommandList.forEach((value: string) => { if (m_searchReg.test(value)) { - - m_searchCommand.push(value); - + store.searchCommand.push(value); } }) - this.setState({ searchCommand: m_searchCommand }); - } - - - } - // 把确认输入命令,并添加到历史记录 - public handleConfirmInput = (e: React.KeyboardEvent) => - { } + // 是否显示历史命令 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) => { - let historyCommands = this.state.historyCommands; - historyCommands.unshift(e.currentTarget.innerHTML); - //去掉重复历史命令 - historyCommands = Array.from(new Set(historyCommands)); - this.setState( - { - executeCommand: e.currentTarget.innerHTML, - searchCommand: [], - historyCommands - } - ); + const store = this.props.commandStore; + store.Prompt(e.currentTarget.innerHTML); + store.execCommand(e.currentTarget.innerHTML); + + store.searchCommand.splice(0, store.searchCommand.length); + } //绑定键盘命令 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; - } - //如果没输入命令，空格键为上一次输入命令 - if (!this.state.command && this.state.historyCommands.length > 0) - { - if (e.keyCode === 32) - { - this.setState({ command: this.state.historyCommands[0].trim() }); - return; - } - + // 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); - //去掉重复历史命令 - historyCommands = Array.from(new Set(historyCommands)); - this.setState({ historyCommands }); - this.setState( - { - executeCommand: this.m_liHover.innerHTML, - searchCommand: [] - } - ) + searchCommand.splice(0, searchCommand.length); 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; - this.setState({ command: this.state.historyCommands[this.m_i] }); + if (this.m_i >= historyCommands.length) this.m_i = 0; + 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; - this.setState({ command: this.state.historyCommands[this.m_i] }); + if (this.m_i < 0) this.m_i = historyCommands.length - 1; + 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: [] - } - ); + searchCommand.splice(0, searchCommand.length); + } 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: [{ title: '放弃', keyboard: 'U' }] - } - ); + viceCommand.push({ 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) => { - + 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 ( -
-
{ this.m_box = el }} - style={this.state.isShowSet} - > - - - -
+
    { 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
  • {item}
    • }) @@ -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} /> - {this.state.executeCommand} + {store.commandHint} { - this.state.viceCommand.map((item, index: number) => + store.viceCommand.map((item, index: number) => { return ( { this.props.commandStore.elInput = o; }} + ref={o => { store.elInput = o; }} // onKeyDown={e => { e.preventDefault() }} onChange={this.handleOnChange} value={this.state.command} />
      { this.m_historyUl = ul }} > + { - this.state.historyCommands.map((item: string, index: number) => + store.historyCommands.map((item: string, index: number) => { return
    • {item}
      • }) diff --git a/src/UI/Store/CommandStore.ts b/src/UI/Store/CommandStore.ts index cffdcc97b..e87850e46 100644 --- a/src/UI/Store/CommandStore.ts +++ b/src/UI/Store/CommandStore.ts @@ -23,18 +23,31 @@ export class CommandStore }); } @observable commands: Array = []; + @observable viceCommand: Array<{ title: string, keyboard: string }> = [];//副命令 + //设置输入框为焦点 isInputFocus: boolean; elInput: HTMLInputElement; outputContainer: HTMLElement; commandListContainer: HTMLElement; - index: number = 0 + index: number = 0; + @observable searchCommand: Array = []; //联想命令库 + + @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.Prompt('取消') + this.elInput.value = ""; } + this.commandHint = ''; if (!commandMachine.m_CommandIng) { app.m_Editor.m_SelectCtrl.cancel();