From 6c2ccea448e6809d390ff7a59adfa5fc3085f1bc Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Tue, 19 Jun 2018 22:05:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E9=87=8F=E4=BF=AE=E6=94=B9=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui2/Break.js | 5 +- src/ui2/Button.js | 7 +- src/ui2/Checkbox.js | 18 ++++++ src/ui2/Color.js | 18 ++++++ src/ui2/Integer.js | 103 ++++++++++++++++-------------- src/ui2/Modal.js | 48 +++++++++----- src/ui2/Number.js | 152 ++++++++++++++++++++++++++++++++++++++++++++ src/ui2/Select.js | 62 ++++++++++++++++++ src/ui2/UI.js | 21 ++++++ 9 files changed, 366 insertions(+), 68 deletions(-) create mode 100644 src/ui2/Number.js diff --git a/src/ui2/Break.js b/src/ui2/Break.js index 5b63fda1..4884cb5b 100644 --- a/src/ui2/Break.js +++ b/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 () { diff --git a/src/ui2/Button.js b/src/ui2/Button.js index 611a2531..73b453f9 100644 --- a/src/ui2/Button.js +++ b/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; \ No newline at end of file diff --git a/src/ui2/Checkbox.js b/src/ui2/Checkbox.js index 19b83951..136d991e 100644 --- a/src/ui2/Checkbox.js +++ b/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; \ No newline at end of file diff --git a/src/ui2/Color.js b/src/ui2/Color.js index 38380fbe..403ee3a6 100644 --- a/src/ui2/Color.js +++ b/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; \ No newline at end of file diff --git a/src/ui2/Integer.js b/src/ui2/Integer.js index 2cf848ae..09fdcda2 100644 --- a/src/ui2/Integer.js +++ b/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; \ No newline at end of file +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; \ No newline at end of file diff --git a/src/ui2/Modal.js b/src/ui2/Modal.js index f60f172d..98ab9c0c 100644 --- a/src/ui2/Modal.js +++ b/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; \ No newline at end of file diff --git a/src/ui2/Number.js b/src/ui2/Number.js new file mode 100644 index 00000000..402e7cf6 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui2/Select.js b/src/ui2/Select.js index e69de29b..60dbe2a9 100644 --- a/src/ui2/Select.js +++ b/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; \ No newline at end of file diff --git a/src/ui2/UI.js b/src/ui2/UI.js index 6a51cd97..a73c61d9 100644 --- a/src/ui2/UI.js +++ b/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; \ No newline at end of file