@fieldnotes/core 0.19.0 → 0.20.0

package/dist/index.d.cts

@@ -588,6 +588,7 @@ interface ViewportOptions {
     background?: BackgroundOptions;
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
     shortcuts?: ShortcutOptions;
     onHtmlElementMount?: (elementId: string, domId: string | undefined, container: HTMLDivElement) => void;
     onDrop?: (event: DragEvent, worldPosition: {
@@ -724,6 +725,7 @@ declare class ElementRenderer {
 interface NoteEditorOptions {
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
 }
 declare class NoteEditor {
     private editingId;
@@ -731,9 +733,11 @@ declare class NoteEditor {
     private blurHandler;
     private keyHandler;
     private pointerHandler;
+    private inputHandler;
     private pendingEditId;
     private onStopCallback;
     private toolbar;
+    private readonly placeholder;
     constructor(options?: NoteEditorOptions);
     get isEditing(): boolean;
     get editingElementId(): string | null;
@@ -756,6 +760,7 @@ interface StyledRun extends RunStyle {
     text: string;
 }
 declare function sanitizeNoteHtml(html: string): string;
+declare function isNoteContentEmpty(html: string): boolean;
 
 interface ActiveFormats {
     bold: boolean;
@@ -985,6 +990,7 @@ declare class SelectTool implements Tool {
     private pendingSingleSelectId;
     private hasDragged;
     private resizeAspectRatio;
+    private hoveredId;
     get selectedIds(): string[];
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
@@ -999,6 +1005,7 @@ declare class SelectTool implements Tool {
     private updateArrowsBoundTo;
     nudgeSelection(dx: number, dy: number, ctx: ToolContext): boolean;
     private updateHoverCursor;
+    private setHovered;
     private handleResize;
     private hitTestResizeHandle;
     private getHandlePositions;
@@ -1233,6 +1240,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.19.0";
+declare const VERSION = "0.20.0";
 
-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, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, 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 ShortcutBindings, type ShortcutOptions, type ShortcutsApi, 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, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, 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, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, 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 ShortcutBindings, type ShortcutOptions, type ShortcutsApi, 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, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, isNoteContentEmpty, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -588,6 +588,7 @@ interface ViewportOptions {
     background?: BackgroundOptions;
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
     shortcuts?: ShortcutOptions;
     onHtmlElementMount?: (elementId: string, domId: string | undefined, container: HTMLDivElement) => void;
     onDrop?: (event: DragEvent, worldPosition: {
@@ -724,6 +725,7 @@ declare class ElementRenderer {
 interface NoteEditorOptions {
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    placeholder?: string;
 }
 declare class NoteEditor {
     private editingId;
@@ -731,9 +733,11 @@ declare class NoteEditor {
     private blurHandler;
     private keyHandler;
     private pointerHandler;
+    private inputHandler;
     private pendingEditId;
     private onStopCallback;
     private toolbar;
+    private readonly placeholder;
     constructor(options?: NoteEditorOptions);
     get isEditing(): boolean;
     get editingElementId(): string | null;
@@ -756,6 +760,7 @@ interface StyledRun extends RunStyle {
     text: string;
 }
 declare function sanitizeNoteHtml(html: string): string;
+declare function isNoteContentEmpty(html: string): boolean;
 
 interface ActiveFormats {
     bold: boolean;
@@ -985,6 +990,7 @@ declare class SelectTool implements Tool {
     private pendingSingleSelectId;
     private hasDragged;
     private resizeAspectRatio;
+    private hoveredId;
     get selectedIds(): string[];
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
@@ -999,6 +1005,7 @@ declare class SelectTool implements Tool {
     private updateArrowsBoundTo;
     nudgeSelection(dx: number, dy: number, ctx: ToolContext): boolean;
     private updateHoverCursor;
+    private setHovered;
     private handleResize;
     private hitTestResizeHandle;
     private getHandlePositions;
@@ -1233,6 +1240,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.19.0";
+declare const VERSION = "0.20.0";
 
-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, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, 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 ShortcutBindings, type ShortcutOptions, type ShortcutsApi, 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, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, 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, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type InputHandlerOptions, 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 ShortcutBindings, type ShortcutOptions, type ShortcutsApi, 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, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, isNoteContentEmpty, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -273,6 +273,12 @@ function sanitizeNode(node) {
     sanitizeNode(el);
   }
 }
+function isNoteContentEmpty(html) {
+  if (!html) return true;
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const text = doc.body.textContent ?? "";
+  return text.replace(/\u00a0/g, " ").trim().length === 0;
+}
 function sanitizeAttributes(el, tag) {
   const attrs = Array.from(el.attributes);
   for (const attr of attrs) {
@@ -3364,17 +3370,36 @@ var FORMAT_SHORTCUTS = {
   i: toggleItalic,
   u: toggleUnderline
 };
+function ensureEditorStyles() {
+  if (document.querySelector("style[data-fieldnotes-editor]")) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-fieldnotes-editor", "");
+  style.textContent = `[data-fn-placeholder][data-fn-empty='true']::before {
+  content: attr(data-fn-placeholder);
+  color: #9e9e9e;
+  position: absolute;
+  pointer-events: none;
+}`;
+  document.head.appendChild(style);
+}
+function isNodeEmpty(node) {
+  const text = node.textContent ?? "";
+  return text.replace(/\u00a0/g, " ").trim().length === 0;
+}
 var NoteEditor = class {
   editingId = null;
   editingNode = null;
   blurHandler = null;
   keyHandler = null;
   pointerHandler = null;
+  inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
   toolbar;
+  placeholder;
   constructor(options) {
     this.toolbar = options?.toolbar === false ? null : new NoteToolbar(options?.fontSizePresets);
+    this.placeholder = options?.placeholder ?? "Type\u2026";
   }
   get isEditing() {
     return this.editingId !== null;
@@ -3409,6 +3434,11 @@ var NoteEditor = class {
     if (this.pointerHandler) {
       this.editingNode.removeEventListener("pointerdown", this.pointerHandler);
     }
+    if (this.inputHandler) {
+      this.editingNode.removeEventListener("input", this.inputHandler);
+    }
+    this.editingNode.removeAttribute("data-fn-placeholder");
+    this.editingNode.removeAttribute("data-fn-empty");
     const text = sanitizeNoteHtml(this.editingNode.innerHTML);
     store.update(this.editingId, { text });
     this.editingNode.contentEditable = "false";
@@ -3425,6 +3455,7 @@ var NoteEditor = class {
     this.blurHandler = null;
     this.keyHandler = null;
     this.pointerHandler = null;
+    this.inputHandler = null;
   }
   destroy(store) {
     this.pendingEditId = null;
@@ -3455,6 +3486,13 @@ var NoteEditor = class {
       selection.removeAllRanges();
       selection.addRange(range);
     }
+    ensureEditorStyles();
+    node.setAttribute("data-fn-placeholder", this.placeholder);
+    node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+    this.inputHandler = () => {
+      node.setAttribute("data-fn-empty", String(isNodeEmpty(node)));
+    };
+    node.addEventListener("input", this.inputHandler);
     this.toolbar?.show(node);
     this.blurHandler = (e) => {
       const related = e.relatedTarget;
@@ -4893,7 +4931,8 @@ var Viewport = class {
     });
     this.noteEditor = new NoteEditor({
       fontSizePresets: options.fontSizePresets,
-      toolbar: options.toolbar
+      toolbar: options.toolbar,
+      placeholder: options.placeholder
     });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.onHtmlElementMount = options.onHtmlElementMount;
@@ -5239,7 +5278,16 @@ var Viewport = class {
   }
   onTextEditStop(elementId) {
     const element = this.store.getById(elementId);
-    if (!element || element.type !== "text") return;
+    if (!element) return;
+    if (element.type === "note") {
+      if (isNoteContentEmpty(element.text)) {
+        this.historyRecorder.begin();
+        this.store.remove(elementId);
+        this.historyRecorder.commit();
+      }
+      return;
+    }
+    if (element.type !== "text") return;
     if (!element.text || element.text.trim() === "") {
       this.historyRecorder.begin();
       this.store.remove(elementId);
@@ -5788,6 +5836,7 @@ var SelectTool = class {
   pendingSingleSelectId = null;
   hasDragged = false;
   resizeAspectRatio = 0;
+  hoveredId = null;
   get selectedIds() {
     return [...this._selectedIds];
   }
@@ -5804,6 +5853,7 @@ var SelectTool = class {
   onDeactivate(ctx) {
     this._selectedIds = [];
     this.mode = { type: "idle" };
+    this.hoveredId = null;
     ctx.setCursor?.("default");
   }
   snap(point, ctx) {
@@ -5811,6 +5861,7 @@ var SelectTool = class {
   }
   onPointerDown(state, ctx) {
     this.ctx = ctx;
+    this.setHovered(null, ctx);
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.lastWorld = this.snap(world, ctx);
     this.currentWorld = world;
@@ -5953,7 +6004,8 @@ var SelectTool = class {
   }
   onHover(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.updateHoverCursor(world, ctx);
+    const hoverId = this.updateHoverCursor(world, ctx);
+    this.setHovered(hoverId, ctx);
   }
   renderOverlay(canvasCtx) {
     this.renderMarquee(canvasCtx);
@@ -5974,6 +6026,23 @@ var SelectTool = class {
         canvasCtx.restore();
       }
     }
+    if (this.hoveredId && this.ctx && this.mode.type === "idle") {
+      if (!this._selectedIds.includes(this.hoveredId)) {
+        const el = this.ctx.store.getById(this.hoveredId);
+        if (el) {
+          const b = getElementBounds(el);
+          if (b) {
+            canvasCtx.save();
+            canvasCtx.strokeStyle = "#2196F3";
+            canvasCtx.globalAlpha = 0.35;
+            canvasCtx.lineWidth = 1.5 / this.ctx.camera.zoom;
+            canvasCtx.setLineDash([]);
+            canvasCtx.strokeRect(b.x, b.y, b.w, b.h);
+            canvasCtx.restore();
+          }
+        }
+      }
+    }
   }
   updateArrowsBoundTo(ids, ctx) {
     const movedNonArrowIds = /* @__PURE__ */ new Set();
@@ -6022,20 +6091,26 @@ var SelectTool = class {
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
       ctx.setCursor?.(getArrowHandleCursor(arrowHit.handle, false));
-      return;
+      return null;
     }
     const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
     if (templateResizeHit) {
       ctx.setCursor?.("nwse-resize");
-      return;
+      return null;
     }
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       ctx.setCursor?.(HANDLE_CURSORS[resizeHit.handle]);
-      return;
+      return null;
     }
     const hit = this.hitTest(world, ctx);
     ctx.setCursor?.(hit ? "move" : "default");
+    return hit ? hit.id : null;
+  }
+  setHovered(id, ctx) {
+    if (this.hoveredId === id) return;
+    this.hoveredId = id;
+    ctx.requestRender();
   }
   handleResize(world, ctx, shiftKey = false) {
     if (this.mode.type !== "resizing") return;
@@ -7142,7 +7217,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.19.0";
+var VERSION = "0.20.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -7216,6 +7291,7 @@ export {
   getHexDistance,
   isBindable,
   isNearBezier,
+  isNoteContentEmpty,
   parseState,
   sanitizeNoteHtml,
   setFontSize,