diff --git a/src/pages/editor/components/canvas/drawingUtils.ts b/src/pages/editor/components/canvas/drawingUtils.ts index 2676b8f..3aeea36 100644 --- a/src/pages/editor/components/canvas/drawingUtils.ts +++ b/src/pages/editor/components/canvas/drawingUtils.ts @@ -19,6 +19,76 @@ export const createDrawingObject = ({ if (tool === "rectangle") { const activeShape = useShapeStore.getState().activeShape; + + // برای دایره، مرکز و شعاع را محاسبه می‌کنیم + if (activeShape === "circle") { + const centerX = (startPos.x + pointerPos.x) / 2; + const centerY = (startPos.y + pointerPos.y) / 2; + const radius = Math.max(Math.abs(width), Math.abs(height)) / 2; + + return { + id: tempObject?.id || `rect-${Date.now()}`, + type: "rectangle", + x: centerX, + y: centerY, + width: radius * 2, + height: radius * 2, + fill: "#3b82f6", + stroke: "#1e40af", + strokeWidth: 0, + shapeType: activeShape, + }; + } + + // برای مثلث، مرکز را محاسبه می‌کنیم و سپس گوشه بالا-چپ را + if (activeShape === "triangle") { + const centerX = (startPos.x + pointerPos.x) / 2; + const centerY = (startPos.y + pointerPos.y) / 2; + const size = Math.max(Math.abs(width), Math.abs(height)); + + // گوشه بالا-چپ مستطیل محدودکننده + const x = centerX - size / 2; + const y = centerY - size / 2; + + return { + id: tempObject?.id || `rect-${Date.now()}`, + type: "rectangle", + x: x, + y: y, + width: size, + height: size, + fill: "#3b82f6", + stroke: "#1e40af", + strokeWidth: 0, + shapeType: activeShape, + }; + } + + // برای شکل انتزاعی، مرکز را محاسبه می‌کنیم و سپس گوشه بالا-چپ را + if (activeShape === "abstract") { + const centerX = (startPos.x + pointerPos.x) / 2; + const centerY = (startPos.y + pointerPos.y) / 2; + const size = Math.max(Math.abs(width), Math.abs(height)); + + // گوشه بالا-چپ مستطیل محدودکننده + const x = centerX - size / 2; + const y = centerY - size / 2; + + return { + id: tempObject?.id || `rect-${Date.now()}`, + type: "rectangle", + x: x, + y: y, + width: size, + height: size, + fill: "#3b82f6", + stroke: "#1e40af", + strokeWidth: 0, + shapeType: activeShape, + }; + } + + // برای سایر اشکال (مستطیل) return { id: tempObject?.id || `rect-${Date.now()}`, type: "rectangle", diff --git a/src/pages/editor/components/canvas/useDrawingHandlers.ts b/src/pages/editor/components/canvas/useDrawingHandlers.ts index 15efd2b..25e8186 100644 --- a/src/pages/editor/components/canvas/useDrawingHandlers.ts +++ b/src/pages/editor/components/canvas/useDrawingHandlers.ts @@ -51,15 +51,23 @@ export const useDrawingHandlers = () => { const pointerPos = stage.getPointerPosition(); if (!pointerPos) return; + // تبدیل موقعیت به مختصات واقعی لایه (با در نظر گرفتن scale) + const scaleX = stage.scaleX(); + const scaleY = stage.scaleY(); + const realPos = { + x: pointerPos.x / scaleX, + y: pointerPos.y / scaleY, + }; + setIsDrawing(true); - setStartPos(pointerPos); + setStartPos(realPos); if (tool === "text") { const newText: EditorObject = { id: `text-${Date.now()}`, type: "text", - x: pointerPos.x, - y: pointerPos.y, + x: realPos.x, + y: realPos.y, text: "متن جدید", fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, @@ -75,7 +83,7 @@ export const useDrawingHandlers = () => { } if (tool === "grid") { - addTable(pointerPos.x, pointerPos.y, 4, 5); + addTable(realPos.x, realPos.y, 4, 5); setSelectedTableId(null); setTool("select"); } @@ -90,7 +98,15 @@ export const useDrawingHandlers = () => { const pointerPos = stage.getPointerPosition(); if (!pointerPos) return; - const newObject = createDrawingObject({ tool, startPos, pointerPos, tempObject }); + // تبدیل موقعیت به مختصات واقعی لایه (با در نظر گرفتن scale) + const scaleX = stage.scaleX(); + const scaleY = stage.scaleY(); + const realPos = { + x: pointerPos.x / scaleX, + y: pointerPos.y / scaleY, + }; + + const newObject = createDrawingObject({ tool, startPos, pointerPos: realPos, tempObject }); if (!newObject) return; if (!tempObject) {