Spaces:
Running
Running
made the mobile styling better
Browse files- pages/index.js +38 -2
pages/index.js
CHANGED
|
@@ -82,6 +82,11 @@ export default function Home() {
|
|
| 82 |
const ctx = canvas.getContext("2d");
|
| 83 |
const { x, y } = getCoordinates(e);
|
| 84 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 85 |
// Start a new path without clearing the canvas
|
| 86 |
ctx.beginPath();
|
| 87 |
ctx.moveTo(x, y);
|
|
@@ -90,6 +95,12 @@ export default function Home() {
|
|
| 90 |
|
| 91 |
const draw = (e) => {
|
| 92 |
if (!isDrawing) return;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 93 |
const canvas = canvasRef.current;
|
| 94 |
const ctx = canvas.getContext("2d");
|
| 95 |
const { x, y } = getCoordinates(e);
|
|
@@ -203,6 +214,31 @@ export default function Home() {
|
|
| 203 |
}
|
| 204 |
};
|
| 205 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 206 |
return (
|
| 207 |
<>
|
| 208 |
<Head>
|
|
@@ -212,7 +248,7 @@ export default function Home() {
|
|
| 212 |
</Head>
|
| 213 |
<div className="min-h-screen notebook-paper-bg text-gray-900 flex flex-col justify-start items-center">
|
| 214 |
|
| 215 |
-
<main className="container mx-auto px-3 sm:px-6 py-5 sm:py-10 max-w-5xl w-full">
|
| 216 |
{/* Header section with title and tools */}
|
| 217 |
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-end mb-4 sm:mb-6 gap-3">
|
| 218 |
<div>
|
|
@@ -268,7 +304,7 @@ export default function Home() {
|
|
| 268 |
onTouchMove={draw}
|
| 269 |
onTouchEnd={stopDrawing}
|
| 270 |
className="border-2 border-black w-full hover:cursor-crosshair
|
| 271 |
-
h-[
|
| 272 |
/>
|
| 273 |
</div>
|
| 274 |
|
|
|
|
| 82 |
const ctx = canvas.getContext("2d");
|
| 83 |
const { x, y } = getCoordinates(e);
|
| 84 |
|
| 85 |
+
// Prevent default behavior to avoid scrolling on touch devices
|
| 86 |
+
if (e.type === 'touchstart') {
|
| 87 |
+
e.preventDefault();
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
// Start a new path without clearing the canvas
|
| 91 |
ctx.beginPath();
|
| 92 |
ctx.moveTo(x, y);
|
|
|
|
| 95 |
|
| 96 |
const draw = (e) => {
|
| 97 |
if (!isDrawing) return;
|
| 98 |
+
|
| 99 |
+
// Prevent default behavior to avoid scrolling on touch devices
|
| 100 |
+
if (e.type === 'touchmove') {
|
| 101 |
+
e.preventDefault();
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
const canvas = canvasRef.current;
|
| 105 |
const ctx = canvas.getContext("2d");
|
| 106 |
const { x, y } = getCoordinates(e);
|
|
|
|
| 214 |
}
|
| 215 |
};
|
| 216 |
|
| 217 |
+
// Add touch event prevention function
|
| 218 |
+
useEffect(() => {
|
| 219 |
+
// Function to prevent default touch behavior on canvas
|
| 220 |
+
const preventTouchDefault = (e) => {
|
| 221 |
+
if (isDrawing) {
|
| 222 |
+
e.preventDefault();
|
| 223 |
+
}
|
| 224 |
+
};
|
| 225 |
+
|
| 226 |
+
// Add event listener when component mounts
|
| 227 |
+
const canvas = canvasRef.current;
|
| 228 |
+
if (canvas) {
|
| 229 |
+
canvas.addEventListener('touchstart', preventTouchDefault, { passive: false });
|
| 230 |
+
canvas.addEventListener('touchmove', preventTouchDefault, { passive: false });
|
| 231 |
+
}
|
| 232 |
+
|
| 233 |
+
// Remove event listener when component unmounts
|
| 234 |
+
return () => {
|
| 235 |
+
if (canvas) {
|
| 236 |
+
canvas.removeEventListener('touchstart', preventTouchDefault);
|
| 237 |
+
canvas.removeEventListener('touchmove', preventTouchDefault);
|
| 238 |
+
}
|
| 239 |
+
};
|
| 240 |
+
}, [isDrawing]);
|
| 241 |
+
|
| 242 |
return (
|
| 243 |
<>
|
| 244 |
<Head>
|
|
|
|
| 248 |
</Head>
|
| 249 |
<div className="min-h-screen notebook-paper-bg text-gray-900 flex flex-col justify-start items-center">
|
| 250 |
|
| 251 |
+
<main className="container mx-auto px-3 sm:px-6 py-5 sm:py-10 pb-32 max-w-5xl w-full">
|
| 252 |
{/* Header section with title and tools */}
|
| 253 |
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-end mb-4 sm:mb-6 gap-3">
|
| 254 |
<div>
|
|
|
|
| 304 |
onTouchMove={draw}
|
| 305 |
onTouchEnd={stopDrawing}
|
| 306 |
className="border-2 border-black w-full hover:cursor-crosshair
|
| 307 |
+
h-[50vh] min-h-[400px] bg-white/90 touch-none"
|
| 308 |
/>
|
| 309 |
</div>
|
| 310 |
|