@fieldnotes/core 0.2.2 → 0.3.0

package/dist/index.d.cts

@@ -61,7 +61,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 +204,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 +368,8 @@ declare class Viewport {
     destroy(): void;
     private startRenderLoop;
     private render;
-    private startEditingNote;
+    private startEditingElement;
+    private onTextEditStop;
     private onDblClick;
     private hitTestWorld;
     private startInteracting;
@@ -397,8 +406,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;
@@ -440,11 +451,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;
@@ -601,6 +621,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 +654,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.2.2";
+declare const VERSION = "0.3.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 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 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 };

package/dist/index.d.ts

@@ -61,7 +61,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 +204,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 +368,8 @@ declare class Viewport {
     destroy(): void;
     private startRenderLoop;
     private render;
-    private startEditingNote;
+    private startEditingElement;
+    private onTextEditStop;
     private onDblClick;
     private hitTestWorld;
     private startInteracting;
@@ -397,8 +406,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;
@@ -440,11 +451,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;
@@ -601,6 +621,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 +654,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.2.2";
+declare const VERSION = "0.3.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 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 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 };

package/dist/index.js

@@ -69,7 +69,7 @@ function validateState(data) {
     migrateElement(el);
   }
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html"]);
+var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text"]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -752,7 +752,7 @@ function smoothToSegments(points) {
 }
 
 // src/elements/element-renderer.ts
-var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html"]);
+var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html", "text"]);
 var ARROWHEAD_LENGTH = 12;
 var ARROWHEAD_ANGLE = Math.PI / 6;
 var ElementRenderer = class {
@@ -831,12 +831,16 @@ var NoteEditor = class {
   keyHandler = null;
   pointerHandler = null;
   pendingEditId = null;
+  onStopCallback = null;
   get isEditing() {
     return this.editingId !== null;
   }
   get editingElementId() {
     return this.editingId;
   }
+  setOnStop(callback) {
+    this.onStopCallback = callback;
+  }
   startEditing(node, elementId, store) {
     if (this.editingId === elementId) return;
     if (this.editingId) {
@@ -868,6 +872,9 @@ var NoteEditor = class {
     if (this.pointerHandler) {
       this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
     }
+    if (this.editingId && this.onStopCallback) {
+      this.onStopCallback(this.editingId);
+    }
     this.editingId = null;
     this.editingNode = null;
     this.blurHandler = null;
@@ -1218,6 +1225,20 @@ function createHtmlElement(input) {
     size: input.size
   };
 }
+function createText(input) {
+  return {
+    id: createId("text"),
+    type: "text",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    size: input.size ?? { w: 200, h: 28 },
+    text: input.text ?? "",
+    fontSize: input.fontSize ?? 16,
+    color: input.color ?? "#1a1a1a",
+    textAlign: input.textAlign ?? "left"
+  };
+}
 
 // src/canvas/viewport.ts
 var Viewport = class {
@@ -1229,6 +1250,7 @@ var Viewport = class {
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
     this.noteEditor = new NoteEditor();
+    this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history);
     this.wrapper = this.createWrapper();
@@ -1242,7 +1264,7 @@ var Viewport = class {
       store: this.store,
       requestRender: () => this.requestRender(),
       switchTool: (name) => this.toolManager.setTool(name, this.toolContext),
-      editElement: (id) => this.startEditingNote(id),
+      editElement: (id) => this.startEditingElement(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
       }
@@ -1396,15 +1418,34 @@ var Viewport = class {
     ctx.restore();
     ctx.restore();
   }
-  startEditingNote(id) {
+  startEditingElement(id) {
     const element = this.store.getById(id);
-    if (!element || element.type !== "note") return;
+    if (!element || element.type !== "note" && element.type !== "text") return;
     this.render();
     const node = this.domNodes.get(id);
     if (node) {
       this.noteEditor.startEditing(node, id, this.store);
     }
   }
+  onTextEditStop(elementId) {
+    const element = this.store.getById(elementId);
+    if (!element || element.type !== "text") return;
+    if (!element.text || element.text.trim() === "") {
+      this.historyRecorder.begin();
+      this.store.remove(elementId);
+      this.historyRecorder.commit();
+      return;
+    }
+    const node = this.domNodes.get(elementId);
+    if (node && "size" in element) {
+      const measuredHeight = node.scrollHeight;
+      if (measuredHeight !== element.size.h) {
+        this.store.update(elementId, {
+          size: { w: element.size.w, h: measuredHeight }
+        });
+      }
+    }
+  }
   onDblClick = (e) => {
     const el = document.elementFromPoint(e.clientX, e.clientY);
     const nodeEl = el?.closest("[data-element-id]");
@@ -1412,8 +1453,8 @@ var Viewport = class {
       const elementId = nodeEl.dataset["elementId"];
       if (elementId) {
         const element = this.store.getById(elementId);
-        if (element?.type === "note") {
-          this.startEditingNote(elementId);
+        if (element?.type === "note" || element?.type === "text") {
+          this.startEditingElement(elementId);
           return;
         }
       }
@@ -1537,7 +1578,7 @@ var Viewport = class {
         node.addEventListener("dblclick", (e) => {
           e.stopPropagation();
           const id = node.dataset["elementId"];
-          if (id) this.startEditingNote(id);
+          if (id) this.startEditingElement(id);
         });
       }
       if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
@@ -1578,6 +1619,42 @@ var Viewport = class {
         node.appendChild(content);
       }
     }
+    if (element.type === "text") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          padding: "2px",
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign,
+          background: "none",
+          border: "none",
+          boxShadow: "none",
+          overflow: "visible",
+          cursor: "default",
+          userSelect: "none",
+          wordWrap: "break-word",
+          whiteSpace: "pre-wrap",
+          lineHeight: "1.4"
+        });
+        node.textContent = element.text || "";
+        node.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          const id = node.dataset["elementId"];
+          if (id) this.startEditingElement(id);
+        });
+      }
+      if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
+        if (node.textContent !== element.text) {
+          node.textContent = element.text || "";
+        }
+        Object.assign(node.style, {
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign
+        });
+      }
+    }
   }
   removeDomNode(id) {
     this.htmlContent.delete(id);
@@ -2331,6 +2408,47 @@ var NoteTool = class {
   }
 };
 
+// src/tools/text-tool.ts
+var TextTool = class {
+  name = "text";
+  fontSize;
+  color;
+  textAlign;
+  constructor(options = {}) {
+    this.fontSize = options.fontSize ?? 16;
+    this.color = options.color ?? "#1a1a1a";
+    this.textAlign = options.textAlign ?? "left";
+  }
+  setOptions(options) {
+    if (options.fontSize !== void 0) this.fontSize = options.fontSize;
+    if (options.color !== void 0) this.color = options.color;
+    if (options.textAlign !== void 0) this.textAlign = options.textAlign;
+  }
+  onActivate(ctx) {
+    ctx.setCursor?.("text");
+  }
+  onDeactivate(ctx) {
+    ctx.setCursor?.("default");
+  }
+  onPointerDown(_state, _ctx) {
+  }
+  onPointerMove(_state, _ctx) {
+  }
+  onPointerUp(state, ctx) {
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const textEl = createText({
+      position: world,
+      fontSize: this.fontSize,
+      color: this.color,
+      textAlign: this.textAlign
+    });
+    ctx.store.add(textEl);
+    ctx.requestRender();
+    ctx.switchTool?.("select");
+    ctx.editElement?.(textEl.id);
+  }
+};
+
 // src/tools/image-tool.ts
 var ImageTool = class {
   name = "image";
@@ -2362,7 +2480,7 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.2.2";
+var VERSION = "0.3.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -2384,6 +2502,7 @@ export {
   PencilTool,
   RemoveElementCommand,
   SelectTool,
+  TextTool,
   ToolManager,
   UpdateElementCommand,
   VERSION,
@@ -2394,6 +2513,7 @@ export {
   createImage,
   createNote,
   createStroke,
+  createText,
   exportState,
   getArrowBounds,
   getArrowControlPoint,