From 0d534e7f0e1a0200bd09bdaf56d9a1d4d5ba545a Mon Sep 17 00:00:00 2001 From: bflatastic Date: Fri, 19 Apr 2024 14:39:29 +0700 Subject: [PATCH] engine resize --- app/pages/PageEnigma/PageEditor.tsx | 11 ++- app/pages/PageEnigma/js/editor.ts | 106 +++++++++++++++++++--------- 2 files changed, 83 insertions(+), 34 deletions(-) diff --git a/app/pages/PageEnigma/PageEditor.tsx b/app/pages/PageEnigma/PageEditor.tsx index de45827031..f088b7858b 100644 --- a/app/pages/PageEnigma/PageEditor.tsx +++ b/app/pages/PageEnigma/PageEditor.tsx @@ -73,7 +73,16 @@ export const PageEditor = ({ setPage }: Props) => { ? "invisible" : "" }> - +
+ +
{/* Top controls */}
{ + document.addEventListener("mouseover", (event) => { if (this.orbitControls && this.cameraViewControls) { if (event.target instanceof HTMLCanvasElement) { if (this.camera_person_mode) { this.orbitControls.enabled = false; this.cameraViewControls.enabled = true; - } - else { + } else { this.orbitControls.enabled = true; this.cameraViewControls.enabled = false; } - } - else { + } else { this.orbitControls.enabled = false; this.cameraViewControls.enabled = false; } @@ -411,7 +418,7 @@ class Editor { console.log(result); } - public async testTestTimelineEvents() { } + public async testTestTimelineEvents() {} public async loadScene(scene_media_token: string) { this.dispatchAppUiState({ @@ -685,7 +692,9 @@ class Editor { deleteObject(uuid: string) { const obj = this.activeScene.get_object_by_uuid(uuid); - if (obj?.name === "::CAM::") { return; } + if (obj?.name === "::CAM::") { + return; + } if (obj) { this.activeScene.scene.remove(obj); } @@ -760,7 +769,7 @@ class Editor { this.render_timer += this.clock.getDelta(); this.frames += 1; this.playback_location++; - const imgData = this.rawRenderer.domElement.toDataURL('image/png', 1.0); // Medium quality png for speed & size. + const imgData = this.rawRenderer.domElement.toDataURL("image/png", 1.0); // Medium quality png for speed & size. this.frame_buffer.push(imgData); this.render_timer += this.clock.getDelta(); if (this.timeline.is_playing == false) { @@ -772,10 +781,19 @@ class Editor { } getselectedSum() { - if (this.selected === undefined) { return 0; } - let posCombo = this.selected.position.x + this.selected.position.y + this.selected.position.z; - let rotCombo = this.selected.rotation.x + this.selected.rotation.y + this.selected.rotation.z; - let sclCombo = this.selected.scale.x + this.selected.scale.y + this.selected.scale.z; + if (this.selected === undefined) { + return 0; + } + let posCombo = + this.selected.position.x + + this.selected.position.y + + this.selected.position.z; + let rotCombo = + this.selected.rotation.x + + this.selected.rotation.y + + this.selected.rotation.z; + let sclCombo = + this.selected.scale.x + this.selected.scale.y + this.selected.scale.z; return posCombo + rotCombo + sclCombo; } @@ -835,8 +853,10 @@ class Editor { if (changeView) { this.switchCameraView(); } - } - else if (this.last_scrub === this.timeline.scrubber_frame_position && this.getselectedSum() !== this.last_selected_sum) { + } else if ( + this.last_scrub === this.timeline.scrubber_frame_position && + this.getselectedSum() !== this.last_selected_sum + ) { this.updateSelectedUI(); } this.last_selected_sum = this.getselectedSum(); @@ -904,10 +924,10 @@ class Editor { audioSegment, "-filter_complex", "[1:a]adelay=" + - startTime * 1000 + - "|" + - startTime * 1000 + - "[a1];[0:a][a1]amix=inputs=2[a]", + startTime * 1000 + + "|" + + startTime * 1000 + + "[a1];[0:a][a1]amix=inputs=2[a]", "-map", "[a]", `${itteration}final_tmp.wav`, @@ -1179,9 +1199,7 @@ class Editor { element.visible = true; }); } - } - else { - + } else { this.timeline.is_playing = true; this.timeline.scrubber_frame_position = 0; if (!this.camera_person_mode) { @@ -1237,9 +1255,11 @@ class Editor { // Automaticly resize scene. onWindowResize() { - // Calculate the maximum possible dimensions while maintaining the aspect ratio - const width = window.innerWidth; // / aspect_adjust - const height = window.innerHeight; // / aspectRatio + const container = document.getElementById("video-scene-container"); + if (!container) return; + + const width = container.clientWidth; + const height = container.clientHeight; if (this.camera == undefined || this.renderer == undefined) { return; @@ -1263,6 +1283,22 @@ class Editor { this.render_camera.updateProjectionMatrix(); } + setupResizeObserver() { + const container = document.getElementById("video-scene-container"); + if (!container) return; + + const resizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + const { width, height } = entry.contentRect; + this.camera.aspect = width / height; + this.camera.updateProjectionMatrix(); + this.renderer.setSize(width, height); + } + }); + + resizeObserver.observe(container); + } + onMouseDown(event: any) { if (event.button === 1 && this.camera_person_mode) { this.lockControls?.lock(); @@ -1275,9 +1311,11 @@ class Editor { } if (event.button !== 0) { - let camera_pos = new THREE.Vector3(parseFloat(this.camera.position.x.toFixed(2)), + let camera_pos = new THREE.Vector3( + parseFloat(this.camera.position.x.toFixed(2)), parseFloat(this.camera.position.y.toFixed(2)), - parseFloat(this.camera.position.z.toFixed(2))); + parseFloat(this.camera.position.z.toFixed(2)), + ); this.camera_last_pos.copy(camera_pos); } } @@ -1295,9 +1333,11 @@ class Editor { // When the mouse clicks the screen. onMouseClick() { - let camera_pos = new THREE.Vector3(parseFloat(this.camera.position.x.toFixed(2)), + let camera_pos = new THREE.Vector3( + parseFloat(this.camera.position.x.toFixed(2)), parseFloat(this.camera.position.y.toFixed(2)), - parseFloat(this.camera.position.z.toFixed(2))); + parseFloat(this.camera.position.z.toFixed(2)), + ); if (this.camera_last_pos.equals(new THREE.Vector3(0, 0, 0))) { this.camera_last_pos.copy(camera_pos); }