diff --git a/frontend/src/components/Flow/LiveEdge.tsx b/frontend/src/components/Flow/LiveEdge.tsx index 798da4f..92274a1 100644 --- a/frontend/src/components/Flow/LiveEdge.tsx +++ b/frontend/src/components/Flow/LiveEdge.tsx @@ -288,6 +288,8 @@ function LiveEdgeComponent({
diff --git a/frontend/src/components/Flow/layout.ts b/frontend/src/components/Flow/layout.ts index 2faecb7..bfffef3 100644 --- a/frontend/src/components/Flow/layout.ts +++ b/frontend/src/components/Flow/layout.ts @@ -132,7 +132,8 @@ const TOO_WIDE = (ABREAST + 1) * (NODE_W + NODE_GAP) * * Centring packs a rank's chips together where the edges meet in the middle, * so with no width at all they piled onto each other. This is a number's - * worth: a longer value overlaps its neighbour rather than widening the graph. + * worth: a longer value is cut to fit (see `Route.chipWidth`) rather than + * widening the graph, and the edge's inspector shows it whole. */ const CENTRED_LABEL_W = 60 @@ -168,6 +169,8 @@ export type Route = { points: Point[] /** Where the room reserved for the edge's value chip is centred. */ label: Point + /** How wide the chip may be, where that room is narrower than the chip. */ + chipWidth?: number from: Point to: Point } @@ -453,6 +456,7 @@ export async function layoutGraph( } let { placed, laid } = await place([]) + let centred = false // Running downwards, a rank wider than the screen is the one thing the // layout can still do something about. Wrapping one rank pushes whatever was @@ -469,6 +473,7 @@ export async function layoutGraph( } const [left, right] = extentOf(placed, shapes, direction) if (wrap.length && right - left > TOO_WIDE) { + centred = true ;({ placed, laid } = await place(wrap, true)) } } @@ -506,6 +511,7 @@ export async function layoutGraph( direction === "TB" && (room.x < left || room.x > right) ? (longestRun(points) ?? room) : room, + chipWidth: centred ? CENTRED_LABEL_W : undefined, from: positions.get(source) ?? { x: 0, y: 0 }, to: positions.get(target) ?? { x: 0, y: 0 }, }) diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx index c1c24e9..5d0d533 100644 --- a/frontend/src/components/ui/select.tsx +++ b/frontend/src/components/ui/select.tsx @@ -35,7 +35,7 @@ function SelectTrigger({ data-slot="select-trigger" data-size={size} className={cn( - "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-full border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-none transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-full border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-none transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:truncate [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props}