Generated with Hive: Add declarative edgeContextMenu prop and overlay for CanvasEdge right-clicks

demo/src/main.tsx

@@ -21,6 +21,7 @@ import type {
   CanvasNode,
   CanvasEdge,
   NodeContextMenuConfig,
+  EdgeContextMenuConfig,
   NodeUpdate,
   EdgeUpdate,
 } from 'system-canvas'
@@ -433,6 +434,40 @@ function App() {
     [handleNodeUpdate, handleNodeDelete]
   )
 
+  // ---------------------------------------------------------------------
+  // Edge context menu — system & gateway modes
+  //
+  // Right-clicking an edge in system or gateway mode opens a small menu
+  // with "Toggle Animation" (flips marching-ants on/off) and "Delete Edge".
+  // Demonstrates the symmetric `edgeContextMenu` API.
+  // ---------------------------------------------------------------------
+  const demoEdgeContextMenu = useMemo<EdgeContextMenuConfig>(
+    () => ({
+      items: [
+        {
+          id: 'toggle-animation',
+          label: 'Toggle Animation',
+        },
+        {
+          id: 'delete-edge',
+          label: 'Delete Edge',
+          destructive: true,
+        },
+      ],
+      onSelect(itemId, edge, ctx) {
+        switch (itemId) {
+          case 'toggle-animation':
+            handleEdgeUpdate(edge.id, { animated: !edge.animated }, ctx.canvasRef ?? undefined)
+            break
+          case 'delete-edge':
+            handleEdgeDelete(edge.id, ctx.canvasRef ?? undefined)
+            break
+        }
+      },
+    }),
+    [handleEdgeUpdate, handleEdgeDelete]
+  )
+
   return (
     <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
       {/* Theme / controls bar */}
@@ -598,6 +633,7 @@ function App() {
         // browser's default right-click behavior so we don't have to
         // invent menus for every demo.
         nodeContextMenu={mode === 'showcase' ? showcaseContextMenu : undefined}
+        edgeContextMenu={['system', 'gateway'].includes(mode) ? demoEdgeContextMenu : undefined}
         onNodeClick={(node: CanvasNode) => {
           console.log('Node clicked:', node.id)
         }}

packages/core/src/edgeContextMenu.ts

@@ -0,0 +1,35 @@
+import type { CanvasEdge, EdgeContextMenuItem, EdgeContextMenuMatchContext } from './types.js'
+
+/**
+ * Decide whether a single context-menu item should appear for a given edge.
+ *
+ * Rules:
+ *   - No `match` block => matches every edge.
+ *   - `match.when(edge, ctx)` is an arbitrary predicate.
+ *
+ * Omitting `match` entirely matches every edge.
+ */
+export function matchesEdgeContextMenuItem(
+  item: EdgeContextMenuItem,
+  edge: CanvasEdge,
+  ctx: EdgeContextMenuMatchContext
+): boolean {
+  const m = item.match
+  if (!m) return true
+  if (m.when && !m.when(edge, ctx)) return false
+  return true
+}
+
+/**
+ * Filter a list of items down to the ones that should appear for the
+ * right-clicked edge. Used internally by `<EdgeContextMenuOverlay>`;
+ * exposed so consumers building their own menu UI on top of the raw
+ * `onContextMenu` callback can apply the same filtering rules.
+ */
+export function filterEdgeContextMenuItems(
+  items: EdgeContextMenuItem[],
+  edge: CanvasEdge,
+  ctx: EdgeContextMenuMatchContext
+): EdgeContextMenuItem[] {
+  return items.filter((item) => matchesEdgeContextMenuItem(item, edge, ctx))
+}

packages/core/src/index.ts

@@ -33,6 +33,10 @@ export type {
   NodeContextMenuConfig,
   NodeContextMenuMatchContext,
   NodeContextMenuSelectContext,
+  EdgeContextMenuItem,
+  EdgeContextMenuConfig,
+  EdgeContextMenuMatchContext,
+  EdgeContextMenuSelectContext,
   NodeUpdate,
   EdgeUpdate,
   NodeMenuOption,
@@ -123,6 +127,12 @@ export {
   filterContextMenuItems,
 } from './contextMenu.js'
 
+// Edge context-menu filtering helpers
+export {
+  matchesEdgeContextMenuItem,
+  filterEdgeContextMenuItems,
+} from './edgeContextMenu.js'
+
 // Rollup helpers
 export { rollupNodes, rollupNodesDeep } from './rollup.js'
 

packages/core/src/types.ts

@@ -1314,6 +1314,52 @@ export interface NodeContextMenuConfig {
   ) => void
 }
 
+// ---------------------------------------------------------------------------
+// Edge context menu types
+// ---------------------------------------------------------------------------
+
+/** Context passed to edge context-menu predicates. */
+export interface EdgeContextMenuMatchContext {
+  canvasRef: string | null
+}
+
+/**
+ * A single item in the declarative edge context menu.
+ * `CanvasEdge` has no `category` or `type` fields, so only a `when`
+ * predicate is available in `match`.
+ */
+export interface EdgeContextMenuItem {
+  id: string
+  label: string
+  icon?: string
+  destructive?: boolean
+  /** Only `when` — CanvasEdge has no category or type fields. */
+  match?: {
+    when?: (edge: CanvasEdge, ctx: EdgeContextMenuMatchContext) => boolean
+  }
+  /** Optional per-edge disabled state. Item renders but is non-clickable. */
+  disabled?: (edge: CanvasEdge, ctx: EdgeContextMenuMatchContext) => boolean
+}
+
+/**
+ * Context passed to `onSelect` when the user picks an item. Includes the
+ * screen position of the original right-click so the consumer can spawn a
+ * follow-up popover or dialog at the same spot.
+ */
+export interface EdgeContextMenuSelectContext extends EdgeContextMenuMatchContext {
+  screenPosition: { x: number; y: number }
+}
+
+/** Top-level config for the declarative edge context menu. */
+export interface EdgeContextMenuConfig {
+  items: EdgeContextMenuItem[]
+  onSelect: (
+    itemId: string,
+    edge: CanvasEdge,
+    ctx: EdgeContextMenuSelectContext
+  ) => void
+}
+
 // ---------------------------------------------------------------------------
 // Editing types
 // ---------------------------------------------------------------------------