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

!279 按需求修改命令的布局规划

Browse Source 
Merge pull request !279 from 肖诗雅/layout_update
pull/279/MERGE
肖诗雅 6 years ago committed by ChenX
parent a9ff432cb4
commit dbe5d2f03c
12 changed files with 125 additions and 62 deletions
Show Stats Download Patch File Download Diff File

2
src/Editor/UCSServices.ts
Unescape View File

@ -58,6 +58,6 @@ export function MatrixToPreViewMat(mat: Matrix4, view: Viewer, obj: Object3D)
//坐标系显示在坐标系原点的位置.
// obj.position.copy(p);
//坐标系显示在左下角
obj.position.set(-view.Width / 2 + 130, -view.Height / 2 + 130, 0);
obj.position.set(-view.Width / 2 + 180, -view.Height / 2 + 130, 0);
obj.quaternion.setFromRotationMatrix(tempMat);
}

2
src/UI/Components/CameraControlButton/CameraControlBtn.tsx
Unescape View File

@ -54,7 +54,7 @@ let viewData: IViewData[] = [
export class CameraControlBtn extends React.Component<{}, {}>
{
@observable private m_isMenuShow: number = -1;
@observable private m_ViewMenuTitle: string = "俯视";
@observable private m_ViewMenuTitle: string = "西南等轴测";
@observable private m_VisualStyleMenuTitle: string = "二维线框";
@observable private m_CameraType: string = "平行";
@observable private _RenderType: RenderType;

4
src/UI/Components/ToolBar/ToolbarContainer.tsx
Unescape View File

@ -37,13 +37,13 @@ export class ToolbarContainer extends React.Component<ToolbarProps, ToolBarState
let iconList: ICommandIconInfo[] = [
{ svg: IconEnum.Delete, title: "删除", command: "ERASE" },
{ svg: IconEnum.CopyClip, title: "复制", command: "COPYCLIP" },
{ svg: IconEnum.CopyClip, title: "复制", command: "COPY" },
{ svg: IconEnum.PasteClip, title: "粘贴", command: "PASTECLIP" },
{ svg: IconEnum.Move, title: "移动", command: "MOVE" },
{ svg: IconEnum.Offset, title: "偏移", command: "O" },
{ svg: IconEnum.Stretch, title: "拉伸", command: "S" },
{ svg: IconEnum.Zoom, title: "缩放", command: "SC" },
{ svg: IconEnum.Array, title: "阵列", command: "ARR" },
{ svg: IconEnum.Array, title: "阵列", command: "ARRAY" },
{ svg: IconEnum.Fillet, title: "倒角", command: "F" },
{ svg: IconEnum.Divide, title: "均分", command: "DIV" },
{ svg: IconEnum.Extend, title: "修剪", command: "TR" },

24
src/UI/Components/TopToolBar/DrawingPanel.tsx
Unescape View File

@ -11,10 +11,11 @@ export class DrawingPanel extends React.Component<{ store: ToolsBlockStore }, {}
const {
m_iconList: {
iconList_2D: iconList_2d,
iconList_3D: iconList_3d,
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">
@ -25,13 +26,6 @@ export class DrawingPanel extends React.Component<{ store: ToolsBlockStore }, {}
execFun={execFun}
btnTitile="二维绘图"
/>
<ToolsBlock
blockId={"3d"}
list={iconList_3d}
historyCmds={historyCmds}
execFun={execFun}
btnTitile="三维绘图"
/>
<ToolsBlock
blockId={"br_draw"}
list={iconList_br_draw}
@ -53,6 +47,20 @@ export class DrawingPanel extends React.Component<{ store: ToolsBlockStore }, {}
execFun={execFun}
btnTitile="标注"
/>
<ToolsBlock
blockId={"drill"}
list={iconlist_drill}
historyCmds={historyCmds}
execFun={execFun}
btnTitile="排钻"
/>
<ToolsBlock
blockId={"produce"}
list={iconlist_produce}
historyCmds={historyCmds}
execFun={execFun}
btnTitile="拆单生产"
/>
</div>
);
}

20
src/UI/Components/TopToolBar/OthersPanel.tsx → src/UI/Components/TopToolBar/RenderPanel.tsx
Unescape View File

@ -2,17 +2,15 @@ import React = require("react");
import { ToolsBlockStore, ToolsBlock } from "./ToolsBlock";
import { inject } from "mobx-react";
//其他 命令块
//渲染 命令块 主要包括灯光
inject("store")
export class OthersPanel extends React.Component<{ store: ToolsBlockStore }, {}>
export class RenderPanel extends React.Component<{ store: ToolsBlockStore }, {}>
{
render()
{
const {
m_iconList: {
iconList_LIGHT: iconList_light,
iconList_DRILL: iconlist_drill,
iconList_VIEW: iconlist_view,
}, historyCmds, execFun } = this.props.store;
return (
<div className="tool-block">
@ -23,20 +21,6 @@ export class OthersPanel extends React.Component<{ store: ToolsBlockStore }, {}>
execFun={execFun}
btnTitile="灯光"
/>
<ToolsBlock
blockId={"drill"}
list={iconlist_drill}
historyCmds={historyCmds}
execFun={execFun}
btnTitile="排钻"
/>
<ToolsBlock
blockId={"view"}
list={iconlist_view}
historyCmds={historyCmds}
execFun={execFun}
btnTitile="视图"
/>
</div>
);
}

27
src/UI/Components/TopToolBar/ThreeDEntityPanel.tsx
Unescape View File

@ -0,0 +1,27 @@
import React = require("react");
import { ToolsBlockStore, ToolsBlock } from "./ToolsBlock";
import { inject } from "mobx-react";
//三维实体绘图 命令块
inject("store")
export class ThreeDEntityPanel extends React.Component<{ store: ToolsBlockStore }, {}>
{
render()
{
const {
m_iconList: {
iconList_3D: iconList_3d,
}, historyCmds, execFun } = this.props.store;
return (
<div className="tool-block">
<ToolsBlock
blockId={"3d"}
list={iconList_3d}
historyCmds={historyCmds}
execFun={execFun}
btnTitile="三维实体绘图"
/>
</div>
);
}
}

26
src/UI/Components/TopToolBar/ToolsBlock.tsx
Unescape View File

@ -23,6 +23,7 @@ export interface ToolsBlockOption
iconList_LIGHT: ICommandIconInfo[];
iconList_DRILL: ICommandIconInfo[];
iconList_VIEW: ICommandIconInfo[];
iconList_PRODUCE: ICommandIconInfo[];
}
export class ToolsBlockStore extends Singleton
@ -37,6 +38,7 @@ export class ToolsBlockStore extends Singleton
iconList_LIGHT: [],
iconList_DRILL: [],
iconList_VIEW: [],
iconList_PRODUCE: [],
}
historyCmds: string[] = app.m_Editor.m_CommandStore.historyCmdList;
}
@ -78,9 +80,9 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
checkWidth = () =>
{
const { list } = this.props;
const matchMost = window.matchMedia(`(max-width: 760px)`);
const matchMore = window.matchMedia(`(max-width: 1200px )`);
const matchLittle = window.matchMedia(`(max-width: 1700px )`);
const matchMost = window.matchMedia(`(max-width: 910px)`);
const matchMore = window.matchMedia(`(max-width: 1350px )`);
const matchLittle = window.matchMedia(`(max-width: 1845px )`);
if (matchMost.matches)
{
this.setState({ isCollapse: CollapaseType.Most });
@ -102,8 +104,8 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
else
{
this.setState({ isCollapse: CollapaseType.None });
this.list_main = list.slice(1, 10);
this.list_small = list.slice(10);
this.list_main = list.slice(1, 8);
this.list_small = list.slice(8);
}
};
componentDidMount()
@ -141,7 +143,7 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
historyCmds.push(first.command);
execFun(first.command);
}}>
<img src={`${ICON_CDN}/${first.svg}`} alt={first.title} />{/**如果cmd.svg为空呢 */}
<img src={`${ICON_CDN}/${first.svg}`} />{/**如果cmd.svg为空呢 */}
<p>{first.title}</p>
</li>
}
@ -151,12 +153,12 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
this.list_main.map((cmd, index) =>
{
return (
<li key={index} title={cmd.command} style={{}} onClick={() =>
<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}`} alt={cmd.title} />
<img src={`${ICON_CDN}/${cmd.svg}`} />
<p>{cmd.title}</p>
</li>
)
@ -178,12 +180,12 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
this.list_main.map((cmd, index) =>
{
return (
<li key={index} title={cmd.command} style={{}} onClick={() =>
<li key={index} title={cmd.title} style={{}} onClick={() =>
{
historyCmds.push(cmd.command);
execFun(cmd.command);
}}>
<img src={`${ICON_CDN}/${cmd.svg}`} alt={cmd.title} />
<img src={`${ICON_CDN}/${cmd.svg}`} />
{!this.state.Collapse ? <p>{cmd.title}</p> : null}
</li>
)
@ -195,14 +197,14 @@ export class ToolsBlock extends React.Component<ToolsBlockProps, {}>
this.list_small.map((cmd, index) =>
{
return (
<li key={index} title={cmd.command} style={{}} onClick={() =>
<li key={index} title={cmd.title} style={{}} onClick={() =>
{
historyCmds.push(cmd.command);
execFun(cmd.command);
this.isExtendShow = false;
app.m_Editor.m_MaskManage.Clear();
}}>
<img src={`${ICON_CDN}/${cmd.svg}`} alt={cmd.title} />
<img src={`${ICON_CDN}/${cmd.svg}`} />
</li>
)
}) : null

24
src/UI/Components/TopToolBar/TopToolBar.tsx
Unescape View File

@ -5,7 +5,9 @@ import { observer } from "mobx-react";
import { IconEnum } from "../../IconEnum";
import { DrawingPanel } from "./DrawingPanel";
import { ToolsBlockStore } from "./ToolsBlock";
import { OthersPanel } from "./OthersPanel";
import { RenderPanel } from "./RenderPanel";
import { ThreeDEntityPanel } from "./ThreeDEntityPanel"
import { ViewPanel } from "./ViewPanel"
interface TopToolBarProps
{
historyCmds: string[]
@ -44,7 +46,8 @@ export class TopToolBar extends React.Component<TopToolBarProps, {}>
{ svg: IconEnum.LB, title: "立板", command: "LB" },
{ svg: IconEnum.CB, title: "层板", command: "CB" },
{ svg: IconEnum.SKT, title: "收口条", command: "SKT" },
{ svg: IconEnum.YX, title: "异形板", command: "YX" },//即将补充：酒格
{ svg: IconEnum.YX, title: "异形板", command: "YX" },
{ svg: IconEnum.WineRack, title: "酒格", command: "DRAWWINERACK" },
{ svg: IconEnum.Door, title: "门板", command: "DOOR" },
{ svg: IconEnum.Drawer, title: "抽屉", command: "DRAWER" },
]
@ -52,15 +55,18 @@ export class TopToolBar extends React.Component<TopToolBarProps, {}>
{ svg: IconEnum.QG, title: "线性切割", command: "QG" },
{ svg: IconEnum.QG2, title: "板件相切", command: "QG2" },
{ svg: IconEnum.QG4, title: "参照切割", command: "QG4" },
{ svg: IconEnum.Join, title: "板件合并", command: "JOIN" },
{ svg: IconEnum.ObliqueCB, title: "斜层板", command: "ROTATELYBR" },
{ svg: IconEnum.Retraction, title: "批量内缩", command: "" },
{ svg: IconEnum.BoardFindModify, title: "查找修改", command: "BOARDFINDMODIFY" },
{ svg: IconEnum.zJoin, title: "z向合并", command: "JOIN" },
]
store.m_iconList.iconList_DIM = [
{ svg: IconEnum.DimALigned, title: "线性标注", command: "DAL" },
{ svg: IconEnum.DimLinear, title: "基线标注", command: "DLI" },
{ svg: IconEnum.DimAngle, title: "角度标注", command: "DAN" },
{ svg: IconEnum.DimContinued, title: "连续标注", command: "DCO" },
{ svg: IconEnum.Circle, title: "半径标注", command: "DIMRAD" },
{ svg: IconEnum.Length, title: "直径标注", command: "DIMDIA" },
]
store.m_iconList.iconList_LIGHT = [
{ svg: IconEnum.SpotLamp, title: "射灯", command: "SL" },
@ -74,13 +80,18 @@ export class TopToolBar extends React.Component<TopToolBarProps, {}>
{ svg: IconEnum.DrillConfig, title: "排钻配置", command: "DRILLCONFIG" },
]
store.m_iconList.iconList_VIEW = [
{ svg: IconEnum.UCS, title: "UCS", command: "SL" },
{ 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.RightView, title: "右视图", command: "YS" },
{ svg: IconEnum.Camera, title: "相机模式", command: "CC" },
]
store.m_iconList.iconList_PRODUCE = [
{ svg: IconEnum.BoardFindModify, title: "拆单", command: "" },
{ svg: IconEnum.BoardFindModify, title: "报价", command: "" },
{ svg: IconEnum.BoardFindModify, title: "ERP", command: "" },
]
return (
<Tabs
id="TopToolBar"
@ -90,8 +101,9 @@ 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="拆单生产" />
<Tab className="tab-unstyle" id="other" title="其他" panel={<OthersPanel store={store as ToolsBlockStore} />} />
<Tab className="tab-unstyle" id="produce" title="三维实体绘图" panel={<ThreeDEntityPanel 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>
);
}

27
src/UI/Components/TopToolBar/ViewPanel.tsx
Unescape View File

@ -0,0 +1,27 @@
import React = require("react");
import { ToolsBlockStore, ToolsBlock } from "./ToolsBlock";
import { inject } from "mobx-react";
//渲染 命令块 主要包括灯光
inject("store")
export class ViewPanel extends React.Component<{ store: ToolsBlockStore }, {}>
{
render()
{
const {
m_iconList: {
iconList_VIEW: iconlist_view,
}, historyCmds, execFun } = this.props.store;
return (
<div className="tool-block">
<ToolsBlock
blockId={"view"}
list={iconlist_view}
historyCmds={historyCmds}
execFun={execFun}
btnTitile="视图"
/>
</div>
);
}
}

5
src/UI/Css/blue.less
Unescape View File

@ -18,7 +18,10 @@
#bp3-tab-panel_Tabs_fl li[id]{
margin-right: 0;
}
//鼠标移到disable按钮上时 不要变成notallow
.bp3-button:not([class*="bp3-intent-"]):disabled, .bp3-button:not([class*="bp3-intent-"]).bp3-disabled{
cursor: default;
}
/****************文件资源管理器*********************/
#bp3-tab-panel_Tabs_fl li[id] input{

23
src/UI/Css/style.less
Unescape View File

@ -455,7 +455,6 @@ input[type=radio] {
}
//分类工具块
#TopToolBar .tool-block{
width: 480px;
display: flex;
flex-direction: row;
&>div{
@ -507,7 +506,7 @@ input[type=radio] {
#TopToolBar .small-iconlist
{
position: absolute;
width: 500px;//todo：更好的适应方式
width: 435px;//todo：更好的适应方式
// width: 100%;
margin-top: 55px;
display: flex;
@ -534,34 +533,34 @@ input[type=radio] {
padding: 0;
border-radius: 0px;
background: #2d3a46;
width: 500px;//todo：更好的适应方式
width: 435px;//todo：更好的适应方式
&:hover{
background: #202b33;
}
}
}
// 媒体查询
@media screen and (max-width: 1700px) {//当宽度为1700或者更小时
@media screen and (max-width: 1845px) {//当宽度为1700或者更小时
#TopToolBar .small-iconlist {
width: 350px;
width: 270px;
&>.bp3-button{
width: 350px;
width: 270px;
}
}
}
@media screen and (max-width: 1200px) {
@media screen and (max-width: 1350px) {
#TopToolBar .small-iconlist {
width: 250px;
width: 160px;
&>.bp3-button{
width: 250px;
width: 160px;
}
}
}
@media screen and (max-width: 760px) {
@media screen and (max-width: 910px) {
#TopToolBar .small-iconlist {
width: 150px;
width: 100px;
&>.bp3-button{
width: 150px;
width: 100px;
}
}
}

3
src/UI/IconEnum.ts
Unescape View File

@ -94,5 +94,6 @@ export enum IconEnum
BottomView = 'UI细-61.svg',
FrontView = 'UI细-62.svg',
LeftView = 'UI细-63.svg',
RightView = 'UI细-84.svg'
RightView = 'UI细-84.svg',
Retraction = 'UI细-95.svg',
}

Write Preview
Loading…
Cancel
Save