Bug: Rounded Corners Cause Connectors to Move Inwards

[gerchowl]

Bug: Rounded Corners Cause Connectors to Move Inwards

Description

When a component has border-radius > 0 (rounded corners), connectors positioned on the edges are incorrectly positioned inward from the visual border edge. This happens because connectors are positioned using the corner anchors of the border's bounding box, which don't account for the rounded corner curvature.

Expected Behavior

Connectors should be positioned on the actual edge of the rounded rectangle, aligned with the visual border edge, regardless of border-radius value.

Actual Behavior

Connectors are positioned along a straight line between corner anchors (e.g., border.south-east to border.north-east), which places them inside the visual rounded border edge. The larger the border-radius, the more pronounced the inward offset.

Reproduction Steps

#import "src/lib.typ": *

#blueprint({
  component(
    name: "water",
    label: [Water Tank],
    border-shape: "rect",
    border-radius: 0.2,  // Rounded corners
    border-stroke: 2pt + blue,
    border-fill: blue.lighten(90%),
    interfaces: (
      right: ((name: "out", label: [Out], show-indicator: true))
    )
  )
})

Observed: The connector "out" appears to be positioned inside the rounded border edge, not flush with it.

Expected: The connector should be positioned exactly on the rounded edge.

Root Cause

In src/component.typ (lines 290-306), connectors are positioned using linear interpolation between corner anchors:

let (start-anchor, end-anchor) = if edge == "right" {
  ("border.south-east", "border.north-east")
}
let conn-pos-tuple = (a: start-anchor, b: end-anchor, number: conn-pos-ratio)

When border-radius > 0, CeTZ's border.south-east and border.north-east anchors refer to the bounding box corners, not the actual rounded edge. The rounded edge is curved inward, so connectors positioned along the straight line between corners end up inside the visual border.

Impact

• Connectors appear misaligned with component borders when using rounded corners
• Visual inconsistency between connector position and border edge
• Affects all connectors on all edges when border-radius > 0

Proposed Solution

1. Option A: Calculate the actual edge position accounting for border-radius

   • For connectors near corners (within radius distance), position them on the arc
   • For connectors in the middle section, use the straight edge (which is unaffected by radius)

2. Option B: Use a different anchor system for rounded rectangles

   • Create custom anchors that account for the rounded edge geometry
   • Position connectors relative to these corrected anchors

3. Option C: Adjust connector position offset based on border-radius

   • Calculate the inward offset caused by the radius at the connector's position
   • Apply a correction offset to move connectors to the actual edge

Environment

• Blueprint library version: Current
• Typst version: Any
• CeTZ version: 0.4.2

Additional Context

This is a visual/positioning bug that affects the aesthetic quality of diagrams using rounded corners. The functionality still works (connections can be made), but connectors appear misaligned.

Related Code

• src/component.typ lines 186-306 (border drawing and connector positioning)
• Connectors use border.south-east, border.north-east, etc. anchors which are bounding box corners, not rounded edge points