From bfc56d2578b1f307873d43ed8830ee0029bb0b30 Mon Sep 17 00:00:00 2001 From: ChenX Date: Fri, 21 Jun 2019 17:12:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8A=97=E9=94=AF=E9=BD=BF?= =?UTF-8?q?=E9=80=89=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Add-on/Command_Option.ts | 6 +- src/Common/Deving.ts | 5 ++ src/GraphicsSystem/Viewer.ts | 19 +++-- src/UI/Components/MainContent/Content.tsx | 7 +- src/UI/Components/Modal/ModalStyle/Modal.less | 2 +- src/UI/Components/Modal/ModalsManage.tsx | 1 - .../{OptionModal.tsx => ConfigDialog.tsx} | 53 ++++++------ .../Modal/OptionModal/DisplayConfigPanel.tsx | 83 +++++++++++++++++++ .../Modal/OptionModal/DisplayPanel.tsx | 69 --------------- .../OptionModal/DrawConfigPanel.tsx} | 6 +- 10 files changed, 139 insertions(+), 112 deletions(-) create mode 100644 src/Common/Deving.ts rename src/UI/Components/Modal/OptionModal/{OptionModal.tsx => ConfigDialog.tsx} (82%) create mode 100644 src/UI/Components/Modal/OptionModal/DisplayConfigPanel.tsx delete mode 100644 src/UI/Components/Modal/OptionModal/DisplayPanel.tsx rename src/UI/Components/{IConfig.tsx => Modal/OptionModal/DrawConfigPanel.tsx} (91%) diff --git a/src/Add-on/Command_Option.ts b/src/Add-on/Command_Option.ts index 75ecc360c..9d2d1bace 100644 --- a/src/Add-on/Command_Option.ts +++ b/src/Add-on/Command_Option.ts @@ -1,5 +1,5 @@ import { Command } from "../Editor/CommandMachine"; -import { OptionModalStore, OptionModal } from "../UI/Components/Modal/OptionModal/OptionModal"; +import { ConfigStore, ConfigDialog } from "../UI/Components/Modal/OptionModal/ConfigDialog"; import { app } from "../ApplicationServices/Application"; import { ModalPosition } from "../UI/Components/Modal/ModalsManage"; @@ -7,7 +7,7 @@ export class Command_Options implements Command { async exec() { - let OptionStore = OptionModalStore.GetInstance() as OptionModalStore; - app.Editor.ModalManage.RenderModal(OptionModal, ModalPosition.Center, { store: OptionStore }); + let OptionStore = ConfigStore.GetInstance() as ConfigStore; + app.Editor.ModalManage.RenderModal(ConfigDialog, ModalPosition.Center, { store: OptionStore }); } } diff --git a/src/Common/Deving.ts b/src/Common/Deving.ts new file mode 100644 index 000000000..846106161 --- /dev/null +++ b/src/Common/Deving.ts @@ -0,0 +1,5 @@ + +export function IsDev() +{ + return window.location.hostname === "localhost"; +} diff --git a/src/GraphicsSystem/Viewer.ts b/src/GraphicsSystem/Viewer.ts index 3ba89fe07..b8bc936b7 100644 --- a/src/GraphicsSystem/Viewer.ts +++ b/src/GraphicsSystem/Viewer.ts @@ -26,7 +26,7 @@ require("three-SMAAPass"); require("three-OutlinePass"); -enum AAType +export enum AAType { FXAA = 0,//快速近似抗锯齿(性能更好) SMAA = 1,//多重采样抗锯齿(质量更好) @@ -120,17 +120,28 @@ export class Viewer if (this._AAType === AAType.FXAA) { arrayRemoveOnce(this.Composer.passes, this._EffectFXAAPass); - this.Composer.passes.push(this._SMAAPass); + + if (!this._SMAAPass) + { + this._SMAAPass = new SMAAPass(this.Width, this.Height); + this._SMAAPass.renderToScreen = true; + } + + this.Composer.addPass(this._SMAAPass); } else { arrayRemoveOnce(this.Composer.passes, this._SMAAPass); - this.Composer.passes.push(this._EffectFXAAPass); + this.Composer.addPass(this._EffectFXAAPass); } this._AAType = type; this.UpdateRender(); } } + get AAType() + { + return this._AAType; + } //初始化render InitRender(canvasContainer: HTMLElement) @@ -174,8 +185,6 @@ export class Viewer this.Composer.addPass(this.OutlinePass); - this._SMAAPass = new SMAAPass(this.Width, this.Height); - this._SMAAPass.renderToScreen = true; this._EffectFXAAPass = new FXAAPass(); this.Composer.addPass(this._EffectFXAAPass); diff --git a/src/UI/Components/MainContent/Content.tsx b/src/UI/Components/MainContent/Content.tsx index 94e03f8bd..fc0ac1c57 100644 --- a/src/UI/Components/MainContent/Content.tsx +++ b/src/UI/Components/MainContent/Content.tsx @@ -2,7 +2,8 @@ import { Button, Classes, H2, H3, H5, Icon, Intent } from '@blueprintjs/core'; import { observable } from 'mobx'; import { inject, observer } from 'mobx-react'; import * as React from 'react'; -import { ResourcesCDN_HOST, CURRENT_HOST } from '../../../Common/HostUrl'; +import { IsDev } from '../../../Common/Deving'; +import { CURRENT_HOST, ResourcesCDN_HOST } from '../../../Common/HostUrl'; import { FileServer } from '../../../DatabaseServices/FileServer'; import { TopPanelStore } from '../../Store/TopPanelStore'; import { Carousel } from '../Carousel'; @@ -12,7 +13,7 @@ import './MainContent.less'; @observer export class ContentComponent extends React.Component<{ store?: TopPanelStore }> { - @observable private editoring = false + @observable private editoring = false; //添加新文件 handleAddNewFile = async () => { @@ -28,6 +29,8 @@ export class ContentComponent extends React.Component<{ store?: TopPanelStore }> } async componentDidMount() { + if (IsDev()) + this.handleAddNewFile(); await this.props.store.UpdateFileList2(); } diff --git a/src/UI/Components/Modal/ModalStyle/Modal.less b/src/UI/Components/Modal/ModalStyle/Modal.less index 363f53188..83f8ddce1 100644 --- a/src/UI/Components/Modal/ModalStyle/Modal.less +++ b/src/UI/Components/Modal/ModalStyle/Modal.less @@ -17,7 +17,7 @@ position: fixed; outline: none; font-size: 8px; - overflow: hidden; + overflow: hidden; //影响到DisplayConfigPanel 的ColorPick select{ font-size: 8px; } diff --git a/src/UI/Components/Modal/ModalsManage.tsx b/src/UI/Components/Modal/ModalsManage.tsx index a0dfbc2f3..d84798469 100644 --- a/src/UI/Components/Modal/ModalsManage.tsx +++ b/src/UI/Components/Modal/ModalsManage.tsx @@ -241,7 +241,6 @@ export class ModalManage app.Editor.MaskManage.Clear(); this.events.forEach(f => f()); this.events.length = 0; - JigUtils.Destroy(); } EndCmd() { diff --git a/src/UI/Components/Modal/OptionModal/OptionModal.tsx b/src/UI/Components/Modal/OptionModal/ConfigDialog.tsx similarity index 82% rename from src/UI/Components/Modal/OptionModal/OptionModal.tsx rename to src/UI/Components/Modal/OptionModal/ConfigDialog.tsx index 6bcff3cb2..b8593da5b 100644 --- a/src/UI/Components/Modal/OptionModal/OptionModal.tsx +++ b/src/UI/Components/Modal/OptionModal/ConfigDialog.tsx @@ -1,19 +1,17 @@ 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 { Button, Card, Classes, H4, Icon, Intent, Tab, Tabs } from "@blueprintjs/core"; import { observable } from "mobx"; -import { FileServer } from "../../../../DatabaseServices/FileServer"; +import { observer } from "mobx-react"; +import { Color } from "three"; import { begin } from "xaop"; +import { app } from "../../../../ApplicationServices/Application"; import { KeyBoard } from "../../../../Common/KeyEnum"; -import { DisplayPanel } from "./DisplayPanel"; import { Singleton } from "../../../../Common/Singleton"; -import { ConfigCom } from "../../IConfig"; +import { FileServer } from "../../../../DatabaseServices/FileServer"; import { userConfig } from "../../../../Editor/UserConfig"; -interface Optioins -{ - bgcolor: string; -} +import { DisplayConfigPanel } from "./DisplayConfigPanel"; +import { DrawConfigPanel } from "./DrawConfigPanel"; + export enum EOptionTabId { File = "file", @@ -22,43 +20,42 @@ export enum EOptionTabId Draw = "ht", } -export class OptionModalStore extends Singleton +export class ConfigStore extends Singleton { private oldBgcolor = "#000000"; - @observable m_Option: Optioins = { - bgcolor: "#000000", - }; + @observable bgColor = "#000000"; OnCanel = () => { //背景色恢复上一次确定/应用时的 app.Viewer.Renderer.setClearColor(this.oldBgcolor); - this.m_Option.bgcolor = this.oldBgcolor; + this.bgColor = this.oldBgcolor; app.Editor.ModalManage.Clear(); + app.Viewer.Renderer.setClearColor(new Color(this.bgColor), 1); + app.Viewer.UpdateRender(); } OnOK = () => { - this.oldBgcolor = this.m_Option.bgcolor; + this.oldBgcolor = this.bgColor; app.Editor.ModalManage.Clear(); } Apply = () => { - this.oldBgcolor = this.m_Option.bgcolor; + this.oldBgcolor = this.bgColor; } } -@inject("store") + +/** + * 选项配置对话框(右键O呼出) + */ @observer -export class OptionModal extends React.Component<{ store: OptionModalStore }, {}> +export class ConfigDialog extends React.Component { - @observable private selectedTabId: EOptionTabId = EOptionTabId.Draw; + @observable private selectedTabId: EOptionTabId = EOptionTabId.Show; @observable private curFileTitle = "图纸"; optionModal: HTMLElement; - constructor(props) - { - super(props); - } RegisterHandleKeyBoardEvent() { - const store = this.props.store; + const store = ConfigStore.GetInstance() as ConfigStore; app.Editor.ModalManage.events.push(begin(app.Editor.ModalManage, app.Editor.ModalManage.OnKeyDown, (e: KeyboardEvent) => { if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space) @@ -92,7 +89,7 @@ export class OptionModal extends React.Component<{ store: OptionModalStore }, {} } render() { - const store = this.props.store + const store = ConfigStore.GetInstance() as ConfigStore; return (
this.selectedTabId = e as EOptionTabId}> - } /> + } /> - } /> + } />
diff --git a/src/UI/Components/Modal/OptionModal/DisplayConfigPanel.tsx b/src/UI/Components/Modal/OptionModal/DisplayConfigPanel.tsx new file mode 100644 index 000000000..e3c9ce746 --- /dev/null +++ b/src/UI/Components/Modal/OptionModal/DisplayConfigPanel.tsx @@ -0,0 +1,83 @@ +import React = require("react"); +import { Card, HTMLSelect, Label, Classes } from "@blueprintjs/core"; +import { observable } from "mobx"; +import { observer } from "mobx-react"; +import { ColorResult, SketchPicker } from "react-color"; +import { Color } from "three"; +import { app } from "../../../../ApplicationServices/Application"; +import { ConfigStore } from "./ConfigDialog"; +import { AAType } from "../../../../GraphicsSystem/Viewer"; + +@observer +export class DisplayConfigPanel extends React.Component<{ store: ConfigStore }> +{ + @observable private _OpenColorPick = false; + @observable _AAType = "性能"; + componentWillMount() + { + this._AAType = app.Viewer.AAType === AAType.FXAA ? "性能" : "质量"; + } + handleChangeColor = (color: ColorResult) => + { + this.props.store.bgColor = color.hex; + app.Viewer.Renderer.setClearColor(new Color(color.hex), 1); + app.Editor.UpdateScreen(); + } + render() + { + const popover: React.CSSProperties = { + position: 'absolute', + } + const cover: React.CSSProperties = { + position: 'fixed', + top: '0px', + right: '0px', + bottom: '0px', + left: '0px', + } + + let color = this.props.store.bgColor; + return ( + +
+
+

背景色:

+
+
+ {this._OpenColorPick && +
+
+ +
+ } +
+
+ +
+ + ) + } + handleClick = () => + { + this._OpenColorPick = !this._OpenColorPick; + }; +} diff --git a/src/UI/Components/Modal/OptionModal/DisplayPanel.tsx b/src/UI/Components/Modal/OptionModal/DisplayPanel.tsx deleted file mode 100644 index 36280da1b..000000000 --- a/src/UI/Components/Modal/OptionModal/DisplayPanel.tsx +++ /dev/null @@ -1,69 +0,0 @@ -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.Viewer.Renderer.setClearColor(new Color(color.hex), 1); - app.Editor.UpdateScreen(); - } - RenderBgColorPicker = () => - { - return ( -
- -
- ) - } - render() - { - return ( - -
背景色
- - -