@fieldnotes/core 0.31.0 → 0.32.0

package/README.md

@@ -439,7 +439,7 @@ new Viewport(container, {
 
 ```typescript
 new PencilTool({ color: '#ff0000', width: 3, smoothing: 1.5 });
-new EraserTool({ radius: 30 }); // mode: 'partial' (default) splits strokes at the erased span; mode: 'stroke' deletes the whole stroke
+new EraserTool({ radius: 30 }); // radius is screen pixels (converted to world units per zoom); mode: 'partial' (default) splits strokes at the erased span; mode: 'stroke' deletes the whole stroke
 new ArrowTool({ color: '#333', width: 2 });
 ```
 
@@ -563,6 +563,22 @@ const unsub = viewport.onSelectionChange((ids) => {
 // call unsub() to unsubscribe
 ```
 
+## Aligning the Selection
+
+Two methods on `Viewport` let you snap or space selected elements in one undo step.
+
+- **`viewport.alignSelection(edge)`** — `edge`: `AlignEdge` = `'left' | 'center-x' | 'right' | 'top' | 'middle' | 'bottom'`; aligns every selected element to the corresponding edge or center of the selection's bounding box. Needs 2+ selected elements. Locked elements anchor the bounding box without moving.
+- **`viewport.distributeSelection(axis)`** — `axis`: `DistributeAxis` = `'horizontal' | 'vertical'`; evenly spaces selected elements' centers along the axis. Needs 3+ selected elements. Locked elements anchor the span without moving.
+
+```typescript
+viewport.alignSelection('left');       // flush left edges
+viewport.alignSelection('center-x');   // center on vertical axis
+viewport.alignSelection('middle');     // center on horizontal axis
+viewport.distributeSelection('horizontal'); // equal horizontal spacing
+```
+
+Grids are ignored by both operations.
+
 ## Built-in Interactions
 
 | Input                | Action              |

package/dist/index.cjs

@@ -2351,6 +2351,23 @@ function distToBounds(point, bounds) {
 function findBoundArrows(elementId, store) {
   return store.getElementsByType("arrow").filter((a) => a.fromBinding?.elementId === elementId || a.toBinding?.elementId === elementId);
 }
+function updateArrowsBoundToElements(movedIds, store) {
+  const movedNonArrowIds = /* @__PURE__ */ new Set();
+  for (const id of movedIds) {
+    const el = store.getById(id);
+    if (el && el.type !== "arrow") movedNonArrowIds.add(id);
+  }
+  if (movedNonArrowIds.size === 0) return;
+  const updated = /* @__PURE__ */ new Set();
+  for (const id of movedNonArrowIds) {
+    for (const ba of findBoundArrows(id, store)) {
+      if (updated.has(ba.id)) continue;
+      updated.add(ba.id);
+      const updates = updateBoundArrow(ba, store);
+      if (updates) store.update(ba.id, updates);
+    }
+  }
+}
 function updateBoundArrow(arrow, store) {
   if (!arrow.fromBinding && !arrow.toBinding) return null;
   const updates = {};
@@ -3778,6 +3795,19 @@ var NoteEditor = class {
   }
 };
 
+// src/elements/translate.ts
+function translateElementPatch(el, dx, dy) {
+  const position = { x: el.position.x + dx, y: el.position.y + dy };
+  if (el.type === "arrow") {
+    return {
+      position,
+      from: { x: el.from.x + dx, y: el.from.y + dy },
+      to: { x: el.to.x + dx, y: el.to.y + dy }
+    };
+  }
+  return { position };
+}
+
 // src/elements/arrow-label-editor.ts
 var ArrowLabelEditor = class {
   input = null;
@@ -5464,6 +5494,16 @@ function getElementStyle(element) {
 }
 
 // src/canvas/viewport.ts
+function unionBounds(list) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const b of list) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.w);
+    maxY = Math.max(maxY, b.y + b.h);
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
 var EMPTY_IDS = [];
 var ARROW_HIT_THRESHOLD = 10;
 function noop() {
@@ -5873,6 +5913,86 @@ var Viewport = class {
     }
     this.historyRecorder.commit();
   }
+  alignSelection(edge) {
+    const bounded = this.boundedSelection();
+    if (bounded.length < 2) return;
+    const B = unionBounds(bounded.map((e) => e.bounds));
+    this.historyRecorder.begin();
+    const moved = [];
+    for (const { id, el, bounds: b } of bounded) {
+      if (!this.isMovable(el)) continue;
+      let dx = 0;
+      let dy = 0;
+      switch (edge) {
+        case "left":
+          dx = B.x - b.x;
+          break;
+        case "right":
+          dx = B.x + B.w - (b.x + b.w);
+          break;
+        case "center-x":
+          dx = B.x + B.w / 2 - (b.x + b.w / 2);
+          break;
+        case "top":
+          dy = B.y - b.y;
+          break;
+        case "bottom":
+          dy = B.y + B.h - (b.y + b.h);
+          break;
+        case "middle":
+          dy = B.y + B.h / 2 - (b.y + b.h / 2);
+          break;
+      }
+      if (dx === 0 && dy === 0) continue;
+      this.store.update(id, translateElementPatch(el, dx, dy));
+      moved.push(id);
+    }
+    updateArrowsBoundToElements(moved, this.store);
+    this.historyRecorder.commit();
+    this.requestRender();
+  }
+  distributeSelection(axis) {
+    const bounded = this.boundedSelection();
+    if (bounded.length < 3) return;
+    const center = (b) => axis === "horizontal" ? b.x + b.w / 2 : b.y + b.h / 2;
+    const sorted = [...bounded].sort((p, q) => center(p.bounds) - center(q.bounds));
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    if (!first || !last) return;
+    const c0 = center(first.bounds);
+    const cN = center(last.bounds);
+    const n = sorted.length;
+    this.historyRecorder.begin();
+    const moved = [];
+    for (let i = 1; i < n - 1; i++) {
+      const item = sorted[i];
+      if (!item || !this.isMovable(item.el)) continue;
+      const target = c0 + i * (cN - c0) / (n - 1);
+      const delta = target - center(item.bounds);
+      if (delta === 0) continue;
+      const [dx, dy] = axis === "horizontal" ? [delta, 0] : [0, delta];
+      this.store.update(item.id, translateElementPatch(item.el, dx, dy));
+      moved.push(item.id);
+    }
+    updateArrowsBoundToElements(moved, this.store);
+    this.historyRecorder.commit();
+    this.requestRender();
+  }
+  boundedSelection() {
+    const out = [];
+    for (const id of this.getSelectedIds()) {
+      const el = this.store.getById(id);
+      if (!el) continue;
+      const bounds = getElementBounds(el);
+      if (bounds) out.push({ id, el, bounds });
+    }
+    return out;
+  }
+  isMovable(el) {
+    if (el.locked) return false;
+    if (el.type === "arrow" && (el.fromBinding ?? el.toBinding)) return false;
+    return true;
+  }
   getRenderStats() {
     return this.renderLoop.getStats();
   }
@@ -6457,11 +6577,12 @@ var EraserTool = class {
   }
   eraseAt(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const worldRadius = this.radius / ctx.camera.zoom;
     const queryBounds = {
-      x: world.x - this.radius,
-      y: world.y - this.radius,
-      w: this.radius * 2,
-      h: this.radius * 2
+      x: world.x - worldRadius,
+      y: world.y - worldRadius,
+      w: worldRadius * 2,
+      h: worldRadius * 2
     };
     const candidates = ctx.store.queryRect(queryBounds);
     let erased = false;
@@ -6469,14 +6590,14 @@ var EraserTool = class {
       if (el.type !== "stroke") continue;
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-      if (!this.strokeIntersects(el, world)) continue;
+      if (!this.strokeIntersects(el, world, worldRadius)) continue;
       if (this.mode === "stroke") {
         ctx.store.remove(el.id);
         erased = true;
         continue;
       }
       const localEraser = { x: world.x - el.position.x, y: world.y - el.position.y };
-      const runs = erasePoints(el.points, localEraser, this.radius);
+      const runs = erasePoints(el.points, localEraser, worldRadius);
       if (runs === null) continue;
       ctx.store.remove(el.id);
       for (const run of runs) {
@@ -6496,8 +6617,8 @@ var EraserTool = class {
     }
     if (erased) ctx.requestRender();
   }
-  strokeIntersects(stroke, point) {
-    return hitTestStroke(stroke, point, this.radius);
+  strokeIntersects(stroke, point, worldRadius) {
+    return hitTestStroke(stroke, point, worldRadius);
   }
 };
 
@@ -6879,40 +7000,15 @@ 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);
-      }
-    }
+    updateArrowsBoundToElements(ids, ctx.store);
   }
   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 }
-        });
-      }
+      if (el.type === "arrow" && (el.fromBinding || el.toBinding)) continue;
+      ctx.store.update(id, translateElementPatch(el, dx, dy));
       moved = true;
     }
     if (moved) {
@@ -8104,7 +8200,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.31.0";
+var VERSION = "0.32.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,