Skip to content

Commit

Permalink
feat(touch): add touch support for drawing
Browse files Browse the repository at this point in the history
Tonours committed Feb 13, 2024
1 parent b51b1cc commit c4e3d3c
Showing 2 changed files with 48 additions and 11 deletions.
37 changes: 28 additions & 9 deletions app/hooks/useCanvasDrawing.tsx
Original file line number Diff line number Diff line change
@@ -11,6 +11,24 @@ export const useCanvasDrawing = (
const [lineColor, setLineColor] = useState<string>('#000000');
const linesRef = useRef<Line[]>([]);

const getCoords = useCallback((e: MouseEvent | TouchEvent) => {
let x = 0;
let y = 0;
const rect = canvasRef.current?.getBoundingClientRect();
if (rect) {
if (e instanceof TouchEvent) {
e.preventDefault();
x = e.touches[0].clientX - rect.left;
y = e.touches[0].clientY - rect.top;
} else {
x = e.clientX - rect.left;
y = e.clientY - rect.top;
}
}

return { x, y };
}, [])

const updateDrawingProperties = useCallback(
(ctx: CanvasRenderingContext2D) => {
ctx.lineWidth = lineWidth;
@@ -65,21 +83,18 @@ export const useCanvasDrawing = (
return;
}

const startDrawing = (e: MouseEvent) => {
const startDrawing = (e: MouseEvent | TouchEvent) => {
isDrawingRef.current = true;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const { x, y } = getCoords(e);

linesRef.current.push([{ x, y }]);
};

const draw = (e: MouseEvent) => {
const draw = (e: MouseEvent | TouchEvent) => {
if (!isDrawingRef.current) {
return;
}
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const { x, y } = getCoords(e);
const currentLine = linesRef.current[linesRef.current.length - 1];
currentLine.push({ x, y });
drawLine(currentLine);
@@ -91,6 +106,8 @@ export const useCanvasDrawing = (

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseleave', stopDrawing);

@@ -99,8 +116,10 @@ export const useCanvasDrawing = (
canvas.removeEventListener('mousemove', draw);
canvas.removeEventListener('mouseup', stopDrawing);
canvas.removeEventListener('mouseleave', stopDrawing);
canvas.removeEventListener('touchstart', startDrawing);
canvas.removeEventListener('touchmove', draw);
};
}, [drawLine]);
}, [drawLine, getCoords]);

useEffect(() => {
const resizeCanvas = () => {
22 changes: 20 additions & 2 deletions app/routes/_index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ChangeEvent, useRef } from 'react';
import { ClientRect, DndContext, Modifier } from '@dnd-kit/core';
import { ClientRect, DndContext, Modifier, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
import { restrictToParentElement } from '@dnd-kit/modifiers';

import MainLayout from '~/layouts/_main';
@@ -23,6 +23,24 @@ export default function Index() {
setLineWidth,
setLineColor,
} = useCanvasDrawing(parentRef);

const mouseSensor = useSensor(MouseSensor, {
activationConstraint: {
distance: 10,
},
});
const touchSensor = useSensor(TouchSensor, {
activationConstraint: {
delay: 250,
tolerance: 5,
},
});

const sensors = useSensors(
mouseSensor,
touchSensor,
);

const modifiers = [
snapBottomToCursor,
(e: Parameters<Modifier>[0]) =>
@@ -36,7 +54,7 @@ export default function Index() {
return (
<MainLayout>
<div ref={parentRef} className="bg-gray-50 w-full h-full relative">
<DndContext modifiers={modifiers}>
<DndContext modifiers={modifiers} sensors={sensors}>
<Toolbar>
{TOOLBAR_LINE_WIDTH.map((width) => (
<Toolbar.Item

0 comments on commit c4e3d3c

Please sign in to comment.