diff --git a/src/ui/Integer.js b/src/ui/Integer.js index 0fca8ad8..a15fd417 100644 --- a/src/ui/Integer.js +++ b/src/ui/Integer.js @@ -92,7 +92,7 @@ function Integer(number) { function onChange(event) { scope.setValue(dom.value); - + } function onFocus(event) { diff --git a/src/ui2/Div.js b/src/ui2/Div.js new file mode 100644 index 00000000..79fddcc6 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui2/HorizontalRule.js b/src/ui2/HorizontalRule.js new file mode 100644 index 00000000..e83ef228 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui2/Input.js b/src/ui2/Input.js new file mode 100644 index 00000000..208848a9 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui2/Integer.js b/src/ui2/Integer.js new file mode 100644 index 00000000..2cf848ae --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui2/Modal.js b/src/ui2/Modal.js new file mode 100644 index 00000000..f60f172d --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui2/Outliner.js b/src/ui2/Outliner.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/Panel.js b/src/ui2/Panel.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/Row.js b/src/ui2/Row.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/Select.js b/src/ui2/Select.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/Span.js b/src/ui2/Span.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/Text.js b/src/ui2/Text.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/TextArea.js b/src/ui2/TextArea.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/Texture.js b/src/ui2/Texture.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/UI.js b/src/ui2/UI.js new file mode 100644 index 00000000..e69de29b diff --git a/src/ui2/Window.js b/src/ui2/Window.js new file mode 100644 index 00000000..e69de29b