@fieldnotes/core 0.35.0 → 0.36.0

package/README.md

@@ -616,6 +616,14 @@ Select a single element and a rotate handle appears above the selection box. Dra
 
 Hit-testing, marquee selection, and resize are all rotation-aware: resizing a rotated element keeps the opposite corner fixed in the element's local frame. Rotation is reflected in PNG export and round-trips through serialization (`rotation?` on elements, stored in radians).
 
+## Context menu & lock
+
+Right-click (desktop) or touch long-press (tablet) opens a context menu over the canvas with Cut/Copy/Paste/Duplicate/Delete, z-order (to front / forward / backward / to back), and Lock/Unlock. The menu is core-provided (plain DOM) and selects the element under the pointer if it isn't already selected. Opt out with `new Viewport(el, { contextMenu: false })`.
+
+Lock with **`viewport.toggleLockSelection()`** or **Ctrl/Cmd+Shift+L**; a lock badge appears on the selection. Locked elements stay selectable but can't be moved, resized, or rotated. **Ctrl/Cmd+X** cuts the selection. The shortcuts are rebindable as `toggle-lock` and `cut`.
+
+You can drive any menu action programmatically with **`viewport.runAction(name)`** (e.g. `'cut'`, `'paste'`, `'toggle-lock'`), and **`viewport.canPaste()`** reports whether the clipboard has content.
+
 ## Built-in Interactions
 
 | Input                | Action              |

package/dist/index.cjs

@@ -991,6 +991,14 @@ var KeyboardActions = class {
     }
     this.pasteCount = 0;
   }
+  cut() {
+    if (this.deps.isToolActive()) return;
+    this.copy();
+    this.deleteSelected();
+  }
+  hasClipboard() {
+    return this.clipboard.length > 0;
+  }
   paste() {
     if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
@@ -1059,6 +1067,10 @@ var KeyboardActions = class {
     if (this.deps.isToolActive()) return;
     this.deps.ungroup?.();
   }
+  toggleLock() {
+    if (this.deps.isToolActive()) return;
+    this.deps.toggleLock?.();
+  }
   zOrder(operation) {
     if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
@@ -1160,6 +1172,8 @@ var DEFAULT_BINDINGS = [
   ["zoom-reset", ["mod+0"]],
   ["group", ["mod+g"]],
   ["ungroup", ["mod+shift+g"]],
+  ["cut", ["mod+x"]],
+  ["toggle-lock", ["mod+shift+l"]],
   ["nudge-left", ["arrowleft"]],
   ["nudge-right", ["arrowright"]],
   ["nudge-up", ["arrowup"]],
@@ -1298,6 +1312,7 @@ var ShortcutMap = class {
 var ZOOM_SENSITIVITY = 1e-3;
 var ZOOM_STEP = 1.2;
 var MIDDLE_BUTTON = 1;
+var LONG_PRESS_MS = 500;
 var NUDGE_DELTAS = {
   "nudge-left": [-1, 0],
   "nudge-right": [1, 0],
@@ -1321,8 +1336,10 @@ var InputHandler = class {
       fitToContent: options.fitToContent,
       group: options.group,
       ungroup: options.ungroup,
+      toggleLock: options.toggleLock,
       getLastPointerWorld: () => this.lastPointerWorld()
     });
+    this.openContextMenu = options.openContextMenu;
     this.shortcutMap = new ShortcutMap(options.shortcuts?.bindings);
     this.scope = options.shortcuts?.scope ?? "focus";
     this.element.style.touchAction = "none";
@@ -1346,10 +1363,13 @@ var InputHandler = class {
   lastPointerEvent = null;
   inputFilter = new InputFilter();
   deferredDown = null;
+  longPressTimer = null;
+  longPressStart = null;
   abortController = new AbortController();
   actions;
   shortcutMap;
   scope;
+  openContextMenu;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -1364,6 +1384,7 @@ var InputHandler = class {
     this.actions.dispose();
     this.abortController.abort();
     this.inputFilter.reset();
+    this.cancelLongPress();
     this.deferredDown = null;
     this.lastPointerEvent = null;
     if (this.scope === "focus") {
@@ -1379,6 +1400,7 @@ var InputHandler = class {
     this.element.addEventListener("pointerup", this.onPointerUp, opts);
     this.element.addEventListener("pointerleave", this.onPointerLeave, opts);
     this.element.addEventListener("pointercancel", this.onPointerUp, opts);
+    this.element.addEventListener("contextmenu", this.onContextMenu, opts);
     window.addEventListener("keydown", this.onKeyDown, opts);
     window.addEventListener("keyup", this.onKeyUp, opts);
   }
@@ -1407,11 +1429,13 @@ var InputHandler = class {
     this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     this.element.setPointerCapture?.(e.pointerId);
     if (this.activePointers.size === 2) {
+      this.cancelLongPress();
       this.startPinch();
       this.cancelToolIfActive(e);
       return;
     }
     if (e.button === MIDDLE_BUTTON || e.button === 0 && this.spaceHeld) {
+      this.cancelLongPress();
       this.isPanning = true;
       this.lastPointer = { x: e.clientX, y: e.clientY };
       return;
@@ -1421,6 +1445,7 @@ var InputHandler = class {
       if (result.action === "suppress") return;
       if (result.action === "defer") {
         this.deferredDown = e;
+        this.startLongPress(e);
         return;
       }
       this.dispatchToolDown(e);
@@ -1449,6 +1474,7 @@ var InputHandler = class {
     } else if (this.deferredDown) {
       const result = this.inputFilter.filterMove(e);
       if (result.action === "dispatch") {
+        this.cancelLongPress();
         this.dispatchToolDown(this.deferredDown);
         this.deferredDown = null;
         this.dispatchToolMove(e);
@@ -1458,6 +1484,7 @@ var InputHandler = class {
     }
   };
   onPointerUp = (e) => {
+    this.cancelLongPress();
     try {
       this.element.releasePointerCapture(e.pointerId);
     } catch {
@@ -1510,74 +1537,82 @@ var InputHandler = class {
   runAction(action, e) {
     switch (action) {
       case "delete":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.deleteSelected();
         return;
       case "deselect":
         this.actions.deselect();
         return;
       case "undo":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.undo();
         return;
       case "redo":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.redo();
         return;
       case "select-all":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.selectAll();
         return;
       case "copy":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.copy();
         return;
       case "paste":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.paste();
         return;
       case "duplicate":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.duplicate();
         return;
       case "z-forward":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("forward");
         return;
       case "z-backward":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("backward");
         return;
       case "z-front":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("front");
         return;
       case "z-back":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zOrder("back");
         return;
       case "zoom-fit":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.zoomToFit();
         return;
       case "group":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.group();
         return;
       case "ungroup":
-        e.preventDefault();
+        e?.preventDefault();
         this.actions.ungroup();
         return;
+      case "cut":
+        e?.preventDefault();
+        this.actions.cut();
+        return;
+      case "toggle-lock":
+        e?.preventDefault();
+        this.actions.toggleLock();
+        return;
       case "zoom-in":
-        e.preventDefault();
+        e?.preventDefault();
         this.zoomByFactor(ZOOM_STEP);
         return;
       case "zoom-out":
-        e.preventDefault();
+        e?.preventDefault();
         this.zoomByFactor(1 / ZOOM_STEP);
         return;
       case "zoom-reset":
-        e.preventDefault();
+        e?.preventDefault();
         this.zoomToLevel(1);
         return;
       case "nudge-left":
@@ -1585,22 +1620,26 @@ var InputHandler = class {
       case "nudge-up":
       case "nudge-down": {
         const delta = NUDGE_DELTAS[action];
-        if (delta && this.actions.nudge(delta[0], delta[1], e.shiftKey)) {
-          e.preventDefault();
+        if (delta && this.actions.nudge(delta[0], delta[1], e?.shiftKey ?? false)) {
+          e?.preventDefault();
         }
         return;
       }
       default:
         if (action.startsWith("tool:")) {
           if (this.isToolActive) return;
-          e.preventDefault();
+          e?.preventDefault();
           this.toolContext?.switchTool?.(action.slice("tool:".length));
           return;
         }
         console.warn(`[fieldnotes] unknown shortcut action "${action}"`);
     }
   }
+  hasClipboard() {
+    return this.actions.hasClipboard();
+  }
   startPinch() {
+    this.cancelLongPress();
     this.inputFilter.reset();
     this.deferredDown = null;
     this.isPanning = true;
@@ -1643,6 +1682,13 @@ var InputHandler = class {
     const rect = this.element.getBoundingClientRect();
     return this.camera.screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   }
+  onContextMenu = (e) => {
+    e.preventDefault();
+    if (this.toolManager?.activeTool?.name !== "select") return;
+    const rect = this.element.getBoundingClientRect();
+    const world = this.camera.screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    this.openContextMenu?.({ x: e.clientX, y: e.clientY }, world);
+  };
   onPointerLeave = (e) => {
     this.lastPointerEvent = null;
     this.onPointerUp(e);
@@ -1690,12 +1736,36 @@ var InputHandler = class {
     this.element.focus({ preventScroll: true });
   }
   cancelToolIfActive(e) {
+    this.cancelLongPress();
     if (this.isToolActive) {
       this.dispatchToolUp(e);
       this.isToolActive = false;
     }
     this.deferredDown = null;
   }
+  startLongPress(e) {
+    if (e.pointerType !== "touch") return;
+    if (this.toolManager?.activeTool?.name !== "select") return;
+    this.longPressStart = { x: e.clientX, y: e.clientY };
+    this.longPressTimer = setTimeout(() => this.fireLongPress(), LONG_PRESS_MS);
+  }
+  cancelLongPress() {
+    if (this.longPressTimer !== null) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+    this.longPressStart = null;
+  }
+  fireLongPress() {
+    this.longPressTimer = null;
+    if (!this.deferredDown || this.activePointers.size !== 1 || this.isPanning) return;
+    const start = this.longPressStart;
+    if (!start) return;
+    const rect = this.element.getBoundingClientRect();
+    const world = this.camera.screenToWorld({ x: start.x - rect.left, y: start.y - rect.top });
+    this.deferredDown = null;
+    this.openContextMenu?.({ x: start.x, y: start.y }, world);
+  }
 };
 
 // src/canvas/background.ts
@@ -3882,6 +3952,87 @@ var NoteEditor = class {
   }
 };
 
+// src/canvas/context-menu.ts
+var ContextMenu = class {
+  constructor(options) {
+    this.options = options;
+  }
+  el = null;
+  outsideListener = null;
+  keyListener = null;
+  isOpen() {
+    return this.el !== null;
+  }
+  open(items, screenPos) {
+    this.close();
+    const el = document.createElement("div");
+    el.className = "fieldnotes-context-menu";
+    Object.assign(el.style, {
+      position: "fixed",
+      left: `${screenPos.x}px`,
+      top: `${screenPos.y}px`,
+      zIndex: "10000",
+      display: "flex",
+      flexDirection: "column"
+    });
+    for (const item of items) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "fieldnotes-context-menu-item" + (item.disabled ? " fieldnotes-context-menu-item--disabled" : "");
+      btn.textContent = item.label;
+      if (item.disabled) {
+        btn.disabled = true;
+      } else {
+        btn.addEventListener("click", () => {
+          this.options.onCommand(item.action);
+          this.close();
+        });
+      }
+      el.appendChild(btn);
+    }
+    document.body.appendChild(el);
+    this.el = el;
+    this.clampToViewport(el, screenPos);
+    this.keyListener = (e) => {
+      if (e.key === "Escape") this.close();
+    };
+    document.addEventListener("keydown", this.keyListener);
+    this.outsideListener = (e) => {
+      if (this.el && !this.el.contains(e.target)) this.close();
+    };
+    setTimeout(() => {
+      if (this.outsideListener) document.addEventListener("pointerdown", this.outsideListener);
+    }, 0);
+  }
+  close() {
+    if (this.keyListener) {
+      document.removeEventListener("keydown", this.keyListener);
+      this.keyListener = null;
+    }
+    if (this.outsideListener) {
+      document.removeEventListener("pointerdown", this.outsideListener);
+      this.outsideListener = null;
+    }
+    if (this.el) {
+      this.el.remove();
+      this.el = null;
+      this.options.onClose();
+    }
+  }
+  dispose() {
+    this.close();
+  }
+  clampToViewport(el, screenPos) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && screenPos.x + rect.width > window.innerWidth) {
+      el.style.left = `${Math.max(0, screenPos.x - rect.width)}px`;
+    }
+    if (rect.height > 0 && screenPos.y + rect.height > window.innerHeight) {
+      el.style.top = `${Math.max(0, screenPos.y - rect.height)}px`;
+    }
+  }
+};
+
 // src/elements/translate.ts
 function translateElementPatch(el, dx, dy) {
   const position = { x: el.position.x + dx, y: el.position.y + dy };
@@ -5698,8 +5849,20 @@ var Viewport = class {
       fitToContent: () => this.fitToContent(),
       group: () => this.groupSelection(),
       ungroup: () => this.ungroupSelection(),
+      toggleLock: () => this.toggleLockSelection(),
+      openContextMenu: (screenPos, world) => {
+        this.getSelectTool()?.selectAtPoint(world, this.toolContext);
+        this.openContextMenu(screenPos);
+      },
       shortcuts: options.shortcuts
     });
+    if (options.contextMenu !== false) {
+      this.contextMenu = new ContextMenu({
+        onCommand: (action) => this.runAction(action),
+        onClose: noop
+      });
+    }
+    this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
       onEditRequest: (id) => this.startEditingElement(id),
@@ -5731,6 +5894,7 @@ var Viewport = class {
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
       this.noteEditor.updateToolbarPosition();
+      this.contextMenu?.close();
       this.requestRender();
     });
     this.unsubStore = [
@@ -5783,6 +5947,7 @@ var Viewport = class {
   canvasEl;
   wrapper;
   unsubCamera;
+  unsubToolChange;
   unsubStore;
   inputHandler;
   background;
@@ -5805,6 +5970,7 @@ var Viewport = class {
   doubleTapDetector = new DoubleTapDetector();
   tapDownX = 0;
   tapDownY = 0;
+  contextMenu = null;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -5995,6 +6161,34 @@ var Viewport = class {
   getSelectedIds() {
     return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
   }
+  runAction(action) {
+    this.inputHandler.runAction(action);
+  }
+  canPaste() {
+    return this.inputHandler.hasClipboard();
+  }
+  openContextMenu(screenPos) {
+    if (!this.contextMenu) return;
+    const ids = this.getSelectedIds();
+    const items = [];
+    if (ids.length > 0) {
+      items.push({ label: "Cut", action: "cut" });
+      items.push({ label: "Copy", action: "copy" });
+      if (this.canPaste()) items.push({ label: "Paste", action: "paste" });
+      items.push({ label: "Duplicate", action: "duplicate" });
+      items.push({ label: "Delete", action: "delete" });
+      items.push({ label: "Bring to Front", action: "z-front" });
+      items.push({ label: "Bring Forward", action: "z-forward" });
+      items.push({ label: "Send Backward", action: "z-backward" });
+      items.push({ label: "Send to Back", action: "z-back" });
+      const allLocked = ids.every((id) => this.store.getById(id)?.locked);
+      items.push({ label: allLocked ? "Unlock" : "Lock", action: "toggle-lock" });
+    } else if (this.canPaste()) {
+      items.push({ label: "Paste", action: "paste" });
+    }
+    if (items.length === 0) return;
+    this.contextMenu.open(items, screenPos);
+  }
   onSelectionChange(listener) {
     const tool = this.getSelectTool();
     return tool ? tool.onSelectionChange(listener) : noop;
@@ -6055,6 +6249,20 @@ var Viewport = class {
     }
     this.historyRecorder.commit();
   }
+  toggleLockSelection() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    const anyUnlocked = ids.some((id) => {
+      const el = this.store.getById(id);
+      return el ? !el.locked : false;
+    });
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (el && el.locked !== anyUnlocked) this.store.update(id, { locked: anyUnlocked });
+    }
+    this.historyRecorder.commit();
+  }
   alignSelection(edge) {
     const bounded = this.boundedSelection();
     if (bounded.length < 2) return;
@@ -6153,12 +6361,14 @@ var Viewport = class {
     this.noteEditor.destroy(this.store);
     this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
+    this.contextMenu?.dispose();
     this.wrapper.removeEventListener("pointerdown", this.onTapDown);
     this.wrapper.removeEventListener("pointerup", this.onDoubleTap);
     this.wrapper.removeEventListener("dragover", this.onDragOver);
     this.wrapper.removeEventListener("drop", this.onDrop);
     this.inputHandler.destroy();
     this.unsubCamera();
+    this.unsubToolChange();
     this.unsubStore.forEach((fn) => fn());
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
@@ -6986,6 +7196,15 @@ var SelectTool = class {
     this.setSelectedIds(ids);
     this.ctx?.requestRender();
   }
+  selectAtPoint(world, ctx) {
+    const hit = this.hitTest(world, ctx);
+    if (!hit) {
+      this.setSelectedIds([]);
+      return;
+    }
+    if (this._selectedIds.includes(hit.id)) return;
+    this.setSelectedIds(expandToGroups([hit.id], ctx.store.getAll()));
+  }
   get isMarqueeActive() {
     return this.mode.type === "marquee";
   }
@@ -7489,6 +7708,7 @@ var SelectTool = class {
     for (const id of this._selectedIds) {
       const el = ctx.store.getById(id);
       if (!el || !("size" in el)) continue;
+      if (el.locked) continue;
       if (el.type === "shape" && el.shape === "line") continue;
       const layout = this.getOverlayLayout(el, zoom);
       if (!layout) continue;
@@ -7624,62 +7844,89 @@ var SelectTool = class {
           canvasCtx.stroke();
         }
       }
-      if ("size" in el) {
-        canvasCtx.setLineDash([]);
-        canvasCtx.fillStyle = "#ffffff";
-        const corners = layout.angle === 0 ? this.getHandlePositions(bounds) : layout.corners;
-        for (const [, pos] of corners) {
+      if (!el.locked) {
+        if ("size" in el) {
+          canvasCtx.setLineDash([]);
+          canvasCtx.fillStyle = "#ffffff";
+          const corners = layout.angle === 0 ? this.getHandlePositions(bounds) : layout.corners;
+          for (const [, pos] of corners) {
+            canvasCtx.fillRect(
+              pos.x - handleWorldSize / 2,
+              pos.y - handleWorldSize / 2,
+              handleWorldSize,
+              handleWorldSize
+            );
+            canvasCtx.strokeRect(
+              pos.x - handleWorldSize / 2,
+              pos.y - handleWorldSize / 2,
+              handleWorldSize,
+              handleWorldSize
+            );
+          }
+          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+        } else if (el.type === "template") {
+          canvasCtx.setLineDash([]);
+          canvasCtx.fillStyle = "#ffffff";
+          const hx = bounds.x + bounds.w;
+          const hy = bounds.y + bounds.h;
           canvasCtx.fillRect(
-            pos.x - handleWorldSize / 2,
-            pos.y - handleWorldSize / 2,
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
             handleWorldSize,
             handleWorldSize
           );
           canvasCtx.strokeRect(
-            pos.x - handleWorldSize / 2,
-            pos.y - handleWorldSize / 2,
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
             handleWorldSize,
             handleWorldSize
           );
+          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+        }
+        if (this._selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
+          const stemStart = this.topMidpoint(layout);
+          const stemEnd = layout.rotateHandle;
+          canvasCtx.beginPath();
+          canvasCtx.moveTo(stemStart.x, stemStart.y);
+          canvasCtx.lineTo(stemEnd.x, stemEnd.y);
+          canvasCtx.stroke();
+          canvasCtx.setLineDash([]);
+          canvasCtx.fillStyle = "#ffffff";
+          canvasCtx.beginPath();
+          canvasCtx.arc(stemEnd.x, stemEnd.y, handleWorldSize / 2, 0, Math.PI * 2);
+          canvasCtx.fill();
+          canvasCtx.stroke();
+          canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
         }
-        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
-      } else if (el.type === "template") {
-        canvasCtx.setLineDash([]);
-        canvasCtx.fillStyle = "#ffffff";
-        const hx = bounds.x + bounds.w;
-        const hy = bounds.y + bounds.h;
-        canvasCtx.fillRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
-        canvasCtx.strokeRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
-        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
       }
-      if (this._selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
-        const stemStart = this.topMidpoint(layout);
-        const stemEnd = layout.rotateHandle;
-        canvasCtx.beginPath();
-        canvasCtx.moveTo(stemStart.x, stemStart.y);
-        canvasCtx.lineTo(stemEnd.x, stemEnd.y);
-        canvasCtx.stroke();
-        canvasCtx.setLineDash([]);
-        canvasCtx.fillStyle = "#ffffff";
-        canvasCtx.beginPath();
-        canvasCtx.arc(stemEnd.x, stemEnd.y, handleWorldSize / 2, 0, Math.PI * 2);
-        canvasCtx.fill();
-        canvasCtx.stroke();
-        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+      if (el.locked) {
+        const ne = layout.corners.find(([h]) => h === "ne")?.[1];
+        if (ne) this.drawLockBadge(canvasCtx, ne, zoom);
       }
     }
     canvasCtx.restore();
   }
+  drawLockBadge(ctx, at, zoom) {
+    const r = 9 / zoom;
+    ctx.save();
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.arc(at.x, at.y, r, 0, Math.PI * 2);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill();
+    ctx.strokeStyle = "#2196F3";
+    ctx.lineWidth = 1.5 / zoom;
+    ctx.stroke();
+    const bw = 8 / zoom;
+    const bh = 6 / zoom;
+    ctx.fillStyle = "#2196F3";
+    ctx.fillRect(at.x - bw / 2, at.y - bh / 2 + 1 / zoom, bw, bh);
+    ctx.beginPath();
+    ctx.arc(at.x, at.y - bh / 2 + 1 / zoom, 2.5 / zoom, Math.PI, 0);
+    ctx.lineWidth = 1.4 / zoom;
+    ctx.stroke();
+    ctx.restore();
+  }
   renderBindingHighlights(canvasCtx, arrow, zoom) {
     if (!this.ctx) return;
     if (!arrow.fromBinding && !arrow.toBinding) return;
@@ -8652,7 +8899,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.35.0";
+var VERSION = "0.36.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,