feat(image-editor): wire Paint Bucket (G) — flood fill#39
Merged
Conversation
Promotes the Paint Bucket tool from stub to functional. Click anywhere on the canvas and the connected region of similar pixels gets filled with the foreground color, dropped as a new image-shape layer (so it's non-destructive and undoable). ## Implementation - New \`src/lib/image-editor/flood-fill.ts\` — 4-connected scanline flood fill on raw ImageData with a configurable channel-wise tolerance (0–128). Returns a Uint8Array mask. \`maskToDataUrl\` paints the mask with the chosen color and serialises to a PNG data URL. - \`Canvas.tsx\` exposes a new \`onBucketClick(point)\` callback. The fill itself runs in \`ImageEditor.tsx\` because it needs to re-render the full editor state at source resolution (not just the cropped preview) to operate on the true image. - The result lands as an image-shape layer covering the full preview canvas, with the bitmap stored at SOURCE resolution so exports stay sharp. - \`OptionsBar\` gains a Bucket variant: FG color picker + tolerance slider (0–128, default 32). - Click on a transparent edge / out-of-bounds → empty mask → toast message instead of a phantom layer. - Coord math handles an active crop: the click is in cropped-canvas preview pixels, so we shift back by the crop origin before scaling to source. Removes \`bucket\` from \`STUB_TOOLS\`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Promotes the Paint Bucket (G) tool from stub to functional. Click on the
canvas → connected region of similar pixels gets filled with the
foreground color and lands as a new image-shape layer (non-destructive,
undoable).
Implementation
fill on raw `ImageData` with a configurable channel-wise tolerance
(0–128). `maskToDataUrl` paints the mask with the chosen color and
serialises to a PNG data URL.
itself runs in `ImageEditor.tsx` because it needs to re-render the
full editor state at source resolution (not just the cropped preview)
to operate on the true image.
the layer's preview-pixel rect spans the full canvas.
slider (default 32).
message rather than a phantom layer.
preview pixels, so we shift back by the crop origin before scaling
to source.
Removes `bucket` from `STUB_TOOLS`.
Test plan
🤖 Generated with Claude Code