Editor: Working menu system.

editor/index.html

@@ -59,6 +59,7 @@
 				// actions
 
 				removeSelectedObject: new SIGNALS.Signal(),
+				exportGeometry: new SIGNALS.Signal(),
 				exportScene: new SIGNALS.Signal(),
 				toggleHelpers: new SIGNALS.Signal(),
 				resetScene: new SIGNALS.Signal(),

editor/js/UI.js

@@ -160,6 +160,16 @@ UI.Element.prototype = {
 
 	//
 
+	setFloat: function () {
+
+		this.setStyle( 'float', arguments );
+
+		return this;
+
+	},
+
+	//
+
 	setFontSize: function () {
 
 		this.setStyle( 'fontSize', arguments );
@@ -210,6 +220,26 @@ UI.Element.prototype = {
 
 	},
 
+	//
+
+	setCursor: function () {
+
+		this.setStyle( 'cursor', arguments );
+
+		return this;
+
+	},
+
+	// content
+
+	setTextContent: function ( value ) {
+
+		this.dom.textContent = value;
+
+		return this;
+
+	},
+
 	// events
 
 	onMouseOver: function ( callback ) {

editor/js/ui/Menubar.Add.js

@@ -1,13 +1,42 @@
 Menubar.Add = function ( signals ) {
 
-	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#ccc' );
-	container.setWidth( '120px' );
-	container.setPadding( '10px' );
-
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Sphere' ).setColor( '#666' ) ) );
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Cube' ).setColor( '#666' ) ) );
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Plane' ).setColor( '#666' ) ) );
+	var container = new UI.Panel();
+	container.setFloat( 'left' );
+	container.setWidth( '50px' );
+	container.setCursor( 'pointer' );
+	container.onMouseOver( function () { options.setDisplay( '' ) } );
+	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
+	container.onClick( function () { options.setDisplay( 'none' ) } );
+
+	var title = new UI.Panel();
+	title.setTextContent( 'Add' ).setColor( '#666' );
+	title.setMargin( '0px' );
+	title.setPadding( '8px' )
+	container.add( title );
+
+	//
+
+	var options = new UI.Panel();
+	options.setWidth( '140px' );
+	options.setBackgroundColor( '#ddd' );
+	options.setPadding( '10px' );
+	options.setDisplay( 'none' );
+	container.add( options );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Sphere' ).setColor( '#666' );
+	option.onClick( function () { alert( 'Sphere' ) } );
+	options.add( option );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Cube' ).setColor( '#666' );
+	option.onClick( function () { alert( 'Cube' ) } );
+	options.add( option );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Plane' ).setColor( '#666' );
+	option.onClick( function () { alert( 'Plane' ) } );
+	options.add( option );
 
 	return container;
 

editor/js/ui/Menubar.Edit.js

@@ -1,11 +1,32 @@
 Menubar.Edit = function ( signals ) {
 
-	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#ccc' );
-	container.setWidth( '120px' );
-	container.setPadding( '10px' );
+	var container = new UI.Panel();
+	container.setFloat( 'left' );
+	container.setWidth( '50px' );
+	container.setCursor( 'pointer' );
+	container.onMouseOver( function () { options.setDisplay( '' ) } );
+	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
+	container.onClick( function () { options.setDisplay( 'none' ) } );
 
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Delete' ).setColor( '#666' ) ) );
+	var title = new UI.Panel();
+	title.setTextContent( 'Edit' ).setColor( '#666' );
+	title.setMargin( '0px' );
+	title.setPadding( '8px' )
+	container.add( title );
+
+	//
+
+	var options = new UI.Panel();
+	options.setWidth( '140px' );
+	options.setBackgroundColor( '#ddd' );
+	options.setPadding( '10px' );
+	options.setDisplay( 'none' );
+	container.add( options );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Delete' ).setColor( '#666' );
+	option.onClick( function () { alert( 'Delete' ) } );
+	options.add( option );
 
 	return container;
 

editor/js/ui/Menubar.File.js

@@ -1,15 +1,52 @@
 Menubar.File = function ( signals ) {
 
-	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#ccc' );
-	container.setWidth( '120px' );
-	container.setPadding( '10px' );
-
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Open' ).setColor( '#666' ) ) );
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Reset' ).setColor( '#666' ) ) );
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export Geometry' ).setColor( '#666' ) ) );
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export Scene' ).setColor( '#666' ) ) );
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'Export OBJ' ).setColor( '#666' ) ) );
+	var container = new UI.Panel();
+	container.setFloat( 'left' );
+	container.setWidth( '50px' );
+	container.setCursor( 'pointer' );
+	container.onMouseOver( function () { options.setDisplay( '' ) } );
+	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
+	container.onClick( function () { options.setDisplay( 'none' ) } );
+
+	var title = new UI.Panel();
+	title.setTextContent( 'File' ).setColor( '#666' );
+	title.setMargin( '0px' );
+	title.setPadding( '8px' )
+	container.add( title );
+
+	//
+
+	var options = new UI.Panel();
+	options.setWidth( '140px' );
+	options.setBackgroundColor( '#ddd' );
+	options.setPadding( '10px' );
+	options.setDisplay( 'none' );
+	container.add( options );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Open' ).setColor( '#666' );
+	option.onClick( function () { alert( 'Open' ) } );
+	options.add( option );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Reset' ).setColor( '#666' );
+	option.onClick( function () { alert( 'Reset' ) } );
+	options.add( option );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Export Geometry' ).setColor( '#666' );
+	option.onClick( function () { signals.exportGeometry.dispatch(); } );
+	options.add( option );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Export Scene' ).setColor( '#666' );
+	option.onClick( function () { signals.exportScene.dispatch(); } );
+	options.add( option );
+
+	var option = new UI.Panel();
+	option.setTextContent( 'Export OBJ' ).setColor( '#666' );
+	option.onClick( function () { alert( 'Export OBJ' ) } );
+	options.add( option );
 
 	return container;
 

editor/js/ui/Menubar.Help.js

@@ -1,11 +1,32 @@
 Menubar.Help = function ( signals ) {
 
-	var container = new UI.Panel( 'absolute' );
-	container.setBackgroundColor( '#ccc' );
-	container.setWidth( '120px' );
-	container.setPadding( '10px' );
+	var container = new UI.Panel();
+	container.setFloat( 'left' );
+	container.setWidth( '50px' );
+	container.setCursor( 'pointer' );
+	container.onMouseOver( function () { options.setDisplay( '' ) } );
+	container.onMouseOut( function () { options.setDisplay( 'none' ) } );
+	container.onClick( function () { options.setDisplay( 'none' ) } );
 
-	container.add( new UI.Panel().add( new UI.Text().setValue( 'About' ).setColor( '#666' ) ) );
+	var title = new UI.Panel();
+	title.setTextContent( 'Help' ).setColor( '#666' );
+	title.setMargin( '0px' );
+	title.setPadding( '8px' )
+	container.add( title );
+
+	//
+
+	var options = new UI.Panel();
+	options.setWidth( '140px' );
+	options.setBackgroundColor( '#ddd' );
+	options.setPadding( '10px' );
+	options.setDisplay( 'none' );
+	container.add( options );
+
+	var option = new UI.Panel();
+	option.add( new UI.Text().setValue( 'About' ).setColor( '#666' ) );
+	option.onClick( function () { alert( 'About' ) } );
+	options.add( option );
 
 	return container;
 

editor/js/ui/Menubar.js

@@ -4,84 +4,10 @@ var Menubar = function ( signals ) {
 	container.setBackgroundColor( '#eee' );
 	container.setPadding( '0px' ).setMargin( '0px' );
 
-	var options = new UI.Panel();
-	options.setBackgroundColor( '#eee' );
-	options.setPadding( '8px' );
-
-	// File
-
-	var optionFile = new UI.Text().setValue( 'File' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionFileMouseOver );
-	options.add( optionFile );
-
-	var optionFileMenu = new Menubar.File().setTop( '32px' ).setDisplay( 'none' ).onMouseOut( closeAll );
-	container.add( optionFileMenu );
-
-	// Edit
-
-	var optionEdit = new UI.Text().setValue( 'Edit' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionEditMouseOver );
-	options.add( optionEdit );
-
-	var optionEditMenu = new Menubar.Edit().setTop( '32px' ).setLeft( '50px' ).setDisplay( 'none' ).onMouseOut( closeAll );
-	container.add( optionEditMenu );
-
-	// Add
-
-	var optionAdd = new UI.Text().setValue( 'Add' ).setColor( '#666' ).setMarginRight( '20px' ).onMouseOver( onOptionAddMouseOver );
-	options.add( optionAdd );
-
-	var optionAddMenu = new Menubar.Add().setTop( '32px' ).setLeft( '90px' ).setDisplay( 'none' ).onMouseOut( closeAll );
-	container.add( optionAddMenu );
-
-
-	// Help
-
-	var optionHelp = new UI.Text().setValue( 'Help' ).setColor( '#666' ).onMouseOver( onOptionHelpMouseOver );
-	options.add( optionHelp );
-
-	var optionHelpMenu = new Menubar.Help().setTop( '32px' ).setLeft( '140px' ).setDisplay( 'none' ).onMouseOut( closeAll );
-	container.add( optionHelpMenu );
-
-
-	//
-
-	container.add( options );
-
-	function closeAll() {
-
-		optionFileMenu.setDisplay( 'none' );
-		optionEditMenu.setDisplay( 'none' );
-		optionAddMenu.setDisplay( 'none' );
-		optionHelpMenu.setDisplay( 'none' );
-
-	}
-
-	function onOptionFileMouseOver() {
-
-		closeAll();
-		optionFileMenu.setDisplay( '' );
-
-	}
-
-	function onOptionEditMouseOver() {
-
-		closeAll();
-		optionEditMenu.setDisplay( '' );
-
-	}
-
-	function onOptionAddMouseOver() {
-
-		closeAll();
-		optionAddMenu.setDisplay( '' );
-
-	}
-
-	function onOptionHelpMouseOver() {
-
-		closeAll();
-		optionHelpMenu.setDisplay( '' );
-
-	}
+	container.add( new Menubar.File( signals ) );
+	container.add( new Menubar.Edit( signals ) );
+	container.add( new Menubar.Add( signals ) );
+	container.add( new Menubar.Help( signals ) );
 
 	return container;
 

editor/js/ui/Sidebar.Geometry.js

@@ -28,7 +28,6 @@ Sidebar.Geometry = function ( signals ) {
 	container.setPadding( '10px' );
 
 	container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
-	container.add( new UI.Button( 'absolute' ).setRight( '8px' ).setTop( '5px' ).setLabel( 'Export' ).onClick( exportGeometry ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	// name
@@ -119,18 +118,6 @@ Sidebar.Geometry = function ( signals ) {
 
 	}
 
-	function exportGeometry() {
-
-		var output = new THREE.GeometryExporter().parse( selected );
-
-		var blob = new Blob( [ output ], { type: 'text/plain' } );
-		var objectURL = URL.createObjectURL( blob );
-
-		window.open( objectURL, '_blank' );
-		window.focus();
-
-	}
-
 	return container;
 
 }

editor/js/ui/Sidebar.Scene.js

@@ -20,7 +20,6 @@ Sidebar.Scene = function ( signals ) {
 	container.setBorderTop( '1px solid #ccc' );
 
 	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
-	container.add( new UI.Button( 'absolute' ).setRight( '8px' ).setTop( '5px' ).setLabel( 'Export' ).onClick( exportScene ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	var outliner = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( updateOutliner );
@@ -292,13 +291,6 @@ Sidebar.Scene = function ( signals ) {
 
 	} );
 
-
-	function exportScene() {
-
-		signals.exportScene.dispatch( scene );
-
-	}
-
 	return container;
 
 }

editor/js/ui/Viewport.js

@@ -645,12 +645,24 @@ var Viewport = function ( signals ) {
 
 	} );
 
-	signals.exportScene.add( function ( root ) {
+	signals.exportGeometry.add( function () {
+
+		var output = new THREE.GeometryExporter().parse( selected.geometry );
+
+		var blob = new Blob( [ output ], { type: 'text/plain' } );
+		var objectURL = URL.createObjectURL( blob );
+
+		window.open( objectURL, '_blank' );
+		window.focus();
+
+	} );
+
+	signals.exportScene.add( function () {
 
 		var clearColor = renderer.getClearColor();
 		var clearAlpha = renderer.getClearAlpha();
 
-		var output = new THREE.SceneExporter().parse( root, clearColor, clearAlpha );
+		var output = new THREE.SceneExporter().parse( scene, clearColor, clearAlpha );
 
 		var blob = new Blob( [ output ], { type: 'text/plain' } );
 		var objectURL = URL.createObjectURL( blob );