@fieldnotes/core 0.2.2 → 0.3.0

package/dist/index.cjs

@@ -40,6 +40,7 @@ __export(index_exports, {
   PencilTool: () => PencilTool,
   RemoveElementCommand: () => RemoveElementCommand,
   SelectTool: () => SelectTool,
+  TextTool: () => TextTool,
   ToolManager: () => ToolManager,
   UpdateElementCommand: () => UpdateElementCommand,
   VERSION: () => VERSION,
@@ -50,6 +51,7 @@ __export(index_exports, {
   createImage: () => createImage,
   createNote: () => createNote,
   createStroke: () => createStroke,
+  createText: () => createText,
   exportState: () => exportState,
   getArrowBounds: () => getArrowBounds,
   getArrowControlPoint: () => getArrowControlPoint,
@@ -132,7 +134,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");
@@ -815,7 +817,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 {
@@ -894,12 +896,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) {
@@ -931,6 +937,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;
@@ -1281,6 +1290,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 {
@@ -1292,6 +1315,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();
@@ -1305,7 +1329,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;
       }
@@ -1459,15 +1483,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]");
@@ -1475,8 +1518,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;
         }
       }
@@ -1600,7 +1643,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) {
@@ -1641,6 +1684,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);
@@ -2394,6 +2473,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";
@@ -2425,7 +2545,7 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.2.2";
+var VERSION = "0.3.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -2448,6 +2568,7 @@ var VERSION = "0.2.2";
   PencilTool,
   RemoveElementCommand,
   SelectTool,
+  TextTool,
   ToolManager,
   UpdateElementCommand,
   VERSION,
@@ -2458,6 +2579,7 @@ var VERSION = "0.2.2";
   createImage,
   createNote,
   createStroke,
+  createText,
   exportState,
   getArrowBounds,
   getArrowControlPoint,