import { layoutAndRoute, netAnchorPoint } from "./layout.js"; const GRID = 20; const NET_COLORS = { power: "#b54708", ground: "#344054", signal: "#1d4ed8", analog: "#0f766e", differential: "#c11574", clock: "#b93815", bus: "#155eef" }; function esc(text) { return String(text) .replaceAll("&", "&") .replaceAll("<", "<") .replaceAll(">", ">") .replaceAll('"', """); } function normalizeRotation(value) { const n = Number(value ?? 0); if (!Number.isFinite(n)) { return 0; } const snapped = Math.round(n / 90) * 90; let rot = snapped % 360; if (rot < 0) { rot += 360; } return rot; } function rotatePoint(point, center, rotation) { if (!rotation) { return point; } const rad = (rotation * Math.PI) / 180; const cos = Math.round(Math.cos(rad)); const sin = Math.round(Math.sin(rad)); const dx = point.x - center.x; const dy = point.y - center.y; return { x: Math.round(center.x + dx * cos - dy * sin), y: Math.round(center.y + dx * sin + dy * cos) }; } function rotateSide(side, rotation) { const steps = normalizeRotation(rotation) / 90; const order = ["top", "right", "bottom", "left"]; const idx = order.indexOf(side); if (idx < 0) { return side; } return order[(idx + steps) % 4]; } function truncate(text, max) { const s = String(text ?? ""); if (s.length <= max) { return s; } return `${s.slice(0, Math.max(1, max - 1))}...`; } function netColor(netClass) { return NET_COLORS[netClass] ?? NET_COLORS.signal; } function symbolTemplateKind(sym) { const t = String(sym?.template_name ?? "").toLowerCase(); if (["resistor", "capacitor", "inductor", "diode", "led", "connector"].includes(t)) { return t; } const c = String(sym?.category ?? "").toLowerCase(); if (c.includes("resistor")) return "resistor"; if (c.includes("capacitor")) return "capacitor"; if (c.includes("inductor")) return "inductor"; if (c.includes("diode")) return "diode"; if (c.includes("led")) return "led"; if (c.includes("connector")) return "connector"; return null; } function renderSymbolBody(sym, x, y, width, height) { const kind = symbolTemplateKind(sym); if (!kind) { return ``; } const midX = x + width / 2; const midY = y + height / 2; const left = x + 16; const right = x + width - 16; const top = y + 14; const bottom = y + height - 14; const body = []; body.push(``); if (kind === "resistor") { const y0 = midY; const pts = [ [left, y0], [left + 16, y0 - 10], [left + 28, y0 + 10], [left + 40, y0 - 10], [left + 52, y0 + 10], [left + 64, y0 - 10], [right, y0] ]; body.push(``); } else if (kind === "capacitor") { body.push(``); body.push(``); body.push(``); body.push(``); } else if (kind === "inductor") { body.push(``); for (let i = 0; i < 4; i += 1) { const cx = left + 18 + i * 16; body.push(``); } body.push(``); } else if (kind === "diode" || kind === "led") { const triLeft = left + 12; const triRight = midX + 6; body.push(``); body.push(``); body.push(``); body.push(``); if (kind === "led") { body.push(``); body.push(``); } } else if (kind === "connector") { body.push(``); body.push(``); body.push(``); } return body.join(""); } function pinNetMap(model) { const map = new Map(); for (const net of model.nets) { for (const node of net.nodes) { const key = `${node.ref}.${node.pin}`; const list = map.get(key) ?? []; list.push(net.name); map.set(key, list); } } return map; } function renderWirePath(pathD, netName, netClass) { const color = netColor(netClass); return [ ``, `` ].join(""); } function renderNetLabel(x, y, netName, netClass, bold = false) { const color = netColor(netClass); const weight = bold ? "700" : "600"; return `${esc(netName)}`; } function isGroundLikeNet(net) { const cls = String(net?.class ?? "").trim().toLowerCase(); if (cls === "ground") { return true; } const name = String(net?.name ?? "").trim().toLowerCase(); return name === "gnd" || name === "ground" || name.endsWith("_gnd"); } function tieLabelPoint(point, netClass) { if (netClass === "power") { return { x: point.x + 8, y: point.y - 10 }; } return { x: point.x + 8, y: point.y - 8 }; } function distance(a, b) { return Math.hypot(a.x - b.x, a.y - b.y); } function pickLabelPoints(points, maxCount, used, minSpacing, avoidPoints = []) { const accepted = []; for (const p of points) { if (accepted.length >= maxCount) { break; } let blocked = false; for (const prev of used) { if (distance(p, prev) < minSpacing) { blocked = true; break; } } if (blocked) { continue; } for (const pin of avoidPoints) { if (distance(p, pin) < minSpacing * 0.9) { blocked = true; break; } } if (blocked) { continue; } accepted.push(p); used.push(p); } return accepted; } function renderGroundSymbol(x, y, netName) { const y0 = y + 3; const y1 = y + 7; const y2 = y + 10; const y3 = y + 13; return ` `; } function renderPowerSymbol(x, y, netName) { return ` `; } function renderGenericTie(x, y, netName, netClass) { const color = netColor(netClass); return ``; } function renderTieSymbol(x, y, netName, netClass) { if (netClass === "ground") { return renderGroundSymbol(x, y, netName); } if (netClass === "power") { return renderPowerSymbol(x, y, netName); } return renderGenericTie(x, y, netName, netClass); } function representativePoint(routeInfo, netAnchor) { if (routeInfo.labelPoints?.length) { return routeInfo.labelPoints[0]; } if (routeInfo.tiePoints?.length) { return routeInfo.tiePoints[0]; } if (routeInfo.routes?.length && routeInfo.routes[0].length) { const seg = routeInfo.routes[0][0]; return { x: (seg.a.x + seg.b.x) / 2, y: (seg.a.y + seg.b.y) / 2 }; } return netAnchor; } function renderLegend() { const entries = [ ["power", "Power"], ["ground", "Ground"], ["clock", "Clock"], ["signal", "Signal"], ["analog", "Analog"] ]; const rows = entries .map( ([cls, label], idx) => `${label}` ) .join(""); return ` ${rows} `; } export function renderSvgFromLayout(model, layout, options = {}) { const showLabels = options.show_labels !== false; const pinNets = pinNetMap(model); const netClassByName = new Map((model.nets ?? []).map((n) => [n.name, n.class])); const allPinPoints = []; const components = layout.placed .map((inst) => { const sym = model.symbols[inst.symbol]; const x = inst.placement.x; const y = inst.placement.y; const rotation = normalizeRotation(inst.placement.rotation ?? 0); const cx = x + sym.body.width / 2; const cy = y + sym.body.height / 2; const templateKind = symbolTemplateKind(sym); const compactLabel = templateKind || sym.body.width <= 140 || sym.body.height <= 90; const legacyShowInstanceNetLabels = Boolean(inst.properties?.show_net_labels); const pinUi = inst.properties?.pin_ui && typeof inst.properties.pin_ui === "object" && !Array.isArray(inst.properties.pin_ui) ? inst.properties.pin_ui : {}; const pinCircles = []; const pinLabels = []; const instanceNetLabels = []; for (const pin of sym.pins) { let px = x; let py = y; if (pin.side === "left") { px = x; py = y + pin.offset; } else if (pin.side === "right") { px = x + sym.body.width; py = y + pin.offset; } else if (pin.side === "top") { px = x + pin.offset; py = y; } else { px = x + pin.offset; py = y + sym.body.height; } pinCircles.push( `` ); const rotated = rotatePoint({ x: px, y: py }, { x: cx, y: cy }, rotation); const rx = rotated.x; const ry = rotated.y; const rotatedSide = rotateSide(pin.side, rotation); allPinPoints.push({ x: rx, y: ry }); let labelX = rx + 6; let labelY = ry - 4; let textAnchor = "start"; if (rotatedSide === "right") { labelX = rx - 6; labelY = ry - 4; textAnchor = "end"; } else if (rotatedSide === "top") { labelX = rx + 4; labelY = ry + 12; textAnchor = "start"; } else if (rotatedSide === "bottom") { labelX = rx + 4; labelY = ry - 8; textAnchor = "start"; } const showPinLabel = !templateKind || !/^\d+$/.test(pin.name); if (showPinLabel) { pinLabels.push( `${esc(pin.name)}` ); } const pinUiEntry = pinUi[pin.name]; const showPinNetLabel = pinUiEntry && typeof pinUiEntry === "object" && Object.prototype.hasOwnProperty.call(pinUiEntry, "show_net_label") ? Boolean(pinUiEntry.show_net_label) : legacyShowInstanceNetLabels; if (showPinNetLabel && showLabels) { const nets = pinNets.get(`${inst.ref}.${pin.name}`) ?? []; const displayNet = nets.find((n) => !isGroundLikeNet({ name: n, class: "" })) ?? nets[0]; if (displayNet) { let netX = labelX; let netY = labelY; let netAnchor = textAnchor; if (rotatedSide === "left") { netX = rx - 12; netY = ry - 10; netAnchor = "end"; } else if (rotatedSide === "right") { netX = rx + 12; netY = ry - 10; netAnchor = "start"; } else if (rotatedSide === "top") { netX = rx + 8; netY = ry - 10; netAnchor = "start"; } else { netX = rx + 8; netY = ry + 14; netAnchor = "start"; } instanceNetLabels.push( `${esc(displayNet)}` ); } } } const pinLabelsSvg = [...pinLabels, ...instanceNetLabels].join(""); const pinCoreSvg = pinCircles.join(""); const rotationTransform = rotation ? ` transform="rotate(${rotation} ${cx} ${cy})"` : ""; const refLabel = truncate(inst.ref, compactLabel ? 6 : 10); const valueLabel = truncate(inst.properties?.value ?? inst.symbol, compactLabel ? 18 : 28); const refY = compactLabel ? y - 6 : y + 18; const valueY = compactLabel ? y + sym.body.height + 14 : y + 34; return ` ${renderSymbolBody(sym, x, y, sym.body.width, sym.body.height)} ${pinCoreSvg} ${pinLabelsSvg} ${esc(refLabel)} ${esc(valueLabel)} `; }) .join("\n"); const wires = layout.routed .flatMap((rn) => rn.routes.map((route) => { const path = route .map((seg, idx) => `${idx === 0 ? "M" : "L"} ${seg.a.x} ${seg.a.y} L ${seg.b.x} ${seg.b.y}`) .join(" "); return renderWirePath(path, rn.net.name, rn.net.class); }) ) .join("\n"); const junctions = layout.routed .flatMap((rn) => (rn.junctionPoints ?? []).map((p) => { const color = netColor(rn.net.class); return ``; }) ) .join("\n"); const tiePoints = layout.routed .flatMap((rn) => (rn.tiePoints ?? []).map((p) => renderTieSymbol(p.x, p.y, rn.net.name, rn.net.class)) ) .join("\n"); const routedByName = new Map(layout.routed.map((r) => [r.net.name, r])); const usedLabelPoints = []; const labels = []; const tieLabels = []; for (const net of model.nets) { if (isGroundLikeNet(net)) { continue; } const routeInfo = routedByName.get(net.name); if (routeInfo?.isBusMember && routeInfo.mode === "label_tie") { continue; } const netAnchor = netAnchorPoint(net, model, layout.placed); const candidates = []; if (routeInfo?.mode === "label_tie") { candidates.push(...(routeInfo?.labelPoints ?? [])); const selected = pickLabelPoints(candidates, 1, usedLabelPoints, GRID * 2.4, allPinPoints); for (const p of selected) { labels.push(renderNetLabel(p.x, p.y, net.name, net.class, true)); } continue; } if (routeInfo?.labelPoints?.length) { candidates.push(...routeInfo.labelPoints); } if (netAnchor) { candidates.push({ x: netAnchor.x + 8, y: netAnchor.y - 8 }); } const selected = pickLabelPoints(candidates, 1, usedLabelPoints, GRID * 2.4, allPinPoints); for (const p of selected) { labels.push(renderNetLabel(p.x, p.y, net.name, net.class)); } } if (showLabels) { const usedTieLabels = []; for (const rn of layout.routed) { if (rn.mode !== "label_tie" || isGroundLikeNet(rn.net)) { continue; } const candidates = (rn.tiePoints ?? []).map((p) => tieLabelPoint(p, rn.net.class)); if (!candidates.length) { continue; } const maxPerNet = rn.net.class === "power" ? Math.min(6, candidates.length) : Math.min(2, candidates.length); const selected = pickLabelPoints(candidates, maxPerNet, usedTieLabels, GRID * 1.5, allPinPoints); for (const p of selected) { tieLabels.push(renderNetLabel(p.x, p.y, rn.net.name, rn.net.class, true)); } } } const busLabels = (layout.bus_groups ?? []) .map((group) => { const reps = group.nets .map((netName) => { const net = model.nets.find((n) => n.name === netName); if (!net) { return null; } const anchor = netAnchorPoint(net, model, layout.placed); return representativePoint(routedByName.get(netName), anchor); }) .filter(Boolean); if (!reps.length) { return ""; } const x = reps.reduce((sum, p) => sum + p.x, 0) / reps.length; const y = reps.reduce((sum, p) => sum + p.y, 0) / reps.length; return `${esc(group.name)} bus`; }) .join("\n"); const annotations = (model.annotations ?? []) .map((a, idx) => { const x = a.x ?? 16; const y = a.y ?? 24 + idx * 16; return `${esc(a.text)}`; }) .join("\n"); const labelLayer = showLabels ? [...labels, ...tieLabels].join("\n") : ""; return ` ${components} ${wires} ${junctions} ${tiePoints} ${labelLayer} ${busLabels} ${annotations} ${renderLegend()} `; } export function renderSvg(model, options = {}) { const layout = layoutAndRoute(model, options); return renderSvgFromLayout(model, layout, options); }