@fieldnotes/core 0.18.0 → 0.20.0

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) {
@@ -1041,14 +1047,158 @@ var KeyboardActions = class {
   }
 };
 
+// src/canvas/shortcut-map.ts
+var DEFAULT_BINDINGS = [
+  ["delete", ["delete", "backspace"]],
+  ["deselect", ["escape"]],
+  ["undo", ["mod+z"]],
+  ["redo", ["mod+y", "mod+shift+z"]],
+  ["select-all", ["mod+a"]],
+  ["copy", ["mod+c"]],
+  ["paste", ["mod+v"]],
+  ["duplicate", ["mod+d"]],
+  ["z-forward", ["]"]],
+  ["z-backward", ["["]],
+  ["z-front", ["mod+]"]],
+  ["z-back", ["mod+["]],
+  ["zoom-fit", ["shift+1"]],
+  ["nudge-left", ["arrowleft"]],
+  ["nudge-right", ["arrowright"]],
+  ["nudge-up", ["arrowup"]],
+  ["nudge-down", ["arrowdown"]],
+  ["tool:select", ["v"]],
+  ["tool:hand", ["h"]],
+  ["tool:pencil", ["p"]],
+  ["tool:eraser", ["e"]],
+  ["tool:arrow", ["a"]],
+  ["tool:note", ["n"]],
+  ["tool:text", ["t"]],
+  ["tool:shape", ["s"]],
+  ["tool:measure", ["m"]],
+  ["tool:template", ["g"]]
+];
+var ALLOW_SHIFT = /* @__PURE__ */ new Set(["nudge-left", "nudge-right", "nudge-up", "nudge-down"]);
+var MODIFIERS = /* @__PURE__ */ new Set(["mod", "ctrl", "meta", "shift", "alt"]);
+function parseBinding(binding) {
+  const parts = binding.toLowerCase().split("+");
+  const key = parts.pop();
+  if (key === void 0 || key.length === 0 || MODIFIERS.has(key)) {
+    throw new Error(`Invalid shortcut binding "${binding}": missing key`);
+  }
+  const normalizedKey = key === "space" ? " " : key;
+  const parsed = {
+    mod: false,
+    ctrl: false,
+    meta: false,
+    shift: false,
+    alt: false,
+    key: normalizedKey,
+    digit: /^[0-9]$/.test(normalizedKey)
+  };
+  for (const part of parts) {
+    switch (part) {
+      case "mod":
+        parsed.mod = true;
+        break;
+      case "ctrl":
+        parsed.ctrl = true;
+        break;
+      case "meta":
+        parsed.meta = true;
+        break;
+      case "shift":
+        parsed.shift = true;
+        break;
+      case "alt":
+        parsed.alt = true;
+        break;
+      default:
+        throw new Error(`Invalid shortcut binding "${binding}": unknown modifier "${part}"`);
+    }
+  }
+  return parsed;
+}
+function bindingMatches(p, e, allowShift) {
+  if (p.mod) {
+    if (!e.ctrlKey && !e.metaKey) return false;
+  } else if (e.ctrlKey !== p.ctrl || e.metaKey !== p.meta) {
+    return false;
+  }
+  if (!allowShift && e.shiftKey !== p.shift) return false;
+  if (e.altKey !== p.alt) return false;
+  return p.digit ? e.code === `Digit${p.key}` : e.key.toLowerCase() === p.key;
+}
+function toArray(bindings) {
+  if (bindings === null) return [];
+  return Array.isArray(bindings) ? [...bindings] : [bindings];
+}
+var ShortcutMap = class {
+  raw = /* @__PURE__ */ new Map();
+  parsed = /* @__PURE__ */ new Map();
+  constructor(overrides) {
+    this.applyDefaults();
+    if (overrides) {
+      for (const [action, bindings] of Object.entries(overrides)) {
+        this.rebind(action, bindings);
+      }
+    }
+  }
+  /** First matching action in registration order wins when bindings conflict. */
+  match(e) {
+    for (const [action, parsedList] of this.parsed) {
+      const allowShift = ALLOW_SHIFT.has(action);
+      for (const p of parsedList) {
+        if (bindingMatches(p, e, allowShift)) return action;
+      }
+    }
+    return null;
+  }
+  rebind(action, bindings) {
+    const list = toArray(bindings);
+    const parsedList = list.map(parseBinding);
+    this.raw.set(action, list);
+    this.parsed.set(action, parsedList);
+  }
+  disable(action) {
+    this.rebind(action, null);
+  }
+  reset(action) {
+    if (action === void 0) {
+      this.raw.clear();
+      this.parsed.clear();
+      this.applyDefaults();
+      return;
+    }
+    const def = DEFAULT_BINDINGS.find(([name]) => name === action);
+    if (def) {
+      this.rebind(action, [...def[1]]);
+    } else if (this.raw.has(action)) {
+      this.raw.delete(action);
+      this.parsed.delete(action);
+    }
+  }
+  getBindings() {
+    const out = {};
+    for (const [action, list] of this.raw) {
+      out[action] = [...list];
+    }
+    return out;
+  }
+  applyDefaults() {
+    for (const [action, bindings] of DEFAULT_BINDINGS) {
+      this.rebind(action, [...bindings]);
+    }
+  }
+};
+
 // src/canvas/input-handler.ts
 var ZOOM_SENSITIVITY = 1e-3;
 var MIDDLE_BUTTON = 1;
-var NUDGE_KEYS = {
-  ArrowLeft: [-1, 0],
-  ArrowRight: [1, 0],
-  ArrowUp: [0, -1],
-  ArrowDown: [0, 1]
+var NUDGE_DELTAS = {
+  "nudge-left": [-1, 0],
+  "nudge-right": [1, 0],
+  "nudge-up": [0, -1],
+  "nudge-down": [0, 1]
 };
 var InputHandler = class {
   constructor(element, camera, options = {}) {
@@ -1066,7 +1216,13 @@ var InputHandler = class {
       isToolActive: () => this.isToolActive,
       fitToContent: options.fitToContent
     });
+    this.shortcutMap = new ShortcutMap(options.shortcuts?.bindings);
+    this.scope = options.shortcuts?.scope ?? "focus";
     this.element.style.touchAction = "none";
+    if (this.scope === "focus") {
+      this.element.tabIndex = 0;
+      this.element.style.outline = "none";
+    }
     this.bind();
   }
   isPanning = false;
@@ -1085,6 +1241,8 @@ var InputHandler = class {
   deferredDown = null;
   abortController = new AbortController();
   actions;
+  shortcutMap;
+  scope;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -1092,6 +1250,9 @@ var InputHandler = class {
   flushPendingHistory() {
     this.actions.flushPendingNudge();
   }
+  get shortcuts() {
+    return this.shortcutMap;
+  }
   destroy() {
     this.actions.dispose();
     this.abortController.abort();
@@ -1121,6 +1282,7 @@ var InputHandler = class {
     });
   };
   onPointerDown = (e) => {
+    this.focusSelf();
     this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     this.element.setPointerCapture?.(e.pointerId);
     if (this.activePointers.size === 2) {
@@ -1203,57 +1365,13 @@ var InputHandler = class {
     if (target?.isContentEditable) return;
     const tag = target?.tagName;
     if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+    if (!this.isInScope()) return;
     if (e.key === " ") {
       this.spaceHeld = true;
     }
-    if (e.key === "Delete" || e.key === "Backspace") {
-      this.actions.deleteSelected();
-    }
-    if (e.key === "Escape") {
-      this.actions.deselect();
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
-      e.preventDefault();
-      this.actions.undo();
-    }
-    if ((e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey)) {
-      e.preventDefault();
-      this.actions.redo();
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key === "a") {
-      e.preventDefault();
-      this.actions.selectAll();
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
-      e.preventDefault();
-      this.actions.copy();
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
-      e.preventDefault();
-      this.actions.paste();
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key === "d") {
-      e.preventDefault();
-      this.actions.duplicate();
-    }
-    if (e.key === "]") {
-      e.preventDefault();
-      this.actions.zOrder(e.ctrlKey || e.metaKey ? "front" : "forward");
-    }
-    if (e.key === "[") {
-      e.preventDefault();
-      this.actions.zOrder(e.ctrlKey || e.metaKey ? "back" : "backward");
-    }
-    if (e.shiftKey && e.code === "Digit1" && !e.ctrlKey && !e.metaKey && !e.altKey) {
-      e.preventDefault();
-      this.actions.zoomToFit();
-    }
-    const nudgeDelta = NUDGE_KEYS[e.key];
-    if (nudgeDelta) {
-      const [dx, dy] = nudgeDelta;
-      if (this.actions.nudge(dx, dy, e.shiftKey)) {
-        e.preventDefault();
-      }
+    const action = this.shortcutMap.match(e);
+    if (action !== null) {
+      this.runAction(action, e);
     }
   };
   onKeyUp = (e) => {
@@ -1268,6 +1386,79 @@ var InputHandler = class {
       }
     }
   };
+  runAction(action, e) {
+    switch (action) {
+      case "delete":
+        e.preventDefault();
+        this.actions.deleteSelected();
+        return;
+      case "deselect":
+        this.actions.deselect();
+        return;
+      case "undo":
+        e.preventDefault();
+        this.actions.undo();
+        return;
+      case "redo":
+        e.preventDefault();
+        this.actions.redo();
+        return;
+      case "select-all":
+        e.preventDefault();
+        this.actions.selectAll();
+        return;
+      case "copy":
+        e.preventDefault();
+        this.actions.copy();
+        return;
+      case "paste":
+        e.preventDefault();
+        this.actions.paste();
+        return;
+      case "duplicate":
+        e.preventDefault();
+        this.actions.duplicate();
+        return;
+      case "z-forward":
+        e.preventDefault();
+        this.actions.zOrder("forward");
+        return;
+      case "z-backward":
+        e.preventDefault();
+        this.actions.zOrder("backward");
+        return;
+      case "z-front":
+        e.preventDefault();
+        this.actions.zOrder("front");
+        return;
+      case "z-back":
+        e.preventDefault();
+        this.actions.zOrder("back");
+        return;
+      case "zoom-fit":
+        e.preventDefault();
+        this.actions.zoomToFit();
+        return;
+      case "nudge-left":
+      case "nudge-right":
+      case "nudge-up":
+      case "nudge-down": {
+        const delta = NUDGE_DELTAS[action];
+        if (delta && this.actions.nudge(delta[0], delta[1], e.shiftKey)) {
+          e.preventDefault();
+        }
+        return;
+      }
+      default:
+        if (action.startsWith("tool:")) {
+          if (this.isToolActive) return;
+          e.preventDefault();
+          this.toolContext?.switchTool?.(action.slice("tool:".length));
+          return;
+        }
+        console.warn(`[fieldnotes] unknown shortcut action "${action}"`);
+    }
+  }
   startPinch() {
     this.inputFilter.reset();
     this.deferredDown = null;
@@ -1338,6 +1529,15 @@ var InputHandler = class {
     this.toolManager.handlePointerUp(this.toPointerState(e), this.toolContext);
     this.historyRecorder?.commit();
   }
+  isInScope() {
+    if (this.scope === "window") return true;
+    const active = document.activeElement;
+    return active === this.element || this.element.contains(active);
+  }
+  focusSelf() {
+    if (this.scope !== "focus" || this.isInScope()) return;
+    this.element.focus({ preventScroll: true });
+  }
   cancelToolIfActive(e) {
     if (this.isToolActive) {
       this.dispatchToolUp(e);
@@ -3170,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;
@@ -3215,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";
@@ -3231,6 +3455,7 @@ var NoteEditor = class {
     this.blurHandler = null;
     this.keyHandler = null;
     this.pointerHandler = null;
+    this.inputHandler = null;
   }
   destroy(store) {
     this.pendingEditId = null;
@@ -3261,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;
@@ -4699,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;
@@ -4732,7 +4965,8 @@ var Viewport = class {
       toolContext: this.toolContext,
       historyRecorder: this.historyRecorder,
       historyStack: this.history,
-      fitToContent: () => this.fitToContent()
+      fitToContent: () => this.fitToContent(),
+      shortcuts: options.shortcuts
     });
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
@@ -4906,6 +5140,9 @@ var Viewport = class {
   setTool(name) {
     this.toolManager.setTool(name, this.toolContext);
   }
+  get shortcuts() {
+    return this.inputHandler.shortcuts;
+  }
   undo() {
     this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
@@ -5041,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);
@@ -5590,6 +5836,7 @@ var SelectTool = class {
   pendingSingleSelectId = null;
   hasDragged = false;
   resizeAspectRatio = 0;
+  hoveredId = null;
   get selectedIds() {
     return [...this._selectedIds];
   }
@@ -5606,6 +5853,7 @@ var SelectTool = class {
   onDeactivate(ctx) {
     this._selectedIds = [];
     this.mode = { type: "idle" };
+    this.hoveredId = null;
     ctx.setCursor?.("default");
   }
   snap(point, ctx) {
@@ -5613,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;
@@ -5755,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);
@@ -5776,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();
@@ -5824,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;
@@ -6944,7 +7217,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.18.0";
+var VERSION = "0.20.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -7018,6 +7291,7 @@ export {
   getHexDistance,
   isBindable,
   isNearBezier,
+  isNoteContentEmpty,
   parseState,
   sanitizeNoteHtml,
   setFontSize,