@oh-my-pi/pi-utils 16.0.6 → 16.0.8

package/src/vendor/mermaid-ascii/ascii/edge-bundling.ts

@@ -0,0 +1,328 @@
+// ============================================================================
+// ASCII renderer — edge bundling for parallel links
+//
+// Analyzes edges to find parallel links (A & B --> C or A --> B & C) and
+// groups them into bundles. Bundled edges share a visual junction point
+// where they merge/split, creating cleaner diagrams.
+//
+// This module provides:
+//   - analyzeEdgeBundles(): Finds and creates bundles from graph edges
+//   - calculateJunctionPoint(): Computes optimal merge/split locations
+//   - routeBundledEdges(): Routes edges through junction points
+// ============================================================================
+
+import type {
+  AsciiGraph, AsciiNode, AsciiEdge, EdgeBundle, GridCoord, Direction,
+} from './types'
+import { Up, Down, Left, Right, Middle, gridKey, gridCoordEquals } from './types'
+import { getPath, mergePath } from './pathfinder'
+import { getNodeSubgraph } from './grid'
+
+// ============================================================================
+// Bundle analysis
+// ============================================================================
+
+/**
+ * Analyze graph edges and create bundles for parallel links.
+ *
+ * Groups edges by:
+ * - Fan-in: Multiple edges sharing the same target (A & B --> C)
+ * - Fan-out: Multiple edges sharing the same source (A --> B & C)
+ *
+ * Only creates bundles when:
+ * - Graph direction is TD (top-down) - LR routing handles merging naturally
+ * - 2+ edges share the endpoint
+ * - All edges have the same style (solid/dotted/thick)
+ * - None of the edges have labels (labels would overlap at junction)
+ * - Edges are not self-loops
+ *
+ * @returns Array of bundles. Each edge can belong to at most one bundle.
+ */
+export function analyzeEdgeBundles(graph: AsciiGraph): EdgeBundle[] {
+  // Only bundle in TD direction - LR routing handles merging naturally at corners
+  if (graph.config.graphDirection !== 'TD') {
+    return []
+  }
+  const bundles: EdgeBundle[] = []
+  const bundledEdges = new Set<AsciiEdge>()
+
+  // Group edges by target (fan-in candidates)
+  const edgesByTarget = new Map<AsciiNode, AsciiEdge[]>()
+  for (const edge of graph.edges) {
+    // Skip self-loops
+    if (edge.from === edge.to) continue
+
+    const existing = edgesByTarget.get(edge.to) ?? []
+    existing.push(edge)
+    edgesByTarget.set(edge.to, existing)
+  }
+
+  // Create fan-in bundles
+  for (const [target, edges] of edgesByTarget) {
+    if (edges.length < 2) continue
+    if (!canBundle(edges, graph)) continue
+
+    // Check if all edges are already bundled
+    if (edges.some(e => bundledEdges.has(e))) continue
+
+    const bundle: EdgeBundle = {
+      type: 'fan-in',
+      edges: [...edges],
+      sharedNode: target,
+      otherNodes: edges.map(e => e.from),
+      junctionPoint: null,
+      sharedPath: [],
+      junctionDir: Middle,
+      sharedNodeDir: Middle,
+    }
+
+    // Mark edges as bundled
+    for (const edge of edges) {
+      edge.bundle = bundle
+      bundledEdges.add(edge)
+    }
+
+    bundles.push(bundle)
+  }
+
+  // Group edges by source (fan-out candidates)
+  const edgesBySource = new Map<AsciiNode, AsciiEdge[]>()
+  for (const edge of graph.edges) {
+    // Skip self-loops and already bundled edges
+    if (edge.from === edge.to) continue
+    if (bundledEdges.has(edge)) continue
+
+    const existing = edgesBySource.get(edge.from) ?? []
+    existing.push(edge)
+    edgesBySource.set(edge.from, existing)
+  }
+
+  // Create fan-out bundles
+  for (const [source, edges] of edgesBySource) {
+    if (edges.length < 2) continue
+    if (!canBundle(edges, graph)) continue
+
+    const bundle: EdgeBundle = {
+      type: 'fan-out',
+      edges: [...edges],
+      sharedNode: source,
+      otherNodes: edges.map(e => e.to),
+      junctionPoint: null,
+      sharedPath: [],
+      junctionDir: Middle,
+      sharedNodeDir: Middle,
+    }
+
+    // Mark edges as bundled
+    for (const edge of edges) {
+      edge.bundle = bundle
+      bundledEdges.add(edge)
+    }
+
+    bundles.push(bundle)
+  }
+
+  return bundles
+}
+
+/**
+ * Check if a group of edges can be bundled together.
+ * Returns false if edges have different styles, any have labels,
+ * or if the edges span subgraph boundaries (which creates complex routing).
+ */
+function canBundle(edges: AsciiEdge[], graph: AsciiGraph): boolean {
+  if (edges.length < 2) return false
+
+  const firstStyle = edges[0]!.style
+  const firstFromSg = getNodeSubgraph(graph, edges[0]!.from)
+  const firstToSg = getNodeSubgraph(graph, edges[0]!.to)
+
+  for (const edge of edges) {
+    // Different styles can't be bundled (would look confusing)
+    if (edge.style !== firstStyle) return false
+
+    // Edges with labels can't be bundled (labels would overlap at junction)
+    if (edge.text.length > 0) return false
+
+    // Don't bundle if edges span different subgraph boundaries
+    // (creates complex routing that doesn't look good)
+    const fromSg = getNodeSubgraph(graph, edge.from)
+    const toSg = getNodeSubgraph(graph, edge.to)
+    if (fromSg !== firstFromSg || toSg !== firstToSg) return false
+
+    // Don't bundle if source and target are in different subgraphs
+    // (cross-boundary edges have special routing needs)
+    if (fromSg !== toSg) return false
+  }
+
+  return true
+}
+
+// ============================================================================
+// Junction point calculation
+// ============================================================================
+
+/**
+ * Calculate the optimal junction point for a bundle.
+ *
+ * For fan-in (A & B --> C):
+ *   - Junction is placed between the sources and the target
+ *   - In TD: above the target, horizontally centered between sources
+ *   - In LR: left of the target, vertically centered between sources
+ *
+ * For fan-out (A --> B & C):
+ *   - Junction is placed between the source and the targets
+ *   - In TD: below the source, horizontally centered between targets
+ *   - In LR: right of the source, vertically centered between targets
+ */
+export function calculateJunctionPoint(
+  graph: AsciiGraph,
+  bundle: EdgeBundle,
+): GridCoord {
+  const dir = graph.config.graphDirection
+  const sharedCoord = bundle.sharedNode.gridCoord!
+  const otherCoords = bundle.otherNodes.map(n => n.gridCoord!)
+
+  if (bundle.type === 'fan-in') {
+    // Junction is BEFORE the shared target
+    // Calculate center of sources
+    const minX = Math.min(...otherCoords.map(c => c.x))
+    const maxX = Math.max(...otherCoords.map(c => c.x))
+    const minY = Math.min(...otherCoords.map(c => c.y))
+    const maxY = Math.max(...otherCoords.map(c => c.y))
+
+    if (dir === 'TD') {
+      // Junction above target, centered between sources
+      // Place it one row above the target's entry point
+      const junctionY = sharedCoord.y - 1
+      // X is centered between sources, but clamped to shared node's X for alignment
+      const centerX = Math.floor((minX + maxX) / 2) + 1 // +1 for center of 3x3 block
+      const junctionX = sharedCoord.x + 1 // Align with target's center
+
+      return { x: junctionX, y: junctionY }
+    } else {
+      // LR: Junction left of target, centered between sources
+      const junctionX = sharedCoord.x - 1
+      const junctionY = sharedCoord.y + 1 // Align with target's center
+
+      return { x: junctionX, y: junctionY }
+    }
+  } else {
+    // fan-out: Junction is AFTER the shared source
+    const minX = Math.min(...otherCoords.map(c => c.x))
+    const maxX = Math.max(...otherCoords.map(c => c.x))
+    const minY = Math.min(...otherCoords.map(c => c.y))
+    const maxY = Math.max(...otherCoords.map(c => c.y))
+
+    if (dir === 'TD') {
+      // Junction below source, will then split to targets
+      const junctionY = sharedCoord.y + 3 // Just below source's 3x3 block
+      const junctionX = sharedCoord.x + 1 // Align with source's center
+
+      return { x: junctionX, y: junctionY }
+    } else {
+      // LR: Junction right of source
+      const junctionX = sharedCoord.x + 3
+      const junctionY = sharedCoord.y + 1
+
+      return { x: junctionX, y: junctionY }
+    }
+  }
+}
+
+// ============================================================================
+// Bundled edge routing
+// ============================================================================
+
+/**
+ * Route all edges in a bundle through the junction point.
+ *
+ * For fan-in bundles:
+ *   1. Route each source → junction (stored in edge.pathToJunction)
+ *   2. Route junction → target (stored in bundle.sharedPath)
+ *
+ * For fan-out bundles:
+ *   1. Route source → junction (stored in bundle.sharedPath)
+ *   2. Route junction → each target (stored in edge.pathToJunction)
+ */
+export function routeBundledEdges(graph: AsciiGraph, bundle: EdgeBundle): void {
+  const dir = graph.config.graphDirection
+
+  // Calculate and store junction point
+  bundle.junctionPoint = calculateJunctionPoint(graph, bundle)
+  const junction = bundle.junctionPoint
+
+  // Determine directions based on graph direction and bundle type
+  if (bundle.type === 'fan-in') {
+    // Sources converge to junction, then junction to target
+    bundle.junctionDir = dir === 'TD' ? Up : Left
+    bundle.sharedNodeDir = dir === 'TD' ? Down : Right
+
+    // Route junction → target (shared path)
+    const targetCoord = bundle.sharedNode.gridCoord!
+    const targetEntry = dir === 'TD'
+      ? { x: targetCoord.x + 1, y: targetCoord.y } // Top center of target
+      : { x: targetCoord.x, y: targetCoord.y + 1 } // Left center of target
+
+    const sharedPath = getPath(graph.grid, junction, targetEntry)
+    bundle.sharedPath = sharedPath ? mergePath(sharedPath) : [junction, targetEntry]
+
+    // Route each source → junction
+    for (const edge of bundle.edges) {
+      const sourceCoord = edge.from.gridCoord!
+      const sourceExit = dir === 'TD'
+        ? { x: sourceCoord.x + 1, y: sourceCoord.y + 2 } // Bottom center of source
+        : { x: sourceCoord.x + 2, y: sourceCoord.y + 1 } // Right center of source
+
+      const pathToJunction = getPath(graph.grid, sourceExit, junction)
+      edge.pathToJunction = pathToJunction ? mergePath(pathToJunction) : [sourceExit, junction]
+
+      // Set edge directions for proper drawing
+      edge.startDir = dir === 'TD' ? Down : Right
+      edge.endDir = dir === 'TD' ? Up : Left
+
+      // Build full path for grid size calculation: source → junction → target
+      edge.path = [...edge.pathToJunction, ...bundle.sharedPath.slice(1)]
+    }
+  } else {
+    // fan-out: Source to junction, then junction splits to targets
+    bundle.junctionDir = dir === 'TD' ? Down : Right
+    bundle.sharedNodeDir = dir === 'TD' ? Up : Left
+
+    // Route source → junction (shared path)
+    const sourceCoord = bundle.sharedNode.gridCoord!
+    const sourceExit = dir === 'TD'
+      ? { x: sourceCoord.x + 1, y: sourceCoord.y + 2 } // Bottom center of source
+      : { x: sourceCoord.x + 2, y: sourceCoord.y + 1 } // Right center of source
+
+    const sharedPath = getPath(graph.grid, sourceExit, junction)
+    bundle.sharedPath = sharedPath ? mergePath(sharedPath) : [sourceExit, junction]
+
+    // Route junction → each target
+    for (const edge of bundle.edges) {
+      const targetCoord = edge.to.gridCoord!
+      const targetEntry = dir === 'TD'
+        ? { x: targetCoord.x + 1, y: targetCoord.y } // Top center of target
+        : { x: targetCoord.x, y: targetCoord.y + 1 } // Left center of target
+
+      const pathToJunction = getPath(graph.grid, junction, targetEntry)
+      edge.pathToJunction = pathToJunction ? mergePath(pathToJunction) : [junction, targetEntry]
+
+      // Set edge directions
+      edge.startDir = dir === 'TD' ? Down : Right
+      edge.endDir = dir === 'TD' ? Up : Left
+
+      // Build full path for grid size calculation: source → junction → target
+      edge.path = [...bundle.sharedPath, ...edge.pathToJunction.slice(1)]
+    }
+  }
+}
+
+/**
+ * Process all bundles in a graph: calculate junction points and route edges.
+ */
+export function processBundles(graph: AsciiGraph): void {
+  for (const bundle of graph.bundles) {
+    routeBundledEdges(graph, bundle)
+  }
+}

package/src/vendor/mermaid-ascii/ascii/edge-routing.ts

@@ -0,0 +1,297 @@
+// ============================================================================
+// ASCII renderer — direction system and edge path determination
+//
+// Ported from AlexanderGrooff/mermaid-ascii cmd/direction.go + cmd/mapping_edge.go.
+// Handles direction constants, edge attachment point selection,
+// and dual-path comparison for optimal edge routing.
+// ============================================================================
+
+import type { GridCoord, Direction, AsciiEdge, AsciiGraph } from './types'
+import {
+  Up, Down, Left, Right, UpperRight, UpperLeft, LowerRight, LowerLeft, Middle,
+  gridCoordDirection,
+} from './types'
+import { getPath, mergePath } from './pathfinder'
+import { getEffectiveDirection, getNodeSubgraph } from './grid'
+import { displayWidth } from '../text-metrics'
+
+// ============================================================================
+// Direction utilities
+// ============================================================================
+
+export function getOpposite(d: Direction): Direction {
+  if (d === Up) return Down
+  if (d === Down) return Up
+  if (d === Left) return Right
+  if (d === Right) return Left
+  if (d === UpperRight) return LowerLeft
+  if (d === UpperLeft) return LowerRight
+  if (d === LowerRight) return UpperLeft
+  if (d === LowerLeft) return UpperRight
+  return Middle
+}
+
+/** Compare directions by value (not reference). */
+export function dirEquals(a: Direction, b: Direction): boolean {
+  return a.x === b.x && a.y === b.y
+}
+
+/**
+ * Determine 8-way direction from one coordinate to another.
+ * Uses the coordinate difference to pick one of 8 cardinal/ordinal directions.
+ */
+export function determineDirection(from: { x: number; y: number }, to: { x: number; y: number }): Direction {
+  if (from.x === to.x) {
+    return from.y < to.y ? Down : Up
+  } else if (from.y === to.y) {
+    return from.x < to.x ? Right : Left
+  } else if (from.x < to.x) {
+    return from.y < to.y ? LowerRight : UpperRight
+  } else {
+    return from.y < to.y ? LowerLeft : UpperLeft
+  }
+}
+
+// ============================================================================
+// Start/end direction selection for edges
+// ============================================================================
+
+/** Self-reference routing (node points to itself). */
+function selfReferenceDirection(graphDirection: string): [Direction, Direction, Direction, Direction] {
+  if (graphDirection === 'LR') return [Right, Down, Down, Right]
+  return [Down, Right, Right, Down]
+}
+
+/**
+ * Determine preferred and alternative start/end directions for an edge.
+ * Returns [preferredStart, preferredEnd, alternativeStart, alternativeEnd].
+ *
+ * The edge routing tries both pairs and picks the shorter path.
+ * Direction selection depends on relative node positions and graph direction (LR vs TD).
+ */
+export function determineStartAndEndDir(
+  edge: AsciiEdge,
+  graphDirection: string,
+): [Direction, Direction, Direction, Direction] {
+  if (edge.from === edge.to) return selfReferenceDirection(graphDirection)
+
+  const d = determineDirection(edge.from.gridCoord!, edge.to.gridCoord!)
+
+  let preferredDir: Direction
+  let preferredOppositeDir: Direction
+  let alternativeDir: Direction
+  let alternativeOppositeDir: Direction
+
+  const isBackwards = graphDirection === 'LR'
+    ? (dirEquals(d, Left) || dirEquals(d, UpperLeft) || dirEquals(d, LowerLeft))
+    : (dirEquals(d, Up) || dirEquals(d, UpperLeft) || dirEquals(d, UpperRight))
+
+  if (dirEquals(d, LowerRight)) {
+    if (graphDirection === 'LR') {
+      preferredDir = Down; preferredOppositeDir = Left
+      alternativeDir = Right; alternativeOppositeDir = Up
+    } else {
+      preferredDir = Right; preferredOppositeDir = Up
+      alternativeDir = Down; alternativeOppositeDir = Left
+    }
+  } else if (dirEquals(d, UpperRight)) {
+    if (graphDirection === 'LR') {
+      preferredDir = Up; preferredOppositeDir = Left
+      alternativeDir = Right; alternativeOppositeDir = Down
+    } else {
+      preferredDir = Right; preferredOppositeDir = Down
+      alternativeDir = Up; alternativeOppositeDir = Left
+    }
+  } else if (dirEquals(d, LowerLeft)) {
+    if (graphDirection === 'LR') {
+      preferredDir = Down; preferredOppositeDir = Down
+      alternativeDir = Left; alternativeOppositeDir = Up
+    } else {
+      preferredDir = Left; preferredOppositeDir = Up
+      alternativeDir = Down; alternativeOppositeDir = Right
+    }
+  } else if (dirEquals(d, UpperLeft)) {
+    if (graphDirection === 'LR') {
+      preferredDir = Down; preferredOppositeDir = Down
+      alternativeDir = Left; alternativeOppositeDir = Down
+    } else {
+      preferredDir = Right; preferredOppositeDir = Right
+      alternativeDir = Up; alternativeOppositeDir = Right
+    }
+  } else if (isBackwards) {
+    if (graphDirection === 'LR' && dirEquals(d, Left)) {
+      preferredDir = Down; preferredOppositeDir = Down
+      alternativeDir = Left; alternativeOppositeDir = Right
+    } else if (graphDirection === 'TD' && dirEquals(d, Up)) {
+      preferredDir = Right; preferredOppositeDir = Right
+      alternativeDir = Up; alternativeOppositeDir = Down
+    } else {
+      preferredDir = d; preferredOppositeDir = getOpposite(d)
+      alternativeDir = d; alternativeOppositeDir = getOpposite(d)
+    }
+  } else {
+    // Default: go in the natural direction
+    preferredDir = d; preferredOppositeDir = getOpposite(d)
+    alternativeDir = d; alternativeOppositeDir = getOpposite(d)
+  }
+
+  return [preferredDir, preferredOppositeDir, alternativeDir, alternativeOppositeDir]
+}
+
+// ============================================================================
+// Edge path determination
+// ============================================================================
+
+/**
+ * Determine the path for an edge by trying two candidate routes (preferred + alternative)
+ * and picking the shorter one. Sets edge.path, edge.startDir, edge.endDir.
+ *
+ * When both A* paths fail (common for edges crossing subgraph boundaries), falls back
+ * to a direct path using the start/end points. This ensures edges always have a path
+ * for arrowhead rendering.
+ *
+ * Uses the effective direction for edge routing, respecting subgraph direction overrides
+ * when both source and target are in the same subgraph.
+ */
+export function determinePath(graph: AsciiGraph, edge: AsciiEdge): void {
+  // Determine effective direction for this edge
+  // If both nodes are in the same subgraph with a direction override, use it
+  // Otherwise, use the graph's direction (not source's effective direction)
+  const sourceSg = getNodeSubgraph(graph, edge.from)
+  const targetSg = getNodeSubgraph(graph, edge.to)
+  const effectiveDir = (sourceSg && sourceSg === targetSg && sourceSg.direction)
+    ? sourceSg.direction
+    : graph.config.graphDirection
+
+  const [preferredDir, preferredOppositeDir, alternativeDir, alternativeOppositeDir] =
+    determineStartAndEndDir(edge, effectiveDir)
+
+  // Try preferred path
+  const prefFrom = gridCoordDirection(edge.from.gridCoord!, preferredDir)
+  const prefTo = gridCoordDirection(edge.to.gridCoord!, preferredOppositeDir)
+  let preferredPath = getPath(graph.grid, prefFrom, prefTo)
+
+  // Try alternative path
+  const altFrom = gridCoordDirection(edge.from.gridCoord!, alternativeDir)
+  const altTo = gridCoordDirection(edge.to.gridCoord!, alternativeOppositeDir)
+  let alternativePath = getPath(graph.grid, altFrom, altTo)
+
+  // Case 1: Both paths found — pick the shorter one
+  if (preferredPath !== null && alternativePath !== null) {
+    preferredPath = mergePath(preferredPath)
+    alternativePath = mergePath(alternativePath)
+
+    if (preferredPath.length <= alternativePath.length) {
+      edge.startDir = preferredDir
+      edge.endDir = preferredOppositeDir
+      edge.path = preferredPath
+    } else {
+      edge.startDir = alternativeDir
+      edge.endDir = alternativeOppositeDir
+      edge.path = alternativePath
+    }
+    return
+  }
+
+  // Case 2: Only preferred path found
+  if (preferredPath !== null) {
+    edge.startDir = preferredDir
+    edge.endDir = preferredOppositeDir
+    edge.path = mergePath(preferredPath)
+    return
+  }
+
+  // Case 3: Only alternative path found
+  if (alternativePath !== null) {
+    edge.startDir = alternativeDir
+    edge.endDir = alternativeOppositeDir
+    edge.path = mergePath(alternativePath)
+    return
+  }
+
+  // Case 4: Both paths failed — create a direct fallback path
+  // This happens for edges crossing subgraph boundaries where A* can't find
+  // a clear route. We create a direct path from source to target exit points
+  // so arrowheads can still be rendered correctly.
+  edge.startDir = preferredDir
+  edge.endDir = preferredOppositeDir
+  edge.path = [prefFrom, prefTo]
+}
+
+/**
+ * Find the best line segment in an edge's path to place a label on.
+ * Prefers vertical segments for TD/BT graphs and horizontal for LR/RL to avoid
+ * label collisions when multiple edges share initial segments.
+ * Falls back to the widest segment if none are suitable.
+ * Also increases the column width at the label position to fit the text.
+ */
+export function determineLabelLine(graph: AsciiGraph, edge: AsciiEdge): void {
+  if (edge.text.length === 0) return
+
+  const lenLabel = displayWidth(edge.text)
+  const pathLen = edge.path.length
+  const isVerticalFlow = graph.config.graphDirection === 'TD'
+
+  // Collect all segments with their widths and orientation
+  const segments: {
+    line: [GridCoord, GridCoord]
+    width: number
+    index: number
+    isVertical: boolean
+  }[] = []
+
+  for (let i = 1; i < pathLen; i++) {
+    const p1 = edge.path[i - 1]!
+    const p2 = edge.path[i]!
+    const line: [GridCoord, GridCoord] = [p1, p2]
+    const width = calculateLineWidth(graph, line)
+    // A segment is vertical if X coords are same, horizontal if Y coords are same
+    const isVertical = p1.x === p2.x
+    segments.push({ line, width, index: i, isVertical })
+  }
+
+  // Find segments wide enough for the label, excluding the first segment
+  // The first segment is often shared between edges from the same source node
+  const suitableSegments = segments.filter(s => s.width >= lenLabel && s.index > 1)
+
+  let largestLine: [GridCoord, GridCoord]
+
+  if (suitableSegments.length > 0) {
+    // Prefer segments near the end of the path (closer to target)
+    // This avoids the shared initial segments from source
+    suitableSegments.sort((a, b) => b.index - a.index)
+    largestLine = suitableSegments[0]!.line
+  } else {
+    // Fall back to any suitable segment including the first
+    const fallbackSegments = segments.filter(s => s.width >= lenLabel)
+    if (fallbackSegments.length > 0) {
+      fallbackSegments.sort((a, b) => b.index - a.index)
+      largestLine = fallbackSegments[0]!.line
+    } else {
+      // No segment wide enough — use the widest one
+      segments.sort((a, b) => b.width - a.width)
+      largestLine = segments[0]?.line ?? [edge.path[0]!, edge.path[1]!]
+    }
+  }
+
+  // Ensure column at midpoint is wide enough for the label
+  const minX = Math.min(largestLine[0].x, largestLine[1].x)
+  const maxX = Math.max(largestLine[0].x, largestLine[1].x)
+  const middleX = minX + Math.floor((maxX - minX) / 2)
+
+  const current = graph.columnWidth.get(middleX) ?? 0
+  graph.columnWidth.set(middleX, Math.max(current, lenLabel + 2))
+
+  edge.labelLine = [largestLine[0], largestLine[1]]
+}
+
+/** Calculate the total character width of a line segment by summing column widths. */
+function calculateLineWidth(graph: AsciiGraph, line: [GridCoord, GridCoord]): number {
+  let total = 0
+  const startX = Math.min(line[0].x, line[1].x)
+  const endX = Math.max(line[0].x, line[1].x)
+  for (let x = startX; x <= endX; x++) {
+    total += graph.columnWidth.get(x) ?? 0
+  }
+  return total
+}