Editor: refactor loadFile logic in UITexture

editor/js/libs/ui.three.js

@@ -55,80 +55,71 @@ function UITexture( mapping ) {
 
 	function loadFile( file ) {
 
-		if ( file.type.match( 'image.*' ) ) {
+		var extension = file.name.split( '.' ).pop().toLowerCase()
+		var reader = new FileReader();
 
-			var reader = new FileReader();
+		if ( extension === 'hdr' ) {
 
-			if ( file.type === 'image/targa' ) {
-
-				reader.addEventListener( 'load', function ( event ) {
-
-					var canvas = new TGALoader().parse( event.target.result );
+			reader.addEventListener( 'load', function ( event ) {
 
-					var texture = new THREE.CanvasTexture( canvas, mapping );
-					texture.sourceFile = file.name;
+				// assuming RGBE/Radiance HDR iamge format
 
-					scope.setValue( texture );
+				var loader = new RGBELoader().setDataType( THREE.UnsignedByteType );
+				loader.load( event.target.result, function ( hdrTexture ) {
 
-					if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
+					hdrTexture.sourceFile = file.name;
+					hdrTexture.isHDRTexture = true;
 
-				}, false );
+					scope.setValue( hdrTexture );
 
-				reader.readAsArrayBuffer( file );
+					if ( scope.onChangeCallback ) scope.onChangeCallback( hdrTexture );
 
-			} else {
+				} );
 
-				reader.addEventListener( 'load', function ( event ) {
+			} );
 
-					var image = document.createElement( 'img' );
-					image.addEventListener( 'load', function () {
+			reader.readAsDataURL( file );
 
-						var texture = new THREE.Texture( this, mapping );
-						texture.sourceFile = file.name;
-						texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
-						texture.needsUpdate = true;
+		} else if ( extension === 'tga' ) {
 
-						scope.setValue( texture );
+			reader.addEventListener( 'load', function ( event ) {
 
-						if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
+				var canvas = new TGALoader().parse( event.target.result );
 
-					}, false );
+				var texture = new THREE.CanvasTexture( canvas, mapping );
+				texture.sourceFile = file.name;
 
-					image.src = event.target.result;
+				scope.setValue( texture );
 
-				}, false );
+				if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
 
-				reader.readAsDataURL( file );
+			}, false );
 
-			}
+			reader.readAsArrayBuffer( file );
 
-		} else {
+		} else if ( file.type.match( 'image.*' ) ) {
 
-			var reader = new FileReader();
 			reader.addEventListener( 'load', function ( event ) {
 
-				if ( file.name.split( '.' ).pop() === 'hdr' ) {
-
-					// assuming RGBE/Radiance HDR iamge format
-
-					var loader = new RGBELoader().setDataType( THREE.UnsignedByteType );
-					loader.load( event.target.result, function ( hdrTexture ) {
+				var image = document.createElement( 'img' );
+				image.addEventListener( 'load', function () {
 
-						hdrTexture.sourceFile = file.name;
-						hdrTexture.isHDRTexture = true;
+					var texture = new THREE.Texture( this, mapping );
+					texture.sourceFile = file.name;
+					texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
+					texture.needsUpdate = true;
 
-						scope.setValue( hdrTexture );
+					scope.setValue( texture );
 
-						if ( scope.onChangeCallback ) scope.onChangeCallback( hdrTexture );
+					if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
 
-					} );
+				}, false );
 
-				}
+				image.src = event.target.result;
 
-			} );
+			}, false );
 
 			reader.readAsDataURL( file );
-
 		}
 
 		form.reset();
@@ -157,6 +148,14 @@ UITexture.prototype.setValue = function ( texture ) {
 	var canvas = this.dom.children[ 0 ];
 	var context = canvas.getContext( '2d' );
 
+	// Seems like context can be null if the canvas is not visible
+	if ( context ) {
+
+		// Always clear the context before set new texture, because new texture may has transparency
+		context.clearRect( 0, 0, canvas.width, canvas.height );
+
+	}
+
 	if ( texture !== null ) {
 
 		var image = texture.image;
@@ -180,7 +179,6 @@ UITexture.prototype.setValue = function ( texture ) {
 		} else {
 
 			canvas.title = texture.sourceFile + ' (error)';
-			context.clearRect( 0, 0, canvas.width, canvas.height );
 
 		}
 
@@ -188,14 +186,6 @@ UITexture.prototype.setValue = function ( texture ) {
 
 		canvas.title = 'empty';
 
-		if ( context !== null ) {
-
-			// Seems like context can be null if the canvas is not visible
-
-			context.clearRect( 0, 0, canvas.width, canvas.height );
-
-		}
-
 	}
 
 	this.texture = texture;