MS Paint

1"use client";
2import React, { useRef, useState, useEffect, useCallback } from "react";
3import { Pencil, Eraser, Square, Save, Menu } from "lucide-react";
4 
5export interface MSpaintProps {
6  width?: number;
7  height?: number;
8  canvasWidth?: number;
9  canvasHeight?: number;
10  title?: string;
11  menuItems?: string[];
12  className?: string;
13  style?: React.CSSProperties;
14  colorPalette?: string[];
15  brushSize?: number;
16  eraserSize?: number;
17  onSave?: (canvas: HTMLCanvasElement) => void;
18}
19 
20interface CustomButtonProps {
21  children: React.ReactNode;
22  className?: string;
23  onClick?: () => void;
24  title?: string;
25  variant?: "default" | "ghost";
26}
27 
28const CustomButton: React.FC<CustomButtonProps> = ({
29  children,
30  className = "",
31  onClick,
32  title = "",
33  variant = "default",
34}) => {
35  const variantStyles =
36    variant === "ghost"
37      ? "hover:bg-gray-200 hover:text-gray-900"
38      : "bg-gray-200 text-gray-900 hover:bg-gray-300";
39  return (
40    <button
41      className={`inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed ${variantStyles} ${className}`}
42      onClick={onClick}
43      title={title}
44    >
45      {children}
46    </button>
47  );
48};
49 
50const DEFAULT_COLORS = [
51  "#000000",
52  "#FFFFFF",
53  "#FF0000",
54  "#00FF00",
55  "#0000FF",
56  "#FFFF00",
57  "#00FFFF",
58  "#FF00FF",
59  "#FFA500",
60  "#800080",
61  "#A52A2A",
62  "#808080",
63];
64 
65export default function MSpaint({
66  width = 800,
67  height = 500,
68  canvasWidth = 2000,
69  canvasHeight = 2000,
70  title = "untitled - Paint",
71  menuItems = ["File", "Edit", "View", "Image", "Options", "Help"],
72  className = "",
73  style = {},
74  colorPalette = DEFAULT_COLORS,
75  brushSize = 2,
76  eraserSize = 20,
77  onSave,
78}: MSpaintProps) {
79  const backgroundColor = "#FFFFFF";
80  const defaultStatusMessage = "For Help, click Help Topics on the Help Menu.";
81  const canvasRef = useRef<HTMLCanvasElement>(null);
82  const containerRef = useRef<HTMLDivElement>(null);
83  const canvasContainerRef = useRef<HTMLDivElement>(null);
84  const downloadLinkRef = useRef<HTMLAnchorElement>(null);
85  const colorPickerRef = useRef<HTMLInputElement>(null);
86  const [isDrawing, setIsDrawing] = useState(false);
87  const [lastPosition, setLastPosition] = useState({ x: 0, y: 0 });
88  const [color, setColor] = useState("#000000");
89  const [tool, setTool] = useState("brush");
90// … truncated