add focus to editor container (#227)

src/ThreeEditor/ThreeEditor.tsx

@@ -12,33 +12,37 @@ declare global {
 }
 interface ThreeEditorProps {
   onEditorInitialized?: (editor: Editor) => void
+  focus?: boolean
 }
 
-// React.memo(component, ()=>true) to prevent re-rendering and re-initializing editor 
-const ThreeEditor = React.memo(function ThreeEditorComponent(props: ThreeEditorProps) {
-  const containerEl = useRef(null);
+function ThreeEditor(props: ThreeEditorProps) {
+  const [editor, setEditor] = useState<Editor>();
+  const containerEl = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (containerEl.current) {
-
       const { editor } = initEditor(containerEl.current);
-
-      props.onEditorInitialized?.call(null, editor);
-
+      setEditor(editor);
     }
-    return () => {
+  }, [containerEl]);
 
-    }
-  }, [containerEl, props.onEditorInitialized]);
+  useEffect(() => {
+    editor && props.onEditorInitialized?.call(null, editor);
+  }, [editor, props.onEditorInitialized]);
 
+  useEffect(() => {
+    props.focus === true && containerEl.current?.focus();
+    props.focus === false && containerEl.current?.blur();
+  }, [props.focus]);
 
   return (
     <div className="ThreeEditor" ref={containerEl} style={{
       position: 'relative',
       display: 'flex',
       flexGrow: 1
-    }} />
+    }}
+    />
   );
-}, () => true)
+}
 
 export default ThreeEditor;

src/ThreeEditor/js/Editor.js

@@ -1,11 +1,11 @@
 import * as THREE from 'three';
 import { Beam } from '../util/Beam';
 import { CSGManager } from '../util/CSG/CSGManager';
-import   MaterialsManager from '../util/Materials/MaterialsManager';
+import MaterialsManager from '../util/Materials/MaterialsManager';
 import { Config } from './Config.js';
 import { History as _History } from './History.js';
 import { Loader } from './Loader.js';
-import   Signal from 'signals';
+import Signal from 'signals';
 import { Strings } from './Strings.js';
 import { Storage as _Storage } from './Storage.js';
 import { generateSimulationInfo } from '../util/AdditionalUserData';
@@ -15,8 +15,8 @@ _DEFAULT_CAMERA.name = 'Camera';
 _DEFAULT_CAMERA.position.set(0, 5, 10);
 _DEFAULT_CAMERA.lookAt(new THREE.Vector3());
 
-export function Editor() {
-
+export function Editor(container) {
+	
 	this.signals = {
 
 		// script
@@ -91,7 +91,7 @@ export function Editor() {
 		selectModeChanged: new Signal(),
 
 		layoutChanged: new Signal(), // Layout signal
-		
+
 		CSGZoneAdded: new Signal(), // Sidebar.Properties signal
 
 		viewportConfigChanged: new Signal(), // Viewport config signal 
@@ -100,6 +100,10 @@ export function Editor() {
 
 	};
 
+	this.container = container;
+	container.setAttribute('tabindex', '-1');
+	this.container.focus();
+
 	this.config = new Config();
 	this.history = new _History(this);
 	this.storage = new _Storage();
@@ -122,9 +126,9 @@ export function Editor() {
 
 	this.beam = new Beam(this);
 	this.sceneHelpers.add(this.beam);
-	
-	this.materialsManager = new MaterialsManager;
-	
+
+	this.materialsManager = new MaterialsManager();
+
 
 	this.object = {};
 	this.geometries = {};
@@ -203,7 +207,7 @@ Editor.prototype = {
 
 	},
 
-	moveObject(object, parent, before) {	
+	moveObject(object, parent, before) {
 
 		if (!parent) {
 
@@ -690,14 +694,14 @@ Editor.prototype = {
 		this.setScene(await loader.parseAsync(json.scene));
 
 		this.materialsManager.fromJSOM(json.materialsManager);
-		
+
 		// CSGManager must be loaded after scene and simulation materials		
 		this.zonesManager.fromJSON(json.zonesManager); // CSGManager must be loaded in order not to lose reference in components 
 
 		this.beam.fromJSON(json.beam);
 
 		this.signals.sceneGraphChanged.dispatch();
-				
+
 	},
 
 	toJSON() {

src/ThreeEditor/js/Sidebar.Settings.Shortcuts.js

@@ -92,16 +92,13 @@ function SidebarSettingsShortcuts(editor) {
 
 	}
 
-	document.addEventListener('keydown', (event) => {
+	editor.container.addEventListener('keydown', (event) => {
 
 		switch (event.key.toLowerCase()) {
 
 			case 'backspace':
-
-				event.preventDefault(); // prevent browser back
-			// fall-through
-
-			// eslint-disable-next-line
+				event.preventDefault(); // prevent browser back			
+			// eslint-disable-next-line no-fallthrough
 			case 'delete':
 
 				var object = editor.selected;

src/ThreeEditor/js/Viewport.js

@@ -232,7 +232,7 @@ export function Viewport(
 
     });
 
-    window.addEventListener('keydown', (event) => {
+    editor.container.addEventListener('keydown', (event) => {
 
         switch (event.key) {
 
@@ -246,7 +246,7 @@ export function Viewport(
 
     });
 
-    window.addEventListener('keyup', (event) => {
+    editor.container.addEventListener('keyup', (event) => {
 
         switch (event.key) {
 
@@ -459,6 +459,7 @@ export function Viewport(
 
                 camera = camera.isPerspectiveCamera ? cameraOrtho : cameraPersp;
                 updateCamera(camera, position);
+                render();
 
                 break;
 

src/ThreeEditor/main.js

@@ -22,7 +22,7 @@ export function initEditor(container) {
 
     //
 
-    var editor = new Editor();
+    var editor = new Editor(container);     
 
     window.editor = editor; // Expose editor to Console
     window.THREE = THREE; // Expose THREE to APP Scripts and Console

src/WrapperApp/WrapperApp.tsx

@@ -48,7 +48,7 @@ function WrapperApp() {
 		setTabsValue(newValue);
 	};
 
-	const [resultData, setResultData] = useState<{data?:unknown}>({});
+	const [resultData, setResultData] = useState<{ data?: unknown }>({});
 
 	return (
 		<Box sx={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
@@ -63,15 +63,15 @@ function WrapperApp() {
 				</Tabs>
 			</Box>
 			<TabPanel value={tabsValue} index={0} persistent >
-				<ThreeEditor onEditorInitialized={(editor) => editorRef.current = editor} />
+				<ThreeEditor onEditorInitialized={(editor) => editorRef.current = editor} focus={tabsValue === 0} />
 			</TabPanel>
 			{DEMO_MODE ||
 				<>
 					<TabPanel value={tabsValue} index={1}>
 						<SimulationPanel
 							onSuccess={(data) => {
 								setTabsValue(2);
-								setResultData({data});
+								setResultData({ data });
 							}}
 
 						/>