!284 点击命令栏目的图标时。取消当前执行

Merge pull request !284 from 肖诗雅/layout_update_pr1

src/UI/Components/ToolBar/ToolbarContainer.tsx

@@ -39,6 +39,7 @@ export class ToolbarContainer extends React.Component<ToolbarProps, ToolBarState
             { svg: IconEnum.Delete, title: "删除", command: "ERASE" },
             { svg: IconEnum.CopyClip, title: "复制", command: "COPY" },
             { svg: IconEnum.PasteClip, title: "粘贴", command: "PASTECLIP" },
+            { svg: IconEnum.Rotate, title: "旋转", command: "RO" },
             { svg: IconEnum.Move, title: "移动", command: "MOVE" },
             { svg: IconEnum.Offset, title: "偏移", command: "O" },
             { svg: IconEnum.Stretch, title: "拉伸", command: "S" },

src/UI/Components/TopToolBar/DimensionPanel.tsx

@@ -0,0 +1,35 @@
+import React = require("react");
+import { ToolsBlockStore, ToolsBlock } from "./ToolsBlock";
+import { inject } from "mobx-react";
+
+//拆单与标注 命令块
+inject("store")
+export class DimensionPanel extends React.Component<{ store: ToolsBlockStore }, {}>
+{
+    render()
+    {
+        const {
+            m_iconList: {
+                iconList_DIM: iconList_dim,
+                iconList_PRODUCE: iconlist_produce,
+            }, historyCmds, execFun } = this.props.store;
+        return (
+            <div className="tool-block">
+                <ToolsBlock
+                    blockId={"dim"}
+                    list={iconList_dim}
+                    historyCmds={historyCmds}
+                    execFun={execFun}
+                    btnTitile="标注"
+                />
+                <ToolsBlock
+                    blockId={"produce"}
+                    list={iconlist_produce}
+                    historyCmds={historyCmds}
+                    execFun={execFun}
+                    btnTitile="拆单生产"
+                />
+            </div>
+        );
+    }
+}

src/UI/Components/TopToolBar/DrawingPanel.tsx

@@ -13,9 +13,7 @@ export class DrawingPanel extends React.Component<{ store: ToolsBlockStore }, {}
                 iconList_2D: iconList_2d,
                 iconList_BR_draw: iconList_br_draw,
                 iconList_BR_edit: iconList_br_edit,
-                iconList_DIM: iconList_dim,
                 iconList_DRILL: iconlist_drill,
-                iconList_PRODUCE: iconlist_produce,
             }, historyCmds, execFun } = this.props.store;
         return (
             <div className="tool-block">
@@ -40,13 +38,6 @@ export class DrawingPanel extends React.Component<{ store: ToolsBlockStore }, {}
                     execFun={execFun}
                     btnTitile="板件编辑"
                 />
-                <ToolsBlock
-                    blockId={"dim"}
-                    list={iconList_dim}
-                    historyCmds={historyCmds}
-                    execFun={execFun}
-                    btnTitile="标注"
-                />
                 <ToolsBlock
                     blockId={"drill"}
                     list={iconlist_drill}
@@ -54,13 +45,6 @@ export class DrawingPanel extends React.Component<{ store: ToolsBlockStore }, {}
                     execFun={execFun}
                     btnTitile="排钻"
                 />
-                <ToolsBlock
-                    blockId={"produce"}
-                    list={iconlist_produce}
-                    historyCmds={historyCmds}
-                    execFun={execFun}
-                    btnTitile="拆单生产"
-                />
             </div>
         );
     }

src/UI/Components/TopToolBar/ToolsBlock.tsx

@@ -7,6 +7,9 @@ import { Button, Intent } from "@blueprintjs/core";
 import { end } from "xaop";
 import { ICON_CDN } from "../../IconEnum";
 import { ZINDEX } from "../../../Common/ZIndex";
+import { commandMachine } from "../../../Editor/CommandMachine";
+import { CommandState } from "../../../Editor/CommandState";
+import { Sleep } from "../../../Common/Utils";
 export interface ICommandIconInfo
 {
     svg: string,
@@ -79,33 +82,124 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
     }
     checkWidth = () =>
     {
-        const { list } = this.props;
-        const matchMost = window.matchMedia(`(max-width: 910px)`);
-        const matchMore = window.matchMedia(`(max-width: 1350px )`);
-        const matchLittle = window.matchMedia(`(max-width: 1845px )`);
-        if (matchMost.matches)
+
+        const { list, blockId } = this.props;
+        //命令块收缩规则
+        const matchMost = window.matchMedia(`(max-width: 1255px)`);
+        const matchMore = window.matchMedia(`(max-width: 1365px )`);
+        const matchLittle = window.matchMedia(`(max-width: 1585px )`);
+
+        //全都缩成一个
+        const allInOne = window.matchMedia(`(max-width: 485px)`);
+
+        //板件命令收缩规则 等别的都缩成一个了，板件绘图和板件编辑 才开始缩
+        const brBlockMost = window.matchMedia(`(max-width: 815px)`);
+        const brBlockMore = window.matchMedia(`(max-width: 1035px )`);
+        const brBlockLittle = window.matchMedia(`(max-width: 1145px)`);
+
+        if (allInOne.matches)
         {
             this.setState({ isCollapse: CollapaseType.Most });
             this.list_main = [];
             this.list_small = list.slice(1);
         }
+        else if (brBlockMost.matches)
+        {
+            this.setState({ isCollapse: CollapaseType.Most });
+            if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")//板件绘图-板件编辑-排钻
+            {
+                this.list_main = list.slice(1, 3);
+                this.list_small = list.slice(3);
+            }
+            else
+            {
+                this.list_main = [];
+                this.list_small = list.slice(1);
+            }
+        }
+        else if (brBlockMore.matches)
+        {
+            this.setState({ isCollapse: CollapaseType.Most });
+            if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
+            {
+                this.list_main = list.slice(1, 6);
+                this.list_small = list.slice(6);
+            }
+            else
+            {
+                this.list_main = [];
+                this.list_small = list.slice(1);
+            }
+        }
+        else if (brBlockLittle.matches)
+        {
+            this.setState({ isCollapse: CollapaseType.Most });
+            if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
+            {
+                this.list_main = list.slice(1, 9);
+                this.list_small = list.slice(9);
+            }
+            else
+            {
+                this.list_main = [];
+                this.list_small = list.slice(1);
+            }
+        }
+        else if (matchMost.matches)
+        {
+            this.setState({ isCollapse: CollapaseType.Most });
+            if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
+            {
+                this.list_main = list.slice(1);
+                this.list_small = [];
+            }
+            else
+            {
+                this.list_main = [];
+                this.list_small = list.slice(1);
+            }
+        }
         else if (matchMore.matches)
         {
             this.setState({ isCollapse: CollapaseType.More });
-            this.list_main = list.slice(1, 3);
-            this.list_small = list.slice(3);
+            if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
+            {
+                this.list_main = list.slice(1);
+                this.list_small = [];
+            }
+            else
+            {
+                this.list_main = list.slice(1, 3);
+                this.list_small = list.slice(3);
+            }
         }
         else if (matchLittle.matches)
         {
             this.setState({ isCollapse: CollapaseType.Little });
-            this.list_main = list.slice(1, 5);
-            this.list_small = list.slice(5);
+            if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
+            {
+                this.list_main = list.slice(1);
+                this.list_small = [];
+            }
+            else
+            {
+                this.list_main = list.slice(1, 5);
+                this.list_small = list.slice(5);
+            }
         }
         else
         {
             this.setState({ isCollapse: CollapaseType.None });
-            this.list_main = list.slice(1, 8);
-            this.list_small = list.slice(8);
+            if (blockId === "br_draw" || blockId === "br_edit" || blockId === "drill")
+            {
+                this.list_main = list.slice(1);
+                this.list_small = [];
+            }
+            else
+            {
+                this.list_main = list.slice(1, 9);
+                this.list_small = list.slice(9);
+            }
         }
     };
     componentDidMount()
@@ -130,43 +224,58 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
     {
         app.m_Editor.m_MaskManage.ShowMask(true, true);
     }
+    EndCurrentCommand = async () =>//如何更好地结束命令
+    {
+        if (CommandState.CommandIng)
+        {
+            app.m_Editor.Canel();
+            console.log("commanding ")
+            commandMachine.CommandEnd(true);
+        }
+    }
+    HandleOnClick = async (cmd: string) =>
+    {
+        const { historyCmds, execFun } = this.props;
+        this.EndCurrentCommand();
+        await Sleep(10);
+        historyCmds.push(cmd);
+        execFun(cmd);
+    }
     render()
     {
-        const { list, historyCmds, execFun, btnTitile } = this.props;
+        const { list, btnTitile } = this.props;
         let first = list[0];
         return (
             <div id={this.props.blockId}>
                 <ul className="ul-unstyle ul-twoD">
                     {
-                        < li title={first.command} style={{}} onClick={() =>
+                        //即便坍缩到最小 必定会留一个
+                        < li title={first.command} style={{}} onClick={async () =>
                         {
-                            historyCmds.push(first.command);
-                            execFun(first.command);
+                            this.HandleOnClick(first.command);
                         }}>
                             <img src={`${ICON_CDN}/${first.svg}`} />{/**如果cmd.svg为空呢 */}
                             <p>{first.title}</p>
                         </li>
                     }
                     {
-                        !this.state.Collapse ?
-                            //正常显示下 超过10个缩略隐藏
-                            this.list_main.map((cmd, index) =>
-                            {
-                                return (
-                                    <li key={index} title={cmd.command} style={{ width: cmd.title.length === 5 ? "60px" : "55px" }} onClick={() =>
-                                    {
-                                        historyCmds.push(cmd.command);
-                                        execFun(cmd.command);
-                                    }}>
-                                        <img src={`${ICON_CDN}/${cmd.svg}`} />
-                                        <p>{cmd.title}</p>
-                                    </li>
-                                )
-                            })
-                            : null
+                        //主列表
+                        this.list_main.map((cmd, index) =>
+                        {
+                            return (
+                                <li key={index} title={cmd.command} style={{ width: cmd.title.length === 5 ? "60px" : "55px" }} onClick={() =>
+                                {
+                                    this.HandleOnClick(cmd.command);
+                                }}>
+                                    <img src={`${ICON_CDN}/${cmd.svg}`} />
+                                    <p>{cmd.title}</p>
+                                </li>
+                            )
+                        })
                     }
                 </ul >
                 {
+                    //小列表
                     this.isExtendShow ?
                         <div className="small-iconlist"
                             style={{ zIndex: parseInt(ZINDEX.ToolsBlock_small) }}
@@ -175,23 +284,6 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
                             onFocus={this.HandleFocus}
                         >
                             <ul className="ul-unstyle">
-                                {
-                                    this.state.Collapse ?
-                                        this.list_main.map((cmd, index) =>
-                                        {
-                                            return (
-                                                <li key={index} title={cmd.title} style={{}} onClick={() =>
-                                                {
-                                                    historyCmds.push(cmd.command);
-                                                    execFun(cmd.command);
-                                                }}>
-                                                    <img src={`${ICON_CDN}/${cmd.svg}`} />
-                                                    {!this.state.Collapse ? <p>{cmd.title}</p> : null}
-                                                </li>
-                                            )
-                                        })
-                                        : null
-                                }
                                 {
                                     this.list_small.length > 0 ?
                                         this.list_small.map((cmd, index) =>
@@ -199,8 +291,7 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
                                             return (
                                                 <li key={index} title={cmd.title} style={{}} onClick={() =>
                                                 {
-                                                    historyCmds.push(cmd.command);
-                                                    execFun(cmd.command);
+                                                    this.HandleOnClick(cmd.command);
                                                     this.isExtendShow = false;
                                                     app.m_Editor.m_MaskManage.Clear();
                                                 }}>
@@ -213,15 +304,19 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
                             <Button
                                 text={btnTitile}
                                 intent={Intent.NONE}
-                                onClick={() => { this.isExtendShow = false; app.m_Editor.m_MaskManage.Clear(); }}
+                                onClick={() =>
+                                {
+                                    if (CommandState.CommandIng)
+                                        commandMachine.CommandEnd(); this.isExtendShow = false; app.m_Editor.m_MaskManage.Clear();
+                                }}
                             />
                         </div> : null
                 }
                 <Button
                     text={btnTitile}
                     intent={Intent.NONE}
-                    disabled={!((this.list_small.length > 0 && !this.state.Collapse) || (this.list_main.length > 0 && this.state.Collapse))}
-                    onClick={() =>
+                    disabled={!((this.list_small.length > 0 && !this.state.Collapse) || (this.list_main.length > 1 && this.state.Collapse))}
+                    onClick={async () =>
                     {
                         if (this.list_small.length > 0 || (this.state.Collapse && this.list_main.length > 0))
                         {

src/UI/Components/TopToolBar/TopToolBar.tsx

@@ -8,6 +8,7 @@ import { ToolsBlockStore } from "./ToolsBlock";
 import { RenderPanel } from "./RenderPanel";
 import { ThreeDEntityPanel } from "./ThreeDEntityPanel"
 import { ViewPanel } from "./ViewPanel"
+import { DimensionPanel } from "./DimensionPanel";
 interface TopToolBarProps
 {
     historyCmds: string[]
@@ -25,7 +26,7 @@ export class TopToolBar extends React.Component<TopToolBarProps, {}>
             { svg: IconEnum.Line, title: "直线", command: "L" },
             { svg: IconEnum.Arc, title: "圆弧", command: "ARC" },
             { svg: IconEnum.Circle, title: "圆", command: "C" },
-            { svg: IconEnum.PolyLine, title: "多段线", command: "POLYLINE" },
+            { svg: IconEnum.PolyLine, title: "多段线", command: "PL" },
             { svg: IconEnum.Rectangle, title: "矩形", command: "RECTANG" },
             { svg: IconEnum.SpLine, title: "样条曲线", command: "SPL" },
             { svg: IconEnum.Region, title: "面域", command: "REG" },
@@ -50,6 +51,7 @@ export class TopToolBar extends React.Component<TopToolBarProps, {}>
             { svg: IconEnum.WineRack, title: "酒格", command: "DRAWWINERACK" },
             { svg: IconEnum.Door, title: "门板", command: "DOOR" },
             { svg: IconEnum.Drawer, title: "抽屉", command: "DRAWER" },
+            { svg: IconEnum.WineRack, title: "格子抽", command: "LATTICE" },
         ]
         store.m_iconList.iconList_BR_edit = [
             { svg: IconEnum.QG, title: "线性切割", command: "QG" },
@@ -81,10 +83,12 @@ export class TopToolBar extends React.Component<TopToolBarProps, {}>
         ]
         store.m_iconList.iconList_VIEW = [
             { svg: IconEnum.UCS, title: "UCS", command: "UCS" },
-            { svg: IconEnum.BottomView, title: "底视图", command: "BOTTOMVIEW" },
-            { svg: IconEnum.FrontView, title: "前视图", command: "QS" },
-            { svg: IconEnum.LeftView, title: "左视图", command: "ZS" },
+            { svg: IconEnum.BottomView, title: "俯视图", command: "FS" },
             { svg: IconEnum.RightView, title: "右视图", command: "YS" },
+            { svg: IconEnum.LeftView, title: "左视图", command: "ZS" },
+            { svg: IconEnum.FrontView, title: "前视图", command: "QS" },
+            { svg: IconEnum.BottomView, title: "仰视图", command: "BOTTOMVIEW" },
+            { svg: IconEnum.Swiso, title: "西南等轴测", command: "SWISO" },
             { svg: IconEnum.Camera, title: "相机模式", command: "CC" },
         ]
         store.m_iconList.iconList_PRODUCE = [
@@ -101,7 +105,8 @@ export class TopToolBar extends React.Component<TopToolBarProps, {}>
                 onChange={e => this.selectedTabId = e}
             >
                 <Tab className="tab-unstyle" id="draw" title="绘图" panel={<DrawingPanel store={store as ToolsBlockStore} />} />
-                <Tab className="tab-unstyle" id="produce" title="三维实体绘图" panel={<ThreeDEntityPanel store={store as ToolsBlockStore} />} />
+                <Tab className="tab-unstyle" id="entity" title="三维实体绘图" panel={<ThreeDEntityPanel store={store as ToolsBlockStore} />} />
+                <Tab className="tab-unstyle" id="dimension" title="拆单与标注" panel={<DimensionPanel store={store as ToolsBlockStore} />} />
                 <Tab className="tab-unstyle" id="render" title="渲染" panel={<RenderPanel store={store as ToolsBlockStore} />} />
                 <Tab className="tab-unstyle" id="view" title="视图" panel={<ViewPanel store={store as ToolsBlockStore} />} />
             </ Tabs>

src/UI/Css/blue.less

@@ -78,7 +78,7 @@
     border:1px solid #25313a;
     border-width:0 0 0 1px;
     line-height: 20px;
-    width: 120px;
+    width: 95px;
     text-align: center;
     font-size: 10px;
     &:hover

src/UI/Css/style.less

@@ -392,7 +392,7 @@ input[type=radio] {
         margin-left: 80px;
     }
 }
-@media screen and (max-height:685px) {
+@media screen and (max-height:699px) {
     #toolbar ul{
         width: 120px;
     }
@@ -400,7 +400,7 @@ input[type=radio] {
         margin-left: 120px;
     }
 }
-@media screen and (max-height:510px) {
+@media screen and (max-height:525px) {
     #toolbar ul{
         width: 160px;
     }
@@ -424,6 +424,14 @@ input[type=radio] {
         margin-left: 240px;
     }
 }
+@media screen and (max-height:351px) {
+    #toolbar ul{
+        width: 280px;
+    }
+    #CamCtrlBtn{
+        margin-left: 280px;
+    }
+}
 @media screen and (max-height:336px) {
     #toolbar ul{
         width: 360px;

src/UI/IconEnum.ts

@@ -96,4 +96,5 @@ export enum IconEnum
     LeftView = 'UI细-63.svg',
     RightView = 'UI细-84.svg',
     Retraction = 'UI细-95.svg',
+    Swiso = 'UI细-82.svg',
 }