InitHEADmain

2 files changed, 43 insertions, 5 deletions

diff --git a/src/components/grid/Cell.tsx b/src/components/grid/Cell.tsx
index fe91da8..1a21164 100644
--- a/src/components/grid/Cell.tsx
+++ b/src/components/grid/Cell.tsx
@@ -4,13 +4,20 @@ import { getStyleForAnsiColor } from '@/utils/ansi';
 interface CellProps {
     cell: GridCell;
     onClick?: () => void;
+    onMouseEnter?: () => void;
 }
 
-export const Cell: React.FC<CellProps> = ({ cell, onClick }) => {
+export const Cell: React.FC<CellProps> = ({ cell, onClick, onMouseEnter }) => {
+    const handleMouseDown = (e: React.MouseEvent) => {
+        e.preventDefault(); // Prevent text selection
+        onClick?.();
+    };
+
     return (
         <span
             className={`grid-cell ${onClick ? 'highlightable' : ''}`}
-            onMouseDown={onClick}
+            onMouseDown={handleMouseDown}
+            onMouseEnter={onMouseEnter}
             style={getStyleForAnsiColor(cell.color)}
         >
             {cell.char === ' ' ? '\u00A0' : cell.char}
diff --git a/src/components/grid/GridComponent.tsx b/src/components/grid/GridComponent.tsx
index 75d65aa..9ec528e 100644
--- a/src/components/grid/GridComponent.tsx
+++ b/src/components/grid/GridComponent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import type { Grid, GridCell } from '@/types/grid';
 import { Cell } from '@/components/grid/Cell';
@@ -6,21 +6,52 @@ import { Cell } from '@/components/grid/Cell';
 interface GridProps {
     grid: Grid;
     onCellInteract?: (cell: GridCell) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
 }
 
 export const GridComponent: React.FC<GridProps> = ({
     grid,
     onCellInteract,
+    onDragStart,
+    onDragEnd,
 }) => {
+    const [isDragging, setIsDragging] = useState(false);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        e.preventDefault(); // Prevent text selection
+        setIsDragging(true);
+        onDragStart?.();
+    };
+
+    const handleMouseUp = () => {
+        setIsDragging(false);
+        onDragEnd?.();
+    };
+
+    const handleMouseLeave = () => {
+        if (isDragging) {
+            setIsDragging(false);
+            onDragEnd?.();
+        }
+    };
+
     return (
-        <div className='grid'>
+        <div
+            className='grid'
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseLeave}
+            style={{ userSelect: 'none' }}
+        >
             {grid.map((row, i) => (
                 <div className='grid-row' key={i}>
                     {row.map((cell, j) => (
                         <Cell
                             key={j}
                             cell={cell}
-                            onClick={() => onCellInteract?.(cell)}
+                            onClick={onCellInteract ? () => onCellInteract(cell) : undefined}
+                            onMouseEnter={isDragging && onCellInteract ? () => onCellInteract(cell) : undefined}
                         />
                     ))}
                 </div>