import { useState, useRef, useEffect } from "react"; import Konva from "konva"; import { useEditorStore, type EditorObject } from "@/pages/editor/store/editorStore"; import { useTextDefaultsStore } from "@/pages/editor/store/textDefaultsStore"; import { createDrawingObject } from "./drawingUtils"; export const useDrawingHandlers = () => { const [isDrawing, setIsDrawing] = useState(false); const [startPos, setStartPos] = useState({ x: 0, y: 0 }); const [tempObject, setTempObject] = useState(null); const transformerRef = useRef(null); const { tool, addObject, updateObject, setSelectedObjectId, selectedObjectId } = useEditorStore(); const { defaults } = useTextDefaultsStore(); useEffect(() => { setTempObject(null); setIsDrawing(false); }, [tool]); const clearSelection = () => { setSelectedObjectId(null); if (transformerRef.current) { transformerRef.current.nodes([]); transformerRef.current.getLayer()?.batchDraw(); } }; const handleStageMouseDown = (e: Konva.KonvaEventObject) => { const stage = e.target.getStage(); if (!stage) return; const clickedOnEmpty = e.target === stage; if (clickedOnEmpty && selectedObjectId) { clearSelection(); return; } if (tool === "select") { if (clickedOnEmpty) { clearSelection(); } return; } if (selectedObjectId) { return; } const pointerPos = stage.getPointerPosition(); if (!pointerPos) return; setIsDrawing(true); setStartPos(pointerPos); if (tool === "text") { const newText: EditorObject = { id: `text-${Date.now()}`, type: "text", x: pointerPos.x, y: pointerPos.y, text: "متن جدید", fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, fontWeight: defaults.fontWeight, fill: defaults.fill, opacity: defaults.opacity, letterSpacing: defaults.letterSpacing, wordSpacing: defaults.wordSpacing, }; addObject(newText); setSelectedObjectId(newText.id); } }; const handleStageMouseMove = (e: Konva.KonvaEventObject) => { if (!isDrawing || tool === "select" || tool === "text") return; const stage = e.target.getStage(); if (!stage) return; const pointerPos = stage.getPointerPosition(); if (!pointerPos) return; const newObject = createDrawingObject({ tool, startPos, pointerPos, tempObject }); if (!newObject) return; if (!tempObject) { addObject(newObject); setTempObject(newObject); } else { const updates: Partial = tool === "circle" ? { width: newObject.width, height: newObject.height } : { x: newObject.x, y: newObject.y, width: newObject.width, height: newObject.height, }; updateObject(tempObject.id, updates); } }; const handleStageMouseUp = () => { setIsDrawing(false); setTempObject(null); }; return { isDrawing, transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp, }; };