s

yishengjiang99 · Nov 24, 2023 · ca31fcd · ca31fcd
1 parent 05247bd
commit ca31fcd
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 135 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <script>
     if (navigator.userAgent.indexOf("Chrome") < 0) {
@@ -20,41 +21,43 @@
 </head>
 
 <body class="sans-serif space-between" style="height:auto !important">
+  <div id="ch_ctrl_bar" style="position:absolute;right:0;top:20px;z-index: 10111110;"></div> 
   <header>
     <i class="fa-regular fa-user"></i>
     <select id="sf2select" aria-placeholder="dafds">
       <option>Select SF2 File</option>
-    </select> <span id="midilist"></span>
-    <div id="ch_ctrl_bar"></div>
-    
-    <span id="ctrls"> </span>
+    </select> 
+    <span id="midilist"></span>
+ <span id="ctrls"> </span>
+
     <input type="file" tabindex="0" value="send file" id="file-btn" accept=".mid" />
-    </header>
+  </header>
 
-        <div id="channelContainer"></div>
-     
-        <div id="analyze"></div>
-        <div id="debug"></div>
-  <footer class="sticky">
+  <div id="channelContainer"></div>
+
+  <div id="analyze"></div>
+  <div id="debug"></div>
+  <footer class="">
     <div id="stdout"></div>
     <span id="sequenceroot"></span>
     <datalist id="programs"></datalist>
     <datalist id="drums"></datalist>
-<div><a href="https://github.com/yishengjiang99/sf2rend">https://github.com/yishengjiang99/sf2rend</a></div>
+    <div><a href="https://github.com/yishengjiang99/sf2rend">https://github.com/yishengjiang99/sf2rend</a></div>
     <div id="eq"></div>
 
-    </footer>
-    <script type="module" src="./src/index.js"></script>
-    <template> <svg width="2200" height="1600">
-        <defs>
-          <pattern id="tenthGrid" width="100" height="110" patternUnits="userSpaceOnUse">
-            <rect width="10" height="20" stroke='gold' fill="yellow" />
-          </pattern>
-          <pattern id="grid" width="500" height="1001" patternUnits="userSpaceOnUse">
-            <rect width="500" height="100" stroke="gold" fill="url(#tenthGrid)" />
-          </pattern>
-        </defs>
-        <rect width="100%" height="100%" fill="url(#grid)" />
-      </svg></template>
-    </body>
-</html>
+  </footer>
+  <script type="module" src="./src/index.js"></script>
+  <template> <svg width="2200" height="1600">
+      <defs>
+        <pattern id="tenthGrid" width="100" height="110" patternUnits="userSpaceOnUse">
+          <rect width="10" height="20" stroke='gold' fill="yellow" />
+        </pattern>
+        <pattern id="grid" width="500" height="1001" patternUnits="userSpaceOnUse">
+          <rect width="500" height="100" stroke="gold" fill="url(#tenthGrid)" />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#grid)" />
+    </svg></template>
+</body>
+
+</html>
diff --git a/src/eqslide.js b/src/eqslide.js
@@ -81,9 +81,7 @@ export function mkknob(params) {
 }
 export function mk_eq_bar(ch, onInput) {
   const post_val = (cc_num, val) =>
-    port.postMessage(
-      new Uint8Array([midi_ch_cmds.continuous_change, ch, cc_num, val])
-    );
+    port.postMessage([midi_ch_cmds.continuous_change, ch, cc_num, val]);
   return mkdiv("fieldset", { class: "knob-set" }, [
     mkdiv("legend", "EQ"),
     ...[31.25, 62.5, 125, 250, 500, 1000, 2000, 4000, 8000, 16000].map((f) =>
@@ -104,9 +102,7 @@ export function mk_vca_ctrl(ch, port) {
   const zdx = ["VolEnvAttack", "VolEnvDecay", "VolEnvSustain", "VolEnvRelease"];
   const defaults = [9, 33, 66, 88];
   const post_val = (cc_num, val) =>
-    port.postMessage(
-      new Uint8Array([midi_ch_cmds.continuous_change, ch, cc_num, val])
-    );
+    port.postMessage([midi_ch_cmds.continuous_change, ch, cc_num, val]);
   for (let i = VCA_ATTACK_TIME; i <= VCA_RELEASE_TIME; i++) {
     divbox.push(
       mkknob({
@@ -131,9 +127,7 @@ export function mk_vcf_ctrl(ch, port) {
   const defaults = [9, 33, 66, 88, 0, 0];
 
   const post_val = (cc_num, val) =>
-    port.postMessage(
-      new Uint8Array([midi_ch_cmds.continuous_change, ch, cc_num, val])
-    );
+    port.postMessage([midi_ch_cmds.continuous_change, ch, cc_num, val]);
   const divbox = [mkdiv("legend", legendtitle)];
   for (let i = from; i <= to; i++) {
     divbox.push(

diff --git a/src/logdiv.js b/src/logdiv.js
@@ -1,4 +1,4 @@
-import {mkdiv} from "../mkdiv/mkdiv.js";
+import { mkdiv } from "../mkdiv/mkdiv.js";
 const defaultsConfig = {
   rows: 120,
   size: 70,
@@ -9,7 +9,9 @@ const defaultsConfig = {
 export function mktabs({ container, group }) {
   if (!container) container = mkdiv("div");
   const tb = mkdiv("div", { class: "tabs" });
+  const tabBody = mkdiv("div", { class: "tab-body" });
   tb.attachTo(container);
+  tabBody.attachTo(container);
   return {
     tabs: tb,
     push_ch: (id, title, ch) => {
@@ -26,81 +28,83 @@ export function mktabs({ container, group }) {
         },
         title
       ).attachTo(tb);
-      ch.attachTo(tb);
+      ch.attachTo(tabBody);
     },
   };
 }
 export function logdiv(config = {}) {
-    const {rows, size, className, container, timestamp} = Object.assign(config, defaultsConfig);
-    const infoPanel = mkdiv("pre", {
-      id: "infop",
-      style: "width:80em;",
-      rows,
-      className,
-    });
-    if (container)
-        infoPanel.attachTo(container);
-    let lp = performance.now();
-    const logs = [];
-    new MutationObserver(() => {
-        requestIdleCallback(() => infoPanel.scrollTo({
-            top: infoPanel.scrollHeight,
-        }));
-    }).observe(infoPanel, {
-        childList: true
-    });
-    function stdout(...logp) {
-        const log = logp.join("\t");
-        const ts = timestamp ? ((performance.now()) / 1e3).toFixed(3) + ": " : "";
-        lp = performance.now();
-        let offset = 0;
-        logs.push(lp + ":");
-        while (offset < log.length) {
-            logs.push(log.substring(offset, 80) + "\n");
-            offset += 80;
-        }
-        infoPanel.textContent += "\n" + ts + log.toString();
+  const { rows, size, className, container, timestamp } = Object.assign(
+    config,
+    defaultsConfig
+  );
+  const infoPanel = mkdiv("pre", {
+    id: "infop",
+    style: "width:80em;",
+    rows,
+    className,
+  });
+  if (container) infoPanel.attachTo(container);
+  let lp = performance.now();
+  const logs = [];
+  new MutationObserver(() => {
+    requestIdleCallback(() =>
+      infoPanel.scrollTo({
+        top: infoPanel.scrollHeight,
+      })
+    );
+  }).observe(infoPanel, {
+    childList: true,
+  });
+  function stdout(...logp) {
+    const log = logp.join("\t");
+    const ts = timestamp ? (performance.now() / 1e3).toFixed(3) + ": " : "";
+    lp = performance.now();
+    let offset = 0;
+    logs.push(lp + ":");
+    while (offset < log.length) {
+      logs.push(log.substring(offset, 80) + "\n");
+      offset += 80;
     }
-    return {
-        stdout,
-        infoPanel,
-    };
+    infoPanel.textContent += "\n" + ts + log.toString();
+  }
+  return {
+    stdout,
+    infoPanel,
+  };
 }
-export function mkcollapse({title, id, defaultOpen}, children) {
-    if (!id)
-        id = (Math.random() * 10000).toFixed(0);
-    const checked = `${defaultOpen ? "checked" : ""}`;
-    const wrap = mkdiv("div", {
-        class: "wrap-collapsible",
-    });
-    wrap.innerHTML =
-        `<input id=${id} class="toggle" type="checkbox"  ${checked} />` +
-        `<label for=${id} class="lbl-toggle">${title} [x]</label>` +
-            `<div class="collapsible-content">
+export function mkcollapse({ title, id, defaultOpen }, children) {
+  if (!id) id = (Math.random() * 10000).toFixed(0);
+  const checked = `${defaultOpen ? "checked" : ""}`;
+  const wrap = mkdiv("div", {
+    class: "wrap-collapsible",
+  });
+  wrap.innerHTML =
+    `<input id=${id} class="toggle" type="checkbox"  ${checked} />` +
+    `<label for=${id} class="lbl-toggle">${title} [x]</label>` +
+    `<div class="collapsible-content">
 		<div class="content-inner">
 			<p>
 			</p>
 		</div>
 	</div > `;
-    const cd = wrap.querySelector(".collapsible-content");
-    const innerContent = wrap.querySelector(".content-inner");
-    if (!innerContent)
-        throw "typescript ";
-    innerContent.replaceChildren(children);
-    new MutationObserver((mutationList) => {
-        mutationList.forEach((mutation) => {
-            switch (mutation.type) {
-                case "attributes":
-                    switch (mutation.attributeName) {
-                        case "style":
-                            console.log(mutation);
-                            break;
-                    }
-                    break;
-            }
-        });
-    }).observe(cd, {
-        attributeFilter: ["style"]
+  const cd = wrap.querySelector(".collapsible-content");
+  const innerContent = wrap.querySelector(".content-inner");
+  if (!innerContent) throw "typescript ";
+  innerContent.replaceChildren(children);
+  new MutationObserver((mutationList) => {
+    mutationList.forEach((mutation) => {
+      switch (mutation.type) {
+        case "attributes":
+          switch (mutation.attributeName) {
+            case "style":
+              console.log(mutation);
+              break;
+          }
+          break;
+      }
     });
-    return wrap;
+  }).observe(cd, {
+    attributeFilter: ["style"],
+  });
+  return wrap;
 }
diff --git a/src/ui.js b/src/ui.js
@@ -1,21 +1,13 @@
-import {
-  mkdiv,
-  mkdiv2,
-
-} from "../mkdiv/mkdiv.js";
+import { mkdiv, mkdiv2 } from "../mkdiv/mkdiv.js";
 import {
   midi_ch_cmds,
   range,
   midi_effects as effects,
   DRUMSCHANNEL,
 } from "./constants.js";
 import { fa_switch_btn, grid_tbl } from "./btns.js";
-import {
-  attributeKeys,
-  defZone,
-  newSFZone,
-} from "../sf2-service/zoneProxy.js";
-import {baseOctave} from "./sequence/constants.js";
+import { attributeKeys, defZone, newSFZone } from "../sf2-service/zoneProxy.js";
+import { baseOctave } from "./sequence/constants.js";
 import { mkcanvas } from "../chart/chart.js";
 
 const rowheight = 40;
@@ -87,15 +79,17 @@ export function mkui(
           },
         }),
         this.zoneEdit,
-        mkdiv("input", {
-          min: 1,
-          max: 128,
-          value: 100,
-          step: 1,
-          id: "vol",
-          type: "range",
-          oninput: (e) => cb([0xb0 | idx, 7, e.target.value]),
-        }),
+        mkdiv("div", [
+          mkdiv("input", {
+            min: 1,
+            max: 128,
+            value: 100,
+            step: 1,
+            id: "vol",
+            type: "range",
+            oninput: (e) => cb([0xb0 | idx, 7, e.target.value]),
+          }),
+        ]),
       ]);
       const ampshow = mkdiv("div", {
         class: "amp-indicate",
@@ -231,26 +225,15 @@ export function mkui(
               });
             },
           },
-          mkdiv("ul", [
-            mkdiv("input", {
-              role: "button",
-              value: "save",
-              type: "submit",
-            }),
+          mkdiv("table", [
+            mkdiv("tr", [mkdiv("th", "name"), mkdiv("th", "value")]),
             ...Array.from(this._zone.arr).map((attr, index) =>
               mkdiv("tr", [
-                mkdiv(
-                  "td",
-                  {
-                    class: attr === defZone[index] ? "hidden" : "",
-                  },
-                  attributeKeys[index]
-                ),
+                mkdiv("td", attributeKeys[index]),
                 mkdiv("td", {}, [
                   mkdiv("input", {
                     value: attr,
                     name: index,
-                    class: attr === defZone[index] ? "hidden" : "",
                     placeholder: "a",
                     oninput: (a) => {
                       zmap[attributeKeys[index]] = a.target.value;