Feature/multiple view (#26)

* connect CSGManager with ui

* change default material

* add simple thread-worker

* fix missing gizmo from editor

* add cylinder

* fix calculating mouse pos on gizmo

* add multiple views

* install split-grid

* make viewpanels resizable and add 2 cameras

* add two layouts and cleanup code (#25)

* Update src/ThreeEditor/util/CSGManager.ts

* Fix Warnings

Co-authored-by: ostatni5 <26521377+ostatni5@users.noreply.github.com>
Co-authored-by: Jakub Niechaj <quban123@gmail.com>

package.json

@@ -22,6 +22,7 @@
     "react-scripts": "4.0.3",
     "signals": "^1.0.0",
     "three": "^0.132.2",
+    "split-grid": "^1.0.11",
     "throttle-debounce": "^3.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"

src/App.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
 import './App.css';
 import ThreeEditor from './ThreeEditor/ThreeEditor';
-import JsRoot from './JsRoot/JsRoot';
-import ZoneManagerPanel from './components/ZoneManagerPanel/ZoneManagerPanel';
 
 
 
 function App() {
   return (<>
-    {/* <JsRoot></JsRoot> */}
-
     <ThreeEditor></ThreeEditor>
   </>);
 }

src/ThreeEditor/ThreeEditor.tsx

@@ -1,12 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { initEditor } from './main';
 import './css/main.css';
 import SampleComponent from './components/SampleComponent';
 import { Editor } from './js/Editor';
-import * as THREE from 'three';
-import CSG from './js/libs/csg/three-csg';
 import ZoneManagerPanel from '../components/ZoneManagerPanel/ZoneManagerPanel';
-import { CSGManager } from './util/CSGManager';
 
 
 function ThreeEditor() {
@@ -17,48 +14,9 @@ function ThreeEditor() {
 
   useEffect(() => {
     if (containerEl.current) {
-      const { editor, viewport, toolbar, sidebar, menubar, resizer } = initEditor(containerEl.current);
+      const { editor, viewport, toolbar, sidebar, menubar, resizer } = initEditor(containerEl.current); // eslint-disable-line
       setEditor(editor);
 
-      // Make 2 box meshes..
-
-      let meshA = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
-      let meshB = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
-
-      //offset one of the boxes by half its width..
-
-      meshB.position.add(new THREE.Vector3(0.5, 0.5, 0.5));
-
-      //Make sure the .matrix of each mesh is current
-
-      meshA.updateMatrix();
-      meshB.updateMatrix();
-
-      //Create a bsp tree from each of the meshes
-
-      let bspA = CSG.fromMesh(meshA);
-      let bspB = CSG.fromMesh(meshB);
-
-      // Subtract one bsp from the other via .subtract... other supported modes are .union and .intersect
-
-      let bspResult = bspA.subtract(bspB);
-
-      //Get the resulting mesh from the result bsp, and assign meshA.material to the resulting mesh
-
-      let meshResult = CSG.toMesh(bspResult, meshA.matrix, meshA.material);
-
-      meshResult.name = 'meshResult';
-      meshResult.material = new THREE.MeshNormalMaterial();
-      // editor.sceneHelpers.add(meshResult);
-
-
-      // let manager = new CSGManager(editor);
-      // let zone = manager.createZone();
-
-      // zone.addUnion();
-      // zone.addOperation(0, { object: meshA, mode: 'union' });
-      // zone.addOperation(0, { object: meshB, mode: 'left-subtraction' });
-
     }
     return () => {
 
@@ -71,7 +29,7 @@ function ThreeEditor() {
       {editor &&
         <>
           <SampleComponent signal={editor.signals.objectSelected} ></SampleComponent>
-          <ZoneManagerPanel editor={editor}></ZoneManagerPanel>
+          {/* <ZoneManagerPanel editor={editor}></ZoneManagerPanel> */}
         </>
       }
     </div>

src/ThreeEditor/css/main.css

@@ -698,3 +698,30 @@ select {
 	}
 
 }
+
+
+.grid {
+    display: grid;
+    grid-template-rows: 1fr 10px 1fr;
+    grid-template-columns: 1fr 10px 1fr;
+}
+
+.gutter-col {
+    grid-row: 1/-1;
+    cursor: col-resize;
+	background-color: rgb(53, 203, 248);
+}
+
+.gutter-col-1 {
+	grid-column: 2;
+}
+
+.gutter-row {
+    grid-column: 1/-1;
+    cursor: row-resize;
+	background-color: rgb(53, 248, 248);
+}
+
+.gutter-row-1 {
+    grid-row: 2;
+}

src/ThreeEditor/js/Config.js

@@ -27,47 +27,47 @@ function Config() {
 		'settings/shortcuts/focus': 'f'
 	};
 
-	if ( window.localStorage[ name ] === undefined ) {
+	if (window.localStorage[name] === undefined) {
 
-		window.localStorage[ name ] = JSON.stringify( storage );
+		window.localStorage[name] = JSON.stringify(storage);
 
 	} else {
 
-		var data = JSON.parse( window.localStorage[ name ] );
+		var data = JSON.parse(window.localStorage[name]);
 
-		for ( var key in data ) {
+		for (var key in data) {
 
-			storage[ key ] = data[ key ];
+			storage[key] = data[key];
 
 		}
 
 	}
 
 	return {
 
-		getKey: function ( key ) {
+		getKey: function (key) {
 
-			return storage[ key ];
+			return storage[key];
 
 		},
 
 		setKey: function () { // key, value, key, value ...
 
-			for ( var i = 0, l = arguments.length; i < l; i += 2 ) {
+			for (var i = 0, l = arguments.length; i < l; i += 2) {
 
-				storage[ arguments[ i ] ] = arguments[ i + 1 ];
+				storage[arguments[i]] = arguments[i + 1];
 
 			}
 
-			window.localStorage[ name ] = JSON.stringify( storage );
+			window.localStorage[name] = JSON.stringify(storage);
 
-			console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved config to LocalStorage.' );
+			console.log('[' + /\d\d\:\d\d\:\d\d/.exec(new Date())[0] + ']', 'Saved config to LocalStorage.'); // eslint-disable-line
 
 		},
 
 		clear: function () {
 
-			delete window.localStorage[ name ];
+			delete window.localStorage[name];
 
 		}
 

src/ThreeEditor/js/Editor.js

@@ -86,7 +86,9 @@ function Editor() {
 
 		viewportCameraChanged: new Signal(),
 
-		animationStopped: new Signal()
+		animationStopped: new Signal(),
+
+		layoutChanged: new Signal() // Layout signal 
 
 	};