Fix Outer Channel Bugs, support for bounds prop (#6)

* wip bounds

* fix channel bug, add support for bounds

* fix bounds type

* one test per file

* format

Author: seveibar

.vscode/settings.json

@@ -13,4 +13,4 @@
     "titleBar.inactiveForeground": "#15202b99"
   },
   "peacock.color": "#b3e3de"
-}
+}

index.ts

@@ -1 +1 @@
-console.log("Hello via Bun!");
+console.log("Hello via Bun!")

lib/JumperGraphSolver/geometry/getBoundsCenter.ts

@@ -1,6 +1,8 @@
 import type { Bounds } from "../Bounds"
 
-export const computeBoundsCenter = (bounds: Bounds): { x: number; y: number } => {
+export const computeBoundsCenter = (
+  bounds: Bounds,
+): { x: number; y: number } => {
   return {
     x: (bounds.minX + bounds.maxX) / 2,
     y: (bounds.minY + bounds.maxY) / 2,

lib/JumperGraphSolver/jumper-graph-generator/generateJumperX2Grid.ts

@@ -83,7 +83,11 @@ export const generateJumperX2Grid = ({
   })
 
   // Helper to create a port at the boundary between two regions
-  const createPort = (id: string, region1: JRegion, region2: JRegion): JPort => {
+  const createPort = (
+    id: string,
+    region1: JRegion,
+    region2: JRegion,
+  ): JPort => {
     const b1 = region1.d.bounds
     const b2 = region2.d.bounds
 
@@ -273,7 +277,15 @@ export const generateJumperX2Grid = ({
         true,
       )
 
-      regions.push(pad1, pad2, pad3, pad4, underjumper, throughjumper1, throughjumper2)
+      regions.push(
+        pad1,
+        pad2,
+        pad3,
+        pad4,
+        underjumper,
+        throughjumper1,
+        throughjumper2,
+      )
 
       // Determine which frame regions to create based on grid position
       const isFirstRow = row === 0

lib/JumperGraphSolver/jumper-graph-generator/generateJumperX4Grid.ts

@@ -13,12 +13,13 @@ export const generateJumperX4Grid = ({
   innerColChannelPointCount = 1,
   innerRowChannelPointCount = 1,
   regionsBetweenPads = false,
-  outerPaddingX = 0.5,
-  outerPaddingY = 0.5,
+  outerPaddingX: outerPaddingXParam = 0.5,
+  outerPaddingY: outerPaddingYParam = 0.5,
   outerChannelXPointCount,
   outerChannelYPointCount,
   orientation = "vertical",
   center,
+  bounds,
 }: {
   cols: number
   rows: number
@@ -33,12 +34,8 @@ export const generateJumperX4Grid = ({
   outerChannelYPointCount?: number
   orientation?: "vertical" | "horizontal"
   center?: { x: number; y: number }
+  bounds?: { minX: number; maxX: number; minY: number; maxY: number }
 }): JumperGraph => {
-  // Calculate outer channel points: use provided value or derive from outer padding
-  const effectiveOuterChannelXPoints =
-    outerChannelXPointCount ?? Math.max(1, Math.floor(outerPaddingX / 0.4))
-  const effectiveOuterChannelYPoints =
-    outerChannelYPointCount ?? Math.max(1, Math.floor(outerPaddingY / 0.4))
   const regions: JRegion[] = []
   const ports: JPort[] = []
 
@@ -65,6 +62,25 @@ export const generateJumperX4Grid = ({
   const cellHeight = row1CenterY - row4CenterY + padHeight // total height of pads region
   const verticalSpacing = cellHeight + marginY
 
+  // Calculate outer padding from bounds if specified
+  let outerPaddingX = outerPaddingXParam
+  let outerPaddingY = outerPaddingYParam
+  if (bounds) {
+    // Content dimensions (without outer padding)
+    const contentWidth = cols * cellWidth + (cols - 1) * marginX
+    const contentHeight = rows * cellHeight + (rows - 1) * marginY
+    const boundsWidth = bounds.maxX - bounds.minX
+    const boundsHeight = bounds.maxY - bounds.minY
+    outerPaddingX = (boundsWidth - contentWidth) / 2
+    outerPaddingY = (boundsHeight - contentHeight) / 2
+  }
+
+  // Calculate outer channel points: use provided value or derive from outer padding
+  const effectiveOuterChannelXPoints =
+    outerChannelXPointCount ?? Math.max(1, Math.floor(outerPaddingX / 0.4))
+  const effectiveOuterChannelYPoints =
+    outerChannelYPointCount ?? Math.max(1, Math.floor(outerPaddingY / 0.4))
+
   // Store cells for later port connections
   const cells: {
     pad1: JRegion
@@ -566,7 +582,9 @@ export const generateJumperX4Grid = ({
             `${idPrefix}:T-R`,
             top,
             right,
-            isLastCol ? effectiveOuterChannelXPoints : innerColChannelPointCount,
+            isLastCol
+              ? effectiveOuterChannelXPoints
+              : innerColChannelPointCount,
           ),
         )
         // Top connects to pad1, pad8, and underjumper
@@ -613,7 +631,9 @@ export const generateJumperX4Grid = ({
             `${idPrefix}:B-R`,
             bottom,
             right,
-            isLastCol ? effectiveOuterChannelXPoints : innerColChannelPointCount,
+            isLastCol
+              ? effectiveOuterChannelXPoints
+              : innerColChannelPointCount,
           ),
         )
         // Bottom connects to pad4, pad5, and underjumper
@@ -817,24 +837,28 @@ export const generateJumperX4Grid = ({
           )
         }
         // T-T connection between horizontally adjacent cells (first row only)
+        // This is a vertical boundary, so use Y point count for outer edge
         if (top && prevCell.top) {
           ports.push(
             ...createMultiplePorts(
               `cell_${row}_${col - 1}->cell_${row}_${col}:T-T`,
               prevCell.top,
               top,
-              innerRowChannelPointCount,
+              effectiveOuterChannelYPoints,
             ),
           )
         }
         // B-B connection between horizontally adjacent cells
+        // This is a vertical boundary; use Y points for outer edge (last row), inner points otherwise
         if (bottom && prevCell.bottom) {
           ports.push(
             ...createMultiplePorts(
               `cell_${row}_${col - 1}->cell_${row}_${col}:B-B`,
               prevCell.bottom,
               bottom,
-              innerRowChannelPointCount,
+              isLastRow
+                ? effectiveOuterChannelYPoints
+                : innerRowChannelPointCount,
             ),
           )
         }
@@ -901,7 +925,9 @@ export const generateJumperX4Grid = ({
             `cell_${row - 1}_${col}->cell_${row}_${col}:B-R`,
             aboveCell.bottom!,
             right,
-            isLastCol ? effectiveOuterChannelXPoints : innerColChannelPointCount,
+            isLastCol
+              ? effectiveOuterChannelXPoints
+              : innerColChannelPointCount,
           ),
         )
       }
@@ -910,11 +936,12 @@ export const generateJumperX4Grid = ({
 
   let graph: JumperGraph = { regions, ports }
 
-  // Apply transformations based on orientation and center
+  // Apply transformations based on orientation, center, and bounds
   const needsRotation = orientation === "horizontal"
   const needsCentering = center !== undefined
+  const needsBoundsTransform = bounds !== undefined
 
-  if (needsRotation || needsCentering) {
+  if (needsRotation || needsCentering || needsBoundsTransform) {
     // Calculate current graph bounds and center
     const currentBounds = calculateGraphBounds(graph.regions)
     const currentCenter = computeBoundsCenter(currentBounds)
@@ -930,8 +957,16 @@ export const generateJumperX4Grid = ({
       matrices.push(rotate(-Math.PI / 2))
     }
 
-    // Translate to target center (or back to current center if no center specified)
-    const targetCenter = center ?? currentCenter
+    // Translate to target center
+    // Priority: explicit center > bounds center > current center
+    let targetCenter: { x: number; y: number }
+    if (center) {
+      targetCenter = center
+    } else if (bounds) {
+      targetCenter = computeBoundsCenter(bounds)
+    } else {
+      targetCenter = currentCenter
+    }
     matrices.push(translate(targetCenter.x, targetCenter.y))
 
     const matrix = compose(...matrices)

lib/JumperGraphSolver/perimeterChordUtils.ts

@@ -68,7 +68,10 @@ function areCoincident(t1: number, t2: number, eps: number = 1e-6): boolean {
  *
  * Chords that share a coincident endpoint do NOT count as crossing.
  */
-export function chordsCross(chord1: [number, number], chord2: [number, number]): boolean {
+export function chordsCross(
+  chord1: [number, number],
+  chord2: [number, number],
+): boolean {
   // Normalize each chord so first endpoint is smaller
   const [a, b] = chord1[0] < chord1[1] ? chord1 : [chord1[1], chord1[0]]
   const [c, d] = chord2[0] < chord2[1] ? chord2 : [chord2[1], chord2[0]]

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "cosmos",
+    "format": "biome format --write .",
     "build:site": "cosmos-export",
     "build": "tsup ./lib/index.ts --dts --format esm"
   },

tests/fixtures/preload.ts

@@ -1 +1 @@
-import "bun-match-svg"
+import "bun-match-svg"