ViewHelper: Make use of invisible DOM element.

editor/js/Viewport.ViewHelper.js

@@ -2,6 +2,8 @@
  * @author Mugen87 / https://github.com/Mugen87
  */
 
+import { UIPanel } from './libs/ui.js';
+
 import * as THREE from '../../build/three.module.js';
 
 function ViewHelper( editorCamera, container ) {
@@ -9,6 +11,34 @@ function ViewHelper( editorCamera, container ) {
 	THREE.Object3D.call( this );
 
 	this.animating = false;
+	this.controls = null;
+
+	var panel = new UIPanel();
+	panel.setId( 'viewHelper' );
+	panel.setPosition( 'absolute' );
+	panel.setRight( '0px' );
+	panel.setBottom( '0px' );
+	panel.setHeight( '128px' );
+	panel.setWidth( '128px' );
+	panel.setBottom( '0px' );
+
+	var scope = this;
+
+	panel.dom.addEventListener( 'mouseup', function ( event ) {
+
+		event.stopPropagation();
+
+		scope.handleClick( event );
+
+	} );
+
+	panel.dom.addEventListener( 'mousedown', function ( event ) {
+
+		event.stopPropagation();
+
+	} );
+
+	container.add( panel );
 
 	var color1 = new THREE.Color( '#ff3653' );
 	var color2 = new THREE.Color( '#8adb00' );
@@ -137,7 +167,7 @@ function ViewHelper( editorCamera, container ) {
 	var q2 = new THREE.Quaternion();
 	var radius = 0;
 
-	this.handleClick = function ( event, center ) {
+	this.handleClick = function ( event ) {
 
 		if ( this.animating === true ) return false;
 
@@ -156,7 +186,7 @@ function ViewHelper( editorCamera, container ) {
 			var intersection = intersects[ 0 ];
 			var object = intersection.object;
 
-			prepareAnimationData( object, center );
+			prepareAnimationData( object, this.controls.center );
 
 			this.animating = true;
 

editor/js/Viewport.js

@@ -186,38 +186,34 @@ function Viewport( editor ) {
 
 	}
 
-	function handleClick( event ) {
+	function handleClick() {
 
 		if ( onDownPosition.distanceTo( onUpPosition ) === 0 ) {
 
 			// only test 3D objects if there is no UI interaction
 
-			if ( isUIInteraction( event ) === false ) {
+			var intersects = getIntersects( onUpPosition, objects );
 
-				var intersects = getIntersects( onUpPosition, objects );
+			if ( intersects.length > 0 ) {
 
-				if ( intersects.length > 0 ) {
+				var object = intersects[ 0 ].object;
 
-					var object = intersects[ 0 ].object;
+				if ( object.userData.object !== undefined ) {
 
-					if ( object.userData.object !== undefined ) {
+					// helper
 
-						// helper
-
-						editor.select( object.userData.object );
-
-					} else {
-
-						editor.select( object );
-
-					}
+					editor.select( object.userData.object );
 
 				} else {
 
-					editor.select( null );
+					editor.select( object );
 
 				}
 
+			} else {
+
+				editor.select( null );
+
 			}
 
 			render();
@@ -226,14 +222,6 @@ function Viewport( editor ) {
 
 	}
 
-	function isUIInteraction( event ) {
-
-		if ( viewHelper.handleClick( event, controls.center ) === true ) return true;
-
-		return false;
-
-	}
-
 	function onMouseDown( event ) {
 
 		// event.preventDefault();
@@ -250,7 +238,7 @@ function Viewport( editor ) {
 		var array = getMousePosition( container.dom, event.clientX, event.clientY );
 		onUpPosition.fromArray( array );
 
-		handleClick( event );
+		handleClick();
 
 		document.removeEventListener( 'mouseup', onMouseUp, false );
 
@@ -311,6 +299,7 @@ function Viewport( editor ) {
 		signals.refreshSidebarObject3D.dispatch( camera );
 
 	} );
+	viewHelper.controls = controls;
 
 	// signals