pixalynx/usb3-hub-10g

lib/sch.tsx

import { Fragment, createContext, useContext, type ReactNode } from "react"
import { SCHEMATIC_OFF } from "./env"

/** Schematic annotations: per-chip notes (function and ratings, from the datasheets in research/ and
 * docs/decisions.md) and dashed frames around each functional block. Drawing only, no connectivity. */
const NOTE = "#2b4c7e"
const FRAME = "#7b8794"
export const NOTE_SIZE = 0.15
const LINE = NOTE_SIZE * 1.45

/** The sheet the enclosing <Sheet> draws on: notes and frames tag themselves with it (see Sheet below). */
const SheetCtx = createContext<string | undefined>(undefined)
const useSheet = (): {} => {
  const name = useContext(SheetCtx)
  return name ? { schSheetName: name } : {}
}

/** Lines of text hanging from (x, y), their top-left corner. */
export const Note = ({ x, y, lines, size = NOTE_SIZE, color = NOTE }: { x: number; y: number; lines: string[]; size?: number; color?: string }) => {
  const sheet = useSheet()
  return (
    <>
      {lines.map((t, i) => (
        <Fragment key={i}>
          <schematictext text={t} schX={x} schY={y - i * size * 1.45} fontSize={size} anchor="top_left" color={color} {...sheet} />
        </Fragment>
      ))}
    </>
  )
}
export const noteHeight = (n: number, size = NOTE_SIZE) => n * size * 1.45

/** Dashed block frame with its title above the top-left corner. */
export const Frame = ({ x0, y0, x1, y1, title }: { x0: number; y0: number; x1: number; y1: number; title: string }) => {
  const sheet = useSheet()
  return (
    <>
      <schematicrect schX={(x0 + x1) / 2} schY={(y0 + y1) / 2} width={x1 - x0} height={y1 - y0} isDashed strokeWidth={0.03} color={FRAME} {...sheet} />
      <schematictext text={title} schX={x0} schY={y1 + 0.12} fontSize={0.32} anchor="bottom_left" color={FRAME} {...sheet} />
    </>
  )
}
export { LINE as NOTE_LINE }

/** One drawing sheet per functional block (lib/layout.ts SHEETS), with its own title line; sheet 1 also carries the
 * legend. The <schematicsheet> is empty on purpose: core auto-lays-out a sheet's children and would ignore every
 * schX/schY. Parts name their sheet with schSheetName (lib/layout.ts onSheet), notes and frames take it from this
 * component, the generated net labels carry it (lib/sch-labels.tsx). With the schematic off, children render bare.
 * Sheet sizes are in mm; 1 schematic unit = 9.236 mm. */
const PAPER = { A4: { w: 297, h: 210 }, A3: { w: 420, h: 297 } } as const
export type SheetDef = { name: string; index: number; title: string; paper: keyof typeof PAPER; at: readonly [number, number] }
export const Sheet = ({ def, count, legend, children }: { def: SheetDef; count: number; legend?: boolean; children: ReactNode }) => {
  if (SCHEMATIC_OFF) return <>{children}</>
  const [x, y] = def.at
  return (
    <SheetCtx.Provider value={def.name}>
      <schematicsheet name={def.name} displayName={def.title} sheetIndex={def.index} sheetWidth={PAPER[def.paper].w} sheetHeight={PAPER[def.paper].h} />
      <schematictext text={`USB3 HUB 10G Rev A  |  Sheet ${def.index + 1} of ${count}: ${def.title}`} schX={x} schY={y} fontSize={0.42} anchor="bottom_left" color="#1f2933"
        {...({ schSheetName: def.name } as {})} />
      {legend && (
        <Note x={x} y={y - 0.2} size={0.17} color="#52606d" lines={[
          "10 Gbps USB 3.2 Gen 2 hub: USB-C upstream, 2 x USB-A + 2 x USB-C downstream, USB-C PD power input with host bus-power fallback.",
          "Every connection is a net label at the pin (a comb joins adjacent pins on one net); labels with the same name are connected,",
          "also across sheets. Dashed frames are functional blocks; blue notes give each chip's function and ratings (research/, docs/decisions.md).",
        ]} />
      )}
      {children}
    </SheetCtx.Provider>
  )
}