OptionsWindow

ShadowEditor.Web/src/editor2/menu/OptionsMenu.jsx

@@ -1,4 +1,5 @@
 import { classNames, PropTypes, MenuBar, MenuItem, MenuItemSeparator } from '../../third_party';
+import OptionsWindow from '../window/OptionsWindow.jsx';
 
 /**
  * 选项菜单
@@ -34,40 +35,28 @@ class OptionsMenu extends React.Component {
     // ---------------------------------- 渲染器选项 -------------------------------------
 
     handleRendererOptions() {
-        if (this.optionsWindow === undefined) {
-            this.optionsWindow = new OptionsWindow({
-                app: app
-            });
-            this.optionsWindow.render();
-        }
-        this.optionsWindow.show();
-        this.optionsWindow.changeTab(L_RENDERER);
+        let win = app.createElement(OptionsWindow, {
+            activeTab: 0,
+        });
+        app.addElement(win);
     }
 
     // ------------------------------- 帮助器选项 -----------------------------------------
 
     handleHelperOptions() {
-        if (this.optionsWindow === undefined) {
-            this.optionsWindow = new OptionsWindow({
-                app: app
-            });
-            this.optionsWindow.render();
-        }
-        this.optionsWindow.show();
-        this.optionsWindow.changeTab(L_HELPERS);
+        let win = app.createElement(OptionsWindow, {
+            activeTab: 1,
+        });
+        app.addElement(win);
     }
 
     // ------------------------------ 滤镜选项 ---------------------------------------------
 
     handleFilterOptions() {
-        if (this.optionsWindow === undefined) {
-            this.optionsWindow = new OptionsWindow({
-                app: app
-            });
-            this.optionsWindow.render();
-        }
-        this.optionsWindow.show();
-        this.optionsWindow.changeTab(L_FILTER);
+        let win = app.createElement(OptionsWindow, {
+            activeTab: 2,
+        });
+        app.addElement(win);
     }
 
     // ---------------------------- 语言选项 -------------------------------------------------

ShadowEditor.Web/src/editor2/window/OptionsWindow.jsx

@@ -1,5 +1,9 @@
-import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../../third_party';
-import Ajax from '../../../utils/Ajax';
+import './css/OptionsWindow.css';
+import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../third_party';
+import RendererPanel from './options/RendererPanel.jsx';
+import HelperPanel from './options/HelperPanel.jsx';
+import FilterPanel from './options/FilterPanel.jsx';
+import Ajax from '../../utils/Ajax';
 
 /**
  * 选项窗口
@@ -17,18 +21,23 @@ class OptionsWindow extends React.Component {
 
         this.handleSave = this.handleSave.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.handleActiveTabChange = this.handleActiveTabChange.bind(this);
     }
 
     render() {
         const { activeTab } = this.state;
 
         return <Window
-            title={`编辑${typeName}`}
-            style={{ width: '320px', height: '300px', }}
-            mask={true}
+            className={'OptionsWindow'}
+            title={`Settings`}
+            style={{ width: '800px', height: '500px', }}
+            mask={false}
             onClose={this.handleClose}>
             <Content>
-                <TabLayout>
+                <TabLayout className={'tab'}>
+                    <RendererPanel title={'Renderer'}></RendererPanel>
+                    <HelperPanel title={'Helper'}></HelperPanel>
+                    <FilterPanel title={'Filter'}></FilterPanel>
                 </TabLayout>
             </Content>
             <Buttons>
@@ -51,8 +60,22 @@ class OptionsWindow extends React.Component {
     }
 
     handleClose() {
+        app.removeElement(this);
+    }
+
+    handleActiveTabChange() {
 
     }
 }
 
+OptionsWindow.propTypes = {
+    activeTab: PropTypes.number,
+    onActiveTabChange: PropTypes.func,
+};
+
+OptionsWindow.defaultProps = {
+    activeTab: 0,
+    onActiveTabChange: null,
+};
+
 export default OptionsWindow;

ShadowEditor.Web/src/editor2/window/css/OptionsWindow.css

@@ -0,0 +1,11 @@
+.Window.OptionsWindow>.wrap>.content {
+    left: 4px;
+    right: 4px;
+    top: 24px;
+    bottom: 32px;
+}
+
+.Window.OptionsWindow>.wrap>.content>.tab {
+    width: 100%;
+    height: 100%;
+}

ShadowEditor.Web/src/editor2/window/options/FilterPanel.jsx

@@ -0,0 +1,18 @@
+import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../../third_party';
+import Ajax from '../../../utils/Ajax';
+
+/**
+ * 滤镜窗口
+ * @author tengge / https://github.com/tengge1
+ */
+class FilterPanel extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return <div>FilterPanel</div>;
+    }
+}
+
+export default FilterPanel;

ShadowEditor.Web/src/editor2/window/options/HelperPanel.jsx

@@ -0,0 +1,18 @@
+import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../../third_party';
+import Ajax from '../../../utils/Ajax';
+
+/**
+ * 帮助器窗口
+ * @author tengge / https://github.com/tengge1
+ */
+class HelperPanel extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return <div>HelperPanel</div>;
+    }
+}
+
+export default HelperPanel;

ShadowEditor.Web/src/editor2/window/options/RendererPanel.jsx

@@ -8,50 +8,10 @@ import Ajax from '../../../utils/Ajax';
 class RendererPanel extends React.Component {
     constructor(props) {
         super(props);
-
-        this.state = {
-            activeTab: 0,
-        };
-
-        this.updateUI = this.updateUI.bind(this);
-
-        this.handleSave = this.handleSave.bind(this);
-        this.handleClose = this.handleClose.bind(this);
     }
 
     render() {
-        const { activeTab } = this.state;
-
-        return <Window
-            title={`编辑${typeName}`}
-            style={{ width: '320px', height: '300px', }}
-            mask={true}
-            onClose={this.handleClose}>
-            <Content>
-                <TabLayout>
-                </TabLayout>
-            </Content>
-            <Buttons>
-                <Button onClick={this.handleSave}>{L_OK}</Button>
-                <Button onClick={this.handleClose}>{L_CANCEL}</Button>
-            </Buttons>
-        </Window>;
-    }
-
-    componentDidMount() {
-        this.updateUI();
-    }
-
-    updateUI() {
-
-    }
-
-    handleSave() {
-
-    }
-
-    handleClose() {
-
+        return <div>RendererPanel</div>;
     }
 }
 

ShadowEditor.Web/src/ui/layout/TabLayout.jsx

@@ -25,11 +25,11 @@ class TabLayout extends React.Component {
     }
 
     render() {
-        const { className, style, children, activeTab, ...others } = this.props;
+        const { className, style, children, activeTab } = this.props;
 
         return <div className={classNames('TabLayout', className)} style={style}>
-            <div className={'tabs'} {...others}>
-                {children.map((n, i) => {
+            <div className={'tabs'}>
+                {React.Children.map(children, (n, i) => {
                     return <div
                         className={classNames('tab', i === this.state.activeTab ? 'selected' : null)}
                         key={i}
@@ -39,7 +39,7 @@ class TabLayout extends React.Component {
                 })}
             </div>
             <div className={'contents'}>
-                {children.map((n, i) => {
+                {React.Children.map(children, (n, i) => {
                     return <div className={classNames('content', i === this.state.activeTab ? 'show' : null)} key={i}>{n}</div>;
                 })}
             </div>

ShadowEditor.Web/src/ui/window/css/Window.css

@@ -33,14 +33,14 @@
     z-index: 200;
 }
 
-.Window .wrap {
+.Window>.wrap {
     position: relative;
     width: 100%;
     height: 100%;
     background: #fff;
 }
 
-.Window .wrap .title {
+.Window>.wrap .title {
     font-size: 14px;
     line-height: 24px;
     color: #fff;
@@ -52,7 +52,7 @@
     overflow: hidden;
 }
 
-.Window .wrap .title .controls {
+.Window>.wrap>.title>.controls {
     position: absolute;
     left: 0;
     top: 0;
@@ -62,7 +62,7 @@
     user-select: none;
 }
 
-.Window .wrap .title .controls .icon {
+.Window>.wrap>.title>.controls>.icon {
     width: 16px;
     height: 24px;
     margin-right: 4px;
@@ -71,7 +71,7 @@
     cursor: pointer;
 }
 
-.Window .wrap .content {
+.Window>.wrap>.content {
     position: absolute;
     left: 20px;
     right: 20px;
@@ -81,7 +81,7 @@
     overflow: hidden;
 }
 
-.Window .wrap .buttons {
+.Window>.wrap>.buttons {
     position: absolute;
     left: 0;
     right: 0;
@@ -92,7 +92,7 @@
     overflow: hidden;
 }
 
-.Window .wrap .buttons .button-wrap {
+.Window>.wrap>.buttons>.button-wrap {
     position: relative;
     height: 24px;
     margin: 4px;