diff --git a/src/ui/Text.js b/src/ui/Text.js index 90e09b95..d2e304e1 100644 --- a/src/ui/Text.js +++ b/src/ui/Text.js @@ -1,6 +1,5 @@ import Control from './Control'; - -var ID = -1; +import XType from './XType'; /** * 文本框 @@ -9,10 +8,12 @@ var ID = -1; function Text(options) { Control.call(this, options); options = options || {}; - this.id = options.id || 'Text' + ID--; + + this.id = options.id || null; this.text = options.text || 'Text'; this.cls = options.cls || 'Text'; this.style = options.style || null; + this.onClick = options.onClick || null; }; @@ -21,16 +22,21 @@ Text.prototype.constructor = Text; Text.prototype.render = function () { this.dom = document.createElement('span'); + if (this.id) { this.dom.id = this.id; } + this.dom.className = this.cls; + if (this.style) { this.dom.style = this.style; } + this.dom.style.cursor = 'default'; this.dom.style.display = 'inline-block'; this.dom.style.verticalAlign = 'middle'; + this.setValue(this.text); if (this.onClick) { @@ -51,4 +57,6 @@ Text.prototype.setValue = function (value) { return this; }; +XType.add('text', Text); + export default Text; \ No newline at end of file diff --git a/src/ui/TextArea.js b/src/ui/TextArea.js index 554c9461..70026000 100644 --- a/src/ui/TextArea.js +++ b/src/ui/TextArea.js @@ -1,4 +1,5 @@ import Control from './Control'; +import XType from './XType'; /** * 文本域 @@ -7,8 +8,12 @@ import Control from './Control'; function TextArea(options) { Control.call(this, options); options = options || {}; + + this.id = options.id || null; this.value = options.value || ''; + this.cls = options.cls || 'TextArea'; this.style = options.style || null; + this.onChange = options.onChange || null; this.onKeyUp = options.onKeyUp || null; }; @@ -18,7 +23,12 @@ TextArea.prototype.constructor = TextArea; TextArea.prototype.render = function () { this.dom = document.createElement('textarea'); - this.dom.className = 'TextArea'; + + if (this.id) { + this.dom.id = this.id; + } + + this.dom.className = this.cls; if (this.style) { this.dom.style = this.style; @@ -65,4 +75,6 @@ TextArea.prototype.setValue = function (value) { return this; }; +XType.add('textarea', TextArea); + export default TextArea; \ No newline at end of file diff --git a/src/ui/Texture.js b/src/ui/Texture.js index f31a9972..e343eaa4 100644 --- a/src/ui/Texture.js +++ b/src/ui/Texture.js @@ -1,4 +1,5 @@ import Control from './Control'; +import XType from './XType'; /** * 纹理 @@ -6,7 +7,10 @@ import Control from './Control'; */ function Texture(options) { Control.call(this, options); + options = options || {}; + this.mapping = options.mapping || THREE.UVMapping; + this.onChange = options.onChange || null; } @@ -22,9 +26,11 @@ Texture.prototype.render = function () { this.input.type = 'file'; var _this = this; + this.input.addEventListener('change', function (event) { _this.loadFile(event.target.files[0]); }); + this.form.appendChild(this.input); this.canvas = document.createElement('canvas'); @@ -53,6 +59,7 @@ Texture.prototype.render = function () { this.dom.appendChild(this.name); this.parent.appendChild(this.dom); + this.texture = null; }; @@ -61,7 +68,6 @@ Texture.prototype.getValue = function () { }; Texture.prototype.setValue = function (texture) { - var canvas = this.dom.children[0]; var name = this.dom.children[1]; var context = canvas.getContext('2d'); @@ -80,14 +86,11 @@ Texture.prototype.setValue = function (texture) { } } else { - name.value = ''; if (context !== null) { - // Seems like context can be null if the canvas is not visible context.clearRect(0, 0, canvas.width, canvas.height); - } } @@ -95,16 +98,16 @@ Texture.prototype.setValue = function (texture) { }; Texture.prototype.loadFile = function (file) { - var _this = this; if (file.type.match('image.*')) { - var reader = new FileReader(); + if (file.type === 'image/targa') { reader.addEventListener('load', function (event) { var canvas = new THREE.TGALoader().parse(event.target.result); var texture = new THREE.CanvasTexture(canvas, _this.mapping); + texture.sourceFile = file.name; _this.setValue(texture); @@ -115,14 +118,11 @@ Texture.prototype.loadFile = function (file) { }, false); reader.readAsArrayBuffer(file); - } else { - reader.addEventListener('load', function (event) { - var image = document.createElement('img'); - image.addEventListener('load', function (event) { + image.addEventListener('load', function (event) { var texture = new THREE.Texture(this, _this.mapping); texture.sourceFile = file.name; texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat; @@ -133,11 +133,9 @@ Texture.prototype.loadFile = function (file) { if (_this.onChange) { _this.onChange(); } - }, false); image.src = event.target.result; - }, false); reader.readAsDataURL(file); @@ -147,4 +145,6 @@ Texture.prototype.loadFile = function (file) { this.form.reset(); }; +XType.add('texture', Texture); + export default Texture; \ No newline at end of file diff --git a/src/ui/UI.js b/src/ui/UI.js index 6c7e8084..c4fbc83d 100644 --- a/src/ui/UI.js +++ b/src/ui/UI.js @@ -47,14 +47,11 @@ const UI = { Row: Row, Select: Select, Span: Span, - - // ui.js Text: Text, TextArea: TextArea, - Modal: Modal, - - // ui.three.js Texture: Texture, + + Modal: Modal, Outliner: Outliner }; diff --git a/src/ui/Window.js b/src/ui/Window.js deleted file mode 100644 index e69de29b..00000000 diff --git a/test/ui/19 TextTest.html b/test/ui/19 TextTest.html new file mode 100644 index 00000000..a636a3cb --- /dev/null +++ b/test/ui/19 TextTest.html @@ -0,0 +1,26 @@ + + + + + + + Text Test + + + + + + + + + \ No newline at end of file diff --git a/test/ui/20 TextAreaTest.html b/test/ui/20 TextAreaTest.html new file mode 100644 index 00000000..49e6e361 --- /dev/null +++ b/test/ui/20 TextAreaTest.html @@ -0,0 +1,26 @@ + + + + + + + TextArea Test + + + + + + + + + \ No newline at end of file diff --git a/test/ui/21 TextureTest.html b/test/ui/21 TextureTest.html new file mode 100644 index 00000000..de641bfb --- /dev/null +++ b/test/ui/21 TextureTest.html @@ -0,0 +1,26 @@ + + + + + + + Texture Test + + + + + + + + + + \ No newline at end of file