Skip to content

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

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

DustyShoe wants to merge 58 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. Path geometry remains editable and serializable until
the user explicitly materializes it into a raster layer or inpaint mask. The implementation is frontend-only and is ready
for architecture, UX, and code review.

Core workflow:

  1. Create a vector layer.
  2. Draw editable outlines with the existing Shapes tool.
  3. Edit paths, anchors, handles, and point types nondestructively.
  4. Transform individual paths or the complete vector layer.
  5. Trace or fill paths into raster output, or create an inpaint mask.

User-facing workflow

Path creation

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

  • Rect and Oval create closed Bezier paths.
  • Polygon / Polyline places anchors point by point.
  • Clicking the first anchor closes the path.
  • Enter or double-click finishes an open path.
  • Freehand stabilizes and simplifies the gesture, then fits editable cubic Bezier segments.

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

Vector Edit mode

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

  • all paths and anchors in the layer remain visible
  • clicking a path or anchor makes that path active without discarding changes to other paths
  • the Move tool is the default manipulation tool and Shapes can append paths without ending the edit session
  • clicking an anchor selects it; dragging an empty area creates a rectangular selection
  • Ctrl/Cmd+click and Ctrl/Cmd+drag add anchors to the current selection
  • Shift+click on a segment inserts an anchor at the nearest position on the curve
  • all selected anchors move together while preserving their handles, including selections across multiple paths
  • handles are shown for every selected anchor
  • the last selected anchor has a distinct active outline
  • overlapping or nearby anchors prioritize the active path during click and rectangular hit testing
  • Delete/Backspace deletes selected anchors; if the result would be invalid, the complete path is deleted
  • with no selected anchors, Delete/Backspace deletes the active path

Point modes are stored per anchor and can be assigned to the complete selection:

  • Corner: handles move independently
  • Smooth: handles remain collinear while preserving independent lengths
  • Symmetric: handles remain collinear with mirrored lengths

Additional editing operations:

  • Smooth Path processes either the active path or selected anchors.
  • Split Points opens closed paths or divides paths at selected anchors.
  • Join Points connects exactly two selected open-path endpoints. Nearby endpoints weld; distant endpoints receive an
    intermediate Corner point; joining endpoints of the same path closes it.
  • Copy Path creates an in-place copy, makes it active, and selects all of its anchors for immediate movement.
  • Reset restores the geometry from the start of the edit session.
  • edit-session Undo/Redo operates on in-progress vector changes.
  • Apply commits the complete layer edit session; Cancel restores its initial state.
  • switching to an incompatible tool prompts to Apply or Discard; Esc returns to editing.

Point, handle, path, and hit-area sizing remains usable across canvas zoom levels.

Path and layer operations

The vector layer menu contains whole-layer actions:

  • Edit and Transform
  • Trace All Paths
  • Fill Closed Paths
  • Create Inpaint Mask
  • vector-to-vector Merge Down
  • standard arrange, duplicate, and delete actions

While Edit mode is active, right-clicking anywhere on the canvas opens the active path menu without changing the active
path or point selection. It provides:

  • Transform Path
  • Trace Path
  • Fill Path
  • Create Inpaint Mask
  • Extract Path to a new vector layer
  • Copy Path
  • Delete Path

Path-scoped transforms and materialization use the current in-progress geometry and keep Edit mode active. Operations
respect layer lock, visibility, disabled, and Canvas busy states.

Materialization

Materialization is explicit and nondestructive. It always creates a new target layer and preserves the source paths.

  • Trace supports open and closed paths and uses the active Canvas color.
  • Trace Width controls stroke width.
  • Taper Ends narrows both ends of traced strokes; Taper controls the taper length.
  • Fill and Create Inpaint Mask process only paths explicitly marked as closed.
  • layer-level operations process every eligible path; path-level operations process only the active path.
  • no active raster layer is required.

Implementation

  • adds vector_layer to the Canvas entity model, Redux state, selectors, adapters, renderers, layer UI, context menus,
    project serialization, validation, and undo handling
  • separates persistent path geometry from transient edit-session state
  • reuses the Shapes tool for Rect, Oval, Polygon / Polyline, and Freehand vector creation
  • provides shared Bezier utilities for rendering, hit testing, insertion, smoothing, fitting, topology changes, transforms,
    tracing, fills, and masks
  • keeps vector display geometry separate from raster output
  • includes user documentation for Vector Layers and updates the Shapes guide and Canvas architecture README

Current limitations / out of scope

  • dragging a newly placed Polygon / Polyline anchor does not create handles; curves are shaped in Edit mode
  • Fill and Create Inpaint Mask require isClosed = true; visually overlapping open endpoints are not treated as closed
  • compound-path holes and winding-rule controls are not implemented
  • raster line-art to editable centerline conversion is not included
  • dense and heavily overlapping path workflows need broader UX validation

Verification

  • pnpm test:run: 181 test files, 2365 tests passed, no type errors
  • pnpm build: Knip, dependency-cycle analysis, ESLint, Prettier, TypeScript, Vitest, and production Vite build passed
  • pnpm build in docs: Astro build passed and all internal documentation links are valid

@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
@lstein lstein added the 7.0.0 label Aug 24, 2026
@lstein lstein moved this to 7.0 Theme: Tabbed Layout UI in Invoke - Community Roadmap Aug 24, 2026
@DustyShoe
DustyShoe marked this pull request as draft September 19, 2026 11:39
@github-actions github-actions Bot added the docs PRs that change docs label Sep 20, 2026
@DustyShoe
DustyShoe marked this pull request as ready for review September 20, 2026 23:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

7.0.0 docs PRs that change docs frontend PRs that change frontend files

Projects

Status: 7.0 Theme: Tabbed Layout UI

Development

Successfully merging this pull request may close these issues.

3 participants