[tbolis]

Summary

Adds the bucket fill tool: a click fills the area which is closed around it with fillColor (lineColor while fillColor is transparent).

• Lines, rectangles, circles, polygons, strokes of the pencil, texts and the overlay image close an area. The background color and the background image do not, and nor does a dashed line.
• The area has to be closed within the canvas as it is shown. When the color would get out, a click fills nothing.
• The fill is a vector path (BucketFill): one undo step, saved by toJSON(), loaded by value, defaultValue and fromJSON(), scaled with the canvas. It is under the lines which close the area, a pixel under their edge, and over the object the area is in.
• The logic is in the new private package @react-sketch/bucket, which react-sketch bundles like eraser and laserpointer.
• The showcase has a Bucket fill button (key F), with the fill color only in its properties.

Behavior change

Undo of a removal puts the object back where it was among the objects, and not on top. Redo of an addition does the same for an object added under the others (the fill). Without it, a fill removed and brought back would cover its lines. One existing test (removes the selected object, and undo brings it back) asserted the old order and is updated. It is listed under Changed in the CHANGELOG.

Testing

• yarn format:check, yarn lint, yarn typecheck, yarn build pass.
• yarn test passes (533 tests), also with REACT=18.
• The tests with real pixels (bucketFill.spec.ts) run in the node environment of Jest with the node build of fabric, as the canvas mock of jsdom has no pixels.
• Run in Chrome (device pixel ratio 2) with the built showcase: draw a rectangle, fill it, click where the area is open, undo, redo (the line stays over the fill), and cut the fill with the eraser.

Notes

• Shapes drawn by hand with a gap, however small, let the color out and are not filled.
• The CHANGELOG has a new 1.2.0 heading, without a date.