Dev

[NiceArti]

Summary

Adds a complete effects system for shape nodes, including drop shadows, inner shadows, layer blur, and background blur.

Motivation

Shape nodes previously lacked a unified way to apply common visual effects. This change introduces a reusable effects API and renderer architecture that supports the core effects required by modern canvas-based editors.

Changes

• Added public APIs and types for creating, updating, ordering, enabling, disabling, and removing shape effects.
• Added support for DropShadow, InnerShadow, LayerBlur, and BackgroundBlur.
• Implemented dedicated Konva renderers and effect layers with correct composition of fill, stroke, and shadows.
• Added reusable shadow geometry for rendering outer and inner shadows from shape paths.
• Added layer blur for blurring the complete rendered content of a node.
• Added backdrop capture and shape-based masking for background blur.
• Reused the existing shape path renderer for background-blur masks without coupling it to the shadow pipeline.
• Updated effect bounds and renderer lifecycle behavior.
• Added Playground examples for testing effects individually and in combination.

Testing

The effects were tested manually in the Playground with different shapes, transforms, fills, strokes, and effect combinations.

The following behavior was verified:

• Drop shadows render outside the shape.
• Inner shadows remain clipped to the shape geometry.
• Layer blur affects the complete visual content of the node.
• Background blur affects only content behind the node while its fill, stroke, and shadows remain sharp.
• Multiple effects preserve their configured order.
• Disabled and removed effects are no longer rendered.
• Effect changes are reflected immediately.
• Background blur updates when underlying scene content changes.
• Effects remain aligned while nodes are moved, scaled, and rotated.

Public API

• No public API changes
• Public API was added or changed
• Breaking change

Added the shape-effects API and the public types required to configure:

• drop shadows;
• inner shadows;
• layer blur;
• background blur.

The API allows effects to be added, inspected, updated, reordered, enabled, disabled, and removed from shape nodes.

Visual changes

Shape nodes can now render drop shadows, inner shadows, layer blur, and background blur.

Screenshots or recordings from the Playground should be added to demonstrate the effects individually and in combination.

Checklist

• The project builds successfully
• Type checking passes
• Linting passes
• Tests pass
• Relevant behavior was tested in the Playground
• New behavior has tests where practical
• Documentation was updated where necessary
• CHANGELOG.md was updated where necessary
• No unrelated refactoring was included