!52 添加工具栏UI组件

Merge pull request !52 from ZoeLeeFZ/br_UI

src/Editor/GetPointServices.ts

@@ -404,8 +404,9 @@ export class GetDistanceServices
     {
         this.removeCalls.forEach(f => f());
 
-        let res = new PromptDistendResult();
-        if (!v)
+        let res = new PromptDistendResult()
+        //有可能输入0,!0也是false
+        if (v === undefined)
         {
             res.Status = PromptStatus.Cancel;
         }

src/UI/Components/Panel.tsx

@@ -3,6 +3,7 @@ import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 
 import { DownPanelStore } from '../Store/DownPanelStore';
+import { SettingPanel } from './SettingPanel/SettingPanel';
 import Login from './signComponent/login';
 import SoucePanel from './SourceManage/SoucePanel';
 
@@ -15,9 +16,8 @@ const panelStyle: React.CSSProperties = {
 interface TopPanelState
 {
     isLogin: boolean,//是否登录
-    isOpen: boolean,//是否打开资源面板
-    toLogin: boolean, //前往登录
     isCollapse: boolean;
+    panelType: string;
 }
 //顶部标题栏.
 //TODO:Ajax请求，获得登录状态
@@ -29,18 +29,18 @@ export class TopPanel extends React.Component<{}, {}>
         super(props);
         this.state = {
             isLogin: true,
-            isOpen: false,
-            toLogin: false,
-            isCollapse: false
+            isCollapse: false,
+            panelType: ""
         }
     }
-    handleClick = () =>
+    handleClick = (str) =>
     {
-        this.setState({ isOpen: true })
+        if (this.state.panelType === str) str = "";
+        this.setState({ panelType: str })
     }
     handleCancel = () =>
     {
-        this.setState({ toLogin: false, isOpen: false });
+        this.setState({ panelType: "" });
     }
 
     render()
@@ -83,7 +83,7 @@ export class TopPanel extends React.Component<{}, {}>
                             </ button >
                             <button
                                 className="pt-button pt-minimal pt-icon-document"
-                                onClick={this.handleClick}
+                                onClick={() => this.handleClick("file")}
                             >
                                 <span className="hidden">
                                     文件
@@ -94,7 +94,7 @@ export class TopPanel extends React.Component<{}, {}>
                             < button className="pt-button pt-minimal pt-icon-user" />
                             <span></span>
                             < button className="pt-button pt-minimal pt-icon-notifications" />
-                            < button className="pt-button pt-minimal pt-icon-cog" onClick={this.handleClick} />
+                            < button className="pt-button pt-minimal pt-icon-cog" onClick={() => this.handleClick('setting')} />
                         </div> :
                         <div className="pt-navbar-group pt-align-right info" >
                             < button className="pt-button pt-minimal pt-icon-home" > 主页 </ button >
@@ -103,19 +103,23 @@ export class TopPanel extends React.Component<{}, {}>
                                 className="pt-button pt-minimal"
                                 onClick={() =>
                                 {
-                                    this.setState({ toLogin: true })
+                                    this.setState({ panelType: "login" })
                                 }}
                             >登陆</button>
                             <button className="pt-button pt-minimal">免费注册</button>
                         </div>
                 }
+                <SettingPanel
+                    handleClose={this.handleCancel}
+                    isOpen={this.state.panelType === 'setting'}
+                />
                 <Login
                     toggleDialog={this.handleCancel}
-                    toLogin={this.state.toLogin}
+                    toLogin={this.state.panelType === 'login'}
                 />
                 <SoucePanel
                     handleClose={this.handleCancel}
-                    isOpen={this.state.isOpen}
+                    isOpen={this.state.panelType === 'file'}
                 />
             </ nav>
         );
@@ -133,12 +137,21 @@ export class DownPanel extends React.Component<{ store?: DownPanelStore }, {}>
     }
     render()
     {
-        return (<div style={{ color: "#fff" }}>
-            {this.props.store.m_MousePostionPrompt}
-            <Switch
-                checked={this.props.store.useDynInput}
-                label="动态输入" onChange={this.handlePublicChange}
-                style={{ float: "right", marginRight: "10px" }} className="pt-align-right" />
-        </div>)
+        return (
+            <div style={{ color: "#fff" }}>
+                {this.props.store.m_MousePostionPrompt}
+                <Switch
+                    checked={this.props.store.useDynInput}
+                    label="动态输入" onChange={this.handlePublicChange}
+                    style={{ float: "right", marginRight: "10px" }} className="pt-align-right" />
+                <Switch
+                    checked={this.props.store.showToolBar}
+                    label="工具栏" onChange={(e) =>
+                    {
+                        this.props.store.showToolBar = e.currentTarget.checked;
+                        e.currentTarget.blur();
+                    }}
+                    style={{ float: "right", marginRight: "10px" }} className="pt-align-right" />
+            </div>)
     }
 }

src/UI/Components/SettingPanel/SettingPanel.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export interface SettingPanelProps
+{
+    handleClose: Function,
+    isOpen: boolean
+}
+
+export interface SettingPanelState
+{
+}
+
+export class SettingPanel extends React.Component<SettingPanelProps, SettingPanelState> {
+    constructor(props: SettingPanelProps)
+    {
+        super(props);
+
+        this.state = {
+        }
+    }
+
+    render()
+    {
+        let mainStyle: React.CSSProperties = {
+            width: 100,
+            height: 480,
+            position: "fixed",
+            right: 0,
+            top: 70
+        }
+        return (
+            <div style={Object.assign({}, mainStyle, { display: this.props.isOpen ? "block" : "none" })}>
+            //TODO:需要设置的内容,界面主题颜色
+            </div>
+        );
+    }
+}

src/UI/Components/SourceManage/FileItem.tsx

@@ -38,7 +38,7 @@ export class FileItem extends React.Component<FileItemProps, FileItemState>{
             fontWeight: "bold"
         }
         const imgStyle: React.CSSProperties = {
-            filter: "invert(91%)  grayscale(93%) sepia(50%)"
+            filter: "invert(100%) saturate(100%)"
         }
         return (
             <li
@@ -55,8 +55,8 @@ export class FileItem extends React.Component<FileItemProps, FileItemState>{
                         width: 120,
                         height: 120,
                         overflow: "hidden",
-                        padding: "8px",
-                        background: "#444444"
+                        padding: "8px"
+                        // background: "#444444"
                     }}
                 >
                     <img src={fileInfo.pic} style={imgStyle} />

src/UI/Components/SourceManage/SourceManage.tsx

@@ -26,13 +26,6 @@ export class SourceManage extends React.Component<SourceManageProps, SourceManag
     }
     componentDidMount()
     {
-        let test = this.state.libs;
-        for (let i = 1; i <= 100; i++)
-        {
-            test.push("../textures/017.jpg");
-        }
-
-        this.setState({ libs: test });
     }
     render()
     {

src/UI/Components/ToolBar/ToolBar.tsx

@@ -0,0 +1,62 @@
+import { autorun } from 'mobx';
+import * as React from 'react';
+
+import { DownPanelStore } from '../../Store/DownPanelStore';
+
+export interface ToolBarProps
+{
+    execFun: Function,
+    cmdList: string[],
+    iconIndexList: number[],
+    iconUrl: string,
+}
+export interface ToolBarState
+{
+    isShow: boolean
+}
+export class ToolBar extends React.Component<ToolBarProps, ToolBarState> {
+    constructor(props: ToolBarProps)
+    {
+        super(props);
+        this.state = {
+            isShow: true
+        }
+    }
+    componentDidMount()
+    {
+        autorun(() =>
+        {
+            this.setState({ isShow: DownPanelStore.Store().showToolBar });
+        })
+    }
+    render()
+    {
+        let bgImgStyle: React.CSSProperties = {
+            backgroundImage: `url(${this.props.iconUrl})`,
+            backgroundRepeat: 'no-repeat',
+            width: 22,
+            height: 22
+        }
+        let iconIndexList = this.props.iconIndexList;
+        let cmdList = this.props.cmdList;
+        return (
+            <ul className="ul-unstyle" style={{ display: this.state.isShow ? "block" : 'none', background: "#394b59" }}>
+                {
+                    cmdList.map((cmd, index) =>
+                    {
+                        return (
+                            <li key={index} title={cmd}>
+                                <button
+                                    style={Object.assign({}, bgImgStyle,
+                                        { bgImgStyle, backgroundPosition: `-3px ${-22 * iconIndexList[index]}px` }
+                                    )}
+                                    onClick={() => this.props.execFun(cmd)}
+                                >
+                                </button>
+                            </li>)
+                    })
+                }
+            </ul>
+        );
+    }
+}

src/UI/Css/style.less

@@ -362,6 +362,11 @@ input[type=radio] {
 #TopPanel .info {
     margin: 0;
 }
+// 工具栏样式
+#toolbar ul>li{
+    margin: 0;
+    padding: 0;
+}
 
 // 媒体查询
 @media screen and (max-width: 599px) {
@@ -419,7 +424,7 @@ div {
     padding: 0;
 }
 
-.ul-unstyle>li {
+.pt-portal .ul-unstyle>li {
     display: inline-block;
     margin-right: 12px;
 }
@@ -436,7 +441,3 @@ img {
 .button-marign {
     margin-right: 10px;
 }
-/*修改黄金布局框架源码样式*/
-#app .lm_content{
-    overflow: unset;
-}

src/UI/Layout/ApplicationLayout.tsx

@@ -18,6 +18,7 @@ import { AppLayoutKey, applicationLayoutConfig } from './ApplicationLayout.confi
 import { ContainerComponenName, LayoutRegisterContainerComponent } from './LayoutUtils';
 import { MaterialEditorLayout } from './MaterialEditorLayout';
 import { SourceManage } from '../Components/SourceManage/SourceManage';
+import { ToolBar } from '../Components/ToolBar/ToolBar';
 
 export let appUi: WebCAD;
 
@@ -52,6 +53,7 @@ export class WebCAD
 
         this.renderMaterialExplore();
 
+        this.renderToolBar();
         this.initWebSocket();
 
         appUi = this;
@@ -95,6 +97,7 @@ export class WebCAD
         library.id = "library";
         document.body.appendChild(library);
 
+
         return content;
     }
 
@@ -164,6 +167,41 @@ export class WebCAD
             <SourceManage />, libraryEl
         )
     }
+    renderToolBar()
+    {
+        let toolbarEl = document.createElement("div");
+        toolbarEl.id = "toolbar";
+        toolbarEl.style.cssText = `
+            position: absolute;
+            top: 0;
+            left: 0;
+            background:#394b59;
+            height: 100%
+        `;
+        document.getElementById("Webgl").appendChild(toolbarEl);
+        let drawCmdList = ['L', 'PL', 'RECT', 'A', 'C', 'EL', 'REG', 'TEXT'];
+        let drawIconIndexList = [0, 2, 4, 5, 6, 9, 16, 18];
+        let modifyCmdList = ['E', 'COPY', 'O', 'ARRAY', 'M', 'RO', 'S', 'TR', 'EX', 'F', 'X'];
+        let modifyIconIndexList = [0, 1, 3, 4, 5, 6, 8, 9, 10, 14, 16];
+
+        ReactDOM.render(
+            <div>
+                <ToolBar
+                    execFun={app.m_Editor.m_CommandStore.HandleInput}
+                    cmdList={drawCmdList}
+                    iconIndexList={drawIconIndexList}
+                    iconUrl='textures/drawbarIcon.jpg'
+                />
+                <ToolBar
+                    execFun={app.m_Editor.m_CommandStore.HandleInput}
+                    cmdList={modifyCmdList}
+                    iconIndexList={modifyIconIndexList}
+                    iconUrl='textures/modifybarIcon.jpg'
+                />
+            </div>
+            , toolbarEl
+        )
+    }
     //材质浏览器
     renderMaterialExplore()
     {

src/UI/Store/DownPanelStore.ts

@@ -24,6 +24,7 @@ export class DownPanelStore
 {
     @observable m_MousePostionPrompt: string;
     @observable useDynInput: boolean = true;
+    @observable showToolBar: boolean = true;
     private constructor()
     {
         xaop.begin(app.m_Editor.m_MouseCtrl, app.m_Editor.m_MouseCtrl.updateWordPoint, () =>
@@ -38,4 +39,4 @@ export class DownPanelStore
         if (!this._store) this._store = new DownPanelStore();
         return this._store;
     }
-}
+}