From 7fc64e9369c888ea5768aa5e86fb3155be746bc5 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sat, 10 May 2025 00:12:12 +0700
Subject: [PATCH] fix 3d resizing bug

---
 .../app/src/pages/PageEnigma/PageEditor.tsx   | 196 +++++++++---------
 1 file changed, 97 insertions(+), 99 deletions(-)

diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
index e429bac026..bddf096d24 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
@@ -251,104 +251,6 @@ export const PageEditor = () => {
     });
   };
 
-  const ContentFor3D = () => {
-    return (
-      <>
-        <OnboardingHelper />
-        <div
-          className="relative flex w-screen"
-          style={{ height: "calc(100vh - 68px)" }}
-        >
-          {/* Engine section/side panel */}
-          <div
-            id="engine-n-panels-wrapper"
-            className="flex"
-            style={{
-              height,
-            }}
-          >
-            <div className="relative w-full overflow-hidden bg-transparent">
-              <SceneContainer>
-                <EditorCanvas />
-                <PreviewFrameImage />
-              </SceneContainer>
-
-              {/* Focal Length Display */}
-              <FocalLengthDisplay />
-
-              {/* Pose Mode Selector */}
-              <PoseModeSelector />
-
-              {/* Top controls */}
-              <div
-                className="absolute left-0 top-0 w-full"
-                onClick={handleOverlayClick}
-              >
-                <div className="grid grid-cols-3 gap-4">
-                  <ControlsTopButtons />
-                  <Controls3D />
-                </div>
-              </div>
-
-              {/* Bottom controls */}
-              <div
-                className="absolute bottom-0 left-0"
-                style={{
-                  width: pageWidth.value,
-                }}
-                onClick={handleOverlayClick}
-              >
-                <div
-                  className="absolute bottom-0 mb-4 ml-4 flex origin-bottom-left flex-col gap-2"
-                  style={{ transform: `scale(${getScale()})` }}
-                >
-                  <Outliner />
-                  <PreviewEngineCamera />
-                </div>
-
-                <ControlPanelSceneObject />
-              </div>
-
-              <PromptBox3D
-                cameras={cameras}
-                cameraAspectRatio={cameraAspectRatio}
-                disableHotkeyInput={disableHotkeyInput}
-                enableHotkeyInput={enableHotkeyInput}
-                gridVisibility={gridVisibility}
-                setGridVisibility={setGridVisibility}
-                selectedCameraId={selectedCameraId}
-                deleteCamera={deleteCamera}
-                focalLengthDragging={focalLengthDragging}
-                isPromptBoxFocused={isPromptBoxFocused}
-                uploadImage={uploadImage}
-                handleCameraSelect={handleCameraSelect}
-                handleAddCamera={handleAddCamera}
-                handleCameraNameChange={handleCameraNameChange}
-                handleCameraFocalLengthChange={handleCameraFocalLengthChange}
-                onAspectRatioSelect={onAspectRatioSelect}
-                setEnginePrompt={(prompt) => {
-                  if (!editorEngine) {
-                    return;
-                  }
-
-                  editorEngine!.positive_prompt = prompt;
-                }}
-                snapshotCurrentFrame={editorEngine?.snapShotOfCurrentFrame}
-              />
-
-              <LoadingDots
-                className="absolute left-0 top-0 z-50"
-                isShowing={editorLoader.value.isShowing}
-                type="bricks"
-                message={editorLoader.value.message}
-              />
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  };
-
   const ContentFor2D = () => {
     return (
       <KonvaCanvasContainer>
@@ -365,7 +267,103 @@ export const PageEditor = () => {
         setAppTabId={setAppTabId}
       />
 
-      {appTabId.value === "3D" ? <ContentFor3D /> : <ContentFor2D />}
+      {appTabId.value === "3D" ? (
+        <>
+          <OnboardingHelper />
+          <div
+            className="relative flex w-screen"
+            style={{ height: "calc(100vh - 68px)" }}
+          >
+            {/* Engine section/side panel */}
+            <div
+              id="engine-n-panels-wrapper"
+              className="flex"
+              style={{
+                height,
+              }}
+            >
+              <div className="relative w-full overflow-hidden bg-transparent">
+                <SceneContainer>
+                  <EditorCanvas />
+                  <PreviewFrameImage />
+                </SceneContainer>
+
+                {/* Focal Length Display */}
+                <FocalLengthDisplay />
+
+                {/* Pose Mode Selector */}
+                <PoseModeSelector />
+
+                {/* Top controls */}
+                <div
+                  className="absolute left-0 top-0 w-full"
+                  onClick={handleOverlayClick}
+                >
+                  <div className="grid grid-cols-3 gap-4">
+                    <ControlsTopButtons />
+                    <Controls3D />
+                  </div>
+                </div>
+
+                {/* Bottom controls */}
+                <div
+                  className="absolute bottom-0 left-0"
+                  style={{
+                    width: pageWidth.value,
+                  }}
+                  onClick={handleOverlayClick}
+                >
+                  <div
+                    className="absolute bottom-0 mb-4 ml-4 flex origin-bottom-left flex-col gap-2"
+                    style={{ transform: `scale(${getScale()})` }}
+                  >
+                    <Outliner />
+                    <PreviewEngineCamera />
+                  </div>
+
+                  <ControlPanelSceneObject />
+                </div>
+
+                <PromptBox3D
+                  cameras={cameras}
+                  cameraAspectRatio={cameraAspectRatio}
+                  disableHotkeyInput={disableHotkeyInput}
+                  enableHotkeyInput={enableHotkeyInput}
+                  gridVisibility={gridVisibility}
+                  setGridVisibility={setGridVisibility}
+                  selectedCameraId={selectedCameraId}
+                  deleteCamera={deleteCamera}
+                  focalLengthDragging={focalLengthDragging}
+                  isPromptBoxFocused={isPromptBoxFocused}
+                  uploadImage={uploadImage}
+                  handleCameraSelect={handleCameraSelect}
+                  handleAddCamera={handleAddCamera}
+                  handleCameraNameChange={handleCameraNameChange}
+                  handleCameraFocalLengthChange={handleCameraFocalLengthChange}
+                  onAspectRatioSelect={onAspectRatioSelect}
+                  setEnginePrompt={(prompt) => {
+                    if (!editorEngine) {
+                      return;
+                    }
+
+                    editorEngine!.positive_prompt = prompt;
+                  }}
+                  snapshotCurrentFrame={editorEngine?.snapShotOfCurrentFrame}
+                />
+
+                <LoadingDots
+                  className="absolute left-0 top-0 z-50"
+                  isShowing={editorLoader.value.isShowing}
+                  type="bricks"
+                  message={editorLoader.value.message}
+                />
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <ContentFor2D />
+      )}
 
       <LoginModal
         onClose={() => {}}