@fieldnotes/core 0.16.0 → 0.17.0

package/dist/index.cjs

@@ -920,9 +920,228 @@ function createId(prefix) {
   return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
 }
 
+// src/canvas/keyboard-actions.ts
+var KeyboardActions = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  clipboard = [];
+  pasteCount = 0;
+  nudgeTimer = null;
+  dispose() {
+    this.flushPendingNudge();
+  }
+  selectTool() {
+    const tm = this.deps.getToolManager();
+    const ctx = this.deps.getToolContext();
+    if (!tm || !ctx) return null;
+    const tool = tm.activeTool;
+    if (tool?.name !== "select") return null;
+    return { tool, ctx };
+  }
+  nudge(dx, dy, byCell) {
+    if (this.deps.isToolActive()) return false;
+    const sel = this.selectTool();
+    if (!sel) return false;
+    if (sel.tool.selectedIds.length === 0) return false;
+    const step = byCell ? sel.ctx.gridSize ?? 10 : 1;
+    if (this.nudgeTimer === null) {
+      this.deps.getHistoryRecorder()?.begin();
+    } else {
+      clearTimeout(this.nudgeTimer);
+    }
+    const moved = sel.tool.nudgeSelection(dx * step, dy * step, sel.ctx);
+    this.nudgeTimer = setTimeout(() => this.flushPendingNudge(), 400);
+    return moved;
+  }
+  flushPendingNudge() {
+    if (this.nudgeTimer === null) return;
+    clearTimeout(this.nudgeTimer);
+    this.nudgeTimer = null;
+    this.deps.getHistoryRecorder()?.commit();
+  }
+  deleteSelected() {
+    this.flushPendingNudge();
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.tool.selectedIds;
+    if (ids.length === 0) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.begin();
+    for (const id of ids) {
+      sel.ctx.store.remove(id);
+    }
+    recorder?.commit();
+    sel.ctx.requestRender();
+  }
+  undo() {
+    this.flushPendingNudge();
+    const ctx = this.deps.getToolContext();
+    const stack = this.deps.getHistoryStack();
+    if (!stack || !ctx) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.pause();
+    stack.undo(ctx.store);
+    recorder?.resume();
+    ctx.requestRender();
+  }
+  redo() {
+    this.flushPendingNudge();
+    const ctx = this.deps.getToolContext();
+    const stack = this.deps.getHistoryStack();
+    if (!stack || !ctx) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.pause();
+    stack.redo(ctx.store);
+    recorder?.resume();
+    ctx.requestRender();
+  }
+  copy() {
+    if (this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.tool.selectedIds;
+    if (ids.length === 0) return;
+    this.clipboard = [];
+    for (const id of ids) {
+      const el = sel.ctx.store.getById(id);
+      if (el) this.clipboard.push(structuredClone(el));
+    }
+    this.pasteCount = 0;
+  }
+  paste() {
+    this.flushPendingNudge();
+    if (this.clipboard.length === 0 || this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    this.pasteCount++;
+    this.insertClones(this.clipboard, this.pasteCount * 20, sel);
+  }
+  duplicate() {
+    this.flushPendingNudge();
+    if (this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    const source = [];
+    for (const id of sel.tool.selectedIds) {
+      const el = sel.ctx.store.getById(id);
+      if (el) source.push(el);
+    }
+    if (source.length === 0) return;
+    this.insertClones(source, 20, sel);
+  }
+  deselect() {
+    if (this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    if (sel.tool.selectedIds.length === 0) return;
+    sel.tool.setSelection([]);
+    sel.ctx.requestRender();
+  }
+  selectAll() {
+    if (this.deps.isToolActive()) return;
+    const tm = this.deps.getToolManager();
+    const ctx = this.deps.getToolContext();
+    if (!tm || !ctx) return;
+    if (tm.activeTool?.name !== "select") {
+      ctx.switchTool?.("select");
+    }
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.ctx.store.getAll().filter(
+      (el) => !el.locked && (sel.ctx.isLayerVisible?.(el.layerId) ?? true) && !(sel.ctx.isLayerLocked?.(el.layerId) ?? false)
+    ).map((el) => el.id);
+    sel.tool.setSelection(ids);
+    sel.ctx.requestRender();
+  }
+  zoomToFit() {
+    if (this.deps.isToolActive()) return;
+    this.deps.fitToContent?.();
+  }
+  zOrder(operation) {
+    this.flushPendingNudge();
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.tool.selectedIds;
+    if (ids.length === 0) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.begin();
+    for (const id of ids) {
+      switch (operation) {
+        case "forward":
+          sel.ctx.store.bringForward(id);
+          break;
+        case "backward":
+          sel.ctx.store.sendBackward(id);
+          break;
+        case "front":
+          sel.ctx.store.bringToFront(id);
+          break;
+        case "back":
+          sel.ctx.store.sendToBack(id);
+          break;
+      }
+    }
+    recorder?.commit();
+    sel.ctx.requestRender();
+  }
+  insertClones(source, offset, sel) {
+    const idMap = /* @__PURE__ */ new Map();
+    for (const el of source) {
+      idMap.set(el.id, createId(el.type));
+    }
+    const newIds = [];
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.begin();
+    for (const el of source) {
+      const clone = structuredClone(el);
+      const newId = idMap.get(el.id);
+      if (!newId) continue;
+      clone.id = newId;
+      clone.position = { x: clone.position.x + offset, y: clone.position.y + offset };
+      if (clone.type === "arrow") {
+        const arrow = clone;
+        arrow.from = { x: arrow.from.x + offset, y: arrow.from.y + offset };
+        arrow.to = { x: arrow.to.x + offset, y: arrow.to.y + offset };
+        delete arrow.cachedControlPoint;
+        if (arrow.fromBinding) {
+          const newTarget = idMap.get(arrow.fromBinding.elementId);
+          if (newTarget) {
+            arrow.fromBinding = { elementId: newTarget };
+          } else {
+            delete arrow.fromBinding;
+          }
+        }
+        if (arrow.toBinding) {
+          const newTarget = idMap.get(arrow.toBinding.elementId);
+          if (newTarget) {
+            arrow.toBinding = { elementId: newTarget };
+          } else {
+            delete arrow.toBinding;
+          }
+        }
+      }
+      if (sel.ctx.activeLayerId) {
+        clone.layerId = sel.ctx.activeLayerId;
+      }
+      sel.ctx.store.add(clone);
+      newIds.push(clone.id);
+    }
+    recorder?.commit();
+    sel.tool.setSelection(newIds);
+    sel.ctx.requestRender();
+  }
+};
+
 // 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 InputHandler = class {
   constructor(element, camera, options = {}) {
     this.element = element;
@@ -931,6 +1150,14 @@ var InputHandler = class {
     this.toolContext = options.toolContext ?? null;
     this.historyRecorder = options.historyRecorder ?? null;
     this.historyStack = options.historyStack ?? null;
+    this.actions = new KeyboardActions({
+      getToolManager: () => this.toolManager,
+      getToolContext: () => this.toolContext,
+      getHistoryRecorder: () => this.historyRecorder,
+      getHistoryStack: () => this.historyStack,
+      isToolActive: () => this.isToolActive,
+      fitToContent: options.fitToContent
+    });
     this.element.style.touchAction = "none";
     this.bind();
   }
@@ -949,13 +1176,16 @@ var InputHandler = class {
   inputFilter = new InputFilter();
   deferredDown = null;
   abortController = new AbortController();
-  clipboard = [];
-  pasteCount = 0;
+  actions;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
   }
+  flushPendingHistory() {
+    this.actions.flushPendingNudge();
+  }
   destroy() {
+    this.actions.dispose();
     this.abortController.abort();
     this.inputFilter.reset();
     this.deferredDown = null;
@@ -1061,36 +1291,61 @@ var InputHandler = class {
     }
   };
   onKeyDown = (e) => {
-    if (e.target?.isContentEditable) return;
+    const target = e.target;
+    if (target?.isContentEditable) return;
+    const tag = target?.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
     if (e.key === " ") {
       this.spaceHeld = true;
     }
     if (e.key === "Delete" || e.key === "Backspace") {
-      this.deleteSelected();
+      this.actions.deleteSelected();
+    }
+    if (e.key === "Escape") {
+      this.actions.deselect();
     }
     if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
       e.preventDefault();
-      this.handleUndo();
+      this.actions.undo();
     }
     if ((e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey)) {
       e.preventDefault();
-      this.handleRedo();
+      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.handleCopy();
+      this.actions.copy();
     }
     if ((e.ctrlKey || e.metaKey) && e.key === "v") {
       e.preventDefault();
-      this.handlePaste();
+      this.actions.paste();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "d") {
+      e.preventDefault();
+      this.actions.duplicate();
     }
     if (e.key === "]") {
       e.preventDefault();
-      this.handleZOrder(e.ctrlKey || e.metaKey ? "front" : "forward");
+      this.actions.zOrder(e.ctrlKey || e.metaKey ? "front" : "forward");
     }
     if (e.key === "[") {
       e.preventDefault();
-      this.handleZOrder(e.ctrlKey || e.metaKey ? "back" : "backward");
+      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();
+      }
     }
   };
   onKeyUp = (e) => {
@@ -1154,6 +1409,7 @@ var InputHandler = class {
   }
   dispatchToolDown(e) {
     if (!this.toolManager || !this.toolContext) return;
+    this.actions.flushPendingNudge();
     this.historyRecorder?.begin();
     this.isToolActive = true;
     this.toolManager.handlePointerDown(this.toPointerState(e), this.toolContext);
@@ -1174,127 +1430,6 @@ var InputHandler = class {
     this.toolManager.handlePointerUp(this.toPointerState(e), this.toolContext);
     this.historyRecorder?.commit();
   }
-  deleteSelected() {
-    if (!this.toolManager || !this.toolContext) return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    const ids = selectTool.selectedIds;
-    if (ids.length === 0) return;
-    this.historyRecorder?.begin();
-    for (const id of ids) {
-      this.toolContext.store.remove(id);
-    }
-    this.historyRecorder?.commit();
-    this.toolContext.requestRender();
-  }
-  handleUndo() {
-    if (!this.historyStack || !this.toolContext) return;
-    this.historyRecorder?.pause();
-    this.historyStack.undo(this.toolContext.store);
-    this.historyRecorder?.resume();
-    this.toolContext.requestRender();
-  }
-  handleRedo() {
-    if (!this.historyStack || !this.toolContext) return;
-    this.historyRecorder?.pause();
-    this.historyStack.redo(this.toolContext.store);
-    this.historyRecorder?.resume();
-    this.toolContext.requestRender();
-  }
-  handleCopy() {
-    if (!this.toolManager || !this.toolContext || this.isToolActive) return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    const ids = selectTool.selectedIds;
-    if (ids.length === 0) return;
-    this.clipboard = [];
-    for (const id of ids) {
-      const el = this.toolContext.store.getById(id);
-      if (el) this.clipboard.push(structuredClone(el));
-    }
-    this.pasteCount = 0;
-  }
-  handlePaste() {
-    if (!this.toolManager || !this.toolContext || this.clipboard.length === 0 || this.isToolActive)
-      return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    this.pasteCount++;
-    const offset = this.pasteCount * 20;
-    const idMap = /* @__PURE__ */ new Map();
-    for (const el of this.clipboard) {
-      idMap.set(el.id, createId(el.type));
-    }
-    const newIds = [];
-    this.historyRecorder?.begin();
-    for (const el of this.clipboard) {
-      const clone = structuredClone(el);
-      const newId = idMap.get(el.id);
-      if (!newId) continue;
-      clone.id = newId;
-      clone.position = { x: clone.position.x + offset, y: clone.position.y + offset };
-      if (clone.type === "arrow") {
-        const arrow = clone;
-        arrow.from = { x: arrow.from.x + offset, y: arrow.from.y + offset };
-        arrow.to = { x: arrow.to.x + offset, y: arrow.to.y + offset };
-        delete arrow.cachedControlPoint;
-        if (arrow.fromBinding) {
-          const newTarget = idMap.get(arrow.fromBinding.elementId);
-          if (newTarget) {
-            arrow.fromBinding = { elementId: newTarget };
-          } else {
-            delete arrow.fromBinding;
-          }
-        }
-        if (arrow.toBinding) {
-          const newTarget = idMap.get(arrow.toBinding.elementId);
-          if (newTarget) {
-            arrow.toBinding = { elementId: newTarget };
-          } else {
-            delete arrow.toBinding;
-          }
-        }
-      }
-      if (this.toolContext.activeLayerId) {
-        clone.layerId = this.toolContext.activeLayerId;
-      }
-      this.toolContext.store.add(clone);
-      newIds.push(clone.id);
-    }
-    this.historyRecorder?.commit();
-    selectTool.setSelection(newIds);
-    this.toolContext.requestRender();
-  }
-  handleZOrder(operation) {
-    if (!this.toolManager || !this.toolContext) return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    const ids = selectTool.selectedIds;
-    if (ids.length === 0) return;
-    this.historyRecorder?.begin();
-    for (const id of ids) {
-      switch (operation) {
-        case "forward":
-          this.toolContext.store.bringForward(id);
-          break;
-        case "backward":
-          this.toolContext.store.sendBackward(id);
-          break;
-        case "front":
-          this.toolContext.store.bringToFront(id);
-          break;
-        case "back":
-          this.toolContext.store.sendToBack(id);
-          break;
-      }
-    }
-    this.historyRecorder?.commit();
-    this.toolContext.requestRender();
-  }
   cancelToolIfActive(e) {
     if (this.isToolActive) {
       this.dispatchToolUp(e);
@@ -3247,6 +3382,26 @@ var NoteEditor = class {
   }
 };
 
+// src/elements/bounds.ts
+function getElementsBoundingBox(elements) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let found = false;
+  for (const el of elements) {
+    const b = getElementBounds(el);
+    if (!b) continue;
+    found = true;
+    if (b.x < minX) minX = b.x;
+    if (b.y < minY) minY = b.y;
+    if (b.x + b.w > maxX) maxX = b.x + b.w;
+    if (b.y + b.h > maxY) maxY = b.y + b.h;
+  }
+  if (!found) return null;
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+
 // src/tools/tool-manager.ts
 var ToolManager = class {
   tools = /* @__PURE__ */ new Map();
@@ -3472,6 +3627,9 @@ var HistoryRecorder = class {
     this.recording = true;
   }
   begin() {
+    if (this.transaction !== null) {
+      this.commit();
+    }
     this.transaction = [];
     this.updateSnapshots.clear();
   }
@@ -4660,7 +4818,8 @@ var Viewport = class {
       toolManager: this.toolManager,
       toolContext: this.toolContext,
       historyRecorder: this.historyRecorder,
-      historyStack: this.history
+      historyStack: this.history,
+      fitToContent: () => this.fitToContent()
     });
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
@@ -4770,6 +4929,13 @@ var Viewport = class {
     this._snapToGrid = enabled;
     this.toolContext.snapToGrid = enabled;
   }
+  fitToContent(padding = 40) {
+    if (this.wrapper.clientWidth === 0 || this.wrapper.clientHeight === 0) return;
+    const visibleElements = this.store.getAll().filter((el) => this.layerManager.isLayerVisible(el.layerId));
+    const bbox = getElementsBoundingBox(visibleElements);
+    if (!bbox) return;
+    this.camera.fitToContent(bbox, this.wrapper.clientWidth, this.wrapper.clientHeight, padding);
+  }
   requestRender() {
     this.renderLoop.requestRender();
   }
@@ -4788,6 +4954,7 @@ var Viewport = class {
     return exportImage(this.store, options, this.layerManager);
   }
   loadState(state) {
+    this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
     this.noteEditor.destroy(this.store);
     this.domNodeManager.clearDomNodes();
@@ -4824,6 +4991,7 @@ var Viewport = class {
     this.loadState(parseState(json));
   }
   undo() {
+    this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
     const result = this.history.undo(this.store);
     this.historyRecorder.resume();
@@ -4831,6 +4999,7 @@ var Viewport = class {
     return result;
   }
   redo() {
+    this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
     const result = this.history.redo(this.store);
     this.historyRecorder.resume();
@@ -5150,26 +5319,6 @@ var Viewport = class {
   }
 };
 
-// src/elements/bounds.ts
-function getElementsBoundingBox(elements) {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  let found = false;
-  for (const el of elements) {
-    const b = getElementBounds(el);
-    if (!b) continue;
-    found = true;
-    if (b.x < minX) minX = b.x;
-    if (b.y < minY) minY = b.y;
-    if (b.x + b.w > maxX) maxX = b.x + b.w;
-    if (b.y + b.h > maxY) maxY = b.y + b.h;
-  }
-  if (!found) return null;
-  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-}
-
 // src/tools/hand-tool.ts
 var HandTool = class {
   name = "hand";
@@ -5661,23 +5810,7 @@ var SelectTool = class {
           });
         }
       }
-      const movedNonArrowIds = /* @__PURE__ */ new Set();
-      for (const id of this._selectedIds) {
-        const el = ctx.store.getById(id);
-        if (el && el.type !== "arrow") movedNonArrowIds.add(id);
-      }
-      if (movedNonArrowIds.size > 0) {
-        const updatedArrows = /* @__PURE__ */ new Set();
-        for (const id of movedNonArrowIds) {
-          const boundArrows = findBoundArrows(id, ctx.store);
-          for (const ba of boundArrows) {
-            if (updatedArrows.has(ba.id)) continue;
-            updatedArrows.add(ba.id);
-            const updates = updateBoundArrow(ba, ctx.store);
-            if (updates) ctx.store.update(ba.id, updates);
-          }
-        }
-      }
+      this.updateArrowsBoundTo(this._selectedIds, ctx);
       ctx.requestRender();
       return;
     }
@@ -5728,6 +5861,49 @@ var SelectTool = class {
       }
     }
   }
+  updateArrowsBoundTo(ids, ctx) {
+    const movedNonArrowIds = /* @__PURE__ */ new Set();
+    for (const id of ids) {
+      const el = ctx.store.getById(id);
+      if (el && el.type !== "arrow") movedNonArrowIds.add(id);
+    }
+    if (movedNonArrowIds.size === 0) return;
+    const updatedArrows = /* @__PURE__ */ new Set();
+    for (const id of movedNonArrowIds) {
+      const boundArrows = findBoundArrows(id, ctx.store);
+      for (const ba of boundArrows) {
+        if (updatedArrows.has(ba.id)) continue;
+        updatedArrows.add(ba.id);
+        const updates = updateBoundArrow(ba, ctx.store);
+        if (updates) ctx.store.update(ba.id, updates);
+      }
+    }
+  }
+  nudgeSelection(dx, dy, ctx) {
+    let moved = false;
+    for (const id of this._selectedIds) {
+      const el = ctx.store.getById(id);
+      if (!el || el.locked) continue;
+      if (el.type === "arrow") {
+        if (el.fromBinding || el.toBinding) continue;
+        ctx.store.update(id, {
+          position: { x: el.position.x + dx, y: el.position.y + dy },
+          from: { x: el.from.x + dx, y: el.from.y + dy },
+          to: { x: el.to.x + dx, y: el.to.y + dy }
+        });
+      } else {
+        ctx.store.update(id, {
+          position: { x: el.position.x + dx, y: el.position.y + dy }
+        });
+      }
+      moved = true;
+    }
+    if (moved) {
+      this.updateArrowsBoundTo(this._selectedIds, ctx);
+      ctx.requestRender();
+    }
+    return moved;
+  }
   updateHoverCursor(world, ctx) {
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
@@ -5805,11 +5981,7 @@ var SelectTool = class {
       position: { x, y },
       size: { w, h }
     });
-    const boundArrows = findBoundArrows(this.mode.elementId, ctx.store);
-    for (const ba of boundArrows) {
-      const updates = updateBoundArrow(ba, ctx.store);
-      if (updates) ctx.store.update(ba.id, updates);
-    }
+    this.updateArrowsBoundTo([this.mode.elementId], ctx);
     ctx.requestRender();
   }
   hitTestResizeHandle(world, ctx) {
@@ -6856,7 +7028,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.16.0";
+var VERSION = "0.17.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,