TextureProperty

ShadowEditor.Web/src/ui/form/Input.jsx

@@ -15,12 +15,12 @@ class Input extends React.Component {
     }
 
     render() {
-        const { className, style, name, type, value, min, max, step, disabled } = this.props;
+        const { className, style, name, type, value, min, max, step, show, disabled } = this.props;
 
         let val = value === undefined || value === null ? '' : value;
 
         return <input
-            className={classNames('Input', className)}
+            className={classNames('Input', !show && 'hidden', className)}
             style={style}
             type={type}
             value={val}
@@ -77,6 +77,7 @@ Input.propTypes = {
     step: PropTypes.number,
     precision: PropTypes.number,
     disabled: PropTypes.bool,
+    show: PropTypes.bool,
     onChange: PropTypes.func,
     onInput: PropTypes.func,
 };
@@ -92,6 +93,7 @@ Input.defaultProps = {
     step: null,
     precision: 3,
     disabled: false,
+    show: true,
     onChange: null,
     onInput: null,
 };

ShadowEditor.Web/src/ui/form/css/Input.css

@@ -6,4 +6,8 @@
     border: 1px solid rgb(217, 217, 217);
     box-sizing: border-box;
     vertical-align: top;
+}
+
+.Input.hidden {
+    display: none;
 }

ShadowEditor.Web/src/ui/property/TextureProperty.jsx

@@ -2,6 +2,7 @@ import './css/TextureProperty.css';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 
+import CheckBox from '../form/CheckBox.jsx';
 import Input from '../form/Input.jsx';
 
 /**
@@ -21,12 +22,13 @@ class TextureProperty extends React.Component {
     render() {
         const { className, style, value, enabled, showScale, scale } = this.props;
 
-        return <canvas
-            className={classNames('texture', className)}
-            style={style}
-            title={value ? value.sourceFile : ''}
-            ref={this.canvasRef}
-            onClick={this.handleSelect}></canvas>;
+        return <div className={classNames('texture', className)} style={style}>
+            <CheckBox checked={enabled}></CheckBox>
+            <canvas title={value ? value.sourceFile : ''}
+                ref={this.canvasRef}
+                onClick={this.handleSelect}></canvas>;
+            <Input type={'number'} value={scale} show={showScale}></Input>
+        </div>;
     }
 
     componentDidMount() {

ShadowEditor.Web/src/ui/property/css/TextureProperty.css

@@ -6,6 +6,9 @@
     position: absolute;
     width: 100%;
     height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
     box-sizing: border-box;
     cursor: pointer;
 }