Upload 23 files

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,12 +1,36 @@
----
-title: Drawing Model
-emoji: 🦀
-colorFrom: pink
-colorTo: purple
-sdk: static
-pinned: false
-license: other
-short_description: idk
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "drawing-app-qt-minh",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "lucide": "^0.453.0",
+    "lucide-react": "^0.453.0",
+    "next": "15.0.1",
+    "perfect-freehand": "^1.2.2",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
+    "roughjs": "^4.6.6"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "15.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/app/DrawingBoard.js

@@ -0,0 +1,627 @@
+import React from 'react';
+import { 
+  Undo2, 
+  Redo2, 
+  Pencil, 
+  Hand, 
+  Square, 
+  Eraser,
+  Sun,
+  Moon,
+  ZoomIn,
+  ZoomOut,
+  Grid,
+  GripHorizontal,
+  RotateCcw,
+  Scan,
+  Download,
+  Menu,
+  X,
+  Ruler,
+  Palette
+} from 'lucide-react';
+
+const PRESET_COLORS = [
+  '#000000', '#FFFFFF', '#FF4500', '#FFA500',
+  '#FF0000', '#FF1493', '#800080', '#4B0082',
+  '#008000', '#C0C0C0', '#FFA500', '#4169E1',
+  '#00FF00', '#40E0D0', '#0000FF', '#FFD700'
+];
+
+const safeLocalStorage = {
+  getItem: (key) => {
+    try {
+      if (typeof window !== 'undefined') {
+        return window.localStorage.getItem(key);
+      }
+      return null;
+    } catch (e) {
+      console.warn('localStorage is not available:', e);
+      return null;
+    }
+  },
+  setItem: (key, value) => {
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, value);
+      }
+    } catch (e) {
+      console.warn('localStorage is not available:', e);
+    }
+  }
+};
+
+const getInitialDarkMode = () => {
+  if (typeof window === 'undefined') return false;
+  
+  const savedMode = safeLocalStorage.getItem('drawingBoardDarkMode');
+  if (savedMode !== null) {
+    return savedMode === 'true';
+  }
+  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+};
+
+const DrawingBoard = ({
+  tool,
+  setTool,
+  elements,
+  pencilSize,
+  setPencilSize,
+  scale,
+  setScale,
+  onZoom,
+  undo,
+  redo,
+  action,
+  selectedElement,
+  panOffset,
+  scaleOffset,
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
+  handleBlur,
+  captureDrawnArea,
+  handleDetectRegions,
+  handleDownloadRegions
+}) => {
+  const textAreaRef = React.useRef(null);
+  const backgroundCanvasRef = React.useRef(null);
+  const drawingCanvasRef = React.useRef(null);
+  const [backgroundType, setBackgroundType] = React.useState('none');
+  const [gridSize, setGridSize] = React.useState(45);
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [showDownloadButton, setShowDownloadButton] = React.useState(false);
+  const [showColorPicker, setShowColorPicker] = React.useState(false);
+  const [currentColor, setCurrentColor] = React.useState('#000000');
+  const [customColor, setCustomColor] = React.useState('#000000');
+  const [darkMode, setDarkMode] = React.useState(getInitialDarkMode);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e) => {
+      const savedMode = localStorage.getItem('drawingBoardDarkMode');
+      if (savedMode === null) {
+        setDarkMode(e.matches);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+  React.useEffect(() => {
+    safeLocalStorage.setItem('drawingBoardDarkMode', darkMode);
+    drawElements();
+  }, [darkMode]);
+  React.useEffect(() => {
+    localStorage.setItem('drawingBoardDarkMode', darkMode);
+    drawElements();
+  }, [darkMode]);
+
+  const drawBackground = React.useCallback(() => {
+    const canvas = backgroundCanvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width;
+    const height = canvas.height;
+
+    ctx.fillStyle = darkMode ? '#ffffff' : '#000000';
+    ctx.fillRect(0, 0, width, height);
+
+    const offsetX = (panOffset.x * scale - scaleOffset.x) % (gridSize * scale);
+    const offsetY = (panOffset.y * scale - scaleOffset.y) % (gridSize * scale);
+    const gridColor = darkMode ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)';
+
+    if (backgroundType === 'grid') {
+      const majorGridSize = gridSize *5;
+      const majorGridColor = darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+      const minorGridColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+      ctx.beginPath();
+      ctx.strokeStyle = gridColor;
+      ctx.lineWidth = 0.5;
+
+      for (let x = offsetX; x < width; x += gridSize * scale) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+      }
+
+      for (let y = offsetY; y < height; y += gridSize * scale) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+      }
+
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.strokeStyle = majorGridColor;
+      ctx.lineWidth = 1.5;
+
+      // Tính offset cho grid lớn
+      const majorOffsetX = offsetX - (offsetX % (majorGridSize * scale));
+      const majorOffsetY = offsetY - (offsetY % (majorGridSize * scale));
+      for (let x = majorOffsetX; x < width; x += majorGridSize * scale) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+      }
+
+      // Vẽ các đường ngang lớn
+      for (let y = majorOffsetY; y < height; y += majorGridSize * scale) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+      }
+      ctx.stroke();
+    } else if (backgroundType === 'dots') {
+      ctx.fillStyle = gridColor;
+      const dotSize = 2;
+      
+      for (let x = offsetX; x < width; x += gridSize * scale) {
+        for (let y = offsetY; y < height; y += gridSize * scale) {
+          ctx.beginPath();
+          ctx.arc(x, y, 1, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+    }
+  }, [backgroundType, gridSize, scale, panOffset, scaleOffset, darkMode]);
+  const toggleBackground = () => {
+    setBackgroundType(prev => {
+      if (prev === 'none') return 'grid';
+      if (prev === 'grid') return 'dots';
+      return 'none';
+    });
+  };
+  const drawElements = React.useCallback(() => {
+    const canvas = drawingCanvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.save();
+    ctx.translate(panOffset.x * scale - scaleOffset.x, panOffset.y * scale - scaleOffset.y);
+    ctx.scale(scale, scale);
+
+    elements.forEach(element => {
+      if (element.type === 'pencil') {
+        ctx.beginPath();
+        ctx.strokeStyle = element.color || currentColor;
+        ctx.lineWidth = element.size;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        
+        element.points.forEach((point, index) => {
+          if (index === 0) {
+            ctx.moveTo(point.x, point.y);
+          } else {
+            ctx.lineTo(point.x, point.y);
+          }
+        });
+        ctx.stroke();
+      } else if (element.type === 'line') {
+        ctx.beginPath();
+        ctx.strokeStyle = element.color || currentColor;
+        ctx.lineWidth = 2;
+        ctx.moveTo(element.x1, element.y1);
+        ctx.lineTo(element.x2, element.y2);
+        ctx.stroke();
+      } else if (element.type === 'rectangle') {
+        ctx.strokeStyle = element.color || currentColor;
+        ctx.lineWidth = 2;
+        ctx.strokeRect(
+          element.x1,
+          element.y1,
+          element.x2 - element.x1,
+          element.y2 - element.y1
+        );
+      } else if (element.type === 'text') {
+        ctx.font = '24px sans-serif';
+        ctx.fillStyle = element.color || currentColor;
+        ctx.fillText(element.text, element.x1, element.y1);
+      }
+    });
+
+    ctx.restore();
+  }, [elements, scale, panOffset, scaleOffset, currentColor]);
+  React.useEffect(() => {
+    drawBackground();
+    drawElements();
+  }, [drawBackground, drawElements]);
+  const ColorPickerButton = () => (
+    <div className="relative">
+      <button
+        onClick={() => setShowColorPicker(!showColorPicker)}
+        className="p-2 rounded hover:bg-opacity-80 flex items-center gap-1"
+        title="Color Picker"
+      >
+        <div
+          className="w-5 h-5 rounded-full border border-gray-300"
+          style={{ backgroundColor: currentColor }}
+        />
+        <Palette size={16} color={iconColor} />
+      </button>
+      {showColorPicker && <ColorPicker />}
+    </div>
+  );
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (backgroundCanvasRef.current && drawingCanvasRef.current) {
+        backgroundCanvasRef.current.width = window.innerWidth;
+        backgroundCanvasRef.current.height = window.innerHeight;
+        drawingCanvasRef.current.width = window.innerWidth;
+        drawingCanvasRef.current.height = window.innerHeight;
+        drawBackground();
+        drawElements();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, [drawBackground, drawElements]);
+
+  const toggleDarkMode = () => {
+    setDarkMode(prev => !prev);
+  };
+  
+  const handleDetectAndShowDownload = () => {
+    handleDetectRegions();
+    setShowDownloadButton(true);
+    setIsMenuOpen(false);
+  };  
+
+  const iconColor = darkMode ? "#000000" : "#ffffff"; // Đảo ngược màu icon
+  const barBgColor = darkMode ? "bg-white" : "bg-gray-800"; // Giữ nguyên màu nền
+  const textColor = darkMode ? 'text-black' : 'text-white'; // Đảo ngược màu text
+  const handleColorChange =(color)=>{
+    setCurrentColor(color);
+    setShowColorPicker(false);
+  };
+  const handleCustomColorChange = (e) =>{
+    const newColor = e.target.value;
+    setCustomColor(newColor);
+    setCurrentColor(newColor);
+  };
+  const ColorPicker = () => (
+    <div className={`absolute top-full mt-2 p-2 ${barBgColor} rounded-lg shadow-lg`}>
+      <div className="grid grid-cols-4 gap-2 mb-2">
+        {PRESET_COLORS.map((color, index) => (
+          <button
+            key={index}
+            onClick={() => handleColorChange(color)}
+            className="w-6 h-6 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            style={{ 
+              backgroundColor: color,
+              border: currentColor === color ? '2px solid #3B82F6' : '1px solid #D1D5DB'
+            }}
+          />
+        ))}
+      </div>
+      <div className="flex items-center gap-2 mt-2 pt-2 border-t border-gray-600">
+        <input
+          type="color"
+          value={customColor}
+          onChange={handleCustomColorChange}
+          className="w-8 h-8 p-0 border-0 rounded cursor-pointer"
+        />
+        <input
+          type="text"
+          value={customColor.toUpperCase()}
+          onChange={(e) => {
+            const val = e.target.value;
+            if (/^#[0-9A-F]{0,6}$/i.test(val)) {
+              setCustomColor(val);
+              if (val.length === 7) setCurrentColor(val);
+            }
+          }}
+          className={`w-20 px-1 py-0.5 text-sm rounded ${
+            darkMode ? 'bg-gray-700 text-white' : 'bg-white text-black'
+          }`}
+          placeholder="#000000"
+        />
+      </div>
+    </div>
+  );
+  return (
+    <div className={`relative w-full h-screen ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
+      {/* Corner Menu Button */}
+      <button
+        onClick={() => setIsMenuOpen(!isMenuOpen)}
+        className={`fixed top-4 left-4 z-20 p-2 ${barBgColor} rounded-lg shadow-lg hover:bg-opacity-80`}
+      >
+        {isMenuOpen ? 
+          <X size={24} color={iconColor} /> : 
+          <Menu size={24} color={iconColor} />
+        }
+      </button>
+
+      {/* Corner Menu Panel */}
+      {isMenuOpen && (
+        <div className={`fixed top-16 left-4 z-20 ${barBgColor} rounded-lg shadow-lg p-4 w-64`}>
+          <div className="flex flex-col gap-4">
+            {/* Theme Toggle */}
+            <button
+              onClick={toggleDarkMode}
+              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
+            >
+              <span className={`text-sm ${darkMode ? 'text-gray-600' : 'text-white'}`}>
+                {darkMode ? 'Light Mode' : 'Dark Mode'}
+              </span>
+              {darkMode ? 
+                <Sun size={20} color={iconColor} /> : 
+                <Moon size={20} color={iconColor} />
+              }
+            </button>
+
+            {/* Grid Toggle */}
+            <button
+              onClick={() => setBackgroundType(prev => prev === 'grid' ? 'none' : 'grid')}
+              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
+            >
+              <span className={`text-sm ${darkMode ? 'text-gray-600' : 'text-white'}`}>
+                Show Grid
+              </span>
+              <Grid 
+                size={20} 
+                color={iconColor}
+                className={backgroundType === 'grid' ? 'opacity-100' : 'opacity-50'}
+              />
+            </button>
+            <button
+              onClick={toggleBackground}
+              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${
+                darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'
+              }`}
+            >
+              <span className={`text-sm ${darkMode ? 'text-black' : 'text-white'}`}>
+                {backgroundType === 'none' ? 'No Grid' : 
+                backgroundType === 'grid' ? 'Grid Lines' : 'Grid Dots'}
+              </span>
+              <Grid 
+                size={20} 
+                color={iconColor}
+                className={backgroundType !== 'none' ? 'opacity-100' : 'opacity-50'}
+              />
+            </button>
+            
+            {backgroundType !== 'none' && (
+              <div className="flex flex-col gap-2 p-2">
+                <div className="flex items-center justify-between">
+                  <span className={`text-sm ${darkMode ? 'text-black' : 'text-white'}`}>
+                    Grid Size
+                  </span>
+                  <span className={`text-sm ${darkMode ? 'text-black' : 'text-white'}`}>
+                    {gridSize}px
+                  </span>
+                </div>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  value={gridSize}
+                  onChange={(e) => setGridSize(parseInt(e.target.value))}
+                  className="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+                />
+              </div>
+            )}
+            <style jsx global>{`
+              input[type="range"] {
+                -webkit-appearance: none;
+                height: 4px;
+                background: ${darkMode ? '#ffffff40' : '#00000040'};
+                border-radius: 2px;
+                outline: none;
+              }
+
+              input[type="range"]::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                appearance: none;
+                width: 12px;
+                height: 12px;
+                background: ${darkMode ? '#ffffff' : '#000000'};
+                border-radius: 50%;
+                cursor: pointer;
+              }
+
+              input[type="range"]::-moz-range-thumb {
+                width: 12px;
+                height: 12px;
+                background: ${darkMode ? '#ffffff' : '#000000'};
+                border-radius: 50%;
+                cursor: pointer;
+                border: none;
+              }
+
+              input[type="range"]:hover::-webkit-slider-thumb {
+                background: #3b82f6;
+              }
+
+              input[type="range"]:hover::-moz-range-thumb {
+                background: #3b82f6;
+              }
+            `}</style>
+            {/* Region Detection */}
+            <button
+              onClick={handleDetectAndShowDownload}
+              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
+            >
+              <span className={`text-sm ${darkMode ? 'text-gray-600' : 'text-white'}`}>
+                Detect Regions
+              </span>
+              <Scan size={20} color={iconColor} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Main Toolbar */}
+      <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 flex items-center gap-1 ${barBgColor} rounded-lg shadow-lg p-2 z-10`}>
+        <div className="flex items-center gap-1 pr-2 border-r border-gray-200">
+          <button onClick={undo} className="p-2 rounded hover:bg-opacity-80" title="Undo">
+            <Undo2 size={20} color={iconColor} />
+          </button>
+          <button onClick={redo} className="p-2 rounded hover:bg-opacity-80" title="Redo">
+            <Redo2 size={20} color={iconColor} />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-1 px-2">
+          <ColorPickerButton />
+          <button
+            onClick={() => setTool('selection')}
+            className={`p-2 rounded ${tool === 'selection' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
+            title="Selection"
+          >
+            <Hand size={20} color={tool === 'selection' ? '#ffffff' : iconColor} />
+          </button>
+          <button
+            onClick={() => setTool('line')}
+            className={`p-2 rounded ${tool === 'line' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
+            title="Line"
+          >
+            <GripHorizontal size={20} color={tool === 'line' ? '#ffffff' : iconColor} />
+          </button>
+          <button
+            onClick={() => setTool('rectangle')}
+            className={`p-2 rounded ${tool === 'rectangle' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
+            title="Rectangle"
+          >
+            <Square size={20} color={tool === 'rectangle' ? '#ffffff' : iconColor} />
+          </button>
+          <button
+            onClick={() => setTool('pencil')}
+            className={`p-2 rounded ${tool === 'pencil' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
+            title="Pencil"
+          >
+            <Pencil size={20} color={tool === 'pencil' ? '#ffffff' : iconColor} />
+          </button>
+          <button
+            onClick={() => setTool('eraser')}
+            className={`p-2 rounded ${tool === 'eraser' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
+            title="Eraser"
+          >
+            <Eraser size={20} color={tool === 'eraser' ? '#ffffff' : iconColor} />
+          </button>
+        {(tool === 'pencil') && (
+          <div className=' flex items-center gap-2 ml-2'>
+            <Ruler size={16} color={iconColor} />
+            <input
+              type="range"
+              min="1"
+              max="20"
+              value={pencilSize}
+              onChange={(e) => setPencilSize(parseInt(e.target.value))}
+              className="w-24 h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+              title="Pencil Size"
+            />
+            <span className={'text-sm ${textColor}'}>{pencilSize}px</span>
+          </div>
+        )}
+        </div>
+
+        <div className="flex items-center gap-1 pl-2 border-l border-gray-200">
+          <button
+            onClick={() => setScale(1)}
+            className="p-2 rounded hover:bg-opacity-80"
+            title="Reset View"
+          >
+            <RotateCcw size={20} color={iconColor} />
+          </button>
+          <button
+            onClick={() => onZoom(-0.1)}
+            className="p-2 rounded hover:bg-opacity-80"
+            title="Zoom Out"
+          >
+            <ZoomOut size={20} color={iconColor} />
+          </button>
+          <span className={`text-sm min-w-[4rem] text-center ${textColor}`}>
+            {Math.round(scale * 100)}%
+          </span>
+          <button
+            onClick={() => onZoom(0.1)}
+            className="p-2 rounded hover:bg-opacity-80"
+            title="Zoom In"
+          >
+            <ZoomIn size={20} color={iconColor} />
+          </button>
+        </div>
+      </div>
+
+      {/* Download Button */}
+      {showDownloadButton && (
+        <button
+          onClick={() => {
+            handleDownloadRegions();
+            setShowDownloadButton(false);
+          }}
+          className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-20 px-4 py-2 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 flex items-center gap-2"
+        >
+          <Download size={20} color="#ffffff" />
+          Download Detected Regions
+        </button>
+      )}
+
+
+      {/* Canvas Container */}
+      <div className="absolute inset-0">
+        <canvas
+          ref={backgroundCanvasRef}
+          className="absolute inset-0 z-0"
+        />
+        <canvas
+          id="canvas"
+          ref={drawingCanvasRef}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          className="absolute inset-0 z-1"
+        />
+      </div>
+
+      {/* Text Area for Writing */}
+      {action === "writing" && (
+        <textarea
+          ref={textAreaRef}
+          onBlur={handleBlur}
+          style={{
+            position: "fixed",
+            top: (selectedElement.y1 - 2) * scale + panOffset.y * scale - scaleOffset.y,
+            left: selectedElement.x1 * scale + panOffset.x * scale - scaleOffset.x,
+            font: `${24 * scale}px sans-serif`,
+            margin: 0,
+            padding: 0,
+            border: 0,
+            outline: 0,
+            resize: "auto",
+            overflow: "hidden",
+            whiteSpace: "pre",
+            background: "transparent",
+            color: darkMode ? 'white' : 'black',
+            zIndex: 2,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DrawingBoard;

src/app/element-utils.js

@@ -0,0 +1,243 @@
+import rough from "roughjs/bundled/rough.esm";
+import getStroke from "perfect-freehand";
+
+const generator = rough.generator();
+
+export const createElement = (id, x1, y1, x2, y2, type, pencilSize = 3) => {
+  switch (type) {
+    case "line":
+    case "rectangle":
+      const roughElement =
+        type === "line"
+          ? generator.line(x1, y1, x2, y2)
+          : generator.rectangle(x1, y1, x2 - x1, y2 - y1);
+      return { id, x1, y1, x2, y2, type, roughElement };
+    case "pencil":
+      return { id, type, points: [{ x: x1, y: y1, isErased: false }], size: pencilSize };
+    case "text":
+      return { id, type, x1, y1, x2, y2, text: "" };
+    case "capture":
+      return { id, type, x1, y1, x2, y2 };
+    default:
+      throw new Error(`Type not recognised: ${type}`);
+  }
+};
+
+export const isPointNearEraser = (x, y, eraserX, eraserY, eraserSize) => {
+  const distance = Math.sqrt(Math.pow(x - eraserX, 2) + Math.pow(y - eraserY, 2));
+  return distance <= eraserSize;
+};
+
+const nearPoint = (x, y, x1, y1, name) => {
+  return Math.abs(x - x1) < 5 && Math.abs(y - y1) < 5 ? name : null;
+};
+
+const onLine = (x1, y1, x2, y2, x, y, maxDistance = 1) => {
+  const a = { x: x1, y: y1 };
+  const b = { x: x2, y: y2 };
+  const c = { x, y };
+  const offset = distance(a, b) - (distance(a, c) + distance(b, c));
+  return Math.abs(offset) < maxDistance ? "inside" : null;
+};
+
+const positionWithinElement = (x, y, element) => {
+  const { type, x1, x2, y1, y2 } = element;
+  switch (type) {
+    case "line":
+      const on = onLine(x1, y1, x2, y2, x, y);
+      const start = nearPoint(x, y, x1, y1, "start");
+      const end = nearPoint(x, y, x2, y2, "end");
+      return start || end || on;
+    case "rectangle":
+      const topLeft = nearPoint(x, y, x1, y1, "tl");
+      const topRight = nearPoint(x, y, x2, y1, "tr");
+      const bottomLeft = nearPoint(x, y, x1, y2, "bl");
+      const bottomRight = nearPoint(x, y, x2, y2, "br");
+      const inside = x >= x1 && x <= x2 && y >= y1 && y <= y2 ? "inside" : null;
+      return topLeft || topRight || bottomLeft || bottomRight || inside;
+    case "pencil":
+      const betweenAnyPoint = element.points.some((point, index) => {
+        const nextPoint = element.points[index + 1];
+        if (!nextPoint) return false;
+        return onLine(point.x, point.y, nextPoint.x, nextPoint.y, x, y, 5) != null;
+      });
+      return betweenAnyPoint ? "inside" : null;
+    case "text":
+      return x >= x1 && x <= x2 && y >= y1 && y <= y2 ? "inside" : null;
+    default:
+      throw new Error(`Type not recognised: ${type}`);
+  }
+};
+
+export const distance = (a, b) => Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+
+export const getElementAtPosition = (x, y, elements) => {
+  return elements
+    .map(element => ({ ...element, position: positionWithinElement(x, y, element) }))
+    .find(element => element.position !== null);
+};
+
+export const adjustElementCoordinates = element => {
+  const { type, x1, y1, x2, y2 } = element;
+  if (type === "rectangle") {
+    const minX = Math.min(x1, x2);
+    const maxX = Math.max(x1, x2);
+    const minY = Math.min(y1, y2);
+    const maxY = Math.max(y1, y2);
+    return { x1: minX, y1: minY, x2: maxX, y2: maxY };
+  } else {
+    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
+      return { x1, y1, x2, y2 };
+    } else {
+      return { x1: x2, y1: y2, x2: x1, y2: y1 };
+    }
+  }
+};
+
+export const cursorForPosition = position => {
+  switch (position) {
+    case "tl":
+    case "br":
+    case "start":
+    case "end":
+      return "nwse-resize";
+    case "tr":
+    case "bl":
+      return "nesw-resize";
+    default:
+      return "move";
+  }
+};
+
+export const resizedCoordinates = (clientX, clientY, position, coordinates) => {
+  const { x1, y1, x2, y2 } = coordinates;
+  switch (position) {
+    case "tl":
+    case "start":
+      return { x1: clientX, y1: clientY, x2, y2 };
+    case "tr":
+      return { x1, y1: clientY, x2: clientX, y2 };
+    case "bl":
+      return { x1: clientX, y1, x2, y2: clientY };
+    case "br":
+    case "end":
+      return { x1, y1, x2: clientX, y2: clientY };
+    default:
+      return null;
+  }
+};
+
+export const getSvgPathFromStroke = stroke => {
+  if (!stroke.length) return "";
+
+  const d = stroke.reduce(
+    (acc, [x0, y0], i, arr) => {
+      const [x1, y1] = arr[(i + 1) % arr.length];
+      acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
+      return acc;
+    },
+    ["M", ...stroke[0], "Q"]
+  );
+
+  d.push("Z");
+  return d.join(" ");
+};
+
+export const drawElement = (roughCanvas, context, element) => {
+  switch (element.type) {
+    case "line":
+    case "rectangle":
+      roughCanvas.draw(element.roughElement);
+      break;
+    case "pencil":
+      const nonErasedSegments = [];
+      let currentSegment = [];
+      
+      element.points.forEach((point, index) => {
+        if (!point.isErased) {
+          currentSegment.push([point.x, point.y]);
+        } else if (currentSegment.length > 0) {
+          nonErasedSegments.push([...currentSegment]);
+          currentSegment = [];
+        }
+      });
+      
+      if (currentSegment.length > 0) {
+        nonErasedSegments.push(currentSegment);
+      }
+
+      nonErasedSegments.forEach(segment => {
+        if (segment.length > 1) {
+          const stroke = getSvgPathFromStroke(getStroke(segment, {
+            size: element.size || 3,
+            thinning: 0.5,
+            smoothing: 0.5,
+            streamline: 0.5,
+          }));
+          context.fillStyle = '#000';
+          context.fill(new Path2D(stroke));
+        }
+      });
+      break;
+    case "text":
+      context.textBaseline = "top";
+      context.font = "24px sans-serif";
+      context.fillText(element.text, element.x1, element.y1);
+      break;
+    case "capture":
+      context.save();
+      context.strokeStyle = "#000000";
+      context.setLineDash([5, 5]);
+      context.lineWidth = 1;
+      context.strokeRect(
+        element.x1,
+        element.y1,
+        element.x2 - element.x1,
+        element.y2 - element.y1
+      );
+      context.restore();
+      break;
+    default:
+      throw new Error(`Type not recognised: ${element.type}`);
+  }
+};
+
+export const adjustmentRequired = type => ["line", "rectangle"].includes(type);
+
+export const calculateBoundsForElements = (elementsList) => {
+  if (elementsList.length === 0) return null;
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  elementsList.forEach(element => {
+    if (element.type === "text") {
+      minX = Math.min(minX, element.x1);
+      minY = Math.min(minY, element.y1);
+      maxX = Math.max(maxX, element.x2);
+      maxY = Math.max(maxY, element.y2);
+    } else if (element.type === "pencil") {
+      element.points.forEach(point => {
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+      });
+    } else if (element.type === "line" || element.type === "rectangle") {
+      minX = Math.min(minX, element.x1, element.x2);
+      minY = Math.min(minY, element.y1, element.y2);
+      maxX = Math.max(maxX, element.x1, element.x2);
+      maxY = Math.max(maxY, element.y2, element.y2);
+    }
+  });
+
+  const padding = 20;
+  return {
+    x1: minX - padding,
+    y1: minY - padding,
+    x2: maxX + padding,
+    y2: maxY + padding
+  };
+};

src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

src/app/handleMouse.js

@@ -0,0 +1,241 @@
+import { createElement, getElementAtPosition, adjustElementCoordinates, cursorForPosition, resizedCoordinates, adjustmentRequired } from './element-utils';
+
+export const createMouseHandlers = ({
+  action,
+  setAction,
+  tool,
+  setTool,
+  elements,
+  setElements,
+  selectedElement,
+  setSelectedElement,
+  panOffset,
+  setPanOffset,
+  scale,
+  scaleOffset,
+  startPanMousePosition,
+  setStartPanMousePosition,
+  pressedKeys,
+  pencilSize,
+  setCaptureArea,
+  isDrawing,
+  setIsDrawing
+}) => {
+  const getMouseCoordinates = event => {
+    const clientX = (event.clientX - panOffset.x * scale + scaleOffset.x) / scale;
+    const clientY = (event.clientY - panOffset.y * scale + scaleOffset.y) / scale;
+    return { clientX, clientY };
+  };
+
+  const updateElement = (id, x1, y1, x2, y2, type, options) => {
+    const elementsCopy = [...elements];
+
+    switch (type) {
+      case "line":
+      case "rectangle":
+        elementsCopy[id] = createElement(id, x1, y1, x2, y2, type);
+        elementsCopy[id].size = pencilSize;
+        break;
+      case "pencil":
+        elementsCopy[id].points = [...elementsCopy[id].points, { x: x2, y: y2 }];
+        break;
+      case "text":
+        const textWidth = document
+          .getElementById("canvas")
+          .getContext("2d")
+          .measureText(options.text).width;
+        const textHeight = 24;
+        elementsCopy[id] = {
+          ...createElement(id, x1, y1, x1 + textWidth, y1 + textHeight, type),
+          text: options.text,
+        };
+        break;
+      default:
+        throw new Error(`Type not recognised: ${type}`);
+    }
+
+    setElements(elementsCopy, true);
+  };
+
+  const handleMouseDown = event => {
+    if (action === "writing") return;
+
+    const { clientX, clientY } = getMouseCoordinates(event);
+
+    if (event.button === 1 || pressedKeys.has(" ")) {
+      setAction("panning");
+      setStartPanMousePosition({ x: clientX, y: clientY });
+      return;
+    }
+
+    setIsDrawing(true);
+
+    if (tool === "capture") {
+      const id = elements.length;
+      const element = createElement(id, clientX, clientY, clientX, clientY, "capture");
+      setElements(prevState => [...prevState, element]);
+      setSelectedElement(element);
+      setAction("drawing");
+      return;
+    }
+
+    if (tool === "eraser") {
+      setAction("erasing");
+      const elementToErase = getElementAtPosition(clientX, clientY, elements);
+      if (elementToErase) {
+        setElements(prevState => 
+          prevState.filter(el => el.id !== elementToErase.id)
+        );
+      }
+      return;
+    }
+
+    if (tool === "selection") {
+      const element = getElementAtPosition(clientX, clientY, elements);
+      if (element) {
+        if (element.type === "pencil") {
+          const xOffsets = element.points.map(point => clientX - point.x);
+          const yOffsets = element.points.map(point => clientY - point.y);
+          setSelectedElement({ ...element, xOffsets, yOffsets });
+        } else {
+          const offsetX = clientX - element.x1;
+          const offsetY = clientY - element.y1;
+          setSelectedElement({ ...element, offsetX, offsetY });
+        }
+        setElements(prevState => prevState);
+
+        if (element.position === "inside") {
+          setAction("moving");
+        } else {
+          setAction("resizing");
+        }
+      }
+    } else {
+      const id = elements.length;
+      const element = createElement(id, clientX, clientY, clientX, clientY, tool, pencilSize);
+      setElements(prevState => [...prevState, element]);
+      setSelectedElement(element);
+      setAction(tool === "text" ? "writing" : "drawing");
+    }
+  };
+
+  const handleMouseMove = event => {
+    const { clientX, clientY } = getMouseCoordinates(event);
+
+    if (action === "panning") {
+      const deltaX = clientX - startPanMousePosition.x;
+      const deltaY = clientY - startPanMousePosition.y;
+      setPanOffset({
+        x: panOffset.x + deltaX,
+        y: panOffset.y + deltaY,
+      });
+      return;
+    }
+
+    if (action === "erasing") {
+      const elementToErase = getElementAtPosition(clientX, clientY, elements);
+      if (elementToErase) {
+        setElements(prevState => 
+          prevState.filter(el => el.id !== elementToErase.id)
+        );
+      }
+      return;
+    }
+
+    if (tool === "selection") {
+      const element = getElementAtPosition(clientX, clientY, elements);
+      event.target.style.cursor = element ? cursorForPosition(element.position) : "default";
+    }
+    
+    if (action === "drawing") {
+      const index = elements.length - 1;
+      const { x1, y1 } = elements[index];
+      
+      if (tool === "capture") {
+        const element = elements[index];
+        const updatedElement = {
+          ...element,
+          x2: clientX,
+          y2: clientY
+        };
+        const elementsCopy = [...elements];
+        elementsCopy[index] = updatedElement;
+        setElements(elementsCopy, true);
+        setCaptureArea(updatedElement);
+      } else {
+        updateElement(index, x1, y1, clientX, clientY, tool);
+      }
+    } else if (action === "moving") {
+      if (selectedElement.type === "pencil") {
+        const newPoints = selectedElement.points.map((_, index) => ({
+          x: clientX - selectedElement.xOffsets[index],
+          y: clientY - selectedElement.yOffsets[index],
+        }));
+        const elementsCopy = [...elements];
+        elementsCopy[selectedElement.id] = {
+          ...elementsCopy[selectedElement.id],
+          points: newPoints,
+        };
+        setElements(elementsCopy, true);
+      } else {
+        const { id, x1, x2, y1, y2, type, offsetX, offsetY } = selectedElement;
+        const width = x2 - x1;
+        const height = y2 - y1;
+        const newX1 = clientX - offsetX;
+        const newY1 = clientY - offsetY;
+        const options = type === "text" ? { text: selectedElement.text } : {};
+        updateElement(id, newX1, newY1, newX1 + width, newY1 + height, type, options);
+      }
+    } else if (action === "resizing") {
+      const { id, type, position, ...coordinates } = selectedElement;
+      const { x1, y1, x2, y2 } = resizedCoordinates(clientX, clientY, position, coordinates);
+      updateElement(id, x1, y1, x2, y2, type);
+    }
+  };
+
+  const handleMouseUp = event => {
+    setIsDrawing(false);
+    const { clientX, clientY } = getMouseCoordinates(event);
+
+    if (selectedElement) {
+      if (
+        selectedElement.type === "text" &&
+        clientX - selectedElement.offsetX === selectedElement.x1 &&
+        clientY - selectedElement.offsetY === selectedElement.y1
+      ) {
+        setAction("writing");
+        return;
+      }
+
+      const index = selectedElement.id;
+      const { id, type } = elements[index];
+      if ((action === "drawing" || action === "resizing") && adjustmentRequired(type)) {
+        const { x1, y1, x2, y2 } = adjustElementCoordinates(elements[index]);
+        updateElement(id, x1, y1, x2, y2, type);
+      }
+    }
+
+    if (action === "drawing") {
+      console.log("Hoàn thành một nét vẽ");
+    }
+
+    if (action === "writing") return;
+
+    setAction("none");
+    setSelectedElement(null);
+  };
+
+  const handleBlur = event => {
+    const { id, x1, y1, type } = selectedElement;
+    setAction("none");
+    setSelectedElement(null);
+    updateElement(id, x1, y1, null, null, type, { text: event.target.value });
+  };
+
+  return {
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleBlur
+  };
+};

src/app/layout.js

@@ -0,0 +1,30 @@
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.js

@@ -0,0 +1,548 @@
+'use client'
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import rough from "roughjs/bundled/rough.esm";
+import DrawingBoard from './DrawingBoard';
+import {
+  createElement,
+  drawElement,
+} from './element-utils';
+import { createMouseHandlers } from './handleMouse';
+const captureRegionToPNG = (canvas, region, elements, scale, panOffset, scaleOffset) => {
+  const tempCanvas = document.createElement('canvas');
+  const ctx = tempCanvas.getContext('2d');
+  
+  const width = (region.bounds.x2 - region.bounds.x1);
+  const height = (region.bounds.y2 - region.bounds.y1);
+  
+  tempCanvas.width = width * scale;
+  tempCanvas.height = height * scale;
+  
+  // Fill white background
+  ctx.fillStyle = 'white';
+  ctx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+  
+  ctx.save();
+  ctx.scale(scale, scale);
+  ctx.translate(-region.bounds.x1, -region.bounds.y1);
+  
+  const mainCanvas = canvas.getContext('2d');
+  const roughCanvas = rough.canvas(tempCanvas);
+  ctx.translate(panOffset.x, panOffset.y);
+  
+  elements.forEach(element => {
+    if (isElementInRegion(element, region.bounds)) {
+      drawElement(roughCanvas, ctx, element);
+    }
+  });
+  
+  ctx.restore();
+  
+  return tempCanvas.toDataURL('image/png');
+};
+
+// Update the downloadRegionImage function:
+const downloadRegionImage = (dataUrl, regionId) => {
+  const link = document.createElement('a');
+  link.href = dataUrl;
+  link.download = `region-${regionId}.png`;  // Changed extension to .png
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+const isElementInRegion = (element, bounds) => {
+  if (element.type === 'pencil') {
+    return element.points.some(point => 
+      point.x >= bounds.x1 && point.x <= bounds.x2 &&
+      point.y >= bounds.y1 && point.y <= bounds.y2
+    );
+  } else {
+    const elementBounds = {
+      minX: Math.min(element.x1, element.x2),
+      maxX: Math.max(element.x1, element.x2),
+      minY: Math.min(element.y1, element.y2),
+      maxY: Math.max(element.y1, element.y2)
+    };
+    
+    return !(elementBounds.maxX < bounds.x1 ||
+             elementBounds.minX > bounds.x2 ||
+             elementBounds.maxY < bounds.y1 ||
+             elementBounds.minY > bounds.y2);
+  }
+};
+
+
+const downloadAllRegions = (canvas, regions, elements, scale, panOffset, scaleOffset) => {
+  regions.forEach(region => {
+    const dataUrl = captureRegionToPNG(canvas, region, elements, scale, panOffset, scaleOffset);
+    downloadRegionImage(dataUrl, region.id);
+  });
+};
+const isPixelNonTransparent = (pixel) => {
+  return pixel.a > 0;
+};
+
+const isWithinBounds = (x, y, width, height) => {
+  return x >= 0 && x < width && y >= 0 && y < height;
+};
+
+const getPixel = (imageData, x, y) => {
+  const index = (y * imageData.width + x) * 4;
+  return imageData.data[index + 3] > 0; // Only check alpha channel for performance
+};
+
+// Use Set for faster lookups and Int32Array for coordinates
+const floodFill = (imageData, startX, startY, visited) => {
+  const width = imageData.width;
+  const height = imageData.height;
+  const queue = new Int32Array(width * height * 2); // Pre-allocate queue
+  let queueStart = 0;
+  let queueEnd = 2;
+  queue[0] = startX;
+  queue[1] = startY;
+
+  const region = {
+    points: [],
+    minX: startX,
+    maxX: startX,
+    minY: startY,
+    maxY: startY
+  };
+
+  // Optimize bounds checking
+  const isWithinBounds = (x, y) => x >= 0 && x < width && y >= 0 && y < height;
+
+  // Pre-calculate neighbor offsets
+  const neighborOffsets = [
+    [1, 0], [-1, 0],
+    [0, 1], [0, -1],
+    [1, 1], [-1, -1],
+    [1, -1], [-1, 1]
+  ];
+
+  while (queueStart < queueEnd) {
+    const x = queue[queueStart];
+    const y = queue[queueStart + 1];
+    queueStart += 2;
+
+    const key = `${x},${y}`;
+    if (visited.has(key)) continue;
+
+    if (!getPixel(imageData, x, y)) continue;
+
+    visited.add(key);
+    region.points.push({ x, y });
+    
+    // Use Math.min/max for bounds tracking
+    region.minX = Math.min(region.minX, x);
+    region.maxX = Math.max(region.maxX, x);
+    region.minY = Math.min(region.minY, y);
+    region.maxY = Math.max(region.maxY, y);
+
+    // Check neighbors using pre-calculated offsets
+    for (const [dx, dy] of neighborOffsets) {
+      const nx = x + dx;
+      const ny = y + dy;
+      if (isWithinBounds(nx, ny) && !visited.has(`${nx},${ny}`)) {
+        queue[queueEnd] = nx;
+        queue[queueEnd + 1] = ny;
+        queueEnd += 2;
+      }
+    }
+  }
+
+  return region;
+};
+
+// Optimize distance calculation
+const calculateRegionDistance = (region1, region2) => {
+  // Quick overlap check
+  const xOverlap = !(region1.maxX < region2.minX || region1.minX > region2.maxX);
+  const yOverlap = !(region1.maxY < region2.minY || region1.minY > region2.maxY);
+  
+  if (xOverlap && yOverlap) return 0;
+
+  // Calculate distance only when necessary
+  const dx = !xOverlap ? Math.min(
+    Math.abs(region1.maxX - region2.minX),
+    Math.abs(region1.minX - region2.maxX)
+  ) : 0;
+
+  const dy = !yOverlap ? Math.min(
+    Math.abs(region1.maxY - region2.minY),
+    Math.abs(region1.minY - region2.maxY)
+  ) : 0;
+
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
+// Optimize region merging using Set
+const mergeRegions = (region1, region2) => ({
+  points: [...region1.points, ...region2.points],
+  minX: Math.min(region1.minX, region2.minX),
+  maxX: Math.max(region1.maxX, region2.maxX),
+  minY: Math.min(region1.minY, region2.minY),
+  maxY: Math.max(region1.maxY, region2.maxY)
+});
+
+const detectRegions = (canvas, elements, panOffset, scale, scaleOffset, minRegionSize = 100, groupingDistance = 80) => {
+  // Calculate bounds only once
+  const bounds = elements.reduce((acc, element) => {
+    if (element.type === 'pencil') {
+      element.points.forEach(point => {
+        acc.minX = Math.min(acc.minX, point.x);
+        acc.minY = Math.min(acc.minY, point.y);
+        acc.maxX = Math.max(acc.maxX, point.x);
+        acc.maxY = Math.max(acc.maxY, point.y);
+      });
+    } else {
+      const { x1, y1, x2, y2 } = element;
+      acc.minX = Math.min(acc.minX, x1, x2);
+      acc.minY = Math.min(acc.minY, y1, y2);
+      acc.maxX = Math.max(acc.maxX, x1, x2);
+      acc.maxY = Math.max(acc.maxY, y1, y2);
+    }
+    return acc;
+  }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
+
+  // Add padding
+  const padding = 100;
+  bounds.minX -= padding;
+  bounds.minY -= padding;
+  bounds.maxX += padding;
+  bounds.maxY += padding;
+
+  // Create optimized temporary canvas
+  const tempCanvas = document.createElement("canvas");
+  const width = Math.max(bounds.maxX - bounds.minX, canvas.width);
+  const height = Math.max(bounds.maxY - bounds.minY, canvas.height);
+  tempCanvas.width = width * scale;
+  tempCanvas.height = height * scale;
+  
+  // Use OffscreenCanvas when available for better performance
+  const ctx = tempCanvas.getContext("2d", { alpha: true });
+  const roughCanvas = rough.canvas(tempCanvas);
+
+  // Draw elements with transformation
+  ctx.save();
+  ctx.translate(-bounds.minX * scale, -bounds.minY * scale);
+  ctx.scale(scale, scale);
+  elements.forEach(element => drawElement(roughCanvas, ctx, element));
+  ctx.restore();
+
+  // Process image data
+  const imageData = ctx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+  const visited = new Set();
+  const initialRegions = [];
+
+  // Optimize pixel scanning with stride
+  const stride = 4; // Check every 4th pixel initially
+  for (let y = 0; y < tempCanvas.height; y += stride) {
+    for (let x = 0; x < tempCanvas.width; x += stride) {
+      const key = `${x},${y}`;
+      if (visited.has(key)) continue;
+
+      if (!getPixel(imageData, x, y)) continue;
+
+      const region = floodFill(imageData, x, y, visited);
+      if (region.points.length >= minRegionSize) {
+        // Transform coordinates back
+        const transformedRegion = {
+          ...region,
+          minX: region.minX / scale + bounds.minX,
+          maxX: region.maxX / scale + bounds.minX,
+          minY: region.minY / scale + bounds.minY,
+          maxY: region.maxY / scale + bounds.minY,
+          points: region.points.map(point => ({
+            x: point.x / scale + bounds.minX,
+            y: point.y / scale + bounds.minY
+          }))
+        };
+        initialRegions.push(transformedRegion);
+      }
+    }
+  }
+
+  // Optimize region merging
+  const mergedRegions = [];
+  const used = new Set();
+
+  for (let i = 0; i < initialRegions.length; i++) {
+    if (used.has(i)) continue;
+    
+    let currentRegion = initialRegions[i];
+    used.add(i);
+
+    let merged;
+    do {
+      merged = false;
+      for (let j = 0; j < initialRegions.length; j++) {
+        if (used.has(j)) continue;
+        
+        const distance = calculateRegionDistance(currentRegion, initialRegions[j]);
+        if (distance <= groupingDistance) {
+          currentRegion = mergeRegions(currentRegion, initialRegions[j]);
+          used.add(j);
+          merged = true;
+        }
+      }
+    } while (merged);
+
+    mergedRegions.push(currentRegion);
+  }
+
+  // Return final regions
+  return mergedRegions.map((region, index) => ({
+    id: index + 1,
+    bounds: {
+      x1: region.minX,
+      y1: region.minY,
+      x2: region.maxX,
+      y2: region.maxY
+    },
+    elements: []
+  }));
+};
+
+const useHistory = initialState => {
+  const [index, setIndex] = useState(0);
+  const [history, setHistory] = useState([initialState]);
+
+  const setState = (action, overwrite = false) => {
+    const newState = typeof action === "function" ? action(history[index]) : action;
+    if (overwrite) {
+      const historyCopy = [...history];
+      historyCopy[index] = newState;
+      setHistory(historyCopy);
+    } else {
+      const updatedState = [...history].slice(0, index + 1);
+      setHistory([...updatedState, newState]);
+      setIndex(prevState => prevState + 1);
+    }
+  };
+
+  const undo = () => index > 0 && setIndex(prevState => prevState - 1);
+  const redo = () => index < history.length - 1 && setIndex(prevState => prevState + 1);
+
+  return [history[index], setState, undo, redo];
+};
+
+const usePressedKeys = () => {
+  const [pressedKeys, setPressedKeys] = useState(new Set());
+
+  useEffect(() => {
+    const handleKeyDown = event => {
+      setPressedKeys(prevKeys => new Set(prevKeys).add(event.key));
+    };
+
+    const handleKeyUp = event => {
+      setPressedKeys(prevKeys => {
+        const updatedKeys = new Set(prevKeys);
+        updatedKeys.delete(event.key);
+        return updatedKeys;
+      });
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
+  return pressedKeys;
+};
+const drawBoundingBoxes = (context, regions, scale) => {
+  context.save();
+  regions.forEach(region => {
+    const { bounds, id } = region;
+    
+    // Set styling for bounding box
+    context.strokeStyle = "#FF5733";  // Custom color for better visibility
+    context.lineWidth = 1 / scale;
+    context.setLineDash([5 / scale, 5 / scale]);  // Dotted lines for bounding box
+
+    // Draw bounding box
+    context.strokeRect(
+      bounds.x1,
+      bounds.y1,
+      bounds.x2 - bounds.x1,
+      bounds.y2 - bounds.y1
+    );
+
+    // Display region ID inside bounding box
+    context.setLineDash([]);  // Reset line dash for text
+    context.font = `${16 / scale}px sans-serif`;
+    context.fillStyle = "#FF5733";
+    context.fillText(
+      `#${id}`,
+      bounds.x1 + 5 / scale,
+      bounds.y1 + 20 / scale
+    );
+  });
+  context.restore();
+};
+
+const App = () => {
+  const [elements, setElements, undo, redo] = useHistory([]);
+  const [action, setAction] = useState("none");
+  const [tool, setTool] = useState("rectangle");
+  const [selectedElement, setSelectedElement] = useState(null);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const [startPanMousePosition, setStartPanMousePosition] = useState({ x: 0, y: 0 });
+  const [scale, setScale] = useState(1);
+  const [scaleOffset, setScaleOffset] = useState({ x: 0, y: 0 });
+  const [captureArea, setCaptureArea] = useState(null);
+  const [drawingRegions, setDrawingRegions] = useState([]);
+  const textAreaRef = useRef();
+  const pressedKeys = usePressedKeys();
+  const [pencilSize, setPencilSize] = useState(3);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const handleDetectRegions = () => {
+    const canvas = document.getElementById("canvas");
+    if (!canvas) return;
+    
+    const newRegions = detectRegions(canvas, elements, panOffset, scale, scaleOffset);
+    setDrawingRegions(newRegions);
+  
+    // Notify user
+    if (newRegions.length > 0) {
+      console.log(`Phát hiện ${newRegions.length} vùng vẽ!`);
+      alert(`Đã phát hiện ${newRegions.length} vùng vẽ!`);
+    } else {
+      alert("Không phát hiện được vùng vẽ nào!");
+    }
+  };
+  useLayoutEffect(() => {
+    const canvas = document.getElementById("canvas");
+    const context = canvas.getContext("2d");
+    const roughCanvas = rough.canvas(canvas);
+  
+    // Clear canvas for redrawing
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  
+    // Calculate scaled dimensions
+    const scaledWidth = canvas.width * scale;
+    const scaledHeight = canvas.height * scale;
+    const scaleOffsetX = (scaledWidth - canvas.width) / 2;
+    const scaleOffsetY = (scaledHeight - canvas.height) / 2;
+    setScaleOffset({ x: scaleOffsetX, y: scaleOffsetY });
+  
+    context.save();
+    context.translate(panOffset.x * scale - scaleOffsetX, panOffset.y * scale - scaleOffsetY);
+    context.scale(scale, scale);
+  
+    // Draw elements
+    elements.forEach(element => {
+      if (action === "writing" && selectedElement?.id === element.id) return;
+      drawElement(roughCanvas, context, element);
+    });
+  
+    // Call drawBoundingBoxes to render detected regions
+    drawBoundingBoxes(context, drawingRegions, scale);
+  
+    context.restore();
+  }, [elements, action, selectedElement, panOffset, scale, drawingRegions]);
+  
+
+  useEffect(() => {
+    const undoRedoFunction = event => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "z") {
+        if (event.shiftKey) {
+          redo();
+        } else {
+          undo();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", undoRedoFunction);
+    return () => {
+      document.removeEventListener("keydown", undoRedoFunction);
+    };
+  }, [undo, redo]);
+  useEffect(() => {
+    const panOrZoomFunction = event => {
+      if (pressedKeys.has("Meta") || pressedKeys.has("Control")) {
+        onZoom(event.deltaY * -0.01);
+      } else {
+        setPanOffset(prevState => ({
+          x: prevState.x - event.deltaX,
+          y: prevState.y - event.deltaY,
+        }));
+      }
+    };
+  
+    document.addEventListener("wheel", panOrZoomFunction);
+    return () => {
+      document.removeEventListener("wheel", panOrZoomFunction);
+    };
+  }, [pressedKeys]);
+  const onZoom = delta => {
+    setScale(prevState => Math.min(Math.max(prevState + delta, 0.1), 2));
+  };
+  const handleDownloadRegions = () => {
+    const canvas = document.getElementById("canvas");
+    if (!canvas || drawingRegions.length === 0) {
+      alert("Không có vùng vẽ nào để tải xuống!");
+      return;
+    }
+    
+    downloadAllRegions(canvas, drawingRegions, elements, scale, panOffset, scaleOffset);
+    alert(`Đã tải xuống ${drawingRegions.length} vùng vẽ!`);
+  };
+  const {
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleBlur
+  } = createMouseHandlers({
+    action,
+    setAction,
+    tool,
+    setTool,
+    elements,
+    setElements,
+    selectedElement,
+    setSelectedElement,
+    panOffset,
+    setPanOffset,
+    scale,
+    scaleOffset,
+    startPanMousePosition,
+    setStartPanMousePosition,
+    pressedKeys,
+    pencilSize,
+    setCaptureArea,
+    isDrawing,
+    setIsDrawing
+  });
+
+  return (
+    
+    <DrawingBoard
+      tool={tool}
+      setTool={setTool}
+      elements={elements}
+      pencilSize={pencilSize}
+      setPencilSize={setPencilSize}
+      scale={scale}
+      setScale={setScale}
+      onZoom={onZoom}
+      undo={undo}
+      redo={redo}
+      action={action}
+      selectedElement={selectedElement}
+      panOffset={panOffset}
+      scaleOffset={scaleOffset}
+      handleMouseDown={handleMouseDown}
+      handleMouseMove={handleMouseMove}
+      handleMouseUp={handleMouseUp}
+      handleBlur={handleBlur}
+      handleDetectRegions={handleDetectRegions}
+      handleDownloadRegions={handleDownloadRegions}
+    />
+  );
+};
+
+export default App;

tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+};