From b466c82f64ef2540ab94ce1d344483ed0298bdbf Mon Sep 17 00:00:00 2001 From: ostatni5 <26521377+ostatni5@users.noreply.github.com> Date: Thu, 4 Nov 2021 11:23:53 +0100 Subject: [PATCH 1/3] add focus to editor container (#227) --- src/ThreeEditor/ThreeEditor.tsx | 28 +++++++++++-------- src/ThreeEditor/js/Editor.js | 26 +++++++++-------- .../js/Sidebar.Settings.Shortcuts.js | 9 ++---- src/ThreeEditor/js/Viewport.js | 4 +-- src/ThreeEditor/main.js | 2 +- src/WrapperApp/WrapperApp.tsx | 6 ++-- 6 files changed, 40 insertions(+), 35 deletions(-) diff --git a/src/ThreeEditor/ThreeEditor.tsx b/src/ThreeEditor/ThreeEditor.tsx index 9d25fdde7..3d41eeb7b 100644 --- a/src/ThreeEditor/ThreeEditor.tsx +++ b/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); +const ThreeEditor = (props: ThreeEditorProps) => { + const [editor, setEditor] = useState(); + const containerEl = useRef(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 (
+ }} + /> ); -}, () => true) +} export default ThreeEditor; diff --git a/src/ThreeEditor/js/Editor.js b/src/ThreeEditor/js/Editor.js index 6b25699c0..94c501263 100644 --- a/src/ThreeEditor/js/Editor.js +++ b/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() { diff --git a/src/ThreeEditor/js/Sidebar.Settings.Shortcuts.js b/src/ThreeEditor/js/Sidebar.Settings.Shortcuts.js index 5dfcdce8f..aeab85db5 100644 --- a/src/ThreeEditor/js/Sidebar.Settings.Shortcuts.js +++ b/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; diff --git a/src/ThreeEditor/js/Viewport.js b/src/ThreeEditor/js/Viewport.js index c1c793040..cd6374c94 100644 --- a/src/ThreeEditor/js/Viewport.js +++ b/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) { diff --git a/src/ThreeEditor/main.js b/src/ThreeEditor/main.js index 000bee39a..08d59f894 100644 --- a/src/ThreeEditor/main.js +++ b/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 diff --git a/src/WrapperApp/WrapperApp.tsx b/src/WrapperApp/WrapperApp.tsx index fd561ef68..80a3b7ff0 100644 --- a/src/WrapperApp/WrapperApp.tsx +++ b/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 ( @@ -63,7 +63,7 @@ function WrapperApp() { - editorRef.current = editor} /> + editorRef.current = editor} focus={tabsValue === 0} /> {DEMO_MODE || <> @@ -71,7 +71,7 @@ function WrapperApp() { { setTabsValue(2); - setResultData({data}); + setResultData({ data }); }} /> From 9cfd5c7b17007ce5b2b96e573697e981b0ae0af3 Mon Sep 17 00:00:00 2001 From: ostatni5 <26521377+ostatni5@users.noreply.github.com> Date: Thu, 4 Nov 2021 11:30:42 +0100 Subject: [PATCH 2/3] deepsource --- src/ThreeEditor/ThreeEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ThreeEditor/ThreeEditor.tsx b/src/ThreeEditor/ThreeEditor.tsx index 3d41eeb7b..eccf382e9 100644 --- a/src/ThreeEditor/ThreeEditor.tsx +++ b/src/ThreeEditor/ThreeEditor.tsx @@ -15,7 +15,7 @@ interface ThreeEditorProps { focus?: boolean } -const ThreeEditor = (props: ThreeEditorProps) => { +function ThreeEditor(props: ThreeEditorProps) { const [editor, setEditor] = useState(); const containerEl = useRef(null); From 220d76f63fb3293135a99397eb8f4a751a331b93 Mon Sep 17 00:00:00 2001 From: ostatni5 <26521377+ostatni5@users.noreply.github.com> Date: Thu, 4 Nov 2021 16:20:16 +0100 Subject: [PATCH 3/3] add render after camer mode changed (#189) --- src/ThreeEditor/js/Viewport.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ThreeEditor/js/Viewport.js b/src/ThreeEditor/js/Viewport.js index cd6374c94..6874faa4a 100644 --- a/src/ThreeEditor/js/Viewport.js +++ b/src/ThreeEditor/js/Viewport.js @@ -459,6 +459,7 @@ export function Viewport( camera = camera.isPerspectiveCamera ? cameraOrtho : cameraPersp; updateCamera(camera, position); + render(); break;