@fieldnotes/core 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,582 @@
+type Listener<T> = (data: T) => void;
+declare class EventBus<TEvents extends {
+    [K in keyof TEvents]: TEvents[K];
+}> {
+    private listeners;
+    on<K extends keyof TEvents>(event: K, listener: Listener<TEvents[K]>): () => void;
+    off<K extends keyof TEvents>(event: K, listener: Listener<TEvents[K]>): void;
+    emit<K extends keyof TEvents>(event: K, data: TEvents[K]): void;
+    clear(): void;
+}
+
+interface Point {
+    x: number;
+    y: number;
+}
+interface Size {
+    w: number;
+    h: number;
+}
+type Bounds = Point & Size;
+
+interface BaseElement {
+    id: string;
+    type: string;
+    position: Point;
+    zIndex: number;
+    locked: boolean;
+}
+interface StrokeElement extends BaseElement {
+    type: 'stroke';
+    points: Point[];
+    color: string;
+    width: number;
+    opacity: number;
+}
+interface NoteElement extends BaseElement {
+    type: 'note';
+    size: Size;
+    text: string;
+    backgroundColor: string;
+}
+interface ArrowElement extends BaseElement {
+    type: 'arrow';
+    from: Point;
+    to: Point;
+    bend: number;
+    color: string;
+    width: number;
+}
+interface ImageElement extends BaseElement {
+    type: 'image';
+    size: Size;
+    src: string;
+}
+interface HtmlElement extends BaseElement {
+    type: 'html';
+    size: Size;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement;
+type ElementType = CanvasElement['type'];
+
+interface CanvasState {
+    version: number;
+    camera: {
+        position: Point;
+        zoom: number;
+    };
+    elements: CanvasElement[];
+}
+declare function exportState(elements: CanvasElement[], camera: {
+    position: Point;
+    zoom: number;
+}): CanvasState;
+declare function parseState(json: string): CanvasState;
+
+interface CameraOptions {
+    minZoom?: number;
+    maxZoom?: number;
+}
+declare class Camera {
+    private x;
+    private y;
+    private z;
+    private readonly minZoom;
+    private readonly maxZoom;
+    private changeListeners;
+    constructor(options?: CameraOptions);
+    get position(): Point;
+    get zoom(): number;
+    pan(dx: number, dy: number): void;
+    moveTo(x: number, y: number): void;
+    setZoom(level: number): void;
+    zoomAt(level: number, screenPoint: Point): void;
+    screenToWorld(screen: Point): Point;
+    worldToScreen(world: Point): Point;
+    toCSSTransform(): string;
+    onChange(listener: () => void): () => void;
+    private notifyChange;
+}
+
+type BackgroundPattern = 'dots' | 'grid' | 'none';
+interface BackgroundOptions {
+    pattern?: BackgroundPattern;
+    spacing?: number;
+    color?: string;
+    dotRadius?: number;
+    lineWidth?: number;
+}
+declare class Background {
+    private readonly pattern;
+    private readonly spacing;
+    private readonly color;
+    private readonly dotRadius;
+    private readonly lineWidth;
+    constructor(options?: BackgroundOptions);
+    render(ctx: CanvasRenderingContext2D, camera: Camera): void;
+    private renderDots;
+    private renderGrid;
+}
+
+interface ElementUpdateEvent {
+    previous: CanvasElement;
+    current: CanvasElement;
+}
+interface ElementStoreEvents {
+    add: CanvasElement;
+    remove: CanvasElement;
+    update: ElementUpdateEvent;
+    clear: null;
+}
+declare class ElementStore {
+    private elements;
+    private bus;
+    get count(): number;
+    getAll(): CanvasElement[];
+    getById(id: string): CanvasElement | undefined;
+    getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
+        type: T;
+    }>[];
+    add(element: CanvasElement): void;
+    update(id: string, partial: Partial<CanvasElement>): void;
+    remove(id: string): void;
+    clear(): void;
+    snapshot(): CanvasElement[];
+    loadSnapshot(elements: CanvasElement[]): void;
+    on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
+}
+
+interface ToolContext {
+    camera: Camera;
+    store: ElementStore;
+    requestRender: () => void;
+    switchTool?: (name: string) => void;
+    editElement?: (id: string) => void;
+    setCursor?: (cursor: string) => void;
+}
+interface PointerState {
+    x: number;
+    y: number;
+    pressure: number;
+}
+interface Tool {
+    readonly name: string;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(state: PointerState, ctx: ToolContext): void;
+    onHover?(state: PointerState, ctx: ToolContext): void;
+    onActivate?(ctx: ToolContext): void;
+    onDeactivate?(ctx: ToolContext): void;
+    renderOverlay?(ctx: CanvasRenderingContext2D): void;
+}
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image';
+
+declare class ToolManager {
+    private tools;
+    private current;
+    private changeListeners;
+    get activeTool(): Tool | null;
+    get toolNames(): string[];
+    register(tool: Tool): void;
+    setTool(name: string, ctx: ToolContext): void;
+    handlePointerDown(state: PointerState, ctx: ToolContext): void;
+    handlePointerMove(state: PointerState, ctx: ToolContext): void;
+    handlePointerUp(state: PointerState, ctx: ToolContext): void;
+    onChange(listener: (name: string) => void): () => void;
+}
+
+interface Command {
+    execute(store: ElementStore): void;
+    undo(store: ElementStore): void;
+}
+
+interface HistoryStackOptions {
+    maxSize?: number;
+}
+declare class HistoryStack {
+    private undoStack;
+    private redoStack;
+    private readonly maxSize;
+    private changeListeners;
+    constructor(options?: HistoryStackOptions);
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    get undoCount(): number;
+    get redoCount(): number;
+    push(command: Command): void;
+    undo(store: ElementStore): boolean;
+    redo(store: ElementStore): boolean;
+    clear(): void;
+    onChange(listener: () => void): () => void;
+    private notifyChange;
+}
+
+declare class HistoryRecorder {
+    private readonly store;
+    private readonly stack;
+    private recording;
+    private transaction;
+    private updateSnapshots;
+    private unsubscribers;
+    constructor(store: ElementStore, stack: HistoryStack);
+    pause(): void;
+    resume(): void;
+    begin(): void;
+    commit(): void;
+    rollback(): void;
+    destroy(): void;
+    private record;
+    private onAdd;
+    private onRemove;
+    private onUpdate;
+    private flushUpdateSnapshots;
+}
+
+interface InputHandlerOptions {
+    toolManager?: ToolManager;
+    toolContext?: ToolContext;
+    historyRecorder?: HistoryRecorder;
+    historyStack?: HistoryStack;
+}
+declare class InputHandler {
+    private readonly element;
+    private readonly camera;
+    private isPanning;
+    private lastPointer;
+    private spaceHeld;
+    private activePointers;
+    private lastPinchDistance;
+    private lastPinchCenter;
+    private toolManager;
+    private toolContext;
+    private historyRecorder;
+    private historyStack;
+    private isToolActive;
+    private readonly abortController;
+    constructor(element: HTMLElement, camera: Camera, options?: InputHandlerOptions);
+    setToolManager(toolManager: ToolManager, toolContext: ToolContext): void;
+    destroy(): void;
+    private bind;
+    private onWheel;
+    private isInteractiveHtmlContent;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onKeyDown;
+    private onKeyUp;
+    private startPinch;
+    private handlePinchMove;
+    private getPinchPoints;
+    private distance;
+    private midpoint;
+    private toPointerState;
+    private dispatchToolDown;
+    private dispatchToolMove;
+    private dispatchToolHover;
+    private dispatchToolUp;
+    private deleteSelected;
+    private handleUndo;
+    private handleRedo;
+    private cancelToolIfActive;
+}
+
+interface ViewportOptions {
+    camera?: CameraOptions;
+    background?: BackgroundOptions;
+}
+declare class Viewport {
+    private readonly container;
+    readonly camera: Camera;
+    readonly store: ElementStore;
+    readonly toolManager: ToolManager;
+    readonly history: HistoryStack;
+    readonly domLayer: HTMLDivElement;
+    private readonly canvasEl;
+    private readonly wrapper;
+    private readonly unsubCamera;
+    private readonly unsubStore;
+    private readonly inputHandler;
+    private readonly background;
+    private readonly renderer;
+    private readonly noteEditor;
+    private readonly historyRecorder;
+    readonly toolContext: ToolContext;
+    private resizeObserver;
+    private animFrameId;
+    private needsRender;
+    private domNodes;
+    private htmlContent;
+    constructor(container: HTMLElement, options?: ViewportOptions);
+    get ctx(): CanvasRenderingContext2D | null;
+    requestRender(): void;
+    exportState(): CanvasState;
+    exportJSON(): string;
+    loadState(state: CanvasState): void;
+    loadJSON(json: string): void;
+    undo(): boolean;
+    redo(): boolean;
+    addImage(src: string, position: {
+        x: number;
+        y: number;
+    }, size?: {
+        w: number;
+        h: number;
+    }): void;
+    addHtmlElement(dom: HTMLElement, position: {
+        x: number;
+        y: number;
+    }, size?: {
+        w: number;
+        h: number;
+    }): string;
+    destroy(): void;
+    private startRenderLoop;
+    private render;
+    private startEditingNote;
+    private onDblClick;
+    private onDragOver;
+    private onDrop;
+    private syncDomNode;
+    private renderDomContent;
+    private removeDomNode;
+    private clearDomNodes;
+    private createWrapper;
+    private createCanvas;
+    private createDomLayer;
+    private applyCameraTransform;
+    private syncCanvasSize;
+    private observeResize;
+}
+
+declare class ElementRenderer {
+    isDomElement(element: CanvasElement): boolean;
+    renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
+    private renderStroke;
+    private renderArrow;
+    private renderArrowhead;
+}
+
+declare class NoteEditor {
+    private editingId;
+    private editingNode;
+    private blurHandler;
+    private keyHandler;
+    private pointerHandler;
+    private pendingEditId;
+    get isEditing(): boolean;
+    get editingElementId(): string | null;
+    startEditing(node: HTMLDivElement, elementId: string, store: ElementStore): void;
+    stopEditing(store: ElementStore): void;
+    destroy(store: ElementStore): void;
+    private activateEditing;
+}
+
+declare function createId(prefix: string): string;
+
+interface BaseDefaults {
+    position?: Point;
+    zIndex?: number;
+    locked?: boolean;
+}
+interface StrokeInput extends BaseDefaults {
+    points: Point[];
+    color?: string;
+    width?: number;
+    opacity?: number;
+}
+interface NoteInput extends BaseDefaults {
+    position: Point;
+    size?: Size;
+    text?: string;
+    backgroundColor?: string;
+}
+interface ArrowInput extends BaseDefaults {
+    from: Point;
+    to: Point;
+    bend?: number;
+    color?: string;
+    width?: number;
+}
+interface ImageInput extends BaseDefaults {
+    position: Point;
+    size: Size;
+    src: string;
+}
+interface HtmlInput extends BaseDefaults {
+    position: Point;
+    size: Size;
+}
+declare function createStroke(input: StrokeInput): StrokeElement;
+declare function createNote(input: NoteInput): NoteElement;
+declare function createArrow(input: ArrowInput): ArrowElement;
+declare function createImage(input: ImageInput): ImageElement;
+declare function createHtmlElement(input: HtmlInput): HtmlElement;
+
+interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+declare function getArrowControlPoint(from: Point, to: Point, bend: number): Point;
+declare function getArrowMidpoint(from: Point, to: Point, bend: number): Point;
+declare function getBendFromPoint(from: Point, to: Point, dragPoint: Point): number;
+declare function getArrowTangentAngle(from: Point, to: Point, bend: number, t: number): number;
+declare function isNearBezier(point: Point, from: Point, to: Point, bend: number, threshold: number): boolean;
+declare function getArrowBounds(from: Point, to: Point, bend: number): Rect;
+
+declare class AddElementCommand implements Command {
+    private readonly element;
+    constructor(element: CanvasElement);
+    execute(store: ElementStore): void;
+    undo(store: ElementStore): void;
+}
+declare class RemoveElementCommand implements Command {
+    private readonly element;
+    constructor(element: CanvasElement);
+    execute(store: ElementStore): void;
+    undo(store: ElementStore): void;
+}
+declare class UpdateElementCommand implements Command {
+    private readonly id;
+    private readonly previous;
+    private readonly current;
+    constructor(id: string, previous: CanvasElement, current: CanvasElement);
+    execute(store: ElementStore): void;
+    undo(store: ElementStore): void;
+}
+declare class BatchCommand implements Command {
+    readonly commands: readonly Command[];
+    constructor(commands: Command[]);
+    execute(store: ElementStore): void;
+    undo(store: ElementStore): void;
+}
+
+declare class HandTool implements Tool {
+    readonly name = "hand";
+    private panning;
+    private lastScreen;
+    onActivate(ctx: ToolContext): void;
+    onDeactivate(ctx: ToolContext): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+}
+
+interface PencilToolOptions {
+    color?: string;
+    width?: number;
+}
+declare class PencilTool implements Tool {
+    readonly name = "pencil";
+    private drawing;
+    private points;
+    private color;
+    private width;
+    constructor(options?: PencilToolOptions);
+    onActivate(ctx: ToolContext): void;
+    onDeactivate(ctx: ToolContext): void;
+    setOptions(options: PencilToolOptions): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+}
+
+interface EraserToolOptions {
+    radius?: number;
+}
+declare class EraserTool implements Tool {
+    readonly name = "eraser";
+    private erasing;
+    private readonly radius;
+    private readonly cursor;
+    constructor(options?: EraserToolOptions);
+    onActivate(ctx: ToolContext): void;
+    onDeactivate(ctx: ToolContext): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, _ctx: ToolContext): void;
+    private eraseAt;
+    private strokeIntersects;
+}
+
+declare class SelectTool implements Tool {
+    readonly name = "select";
+    private _selectedIds;
+    private mode;
+    private lastWorld;
+    private currentWorld;
+    private ctx;
+    get selectedIds(): string[];
+    get isMarqueeActive(): boolean;
+    onActivate(ctx: ToolContext): void;
+    onDeactivate(ctx: ToolContext): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    onHover(state: PointerState, ctx: ToolContext): void;
+    renderOverlay(canvasCtx: CanvasRenderingContext2D): void;
+    private updateHoverCursor;
+    private handleResize;
+    private hitTestResizeHandle;
+    private getHandlePositions;
+    private renderMarquee;
+    private renderSelectionBoxes;
+    private getMarqueeRect;
+    private findElementsInRect;
+    private rectsOverlap;
+    private getElementBounds;
+    private hitTest;
+    private isInsideBounds;
+}
+
+interface ArrowToolOptions {
+    color?: string;
+    width?: number;
+}
+declare class ArrowTool implements Tool {
+    readonly name = "arrow";
+    private drawing;
+    private start;
+    private end;
+    private color;
+    private width;
+    constructor(options?: ArrowToolOptions);
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+}
+
+interface NoteToolOptions {
+    backgroundColor?: string;
+    size?: Size;
+}
+declare class NoteTool implements Tool {
+    readonly name = "note";
+    private backgroundColor;
+    private size;
+    constructor(options?: NoteToolOptions);
+    onPointerDown(_state: PointerState, _ctx: ToolContext): void;
+    onPointerMove(_state: PointerState, _ctx: ToolContext): void;
+    onPointerUp(state: PointerState, ctx: ToolContext): void;
+}
+
+interface ImageToolOptions {
+    size?: Size;
+}
+declare class ImageTool implements Tool {
+    readonly name = "image";
+    private size;
+    private src;
+    constructor(options?: ImageToolOptions);
+    setSrc(src: string): void;
+    onPointerDown(_state: PointerState, _ctx: ToolContext): void;
+    onPointerMove(_state: PointerState, _ctx: ToolContext): void;
+    onPointerUp(state: PointerState, ctx: ToolContext): void;
+}
+
+declare const VERSION = "0.1.0";
+
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, 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 Size, type StrokeElement, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, exportState, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, isNearBezier, parseState };