Add Custom Brushes to Bitmap Editor (Procreate-style)

[coderabbitai]

🎨 Feature Request: Custom Brushes for Bitmap Editor

Context

The bitmap editor has been underutilized compared to the vector editor. While vector has received significant attention and features over the years, the bitmap editor deserves its time to shine! Many users prefer tools like Procreate specifically because of their powerful brush system.

Proposed Feature

Implement a custom brush system for the bitmap editor that uses prerendered raster images as brush stamps, similar to Procreate's brush engine.

Technical Approach

Core Brush System

1. Brush Stamp Loading

   • Load prerendered raster images (PNG with alpha channel) as brush stamps
   • Support multiple brush presets (soft round, hard round, textured, etc.)
   • Store brushes in a brushes library/folder

2. Brush Engine

   • Stamp the brush image along the stroke path at regular intervals
   • Interpolate between points for smooth strokes
   • Apply spacing based on brush size
   • Support pressure sensitivity (if available from input device)
   • Handle brush rotation and scale

3. Brush Properties

   • Size: Scale the brush stamp
   • Opacity: Alpha blending for the stamp
   • Spacing: Distance between stamps along stroke path
   • Hardness: Edge softness (could blur the stamp)
   • Rotation: Angle of the stamp (static or dynamic)
   • Jitter: Randomize size, opacity, rotation for natural effects

Implementation Details

1. Data Structure

   {
     name: 'Soft Round',
     image: Image/Canvas with brush stamp,
     defaultSize: 20,
     defaultSpacing: 0.25, // fraction of brush size
     supportsRotation: false,
     textured: false
   }

2. Stroke Algorithm

   • On mouse/touch down: stamp at initial point
   • On mouse/touch move:
     • Calculate distance from last stamp point
     • If distance > spacing threshold, stamp along path
     • Use line interpolation to place stamps evenly
   • Apply current color and opacity to stamp

3. Brush Presets to Include

   • Soft Round (default)
   • Hard Round (sharp edges)
   • Airbrush (soft, scattered)
   • Flat Brush (rectangular)
   • Textured brushes (canvas, paper, chalk)
   • Splatter brush
   • Calligraphy brush

4. UI Components

   • Brush picker/selector (dropdown or sidebar)
   • Brush size slider
   • Opacity slider
   • Spacing control (advanced)
   • Brush preview circle

Technical Considerations

• Performance: Canvas drawImage() is fast, but many stamps might slow down

  • Consider using requestAnimationFrame for smooth rendering
  • Batch draw operations when possible
  • Use offscreen canvas for brush stamp cache

• Memory: Preload all brush stamps at startup or lazy load

• Pressure Sensitivity: WebAPI Pointer Events provide pressure data

  event.pressure // 0.0 to 1.0

• Blend Modes: Support different blend modes for stamps (normal, multiply, screen, etc.)

Files to Modify/Create

1. New Files:

   • src/helper/bit-tools/bit-custom-brush-tool.js - Main brush tool
   • src/helper/brushes/brush-engine.js - Brush stamping logic
   • src/helper/brushes/brush-presets.js - Default brush definitions
   • src/components/brush-selector/ - UI for brush selection
   • assets/brushes/ - Brush stamp images (PNG)

2. Modify:

   • src/lib/modes.js - Add custom brush mode
   • Bitmap tool UI to show brush options

User Stories

1. As a digital artist, I want to select different brush types so that I can create varied textures in my artwork
2. As a user, I want to adjust brush size and opacity so that I can control the intensity of my strokes
3. As a tablet user, I want pressure-sensitive brushes so that I can create natural-looking strokes
4. As an artist, I want textured brushes so that I can simulate traditional media (pencil, chalk, paint)

Success Criteria

• Users can select from at least 5 different brush presets
• Brush size and opacity are adjustable in real-time
• Strokes appear smooth with proper stamp spacing
• Performance remains smooth even with large brushes
• Brushes support alpha blending correctly
• UI is intuitive and doesn't clutter the existing interface

Future Enhancements (Post-MVP)

• Custom brush creation/import from user images
• Brush dynamics (size/opacity varying with speed or direction)
• Advanced scatter and texture options
• Brush library management (save/load custom brushes)
• Shape dynamics (rotation based on stroke direction)
• Dual brush (combine two brush stamps)

References

• Procreate Brush Studio
• HTML5 Canvas Brush Engine Tutorial
• MDN: Pointer Events API

Related Issue

Mentioned in #11

---

Backlink: Requested by @supervoidcoder in #11

[traycerai]

Plan

Observations

The codebase is a React/Redux paint editor with bitmap and vector tools. The current bitmap brush tool (src/helper/bit-tools/brush-tool.js) uses a simple circular stamp created by getBrushMark() and draws along stroke paths using Bresenham's line algorithm. The architecture follows a clear pattern: modes defined in src/lib/modes.js, components in src/components/, containers in src/containers/, tools in src/helper/bit-tools/, and reducers in src/reducers/. The UI controls are rendered in src/components/mode-tools/mode-tools.jsx based on the active mode.

Approach

Enhance the existing bitmap brush system by creating a custom brush engine that supports prerendered raster images as brush stamps (Procreate-style). The implementation will add a new brush preset system, modify the existing brush tool to support custom stamps, create UI components for brush selection, and add state management for brush properties. This approach extends the existing architecture rather than replacing it, ensuring compatibility with the current codebase.

Reasoning

I explored the repository structure to understand the project layout, then examined the existing bitmap brush tool implementation to understand how brushes currently work. I analyzed the mode system, UI component patterns, state management with Redux reducers, and the brush stamping mechanism using Bresenham's line algorithm. I also reviewed how other bitmap tools are structured to follow consistent patterns.

Proposed File Changes

📄 src/helper/brushes/brush-presets.js ^(NEW) 🔗

Create a brush presets module that defines default brush configurations. This file will export an array of brush preset objects, each containing:

• name: Display name (e.g., 'Soft Round', 'Hard Round', 'Airbrush')
• id: Unique identifier for the brush
• imagePath: Path to the brush stamp image (PNG with alpha channel)
• defaultSize: Default brush size
• defaultSpacing: Default spacing as a fraction of brush size (e.g., 0.25)
• defaultOpacity: Default opacity (0.0 to 1.0)
• supportsRotation: Boolean indicating if rotation is supported
• textured: Boolean indicating if it's a textured brush

Include at least 5-7 preset definitions:

1. Soft Round: Smooth circular brush with soft edges (default)
2. Hard Round: Circular brush with sharp edges
3. Airbrush: Soft, scattered appearance
4. Flat Brush: Rectangular brush shape
5. Textured Canvas: Canvas texture pattern
6. Chalk: Chalk-like texture
7. Splatter: Splatter/spray effect

The presets will be used by the brush engine to load and configure brushes.

📄 src/helper/brushes/brush-engine.js ^(NEW) 🔗

References

• 📄 src/helper/bitmap.js

Create the core brush engine module that handles custom brush stamping logic. This module will export:

BrushEngine class with methods:

• loadBrushPreset(preset): Load a brush preset and create an Image/Canvas from the brush stamp image path. Cache the loaded brush stamps for performance.

• createBrushStamp(preset, size, color, opacity): Generate a canvas with the brush stamp at the specified size and color. Scale the original brush image to the desired size, apply color tinting (multiply blend mode), and apply opacity. Return a canvas element ready for stamping.

• stampAlongPath(context, point1, point2, brushStamp, spacing, properties): Stamp the brush along a path between two points. Calculate the distance between points, determine stamp positions based on spacing (as a fraction of brush size), interpolate positions along the line, and draw the brush stamp at each position using context.drawImage(). Support additional properties like rotation, jitter (randomize size/opacity/rotation), and pressure sensitivity.

• applyBrushProperties(stamp, properties): Apply dynamic properties to a brush stamp (rotation, scale variation, opacity variation). Return a modified canvas if needed.

Helper functions:

• calculateSpacing(brushSize, spacingFraction): Calculate pixel spacing between stamps
• interpolatePoints(point1, point2, distance, spacing): Generate array of interpolated points along the line
• applyPressure(value, pressure): Modify a value based on pressure input (0.0 to 1.0)

The engine should use forEachLinePoint() from src/helper/bitmap.js as a reference but implement custom spacing logic instead of stamping at every pixel. Use offscreen canvas for brush stamp caching to optimize performance.

📄 src/helper/bit-tools/custom-brush-tool.js ^(NEW) 🔗

References

• 📄 src/helper/bit-tools/brush-tool.js
• 📄 src/helper/bitmap.js
• 📄 src/helper/layer.js

Create a new custom brush tool class that extends paper.Tool (similar to src/helper/bit-tools/brush-tool.js). This tool will use the brush engine for custom brush stamping.

CustomBrushTool class structure:

Constructor: Accept onUpdateImage callback, initialize brush engine, set up mouse event handlers (onMouseMove, onMouseDown, onMouseDrag, onMouseUp), and initialize state variables (active, lastPoint, lastStampPoint, cursorPreview, drawTarget, currentBrush, brushProperties).

Methods:

• setBrushPreset(preset): Load a brush preset using the brush engine, update the current brush, and regenerate the cursor preview.

• setBrushSize(size): Update brush size, regenerate brush stamp with new size.

• setBrushOpacity(opacity): Update brush opacity (0-100).

• setBrushSpacing(spacing): Update spacing between stamps (0.1 to 2.0 as fraction of brush size).

• setColor(color): Update brush color, regenerate brush stamp with new color.

• updateCursorPreview(): Create a cursor preview showing the brush size and shape, similar to how src/helper/bit-tools/brush-tool.js creates a cursor preview using paper.Raster.

• handleMouseDown(event): Start a new stroke, create a temporary drawing canvas, stamp at the initial point, store the point as lastStampPoint.

• handleMouseDrag(event): Calculate distance from lastStampPoint, if distance exceeds spacing threshold, use brush engine's stampAlongPath() to stamp between lastStampPoint and current point, update lastStampPoint. Support pressure from event.pressure if available.

• handleMouseUp(event): Finalize the stroke, stamp to the final point, commit the temporary canvas to the main raster using getRaster().drawImage(), call onUpdateImage(), clean up temporary canvas.

• handleMouseMove(event): Update cursor preview position.

• deactivateTool(): Clean up cursor preview and temporary canvases.

The tool should follow the same pattern as src/helper/bit-tools/brush-tool.js but use the custom brush engine instead of getBrushMark() and forEachLinePoint(). Support modifier keys (shift for 45° angles, alt for vertical, ctrl/meta for horizontal) using the constrainPoint() method pattern from the existing brush tool.

📄 src/lib/modes.js ^(MODIFY) 🔗

Add a new mode for the custom brush tool to the bitmapModesObj object:

• Add BIT_CUSTOM_BRUSH: null to the bitmapModesObj definition (around line 22-29)

This will register the new custom brush mode in the application's mode system, making it available alongside other bitmap modes like BIT_BRUSH, BIT_ERASER, etc. The keyMirror utility will automatically create the mode constant.

📄 src/reducers/custom-brush-mode.js ^(NEW) 🔗

References

• 📄 src/reducers/brush-mode.js
• 📄 src/reducers/bit-brush-size.js

Create a Redux reducer to manage custom brush state, following the pattern from src/reducers/brush-mode.js.

State shape:

{
  selectedBrushId: 'soft-round',
  brushSize: 20,
  brushOpacity: 100,
  brushSpacing: 0.25,
  brushRotation: 0
}

Action types:

• CHANGE_CUSTOM_BRUSH_PRESET: Change the selected brush preset
• CHANGE_CUSTOM_BRUSH_SIZE: Change brush size (1-100)
• CHANGE_CUSTOM_BRUSH_OPACITY: Change brush opacity (0-100)
• CHANGE_CUSTOM_BRUSH_SPACING: Change brush spacing (0.1-2.0)
• CHANGE_CUSTOM_BRUSH_ROTATION: Change brush rotation (0-360)

Reducer function: Handle each action type, validate input values, return new state object. Use the same validation pattern as src/reducers/bit-brush-size.js (check for NaN, apply min/max constraints).

Action creators: Export action creator functions for each action type:

• changeCustomBrushPreset(brushId)
• changeCustomBrushSize(size)
• changeCustomBrushOpacity(opacity)
• changeCustomBrushSpacing(spacing)
• changeCustomBrushRotation(rotation)

Export the reducer as default and all action creators as named exports.

📄 src/reducers/scratch-paint-reducer.js ^(MODIFY) 🔗

References

• 📄 src/reducers/custom-brush-mode.js ^(NEW)

Register the new custom brush reducer in the root reducer:

1. Import the reducer: Add import customBrushModeReducer from './custom-brush-mode'; at the top with other reducer imports (around line 1-30)

2. Add to combineReducers: Add customBrushMode: customBrushModeReducer, to the combineReducers object (around line 32-62)

This integrates the custom brush state into the Redux store at state.scratchPaint.customBrushMode, making it accessible to all components.

📁 src/components/bit-custom-brush-mode ^(NEW) 🔗

Create a directory for the custom brush mode component.

📄 src/components/bit-custom-brush-mode/bit-custom-brush-mode.jsx ^(NEW) 🔗

References

• 📄 src/components/bit-brush-mode/bit-brush-mode.jsx
• 📄 src/components/tool-select-base/tool-select-base.jsx

Create the presentational component for the custom brush mode button, following the pattern from src/components/bit-brush-mode/bit-brush-mode.jsx.

Component structure:

• Import React, PropTypes, ToolSelectComponent, and messages
• Import a custom brush icon SVG (create custom-brush.svg in the same directory)
• Export a functional component BitCustomBrushModeComponent that renders ToolSelectComponent
• Pass props: imgDescriptor (message for accessibility), imgSrc (icon), isSelected (boolean), onMouseDown (handler)
• Set keybinding to "C" for quick access

PropTypes:

• isSelected: PropTypes.bool.isRequired
• onMouseDown: PropTypes.func.isRequired

This component will appear in the tool palette alongside other bitmap tools.

📄 src/components/bit-custom-brush-mode/custom-brush.svg ^(NEW) 🔗

Create an SVG icon for the custom brush tool. The icon should visually distinguish it from the regular brush tool, perhaps showing a textured or artistic brush shape. Design a simple, recognizable icon that fits the style of other tool icons in the application (check existing icons in src/components/bit-brush-mode/brush.svg for reference).

Suggested design: A brush shape with visible bristles or texture marks to indicate it's a custom/artistic brush, approximately 20x20px viewBox.

📄 src/containers/bit-custom-brush-mode.jsx ^(NEW) 🔗

References

• 📄 src/containers/bit-brush-mode.jsx
• 📄 src/helper/bit-tools/custom-brush-tool.js ^(NEW)
• 📄 src/lib/modes.js ^(MODIFY)

Create the container component that connects the custom brush mode to Redux, following the pattern from src/containers/bit-brush-mode.jsx.

Component structure:

Class: BitCustomBrushMode extends React.Component

Constructor: Bind activateTool and deactivateTool methods

Lifecycle methods:

• componentDidMount(): Activate tool if mode is active
• componentWillReceiveProps(nextProps): Update tool properties when props change (color, brush preset, size, opacity, spacing), activate/deactivate tool based on mode changes
• shouldComponentUpdate(nextProps): Only update when mode active state changes
• componentWillUnmount(): Deactivate tool

Methods:

• activateTool(): Clear selection, clear gradient, validate color (force default if MIXED/transparent), instantiate CustomBrushTool from src/helper/bit-tools/custom-brush-tool.js, set brush properties (preset, size, opacity, spacing, color), activate the tool
• deactivateTool(): Call tool's deactivateTool(), remove tool, set to null

Render: Return BitCustomBrushModeComponent with isSelected and onMouseDown props

Redux connection:

• mapStateToProps: Extract customBrushMode state (selectedBrushId, brushSize, brushOpacity, brushSpacing), color from fill color, check if mode === Modes.BIT_CUSTOM_BRUSH
• mapDispatchToProps: Dispatch actions for clearSelectedItems, clearGradient, handleMouseDown (change mode to BIT_CUSTOM_BRUSH), onChangeFillColor

PropTypes: Define all required props (customBrushMode properties, color, handlers, mode state, onUpdateImage)

Connect the component using react-redux connect and export as default.

📁 src/components/brush-selector ^(NEW) 🔗

Create a directory for the brush selector component.

📄 src/components/brush-selector/brush-selector.jsx ^(NEW) 🔗

References

• 📄 src/components/dropdown/dropdown.jsx
• 📄 src/components/mode-tools/mode-tools.jsx ^(MODIFY)
• 📄 src/helper/brushes/brush-presets.js ^(NEW)

Create a brush selector component that displays a dropdown of available brush presets, following the pattern from src/components/dropdown/dropdown.jsx and the SUSSY mode shape selector in src/components/mode-tools/mode-tools.jsx (lines 438-492).

Component structure:

Props:

• selectedBrushId: Currently selected brush ID
• brushPresets: Array of brush preset objects from src/helper/brushes/brush-presets.js
• onSelectBrush: Callback function when a brush is selected
• className: Optional CSS class

Render:

• Use Dropdown component from src/components/dropdown/dropdown.jsx
• Display the currently selected brush as the dropdown trigger (show brush name and a small preview icon)
• Popover content: List of all brush presets in a scrollable container
• Each brush preset item shows:
  • Brush preview (small canvas showing the brush stamp)
  • Brush name
  • Click handler to select the brush
• Style similar to the font dropdown or shape selector

Brush preview generation:

• Create a small canvas (e.g., 40x40px) showing the brush stamp
• Use the brush engine to render a preview of each brush
• Cache previews for performance

The component should be reusable and self-contained, handling its own dropdown state while calling the parent's onSelectBrush callback when a brush is chosen.

📄 src/components/brush-selector/brush-selector.css ^(NEW) 🔗

References

• 📄 src/components/dropdown/dropdown.css
• 📄 src/css/colors.css
• 📄 src/css/units.css

Create CSS styles for the brush selector component.

Styles needed:

• .brush-selector-dropdown: Container styling for the dropdown trigger
• .brush-selector-current: Style for the currently selected brush display (flex layout, icon + text)
• .brush-selector-preview: Small preview canvas/image styling (e.g., 40x40px, border, border-radius)
• .brush-selector-list: Container for the brush list in the popover (max-height with scroll, padding)
• .brush-selector-item: Individual brush item styling (flex layout, padding, hover effect, cursor pointer)
• .brush-selector-item:hover: Hover state (background color change)
• .brush-selector-item-selected: Selected item styling (different background or border)
• .brush-selector-name: Brush name text styling

Follow the styling patterns from src/components/dropdown/dropdown.css and src/components/mode-tools/mode-tools.css. Use CSS variables from src/css/colors.css and src/css/units.css for consistency.

📄 src/components/mode-tools/mode-tools.jsx ^(MODIFY) 🔗

References

• 📄 src/components/brush-selector/brush-selector.jsx ^(NEW)
• 📄 src/helper/brushes/brush-presets.js ^(NEW)
• 📄 src/reducers/custom-brush-mode.js ^(NEW)
• 📄 src/lib/modes.js ^(MODIFY)

Add UI controls for the custom brush mode in the mode tools component. This file already handles different modes in a large switch statement (starting around line 193).

Changes needed:

1. Import statements (top of file, around lines 1-77):

   • Import BrushSelector from src/components/brush-selector/brush-selector.jsx
   • Import brush presets from src/helper/brushes/brush-presets.js
   • Import custom brush icon

2. Add case for BIT_CUSTOM_BRUSH (in the switch statement, after the BIT_BRUSH case around line 278):

   • Add case Modes.BIT_CUSTOM_BRUSH:
   • Render a container with:
     • Brush selector dropdown: Use BrushSelector component to select brush presets
     • Size control: LiveInput with range slider (min: 1, max: 100) for brush size
     • Opacity control: LiveInput with range slider (min: 0, max: 100) for brush opacity
     • Spacing control: LiveInput with range slider (min: 10, max: 200, representing 0.1 to 2.0) for brush spacing
     • Display icon for each control (create or reuse appropriate icons)
   • Wire up to Redux actions from src/reducers/custom-brush-mode.js

3. Messages (around lines 79-191):

   • Add internationalized messages for custom brush controls:
     • customBrush: 'Custom Brush'
     • brushPreset: 'Brush Preset'
     • brushOpacity: 'Opacity'
     • brushSpacing: 'Spacing'

Follow the same pattern as the existing brush mode controls (lines 193-278) but add the brush selector dropdown and additional property controls.

📄 src/lib/messages.js ^(MODIFY) 🔗

Add internationalized message definitions for the custom brush tool.

Add to the defineMessages object (around lines 3-74):

customBrush: {
    defaultMessage: 'Custom Brush',
    description: 'Label for the custom brush tool',
    id: 'paint.customBrushMode.customBrush'
},
brushPreset: {
    defaultMessage: 'Brush Preset',
    description: 'Label for brush preset selector',
    id: 'paint.customBrushMode.brushPreset'
},
brushOpacity: {
    defaultMessage: 'Opacity',
    description: 'Label for brush opacity control',
    id: 'paint.customBrushMode.opacity'
},
brushSpacing: {
    defaultMessage: 'Spacing',
    description: 'Label for brush spacing control',
    id: 'paint.customBrushMode.spacing'
}

These messages will be used in the UI components for accessibility and internationalization, following the same pattern as existing tool messages.

📁 assets/brushes ^(NEW) 🔗

Create a directory to store brush stamp images (PNG files with alpha channel).

📄 assets/brushes/soft-round.png ^(NEW) 🔗

Create a soft round brush stamp image:

• Size: 256x256 pixels (will be scaled as needed)
• Format: PNG with alpha channel
• Content: A circular gradient from opaque white in the center to fully transparent at the edges
• Characteristics: Smooth falloff, no hard edges, suitable for soft painting

This is the default brush and should have a very smooth, natural appearance. Use a radial gradient with a smooth easing function (e.g., ease-out or gaussian-like falloff).

📄 assets/brushes/hard-round.png ^(NEW) 🔗

Create a hard round brush stamp image:

• Size: 256x256 pixels
• Format: PNG with alpha channel
• Content: A solid white circle with sharp edges (minimal anti-aliasing)
• Characteristics: Hard edges, suitable for precise painting and pixel art

The circle should be fully opaque in the center with a very sharp transition to transparent at the edges (1-2 pixel anti-aliasing at most).

📄 assets/brushes/airbrush.png ^(NEW) 🔗

Create an airbrush stamp image:

• Size: 256x256 pixels
• Format: PNG with alpha channel
• Content: A very soft, scattered circular pattern with random opacity variations
• Characteristics: Very soft edges, scattered appearance, low opacity in outer areas

Create a radial gradient with a very gradual falloff and add subtle noise/scatter to simulate airbrush spray. The center should be more opaque but still soft, with a wide, diffuse outer area.

📄 assets/brushes/flat-brush.png ^(NEW) 🔗

Create a flat brush stamp image:

• Size: 256x128 pixels (rectangular)
• Format: PNG with alpha channel
• Content: A rectangular brush shape with slightly soft edges
• Characteristics: Rectangular shape, soft edges on the short sides, suitable for painting broad strokes

The brush should be wider than it is tall, with a slight gradient at the edges to simulate bristle softness. The center should be fully opaque white.

📄 assets/brushes/canvas-texture.png ^(NEW) 🔗

Create a canvas texture brush stamp image:

• Size: 256x256 pixels
• Format: PNG with alpha channel
• Content: A circular brush with canvas/fabric texture pattern
• Characteristics: Textured appearance simulating canvas weave, suitable for artistic effects

Create a circular shape with a subtle woven texture pattern overlaid. The texture should be visible but not overwhelming, with varying opacity to simulate paint on canvas. Use a noise pattern or actual canvas texture as reference.

📄 assets/brushes/chalk.png ^(NEW) 🔗

Create a chalk texture brush stamp image:

• Size: 256x256 pixels
• Format: PNG with alpha channel
• Content: A circular brush with chalk-like texture
• Characteristics: Grainy, irregular texture simulating chalk on paper

Create a circular shape with a rough, grainy texture. Use noise and irregular opacity variations to simulate the appearance of chalk. The edges should be somewhat irregular and the texture should be visible throughout.

📄 assets/brushes/splatter.png ^(NEW) 🔗

Create a splatter brush stamp image:

• Size: 256x256 pixels
• Format: PNG with alpha channel
• Content: An irregular splatter pattern with droplets and spray
• Characteristics: Organic, irregular shape with varying opacity, suitable for artistic effects

Create an asymmetric splatter pattern with a main blob in the center and smaller droplets scattered around. Use varying opacity and irregular shapes to simulate paint splatter. This brush should look different each time it's used (can be achieved by rotating it randomly in the brush engine).

📄 src/helper/brushes/brush-loader.js ^(NEW) 🔗

References

• 📄 src/helper/bitmap.js
• 📄 webpack.config.js

Create a brush loader utility module that handles loading brush stamp images.

Exports:

loadBrushImage(imagePath): Async function that loads a brush stamp image from the specified path. Return a Promise that resolves to an Image object. Handle loading errors gracefully (return a default circular brush if loading fails).

preloadAllBrushes(brushPresets): Async function that preloads all brush images from the brush presets array. Return a Promise that resolves to a Map of brushId -> Image. This should be called at application startup to avoid loading delays during painting.

createDefaultBrush(size): Fallback function that creates a default circular brush stamp using canvas drawing (similar to getBrushMark() in src/helper/bitmap.js). Return a canvas element. This is used when a brush image fails to load.

getBrushImagePath(brushId): Helper function that returns the full path to a brush image based on the brush ID. Handle webpack asset loading (may need to use require() or import for proper bundling).

The loader should handle both development and production environments, ensuring brush images are properly bundled by webpack. Consider using webpack's url-loader or file-loader for asset management (check webpack.config.js for existing asset handling patterns).

📄 src/containers/paint-editor.jsx ^(MODIFY) 🔗

References

• 📄 src/containers/bit-brush-mode.jsx

Register the custom brush mode container so it's rendered in the paint editor.

Changes needed:

1. Import the container (at the top with other mode imports):

   • Add import BitCustomBrushMode from './bit-custom-brush-mode.jsx';

2. Render the mode component (in the render method where other mode components are rendered):

   • Add <BitCustomBrushMode onUpdateImage={this.props.onUpdateImage} /> alongside other bitmap mode components like BitBrushMode, BitEraserMode, etc.

This ensures the custom brush mode is available when the user selects it from the tool palette. The component will be mounted and will handle tool activation/deactivation based on the current mode.

📄 src/components/fixed-tools/fixed-tools.jsx ^(MODIFY) 🔗

References

• 📄 src/containers/bit-brush-mode.jsx

Add the custom brush mode button to the tool palette so users can select it.

Changes needed:

1. Import the component (at the top with other mode component imports):

   • Add import BitCustomBrushMode from '../../containers/bit-custom-brush-mode.jsx';

2. Add to the bitmap tools section (in the render method where bitmap tools are displayed):

   • Add <BitCustomBrushMode /> in the appropriate location within the bitmap tools group, likely after BitBrushMode and before or after BitEraserMode

The fixed-tools component displays the tool palette on the left side of the editor. Adding the custom brush mode here makes it accessible to users. Check the existing structure to ensure it's placed in the correct section (bitmap tools vs vector tools).

Diagram

sequenceDiagram
    participant User
    participant UI as Mode Tools UI
    participant Container as BitCustomBrushMode Container
    participant Tool as CustomBrushTool
    participant Engine as BrushEngine
    participant Canvas as Drawing Canvas

    User->>UI: Select Custom Brush Mode
    UI->>Container: Activate Mode
    Container->>Tool: Create CustomBrushTool instance
    Container->>Tool: Set brush preset, size, opacity
    Tool->>Engine: Load brush preset
    Engine->>Engine: Load & cache brush image
    
    User->>UI: Select brush from dropdown
    UI->>Container: Change brush preset
    Container->>Tool: setBrushPreset(preset)
    Tool->>Engine: Load new brush stamp
    
    User->>Canvas: Mouse down (start stroke)
    Tool->>Engine: Stamp at initial point
    Engine->>Canvas: drawImage(brushStamp)
    
    User->>Canvas: Mouse drag (draw stroke)
    Tool->>Tool: Calculate distance from last stamp
    alt Distance > spacing threshold
        Tool->>Engine: stampAlongPath(point1, point2)
        Engine->>Engine: Interpolate stamp positions
        loop For each stamp position
            Engine->>Canvas: drawImage(brushStamp)
        end
    end
    
    User->>Canvas: Mouse up (end stroke)
    Tool->>Engine: Stamp at final point
    Engine->>Canvas: drawImage(brushStamp)
    Tool->>Canvas: Commit to main raster
    Tool->>Container: onUpdateImage()

Loading

Import In IDE

🤖 Prompt for AI Agents

I have created the following plan after thorough exploration and analysis of the codebase. Follow the below plan verbatim. Trust the files and references. Do not re-verify what's written in the plan. Explore only when absolutely necessary. First implement all the proposed file changes and then I'll review all the changes together at the end.

### Observations

The codebase is a React/Redux paint editor with bitmap and vector tools. The current bitmap brush tool (`src/helper/bit-tools/brush-tool.js`) uses a simple circular stamp created by `getBrushMark()` and draws along stroke paths using Bresenham's line algorithm. The architecture follows a clear pattern: modes defined in `src/lib/modes.js`, components in `src/components/`, containers in `src/containers/`, tools in `src/helper/bit-tools/`, and reducers in `src/reducers/`. The UI controls are rendered in `src/components/mode-tools/mode-tools.jsx` based on the active mode.

### Approach

Enhance the existing bitmap brush system by creating a custom brush engine that supports prerendered raster images as brush stamps (Procreate-style). The implementation will add a new brush preset system, modify the existing brush tool to support custom stamps, create UI components for brush selection, and add state management for brush properties. This approach extends the existing architecture rather than replacing it, ensuring compatibility with the current codebase.

### Reasoning

I explored the repository structure to understand the project layout, then examined the existing bitmap brush tool implementation to understand how brushes currently work. I analyzed the mode system, UI component patterns, state management with Redux reducers, and the brush stamping mechanism using Bresenham's line algorithm. I also reviewed how other bitmap tools are structured to follow consistent patterns.

## Mermaid Diagram

sequenceDiagram
    participant User
    participant UI as Mode Tools UI
    participant Container as BitCustomBrushMode Container
    participant Tool as CustomBrushTool
    participant Engine as BrushEngine
    participant Canvas as Drawing Canvas

    User->>UI: Select Custom Brush Mode
    UI->>Container: Activate Mode
    Container->>Tool: Create CustomBrushTool instance
    Container->>Tool: Set brush preset, size, opacity
    Tool->>Engine: Load brush preset
    Engine->>Engine: Load & cache brush image
    
    User->>UI: Select brush from dropdown
    UI->>Container: Change brush preset
    Container->>Tool: setBrushPreset(preset)
    Tool->>Engine: Load new brush stamp
    
    User->>Canvas: Mouse down (start stroke)
    Tool->>Engine: Stamp at initial point
    Engine->>Canvas: drawImage(brushStamp)
    
    User->>Canvas: Mouse drag (draw stroke)
    Tool->>Tool: Calculate distance from last stamp
    alt Distance > spacing threshold
        Tool->>Engine: stampAlongPath(point1, point2)
        Engine->>Engine: Interpolate stamp positions
        loop For each stamp position
            Engine->>Canvas: drawImage(brushStamp)
        end
    end
    
    User->>Canvas: Mouse up (end stroke)
    Tool->>Engine: Stamp at final point
    Engine->>Canvas: drawImage(brushStamp)
    Tool->>Canvas: Commit to main raster
    Tool->>Container: onUpdateImage()

## Proposed File Changes

### src/helper/brushes/brush-presets.js(NEW)

Create a brush presets module that defines default brush configurations. This file will export an array of brush preset objects, each containing:

- **name**: Display name (e.g., 'Soft Round', 'Hard Round', 'Airbrush')
- **id**: Unique identifier for the brush
- **imagePath**: Path to the brush stamp image (PNG with alpha channel)
- **defaultSize**: Default brush size
- **defaultSpacing**: Default spacing as a fraction of brush size (e.g., 0.25)
- **defaultOpacity**: Default opacity (0.0 to 1.0)
- **supportsRotation**: Boolean indicating if rotation is supported
- **textured**: Boolean indicating if it's a textured brush

Include at least 5-7 preset definitions:
1. **Soft Round**: Smooth circular brush with soft edges (default)
2. **Hard Round**: Circular brush with sharp edges
3. **Airbrush**: Soft, scattered appearance
4. **Flat Brush**: Rectangular brush shape
5. **Textured Canvas**: Canvas texture pattern
6. **Chalk**: Chalk-like texture
7. **Splatter**: Splatter/spray effect

The presets will be used by the brush engine to load and configure brushes.

### src/helper/brushes/brush-engine.js(NEW)

References: 

- src/helper/bitmap.js

Create the core brush engine module that handles custom brush stamping logic. This module will export:

**BrushEngine class** with methods:

- **loadBrushPreset(preset)**: Load a brush preset and create an Image/Canvas from the brush stamp image path. Cache the loaded brush stamps for performance.

- **createBrushStamp(preset, size, color, opacity)**: Generate a canvas with the brush stamp at the specified size and color. Scale the original brush image to the desired size, apply color tinting (multiply blend mode), and apply opacity. Return a canvas element ready for stamping.

- **stampAlongPath(context, point1, point2, brushStamp, spacing, properties)**: Stamp the brush along a path between two points. Calculate the distance between points, determine stamp positions based on spacing (as a fraction of brush size), interpolate positions along the line, and draw the brush stamp at each position using `context.drawImage()`. Support additional properties like rotation, jitter (randomize size/opacity/rotation), and pressure sensitivity.

- **applyBrushProperties(stamp, properties)**: Apply dynamic properties to a brush stamp (rotation, scale variation, opacity variation). Return a modified canvas if needed.

**Helper functions:**
- **calculateSpacing(brushSize, spacingFraction)**: Calculate pixel spacing between stamps
- **interpolatePoints(point1, point2, distance, spacing)**: Generate array of interpolated points along the line
- **applyPressure(value, pressure)**: Modify a value based on pressure input (0.0 to 1.0)

The engine should use `forEachLinePoint()` from `src/helper/bitmap.js` as a reference but implement custom spacing logic instead of stamping at every pixel. Use offscreen canvas for brush stamp caching to optimize performance.

### src/helper/bit-tools/custom-brush-tool.js(NEW)

References: 

- src/helper/bit-tools/brush-tool.js
- src/helper/bitmap.js
- src/helper/layer.js

Create a new custom brush tool class that extends `paper.Tool` (similar to `src/helper/bit-tools/brush-tool.js`). This tool will use the brush engine for custom brush stamping.

**CustomBrushTool class** structure:

**Constructor**: Accept `onUpdateImage` callback, initialize brush engine, set up mouse event handlers (`onMouseMove`, `onMouseDown`, `onMouseDrag`, `onMouseUp`), and initialize state variables (active, lastPoint, lastStampPoint, cursorPreview, drawTarget, currentBrush, brushProperties).

**Methods:**

- **setBrushPreset(preset)**: Load a brush preset using the brush engine, update the current brush, and regenerate the cursor preview.

- **setBrushSize(size)**: Update brush size, regenerate brush stamp with new size.

- **setBrushOpacity(opacity)**: Update brush opacity (0-100).

- **setBrushSpacing(spacing)**: Update spacing between stamps (0.1 to 2.0 as fraction of brush size).

- **setColor(color)**: Update brush color, regenerate brush stamp with new color.

- **updateCursorPreview()**: Create a cursor preview showing the brush size and shape, similar to how `src/helper/bit-tools/brush-tool.js` creates a cursor preview using `paper.Raster`.

- **handleMouseDown(event)**: Start a new stroke, create a temporary drawing canvas, stamp at the initial point, store the point as lastStampPoint.

- **handleMouseDrag(event)**: Calculate distance from lastStampPoint, if distance exceeds spacing threshold, use brush engine's `stampAlongPath()` to stamp between lastStampPoint and current point, update lastStampPoint. Support pressure from `event.pressure` if available.

- **handleMouseUp(event)**: Finalize the stroke, stamp to the final point, commit the temporary canvas to the main raster using `getRaster().drawImage()`, call `onUpdateImage()`, clean up temporary canvas.

- **handleMouseMove(event)**: Update cursor preview position.

- **deactivateTool()**: Clean up cursor preview and temporary canvases.

The tool should follow the same pattern as `src/helper/bit-tools/brush-tool.js` but use the custom brush engine instead of `getBrushMark()` and `forEachLinePoint()`. Support modifier keys (shift for 45° angles, alt for vertical, ctrl/meta for horizontal) using the `constrainPoint()` method pattern from the existing brush tool.

### src/lib/modes.js(MODIFY)

Add a new mode for the custom brush tool to the `bitmapModesObj` object:

- Add `BIT_CUSTOM_BRUSH: null` to the `bitmapModesObj` definition (around line 22-29)

This will register the new custom brush mode in the application's mode system, making it available alongside other bitmap modes like `BIT_BRUSH`, `BIT_ERASER`, etc. The `keyMirror` utility will automatically create the mode constant.

### src/reducers/custom-brush-mode.js(NEW)

References: 

- src/reducers/brush-mode.js
- src/reducers/bit-brush-size.js

Create a Redux reducer to manage custom brush state, following the pattern from `src/reducers/brush-mode.js`.

**State shape:**
```javascript
{
  selectedBrushId: 'soft-round',
  brushSize: 20,
  brushOpacity: 100,
  brushSpacing: 0.25,
  brushRotation: 0
}
```

**Action types:**
- `CHANGE_CUSTOM_BRUSH_PRESET`: Change the selected brush preset
- `CHANGE_CUSTOM_BRUSH_SIZE`: Change brush size (1-100)
- `CHANGE_CUSTOM_BRUSH_OPACITY`: Change brush opacity (0-100)
- `CHANGE_CUSTOM_BRUSH_SPACING`: Change brush spacing (0.1-2.0)
- `CHANGE_CUSTOM_BRUSH_ROTATION`: Change brush rotation (0-360)

**Reducer function**: Handle each action type, validate input values, return new state object. Use the same validation pattern as `src/reducers/bit-brush-size.js` (check for NaN, apply min/max constraints).

**Action creators**: Export action creator functions for each action type:
- `changeCustomBrushPreset(brushId)`
- `changeCustomBrushSize(size)`
- `changeCustomBrushOpacity(opacity)`
- `changeCustomBrushSpacing(spacing)`
- `changeCustomBrushRotation(rotation)`

Export the reducer as default and all action creators as named exports.

### src/reducers/scratch-paint-reducer.js(MODIFY)

References: 

- src/reducers/custom-brush-mode.js(NEW)

Register the new custom brush reducer in the root reducer:

1. **Import the reducer**: Add `import customBrushModeReducer from './custom-brush-mode';` at the top with other reducer imports (around line 1-30)

2. **Add to combineReducers**: Add `customBrushMode: customBrushModeReducer,` to the `combineReducers` object (around line 32-62)

This integrates the custom brush state into the Redux store at `state.scratchPaint.customBrushMode`, making it accessible to all components.

### src/components/bit-custom-brush-mode(NEW)

Create a directory for the custom brush mode component.

### src/components/bit-custom-brush-mode/bit-custom-brush-mode.jsx(NEW)

References: 

- src/components/bit-brush-mode/bit-brush-mode.jsx
- src/components/tool-select-base/tool-select-base.jsx

Create the presentational component for the custom brush mode button, following the pattern from `src/components/bit-brush-mode/bit-brush-mode.jsx`.

**Component structure:**
- Import React, PropTypes, ToolSelectComponent, and messages
- Import a custom brush icon SVG (create `custom-brush.svg` in the same directory)
- Export a functional component `BitCustomBrushModeComponent` that renders `ToolSelectComponent`
- Pass props: `imgDescriptor` (message for accessibility), `imgSrc` (icon), `isSelected` (boolean), `onMouseDown` (handler)
- Set keybinding to "C" for quick access

**PropTypes:**
- `isSelected`: PropTypes.bool.isRequired
- `onMouseDown`: PropTypes.func.isRequired

This component will appear in the tool palette alongside other bitmap tools.

### src/components/bit-custom-brush-mode/custom-brush.svg(NEW)

Create an SVG icon for the custom brush tool. The icon should visually distinguish it from the regular brush tool, perhaps showing a textured or artistic brush shape. Design a simple, recognizable icon that fits the style of other tool icons in the application (check existing icons in `src/components/bit-brush-mode/brush.svg` for reference).

Suggested design: A brush shape with visible bristles or texture marks to indicate it's a custom/artistic brush, approximately 20x20px viewBox.

### src/containers/bit-custom-brush-mode.jsx(NEW)

References: 

- src/containers/bit-brush-mode.jsx
- src/helper/bit-tools/custom-brush-tool.js(NEW)
- src/lib/modes.js(MODIFY)

Create the container component that connects the custom brush mode to Redux, following the pattern from `src/containers/bit-brush-mode.jsx`.

**Component structure:**

**Class**: `BitCustomBrushMode` extends `React.Component`

**Constructor**: Bind `activateTool` and `deactivateTool` methods

**Lifecycle methods:**
- `componentDidMount()`: Activate tool if mode is active
- `componentWillReceiveProps(nextProps)`: Update tool properties when props change (color, brush preset, size, opacity, spacing), activate/deactivate tool based on mode changes
- `shouldComponentUpdate(nextProps)`: Only update when mode active state changes
- `componentWillUnmount()`: Deactivate tool

**Methods:**
- `activateTool()`: Clear selection, clear gradient, validate color (force default if MIXED/transparent), instantiate `CustomBrushTool` from `src/helper/bit-tools/custom-brush-tool.js`, set brush properties (preset, size, opacity, spacing, color), activate the tool
- `deactivateTool()`: Call tool's `deactivateTool()`, remove tool, set to null

**Render**: Return `BitCustomBrushModeComponent` with `isSelected` and `onMouseDown` props

**Redux connection:**
- `mapStateToProps`: Extract `customBrushMode` state (selectedBrushId, brushSize, brushOpacity, brushSpacing), `color` from fill color, check if `mode === Modes.BIT_CUSTOM_BRUSH`
- `mapDispatchToProps`: Dispatch actions for `clearSelectedItems`, `clearGradient`, `handleMouseDown` (change mode to BIT_CUSTOM_BRUSH), `onChangeFillColor`

**PropTypes**: Define all required props (customBrushMode properties, color, handlers, mode state, onUpdateImage)

Connect the component using `react-redux` connect and export as default.

### src/components/brush-selector(NEW)

Create a directory for the brush selector component.

### src/components/brush-selector/brush-selector.jsx(NEW)

References: 

- src/components/dropdown/dropdown.jsx
- src/components/mode-tools/mode-tools.jsx(MODIFY)
- src/helper/brushes/brush-presets.js(NEW)

Create a brush selector component that displays a dropdown of available brush presets, following the pattern from `src/components/dropdown/dropdown.jsx` and the SUSSY mode shape selector in `src/components/mode-tools/mode-tools.jsx` (lines 438-492).

**Component structure:**

**Props:**
- `selectedBrushId`: Currently selected brush ID
- `brushPresets`: Array of brush preset objects from `src/helper/brushes/brush-presets.js`
- `onSelectBrush`: Callback function when a brush is selected
- `className`: Optional CSS class

**Render:**
- Use `Dropdown` component from `src/components/dropdown/dropdown.jsx`
- Display the currently selected brush as the dropdown trigger (show brush name and a small preview icon)
- Popover content: List of all brush presets in a scrollable container
- Each brush preset item shows:
  - Brush preview (small canvas showing the brush stamp)
  - Brush name
  - Click handler to select the brush
- Style similar to the font dropdown or shape selector

**Brush preview generation:**
- Create a small canvas (e.g., 40x40px) showing the brush stamp
- Use the brush engine to render a preview of each brush
- Cache previews for performance

The component should be reusable and self-contained, handling its own dropdown state while calling the parent's `onSelectBrush` callback when a brush is chosen.

### src/components/brush-selector/brush-selector.css(NEW)

References: 

- src/components/dropdown/dropdown.css
- src/css/colors.css
- src/css/units.css

Create CSS styles for the brush selector component.

**Styles needed:**

- `.brush-selector-dropdown`: Container styling for the dropdown trigger
- `.brush-selector-current`: Style for the currently selected brush display (flex layout, icon + text)
- `.brush-selector-preview`: Small preview canvas/image styling (e.g., 40x40px, border, border-radius)
- `.brush-selector-list`: Container for the brush list in the popover (max-height with scroll, padding)
- `.brush-selector-item`: Individual brush item styling (flex layout, padding, hover effect, cursor pointer)
- `.brush-selector-item:hover`: Hover state (background color change)
- `.brush-selector-item-selected`: Selected item styling (different background or border)
- `.brush-selector-name`: Brush name text styling

Follow the styling patterns from `src/components/dropdown/dropdown.css` and `src/components/mode-tools/mode-tools.css`. Use CSS variables from `src/css/colors.css` and `src/css/units.css` for consistency.

### src/components/mode-tools/mode-tools.jsx(MODIFY)

References: 

- src/components/brush-selector/brush-selector.jsx(NEW)
- src/helper/brushes/brush-presets.js(NEW)
- src/reducers/custom-brush-mode.js(NEW)
- src/lib/modes.js(MODIFY)

Add UI controls for the custom brush mode in the mode tools component. This file already handles different modes in a large switch statement (starting around line 193).

**Changes needed:**

1. **Import statements** (top of file, around lines 1-77):
   - Import `BrushSelector` from `src/components/brush-selector/brush-selector.jsx`
   - Import brush presets from `src/helper/brushes/brush-presets.js`
   - Import custom brush icon

2. **Add case for BIT_CUSTOM_BRUSH** (in the switch statement, after the BIT_BRUSH case around line 278):
   - Add `case Modes.BIT_CUSTOM_BRUSH:` 
   - Render a container with:
     - **Brush selector dropdown**: Use `BrushSelector` component to select brush presets
     - **Size control**: `LiveInput` with range slider (min: 1, max: 100) for brush size
     - **Opacity control**: `LiveInput` with range slider (min: 0, max: 100) for brush opacity
     - **Spacing control**: `LiveInput` with range slider (min: 10, max: 200, representing 0.1 to 2.0) for brush spacing
     - Display icon for each control (create or reuse appropriate icons)
   - Wire up to Redux actions from `src/reducers/custom-brush-mode.js`

3. **Messages** (around lines 79-191):
   - Add internationalized messages for custom brush controls:
     - `customBrush`: 'Custom Brush'
     - `brushPreset`: 'Brush Preset'
     - `brushOpacity`: 'Opacity'
     - `brushSpacing`: 'Spacing'

Follow the same pattern as the existing brush mode controls (lines 193-278) but add the brush selector dropdown and additional property controls.

### src/lib/messages.js(MODIFY)

Add internationalized message definitions for the custom brush tool.

**Add to the defineMessages object** (around lines 3-74):

```javascript
customBrush: {
    defaultMessage: 'Custom Brush',
    description: 'Label for the custom brush tool',
    id: 'paint.customBrushMode.customBrush'
},
brushPreset: {
    defaultMessage: 'Brush Preset',
    description: 'Label for brush preset selector',
    id: 'paint.customBrushMode.brushPreset'
},
brushOpacity: {
    defaultMessage: 'Opacity',
    description: 'Label for brush opacity control',
    id: 'paint.customBrushMode.opacity'
},
brushSpacing: {
    defaultMessage: 'Spacing',
    description: 'Label for brush spacing control',
    id: 'paint.customBrushMode.spacing'
}
```

These messages will be used in the UI components for accessibility and internationalization, following the same pattern as existing tool messages.

### assets/brushes(NEW)

Create a directory to store brush stamp images (PNG files with alpha channel).

### assets/brushes/soft-round.png(NEW)

Create a soft round brush stamp image:

- **Size**: 256x256 pixels (will be scaled as needed)
- **Format**: PNG with alpha channel
- **Content**: A circular gradient from opaque white in the center to fully transparent at the edges
- **Characteristics**: Smooth falloff, no hard edges, suitable for soft painting

This is the default brush and should have a very smooth, natural appearance. Use a radial gradient with a smooth easing function (e.g., ease-out or gaussian-like falloff).

### assets/brushes/hard-round.png(NEW)

Create a hard round brush stamp image:

- **Size**: 256x256 pixels
- **Format**: PNG with alpha channel
- **Content**: A solid white circle with sharp edges (minimal anti-aliasing)
- **Characteristics**: Hard edges, suitable for precise painting and pixel art

The circle should be fully opaque in the center with a very sharp transition to transparent at the edges (1-2 pixel anti-aliasing at most).

### assets/brushes/airbrush.png(NEW)

Create an airbrush stamp image:

- **Size**: 256x256 pixels
- **Format**: PNG with alpha channel
- **Content**: A very soft, scattered circular pattern with random opacity variations
- **Characteristics**: Very soft edges, scattered appearance, low opacity in outer areas

Create a radial gradient with a very gradual falloff and add subtle noise/scatter to simulate airbrush spray. The center should be more opaque but still soft, with a wide, diffuse outer area.

### assets/brushes/flat-brush.png(NEW)

Create a flat brush stamp image:

- **Size**: 256x128 pixels (rectangular)
- **Format**: PNG with alpha channel
- **Content**: A rectangular brush shape with slightly soft edges
- **Characteristics**: Rectangular shape, soft edges on the short sides, suitable for painting broad strokes

The brush should be wider than it is tall, with a slight gradient at the edges to simulate bristle softness. The center should be fully opaque white.

### assets/brushes/canvas-texture.png(NEW)

Create a canvas texture brush stamp image:

- **Size**: 256x256 pixels
- **Format**: PNG with alpha channel
- **Content**: A circular brush with canvas/fabric texture pattern
- **Characteristics**: Textured appearance simulating canvas weave, suitable for artistic effects

Create a circular shape with a subtle woven texture pattern overlaid. The texture should be visible but not overwhelming, with varying opacity to simulate paint on canvas. Use a noise pattern or actual canvas texture as reference.

### assets/brushes/chalk.png(NEW)

Create a chalk texture brush stamp image:

- **Size**: 256x256 pixels
- **Format**: PNG with alpha channel
- **Content**: A circular brush with chalk-like texture
- **Characteristics**: Grainy, irregular texture simulating chalk on paper

Create a circular shape with a rough, grainy texture. Use noise and irregular opacity variations to simulate the appearance of chalk. The edges should be somewhat irregular and the texture should be visible throughout.

### assets/brushes/splatter.png(NEW)

Create a splatter brush stamp image:

- **Size**: 256x256 pixels
- **Format**: PNG with alpha channel
- **Content**: An irregular splatter pattern with droplets and spray
- **Characteristics**: Organic, irregular shape with varying opacity, suitable for artistic effects

Create an asymmetric splatter pattern with a main blob in the center and smaller droplets scattered around. Use varying opacity and irregular shapes to simulate paint splatter. This brush should look different each time it's used (can be achieved by rotating it randomly in the brush engine).

### src/helper/brushes/brush-loader.js(NEW)

References: 

- src/helper/bitmap.js
- webpack.config.js

Create a brush loader utility module that handles loading brush stamp images.

**Exports:**

**loadBrushImage(imagePath)**: Async function that loads a brush stamp image from the specified path. Return a Promise that resolves to an Image object. Handle loading errors gracefully (return a default circular brush if loading fails).

**preloadAllBrushes(brushPresets)**: Async function that preloads all brush images from the brush presets array. Return a Promise that resolves to a Map of brushId -> Image. This should be called at application startup to avoid loading delays during painting.

**createDefaultBrush(size)**: Fallback function that creates a default circular brush stamp using canvas drawing (similar to `getBrushMark()` in `src/helper/bitmap.js`). Return a canvas element. This is used when a brush image fails to load.

**getBrushImagePath(brushId)**: Helper function that returns the full path to a brush image based on the brush ID. Handle webpack asset loading (may need to use `require()` or `import` for proper bundling).

The loader should handle both development and production environments, ensuring brush images are properly bundled by webpack. Consider using webpack's `url-loader` or `file-loader` for asset management (check `webpack.config.js` for existing asset handling patterns).

### src/containers/paint-editor.jsx(MODIFY)

References: 

- src/containers/bit-brush-mode.jsx

Register the custom brush mode container so it's rendered in the paint editor.

**Changes needed:**

1. **Import the container** (at the top with other mode imports):
   - Add `import BitCustomBrushMode from './bit-custom-brush-mode.jsx';`

2. **Render the mode component** (in the render method where other mode components are rendered):
   - Add `<BitCustomBrushMode onUpdateImage={this.props.onUpdateImage} />` alongside other bitmap mode components like `BitBrushMode`, `BitEraserMode`, etc.

This ensures the custom brush mode is available when the user selects it from the tool palette. The component will be mounted and will handle tool activation/deactivation based on the current mode.

### src/components/fixed-tools/fixed-tools.jsx(MODIFY)

References: 

- src/containers/bit-brush-mode.jsx

Add the custom brush mode button to the tool palette so users can select it.

**Changes needed:**

1. **Import the component** (at the top with other mode component imports):
   - Add `import BitCustomBrushMode from '../../containers/bit-custom-brush-mode.jsx';`

2. **Add to the bitmap tools section** (in the render method where bitmap tools are displayed):
   - Add `<BitCustomBrushMode />` in the appropriate location within the bitmap tools group, likely after `BitBrushMode` and before or after `BitEraserMode`

The fixed-tools component displays the tool palette on the left side of the editor. Adding the custom brush mode here makes it accessible to users. Check the existing structure to ensure it's placed in the correct section (bitmap tools vs vector tools).

---

Developer Humor

🎨 From pixels to Picasso, one stamp at a time!\n> The brush engine loads, the canvas awaits,\n> Custom stamps ready at the digital gates.\n> Soft rounds and textures, splatters galore,\n> The bitmap editor's boring no more!\n> 🖌️ Paint like Procreate, but open and free! 🎉

---

Execution Information

Branch: develop
Commit: d943af1

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.