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;
|
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
|
// Drawing
|
||||||
if (pointer.isDown && ['pencil', 'brush', 'eraser', 'eyedropper', 'shape', 'clone', 'smudge', 'dodge'].includes(activeTool)) {
|
if (pointer.isDown && ['pencil', 'brush', 'eraser', 'eyedropper', 'shape', 'clone', 'smudge', 'dodge'].includes(activeTool)) {
|
||||||
const activeLayer = getActiveLayer();
|
const activeLayer = getActiveLayer();
|
||||||
@@ -531,7 +560,25 @@ export function CanvasWithTools({ onCursorMove }: CanvasWithToolsProps = {}) {
|
|||||||
return;
|
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();
|
const activeLayer = getActiveLayer();
|
||||||
if (!activeLayer || !activeLayer.canvas) return;
|
if (!activeLayer || !activeLayer.canvas) return;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user