diff --git a/prd.json b/prd.json index 29d01a7..c2f770d 100644 --- a/prd.json +++ b/prd.json @@ -533,7 +533,7 @@ "Verify in browser using dev-browser skill" ], "priority": 30, - "passes": false, + "passes": true, "notes": "" }, { diff --git a/progress.txt b/progress.txt index dab9d29..012a474 100644 --- a/progress.txt +++ b/progress.txt @@ -433,3 +433,17 @@ - onEdgesDelete is useful for additional logic like logging, dirty state tracking, or undo/redo - Edge selection shows visual highlight via React Flow's built-in styling --- + +## 2026-01-22 - US-030 +- What was implemented: Right-click context menu for canvas, nodes, and edges +- Files changed: + - src/components/editor/ContextMenu.tsx - new component with menu items for different contexts (canvas/node/edge) + - src/app/editor/[projectId]/FlowchartEditor.tsx - integrated context menu with handlers for all actions +- **Learnings for future iterations:** + - Use `onPaneContextMenu`, `onNodeContextMenu`, and `onEdgeContextMenu` React Flow callbacks for context menus + - `screenToFlowPosition()` converts screen coordinates to flow coordinates for placing nodes at click position + - Context menu state includes type ('canvas'|'node'|'edge') and optional nodeId/edgeId for targeted actions + - Use `document.addEventListener('click', handler)` and `e.stopPropagation()` on menu to close on outside click + - Escape key listener via `document.addEventListener('keydown', handler)` for menu close + - NodeMouseHandler and EdgeMouseHandler types from reactflow provide proper typing for context menu callbacks +---