diff --git a/components/canvas/canvas-with-tools.tsx b/components/canvas/canvas-with-tools.tsx index 5b06e15..71dc8a7 100644 --- a/components/canvas/canvas-with-tools.tsx +++ b/components/canvas/canvas-with-tools.tsx @@ -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;