Function getVisibleCanvasBounds

apps/sim/hooks/use-canvas-viewport.ts:21–70

* Gets the visible canvas bounds accounting for sidebar, terminal, and panel overlays. * When embedded, uses the container rect directly since CSS variable offsets don't apply.

(options?: CanvasViewportOptions)

 * When embedded, uses the container rect directly since CSS variable offsets don't apply.
 */
function getVisibleCanvasBounds(options?: CanvasViewportOptions): VisibleBounds {
  const flowContainer = document.querySelector('.react-flow')

  if (options?.embedded && flowContainer) {
    const rect = flowContainer.getBoundingClientRect()
    return {
      width: rect.width,
      height: rect.height,
      offsetLeft: 0,
      offsetRight: 0,
      offsetBottom: 0,
    }
  }

  const style = getComputedStyle(document.documentElement)

  const sidebarWidth = Number.parseInt(style.getPropertyValue('--sidebar-width') || '0', 10)
  const terminalHeight = Number.parseInt(style.getPropertyValue('--terminal-height') || '0', 10)
  const panelWidth = Number.parseInt(style.getPropertyValue('--panel-width') || '0', 10)

  if (!flowContainer) {
    return {
      width: window.innerWidth - sidebarWidth - panelWidth,
      height: window.innerHeight - terminalHeight,
      offsetLeft: sidebarWidth,
      offsetRight: panelWidth,
      offsetBottom: terminalHeight,
    }
  }

  const rect = flowContainer.getBoundingClientRect()

  // Calculate actual visible area in screen coordinates
  // This works regardless of whether the container extends under overlays
  const visibleLeft = Math.max(rect.left, sidebarWidth)
  const visibleRight = Math.min(rect.right, window.innerWidth - panelWidth)
  const visibleBottom = Math.min(rect.bottom, window.innerHeight - terminalHeight)

  // Calculate visible dimensions and offsets relative to the container
  const visibleWidth = Math.max(0, visibleRight - visibleLeft)
  const visibleHeight = Math.max(0, visibleBottom - rect.top)

  return {
    width: visibleWidth,
    height: visibleHeight,
    offsetLeft: visibleLeft - rect.left,
    offsetRight: rect.right - visibleRight,
    offsetBottom: rect.bottom - visibleBottom,
  }
}

/**
 * Gets the center of the visible canvas in screen coordinates.