Editor: Added resizer.

editor/css/main.css

@@ -296,6 +296,16 @@ select {
 
 /* UI */
 
+#resizer {
+	position: absolute;
+	top: 32px;
+	right: 295px;
+	width: 5px;
+	bottom: 0px;
+	/* background-color: rgba(255,0,0,0.5); */
+	cursor: ew-resize;
+}
+
 #viewport {
 	position: absolute;
 	top: 32px;
@@ -519,6 +529,10 @@ select {
 
 @media all and ( max-width: 600px ) {
 
+	#resizer {
+		display: none;
+	}
+
 	#menubar .menu .options {
 		max-height: calc(100% - 372px);
 	}

editor/index.html

@@ -53,6 +53,7 @@
 			import { Player } from './js/Player.js';
 			import { Sidebar } from './js/Sidebar.js';
 			import { Menubar } from './js/Menubar.js';
+			import { Resizer } from './js/Resizer.js';
 			import { VRButton } from '../examples/jsm/webxr/VRButton.js';
 
 			window.URL = window.URL || window.webkitURL;
@@ -90,6 +91,9 @@
 			var menubar = new Menubar( editor );
 			document.body.appendChild( menubar.dom );
 
+			var resizer = new Resizer( editor );
+			document.body.appendChild( resizer.dom );
+
 			//
 
 			editor.storage.init( function () {

editor/js/Resizer.js

@@ -0,0 +1,46 @@
+import { UIElement } from './libs/ui.js';
+
+function Resizer( editor ) {
+
+	const signals = editor.signals;
+
+	const dom = document.createElement( 'div' );
+	dom.id = 'resizer';
+
+	let isPointerDown = false;
+
+	dom.addEventListener( 'pointerdown', function ( event ) {
+
+		if ( event.isPrimary ) isPointerDown = true;
+
+	} );
+
+	dom.ownerDocument.addEventListener( 'pointermove', function ( event ) {
+
+		if ( event.isPrimary && isPointerDown ) {
+
+			const rect = dom.getBoundingClientRect();
+			const x = ( document.body.offsetWidth - rect.right ) - event.movementX;
+
+			dom.style.right = x + 'px';
+
+			document.getElementById( 'sidebar' ).style.width = ( x + rect.width ) + 'px';
+			document.getElementById( 'viewport' ).style.right = ( x + rect.width ) + 'px';
+
+			signals.windowResize.dispatch();
+
+		}
+
+	} );
+
+	dom.ownerDocument.addEventListener( 'pointerup', function ( event ) {
+
+		if ( event.isPrimary ) isPointerDown = false;
+
+	} );
+
+	return new UIElement( dom );
+
+}
+
+export { Resizer };

editor/sw.js

@@ -125,6 +125,7 @@ const assets = [
 	'./js/Menubar.Examples.js',
 	'./js/Menubar.Help.js',
 	'./js/Menubar.Status.js',
+	'./js/Resizer.js',
 	'./js/Sidebar.js',
 	'./js/Sidebar.Scene.js',
 	'./js/Sidebar.Project.js',