prog

e2e.js

@@ -1,4 +1,4 @@
-import {mkcanvas, chart} from "./chart/chart.js";
+import { mkcanvas, chart } from "./chart/chart.js";
 import { mkdiv } from "https://unpkg.com/[email protected]/mkdiv.js";
 import { mkpath } from "./src/mkpath.js";
 import SF2Service from "./sf2-service/index.js";
@@ -22,6 +22,7 @@ let program,
 
 renderMain().then(() => {
   if (document.hash != "") rendProgram();
+  rendProgram();
 });
 
 window.addEventListener("hashchange", rendProgram);
@@ -32,7 +33,7 @@ async function renderMain() {
 
   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",
@@ -54,16 +55,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",
     {
@@ -72,14 +73,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);
 }
 
@@ -98,16 +99,18 @@ async function rendProgram() {
 
   const kRangeList = program.zMap.map(
     (z) =>
-      `<option value=${z.ref} ${z.ref + "" == zone?.ref ? "selected" : ""}>${z.Unused1 + "|" + z.Unused2
-      } ${"key " +
+      `<option value=${z.ref} ${z.ref + "" == zone?.ref ? "selected" : ""}>${
+        z.Unused1 + "|" + z.Unused2
+      } ${
+        "key " +
         [z.KeyRange.lo, z.KeyRange.hi].join("-") +
         " vel " +
         [z.VelRange.lo, z.VelRange.hi].join("-")
       }</option>`
   );
   const articleHeader = mkdiv(
     "div",
-    {class: "note-header"},
+    { class: "note-header" },
 
     mkdiv(
       "select",
@@ -120,7 +123,7 @@ async function rendProgram() {
       kRangeList
     )
   );
-  articleMain = mkdiv("div", {class: "note-preview"}, [
+  articleMain = mkdiv("div", { class: "note-preview" }, [
     mkdiv(
       "div",
       {
@@ -130,13 +133,13 @@ async function rendProgram() {
       []
     ),
   ]);
-  const mainRight = mkdiv("div", {class: "note"}, [
-    mkdiv("div", {class: "note-title"}, [sf2file.programNames[hashId]]),
+  const mainRight = mkdiv("div", { class: "note" }, [
+    mkdiv("div", { class: "note-title" }, [sf2file.programNames[hashId]]),
     articleHeader,
   ]);
   rightPanel.replaceChildren(mainRight, articleMain);
 
-  canvas = mkcanvas({container: articleHeader});
+  canvas = mkcanvas({ container: articleHeader });
   await spinner.shipProgram(program);
   if (zone) renderZ(zone);
 }
@@ -183,15 +186,15 @@ 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,
       max: 5000,
       step: 10,
     };
 }
-function renderLPFView(zone) { }
+function renderLPFView(zone) {}
 function renderArticle(keyword, zone) {
   let canvas;
   const zoneObj = newSFZone(zone);
@@ -218,9 +221,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;
@@ -232,7 +235,7 @@ async function startSpinner() {
   await audioPath.startAudio();
   spinner = audioPath.spinner;
 
-  spinner.port.onmessage = ({data}) => {
+  spinner.port.onmessage = ({ data }) => {
     if (data.currentFrame) {
       volMeters.innerHTML = data.currentFrame;
     }
@@ -248,11 +251,11 @@ async function rendSample(e, zoneObj) {
   if (ctx.state !== "running") await ctx.resume();
   if (!zoneObj) return;
   if (!spinner) startSpinner();
-  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();
   }
@@ -271,7 +274,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) => {