render = { const CH = 16; // char height const R = 0.6; // char width/height for "Menlo" const CW = R * CH; // char width const PY = 10; const PX = 10; const RR = 6; // ref circle radius function renderKey(key) { const width = 0.85 * CW * key.length; return { width, el: svg`${key}` }; } return function render({ node, heap }, revived = []) { const { category, type, value, str, at } = node; if (category === "primitive") { const valueStr = type === "string" ? `"${value}"` : type === "symbol" ? str : String(value); const width = CW * valueStr.length; return { node, heap, width, height: CH, refs: [], el: svg`${valueStr}` }; } else if (revived[at]) { return revived[at]; } else { const { type, entries } = heap[at]; const gn = (revived[at] = { node, heap, width: PX, height: PY, refs: [] }); const children = []; for (const [key, node] of entries) { const k = renderKey(key); const { width, height, el } = node.category === "primitive" ? render({ node, heap }) : { node, heap, width: 2 * RR, height: CH, refs: [], el: svg`` }; if (node.category !== "primitive") { gn.refs.push({ x: k.width + PX + PX + RR, y: gn.height + CH / 2, at: node.at }); } children.push(svg` ${k.el} ${el} `); gn.width = Math.max(gn.width, k.width + PX + width + PX); gn.height += PY + height; } gn.width += PX; if (entries.length === 0) { gn.height += PY; } gn.el = svg` ${children} `; return gn; } }; }