@fieldnotes/core 0.32.0 → 0.33.0

package/README.md

@@ -579,6 +579,15 @@ 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

@@ -5576,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,
@@ -5680,6 +5682,7 @@ var Viewport = class {
   marginViewport;
   resizeObserver = null;
   _snapToGrid = false;
+  _smartGuides = false;
   _gridSize;
   renderLoop;
   domNodeManager;
@@ -5700,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));
@@ -6737,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;
@@ -6758,6 +6807,9 @@ var SelectTool = class {
   ctx = null;
   pendingSingleSelectId = null;
   hasDragged = false;
+  activeGuides = [];
+  dragSnapTargets = null;
+  dragVisibleRect = null;
   resizeAspectRatio = 0;
   hoveredId = null;
   get selectedIds() {
@@ -6789,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) {
@@ -6797,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;
@@ -6897,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;
@@ -6905,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: {
@@ -6921,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 }
           });
         }
       }
@@ -6951,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);
@@ -6998,6 +7084,32 @@ var SelectTool = class {
         }
       }
     }
+    this.renderGuideLines(canvasCtx);
+  }
+  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);
@@ -8200,7 +8312,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.32.0";
+var VERSION = "0.33.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,