SmaaComponent

ShadowEditor.Web/src/editor2/component/postProcessing/SmaaComponent.jsx

@@ -0,0 +1,99 @@
+import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty, IntegerProperty } from '../../../third_party';
+import SetGeometryCommand from '../../../command/SetGeometryCommand';
+
+/**
+ * 多重采样抗锯齿(SMAA)组件
+ * @author tengge / https://github.com/tengge1
+ */
+class SmaaComponent extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.selected = null;
+
+        this.state = {
+            show: false,
+            expanded: true,
+            enabled: false,
+        };
+
+        this.handleExpand = this.handleExpand.bind(this);
+        this.handleUpdate = this.handleUpdate.bind(this);
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    render() {
+        const { show, expanded, enabled } = this.state;
+
+        if (!show) {
+            return null;
+        }
+
+        return <PropertyGroup title={L_SMAA} show={show} expanded={expanded} onExpand={this.handleExpand}>
+            <CheckBoxProperty label={L_ENABLE_STATE} name={'enabled'} value={enabled} onChange={this.handleChange}></CheckBoxProperty>
+        </PropertyGroup>;
+    }
+
+    componentDidMount() {
+        app.on(`objectSelected.SmaaComponent`, this.handleUpdate);
+        app.on(`objectChanged.SmaaComponent`, this.handleUpdate);
+    }
+
+    handleExpand(expanded) {
+        this.setState({
+            expanded,
+        });
+    }
+
+    handleUpdate() {
+        const editor = app.editor;
+
+        if (!editor.selected || editor.selected !== editor.scene) {
+            this.setState({
+                show: false,
+            });
+            return;
+        }
+
+        this.selected = editor.selected;
+
+        let scene = this.selected;
+        let postProcessing = scene.userData.postProcessing || {};
+
+        let state = {
+            show: true,
+            enabled: postProcessing.smaa ? postProcessing.smaa.enabled : false,
+        };
+
+        this.setState(state);
+    }
+
+    handleChange(value, name) {
+        this.setState({
+            [name]: value,
+        });
+
+        if (value === null) {
+            return;
+        }
+
+        const { enabled } = Object.assign({}, this.state, {
+            [name]: value,
+        });
+
+        let scene = this.selected;
+
+        scene.userData.postProcessing = scene.userData.postProcessing || {};
+
+        Object.assign(scene.userData.postProcessing, {
+            halftone: {
+                enabled,
+            },
+        });
+
+        app.call(`postProcessingChanged`, this);
+    }
+}
+
+export default SmaaComponent;

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

@@ -36,6 +36,7 @@ import HalftoneComponent from '../component/postProcessing/HalftoneComponent.jsx
 import PixelComponent from '../component/postProcessing/PixelComponent.jsx';
 import RgbShiftComponent from '../component/postProcessing/RgbShiftComponent.jsx';
 import SaoComponent from '../component/postProcessing/SaoComponent.jsx';
+import SmaaComponent from '../component/postProcessing/SmaaComponent.jsx';
 
 /**
  * 属性面板
@@ -84,6 +85,7 @@ class PropertyPanel extends React.Component {
             <PixelComponent></PixelComponent>
             <RgbShiftComponent></RgbShiftComponent>
             <SaoComponent></SaoComponent>
+            <SmaaComponent></SmaaComponent>
         </PropertyGrid>;
     }
 }