Add line jump rendering for edge crossings - #1029
Draft
snuziale wants to merge 1 commit into
Draft
Conversation
Waypoint-routed edges can now hop over the edges they cross, so criss-crossing lines read as passing over rather than joining. Opt in per edge with `data.enableLineJumps`. Edges publish their polylines to a shared `EdgeCrossingsStore`, which derives every crossing once per commit and hands each edge back only its own jumps. At a crossing it is the horizontal segment that arcs, which keeps the notch pattern stable while nodes are dragged. Jumps are derived from the vertices and only ever change the path string, so publishing cannot re-trigger the computation that produced it. `createRoundedPath` grows an optional `jumps` argument that replaces a stretch of a straight run with a semicircular arc. Jumps that would eat into a rounded corner, or that sit closer together than one arc width, are dropped so a densely crossed stretch degrades to fewer notches instead of a scalloped line. Waypoint routing only: handle-routed edges produce a path string with no vertices to intersect. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01C3Toj3SHbt75zwJ9ufqojS
Contributor
|
Apollo Coded App preview deployments are ready.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Adds an opt-in “line jump” rendering feature for waypoint-routed canvas edges, improving readability at edge crossings by drawing a small arc on the horizontal segment where it intersects another edge.
Changes:
- Introduces a crossings registry + intersection algorithm to compute per-edge jump points.
- Extends waypoint edge path building (
createRoundedPath) to render semicircular jump arcs at crossing points. - Wires the feature into canvas rendering via
CanvasProviders,CanvasEdge, anduseEdgeGeometry, plus adds Storybook + unit/integration tests.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/Edges/shared/types.ts | Adds PathJump type and enableLineJumps flag to CanvasEdgeData. |
| packages/apollo-react/src/canvas/components/Edges/shared/hooks/useEdgeGeometry.ts | Publishes edge geometry to crossings store and passes computed jumps into path builder. |
| packages/apollo-react/src/canvas/components/Edges/shared/geometry.ts | Enhances createRoundedPath to optionally render jump arcs along straight runs. |
| packages/apollo-react/src/canvas/components/Edges/shared/geometry.test.ts | Adds unit tests for jump arc rendering behavior and edge cases. |
| packages/apollo-react/src/canvas/components/Edges/shared/crossings/useEdgeLineJumps.ts | New hook to register polylines and subscribe to computed jump snapshots. |
| packages/apollo-react/src/canvas/components/Edges/shared/crossings/useEdgeLineJumps.test.tsx | Integration tests validating provider behavior and opt-in semantics. |
| packages/apollo-react/src/canvas/components/Edges/shared/crossings/index.ts | Barrel exports for crossings feature modules. |
| packages/apollo-react/src/canvas/components/Edges/shared/crossings/EdgeCrossingsContext.tsx | Adds EdgeCrossingsStore + provider for shared recomputation and per-edge subscriptions. |
| packages/apollo-react/src/canvas/components/Edges/shared/crossings/crossings.ts | Implements horizontal–vertical crossing detection and stable jump list equality. |
| packages/apollo-react/src/canvas/components/Edges/shared/crossings/crossings.test.ts | Unit tests for crossing detection and equality logic. |
| packages/apollo-react/src/canvas/components/Edges/shared/constants.ts | Adds LINE_JUMP_RADIUS constant used by arc rendering and spacing/clearance rules. |
| packages/apollo-react/src/canvas/components/Edges/index.ts | Exposes new crossings utilities/types from the Edges entrypoint. |
| packages/apollo-react/src/canvas/components/Edges/CanvasEdge.tsx | Plumbs enableLineJumps from edge data into geometry computation. |
| packages/apollo-react/src/canvas/components/Edges/CanvasEdge.stories.tsx | Adds a Storybook scenario demonstrating line jumps with a toggle. |
| packages/apollo-react/src/canvas/components/BaseCanvas/CanvasProviders.tsx | Mounts EdgeCrossingsProvider in the canvas provider tree. |
Suppressed comments (1)
packages/apollo-react/src/canvas/components/Edges/shared/crossings/crossings.ts:46
computeLineJumpsonly reads frompolylines, so accepting a readonly array makes the API easier to use (e.g. withas constfixtures) and better communicates that inputs are not mutated.
export function computeLineJumps(polylines: EdgePolyline[]): Map<string, PathJump[]> {
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+7
to
+11
| export type EdgePolyline = { | ||
| edgeId: string; | ||
| /** Ordered path vertices. Segment `i` runs from `points[i]` to `points[i + 1]`. */ | ||
| points: Point[]; | ||
| }; |
Contributor
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Contributor
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Aug 08, 2026, 03:09:48 PM |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements visual line jumps (notches) where edges cross each other in waypoint-routed paths. When two edges intersect, the horizontal segment now draws a small arc to hop over the vertical one, making criss-crossing lines more readable. This is an opt-in feature controlled by the
enableLineJumpsflag onCanvasEdgeData.Key Changes
New crossing detection system (
packages/apollo-react/src/canvas/components/Edges/shared/crossings/):crossings.ts: Core algorithm that finds all horizontal-vertical segment intersections and computes jump pointsEdgeCrossingsContext.tsx: Shared store for registering edge polylines and deriving crossings with granular per-edge subscriptionsuseEdgeLineJumps.ts: Hook for edges to publish their geometry and consume jump dataPath rendering updates (
geometry.ts):createRoundedPath()now accepts optionaljumpsparameterappendRun()function draws straight segments with semicircular arcs at crossing pointsIntegration:
EdgeCrossingsProvidermounted inCanvasProvidersto enable the feature tree-wideuseEdgeGeometryhook updated to calluseEdgeLineJumpsand pass jumps to path builderenableLineJumpsfield onCanvasEdgeDatatypeLINE_JUMP_RADIUSconstant added toEDGE_CONSTANTSStorybook story demonstrating the feature with three horizontal edges crossing two vertical ones, with a toggle to compare against flat crossings
Implementation Details
https://claude.ai/code/session_01C3Toj3SHbt75zwJ9ufqojS