From 9f6def196e567c495b2385465a001533b747dff7 Mon Sep 17 00:00:00 2001 From: Yisheng Jiang Date: Sat, 20 Jul 2024 23:22:49 -0700 Subject: [PATCH] s --- e2e.js | 90 ++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 49 insertions(+), 41 deletions(-) diff --git a/e2e.js b/e2e.js index 4092112..ad86543 100644 --- a/e2e.js +++ b/e2e.js @@ -1,13 +1,20 @@ -import { mkcanvas, chart } from "./chart/chart.js"; -import { mkdiv } from "https://unpkg.com/mkdiv@3.1.0/mkdiv.js"; -import { mkpath } from "./src/mkpath.js"; +import {mkcanvas, chart} from "./chart/chart.js"; +import {mkdiv} from "https://unpkg.com/mkdiv@3.1.0/mkdiv.js"; +import {mkpath} from "./src/mkpath.js"; import SF2Service from "./sf2-service/index.js"; -import { newSFZone } from "./sf2-service/zoneProxy.js"; +import {newSFZone, newSFZoneMap} from "./sf2-service/zoneProxy.js"; const sf2url = "static/GeneralUserGS.sf2"; const sf2file = new SF2Service(sf2url); -const loadWait = sf2file.load(); +let zoneListArr = {}; + +const loadWait = sf2file.load({ + onZone: (pid, zoneRef, zoneArr) => { + zoneListArr[pid] ||= []; + zoneListArr[pid].push(newSFZoneMap(zoneRef, zoneArr)); + } +}); let program, spinner, @@ -23,21 +30,24 @@ let program, renderMain().then(() => { if (document.hash != "") { const hashId = document.location.hash.substring(1).split("|"); - rendProgram(...hashId); } else { rendProgram(0, 0); } }); -window.addEventListener("hashchange", rendProgram); +window.addEventListener("hashchange", (e) => { + const hashId = document.location.hash.substring(1).split("|"); + + rendProgram(...hashId); +}); async function renderMain() { await loadWait; document.body.innerHTML = ""; mkdiv("nav", [ - (volMeters = mkdiv("div", { id: "volmeter", style: "min-height:2em" })), + (volMeters = mkdiv("div", {id: "volmeter", style: "min-height:2em"})), mkdiv("div", [ mkdiv( "button", @@ -59,16 +69,16 @@ async function renderMain() { ]).attachTo(document.body); const progList = mkdiv( "ul", - { class: "notes-list" }, + {class: "notes-list"}, sf2file.programNames.map((n, presetId) => mkdiv( "div", - { class: "menu-link" }, - mkdiv("a", { href: `#${presetId}` }, n) + {class: "menu-link"}, + mkdiv("a", {href: `#${presetId}`}, n) ) ) ); - rightPanel = mkdiv("div", { class: "col note-viewer" }, []); + rightPanel = mkdiv("div", {class: "col note-viewer"}, []); const leftNav = mkdiv( "section", { @@ -77,14 +87,14 @@ async function renderMain() { [ mkdiv( "section", - { class: "sidebar-header" }, + {class: "sidebar-header"}, sf2file.url.split("/").pop() ), mkdiv("nav", {}, progList), ] ); - const vrPanel = mkdiv("div", { class: "col" }); - main = mkdiv("div", { class: "main" }, [leftNav, rightPanel, vrPanel]); + const vrPanel = mkdiv("div", {class: "col"}); + main = mkdiv("div", {class: "main"}, [leftNav, rightPanel, vrPanel]); document.body.append(main); } @@ -100,31 +110,29 @@ async function rendProgram(pid, zoneRef) { const kRangeList = program.zMap.map( (z) => - `` ); const articleHeader = mkdiv( "div", - { class: "note-header" }, + {class: "note-header"}, - mkdiv( + [mkdiv( "select", { oninput: (e) => { - renderZ(program.zMap.filter((z) => z.ref == e.target.value)[0]); - // window.location.hash = "#" + pid + "|" + e.target.value; + // renderZ(program.zMap.filter((z) => z.ref == e.target.value)[0]); + document.location.hash = "#" + pid + "|" + e.target.value; }, }, kRangeList - ) + ), mkdiv("details", ["debug", ...zoneListArr[pid].map(list => JSON.stringify(Object.entries(list).filter(([k, v]) => k !== "arr" && v != 0 && v != -12000)))])] ); - articleMain = mkdiv("div", { class: "note-preview" }, [ + articleMain = mkdiv("div", {class: "note-preview"}, [ mkdiv( "div", { @@ -134,13 +142,13 @@ async function rendProgram(pid, zoneRef) { [] ), ]); - const mainRight = mkdiv("div", { class: "note" }, [ - mkdiv("div", { class: "note-title" }, [sf2file.programNames[pid]]), + const mainRight = mkdiv("div", {class: "note"}, [ + mkdiv("div", {class: "note-title"}, [sf2file.programNames[pid]]), articleHeader, ]); rightPanel.replaceChildren(mainRight, articleMain); - canvas = mkcanvas({ container: articleHeader }); + canvas = mkcanvas({container: articleHeader}); if (zone) renderZ(zone); } async function renderZ(zoneSelect) { @@ -186,7 +194,7 @@ function renderSampleView(zoneSelect) { //drawEV(zone.arr.slice(33, 39), volEGCanvas); function min_max_vals(k) { if (k.includes("Sustain")) { - return { min: 0, max: 1000, step: 10 }; + return {min: 0, max: 1000, step: 10}; } else return { min: -12000, @@ -194,7 +202,7 @@ function min_max_vals(k) { step: 10, }; } -function renderLPFView(zone) {} +function renderLPFView(zone) { } function renderArticle(keyword, zone) { let canvas; const zoneObj = newSFZone(zone); @@ -221,9 +229,9 @@ function renderArticle(keyword, zone) { ) ); const details = mkdiv("div"); - const article = mkdiv("article", { class: "article" }, [attrVals, details]); + const article = mkdiv("article", {class: "article"}, [attrVals, details]); if (keyword === "VolEnv") { - canvas = mkcanvas({ container: details, title: "amp eg" }); + canvas = mkcanvas({container: details, title: "amp eg"}); drawEV(zoneObj, canvas); } return article; @@ -240,7 +248,7 @@ async function startSpinner() { audioPath.loadProgram(program); } - spinner.port.onmessage = ({ data }) => { + spinner.port.onmessage = ({data}) => { if (data.currentFrame) { volMeters.innerHTML = data.currentFrame; } @@ -258,11 +266,11 @@ async function rendSample(e, zoneObj) { if (!zoneObj) return; // if (program) await spinner.shipProgram(program); - const { arr, ref } = zoneObj; + const {arr, ref} = zoneObj; if (zoneObj.isDirty) { spinner.port.postMessage({ cmd: "newZone", - zone: { arr, ref }, + zone: {arr, ref}, }); zoneObj.lastSync = new Date(); } @@ -275,7 +283,7 @@ async function rendSample(e, zoneObj) { spinner.port.postMessage([0x80, 0, 123]); e.target.innerText = "play"; }, - { once: true } + {once: true} ); } const drawEV = async (zone, target) => { @@ -283,8 +291,8 @@ const drawEV = async (zone, target) => { console.log(delay, att, hold, decay, sustain, release); const tc2time = (t) => Math.pow(2, t / 1200); const ctx = new OfflineAudioContext(1, 33, 3000); - const o = ctx.createOscillator({ frequency: 1 }); - const amp = new GainNode(ctx, { gain: 0 }); + const o = ctx.createOscillator({frequency: 1}); + const amp = new GainNode(ctx, {gain: 0}); amp.gain.setValueAtTime(0, 0); amp.gain.linearRampToValueAtTime(1, tc2time(att)); amp.gain.linearRampToValueAtTime(1 - sustain / 1000, tc2time(decay));