feat(phase-13): implement layer masks foundation for non-destructive editing

Add comprehensive layer mask system with core functionality for non-destructive editing.

Features:
- LayerMask interface with canvas, enabled, and inverted properties
- Layer interface updated with mask property
- Full mask management in layer store:
  * addMask() - Creates white mask (fully visible)
  * removeMask() - Removes mask from layer
  * toggleMask() - Enable/disable mask
  * invertMask() - Invert mask values
  * applyMask() - Apply mask to layer and remove
- Duplicate layer now clones masks
- Grayscale mask system (white=reveal, black=hide)

Changes:
- Updated types/layer.ts with LayerMask interface
- Modified Layer interface to include mask property
- Updated store/layer-store.ts:
  * Added mask property initialization to createLayer
  * Added 5 new mask management functions
  * Updated duplicateLayer to clone masks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-21 19:57:49 +01:00
parent 841d6ca0a5
commit 4ddb8fe0e3
2 changed files with 128 additions and 0 deletions

View File

@@ -19,6 +19,18 @@ export type BlendMode =
| 'color'
| 'luminosity';
/**
* Layer mask data
*/
export interface LayerMask {
/** Canvas element containing the mask's grayscale data */
canvas: HTMLCanvasElement | null;
/** Whether the mask is currently enabled */
enabled: boolean;
/** Whether to invert the mask (white=hide, black=reveal) */
inverted: boolean;
}
/**
* Layer interface representing a single layer in the canvas
*/
@@ -45,6 +57,8 @@ export interface Layer {
/** Position offset */
x: number;
y: number;
/** Layer mask for non-destructive editing */
mask: LayerMask | null;
/** Timestamp of creation */
createdAt: number;
/** Timestamp of last modification */