@fieldnotes/core 0.8.11 → 0.10.0

package/dist/index.d.ts

@@ -59,6 +59,7 @@ interface NoteElement extends BaseElement {
     text: string;
     backgroundColor: string;
     textColor: string;
+    fontSize?: number;
 }
 interface Binding {
     elementId: string;
@@ -112,7 +113,20 @@ interface GridElement extends BaseElement {
     strokeWidth: number;
     opacity: number;
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement;
+type TemplateShape = 'circle' | 'cone' | 'line' | 'square';
+interface TemplateElement extends BaseElement {
+    type: 'template';
+    templateShape: TemplateShape;
+    radius: number;
+    angle: number;
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    opacity: number;
+    feetPerCell?: number;
+    radiusFeet?: number;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement | TemplateElement;
 type ElementType = CanvasElement['type'];
 
 interface Layer {
@@ -139,7 +153,37 @@ declare function exportState(elements: CanvasElement[], camera: {
 }, layers?: Layer[]): CanvasState;
 declare function parseState(json: string): CanvasState;
 
-declare function snapPoint(point: Point, gridSize: number): Point;
+interface CameraOptions {
+    minZoom?: number;
+    maxZoom?: number;
+}
+interface CameraChangeInfo {
+    panned: boolean;
+    zoomed: boolean;
+}
+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;
+    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
+    toCSSTransform(): string;
+    onChange(listener: (info: CameraChangeInfo) => void): () => void;
+    private notifyPan;
+    private notifyZoom;
+    private notifyPanAndZoom;
+}
 
 interface ElementUpdateEvent {
     previous: CanvasElement;
@@ -175,37 +219,44 @@ declare class ElementStore {
     onChange(listener: () => void): () => void;
 }
 
-interface CameraOptions {
-    minZoom?: number;
-    maxZoom?: number;
+interface ToolContext {
+    camera: Camera;
+    store: ElementStore;
+    requestRender: () => void;
+    switchTool?: (name: string) => void;
+    editElement?: (id: string) => void;
+    setCursor?: (cursor: string) => void;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    gridType?: 'square' | 'hex';
+    hexOrientation?: HexOrientation;
+    activeLayerId?: string;
+    isLayerVisible?: (layerId: string) => boolean;
+    isLayerLocked?: (layerId: string) => boolean;
 }
-interface CameraChangeInfo {
-    panned: boolean;
-    zoomed: boolean;
+interface PointerState {
+    x: number;
+    y: number;
+    pressure: 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;
-    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
-    toCSSTransform(): string;
-    onChange(listener: (info: CameraChangeInfo) => void): () => void;
-    private notifyPan;
-    private notifyZoom;
-    private notifyPanAndZoom;
+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;
+    getOptions?(): object;
+    setOptions?(options: object): void;
+    onOptionsChange?(listener: () => void): () => void;
 }
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape' | 'measure' | 'template';
+
+declare function snapPoint(point: Point, gridSize: number): Point;
+declare function snapToHexCenter(point: Point, cellSize: number, orientation: HexOrientation): Point;
+declare function smartSnap(point: Point, ctx: ToolContext): Point;
 
 declare class LayerManager {
     private readonly store;
@@ -290,39 +341,6 @@ declare class Background {
     private renderGrid;
 }
 
-interface ToolContext {
-    camera: Camera;
-    store: ElementStore;
-    requestRender: () => void;
-    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;
-    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;
-    getOptions?(): object;
-    setOptions?(options: object): void;
-    onOptionsChange?(listener: () => void): () => void;
-}
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
-
 declare class ToolManager {
     private tools;
     private current;
@@ -432,6 +450,28 @@ declare class InputHandler {
     private cancelToolIfActive;
 }
 
+interface FontSizePreset {
+    label: string;
+    size: number;
+}
+declare const DEFAULT_FONT_SIZE_PRESETS: FontSizePreset[];
+declare class NoteToolbar {
+    private el;
+    private anchor;
+    private selectionListener;
+    private readonly fontSizePresets;
+    constructor(fontSizePresets?: FontSizePreset[]);
+    show(anchor: HTMLElement): void;
+    hide(): void;
+    getElement(): HTMLDivElement | null;
+    updatePosition(anchor: HTMLElement): void;
+    private createToolbarElement;
+    private createFormatButton;
+    private createFontSizeSelect;
+    private positionToolbar;
+    private updateActiveStates;
+}
+
 interface ExportImageOptions {
     scale?: number;
     padding?: number;
@@ -452,6 +492,8 @@ interface RenderStatsSnapshot {
 interface ViewportOptions {
     camera?: CameraOptions;
     background?: BackgroundOptions;
+    fontSizePresets?: FontSizePreset[];
+    toolbar?: boolean;
 }
 declare class Viewport {
     private readonly container;
@@ -529,6 +571,7 @@ declare class Viewport {
     private createDomLayer;
     private applyCameraTransform;
     private syncCanvasSize;
+    private syncGridContext;
     private observeResize;
 }
 
@@ -554,11 +597,19 @@ declare class ElementRenderer {
     private fillShapePath;
     private strokeShapePath;
     private renderGrid;
+    private renderTemplate;
+    private renderGeometricTemplate;
+    private renderHexTemplate;
+    private renderRadiusMarker;
     private renderImage;
     private getHexTile;
     private getImage;
 }
 
+interface NoteEditorOptions {
+    fontSizePresets?: FontSizePreset[];
+    toolbar?: boolean;
+}
 declare class NoteEditor {
     private editingId;
     private editingNode;
@@ -567,17 +618,46 @@ declare class NoteEditor {
     private pointerHandler;
     private pendingEditId;
     private onStopCallback;
+    private toolbar;
+    constructor(options?: NoteEditorOptions);
     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;
+    updateToolbarPosition(): void;
     private activateEditing;
 }
 
+interface RunStyle {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    fontSize: number;
+}
+interface StyledRun extends RunStyle {
+    text: string;
+}
+declare function sanitizeNoteHtml(html: string): string;
+
+interface ActiveFormats {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+}
+declare function toggleBold(): void;
+declare function toggleItalic(): void;
+declare function toggleUnderline(): void;
+declare function toggleStrikethrough(): void;
+declare function setFontSize(size: number): void;
+declare function getActiveFormats(): ActiveFormats;
+
 declare function createId(prefix: string): string;
 
+declare const DEFAULT_NOTE_FONT_SIZE = 18;
 interface BaseDefaults {
     position?: Point;
     zIndex?: number;
@@ -596,6 +676,7 @@ interface NoteInput extends BaseDefaults {
     text?: string;
     backgroundColor?: string;
     textColor?: string;
+    fontSize?: number;
 }
 interface ArrowInput extends BaseDefaults {
     from: Point;
@@ -648,6 +729,19 @@ interface GridInput extends BaseDefaults {
 }
 declare function createGrid(input: GridInput): GridElement;
 declare function createText(input: TextInput): TextElement;
+interface TemplateInput extends BaseDefaults {
+    position: Point;
+    templateShape: TemplateShape;
+    radius: number;
+    angle?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    feetPerCell?: number;
+    radiusFeet?: number;
+}
+declare function createTemplate(input: TemplateInput): TemplateElement;
 
 declare function getArrowControlPoint(from: Point, to: Point, bend: number): Point;
 declare function getArrowMidpoint(from: Point, to: Point, bend: number): Point;
@@ -668,6 +762,13 @@ declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<
 declare function getElementBounds(element: CanvasElement): Bounds | null;
 declare function boundsIntersect(a: Bounds, b: Bounds): boolean;
 
+declare function getHexDistance(a: Point, b: Point, cellSize: number, orientation: HexOrientation): number;
+declare function getHexCellsInRadius(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInCone(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInLine(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInSquare(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function drawHexPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, cellSize: number, orientation: HexOrientation): void;
+
 declare class AddElementCommand implements Command {
     private readonly element;
     constructor(element: CanvasElement);
@@ -780,6 +881,8 @@ declare class SelectTool implements Tool {
     private renderMarquee;
     private renderSelectionBoxes;
     private renderBindingHighlights;
+    private hitTestTemplateResizeHandle;
+    private handleTemplateResize;
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
@@ -818,12 +921,14 @@ interface NoteToolOptions {
     backgroundColor?: string;
     textColor?: string;
     size?: Size;
+    fontSize?: number;
 }
 declare class NoteTool implements Tool {
     readonly name = "note";
     private backgroundColor;
     private textColor;
     private size;
+    private fontSize;
     private optionListeners;
     constructor(options?: NoteToolOptions);
     getOptions(): NoteToolOptions;
@@ -906,6 +1011,80 @@ declare class ShapeTool implements Tool {
     private onKeyUp;
 }
 
+interface MeasureToolOptions {
+    feetPerCell?: number;
+}
+interface Measurement {
+    start: Point;
+    end: Point;
+    worldDistance: number;
+    cells: number;
+    feet: number;
+}
+declare class MeasureTool implements Tool {
+    readonly name = "measure";
+    private start;
+    private end;
+    private gridSize;
+    private gridType;
+    private hexOrientation;
+    private feetPerCell;
+    private optionListeners;
+    constructor(options?: MeasureToolOptions);
+    getOptions(): MeasureToolOptions;
+    setOptions(options: MeasureToolOptions): void;
+    onOptionsChange(listener: () => void): () => void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    getMeasurement(): Measurement | null;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private snapToGrid;
+    private notifyOptionsChange;
+}
+
+interface TemplateToolOptions {
+    templateShape?: TemplateShape;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    feetPerCell?: number;
+}
+declare class TemplateTool implements Tool {
+    readonly name = "template";
+    private drawing;
+    private origin;
+    private current;
+    private gridSize;
+    private gridType;
+    private hexOrientation;
+    private snapEnabled;
+    private templateShape;
+    private fillColor;
+    private strokeColor;
+    private strokeWidth;
+    private opacity;
+    private feetPerCell;
+    private optionListeners;
+    constructor(options?: TemplateToolOptions);
+    getOptions(): TemplateToolOptions;
+    setOptions(options: TemplateToolOptions): void;
+    onOptionsChange(listener: () => void): () => void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private renderGeometricOverlay;
+    private renderHexOverlay;
+    private computeRadius;
+    private computeAngle;
+    private snapToGrid;
+    private notifyOptionsChange;
+}
+
 declare class CreateLayerCommand implements Command {
     private readonly manager;
     private readonly layer;
@@ -930,6 +1109,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.11";
+declare const VERSION = "0.10.0";
 
-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 };
+export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FontSizePreset, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, 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, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };