From c3975dd91a4b4c605e1cc21866298c2776e4940b Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Thu, 22 Jan 2026 18:11:53 -0300 Subject: [PATCH] chore: mark US-032 as complete and update progress log Co-Authored-By: Claude Opus 4.5 --- prd.json | 2 +- progress.txt | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/prd.json b/prd.json index cae515f..6b6440c 100644 --- a/prd.json +++ b/prd.json @@ -568,7 +568,7 @@ "Verify in browser using dev-browser skill" ], "priority": 32, - "passes": false, + "passes": true, "notes": "" }, { diff --git a/progress.txt b/progress.txt index 963615c..f09ade7 100644 --- a/progress.txt +++ b/progress.txt @@ -461,3 +461,18 @@ - Condition type has operators: '>' | '<' | '==' | '>=' | '<=' | '!=' - Preview condition in modal using template string: `${variableName} ${operator} ${value}` --- + +## 2026-01-22 - US-032 +- What was implemented: Display conditions on edges with dashed styling and labels +- Files changed: + - src/components/editor/edges/ConditionalEdge.tsx - new custom edge component with condition display + - src/app/editor/[projectId]/FlowchartEditor.tsx - integrated custom edge type, added EdgeTypes import and edgeTypes definition +- **Learnings for future iterations:** + - Custom React Flow edges use EdgeProps typing where T is the data shape + - Use `BaseEdge` component for rendering the edge path, and `EdgeLabelRenderer` for positioning labels + - `getSmoothStepPath` returns [edgePath, labelX, labelY] - labelX/labelY are center coordinates for labels + - Custom edge types are registered in edgeTypes object (similar to nodeTypes) and passed to ReactFlow + - Style edges with conditions using strokeDasharray: '5 5' for dashed lines + - Custom edges go in `src/components/editor/edges/` directory + - Use amber color scheme for conditional edges to distinguish from regular edges +---