!218 命令面板(F1)优化

Merge pull request !218 from 肖诗雅/commanPanel_repair_pr

src/UI/Components/CommandPanel/CommandItem.tsx

@@ -34,6 +34,7 @@ interface CommandItemProps
 export class CommandItem extends React.Component<CommandItemProps, {}>{
     @observable private flag: TipType = TipType.OK;
     private m_InputEl: HTMLInputElement;
+    private m_commandItemEl: HTMLLIElement;
     @observable private isCNInput: boolean = false;
     private isReset = false;
     constructor(props)
@@ -56,6 +57,10 @@ export class CommandItem extends React.Component<CommandItemProps, {}>{
             }
             e.stopPropagation();
         }
+        this.m_InputEl.addEventListener('blur', () =>
+        {
+            this.m_commandItemEl.parentElement.focus();
+        });
     }
     handleLiClick = () =>
     {
@@ -130,6 +135,7 @@ export class CommandItem extends React.Component<CommandItemProps, {}>{
             <li
                 id={this.props.commandData.typeId}
                 onClick={this.handleLiClick}
+                ref={el => this.m_commandItemEl = el}
             >
                 <li></li>
                 <li>{store.commandData.chName}</li>
@@ -170,7 +176,11 @@ export class CommandItem extends React.Component<CommandItemProps, {}>{
                     <Popover
                         usePortal={true}
                         position={Position.RIGHT}
-                        onClosed={() => this.isReset = false}
+                        onClosed={() =>
+                        {
+                            this.isReset = false;
+                            this.m_InputEl.focus();
+                        }}
                         content={
                             <div
                                 style={popStyle}
@@ -178,7 +188,10 @@ export class CommandItem extends React.Component<CommandItemProps, {}>{
                                 onKeyDown={(e) =>
                                 {
                                     if (e.keyCode === KeyBoard.Escape)
+                                    {
                                         (e.currentTarget.lastElementChild.firstElementChild as HTMLButtonElement).click();
+                                        this.m_commandItemEl.parentElement.focus();
+                                    }
 
                                     else if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space)
                                         (e.currentTarget.lastElementChild.lastElementChild as HTMLButtonElement).click();
@@ -195,7 +208,6 @@ export class CommandItem extends React.Component<CommandItemProps, {}>{
                                         intent={Intent.PRIMARY}
                                         onClick={() =>
                                         {
-                                            this.m_InputEl.focus();
                                             store.commandData.customize = store.commandData.defaultCustom;
                                             this.handleOnChange(store.commandData.customize);
                                         }}

src/UI/Components/CommandPanel/CommandList.ts

@@ -86,14 +86,14 @@ export const CommandList: ICommand[] = observable([
     {
         typeId: "i2d",
         link: "#",
-        defaultCustom: "R",
-        customizeed: "R",
-        common: "R",
+        defaultCustom: "RECTANG",
+        customizeed: "RECTANG",
+        common: "RECTANG",
         type: "二维",
         chName: "矩形",
         // enName: "Rectangle",
         chDes: "画一个矩形",
-        customize: "R",
+        customize: "RECTANG",
     },
     {
         typeId: "i2d",

src/UI/Components/CommandPanel/commandPanel.tsx

@@ -167,8 +167,11 @@ export class CommandPanel extends React.Component<{}, CommandPanelState>
                             onScroll={async () =>
                             {
                                 let cserver = Singleton.GetInstance(CommandServer);
-                                let index = Math.floor(this.scrollCard.scrollTop / 57);
-                                this.id = this.searchRes[index].typeId;
+                                let index = Math.floor(this.scrollCard.scrollTop / 57); 
+                                if (index < this.searchRes.length)
+                                    this.id = this.searchRes[index].typeId;
+                                else
+                                    this.id = this.searchRes[this.searchRes.length - 1].typeId;
                                 await cserver.SetLastScrollTop(this.scrollCard.scrollTop);
                             }}
                         >
@@ -191,13 +194,14 @@ export class CommandPanel extends React.Component<{}, CommandPanelState>
                                             if (id !== command.typeId)
                                             {
                                                 id = command.typeId;
-                                                return <ul className={Classes.LIST_UNSTYLED}><div><h1>{command.type}命令</h1></div>
+                                                return <>
+                                                    <ul className={Classes.LIST_UNSTYLED}><div><h1>{command.type}命令</h1></div></ul>
                                                     <CommandItem
                                                         key={command.common}
                                                         commandData={command}
                                                         storeList={this.searchList}
                                                     />
-                                                </ul>
+                                                </>
                                             }
                                             return <CommandItem
                                                 key={command.common}

src/UI/Components/ContextMenu/KeyWordContextMenu.tsx

@@ -30,7 +30,7 @@ export class KeyWordContextMenu extends React.Component<{ keywordStore?: GetKeyW
                         left: `${store.mousePositionX}px`,
                         top: `${store.mousePositionY}px`,
                         cursor: "default",
-                        zIndex: 300,
+                        zIndex: 28,
                     }
                 }
                 ulRef={el => this.m_Menu = el}

src/UI/Components/Modal/ModalStyle/CommandModal.less

@@ -35,7 +35,7 @@
     height: 50vh;
     min-height: 300px;
     overflow: auto;
-    padding: 10px;
+    padding: 0 10px 10px 10px;
     margin: 10px;
 }
 #commandPanel .bp3-card>ul>ul>div>h1
@@ -57,6 +57,7 @@
 #commandPanel .bp3-card>ul>li:hover,#commandPanel .bp3-card>ul>ul>li:hover
 {
     background-color: #394B59;//todo:更好的适应主题切换
+    cursor: pointer;
 }
 #commandPanel .bp3-card>ul>li>li,#commandPanel .bp3-card>ul>ul>li>li
 {

src/UI/Css/blue.less

@@ -49,7 +49,7 @@
     margin: 0;
 }
 .bp3-portal{
-    z-index: 25;
+    z-index: 27;
 }
 /**************** DownPanel *********************/