!250 选项面板

src/Add-on/Command_Option.ts

@@ -0,0 +1,13 @@
+import { Command } from "../Editor/CommandMachine";
+import { OptionModalStore, OptionModal } from "../UI/Components/Modal/OptionModal/OptionModal";
+import { app } from "../ApplicationServices/Application";
+import { ModalPosition } from "../UI/Components/Modal/ModalsManage";
+
+export class Command_Options implements Command
+{
+    async exec()
+    {
+        let OptionStore = OptionModalStore.GetInstance() as OptionModalStore;
+        app.m_Editor.m_ModalManage.RenderModal(OptionModal, ModalPosition.Center, { store: OptionStore });
+    }
+}

src/Editor/CommandRegister.ts

@@ -102,7 +102,7 @@ import { DrawDrawrer } from '../Add-on/DrawBoard/DrawDrawer';
 import { CommandFilletBoard } from '../Add-on/FilletBoard';
 import { ReferenceCutting } from '../Add-on/BoardCutting/ReferenceCutting';
 import { RotateLayerBoard } from '../Add-on/RotateLayerBoard';
-
+import { Command_Options } from '../Add-on/Command_Option';
 
 export function registerCommand()
 {
@@ -276,6 +276,8 @@ export function registerCommand()
 
     //命令面板
     commandMachine.RegisterCommand("comanp", new Command_CommandPanel());
+    //选项
+    commandMachine.RegisterCommand("config", new Command_Options())
 
     // commandMachine.RegisterCommand("st", new SaveTarget())
     // commandMachine.RegisterCommand("rt", new RevTarget())

src/Editor/InitRightMenu.ts

@@ -74,6 +74,7 @@ export async function InitRightMenu(type?: RightMenuType, kwlist?: KeyWord[], ne
             RightMenu.push(...[
                 { key: "U", msg: `放弃`, disable: command === "" },
                 { key: "Z", msg: `重做`, disable: command === "" },
+                { key: "O", msg: `选项` },
             ]);
         }
         return RightMenu;

src/Editor/MouseControls.ts

@@ -1,7 +1,6 @@
 import { Vector3 } from 'three';
 import { app } from '../ApplicationServices/Application';
 import { InputState } from '../Common/InputState';
-import { Singleton } from '../Common/Singleton';
 import { Viewer } from '../GraphicsSystem/Viewer';
 import { DbClickManager } from './DbClick/DbClick';
 import { Editor } from './Editor';
@@ -59,18 +58,28 @@ export class MouseControls
                 this.m_Ed.m_SelectCtrl.Cancel();
                 break;
             case "C"://复制
-
                 if (res.Parent === "最近的输入")
                     commandMachine.ExecCommand(res.StringResult);
                 else if (res.Parent === "剪贴板")
                     res.StringResult = "COPYCLIP";
+            case "O"://旋转 or 选项
+                if (app.m_Editor.m_SelectCtrl.SelectSet.SelectEntityList.length === 0)
+                {
+                    if (!CommandState.CommandIng)
+                    {
+                        document.getElementById('modal').focus();
+                        commandMachine.ExecCommand("CONFIG");
+                    }
+                    arrayRemoveOnce(historyCmdList, "CONFIG");
+                    historyCmdList.push("CONFIG");
+                    break;
+                }
             case "Z"://重做
             case "U"://放弃
             case "B"://带基点复制
             case "P"://粘贴
             case "DEL"://删除
             case "M"://移动
-            case "O"://旋转
             default:
                 let cmd: string = RightMenuCmdKW[res.StringResult] ? RightMenuCmdKW[res.StringResult] : res.StringResult;
                 if (commandMachine.isCommandExist(cmd))

src/UI/Components/Modal/ModalStyle/Modal.less

@@ -131,6 +131,7 @@
 @import (less) "EntityModal.less";
 @import (less) "CommandModal.less";
 @import (less) "SnapModal.less";
+@import (less) "OptionModal.less";
 @import (less) "../../RightPanel/RightPanel.less";
 @import (less) "./DoorModal.less";
 @import (less) "./ReferenceCuttingModal.less";

src/UI/Components/Modal/ModalStyle/OptionModal.less

@@ -0,0 +1,21 @@
+#optionModal
+{
+    width: 350px;
+    height: 430px;
+}
+#optionModal .bp3-dialog-body
+{
+    padding: 10px;
+    &>.bp3-card
+    {
+        padding: 10px;
+    }
+    &>.bp3-tabs .bp3-tab-panel
+    {
+        margin: 0;
+    }
+}
+#optionModal .bp3-dialog-footer
+{
+    justify-content: flex-end;
+}

src/UI/Components/Modal/OptionModal/DisplayPanel.tsx

@@ -0,0 +1,69 @@
+import React = require("react");
+import { Card, H5, Popover, Classes, Button } from "@blueprintjs/core";
+import { app } from "../../../../ApplicationServices/Application";
+import { Color } from "three";
+import { SketchPicker } from "react-color";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import { OptionModalStore } from "./OptionModal";
+
+enum DisplayPanelShow
+{
+    BgColorPicker = 1,
+}
+@inject("OptionStore")
+@observer
+export class DisplayPanel extends React.Component<{ OptionStore: OptionModalStore }, {}>
+{
+    m_InputEl = HTMLInputElement;
+    @observable private m_isShow: DisplayPanelShow = -1;
+    handleChangeColor = (color) =>
+    {
+        console.log(color.hex)
+        this.props.OptionStore.m_Option.bgcolor = color.hex;
+        app.m_Viewer.m_Render.setClearColor(new Color(color.hex), 1);
+        app.m_Editor.UpdateScreen();
+    }
+    RenderBgColorPicker = () =>
+    {
+        return (
+            <div>
+                <SketchPicker
+                    color={"#334048"}
+                    onChange={this.handleChangeColor}
+                />
+            </div>
+        )
+    }
+    render()
+    {
+        return (
+            <Card>
+                <H5>背景色</H5>
+                <input
+                    style={{ width: "8rem" }}
+                    type="text"
+                    className={Classes.INPUT}
+                    value={this.props.OptionStore.m_Option.bgcolor}
+                />
+                <Popover
+                    isOpen={this.m_isShow === DisplayPanelShow.BgColorPicker}
+                    content={this.RenderBgColorPicker()}
+                >
+                    <Button
+                        icon="style"
+                        minimal={true}
+                        title={`背景色`}
+                        onClick={() =>
+                        {
+                            if (this.m_isShow !== DisplayPanelShow.BgColorPicker)
+                                this.m_isShow = DisplayPanelShow.BgColorPicker;
+                            else
+                                this.m_isShow = -1;
+                        }}
+                    />
+                </Popover >
+            </Card>
+        )
+    }
+}

src/UI/Components/Modal/OptionModal/OptionModal.tsx

@@ -0,0 +1,138 @@
+import React = require("react");
+import { Classes, Icon, H4, Button, Intent, Tabs, Tab, TabId, Card } from "@blueprintjs/core";
+import { app } from "../../../../ApplicationServices/Application";
+import { observer, inject } from "mobx-react";
+import { observable } from "mobx";
+import { FileServer } from "../../../../DatabaseServices/FileServer";
+import { begin } from "xaop";
+import { KeyBoard } from "../../../../Common/KeyEnum";
+import { DisplayPanel } from "./DisplayPanel";
+import { Singleton } from "../../../../Common/Singleton";
+interface Optioins
+{
+    bgcolor: string;
+}
+export class OptionModalStore extends Singleton
+{
+    private oldBgcolor = "#000000";
+    @observable m_Option: Optioins = {
+        bgcolor: "#000000",
+    };
+    OnCanel = () =>
+    {
+        //背景色恢复上一次确定/应用时的
+        app.m_Viewer.m_Render.setClearColor(this.oldBgcolor);
+        this.m_Option.bgcolor = this.oldBgcolor;
+        app.m_Editor.m_ModalManage.Clear();
+    }
+    OnOK = () =>
+    {
+        this.oldBgcolor = this.m_Option.bgcolor;
+        app.m_Editor.m_ModalManage.Clear();
+    }
+    Apply = () =>
+    {
+        this.oldBgcolor = this.m_Option.bgcolor;
+    }
+}
+@inject("store")
+@observer
+export class OptionModal extends React.Component<{ store: OptionModalStore }, {}>
+{
+    @observable private selectedTabId: TabId = "xs";//暂时设置显示面板为默认项
+    @observable private curFileTitle = "";
+    optionModal: HTMLElement;
+    constructor(props)
+    {
+        super(props);
+    }
+    RegisterHandleKeyBoardEvent()
+    {
+        const store = this.props.store;
+        app.m_Editor.m_ModalManage.events.push(begin(app.m_Editor.m_ModalManage, app.m_Editor.m_ModalManage.OnKeyDown, (e: KeyboardEvent) =>
+        {
+            if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space)
+            {
+                store.OnOK();
+            }
+            else if (e.keyCode === KeyBoard.Escape)
+            {
+                store.OnCanel();
+            }
+        }));
+    }
+    async componentWillMount()
+    {
+        //注册事件
+        this.RegisterHandleKeyBoardEvent();
+        await this.getFileName();
+        document.getElementById('modal').focus();
+    }
+    getFileName = async () =>
+    {
+        let fserver = FileServer.GetInstance();
+        let fileInfo = await fserver.ReadFileInfo(fserver.m_CurFileId);
+        if (fileInfo !== undefined)
+            this.curFileTitle = fileInfo.title;
+        else
+            this.curFileTitle = "图纸1";
+    }
+    render()
+    {
+        const store = this.props.store
+        return (
+            <div
+                className={Classes.DIALOG_CONTAINER}
+                id="optionModal"
+                ref={ref => this.optionModal = ref}
+            >
+                <div className={Classes.DIALOG}>
+                    <div className={Classes.DIALOG_HEADER} data-id="dragArea">
+                        <Icon icon="heat-grid" iconSize={18} />
+                        <H4>选项</H4>
+                        <Button
+                            aria-label="Close"
+                            minimal
+                            icon="cross"
+                            className={Classes.DIALOG_CLOSE_BUTTON}
+                            onClick={store.OnCanel}
+                        />
+                    </div>
+
+                    <div className={Classes.DIALOG_BODY}>
+                        <Card style={{ display: "flex", justifyContent: "space-around" }}>
+                            <span>当前配置：{`XXXX`}</span>
+                            <span>当前图形：{this.curFileTitle}</span>
+                        </Card>
+                        <Tabs id="TabsOption" selectedTabId={this.selectedTabId} onChange={e => this.selectedTabId = e}>
+                            <Tab id="file" title="文件" />
+                            <Tab id="xs" title="显示" panel={<DisplayPanel OptionStore={store as OptionModalStore} />} />
+                            <Tab id="sys" title="系统" />
+                            <Tab id="ht" title="绘图" />
+                        </Tabs>
+                    </div>
+
+                    <div className={Classes.DIALOG_FOOTER}>
+                        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                            <Button
+                                text="确定"
+                                intent={Intent.SUCCESS}
+                                onClick={store.OnOK}
+                            />
+                            <Button
+                                text="取消"
+                                intent={Intent.DANGER}
+                                onClick={store.OnCanel}
+                            />
+                            <Button
+                                text="应用"
+                                intent={Intent.WARNING}
+                                onClick={store.Apply}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}