From ca31fcd3743114bb9ff5a01ec16a7b1f6af2c017 Mon Sep 17 00:00:00 2001 From: Yisheng Jiang Date: Fri, 24 Nov 2023 02:17:02 -0800 Subject: [PATCH] s --- index.html | 55 ++++++++++---------- src/eqslide.js | 12 ++--- src/logdiv.js | 136 +++++++++++++++++++++++++------------------------ src/ui.js | 51 +++++++------------ 4 files changed, 119 insertions(+), 135 deletions(-) diff --git a/index.html b/index.html index 517723c3..e5438df1 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + - - - + + + + + + \ No newline at end of file diff --git a/src/eqslide.js b/src/eqslide.js index ee791298..032a3ca4 100644 --- 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 index 2004794d..53022f70 100644 --- 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 = - `` + - `` + - `
+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 = + `` + + `` + + `

`; - 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 index 8dead856..7e229188 100644 --- a/src/ui.js +++ b/src/ui.js @@ -1,8 +1,4 @@ -import { - mkdiv, - mkdiv2, - -} from "../mkdiv/mkdiv.js"; +import { mkdiv, mkdiv2 } from "../mkdiv/mkdiv.js"; import { midi_ch_cmds, range, @@ -10,12 +6,8 @@ import { 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;