@fieldnotes/core 0.19.0 → 0.20.0

package/dist/index.cjs

@@ -92,6 +92,7 @@ __export(index_exports, {
   getHexDistance: () => getHexDistance,
   isBindable: () => isBindable,
   isNearBezier: () => isNearBezier,
+  isNoteContentEmpty: () => isNoteContentEmpty,
   parseState: () => parseState,
   sanitizeNoteHtml: () => sanitizeNoteHtml,
   setFontSize: () => setFontSize,
@@ -382,6 +383,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) {
@@ -3473,17 +3480,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;
@@ -3518,6 +3544,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";
@@ -3534,6 +3565,7 @@ var NoteEditor = class {
     this.blurHandler = null;
     this.keyHandler = null;
     this.pointerHandler = null;
+    this.inputHandler = null;
   }
   destroy(store) {
     this.pendingEditId = null;
@@ -3564,6 +3596,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;
@@ -5002,7 +5041,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;
@@ -5348,7 +5388,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);
@@ -5897,6 +5946,7 @@ var SelectTool = class {
   pendingSingleSelectId = null;
   hasDragged = false;
   resizeAspectRatio = 0;
+  hoveredId = null;
   get selectedIds() {
     return [...this._selectedIds];
   }
@@ -5913,6 +5963,7 @@ var SelectTool = class {
   onDeactivate(ctx) {
     this._selectedIds = [];
     this.mode = { type: "idle" };
+    this.hoveredId = null;
     ctx.setCursor?.("default");
   }
   snap(point, ctx) {
@@ -5920,6 +5971,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;
@@ -6062,7 +6114,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);
@@ -6083,6 +6136,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();
@@ -6131,20 +6201,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;
@@ -7251,7 +7327,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.19.0";
+var VERSION = "0.20.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -7326,6 +7402,7 @@ var VERSION = "0.19.0";
   getHexDistance,
   isBindable,
   isNearBezier,
+  isNoteContentEmpty,
   parseState,
   sanitizeNoteHtml,
   setFontSize,