ui控件测试。

src/ui/Color.js

@@ -1,4 +1,5 @@
 import Control from './Control';
+import XType from './XType';
 
 /**
  * 颜色选择器
@@ -6,7 +7,13 @@ import Control from './Control';
  */
 function Color(options) {
     Control.call(this, options);
+    options = options || {};
+
+    this.id = options.id || null;
     this.value = options.value || null;
+    this.cls = options.cls || 'Color';
+    this.style = options.style || 'width: 64px; height: 17px; border: none; padding: 2px; background-color: transparent;';
+
     this.onChange = options.onChange || null;
 };
 
@@ -15,26 +22,26 @@ Color.prototype.constructor = Color;
 
 Color.prototype.render = function () {
     this.dom = document.createElement('input');
-    this.dom.className = 'Color';
-    this.dom.style.width = '64px';
-    this.dom.style.height = '17px';
-    this.dom.style.border = '0px';
-    this.dom.style.padding = '2px';
-    this.dom.style.backgroundColor = 'transparent';
+
+    if (this.id) {
+        this.dom.id = this.id;
+    }
+
+    this.dom.className = this.cls;
+    this.dom.style = this.style;
 
     try {
         this.dom.type = 'color';
 
-        if (this.value && Number.isNaN(this.value)) {
-            this.setHexValue(this.value);
-        } else if (this.value) {
+        if (this.value && this.value.toString().startsWith('#')) { // #ffffff
             this.setValue(this.value);
+        } else if (this.value) { // 0xffffff
+            this.setHexValue(this.value);
         } else {
             this.dom.value = '#ffffff';
         }
-
     } catch (exception) {
-
+        console.warn(exception);
     }
 
     this.parent.appendChild(this.dom);
@@ -62,4 +69,6 @@ Color.prototype.setHexValue = function (hex) {
     return this;
 };
 
+XType.add('color', Color);
+
 export default Color;

src/ui/HorizontalRule.js

@@ -1,4 +1,5 @@
 import Control from './Control';
+import XType from './XType';
 
 /**
  * 水平线
@@ -6,6 +7,9 @@ import Control from './Control';
  */
 function HorizontalRule(options) {
     Control.call(this, options);
+    options = options || {};
+
+    this.cls = options.cls || 'HorizontalRule';
 };
 
 HorizontalRule.prototype = Object.create(Control.prototype);
@@ -13,8 +17,12 @@ HorizontalRule.prototype.constructor = HorizontalRule;
 
 HorizontalRule.prototype.render = function () {
     this.dom = document.createElement('hr');
-    this.dom.className = 'HorizontalRule';
+
+    this.dom.className = this.cls;
+
     this.parent.appendChild(this.dom);
 };
 
+XType.add('hr', HorizontalRule);
+
 export default HorizontalRule;

src/ui/Input.js

@@ -1,4 +1,5 @@
 import Control from './Control';
+import XType from './XType';
 
 /**
  * 输入框
@@ -7,9 +8,13 @@ import Control from './Control';
 function Input(options) {
     Control.call(this, options);
     options = options || {};
+
+    this.id = options.id || null;
     this.value = options.value || '';
+    this.cls = options.cls || 'Input';
     this.style = options.style || null;
     this.disabled = options.disabled || false;
+
     this.onChange = options.onChange || null;
 };
 
@@ -18,7 +23,12 @@ Input.prototype.constructor = Input;
 
 Input.prototype.render = function () {
     this.dom = document.createElement('input');
-    this.dom.className = 'Input';
+
+    if (this.id) {
+        this.dom.id = this.id;
+    }
+
+    this.dom.className = this.cls;
 
     if (this.style) {
         this.dom.style = this.style;
@@ -53,4 +63,6 @@ Input.prototype.setValue = function (value) {
     return this;
 };
 
+XType.add('input', Input);
+
 export default Input;

src/ui/Integer.js

@@ -1,4 +1,5 @@
 import Control from './Control';
+import XType from './XType';
 
 /**
  * 整数
@@ -6,15 +7,15 @@ import Control from './Control';
  */
 function Integer(options) {
     Control.call(this, options);
-
     options = options || {};
 
+    this.id = options.id || null;
     this.value = options.value || 0;
-
     this.min = options.range ? options.range[0] : -Infinity;
     this.max = options.range ? options.range[1] : Infinity;
-
-    this.step = options.step || 1;
+    this.step = options.step || 1; // TODO: step无效
+    this.cls = options.cls || 'Number';
+    this.style = options.style || null;
 
     this.onChange = options.onChange || null;
 };
@@ -24,7 +25,12 @@ Integer.prototype.constructor = Integer;
 
 Integer.prototype.render = function () {
     this.dom = document.createElement('input');
-    this.dom.className = 'Number';
+
+    if (this.id) {
+        this.dom.id = this.id;
+    }
+
+    this.dom.className = this.cls;
     this.dom.value = '0';
 
     this.dom.addEventListener('keydown', function (event) {
@@ -67,7 +73,6 @@ Integer.prototype.render = function () {
             _this.setValue(value);
             _this.dom.dispatchEvent(changeEvent);
         }
-
         prevPointer = [event.clientX, event.clientY];
     }
 
@@ -135,4 +140,6 @@ Integer.prototype.setRange = function (min, max) {
     return this;
 };
 
+XType.add('int', Integer);
+
 export default Integer;

test/ui/11 ColorTest.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>Color 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: 'color',
+            value: '#ff0000',
+            onChange: function () {
+                alert(`Value: ${this.getValue()}\nHexValue: ${this.getHexValue()}`);
+            }
+        });
+
+        control.render();
+    </script>
+</body>
+
+</html>

test/ui/12 HorizontalRuleTest.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>Horizontal Rule 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: 'hr'
+        });
+
+        control.render();
+    </script>
+</body>
+
+</html>

test/ui/13 InputTest.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>Input 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: 'input',
+            value: '123',
+            onChange: function () {
+                alert(`Value: ${this.getValue()}`);
+            }
+        });
+
+        control.render();
+    </script>
+</body>
+
+</html>

test/ui/14 IntegerTest.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>Integer 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: 'int',
+            value: 50,
+            range: [0, 100],
+            step: 10,
+            onChange: function () {
+                console.log(`Value: ${this.getValue()}`);
+            }
+        });
+
+        control.render();
+    </script>
+</body>
+
+</html>