async function drawGraph(song) { let uc = ucManager.data; let dynheight = setup.graphHeight.dyn; let height = setup.graphHeight.melody; let tlen = setup.tpq * setup.blen; let isLoop = uc.loop.flag; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + dynheight]); var scaleY = d3.scaleLinear().domain([setup.pitch.limits.min, setup.pitch.limits.max]).range([height + dynheight, dynheight]) var scaleX = d3.scaleLinear().domain([0, tlen]).range([0, width]); let playingNotes = [], playCursor = []; $('.MNRGRAPH').addClass('to-delete'); // bars for (let k = 0; k < setup.blen; k++) { let x = scaleX(k * setup.tpq); svg.append("line") .attr("x1", x).attr("y1", scaleY(0)).attr("x2", x).attr("y2", scaleY(128)) .attr("stroke-width", .35).style("stroke", '#404040'); } // black keys for (let k = setup.pitch.limits.min; k <= setup.pitch.limits.max; k++) { let rk = k % 12; let black = (rk == 1) || (rk == 3) || (rk == 6) || (rk == 8) || (rk == 10); if (black) svg.append("rect") .attr("x", scaleX()).attr("y", scaleY(k)) .attr("width", scaleX(tlen) - scaleX(0)) .attr("height", -scaleY(k + 1) + scaleY(k)) .attr("fill", `#d8d8d8`); } let masterCursor = svg.append("line") .attr("stroke-width", 1.5) .style("stroke", '#c0c0c0c0') .attr('y1', scaleY(setup.pitch.limits.min)) .attr('y2', scaleY(setup.pitch.limits.max) - dynheight); for (let ti = 0; ti < 16; ti++) { let view = (uc.solo < 0 && uc.on[ti] && !uc.hide[ti]) || uc.solo == ti; if (!view) continue; let track = globals.song.tracks[ti]; playCursor[ti] = svg.append("line") .attr("stroke-width", 4) .style("stroke", color(ti, .4)); for (let fase of [0, 1]) { let data = []; let start = !isLoop || fase == 0 ? 0 : track.left; let end = !isLoop || fase == 0 ? track.tlen : track.right; let swidth = fase == 0 ? .35 : (isLoop ? 2 : 1); for (let t = start; t < end; t++) data.push({ tick: t, pitch: track.pitchArray[t], track: ti }); let line = d3.line() .x(x => scaleX(x.tick)) .y(x => scaleY(x.pitch)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", color(ti, .3)) .attr("stroke-width", swidth) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); } let start = !isLoop ? 0 : track.left; let end = !isLoop ? track.tlen : track.right; for (let ev of track.events) { if (ev.tick < start || ev.tick >= end) continue; let note = svg.append("circle") .classed('svg_note', true) .attr('track', "" + ti) .attr("cx", scaleX(ev.tick)) .attr("stroke", color(ti, .2)) .attr("cy", scaleY(scalemap(ev.note) - .5)) .attr("r", 3) .style("fill", color(ti, .7)); playingNotes.push({ track: ti, el: note, start: ev.tick, end: ev.tick + ev.tlen, on: false }); } } function updateCursor() { //return; let isLoop = ucManager.data.loop.flag; try { if (!isLoop) { let pos = trackCursorPosition.cur(0, true); if (pos == null) return; let x = scaleX(pos); masterCursor.attr('x1', x).attr('x2', x); } for (let ti = 0; ti < song.tracks.length; ti++) { let track = song.tracks[ti]; let pos = trackCursorPosition.cur(ti, true); if (pos == null) continue; if (typeof (pos) != 'number') continue; let cursor = playCursor[ti]; if (cursor) { let x, y; try { x = scaleX(pos); y = scaleY(track.pitchArray[pos] ); if (typeof (y) != 'number') { //console.log({y,pos}); continue; } cursor.attr('x1', x); cursor.attr('x2', x); cursor.attr('y1', y - 5); cursor.attr('y2', y + 5); } catch (e) { console.log({ y, pos, ti, e }) } } let inRange = playingNotes.filter(a => a.track == ti).filter(a => a.start <= pos && a.end >= pos); let outRange = playingNotes.filter(a => a.track == ti).filter(a => a.start > pos || a.end < pos); inRange.filter(a => !a.on).map(note => { note.el.attr("r", 6).attr("stroke-width", 2); note.on = true; }); outRange.filter(a => a.on).map(note => { note.el.attr("r", 3).attr("stroke-width", .65); note.on = false; }); } } catch (e) { console.log(e); } } globals.updateCursor = updateCursor; var node = svg.node(); $(node).addClass('MNRGRAPH').css({ border: '1px solid #c0c0c0', width: '100%' }); // $(node).on('mouseover', 'circle.svg_note', function () { // let tr = $(this).attr('track') - 0;; // let last = ucManager.data.showDyn; // if (last != tr) // ucManager.set({ showDyn: tr }); // }); $(node).on('mouseleave', 'circle.svg_note', function () { }); node.updateCursor = updateCursor; let bottomDiv = $(`

latency compensation

`); await showDynGraph(song, svg, dynheight, true); return node; }