Home Manual Reference Source Test

src/view/plotting.js

  1. import { INSTRUMENTS } from "../model/instruments.js";
  2. import { chordName } from "../model/theory.js";
  4. /**
  5.  * Bundle of compose-result rendering helpers wired into the Alpine "app" data object via spread.
  6.  * @type {Object}
  7.  * @property {function(midi: {combinedB64: string, voicesB64: string[]}): void} wireMidiToPlayer
  8.  *  Wire combined + per-voice MIDI URLs into player and visualizers; caller awaits $nextTick.
  9.  * @property {function(result: Object, voiceConfig: {voices: number, voice: Object[]}): Object} buildResultTable
  10.  *  Shape compose result + voice config into the Alpine-rendered result table.
  11.  * @property {function(voiceLabels: {color: string}[]): void} applyVoiceStyles
  12.  *  Stylesheet that colors midi-visualizer notes by voice index (sigma).
  13.  * @property {function(graph: Object, path: ?Object, keyIndex: number, mode: 'major'|'minor'): string} plotChordGraph
  14.  *  Plots the chord graph as an SVG string; diatonic gray + 30% opacity, path edges gradient + full opacity.
  15.  */
  16. export const PLOTTING = {
  17.   wireMidiToPlayer,
  18.   buildResultTable,
  19.   applyVoiceStyles,
  20.   plotChordGraph,
  21. };
  23. /** @private */
  24. function wireMidiToPlayer({ combinedB64, voicesB64 }) {
  25.   const player = document.getElementById("midi-player");
  26.   const visualizer = document.getElementById("midi-visualizer");
  27.   const dataUrl = `data:audio/midi;base64,${combinedB64}`;
  28.   if (visualizer) {
  29.     visualizer.src = dataUrl;
  30.   }
  31.   if (player) {
  32.     player.src = dataUrl;
  33.     if (!player._vizBound && visualizer) {
  34.       player.addVisualizer(visualizer);
  35.       player._vizBound = true;
  36.     }
  37.   }
  38.   document.querySelectorAll(".midi-visualizer").forEach((vis, idx) => {
  39.     if (voicesB64?.[idx]) {
  40.       vis.src = `data:audio/midi;base64,${voicesB64[idx]}`;
  41.     }
  42.   });
  43. }
  45. /** @private */
  46. function buildResultTable(result, voiceConfig) {
  47.   const { parts, labelCache } = result;
  48.   const { voices, voice } = voiceConfig;
  49.   const labelOf = (p, i) => p.label || `Part ${i + 1}`;
  50.   const cached = (k, p, i) => labelCache[labelOf(p, i)]?.[k];
  51.   const names = Object.values(INSTRUMENTS).flat();
  52.   return {
  53.     headers: parts.map(labelOf),
  54.     cells: Array.from({ length: voices }, (_, v) =>
  55.       parts.map((p, i) => cached("voicesB64", p, i)?.[v] || null),
  56.     ),
  57.     voices,
  58.     voiceLabels: voice.slice(0, voices).map((vc, i) => ({
  59.       num: i + 1,
  60.       instrument: names[vc?.instrument ?? 0],
  61.       color: vc?.color || "#888888",
  62.     })),
  63.     partChordNames: parts.map(
  64.       (p, i) => cached("concreteProgression", p, i) || "",
  65.     ),
  66.   };
  67. }
  69. /** @private */
  70. function applyVoiceStyles(voiceLabels) {
  71.   let el = document.getElementById("voice-colors");
  72.   if (!el) {
  73.     el = document.head.appendChild(document.createElement("style"));
  74.     el.id = "voice-colors";
  75.   }
  76.   const sel = (i) => `midi-visualizer svg rect.note[data-instrument="${i}"]`;
  77.   const rule = (vl, i) =>
  78.     `${sel(i)} { stroke: ${vl.color}; fill: ${vl.color}; }`;
  79.   el.textContent = voiceLabels.map(rule).join("\n");
  80. }
  82. /** @private */
  83. function plotChordGraph(graph, path, keyIndex = 0, mode = "major") {
  84.   const { nodes, edges, costs } = graph;
  85.   const costMap = costs instanceof Map ? costs : new Map(Object.entries(costs));
  86.   const { positions, colorMap, diatonic, chromatic } = layoutFor(nodes, mode);
  87.   const pathEdges = path?.edges ?? new Set();
  88.   const pathNodeSet = new Set(path?.nodes ?? []);
  89.   const edgeSvg = renderEdges(edges, positions, costMap, pathEdges);
  90.   const gradientDefs = buildGradients(edges, positions, colorMap, pathEdges);
  91.   const nodeSvg = [...diatonic, ...chromatic]
  92.     .map((node) => {
  93.       const pos = positions[node];
  94.       const color = colorMap[node] || LAYOUT.general.fallbackColor;
  95.       const op = pathNodeSet.has(node) ? 1 : 0.5;
  96.       const hasLoop = edges.some(([u, v]) => u === node && v === node);
  97.       const loop = hasLoop
  98.         ? renderSelfLoop(pos, color, pathEdges.has(`${node}->${node}`))
  99.         : "";
  100.       const subLabel =
  101.         diatonic.includes(node) && node !== "NC"
  102.           ? chordName(node, keyIndex)
  103.           : "";
  104.       return `${nodeCircle(pos, color, op)}${loop}${renderLabel(node, pos, op, subLabel)}`;
  105.     })
  106.     .join("");
  107.   const viewH = chromatic.length > 0 ? 440 : 300;
  108.   return [
  109.     `<svg viewBox="0 0 860 ${viewH}" xmlns="http://www.w3.org/2000/svg" style="max-width:860px; width:100%;">`,
  110.     `<defs>`,
  111.     `<marker id="ah" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto" overflow="visible">`,
  112.     `<polygon points="0,0 6,2.5 0,5" fill="context-stroke"/>`,
  113.     `</marker>`,
  114.     gradientDefs,
  115.     `</defs>`,
  116.     edgeSvg,
  117.     nodeSvg,
  118.     `</svg>`,
  119.   ].join("");
  120. }
  122. /** @private Per-mode (mu) layout: positions, colors, diatonic and chromatic split. */
  123. function layoutFor(nodes, mode) {
  124.   const layout = LAYOUT[mode];
  125.   const diatonic = layout.map((s) => s.chord);
  126.   const darken = (rgb) =>
  127.     rgb.replace(/\d+/g, (v) => `${Math.round(Number(v) * 0.6)}`);
  128.   const positions = {};
  129.   const colorMap = {};
  130.   for (const { chord, x, y, color } of layout) {
  131.     positions[chord] = { x, y };
  132.     colorMap[chord] = y > 150 ? darken(color) : color;
  133.   }
  134.   const chromatic = nodes.filter((n) => !positions[n]);
  135.   const row3Y = 360;
  136.   const row3Left = 130;
  137.   const row3Right = 730;
  138.   chromatic.forEach((name, i) => {
  139.     const x =
  140.       chromatic.length === 1
  141.         ? (row3Left + row3Right) / 2
  142.         : row3Left + (i * (row3Right - row3Left)) / (chromatic.length - 1);
  143.     positions[name] = { x, y: row3Y };
  144.   });
  145.   return { positions, colorMap, diatonic, chromatic };
  146. }
  148. /** @private Render non-loop edges; gradient ids match buildGradients order. */
  149. function renderEdges(edges, positions, costMap, pathEdges) {
  150.   let edgeIdx = 0;
  151.   let svg = "";
  152.   for (const [u, v] of edges) {
  153.     if (u === v) {
  154.       continue;
  155.     }
  156.     const from = positions[u];
  157.     const to = positions[v];
  158.     const isPath = pathEdges.has(`${u}->${v}`);
  159.     const attrs = {
  160.       stroke: isPath ? `url(#eg${edgeIdx})` : "#999",
  161.       width: (6 / costMap.get(`${u}->${v}`)) * (isPath ? 1.5 : 1),
  162.       opacity: isPath ? 1 : 0.3,
  163.     };
  164.     svg +=
  165.       from.y === to.y ? edgeCurve(from, to, attrs) : edgeLine(from, to, attrs);
  166.     edgeIdx += isPath ? 1 : 0;
  167.   }
  168.   return svg;
  169. }
  171. /** @private Same-row edge as quadratic Bezier curve to avoid overlap. */
  172. function edgeCurve(from, to, attrs) {
  173.   const xGap = Math.abs(to.x - from.x);
  174.   const isNeighbor = xGap <= 200;
  175.   const curveDir = isNeighbor
  176.     ? to.x > from.x
  177.       ? -1
  178.       : 1
  179.     : from.y <= 150
  180.       ? -1
  181.       : 1;
  182.   const cx = (from.x + to.x) / 2;
  183.   const cy = from.y + curveDir * xGap * 0.15;
  184.   const x1 =
  185.     from.x +
  186.     (to.x > from.x ? LAYOUT.general.nodeRadius : -LAYOUT.general.nodeRadius);
  187.   const y1 = from.y + curveDir * 4;
  188.   const x2 =
  189.     to.x +
  190.     (from.x > to.x ? LAYOUT.general.nodeRadius : -LAYOUT.general.nodeRadius);
  191.   const y2 = to.y + curveDir * 4;
  192.   return `<path
  193.       d="M${x1.toFixed(1)},${y1.toFixed(1)} Q${cx.toFixed(1)},${cy.toFixed(1)} ${x2.toFixed(1)},${y2.toFixed(1)}"
  194.       fill="none"
  195.       stroke="${attrs.stroke}"
  196.       stroke-width="${attrs.width}"
  197.       marker-end="url(#ah)"
  198.       opacity="${attrs.opacity}"/>`;
  199. }
  201. /** @private Cross-row edge as straight line, shrunk to circle perimeters. */
  202. function edgeLine(from, to, attrs) {
  203.   const dx = to.x - from.x;
  204.   const dy = to.y - from.y;
  205.   const dist = Math.sqrt(dx * dx + dy * dy);
  206.   const shrink = (LAYOUT.general.nodeRadius + 4) / dist;
  207.   const x1 = from.x + dx * shrink;
  208.   const y1 = from.y + dy * shrink;
  209.   const x2 = to.x - dx * shrink;
  210.   const y2 = to.y - dy * shrink;
  211.   return `<line
  212.       x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}"
  213.       x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}"
  214.       stroke="${attrs.stroke}"
  215.       stroke-width="${attrs.width}"
  216.       marker-end="url(#ah)"
  217.       opacity="${attrs.opacity}"/>`;
  218. }
  220. /** @private Linear-gradient defs for path edges in encounter order. */
  221. const buildGradients = (edges, positions, colorMap, pathEdges) =>
  222.   edges
  223.     .filter(([u, v]) => u !== v && pathEdges.has(`${u}->${v}`))
  224.     .map(
  225.       ([u, v], i) => `<linearGradient id="eg${i}" gradientUnits="userSpaceOnUse"
  226.         x1="${positions[u].x}" y1="${positions[u].y}" x2="${positions[v].x}" y2="${positions[v].y}">
  227.         <stop offset="0%" stop-color="${colorMap[u] || LAYOUT.general.fallbackColor}"/>
  228.         <stop offset="100%" stop-color="${colorMap[v] || LAYOUT.general.fallbackColor}"/>
  229.       </linearGradient>`,
  230.     )
  231.     .join("");
  233. /** @private Self-loop arc, lit when the loop edge is on the highlighted path. */
  234. function renderSelfLoop(pos, color, isLit) {
  235.   const a1 = (23 * Math.PI) / 180;
  236.   const a2 = (67 * Math.PI) / 180;
  237.   const ac = (45 * Math.PI) / 180;
  238.   const p1x = pos.x + LAYOUT.general.nodeRadius * Math.sin(a1);
  239.   const p1y = pos.y - LAYOUT.general.nodeRadius * Math.cos(a1);
  240.   const p2x = pos.x + LAYOUT.general.nodeRadius * Math.sin(a2);
  241.   const p2y = pos.y - LAYOUT.general.nodeRadius * Math.cos(a2);
  242.   const cx = pos.x + (LAYOUT.general.nodeRadius + 22) * Math.sin(ac);
  243.   const cy = pos.y - (LAYOUT.general.nodeRadius + 22) * Math.cos(ac);
  244.   const stroke = isLit ? color : "#999";
  245.   const opacity = isLit ? 1 : 0.3;
  246.   return `<path
  247.       d="M${p1x.toFixed(1)},${p1y.toFixed(1)} Q${cx.toFixed(1)},${cy.toFixed(1)} ${p2x.toFixed(1)},${p2y.toFixed(1)}"
  248.       fill="none"
  249.       stroke="${stroke}"
  250.       stroke-width="2"
  251.       marker-end="url(#ah)"
  252.       opacity="${opacity}"/>`;
  253. }
  255. /** @private White-fill ring drawn around every node. */
  256. const nodeCircle = (pos, color, op) => `<circle
  257.       cx="${pos.x}" cy="${pos.y}" r="${LAYOUT.general.nodeRadius}"
  258.       fill="#fff"
  259.       stroke="${color}"
  260.       stroke-width="4"
  261.       opacity="${op}"/>`;
  263. /** @private Roman-numeral label; subLabel adds a chord-name subscript. */
  264. const renderLabel = (node, pos, op, subLabel) =>
  265.   subLabel
  266.     ? `<text
  267.         x="${pos.x}" y="${pos.y - 7}"
  268.         text-anchor="middle" dominant-baseline="central"
  269.         font-size="13" font-family="serif" font-weight="bold"
  270.         fill="#000" opacity="${op}">${node}</text>
  271.        <text
  272.         x="${pos.x}" y="${pos.y + 10}"
  273.         text-anchor="middle" dominant-baseline="central"
  274.         font-size="12" font-family="sans-serif"
  275.         fill="#000" opacity="${op * 0.7}">${subLabel}</text>`
  276.     : `<text
  277.         x="${pos.x}" y="${pos.y}"
  278.         text-anchor="middle" dominant-baseline="central"
  279.         font-size="11" font-family="serif"
  280.         fill="#000" opacity="${op}">${node}</text>`;
  282. /** @private Per-mode (mu) layout + general visual constants. */
  283. const LAYOUT = {
  284.   general: { nodeRadius: 30, fallbackColor: "rgb(120,120,120)" },
  285.   major: [
  286.     { chord: "IV", x: 130, y: 80, color: "rgb(0,0,255)" },
  287.     { chord: "I", x: 330, y: 80, color: "rgb(0,255,0)" },
  288.     { chord: "V", x: 530, y: 80, color: "rgb(255,0,0)" },
  289.     { chord: "ii", x: 130, y: 220, color: "rgb(0,0,191)" },
  290.     { chord: "vi", x: 330, y: 220, color: "rgb(0,191,0)" },
  291.     { chord: "iii", x: 530, y: 220, color: "rgb(191,191,0)" },
  292.     { chord: "viio", x: 730, y: 220, color: "rgb(191,0,191)" },
  293.     { chord: "NC", x: 730, y: 80, color: "rgb(0,0,0)" },
  294.   ],
  295.   minor: [
  296.     { chord: "bVI", x: 130, y: 80, color: "rgb(0,0,255)" },
  297.     { chord: "III", x: 330, y: 80, color: "rgb(0,255,0)" },
  298.     { chord: "bVII", x: 530, y: 80, color: "rgb(255,0,0)" },
  299.     { chord: "iv", x: 130, y: 220, color: "rgb(0,0,191)" },
  300.     { chord: "i", x: 330, y: 220, color: "rgb(0,191,0)" },
  301.     { chord: "V", x: 530, y: 220, color: "rgb(191,191,0)" },
  302.     { chord: "iio", x: 730, y: 220, color: "rgb(191,0,191)" },
  303.     { chord: "NC", x: 730, y: 80, color: "rgb(0,0,0)" },
  304.   ],
  305. };