@fieldnotes/core 0.31.1 → 0.33.0

package/README.md

@@ -563,6 +563,31 @@ 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.
+
+## Smart Alignment Guides
+
+Call `viewport.setSmartGuides(true)` to enable drag-time alignment snapping. While dragging a selection, its edges and centers snap to the edges and centers of nearby visible elements (within 6 screen pixels), and guide lines are drawn at each matched alignment. Smart guides replace grid snapping for the duration of the drag; the result is still committed as a single undo step.
+
+```typescript
+viewport.setSmartGuides(true);  // enable
+viewport.setSmartGuides(false); // disable (default)
+```
+
 ## 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() {
@@ -5536,7 +5576,9 @@ var Viewport = class {
       gridSize: this._gridSize,
       activeLayerId: this.layerManager.activeLayerId,
       isLayerVisible: (id) => this.layerManager.isLayerVisible(id),
-      isLayerLocked: (id) => this.layerManager.isLayerLocked(id)
+      isLayerLocked: (id) => this.layerManager.isLayerLocked(id),
+      smartGuides: false,
+      getVisibleRect: () => this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight)
     };
     this.inputHandler = new InputHandler(this.wrapper, this.camera, {
       toolManager: this.toolManager,
@@ -5640,6 +5682,7 @@ var Viewport = class {
   marginViewport;
   resizeObserver = null;
   _snapToGrid = false;
+  _smartGuides = false;
   _gridSize;
   renderLoop;
   domNodeManager;
@@ -5660,6 +5703,13 @@ var Viewport = class {
     this._snapToGrid = enabled;
     this.toolContext.snapToGrid = enabled;
   }
+  get smartGuides() {
+    return this._smartGuides;
+  }
+  setSmartGuides(enabled) {
+    this._smartGuides = enabled;
+    this.toolContext.smartGuides = 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));
@@ -5873,6 +5923,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();
   }
@@ -6617,8 +6747,47 @@ function renderArrowHandles(canvasCtx, arrow, zoom) {
   }
 }
 
+// src/elements/snap-guides.ts
+function xAnchors(b) {
+  return { lo: b.x, mid: b.x + b.w / 2, hi: b.x + b.w };
+}
+function yAnchors(b) {
+  return { lo: b.y, mid: b.y + b.h / 2, hi: b.y + b.h };
+}
+function bestAxisSnap(moving, targets, anchorsFn, threshold) {
+  let best = null;
+  for (const t of targets) {
+    const ta = anchorsFn(t);
+    const pairs = [
+      // colinear alignment: same-type edges/centers line up
+      [ta.lo - moving.lo, ta.lo],
+      [ta.mid - moving.mid, ta.mid],
+      [ta.hi - moving.hi, ta.hi],
+      // abutment: the moving box sits flush against the target's opposite edge
+      [ta.lo - moving.hi, ta.lo],
+      [ta.hi - moving.lo, ta.hi]
+    ];
+    for (const [delta, position] of pairs) {
+      const abs = Math.abs(delta);
+      if (abs <= threshold && (best === null || abs < Math.abs(best.delta))) {
+        best = { delta, position };
+      }
+    }
+  }
+  return best;
+}
+function computeSnapGuides(moving, targets, threshold) {
+  const xSnap = bestAxisSnap(xAnchors(moving), targets, xAnchors, threshold);
+  const ySnap = bestAxisSnap(yAnchors(moving), targets, yAnchors, threshold);
+  const guides = [];
+  if (xSnap) guides.push({ axis: "x", position: xSnap.position });
+  if (ySnap) guides.push({ axis: "y", position: ySnap.position });
+  return { dx: xSnap?.delta ?? 0, dy: ySnap?.delta ?? 0, guides };
+}
+
 // src/tools/select-tool.ts
 var HANDLE_SIZE = 8;
+var SNAP_PX = 6;
 var HANDLE_HIT_PADDING2 = 4;
 var SELECTION_PAD = 4;
 var MIN_ELEMENT_SIZE = 20;
@@ -6638,6 +6807,9 @@ var SelectTool = class {
   ctx = null;
   pendingSingleSelectId = null;
   hasDragged = false;
+  activeGuides = [];
+  dragSnapTargets = null;
+  dragVisibleRect = null;
   resizeAspectRatio = 0;
   hoveredId = null;
   get selectedIds() {
@@ -6669,6 +6841,9 @@ var SelectTool = class {
     this.setSelectedIds([]);
     this.mode = { type: "idle" };
     this.hoveredId = null;
+    this.activeGuides = [];
+    this.dragSnapTargets = null;
+    this.dragVisibleRect = null;
     ctx.setCursor?.("default");
   }
   snap(point, ctx) {
@@ -6677,6 +6852,8 @@ var SelectTool = class {
   onPointerDown(state, ctx) {
     this.ctx = ctx;
     this.setHovered(null, ctx);
+    this.dragSnapTargets = null;
+    this.dragVisibleRect = null;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.lastWorld = this.snap(world, ctx);
     this.currentWorld = world;
@@ -6777,6 +6954,31 @@ var SelectTool = class {
       const dx = snapped.x - this.lastWorld.x;
       const dy = snapped.y - this.lastWorld.y;
       this.lastWorld = snapped;
+      let adjDx = dx;
+      let adjDy = dy;
+      this.activeGuides = [];
+      if (ctx.smartGuides) {
+        if (this.dragSnapTargets === null) {
+          const selSet = new Set(this._selectedIds);
+          this.dragVisibleRect = ctx.getVisibleRect?.() ?? null;
+          const candidates = (this.dragVisibleRect ? ctx.store.queryRect(this.dragVisibleRect) : ctx.store.getAll()).filter((el) => !selSet.has(el.id) && el.type !== "grid");
+          const targets = [];
+          for (const el of candidates) {
+            const b = getElementBounds(el);
+            if (b) targets.push(b);
+          }
+          this.dragSnapTargets = targets;
+        }
+        const selectedEls = this._selectedIds.map((id) => ctx.store.getById(id)).filter((el) => !!el && !el.locked);
+        const base = getElementsBoundingBox(selectedEls);
+        if (base) {
+          const moving = { x: base.x + dx, y: base.y + dy, w: base.w, h: base.h };
+          const res = computeSnapGuides(moving, this.dragSnapTargets, SNAP_PX / ctx.camera.zoom);
+          adjDx = dx + res.dx;
+          adjDy = dy + res.dy;
+          this.activeGuides = res.guides;
+        }
+      }
       for (const id of this._selectedIds) {
         const el = ctx.store.getById(id);
         if (!el || el.locked) continue;
@@ -6785,13 +6987,13 @@ var SelectTool = class {
             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 }
+            position: { x: el.position.x + adjDx, y: el.position.y + adjDy },
+            from: { x: el.from.x + adjDx, y: el.from.y + adjDy },
+            to: { x: el.to.x + adjDx, y: el.to.y + adjDy }
           });
-        } else if (ctx.gridType && "size" in el) {
-          const centerX = el.position.x + el.size.w / 2 + dx;
-          const centerY = el.position.y + el.size.h / 2 + dy;
+        } else if (!ctx.smartGuides && ctx.gridType && "size" in el) {
+          const centerX = el.position.x + el.size.w / 2 + adjDx;
+          const centerY = el.position.y + el.size.h / 2 + adjDy;
           const snappedCenter = this.snap({ x: centerX, y: centerY }, ctx);
           ctx.store.update(id, {
             position: {
@@ -6801,7 +7003,7 @@ var SelectTool = class {
           });
         } else {
           ctx.store.update(id, {
-            position: { x: el.position.x + dx, y: el.position.y + dy }
+            position: { x: el.position.x + adjDx, y: el.position.y + adjDy }
           });
         }
       }
@@ -6831,6 +7033,10 @@ var SelectTool = class {
     this.hasDragged = false;
     const resizedNoteId = this.mode.type === "resizing" ? this.mode.elementId : null;
     this.mode = { type: "idle" };
+    this.activeGuides = [];
+    this.dragSnapTargets = null;
+    this.dragVisibleRect = null;
+    ctx.requestRender();
     ctx.setCursor?.("default");
     if (resizedNoteId !== null) {
       const el = ctx.store.getById(resizedNoteId);
@@ -6878,42 +7084,43 @@ var SelectTool = class {
         }
       }
     }
+    this.renderGuideLines(canvasCtx);
   }
-  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);
+  renderGuideLines(canvasCtx) {
+    if (this.mode.type !== "dragging" || !this.ctx || this.activeGuides.length === 0) return;
+    const zoom = this.ctx.camera.zoom;
+    const rect = this.dragVisibleRect;
+    canvasCtx.save();
+    canvasCtx.strokeStyle = "#FF4081";
+    canvasCtx.lineWidth = 1 / zoom;
+    canvasCtx.setLineDash([]);
+    for (const g of this.activeGuides) {
+      canvasCtx.beginPath();
+      if (g.axis === "x") {
+        const y0 = rect ? rect.y : this.currentWorld.y - 1e5;
+        const y1 = rect ? rect.y + rect.h : this.currentWorld.y + 1e5;
+        canvasCtx.moveTo(g.position, y0);
+        canvasCtx.lineTo(g.position, y1);
+      } else {
+        const x0 = rect ? rect.x : this.currentWorld.x - 1e5;
+        const x1 = rect ? rect.x + rect.w : this.currentWorld.x + 1e5;
+        canvasCtx.moveTo(x0, g.position);
+        canvasCtx.lineTo(x1, g.position);
       }
+      canvasCtx.stroke();
     }
+    canvasCtx.restore();
+  }
+  updateArrowsBoundTo(ids, ctx) {
+    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) {
@@ -8105,7 +8312,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.31.1";
+var VERSION = "0.33.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,