ui测试。

src/ui/Text.js

@@ -1,6 +1,5 @@
 import Control from './Control';
-
-var ID = -1;
+import XType from './XType';
 
 /**
  * 文本框
@@ -9,10 +8,12 @@ var ID = -1;
 function Text(options) {
     Control.call(this, options);
     options = options || {};
-    this.id = options.id || 'Text' + ID--;
+
+    this.id = options.id || null;
     this.text = options.text || 'Text';
     this.cls = options.cls || 'Text';
     this.style = options.style || null;
+
     this.onClick = options.onClick || null;
 };
 
@@ -21,16 +22,21 @@ Text.prototype.constructor = Text;
 
 Text.prototype.render = function () {
     this.dom = document.createElement('span');
+
     if (this.id) {
         this.dom.id = this.id;
     }
+
     this.dom.className = this.cls;
+
     if (this.style) {
         this.dom.style = this.style;
     }
+
     this.dom.style.cursor = 'default';
     this.dom.style.display = 'inline-block';
     this.dom.style.verticalAlign = 'middle';
+
     this.setValue(this.text);
 
     if (this.onClick) {
@@ -51,4 +57,6 @@ Text.prototype.setValue = function (value) {
     return this;
 };
 
+XType.add('text', Text);
+
 export default Text;

src/ui/TextArea.js

@@ -1,4 +1,5 @@
 import Control from './Control';
+import XType from './XType';
 
 /**
  * 文本域
@@ -7,8 +8,12 @@ import Control from './Control';
 function TextArea(options) {
     Control.call(this, options);
     options = options || {};
+
+    this.id = options.id || null;
     this.value = options.value || '';
+    this.cls = options.cls || 'TextArea';
     this.style = options.style || null;
+
     this.onChange = options.onChange || null;
     this.onKeyUp = options.onKeyUp || null;
 };
@@ -18,7 +23,12 @@ TextArea.prototype.constructor = TextArea;
 
 TextArea.prototype.render = function () {
     this.dom = document.createElement('textarea');
-    this.dom.className = 'TextArea';
+
+    if (this.id) {
+        this.dom.id = this.id;
+    }
+
+    this.dom.className = this.cls;
 
     if (this.style) {
         this.dom.style = this.style;
@@ -65,4 +75,6 @@ TextArea.prototype.setValue = function (value) {
     return this;
 };
 
+XType.add('textarea', TextArea);
+
 export default TextArea;

src/ui/Texture.js

@@ -1,4 +1,5 @@
 import Control from './Control';
+import XType from './XType';
 
 /**
  * 纹理
@@ -6,7 +7,10 @@ import Control from './Control';
  */
 function Texture(options) {
     Control.call(this, options);
+    options = options || {};
+
     this.mapping = options.mapping || THREE.UVMapping;
+
     this.onChange = options.onChange || null;
 }
 
@@ -22,9 +26,11 @@ Texture.prototype.render = function () {
     this.input.type = 'file';
 
     var _this = this;
+
     this.input.addEventListener('change', function (event) {
         _this.loadFile(event.target.files[0]);
     });
+
     this.form.appendChild(this.input);
 
     this.canvas = document.createElement('canvas');
@@ -53,6 +59,7 @@ Texture.prototype.render = function () {
     this.dom.appendChild(this.name);
 
     this.parent.appendChild(this.dom);
+
     this.texture = null;
 };
 
@@ -61,7 +68,6 @@ Texture.prototype.getValue = function () {
 };
 
 Texture.prototype.setValue = function (texture) {
-
     var canvas = this.dom.children[0];
     var name = this.dom.children[1];
     var context = canvas.getContext('2d');
@@ -80,14 +86,11 @@ Texture.prototype.setValue = function (texture) {
         }
 
     } else {
-
         name.value = '';
 
         if (context !== null) {
-
             // Seems like context can be null if the canvas is not visible
             context.clearRect(0, 0, canvas.width, canvas.height);
-
         }
     }
 
@@ -95,16 +98,16 @@ Texture.prototype.setValue = function (texture) {
 };
 
 Texture.prototype.loadFile = function (file) {
-
     var _this = this;
 
     if (file.type.match('image.*')) {
-
         var reader = new FileReader();
+
         if (file.type === 'image/targa') {
             reader.addEventListener('load', function (event) {
                 var canvas = new THREE.TGALoader().parse(event.target.result);
                 var texture = new THREE.CanvasTexture(canvas, _this.mapping);
+
                 texture.sourceFile = file.name;
 
                 _this.setValue(texture);
@@ -115,14 +118,11 @@ Texture.prototype.loadFile = function (file) {
             }, false);
 
             reader.readAsArrayBuffer(file);
-
         } else {
-
             reader.addEventListener('load', function (event) {
-
                 var image = document.createElement('img');
-                image.addEventListener('load', function (event) {
 
+                image.addEventListener('load', function (event) {
                     var texture = new THREE.Texture(this, _this.mapping);
                     texture.sourceFile = file.name;
                     texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
@@ -133,11 +133,9 @@ Texture.prototype.loadFile = function (file) {
                     if (_this.onChange) {
                         _this.onChange();
                     }
-
                 }, false);
 
                 image.src = event.target.result;
-
             }, false);
 
             reader.readAsDataURL(file);
@@ -147,4 +145,6 @@ Texture.prototype.loadFile = function (file) {
     this.form.reset();
 };
 
+XType.add('texture', Texture);
+
 export default Texture;

src/ui/UI.js

@@ -47,14 +47,11 @@ const UI = {
     Row: Row,
     Select: Select,
     Span: Span,
-
-    // ui.js
     Text: Text,
     TextArea: TextArea,
-    Modal: Modal,
-
-    // ui.three.js
     Texture: Texture,
+
+    Modal: Modal,
     Outliner: Outliner
 };
 

test/ui/19 TextTest.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>Text Test</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+</head>
+
+<body>
+    <script src="../../dist/ShadowEditor.js"></script>
+    <script>
+        var control = Shadow.UI.XType.create({
+            xtype: 'text',
+            text: 'Hello, world',
+            onClick: function () {
+                alert(`You clicked ${this.getValue()}`);
+            }
+        });
+
+        control.render();
+    </script>
+</body>
+
+</html>

test/ui/20 TextAreaTest.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>TextArea Test</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+</head>
+
+<body>
+    <script src="../../dist/ShadowEditor.js"></script>
+    <script>
+        var control = Shadow.UI.XType.create({
+            xtype: 'textarea',
+            value: 'Hello, world',
+            onChange: function () {
+                console.log(this.getValue());
+            }
+        });
+
+        control.render();
+    </script>
+</body>
+
+</html>

test/ui/21 TextureTest.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>Texture Test</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+</head>
+
+<body>
+    <script src="../../node_modules/three/build/three.js"></script>
+    <script src="../../dist/ShadowEditor.js"></script>
+    <script>
+        var control = Shadow.UI.XType.create({
+            xtype: 'texture',
+            onChange: function () {
+                console.log(this.getValue());
+            }
+        });
+
+        control.render();
+    </script>
+</body>
+
+</html>