Skip to content

feat(canvas): add editable vector layers and spline workflows - #9194

Open
DustyShoe wants to merge 38 commits into
invoke-ai:mainfrom
DustyShoe:feat(canvas)--Splines-tool
Open

feat(canvas): add editable vector layers and spline workflows#9194
DustyShoe wants to merge 38 commits into
invoke-ai:mainfrom
DustyShoe:feat(canvas)--Splines-tool

Conversation

@DustyShoe

@DustyShoe DustyShoe commented May 17, 2026

Copy link
Copy Markdown
Collaborator

Summary

This PR adds an end-to-end MVP for editable vector layers on the Canvas.

A vector_layer stores multiple open or closed cubic Bezier paths. Paths remain editable and serializable until the user explicitly materializes them into a raster layer or inpaint mask.

The implementation now covers the complete core workflow and is ready for architecture, UX, and code review:

  1. create a vector layer
  2. draw path outlines with the existing Shapes tool
  3. edit paths, points, and handles nondestructively
  4. transform or combine vector layers
  5. trace or fill paths into raster output, or create an inpaint mask

User-facing workflow

Path creation

There is no separate Path Tool. When a vector layer is selected, the existing Shapes tool creates editable vector outlines:

  • Rectangle and Oval create closed Bezier paths
  • Polygon / Polyline adds anchors point by point
  • clicking the first point closes a Polygon
  • Enter or double-click finishes an open Polyline
  • Freehand stabilizes the gesture and fits it to editable cubic Bezier segments

Vector shapes are outlines only. They are not stored as filled vector shapes.

Vector edit mode

A vector layer can contain multiple paths. In Edit mode:

  • all paths remain visible and selectable
  • clicking a path makes it active without discarding edits made to other paths
  • anchor points can be moved individually or as a multi-point selection
  • drag-rectangle selection replaces the selection
  • Shift+drag adds points to the selection
  • Ctrl/Cmd+drag removes points from the selection
  • handles are shown for all selected points
  • Shift+click on a segment inserts a point at the nearest location on the curve
  • Ctrl/Cmd+click deletes a point when the path remains valid
  • Delete/Backspace deletes the active spline
  • point modes are persisted per point:
    • Corner: handles move independently
    • Smooth: handles remain collinear while preserving independent lengths
    • Symmetric: handles remain collinear with mirrored lengths
  • Smooth Path can process the whole active path or only selected points
  • Reset restores the layer to its state at the start of the edit session
  • Apply commits the complete layer edit session
  • Cancel reverts the complete layer edit session

Point, handle, path, and preview sizing remains usable across canvas zoom levels.

Layer operations

Vector layers participate in the normal layer stack and support:

  • save/load and Canvas project serialization
  • opacity, visibility, locking, naming, duplication, arrangement, and deletion
  • whole-layer move, scale, and rotation without rasterizing path geometry
  • vector-to-vector Merge Down while preserving editable paths

Materialization

Materialization is explicit and nondestructive. Source vector paths are preserved.

  • Trace All Paths converts every open and closed path into brush-line objects on a new raster layer
  • Trace uses the active canvas color and the Trace Width control shown beside Opacity for the selected vector layer
  • Fill Closed Paths fills every valid closed path with the active color on a new raster layer
  • Create Inpaint Mask converts every valid closed path into a new inpaint mask
  • layer-level materialization does not require an active path
  • Fill and Create Inpaint Mask are disabled when the layer has no valid closed paths

Implementation

  • adds vector_layer to the Canvas entity model, Redux state, selectors, adapters, renderers, layer UI, context menus, and compositor integration
  • stores serializable path geometry separately from transient edit-session state
  • integrates vector layers with Canvas project save/load and metadata validation
  • preserves undo behavior for vector edits, transforms, duplication, and Merge Down
  • uses shared Bezier geometry utilities for rendering, hit testing, point insertion, smoothing, freehand fitting, tracing, fills, and masks
  • keeps vector display geometry separate from raster output

Current limitations / out of scope

  • Trace, Fill, and Create Inpaint Mask always create a new target layer
  • materialization is layer-level; there are no per-path materialization actions
  • Fill and mask operations require isClosed = true; visually overlapping open endpoints are not treated as closed
  • dragging endpoints together does not currently merge them or change an open path to closed
  • Polygon point placement does not create handles by dragging; curves are shaped in Edit mode
  • compound-path holes and winding-rule controls are not implemented
  • raster line-art to editable centerline spline conversion is not included
  • dense or heavily overlapping paths still need broader UX validation

Verification

Automated coverage includes vector-layer state and undo behavior, project serialization, Merge Down, transforms, Bezier geometry and smoothing, freehand fitting, hit testing, and closed-path materialization.

Latest local checks:

  • pnpm lint:tsc
  • targeted Vitest suites for Bezier geometry and vector materialization
  • ESLint and Prettier checks for the updated files

@github-actions github-actions Bot added the frontend PRs that change frontend files label May 17, 2026
DustyShoe and others added 21 commits June 13, 2026 13:13
Preserve assigned point modes during handle editing and add regression coverage.
Rename path edit actions to Apply/Cancel and update modifier hints.
Keep vector path stroke width visually consistent across canvas zoom levels.
- add closed path creation from the starting point
- improve handle direction selection and zoom-aware path interaction
- add non-destructive whole-layer vector transforms
- preserve editable geometry during vector layer operations
- group path editing sessions into atomic undo steps
@DustyShoe DustyShoe changed the title feat(canvas): add path tool and vector layers feat(canvas): add editable vector layers and spline workflows Aug 9, 2026
DustyShoe and others added 3 commits August 9, 2026 13:03
- integrate vector path creation into the Shapes tool
- add outlined rectangles, ovals, polygons, polylines, and freehand paths
- add multi-point selection, grouped movement, smoothing, and spline deletion
- expose trace width for active vector layers
- add closed-path fill and inpaint mask materialization
- expand vector editing and geometry test coverage
@DustyShoe
DustyShoe marked this pull request as ready for review August 9, 2026 12:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend PRs that change frontend files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants