Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/7/head
zoe 7 years ago
parent 293423d803 1302a20ece
commit 5e2c34a6f7
7 changed files with 103 additions and 196 deletions
Show Stats Download Patch File Download Diff File

4
src/Add-on/DrawLine.ts
Unescape View File

@ -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)
{

4
src/Add-on/Stretch.ts
Unescape View File

@ -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);

2
src/Editor/SelectControls.ts
Unescape View File

@ -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;

6
src/UI/Components/Command.tsx
Unescape View File

@ -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>

9
src/UI/Components/commandLineInput/InputHint.css
Unescape View File

@ -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 {

234
src/UI/Components/commandLineInput/InputHint.tsx
Unescape View File

@ -11,18 +11,13 @@ export interface InputHintProps
}
interface ITodoItemState
{
command: string, //输入的命令
historyCommands: Array<string>,// 历史命令
isShow: React.CSSProperties,// 是否显示历史命令框
isShowSet: React.CSSProperties,//是否显示设置块
searchCommand: Array<string>, //联想命令库
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<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)
{
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<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;
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<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
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 id="input-hint">
<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>
})

40
src/UI/Store/CommandStore.ts
Unescape View File

@ -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.Prompt('取消')
this.elInput.value = "";
}
this.commandHint = '';
if (!commandMachine.m_CommandIng)
{
app.m_Editor.m_SelectCtrl.cancel();

Write Preview
Loading…
Cancel
Save