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 `
`;
}
export function renderSvg(model, options = {}) {
const layout = layoutAndRoute(model, options);
return renderSvgFromLayout(model, layout, options);
}