Merge pull request #9 from kyamashiro/feat

adjustment

package.json

@@ -1,38 +1,39 @@
 {
-	"name": "draw-app",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-		"preview": "vite preview",
-		"build": "tsc && vite build",
-		"deploy": "gh-pages -d dist"
-	},
-	"dependencies": {
-		"@chakra-ui/icons": "^2.1.1",
-		"@chakra-ui/react": "^2.8.2",
-		"@emotion/react": "^11.11.4",
-		"@emotion/styled": "^11.11.5",
-		"@faker-js/faker": "^8.4.1",
-		"@supabase/supabase-js": "^2.43.1",
-		"@types/node": "^20.12.8",
-		"framer-motion": "^11.1.7",
-		"jotai": "^2.8.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.7.3",
-		"@types/react": "^18.2.66",
-		"@types/react-dom": "^18.2.22",
-		"@vitejs/plugin-react-swc": "^3.5.0",
-		"gh-pages": "^6.1.1",
-		"react-icons": "^5.1.0",
-		"typescript": "^5.2.2",
-		"vite": "^5.2.0",
-		"vite-tsconfig-paths": "^4.3.2"
-	},
-	"homepage": "https://kyamashiro.github.io/draw-app"
+  "name": "draw-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "build": "tsc && vite build",
+    "deploy": "gh-pages -d dist"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@faker-js/faker": "^8.4.1",
+    "@supabase/supabase-js": "^2.43.1",
+    "@types/node": "^20.12.8",
+    "@uiw/react-github-corners": "^1.5.16",
+    "framer-motion": "^11.1.7",
+    "jotai": "^2.8.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.7.3",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "gh-pages": "^6.1.1",
+    "react-icons": "^5.1.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "homepage": "https://kyamashiro.github.io/draw-app"
 }

src/App.tsx

@@ -6,6 +6,7 @@ import { useCursor } from "@components/Canvas/useCursor.ts";
 import { useUndo } from "@components/Canvas/useUndo.ts";
 import { Tools } from "@components/Tools";
 import { Zoom } from "@components/Tools/Zoom";
+import GitHubCorners from "@uiw/react-github-corners";
 import { useRef } from "react";
 
 const App = () => {
@@ -17,25 +18,32 @@ const App = () => {
 	const { trackMouseMove } = useCursor(cursorCtxRef.current);
 
 	return (
-		<Flex>
-			<AvatarPanel />
-			<Tools
-				handlers={{
-					undo,
-					redo,
-					clear,
-					isDisableUndo,
-					isDisableRedo,
-				}}
+		<>
+			<GitHubCorners
+				position="right"
+				style={{ position: "fixed", zIndex: 9999 }}
+				href="https://github.com/kyamashiro/draw-app"
 			/>
-			<Zoom />
-			<DrawLayer
-				ctxRef={ctxRef}
-				handleCursorMouseMove={trackMouseMove}
-				snapshot={snapshot}
-			/>
-			<CursorLayer cursorCtxRef={cursorCtxRef} />
-		</Flex>
+			<Flex>
+				<AvatarPanel />
+				<Tools
+					handlers={{
+						undo,
+						redo,
+						clear,
+						isDisableUndo,
+						isDisableRedo,
+					}}
+				/>
+				<Zoom />
+				<DrawLayer
+					ctxRef={ctxRef}
+					handleCursorMouseMove={trackMouseMove}
+					snapshot={snapshot}
+				/>
+				<CursorLayer cursorCtxRef={cursorCtxRef} />
+			</Flex>
+		</>
 	);
 };
 

src/components/Canvas/DrawLayer/index.tsx

@@ -100,7 +100,6 @@ export const DrawLayer: React.FC<Props> = ({
 	const handleMouseUp = async () => {
 		if (isMouseLeftDown) {
 			snapshot(line);
-			await publishDrawPath(points, line);
 		}
 		setIsMouseLeftDown(false);
 		setIsMouseRightDown(false);
@@ -154,10 +153,11 @@ export const DrawLayer: React.FC<Props> = ({
 	let previousClientX: number;
 	let previousClientY: number;
 
-	const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+	const handleMouseMove = async (e: React.MouseEvent<HTMLCanvasElement>) => {
 		if (isMouseLeftDown) {
 			const { x, y } = getMousePosition(ctxRef.current.canvas, e);
 			points.push({ x, y });
+			await publishDrawPath(points, line);
 			beginPoint = drawLine(points, beginPoint, ctxRef.current, line.shape);
 		}
 

src/components/Canvas/useDraw.ts

@@ -1,43 +1,47 @@
 import { supabase } from "@client/supabase.ts";
 import type { LineData, MousePosition } from "@components/Canvas/DrawLayer";
+import { debounce } from "@utils/index.ts";
 
 export const useDraw = () => {
 	const channel = supabase.channel("draw-path");
-	channel.subscribe((status) => {
-		console.log("status", status);
-	});
+	channel.subscribe();
 
-	const publishDrawPath = async (
-		points: MousePosition[],
-		lineData: LineData,
-	) => {
-		await channel.send({
-			type: "broadcast",
-			event: "draw-path",
-			payload: JSON.stringify({
-				points,
-				lineData,
-			}),
-		});
-	};
+	const publishDrawPath = debounce(
+		async (points: MousePosition[], lineData: LineData) => {
+			console.log("draw-path");
+			await channel.send({
+				type: "broadcast",
+				event: "draw-path",
+				payload: JSON.stringify({
+					points,
+					lineData,
+				}),
+			});
+		},
+		300,
+	);
 
 	const reflectOtherDrawing = (ctx: CanvasRenderingContext2D) => {
 		channel.on("broadcast", { event: "draw-path" }, ({ payload }) => {
 			const {
 				points,
 				lineData,
 			}: { points: MousePosition[]; lineData: LineData } = JSON.parse(payload);
-			console.log(lineData);
 			const path = new Path2D();
-			let beginPoint: MousePosition | undefined;
+
 			const double: MousePosition[] = [];
+			let beginPoint: MousePosition | undefined;
 			for (const point of points) {
 				double.push(point);
 				beginPoint = traceLine(double, beginPoint, path);
 			}
 
 			ctx.lineWidth = lineData.width;
 			ctx.strokeStyle = lineData.color;
+			ctx.shadowBlur = 0.5;
+			ctx.shadowColor = lineData.color;
+			ctx.lineJoin = "round";
+			ctx.lineCap = "round";
 			ctx.stroke(path);
 		});
 	};

src/components/Tools/Brush/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex } from "@chakra-ui/react";
 import { BrushWidthButton } from "@components/Tools/Brush/BrushWidthButton";
-import { brushAtom } from "@state/Tools";
+import { BRUSH_WIDTHS, brushAtom } from "@state/Tools";
 import { useAtom } from "jotai";
 import type React from "react";
 
@@ -17,17 +17,17 @@ export const Brush: React.FC = () => {
 				<BrushWidthButton
 					currentWidth={brush.width}
 					size={5}
-					handleClick={() => handleClick(5)}
+					handleClick={() => handleClick(BRUSH_WIDTHS.SMALL)}
 				/>
 				<BrushWidthButton
 					currentWidth={brush.width}
 					size={10}
-					handleClick={() => handleClick(10)}
+					handleClick={() => handleClick(BRUSH_WIDTHS.MEDIUM)}
 				/>
 				<BrushWidthButton
 					currentWidth={brush.width}
 					size={15}
-					handleClick={() => handleClick(15)}
+					handleClick={() => handleClick(BRUSH_WIDTHS.LARGE)}
 				/>
 			</Flex>
 		</Flex>

src/state/Tools/index.ts

@@ -1,8 +1,14 @@
 import { INITIAL_COLOR } from "@components/Tools/ColorPicker";
 import { atom } from "jotai";
 
+export const BRUSH_WIDTHS = {
+	SMALL: 5,
+	MEDIUM: 10,
+	LARGE: 15,
+};
+
 export const brushAtom = atom({
-	width: 6,
+	width: BRUSH_WIDTHS.MEDIUM,
 	color: INITIAL_COLOR,
 });
 

src/utils/index.ts

@@ -3,7 +3,7 @@ export const isSmartPhone = (): boolean => {
 };
 
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-export function throttle(fn: (...args: any[]) => void, wait: number) {
+export const throttle = (fn: (...args: any[]) => void, wait: number) => {
 	let timerId: number | null = null;
 	return (...args: any[]) => {
 		if (timerId !== null) {
@@ -14,4 +14,16 @@ export function throttle(fn: (...args: any[]) => void, wait: number) {
 			return fn(...args);
 		}, wait);
 	};
-}
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export const debounce = <T extends (...args: any[]) => unknown>(
+	callback: T,
+	delay = 100,
+): ((...args: Parameters<T>) => void) => {
+	let timeoutId: NodeJS.Timeout;
+	return (...args) => {
+		clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => callback(...args), delay);
+	};
+};