@fieldnotes/core 0.3.0 → 0.4.0

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';
@@ -69,7 +74,16 @@ interface TextElement extends BaseElement {
     color: string;
     textAlign: 'left' | 'center' | 'right';
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement;
+type ShapeKind = 'rectangle' | 'ellipse';
+interface ShapeElement extends BaseElement {
+    type: 'shape';
+    shape: ShapeKind;
+    size: Size;
+    strokeColor: string;
+    strokeWidth: number;
+    fillColor: string;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
 type ElementType = CanvasElement['type'];
 
 interface CanvasState {
@@ -204,7 +218,7 @@ interface Tool {
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
 
 declare class ToolManager {
     private tools;
@@ -381,6 +395,7 @@ declare class Viewport {
     private onDrop;
     private syncDomNode;
     private renderDomContent;
+    private unbindArrowsFrom;
     private removeDomNode;
     private clearDomNodes;
     private createWrapper;
@@ -392,11 +407,17 @@ 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;
+    private renderShape;
+    private fillShapePath;
+    private strokeShapePath;
 }
 
 declare class NoteEditor {
@@ -441,6 +462,8 @@ interface ArrowInput extends BaseDefaults {
     bend?: number;
     color?: string;
     width?: number;
+    fromBinding?: Binding;
+    toBinding?: Binding;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -464,6 +487,15 @@ 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 ShapeInput extends BaseDefaults {
+    position: Point;
+    size: Size;
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare function createShape(input: ShapeInput): ShapeElement;
 declare function createText(input: TextInput): TextElement;
 
 interface Rect {
@@ -479,6 +511,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);
@@ -579,6 +621,7 @@ declare class SelectTool implements Tool {
     private getHandlePositions;
     private renderMarquee;
     private renderSelectionBoxes;
+    private renderBindingHighlights;
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
@@ -598,6 +641,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;
@@ -654,6 +700,35 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.3.0";
+interface ShapeToolOptions {
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare class ShapeTool implements Tool {
+    readonly name = "shape";
+    private drawing;
+    private start;
+    private end;
+    private shiftHeld;
+    private shape;
+    private strokeColor;
+    private strokeWidth;
+    private fillColor;
+    constructor(options?: ShapeToolOptions);
+    setOptions(options: ShapeToolOptions): 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;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private computeRect;
+    private onKeyDown;
+    private onKeyUp;
+}
+
+declare const VERSION = "0.4.0";
 
-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 TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, createText, 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 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 };

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';
@@ -69,7 +74,16 @@ interface TextElement extends BaseElement {
     color: string;
     textAlign: 'left' | 'center' | 'right';
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement;
+type ShapeKind = 'rectangle' | 'ellipse';
+interface ShapeElement extends BaseElement {
+    type: 'shape';
+    shape: ShapeKind;
+    size: Size;
+    strokeColor: string;
+    strokeWidth: number;
+    fillColor: string;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
 type ElementType = CanvasElement['type'];
 
 interface CanvasState {
@@ -204,7 +218,7 @@ interface Tool {
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
 
 declare class ToolManager {
     private tools;
@@ -381,6 +395,7 @@ declare class Viewport {
     private onDrop;
     private syncDomNode;
     private renderDomContent;
+    private unbindArrowsFrom;
     private removeDomNode;
     private clearDomNodes;
     private createWrapper;
@@ -392,11 +407,17 @@ 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;
+    private renderShape;
+    private fillShapePath;
+    private strokeShapePath;
 }
 
 declare class NoteEditor {
@@ -441,6 +462,8 @@ interface ArrowInput extends BaseDefaults {
     bend?: number;
     color?: string;
     width?: number;
+    fromBinding?: Binding;
+    toBinding?: Binding;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -464,6 +487,15 @@ 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 ShapeInput extends BaseDefaults {
+    position: Point;
+    size: Size;
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare function createShape(input: ShapeInput): ShapeElement;
 declare function createText(input: TextInput): TextElement;
 
 interface Rect {
@@ -479,6 +511,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);
@@ -579,6 +621,7 @@ declare class SelectTool implements Tool {
     private getHandlePositions;
     private renderMarquee;
     private renderSelectionBoxes;
+    private renderBindingHighlights;
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
@@ -598,6 +641,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;
@@ -654,6 +700,35 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.3.0";
+interface ShapeToolOptions {
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare class ShapeTool implements Tool {
+    readonly name = "shape";
+    private drawing;
+    private start;
+    private end;
+    private shiftHeld;
+    private shape;
+    private strokeColor;
+    private strokeWidth;
+    private fillColor;
+    constructor(options?: ShapeToolOptions);
+    setOptions(options: ShapeToolOptions): 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;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private computeRect;
+    private onKeyDown;
+    private onKeyUp;
+}
+
+declare const VERSION = "0.4.0";
 
-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 TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, createText, 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 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 };