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";
@@ -106,7 +105,7 @@ const EditorCanvas = () => {
     // Use a small delay to ensure the node is mounted (especially for images that need to load)
     const timeoutId = setTimeout(() => {
       if (!layerRef.current || !transformerRef.current) return;
-      
+
       const node = layerRef.current.findOne(`#${selectedObjectId}`);
       if (node && transformerRef.current) {
         transformerRef.current.nodes([node]);
@@ -153,67 +152,76 @@ const EditorCanvas = () => {
 
   return (
     <div className="flex-1 flex items-center justify-center bg-gray-100 overflow-hidden">
-      <Stage
-        ref={stageRef}
-        width={stageSize.width}
-        height={stageSize.height}
-        onMouseDown={handleStageMouseDown}
-        onMouseMove={handleStageMouseMove}
-        onMouseUp={handleStageMouseUp}
-        className={clx("bg-white shadow-lg")}
-      >
-        <Layer ref={layerRef}>
-          {objects.map((obj) => (
-            <ObjectRenderer
-              key={obj.id}
-              obj={obj}
-              isSelected={selectedObjectId === obj.id}
-              transformerRef={transformerRef}
-              layerRef={layerRef}
-              onSelect={handleSelect}
-              onUpdate={updateObject}
-              draggable={tool === "select"}
-              onCellClick={handleCellClick}
-              onCellDblClick={handleCellDblClick}
-              selectedCellId={selectedCellId}
+      <div className="shadow-lg" style={{ transform: `scale(${stageSize.scale})`, transformOrigin: 'center center' }}>
+        <Stage
+          ref={stageRef}
+          width={stageSize.width}
+          height={stageSize.height}
+          onMouseDown={handleStageMouseDown}
+          onMouseMove={handleStageMouseMove}
+          onMouseUp={handleStageMouseUp}
+        >
+          <Layer ref={layerRef}>
+            <Rect
+              x={0}
+              y={0}
+              width={stageSize.width}
+              height={stageSize.height}
+              fill="#ffffff"
+              listening={false}
             />
-          ))}
-          {selectedObjectId && (() => {
-            const selectedObject = objects.find(obj => obj.id === selectedObjectId);
-            const isText = selectedObject?.type === "text";
-
-            return (
-              <Transformer
-                ref={transformerRef}
-                boundBoxFunc={(oldBox, newBox) => {
-                  if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
-                    return oldBox;
-                  }
-                  return newBox;
-                }}
-                ignoreStroke={isText}
-                perfectDrawEnabled={false}
-                anchorFill="#3b82f6"
-                anchorStroke="#ffffff"
-                borderStroke="#3b82f6"
-                borderStrokeWidth={2}
-                anchorSize={8}
-                rotateEnabled={true}
-                enabledAnchors={[
-                  "top-left",
-                  "top-right",
-                  "bottom-left",
-                  "bottom-right",
-                  "top-center",
-                  "bottom-center",
-                  "middle-left",
-                  "middle-right",
-                ]}
+            {objects.map((obj) => (
+              <ObjectRenderer
+                key={obj.id}
+                obj={obj}
+                isSelected={selectedObjectId === obj.id}
+                transformerRef={transformerRef}
+                layerRef={layerRef}
+                onSelect={handleSelect}
+                onUpdate={updateObject}
+                draggable={tool === "select"}
+                onCellClick={handleCellClick}
+                onCellDblClick={handleCellDblClick}
+                selectedCellId={selectedCellId}
               />
-            );
-          })()}
-        </Layer>
-      </Stage>
+            ))}
+            {selectedObjectId && (() => {
+              const selectedObject = objects.find(obj => obj.id === selectedObjectId);
+              const isText = selectedObject?.type === "text";
+
+              return (
+                <Transformer
+                  ref={transformerRef}
+                  boundBoxFunc={(oldBox, newBox) => {
+                    if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
+                      return oldBox;
+                    }
+                    return newBox;
+                  }}
+                  ignoreStroke={isText}
+                  perfectDrawEnabled={false}
+                  anchorFill="#3b82f6"
+                  anchorStroke="#ffffff"
+                  borderStroke="#3b82f6"
+                  borderStrokeWidth={2}
+                  anchorSize={8}
+                  rotateEnabled={true}
+                  enabledAnchors={[
+                    "top-left",
+                    "top-right",
+                    "bottom-left",
+                    "bottom-right",
+                    "top-center",
+                    "bottom-center",
+                    "middle-left",
+                    "middle-right",
+                  ]}
+                />
+              );
+            })()}
+          </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;
-const A4_HEIGHT = 1123;
+export const A4_WIDTH = 794;
+export const A4_HEIGHT = 1123;
 const SCALE = 0.8;
 
 export const useStageSize = () => {
     const [stageSize, setStageSize] = useState({
-        width: A4_WIDTH * SCALE,
-        height: A4_HEIGHT * SCALE,
+        width: A4_WIDTH,
+        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,
-                height: A4_HEIGHT * newScale,
+                width: A4_WIDTH,
+                height: A4_HEIGHT,
+                scale: newScale,
             });
         };