创建脚本面板。

ShadowEditor.Web/src/editor2/sidebar/ScriptPanel.jsx

@@ -102,10 +102,7 @@ class ScriptPanel extends React.Component {
     handleAddScript() {
         const window = app.createElement(ScriptWindow);
 
-        app.addElement(window, () => {
-            let win1 = window;
-            debugger
-        });
+        app.addElement(window);
     }
 
     handleEditScript(uuid) {

ShadowEditor.Web/src/editor2/sidebar/window/ScriptWindow.jsx

@@ -8,37 +8,70 @@ import { classNames, PropTypes, Window, Content, Form, FormControl, Label, Input
 class ScriptWindow extends React.Component {
     constructor(props) {
         super(props);
-    }
 
-    render() {
-        const options = {
+        this.scriptTypes = {
             'javascript': 'JavaScript',
             'vertexShader': L_VERTEX_SHADER,
             'fragmentShader': L_FRAGMENT_SHADER,
             'json': L_SHADER_PROGRAM_INFO
         };
 
+        this.state = {
+            name: L_NO_NAME,
+            type: 'javascript',
+        };
+
+        this.handleNameChange = this.handleNameChange.bind(this);
+        this.handleTypeChange = this.handleTypeChange.bind(this);
+        this.handleOK = this.handleOK.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+    }
+
+    render() {
+        const { name, type } = this.state;
+
         return <Window
             className={'ScriptWindow'}
-            title={L_CREATE_SCRIPT}>
+            title={L_CREATE_SCRIPT}
+            onClose={this.handleCancel}>
             <Content>
                 <Form>
                     <FormControl>
                         <Label>{L_NAME}</Label>
-                        <Input value={L_NO_NAME}></Input>
+                        <Input value={name} onChange={this.handleNameChange}></Input>
                     </FormControl>
                     <FormControl>
                         <Label>{L_TYPE}</Label>
-                        <Select options={options} value={'javascript'}></Select>
+                        <Select options={this.scriptTypes} value={type} onChange={this.handleTypeChange}></Select>
                     </FormControl>
                 </Form>
             </Content>
             <Buttons>
-                <Button>{L_OK}</Button>
-                <Button>{L_CANCEL}</Button>
+                <Button onClick={this.handleOK}>{L_OK}</Button>
+                <Button onClick={this.handleCancel}>{L_CANCEL}</Button>
             </Buttons>
         </Window>;
     }
+
+    handleNameChange(value) {
+        this.setState({
+            name: value,
+        });
+    }
+
+    handleTypeChange(value) {
+        this.setState({
+            type: value,
+        });
+    }
+
+    handleOK() {
+        debugger
+    }
+
+    handleCancel() {
+        app.removeElement(this);
+    }
 }
 
 export default ScriptWindow;