feat(library): step-route crow's-foot ER edges like class diagrams

Switch the crow's-foot relationship edge from straight to the class
diagram's step (orthogonal) routing by reusing useStepPathEdge and
StepEdgeBody — bringing bend points, midpoint dragging and reconnection
for free, and removing the bespoke BaseEdge/overlay/endpoint-marker
duplication.

deriveErCfEdgeRender now orients each crow's-foot marker along the
path's end segment (via getPathStartInfo/getPathEndInfo) instead of the
source→target vector, so the markers stay attached and correctly angled
when the edge bends. Falls back to the straight line before first layout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: FelixTJDietrich

.changeset/entity-relationship-diagram.md

@@ -6,4 +6,4 @@
 Add two first-class **Entity-Relationship diagram** types, covering both notations taught and used in practice:
 
 - **Entity-Relationship (Chen):** strong and weak entities (double border), regular and identifying relationships (diamond / double diamond), and attributes as ellipses with key (underline), partial-key (dashed underline), multivalued (double ellipse) and derived (dashed ellipse) decorations. Entity↔relationship connectors carry a free-text cardinality label with quick presets for both Chen ratio (`1`/`N`/`M`) and `(min,max)`, plus a participation toggle (total participation draws a double line). The editor only lets you draw structurally valid connections and picks the right connector vs. link edge automatically, including on reconnection.
-- **Entity-Relationship (Crow's Foot):** the Mermaid/IE-style notation — entity tables whose columns are listed as rows, related by straight lines with crow's-foot cardinality markers at each end (zero/one/many) and solid (identifying) or dashed (non-identifying) lines.
+- **Entity-Relationship (Crow's Foot):** the Mermaid/IE-style notation — entity tables whose columns are listed as rows, related by step-routed lines (the same orthogonal routing, bend points and midpoint dragging as class edges) with crow's-foot cardinality markers at each end (zero/one/many) and solid (identifying) or dashed (non-identifying) lines.

library/lib/edges/edgeTypes/ErCfRelationshipEdge.tsx

@@ -1,15 +1,10 @@
-import { BaseEdge } from "@xyflow/react"
-import {
-  BaseEdgeProps,
-  CommonEdgeElements,
-  EdgeEndpointMarkers,
-} from "../GenericEdge"
+import { BaseEdgeProps, StepEdgeBody, CommonEdgeElements } from "../GenericEdge"
 import { EdgeMiddleLabels } from "../labelTypes/EdgeMiddleLabels"
-import { useStraightPathEdge } from "@/hooks/useStraightPathEdge"
+import { useEdgeConfig } from "@/hooks/useEdgeConfig"
+import { useStepPathEdge } from "@/hooks/useStepPathEdge"
 import { useDiagramStore, usePopoverStore } from "@/store/context"
 import { useShallow } from "zustand/shallow"
 import { useToolbar } from "@/hooks"
-import { EDGES } from "@/constants"
 import {
   AssessmentSelectableWrapper,
   FeedbackDropzone,
@@ -18,8 +13,10 @@ import { getCustomColorsFromDataForEdge } from "@/utils/layoutUtils"
 import { ErCrowsFootMarker } from "@/components/svgs/edges/ErCrowsFootMarker"
 import { deriveErCfEdgeRender } from "@/utils/erCfUtils"
 
-// Crow's-foot (Mermaid-style) relationship: a straight line directly between two
-// entity tables, with a crow's-foot cardinality marker at each end. Solid when
+// Crow's-foot (Mermaid-style) relationship between two entity tables. Reuses the
+// class diagram's step (orthogonal) routing — bend points, midpoint dragging,
+// reconnection — and overlays a crow's-foot cardinality marker at each end,
+// oriented along the path's final segment so it tracks bends. Solid line when
 // identifying, dashed when not.
 export const ErCfRelationshipEdge = ({
   id,
@@ -37,11 +34,17 @@ export const ErCfRelationshipEdge = ({
   data,
 }: BaseEdgeProps) => {
   const { handleDelete } = useToolbar({ id })
+  const config = useEdgeConfig(type as "ErCfRelationship")
+  const allowMidpointDragging =
+    "allowMidpointDragging" in config ? config.allowMidpointDragging : true
+  const enableStraightPath =
+    "enableStraightPath" in config
+      ? (config.enableStraightPath as boolean)
+      : true
 
   const { assessments } = useDiagramStore(
     useShallow((state) => ({ assessments: state.assessments }))
   )
-
   const setPopOverElementId = usePopoverStore(
     useShallow((state) => state.setPopOverElementId)
   )
@@ -51,12 +54,17 @@ export const ErCfRelationshipEdge = ({
     edgeData,
     currentPath,
     overlayPath,
+    bendHandles,
+    isBendDragging,
+    draggingHandleSegmentIndex,
+    hasInitialCalculation,
+    isReconnecting,
+    handlePointerDown,
     sourcePoint,
     targetPoint,
     isDiagramModifiable,
-    isReconnecting,
     canEditEndpoint,
-  } = useStraightPathEdge({
+  } = useStepPathEdge({
     id,
     type,
     source,
@@ -69,67 +77,62 @@ export const ErCfRelationshipEdge = ({
     targetPosition,
     sourceHandleId,
     targetHandleId,
+    data,
+    allowMidpointDragging,
+    enableStraightPath,
   })
 
   const { strokeColor, textColor } = getCustomColorsFromDataForEdge(data)
   const {
     dashed,
     source: sourceMarker,
     target: targetMarker,
-  } = deriveErCfEdgeRender(data, sourcePoint, targetPoint)
+  } = deriveErCfEdgeRender(data, currentPath, sourcePoint, targetPoint)
 
   return (
     <AssessmentSelectableWrapper elementId={id} asElement="g">
       <FeedbackDropzone elementId={id} asElement="path" elementType={type}>
-        <g className="edge-container">
-          <BaseEdge
-            id={id}
-            path={currentPath}
-            pointerEvents="none"
-            style={{
-              stroke: strokeColor,
-              strokeDasharray: dashed ? "8 5" : undefined,
-            }}
-          />
-
+        <StepEdgeBody
+          id={id}
+          markerKey={`${id}-ercf`}
+          currentPath={currentPath}
+          overlayPath={overlayPath}
+          pathRef={pathRef}
+          strokeColor={strokeColor}
+          strokeDashArray={dashed ? "8 5" : undefined}
+          hasInitialCalculation={hasInitialCalculation}
+          isReconnecting={isReconnecting}
+          isBendDragging={isBendDragging}
+          draggingHandleSegmentIndex={draggingHandleSegmentIndex}
+          markerStart={undefined}
+          markerEnd={undefined}
+          sourcePoint={sourcePoint}
+          targetPoint={targetPoint}
+          sourcePosition={sourcePosition}
+          targetPosition={targetPosition}
+          isDiagramModifiable={isDiagramModifiable}
+          canEditEndpoint={canEditEndpoint}
+          allowMidpointDragging={allowMidpointDragging}
+          bendHandles={bendHandles}
+          handlePointerDown={handlePointerDown}
+        >
           {!isReconnecting && (
             <>
               <ErCrowsFootMarker
-                point={sourcePoint}
+                point={sourceMarker.point}
                 direction={sourceMarker.direction}
                 cardinality={sourceMarker.cardinality}
                 strokeColor={strokeColor}
               />
               <ErCrowsFootMarker
-                point={targetPoint}
+                point={targetMarker.point}
                 direction={targetMarker.direction}
                 cardinality={targetMarker.cardinality}
                 strokeColor={strokeColor}
               />
             </>
           )}
-
-          <path
-            ref={pathRef}
-            className="edge-overlay"
-            d={overlayPath}
-            fill="none"
-            strokeWidth={EDGES.EDGE_HIGHLIGHT_STROKE_WIDTH}
-            pointerEvents="stroke"
-            style={{ opacity: isReconnecting ? 0 : 0.4 }}
-          />
-
-          {!isReconnecting && (
-            <EdgeEndpointMarkers
-              sourcePoint={sourcePoint}
-              targetPoint={targetPoint}
-              sourcePosition={sourcePosition}
-              targetPosition={targetPosition}
-              isDiagramModifiable={isDiagramModifiable}
-              canEditEndpoint={canEditEndpoint}
-            />
-          )}
-        </g>
+        </StepEdgeBody>
 
         {!isReconnecting && (
           <>

library/lib/edges/types.tsx

@@ -161,9 +161,9 @@ export const edgeConfig = {
 
   ErConnector: { allowMidpointDragging: true },
   ErLink: { allowMidpointDragging: true },
-  // Straight only: the crow's-foot end markers are oriented from the
-  // source→target vector, so a bend point would detach them from the line.
-  ErCfRelationship: { allowMidpointDragging: false },
+  // Step-routed like class edges; the crow's-foot markers orient off the path's
+  // end segment so they stay attached at bends.
+  ErCfRelationship: { allowMidpointDragging: true },
 } as const
 
 export type DiagramEdgeType = keyof typeof diagramEdgeTypes

library/lib/utils/edgeUtils.ts

@@ -2429,8 +2429,9 @@ export function getConnectionLineType(
     case "SyntaxTree":
     case "PetriNet":
     case "EntityRelationship":
-    case "EntityRelationshipCrowsFoot":
       return ConnectionLineType.Straight
+    // EntityRelationshipCrowsFoot falls through to the default Step routing, like
+    // the class diagram — its markers orient off the path's end segment.
 
     default:
       return ConnectionLineType.Step

library/lib/utils/erCfUtils.ts

@@ -1,5 +1,6 @@
 import { CustomEdgeProps } from "@/edges/EdgeProps"
 import { IPoint } from "@/edges/Connection"
+import { getPathStartInfo, getPathEndInfo } from "./pathParsing"
 import {
   DEFAULT_ER_CF_SOURCE_CARDINALITY,
   DEFAULT_ER_CF_TARGET_CARDINALITY,
@@ -10,6 +11,7 @@ import {
 // of the React components so it can be unit-tested without a React Flow context.
 
 export interface ErCfMarkerSpec {
+  point: IPoint
   cardinality: ErCfCardinality
   // Angle (radians) pointing INTO the entity at this end.
   direction: number
@@ -23,28 +25,39 @@ export interface ErCfEdgeRender {
 
 /**
  * Derive what a crow's-foot edge draws: a dashed line when non-identifying, and
- * a cardinality + into-the-entity direction for each end (the target marker
- * follows the source→target line; the source marker is the reverse). Cardinality
- * falls back to the shared defaults when the edge omits it.
+ * a per-end cardinality marker placed at the entity boundary, oriented along the
+ * path's final segment (so the foot stays attached and correctly angled even when
+ * the step-routed edge bends). The target marker follows the segment entering the
+ * target; the source marker is the reverse of the segment leaving the source. Both
+ * fall back to the straight source→target line before the path is laid out, and
+ * cardinality falls back to the shared defaults.
  */
 export function deriveErCfEdgeRender(
   data: CustomEdgeProps | undefined,
+  currentPath: string,
   sourcePoint: IPoint,
   targetPoint: IPoint
 ): ErCfEdgeRender {
-  const intoTarget = Math.atan2(
+  const straight = Math.atan2(
     targetPoint.y - sourcePoint.y,
     targetPoint.x - sourcePoint.x
   )
+  const start = getPathStartInfo(currentPath)
+  const end = getPathEndInfo(currentPath)
   return {
     dashed: data?.identifying === false,
     source: {
+      point: sourcePoint,
       cardinality: data?.sourceCardinality ?? DEFAULT_ER_CF_SOURCE_CARDINALITY,
-      direction: intoTarget + Math.PI,
+      // getPathStartInfo already points INTO the source; the straight fallback
+      // points OUT (toward the target), so reverse only that case.
+      direction: start ? start.direction : straight + Math.PI,
     },
     target: {
+      point: targetPoint,
       cardinality: data?.targetCardinality ?? DEFAULT_ER_CF_TARGET_CARDINALITY,
-      direction: intoTarget,
+      // end.direction already enters the target.
+      direction: end ? end.direction : straight,
     },
   }
 }

library/tests/unit/erCrowsFoot.test.tsx

@@ -102,30 +102,48 @@ describe("crow's-foot diagram wiring", () => {
 describe("deriveErCfEdgeRender", () => {
   const left = { x: 0, y: 0 }
   const right = { x: 10, y: 0 }
+  const straight = "M 0 0 L 10 0" // horizontal source→target
+  // L-shaped step path: leaves the source going DOWN, enters the target going RIGHT.
+  const bent = "M 0 0 L 0 10 L 10 10"
 
   it("is dashed only when explicitly non-identifying", () => {
-    expect(
+    const d = (id?: boolean) =>
       deriveErCfEdgeRender(
-        { identifying: false } as CustomEdgeProps,
+        id === undefined ? undefined : ({ identifying: id } as CustomEdgeProps),
+        straight,
         left,
         right
       ).dashed
-    ).toBe(true)
-    expect(
-      deriveErCfEdgeRender(
-        { identifying: true } as CustomEdgeProps,
-        left,
-        right
-      ).dashed
-    ).toBe(false)
+    expect(d(false)).toBe(true)
+    expect(d(true)).toBe(false)
     // Undefined defaults to identifying (solid), matching the popover toggle.
-    expect(deriveErCfEdgeRender(undefined, left, right).dashed).toBe(false)
+    expect(d(undefined)).toBe(false)
+  })
+
+  it("orients each marker along the path's end segment (straight)", () => {
+    const { source, target } = deriveErCfEdgeRender(
+      undefined,
+      straight,
+      left,
+      right
+    )
+    expect(target.direction).toBeCloseTo(0) // segment enters target going +x
+    expect(source.direction).toBeCloseTo(Math.PI) // reverse of leaving the source
+    expect(source.point).toEqual(left)
+    expect(target.point).toEqual(right)
   })
 
-  it("points each end's marker into its entity (source = target + π)", () => {
-    const { source, target } = deriveErCfEdgeRender(undefined, left, right)
-    expect(target.direction).toBeCloseTo(0) // along source→target (+x)
-    expect(source.direction).toBeCloseTo(Math.PI) // the reverse
+  it("follows the path round a bend (markers track the step route)", () => {
+    const { source, target } = deriveErCfEdgeRender(
+      undefined,
+      bent,
+      left,
+      right
+    )
+    // Last segment enters the target going +x; first segment leaves the source
+    // going +y (down), so the marker points back up (−y).
+    expect(target.direction).toBeCloseTo(0)
+    expect(source.direction).toBeCloseTo(-Math.PI / 2)
   })
 
   it("maps source/target cardinality to the matching end, with defaults", () => {
@@ -134,13 +152,14 @@ describe("deriveErCfEdgeRender", () => {
         sourceCardinality: "OneOrMany",
         targetCardinality: "ZeroOrOne",
       } as CustomEdgeProps,
+      straight,
       left,
       right
     )
     expect(withData.source.cardinality).toBe("OneOrMany")
     expect(withData.target.cardinality).toBe("ZeroOrOne")
 
-    const defaults = deriveErCfEdgeRender(undefined, left, right)
+    const defaults = deriveErCfEdgeRender(undefined, straight, left, right)
     expect(defaults.source.cardinality).toBe("ExactlyOne")
     expect(defaults.target.cardinality).toBe("ZeroOrMany")
   })