Function CanvasComponent

components/CanvasComponent.tsx:28–396

()

};

const CanvasComponent: React.FC = () => {
  const selectedTool = useStateStore((state) => state.selectedTool);
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const [stageScale, setStageScale] = useState(1);
  const [stagePosition, setStagePosition] = useState({ x: 0, y: 0 });
  const [isPanning, setIsPanning] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };

    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const stageRef = useRef<Konva.Stage | null>(null);
  const transformerRef = useRef<Konva.Transformer | null>(null);
  const shapeRefs = useRef<Map<string, Konva.Node | null>>(new Map());
  const [selectedTransformableShape, setSelectedTransformableShape] =
    useState<SelectedTransformableShape | null>(null);
  const [activeNode, setActiveNode] = useState<Konva.Node | null>(null);

  const freeDrawing = useFreeDrawingTool();
  const drawingLines = useDrawLineTool();
  const drawingRectangle = useDrawRectangleTool();
  const drawingEllipse = useEllipseTool();
  const drawingArrow = useDrawArrowTool();

  const isPointerTool = selectedTool === "pointer";

  const SCALE_BY = 1.05;
  const MIN_SCALE = 0.25;
  const MAX_SCALE = 4;

  const getCursorForTool = () => {
    if (selectedTool === "hand") return isPanning ? "grabbing" : "grab";
    if (selectedTool === "pointer") return "default";
    if (selectedTool === "text") return "text";
    if (selectedTool === "image" || selectedTool === "duplicate") return "copy";
    if (selectedTool === "lock") return "not-allowed";
    return "crosshair";
  };

  useEffect(() => {
    if (!selectedTransformableShape) {
      setActiveNode(null);
      return;
    }

    const node = shapeRefs.current.get(selectedTransformableShape.id) ?? null;
    setActiveNode(node);
  }, [selectedTransformableShape]);

  useEffect(() => {