fix: add missing pointer event handlers for selection and drawing tools

Fixed multiple tools that were not working due to missing pointer event handlers:

**Selection Tools (rectangular, elliptical, lasso, magic-wand):**
- Added pointer move handler to draw selection preview while dragging
- Added pointer up handler to finalize selection and update selection store
- Selection tools now show live preview and create selections correctly

**Drawing Tools (clone, smudge, dodge/burn):**
- Added clone, smudge, and dodge to pointer up handler
- These tools now properly capture state changes in history
- Canvas re-renders correctly after using these tools

All affected tools now have complete pointer event handling:
- onPointerDown: Initialize tool state
- onPointerMove: Update preview/drawing while pointer is down
- onPointerUp: Finalize changes and update history

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-21 21:13:01 +01:00
parent 1999aa5252
commit f9eefcc7cd

View File

@@ -479,6 +479,35 @@ export function CanvasWithTools({ onCursorMove }: CanvasWithToolsProps = {}) {
return;
}
// Selection tools
const selectionTools = ['select', 'rectangular-select', 'elliptical-select', 'lasso-select', 'magic-wand'];
if (pointer.isDown && selectionTools.includes(activeTool)) {
const activeLayer = getActiveLayer();
if (!activeLayer || !activeLayer.canvas) return;
const tool = toolsCache.current[`${selectionType}-select`] || toolsCache.current['select'];
if (!tool) return;
const newPointer: PointerState = {
...pointer,
x: canvasPos.x,
y: canvasPos.y,
pressure: e.pressure || 1,
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
metaKey: e.metaKey,
};
setPointer(newPointer);
const ctx = activeLayer.canvas.getContext('2d');
if (ctx) {
tool.onPointerMove(newPointer, ctx, settings);
}
return;
}
// Drawing
if (pointer.isDown && ['pencil', 'brush', 'eraser', 'eyedropper', 'shape', 'clone', 'smudge', 'dodge'].includes(activeTool)) {
const activeLayer = getActiveLayer();
@@ -531,7 +560,25 @@ export function CanvasWithTools({ onCursorMove }: CanvasWithToolsProps = {}) {
return;
}
if (pointer.isDown && ['pencil', 'brush', 'eraser', 'fill', 'eyedropper', 'shape'].includes(activeTool)) {
// Selection tools
const selectionTools = ['select', 'rectangular-select', 'elliptical-select', 'lasso-select', 'magic-wand'];
if (pointer.isDown && selectionTools.includes(activeTool)) {
const activeLayer = getActiveLayer();
if (!activeLayer || !activeLayer.canvas) return;
const tool = toolsCache.current[`${selectionType}-select`] || toolsCache.current['select'];
if (tool) {
const ctx = activeLayer.canvas.getContext('2d');
if (ctx) {
tool.onPointerUp(pointer, ctx, settings);
}
}
setPointer({ ...pointer, isDown: false });
return;
}
if (pointer.isDown && ['pencil', 'brush', 'eraser', 'fill', 'eyedropper', 'shape', 'clone', 'smudge', 'dodge'].includes(activeTool)) {
const activeLayer = getActiveLayer();
if (!activeLayer || !activeLayer.canvas) return;