scale viewer

src/pages/editor/Editor.tsx

@@ -45,7 +45,7 @@ const Editor: FC = () => {
             isLayersPanelOpen ? "xl:pl-[296px]" : "xl:pl-[80px]"
         )}>
             <LayersPanel isOpen={isLayersPanelOpen} setIsOpen={setIsLayersPanelOpen} />
-            <EditorCanvas />
+            <EditorCanvas catalogSize={data?.data?.size} />
             <EditorSidebar />
         </div>
     )

src/pages/editor/components/EditorCanvas.tsx

@@ -13,7 +13,11 @@ import ObjectsLayer from "./canvas/ObjectsLayer";
 import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
 
-const EditorCanvas = () => {
+type EditorCanvasProps = {
+  catalogSize?: string;
+};
+
+const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   const stageRef = useRef<Konva.Stage>(null);
   const layerRef = useRef<Konva.Layer>(null);
 
@@ -30,7 +34,7 @@ const EditorCanvas = () => {
   } = useEditorStore();
 
   const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
-  const stageSize = useStageSize();
+  const stageSize = useStageSize(catalogSize);
   useKeyboardMovement();
 
   const { handleSelect, handleCellClick, handleCellDblClick } = useSelectionHandlers();

src/pages/editor/components/canvas/useStageSize.ts

@@ -1,35 +1,33 @@
 import { useState, useEffect } from "react";
+import { getPaperDimensions } from "@/config/paperSizes";
 
-export const A4_WIDTH = 794;
-export const A4_HEIGHT = 1123;
 const SCALE = 0.8;
 
-export const useStageSize = () => {
+export const useStageSize = (catalogSize?: string) => {
+    const { width: baseWidth, height: baseHeight } = getPaperDimensions(catalogSize ?? "a4");
+
     const [stageSize, setStageSize] = useState({
-        width: A4_WIDTH,
-        height: A4_HEIGHT,
+        width: baseWidth,
+        height: baseHeight,
         scale: SCALE,
     });
 
     useEffect(() => {
+        const { width, height } = getPaperDimensions(catalogSize ?? "a4");
+
         const handleResize = () => {
             const maxWidth = window.innerWidth - 400;
             const maxHeight = window.innerHeight - 100;
-            const scaleX = maxWidth / A4_WIDTH;
-            const scaleY = maxHeight / A4_HEIGHT;
+            const scaleX = maxWidth / width;
+            const scaleY = maxHeight / height;
             const newScale = Math.min(scaleX, scaleY, SCALE);
-
-            setStageSize({
-                width: A4_WIDTH,
-                height: A4_HEIGHT,
-                scale: newScale,
-            });
+            setStageSize({ width, height, scale: newScale });
         };
 
         handleResize();
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
-    }, []);
+    }, [catalogSize]);
 
     return stageSize;
 };