Merge branch 'master' into dev

editor/css/light.css

@@ -17,7 +17,7 @@
 	}
 
 	.Outliner .option.active {
-		background-color: #f8f8f8;
+		background-color: rgba(0,0,0,0.02);
 	}
 
 input.Number {

editor/css/main.css

@@ -94,6 +94,29 @@ textarea, input { outline: none; } /* osx */
 
 /* outliner */
 
+#outliner .option {
+
+	border: 1px solid transparent;
+}
+
+#outliner .option.drag {
+
+	border: 1px dashed #999;
+
+}
+
+#outliner .option.dragTop {
+
+	border-top: 1px dashed #999;
+
+}
+
+#outliner .option.dragBottom {
+
+	border-bottom: 1px dashed #999;
+
+}
+
 #outliner .type {
 	position:relative;
 	top:-2px;

editor/index.html

@@ -73,7 +73,6 @@
 		<script src="js/libs/ternjs/doc_comment.js"></script>
 		<script src="js/libs/tern-threejs/threejs.js"></script>
 
-		<script src="js/libs/sortable.min.js"></script>
 		<script src="js/libs/signals.min.js"></script>
 		<script src="js/libs/ui.js"></script>
 		<script src="js/libs/ui.three.js"></script>

editor/js/libs/ui.three.js

@@ -146,33 +146,8 @@ UI.Outliner = function ( editor ) {
 	dom.className = 'Outliner';
 	dom.tabIndex = 0;	// keyup event is ignored without setting tabIndex
 
-	var scene = editor.scene;
-
-	var sortable = Sortable.create( dom, {
-		draggable: '.draggable',
-		onUpdate: function ( event ) {
-
-			var item = event.item;
-
-			var object = scene.getObjectById( item.value );
-
-			if ( item.nextSibling === null ) {
-
-				editor.execute( new MoveObjectCommand( object, editor.scene ) );
-
-			} else {
-
-				var nextObject = scene.getObjectById( item.nextSibling.value );
-				editor.execute( new MoveObjectCommand( object, nextObject.parent, nextObject ) );
-
-			}
-
-		}
-	} );
-
-	// Broadcast for object selection after arrow navigation
-	var changeEvent = document.createEvent( 'HTMLEvents' );
-	changeEvent.initEvent( 'change', true, true );
+	// hack
+	this.scene = editor.scene;
 
 	// Prevent native scroll behavior
 	dom.addEventListener( 'keydown', function ( event ) {
@@ -190,26 +165,12 @@ UI.Outliner = function ( editor ) {
 	// Keybindings to support arrow navigation
 	dom.addEventListener( 'keyup', function ( event ) {
 
-		function select( index ) {
-
-			if ( index >= 0 && index < scope.options.length ) {
-
-				scope.selectedIndex = index;
-
-				// Highlight selected dom elem and scroll parent if needed
-				scope.setValue( scope.options[ index ].value );
-				scope.dom.dispatchEvent( changeEvent );
-
-			}
-
-		}
-
 		switch ( event.keyCode ) {
 			case 38: // up
-				select( scope.selectedIndex - 1 );
+				scope.selectIndex( scope.selectedIndex - 1 );
 				break;
 			case 40: // down
-				select( scope.selectedIndex + 1 );
+				scope.selectIndex( scope.selectedIndex + 1 );
 				break;
 		}
 
@@ -228,19 +189,140 @@ UI.Outliner = function ( editor ) {
 UI.Outliner.prototype = Object.create( UI.Element.prototype );
 UI.Outliner.prototype.constructor = UI.Outliner;
 
+UI.Outliner.prototype.selectIndex = function ( index ) {
+
+	if ( index >= 0 && index < this.options.length ) {
+
+		this.setValue( this.options[ index ].value );
+
+		var changeEvent = document.createEvent( 'HTMLEvents' );
+		changeEvent.initEvent( 'change', true, true );
+		this.dom.dispatchEvent( changeEvent );
+
+	}
+
+};
+
 UI.Outliner.prototype.setOptions = function ( options ) {
 
 	var scope = this;
 
-	var changeEvent = document.createEvent( 'HTMLEvents' );
-	changeEvent.initEvent( 'change', true, true );
-
 	while ( scope.dom.children.length > 0 ) {
 
 		scope.dom.removeChild( scope.dom.firstChild );
 
 	}
 
+	function onClick() {
+
+		scope.setValue( this.value );
+
+		var changeEvent = document.createEvent( 'HTMLEvents' );
+		changeEvent.initEvent( 'change', true, true );
+		scope.dom.dispatchEvent( changeEvent );
+
+	}
+
+	// Drag
+
+	var currentDrag;
+
+	function onDrag( event ) {
+
+		currentDrag = this;
+
+	}
+
+	function onDragStart( event ) {
+
+		event.dataTransfer.setData( 'text', 'foo' );
+
+	}
+
+	function onDragOver( event ) {
+
+		if ( this === currentDrag ) return;
+
+		var area = event.offsetY / this.clientHeight;
+
+		if ( area < 0.25 ) {
+
+			this.className = 'option dragTop';
+
+		} else if ( area > 0.75 ) {
+
+			this.className = 'option dragBottom';
+
+		} else {
+
+			this.className = 'option drag';
+
+		}
+
+	}
+
+	function onDragLeave() {
+
+		if ( this === currentDrag ) return;
+
+		this.className = 'option';
+
+	}
+
+	function onDrop( event ) {
+
+		if ( this === currentDrag ) return;
+
+		this.className = 'option';
+
+		var scene = scope.scene;
+		var object = scene.getObjectById( currentDrag.value );
+
+		var area = event.offsetY / this.clientHeight;
+
+		if ( area < 0.25 ) {
+
+			var nextObject = scene.getObjectById( this.value );
+			moveObject( object, nextObject.parent, nextObject );
+
+		} else if ( area > 0.75 ) {
+
+			var nextObject = scene.getObjectById( this.nextSibling.value );
+			moveObject( object, nextObject.parent, nextObject );
+
+		} else {
+
+			var parentObject = scene.getObjectById( this.value );
+			moveObject( object, parentObject );
+
+		}
+
+	}
+
+	function moveObject( object, newParent, nextObject ) {
+
+		if ( nextObject === null ) nextObject = undefined;
+
+		var newParentIsChild = false;
+
+		object.traverse( function ( child ) {
+
+			if ( child === newParent ) newParentIsChild = true;
+
+		} );
+
+		if ( newParentIsChild ) return;
+
+		editor.execute( new MoveObjectCommand( object, newParent, nextObject ) );
+
+		var changeEvent = document.createEvent( 'HTMLEvents' );
+		changeEvent.initEvent( 'change', true, true );
+		scope.dom.dispatchEvent( changeEvent );
+
+	}
+
+	//
+
 	scope.options = [];
 
 	for ( var i = 0; i < options.length; i ++ ) {
@@ -248,19 +330,28 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 		var option = options[ i ];
 
 		var div = document.createElement( 'div' );
-		div.className = 'option ' + ( option.static === true ? '' : 'draggable' );
+		div.className = 'option';
 		div.innerHTML = option.html;
 		div.value = option.value;
 		scope.dom.appendChild( div );
 
 		scope.options.push( div );
 
-		div.addEventListener( 'click', function ( event ) {
+		div.addEventListener( 'click', onClick, false );
+
+		if ( option.static !== true ) {
+
+			div.draggable = true;
 
-			scope.setValue( this.value );
-			scope.dom.dispatchEvent( changeEvent );
+			div.addEventListener( 'drag', onDrag, false );
+			div.addEventListener( 'dragstart', onDragStart, false ); // Firefox needs this
+
+			div.addEventListener( 'dragover', onDragOver, false );
+			div.addEventListener( 'dragleave', onDragLeave, false );
+			div.addEventListener( 'drop', onDrop, false );
+
+		}
 
-		}, false );
 
 	}