@fieldnotes/core 0.3.0 → 0.4.0

package/dist/index.js

@@ -68,8 +68,9 @@ function validateState(data) {
     validateElement(el);
     migrateElement(el);
   }
+  cleanBindings(obj["elements"]);
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text"]);
+var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape"]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -85,6 +86,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;
@@ -96,6 +111,9 @@ function migrateElement(obj) {
       }
     }
   }
+  if (obj["type"] === "shape" && typeof obj["shape"] !== "string") {
+    obj["shape"] = "rectangle";
+  }
 }
 
 // src/core/auto-save.ts
@@ -678,6 +696,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", "shape"]);
+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) {
@@ -756,6 +902,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);
   }
@@ -767,6 +917,9 @@ var ElementRenderer = class {
       case "arrow":
         this.renderArrow(ctx, element);
         break;
+      case "shape":
+        this.renderShape(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -789,38 +942,119 @@ 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 };
+  }
+  renderShape(ctx, shape) {
+    ctx.save();
+    if (shape.fillColor !== "none") {
+      ctx.fillStyle = shape.fillColor;
+      this.fillShapePath(ctx, shape);
+    }
+    if (shape.strokeWidth > 0) {
+      ctx.strokeStyle = shape.strokeColor;
+      ctx.lineWidth = shape.strokeWidth;
+      this.strokeShapePath(ctx, shape);
+    }
+    ctx.restore();
+  }
+  fillShapePath(ctx, shape) {
+    switch (shape.shape) {
+      case "rectangle":
+        ctx.fillRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
+        break;
+      case "ellipse": {
+        const cx = shape.position.x + shape.size.w / 2;
+        const cy = shape.position.y + shape.size.h / 2;
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
+        ctx.fill();
+        break;
+      }
+    }
+  }
+  strokeShapePath(ctx, shape) {
+    switch (shape.shape) {
+      case "rectangle":
+        ctx.strokeRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
+        break;
+      case "ellipse": {
+        const cx = shape.position.x + shape.size.w / 2;
+        const cy = shape.position.y + shape.size.h / 2;
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        break;
+      }
+    }
+  }
 };
 
 // src/elements/note-editor.ts
@@ -1191,7 +1425,7 @@ function createNote(input) {
   };
 }
 function createArrow(input) {
-  return {
+  const result = {
     id: createId("arrow"),
     type: "arrow",
     position: input.position ?? { x: 0, y: 0 },
@@ -1203,6 +1437,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 {
@@ -1225,6 +1462,20 @@ function createHtmlElement(input) {
     size: input.size
   };
 }
+function createShape(input) {
+  return {
+    id: createId("shape"),
+    type: "shape",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    shape: input.shape ?? "rectangle",
+    size: input.size,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 2,
+    fillColor: input.fillColor ?? "none"
+  };
+}
 function createText(input) {
   return {
     id: createId("text"),
@@ -1249,6 +1500,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();
@@ -1281,7 +1533,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())
     ];
@@ -1656,6 +1911,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);
@@ -1884,6 +2173,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 = {
@@ -1924,18 +2214,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 });
@@ -1944,6 +2260,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);
@@ -2054,6 +2380,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 },
@@ -2065,6 +2394,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;
     }
@@ -2093,6 +2439,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);
@@ -2151,6 +2513,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) {
@@ -2205,6 +2572,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);
@@ -2234,6 +2602,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;
@@ -2307,6 +2695,7 @@ var SelectTool = class {
 };
 
 // src/tools/arrow-tool.ts
+var BIND_THRESHOLD2 = 20;
 var ArrowTool = class {
   name = "arrow";
   drawing = false;
@@ -2314,6 +2703,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;
@@ -2324,12 +2716,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) {
@@ -2339,16 +2753,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";
@@ -2479,8 +2917,123 @@ var ImageTool = class {
   }
 };
 
+// src/tools/shape-tool.ts
+var ShapeTool = class {
+  name = "shape";
+  drawing = false;
+  start = { x: 0, y: 0 };
+  end = { x: 0, y: 0 };
+  shiftHeld = false;
+  shape;
+  strokeColor;
+  strokeWidth;
+  fillColor;
+  constructor(options = {}) {
+    this.shape = options.shape ?? "rectangle";
+    this.strokeColor = options.strokeColor ?? "#000000";
+    this.strokeWidth = options.strokeWidth ?? 2;
+    this.fillColor = options.fillColor ?? "none";
+  }
+  setOptions(options) {
+    if (options.shape !== void 0) this.shape = options.shape;
+    if (options.strokeColor !== void 0) this.strokeColor = options.strokeColor;
+    if (options.strokeWidth !== void 0) this.strokeWidth = options.strokeWidth;
+    if (options.fillColor !== void 0) this.fillColor = options.fillColor;
+  }
+  onActivate(_ctx) {
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", this.onKeyDown);
+      window.addEventListener("keyup", this.onKeyUp);
+    }
+  }
+  onDeactivate(_ctx) {
+    this.shiftHeld = false;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("keydown", this.onKeyDown);
+      window.removeEventListener("keyup", this.onKeyUp);
+    }
+  }
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.end = { ...this.start };
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    ctx.requestRender();
+  }
+  onPointerUp(_state, ctx) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    const { position, size } = this.computeRect();
+    if (size.w === 0 || size.h === 0) return;
+    const shape = createShape({
+      position,
+      size,
+      shape: this.shape,
+      strokeColor: this.strokeColor,
+      strokeWidth: this.strokeWidth,
+      fillColor: this.fillColor
+    });
+    ctx.store.add(shape);
+    ctx.requestRender();
+    ctx.switchTool?.("select");
+  }
+  renderOverlay(ctx) {
+    if (!this.drawing) return;
+    const { position, size } = this.computeRect();
+    if (size.w === 0 && size.h === 0) return;
+    ctx.save();
+    ctx.globalAlpha = 0.5;
+    ctx.strokeStyle = this.strokeColor;
+    ctx.lineWidth = this.strokeWidth;
+    if (this.fillColor !== "none") {
+      ctx.fillStyle = this.fillColor;
+    }
+    switch (this.shape) {
+      case "rectangle":
+        if (this.fillColor !== "none") {
+          ctx.fillRect(position.x, position.y, size.w, size.h);
+        }
+        ctx.strokeRect(position.x, position.y, size.w, size.h);
+        break;
+      case "ellipse": {
+        const cx = position.x + size.w / 2;
+        const cy = position.y + size.h / 2;
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, size.w / 2, size.h / 2, 0, 0, Math.PI * 2);
+        if (this.fillColor !== "none") ctx.fill();
+        ctx.stroke();
+        break;
+      }
+    }
+    ctx.restore();
+  }
+  computeRect() {
+    let x = Math.min(this.start.x, this.end.x);
+    let y = Math.min(this.start.y, this.end.y);
+    let w = Math.abs(this.end.x - this.start.x);
+    let h = Math.abs(this.end.y - this.start.y);
+    if (this.shiftHeld) {
+      const side = Math.max(w, h);
+      w = side;
+      h = side;
+      x = this.end.x >= this.start.x ? this.start.x : this.start.x - side;
+      y = this.end.y >= this.start.y ? this.start.y : this.start.y - side;
+    }
+    return { position: { x, y }, size: { w, h } };
+  }
+  onKeyDown = (e) => {
+    if (e.key === "Shift") this.shiftHeld = true;
+  };
+  onKeyUp = (e) => {
+    if (e.key === "Shift") this.shiftHeld = false;
+  };
+};
+
 // src/index.ts
-var VERSION = "0.3.0";
+var VERSION = "0.4.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -2502,25 +3055,36 @@ export {
   PencilTool,
   RemoveElementCommand,
   SelectTool,
+  ShapeTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
   VERSION,
   Viewport,
+  clearStaleBindings,
   createArrow,
   createHtmlElement,
   createId,
   createImage,
   createNote,
+  createShape,
   createStroke,
   createText,
   exportState,
+  findBindTarget,
+  findBoundArrows,
   getArrowBounds,
   getArrowControlPoint,
   getArrowMidpoint,
   getArrowTangentAngle,
   getBendFromPoint,
+  getEdgeIntersection,
+  getElementBounds,
+  getElementCenter,
+  isBindable,
   isNearBezier,
-  parseState
+  parseState,
+  unbindArrow,
+  updateBoundArrow
 };
 //# sourceMappingURL=index.js.map