@fieldnotes/core 0.2.3 → 0.3.1

package/dist/index.d.cts

@@ -44,6 +44,9 @@ interface NoteElement extends BaseElement {
     text: string;
     backgroundColor: string;
 }
+interface Binding {
+    elementId: string;
+}
 interface ArrowElement extends BaseElement {
     type: 'arrow';
     from: Point;
@@ -51,6 +54,8 @@ interface ArrowElement extends BaseElement {
     bend: number;
     color: string;
     width: number;
+    fromBinding?: Binding;
+    toBinding?: Binding;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -61,7 +66,15 @@ interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement;
+interface TextElement extends BaseElement {
+    type: 'text';
+    size: Size;
+    text: string;
+    fontSize: number;
+    color: string;
+    textAlign: 'left' | 'center' | 'right';
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement;
 type ElementType = CanvasElement['type'];
 
 interface CanvasState {
@@ -196,7 +209,7 @@ interface Tool {
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text';
 
 declare class ToolManager {
     private tools;
@@ -360,7 +373,8 @@ declare class Viewport {
     destroy(): void;
     private startRenderLoop;
     private render;
-    private startEditingNote;
+    private startEditingElement;
+    private onTextEditStop;
     private onDblClick;
     private hitTestWorld;
     private startInteracting;
@@ -372,6 +386,7 @@ declare class Viewport {
     private onDrop;
     private syncDomNode;
     private renderDomContent;
+    private unbindArrowsFrom;
     private removeDomNode;
     private clearDomNodes;
     private createWrapper;
@@ -383,11 +398,14 @@ declare class Viewport {
 }
 
 declare class ElementRenderer {
+    private store;
+    setStore(store: ElementStore): void;
     isDomElement(element: CanvasElement): boolean;
     renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
     private renderStroke;
     private renderArrow;
     private renderArrowhead;
+    private getVisualEndpoints;
 }
 
 declare class NoteEditor {
@@ -397,8 +415,10 @@ declare class NoteEditor {
     private keyHandler;
     private pointerHandler;
     private pendingEditId;
+    private onStopCallback;
     get isEditing(): boolean;
     get editingElementId(): string | null;
+    setOnStop(callback: (elementId: string) => void): void;
     startEditing(node: HTMLDivElement, elementId: string, store: ElementStore): void;
     stopEditing(store: ElementStore): void;
     destroy(store: ElementStore): void;
@@ -430,6 +450,8 @@ interface ArrowInput extends BaseDefaults {
     bend?: number;
     color?: string;
     width?: number;
+    fromBinding?: Binding;
+    toBinding?: Binding;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -440,11 +462,20 @@ interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
 }
+interface TextInput extends BaseDefaults {
+    position: Point;
+    size?: Size;
+    text?: string;
+    fontSize?: number;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+}
 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;
+declare function createText(input: TextInput): TextElement;
 
 interface Rect {
     x: number;
@@ -459,6 +490,16 @@ declare function getArrowTangentAngle(from: Point, to: Point, bend: number, t: n
 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 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 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;
+declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement>;
+
 declare class AddElementCommand implements Command {
     private readonly element;
     constructor(element: CanvasElement);
@@ -559,6 +600,7 @@ declare class SelectTool implements Tool {
     private getHandlePositions;
     private renderMarquee;
     private renderSelectionBoxes;
+    private renderBindingHighlights;
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
@@ -578,6 +620,9 @@ declare class ArrowTool implements Tool {
     private end;
     private color;
     private width;
+    private fromBinding;
+    private fromTarget;
+    private toTarget;
     constructor(options?: ArrowToolOptions);
     setOptions(options: ArrowToolOptions): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
@@ -601,6 +646,25 @@ declare class NoteTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
+interface TextToolOptions {
+    fontSize?: number;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+}
+declare class TextTool implements Tool {
+    readonly name = "text";
+    private fontSize;
+    private color;
+    private textAlign;
+    constructor(options?: TextToolOptions);
+    setOptions(options: TextToolOptions): void;
+    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 ImageToolOptions {
     size?: Size;
 }
@@ -615,6 +679,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.2.3";
+declare const VERSION = "0.3.1";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, 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 StrokePoint, 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 };
+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 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, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -44,6 +44,9 @@ interface NoteElement extends BaseElement {
     text: string;
     backgroundColor: string;
 }
+interface Binding {
+    elementId: string;
+}
 interface ArrowElement extends BaseElement {
     type: 'arrow';
     from: Point;
@@ -51,6 +54,8 @@ interface ArrowElement extends BaseElement {
     bend: number;
     color: string;
     width: number;
+    fromBinding?: Binding;
+    toBinding?: Binding;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -61,7 +66,15 @@ interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement;
+interface TextElement extends BaseElement {
+    type: 'text';
+    size: Size;
+    text: string;
+    fontSize: number;
+    color: string;
+    textAlign: 'left' | 'center' | 'right';
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement;
 type ElementType = CanvasElement['type'];
 
 interface CanvasState {
@@ -196,7 +209,7 @@ interface Tool {
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text';
 
 declare class ToolManager {
     private tools;
@@ -360,7 +373,8 @@ declare class Viewport {
     destroy(): void;
     private startRenderLoop;
     private render;
-    private startEditingNote;
+    private startEditingElement;
+    private onTextEditStop;
     private onDblClick;
     private hitTestWorld;
     private startInteracting;
@@ -372,6 +386,7 @@ declare class Viewport {
     private onDrop;
     private syncDomNode;
     private renderDomContent;
+    private unbindArrowsFrom;
     private removeDomNode;
     private clearDomNodes;
     private createWrapper;
@@ -383,11 +398,14 @@ declare class Viewport {
 }
 
 declare class ElementRenderer {
+    private store;
+    setStore(store: ElementStore): void;
     isDomElement(element: CanvasElement): boolean;
     renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
     private renderStroke;
     private renderArrow;
     private renderArrowhead;
+    private getVisualEndpoints;
 }
 
 declare class NoteEditor {
@@ -397,8 +415,10 @@ declare class NoteEditor {
     private keyHandler;
     private pointerHandler;
     private pendingEditId;
+    private onStopCallback;
     get isEditing(): boolean;
     get editingElementId(): string | null;
+    setOnStop(callback: (elementId: string) => void): void;
     startEditing(node: HTMLDivElement, elementId: string, store: ElementStore): void;
     stopEditing(store: ElementStore): void;
     destroy(store: ElementStore): void;
@@ -430,6 +450,8 @@ interface ArrowInput extends BaseDefaults {
     bend?: number;
     color?: string;
     width?: number;
+    fromBinding?: Binding;
+    toBinding?: Binding;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -440,11 +462,20 @@ interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
 }
+interface TextInput extends BaseDefaults {
+    position: Point;
+    size?: Size;
+    text?: string;
+    fontSize?: number;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+}
 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;
+declare function createText(input: TextInput): TextElement;
 
 interface Rect {
     x: number;
@@ -459,6 +490,16 @@ declare function getArrowTangentAngle(from: Point, to: Point, bend: number, t: n
 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 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 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;
+declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement>;
+
 declare class AddElementCommand implements Command {
     private readonly element;
     constructor(element: CanvasElement);
@@ -559,6 +600,7 @@ declare class SelectTool implements Tool {
     private getHandlePositions;
     private renderMarquee;
     private renderSelectionBoxes;
+    private renderBindingHighlights;
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
@@ -578,6 +620,9 @@ declare class ArrowTool implements Tool {
     private end;
     private color;
     private width;
+    private fromBinding;
+    private fromTarget;
+    private toTarget;
     constructor(options?: ArrowToolOptions);
     setOptions(options: ArrowToolOptions): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
@@ -601,6 +646,25 @@ declare class NoteTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
+interface TextToolOptions {
+    fontSize?: number;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+}
+declare class TextTool implements Tool {
+    readonly name = "text";
+    private fontSize;
+    private color;
+    private textAlign;
+    constructor(options?: TextToolOptions);
+    setOptions(options: TextToolOptions): void;
+    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 ImageToolOptions {
     size?: Size;
 }
@@ -615,6 +679,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.2.3";
+declare const VERSION = "0.3.1";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, 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 StrokePoint, 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 };
+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 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, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };