大量修改。

src/ui2/Break.js

@@ -1,15 +1,14 @@
 import Control from './Control';
-import Container from './Container';
 
 /**
  * 换行符
  * @param {*} options 
  */
 function Break(options) {
-    Container.call(this, options);
+    Control.call(this, options);
 };
 
-Break.prototype = Object.create(Container.prototype);
+Break.prototype = Object.create(Control.prototype);
 Break.prototype.constructor = Break;
 
 Break.prototype.render = function () {

src/ui2/Button.js

@@ -16,8 +16,13 @@ Button.prototype.constructor = Button;
 Button.prototype.render = function () {
     this.dom = document.createElement('button');
     this.dom.className = 'Button';
-    this.dom.innerHTML = this.text;
+    this.dom.textContent = this.text;
     this.parent.appendChild(this.dom);
 };
 
+Button.prototype.setLabel = function (value) {
+    this.dom.textContent = value;
+    return this;
+};
+
 export default Button;

src/ui2/Checkbox.js

@@ -6,6 +6,9 @@ import Control from './Control';
  */
 function Checkbox(options) {
     Control.call(this, options);
+
+    options = options || {};
+    this.value = options.value || false;
 };
 
 Checkbox.prototype = Object.create(Control.prototype);
@@ -15,7 +18,22 @@ Checkbox.prototype.render = function () {
     this.dom = document.createElement('input');
     this.dom.className = 'Checkbox';
     this.dom.type = 'checkbox';
+
     this.parent.appendChild(this.dom);
+
+    this.setValue(this.value);
+};
+
+Checkbox.prototype.getValue = function () {
+    return this.dom.checked;
+};
+
+Checkbox.prototype.setValue = function (value) {
+    if (value !== undefined) {
+        this.dom.checked = value;
+    }
+
+    return this;
 };
 
 export default Checkbox;

src/ui2/Color.js

@@ -29,4 +29,22 @@ Color.prototype.render = function () {
     this.parent.appendChild(this.dom);
 };
 
+Color.prototype.getValue = function () {
+    return this.dom.value;
+};
+
+Color.prototype.getHexValue = function () {
+    return parseInt(this.dom.value.substr(1), 16);
+};
+
+Color.prototype.setValue = function (value) {
+    this.dom.value = value;
+    return this;
+};
+
+Color.prototype.setHexValue = function (hex) {
+    this.dom.value = '#' + ('000000' + hex.toString(16)).slice(- 6);
+    return this;
+};
+
 export default Color;

src/ui2/Integer.js

@@ -1,19 +1,26 @@
 import Control from './Control';
 
 /**
- * Div
+ * Integer
  * @param {*} options 
  */
-function Div(options) {
+function Integer(options) {
     Control.call(this, options);
+
+    options = options || {};
+
+    this.value = options.value || 0;
+
+    this.min = - Infinity;
+    this.max = Infinity;
+
+    this.step = 1;
 };
 
-Div.prototype = Object.create(Control.prototype);
-Div.prototype.constructor = Div;
-
-Div.prototype.render = function () {
-    var _this = this;
+Integer.prototype = Object.create(Control.prototype);
+Integer.prototype.constructor = Integer;
 
+Integer.prototype.render = function () {
     this.dom = document.createElement('input');
     this.dom.className = 'Number';
     this.dom.value = '0';
@@ -22,14 +29,7 @@ Div.prototype.render = function () {
         event.stopPropagation();
     }, false);
 
-    this.value = 0;
-
-    this.min = - Infinity;
-    this.max = Infinity;
-
-    this.step = 1;
-
-    this.setValue(number);
+    this.setValue(this.value);
 
     var changeEvent = document.createEvent('HTMLEvents');
     changeEvent.initEvent('change', true, true);
@@ -40,75 +40,57 @@ Div.prototype.render = function () {
     var pointer = [0, 0];
     var prevPointer = [0, 0];
 
-    function onMouseDown(event) {
+    var _this = this;
 
+    function onMouseDown(event) {
         event.preventDefault();
 
         distance = 0;
-
         onMouseDownValue = scope.value;
-
         prevPointer = [event.clientX, event.clientY];
 
         document.addEventListener('mousemove', onMouseMove, false);
         document.addEventListener('mouseup', onMouseUp, false);
-
     }
 
     function onMouseMove(event) {
-
         var currentValue = scope.value;
-
         pointer = [event.clientX, event.clientY];
-
         distance += (pointer[0] - prevPointer[0]) - (pointer[1] - prevPointer[1]);
 
-        var value = onMouseDownValue + (distance / (event.shiftKey ? 5 : 50)) * scope.step;
+        var value = onMouseDownValue + (distance / (event.shiftKey ? 5 : 50)) * _this.step;
         value = Math.min(scope.max, Math.max(scope.min, value)) | 0;
 
         if (currentValue !== value) {
-
-            scope.setValue(value);
-            dom.dispatchEvent(changeEvent);
-
+            _this.setValue(value);
+            _this.dom.dispatchEvent(changeEvent);
         }
 
         prevPointer = [event.clientX, event.clientY];
-
     }
 
     function onMouseUp(event) {
-
         document.removeEventListener('mousemove', onMouseMove, false);
         document.removeEventListener('mouseup', onMouseUp, false);
 
         if (Math.abs(distance) < 2) {
-
-            dom.focus();
-            dom.select();
-
+            _this.dom.focus();
+            _this.dom.select();
         }
-
     }
 
     function onChange(event) {
-
-        scope.setValue(dom.value);
-
+        _this.setValue(dom.value);
     }
 
     function onFocus(event) {
-
-        dom.style.backgroundColor = '';
-        dom.style.cursor = '';
-
+        _this.dom.style.backgroundColor = '';
+        _this.dom.style.cursor = '';
     }
 
     function onBlur(event) {
-
-        dom.style.backgroundColor = 'transparent';
-        dom.style.cursor = 'col-resize';
-
+        _this.dom.style.backgroundColor = 'transparent';
+        _this.dom.style.cursor = 'col-resize';
     }
 
     onBlur();
@@ -117,8 +99,35 @@ Div.prototype.render = function () {
     dom.addEventListener('change', onChange, false);
     dom.addEventListener('focus', onFocus, false);
     dom.addEventListener('blur', onBlur, false);
-    
+
     this.parent.appendChild(this.dom);
 };
 
-export default Div;
+Integer.prototype.getValue = function () {
+    return this.value;
+};
+
+Integer.prototype.setValue = function (value) {
+    if (value !== undefined) {
+        value = parseInt(value);
+
+        this.value = value;
+        this.dom.value = value;
+    }
+
+    return this;
+};
+
+Integer.prototype.setStep = function (step) {
+    this.step = parseInt(step);
+    return this;
+};
+
+Integer.prototype.setRange = function (min, max) {
+    this.min = min;
+    this.max = max;
+
+    return this;
+};
+
+export default Integer;

src/ui2/Modal.js

@@ -1,43 +1,57 @@
 import Control from './Control';
+import Container from './Container';
+import Panel from './Panel';
 
 /**
  * 模态框
  * @param {*} options 
  */
 function Modal(options) {
-    Control.call(this, options);
+    Container.call(this, options);
 };
 
-Modal.prototype = Object.create(Control.prototype);
+Modal.prototype = Object.create(Container.prototype);
 Modal.prototype.constructor = Modal;
 
 Modal.prototype.render = function () {
-    var scope = this;
+    this.dom = document.createElement('div');
 
-    var dom = document.createElement('div');
+    this.dom.style.position = 'absolute';
+    this.dom.style.width = '100%';
+    this.dom.style.height = '100%';
+    this.dom.style.backgroundColor = 'rgba(0,0,0,0.5)';
+    this.dom.style.display = 'none';
+    this.dom.style.alignItems = 'center';
+    this.dom.style.justifyContent = 'center';
 
-    dom.style.position = 'absolute';
-    dom.style.width = '100%';
-    dom.style.height = '100%';
-    dom.style.backgroundColor = 'rgba(0,0,0,0.5)';
-    dom.style.display = 'none';
-    dom.style.alignItems = 'center';
-    dom.style.justifyContent = 'center';
-    dom.addEventListener('click', function (event) {
-
-        scope.hide();
+    this.parent.appendChild(this.dom);
 
+    var _this = this;
+    this.dom.addEventListener('click', function (event) {
+        _this.hide();
     });
 
-    this.dom = dom;
-
     this.container = new Panel();
     this.container.dom.style.width = '200px';
     this.container.dom.style.padding = '20px';
     this.container.dom.style.backgroundColor = '#ffffff';
     this.container.dom.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)';
 
-    this.add(this.container);
+    this.dom.appendChild(this.container);
+};
+
+Modal.prototype.show = function (content) {
+    this.container.clear();
+    this.container.add(content);
+
+    this.dom.style.display = 'flex';
+
+    return this;
+};
+
+Modal.prototype.hide = function () {
+    this.dom.style.display = 'none';
+    return this;
 };
 
 export default Modal;

src/ui2/Number.js

@@ -0,0 +1,152 @@
+import Control from './Control';
+
+/**
+ * 数字
+ * @param {*} options 
+ */
+function Number(options) {
+    Control.call(this, options);
+    options = options || {};
+
+    this.value = options.value || 0;
+
+    this.min = - Infinity;
+    this.max = Infinity;
+
+    this.precision = 2;
+    this.step = 1;
+    this.unit = '';
+};
+
+Number.prototype = Object.create(Control.prototype);
+Number.prototype.constructor = Number;
+
+Number.prototype.render = function () {
+    this.dom = document.createElement('input');
+    this.dom.className = 'Number';
+    this.dom.value = '0.00';
+
+    var _this = this;
+
+    this.dom.addEventListener('keydown', function (event) {
+        event.stopPropagation();
+
+        if (event.keyCode === 13) {
+            _this.dom.blur();
+        }
+    }, false);
+
+    this.setValue(this.value);
+
+    var changeEvent = document.createEvent('HTMLEvents');
+    changeEvent.initEvent('change', true, true);
+
+    var distance = 0;
+    var onMouseDownValue = 0;
+
+    var pointer = [0, 0];
+    var prevPointer = [0, 0];
+
+    function onMouseDown(event) {
+        event.preventDefault();
+        distance = 0;
+        onMouseDownValue = _this.value;
+        prevPointer = [event.clientX, event.clientY];
+        document.addEventListener('mousemove', onMouseMove, false);
+        document.addEventListener('mouseup', onMouseUp, false);
+    }
+
+    function onMouseMove(event) {
+        var currentValue = _this.value;
+        pointer = [event.clientX, event.clientY];
+        distance += (pointer[0] - prevPointer[0]) - (pointer[1] - prevPointer[1]);
+        var value = onMouseDownValue + (distance / (event.shiftKey ? 5 : 50)) * _this.step;
+        value = Math.min(_this.max, Math.max(_this.min, value));
+
+        if (currentValue !== value) {
+            _this.setValue(value);
+            _this.dom.dispatchEvent(changeEvent);
+        }
+
+        prevPointer = [event.clientX, event.clientY];
+    }
+
+    function onMouseUp(event) {
+        document.removeEventListener('mousemove', onMouseMove, false);
+        document.removeEventListener('mouseup', onMouseUp, false);
+
+        if (Math.abs(distance) < 2) {
+            _this.dom.focus();
+            _this.dom.select();
+        }
+    }
+
+    function onChange(event) {
+        _this.setValue(_this.dom.value);
+    }
+
+    function onFocus(event) {
+        _this.dom.style.backgroundColor = '';
+        _this.dom.style.cursor = '';
+    }
+
+    function onBlur(event) {
+        _this.dom.style.backgroundColor = 'transparent';
+        _this.dom.style.cursor = 'col-resize';
+    }
+
+    onBlur();
+
+    this.dom.addEventListener('mousedown', onMouseDown, false);
+    this.dom.addEventListener('change', onChange, false);
+    this.dom.addEventListener('focus', onFocus, false);
+    this.dom.addEventListener('blur', onBlur, false);
+
+    this.parent.appendChild(this.dom);
+};
+
+Number.prototype.getValue = function () {
+    return this.value;
+};
+
+Number.prototype.setValue = function (value) {
+    if (value !== undefined) {
+        value = parseFloat(value);
+
+        if (value < this.min) value = this.min;
+        if (value > this.max) value = this.max;
+
+        this.value = value;
+        this.dom.value = value.toFixed(this.precision);
+
+        if (this.unit !== '') this.dom.value += ' ' + this.unit;
+    }
+
+    return this;
+
+};
+
+Number.prototype.setPrecision = function (precision) {
+    this.precision = precision;
+    return this;
+};
+
+Number.prototype.setStep = function (step) {
+    this.step = step;
+    return this;
+};
+
+Number.prototype.setRange = function (min, max) {
+    this.min = min;
+    this.max = max;
+
+    return this;
+};
+
+Number.prototype.setUnit = function (unit) {
+    this.unit = unit;
+
+    return this;
+};
+
+export default Number;

src/ui2/Select.js

@@ -0,0 +1,62 @@
+import Control from './Control';
+
+/**
+ * 选择列表
+ * @param {*} options 
+ */
+function Select(options) {
+    Control.call(this, options);
+    options = options || {};
+    this.value = options.value || '';
+};
+
+Select.prototype = Object.create(Control.prototype);
+Select.prototype.constructor = Select;
+
+Select.prototype.render = function () {
+    this.dom = document.createElement('select');
+    this.dom.className = 'Select';
+    this.dom.style.padding = '2px';
+
+    this.parent.appendChild(this.dom);
+};
+
+Select.prototype.setMultiple = function (boolean) {
+    this.dom.multiple = boolean;
+    return this;
+};
+
+Select.prototype.setOptions = function (options) {
+    var selected = this.dom.value;
+    while (this.dom.children.length > 0) {
+        this.dom.removeChild(this.dom.firstChild);
+    }
+
+    for (var key in options) {
+        var option = document.createElement('option');
+        option.value = key;
+        option.innerHTML = options[key];
+        this.dom.appendChild(option);
+    }
+
+    this.dom.value = selected;
+
+    return this;
+
+};
+
+Select.prototype.getValue = function () {
+    return this.dom.value;
+};
+
+Select.prototype.setValue = function (value) {
+    value = String(value);
+
+    if (this.dom.value !== value) {
+        this.dom.value = value;
+    }
+
+    return this;
+};
+
+export default Select;

src/ui2/UI.js

@@ -6,11 +6,21 @@ import Panel from './Panel';
 import Text from './Text';
 import Input from './Input';
 import TextArea from './TextArea';
+import Select from './Select';
+import Checkbox from './Checkbox';
+import Color from './Color';
+import Number from './Number';
+import Integer from './Integer';
+import Break from './Break';
+import HorizontalRule from './HorizontalRule';
+import Button from './Button';
+import Modal from './Modal';
 
 /**
  * 所有UI控件封装
  */
 const UI = {
+    // ui.js
     Control: Control,
     Container: Container,
     Div: Div,
@@ -19,6 +29,17 @@ const UI = {
     Text: Text,
     Input: Input,
     TextArea: TextArea,
+    Select: Select,
+    Checkbox: Checkbox,
+    Color: Color,
+    Number: Number,
+    Integer: Integer,
+    Break: Break,
+    HorizontalRule: HorizontalRule,
+    Button: Button,
+    Modal: Modal,
+
+    // ui.three.js
 };
 
 export default UI;