Function useEllipseTool

hooks/DrawEllipseTool.ts:11–96

()

import { getPointerPositionRelativeToStage } from "./getPointerPosition";

export function useEllipseTool() {
  const tool = useStateStore((state) => state.selectedTool);
  const properties = useToolPropertiesStore(
    (s) => s.properties.ellipse ?? defaultEllipseProperties
  );

  const ellipses = useHistoryStore((state) => state.current.ellipses);
  const addEllipse = useHistoryStore((state) => state.addEllipse);
  const updateEllipseInStore = useHistoryStore((state) => state.updateEllipse);
  const saveToHistory = useHistoryStore((state) => state.saveToHistory);

  const isDrawing = useRef(false);
  const currentDraw = useRef<{
    id: string;
    startX: number;
    startY: number;
  } | null>(null);

  const handlePointerDown = (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
    if (tool !== "ellipse") return;

    // Save current state before starting new drawing
    saveToHistory();

    isDrawing.current = true;

    const stage = e.target.getStage();
    const pos = stage ? getPointerPositionRelativeToStage(stage) : null;
    if (!pos) return;

    const id = createShapeId();
    currentDraw.current = { id, startX: pos.x, startY: pos.y };

    addEllipse({
      id,
      x: pos.x,
      y: pos.y,
      radiusX: 0,
      radiusY: 0,
      stroke: properties.stroke,
      fill: properties.fill,
      strokeWidth: properties.strokeWidth,
      opacity: properties.opacity,
    });
  };

  const handlePointerMove = (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
    if (!isDrawing.current || tool !== "ellipse") return;

    const stage = e.target.getStage();
    const pos = stage ? getPointerPositionRelativeToStage(stage) : null;
    if (!pos) return;

    const current = currentDraw.current;
    if (!current) return;

    const { startX, startY, id } = current;
    const radiusX = Math.max(Math.abs(pos.x - startX) / 2, 1);