@fieldnotes/core 0.31.1 → 0.33.0

package/dist/index.d.cts

@@ -200,6 +200,8 @@ interface ToolContext {
     activeLayerId?: string;
     isLayerVisible?: (layerId: string) => boolean;
     isLayerLocked?: (layerId: string) => boolean;
+    smartGuides?: boolean;
+    getVisibleRect?: () => Bounds;
 }
 interface PointerState {
     x: number;
@@ -410,6 +412,8 @@ interface ElementStyle {
 declare function styleToPatch(element: CanvasElement, style: ElementStyle): Partial<CanvasElement>;
 declare function getElementStyle(element: CanvasElement): ElementStyle;
 
+type AlignEdge = 'left' | 'center-x' | 'right' | 'top' | 'middle' | 'bottom';
+type DistributeAxis = 'horizontal' | 'vertical';
 interface GridInfo {
     gridType: 'square' | 'hex';
     hexOrientation: 'pointy' | 'flat';
@@ -458,6 +462,7 @@ declare class Viewport {
     private readonly marginViewport;
     private resizeObserver;
     private _snapToGrid;
+    private _smartGuides;
     private readonly _gridSize;
     private readonly renderLoop;
     private readonly domNodeManager;
@@ -472,6 +477,8 @@ declare class Viewport {
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
     setSnapToGrid(enabled: boolean): void;
+    get smartGuides(): boolean;
+    setSmartGuides(enabled: boolean): void;
     fitToContent(padding?: number): void;
     requestRender(): void;
     exportState(): CanvasState;
@@ -516,6 +523,10 @@ declare class Viewport {
     onSelectionChange(listener: () => void): () => void;
     getSelectionStyle(): ElementStyle | null;
     applyStyleToSelection(style: ElementStyle): void;
+    alignSelection(edge: AlignEdge): void;
+    distributeSelection(axis: DistributeAxis): void;
+    private boundedSelection;
+    private isMovable;
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
@@ -743,6 +754,9 @@ declare class SelectTool implements Tool {
     private ctx;
     private pendingSingleSelectId;
     private hasDragged;
+    private activeGuides;
+    private dragSnapTargets;
+    private dragVisibleRect;
     private resizeAspectRatio;
     private hoveredId;
     get selectedIds(): string[];
@@ -758,6 +772,7 @@ declare class SelectTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     onHover(state: PointerState, ctx: ToolContext): void;
     renderOverlay(canvasCtx: CanvasRenderingContext2D): void;
+    private renderGuideLines;
     private updateArrowsBoundTo;
     nudgeSelection(dx: number, dy: number, ctx: ToolContext): boolean;
     private updateHoverCursor;
@@ -973,6 +988,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.31.1";
+declare const VERSION = "0.33.0";
 
-export { type ActiveFormats, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -200,6 +200,8 @@ interface ToolContext {
     activeLayerId?: string;
     isLayerVisible?: (layerId: string) => boolean;
     isLayerLocked?: (layerId: string) => boolean;
+    smartGuides?: boolean;
+    getVisibleRect?: () => Bounds;
 }
 interface PointerState {
     x: number;
@@ -410,6 +412,8 @@ interface ElementStyle {
 declare function styleToPatch(element: CanvasElement, style: ElementStyle): Partial<CanvasElement>;
 declare function getElementStyle(element: CanvasElement): ElementStyle;
 
+type AlignEdge = 'left' | 'center-x' | 'right' | 'top' | 'middle' | 'bottom';
+type DistributeAxis = 'horizontal' | 'vertical';
 interface GridInfo {
     gridType: 'square' | 'hex';
     hexOrientation: 'pointy' | 'flat';
@@ -458,6 +462,7 @@ declare class Viewport {
     private readonly marginViewport;
     private resizeObserver;
     private _snapToGrid;
+    private _smartGuides;
     private readonly _gridSize;
     private readonly renderLoop;
     private readonly domNodeManager;
@@ -472,6 +477,8 @@ declare class Viewport {
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
     setSnapToGrid(enabled: boolean): void;
+    get smartGuides(): boolean;
+    setSmartGuides(enabled: boolean): void;
     fitToContent(padding?: number): void;
     requestRender(): void;
     exportState(): CanvasState;
@@ -516,6 +523,10 @@ declare class Viewport {
     onSelectionChange(listener: () => void): () => void;
     getSelectionStyle(): ElementStyle | null;
     applyStyleToSelection(style: ElementStyle): void;
+    alignSelection(edge: AlignEdge): void;
+    distributeSelection(axis: DistributeAxis): void;
+    private boundedSelection;
+    private isMovable;
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
@@ -743,6 +754,9 @@ declare class SelectTool implements Tool {
     private ctx;
     private pendingSingleSelectId;
     private hasDragged;
+    private activeGuides;
+    private dragSnapTargets;
+    private dragVisibleRect;
     private resizeAspectRatio;
     private hoveredId;
     get selectedIds(): string[];
@@ -758,6 +772,7 @@ declare class SelectTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     onHover(state: PointerState, ctx: ToolContext): void;
     renderOverlay(canvasCtx: CanvasRenderingContext2D): void;
+    private renderGuideLines;
     private updateArrowsBoundTo;
     nudgeSelection(dx: number, dy: number, ctx: ToolContext): boolean;
     private updateHoverCursor;
@@ -973,6 +988,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.31.1";
+declare const VERSION = "0.33.0";
 
-export { type ActiveFormats, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -2270,6 +2270,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 = {};
@@ -3697,6 +3714,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;
@@ -5383,6 +5413,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() {
@@ -5455,7 +5495,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,
@@ -5559,6 +5601,7 @@ var Viewport = class {
   marginViewport;
   resizeObserver = null;
   _snapToGrid = false;
+  _smartGuides = false;
   _gridSize;
   renderLoop;
   domNodeManager;
@@ -5579,6 +5622,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));
@@ -5792,6 +5842,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();
   }
@@ -6536,8 +6666,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;
@@ -6557,6 +6726,9 @@ var SelectTool = class {
   ctx = null;
   pendingSingleSelectId = null;
   hasDragged = false;
+  activeGuides = [];
+  dragSnapTargets = null;
+  dragVisibleRect = null;
   resizeAspectRatio = 0;
   hoveredId = null;
   get selectedIds() {
@@ -6588,6 +6760,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) {
@@ -6596,6 +6771,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;
@@ -6696,6 +6873,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;
@@ -6704,13 +6906,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: {
@@ -6720,7 +6922,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 }
           });
         }
       }
@@ -6750,6 +6952,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);
@@ -6797,42 +7003,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) {
@@ -8024,7 +8231,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.31.1";
+var VERSION = "0.33.0";
 export {
   ArrowTool,
   AutoSave,