新建一些空文件。

src/ui/Integer.js

@@ -92,7 +92,7 @@ function Integer(number) {
     function onChange(event) {
 
         scope.setValue(dom.value);
-
+ 
     }
 
     function onFocus(event) {

src/ui2/Div.js

@@ -0,0 +1,19 @@
+import Control from './Control';
+
+/**
+ * Div
+ * @param {*} options 
+ */
+function Div(options) {
+    Control.call(this, options);
+};
+
+Div.prototype = Object.create(Control.prototype);
+Div.prototype.constructor = Div;
+
+Div.prototype.render = function () {
+    this.dom = document.createElement('div');
+    this.parent.appendChild(this.dom);
+};
+
+export default Div;

src/ui2/HorizontalRule.js

@@ -0,0 +1,20 @@
+import Control from './Control';
+
+/**
+ * 水平线
+ * @param {*} options 
+ */
+function HorizontalRule(options) {
+    Control.call(this, options);
+};
+
+HorizontalRule.prototype = Object.create(Control.prototype);
+HorizontalRule.prototype.constructor = HorizontalRule;
+
+HorizontalRule.prototype.render = function () {
+    this.dom = document.createElement('hr');
+    this.dom.className = 'HorizontalRule';
+    this.parent.appendChild(this.dom);
+};
+
+export default HorizontalRule;

src/ui2/Input.js

@@ -0,0 +1,27 @@
+import Control from './Control';
+
+/**
+ * 输入框
+ * @param {*} options 
+ */
+function Input(options) {
+    Control.call(this, options);
+};
+
+Input.prototype = Object.create(Control.prototype);
+Input.prototype.constructor = Input;
+
+Input.prototype.render = function () {
+    this.dom = document.createElement('input');
+    this.dom.className = 'Input';
+    this.dom.style.padding = '2px';
+    this.dom.style.border = '1px solid transparent';
+
+    this.dom.addEventListener('keydown', function (event) {
+        event.stopPropagation();
+    }, false);
+
+    this.parent.appendChild(this.dom);
+};
+
+export default Input;

src/ui2/Integer.js

@@ -0,0 +1,124 @@
+import Control from './Control';
+
+/**
+ * Div
+ * @param {*} options 
+ */
+function Div(options) {
+    Control.call(this, options);
+};
+
+Div.prototype = Object.create(Control.prototype);
+Div.prototype.constructor = Div;
+
+Div.prototype.render = function () {
+    var _this = this;
+
+    this.dom = document.createElement('input');
+    this.dom.className = 'Number';
+    this.dom.value = '0';
+
+    this.dom.addEventListener('keydown', function (event) {
+        event.stopPropagation();
+    }, false);
+
+    this.value = 0;
+
+    this.min = - Infinity;
+    this.max = Infinity;
+
+    this.step = 1;
+
+    this.setValue(number);
+
+    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 = 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;
+        value = Math.min(scope.max, Math.max(scope.min, value)) | 0;
+
+        if (currentValue !== value) {
+
+            scope.setValue(value);
+            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();
+
+        }
+
+    }
+
+    function onChange(event) {
+
+        scope.setValue(dom.value);
+
+    }
+
+    function onFocus(event) {
+
+        dom.style.backgroundColor = '';
+        dom.style.cursor = '';
+
+    }
+
+    function onBlur(event) {
+
+        dom.style.backgroundColor = 'transparent';
+        dom.style.cursor = 'col-resize';
+
+    }
+
+    onBlur();
+
+    dom.addEventListener('mousedown', onMouseDown, false);
+    dom.addEventListener('change', onChange, false);
+    dom.addEventListener('focus', onFocus, false);
+    dom.addEventListener('blur', onBlur, false);
+    
+    this.parent.appendChild(this.dom);
+};
+
+export default Div;

src/ui2/Modal.js

@@ -0,0 +1,43 @@
+import Control from './Control';
+
+/**
+ * 模态框
+ * @param {*} options 
+ */
+function Modal(options) {
+    Control.call(this, options);
+};
+
+Modal.prototype = Object.create(Control.prototype);
+Modal.prototype.constructor = Modal;
+
+Modal.prototype.render = function () {
+    var scope = this;
+
+    var dom = document.createElement('div');
+
+    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.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);
+};
+
+export default Modal;