From a0c58db0d2df9bc6ba90ce38589b93990ca2838e Mon Sep 17 00:00:00 2001
From: CrossPr0duct <alicextensor@gmail.com>
Date: Thu, 26 Jun 2025 14:01:29 -0400
Subject: [PATCH] Ok Fit works correctly. Required aspect ratio to be
 functioning as well.

---
 .../app/src/pages/PageDraw/PageDraw.tsx       | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
index 4c654cddb4..e626c1c9cc 100644
--- a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
@@ -196,6 +196,26 @@ const PageDraw = () => {
     }
   };
 
+  const onFitPressed = async () => { 
+    // Get the stage and its container dimensions
+    const stage = stageRef.current;
+
+    // Get container dimensions
+    const containerWidth = stage.container().offsetWidth;
+    const containerHeight = stage.container().offsetHeight;
+
+    // Get canvas dimensions from store aspect ratio
+    const canvasW = store.getAspectRatioDimensions().width;
+    const canvasH = store.getAspectRatioDimensions().height;
+
+    // Calculate position to center canvas in container
+    stage.position({
+      x: (containerWidth - canvasW) / 2,
+      y: (containerHeight - canvasH) / 2
+    });
+
+   }
+
   return (
     <>
       <div
@@ -235,6 +255,7 @@ const PageDraw = () => {
 
             const aspectRatioType = ratioToType(ratio);
             store.setAspectRatioType(aspectRatioType);
+            onFitPressed()
           }}
           onEnqueuePressed={onEnqueuedPressed}
         />
@@ -428,6 +449,12 @@ const PageDraw = () => {
           showIconsInList
           triggerLabel="Model"
         />
+       <button
+         className="bg-transparent p-2 text-lg text-white hover:text-white hover:bg-white/20 rounded transition"
+         onClick={onFitPressed}
+       >
+        Fit
+       </button>
       </div>
     </>
   );