@fieldnotes/core 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -45,6 +45,7 @@ __export(index_exports, {
   UpdateElementCommand: () => UpdateElementCommand,
   VERSION: () => VERSION,
   Viewport: () => Viewport,
+  clearStaleBindings: () => clearStaleBindings,
   createArrow: () => createArrow,
   createHtmlElement: () => createHtmlElement,
   createId: () => createId,
@@ -53,13 +54,21 @@ __export(index_exports, {
   createStroke: () => createStroke,
   createText: () => createText,
   exportState: () => exportState,
+  findBindTarget: () => findBindTarget,
+  findBoundArrows: () => findBoundArrows,
   getArrowBounds: () => getArrowBounds,
   getArrowControlPoint: () => getArrowControlPoint,
   getArrowMidpoint: () => getArrowMidpoint,
   getArrowTangentAngle: () => getArrowTangentAngle,
   getBendFromPoint: () => getBendFromPoint,
+  getEdgeIntersection: () => getEdgeIntersection,
+  getElementBounds: () => getElementBounds,
+  getElementCenter: () => getElementCenter,
+  isBindable: () => isBindable,
   isNearBezier: () => isNearBezier,
-  parseState: () => parseState
+  parseState: () => parseState,
+  unbindArrow: () => unbindArrow,
+  updateBoundArrow: () => updateBoundArrow
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -133,6 +142,7 @@ function validateState(data) {
     validateElement(el);
     migrateElement(el);
   }
+  cleanBindings(obj["elements"]);
 }
 var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text"]);
 function validateElement(el) {
@@ -150,6 +160,20 @@ function validateElement(el) {
     throw new Error("Invalid element: missing zIndex");
   }
 }
+function cleanBindings(elements) {
+  const ids = new Set(elements.map((el) => el["id"]));
+  for (const el of elements) {
+    if (el["type"] !== "arrow") continue;
+    const fromBinding = el["fromBinding"];
+    if (fromBinding && !ids.has(fromBinding["elementId"])) {
+      el["fromBinding"] = void 0;
+    }
+    const toBinding = el["toBinding"];
+    if (toBinding && !ids.has(toBinding["elementId"])) {
+      el["toBinding"] = void 0;
+    }
+  }
+}
 function migrateElement(obj) {
   if (obj["type"] === "arrow" && typeof obj["bend"] !== "number") {
     obj["bend"] = 0;
@@ -743,6 +767,134 @@ function isNearLine(point, a, b, threshold) {
   return Math.hypot(point.x - projX, point.y - projY) <= threshold;
 }
 
+// src/elements/arrow-binding.ts
+var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html"]);
+function isBindable(element) {
+  return BINDABLE_TYPES.has(element.type);
+}
+function getElementCenter(element) {
+  if (!("size" in element)) {
+    throw new Error(`getElementCenter: element type "${element.type}" has no size`);
+  }
+  return {
+    x: element.position.x + element.size.w / 2,
+    y: element.position.y + element.size.h / 2
+  };
+}
+function getElementBounds(element) {
+  if (!("size" in element)) return null;
+  return {
+    x: element.position.x,
+    y: element.position.y,
+    w: element.size.w,
+    h: element.size.h
+  };
+}
+function getEdgeIntersection(bounds, outsidePoint) {
+  const cx = bounds.x + bounds.w / 2;
+  const cy = bounds.y + bounds.h / 2;
+  const dx = outsidePoint.x - cx;
+  const dy = outsidePoint.y - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const halfW = bounds.w / 2;
+  const halfH = bounds.h / 2;
+  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Infinity;
+  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Infinity;
+  const scale = Math.min(scaleX, scaleY);
+  return {
+    x: cx + dx * scale,
+    y: cy + dy * scale
+  };
+}
+function findBindTarget(point, store, threshold, excludeId) {
+  let closest = null;
+  let closestDist = Infinity;
+  for (const el of store.getAll()) {
+    if (!isBindable(el)) continue;
+    if (excludeId && el.id === excludeId) continue;
+    const bounds = getElementBounds(el);
+    if (!bounds) continue;
+    const dist = distToBounds(point, bounds);
+    if (dist <= threshold && dist < closestDist) {
+      closest = el;
+      closestDist = dist;
+    }
+  }
+  return closest;
+}
+function distToBounds(point, bounds) {
+  const clampedX = Math.max(bounds.x, Math.min(point.x, bounds.x + bounds.w));
+  const clampedY = Math.max(bounds.y, Math.min(point.y, bounds.y + bounds.h));
+  return Math.hypot(point.x - clampedX, point.y - clampedY);
+}
+function findBoundArrows(elementId, store) {
+  return store.getElementsByType("arrow").filter((a) => a.fromBinding?.elementId === elementId || a.toBinding?.elementId === elementId);
+}
+function updateBoundArrow(arrow, store) {
+  if (!arrow.fromBinding && !arrow.toBinding) return null;
+  const updates = {};
+  if (arrow.fromBinding) {
+    const el = store.getById(arrow.fromBinding.elementId);
+    if (el) {
+      const center = getElementCenter(el);
+      updates.from = center;
+      updates.position = center;
+    }
+  }
+  if (arrow.toBinding) {
+    const el = store.getById(arrow.toBinding.elementId);
+    if (el) {
+      updates.to = getElementCenter(el);
+    }
+  }
+  return Object.keys(updates).length > 0 ? updates : null;
+}
+function clearStaleBindings(arrow, store) {
+  const updates = {};
+  let hasUpdates = false;
+  if (arrow.fromBinding && !store.getById(arrow.fromBinding.elementId)) {
+    updates.fromBinding = void 0;
+    hasUpdates = true;
+  }
+  if (arrow.toBinding && !store.getById(arrow.toBinding.elementId)) {
+    updates.toBinding = void 0;
+    hasUpdates = true;
+  }
+  return hasUpdates ? updates : null;
+}
+function unbindArrow(arrow, store) {
+  const updates = {};
+  if (arrow.fromBinding) {
+    const el = store.getById(arrow.fromBinding.elementId);
+    const bounds = el ? getElementBounds(el) : null;
+    if (bounds) {
+      const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+      const rayTarget = {
+        x: arrow.from.x + Math.cos(angle) * 1e3,
+        y: arrow.from.y + Math.sin(angle) * 1e3
+      };
+      const edge = getEdgeIntersection(bounds, rayTarget);
+      updates.from = edge;
+      updates.position = edge;
+    }
+    updates.fromBinding = void 0;
+  }
+  if (arrow.toBinding) {
+    const el = store.getById(arrow.toBinding.elementId);
+    const bounds = el ? getElementBounds(el) : null;
+    if (bounds) {
+      const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+      const rayTarget = {
+        x: arrow.to.x - Math.cos(angle) * 1e3,
+        y: arrow.to.y - Math.sin(angle) * 1e3
+      };
+      updates.to = getEdgeIntersection(bounds, rayTarget);
+    }
+    updates.toBinding = void 0;
+  }
+  return updates;
+}
+
 // src/elements/stroke-smoothing.ts
 var MIN_PRESSURE_SCALE = 0.2;
 function pressureToWidth(pressure, baseWidth) {
@@ -821,6 +973,10 @@ var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html", "text"
 var ARROWHEAD_LENGTH = 12;
 var ARROWHEAD_ANGLE = Math.PI / 6;
 var ElementRenderer = class {
+  store = null;
+  setStore(store) {
+    this.store = store;
+  }
   isDomElement(element) {
     return DOM_ELEMENT_TYPES.has(element.type);
   }
@@ -854,38 +1010,76 @@ var ElementRenderer = class {
     ctx.restore();
   }
   renderArrow(ctx, arrow) {
+    const { visualFrom, visualTo } = this.getVisualEndpoints(arrow);
     ctx.save();
     ctx.strokeStyle = arrow.color;
     ctx.lineWidth = arrow.width;
     ctx.lineCap = "round";
+    if (arrow.fromBinding || arrow.toBinding) {
+      ctx.setLineDash([8, 4]);
+    }
     ctx.beginPath();
-    ctx.moveTo(arrow.from.x, arrow.from.y);
+    ctx.moveTo(visualFrom.x, visualFrom.y);
     if (arrow.bend !== 0) {
       const cp = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
-      ctx.quadraticCurveTo(cp.x, cp.y, arrow.to.x, arrow.to.y);
+      ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
     } else {
-      ctx.lineTo(arrow.to.x, arrow.to.y);
+      ctx.lineTo(visualTo.x, visualTo.y);
     }
     ctx.stroke();
-    this.renderArrowhead(ctx, arrow);
+    this.renderArrowhead(ctx, arrow, visualTo);
     ctx.restore();
   }
-  renderArrowhead(ctx, arrow) {
+  renderArrowhead(ctx, arrow, tip) {
     const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
     ctx.beginPath();
-    ctx.moveTo(arrow.to.x, arrow.to.y);
+    ctx.moveTo(tip.x, tip.y);
     ctx.lineTo(
-      arrow.to.x - ARROWHEAD_LENGTH * Math.cos(angle - ARROWHEAD_ANGLE),
-      arrow.to.y - ARROWHEAD_LENGTH * Math.sin(angle - ARROWHEAD_ANGLE)
+      tip.x - ARROWHEAD_LENGTH * Math.cos(angle - ARROWHEAD_ANGLE),
+      tip.y - ARROWHEAD_LENGTH * Math.sin(angle - ARROWHEAD_ANGLE)
     );
     ctx.lineTo(
-      arrow.to.x - ARROWHEAD_LENGTH * Math.cos(angle + ARROWHEAD_ANGLE),
-      arrow.to.y - ARROWHEAD_LENGTH * Math.sin(angle + ARROWHEAD_ANGLE)
+      tip.x - ARROWHEAD_LENGTH * Math.cos(angle + ARROWHEAD_ANGLE),
+      tip.y - ARROWHEAD_LENGTH * Math.sin(angle + ARROWHEAD_ANGLE)
     );
     ctx.closePath();
     ctx.fillStyle = arrow.color;
     ctx.fill();
   }
+  getVisualEndpoints(arrow) {
+    let visualFrom = arrow.from;
+    let visualTo = arrow.to;
+    if (!this.store) return { visualFrom, visualTo };
+    if (arrow.fromBinding) {
+      const el = this.store.getById(arrow.fromBinding.elementId);
+      if (el) {
+        const bounds = getElementBounds(el);
+        if (bounds) {
+          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+          const rayTarget = {
+            x: arrow.from.x + Math.cos(tangentAngle) * 1e3,
+            y: arrow.from.y + Math.sin(tangentAngle) * 1e3
+          };
+          visualFrom = getEdgeIntersection(bounds, rayTarget);
+        }
+      }
+    }
+    if (arrow.toBinding) {
+      const el = this.store.getById(arrow.toBinding.elementId);
+      if (el) {
+        const bounds = getElementBounds(el);
+        if (bounds) {
+          const tangentAngle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+          const rayTarget = {
+            x: arrow.to.x - Math.cos(tangentAngle) * 1e3,
+            y: arrow.to.y - Math.sin(tangentAngle) * 1e3
+          };
+          visualTo = getEdgeIntersection(bounds, rayTarget);
+        }
+      }
+    }
+    return { visualFrom, visualTo };
+  }
 };
 
 // src/elements/note-editor.ts
@@ -1256,7 +1450,7 @@ function createNote(input) {
   };
 }
 function createArrow(input) {
-  return {
+  const result = {
     id: createId("arrow"),
     type: "arrow",
     position: input.position ?? { x: 0, y: 0 },
@@ -1268,6 +1462,9 @@ function createArrow(input) {
     color: input.color ?? "#000000",
     width: input.width ?? 2
   };
+  if (input.fromBinding) result.fromBinding = input.fromBinding;
+  if (input.toBinding) result.toBinding = input.toBinding;
+  return result;
 }
 function createImage(input) {
   return {
@@ -1314,6 +1511,7 @@ var Viewport = class {
     this.store = new ElementStore();
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
+    this.renderer.setStore(this.store);
     this.noteEditor = new NoteEditor();
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
@@ -1346,7 +1544,10 @@ var Viewport = class {
     });
     this.unsubStore = [
       this.store.on("add", () => this.requestRender()),
-      this.store.on("remove", (el) => this.removeDomNode(el.id)),
+      this.store.on("remove", (el) => {
+        this.unbindArrowsFrom(el);
+        this.removeDomNode(el.id);
+      }),
       this.store.on("update", () => this.requestRender()),
       this.store.on("clear", () => this.clearDomNodes())
     ];
@@ -1721,6 +1922,40 @@ var Viewport = class {
       }
     }
   }
+  unbindArrowsFrom(removedElement) {
+    const boundArrows = findBoundArrows(removedElement.id, this.store);
+    const bounds = getElementBounds(removedElement);
+    for (const arrow of boundArrows) {
+      const updates = {};
+      if (arrow.fromBinding?.elementId === removedElement.id) {
+        updates.fromBinding = void 0;
+        if (bounds) {
+          const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
+          const rayTarget = {
+            x: arrow.from.x + Math.cos(angle) * 1e3,
+            y: arrow.from.y + Math.sin(angle) * 1e3
+          };
+          const edge = getEdgeIntersection(bounds, rayTarget);
+          updates.from = edge;
+          updates.position = edge;
+        }
+      }
+      if (arrow.toBinding?.elementId === removedElement.id) {
+        updates.toBinding = void 0;
+        if (bounds) {
+          const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
+          const rayTarget = {
+            x: arrow.to.x - Math.cos(angle) * 1e3,
+            y: arrow.to.y - Math.sin(angle) * 1e3
+          };
+          updates.to = getEdgeIntersection(bounds, rayTarget);
+        }
+      }
+      if (Object.keys(updates).length > 0) {
+        this.store.update(arrow.id, updates);
+      }
+    }
+  }
   removeDomNode(id) {
     this.htmlContent.delete(id);
     const node = this.domNodes.get(id);
@@ -1949,6 +2184,7 @@ var EraserTool = class {
 };
 
 // src/tools/arrow-handles.ts
+var BIND_THRESHOLD = 20;
 var HANDLE_RADIUS = 5;
 var HANDLE_HIT_PADDING = 4;
 var ARROW_HANDLE_CURSORS = {
@@ -1989,18 +2225,44 @@ function hitTestArrowHandles(world, selectedIds, ctx) {
 function applyArrowHandleDrag(handle, elementId, world, ctx) {
   const el = ctx.store.getById(elementId);
   if (!el || el.type !== "arrow") return;
+  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
   switch (handle) {
-    case "start":
-      ctx.store.update(elementId, {
-        from: { x: world.x, y: world.y },
-        position: { x: world.x, y: world.y }
-      });
+    case "start": {
+      const excludeId = el.toBinding?.elementId;
+      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      if (target) {
+        const center = getElementCenter(target);
+        ctx.store.update(elementId, {
+          from: center,
+          position: center,
+          fromBinding: { elementId: target.id }
+        });
+      } else {
+        ctx.store.update(elementId, {
+          from: { x: world.x, y: world.y },
+          position: { x: world.x, y: world.y },
+          fromBinding: void 0
+        });
+      }
       break;
-    case "end":
-      ctx.store.update(elementId, {
-        to: { x: world.x, y: world.y }
-      });
+    }
+    case "end": {
+      const excludeId = el.fromBinding?.elementId;
+      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      if (target) {
+        const center = getElementCenter(target);
+        ctx.store.update(elementId, {
+          to: center,
+          toBinding: { elementId: target.id }
+        });
+      } else {
+        ctx.store.update(elementId, {
+          to: { x: world.x, y: world.y },
+          toBinding: void 0
+        });
+      }
       break;
+    }
     case "mid": {
       const bend = getBendFromPoint(el.from, el.to, world);
       ctx.store.update(elementId, { bend });
@@ -2009,6 +2271,16 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
   }
   ctx.requestRender();
 }
+function getArrowHandleDragTarget(handle, elementId, world, ctx) {
+  if (handle === "mid") return null;
+  const el = ctx.store.getById(elementId);
+  if (!el || el.type !== "arrow") return null;
+  const threshold = BIND_THRESHOLD / ctx.camera.zoom;
+  const excludeId = handle === "start" ? el.toBinding?.elementId : el.fromBinding?.elementId;
+  const target = findBindTarget(world, ctx.store, threshold, excludeId);
+  if (!target) return null;
+  return getElementBounds(target);
+}
 function renderArrowHandles(canvasCtx, arrow, zoom) {
   const radius = HANDLE_RADIUS / zoom;
   const handles = getArrowHandlePositions(arrow);
@@ -2119,6 +2391,9 @@ var SelectTool = class {
         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 },
@@ -2130,6 +2405,23 @@ 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);
+          }
+        }
+      }
       ctx.requestRender();
       return;
     }
@@ -2158,6 +2450,22 @@ var SelectTool = class {
   renderOverlay(canvasCtx) {
     this.renderMarquee(canvasCtx);
     this.renderSelectionBoxes(canvasCtx);
+    if (this.mode.type === "arrow-handle" && this.ctx) {
+      const target = getArrowHandleDragTarget(
+        this.mode.handle,
+        this.mode.elementId,
+        this.currentWorld,
+        this.ctx
+      );
+      if (target) {
+        canvasCtx.save();
+        canvasCtx.strokeStyle = "#2196F3";
+        canvasCtx.lineWidth = 2 / this.ctx.camera.zoom;
+        canvasCtx.setLineDash([]);
+        canvasCtx.strokeRect(target.x, target.y, target.w, target.h);
+        canvasCtx.restore();
+      }
+    }
   }
   updateHoverCursor(world, ctx) {
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
@@ -2216,6 +2524,11 @@ 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);
+    }
     ctx.requestRender();
   }
   hitTestResizeHandle(world, ctx) {
@@ -2270,6 +2583,7 @@ var SelectTool = class {
       if (!el) continue;
       if (el.type === "arrow") {
         renderArrowHandles(canvasCtx, el, zoom);
+        this.renderBindingHighlights(canvasCtx, el, zoom);
         continue;
       }
       const bounds = this.getElementBounds(el);
@@ -2299,6 +2613,26 @@ var SelectTool = class {
     }
     canvasCtx.restore();
   }
+  renderBindingHighlights(canvasCtx, arrow, zoom) {
+    if (!this.ctx) return;
+    if (!arrow.fromBinding && !arrow.toBinding) return;
+    const pad = SELECTION_PAD / zoom;
+    canvasCtx.save();
+    canvasCtx.strokeStyle = "#2196F3";
+    canvasCtx.lineWidth = 2 / zoom;
+    canvasCtx.setLineDash([]);
+    const drawn = /* @__PURE__ */ new Set();
+    for (const binding of [arrow.fromBinding, arrow.toBinding]) {
+      if (!binding || drawn.has(binding.elementId)) continue;
+      drawn.add(binding.elementId);
+      const target = this.ctx.store.getById(binding.elementId);
+      if (!target) continue;
+      const bounds = getElementBounds(target);
+      if (!bounds) continue;
+      canvasCtx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
+    }
+    canvasCtx.restore();
+  }
   getMarqueeRect() {
     if (this.mode.type !== "marquee") return null;
     const { start } = this.mode;
@@ -2372,6 +2706,7 @@ var SelectTool = class {
 };
 
 // src/tools/arrow-tool.ts
+var BIND_THRESHOLD2 = 20;
 var ArrowTool = class {
   name = "arrow";
   drawing = false;
@@ -2379,6 +2714,9 @@ var ArrowTool = class {
   end = { x: 0, y: 0 };
   color;
   width;
+  fromBinding;
+  fromTarget = null;
+  toTarget = null;
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
@@ -2389,12 +2727,34 @@ var ArrowTool = class {
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
-    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const threshold = BIND_THRESHOLD2 / ctx.camera.zoom;
+    const target = findBindTarget(world, ctx.store, threshold);
+    if (target) {
+      this.start = getElementCenter(target);
+      this.fromBinding = { elementId: target.id };
+      this.fromTarget = target;
+    } else {
+      this.start = world;
+      this.fromBinding = void 0;
+      this.fromTarget = null;
+    }
     this.end = { ...this.start };
+    this.toTarget = null;
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
-    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const threshold = BIND_THRESHOLD2 / ctx.camera.zoom;
+    const excludeId = this.fromBinding?.elementId;
+    const target = findBindTarget(world, ctx.store, threshold, excludeId);
+    if (target) {
+      this.end = getElementCenter(target);
+      this.toTarget = target;
+    } else {
+      this.end = world;
+      this.toTarget = null;
+    }
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -2404,16 +2764,40 @@ var ArrowTool = class {
     const arrow = createArrow({
       from: this.start,
       to: this.end,
+      position: this.start,
       color: this.color,
-      width: this.width
+      width: this.width,
+      fromBinding: this.fromBinding,
+      toBinding: this.toTarget ? { elementId: this.toTarget.id } : void 0
     });
     ctx.store.add(arrow);
+    this.fromTarget = null;
+    this.toTarget = null;
     ctx.requestRender();
+    ctx.switchTool?.("select");
   }
   renderOverlay(ctx) {
     if (!this.drawing) return;
     if (this.start.x === this.end.x && this.start.y === this.end.y) return;
     ctx.save();
+    if (this.fromTarget) {
+      const bounds = getElementBounds(this.fromTarget);
+      if (bounds) {
+        ctx.strokeStyle = "#2196F3";
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
+      }
+    }
+    if (this.toTarget) {
+      const bounds = getElementBounds(this.toTarget);
+      if (bounds) {
+        ctx.strokeStyle = "#2196F3";
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+        ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
+      }
+    }
     ctx.strokeStyle = this.color;
     ctx.lineWidth = this.width;
     ctx.lineCap = "round";
@@ -2545,7 +2929,7 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.3.0";
+var VERSION = "0.3.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -2573,6 +2957,7 @@ var VERSION = "0.3.0";
   UpdateElementCommand,
   VERSION,
   Viewport,
+  clearStaleBindings,
   createArrow,
   createHtmlElement,
   createId,
@@ -2581,12 +2966,20 @@ var VERSION = "0.3.0";
   createStroke,
   createText,
   exportState,
+  findBindTarget,
+  findBoundArrows,
   getArrowBounds,
   getArrowControlPoint,
   getArrowMidpoint,
   getArrowTangentAngle,
   getBendFromPoint,
+  getEdgeIntersection,
+  getElementBounds,
+  getElementCenter,
+  isBindable,
   isNearBezier,
-  parseState
+  parseState,
+  unbindArrow,
+  updateBoundArrow
 });
 //# sourceMappingURL=index.cjs.map