Editor: Layout and texture widgets improvements.

editor/index.html

@@ -5,6 +5,10 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
+			* {
+				vertical-align: middle;
+			}
+
 			body {
 				font-family: Arial, sans-serif;
 				font-size: 14px;
@@ -20,10 +24,9 @@
 			button {
 
 				position: relative;
-				margin-top: -2px;
 
 			}
-
+			
 			.menubar {
 				background-color: #eee;
 				padding: 0px;
@@ -179,6 +182,20 @@
 
 			//
 
+			document.addEventListener( 'dragover', function ( event ) {
+
+				event.preventDefault();
+				event.dataTransfer.dropEffect = 'copy';
+
+			}, false );
+
+			document.addEventListener( 'drop', function ( event ) {
+
+				event.preventDefault();
+				editor.loader.loadFile( event.dataTransfer.files[ 0 ] );
+
+			}, false );
+
 			document.addEventListener( 'keydown', function ( event ) {
 
 				switch ( event.keyCode ) {

editor/js/Loader.js

@@ -3,20 +3,6 @@ var Loader = function ( editor ) {
 	var scope = this;
 	var signals = editor.signals;
 
-	document.addEventListener( 'dragover', function ( event ) {
-
-		event.preventDefault();
-		event.dataTransfer.dropEffect = 'copy';
-
-	}, false );
-
-	document.addEventListener( 'drop', function ( event ) {
-
-		event.preventDefault();
-		scope.loadFile( event.dataTransfer.files[ 0 ] );
-
-	}, false );
-
 	this.loadLocalStorage = function () {
 
 		if ( localStorage.threejsEditor !== undefined ) {

editor/js/libs/ui.js

@@ -131,7 +131,7 @@ UI.Text = function ( text ) {
 	dom.className = 'Text';
 	dom.style.cursor = 'default';
 	dom.style.display = 'inline-block';
-	dom.style.verticalAlign = 'top';
+	dom.style.verticalAlign = 'middle';
 
 	this.dom = dom;
 	this.setValue( text );
@@ -166,8 +166,6 @@ UI.Input = function () {
 	var dom = document.createElement( 'input' );
 	dom.className = 'Input';
 	dom.style.padding = '2px';
-	dom.style.marginTop = '-2px';
-	dom.style.marginLeft = '-2px';
 	dom.style.border = '1px solid #ccc';
 
 	dom.addEventListener( 'keydown', function ( event ) {
@@ -210,8 +208,6 @@ UI.TextArea = function () {
 	var dom = document.createElement( 'textarea' );
 	dom.className = 'TextArea';
 	dom.style.padding = '2px';
-	dom.style.marginTop = '-2px';
-	dom.style.marginLeft = '-2px';
 	dom.style.border = '1px solid #ccc';
 
 	dom.addEventListener( 'keydown', function ( event ) {
@@ -532,8 +528,6 @@ UI.Number = function ( number ) {
 	dom.style.fontSize = '12px';
 	dom.style.backgroundColor = 'transparent';
 	dom.style.border = '1px solid transparent';
-	dom.style.marginTop = '-2px';
-	dom.style.marginLegt = '-2px';
 	dom.style.padding = '2px';
 	dom.style.cursor = 'col-resize';
 	dom.value = '0.00';
@@ -694,8 +688,6 @@ UI.Integer = function ( number ) {
 	dom.style.fontSize = '12px';
 	dom.style.backgroundColor = 'transparent';
 	dom.style.border = '1px solid transparent';
-	dom.style.marginTop = '-2px';
-	dom.style.marginLegt = '-2px';
 	dom.style.padding = '2px';
 	dom.style.cursor = 'col-resize';
 	dom.value = '0.00';

editor/js/libs/ui.three.js

@@ -2,29 +2,47 @@
 
 UI.Texture = function () {
 
-    UI.Element.call( this );
+	UI.Element.call( this );
 
 	var scope = this;
 
+	var dom = document.createElement( 'span' );
+
+	var input = document.createElement( 'input' );
+	input.type = 'file';
+	input.addEventListener( 'change', function ( event ) {
+
+		loadFile( event.target.files[ 0 ] );
+
+	} );
+
 	var canvas = document.createElement( 'canvas' );
-	canvas.width = 64;
+	canvas.width = 32;
 	canvas.height = 16;
 	canvas.style.cursor = 'pointer';
+	canvas.style.marginRight = '5px';
+	canvas.style.border = '1px solid #888';
 	canvas.addEventListener( 'click', function ( event ) {
 
 		input.click();
 
 	}, false );
+	canvas.addEventListener( 'drop', function ( event ) {
 
-	var context = canvas.getContext( '2d' );
-	context.fillStyle = 'black';
-	context.fillRect( 0, 0, canvas.width, canvas.height );
+		event.preventDefault();
+		event.stopPropagation();
+		loadFile( event.dataTransfer.files[ 0 ] );
 
-	var input = document.createElement( 'input' );
-	input.type = 'file';
-	input.addEventListener( 'change', function ( event ) {
+	}, false );
+	dom.appendChild( canvas );
 
-		var file = event.target.files[ 0 ];
+	var name = document.createElement( 'input' );
+	name.disabled = true;
+	name.style.width = '64px';
+	name.style.border = '1px solid #ccc';
+	dom.appendChild( name );
+
+	var loadFile = function ( file ) {
 
 		if ( file.type.match( 'image.*' ) ) {
 
@@ -34,12 +52,11 @@ UI.Texture = function () {
 				var image = document.createElement( 'img' );
 				image.addEventListener( 'load', function( event ) {
 
-					var scale = 64 / this.width;
-
-					context.drawImage( this, 0, 0, this.width * scale, this.height * scale );
+					var texture = new THREE.Texture( this );
+					texture.sourceFile = file.name;
+					texture.needsUpdate = true;
 
-					scope.texture = new THREE.Texture( this );
-					scope.texture.needsUpdate = true;
+					scope.setValue( texture );
 
 					if ( scope.onChangeCallback ) scope.onChangeCallback();
 
@@ -53,9 +70,9 @@ UI.Texture = function () {
 
 		}
 
-	} );
+	}
 
-	this.dom = canvas;
+	this.dom = dom;
 	this.texture = null;
 	this.onChangeCallback = null;
 
@@ -65,17 +82,44 @@ UI.Texture = function () {
 
 UI.Texture.prototype = Object.create( UI.Element.prototype );
 
-UI.Texture.prototype.textureNameMap = {};
-
 UI.Texture.prototype.getValue = function () {
 
 	return this.texture;
 
 };
 
-UI.Texture.prototype.setValue = function ( value ) {
+UI.Texture.prototype.setValue = function ( texture ) {
+
+	var canvas = this.dom.children[ 0 ];
+	var name = this.dom.children[ 1 ];
+	var context = canvas.getContext( '2d' );
+
+	if ( texture !== null ) {
+
+		var image = texture.image;
+
+		if ( image.width > 0 ) {
+
+			name.value = texture.sourceFile;
+
+			var scale = canvas.width / image.width;
+			context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
+
+		} else {
+
+			name.value = texture.sourceFile + ' (error)';
+			context.clearRect( 0, 0, canvas.width, canvas.height );
+
+		}
+
+	} else {
+
+		name.value = '';
+		context.clearRect( 0, 0, canvas.width, canvas.height );
 
-	this.texture = value;
+	}
+
+	this.texture = texture;
 
 };
 
@@ -96,25 +140,43 @@ UI.CubeTexture = function () {
 
 	var scope = this;
 
+	var dom = document.createElement( 'span' );
+
+	var input = document.createElement( 'input' );
+	input.type = 'file';
+	input.addEventListener( 'change', function ( event ) {
+
+		loadFile( event.target.files[ 0 ] );
+
+	}, false );
+
 	var canvas = document.createElement( 'canvas' );
-	canvas.width = 64;
+	canvas.width = 32;
 	canvas.height = 16;
 	canvas.style.cursor = 'pointer';
+	canvas.style.marginRight = '5px';
+	canvas.style.border = '1px solid #888';
 	canvas.addEventListener( 'click', function ( event ) {
 
 		input.click();
 
 	}, false );
+	canvas.addEventListener( 'drop', function ( event ) {
 
-	var context = canvas.getContext( '2d' );
-	context.fillStyle = 'black';
-	context.fillRect( 0, 0, canvas.width, canvas.height );
+		event.preventDefault();
+		event.stopPropagation();
+		loadFile( event.dataTransfer.files[ 0 ] );
 
-	var input = document.createElement( 'input' );
-	input.type = 'file';
-	input.addEventListener( 'change', function ( event ) {
+	}, false );
+	dom.appendChild( canvas );
+
+	var name = document.createElement( 'input' );
+	name.disabled = true;
+	name.style.width = '64px';
+	name.style.border = '1px solid #ccc';
+	dom.appendChild( name );
 
-		var file = event.target.files[ 0 ];
+	var loadFile = function ( file ) {
 
 		if ( file.type.match( 'image.*' ) ) {
 
@@ -124,12 +186,13 @@ UI.CubeTexture = function () {
 				var image = document.createElement( 'img' );
 				image.addEventListener( 'load', function( event ) {
 
-					var scale = 64 / this.width;
+					var array = [ this, this, this, this, this, this ];
 
-					context.drawImage( this, 0, 0, this.width * scale, this.height * scale );
+					var texture = new THREE.Texture( array, new THREE.CubeReflectionMapping() );
+					texture.sourceFile = file.name;
+					texture.needsUpdate = true;
 
-					scope.texture = new THREE.Texture( [ this, this, this, this, this, this ], new THREE.CubeReflectionMapping() )
-					scope.texture.needsUpdate = true;
+					scope.setValue( texture );
 
 					if ( scope.onChangeCallback ) scope.onChangeCallback();
 
@@ -141,9 +204,9 @@ UI.CubeTexture = function () {
 
 		}
 
-	}, false );
+	};
 
-	this.dom = canvas;
+	this.dom = dom;
 	this.texture = null;
 	this.onChangeCallback = null;
 
@@ -159,9 +222,38 @@ UI.CubeTexture.prototype.getValue = function () {
 
 };
 
-UI.CubeTexture.prototype.setValue = function ( value ) {
+UI.CubeTexture.prototype.setValue = function ( texture ) {
+
+	var canvas = this.dom.children[ 0 ];
+	var name = this.dom.children[ 1 ];
+	var context = canvas.getContext( '2d' );
+
+	if ( texture !== null ) {
+
+		var image = texture.image[ 0 ];
+
+		if ( image.width > 0 ) {
+
+			name.value = texture.sourceFile;
+
+			var scale = canvas.width / image.width;
+			context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
+
+		} else {
+
+			name.value = texture.sourceFile + ' (error)';
+			context.clearRect( 0, 0, canvas.width, canvas.height );
+
+		}
+
+	} else {
+
+		name.value = '';
+		context.clearRect( 0, 0, canvas.width, canvas.height );
+
+	}
 
-	this.texture = value;
+	this.texture = texture;
 
 };