fix drawing
This commit is contained in:
@@ -19,6 +19,76 @@ export const createDrawingObject = ({
|
|||||||
|
|
||||||
if (tool === "rectangle") {
|
if (tool === "rectangle") {
|
||||||
const activeShape = useShapeStore.getState().activeShape;
|
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 {
|
return {
|
||||||
id: tempObject?.id || `rect-${Date.now()}`,
|
id: tempObject?.id || `rect-${Date.now()}`,
|
||||||
type: "rectangle",
|
type: "rectangle",
|
||||||
|
|||||||
@@ -51,15 +51,23 @@ export const useDrawingHandlers = () => {
|
|||||||
const pointerPos = stage.getPointerPosition();
|
const pointerPos = stage.getPointerPosition();
|
||||||
if (!pointerPos) return;
|
if (!pointerPos) return;
|
||||||
|
|
||||||
|
// تبدیل موقعیت به مختصات واقعی لایه (با در نظر گرفتن scale)
|
||||||
|
const scaleX = stage.scaleX();
|
||||||
|
const scaleY = stage.scaleY();
|
||||||
|
const realPos = {
|
||||||
|
x: pointerPos.x / scaleX,
|
||||||
|
y: pointerPos.y / scaleY,
|
||||||
|
};
|
||||||
|
|
||||||
setIsDrawing(true);
|
setIsDrawing(true);
|
||||||
setStartPos(pointerPos);
|
setStartPos(realPos);
|
||||||
|
|
||||||
if (tool === "text") {
|
if (tool === "text") {
|
||||||
const newText: EditorObject = {
|
const newText: EditorObject = {
|
||||||
id: `text-${Date.now()}`,
|
id: `text-${Date.now()}`,
|
||||||
type: "text",
|
type: "text",
|
||||||
x: pointerPos.x,
|
x: realPos.x,
|
||||||
y: pointerPos.y,
|
y: realPos.y,
|
||||||
text: "متن جدید",
|
text: "متن جدید",
|
||||||
fontSize: defaults.fontSize,
|
fontSize: defaults.fontSize,
|
||||||
fontFamily: defaults.fontFamily,
|
fontFamily: defaults.fontFamily,
|
||||||
@@ -75,7 +83,7 @@ export const useDrawingHandlers = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (tool === "grid") {
|
if (tool === "grid") {
|
||||||
addTable(pointerPos.x, pointerPos.y, 4, 5);
|
addTable(realPos.x, realPos.y, 4, 5);
|
||||||
setSelectedTableId(null);
|
setSelectedTableId(null);
|
||||||
setTool("select");
|
setTool("select");
|
||||||
}
|
}
|
||||||
@@ -90,7 +98,15 @@ export const useDrawingHandlers = () => {
|
|||||||
const pointerPos = stage.getPointerPosition();
|
const pointerPos = stage.getPointerPosition();
|
||||||
if (!pointerPos) return;
|
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 (!newObject) return;
|
||||||
|
|
||||||
if (!tempObject) {
|
if (!tempObject) {
|
||||||
|
|||||||
Reference in New Issue
Block a user