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:
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user