@tldiagram/core-ui 1.95.0 → 2.0.0

package/src/components/ZUI/proxy.ts

@@ -1,8 +1,15 @@
-import { resolveZUIProxyConnectors, type ZUIResolvedConnector } from '../../crossBranch/resolve'
+import {
+  resolveZUIProxyConnectors,
+  type ZUIHiddenProxyBadge,
+  type ZUIViewportBounds,
+  type ZUIProxyResolution,
+  type ZUIResolvedConnector,
+} from '../../crossBranch/resolve'
 import type { WorkspaceGraphSnapshot } from '../../crossBranch/types'
 import type { LayoutNode, ZUIViewState, HoveredItem } from './types'
 import { getExpandThresholds, pickEdgeLabelPosition, type ScreenRect } from './renderer'
 import type { CrossBranchContextSettings } from '../../crossBranch/types'
+import { DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA } from '../../crossBranch/settings'
 
 export interface VisibleNodeAnchor {
   nodeId: string
@@ -20,12 +27,58 @@ function clamp(value: number, min: number, max: number) {
   return value < min ? min : value > max ? max : value
 }
 
+function connectorAlpha(alpha: number): number {
+  return clamp(alpha * 1.1, 0.35, 0.95)
+}
+
 function transitionT(screenW: number, start: number, end: number): number {
   return clamp((screenW - start) / (end - start), 0, 1)
 }
 
-function collectVisibleAnchorsInNodes(
-  nodes: LayoutNode[],
+function visualRectForNode(
+  absX: number,
+  absY: number,
+  absW: number,
+  absH: number,
+  hasChildren: boolean,
+  screenW: number,
+  thresholds: { start: number; end: number },
+) {
+  if (!hasChildren && screenW > thresholds.end) {
+    const scale = thresholds.end / screenW
+    const visualW = absW * scale
+    const visualH = absH * scale
+    return {
+      worldX: absX + (absW - visualW) / 2,
+      worldY: absY + (absH - visualH) / 2,
+      worldW: visualW,
+      worldH: visualH,
+    }
+  }
+
+  return {
+    worldX: absX,
+    worldY: absY,
+    worldW: absW,
+    worldH: absH,
+  }
+}
+
+function registerVisibleAnchor(
+  node: LayoutNode,
+  visibleAnchors: Map<number, VisibleNodeAnchor>,
+  byNodeId: Map<string, VisibleNodeAnchor>,
+  anchor: VisibleNodeAnchor,
+) {
+  const existing = visibleAnchors.get(node.elementId)
+  if (!existing || existing.pathDepth < anchor.pathDepth || existing.renderAlpha < anchor.renderAlpha) {
+    visibleAnchors.set(node.elementId, anchor)
+  }
+  byNodeId.set(node.id, anchor)
+}
+
+function collectVisibleAnchorForNode(
+  node: LayoutNode,
   view: ZUIViewState,
   thresholds: { start: number; end: number },
   hiddenTags: Set<string>,
@@ -38,42 +91,42 @@ function collectVisibleAnchorsInNodes(
   parentChildOffsetX: number,
   parentChildOffsetY: number,
 ) {
-  for (const node of nodes) {
-    if (hiddenTags.size > 0 && node.tags.some((tag) => hiddenTags.has(tag))) continue
-
-    const absX = parentAbsX + (node.worldX - parentChildOffsetX) * parentAbsScale
-    const absY = parentAbsY + (node.worldY - parentChildOffsetY) * parentAbsScale
-    const absScale = parentAbsScale
-    const absW = node.worldW * absScale
-    const absH = node.worldH * absScale
-    const screenW = absW * view.zoom
-    if (screenW < 2) continue
-
-    const hasChildren = node.children && node.children.length > 0
-    const t = hasChildren ? transitionT(screenW, thresholds.start, thresholds.end) : 0
-    const parentAlpha = inheritedAlpha * (1 - t)
-    const childAlpha = inheritedAlpha * t
-
-    if (!hasChildren || t <= 0.95) {
-      const anchor: VisibleNodeAnchor = {
-        nodeId: node.id,
-        elementId: node.elementId,
-        label: node.label,
-        worldX: absX,
-        worldY: absY,
-        worldW: absW,
-        worldH: absH,
-        pathDepth: node.pathElementIds.length,
-        renderAlpha: hasChildren ? parentAlpha : inheritedAlpha,
-      }
-      const existing = visibleAnchors.get(node.elementId)
-      if (!existing || existing.pathDepth < anchor.pathDepth) visibleAnchors.set(node.elementId, anchor)
-      byNodeId.set(node.id, anchor)
-    }
+  if (hiddenTags.size > 0 && node.tags.some((tag) => hiddenTags.has(tag))) return { selfDrawn: false }
+
+  const absX = parentAbsX + (node.worldX - parentChildOffsetX) * parentAbsScale
+  const absY = parentAbsY + (node.worldY - parentChildOffsetY) * parentAbsScale
+  const absScale = parentAbsScale
+  const absW = node.worldW * absScale
+  const absH = node.worldH * absScale
+  const screenW = absW * view.zoom
+  if (screenW < 2) return { selfDrawn: false }
+
+  const hasChildren = node.children && node.children.length > 0
+  const t = hasChildren ? transitionT(screenW, thresholds.start, thresholds.end) : 0
+  const parentAlpha = inheritedAlpha * (1 - t)
+  const childAlpha = inheritedAlpha * t
+  const selfDrawn = !hasChildren || t <= 0.95
+  const visualRect = visualRectForNode(absX, absY, absW, absH, hasChildren, screenW, thresholds)
+
+  if (selfDrawn) {
+    registerVisibleAnchor(node, visibleAnchors, byNodeId, {
+      nodeId: node.id,
+      elementId: node.elementId,
+      label: node.label,
+      worldX: visualRect.worldX,
+      worldY: visualRect.worldY,
+      worldW: visualRect.worldW,
+      worldH: visualRect.worldH,
+      pathDepth: node.pathElementIds.length,
+      renderAlpha: hasChildren ? parentAlpha : inheritedAlpha,
+    })
+  }
 
-    if (hasChildren && t > 0.05) {
-      collectVisibleAnchorsInNodes(
-        node.children,
+  let hasDirectChildDrawn = false
+  if (hasChildren && t > 0.05) {
+    for (const child of node.children) {
+      const childResult = collectVisibleAnchorForNode(
+        child,
         view,
         thresholds,
         hiddenTags,
@@ -86,8 +139,57 @@ function collectVisibleAnchorsInNodes(
         node.childOffsetX,
         node.childOffsetY,
       )
+      hasDirectChildDrawn = hasDirectChildDrawn || childResult.selfDrawn
     }
   }
+
+  if (!selfDrawn && hasDirectChildDrawn) {
+    registerVisibleAnchor(node, visibleAnchors, byNodeId, {
+      nodeId: node.id,
+      elementId: node.elementId,
+      label: node.label,
+      worldX: visualRect.worldX,
+      worldY: visualRect.worldY,
+      worldW: visualRect.worldW,
+      worldH: visualRect.worldH,
+      pathDepth: node.pathElementIds.length,
+      renderAlpha: Math.max(0.12, inheritedAlpha * 0.28),
+    })
+  }
+
+  return { selfDrawn }
+}
+
+function collectVisibleAnchorsInNodes(
+  nodes: LayoutNode[],
+  view: ZUIViewState,
+  thresholds: { start: number; end: number },
+  hiddenTags: Set<string>,
+  visibleAnchors: Map<number, VisibleNodeAnchor>,
+  byNodeId: Map<string, VisibleNodeAnchor>,
+  inheritedAlpha: number,
+  parentAbsX: number,
+  parentAbsY: number,
+  parentAbsScale: number,
+  parentChildOffsetX: number,
+  parentChildOffsetY: number,
+) {
+  for (const node of nodes) {
+    collectVisibleAnchorForNode(
+      node,
+      view,
+      thresholds,
+      hiddenTags,
+      visibleAnchors,
+      byNodeId,
+      inheritedAlpha,
+      parentAbsX,
+      parentAbsY,
+      parentAbsScale,
+      parentChildOffsetX,
+      parentChildOffsetY,
+    )
+  }
 }
 
 export function collectVisibleNodeAnchors(
@@ -121,13 +223,23 @@ export function collectVisibleNodeAnchors(
   return { visibleAnchors, byNodeId }
 }
 
-function getDirectAnchorPoint(anchor: VisibleNodeAnchor, towards: VisibleNodeAnchor) {
+function getAnchorCenter(anchor: VisibleNodeAnchor) {
+  return {
+    x: anchor.worldX + anchor.worldW / 2,
+    y: anchor.worldY + anchor.worldH / 2,
+  }
+}
+
+function containsPoint(anchor: VisibleNodeAnchor, x: number, y: number) {
+  return x >= anchor.worldX &&
+    x <= anchor.worldX + anchor.worldW &&
+    y >= anchor.worldY &&
+    y <= anchor.worldY + anchor.worldH
+}
+
+function getRectBoundaryPoint(anchor: VisibleNodeAnchor, dx: number, dy: number) {
   const cx = anchor.worldX + anchor.worldW / 2
   const cy = anchor.worldY + anchor.worldH / 2
-  const tx = towards.worldX + towards.worldW / 2
-  const ty = towards.worldY + towards.worldH / 2
-  const dx = tx - cx
-  const dy = ty - cy
   const hw = anchor.worldW / 2
   const hh = anchor.worldH / 2
 
@@ -148,15 +260,191 @@ function getDirectAnchorPoint(anchor: VisibleNodeAnchor, towards: VisibleNodeAnc
   }
 }
 
+function getDirectAnchorPoint(anchor: VisibleNodeAnchor, towards: VisibleNodeAnchor) {
+  const anchorCenter = getAnchorCenter(anchor)
+  const towardsCenter = getAnchorCenter(towards)
+
+  // Nested anchors represent parent/child nodes. Aim the child endpoint away
+  // from the parent center so proxy lines attach to the nearer child edge.
+  if (containsPoint(towards, anchorCenter.x, anchorCenter.y)) {
+    return getRectBoundaryPoint(
+      anchor,
+      anchorCenter.x - towardsCenter.x,
+      anchorCenter.y - towardsCenter.y,
+    )
+  }
+
+  return getRectBoundaryPoint(
+    anchor,
+    towardsCenter.x - anchorCenter.x,
+    towardsCenter.y - anchorCenter.y,
+  )
+}
+
+function getDirectAnchorPoints(source: VisibleNodeAnchor, target: VisibleNodeAnchor) {
+  const sourcePoint = getDirectAnchorPoint(source, target)
+  const targetPoint = getDirectAnchorPoint(target, source)
+  return { sourcePoint, targetPoint }
+}
+
+function getDevicePixelRatio(): number {
+  return typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
+}
+
+function roundRectPath(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
+  ctx.beginPath()
+  ctx.roundRect(x, y, w, h, r)
+}
+
+function drawFixedScreenProxyBadge(
+  ctx: CanvasRenderingContext2D,
+  label: string,
+  labelPos: { x: number; y: number },
+  badgeCssW: number,
+  badgeCssH: number,
+  labelBg: string,
+  strokeStyle: string,
+  lineDashCss: number[],
+  fontWeight = 600,
+) {
+  const matrix = ctx.getTransform()
+  const dpr = getDevicePixelRatio()
+  const centerX = matrix.a * labelPos.x + matrix.c * labelPos.y + matrix.e
+  const centerY = matrix.b * labelPos.x + matrix.d * labelPos.y + matrix.f
+  const badgeW = badgeCssW * dpr
+  const badgeH = badgeCssH * dpr
+  const radius = badgeH / 2
+
+  ctx.save()
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.fillStyle = labelBg
+  roundRectPath(ctx, centerX - badgeW / 2, centerY - badgeH / 2, badgeW, badgeH, radius)
+  ctx.fill()
+  ctx.strokeStyle = strokeStyle
+  ctx.lineWidth = dpr
+  ctx.setLineDash(lineDashCss.map((value) => value * dpr))
+  ctx.stroke()
+  ctx.setLineDash([])
+  ctx.fillStyle = 'white'
+  ctx.font = `${fontWeight} ${11 * dpr}px Inter, system-ui, sans-serif`
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(label, centerX, centerY)
+  ctx.restore()
+}
+
+function measureProxyBadge(ctx: CanvasRenderingContext2D, label: string, zoom: number, fontWeight = 600) {
+  ctx.save()
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.font = `${fontWeight} 11px Inter, system-ui, sans-serif`
+  const textW = ctx.measureText(label).width
+  ctx.restore()
+
+  const badgeCssW = Math.max(24, textW + 14)
+  const badgeCssH = 24
+  return {
+    badgeCssW,
+    badgeCssH,
+    worldW: badgeCssW / zoom,
+    worldH: badgeCssH / zoom,
+  }
+}
+
+interface IndexedProxyConnector {
+  connector: ZUIResolvedConnector
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+  midX: number
+  midY: number
+}
+
+export interface ProxyConnectorSpatialIndex {
+  cellSize: number
+  cells: Map<string, IndexedProxyConnector[]>
+}
+
+const PROXY_CONNECTOR_INDEX_CELL_SIZE = 360
+
+function proxyCellKey(cx: number, cy: number): string {
+  return `${cx},${cy}`
+}
+
+function addProxyConnectorToSpatialIndex(index: ProxyConnectorSpatialIndex, connector: IndexedProxyConnector): void {
+  const minX = Math.min(connector.x1, connector.x2)
+  const maxX = Math.max(connector.x1, connector.x2)
+  const minY = Math.min(connector.y1, connector.y2)
+  const maxY = Math.max(connector.y1, connector.y2)
+  const startX = Math.floor(minX / index.cellSize)
+  const endX = Math.floor(maxX / index.cellSize)
+  const startY = Math.floor(minY / index.cellSize)
+  const endY = Math.floor(maxY / index.cellSize)
+
+  for (let cx = startX; cx <= endX; cx++) {
+    for (let cy = startY; cy <= endY; cy++) {
+      const key = proxyCellKey(cx, cy)
+      let bucket = index.cells.get(key)
+      if (!bucket) {
+        bucket = []
+        index.cells.set(key, bucket)
+      }
+      bucket.push(connector)
+    }
+  }
+}
+
+export function buildProxyConnectorSpatialIndex(
+  connectors: ZUIResolvedConnector[],
+  visibleAnchorsByNodeId: Map<string, VisibleNodeAnchor>,
+): ProxyConnectorSpatialIndex {
+  const index: ProxyConnectorSpatialIndex = {
+    cellSize: PROXY_CONNECTOR_INDEX_CELL_SIZE,
+    cells: new Map(),
+  }
+
+  for (const connector of connectors) {
+    const source = visibleAnchorsByNodeId.get(connector.sourceNodeId)
+    const target = visibleAnchorsByNodeId.get(connector.targetNodeId)
+    if (!source || !target) continue
+
+    const { sourcePoint, targetPoint } = getDirectAnchorPoints(source, target)
+    addProxyConnectorToSpatialIndex(index, {
+      connector,
+      x1: sourcePoint.x,
+      y1: sourcePoint.y,
+      x2: targetPoint.x,
+      y2: targetPoint.y,
+      midX: (sourcePoint.x + targetPoint.x) / 2,
+      midY: (sourcePoint.y + targetPoint.y) / 2,
+    })
+  }
+
+  return index
+}
+
 export function buildVisibleProxyConnectors(
   snapshot: WorkspaceGraphSnapshot | null,
   visibleAnchors: Map<number, VisibleNodeAnchor>,
   settings: CrossBranchContextSettings,
-): ZUIResolvedConnector[] {
+  viewport?: ZUIViewportBounds | null,
+): ZUIProxyResolution {
+  const minAlpha = settings.minConnectorAnchorAlpha ?? DEFAULT_MIN_CONNECTOR_ANCHOR_ALPHA
+  const eligibleAnchors = Array.from(visibleAnchors.entries())
+    .filter(([, anchor]) => anchor.renderAlpha >= minAlpha)
+  const connectorAnchors = new Map(eligibleAnchors.map(([elementId, anchor]) => [elementId, anchor.nodeId]))
+  const anchorsByElementId = new Map(eligibleAnchors.map(([elementId, anchor]) => [elementId, {
+    nodeId: anchor.nodeId,
+    worldX: anchor.worldX,
+    worldY: anchor.worldY,
+    worldW: anchor.worldW,
+    worldH: anchor.worldH,
+  }]))
   return resolveZUIProxyConnectors(
     snapshot,
-    new Map(Array.from(visibleAnchors.entries()).map(([elementId, anchor]) => [elementId, anchor.nodeId])),
+    connectorAnchors,
     settings,
+    { viewport, anchorsByElementId },
   )
 }
 
@@ -166,8 +454,27 @@ export function drawVisibleProxyConnectors(
   visibleAnchorsByNodeId: Map<string, VisibleNodeAnchor>,
   zoom: number,
   labelBg: string,
+  accent: string,
   occupiedLabelRects: ScreenRect[],
 ) {
+  const connectorsByActualPair = new Map<string, ZUIResolvedConnector[]>()
+  for (const connector of connectors) {
+    const pairKey = `${Math.min(connector.sourceElementId, connector.targetElementId)}::${Math.max(connector.sourceElementId, connector.targetElementId)}`
+    const family = connectorsByActualPair.get(pairKey)
+    if (family) family.push(connector)
+    else connectorsByActualPair.set(pairKey, [connector])
+  }
+
+  const provenanceKeys = new Set<string>()
+  for (const family of connectorsByActualPair.values()) {
+    if (family.length < 2) continue
+    const sorted = [...family].sort((left, right) => {
+      if (left.maxDepth !== right.maxDepth) return left.maxDepth - right.maxDepth
+      return (left.sourceDepth + left.targetDepth) - (right.sourceDepth + right.targetDepth)
+    })
+    for (const connector of sorted.slice(1)) provenanceKeys.add(connector.key)
+  }
+
   for (const connector of connectors) {
     const source = visibleAnchorsByNodeId.get(connector.sourceNodeId)
     const target = visibleAnchorsByNodeId.get(connector.targetNodeId)
@@ -175,104 +482,153 @@ export function drawVisibleProxyConnectors(
     const alpha = Math.min(source.renderAlpha, target.renderAlpha)
     if (alpha < 0.01) continue
 
-    const sourcePoint = getDirectAnchorPoint(source, target)
-    const targetPoint = getDirectAnchorPoint(target, source)
+    const { sourcePoint, targetPoint } = getDirectAnchorPoints(source, target)
     const midX = (sourcePoint.x + targetPoint.x) / 2
     const midY = (sourcePoint.y + targetPoint.y) / 2
     const label = String(connector.details.count)
 
     ctx.save()
-    ctx.globalAlpha = alpha
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'
-    ctx.lineWidth = 2 / zoom
+    const isProvenanceStub = provenanceKeys.has(connector.key)
+    if (isProvenanceStub) {
+      ctx.restore()
+      continue
+    }
+
+    ctx.globalAlpha = connectorAlpha(alpha) * 0.8
+    ctx.strokeStyle = accent
+    ctx.lineWidth = 1 / zoom
+    ctx.lineCap = 'round'
+    ctx.setLineDash([1 / zoom, 4 / zoom])
     ctx.beginPath()
     ctx.moveTo(sourcePoint.x, sourcePoint.y)
     ctx.lineTo(targetPoint.x, targetPoint.y)
     ctx.stroke()
-    const fontSize = 11 / zoom
-    ctx.font = `${fontSize}px Inter, system-ui, sans-serif`
-    const textMetrics = ctx.measureText(label)
-    const textW = textMetrics.width
-    const textH = fontSize
+    ctx.setLineDash([])
+    const badge = measureProxyBadge(ctx, label, zoom)
     const labelPos = pickEdgeLabelPosition(
       ctx.getTransform(),
       midX,
       midY,
-      textW,
-      textH,
+      badge.worldW,
+      badge.worldH,
       targetPoint.x - sourcePoint.x,
       targetPoint.y - sourcePoint.y,
       occupiedLabelRects,
     )
-    const px = 6 / zoom
-    const py = 4 / zoom
-    const badgeW = textW + px * 2
-    const badgeH = textH + py * 2
-    const badgeRadius = badgeH / 2
-    ctx.fillStyle = labelBg
-    ctx.beginPath()
-    ctx.roundRect(
-      labelPos.x - badgeW / 2,
-      labelPos.y - badgeH / 2,
-      badgeW,
-      badgeH,
-      badgeRadius,
-    )
-    ctx.fill()
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'
-    ctx.lineWidth = 1 / zoom
-    ctx.stroke()
-    ctx.fillStyle = 'white'
-    ctx.textAlign = 'center'
-    ctx.textBaseline = 'middle'
-    ctx.fillText(label, labelPos.x, labelPos.y)
+    drawFixedScreenProxyBadge(ctx, label, labelPos, badge.badgeCssW, badge.badgeCssH, labelBg, accent, [1, 4])
 
     ctx.restore()
   }
 }
 
+export function drawVisibleDirectProxyBadges(
+  ctx: CanvasRenderingContext2D,
+  badges: ZUIHiddenProxyBadge[],
+  visibleAnchorsByNodeId: Map<string, VisibleNodeAnchor>,
+  zoom: number,
+  labelBg: string,
+  occupiedLabelRects: ScreenRect[],
+) {
+  for (const badge of badges) {
+    const source = visibleAnchorsByNodeId.get(badge.sourceNodeId)
+    const target = visibleAnchorsByNodeId.get(badge.targetNodeId)
+    if (!source || !target) continue
+    const alpha = Math.min(source.renderAlpha, target.renderAlpha)
+    if (alpha < 0.01) continue
+
+    const { sourcePoint, targetPoint } = getDirectAnchorPoints(source, target)
+    const midX = (sourcePoint.x + targetPoint.x) / 2
+    const midY = (sourcePoint.y + targetPoint.y) / 2
+    const label = `+${badge.count}`
+
+    ctx.save()
+    ctx.globalAlpha = alpha
+    const badgeMetrics = measureProxyBadge(ctx, label, zoom)
+    const labelPos = pickEdgeLabelPosition(
+      ctx.getTransform(),
+      midX,
+      midY,
+      badgeMetrics.worldW,
+      badgeMetrics.worldH,
+      targetPoint.x - sourcePoint.x,
+      targetPoint.y - sourcePoint.y,
+      occupiedLabelRects,
+    )
+    drawFixedScreenProxyBadge(
+      ctx,
+      label,
+      labelPos,
+      badgeMetrics.badgeCssW,
+      badgeMetrics.badgeCssH,
+      labelBg,
+      'rgba(255, 255, 255, 0.5)',
+      [4, 3],
+    )
+    ctx.restore()
+  }
+}
+
 export function findHoveredProxyConnector(
   worldX: number,
   worldY: number,
-  connectors: ZUIResolvedConnector[],
-  visibleAnchorsByNodeId: Map<string, VisibleNodeAnchor>,
+  index: ProxyConnectorSpatialIndex,
   view: ZUIViewState,
 ): HoveredItem | null {
   const threshold = 18 / view.zoom
-  for (const connector of connectors) {
-    const source = visibleAnchorsByNodeId.get(connector.sourceNodeId)
-    const target = visibleAnchorsByNodeId.get(connector.targetNodeId)
-    if (!source || !target) continue
-    const x1 = source.worldX + source.worldW / 2
-    const y1 = source.worldY + source.worldH / 2
-    const x2 = target.worldX + target.worldW / 2
-    const y2 = target.worldY + target.worldH / 2
-    const dx = x2 - x1
-    const dy = y2 - y1
-    const l2 = dx * dx + dy * dy
-    if (l2 === 0) continue
-    let t = ((worldX - x1) * dx + (worldY - y1) * dy) / l2
-    t = Math.max(0, Math.min(1, t))
-    const nearestX = x1 + t * dx
-    const nearestY = y1 + t * dy
-    const dist = Math.sqrt((worldX - nearestX) ** 2 + (worldY - nearestY) ** 2)
-    if (dist > threshold) continue
+  const startX = Math.floor((worldX - threshold) / index.cellSize)
+  const endX = Math.floor((worldX + threshold) / index.cellSize)
+  const startY = Math.floor((worldY - threshold) / index.cellSize)
+  const endY = Math.floor((worldY + threshold) / index.cellSize)
+  const thresholdSquared = threshold * threshold
+  const seen = new Set<string>()
+  let bestConnector: IndexedProxyConnector | null = null
+  let bestDistSquared = thresholdSquared
 
-    return {
-      type: 'edge',
-      data: {
-        sourceId: connector.details.sourceAnchorName,
-        targetId: connector.details.targetAnchorName,
-        label: connector.details.label || 'Cross-branch connector',
-        diagramId: connector.details.ownerViewIds[0] ?? 0,
-        sourceObjId: connector.sourceAnchorElementId,
-        targetObjId: connector.targetAnchorElementId,
-        isProxy: true,
-        details: connector.details,
-      },
-      absX: (x1 + x2) / 2,
-      absY: (y1 + y2) / 2,
+  for (let cx = startX; cx <= endX; cx++) {
+    for (let cy = startY; cy <= endY; cy++) {
+      const bucket = index.cells.get(proxyCellKey(cx, cy))
+      if (!bucket) continue
+
+      for (const indexed of bucket) {
+        const connector = indexed.connector
+        if (seen.has(connector.key)) continue
+        seen.add(connector.key)
+        const x1 = indexed.x1
+        const y1 = indexed.y1
+        const x2 = indexed.x2
+        const y2 = indexed.y2
+        const dx = x2 - x1
+        const dy = y2 - y1
+        const l2 = dx * dx + dy * dy
+        if (l2 === 0) continue
+        let t = ((worldX - x1) * dx + (worldY - y1) * dy) / l2
+        t = Math.max(0, Math.min(1, t))
+        const nearestX = x1 + t * dx
+        const nearestY = y1 + t * dy
+        const distSquared = (worldX - nearestX) ** 2 + (worldY - nearestY) ** 2
+        if (distSquared > bestDistSquared) continue
+        bestDistSquared = distSquared
+        bestConnector = indexed
+      }
     }
   }
-  return null
+
+  if (!bestConnector) return null
+
+  const connector = bestConnector.connector
+  return {
+    type: 'edge',
+    data: {
+      sourceId: connector.details.sourceAnchorName,
+      targetId: connector.details.targetAnchorName,
+      label: connector.details.label || 'Cross-branch connector',
+      diagramId: connector.details.ownerViewIds[0] ?? 0,
+      sourceObjId: connector.sourceAnchorElementId,
+      targetObjId: connector.targetAnchorElementId,
+      isProxy: true,
+      details: connector.details,
+    },
+    absX: bestConnector.midX,
+    absY: bestConnector.midY,
+  }
 }