From b1ff05439a1bcfa124c8dab58d7453acb0ee4e87 Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Fri, 27 Mar 2026 17:10:01 +0100 Subject: [PATCH] docs: update design spec and increase section gap to 80px Update design spec with implementation notes covering recursive compound nesting, edge z-ordering, ON_COMPLETION sections, drill-down navigation, CSS transform zoom, and HTML overlay toolbar. Increase SECTION_GAP to 80px for better visual separation between completion and error handler sections. Co-Authored-By: Claude Opus 4.6 (1M context) --- ...3-27-interactive-process-diagram-design.md | 24 +++++++++++++++++++ .../ProcessDiagram/useDiagramData.ts | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/docs/superpowers/specs/2026-03-27-interactive-process-diagram-design.md b/docs/superpowers/specs/2026-03-27-interactive-process-diagram-design.md index f833ff49..19e6ff7b 100644 --- a/docs/superpowers/specs/2026-03-27-interactive-process-diagram-design.md +++ b/docs/superpowers/specs/2026-03-27-interactive-process-diagram-design.md @@ -333,3 +333,27 @@ These are explicitly out of scope for sub-project 1: 8. **Compound nodes:** Route with CHOICE renders children inside dashed container 9. **Keyboard (required):** Escape deselects, +/- zooms, 0 fits to view 10. **Direction:** `?direction=TB` renders top-to-bottom layout + +--- + +## Implementation Notes (post-spec additions) + +The following features were added during implementation beyond the original spec: + +### Recursive compound nesting +EIP_WHEN, EIP_OTHERWISE, DO_CATCH, DO_FINALLY added to COMPOUND_TYPES on both backend and frontend. CompoundNode recursively renders children that are themselves compound (e.g., CHOICE → WHEN → processors). + +### Edge z-ordering +Edges are distributed to their containing compound and rendered inside the compound's SVG group (after background, before children). Top-level edges stay in the main edges group. This prevents compound backgrounds from hiding edges. + +### ON_COMPLETION handler sections +ON_COMPLETION nodes render as teal-tinted sections between the main flow and error handler sections. Structurally parallel to ON_EXCEPTION. + +### Drill-down navigation +Double-click on DIRECT or SEDA nodes navigates into the target route's diagram. A breadcrumb bar shows the route stack and supports clicking back to any level. Escape key goes back one level. Route ID resolution handles camelCase endpoint URIs → kebab-case route IDs using the catalog's known route IDs. + +### Zoom via CSS transform +The original spec proposed SVG viewBox manipulation. Implementation uses CSS `transform: translate() scale()` on the content `` element instead, which is simpler and more predictable. Default zoom is 100%. + +### Toolbar as HTML overlay +The original spec proposed SVG ``. Implementation renders the toolbar as an absolute-positioned HTML div outside the SVG, so it maintains fixed size regardless of zoom level. Styled with design system tokens. diff --git a/ui/src/components/ProcessDiagram/useDiagramData.ts b/ui/src/components/ProcessDiagram/useDiagramData.ts index 674a801f..c23fa56b 100644 --- a/ui/src/components/ProcessDiagram/useDiagramData.ts +++ b/ui/src/components/ProcessDiagram/useDiagramData.ts @@ -4,7 +4,7 @@ import type { DiagramNode, DiagramEdge } from '../../api/queries/diagrams'; import type { DiagramSection } from './types'; import { isErrorCompoundType, isCompletionCompoundType } from './node-colors'; -const SECTION_GAP = 40; +const SECTION_GAP = 80; export function useDiagramData( application: string,