# Flutter Shape Builder - In-Depth Review

Flutter Shape Builder is a high-performance vector editing tool designed specifically for Flutter developers. It bridges the gap between manual drawing and `dart:ui` code generation, allowing for the creation of complex, high-performance UI elements without external SVG dependencies.

## Tech Stack
- **Framework**: React 19 (Vite)
- **Canvas Engine**: Konva.js (with react-konva) for efficient layer-based rendering and interaction.
- **Geometry Logic**: Paper.js for complex path algorithms and boolean operations.
- **State Management**: Zustand with `persist` middleware for local-first state and history tracking.
- **Styles**: Vanilla CSS with PostCSS (Tailwind for layout utilities).
- **Backend/Ops**: Firebase (Analytics, Performance Monitoring, and custom Error Tracking).

## Core Implementation Details

### 1. Canvas Architecture (`src/features/editor/components/Canvas`)
- **Layered Rendering**: Uses a dedicated `Stage` with layers for the Grid, Shapes, and active Selection/Anchors.
- **Coordination**: The canvas operates on an absolute coordinate system. Transformations (Scale/Rotate) are computed relative to the shape's origin.
- **Path Anchors System**: A sophisticated interaction layer for `Path` shapes that enables dragging vertices, manipulating Bezier control points, and converting segment types (Linear <-> Curve).

### 2. State & Persistence (`src/features/editor/store/useStore.ts`)
- **Single Source of Truth**: All shapes, selection states, zoom level, and pan position are stored in a centralized Zustand store.
- **Z-Order Management**: Managed via an array of `layerIds` to ensure stable rendering order and efficient reordering.
- **Undo/Redo**: Implemented using a snapshot-based history system (50-step cap).

### 3. Code Generation Pipeline (`src/features/editor/utils/exporters`)
- **Path Normalization**: Internal representation of all shapes is normalized into SVG Path Data (M, L, C, Q, Z) before export.
- **Flutter Exporter**: Converts SVG commands into `path.moveTo`, `path.lineTo`, `path.cubicTo`, etc. 
- **Validation**: Includes a pre-export validator that flags unsupported features (like SVG Arc commands in Circles) to the user.

## Feature Deep Dive

### Creative & Geometry Tools
- **Primitives**: Parametric Rectangle and Circle tools.
- **Regular Polygons**: Dynamic side count adjustment (3 to 20 sides) with automatic vertex recalculation.
- **Pen (Path) Tool**: Supports linear and cubic Bezier curves. Features "segment splitting" where clicking a line adds a new anchor.
- **Boolean Operations**: Advanced path combining: Unite, Subtract, Intersect, and Exclude. Results in a new `Path` shape.

### Editing & Transformation
- **Interaction Model**: Standard selection, multi-selection (Shift+Click), and a specialized **Context Menu** (Right-click) for quick access to z-index and locking.
- **Vertex Editing**: Double-click anchors to toggle between Sharp (Linear) and Smooth (Bezier) points.
- **Transform Box**: Bounding-box based scaling and rotation for all shape types.
- **Precise Controls**: Sidebar inputs for X, Y, Width, Height, and Rotation.
- **Layer Management**: Multi-select shapes to delete, group-move, or bulk-assign colors. Layers can be locked or renamed.
- **Corner Radii**: Rectangles support both uniform and individual (top-left, top-right, etc.) corner radius customization.

### UI & Productivity
- **Dark Mode**: High-contrast dark theme for long-duration design sessions.
- **Canvas Controls**: Interactive Zoom (at center) and Pan. Toggleable background alignment grid.
- **Shortcuts**: `V` (Select), `R` (Rect), `C` (Circle), `P` (Polygon), `Ctrl+P` (Pen), `Delete` (Remove), `Ctrl+Z/Y` (History).
- **Color Pipeline**: Integrated color picker for Fill and Stroke with alpha support.

### Export Options
- **Flutter (Dart)**: 
    - *Runnable App*: Creates a full `main.dart` with the shape rendered.
    - *Widget*: Generates a standalone `StatelessWidget`.
    - *Painter*: Provides only the `CustomPainter` class.
- **SVG**: Generates and downloads standard-compliant SVG files.
- **JSON**: Exports the raw internal configuration for programmatic usage or data persistence.

## Technical Constraints & Limitations
- **Circles**: Render correctly in-app but export as SVG Arc commands (`A`), which currently act as placeholders in the Flutter exporter.
- **Gradients**: Not supported; only solid colors and transparency are implemented.
- **Coordinate Space**: Uses absolute coordinates. Responsive behavior in Flutter requires wrapping the generated code in a `FittedBox` or using custom scaling logic.
- **Coordinate Precision**: All coordinates are typically rounded to the nearest integer for cleaner generated code, though internal store maintains float precision.

## Architecture & Code Map
- `src/features/editor/components/Canvas`: Core drawing and interaction logic.
- `src/features/editor/components/Sidebar`: Property inspectors, layer management, and code preview.
- `src/features/editor/utils/booleanOperations.ts`: Integration with Paper.js for path combining.
- `src/features/editor/utils/flutterExporter.ts`: The transpilation logic from SVG paths to Dart.