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

!1735 增强:增加home,end,insert,pageup,pgdown快捷键运用

Browse Source
pull/1751/MERGE
林三 3 years ago committed by ChenX
parent 57e7c490a3
commit b5feedce96
1 changed files with 62 additions and 45 deletions
Show Stats Download Patch File Download Diff File

107
src/UI/Components/CommandPanel/InputHotKeys.tsx
Unescape View File

@ -14,73 +14,89 @@ enum TipType
IsExist = 4, //重复 IsExist = 4, //重复
} }
const SYSTEM_BEGIN_HOTKEYS = ["Shift", "Alt", "Control"];
const BEGIN_HOTKEYS = ["End", "Insert", "PageUp", "PageDown", "Home", "Delete"];
@observer @observer
export class InputHotKeys extends React.Component<{ store: CommandItemProps; }, {}> { export class InputHotKeys extends React.Component<{ store: CommandItemProps; }, {}> {
keys: string[] = []; _Keys: string[] = [];
_InputElKey = React.createRef<HTMLInputElement>(); _InputElKey = React.createRef<HTMLInputElement>();
@observable str: string = this.props.store.commandData.hotkeysCustomize @observable _Str: string = this.props.store.commandData.hotkeysCustomize
|| (CommandServer.GetInstance().GetCommandCanUseDefaultHotkey(this.props.store.commandData) || (CommandServer.GetInstance().GetCommandCanUseDefaultHotkey(this.props.store.commandData)
&& CommandServer.GetInstance().HotKeyCommandMap.get(this.props.store.commandData.defaultHotkeys) ? this.props.store.commandData.defaultHotkeys : "") && CommandServer.GetInstance().HotKeyCommandMap.get(this.props.store.commandData.defaultHotkeys) ? this.props.store.commandData.defaultHotkeys : "")
|| this.props.store.commandData.systemHotkeys; || this.props.store.commandData.systemHotkeys;
@observable flag: TipType = TipType.OK; @observable _Flag: TipType = TipType.OK;
@observable hotkey: string = ""; @observable _Hotkey: string = "";
@observable isReset: boolean = false; @observable _IsReset: boolean = false;
checkHotKey = () => checkHotKey = () =>
{ {
if (!this.isReset) if (!this._IsReset)
{ {
let keys = []; let keys: string[] = [];
for (let key of this.keys) for (let key of this._Keys)
{ {
keys.push(key[0].toUpperCase() + key.substring(1)); keys.push(key[0].toUpperCase() + key.substring(1));
} }
keys.sort((a, b) => keys.sort((a, b) =>
{ {
return (a.length > b.length) ? -1 : (a.length < b.length) ? 1 : 0; return SYSTEM_BEGIN_HOTKEYS.indexOf(b) - SYSTEM_BEGIN_HOTKEYS.indexOf(a);
}); });
this.str = keys.join("+"); this._Str = keys.join("+");
this.flag = TipType.OK; this._Flag = TipType.OK;
if (this.keys[0] !== "Control" && this.keys[0] !== "Alt" && this.keys[0] !== "Shift") if (!SYSTEM_BEGIN_HOTKEYS.includes(keys[0]) && !BEGIN_HOTKEYS.includes(keys[0]))
{ {
this.flag = TipType.StrIllegal; this._Flag = TipType.StrIllegal;
return; return;
} }
if (this.keys.length == 1) if (keys.length == 1 && !BEGIN_HOTKEYS.includes(keys[0]))
{ {
this.flag = TipType.InputNull; this._Flag = TipType.InputNull;
return; return;
} }
if (keys.length > 1 && (keys[keys.length - 1] === "Alt" || keys[keys.length - 1] === "Shift")) if (keys.length > 1 && (keys[keys.length - 1] === "Alt" || keys[keys.length - 1] === "Shift"))
{ {
this.flag = TipType.InputNull; this._Flag = TipType.InputNull;
return;
}
if (keys.length > 1 && this.includeBeginHotkeys(keys))
{
this._Flag = TipType.InputNull;
return; return;
} }
} }
let value = this.str; let value = this._Str;
let curCmd = this.props.store.commandData; let curCmd = this.props.store.commandData;
let oldCmd = CommandServer.GetInstance().HotKeyCommandMap.get(this.str); let oldCmd = CommandServer.GetInstance().HotKeyCommandMap.get(this._Str);
if (oldCmd && oldCmd !== curCmd.command) if (oldCmd && oldCmd !== curCmd.command)
{ {
this.flag = TipType.IsExist; this._Flag = TipType.IsExist;
this.hotkey = value; this._Hotkey = value;
} }
}; };
private includeBeginHotkeys(keys: string[])
{
if (BEGIN_HOTKEYS.includes(keys[0]))
return true;
return false;
}
handleOnBlur = () => handleOnBlur = () =>
{ {
const commandData = this.props.store.commandData; const commandData = this.props.store.commandData;
let cserver = CommandServer.GetInstance(); let cserver = CommandServer.GetInstance();
if (this.flag === TipType.OK || this.str === "") if (this._Flag === TipType.OK || this._Str === "")
{ {
commandData.hotkeysCustomize = this.str; commandData.hotkeysCustomize = this._Str;
cserver.ChangeCustonCommand(commandData); cserver.ChangeCustonCommand(commandData);
} }
else else
this.str = commandData.hotkeysCustomize ?? (cserver.GetCommandCanUseDefaultHotkey(commandData) ? (commandData.defaultHotkeys) : "") ?? ""; this._Str = commandData.hotkeysCustomize ?? (cserver.GetCommandCanUseDefaultHotkey(commandData) ? (commandData.defaultHotkeys) : "") ?? "";
this.flag = TipType.OK; this._Flag = TipType.OK;
}; };
public render() public render()
{ {
@ -90,12 +106,13 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
outline: "none", outline: "none",
}; };
let errorMsg = ""; let errorMsg = "";
if (this.flag & TipType.InputNull) if (this._Flag & TipType.InputNull)
errorMsg = "不允许的快捷键组合！"; errorMsg = "不允许的快捷键组合！";
if (this.flag & TipType.StrIllegal) if (this._Flag & TipType.StrIllegal)
errorMsg = "快捷键须以Control或Alt或Shift开头"; errorMsg = "快捷键须以Control或Alt或Shift开头";
if (this.flag & TipType.IsExist) if (this._Flag & TipType.IsExist)
errorMsg = "快捷键 " + this.hotkey + " 重复! 请重新输入!"; errorMsg = "快捷键 " + this._Hotkey + " 重复! 请重新输入!";
return ( return (
<div className="hotKey"> <div className="hotKey">
<div className="hotKeyTooltip"> <div className="hotKeyTooltip">
@ -103,7 +120,7 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
content={errorMsg} content={errorMsg}
position={Position.TOP} position={Position.TOP}
intent={Intent.WARNING} intent={Intent.WARNING}
isOpen={this.flag !== TipType.OK} isOpen={this._Flag !== TipType.OK}
> >
<input <input
style={{ backgroundColor: this.props.store.commandData.systemHotkeys ? "#DDDDDD" : "#FFFFFF" }} style={{ backgroundColor: this.props.store.commandData.systemHotkeys ? "#DDDDDD" : "#FFFFFF" }}
@ -115,33 +132,33 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
{ {
if (e.keyCode === KeyBoard.Backspace) if (e.keyCode === KeyBoard.Backspace)
{ {
this.str = ""; this._Str = "";
this.flag = TipType.OK; this._Flag = TipType.OK;
return; return;
} }
window.event.returnValue = false; window.event.returnValue = false;
if (e.keyCode === KeyBoard.Escape) if (e.keyCode === KeyBoard.Escape)
{ {
this.str = this.props.store.commandData.hotkeysCustomize || this.props.store.commandData.defaultHotkeys || ""; this._Str = this.props.store.commandData.hotkeysCustomize || this.props.store.commandData.defaultHotkeys || "";
this.props.store.parentInput.current.focus(); this.props.store.parentInput.current.focus();
e.stopPropagation(); e.stopPropagation();
return; return;
} }
if (this.keys.indexOf(e.key) !== -1) return; if (this._Keys.indexOf(e.key) !== -1) return;
this.keys.push(e.key); this._Keys.push(e.key);
this.checkHotKey(); this.checkHotKey();
}} }}
onKeyUp={(e) => onKeyUp={(e) =>
{ {
this.keys = this.keys.filter((key) => key !== e.key); this._Keys = this._Keys.filter((key) => key !== e.key);
e.preventDefault(); e.preventDefault();
}} }}
value={this.str} value={this._Str}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onChange={this.checkHotKey} onChange={this.checkHotKey}
onBlur={(e) => onBlur={(e) =>
{ {
this.keys.length = 0; this._Keys.length = 0;
this.handleOnBlur(); this.handleOnBlur();
}} }}
/> />
@ -151,8 +168,8 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
<Popover <Popover
usePortal={true} usePortal={true}
position={Position.TOP} position={Position.TOP}
isOpen={this.isReset} isOpen={this._IsReset}
onClose={() => { this.isReset = false; }} onClose={() => { this._IsReset = false; }}
content={ content={
<div <div
tabIndex={1} tabIndex={1}
@ -161,7 +178,7 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
{ {
if (e.keyCode === KeyBoard.Escape) if (e.keyCode === KeyBoard.Escape)
{ {
this.isReset = false; this._IsReset = false;
this._InputElKey.current.focus(); this._InputElKey.current.focus();
} }
else if (e.keyCode === KeyBoard.Enter) else if (e.keyCode === KeyBoard.Enter)
@ -175,7 +192,7 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
text="取消" text="取消"
onClick={(event: React.MouseEvent<HTMLElement>) => onClick={(event: React.MouseEvent<HTMLElement>) =>
{ {
this.isReset = false; this._IsReset = false;
event.stopPropagation(); event.stopPropagation();
}} }}
/> />
@ -184,10 +201,10 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
intent={Intent.PRIMARY} intent={Intent.PRIMARY}
onClick={(event: React.MouseEvent<HTMLElement>) => onClick={(event: React.MouseEvent<HTMLElement>) =>
{ {
this.str = this.props.store.commandData.defaultHotkeys || ""; this._Str = this.props.store.commandData.defaultHotkeys || "";
this.checkHotKey(); this.checkHotKey();
this.handleOnBlur(); this.handleOnBlur();
this.isReset = false; this._IsReset = false;
this._InputElKey.current.focus(); this._InputElKey.current.focus();
event.stopPropagation(); event.stopPropagation();
}} }}
@ -202,7 +219,7 @@ export class InputHotKeys extends React.Component<{ store: CommandItemProps; },
onClick={(event: React.MouseEvent<HTMLElement>) => onClick={(event: React.MouseEvent<HTMLElement>) =>
{ {
if (!this.props.store.commandData.systemHotkeys) if (!this.props.store.commandData.systemHotkeys)
this.isReset = true; this._IsReset = true;
event.stopPropagation(); event.stopPropagation();
}} }}
/> />

Write Preview
Loading…
Cancel
Save