@fieldnotes/core 0.4.1 → 0.6.0

package/dist/index.d.cts

@@ -30,6 +30,7 @@ interface BaseElement {
     position: Point;
     zIndex: number;
     locked: boolean;
+    layerId: string;
 }
 interface StrokeElement extends BaseElement {
     type: 'stroke';
@@ -87,6 +88,15 @@ interface ShapeElement extends BaseElement {
 type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
 type ElementType = CanvasElement['type'];
 
+interface Layer {
+    id: string;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    order: number;
+    opacity: number;
+}
+
 interface CanvasState {
     version: number;
     camera: {
@@ -94,13 +104,16 @@ interface CanvasState {
         zoom: number;
     };
     elements: CanvasElement[];
+    layers?: Layer[];
 }
 declare function exportState(elements: CanvasElement[], camera: {
     position: Point;
     zoom: number;
-}): CanvasState;
+}, layers?: Layer[]): CanvasState;
 declare function parseState(json: string): CanvasState;
 
+declare function snapPoint(point: Point, gridSize: number): Point;
+
 interface ElementUpdateEvent {
     previous: CanvasElement;
     current: CanvasElement;
@@ -114,7 +127,9 @@ interface ElementStoreEvents {
 declare class ElementStore {
     private elements;
     private bus;
+    private layerOrderMap;
     get count(): number;
+    setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
     getById(id: string): CanvasElement | undefined;
     getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
@@ -154,15 +169,47 @@ declare class Camera {
     private notifyChange;
 }
 
+declare class LayerManager {
+    private readonly store;
+    private layers;
+    private _activeLayerId;
+    private bus;
+    constructor(store: ElementStore);
+    get activeLayer(): Layer;
+    get activeLayerId(): string;
+    getLayers(): Layer[];
+    getLayer(id: string): Layer | undefined;
+    isLayerVisible(id: string): boolean;
+    isLayerLocked(id: string): boolean;
+    createLayer(name?: string): Layer;
+    removeLayer(id: string): void;
+    renameLayer(id: string, name: string): void;
+    reorderLayer(id: string, newOrder: number): void;
+    setLayerVisible(id: string, visible: boolean): boolean;
+    setLayerLocked(id: string, locked: boolean): boolean;
+    setActiveLayer(id: string): void;
+    moveElementToLayer(elementId: string, layerId: string): void;
+    snapshot(): Layer[];
+    loadSnapshot(layers: Layer[]): void;
+    on(event: 'change', callback: () => void): () => void;
+    addLayerDirect(layer: Layer): void;
+    removeLayerDirect(id: string): void;
+    updateLayerDirect(id: string, props: Omit<Partial<Layer>, 'id'>): void;
+    private syncLayerOrder;
+    private findFallbackLayer;
+}
+
 interface AutoSaveOptions {
     key?: string;
     debounceMs?: number;
+    layerManager?: LayerManager;
 }
 declare class AutoSave {
     private readonly store;
     private readonly camera;
     private readonly key;
     private readonly debounceMs;
+    private readonly layerManager?;
     private timerId;
     private unsubscribers;
     constructor(store: ElementStore, camera: Camera, options?: AutoSaveOptions);
@@ -203,6 +250,11 @@ interface ToolContext {
     switchTool?: (name: string) => void;
     editElement?: (id: string) => void;
     setCursor?: (cursor: string) => void;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    activeLayerId?: string;
+    isLayerVisible?: (layerId: string) => boolean;
+    isLayerLocked?: (layerId: string) => boolean;
 }
 interface PointerState {
     x: number;
@@ -338,6 +390,7 @@ declare class Viewport {
     private readonly container;
     readonly camera: Camera;
     readonly store: ElementStore;
+    readonly layerManager: LayerManager;
     readonly toolManager: ToolManager;
     readonly history: HistoryStack;
     readonly domLayer: HTMLDivElement;
@@ -353,12 +406,16 @@ declare class Viewport {
     readonly toolContext: ToolContext;
     private resizeObserver;
     private animFrameId;
+    private _snapToGrid;
+    private readonly _gridSize;
     private needsRender;
     private domNodes;
     private htmlContent;
     private interactingElementId;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
+    get snapToGrid(): boolean;
+    setSnapToGrid(enabled: boolean): void;
     requestRender(): void;
     exportState(): CanvasState;
     exportJSON(): string;
@@ -397,6 +454,7 @@ declare class Viewport {
     private syncDomNode;
     private renderDomContent;
     private unbindArrowsFrom;
+    private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
     private createWrapper;
@@ -409,7 +467,10 @@ declare class Viewport {
 
 declare class ElementRenderer {
     private store;
+    private imageCache;
+    private onImageLoad;
     setStore(store: ElementStore): void;
+    setOnImageLoad(callback: () => void): void;
     isDomElement(element: CanvasElement): boolean;
     renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
     private renderStroke;
@@ -419,6 +480,8 @@ declare class ElementRenderer {
     private renderShape;
     private fillShapePath;
     private strokeShapePath;
+    private renderImage;
+    private getImage;
 }
 
 declare class NoteEditor {
@@ -444,6 +507,7 @@ interface BaseDefaults {
     position?: Point;
     zIndex?: number;
     locked?: boolean;
+    layerId?: string;
 }
 interface StrokeInput extends BaseDefaults {
     points: StrokePoint[];
@@ -517,7 +581,7 @@ declare function isBindable(element: CanvasElement): boolean;
 declare function getElementCenter(element: CanvasElement): Point;
 declare function getElementBounds(element: CanvasElement): Rect | null;
 declare function getEdgeIntersection(bounds: Rect, outsidePoint: Point): Point;
-declare function findBindTarget(point: Point, store: ElementStore, threshold: number, excludeId?: string): CanvasElement | null;
+declare function findBindTarget(point: Point, store: ElementStore, threshold: number, excludeId?: string, filter?: (el: CanvasElement) => boolean): CanvasElement | null;
 declare function findBoundArrows(elementId: string, store: ElementStore): ArrowElement[];
 declare function updateBoundArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement> | null;
 declare function clearStaleBindings(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement> | null;
@@ -612,6 +676,7 @@ declare class SelectTool implements Tool {
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
+    private snap;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -648,6 +713,7 @@ declare class ArrowTool implements Tool {
     private toTarget;
     constructor(options?: ArrowToolOptions);
     setOptions(options: ArrowToolOptions): void;
+    private layerFilter;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -729,10 +795,35 @@ declare class ShapeTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
     private computeRect;
+    private snap;
     private onKeyDown;
     private onKeyUp;
 }
 
-declare const VERSION = "0.4.1";
+declare class CreateLayerCommand implements Command {
+    private readonly manager;
+    private readonly layer;
+    constructor(manager: LayerManager, layer: Layer);
+    execute(_store: ElementStore): void;
+    undo(_store: ElementStore): void;
+}
+declare class RemoveLayerCommand implements Command {
+    private readonly manager;
+    private readonly layer;
+    constructor(manager: LayerManager, layer: Layer);
+    execute(_store: ElementStore): void;
+    undo(_store: ElementStore): void;
+}
+declare class UpdateLayerCommand implements Command {
+    private readonly manager;
+    private readonly layerId;
+    private readonly previous;
+    private readonly current;
+    constructor(manager: LayerManager, layerId: string, previous: Layer, current: Layer);
+    execute(_store: ElementStore): void;
+    undo(_store: ElementStore): void;
+}
+
+declare const VERSION = "0.6.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -30,6 +30,7 @@ interface BaseElement {
     position: Point;
     zIndex: number;
     locked: boolean;
+    layerId: string;
 }
 interface StrokeElement extends BaseElement {
     type: 'stroke';
@@ -87,6 +88,15 @@ interface ShapeElement extends BaseElement {
 type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
 type ElementType = CanvasElement['type'];
 
+interface Layer {
+    id: string;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    order: number;
+    opacity: number;
+}
+
 interface CanvasState {
     version: number;
     camera: {
@@ -94,13 +104,16 @@ interface CanvasState {
         zoom: number;
     };
     elements: CanvasElement[];
+    layers?: Layer[];
 }
 declare function exportState(elements: CanvasElement[], camera: {
     position: Point;
     zoom: number;
-}): CanvasState;
+}, layers?: Layer[]): CanvasState;
 declare function parseState(json: string): CanvasState;
 
+declare function snapPoint(point: Point, gridSize: number): Point;
+
 interface ElementUpdateEvent {
     previous: CanvasElement;
     current: CanvasElement;
@@ -114,7 +127,9 @@ interface ElementStoreEvents {
 declare class ElementStore {
     private elements;
     private bus;
+    private layerOrderMap;
     get count(): number;
+    setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
     getById(id: string): CanvasElement | undefined;
     getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
@@ -154,15 +169,47 @@ declare class Camera {
     private notifyChange;
 }
 
+declare class LayerManager {
+    private readonly store;
+    private layers;
+    private _activeLayerId;
+    private bus;
+    constructor(store: ElementStore);
+    get activeLayer(): Layer;
+    get activeLayerId(): string;
+    getLayers(): Layer[];
+    getLayer(id: string): Layer | undefined;
+    isLayerVisible(id: string): boolean;
+    isLayerLocked(id: string): boolean;
+    createLayer(name?: string): Layer;
+    removeLayer(id: string): void;
+    renameLayer(id: string, name: string): void;
+    reorderLayer(id: string, newOrder: number): void;
+    setLayerVisible(id: string, visible: boolean): boolean;
+    setLayerLocked(id: string, locked: boolean): boolean;
+    setActiveLayer(id: string): void;
+    moveElementToLayer(elementId: string, layerId: string): void;
+    snapshot(): Layer[];
+    loadSnapshot(layers: Layer[]): void;
+    on(event: 'change', callback: () => void): () => void;
+    addLayerDirect(layer: Layer): void;
+    removeLayerDirect(id: string): void;
+    updateLayerDirect(id: string, props: Omit<Partial<Layer>, 'id'>): void;
+    private syncLayerOrder;
+    private findFallbackLayer;
+}
+
 interface AutoSaveOptions {
     key?: string;
     debounceMs?: number;
+    layerManager?: LayerManager;
 }
 declare class AutoSave {
     private readonly store;
     private readonly camera;
     private readonly key;
     private readonly debounceMs;
+    private readonly layerManager?;
     private timerId;
     private unsubscribers;
     constructor(store: ElementStore, camera: Camera, options?: AutoSaveOptions);
@@ -203,6 +250,11 @@ interface ToolContext {
     switchTool?: (name: string) => void;
     editElement?: (id: string) => void;
     setCursor?: (cursor: string) => void;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    activeLayerId?: string;
+    isLayerVisible?: (layerId: string) => boolean;
+    isLayerLocked?: (layerId: string) => boolean;
 }
 interface PointerState {
     x: number;
@@ -338,6 +390,7 @@ declare class Viewport {
     private readonly container;
     readonly camera: Camera;
     readonly store: ElementStore;
+    readonly layerManager: LayerManager;
     readonly toolManager: ToolManager;
     readonly history: HistoryStack;
     readonly domLayer: HTMLDivElement;
@@ -353,12 +406,16 @@ declare class Viewport {
     readonly toolContext: ToolContext;
     private resizeObserver;
     private animFrameId;
+    private _snapToGrid;
+    private readonly _gridSize;
     private needsRender;
     private domNodes;
     private htmlContent;
     private interactingElementId;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
+    get snapToGrid(): boolean;
+    setSnapToGrid(enabled: boolean): void;
     requestRender(): void;
     exportState(): CanvasState;
     exportJSON(): string;
@@ -397,6 +454,7 @@ declare class Viewport {
     private syncDomNode;
     private renderDomContent;
     private unbindArrowsFrom;
+    private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
     private createWrapper;
@@ -409,7 +467,10 @@ declare class Viewport {
 
 declare class ElementRenderer {
     private store;
+    private imageCache;
+    private onImageLoad;
     setStore(store: ElementStore): void;
+    setOnImageLoad(callback: () => void): void;
     isDomElement(element: CanvasElement): boolean;
     renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
     private renderStroke;
@@ -419,6 +480,8 @@ declare class ElementRenderer {
     private renderShape;
     private fillShapePath;
     private strokeShapePath;
+    private renderImage;
+    private getImage;
 }
 
 declare class NoteEditor {
@@ -444,6 +507,7 @@ interface BaseDefaults {
     position?: Point;
     zIndex?: number;
     locked?: boolean;
+    layerId?: string;
 }
 interface StrokeInput extends BaseDefaults {
     points: StrokePoint[];
@@ -517,7 +581,7 @@ declare function isBindable(element: CanvasElement): boolean;
 declare function getElementCenter(element: CanvasElement): Point;
 declare function getElementBounds(element: CanvasElement): Rect | null;
 declare function getEdgeIntersection(bounds: Rect, outsidePoint: Point): Point;
-declare function findBindTarget(point: Point, store: ElementStore, threshold: number, excludeId?: string): CanvasElement | null;
+declare function findBindTarget(point: Point, store: ElementStore, threshold: number, excludeId?: string, filter?: (el: CanvasElement) => boolean): CanvasElement | null;
 declare function findBoundArrows(elementId: string, store: ElementStore): ArrowElement[];
 declare function updateBoundArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement> | null;
 declare function clearStaleBindings(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement> | null;
@@ -612,6 +676,7 @@ declare class SelectTool implements Tool {
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
+    private snap;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -648,6 +713,7 @@ declare class ArrowTool implements Tool {
     private toTarget;
     constructor(options?: ArrowToolOptions);
     setOptions(options: ArrowToolOptions): void;
+    private layerFilter;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -729,10 +795,35 @@ declare class ShapeTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
     private computeRect;
+    private snap;
     private onKeyDown;
     private onKeyUp;
 }
 
-declare const VERSION = "0.4.1";
+declare class CreateLayerCommand implements Command {
+    private readonly manager;
+    private readonly layer;
+    constructor(manager: LayerManager, layer: Layer);
+    execute(_store: ElementStore): void;
+    undo(_store: ElementStore): void;
+}
+declare class RemoveLayerCommand implements Command {
+    private readonly manager;
+    private readonly layer;
+    constructor(manager: LayerManager, layer: Layer);
+    execute(_store: ElementStore): void;
+    undo(_store: ElementStore): void;
+}
+declare class UpdateLayerCommand implements Command {
+    private readonly manager;
+    private readonly layerId;
+    private readonly previous;
+    private readonly current;
+    constructor(manager: LayerManager, layerId: string, previous: Layer, current: Layer);
+    execute(_store: ElementStore): void;
+    undo(_store: ElementStore): void;
+}
+
+declare const VERSION = "0.6.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };