feat: add drag mode

src/app/_components/canvas.tsx

@@ -1,18 +1,36 @@
-import type { AsciiData, Height } from '@/types';
-import type { Dispatch, SetStateAction } from 'react';
+import type { AsciiData, DrawingMode, Height } from '@/types';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import { Piece } from './piece';
 
 export const Canvas = ({
   asciiData,
   setAsciiData,
   width,
   height,
+  drawingMode,
 }: {
   asciiData: AsciiData;
   setAsciiData: Dispatch<SetStateAction<AsciiData>>;
   width: number;
   height: Height;
+  drawingMode: DrawingMode;
 }) => {
+  const [isMouseDown, setIsMouseDown] = useState(false);
+
+  useEffect(() => {
+    if (drawingMode === 'drag') {
+      const handleWindowMouseUp = () => {
+        setIsMouseDown(false);
+      };
+
+      window.addEventListener('mouseup', handleWindowMouseUp);
+
+      return () => {
+        window.removeEventListener('mouseup', handleWindowMouseUp);
+      };
+    }
+  }, [drawingMode]);
+
   return (
     <div className='min-w-[405px] md:min-w-[810px] lg:min-w-[1080px] text-center'>
       {asciiData.map((row, i) => {
@@ -33,6 +51,9 @@ export const Canvas = ({
                   yIndex={i}
                   asciiData={asciiData}
                   setAsciiData={setAsciiData}
+                  isMouseDown={isMouseDown}
+                  setIsMouseDown={setIsMouseDown}
+                  drawingMode={drawingMode}
                 />
               );
             })}

src/app/_components/oekaki-chat.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import type { AsciiData, Height, Resolution } from '@/types';
+import type { AsciiData, DrawingMode, Height, Resolution } from '@/types';
 import { useState } from 'react';
 import { Buttons } from './buttons';
 import { Canvas } from './canvas';
 import { Setting } from './setting';
 
 export const OekakiChat = () => {
   const fullhdWidth = 26;
-  const stretchWidth = 27;
+  const stretchedWidth = 27;
 
-  const maxW = fullhdWidth > stretchWidth ? fullhdWidth : stretchWidth;
+  const maxW = fullhdWidth > stretchedWidth ? fullhdWidth : stretchedWidth;
   const maxH = 13;
   const defaultAsciiData = (): AsciiData => {
     const data = new Array(maxH);
@@ -25,6 +25,7 @@ export const OekakiChat = () => {
 
   const [asciiData, setAsciiData] = useState<AsciiData>(defaultAsciiData());
   const [resolution, setResolution] = useState<Resolution>('fullhd');
+  const [drawingMode, setDrawingMode] = useState<DrawingMode>('click');
   const [height, setHeight] = useState<Height>(7);
 
   return (
@@ -33,17 +34,19 @@ export const OekakiChat = () => {
         setResolution={setResolution}
         height={height}
         setHeight={setHeight}
+        setDrawingMode={setDrawingMode}
       />
       <Canvas
         asciiData={asciiData}
         setAsciiData={setAsciiData}
-        width={resolution === 'fullhd' ? fullhdWidth : stretchWidth}
+        width={resolution === 'fullhd' ? fullhdWidth : stretchedWidth}
         height={height}
+        drawingMode={drawingMode}
       />
       <Buttons
         asciiData={asciiData}
         setAsciiData={setAsciiData}
-        width={resolution === 'fullhd' ? fullhdWidth : stretchWidth}
+        width={resolution === 'fullhd' ? fullhdWidth : stretchedWidth}
         height={height}
       />
     </div>

src/app/_components/piece.tsx

@@ -1,4 +1,4 @@
-import type { AsciiData } from '@/types';
+import type { AsciiData, DrawingMode } from '@/types';
 import { useTheme } from 'next-themes';
 import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
@@ -8,12 +8,18 @@ export const Piece = ({
   yIndex,
   asciiData,
   setAsciiData,
+  isMouseDown,
+  setIsMouseDown,
+  drawingMode,
 }: {
   active: boolean;
   xIndex: number;
   yIndex: number;
   asciiData: AsciiData;
   setAsciiData: Dispatch<SetStateAction<AsciiData>>;
+  isMouseDown: boolean;
+  setIsMouseDown: Dispatch<boolean>;
+  drawingMode: DrawingMode;
 }) => {
   const { theme, systemTheme } = useTheme();
   const [currentTheme, setCurrentTheme] = useState<string | undefined>(
@@ -28,12 +34,31 @@ export const Piece = ({
     }
   }, [theme, systemTheme]);
 
-  const handleClick = () => {
+  const toggleAsciiData = () => {
     const newAsciiData = [...asciiData];
     newAsciiData[yIndex][xIndex] = !newAsciiData[yIndex][xIndex];
     setAsciiData(newAsciiData);
   };
 
+  const handleClick = () => {
+    if (drawingMode === 'click') {
+      toggleAsciiData();
+    }
+  };
+
+  const handleMouseDown = () => {
+    if (drawingMode === 'drag') {
+      setIsMouseDown(true);
+      toggleAsciiData();
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (drawingMode === 'drag' && isMouseDown) {
+      toggleAsciiData();
+    }
+  };
+
   if (active) {
     return (
       <button
@@ -42,6 +67,8 @@ export const Piece = ({
           currentTheme === 'dark' ? 'bg-gray-300' : 'bg-white'
         } w-[15px] h-[15px] md:w-[30px] sm:h-[30px] lg:w-[40px] lg:h-[40px] m-0 border border-black`}
         onClick={handleClick}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={handleMouseEnter}
       />
     );
   }
@@ -52,6 +79,8 @@ export const Piece = ({
         currentTheme === 'dark' ? 'bg-gray-600' : 'bg-gray-400'
       } w-[15px] h-[15px] md:w-[30px] sm:h-[30px] lg:w-[40px] lg:h-[40px] m-0 border border-black`}
       onClick={handleClick}
+      onMouseDown={handleMouseDown}
+      onMouseEnter={handleMouseEnter}
     />
   );
 };

src/app/_components/setting.tsx

@@ -2,79 +2,124 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Slider } from '@/components/ui/slider';
-import type { Height, Resolution } from '@/types';
+import type { DrawingMode, Height, Resolution } from '@/types';
 import type { Dispatch, SetStateAction } from 'react';
 
 export const Setting = ({
   setResolution,
+  setDrawingMode,
   height,
   setHeight,
 }: {
   setResolution: Dispatch<SetStateAction<Resolution>>;
+  setDrawingMode: Dispatch<SetStateAction<DrawingMode>>;
   height: Height;
   setHeight: Dispatch<SetStateAction<Height>>;
 }) => {
   return (
-    <div className='w-[390px] md:w-[750px] lg:w-[1000px] mx-auto my-8'>
-      <Label htmlFor='resolution' className='text-xl font-bold'>
-        Resolution
-      </Label>
-      <RadioGroup defaultValue='fullhd' id='resolution' className='flex gap-4'>
-        <div className='flex items-center space-x-2'>
-          <RadioGroupItem
-            value='fullhd'
-            id='r1'
-            onClick={() => {
-              setResolution('fullhd');
+    <div className='w-[390px] md:w-[750px] lg:w-[1000px] mx-auto my-4 flex flex-col gap-2'>
+      <div>
+        <Label htmlFor='resolution' className='text-xl font-bold'>
+          Resolution
+        </Label>
+        <RadioGroup
+          defaultValue='fullhd'
+          id='resolution'
+          className='flex gap-4'
+        >
+          <div className='flex items-center space-x-2'>
+            <RadioGroupItem
+              value='fullhd'
+              id='fullhd'
+              onClick={() => {
+                setResolution('fullhd');
+              }}
+            />
+            <Label htmlFor='fullhd' className='text-xl'>
+              Full HD
+            </Label>
+          </div>
+          <div className='flex items-center space-x-2'>
+            <RadioGroupItem
+              value='stretched'
+              id='stretched'
+              onClick={() => {
+                setResolution('stretched');
+              }}
+            />
+            <Label htmlFor='stretched' className='text-xl'>
+              Stretched
+            </Label>
+          </div>
+        </RadioGroup>
+      </div>
+      <div>
+        <Label htmlFor='height' className='text-xl'>
+          <span className='font-bold'>Height</span> (1-13 default: 7)
+        </Label>
+        <div id='height' className='flex'>
+          <Input
+            className='w-16 mr-8 ml-0'
+            type='number'
+            value={height}
+            onChange={(e) => {
+              if (height === 13 && Number(e.target.value) > 13) {
+                setHeight(13);
+                return;
+              }
+              if (height === 1 && Number(e.target.value) < 1) {
+                setHeight(1);
+                return;
+              }
+              if (Number(e.target.value) < 1 || Number(e.target.value) > 13) {
+                return;
+              }
+              setHeight(Number(e.target.value));
             }}
           />
-          <Label htmlFor='r1' className='text-xl'>
-            Full HD
-          </Label>
-        </div>
-        <div className='flex items-center space-x-2'>
-          <RadioGroupItem
-            value='stretch'
-            id='r2'
-            onClick={() => {
-              setResolution('stretch');
-            }}
+          <Slider
+            defaultValue={[height]}
+            min={1}
+            max={13}
+            step={1}
+            onValueChange={(e) => setHeight(e[0])}
           />
-          <Label htmlFor='r2' className='text-xl'>
-            Stretch
-          </Label>
         </div>
-      </RadioGroup>
-      <Label htmlFor='height' className='text-xl'>
-        <span className='font-bold'>Height</span> (1-13 default: 7)
-      </Label>
-      <div id='height' className='flex'>
-        <Input
-          className='w-16 mr-8 ml-0'
-          type='number'
-          value={height}
-          onChange={(e) => {
-            if (height === 13 && Number(e.target.value) > 13) {
-              setHeight(13);
-              return;
-            }
-            if (height === 1 && Number(e.target.value) < 1) {
-              setHeight(1);
-              return;
-            }
-            if (Number(e.target.value) < 1 || Number(e.target.value) > 13) {
-              return;
-            }
-            setHeight(Number(e.target.value));
-          }}
-        />
-        <Slider
-          defaultValue={[height]}
-          min={1}
-          max={13}
-          step={1}
-          onValueChange={(e) => setHeight(e[0])}
-        />
+      </div>
+      <div>
+        <Label htmlFor='drawing-mode' className='text-xl font-bold'>
+          Drawing mode
+        </Label>
+        <RadioGroup
+          defaultValue='click'
+          id='drawing-mode'
+          className='flex gap-4'
+        >
+          <div className='flex items-center space-x-2'>
+            <RadioGroupItem
+              value='click'
+              id='click'
+              onClick={() => {
+                setDrawingMode('click');
+              }}
+            />
+            <Label htmlFor='click' className='text-xl'>
+              Click
+            </Label>
+          </div>
+          <div className='flex items-center space-x-2'>
+            <RadioGroupItem
+              value='drag'
+              id='drag'
+              onClick={() => {
+                setDrawingMode('drag');
+              }}
+            />
+            <Label htmlFor='drag' className='text-xl'>
+              Drag
+            </Label>
+          </div>
+        </RadioGroup>
       </div>
     </div>
   );

src/types.ts

@@ -1,6 +1,8 @@
 import { z } from 'zod';
 
-export type Resolution = 'fullhd' | 'stretch';
+export type Resolution = 'fullhd' | 'stretched';
+
+export type DrawingMode = 'click' | 'drag';
 
 const heightSchema = z.number().int().min(1).max(13);
 export type Height = z.infer<typeof heightSchema>;