split background and a4 + scale a4 in every size

src/pages/editor/components/EditorCanvas.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useRef } from "react";
-import { Stage, Layer, Transformer } from "react-konva";
+import { Stage, Layer, Transformer, Rect } from "react-konva";
 import Konva from "konva";
 import { useEditorStore } from "../store/editorStore";
-import { clx } from "@/helpers/utils";
 import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
 import { useStageSize } from "./canvas/useStageSize";
 import ObjectRenderer from "./canvas/ObjectRenderer";
@@ -153,6 +152,7 @@ const EditorCanvas = () => {
 
   return (
     <div className="flex-1 flex items-center justify-center bg-gray-100 overflow-hidden">
+      <div className="shadow-lg" style={{ transform: `scale(${stageSize.scale})`, transformOrigin: 'center center' }}>
         <Stage
           ref={stageRef}
           width={stageSize.width}
@@ -160,9 +160,16 @@ const EditorCanvas = () => {
           onMouseDown={handleStageMouseDown}
           onMouseMove={handleStageMouseMove}
           onMouseUp={handleStageMouseUp}
-        className={clx("bg-white shadow-lg")}
         >
           <Layer ref={layerRef}>
+            <Rect
+              x={0}
+              y={0}
+              width={stageSize.width}
+              height={stageSize.height}
+              fill="#ffffff"
+              listening={false}
+            />
             {objects.map((obj) => (
               <ObjectRenderer
                 key={obj.id}
@@ -214,6 +221,7 @@ const EditorCanvas = () => {
             })()}
           </Layer>
         </Stage>
+      </div>
       {editingCell && (() => {
         const obj = objects.find((o) => o.id === editingCell.tableId);
         if (!obj || !obj.tableData) return null;

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

@@ -1,13 +1,14 @@
 import { useState, useEffect } from "react";
 
-const A4_WIDTH = 794;
+export const A4_WIDTH = 794;
-const A4_HEIGHT = 1123;
+export const A4_HEIGHT = 1123;
 const SCALE = 0.8;
 
 export const useStageSize = () => {
     const [stageSize, setStageSize] = useState({
-        width: A4_WIDTH * SCALE,
+        width: A4_WIDTH,
-        height: A4_HEIGHT * SCALE,
+        height: A4_HEIGHT,
+        scale: SCALE,
     });
 
     useEffect(() => {
@@ -19,8 +20,9 @@ export const useStageSize = () => {
             const newScale = Math.min(scaleX, scaleY, SCALE);
 
             setStageSize({
-                width: A4_WIDTH * newScale,
+                width: A4_WIDTH,
-                height: A4_HEIGHT * newScale,
+                height: A4_HEIGHT,
+                scale: newScale,
             });
         };