Compare commits

..

No commits in common. "e02d736f2e7d0cbbc2d962b09afaa0d8ff5f1c76" and "ae0f84fde724255c8ec884eb19f30e261ecd35c5" have entirely different histories.

3 changed files with 2 additions and 35 deletions

View File

@ -499,7 +499,7 @@
"Verify in browser using dev-browser skill"
],
"priority": 28,
"passes": true,
"passes": false,
"notes": ""
},
{
@ -514,7 +514,7 @@
"Verify in browser using dev-browser skill"
],
"priority": 29,
"passes": true,
"passes": false,
"notes": ""
},
{

View File

@ -409,27 +409,3 @@
- Apply consistent edge styling in both onConnect (new edges) and toReactFlowEdges (loaded edges)
- Generate unique edge IDs with nanoid in onConnect callback
---
## 2026-01-21 - US-028
- What was implemented: Select and delete nodes functionality
- Files changed:
- src/app/editor/[projectId]/FlowchartEditor.tsx - added deleteKeyCode prop to enable Delete/Backspace key deletion
- **Learnings for future iterations:**
- React Flow has built-in node selection via clicking - no extra configuration needed
- Use `deleteKeyCode={['Delete', 'Backspace']}` prop to enable keyboard deletion
- React Flow automatically removes connected edges when a node is deleted (no manual cleanup needed)
- The useNodesState/useEdgesState hooks with onNodesChange/onEdgesChange handle all deletion state updates
- No explicit onNodesDelete callback is needed - the onNodesChange handler covers deletion events
---
## 2026-01-21 - US-029
- What was implemented: Select and delete edges functionality
- Files changed:
- src/app/editor/[projectId]/FlowchartEditor.tsx - added onEdgesDelete callback
- **Learnings for future iterations:**
- React Flow 11 edges are clickable and selectable by default (interactionWidth renders invisible interaction area)
- The `deleteKeyCode` prop works for both nodes and edges - same configuration covers both
- onEdgesDelete is optional if you just need state management (onEdgesChange handles removal events)
- 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
---

View File

@ -161,13 +161,6 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
// TODO: Implement in US-036
}, [])
// Handle edge deletion via keyboard (Delete/Backspace)
const onEdgesDelete = useCallback((deletedEdges: Edge[]) => {
// Edges are already removed from state by onEdgesChange
// This callback can be used for additional logic like logging or dirty state
console.log('Deleted edges:', deletedEdges.map((e) => e.id))
}, [])
return (
<div className="flex h-full w-full flex-col">
<Toolbar
@ -185,9 +178,7 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
nodeTypes={nodeTypes}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onEdgesDelete={onEdgesDelete}
onConnect={onConnect}
deleteKeyCode={['Delete', 'Backspace']}
fitView
>
<Background variant={BackgroundVariant.Dots} gap={16} size={1} />