@fieldnotes/core 0.8.5 → 0.8.7

package/dist/index.d.cts

@@ -24,6 +24,20 @@ interface Size {
 }
 type Bounds = Point & Size;
 
+declare class Quadtree {
+    private root;
+    private _size;
+    private readonly worldBounds;
+    constructor(worldBounds: Bounds);
+    get size(): number;
+    insert(id: string, bounds: Bounds): void;
+    remove(id: string): void;
+    update(id: string, newBounds: Bounds): void;
+    query(rect: Bounds): string[];
+    queryPoint(point: Point): string[];
+    clear(): void;
+}
+
 interface BaseElement {
     id: string;
     type: string;
@@ -139,6 +153,7 @@ declare class ElementStore {
     private elements;
     private bus;
     private layerOrderMap;
+    private spatialIndex;
     get count(): number;
     setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
@@ -152,13 +167,20 @@ declare class ElementStore {
     clear(): void;
     snapshot(): CanvasElement[];
     loadSnapshot(elements: CanvasElement[]): void;
+    queryRect(rect: Bounds): CanvasElement[];
+    queryPoint(point: Point): CanvasElement[];
     on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
+    onChange(listener: () => void): () => void;
 }
 
 interface CameraOptions {
     minZoom?: number;
     maxZoom?: number;
 }
+interface CameraChangeInfo {
+    panned: boolean;
+    zoomed: boolean;
+}
 declare class Camera {
     private x;
     private y;
@@ -175,9 +197,12 @@ declare class Camera {
     zoomAt(level: number, screenPoint: Point): void;
     screenToWorld(screen: Point): Point;
     worldToScreen(world: Point): Point;
+    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
     toCSSTransform(): string;
-    onChange(listener: () => void): () => void;
-    private notifyChange;
+    onChange(listener: (info: CameraChangeInfo) => void): () => void;
+    private notifyPan;
+    private notifyZoom;
+    private notifyPanAndZoom;
 }
 
 declare class LayerManager {
@@ -198,6 +223,7 @@ declare class LayerManager {
     reorderLayer(id: string, newOrder: number): void;
     setLayerVisible(id: string, visible: boolean): boolean;
     setLayerLocked(id: string, locked: boolean): boolean;
+    setLayerOpacity(id: string, opacity: number): void;
     setActiveLayer(id: string): void;
     moveElementToLayer(elementId: string, layerId: string): void;
     snapshot(): Layer[];
@@ -281,6 +307,9 @@ interface Tool {
     onActivate?(ctx: ToolContext): void;
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
+    getOptions?(): object;
+    setOptions?(options: object): void;
+    onOptionsChange?(listener: () => void): () => void;
 }
 type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
 
@@ -424,13 +453,11 @@ declare class Viewport {
     private readonly historyRecorder;
     readonly toolContext: ToolContext;
     private resizeObserver;
-    private animFrameId;
     private _snapToGrid;
     private readonly _gridSize;
-    private needsRender;
-    private domNodes;
-    private htmlContent;
-    private interactingElementId;
+    private readonly renderLoop;
+    private readonly domNodeManager;
+    private readonly interactMode;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -468,26 +495,14 @@ declare class Viewport {
     updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
     removeGrid(): void;
     destroy(): void;
-    private startRenderLoop;
-    private render;
     private startEditingElement;
     private onTextEditStop;
     private onDblClick;
     private hitTestWorld;
-    private startInteracting;
     stopInteracting(): void;
-    private onInteractNodePointerDown;
-    private onInteractKeyDown;
-    private onInteractPointerDown;
     private onDragOver;
     private onDrop;
-    private syncDomNode;
-    private renderDomContent;
     private unbindArrowsFrom;
-    private hideDomNode;
-    private removeDomNode;
-    private clearDomNodes;
-    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -496,6 +511,14 @@ declare class Viewport {
     private observeResize;
 }
 
+interface RenderStatsSnapshot {
+    fps: number;
+    avgFrameMs: number;
+    p95FrameMs: number;
+    lastFrameMs: number;
+    frameCount: number;
+}
+
 declare class ElementRenderer {
     private store;
     private imageCache;
@@ -610,29 +633,25 @@ interface GridInput extends BaseDefaults {
 declare function createGrid(input: GridInput): GridElement;
 declare function createText(input: TextInput): TextElement;
 
-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 function getArrowBounds(from: Point, to: Point, bend: number): Bounds;
 
 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 getEdgeIntersection(bounds: Bounds, outsidePoint: Point): Point;
 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;
 declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement>;
 
+declare function getElementBounds(element: CanvasElement): Bounds | null;
+declare function boundsIntersect(a: Bounds, b: Bounds): boolean;
+
 declare class AddElementCommand implements Command {
     private readonly element;
     constructor(element: CanvasElement);
@@ -675,6 +694,8 @@ interface PencilToolOptions {
     color?: string;
     width?: number;
     smoothing?: number;
+    minPointDistance?: number;
+    progressiveSimplifyThreshold?: number;
 }
 declare class PencilTool implements Tool {
     readonly name = "pencil";
@@ -683,13 +704,20 @@ declare class PencilTool implements Tool {
     private color;
     private width;
     private smoothing;
+    private minPointDistance;
+    private progressiveThreshold;
+    private nextSimplifyAt;
+    private optionListeners;
     constructor(options?: PencilToolOptions);
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
+    getOptions(): PencilToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: PencilToolOptions): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    private notifyOptionsChange;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -702,6 +730,7 @@ declare class EraserTool implements Tool {
     private readonly radius;
     private readonly cursor;
     constructor(options?: EraserToolOptions);
+    getOptions(): EraserToolOptions;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
@@ -738,7 +767,6 @@ declare class SelectTool implements Tool {
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
-    private getElementBounds;
     private hitTest;
     private isInsideBounds;
 }
@@ -757,8 +785,12 @@ declare class ArrowTool implements Tool {
     private fromBinding;
     private fromTarget;
     private toTarget;
+    private optionListeners;
     constructor(options?: ArrowToolOptions);
+    getOptions(): ArrowToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: ArrowToolOptions): void;
+    private notifyOptionsChange;
     private layerFilter;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
@@ -776,8 +808,12 @@ declare class NoteTool implements Tool {
     private backgroundColor;
     private textColor;
     private size;
+    private optionListeners;
     constructor(options?: NoteToolOptions);
+    getOptions(): NoteToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: NoteToolOptions): void;
+    private notifyOptionsChange;
     onPointerDown(_state: PointerState, _ctx: ToolContext): void;
     onPointerMove(_state: PointerState, _ctx: ToolContext): void;
     onPointerUp(state: PointerState, ctx: ToolContext): void;
@@ -793,8 +829,12 @@ declare class TextTool implements Tool {
     private fontSize;
     private color;
     private textAlign;
+    private optionListeners;
     constructor(options?: TextToolOptions);
+    getOptions(): TextToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: TextToolOptions): void;
+    private notifyOptionsChange;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
     onPointerDown(_state: PointerState, _ctx: ToolContext): void;
@@ -832,7 +872,10 @@ declare class ShapeTool implements Tool {
     private strokeColor;
     private strokeWidth;
     private fillColor;
+    private optionListeners;
     constructor(options?: ShapeToolOptions);
+    getOptions(): ShapeToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: ShapeToolOptions): void;
     onActivate(_ctx: ToolContext): void;
     onDeactivate(_ctx: ToolContext): void;
@@ -841,6 +884,7 @@ declare class ShapeTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
     private computeRect;
+    private notifyOptionsChange;
     private snap;
     private onKeyDown;
     private onKeyUp;
@@ -870,6 +914,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.5";
+declare const VERSION = "0.8.7";
 
-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, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, 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, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, 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, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, 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, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -24,6 +24,20 @@ interface Size {
 }
 type Bounds = Point & Size;
 
+declare class Quadtree {
+    private root;
+    private _size;
+    private readonly worldBounds;
+    constructor(worldBounds: Bounds);
+    get size(): number;
+    insert(id: string, bounds: Bounds): void;
+    remove(id: string): void;
+    update(id: string, newBounds: Bounds): void;
+    query(rect: Bounds): string[];
+    queryPoint(point: Point): string[];
+    clear(): void;
+}
+
 interface BaseElement {
     id: string;
     type: string;
@@ -139,6 +153,7 @@ declare class ElementStore {
     private elements;
     private bus;
     private layerOrderMap;
+    private spatialIndex;
     get count(): number;
     setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
@@ -152,13 +167,20 @@ declare class ElementStore {
     clear(): void;
     snapshot(): CanvasElement[];
     loadSnapshot(elements: CanvasElement[]): void;
+    queryRect(rect: Bounds): CanvasElement[];
+    queryPoint(point: Point): CanvasElement[];
     on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
+    onChange(listener: () => void): () => void;
 }
 
 interface CameraOptions {
     minZoom?: number;
     maxZoom?: number;
 }
+interface CameraChangeInfo {
+    panned: boolean;
+    zoomed: boolean;
+}
 declare class Camera {
     private x;
     private y;
@@ -175,9 +197,12 @@ declare class Camera {
     zoomAt(level: number, screenPoint: Point): void;
     screenToWorld(screen: Point): Point;
     worldToScreen(world: Point): Point;
+    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
     toCSSTransform(): string;
-    onChange(listener: () => void): () => void;
-    private notifyChange;
+    onChange(listener: (info: CameraChangeInfo) => void): () => void;
+    private notifyPan;
+    private notifyZoom;
+    private notifyPanAndZoom;
 }
 
 declare class LayerManager {
@@ -198,6 +223,7 @@ declare class LayerManager {
     reorderLayer(id: string, newOrder: number): void;
     setLayerVisible(id: string, visible: boolean): boolean;
     setLayerLocked(id: string, locked: boolean): boolean;
+    setLayerOpacity(id: string, opacity: number): void;
     setActiveLayer(id: string): void;
     moveElementToLayer(elementId: string, layerId: string): void;
     snapshot(): Layer[];
@@ -281,6 +307,9 @@ interface Tool {
     onActivate?(ctx: ToolContext): void;
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
+    getOptions?(): object;
+    setOptions?(options: object): void;
+    onOptionsChange?(listener: () => void): () => void;
 }
 type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
 
@@ -424,13 +453,11 @@ declare class Viewport {
     private readonly historyRecorder;
     readonly toolContext: ToolContext;
     private resizeObserver;
-    private animFrameId;
     private _snapToGrid;
     private readonly _gridSize;
-    private needsRender;
-    private domNodes;
-    private htmlContent;
-    private interactingElementId;
+    private readonly renderLoop;
+    private readonly domNodeManager;
+    private readonly interactMode;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -468,26 +495,14 @@ declare class Viewport {
     updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
     removeGrid(): void;
     destroy(): void;
-    private startRenderLoop;
-    private render;
     private startEditingElement;
     private onTextEditStop;
     private onDblClick;
     private hitTestWorld;
-    private startInteracting;
     stopInteracting(): void;
-    private onInteractNodePointerDown;
-    private onInteractKeyDown;
-    private onInteractPointerDown;
     private onDragOver;
     private onDrop;
-    private syncDomNode;
-    private renderDomContent;
     private unbindArrowsFrom;
-    private hideDomNode;
-    private removeDomNode;
-    private clearDomNodes;
-    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -496,6 +511,14 @@ declare class Viewport {
     private observeResize;
 }
 
+interface RenderStatsSnapshot {
+    fps: number;
+    avgFrameMs: number;
+    p95FrameMs: number;
+    lastFrameMs: number;
+    frameCount: number;
+}
+
 declare class ElementRenderer {
     private store;
     private imageCache;
@@ -610,29 +633,25 @@ interface GridInput extends BaseDefaults {
 declare function createGrid(input: GridInput): GridElement;
 declare function createText(input: TextInput): TextElement;
 
-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 function getArrowBounds(from: Point, to: Point, bend: number): Bounds;
 
 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 getEdgeIntersection(bounds: Bounds, outsidePoint: Point): Point;
 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;
 declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement>;
 
+declare function getElementBounds(element: CanvasElement): Bounds | null;
+declare function boundsIntersect(a: Bounds, b: Bounds): boolean;
+
 declare class AddElementCommand implements Command {
     private readonly element;
     constructor(element: CanvasElement);
@@ -675,6 +694,8 @@ interface PencilToolOptions {
     color?: string;
     width?: number;
     smoothing?: number;
+    minPointDistance?: number;
+    progressiveSimplifyThreshold?: number;
 }
 declare class PencilTool implements Tool {
     readonly name = "pencil";
@@ -683,13 +704,20 @@ declare class PencilTool implements Tool {
     private color;
     private width;
     private smoothing;
+    private minPointDistance;
+    private progressiveThreshold;
+    private nextSimplifyAt;
+    private optionListeners;
     constructor(options?: PencilToolOptions);
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
+    getOptions(): PencilToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: PencilToolOptions): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    private notifyOptionsChange;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -702,6 +730,7 @@ declare class EraserTool implements Tool {
     private readonly radius;
     private readonly cursor;
     constructor(options?: EraserToolOptions);
+    getOptions(): EraserToolOptions;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
@@ -738,7 +767,6 @@ declare class SelectTool implements Tool {
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
-    private getElementBounds;
     private hitTest;
     private isInsideBounds;
 }
@@ -757,8 +785,12 @@ declare class ArrowTool implements Tool {
     private fromBinding;
     private fromTarget;
     private toTarget;
+    private optionListeners;
     constructor(options?: ArrowToolOptions);
+    getOptions(): ArrowToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: ArrowToolOptions): void;
+    private notifyOptionsChange;
     private layerFilter;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
@@ -776,8 +808,12 @@ declare class NoteTool implements Tool {
     private backgroundColor;
     private textColor;
     private size;
+    private optionListeners;
     constructor(options?: NoteToolOptions);
+    getOptions(): NoteToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: NoteToolOptions): void;
+    private notifyOptionsChange;
     onPointerDown(_state: PointerState, _ctx: ToolContext): void;
     onPointerMove(_state: PointerState, _ctx: ToolContext): void;
     onPointerUp(state: PointerState, ctx: ToolContext): void;
@@ -793,8 +829,12 @@ declare class TextTool implements Tool {
     private fontSize;
     private color;
     private textAlign;
+    private optionListeners;
     constructor(options?: TextToolOptions);
+    getOptions(): TextToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: TextToolOptions): void;
+    private notifyOptionsChange;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
     onPointerDown(_state: PointerState, _ctx: ToolContext): void;
@@ -832,7 +872,10 @@ declare class ShapeTool implements Tool {
     private strokeColor;
     private strokeWidth;
     private fillColor;
+    private optionListeners;
     constructor(options?: ShapeToolOptions);
+    getOptions(): ShapeToolOptions;
+    onOptionsChange(listener: () => void): () => void;
     setOptions(options: ShapeToolOptions): void;
     onActivate(_ctx: ToolContext): void;
     onDeactivate(_ctx: ToolContext): void;
@@ -841,6 +884,7 @@ declare class ShapeTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
     private computeRect;
+    private notifyOptionsChange;
     private snap;
     private onKeyDown;
     private onKeyUp;
@@ -870,6 +914,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.5";
+declare const VERSION = "0.8.7";
 
-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, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, 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, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, 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, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, 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, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };