新增通用拖动

src/Add-on/DrawBoard/DrawBehindBoard.ts

@@ -23,7 +23,7 @@ export class DrawBehindBoard extends DrawSingleBoard
 
         //获取背板高度
         let size = newBox.getSize(new Vector3());
-        let height = opt.isTotalHeight ? size.z : parseFloat(opt.height) / 100;
+        let height = opt.height === "H" ? size.z : parseFloat(opt.height) / 100;
         let moveDist = parseFloat(opt.moveDist) / 100;
 
         //判断背板位置,更新背板高度

src/UI/Components/Board/BehindBoardModal.tsx

@@ -2,21 +2,21 @@ import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { Radio, RadioGroup, Checkbox } from '../../../../node_modules/@blueprintjs/core';
 import { BehindBoardStore, BehindHeightPositon, BehindRelativePositon } from '../../Store/BoardStore';
-import { SetBoardDataItem, SetBoardDataItem2, BoardModel } from './BoardCommon';
+import { SetBoardDataItem, SetBoardDataItem2, BoardModel, SetBoardDataBlock } from './BoardCommon';
 import { observable } from '../../../../node_modules/mobx';
 
 @inject("store")
 @observer
 export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore }, {}>
 {
-    m_ScaleParameter = new Map([
+    private m_ScaleParameter = new Map([
         ["knifeRad", "刀具半径"],
         ["grooveAddLength", "槽加长"], ["grooveAddWidth", "槽加宽"], ["grooveAddDepth", "槽加深"]
     ]);
-    m_PosParameter = new Map([
+    private m_ResPosParameter = new Map([
         ["spaceWidth", "空间"], ["count", "板数"], ["thickness", "板度"]
     ]);
-    @observable moveDir = "移动";
+    @observable private moveDir = "移动";
     constructor(props)
     {
         super(props);
@@ -36,38 +36,22 @@ export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore
                     <div className="flex">
                         <div className="process-data">
                             <h6>加工数据</h6>
-                            <div className="flexWrap">
+                            <SetBoardDataBlock
-                                {
+                                pars={this.m_ScaleParameter}
-                                    Array.from(this.m_ScaleParameter.keys()).map(k =>
+                                opt={store.m_BoardOption}
-                                    {
+                                className="flexWrap"
-                                        return (
+                            />
-                                            <div key={k}>
-                                                <span> {this.m_ScaleParameter.get(k)}:</span>
-                                                <input
-                                                    className="pt-input"
-                                                    type="number"
-                                                    value={store.m_BoardOption[k]}
-                                                    onChange={e =>
-                                                    {
-                                                        store.m_BoardOption[k] = e.target.value;
-                                                    }}
-                                                    dir="auto" />
-                                            </div>
-                                        )
-                                    })
-                                }
-                            </div>
                         </div>
                         <div>
                             <h6>板件尺寸</h6>
                             <div className="boardSize center">
-                                <SetBoardDataItem2 title="上延伸" k="topExt" m_BoardOption={store.m_BoardOption} />
+                                <SetBoardDataItem2 title="上延伸" k="topExt" opt={store.m_BoardOption} />
                                 <div>
-                                    <SetBoardDataItem2 title="左延伸" k="leftExt" m_BoardOption={store.m_BoardOption} />
+                                    <SetBoardDataItem2 title="左延伸" k="leftExt" opt={store.m_BoardOption} />
                                     <BoardModel />
-                                    <SetBoardDataItem2 title="右延伸" k="rightExt" m_BoardOption={store.m_BoardOption} />
+                                    <SetBoardDataItem2 title="右延伸" k="rightExt" opt={store.m_BoardOption} />
                                 </div>
-                                <SetBoardDataItem2 title="下延伸" k="bottomExt" m_BoardOption={store.m_BoardOption} />
+                                <SetBoardDataItem2 title="下延伸" k="bottomExt" opt={store.m_BoardOption} />
                             </div>
                         </div>
                     </div>
@@ -80,14 +64,17 @@ export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore
                                 let value = e.currentTarget.value as BehindHeightPositon
                                 store.m_BoardOption.boardPosition = value;
                                 if (value === BehindHeightPositon.ForTop)
-                                    this.moveDir = "上移"
+                                {
+                                    this.moveDir = "上移";
+                                    store.m_BoardOption.height = "0"
+                                }
                                 else if (value === BehindHeightPositon.ForBottom)
-                                    this.moveDir = "下移"
-                                else
                                 {
-                                    store.m_BoardOption.height = "H"
+                                    store.m_BoardOption.height = "0"
-                                    store.m_BoardOption.isTotalHeight = true;
+                                    this.moveDir = "下移";
                                 }
+                                else
+                                    store.m_BoardOption.height = "H"
 
                             }}
                             selectedValue={store.m_BoardOption.boardPosition}
@@ -99,13 +86,13 @@ export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore
                         <div className="flexWrap">
                             <SetBoardDataItem
                                 k="height"
-                                behindBoardOption={store.m_BoardOption}
+                                opt={store.m_BoardOption}
                                 title="板件高度"
-                                isDisabled={store.m_BoardOption.isTotalHeight}
+                                isDisabled={store.m_BoardOption.boardPosition === BehindHeightPositon.AllHeight}
                             />
                             <SetBoardDataItem
                                 k="moveDist"
-                                behindBoardOption={store.m_BoardOption}
+                                opt={store.m_BoardOption}
                                 title={this.moveDir}
                                 isDisabled={store.m_BoardOption.boardPosition === BehindHeightPositon.AllHeight}
                             />
@@ -127,22 +114,11 @@ export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore
                             <Radio label="靠后" value={BehindRelativePositon.ForBack} />
                             <Radio label="等分板" value={BehindRelativePositon.Div} />
                         </RadioGroup>
-                        <div className="flexWrap">
+                        <SetBoardDataBlock
-                            {
+                            pars={this.m_ResPosParameter}
-                                Array.from(this.m_PosParameter.keys()).map(k =>
+                            opt={store.m_BoardOption}
-                                {
+                            className="flexWrap"
-                                    return (
+                        />
-                                        <SetBoardDataItem
-                                            key={k}
-                                            k={k}
-                                            behindBoardOption={store.m_BoardOption}
-                                            title={this.m_PosParameter.get(k)}
-                                            isDisabled={k === "spaceWidth" && store.m_BoardOption.boardRelative === BehindRelativePositon.Div}
-                                        />
-                                    )
-                                })
-                            }
-                        </div>
                     </div>
                 </div>
             </div>

src/UI/Components/Board/BoardCommon.tsx

@@ -2,38 +2,53 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 
 //设置板件数据组件
-export const SetBoardDataItem = observer(({ k, behindBoardOption, title, isDisabled = false }) =>
+export const SetBoardDataItem = observer(({ k, opt, title, isDisabled = false }) =>
     <div className="br-set">
         <span>
             {title}:
         </span>
         <input
             className="pt-input"
-            value={behindBoardOption[k]}
+            value={opt[k]}
             disabled={isDisabled}
             onChange={e =>
             {
-                behindBoardOption[k] = e.target.value;
+                opt[k] = e.target.value;
             }}
         />
     </div>
 );
 //设置板件数据组件
-export const SetBoardDataItem2 = observer(({ k, m_BoardOption, title }) =>
+export const SetBoardDataItem2 = observer(({ k, opt, title }) =>
     <label className="pt-label pt-inline">
         {title}
         <input
             className="pt-input"
             type="number"
-            value={m_BoardOption[k]}
+            value={opt[k]}
             onChange={e =>
             {
-                m_BoardOption[k] = e.target.value;
+                opt[k] = e.target.value;
             }}
             dir="auto" />
     </label>
 );
 
+export const SetBoardDataBlock = observer(({ pars, opt, className }) =>
+    <div className={className}>
+        {
+            Array.from(pars.keys()).map(k =>
+                <SetBoardDataItem
+                    key={k}
+                    k={k}
+                    opt={opt}
+                    title={pars.get(k)}
+                />
+            )
+        }
+    </div>
+);
+
 export const BoardModel = () =>
 {
     return (

src/UI/Components/Board/BoardModal.tsx

@@ -32,37 +32,34 @@ interface BoardModalProps
     store: BoardStore
 }
 
-export class BoardModal extends React.Component<BoardModalProps, {}> {
 
-    private m_ModalMap: Map<string, any>;
-    constructor(props)
-    {
-        super(props);
-        let store = this.props.store;
-        this.m_ModalMap = new Map([
-            [BoardModalType.LR, <LeftRightBoardModal store={store as SideBoardStore} />],
-            [BoardModalType.TB, <TopBottomBoardModal store={store as TopBottomBoardStore} />],
-            [BoardModalType.Be, <BehindBoardModal store={store as BehindBoardStore} />],
-            [BoardModalType.Ly, <LayerBoardModal store={store as LayerBoardStore} />],
-            [BoardModalType.Ve, <VerticalBoardModal store={store as VerticalBoardStore} />],
-        ])
-    }
-    render()
-    {
-        let store = this.props.store;
 
-        return (
-            <Dialog
-                autoFocus={true}
-                iconName="inbox"
-                isOpen={true}
-                onClose={() => store.OnOk(ModalState.Cancel)}
-                canOutsideClickClose={false}
-                canEscapeKeyClose={true}
-                enforceFocus={true}
-                title={store.title}
-            >
 
+export const BoardModal = (props: BoardModalProps) =>
+{
+    let store = props.store;
+
+    const m_ModalMap = new Map([
+        [BoardModalType.LR, <LeftRightBoardModal store={store as SideBoardStore} />],
+        [BoardModalType.TB, <TopBottomBoardModal store={store as TopBottomBoardStore} />],
+        [BoardModalType.Be, <BehindBoardModal store={store as BehindBoardStore} />],
+        [BoardModalType.Ly, <LayerBoardModal store={store as LayerBoardStore} />],
+        [BoardModalType.Ve, <VerticalBoardModal store={store as VerticalBoardStore} />],
+    ])
+    return (
+        <div className="pt-dialog-container" onKeyDown={(e) => e.stopPropagation()} >
+            <div className="pt-dialog">
+                <div
+                    className="pt-dialog-header"
+                    data-id="dragArea"
+                >
+                    <span className="pt-icon-large pt-icon-column-layout"></span>
+                    <h5 className="pt-dialog-header-title">{store.title}</h5>
+                    <button
+                        aria-label="Close" className="pt-dialog-close-button pt-icon-small-cross"
+                        onClick={() => store.OnOk(ModalState.Cancel)}
+                    ></button>
+                </div>
                 <div
                     className="pt-dialog-body"
                     onKeyDown={e =>
@@ -71,10 +68,9 @@ export class BoardModal extends React.Component<BoardModalProps, {}> {
                     }
                     }>
                     {
-                        this.m_ModalMap.get(this.props.type)
+                        m_ModalMap.get(props.type as BoardModalType)
                     }
                 </div>
-
                 <div className="pt-dialog-footer">
                     <div className="pt-dialog-footer-actions">
                         <Button
@@ -92,75 +88,7 @@ export class BoardModal extends React.Component<BoardModalProps, {}> {
 
                     </div>
                 </div>
-            </ Dialog>
-        );
-    }
-}
-
-export class BoardModal1 extends React.Component<BoardModalProps, {}> {
-
-    private m_ModalMap: Map<string, any>;
-    constructor(props)
-    {
-        super(props);
-        let store = this.props.store;
-        this.m_ModalMap = new Map([
-            [BoardModalType.LR, <LeftRightBoardModal store={store as SideBoardStore} />],
-            [BoardModalType.TB, <TopBottomBoardModal store={store as TopBottomBoardStore} />],
-            [BoardModalType.Be, <BehindBoardModal store={store as BehindBoardStore} />],
-            [BoardModalType.Ly, <LayerBoardModal store={store as LayerBoardStore} />],
-            [BoardModalType.Ve, <VerticalBoardModal store={store as VerticalBoardStore} />],
-        ])
-    }
-    render()
-    {
-        let store = this.props.store;
-
-        return (
-            <div className="pt-dialog-container" onKeyDown={(e) => e.stopPropagation()} >
-                <div className="pt-dialog">
-                    <div
-                        className="pt-dialog-header"
-                        id="dragArea"
-                    >
-                        <span className="pt-icon-large pt-icon-lightbulb"></span>
-                        <h5 className="pt-dialog-header-title">store.title</h5>
-                        <button
-                            aria-label="Close" className="pt-dialog-close-button pt-icon-small-cross"
-                            onClick={() => store.OnOk(ModalState.Cancel)}
-                        ></button>
-                    </div>
-                    <div
-                        className="pt-dialog-body"
-                        onKeyDown={e =>
-                        {
-                            e.stopPropagation();
-                        }
-                        }>
-                        {
-                            this.m_ModalMap.get(this.props.type)
-                        }
-                    </div>
-                    <div className="pt-dialog-footer">
-                        <div className="pt-dialog-footer-actions">
-                            <Button
-                                className="LeftRightBtn"
-                                text="确定"
-                                onClick={() =>
-                                {
-                                    store.OnOk(ModalState.Ok);
-                                }} />
-
-                            <Button className="LeftRightBtn" text="取消" onClick={() =>
-                            {
-                                store.OnOk(ModalState.Cancel);
-                            }} />
-
-                        </div>
-                    </div>
-                </div>
             </div>
-        );
+        </div>
-    }
+    );
 }
-

src/UI/Components/Board/leftRightBoardModal.tsx

@@ -1,17 +1,14 @@
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
-
 import { SideBoardStore } from '../../Store/BoardStore';
-import { SetBoardDataItem } from './BoardCommon';
+import { SetBoardDataBlock } from './BoardCommon';
+
 
 export const LeftRightBoardModal =
     inject("store")
         (observer((props: { store?: SideBoardStore }) => (
-            <div>
+            <SetBoardDataBlock
-                {
+                pars={props.store.m_Parameter}
-                    Array.from(props.store.m_Parameter.keys()).map(k =>
+                opt={props.store.boardOption}
-                        <SetBoardDataItem key={k} k={k} behindBoardOption={props.store.boardOption} title={props.store.m_Parameter.get(k)} />
+            />
-                    )
-                }
-            </div>
         )))

src/UI/Components/Modal/LightModal.tsx

@@ -108,11 +108,11 @@ export class LightModal extends React.Component<LightModalProps, LightModalState
     {
         let light = this.props.selectedObj as PointLight;
         return (
-            <div className="pt-dialog-container" onKeyDown={(e) => e.stopPropagation()} >
+            <div id="lightModal" className="pt-dialog-container" onKeyDown={(e) => e.stopPropagation()} >
                 <div className="pt-dialog">
                     <div
                         className="pt-dialog-header"
-                        id="dragArea"
+                        data-id="dragArea"
                     >
                         <span className="pt-icon-large pt-icon-lightbulb"></span>
                         <h5 className="pt-dialog-header-title">灯光设置</h5>

src/UI/Components/Modal/Modal.css

@@ -1,44 +1,94 @@
 #modal{
     position: fixed;
-    top:40px;
-    right:0;
-    width: 300px;
-    min-height: auto;
 }
-#modal h5{
+#lightModal h5{
     color: #CCCCCC;
 }
-#modal .pt-dialog{
+
+#lightModal .pt-dialog{
     background: #444444;
     color: #CCCCCC;
     font-size: 16px;
 }
-#modal .pt-dialog-header{
+#lightModal .pt-dialog-header{
     background: #394b59
 }
-#modal .pt-dialog>.pt-dialog-body>div{
+#lightModal .pt-dialog>.pt-dialog-body>div{
     margin:10px 0;
     text-align: right;
 }
-#modal .pt-dialog-body .twoCol>label{
+#lightModal .pt-dialog-body .twoCol>label{
     display: inline-block;
     width: 20%;
     vertical-align: super;
     text-align: left;
 }
-#modal .pt-dialog-body .twoCol>input{
+#lightModal .pt-dialog-body .twoCol>input{
     vertical-align: super;
     width: 75%;
 }
 
-#modal ul{
+#lightModal ul{
     display: inline-block;
     list-style: none;
     padding-left: 0;
     width: 75%;
     margin: 0;
 }
-#modal li{
+#lightModal li{
     display: inline-block;
     width: 33.3333%
 }
+
+/**************板件模态框样式*************/
+.boardRadio{
+    display: flex;
+    justify-content: flex-start;
+}
+.boardRadio>label{
+    margin-right: 10px;
+}
+#behindBr .flexWrap>div{
+    width: 50%;
+    line-height: 15px;
+}
+#behindBr .flexWrap>div{
+    width: 50%;
+    line-height: 30px;
+}
+#behindBr .flexWrap>div .pt-input{
+    padding:0 0 0 5px;
+    width: 60px; 
+}
+#behindBr .boardModel{
+    display: inline-block;
+    width: 35px;
+    height: 50px;
+    border: 1px solid #000;
+    vertical-align: middle;
+    margin: 10px;
+}
+#behindBr .boardSize .pt-label{
+    display: inline-block;
+    margin: 0 5px;
+}
+#behindBr .boardSize .pt-inline{
+    line-height: 15px;
+}
+
+#behindBr .flex>div:first-child{
+    width: 40%;
+}
+#behindBr .flex>div:last-child{
+    width: 60%;
+}
+#behindBr .boardSize .pt-label>.pt-input{
+    display: block;
+    padding: 0;
+    width: 50px;
+    padding-left: 5px;
+    line-height: 15px;
+}
+#behindBr .br-set{
+    margin-bottom: 10px;
+}

src/UI/Components/Modal/ModalsManage.tsx

@@ -24,6 +24,7 @@ export class ModalManage
         this.m_ed = ed;
         this.m_ModalContainer = document.createElement("div");
         this.m_ModalContainer.id = "modal";
+
         document.getElementById("Webgl").parentNode.appendChild(this.m_ModalContainer);
         this.RegisterEvent();
     }
@@ -47,6 +48,9 @@ export class ModalManage
         ReactDOM.render(
             <BoardModal type={type} store={store} />,
             this.m_ModalContainer);
+        this.m_ModalContainer.style.left = "33%";
+        this.m_ModalContainer.style.top = "10%";
+        this.UpdateModalPosition();
     }
     OnMouseDbClick()
     {
@@ -61,8 +65,14 @@ export class ModalManage
                     clear={this.Clear}
                     update={this.UpdateView} />,
                 this.m_ModalContainer)
+            //设置初始位置
+            this.m_ModalContainer.style.right = "0";
+            this.m_ModalContainer.style.top = "40px";
+            this.m_ModalContainer.style.width = "300px";
+
             this.UpdateModalPosition()
-        } else if (en && en.userData instanceof Text)
+        }
+        else if (en && en.userData instanceof Text)
         {
             en.userData.toggleTextArea();
         }
@@ -75,42 +85,40 @@ export class ModalManage
         let modalY;
         //底部面板高度
         let downHeight = document.getElementById("DownPanel").offsetHeight;
-        let dragArea = document.getElementById("dragArea");
+        let dragArea = document.querySelector('#modal [data-id=dragArea]') as HTMLElement;
         if (!dragArea) return;
+
         dragArea.onmousedown = (e) =>
         {
-            dragArea.onmousedown = (e) =>
+            //命令栏高度
+            let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
+            //底部边界
+            let maxBottom = window.innerHeight - commandHeight - modal.offsetHeight + downHeight;
+            modalX = e.clientX - modal.offsetLeft;
+            modalY = e.clientY - modal.offsetTop;
+            modal.style.cursor = "move";
+            document.onmousemove = (e) =>
             {
-                //命令栏高度
+                let moveX = e.clientX - modalX;
-                let commandHeight = document.getElementsByClassName("lm_item lm_row")[0].clientHeight;
+                if (moveX < 0) moveX = 0;
-                //底部边界
+                else if
-                let maxBottom = window.innerHeight - commandHeight - modal.offsetHeight + downHeight;
+                (moveX > window.innerWidth - modal.offsetWidth) moveX = window.innerWidth - modal.offsetWidth;
-                modalX = e.clientX - modal.offsetLeft;
-                modalY = e.clientY - modal.offsetTop;
-                modal.style.cursor = "move";
-                document.onmousemove = (e) =>
-                {
-                    let moveX = e.clientX - modalX;
-                    if (moveX < 0) moveX = 0;
-                    else if
-                    (moveX > window.innerWidth - modal.offsetWidth) moveX = window.innerWidth - modal.offsetWidth;
 
-                    let moveY = e.clientY - modalY;
+                let moveY = e.clientY - modalY;
-                    if (moveY < 40) moveY = 40;
+                if (moveY < 40) moveY = 40;
-                    else if (moveY > maxBottom) moveY = maxBottom;
+                else if (moveY > maxBottom) moveY = maxBottom;
 
-                    modal.style.left = moveX + "px";
+                modal.style.left = moveX + "px";
-                    modal.style.top = moveY + "px";
+                modal.style.top = moveY + "px";
-                    modalX = e.clientX - modal.offsetLeft;
+                modalX = e.clientX - modal.offsetLeft;
-                    modalY = e.clientY - modal.offsetTop;
+                modalY = e.clientY - modal.offsetTop;
-                }
-            }
-            document.onmouseup = (e) =>
-            {
-                modal.style.cursor = "default";
-                document.onmousemove = null;
             }
         }
+        document.onmouseup = (e) =>
+        {
+            modal.style.cursor = "default";
+            document.onmousemove = null;
+        }
     }
     UpdateView()
     {
@@ -120,5 +128,11 @@ export class ModalManage
     {
         app.m_Editor.m_ModalManage.m_SelectedObj = null;
         ReactDOM.unmountComponentAtNode(app.m_Editor.m_ModalManage.m_ModalContainer);
+        let dragArea = document.querySelector('#modal [data-id=dragArea]') as HTMLElement;
+        if (dragArea)
+        {
+            dragArea.onmousedown = null;
+        }
+
     }
 }

src/UI/Css/style.less

@@ -395,58 +395,7 @@ input[type=radio] {
         height: 50px !important;
     }
 }
-/**************板件模态框样式*************/
-.boardRadio{
-    display: flex;
-    justify-content: flex-start;
-}
-.boardRadio>label{
-    margin-right: 10px;
-}
-#behindBr .flexWrap>div{
-    width: 50%;
-    line-height: 15px;
-}
-#behindBr .flexWrap>div{
-    width: 50%;
-    line-height: 30px;
-}
-#behindBr .flexWrap>div .pt-input{
-    padding:0 0 0 5px;
-    width: 60px; 
-}
-#behindBr .boardModel{
-    display: inline-block;
-    width: 35px;
-    height: 50px;
-    border: 1px solid #000;
-    vertical-align: middle;
-    margin: 10px;
-}
-#behindBr .boardSize .pt-label{
-    display: inline-block;
-    margin: 0 5px;
-}
-#behindBr .boardSize .pt-inline{
-    line-height: 15px;
-}
 
-#behindBr .flex>div:first-child{
-    width: 40%;
-}
-#behindBr .flex>div:last-child{
-    width: 60%;
-}
-#behindBr .boardSize .pt-label>.pt-input{
-    display: block;
-    padding: 0;
-    width: 50px;
-    padding-left: 5px;
-    line-height: 15px;
-}
-#behindBr .br-set{
-    margin-bottom: 10px;
-}
 
 /**********自定义通用样式*****************/
 

src/UI/Store/BoardStore.ts

@@ -138,7 +138,6 @@ export class BehindBoardStore extends BoardStore
         boardPosition: BehindHeightPositon.AllHeight,
         height: "H",
         moveDist: "0",
-        isTotalHeight: true,
         boardRelative: BehindRelativePositon.ForBack,
         spaceWidth: "100",
         count: "1"