diff --git a/src/Add-on/DrawBoard/DrawBehindBoard.ts b/src/Add-on/DrawBoard/DrawBehindBoard.ts index caad8cf28..b5e07a9f1 100644 --- a/src/Add-on/DrawBoard/DrawBehindBoard.ts +++ b/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; //判断背板位置,更新背板高度 diff --git a/src/UI/Components/Board/BehindBoardModal.tsx b/src/UI/Components/Board/BehindBoardModal.tsx index 28734a727..a1fd6ba9c 100644 --- a/src/UI/Components/Board/BehindBoardModal.tsx +++ b/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
加工数据
-
- { - Array.from(this.m_ScaleParameter.keys()).map(k => - { - return ( -
- {this.m_ScaleParameter.get(k)}: - - { - store.m_BoardOption[k] = e.target.value; - }} - dir="auto" /> -
- ) - }) - } -
+
板件尺寸
- +
- + - +
- +
@@ -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.isTotalHeight = true; + store.m_BoardOption.height = "0" + 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
@@ -127,22 +114,11 @@ export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore -
- { - Array.from(this.m_PosParameter.keys()).map(k => - { - return ( - - ) - }) - } -
+
diff --git a/src/UI/Components/Board/BoardCommon.tsx b/src/UI/Components/Board/BoardCommon.tsx index 644bface1..0ab1a7251 100644 --- a/src/UI/Components/Board/BoardCommon.tsx +++ b/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 }) =>
{title}: { - behindBoardOption[k] = e.target.value; + opt[k] = e.target.value; }} />
); //设置板件数据组件 -export const SetBoardDataItem2 = observer(({ k, m_BoardOption, title }) => +export const SetBoardDataItem2 = observer(({ k, opt, title }) => ); +export const SetBoardDataBlock = observer(({ pars, opt, className }) => +
+ { + Array.from(pars.keys()).map(k => + + ) + } +
+); + export const BoardModel = () => { return ( diff --git a/src/UI/Components/Board/BoardModal.tsx b/src/UI/Components/Board/BoardModal.tsx index 6bf3be6ee..6f521359d 100644 --- a/src/UI/Components/Board/BoardModal.tsx +++ b/src/UI/Components/Board/BoardModal.tsx @@ -32,37 +32,34 @@ interface BoardModalProps store: BoardStore } -export class BoardModal extends React.Component { - private m_ModalMap: Map; - constructor(props) - { - super(props); - let store = this.props.store; - this.m_ModalMap = new Map([ - [BoardModalType.LR, ], - [BoardModalType.TB, ], - [BoardModalType.Be, ], - [BoardModalType.Ly, ], - [BoardModalType.Ve, ], - ]) - } - render() - { - let store = this.props.store; - return ( - 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, ], + [BoardModalType.TB, ], + [BoardModalType.Be, ], + [BoardModalType.Ly, ], + [BoardModalType.Ve, ], + ]) + return ( +
e.stopPropagation()} > +
+
+ +
{store.title}
+ +
@@ -71,10 +68,9 @@ export class BoardModal extends React.Component { } }> { - this.m_ModalMap.get(this.props.type) + m_ModalMap.get(props.type as BoardModalType) }
-
- - ); - } -} - -export class BoardModal1 extends React.Component { - - private m_ModalMap: Map; - constructor(props) - { - super(props); - let store = this.props.store; - this.m_ModalMap = new Map([ - [BoardModalType.LR, ], - [BoardModalType.TB, ], - [BoardModalType.Be, ], - [BoardModalType.Ly, ], - [BoardModalType.Ve, ], - ]) - } - render() - { - let store = this.props.store; - - return ( -
e.stopPropagation()} > -
-
- -
store.title
- -
-
- { - e.stopPropagation(); - } - }> - { - this.m_ModalMap.get(this.props.type) - } -
-
-
-
-
-
- ); - } +
+ ); } - diff --git a/src/UI/Components/Board/leftRightBoardModal.tsx b/src/UI/Components/Board/leftRightBoardModal.tsx index 8f85f0d7a..c746e14ba 100644 --- a/src/UI/Components/Board/leftRightBoardModal.tsx +++ b/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 }) => ( -
- { - Array.from(props.store.m_Parameter.keys()).map(k => - - ) - } -
+ ))) diff --git a/src/UI/Components/Modal/LightModal.tsx b/src/UI/Components/Modal/LightModal.tsx index b30f044d8..d53dad40e 100644 --- a/src/UI/Components/Modal/LightModal.tsx +++ b/src/UI/Components/Modal/LightModal.tsx @@ -108,11 +108,11 @@ export class LightModal extends React.Component e.stopPropagation()} > +
e.stopPropagation()} >
灯光设置
diff --git a/src/UI/Components/Modal/Modal.css b/src/UI/Components/Modal/Modal.css index 44ed14806..90809b3c4 100644 --- a/src/UI/Components/Modal/Modal.css +++ b/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; +} diff --git a/src/UI/Components/Modal/ModalsManage.tsx b/src/UI/Components/Modal/ModalsManage.tsx index 3aeb6d4f1..3f8f03fae 100644 --- a/src/UI/Components/Modal/ModalsManage.tsx +++ b/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( , 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 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; - if (moveX < 0) moveX = 0; - else if - (moveX > window.innerWidth - modal.offsetWidth) moveX = window.innerWidth - modal.offsetWidth; + 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; - if (moveY < 40) moveY = 40; - else if (moveY > maxBottom) moveY = maxBottom; + let moveY = e.clientY - modalY; + if (moveY < 40) moveY = 40; + else if (moveY > maxBottom) moveY = maxBottom; - modal.style.left = moveX + "px"; - modal.style.top = moveY + "px"; - modalX = e.clientX - modal.offsetLeft; - modalY = e.clientY - modal.offsetTop; - } - } - document.onmouseup = (e) => - { - modal.style.cursor = "default"; - document.onmousemove = null; + modal.style.left = moveX + "px"; + modal.style.top = moveY + "px"; + modalX = e.clientX - modal.offsetLeft; + modalY = e.clientY - modal.offsetTop; } } + 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; + } + } } diff --git a/src/UI/Css/style.less b/src/UI/Css/style.less index e1ba5d2bf..d3cc39227 100644 --- a/src/UI/Css/style.less +++ b/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; -} /**********自定义通用样式*****************/ diff --git a/src/UI/Store/BoardStore.ts b/src/UI/Store/BoardStore.ts index b88f0d370..0ca26172a 100644 --- a/src/UI/Store/BoardStore.ts +++ b/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"