From e8f505f25c2eed3b545444c34b4d308bc31c6f18 Mon Sep 17 00:00:00 2001 From: Kristin Galvin Date: Wed, 19 Oct 2022 10:47:15 -0700 Subject: [PATCH 1/4] add webcomponents and webaudio-controls components --- .storybook/main.js | 2 +- package.json | 3 - src/Knob.tsx | 24 + src/Knob.types.ts | 5 + src/index.tsx | 1 + src/stories/Knob.stories.tsx | 38 + .../WebAudioControlsSlider.stories.tsx | 32 - .../{ => images}/img/LittlePhatty_sample.png | Bin src/webaudio-controls/{ => images}/img/bg.png | Bin .../{ => images}/img/defknob2.png | Bin .../{ => images}/img/demo.png | Bin .../{ => images}/img/hsliderbody.png | Bin .../{ => images}/img/hsliderknob.png | Bin .../{ => images}/img/hsw5.png | Bin .../{ => images}/img/midilearn.png | Bin .../{ => images}/img/sample3.png | Bin .../{ => images}/img/switch_toggle.png | Bin .../{ => images}/img/testknob.png | Bin .../{ => images}/img/vsliderbody.png | Bin .../{ => images}/img/vsliderknob.png | Bin .../{ => images}/knobs/Aqua.knob | Bin .../{ => images}/knobs/Aqua.png | Bin .../{ => images}/knobs/Carbon.knob | Bin .../{ => images}/knobs/Carbon.png | Bin .../{ => images}/knobs/Chromed.png | Bin .../{ => images}/knobs/JP8000.knob | Bin .../{ => images}/knobs/JP8000.png | Bin .../{ => images}/knobs/Jambalaya.knob | Bin .../{ => images}/knobs/Jambalaya.png | Bin .../{ => images}/knobs/LittlePhatty.knob | Bin .../{ => images}/knobs/LittlePhatty.png | Bin .../{ => images}/knobs/MiniMoog_Main.knob | Bin .../{ => images}/knobs/MiniMoog_Main.png | Bin .../{ => images}/knobs/SimpleFlat3.knob | Bin .../{ => images}/knobs/SimpleFlat3.png | Bin .../{ => images}/knobs/Vintage_Knob.knob | Bin .../{ => images}/knobs/Vintage_Knob.png | Bin .../{ => images}/knobs/Vintage_VUMeter.knob | Bin .../{ => images}/knobs/Vintage_VUMeter.png | Bin .../{ => images}/knobs/Vintage_VUMeter_2.knob | Bin .../{ => images}/knobs/Vintage_VUMeter_2.png | Bin .../knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png | Bin .../{ => images}/knobs/controls.skin | Bin .../{ => images}/knobs/hsliderbody.png | Bin .../{ => images}/knobs/hsliderknob.png | Bin .../{ => images}/knobs/hsw5.png | Bin .../{ => images}/knobs/knob_metal_mesh.png | Bin .../{ => images}/knobs/lineshadow.knob | Bin .../{ => images}/knobs/lineshadow.png | Bin .../{ => images}/knobs/lineshadow2.knob | Bin .../{ => images}/knobs/lineshadow2.png | Bin .../{ => images}/knobs/m400.knob | Bin .../{ => images}/knobs/m400.png | Bin .../{ => images}/knobs/nice_lamp_knob.png | Bin .../{ => images}/knobs/parambg120x32.png | Bin .../{ => images}/knobs/plastic_knob.png | Bin .../{ => images}/knobs/redbutton128.png | Bin .../{ => images}/knobs/simplegray.knob | Bin .../{ => images}/knobs/simplegray.png | Bin .../{ => images}/knobs/switch_toggle.knob | Bin .../{ => images}/knobs/switch_toggle.png | Bin .../{ => images}/knobs/vernier.knob | Bin .../{ => images}/knobs/vernier.png | Bin .../{ => images}/knobs/vsliderbody.png | Bin .../{ => images}/knobs/vsliderknob.png | Bin .../{ => images}/knobs/yellow.png | Bin ...ntrols.js => webaudio-controls-modules.js} | 3744 ++++++++--------- yarn.lock | 967 ++--- 68 files changed, 2362 insertions(+), 2454 deletions(-) create mode 100644 src/Knob.tsx create mode 100644 src/Knob.types.ts create mode 100644 src/stories/Knob.stories.tsx delete mode 100644 src/stories/WebAudioControlsSlider.stories.tsx rename src/webaudio-controls/{ => images}/img/LittlePhatty_sample.png (100%) rename src/webaudio-controls/{ => images}/img/bg.png (100%) rename src/webaudio-controls/{ => images}/img/defknob2.png (100%) rename src/webaudio-controls/{ => images}/img/demo.png (100%) rename src/webaudio-controls/{ => images}/img/hsliderbody.png (100%) rename src/webaudio-controls/{ => images}/img/hsliderknob.png (100%) rename src/webaudio-controls/{ => images}/img/hsw5.png (100%) rename src/webaudio-controls/{ => images}/img/midilearn.png (100%) rename src/webaudio-controls/{ => images}/img/sample3.png (100%) rename src/webaudio-controls/{ => images}/img/switch_toggle.png (100%) rename src/webaudio-controls/{ => images}/img/testknob.png (100%) rename src/webaudio-controls/{ => images}/img/vsliderbody.png (100%) rename src/webaudio-controls/{ => images}/img/vsliderknob.png (100%) rename src/webaudio-controls/{ => images}/knobs/Aqua.knob (100%) rename src/webaudio-controls/{ => images}/knobs/Aqua.png (100%) rename src/webaudio-controls/{ => images}/knobs/Carbon.knob (100%) rename src/webaudio-controls/{ => images}/knobs/Carbon.png (100%) rename src/webaudio-controls/{ => images}/knobs/Chromed.png (100%) rename src/webaudio-controls/{ => images}/knobs/JP8000.knob (100%) rename src/webaudio-controls/{ => images}/knobs/JP8000.png (100%) rename src/webaudio-controls/{ => images}/knobs/Jambalaya.knob (100%) rename src/webaudio-controls/{ => images}/knobs/Jambalaya.png (100%) rename src/webaudio-controls/{ => images}/knobs/LittlePhatty.knob (100%) rename src/webaudio-controls/{ => images}/knobs/LittlePhatty.png (100%) rename src/webaudio-controls/{ => images}/knobs/MiniMoog_Main.knob (100%) rename src/webaudio-controls/{ => images}/knobs/MiniMoog_Main.png (100%) rename src/webaudio-controls/{ => images}/knobs/SimpleFlat3.knob (100%) rename src/webaudio-controls/{ => images}/knobs/SimpleFlat3.png (100%) rename src/webaudio-controls/{ => images}/knobs/Vintage_Knob.knob (100%) rename src/webaudio-controls/{ => images}/knobs/Vintage_Knob.png (100%) rename src/webaudio-controls/{ => images}/knobs/Vintage_VUMeter.knob (100%) rename src/webaudio-controls/{ => images}/knobs/Vintage_VUMeter.png (100%) rename src/webaudio-controls/{ => images}/knobs/Vintage_VUMeter_2.knob (100%) rename src/webaudio-controls/{ => images}/knobs/Vintage_VUMeter_2.png (100%) rename src/webaudio-controls/{ => images}/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png (100%) rename src/webaudio-controls/{ => images}/knobs/controls.skin (100%) rename src/webaudio-controls/{ => images}/knobs/hsliderbody.png (100%) rename src/webaudio-controls/{ => images}/knobs/hsliderknob.png (100%) rename src/webaudio-controls/{ => images}/knobs/hsw5.png (100%) rename src/webaudio-controls/{ => images}/knobs/knob_metal_mesh.png (100%) rename src/webaudio-controls/{ => images}/knobs/lineshadow.knob (100%) rename src/webaudio-controls/{ => images}/knobs/lineshadow.png (100%) rename src/webaudio-controls/{ => images}/knobs/lineshadow2.knob (100%) rename src/webaudio-controls/{ => images}/knobs/lineshadow2.png (100%) rename src/webaudio-controls/{ => images}/knobs/m400.knob (100%) rename src/webaudio-controls/{ => images}/knobs/m400.png (100%) rename src/webaudio-controls/{ => images}/knobs/nice_lamp_knob.png (100%) rename src/webaudio-controls/{ => images}/knobs/parambg120x32.png (100%) rename src/webaudio-controls/{ => images}/knobs/plastic_knob.png (100%) rename src/webaudio-controls/{ => images}/knobs/redbutton128.png (100%) rename src/webaudio-controls/{ => images}/knobs/simplegray.knob (100%) rename src/webaudio-controls/{ => images}/knobs/simplegray.png (100%) rename src/webaudio-controls/{ => images}/knobs/switch_toggle.knob (100%) rename src/webaudio-controls/{ => images}/knobs/switch_toggle.png (100%) rename src/webaudio-controls/{ => images}/knobs/vernier.knob (100%) rename src/webaudio-controls/{ => images}/knobs/vernier.png (100%) rename src/webaudio-controls/{ => images}/knobs/vsliderbody.png (100%) rename src/webaudio-controls/{ => images}/knobs/vsliderknob.png (100%) rename src/webaudio-controls/{ => images}/knobs/yellow.png (100%) rename src/webaudio-controls/{webaudio-controls.js => webaudio-controls-modules.js} (64%) diff --git a/.storybook/main.js b/.storybook/main.js index 22c29eb..923d81f 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -10,5 +10,5 @@ module.exports = { "@storybook/addon-storyshots", ], framework: "@storybook/react", - staticDirs: ["../src/stories/assets", "../src/webaudio-controls"], + staticDirs: ["../src/stories/assets", "../src/webaudio-controls/images"], }; diff --git a/package.json b/package.json index 5421eff..9e4ae11 100644 --- a/package.json +++ b/package.json @@ -44,9 +44,6 @@ "dependencies": { "@elemaudio/core": "^1.0.8", "@elemaudio/web-renderer": "^1.0.16", - "@storybook/web-components": "^6.5.12", - "lit-html": "^2.4.0", - "rc-slider": "^10.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-select": "^5.5.1", diff --git a/src/Knob.tsx b/src/Knob.tsx new file mode 100644 index 0000000..199413d --- /dev/null +++ b/src/Knob.tsx @@ -0,0 +1,24 @@ +import React, { FC, DOMAttributes } from "react"; +import { WebAudioKnob } from "./webaudio-controls/webaudio-controls-modules.js"; +console.log("WebAudioKnob", WebAudioKnob); +import "./webaudio-controls/webaudio-controls-modules.js"; +import { KnobProps } from "./Knob.types"; + +export type CustomEvents = { + [key in K]: (event: CustomEvent) => void; +}; +export type CustomElement = Partial< + T & DOMAttributes & { children: any } & CustomEvents<`on${K}`> +>; + +declare global { + namespace JSX { + interface IntrinsicElements { + ["webaudio-knob"]: CustomElement; + } + } +} + +export default function Knob(props: KnobProps) { + return ; +} diff --git a/src/Knob.types.ts b/src/Knob.types.ts new file mode 100644 index 0000000..d812226 --- /dev/null +++ b/src/Knob.types.ts @@ -0,0 +1,5 @@ +export interface KnobProps { + src?: string; + sprites?: number; + value?: number; +} diff --git a/src/index.tsx b/src/index.tsx index 5a3824b..1b6ef29 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ export * from "./Button"; +export * from "./Knob"; export * from "./Oscilloscope"; export * from "./PlayPauseAudio"; export * from "./PlayPauseButton"; diff --git a/src/stories/Knob.stories.tsx b/src/stories/Knob.stories.tsx new file mode 100644 index 0000000..f9ae20c --- /dev/null +++ b/src/stories/Knob.stories.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { ComponentMeta } from "@storybook/react"; +import Knob from "../Knob"; + +export default { + title: "ui/Knob", + component: Knob, +} as ComponentMeta; + +export const Default = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/stories/WebAudioControlsSlider.stories.tsx b/src/stories/WebAudioControlsSlider.stories.tsx deleted file mode 100644 index 37d133b..0000000 --- a/src/stories/WebAudioControlsSlider.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import "../webaudio-controls/webaudio-controls.js"; - -import { html } from "lit-html"; - -export default { - title: "Webaudio-Controls/Knob", -}; - -export const Gallery = () => html` - - - - - - - - - - - - - - - - - - - -`; diff --git a/src/webaudio-controls/img/LittlePhatty_sample.png b/src/webaudio-controls/images/img/LittlePhatty_sample.png similarity index 100% rename from src/webaudio-controls/img/LittlePhatty_sample.png rename to src/webaudio-controls/images/img/LittlePhatty_sample.png diff --git a/src/webaudio-controls/img/bg.png b/src/webaudio-controls/images/img/bg.png similarity index 100% rename from src/webaudio-controls/img/bg.png rename to src/webaudio-controls/images/img/bg.png diff --git a/src/webaudio-controls/img/defknob2.png b/src/webaudio-controls/images/img/defknob2.png similarity index 100% rename from src/webaudio-controls/img/defknob2.png rename to src/webaudio-controls/images/img/defknob2.png diff --git a/src/webaudio-controls/img/demo.png b/src/webaudio-controls/images/img/demo.png similarity index 100% rename from src/webaudio-controls/img/demo.png rename to src/webaudio-controls/images/img/demo.png diff --git a/src/webaudio-controls/img/hsliderbody.png b/src/webaudio-controls/images/img/hsliderbody.png similarity index 100% rename from src/webaudio-controls/img/hsliderbody.png rename to src/webaudio-controls/images/img/hsliderbody.png diff --git a/src/webaudio-controls/img/hsliderknob.png b/src/webaudio-controls/images/img/hsliderknob.png similarity index 100% rename from src/webaudio-controls/img/hsliderknob.png rename to src/webaudio-controls/images/img/hsliderknob.png diff --git a/src/webaudio-controls/img/hsw5.png b/src/webaudio-controls/images/img/hsw5.png similarity index 100% rename from src/webaudio-controls/img/hsw5.png rename to src/webaudio-controls/images/img/hsw5.png diff --git a/src/webaudio-controls/img/midilearn.png b/src/webaudio-controls/images/img/midilearn.png similarity index 100% rename from src/webaudio-controls/img/midilearn.png rename to src/webaudio-controls/images/img/midilearn.png diff --git a/src/webaudio-controls/img/sample3.png b/src/webaudio-controls/images/img/sample3.png similarity index 100% rename from src/webaudio-controls/img/sample3.png rename to src/webaudio-controls/images/img/sample3.png diff --git a/src/webaudio-controls/img/switch_toggle.png b/src/webaudio-controls/images/img/switch_toggle.png similarity index 100% rename from src/webaudio-controls/img/switch_toggle.png rename to src/webaudio-controls/images/img/switch_toggle.png diff --git a/src/webaudio-controls/img/testknob.png b/src/webaudio-controls/images/img/testknob.png similarity index 100% rename from src/webaudio-controls/img/testknob.png rename to src/webaudio-controls/images/img/testknob.png diff --git a/src/webaudio-controls/img/vsliderbody.png b/src/webaudio-controls/images/img/vsliderbody.png similarity index 100% rename from src/webaudio-controls/img/vsliderbody.png rename to src/webaudio-controls/images/img/vsliderbody.png diff --git a/src/webaudio-controls/img/vsliderknob.png b/src/webaudio-controls/images/img/vsliderknob.png similarity index 100% rename from src/webaudio-controls/img/vsliderknob.png rename to src/webaudio-controls/images/img/vsliderknob.png diff --git a/src/webaudio-controls/knobs/Aqua.knob b/src/webaudio-controls/images/knobs/Aqua.knob similarity index 100% rename from src/webaudio-controls/knobs/Aqua.knob rename to src/webaudio-controls/images/knobs/Aqua.knob diff --git a/src/webaudio-controls/knobs/Aqua.png b/src/webaudio-controls/images/knobs/Aqua.png similarity index 100% rename from src/webaudio-controls/knobs/Aqua.png rename to src/webaudio-controls/images/knobs/Aqua.png diff --git a/src/webaudio-controls/knobs/Carbon.knob b/src/webaudio-controls/images/knobs/Carbon.knob similarity index 100% rename from src/webaudio-controls/knobs/Carbon.knob rename to src/webaudio-controls/images/knobs/Carbon.knob diff --git a/src/webaudio-controls/knobs/Carbon.png b/src/webaudio-controls/images/knobs/Carbon.png similarity index 100% rename from src/webaudio-controls/knobs/Carbon.png rename to src/webaudio-controls/images/knobs/Carbon.png diff --git a/src/webaudio-controls/knobs/Chromed.png b/src/webaudio-controls/images/knobs/Chromed.png similarity index 100% rename from src/webaudio-controls/knobs/Chromed.png rename to src/webaudio-controls/images/knobs/Chromed.png diff --git a/src/webaudio-controls/knobs/JP8000.knob b/src/webaudio-controls/images/knobs/JP8000.knob similarity index 100% rename from src/webaudio-controls/knobs/JP8000.knob rename to src/webaudio-controls/images/knobs/JP8000.knob diff --git a/src/webaudio-controls/knobs/JP8000.png b/src/webaudio-controls/images/knobs/JP8000.png similarity index 100% rename from src/webaudio-controls/knobs/JP8000.png rename to src/webaudio-controls/images/knobs/JP8000.png diff --git a/src/webaudio-controls/knobs/Jambalaya.knob b/src/webaudio-controls/images/knobs/Jambalaya.knob similarity index 100% rename from src/webaudio-controls/knobs/Jambalaya.knob rename to src/webaudio-controls/images/knobs/Jambalaya.knob diff --git a/src/webaudio-controls/knobs/Jambalaya.png b/src/webaudio-controls/images/knobs/Jambalaya.png similarity index 100% rename from src/webaudio-controls/knobs/Jambalaya.png rename to src/webaudio-controls/images/knobs/Jambalaya.png diff --git a/src/webaudio-controls/knobs/LittlePhatty.knob b/src/webaudio-controls/images/knobs/LittlePhatty.knob similarity index 100% rename from src/webaudio-controls/knobs/LittlePhatty.knob rename to src/webaudio-controls/images/knobs/LittlePhatty.knob diff --git a/src/webaudio-controls/knobs/LittlePhatty.png b/src/webaudio-controls/images/knobs/LittlePhatty.png similarity index 100% rename from src/webaudio-controls/knobs/LittlePhatty.png rename to src/webaudio-controls/images/knobs/LittlePhatty.png diff --git a/src/webaudio-controls/knobs/MiniMoog_Main.knob b/src/webaudio-controls/images/knobs/MiniMoog_Main.knob similarity index 100% rename from src/webaudio-controls/knobs/MiniMoog_Main.knob rename to src/webaudio-controls/images/knobs/MiniMoog_Main.knob diff --git a/src/webaudio-controls/knobs/MiniMoog_Main.png b/src/webaudio-controls/images/knobs/MiniMoog_Main.png similarity index 100% rename from src/webaudio-controls/knobs/MiniMoog_Main.png rename to src/webaudio-controls/images/knobs/MiniMoog_Main.png diff --git a/src/webaudio-controls/knobs/SimpleFlat3.knob b/src/webaudio-controls/images/knobs/SimpleFlat3.knob similarity index 100% rename from src/webaudio-controls/knobs/SimpleFlat3.knob rename to src/webaudio-controls/images/knobs/SimpleFlat3.knob diff --git a/src/webaudio-controls/knobs/SimpleFlat3.png b/src/webaudio-controls/images/knobs/SimpleFlat3.png similarity index 100% rename from src/webaudio-controls/knobs/SimpleFlat3.png rename to src/webaudio-controls/images/knobs/SimpleFlat3.png diff --git a/src/webaudio-controls/knobs/Vintage_Knob.knob b/src/webaudio-controls/images/knobs/Vintage_Knob.knob similarity index 100% rename from src/webaudio-controls/knobs/Vintage_Knob.knob rename to src/webaudio-controls/images/knobs/Vintage_Knob.knob diff --git a/src/webaudio-controls/knobs/Vintage_Knob.png b/src/webaudio-controls/images/knobs/Vintage_Knob.png similarity index 100% rename from src/webaudio-controls/knobs/Vintage_Knob.png rename to src/webaudio-controls/images/knobs/Vintage_Knob.png diff --git a/src/webaudio-controls/knobs/Vintage_VUMeter.knob b/src/webaudio-controls/images/knobs/Vintage_VUMeter.knob similarity index 100% rename from src/webaudio-controls/knobs/Vintage_VUMeter.knob rename to src/webaudio-controls/images/knobs/Vintage_VUMeter.knob diff --git a/src/webaudio-controls/knobs/Vintage_VUMeter.png b/src/webaudio-controls/images/knobs/Vintage_VUMeter.png similarity index 100% rename from src/webaudio-controls/knobs/Vintage_VUMeter.png rename to src/webaudio-controls/images/knobs/Vintage_VUMeter.png diff --git a/src/webaudio-controls/knobs/Vintage_VUMeter_2.knob b/src/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob similarity index 100% rename from src/webaudio-controls/knobs/Vintage_VUMeter_2.knob rename to src/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob diff --git a/src/webaudio-controls/knobs/Vintage_VUMeter_2.png b/src/webaudio-controls/images/knobs/Vintage_VUMeter_2.png similarity index 100% rename from src/webaudio-controls/knobs/Vintage_VUMeter_2.png rename to src/webaudio-controls/images/knobs/Vintage_VUMeter_2.png diff --git a/src/webaudio-controls/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png b/src/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png similarity index 100% rename from src/webaudio-controls/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png rename to src/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png diff --git a/src/webaudio-controls/knobs/controls.skin b/src/webaudio-controls/images/knobs/controls.skin similarity index 100% rename from src/webaudio-controls/knobs/controls.skin rename to src/webaudio-controls/images/knobs/controls.skin diff --git a/src/webaudio-controls/knobs/hsliderbody.png b/src/webaudio-controls/images/knobs/hsliderbody.png similarity index 100% rename from src/webaudio-controls/knobs/hsliderbody.png rename to src/webaudio-controls/images/knobs/hsliderbody.png diff --git a/src/webaudio-controls/knobs/hsliderknob.png b/src/webaudio-controls/images/knobs/hsliderknob.png similarity index 100% rename from src/webaudio-controls/knobs/hsliderknob.png rename to src/webaudio-controls/images/knobs/hsliderknob.png diff --git a/src/webaudio-controls/knobs/hsw5.png b/src/webaudio-controls/images/knobs/hsw5.png similarity index 100% rename from src/webaudio-controls/knobs/hsw5.png rename to src/webaudio-controls/images/knobs/hsw5.png diff --git a/src/webaudio-controls/knobs/knob_metal_mesh.png b/src/webaudio-controls/images/knobs/knob_metal_mesh.png similarity index 100% rename from src/webaudio-controls/knobs/knob_metal_mesh.png rename to src/webaudio-controls/images/knobs/knob_metal_mesh.png diff --git a/src/webaudio-controls/knobs/lineshadow.knob b/src/webaudio-controls/images/knobs/lineshadow.knob similarity index 100% rename from src/webaudio-controls/knobs/lineshadow.knob rename to src/webaudio-controls/images/knobs/lineshadow.knob diff --git a/src/webaudio-controls/knobs/lineshadow.png b/src/webaudio-controls/images/knobs/lineshadow.png similarity index 100% rename from src/webaudio-controls/knobs/lineshadow.png rename to src/webaudio-controls/images/knobs/lineshadow.png diff --git a/src/webaudio-controls/knobs/lineshadow2.knob b/src/webaudio-controls/images/knobs/lineshadow2.knob similarity index 100% rename from src/webaudio-controls/knobs/lineshadow2.knob rename to src/webaudio-controls/images/knobs/lineshadow2.knob diff --git a/src/webaudio-controls/knobs/lineshadow2.png b/src/webaudio-controls/images/knobs/lineshadow2.png similarity index 100% rename from src/webaudio-controls/knobs/lineshadow2.png rename to src/webaudio-controls/images/knobs/lineshadow2.png diff --git a/src/webaudio-controls/knobs/m400.knob b/src/webaudio-controls/images/knobs/m400.knob similarity index 100% rename from src/webaudio-controls/knobs/m400.knob rename to src/webaudio-controls/images/knobs/m400.knob diff --git a/src/webaudio-controls/knobs/m400.png b/src/webaudio-controls/images/knobs/m400.png similarity index 100% rename from src/webaudio-controls/knobs/m400.png rename to src/webaudio-controls/images/knobs/m400.png diff --git a/src/webaudio-controls/knobs/nice_lamp_knob.png b/src/webaudio-controls/images/knobs/nice_lamp_knob.png similarity index 100% rename from src/webaudio-controls/knobs/nice_lamp_knob.png rename to src/webaudio-controls/images/knobs/nice_lamp_knob.png diff --git a/src/webaudio-controls/knobs/parambg120x32.png b/src/webaudio-controls/images/knobs/parambg120x32.png similarity index 100% rename from src/webaudio-controls/knobs/parambg120x32.png rename to src/webaudio-controls/images/knobs/parambg120x32.png diff --git a/src/webaudio-controls/knobs/plastic_knob.png b/src/webaudio-controls/images/knobs/plastic_knob.png similarity index 100% rename from src/webaudio-controls/knobs/plastic_knob.png rename to src/webaudio-controls/images/knobs/plastic_knob.png diff --git a/src/webaudio-controls/knobs/redbutton128.png b/src/webaudio-controls/images/knobs/redbutton128.png similarity index 100% rename from src/webaudio-controls/knobs/redbutton128.png rename to src/webaudio-controls/images/knobs/redbutton128.png diff --git a/src/webaudio-controls/knobs/simplegray.knob b/src/webaudio-controls/images/knobs/simplegray.knob similarity index 100% rename from src/webaudio-controls/knobs/simplegray.knob rename to src/webaudio-controls/images/knobs/simplegray.knob diff --git a/src/webaudio-controls/knobs/simplegray.png b/src/webaudio-controls/images/knobs/simplegray.png similarity index 100% rename from src/webaudio-controls/knobs/simplegray.png rename to src/webaudio-controls/images/knobs/simplegray.png diff --git a/src/webaudio-controls/knobs/switch_toggle.knob b/src/webaudio-controls/images/knobs/switch_toggle.knob similarity index 100% rename from src/webaudio-controls/knobs/switch_toggle.knob rename to src/webaudio-controls/images/knobs/switch_toggle.knob diff --git a/src/webaudio-controls/knobs/switch_toggle.png b/src/webaudio-controls/images/knobs/switch_toggle.png similarity index 100% rename from src/webaudio-controls/knobs/switch_toggle.png rename to src/webaudio-controls/images/knobs/switch_toggle.png diff --git a/src/webaudio-controls/knobs/vernier.knob b/src/webaudio-controls/images/knobs/vernier.knob similarity index 100% rename from src/webaudio-controls/knobs/vernier.knob rename to src/webaudio-controls/images/knobs/vernier.knob diff --git a/src/webaudio-controls/knobs/vernier.png b/src/webaudio-controls/images/knobs/vernier.png similarity index 100% rename from src/webaudio-controls/knobs/vernier.png rename to src/webaudio-controls/images/knobs/vernier.png diff --git a/src/webaudio-controls/knobs/vsliderbody.png b/src/webaudio-controls/images/knobs/vsliderbody.png similarity index 100% rename from src/webaudio-controls/knobs/vsliderbody.png rename to src/webaudio-controls/images/knobs/vsliderbody.png diff --git a/src/webaudio-controls/knobs/vsliderknob.png b/src/webaudio-controls/images/knobs/vsliderknob.png similarity index 100% rename from src/webaudio-controls/knobs/vsliderknob.png rename to src/webaudio-controls/images/knobs/vsliderknob.png diff --git a/src/webaudio-controls/knobs/yellow.png b/src/webaudio-controls/images/knobs/yellow.png similarity index 100% rename from src/webaudio-controls/knobs/yellow.png rename to src/webaudio-controls/images/knobs/yellow.png diff --git a/src/webaudio-controls/webaudio-controls.js b/src/webaudio-controls/webaudio-controls-modules.js similarity index 64% rename from src/webaudio-controls/webaudio-controls.js rename to src/webaudio-controls/webaudio-controls-modules.js index 045d4c0..7c547c2 100644 --- a/src/webaudio-controls/webaudio-controls.js +++ b/src/webaudio-controls/webaudio-controls-modules.js @@ -104,262 +104,17 @@ if (window.customElements) { }; if (window.WebAudioControlsOptions) Object.assign(opt, window.WebAudioControlsOptions); - class WebAudioControlsWidget extends HTMLElement { - constructor() { - super(); - this.addEventListener("keydown", this.keydown); - this.addEventListener("mousedown", this.pointerdown, { passive: false }); - this.addEventListener("touchstart", this.pointerdown, { passive: false }); - this.addEventListener("wheel", this.wheel, { passive: false }); - this.addEventListener("mouseover", this.pointerover); - this.addEventListener("mouseout", this.pointerout); - this.addEventListener("contextmenu", this.contextMenu); - this.hover = this.drag = 0; - document.body.appendChild(midimenu); - this.basestyle = ` -.webaudioctrl-tooltip{ - display:inline-block; - position:absolute; - margin:0 -1000px; - z-index: 999; - background:#eee; - color:#000; - border:1px solid #666; - border-radius:4px; - padding:5px 10px; - text-align:center; - left:0; top:0; - font-size:11px; - opacity:0; - visibility:hidden; -} -.webaudioctrl-tooltip:before{ - content: ""; - position: absolute; - top: 100%; - left: 50%; - margin-left: -8px; - border: 8px solid transparent; - border-top: 8px solid #666; -} -.webaudioctrl-tooltip:after{ - content: ""; - position: absolute; - top: 100%; - left: 50%; - margin-left: -6px; - border: 6px solid transparent; - border-top: 6px solid #eee; -} -`; - this.onblur = () => { - this.elem.style.outline = "none"; - }; - this.onfocus = () => { - switch (+this.outline) { - case null: - case 0: - this.elem.style.outline = "none"; - break; - case 1: - this.elem.style.outline = "1px solid #444"; - break; - default: - this.elem.style.outline = this.outline; - } - }; - } - sendEvent(ev) { - let event; - event = document.createEvent("HTMLEvents"); - event.initEvent(ev, false, true); - this.dispatchEvent(event); - } - getAttr(n, def) { - let v = this.getAttribute(n); - if (v == null) return def; - switch (typeof def) { - case "number": - if (v == "true") return 1; - v = +v; - if (isNaN(v)) return 0; - return v; - } - return v; - } - showtip(d) { - function valstr(x, c, type) { - switch (type) { - case "x": - return (x | 0).toString(16); - case "X": - return (x | 0).toString(16).toUpperCase(); - case "d": - return (x | 0).toString(); - case "f": - return parseFloat(x).toFixed(c); - case "s": - return x.toString(); - } - return ""; - } - function numformat(s, x) { - let i = s.indexOf("%"); - let j = i + 1; - if (i < 0) j = s.length; - let c = [0, 0], - type = 0, - m = 0, - r = ""; - if (s.indexOf("%s") >= 0) { - return s.replace("%s", x); - } - for (; j < s.length; ++j) { - if ("dfxXs".indexOf(s[j]) >= 0) { - type = s[j]; - break; - } - if (s[j] == ".") m = 1; - else c[m] = c[m] * 10 + parseInt(s[j]); - } - r = valstr(x, c[1], type); - if (c[0] > 0) r = (" " + r).slice(-c[0]); - r = s.replace(/%.*[xXdfs]/, r); - return r; - } - let s = this.tooltip; - if (this.drag || this.hover) { - if (this.valuetip) { - if (s == null) s = `%s`; - else if (s.indexOf("%") < 0) s += ` : %s`; - } - if (s) { - this.ttframe.innerHTML = numformat(s, this.convValue); - this.ttframe.style.display = "inline-block"; - this.ttframe.style.width = "auto"; - this.ttframe.style.height = "auto"; - this.ttframe.style.transition = - "opacity 0.5s " + d + "s,visibility 0.5s " + d + "s"; - this.ttframe.style.opacity = 0.9; - this.ttframe.style.visibility = "visible"; - let rc = this.getBoundingClientRect(), - rc2 = this.ttframe.getBoundingClientRect(), - rc3 = document.documentElement.getBoundingClientRect(); - this.ttframe.style.left = (rc.width - rc2.width) * 0.5 + 1000 + "px"; - this.ttframe.style.top = -rc2.height - 8 + "px"; - return; - } - } - this.ttframe.style.transition = - "opacity 0.1s " + d + "s,visibility 0.1s " + d + "s"; - this.ttframe.style.opacity = 0; - this.ttframe.style.visibility = "hidden"; - } - setupLabel() { - this.labelpos = this.getAttr("labelpos", "bottom 0px"); - const lpos = this.labelpos.split(" "); - let offs = ""; - if (lpos.length == 3) offs = `translate(${lpos[1]},${lpos[2]})`; - this.label.style.position = "absolute"; - switch (lpos[0]) { - case "center": - this.label.style.top = "50%"; - this.label.style.left = "50%"; - this.label.style.transform = `translate(-50%,-50%) ${offs}`; - break; - case "right": - this.label.style.top = "50%"; - this.label.style.left = "100%"; - this.label.style.transform = `translateY(-50%) ${offs}`; - break; - case "left": - this.label.style.top = "50%"; - this.label.style.left = "0%"; - this.label.style.transform = `translate(-100%,-50%) ${offs}`; - break; - case "bottom": - this.label.style.top = "100%"; - this.label.style.left = "50%"; - this.label.style.transform = `translateX(-50%) ${offs}`; - break; - case "top": - this.label.style.top = "0%"; - this.label.style.left = "50%"; - this.label.style.transform = `translate(-50%,-100%) ${offs}`; - break; - } - } - pointerover(e) { - this.hover = 1; - this.showtip(0.6); - } - pointerout(e) { - this.hover = 0; - this.showtip(0); - } - contextMenu(e) { - if (window.webAudioControlsWidgetManager && this.midilearn) - webAudioControlsWidgetManager.contextMenuOpen(e, this); - e.preventDefault(); - e.stopPropagation(); - } - setMidiController(channel, cc) { - if (this.listeningToThisMidiController(channel, cc)) return; - this.midiController = { channel: channel, cc: cc }; - console.log( - "Added mapping for channel=" + - channel + - " cc=" + - cc + - " tooltip=" + - this.tooltip - ); - } - listeningToThisMidiController(channel, cc) { - const c = this.midiController; - if ((c.channel === channel || c.channel < 0) && c.cc === cc) return true; - return false; - } - processMidiEvent(event) { - const channel = event.data[0] & 0xf; - const controlNumber = event.data[1]; - if (this.midiMode == "learn") { - this.setMidiController(channel, controlNumber); - webAudioControlsWidgetManager.contextMenuClose(); - this.midiMode = "normal"; - webAudioControlsWidgetManager.preserveMidiLearn(); - } - if (this.listeningToThisMidiController(channel, controlNumber)) { - if (this.tagName == "WEBAUDIO-SWITCH") { - switch (this.type) { - case "toggle": - if (event.data[2] >= 64) this.setValue(1 - this.value, true); - break; - case "kick": - this.setValue(event.data[2] >= 64 ? 1 : 0); - break; - case "radio": - let els = document.querySelectorAll( - "webaudio-switch[type='radio'][group='" + this.group + "']" - ); - for (let i = 0; i < els.length; ++i) { - if (els[i] == this) els[i].setValue(1); - else els[i].setValue(0); - } - break; - } - } else { - const val = this.min + ((this.max - this.min) * event.data[2]) / 127; - this.setValue(val, true); - } - } - } + + try { + customElements.define("webaudio-knob", WebAudioKnob); + } catch (error) { + console.log("webaudio-knob already defined"); } try { customElements.define( - "webaudio-knob", - class WebAudioKnob extends WebAudioControlsWidget { + "webaudio-slider", + class WebAudioSlider extends WebAudioControlsWidget { constructor() { super(); } @@ -371,13 +126,14 @@ if (window.customElements) { ${this.basestyle} :host{ display:inline-block; + position:relative; margin:0; padding:0; - cursor:pointer; font-family: sans-serif; font-size: 11px; + cursor:pointer; } -.webaudio-knob-body{ +.webaudio-slider-body{ display:inline-block; position:relative; margin:0; @@ -385,14 +141,22 @@ ${this.basestyle} vertical-align:bottom; white-space:pre; } +.webaudio-slider-knob{ + display:inline-block; + position:absolute; + margin:0; + padding:0; +} -
+
`; this.elem = root.childNodes[2]; - this.ttframe = this.elem.firstChild; + this.knob = this.elem.firstChild; + this.ttframe = this.knob.nextSibling; this.label = this.ttframe.nextSibling; this.enable = this.getAttr("enable", 1); - this._src = this.getAttr("src", opt.knobSrc); + this.tracking = this.getAttr("tracking", "rel"); + this._src = this.getAttr("src", opt.sliderSrc); Object.defineProperty(this, "src", { get: () => { return this._src; @@ -402,6 +166,16 @@ ${this.basestyle} this.setupImage(); }, }); + this._knobsrc = this.getAttr("knobsrc", opt.sliderKnobSrc); + Object.defineProperty(this, "knobsrc", { + get: () => { + return this._knobsrc; + }, + set: (v) => { + this._knobsrc = v; + this.setupImage(); + }, + }); this._value = this.getAttr("value", 0); Object.defineProperty(this, "value", { get: () => { @@ -419,7 +193,7 @@ ${this.basestyle} return this._min; }, set: (v) => { - this._min = +v; + this._min = v; this.redraw(); }, }); @@ -429,7 +203,7 @@ ${this.basestyle} return this._max; }, set: (v) => { - this._max = +v; + this._max = v; this.redraw(); }, }); @@ -439,11 +213,11 @@ ${this.basestyle} return this._step; }, set: (v) => { - this._step = +v; + this._step = v; this.redraw(); }, }); - this._sprites = this.getAttr("sprites", opt.knobSprites); + this._sprites = this.getAttr("sprites", 0); Object.defineProperty(this, "sprites", { get: () => { return this._sprites; @@ -453,7 +227,18 @@ ${this.basestyle} this.setupImage(); }, }); - this._width = this.getAttr("width", null); + this._direction = this.getAttr("direction", null); + Object.defineProperty(this, "direction", { + get: () => { + return this._direction; + }, + set: (v) => { + this._direction = v; + this.setupImage(); + }, + }); + this.log = this.getAttr("log", 0); + this._width = this.getAttr("width", opt.sliderWidth); Object.defineProperty(this, "width", { get: () => { return this._width; @@ -463,7 +248,7 @@ ${this.basestyle} this.setupImage(); }, }); - this._height = this.getAttr("height", null); + this._height = this.getAttr("height", opt.sliderHeight); Object.defineProperty(this, "height", { get: () => { return this._height; @@ -473,17 +258,40 @@ ${this.basestyle} this.setupImage(); }, }); - this._diameter = this.getAttr("diameter", null); - Object.defineProperty(this, "diameter", { + this._knobwidth = this.getAttr("knobwidth", opt.sliderKnobWidth); + Object.defineProperty(this, "knobwidth", { + get: () => { + return this._knobwidth; + }, + set: (v) => { + this._knobwidth = v; + this.setupImage(); + }, + }); + this._knobheight = this.getAttr("knobheight", opt.sliderKnobHeight); + Object.defineProperty(this, "knobheight", { + get: () => { + return this._knobheight; + }, + set: (v) => { + this._knobheight = v; + this.setupImage(); + }, + }); + this._ditchlength = this.getAttr( + "ditchlength", + opt.sliderDitchlength + ); + Object.defineProperty(this, "ditchlength", { get: () => { - return this._diameter; + return this._ditchlength; }, set: (v) => { - this._diameter = v; + this._ditchlength = v; this.setupImage(); }, }); - this._colors = this.getAttr("colors", opt.knobColors); + this._colors = this.getAttr("colors", opt.sliderColors); Object.defineProperty(this, "colors", { get: () => { return this._colors; @@ -495,7 +303,6 @@ ${this.basestyle} }); this.outline = this.getAttr("outline", opt.outline); this.setupLabel(); - this.log = this.getAttr("log", 0); this.sensitivity = this.getAttr("sensitivity", 1); this.valuetip = this.getAttr("valuetip", opt.valuetip); this.tooltip = this.getAttr("tooltip", null); @@ -538,123 +345,179 @@ ${this.basestyle} if (this.step && this.step < 1) { for (let n = this.step; n < 1; n *= 10) ++this.digits; } - this._setValue(this._value); - this.coltab = ["#e00", "#000", "#000"]; + this.fireflag = true; if (window.webAudioControlsWidgetManager) + // window.webAudioControlsWidgetManager.updateWidgets(); window.webAudioControlsWidgetManager.addWidget(this); + this.elem.onclick = (e) => { + e.stopPropagation(); + }; } disconnectedCallback() {} setupImage() { - this.kw = - this._width || this._diameter || opt.knobWidth || opt.knobDiameter; - this.kh = - this._height || - this._diameter || - opt.knobHeight || - opt.knobDiameter; - if (!this.src) { - if (this.colors) this.coltab = this.colors.split(";"); - if (!this.coltab) this.coltab = ["#e00", "#000", "#000"]; - let svg = ` + this.coltab = this.colors.split(";"); + this.bodyimg = new Image(); + this.knobimg = new Image(); + this.srcurl = null; + if (this.src == null || this.src == "") { + this.sw = +this._width; + this.sh = +this.height; + if (this._direction == "horz") { + if (this._width == null) this.sw = 128; + if (this._height == null) this.sh = 24; + } else if (this._direction == "vert") { + if (this._width == null) this.sw = 24; + if (this._height == null) this.sh = 128; + } else { + if (this._width == null) this.sw = 128; + if (this._height == null) this.sh = 24; + } + const r = Math.min(this.sw, this.sh) * 0.5; + const svgbody = ` - - - - - + this.sh ? 'x2="0%" y2="100%"' : 'x2="100%" y2="0%"' + }> - - - - - - - - -`; - for (let i = 0; i < 101; ++i) { - svg += ``; - } - svg += ""; - this.elem.style.backgroundImage = - "url(data:image/svg+xml;base64," + btoa(svg) + ")"; - if (this.kw == null) this.kw = 64; - if (this.kh == null) this.kh = 64; - this.elem.style.backgroundSize = `${this.kw}px ${this.kh * 101}px`; - this.elem.style.width = this.kw + "px"; - this.elem.style.height = this.kh + "px"; - this.style.height = this.kh + "px"; - this.fireflag = true; - this.redraw(); - return; - } else { - this.img = new Image(); - this.img.onload = () => { - this.elem.style.backgroundImage = "url(" + this.src + ")"; - if (this._sprites == null) - this._sprites = this.img.height / this.img.width - 1; - else this._sprites = +this._sprites; - if (this.kw == null) this.kw = this.img.width; - if (this.kh == null) - this.kh = this.img.height / (this.sprites + 1); - if (!this.sprites) this.elem.style.backgroundSize = "100% 100%"; - else - this.elem.style.backgroundSize = `${this.kw}px ${ - this.kh * (this.sprites + 1) - }px`; - this.elem.style.width = this.kw + "px"; - this.elem.style.height = this.kh + "px"; - this.style.height = this.kh + "px"; - this.redraw(); - }; - this.img.src = this.src; - } - } - redraw() { - let ratio; - this.digits = 0; - if (this.step && this.step < 1) { - for (let n = this.step; n < 1; n *= 10) ++this.digits; - } - if (this.value < this.min) { - this.value = this.min; - } - if (this.value > this.max) { - this.value = this.max; - } - if (this.log) - ratio = - Math.log(this.value / this.min) / Math.log(this.max / this.min); - else ratio = (this.value - this.min) / (this.max - this.min); - let style = this.elem.style; - let sp = this.src ? this.sprites : 100; - if (sp >= 1) { - let offset = (sp * ratio) | 0; - style.backgroundPosition = "0px " + -offset * this.kh + "px"; - style.transform = "rotate(0deg)"; + + + + +`; + this.srcurl = "data:image/svg+xml;base64," + btoa(svgbody); } else { - let deg = 270 * (ratio - 0.5); - style.backgroundPosition = "0px 0px"; - style.transform = "rotate(" + deg + "deg)"; + this.srcurl = this.src; } - } - _setValue(v) { - if (this.step) - v = Math.round((v - this.min) / this.step) * this.step + this.min; - this._value = Math.min(this.max, Math.max(this.min, v)); - if (this._value != this.oldvalue) { - this.fireflag = true; - this.oldvalue = this._value; - if (this.conv) { + this.bodyimg.onload = () => { + if (this.src != "") + this.elem.style.backgroundImage = "url(" + this.srcurl + ")"; + this.sw = +this._width; + this.sh = +this._height; + if (this._width == null) this.sw = this.bodyimg.width; + if (this._height == null) this.sh = this.bodyimg.height; + if (this.dr == null) { + if (this.sw > this.sh) this.dr = "horz"; + else this.dr = "vert"; + } + this.kw = +this._knobwidth; + this.kh = +this._knobheight; + if (this._knobsrc == null) { + if (this._knobwidth == null) this.kw = Math.min(this.sw, this.sh); + if (this._knobheight == null) + this.kh = Math.min(this.sw, this.sh); + const mm = Math.min(this.kw, this.kh) * 0.5; + const kw2 = Math.max(1, this.kw - 12); + const kh2 = Math.max(1, this.kh - 12); + const svgknob = ` + + + + + + + + + + + + + + + + + + + + + + +`; + this.knobsrcurl = "data:image/svg+xml;base64," + btoa(svgknob); + } else { + this.knobsrcurl = this.knobsrc; + } + this.knobimg.onload = () => { + this.knob.style.backgroundImage = "url(" + this.knobsrcurl + ")"; + if (this._knobwidth == null) this.kw = this.knobimg.width; + if (this._knobheight == null) this.kh = this.knobimg.height; + this.dlen = this.ditchlength; + if (this.dlen == null) { + if (this.dr == "horz") this.dlen = this.sw - this.kw; + else this.dlen = this.sh - this.kh; + } + this.knob.style.backgroundSize = "100% 100%"; + this.knob.style.width = this.kw + "px"; + this.knob.style.height = this.kh + "px"; + this.elem.style.backgroundSize = "100% 100%"; + this.elem.style.width = this.sw + "px"; + this.elem.style.height = this.sh + "px"; + this.redraw(); + }; + this.knobimg.src = this.knobsrcurl; + }; + this.bodyimg.src = this.srcurl; + } + redraw() { + let ratio; + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + if (this.value < this.min) { + this.value = this.min; + } + if (this.value > this.max) { + this.value = this.max; + } + if (this.log) + ratio = + Math.log(this.value / this.min) / Math.log(this.max / this.min); + else ratio = (this.value - this.min) / (this.max - this.min); + let style = this.knob.style; + if (this.dr == "horz") { + style.top = (this.sh - this.kh) * 0.5 + "px"; + style.left = + (this.sw - this.kw - this.dlen) * 0.5 + ratio * this.dlen + "px"; + this.sensex = 1; + this.sensey = 0; + } else { + style.left = (this.sw - this.kw) * 0.5 + "px"; + style.top = + (this.sh - this.kh - this.dlen) * 0.5 + + (1 - ratio) * this.dlen + + "px"; + this.sensex = 0; + this.sensey = 1; + } + } + _setValue(v) { + v = Math.round((v - this.min) / this.step) * this.step + this.min; + this._value = Math.min(this.max, Math.max(this.min, v)); + if (this._value != this.oldvalue) { + this.oldvalue = this._value; + this.fireflag = true; + if (this.conv) { const x = this._value; this.convValue = eval(this.conv); if (typeof this.convValue == "function") @@ -719,7 +582,6 @@ ${this.basestyle} this.elem.focus(); this.drag = 1; this.showtip(0); - this.oldvalue = this._value; let pointermove = (ev) => { let e = ev; if (ev.touches) { @@ -736,28 +598,57 @@ ${this.basestyle} this.startPosY = e.pageY; this.startVal = this.value; } - let offset = - (this.startPosY - e.pageY - this.startPosX + e.pageX) * - this.sensitivity; - if (this.log) { - let r = - Math.log(this.startVal / this.min) / - Math.log(this.max / this.min); - r += offset / ((e.shiftKey ? 4 : 1) * 128); - if (r < 0) r = 0; - if (r > 1) r = 1; - this._setValue(this.min * Math.pow(this.max / this.min, r)); + if (this.tracking == "abs") { + const rc = this.getBoundingClientRect(); + let val; + if (this.dr == "horz") + val = Math.max( + 0, + Math.min( + 1, + (e.pageX - rc.left - window.pageXOffset - this.kw * 0.5) / + (this.width - this.kw) + ) + ); + else + val = + 1 - + Math.max( + 0, + Math.min( + 1, + (e.pageY - rc.top - window.pageYOffset - this.kh * 0.5) / + (this.height - this.kh) + ) + ); + if (this.log) { + this._setValue(this.min * Math.pow(this.max / this.min, val)); + } else this._setValue(this.min + (this.max - this.min) * val); } else { - this._setValue( - this.min + - (((this.startVal + - ((this.max - this.min) * offset) / - ((e.shiftKey ? 4 : 1) * 128) - - this.min) / - this.step) | - 0) * - this.step - ); + let offset = + ((this.startPosY - e.pageY) * this.sensey - + (this.startPosX - e.pageX) * this.sensex) * + this.sensitivity; + if (this.log) { + let r = + Math.log(this.startVal / this.min) / + Math.log(this.max / this.min); + r += offset / ((e.shiftKey ? 4 : 1) * 128); + if (r < 0) r = 0; + if (r > 1) r = 1; + this._setValue(this.min * Math.pow(this.max / this.min, r)); + } else { + this._setValue( + this.min + + (((this.startVal + + ((this.max - this.min) * offset) / + ((e.shiftKey ? 4 : 1) * this.dlen) - + this.min) / + this.step) | + 0) * + this.step + ); + } } if (this.fireflag) { this.sendEvent("input"); @@ -795,6 +686,7 @@ ${this.basestyle} let preventScroll = (e) => { e.preventDefault(); }; + if (e.touches) e = e.touches[0]; if (e.ctrlKey || e.metaKey) this.setValue(this.defvalue, true); else { this.startPosX = e.pageX; @@ -804,6 +696,7 @@ ${this.basestyle} window.addEventListener("touchmove", pointermove, { passive: false, }); + pointermove(ev); } window.addEventListener("mouseup", pointerup); window.addEventListener("touchend", pointerup); @@ -811,22 +704,39 @@ ${this.basestyle} document.body.addEventListener("touchstart", preventScroll, { passive: false, }); - ev.preventDefault(); - ev.stopPropagation(); + e.preventDefault(); + e.stopPropagation(); return false; } } ); } catch (error) { - console.log("webaudio-knob already defined"); + console.log("webaudio-slider already defined"); + } + + try { + customElements.define("webaudio-switch", WebAudioSwitch); + } catch (error) { + console.log("webaudio-switch already defined"); } try { customElements.define( - "webaudio-slider", - class WebAudioSlider extends WebAudioControlsWidget { + "webaudio-param", + class WebAudioParam extends WebAudioControlsWidget { constructor() { super(); + this.addEventListener("keydown", this.keydown); + this.addEventListener("mousedown", this.pointerdown, { + passive: false, + }); + this.addEventListener("touchstart", this.pointerdown, { + passive: false, + }); + this.addEventListener("wheel", this.wheel); + this.addEventListener("mouseover", this.pointerover); + this.addEventListener("mouseout", this.pointerout); + this.addEventListener("contextmenu", this.contextMenu); } connectedCallback() { let root; @@ -836,119 +746,255 @@ ${this.basestyle} ${this.basestyle} :host{ display:inline-block; - position:relative; + user-select:none; margin:0; padding:0; font-family: sans-serif; - font-size: 11px; + font-size: 8px; cursor:pointer; + position:relative; + vertical-align:baseline; } -.webaudio-slider-body{ +.webaudio-param-body{ display:inline-block; position:relative; + text-align:center; + background:none; margin:0; padding:0; + font-family:sans-serif; + font-size:11px; vertical-align:bottom; - white-space:pre; -} -.webaudio-slider-knob{ - display:inline-block; - position:absolute; - margin:0; - padding:0; + border:none; } -
+
`; this.elem = root.childNodes[2]; - this.knob = this.elem.firstChild; - this.ttframe = this.knob.nextSibling; - this.label = this.ttframe.nextSibling; + this.ttframe = root.childNodes[3]; this.enable = this.getAttr("enable", 1); - this.tracking = this.getAttr("tracking", "rel"); - this._src = this.getAttr("src", opt.sliderSrc); - Object.defineProperty(this, "src", { + this._value = this.getAttr("value", 0); + Object.defineProperty(this, "value", { get: () => { - return this._src; + return this._value; }, set: (v) => { - this._src = v; - this.setupImage(); + this._value = v; + this.redraw(); }, }); - this._knobsrc = this.getAttr("knobsrc", opt.sliderKnobSrc); - Object.defineProperty(this, "knobsrc", { + this.defvalue = this.getAttr("defvalue", 0); + this._fontsize = this.getAttr("fontsize", 9); + Object.defineProperty(this, "fontsize", { get: () => { - return this._knobsrc; + return this._fontsize; }, set: (v) => { - this._knobsrc = v; + this._fontsize = v; this.setupImage(); }, }); - this._value = this.getAttr("value", 0); - Object.defineProperty(this, "value", { + this._src = this.getAttr("src", opt.paramSrc); + Object.defineProperty(this, "src", { get: () => { - return this._value; + return this._src; }, set: (v) => { - this._value = v; - this.redraw(); + this._src = v; + this.setupImage(); }, }); - this.defvalue = this.getAttr("defvalue", this._value); - this._min = this.getAttr("min", 0); - Object.defineProperty(this, "min", { - get: () => { - return this._min; - }, - set: (v) => { - this._min = v; - this.redraw(); - }, - }); - this._max = this.getAttr("max", 100); - Object.defineProperty(this, "max", { - get: () => { - return this._max; - }, - set: (v) => { - this._max = v; - this.redraw(); - }, - }); - this._step = this.getAttr("step", 1); - Object.defineProperty(this, "step", { + this.link = this.getAttr("link", ""); + this._width = this.getAttr("width", opt.paramWidth); + Object.defineProperty(this, "width", { get: () => { - return this._step; + return this._width; }, set: (v) => { - this._step = v; - this.redraw(); + this._width = v; + this.setupImage(); }, }); - this._sprites = this.getAttr("sprites", 0); - Object.defineProperty(this, "sprites", { + this._height = this.getAttr("height", opt.paramHeight); + Object.defineProperty(this, "height", { get: () => { - return this._sprites; + return this._height; }, set: (v) => { - this._sprites = v; + this._height = v; this.setupImage(); }, }); - this._direction = this.getAttr("direction", null); - Object.defineProperty(this, "direction", { + this._colors = this.getAttr("colors", opt.paramColors); + Object.defineProperty(this, "colors", { get: () => { - return this._direction; + return this._colors; }, set: (v) => { - this._direction = v; + this._colors = v; this.setupImage(); }, }); - this.log = this.getAttr("log", 0); - this._width = this.getAttr("width", opt.sliderWidth); + this.outline = this.getAttr("outline", opt.outline); + this.rconv = this.getAttr("rconv", null); + this.midiController = {}; + this.midiMode = "normal"; + this.currentLink = null; + if (this.midicc) { + let ch = + parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - + 1; + let cc = parseInt( + this.midicc.substring(this.midicc.lastIndexOf(".") + 1) + ); + this.setMidiController(ch, cc); + } + this.setupImage(); + if (window.webAudioControlsWidgetManager) + // window.webAudioControlsWidgetManager.updateWidgets(); + window.webAudioControlsWidgetManager.addWidget(this); + this.fromLink = ((e) => { + this.setValue(e.target.convValue.toFixed(e.target.digits)); + }).bind(this); + this.elem.onchange = () => { + if ( + !this.currentLink.target.conv || + (this.currentLink.target.conv && this.rconv) + ) { + let val = (this.value = this.elem.value); + if (this.rconv) { + let x = +this.elem.value; + val = eval(this.rconv); + } + if (this.currentLink) { + this.currentLink.target.setValue(val, true); + } + } + }; + } + disconnectedCallback() {} + setupImage() { + this.imgloaded = () => { + if (this.src != "" && this.src != null) { + this.elem.style.backgroundImage = "url(" + this.src + ")"; + this.elem.style.backgroundSize = "100% 100%"; + if (this._width == null) this._width = this.img.width; + if (this._height == null) this._height = this.img.height; + } else { + if (this._width == null) this._width = 32; + if (this._height == null) this._height = 20; + } + this.elem.style.width = this._width + "px"; + this.elem.style.height = this._height + "px"; + this.elem.style.fontSize = this.fontsize + "px"; + let l = document.getElementById(this.link); + if (l && typeof l.value != "undefined") { + if (typeof l.convValue == "number") + this.setValue(l.convValue.toFixed(l.digits)); + else this.setValue(l.convValue); + if (this.currentLink) + this.currentLink.removeEventListener( + "input", + this.currentLink.func + ); + this.currentLink = { + target: l, + func: (e) => { + if (typeof l.convValue == "number") + this.setValue(l.convValue.toFixed(l.digits)); + else this.setValue(l.convValue); + }, + }; + this.currentLink.target.addEventListener( + "input", + this.currentLink.func + ); + // l.addEventListener("input",(e)=>{this.setValue(l.convValue.toFixed(l.digits))}); + } + this.redraw(); + }; + this.coltab = this.colors.split(";"); + this.elem.style.color = this.coltab[0]; + this.img = new Image(); + this.img.onload = this.imgloaded.bind(); + if (this.src == null) { + this.elem.style.backgroundColor = this.coltab[1]; + this.imgloaded(); + } else if (this.src == "") { + this.elem.style.background = "none"; + this.imgloaded(); + } else { + this.img.src = this.src; + } + } + redraw() { + this.elem.value = this.value; + } + setValue(v, f) { + this.value = v; + if (this.value != this.oldvalue) { + this.redraw(); + this.showtip(0); + if (f) { + let event = document.createEvent("HTMLEvents"); + event.initEvent("change", false, true); + this.dispatchEvent(event); + } + this.oldvalue = this.value; + } + } + pointerdown(ev) { + if (!this.enable) return; + let e = ev; + if (ev.touches) e = ev.touches[0]; + else { + if (e.buttons != 1 && e.button != 0) return; + } + this.elem.focus(); + this.redraw(); + } + } + ); + } catch (error) { + console.log("webaudio-param already defined"); + } + + try { + customElements.define( + "webaudio-keyboard", + class WebAudioKeyboard extends WebAudioControlsWidget { + constructor() { + super(); + } + connectedCallback() { + let root; + if (this.attachShadow) root = this.attachShadow({ mode: "open" }); + else root = this; + root.innerHTML = ` +
+`; + this.elem = this.cv = root.childNodes[2]; + this.ttframe = root.childNodes[3]; + this.ctx = this.cv.getContext("2d"); + this._values = []; + this.enable = this.getAttr("enable", 1); + this._width = this.getAttr("width", 480); Object.defineProperty(this, "width", { get: () => { return this._width; @@ -958,7 +1004,7 @@ ${this.basestyle} this.setupImage(); }, }); - this._height = this.getAttr("height", opt.sliderHeight); + this._height = this.getAttr("height", 128); Object.defineProperty(this, "height", { get: () => { return this._height; @@ -968,40 +1014,30 @@ ${this.basestyle} this.setupImage(); }, }); - this._knobwidth = this.getAttr("knobwidth", opt.sliderKnobWidth); - Object.defineProperty(this, "knobwidth", { + this._min = this.getAttr("min", 0); + Object.defineProperty(this, "min", { get: () => { - return this._knobwidth; + return this._min; }, set: (v) => { - this._knobwidth = v; - this.setupImage(); + this._min = +v; + this.redraw(); }, }); - this._knobheight = this.getAttr("knobheight", opt.sliderKnobHeight); - Object.defineProperty(this, "knobheight", { + this._keys = this.getAttr("keys", 25); + Object.defineProperty(this, "keys", { get: () => { - return this._knobheight; + return this._keys; }, set: (v) => { - this._knobheight = v; + this._keys = +v; this.setupImage(); }, }); - this._ditchlength = this.getAttr( - "ditchlength", - opt.sliderDitchlength + this._colors = this.getAttr( + "colors", + "#222;#eee;#ccc;#333;#000;#e88;#c44;#c33;#800" ); - Object.defineProperty(this, "ditchlength", { - get: () => { - return this._ditchlength; - }, - set: (v) => { - this._ditchlength = v; - this.setupImage(); - }, - }); - this._colors = this.getAttr("colors", opt.sliderColors); Object.defineProperty(this, "colors", { get: () => { return this._colors; @@ -1012,20 +1048,19 @@ ${this.basestyle} }, }); this.outline = this.getAttr("outline", opt.outline); - this.setupLabel(); - this.sensitivity = this.getAttr("sensitivity", 1); - this.valuetip = this.getAttr("valuetip", opt.valuetip); - this.tooltip = this.getAttr("tooltip", null); - this.conv = this.getAttr("conv", null); - if (this.conv) { - const x = this._value; - this.convValue = eval(this.conv); - if (typeof this.convValue == "function") - this.convValue = this.convValue(x); - } else this.convValue = this._value; - this.midilearn = this.getAttr("midilearn", opt.midilearn); + this.midilearn = this.getAttr("midilearn", 0); this.midicc = this.getAttr("midicc", null); - this.midiController = {}; + this.press = 0; + this.keycodes1 = [ + 90, 83, 88, 68, 67, 86, 71, 66, 72, 78, 74, 77, 188, 76, 190, 187, + 191, 226, + ]; + this.keycodes2 = [ + 81, 50, 87, 51, 69, 82, 53, 84, 54, 89, 55, 85, 73, 57, 79, 48, 80, + 192, 222, 219, + ]; + this.addEventListener("keyup", this.keyup); + this.midiController = {}; this.midiMode = "normal"; if (this.midicc) { let ch = @@ -1036,206 +1071,158 @@ ${this.basestyle} ); this.setMidiController(ch, cc); } - if (this.midilearn && this.id) { - if ( - webAudioControlsWidgetManager && - webAudioControlsWidgetManager.midiLearnTable - ) { - const ml = webAudioControlsWidgetManager.midiLearnTable; - for (let i = 0; i < ml.length; ++i) { - if (ml[i].id == this.id) { - this.setMidiController(ml[i].cc.channel, ml[i].cc.cc); - break; - } - } - } - } this.setupImage(); this.digits = 0; if (this.step && this.step < 1) { for (let n = this.step; n < 1; n *= 10) ++this.digits; } - this.fireflag = true; if (window.webAudioControlsWidgetManager) - // window.webAudioControlsWidgetManager.updateWidgets(); window.webAudioControlsWidgetManager.addWidget(this); - this.elem.onclick = (e) => { - e.stopPropagation(); - }; } disconnectedCallback() {} setupImage() { + this.cv.style.width = this.width + "px"; + this.cv.style.height = this.height + "px"; + this.bheight = this.height * 0.55; + this.kp = [ + 0, + 7 / 12, + 1, + (3 * 7) / 12, + 2, + 3, + (6 * 7) / 12, + 4, + (8 * 7) / 12, + 5, + (10 * 7) / 12, + 6, + ]; + this.kf = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0]; + this.ko = [ + 0, + 0, + (7 * 2) / 12 - 1, + 0, + (7 * 4) / 12 - 2, + (7 * 5) / 12 - 3, + 0, + (7 * 7) / 12 - 4, + 0, + (7 * 9) / 12 - 5, + 0, + (7 * 11) / 12 - 6, + ]; + this.kn = [0, 2, 4, 5, 7, 9, 11]; this.coltab = this.colors.split(";"); - this.bodyimg = new Image(); - this.knobimg = new Image(); - this.srcurl = null; - if (this.src == null || this.src == "") { - this.sw = +this._width; - this.sh = +this.height; - if (this._direction == "horz") { - if (this._width == null) this.sw = 128; - if (this._height == null) this.sh = 24; - } else if (this._direction == "vert") { - if (this._width == null) this.sw = 24; - if (this._height == null) this.sh = 128; - } else { - if (this._width == null) this.sw = 128; - if (this._height == null) this.sh = 24; - } - const r = Math.min(this.sw, this.sh) * 0.5; - const svgbody = ` - - - - - this.sh ? 'x2="0%" y2="100%"' : 'x2="100%" y2="0%"' - }> - - - - - - - -`; - this.srcurl = "data:image/svg+xml;base64," + btoa(svgbody); - } else { - this.srcurl = this.src; - } - this.bodyimg.onload = () => { - if (this.src != "") - this.elem.style.backgroundImage = "url(" + this.srcurl + ")"; - this.sw = +this._width; - this.sh = +this._height; - if (this._width == null) this.sw = this.bodyimg.width; - if (this._height == null) this.sh = this.bodyimg.height; - if (this.dr == null) { - if (this.sw > this.sh) this.dr = "horz"; - else this.dr = "vert"; - } - this.kw = +this._knobwidth; - this.kh = +this._knobheight; - if (this._knobsrc == null) { - if (this._knobwidth == null) this.kw = Math.min(this.sw, this.sh); - if (this._knobheight == null) - this.kh = Math.min(this.sw, this.sh); - const mm = Math.min(this.kw, this.kh) * 0.5; - const kw2 = Math.max(1, this.kw - 12); - const kh2 = Math.max(1, this.kh - 12); - const svgknob = ` - - - - - - - - - - - - - - - - - - - - - - -`; - this.knobsrcurl = "data:image/svg+xml;base64," + btoa(svgknob); - } else { - this.knobsrcurl = this.knobsrc; - } - this.knobimg.onload = () => { - this.knob.style.backgroundImage = "url(" + this.knobsrcurl + ")"; - if (this._knobwidth == null) this.kw = this.knobimg.width; - if (this._knobheight == null) this.kh = this.knobimg.height; - this.dlen = this.ditchlength; - if (this.dlen == null) { - if (this.dr == "horz") this.dlen = this.sw - this.kw; - else this.dlen = this.sh - this.kh; - } - this.knob.style.backgroundSize = "100% 100%"; - this.knob.style.width = this.kw + "px"; - this.knob.style.height = this.kh + "px"; - this.elem.style.backgroundSize = "100% 100%"; - this.elem.style.width = this.sw + "px"; - this.elem.style.height = this.sh + "px"; - this.redraw(); - }; - this.knobimg.src = this.knobsrcurl; - }; - this.bodyimg.src = this.srcurl; + this.cv.width = this.width; + this.cv.height = this.height; + this.cv.style.width = this.width + "px"; + this.cv.style.height = this.height + "px"; + this.style.height = this.height + "px"; + this.cv.style.outline = this.outline ? "" : "none"; + this.bheight = this.height * 0.55; + this.max = this.min + this.keys - 1; + this.dispvalues = []; + this.valuesold = []; + if (this.kf[this.min % 12]) --this.min; + if (this.kf[this.max % 12]) ++this.max; + this.redraw(); } redraw() { - let ratio; - this.digits = 0; - if (this.step && this.step < 1) { - for (let n = this.step; n < 1; n *= 10) ++this.digits; + function rrect(ctx, x, y, w, h, r, c1, c2) { + if (c2) { + let g = ctx.createLinearGradient(x, y, x + w, y); + g.addColorStop(0, c1); + g.addColorStop(1, c2); + ctx.fillStyle = g; + } else ctx.fillStyle = c1; + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + w, y); + ctx.lineTo(x + w, y + h - r); + ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); + ctx.lineTo(x + r, y + h); + ctx.quadraticCurveTo(x, y + h, x, y + h - r); + ctx.lineTo(x, y); + ctx.fill(); } - if (this.value < this.min) { - this.value = this.min; + this.ctx.fillStyle = this.coltab[0]; + this.ctx.fillRect(0, 0, this.width, this.height); + let x0 = 7 * ((this.min / 12) | 0) + this.kp[this.min % 12]; + let x1 = 7 * ((this.max / 12) | 0) + this.kp[this.max % 12]; + let n = x1 - x0; + this.wwidth = (this.width - 1) / (n + 1); + this.bwidth = (this.wwidth * 7) / 12; + let h2 = this.bheight; + let r = Math.min(8, this.wwidth * 0.2); + for (let i = this.min, j = 0; i <= this.max; ++i) { + if (this.kf[i % 12] == 0) { + let x = this.wwidth * j++ + 1; + if (this.dispvalues.indexOf(i) >= 0) + rrect( + this.ctx, + x, + 1, + this.wwidth - 1, + this.height - 2, + r, + this.coltab[5], + this.coltab[6] + ); + else + rrect( + this.ctx, + x, + 1, + this.wwidth - 1, + this.height - 2, + r, + this.coltab[1], + this.coltab[2] + ); + } } - if (this.value > this.max) { - this.value = this.max; - } - if (this.log) - ratio = - Math.log(this.value / this.min) / Math.log(this.max / this.min); - else ratio = (this.value - this.min) / (this.max - this.min); - let style = this.knob.style; - if (this.dr == "horz") { - style.top = (this.sh - this.kh) * 0.5 + "px"; - style.left = - (this.sw - this.kw - this.dlen) * 0.5 + ratio * this.dlen + "px"; - this.sensex = 1; - this.sensey = 0; - } else { - style.left = (this.sw - this.kw) * 0.5 + "px"; - style.top = - (this.sh - this.kh - this.dlen) * 0.5 + - (1 - ratio) * this.dlen + - "px"; - this.sensex = 0; - this.sensey = 1; + r = Math.min(8, this.bwidth * 0.3); + for (let i = this.min; i < this.max; ++i) { + if (this.kf[i % 12]) { + let x = + this.wwidth * this.ko[this.min % 12] + + this.bwidth * (i - this.min) + + 1; + if (this.dispvalues.indexOf(i) >= 0) + rrect( + this.ctx, + x, + 1, + this.bwidth, + h2, + r, + this.coltab[7], + this.coltab[8] + ); + else + rrect( + this.ctx, + x, + 1, + this.bwidth, + h2, + r, + this.coltab[3], + this.coltab[4] + ); + this.ctx.strokeStyle = this.coltab[0]; + this.ctx.stroke(); + } } } _setValue(v) { - v = Math.round((v - this.min) / this.step) * this.step + this.min; + if (this.step) + v = Math.round((v - this.min) / this.step) * this.step + this.min; this._value = Math.min(this.max, Math.max(this.min, v)); if (this._value != this.oldvalue) { this.oldvalue = this._value; - this.fireflag = true; - if (this.conv) { - const x = this._value; - this.convValue = eval(this.conv); - if (typeof this.convValue == "function") - this.convValue = this.convValue(x); - } else this.convValue = this._value; - if (typeof this.convValue == "number") { - this.convValue = this.convValue.toFixed(this.digits); - } this.redraw(); this.showtip(0); return 1; @@ -1246,196 +1233,312 @@ ${this.basestyle} if (this._setValue(v) && f) this.sendEvent("input"), this.sendEvent("change"); } + wheel(e) {} keydown(e) { - const delta = this.step; - if (delta == 0) delta = 1; - switch (e.key) { - case "ArrowUp": - this.setValue(this.value + delta, true); - break; - case "ArrowDown": - this.setValue(this.value - delta, true); - break; - default: - return; + let m = Math.floor((this.min + 11) / 12) * 12; + let k = this.keycodes1.indexOf(e.keyCode); + if (k < 0) { + k = this.keycodes2.indexOf(e.keyCode); + if (k >= 0) k += 12; + } + if (k >= 0) { + k += m; + if (this.currentKey != k) { + this.currentKey = k; + this.sendEventFromKey(1, k); + this.setNote(1, k); + } } - e.preventDefault(); - e.stopPropagation(); } - wheel(e) { - if (!this.enable) return; - if (this.log) { - let r = - Math.log(this.value / this.min) / Math.log(this.max / this.min); - let d = e.deltaY > 0 ? -0.01 : 0.01; - if (!e.shiftKey) d *= 5; - r += d; - this.setValue(this.min * Math.pow(this.max / this.min, r), true); - } else { - let delta = Math.max(this.step, (this.max - this.min) * 0.05); - if (e.shiftKey) delta = this.step ? this.step : 1; - delta = e.deltaY > 0 ? -delta : delta; - this.setValue(+this.value + delta, true); + keyup(e) { + let m = Math.floor((this.min + 11) / 12) * 12; + let k = this.keycodes1.indexOf(e.keyCode); + if (k < 0) { + k = this.keycodes2.indexOf(e.keyCode); + if (k >= 0) k += 12; + } + if (k >= 0) { + k += m; + this.currentKey = -1; + this.sendEventFromKey(0, k); + this.setNote(0, k); } - e.preventDefault(); - e.stopPropagation(); } pointerdown(ev) { - if (!this.enable) return; - let e = ev; - if (ev.touches) { - e = ev.changedTouches[0]; - this.identifier = e.identifier; - } else { - if (e.buttons != 1 && e.button != 0) return; + this.cv.focus(); + if (this.enable) { + ++this.press; } - this.elem.focus(); - this.drag = 1; - this.showtip(0); let pointermove = (ev) => { - let e = ev; - if (ev.touches) { - for (let i = 0; i < ev.touches.length; ++i) { - if (ev.touches[i].identifier == this.identifier) { - e = ev.touches[i]; - break; + if (!this.enable) return; + let r = this.getBoundingClientRect(); + let v = [], + p; + if (ev.touches) p = ev.targetTouches; + else if (this.press) p = [ev]; + else p = []; + if (p.length > 0) this.drag = 1; + for (let i = 0; i < p.length; ++i) { + let px = p[i].clientX - r.left; + let py = p[i].clientY - r.top; + let x, k, ko; + if (py >= 0 && py < this.height) { + if (py < this.bheight) { + x = px - this.wwidth * this.ko[this.min % 12]; + k = this.min + ((x / this.bwidth) | 0); + } else { + k = (px / this.wwidth) | 0; + ko = this.kp[this.min % 12]; + k += ko; + k = + this.min + + ((k / 7) | 0) * 12 + + this.kn[k % 7] - + this.kn[ko % 7]; } + if (k >= this.min && k <= this.max) v.push(k); } } - if (this.lastShift !== e.shiftKey) { - this.lastShift = e.shiftKey; - this.startPosX = e.pageX; - this.startPosY = e.pageY; - this.startVal = this.value; - } - if (this.tracking == "abs") { - const rc = this.getBoundingClientRect(); - let val; - if (this.dr == "horz") - val = Math.max( - 0, - Math.min( - 1, - (e.pageX - rc.left - window.pageXOffset - this.kw * 0.5) / - (this.width - this.kw) - ) - ); - else - val = - 1 - - Math.max( - 0, - Math.min( - 1, - (e.pageY - rc.top - window.pageYOffset - this.kh * 0.5) / - (this.height - this.kh) - ) - ); - if (this.log) { - this._setValue(this.min * Math.pow(this.max / this.min, val)); - } else this._setValue(this.min + (this.max - this.min) * val); - } else { - let offset = - ((this.startPosY - e.pageY) * this.sensey - - (this.startPosX - e.pageX) * this.sensex) * - this.sensitivity; - if (this.log) { - let r = - Math.log(this.startVal / this.min) / - Math.log(this.max / this.min); - r += offset / ((e.shiftKey ? 4 : 1) * 128); - if (r < 0) r = 0; - if (r > 1) r = 1; - this._setValue(this.min * Math.pow(this.max / this.min, r)); - } else { - this._setValue( - this.min + - (((this.startVal + - ((this.max - this.min) * offset) / - ((e.shiftKey ? 4 : 1) * this.dlen) - - this.min) / - this.step) | - 0) * - this.step - ); + v.sort(); + this.values = v; + this.sendevent(); + this.redraw(); + }; + + let pointerup = (ev) => { + if (this.enable) { + if (ev.touches) this.press = ev.touches.length; + else this.press = 0; + pointermove(ev); + this.sendevent(); + if (this.press == 0) { + window.removeEventListener("mousemove", pointermove); + window.removeEventListener("touchmove", pointermove, { + passive: false, + }); + window.removeEventListener("mouseup", pointerup); + window.removeEventListener("touchend", pointerup); + window.removeEventListener("touchcancel", pointerup); + document.body.removeEventListener("touchstart", preventScroll, { + passive: false, + }); } + this.redraw(); } - if (this.fireflag) { - this.sendEvent("input"); - this.fireflag = false; - } - if (e.preventDefault) e.preventDefault(); - if (e.stopPropagation) e.stopPropagation(); - return false; + this.drag = 0; + ev.preventDefault(); }; - let pointerup = (ev) => { - let e = ev; - if (ev.touches) { - for (let i = 0; ; ) { - if (ev.changedTouches[i].identifier == this.identifier) { - break; - } - if (++i >= ev.changedTouches.length) return; - } - } - this.drag = 0; - this.showtip(0); - this.startPosX = this.startPosY = null; - window.removeEventListener("mousemove", pointermove); - window.removeEventListener("touchmove", pointermove, { - passive: false, - }); - window.removeEventListener("mouseup", pointerup); - window.removeEventListener("touchend", pointerup); - window.removeEventListener("touchcancel", pointerup); - document.body.removeEventListener("touchstart", preventScroll, { - passive: false, - }); - this.sendEvent("change"); - }; - let preventScroll = (e) => { - e.preventDefault(); + let preventScroll = (ev) => { + ev.preventDefault(); }; - if (e.touches) e = e.touches[0]; - if (e.ctrlKey || e.metaKey) this.setValue(this.defvalue, true); - else { - this.startPosX = e.pageX; - this.startPosY = e.pageY; - this.startVal = this.value; - window.addEventListener("mousemove", pointermove); - window.addEventListener("touchmove", pointermove, { - passive: false, - }); - pointermove(ev); - } + window.addEventListener("mousemove", pointermove); + window.addEventListener("touchmove", pointermove, { passive: false }); window.addEventListener("mouseup", pointerup); window.addEventListener("touchend", pointerup); window.addEventListener("touchcancel", pointerup); document.body.addEventListener("touchstart", preventScroll, { passive: false, }); - e.preventDefault(); - e.stopPropagation(); - return false; + pointermove(ev); + ev.preventDefault(); + ev.stopPropagation(); + } + sendEventFromKey(s, k) { + let ev = document.createEvent("HTMLEvents"); + ev.initEvent("change", true, true); + ev.note = [s, k]; + this.dispatchEvent(ev); + } + sendevent() { + let notes = []; + for (let i = 0, j = this.valuesold.length; i < j; ++i) { + if (this.values.indexOf(this.valuesold[i]) < 0) + notes.push([0, this.valuesold[i]]); + } + for (let i = 0, j = this.values.length; i < j; ++i) { + if (this.valuesold.indexOf(this.values[i]) < 0) + notes.push([1, this.values[i]]); + } + if (notes.length) { + this.valuesold = this.values; + for (let i = 0; i < notes.length; ++i) { + this.setdispvalues(notes[i][0], notes[i][1]); + let ev = document.createEvent("HTMLEvents"); + ev.initEvent("change", true, true); + ev.note = notes[i]; + this.dispatchEvent(ev); + } + } + } + setdispvalues(state, note) { + let n = this.dispvalues.indexOf(note); + if (state) { + if (n < 0) this.dispvalues.push(note); + } else { + if (n >= 0) this.dispvalues.splice(n, 1); + } + } + setNote(state, note, actx, when) { + const t = actx && when - actx.currentTime; + if (t > 0) { + setTimeout(() => { + this.setNote(state, note); + }, t * 1000); + } else { + this.setdispvalues(state, note); + this.redraw(); + } } } ); } catch (error) { - console.log("webaudio-slider already defined"); + console.log("webaudio-keyboard already defined"); } - try { - customElements.define( - "webaudio-switch", - class WebAudioSwitch extends WebAudioControlsWidget { - constructor() { - super(); - } - connectedCallback() { - let root; - if (this.attachShadow) root = this.attachShadow({ mode: "open" }); - else root = this; - root.innerHTML = `
`; - this.elem = root.childNodes[2]; - this.ttframe = this.elem.firstChild; - this.label = this.ttframe.nextSibling; - this.enable = this.getAttr("enable", 1); - this._src = this.getAttr("src", null); - Object.defineProperty(this, "src", { - get: () => { - return this._src; - }, - set: (v) => { - this._src = v; - this.setupImage(); - }, - }); - this._value = this.getAttr("value", 0); - Object.defineProperty(this, "value", { - get: () => { - return this._value; - }, - set: (v) => { - this._value = v; - this.redraw(); - }, - }); - this.defvalue = this.getAttr("defvalue", this._value); - this.type = this.getAttr("type", "toggle"); - this.group = this.getAttr("group", ""); - this._width = this.getAttr("width", null); - Object.defineProperty(this, "width", { - get: () => { - return this._width; - }, - set: (v) => { - this._width = v; - this.setupImage(); - }, - }); - this._height = this.getAttr("height", null); - Object.defineProperty(this, "height", { - get: () => { - return this._height; - }, - set: (v) => { - this._height = v; - this.setupImage(); - }, - }); - this._diameter = this.getAttr("diameter", null); - Object.defineProperty(this, "diameter", { - get: () => { - return this._diameter; - }, - set: (v) => { - this._diameter = v; - this.setupImage(); - }, - }); - this.invert = this.getAttr("invert", 0); - this._colors = this.getAttr("colors", opt.switchColors); - Object.defineProperty(this, "colors", { - get: () => { - return this._colors; - }, - set: (v) => { - this._colors = v; - this.setupImage(); - }, - }); - this.outline = this.getAttr("outline", opt.outline); - this.setupLabel(); - this.valuetip = 0; - this.tooltip = this.getAttr("tooltip", null); - this.midilearn = this.getAttr("midilearn", opt.midilearn); - this.midicc = this.getAttr("midicc", null); - this.midiController = {}; - this.midiMode = "normal"; - if (this.midicc) { - let ch = - parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - - 1; - let cc = parseInt( - this.midicc.substring(this.midicc.lastIndexOf(".") + 1) - ); - this.setMidiController(ch, cc); - } - if (this.midilearn && this.id) { - if ( - webAudioControlsWidgetManager && - webAudioControlsWidgetManager.midiLearnTable - ) { - const ml = webAudioControlsWidgetManager.midiLearnTable; - for (let i = 0; i < ml.length; ++i) { - if (ml[i].id == this.id) { - this.setMidiController(ml[i].cc.channel, ml[i].cc.cc); - break; - } - } - } - } - this.setupImage(); - this.digits = 0; - if (this.step && this.step < 1) { - for (let n = this.step; n < 1; n *= 10) ++this.digits; + this.elem = root.childNodes[2]; + this.ttframe = this.elem.firstChild; + this.label = this.ttframe.nextSibling; + this.enable = this.getAttr("enable", 1); + this._src = this.getAttr("src", null); + Object.defineProperty(this, "src", { + get: () => { + return this._src; + }, + set: (v) => { + this._src = v; + this.setupImage(); + }, + }); + this._value = this.getAttr("value", 0); + Object.defineProperty(this, "value", { + get: () => { + return this._value; + }, + set: (v) => { + this._value = v; + this.redraw(); + }, + }); + this.defvalue = this.getAttr("defvalue", this._value); + this.type = this.getAttr("type", "toggle"); + this.group = this.getAttr("group", ""); + this._width = this.getAttr("width", null); + Object.defineProperty(this, "width", { + get: () => { + return this._width; + }, + set: (v) => { + this._width = v; + this.setupImage(); + }, + }); + this._height = this.getAttr("height", null); + Object.defineProperty(this, "height", { + get: () => { + return this._height; + }, + set: (v) => { + this._height = v; + this.setupImage(); + }, + }); + this._diameter = this.getAttr("diameter", null); + Object.defineProperty(this, "diameter", { + get: () => { + return this._diameter; + }, + set: (v) => { + this._diameter = v; + this.setupImage(); + }, + }); + this.invert = this.getAttr("invert", 0); + this._colors = this.getAttr("colors", opt.switchColors); + Object.defineProperty(this, "colors", { + get: () => { + return this._colors; + }, + set: (v) => { + this._colors = v; + this.setupImage(); + }, + }); + this.outline = this.getAttr("outline", opt.outline); + this.setupLabel(); + this.valuetip = 0; + this.tooltip = this.getAttr("tooltip", null); + this.midilearn = this.getAttr("midilearn", opt.midilearn); + this.midicc = this.getAttr("midicc", null); + this.midiController = {}; + this.midiMode = "normal"; + if (this.midicc) { + let ch = + parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - 1; + let cc = parseInt( + this.midicc.substring(this.midicc.lastIndexOf(".") + 1) + ); + this.setMidiController(ch, cc); + } + if (this.midilearn && this.id) { + if ( + webAudioControlsWidgetManager && + webAudioControlsWidgetManager.midiLearnTable + ) { + const ml = webAudioControlsWidgetManager.midiLearnTable; + for (let i = 0; i < ml.length; ++i) { + if (ml[i].id == this.id) { + this.setMidiController(ml[i].cc.channel, ml[i].cc.cc); + break; } - if (window.webAudioControlsWidgetManager) - // window.webAudioControlsWidgetManager.updateWidgets(); - window.webAudioControlsWidgetManager.addWidget(this); - this.elem.onclick = (e) => { - e.stopPropagation(); - }; } - disconnectedCallback() {} - setupImage() { - this.coltab = this.colors.split(";"); - this.kw = - this._width || - this._diameter || - opt.switchWidth || - opt.switchDiameter; - this.kh = - this._height || - this._diameter || - opt.switchHeight || - opt.switchDiameter; - this.img = new Image(); - this.srcurl = null; - if (this.src == null || this.src == "") { - if (this.kw == null) this.kw = 32; - if (this.kh == null) this.kh = 32; - const mm = Math.min(this.kw, this.kh); - const kw = this.kw, - kh = this.kh; - const svg = ` + } + } + this.setupImage(); + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + if (window.webAudioControlsWidgetManager) + // window.webAudioControlsWidgetManager.updateWidgets(); + window.webAudioControlsWidgetManager.addWidget(this); + this.elem.onclick = (e) => { + e.stopPropagation(); + }; + } + disconnectedCallback() {} + setupImage() { + this.coltab = this.colors.split(";"); + this.kw = + this._width || this._diameter || opt.switchWidth || opt.switchDiameter; + this.kh = + this._height || this._diameter || opt.switchHeight || opt.switchDiameter; + this.img = new Image(); + this.srcurl = null; + if (this.src == null || this.src == "") { + if (this.kw == null) this.kw = 32; + if (this.kh == null) this.kh = 32; + const mm = Math.min(this.kw, this.kh); + const kw = this.kw, + kh = this.kh; + const svg = ` @@ -1612,954 +1708,840 @@ ${this.basestyle} + kh * 0.85 + }" rx="${mm * 0.1}" ry="${mm * 0.1}" fill="#000"/> + kh * 0.8 + }" rx="${mm * 0.1}" ry="${mm * 0.1}" fill="${this.coltab[1]}"/> + mm * 0.35 + }" stroke="#000" stroke-width="${mm * 0.03}" fill="${ + this.coltab[0] + }" filter="url(#f1)"/> + mm * 0.27 + }" stroke="#000" stroke-width="${ + mm * 0.03 + }" fill="#000" filter="url(#f1)"/> + kh * 0.85 + }" rx="${mm * 0.1}" ry="${mm * 0.1}" fill="url(#g1)"/> + mm * 0.25 + }" fill="url(#g2)" filter="url(#f1)"/> `; - this.srcurl = "data:image/svg+xml;base64," + btoa(svg); - } else this.srcurl = this.src; - this.img.onload = () => { - if (this.kw == null) this.kw = this.img.width; - if (this.kh == null) this.kh = this.img.height * 0.5; - this.elem.style.backgroundImage = "url(" + this.srcurl + ")"; - this.elem.style.backgroundSize = "100% 200%"; - this.elem.style.width = this.kw + "px"; - this.elem.style.height = this.kh + "px"; - this.redraw(); - }; - this.img.src = this.srcurl; - } - redraw() { - let style = this.elem.style; - if (this.value ^ this.invert) style.backgroundPosition = "0px -100%"; - else style.backgroundPosition = "0px 0px"; - } - setValue(v, f) { - this.value = v; - this.checked = !!v; - if (this.value != this.oldvalue) { - this.redraw(); - this.showtip(0); - if (f) { - this.sendEvent("input"); - this.sendEvent("change"); - } - this.oldvalue = this.value; - } - } - pointerdown(ev) { - if (!this.enable) return; - let e = ev; - if (ev.touches) { - e = ev.changedTouches[0]; - this.identifier = e.identifier; - } else { - if (e.buttons != 1 && e.button != 0) return; - } - this.elem.focus(); - this.drag = 1; - this.showtip(0); - let pointermove = (e) => { - e.preventDefault(); - e.stopPropagation(); - return false; - }; - let pointerup = (e) => { - this.drag = 0; - this.showtip(0); - window.removeEventListener("mousemove", pointermove); - window.removeEventListener("touchmove", pointermove, { - passive: false, - }); - window.removeEventListener("mouseup", pointerup); - window.removeEventListener("touchend", pointerup); - window.removeEventListener("touchcancel", pointerup); - document.body.removeEventListener("touchstart", preventScroll, { - passive: false, - }); - if (this.type == "kick") { - this.value = 0; - this.checked = false; - this.redraw(); - this.sendEvent("change"); - } - this.sendEvent("click"); - e.preventDefault(); - e.stopPropagation(); - }; - let preventScroll = (e) => { - e.preventDefault(); - }; - switch (this.type) { - case "kick": - this.setValue(1); - this.sendEvent("change"); - break; - case "toggle": - if (e.ctrlKey || e.metaKey) this.value = defvalue; - else this.value = 1 - this.value; - this.checked = !!this.value; - this.sendEvent("change"); - break; - case "radio": - let els = document.querySelectorAll( - "webaudio-switch[type='radio'][group='" + this.group + "']" - ); - for (let i = 0; i < els.length; ++i) { - if (els[i] == this) els[i].setValue(1); - else els[i].setValue(0); - } - this.sendEvent("change"); - break; - } - - window.addEventListener("mouseup", pointerup); - window.addEventListener("touchend", pointerup); - window.addEventListener("touchcancel", pointerup); - document.body.addEventListener("touchstart", preventScroll, { - passive: false, - }); - this.redraw(); - ev.preventDefault(); - ev.stopPropagation(); - return false; - } + this.srcurl = "data:image/svg+xml;base64," + btoa(svg); + } else this.srcurl = this.src; + this.img.onload = () => { + if (this.kw == null) this.kw = this.img.width; + if (this.kh == null) this.kh = this.img.height * 0.5; + this.elem.style.backgroundImage = "url(" + this.srcurl + ")"; + this.elem.style.backgroundSize = "100% 200%"; + this.elem.style.width = this.kw + "px"; + this.elem.style.height = this.kh + "px"; + this.redraw(); + }; + this.img.src = this.srcurl; + } + redraw() { + let style = this.elem.style; + if (this.value ^ this.invert) style.backgroundPosition = "0px -100%"; + else style.backgroundPosition = "0px 0px"; + } + setValue(v, f) { + this.value = v; + this.checked = !!v; + if (this.value != this.oldvalue) { + this.redraw(); + this.showtip(0); + if (f) { + this.sendEvent("input"); + this.sendEvent("change"); } - ); - } catch (error) { - console.log("webaudio-switch already defined"); + this.oldvalue = this.value; + } } - - try { - customElements.define( - "webaudio-param", - class WebAudioParam extends WebAudioControlsWidget { - constructor() { - super(); - this.addEventListener("keydown", this.keydown); - this.addEventListener("mousedown", this.pointerdown, { - passive: false, - }); - this.addEventListener("touchstart", this.pointerdown, { - passive: false, - }); - this.addEventListener("wheel", this.wheel); - this.addEventListener("mouseover", this.pointerover); - this.addEventListener("mouseout", this.pointerout); - this.addEventListener("contextmenu", this.contextMenu); + pointerdown(ev) { + if (!this.enable) return; + let e = ev; + if (ev.touches) { + e = ev.changedTouches[0]; + this.identifier = e.identifier; + } else { + if (e.buttons != 1 && e.button != 0) return; + } + this.elem.focus(); + this.drag = 1; + this.showtip(0); + let pointermove = (e) => { + e.preventDefault(); + e.stopPropagation(); + return false; + }; + let pointerup = (e) => { + this.drag = 0; + this.showtip(0); + window.removeEventListener("mousemove", pointermove); + window.removeEventListener("touchmove", pointermove, { + passive: false, + }); + window.removeEventListener("mouseup", pointerup); + window.removeEventListener("touchend", pointerup); + window.removeEventListener("touchcancel", pointerup); + document.body.removeEventListener("touchstart", preventScroll, { + passive: false, + }); + if (this.type == "kick") { + this.value = 0; + this.checked = false; + this.redraw(); + this.sendEvent("change"); + } + this.sendEvent("click"); + e.preventDefault(); + e.stopPropagation(); + }; + let preventScroll = (e) => { + e.preventDefault(); + }; + switch (this.type) { + case "kick": + this.setValue(1); + this.sendEvent("change"); + break; + case "toggle": + if (e.ctrlKey || e.metaKey) this.value = defvalue; + else this.value = 1 - this.value; + this.checked = !!this.value; + this.sendEvent("change"); + break; + case "radio": + let els = document.querySelectorAll( + "webaudio-switch[type='radio'][group='" + this.group + "']" + ); + for (let i = 0; i < els.length; ++i) { + if (els[i] == this) els[i].setValue(1); + else els[i].setValue(0); } - connectedCallback() { - let root; - if (this.attachShadow) root = this.attachShadow({ mode: "open" }); - else root = this; - root.innerHTML = ` -
-`; - this.elem = root.childNodes[2]; - this.ttframe = root.childNodes[3]; - this.enable = this.getAttr("enable", 1); - this._value = this.getAttr("value", 0); - Object.defineProperty(this, "value", { - get: () => { - return this._value; - }, - set: (v) => { - this._value = v; - this.redraw(); - }, - }); - this.defvalue = this.getAttr("defvalue", 0); - this._fontsize = this.getAttr("fontsize", 9); - Object.defineProperty(this, "fontsize", { - get: () => { - return this._fontsize; - }, - set: (v) => { - this._fontsize = v; - this.setupImage(); - }, - }); - this._src = this.getAttr("src", opt.paramSrc); - Object.defineProperty(this, "src", { - get: () => { - return this._src; - }, - set: (v) => { - this._src = v; - this.setupImage(); - }, - }); - this.link = this.getAttr("link", ""); - this._width = this.getAttr("width", opt.paramWidth); - Object.defineProperty(this, "width", { - get: () => { - return this._width; - }, - set: (v) => { - this._width = v; - this.setupImage(); - }, - }); - this._height = this.getAttr("height", opt.paramHeight); - Object.defineProperty(this, "height", { - get: () => { - return this._height; - }, - set: (v) => { - this._height = v; - this.setupImage(); - }, - }); - this._colors = this.getAttr("colors", opt.paramColors); - Object.defineProperty(this, "colors", { - get: () => { - return this._colors; - }, - set: (v) => { - this._colors = v; - this.setupImage(); - }, - }); - this.outline = this.getAttr("outline", opt.outline); - this.rconv = this.getAttr("rconv", null); - this.midiController = {}; - this.midiMode = "normal"; - this.currentLink = null; - if (this.midicc) { - let ch = - parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - - 1; - let cc = parseInt( - this.midicc.substring(this.midicc.lastIndexOf(".") + 1) - ); - this.setMidiController(ch, cc); - } - this.setupImage(); - if (window.webAudioControlsWidgetManager) - // window.webAudioControlsWidgetManager.updateWidgets(); - window.webAudioControlsWidgetManager.addWidget(this); - this.fromLink = ((e) => { - this.setValue(e.target.convValue.toFixed(e.target.digits)); - }).bind(this); - this.elem.onchange = () => { - if ( - !this.currentLink.target.conv || - (this.currentLink.target.conv && this.rconv) - ) { - let val = (this.value = this.elem.value); - if (this.rconv) { - let x = +this.elem.value; - val = eval(this.rconv); - } - if (this.currentLink) { - this.currentLink.target.setValue(val, true); - } - } - }; - } - disconnectedCallback() {} - setupImage() { - this.imgloaded = () => { - if (this.src != "" && this.src != null) { - this.elem.style.backgroundImage = "url(" + this.src + ")"; - this.elem.style.backgroundSize = "100% 100%"; - if (this._width == null) this._width = this.img.width; - if (this._height == null) this._height = this.img.height; - } else { - if (this._width == null) this._width = 32; - if (this._height == null) this._height = 20; - } - this.elem.style.width = this._width + "px"; - this.elem.style.height = this._height + "px"; - this.elem.style.fontSize = this.fontsize + "px"; - let l = document.getElementById(this.link); - if (l && typeof l.value != "undefined") { - if (typeof l.convValue == "number") - this.setValue(l.convValue.toFixed(l.digits)); - else this.setValue(l.convValue); - if (this.currentLink) - this.currentLink.removeEventListener( - "input", - this.currentLink.func - ); - this.currentLink = { - target: l, - func: (e) => { - if (typeof l.convValue == "number") - this.setValue(l.convValue.toFixed(l.digits)); - else this.setValue(l.convValue); - }, - }; - this.currentLink.target.addEventListener( - "input", - this.currentLink.func - ); - // l.addEventListener("input",(e)=>{this.setValue(l.convValue.toFixed(l.digits))}); - } - this.redraw(); - }; - this.coltab = this.colors.split(";"); - this.elem.style.color = this.coltab[0]; - this.img = new Image(); - this.img.onload = this.imgloaded.bind(); - if (this.src == null) { - this.elem.style.backgroundColor = this.coltab[1]; - this.imgloaded(); - } else if (this.src == "") { - this.elem.style.background = "none"; - this.imgloaded(); - } else { - this.img.src = this.src; - } - } - redraw() { - this.elem.value = this.value; - } - setValue(v, f) { - this.value = v; - if (this.value != this.oldvalue) { - this.redraw(); - this.showtip(0); - if (f) { - let event = document.createEvent("HTMLEvents"); - event.initEvent("change", false, true); - this.dispatchEvent(event); - } - this.oldvalue = this.value; - } - } - pointerdown(ev) { - if (!this.enable) return; - let e = ev; - if (ev.touches) e = ev.touches[0]; - else { - if (e.buttons != 1 && e.button != 0) return; - } - this.elem.focus(); - this.redraw(); - } - } - ); - } catch (error) { - console.log("webaudio-param already defined"); - } - - try { - customElements.define( - "webaudio-keyboard", - class WebAudioKeyboard extends WebAudioControlsWidget { - constructor() { - super(); - } - connectedCallback() { - let root; - if (this.attachShadow) root = this.attachShadow({ mode: "open" }); - else root = this; - root.innerHTML = ` -
-`; - this.elem = this.cv = root.childNodes[2]; - this.ttframe = root.childNodes[3]; - this.ctx = this.cv.getContext("2d"); - this._values = []; - this.enable = this.getAttr("enable", 1); - this._width = this.getAttr("width", 480); - Object.defineProperty(this, "width", { - get: () => { - return this._width; - }, - set: (v) => { - this._width = v; - this.setupImage(); - }, - }); - this._height = this.getAttr("height", 128); - Object.defineProperty(this, "height", { - get: () => { - return this._height; - }, - set: (v) => { - this._height = v; - this.setupImage(); - }, - }); - this._min = this.getAttr("min", 0); - Object.defineProperty(this, "min", { - get: () => { - return this._min; - }, - set: (v) => { - this._min = +v; - this.redraw(); - }, - }); - this._keys = this.getAttr("keys", 25); - Object.defineProperty(this, "keys", { - get: () => { - return this._keys; - }, - set: (v) => { - this._keys = +v; - this.setupImage(); - }, - }); - this._colors = this.getAttr( - "colors", - "#222;#eee;#ccc;#333;#000;#e88;#c44;#c33;#800" - ); - Object.defineProperty(this, "colors", { - get: () => { - return this._colors; - }, - set: (v) => { - this._colors = v; - this.setupImage(); - }, - }); - this.outline = this.getAttr("outline", opt.outline); - this.midilearn = this.getAttr("midilearn", 0); - this.midicc = this.getAttr("midicc", null); - this.press = 0; - this.keycodes1 = [ - 90, 83, 88, 68, 67, 86, 71, 66, 72, 78, 74, 77, 188, 76, 190, 187, - 191, 226, - ]; - this.keycodes2 = [ - 81, 50, 87, 51, 69, 82, 53, 84, 54, 89, 55, 85, 73, 57, 79, 48, 80, - 192, 222, 219, - ]; - this.addEventListener("keyup", this.keyup); - this.midiController = {}; - this.midiMode = "normal"; - if (this.midicc) { - let ch = - parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - - 1; - let cc = parseInt( - this.midicc.substring(this.midicc.lastIndexOf(".") + 1) - ); - this.setMidiController(ch, cc); - } - this.setupImage(); - this.digits = 0; - if (this.step && this.step < 1) { - for (let n = this.step; n < 1; n *= 10) ++this.digits; - } - if (window.webAudioControlsWidgetManager) - window.webAudioControlsWidgetManager.addWidget(this); - } - disconnectedCallback() {} - setupImage() { - this.cv.style.width = this.width + "px"; - this.cv.style.height = this.height + "px"; - this.bheight = this.height * 0.55; - this.kp = [ - 0, - 7 / 12, - 1, - (3 * 7) / 12, - 2, - 3, - (6 * 7) / 12, - 4, - (8 * 7) / 12, - 5, - (10 * 7) / 12, - 6, - ]; - this.kf = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0]; - this.ko = [ - 0, - 0, - (7 * 2) / 12 - 1, - 0, - (7 * 4) / 12 - 2, - (7 * 5) / 12 - 3, - 0, - (7 * 7) / 12 - 4, - 0, - (7 * 9) / 12 - 5, - 0, - (7 * 11) / 12 - 6, - ]; - this.kn = [0, 2, 4, 5, 7, 9, 11]; - this.coltab = this.colors.split(";"); - this.cv.width = this.width; - this.cv.height = this.height; - this.cv.style.width = this.width + "px"; - this.cv.style.height = this.height + "px"; - this.style.height = this.height + "px"; - this.cv.style.outline = this.outline ? "" : "none"; - this.bheight = this.height * 0.55; - this.max = this.min + this.keys - 1; - this.dispvalues = []; - this.valuesold = []; - if (this.kf[this.min % 12]) --this.min; - if (this.kf[this.max % 12]) ++this.max; - this.redraw(); - } - redraw() { - function rrect(ctx, x, y, w, h, r, c1, c2) { - if (c2) { - let g = ctx.createLinearGradient(x, y, x + w, y); - g.addColorStop(0, c1); - g.addColorStop(1, c2); - ctx.fillStyle = g; - } else ctx.fillStyle = c1; - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(x + w, y); - ctx.lineTo(x + w, y + h - r); - ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); - ctx.lineTo(x + r, y + h); - ctx.quadraticCurveTo(x, y + h, x, y + h - r); - ctx.lineTo(x, y); - ctx.fill(); - } - this.ctx.fillStyle = this.coltab[0]; - this.ctx.fillRect(0, 0, this.width, this.height); - let x0 = 7 * ((this.min / 12) | 0) + this.kp[this.min % 12]; - let x1 = 7 * ((this.max / 12) | 0) + this.kp[this.max % 12]; - let n = x1 - x0; - this.wwidth = (this.width - 1) / (n + 1); - this.bwidth = (this.wwidth * 7) / 12; - let h2 = this.bheight; - let r = Math.min(8, this.wwidth * 0.2); - for (let i = this.min, j = 0; i <= this.max; ++i) { - if (this.kf[i % 12] == 0) { - let x = this.wwidth * j++ + 1; - if (this.dispvalues.indexOf(i) >= 0) - rrect( - this.ctx, - x, - 1, - this.wwidth - 1, - this.height - 2, - r, - this.coltab[5], - this.coltab[6] - ); - else - rrect( - this.ctx, - x, - 1, - this.wwidth - 1, - this.height - 2, - r, - this.coltab[1], - this.coltab[2] - ); - } - } - r = Math.min(8, this.bwidth * 0.3); - for (let i = this.min; i < this.max; ++i) { - if (this.kf[i % 12]) { - let x = - this.wwidth * this.ko[this.min % 12] + - this.bwidth * (i - this.min) + - 1; - if (this.dispvalues.indexOf(i) >= 0) - rrect( - this.ctx, - x, - 1, - this.bwidth, - h2, - r, - this.coltab[7], - this.coltab[8] - ); - else - rrect( - this.ctx, - x, - 1, - this.bwidth, - h2, - r, - this.coltab[3], - this.coltab[4] - ); - this.ctx.strokeStyle = this.coltab[0]; - this.ctx.stroke(); - } - } - } - _setValue(v) { - if (this.step) - v = Math.round((v - this.min) / this.step) * this.step + this.min; - this._value = Math.min(this.max, Math.max(this.min, v)); - if (this._value != this.oldvalue) { - this.oldvalue = this._value; - this.redraw(); - this.showtip(0); - return 1; - } - return 0; - } - setValue(v, f) { - if (this._setValue(v) && f) - this.sendEvent("input"), this.sendEvent("change"); - } - wheel(e) {} - keydown(e) { - let m = Math.floor((this.min + 11) / 12) * 12; - let k = this.keycodes1.indexOf(e.keyCode); - if (k < 0) { - k = this.keycodes2.indexOf(e.keyCode); - if (k >= 0) k += 12; - } - if (k >= 0) { - k += m; - if (this.currentKey != k) { - this.currentKey = k; - this.sendEventFromKey(1, k); - this.setNote(1, k); - } - } - } - keyup(e) { - let m = Math.floor((this.min + 11) / 12) * 12; - let k = this.keycodes1.indexOf(e.keyCode); - if (k < 0) { - k = this.keycodes2.indexOf(e.keyCode); - if (k >= 0) k += 12; - } - if (k >= 0) { - k += m; - this.currentKey = -1; - this.sendEventFromKey(0, k); - this.setNote(0, k); - } - } - pointerdown(ev) { - this.cv.focus(); - if (this.enable) { - ++this.press; - } - let pointermove = (ev) => { - if (!this.enable) return; - let r = this.getBoundingClientRect(); - let v = [], - p; - if (ev.touches) p = ev.targetTouches; - else if (this.press) p = [ev]; - else p = []; - if (p.length > 0) this.drag = 1; - for (let i = 0; i < p.length; ++i) { - let px = p[i].clientX - r.left; - let py = p[i].clientY - r.top; - let x, k, ko; - if (py >= 0 && py < this.height) { - if (py < this.bheight) { - x = px - this.wwidth * this.ko[this.min % 12]; - k = this.min + ((x / this.bwidth) | 0); - } else { - k = (px / this.wwidth) | 0; - ko = this.kp[this.min % 12]; - k += ko; - k = - this.min + - ((k / 7) | 0) * 12 + - this.kn[k % 7] - - this.kn[ko % 7]; - } - if (k >= this.min && k <= this.max) v.push(k); - } - } - v.sort(); - this.values = v; - this.sendevent(); - this.redraw(); - }; - - let pointerup = (ev) => { - if (this.enable) { - if (ev.touches) this.press = ev.touches.length; - else this.press = 0; - pointermove(ev); - this.sendevent(); - if (this.press == 0) { - window.removeEventListener("mousemove", pointermove); - window.removeEventListener("touchmove", pointermove, { - passive: false, - }); - window.removeEventListener("mouseup", pointerup); - window.removeEventListener("touchend", pointerup); - window.removeEventListener("touchcancel", pointerup); - document.body.removeEventListener("touchstart", preventScroll, { - passive: false, - }); - } - this.redraw(); - } - this.drag = 0; - ev.preventDefault(); - }; - let preventScroll = (ev) => { - ev.preventDefault(); - }; - window.addEventListener("mousemove", pointermove); - window.addEventListener("touchmove", pointermove, { passive: false }); - window.addEventListener("mouseup", pointerup); - window.addEventListener("touchend", pointerup); - window.addEventListener("touchcancel", pointerup); - document.body.addEventListener("touchstart", preventScroll, { - passive: false, - }); - pointermove(ev); - ev.preventDefault(); - ev.stopPropagation(); - } - sendEventFromKey(s, k) { - let ev = document.createEvent("HTMLEvents"); - ev.initEvent("change", true, true); - ev.note = [s, k]; - this.dispatchEvent(ev); - } - sendevent() { - let notes = []; - for (let i = 0, j = this.valuesold.length; i < j; ++i) { - if (this.values.indexOf(this.valuesold[i]) < 0) - notes.push([0, this.valuesold[i]]); - } - for (let i = 0, j = this.values.length; i < j; ++i) { - if (this.valuesold.indexOf(this.values[i]) < 0) - notes.push([1, this.values[i]]); - } - if (notes.length) { - this.valuesold = this.values; - for (let i = 0; i < notes.length; ++i) { - this.setdispvalues(notes[i][0], notes[i][1]); - let ev = document.createEvent("HTMLEvents"); - ev.initEvent("change", true, true); - ev.note = notes[i]; - this.dispatchEvent(ev); - } - } - } - setdispvalues(state, note) { - let n = this.dispvalues.indexOf(note); - if (state) { - if (n < 0) this.dispvalues.push(note); - } else { - if (n >= 0) this.dispvalues.splice(n, 1); - } - } - setNote(state, note, actx, when) { - const t = actx && when - actx.currentTime; - if (t > 0) { - setTimeout(() => { - this.setNote(state, note); - }, t * 1000); - } else { - this.setdispvalues(state, note); - this.redraw(); - } +.webaudioctrl-tooltip:before{ + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -8px; + border: 8px solid transparent; + border-top: 8px solid #666; +} +.webaudioctrl-tooltip:after{ + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -6px; + border: 6px solid transparent; + border-top: 6px solid #eee; +} +`; + this.onblur = () => { + this.elem.style.outline = "none"; + }; + this.onfocus = () => { + switch (+this.outline) { + case null: + case 0: + this.elem.style.outline = "none"; + break; + case 1: + this.elem.style.outline = "1px solid #444"; + break; + default: + this.elem.style.outline = this.outline; + } + }; + } + sendEvent(ev) { + let event; + event = document.createEvent("HTMLEvents"); + event.initEvent(ev, false, true); + this.dispatchEvent(event); + } + getAttr(n, def) { + let v = this.getAttribute(n); + if (v == null) return def; + switch (typeof def) { + case "number": + if (v == "true") return 1; + v = +v; + if (isNaN(v)) return 0; + return v; + } + return v; + } + showtip(d) { + function valstr(x, c, type) { + switch (type) { + case "x": + return (x | 0).toString(16); + case "X": + return (x | 0).toString(16).toUpperCase(); + case "d": + return (x | 0).toString(); + case "f": + return parseFloat(x).toFixed(c); + case "s": + return x.toString(); + } + return ""; + } + function numformat(s, x) { + let i = s.indexOf("%"); + let j = i + 1; + if (i < 0) j = s.length; + let c = [0, 0], + type = 0, + m = 0, + r = ""; + if (s.indexOf("%s") >= 0) { + return s.replace("%s", x); + } + for (; j < s.length; ++j) { + if ("dfxXs".indexOf(s[j]) >= 0) { + type = s[j]; + break; } + if (s[j] == ".") m = 1; + else c[m] = c[m] * 10 + parseInt(s[j]); + } + r = valstr(x, c[1], type); + if (c[0] > 0) r = (" " + r).slice(-c[0]); + r = s.replace(/%.*[xXdfs]/, r); + return r; + } + let s = this.tooltip; + if (this.drag || this.hover) { + if (this.valuetip) { + if (s == null) s = `%s`; + else if (s.indexOf("%") < 0) s += ` : %s`; + } + if (s) { + this.ttframe.innerHTML = numformat(s, this.convValue); + this.ttframe.style.display = "inline-block"; + this.ttframe.style.width = "auto"; + this.ttframe.style.height = "auto"; + this.ttframe.style.transition = + "opacity 0.5s " + d + "s,visibility 0.5s " + d + "s"; + this.ttframe.style.opacity = 0.9; + this.ttframe.style.visibility = "visible"; + let rc = this.getBoundingClientRect(), + rc2 = this.ttframe.getBoundingClientRect(), + rc3 = document.documentElement.getBoundingClientRect(); + this.ttframe.style.left = (rc.width - rc2.width) * 0.5 + 1000 + "px"; + this.ttframe.style.top = -rc2.height - 8 + "px"; + return; } + } + this.ttframe.style.transition = + "opacity 0.1s " + d + "s,visibility 0.1s " + d + "s"; + this.ttframe.style.opacity = 0; + this.ttframe.style.visibility = "hidden"; + } + setupLabel() { + this.labelpos = this.getAttr("labelpos", "bottom 0px"); + const lpos = this.labelpos.split(" "); + let offs = ""; + if (lpos.length == 3) offs = `translate(${lpos[1]},${lpos[2]})`; + this.label.style.position = "absolute"; + switch (lpos[0]) { + case "center": + this.label.style.top = "50%"; + this.label.style.left = "50%"; + this.label.style.transform = `translate(-50%,-50%) ${offs}`; + break; + case "right": + this.label.style.top = "50%"; + this.label.style.left = "100%"; + this.label.style.transform = `translateY(-50%) ${offs}`; + break; + case "left": + this.label.style.top = "50%"; + this.label.style.left = "0%"; + this.label.style.transform = `translate(-100%,-50%) ${offs}`; + break; + case "bottom": + this.label.style.top = "100%"; + this.label.style.left = "50%"; + this.label.style.transform = `translateX(-50%) ${offs}`; + break; + case "top": + this.label.style.top = "0%"; + this.label.style.left = "50%"; + this.label.style.transform = `translate(-50%,-100%) ${offs}`; + break; + } + } + pointerover(e) { + this.hover = 1; + this.showtip(0.6); + } + pointerout(e) { + this.hover = 0; + this.showtip(0); + } + contextMenu(e) { + if (window.webAudioControlsWidgetManager && this.midilearn) + webAudioControlsWidgetManager.contextMenuOpen(e, this); + e.preventDefault(); + e.stopPropagation(); + } + setMidiController(channel, cc) { + if (this.listeningToThisMidiController(channel, cc)) return; + this.midiController = { channel: channel, cc: cc }; + console.log( + "Added mapping for channel=" + + channel + + " cc=" + + cc + + " tooltip=" + + this.tooltip ); - } catch (error) { - console.log("webaudio-keyboard already defined"); } - - class WebAudioControlsWidgetManager { - constructor() { - this.midiAccess = null; - this.listOfWidgets = []; - this.listOfExternalMidiListeners = []; - this.updateWidgets(); - if (opt.preserveMidiLearn) - this.midiLearnTable = JSON.parse( - localStorage.getItem("WebAudioControlsMidiLearn") - ); - else this.midiLearnTable = null; - this.initWebAudioControls(); + listeningToThisMidiController(channel, cc) { + const c = this.midiController; + if ((c.channel === channel || c.channel < 0) && c.cc === cc) return true; + return false; + } + processMidiEvent(event) { + const channel = event.data[0] & 0xf; + const controlNumber = event.data[1]; + if (this.midiMode == "learn") { + this.setMidiController(channel, controlNumber); + webAudioControlsWidgetManager.contextMenuClose(); + this.midiMode = "normal"; + webAudioControlsWidgetManager.preserveMidiLearn(); } - addWidget(w) { - this.listOfWidgets.push(w); + if (this.listeningToThisMidiController(channel, controlNumber)) { + if (this.tagName == "WEBAUDIO-SWITCH") { + switch (this.type) { + case "toggle": + if (event.data[2] >= 64) this.setValue(1 - this.value, true); + break; + case "kick": + this.setValue(event.data[2] >= 64 ? 1 : 0); + break; + case "radio": + let els = document.querySelectorAll( + "webaudio-switch[type='radio'][group='" + this.group + "']" + ); + for (let i = 0; i < els.length; ++i) { + if (els[i] == this) els[i].setValue(1); + else els[i].setValue(0); + } + break; + } + } else { + const val = this.min + ((this.max - this.min) * event.data[2]) / 127; + this.setValue(val, true); + } } - updateWidgets() { - // this.listOfWidgets = document.querySelectorAll("webaudio-knob,webaudio-slider,webaudio-switch"); + } +} +export class WebAudioKnob extends WebAudioControlsWidget { + constructor() { + super(); + } + connectedCallback() { + let root; + if (this.attachShadow) root = this.attachShadow({ mode: "open" }); + else root = this; + root.innerHTML = ` +
+`; + this.elem = root.childNodes[2]; + this.ttframe = this.elem.firstChild; + this.label = this.ttframe.nextSibling; + this.enable = this.getAttr("enable", 1); + this._src = this.getAttr("src", opt.knobSrc); + Object.defineProperty(this, "src", { + get: () => { + return this._src; + }, + set: (v) => { + this._src = v; + this.setupImage(); + }, + }); + this._value = this.getAttr("value", 0); + Object.defineProperty(this, "value", { + get: () => { + return this._value; + }, + set: (v) => { + this._value = v; + this.redraw(); + }, + }); + this.defvalue = this.getAttr("defvalue", this._value); + this._min = this.getAttr("min", 0); + Object.defineProperty(this, "min", { + get: () => { + return this._min; + }, + set: (v) => { + this._min = +v; + this.redraw(); + }, + }); + this._max = this.getAttr("max", 100); + Object.defineProperty(this, "max", { + get: () => { + return this._max; + }, + set: (v) => { + this._max = +v; + this.redraw(); + }, + }); + this._step = this.getAttr("step", 1); + Object.defineProperty(this, "step", { + get: () => { + return this._step; + }, + set: (v) => { + this._step = +v; + this.redraw(); + }, + }); + this._sprites = this.getAttr("sprites", opt.knobSprites); + Object.defineProperty(this, "sprites", { + get: () => { + return this._sprites; + }, + set: (v) => { + this._sprites = v; + this.setupImage(); + }, + }); + this._width = this.getAttr("width", null); + Object.defineProperty(this, "width", { + get: () => { + return this._width; + }, + set: (v) => { + this._width = v; + this.setupImage(); + }, + }); + this._height = this.getAttr("height", null); + Object.defineProperty(this, "height", { + get: () => { + return this._height; + }, + set: (v) => { + this._height = v; + this.setupImage(); + }, + }); + this._diameter = this.getAttr("diameter", null); + Object.defineProperty(this, "diameter", { + get: () => { + return this._diameter; + }, + set: (v) => { + this._diameter = v; + this.setupImage(); + }, + }); + this._colors = this.getAttr("colors", opt.knobColors); + Object.defineProperty(this, "colors", { + get: () => { + return this._colors; + }, + set: (v) => { + this._colors = v; + this.setupImage(); + }, + }); + this.outline = this.getAttr("outline", opt.outline); + this.setupLabel(); + this.log = this.getAttr("log", 0); + this.sensitivity = this.getAttr("sensitivity", 1); + this.valuetip = this.getAttr("valuetip", opt.valuetip); + this.tooltip = this.getAttr("tooltip", null); + this.conv = this.getAttr("conv", null); + if (this.conv) { + const x = this._value; + this.convValue = eval(this.conv); + if (typeof this.convValue == "function") + this.convValue = this.convValue(x); + } else this.convValue = this._value; + this.midilearn = this.getAttr("midilearn", opt.midilearn); + this.midicc = this.getAttr("midicc", null); + this.midiController = {}; + this.midiMode = "normal"; + if (this.midicc) { + let ch = + parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - 1; + let cc = parseInt( + this.midicc.substring(this.midicc.lastIndexOf(".") + 1) + ); + this.setMidiController(ch, cc); } - initWebAudioControls() { - if (navigator.requestMIDIAccess) { - navigator.requestMIDIAccess().then( - (ma) => { - (this.midiAccess = ma), this.enableInputs(); - }, - (err) => { - console.log("MIDI not initialized - error encountered:" + err.code); + if (this.midilearn && this.id) { + if ( + webAudioControlsWidgetManager && + webAudioControlsWidgetManager.midiLearnTable + ) { + const ml = webAudioControlsWidgetManager.midiLearnTable; + for (let i = 0; i < ml.length; ++i) { + if (ml[i].id == this.id) { + this.setMidiController(ml[i].cc.channel, ml[i].cc.cc); + break; } - ); + } } } - enableInputs() { - let inputs = this.midiAccess.inputs.values(); - console.log("Found " + this.midiAccess.inputs.size + " MIDI input(s)"); - for ( - let input = inputs.next(); - input && !input.done; - input = inputs.next() - ) { - console.log("Connected input: " + input.value.name); - input.value.onmidimessage = this.handleMIDIMessage.bind(this); + this.setupImage(); + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + this._setValue(this._value); + this.coltab = ["#e00", "#000", "#000"]; + if (window.webAudioControlsWidgetManager) + window.webAudioControlsWidgetManager.addWidget(this); + } + disconnectedCallback() {} + setupImage() { + this.kw = + this._width || this._diameter || opt.knobWidth || opt.knobDiameter; + this.kh = + this._height || this._diameter || opt.knobHeight || opt.knobDiameter; + if (!this.src) { + if (this.colors) this.coltab = this.colors.split(";"); + if (!this.coltab) this.coltab = ["#e00", "#000", "#000"]; + let svg = ` + + + + + + + + + + + + + + + + + + + + +`; + for (let i = 0; i < 101; ++i) { + svg += ``; } + svg += ""; + this.elem.style.backgroundImage = + "url(data:image/svg+xml;base64," + btoa(svg) + ")"; + if (this.kw == null) this.kw = 64; + if (this.kh == null) this.kh = 64; + this.elem.style.backgroundSize = `${this.kw}px ${this.kh * 101}px`; + this.elem.style.width = this.kw + "px"; + this.elem.style.height = this.kh + "px"; + this.style.height = this.kh + "px"; + this.fireflag = true; + this.redraw(); + return; + } else { + this.img = new Image(); + this.img.onload = () => { + this.elem.style.backgroundImage = "url(" + this.src + ")"; + if (this._sprites == null) + this._sprites = this.img.height / this.img.width - 1; + else this._sprites = +this._sprites; + if (this.kw == null) this.kw = this.img.width; + if (this.kh == null) this.kh = this.img.height / (this.sprites + 1); + if (!this.sprites) this.elem.style.backgroundSize = "100% 100%"; + else + this.elem.style.backgroundSize = `${this.kw}px ${ + this.kh * (this.sprites + 1) + }px`; + this.elem.style.width = this.kw + "px"; + this.elem.style.height = this.kh + "px"; + this.style.height = this.kh + "px"; + this.redraw(); + }; + this.img.src = this.src; } - midiConnectionStateChange(e) { - console.log( - "connection: " + - e.port.name + - " " + - e.port.connection + - " " + - e.port.state - ); - enableInputs(); + } + redraw() { + let ratio; + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; } - - onMIDIStarted(midi) { - this.midiAccess = midi; - midi.onstatechange = this.midiConnectionStateChange; - enableInputs(midi); + if (this.value < this.min) { + this.value = this.min; } - // Add hooks for external midi listeners support - addMidiListener(callback) { - this.listOfExternalMidiListeners.push(callback); + if (this.value > this.max) { + this.value = this.max; } - getCurrentConfigAsJSON() { - return currentConfig.stringify(); + if (this.log) + ratio = Math.log(this.value / this.min) / Math.log(this.max / this.min); + else ratio = (this.value - this.min) / (this.max - this.min); + let style = this.elem.style; + let sp = this.src ? this.sprites : 100; + if (sp >= 1) { + let offset = (sp * ratio) | 0; + style.backgroundPosition = "0px " + -offset * this.kh + "px"; + style.transform = "rotate(0deg)"; + } else { + let deg = 270 * (ratio - 0.5); + style.backgroundPosition = "0px 0px"; + style.transform = "rotate(" + deg + "deg)"; } - handleMIDIMessage(event) { - this.listOfExternalMidiListeners.forEach(function (externalListener) { - externalListener(event); - }); - if ( - (event.data[0] & 0xf0) == 0xf0 || - ((event.data[0] & 0xf0) == 0xb0 && event.data[1] >= 120) - ) - return; - for (let w of this.listOfWidgets) { - if (w.processMidiEvent) w.processMidiEvent(event); + } + _setValue(v) { + if (this.step) + v = Math.round((v - this.min) / this.step) * this.step + this.min; + this._value = Math.min(this.max, Math.max(this.min, v)); + if (this._value != this.oldvalue) { + this.fireflag = true; + this.oldvalue = this._value; + if (this.conv) { + const x = this._value; + this.convValue = eval(this.conv); + if (typeof this.convValue == "function") + this.convValue = this.convValue(x); + } else this.convValue = this._value; + if (typeof this.convValue == "number") { + this.convValue = this.convValue.toFixed(this.digits); } - if (opt.mididump) console.log(event.data); - } - contextMenuOpen(e, knob) { - if (!this.midiAccess) return; - let menu = document.getElementById("webaudioctrl-context-menu"); - menu.style.left = e.pageX + "px"; - menu.style.top = e.pageY + "px"; - menu.knob = knob; - menu.classList.add("active"); - menu.knob.focus(); - menu.knob.addEventListener( - "keydown", - this.contextMenuCloseByKey.bind(this) - ); - } - contextMenuCloseByKey(e) { - if (e.keyCode == 27) this.contextMenuClose(); + this.redraw(); + this.showtip(0); + return 1; } - contextMenuClose() { - let menu = document.getElementById("webaudioctrl-context-menu"); - menu.knob.removeEventListener("keydown", this.contextMenuCloseByKey); - menu.classList.remove("active"); - let menuItemLearn = document.getElementById( - "webaudioctrl-context-menu-learn" - ); - menuItemLearn.innerHTML = "Learn"; - menu.knob.midiMode = "normal"; + return 0; + } + setValue(v, f) { + if (this._setValue(v) && f) + this.sendEvent("input"), this.sendEvent("change"); + } + keydown(e) { + const delta = this.step; + if (delta == 0) delta = 1; + switch (e.key) { + case "ArrowUp": + this.setValue(this.value + delta, true); + break; + case "ArrowDown": + this.setValue(this.value - delta, true); + break; + default: + return; } - contextMenuLearn() { - let menu = document.getElementById("webaudioctrl-context-menu"); - let menuItemLearn = document.getElementById( - "webaudioctrl-context-menu-learn" - ); - menuItemLearn.innerHTML = "Listening..."; - menu.knob.midiMode = "learn"; + e.preventDefault(); + e.stopPropagation(); + } + wheel(e) { + if (!this.enable) return; + if (this.log) { + let r = Math.log(this.value / this.min) / Math.log(this.max / this.min); + let d = e.deltaY > 0 ? -0.01 : 0.01; + if (!e.shiftKey) d *= 5; + r += d; + this.setValue(this.min * Math.pow(this.max / this.min, r), true); + } else { + let delta = Math.max(this.step, (this.max - this.min) * 0.05); + if (e.shiftKey) delta = this.step ? this.step : 1; + delta = e.deltaY > 0 ? -delta : delta; + this.setValue(+this.value + delta, true); } - contextMenuClear(e) { - let menu = document.getElementById("webaudioctrl-context-menu"); - menu.knob.midiController = {}; - this.contextMenuClose(); + e.preventDefault(); + e.stopPropagation(); + } + pointerdown(ev) { + if (!this.enable) return; + let e = ev; + if (ev.touches) { + e = ev.changedTouches[0]; + this.identifier = e.identifier; + } else { + if (e.buttons != 1 && e.button != 0) return; } - preserveMidiLearn() { - if (!opt.preserveMidiLearn) return; - const v = []; - for (let w of this.listOfWidgets) { - if (w.id) v.push({ id: w.id, cc: w.midiController }); + this.elem.focus(); + this.drag = 1; + this.showtip(0); + this.oldvalue = this._value; + let pointermove = (ev) => { + let e = ev; + if (ev.touches) { + for (let i = 0; i < ev.touches.length; ++i) { + if (ev.touches[i].identifier == this.identifier) { + e = ev.touches[i]; + break; + } + } } - const s = JSON.stringify(v); - localStorage.setItem("WebAudioControlsMidiLearn", s); + if (this.lastShift !== e.shiftKey) { + this.lastShift = e.shiftKey; + this.startPosX = e.pageX; + this.startPosY = e.pageY; + this.startVal = this.value; + } + let offset = + (this.startPosY - e.pageY - this.startPosX + e.pageX) * + this.sensitivity; + if (this.log) { + let r = + Math.log(this.startVal / this.min) / Math.log(this.max / this.min); + r += offset / ((e.shiftKey ? 4 : 1) * 128); + if (r < 0) r = 0; + if (r > 1) r = 1; + this._setValue(this.min * Math.pow(this.max / this.min, r)); + } else { + this._setValue( + this.min + + (((this.startVal + + ((this.max - this.min) * offset) / ((e.shiftKey ? 4 : 1) * 128) - + this.min) / + this.step) | + 0) * + this.step + ); + } + if (this.fireflag) { + this.sendEvent("input"); + this.fireflag = false; + } + if (e.preventDefault) e.preventDefault(); + if (e.stopPropagation) e.stopPropagation(); + return false; + }; + let pointerup = (ev) => { + let e = ev; + if (ev.touches) { + for (let i = 0; ; ) { + if (ev.changedTouches[i].identifier == this.identifier) { + break; + } + if (++i >= ev.changedTouches.length) return; + } + } + this.drag = 0; + this.showtip(0); + this.startPosX = this.startPosY = null; + window.removeEventListener("mousemove", pointermove); + window.removeEventListener("touchmove", pointermove, { + passive: false, + }); + window.removeEventListener("mouseup", pointerup); + window.removeEventListener("touchend", pointerup); + window.removeEventListener("touchcancel", pointerup); + document.body.removeEventListener("touchstart", preventScroll, { + passive: false, + }); + this.sendEvent("change"); + }; + let preventScroll = (e) => { + e.preventDefault(); + }; + if (e.ctrlKey || e.metaKey) this.setValue(this.defvalue, true); + else { + this.startPosX = e.pageX; + this.startPosY = e.pageY; + this.startVal = this.value; + window.addEventListener("mousemove", pointermove); + window.addEventListener("touchmove", pointermove, { + passive: false, + }); } + window.addEventListener("mouseup", pointerup); + window.addEventListener("touchend", pointerup); + window.addEventListener("touchcancel", pointerup); + document.body.addEventListener("touchstart", preventScroll, { + passive: false, + }); + ev.preventDefault(); + ev.stopPropagation(); + return false; } - if (window.UseWebAudioControlsMidi || opt.useMidi) - window.webAudioControlsWidgetManager = window.webAudioControlsMidiManager = - new WebAudioControlsWidgetManager(); } diff --git a/yarn.lock b/yarn.lock index fb91ef4..3222eb1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -173,9 +173,9 @@ semver "^6.3.0" "@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.18.13", "@babel/generator@^7.19.3", "@babel/generator@^7.19.4", "@babel/generator@^7.7.2": - version "7.19.4" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.4.tgz#60050cf3f0a593d7b2471b4be4f62a56b949237f" - integrity sha512-5T2lY5vXqS+5UEit/5TwcIUeCnwgCljcF8IQRT6XRQPBrvLeq5V8W+URv+GvwoF3FP8tkhp++evVyDzkDGzNmA== + version "7.19.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.5.tgz#da3f4b301c8086717eee9cab14da91b1fa5dcca7" + integrity sha512-DxbNz9Lz4aMZ99qPpO1raTbcrI1ZeYh+9NR9qhfkQIbFtVEqotHojEBxHzmxhVONkGt6VyrqVQcgpefMy9pqcg== dependencies: "@babel/types" "^7.19.4" "@jridgewell/gen-mapping" "^0.3.2" @@ -658,7 +658,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.2.0", "@babel/plugin-syntax-import-meta@^7.8.3": +"@babel/plugin-syntax-import-meta@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51" integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g== @@ -1192,7 +1192,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78" integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA== @@ -1206,7 +1206,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.3.3", "@babel/template@^7.7.0": +"@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.3.3": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71" integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA== @@ -1789,16 +1789,16 @@ jest-util "^28.1.3" slash "^3.0.0" -"@jest/console@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.1.2.tgz#0ae975a70004696f8320490fcaa1a4152f7b62e4" - integrity sha512-ujEBCcYs82BTmRxqfHMQggSlkUZP63AE5YEaTPj7eFyJOzukkTorstOUC7L6nE3w5SYadGVAnTsQ/ZjTGL0qYQ== +"@jest/console@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.2.1.tgz#5f2c62dcdd5ce66e94b6d6729e021758bceea090" + integrity sha512-MF8Adcw+WPLZGBiNxn76DOuczG3BhODTcMlDCA4+cFi41OkaY/lyI0XUUhi73F88Y+7IHoGmD80pN5CtxQUdSw== dependencies: - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" "@types/node" "*" chalk "^4.0.0" - jest-message-util "^29.1.2" - jest-util "^29.1.2" + jest-message-util "^29.2.1" + jest-util "^29.2.1" slash "^3.0.0" "@jest/core@^28.1.3": @@ -1836,37 +1836,37 @@ slash "^3.0.0" strip-ansi "^6.0.0" -"@jest/core@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.1.2.tgz#e5ce7a71e7da45156a96fb5eeed11d18b67bd112" - integrity sha512-sCO2Va1gikvQU2ynDN8V4+6wB7iVrD2CvT0zaRst4rglf56yLly0NQ9nuRRAWFeimRf+tCdFsb1Vk1N9LrrMPA== +"@jest/core@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.2.1.tgz#30af794ebd73bfb87cd8ba36718738dfe38b772e" + integrity sha512-kuLKYqnqgerXkBUwlHVxeSuhSnd+JMnMCLfU98bpacBSfWEJPegytDh3P2m15/JHzet32hGGld4KR4OzMb6/Tg== dependencies: - "@jest/console" "^29.1.2" - "@jest/reporters" "^29.1.2" - "@jest/test-result" "^29.1.2" - "@jest/transform" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/console" "^29.2.1" + "@jest/reporters" "^29.2.1" + "@jest/test-result" "^29.2.1" + "@jest/transform" "^29.2.1" + "@jest/types" "^29.2.1" "@types/node" "*" ansi-escapes "^4.2.1" chalk "^4.0.0" ci-info "^3.2.0" exit "^0.1.2" graceful-fs "^4.2.9" - jest-changed-files "^29.0.0" - jest-config "^29.1.2" - jest-haste-map "^29.1.2" - jest-message-util "^29.1.2" - jest-regex-util "^29.0.0" - jest-resolve "^29.1.2" - jest-resolve-dependencies "^29.1.2" - jest-runner "^29.1.2" - jest-runtime "^29.1.2" - jest-snapshot "^29.1.2" - jest-util "^29.1.2" - jest-validate "^29.1.2" - jest-watcher "^29.1.2" + jest-changed-files "^29.2.0" + jest-config "^29.2.1" + jest-haste-map "^29.2.1" + jest-message-util "^29.2.1" + jest-regex-util "^29.2.0" + jest-resolve "^29.2.1" + jest-resolve-dependencies "^29.2.1" + jest-runner "^29.2.1" + jest-runtime "^29.2.1" + jest-snapshot "^29.2.1" + jest-util "^29.2.1" + jest-validate "^29.2.1" + jest-watcher "^29.2.1" micromatch "^4.0.4" - pretty-format "^29.1.2" + pretty-format "^29.2.1" slash "^3.0.0" strip-ansi "^6.0.0" @@ -1880,15 +1880,15 @@ "@types/node" "*" jest-mock "^28.1.3" -"@jest/environment@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.1.2.tgz#bb51a43fce9f960ba9a48f0b5b556f30618ebc0a" - integrity sha512-rG7xZ2UeOfvOVzoLIJ0ZmvPl4tBEQ2n73CZJSlzUjPw4or1oSWC0s0Rk0ZX+pIBJ04aVr6hLWFn1DFtrnf8MhQ== +"@jest/environment@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.2.1.tgz#acb1994fbd5ad02819a1a34a923c531e6923b665" + integrity sha512-EutqA7T/X6zFjw6mAWRHND+ZkTPklmIEWCNbmwX6uCmOrFrWaLbDZjA+gePHJx6fFMMRvNfjXcvzXEtz54KPlg== dependencies: - "@jest/fake-timers" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/fake-timers" "^29.2.1" + "@jest/types" "^29.2.1" "@types/node" "*" - jest-mock "^29.1.2" + jest-mock "^29.2.1" "@jest/expect-utils@^28.1.3": version "28.1.3" @@ -1897,12 +1897,12 @@ dependencies: jest-get-type "^28.0.2" -"@jest/expect-utils@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.1.2.tgz#66dbb514d38f7d21456bc774419c9ae5cca3f88d" - integrity sha512-4a48bhKfGj/KAH39u0ppzNTABXQ8QPccWAFUFobWBaEMSMp+sB31Z2fK/l47c4a/Mu1po2ffmfAIPxXbVTXdtg== +"@jest/expect-utils@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.2.1.tgz#eae61c90f2066540f60d23b8f254f03b7869b22f" + integrity sha512-yr4aHNg5Z1CjKby5ozm7sKjgBlCOorlAoFcvrOQ/4rbZRfgZQdnmh7cth192PYIgiPZo2bBXvqdOApnAMWFJZg== dependencies: - jest-get-type "^29.0.0" + jest-get-type "^29.2.0" "@jest/expect@^28.1.3": version "28.1.3" @@ -1912,13 +1912,13 @@ expect "^28.1.3" jest-snapshot "^28.1.3" -"@jest/expect@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.1.2.tgz#334a86395f621f1ab63ad95b06a588b9114d7b7a" - integrity sha512-FXw/UmaZsyfRyvZw3M6POgSNqwmuOXJuzdNiMWW9LCYo0GRoRDhg+R5iq5higmRTHQY7hx32+j7WHwinRmoILQ== +"@jest/expect@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.2.1.tgz#8d99be3886ebfcffd6cabb2b46602a301b976ffe" + integrity sha512-o14R2t2tHHHudwji43UKkzmmH49xfF5T++FQBK2tl88qwuBWQOcx7fNUYl+mA/9TPNAN0FkQ3usnpyS8FUwsvQ== dependencies: - expect "^29.1.2" - jest-snapshot "^29.1.2" + expect "^29.2.1" + jest-snapshot "^29.2.1" "@jest/fake-timers@^28.1.3": version "28.1.3" @@ -1932,17 +1932,17 @@ jest-mock "^28.1.3" jest-util "^28.1.3" -"@jest/fake-timers@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.1.2.tgz#f157cdf23b4da48ce46cb00fea28ed1b57fc271a" - integrity sha512-GppaEqS+QQYegedxVMpCe2xCXxxeYwQ7RsNx55zc8f+1q1qevkZGKequfTASI7ejmg9WwI+SJCrHe9X11bLL9Q== +"@jest/fake-timers@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.2.1.tgz#786d60e8cb60ca70c9f913cb49fcc77610c072bb" + integrity sha512-KWil+8fef7Uj/P/PTZlPKk1Pw117wAmr71VWFV8ZDtRtkwmTG8oY4IRf0Ss44J2y5CYRy8d/zLOhxyoGRENjvA== dependencies: - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" "@sinonjs/fake-timers" "^9.1.2" "@types/node" "*" - jest-message-util "^29.1.2" - jest-mock "^29.1.2" - jest-util "^29.1.2" + jest-message-util "^29.2.1" + jest-mock "^29.2.1" + jest-util "^29.2.1" "@jest/globals@^28.1.3": version "28.1.3" @@ -1953,15 +1953,15 @@ "@jest/expect" "^28.1.3" "@jest/types" "^28.1.3" -"@jest/globals@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.1.2.tgz#826ede84bc280ae7f789cb72d325c48cd048b9d3" - integrity sha512-uMgfERpJYoQmykAd0ffyMq8wignN4SvLUG6orJQRe9WAlTRc9cdpCaE/29qurXixYJVZWUqIBXhSk8v5xN1V9g== +"@jest/globals@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.2.1.tgz#6933beb8b4e43b990409a19c462fde7b71210e63" + integrity sha512-Z4EejYPP1OPVq2abk1+9urAwJqkgw5jB2UJGlPjb5ZwzPQF8WLMcigKEfFzZb2OHhEVPP0RZD0/DbVTY1R6iQA== dependencies: - "@jest/environment" "^29.1.2" - "@jest/expect" "^29.1.2" - "@jest/types" "^29.1.2" - jest-mock "^29.1.2" + "@jest/environment" "^29.2.1" + "@jest/expect" "^29.2.1" + "@jest/types" "^29.2.1" + jest-mock "^29.2.1" "@jest/reporters@^28.1.3": version "28.1.3" @@ -1994,16 +1994,16 @@ terminal-link "^2.0.0" v8-to-istanbul "^9.0.1" -"@jest/reporters@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.1.2.tgz#5520898ed0a4ecf69d8b671e1dc8465d0acdfa6e" - integrity sha512-X4fiwwyxy9mnfpxL0g9DD0KcTmEIqP0jUdnc2cfa9riHy+I6Gwwp5vOZiwyg0vZxfSDxrOlK9S4+340W4d+DAA== +"@jest/reporters@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.2.1.tgz#599e4376823751fdda50f2ca97243e013da10c4d" + integrity sha512-sCsfUKM/yIF4nNed3e/rIgVIS58EiASGMDEPWqItfLZ9UO1ALW2ASDNJzdWkxEt0T8o2Ztj619G0KKrvK+McAw== dependencies: "@bcoe/v8-coverage" "^0.2.3" - "@jest/console" "^29.1.2" - "@jest/test-result" "^29.1.2" - "@jest/transform" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/console" "^29.2.1" + "@jest/test-result" "^29.2.1" + "@jest/transform" "^29.2.1" + "@jest/types" "^29.2.1" "@jridgewell/trace-mapping" "^0.3.15" "@types/node" "*" chalk "^4.0.0" @@ -2016,13 +2016,12 @@ istanbul-lib-report "^3.0.0" istanbul-lib-source-maps "^4.0.0" istanbul-reports "^3.1.3" - jest-message-util "^29.1.2" - jest-util "^29.1.2" - jest-worker "^29.1.2" + jest-message-util "^29.2.1" + jest-util "^29.2.1" + jest-worker "^29.2.1" slash "^3.0.0" string-length "^4.0.1" strip-ansi "^6.0.0" - terminal-link "^2.0.0" v8-to-istanbul "^9.0.1" "@jest/schemas@^28.1.3": @@ -2048,10 +2047,10 @@ callsites "^3.0.0" graceful-fs "^4.2.9" -"@jest/source-map@^29.0.0": - version "29.0.0" - resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.0.0.tgz#f8d1518298089f8ae624e442bbb6eb870ee7783c" - integrity sha512-nOr+0EM8GiHf34mq2GcJyz/gYFyLQ2INDhAylrZJ9mMWoW21mLBfZa0BUVPPMxVYrLjeiRe2Z7kWXOGnS0TFhQ== +"@jest/source-map@^29.2.0": + version "29.2.0" + resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.2.0.tgz#ab3420c46d42508dcc3dc1c6deee0b613c235744" + integrity sha512-1NX9/7zzI0nqa6+kgpSdKPK+WU1p+SJk3TloWZf5MzPbxri9UEeXX5bWZAPCzbQcyuAzubcdUHA7hcNznmRqWQ== dependencies: "@jridgewell/trace-mapping" "^0.3.15" callsites "^3.0.0" @@ -2067,13 +2066,13 @@ "@types/istanbul-lib-coverage" "^2.0.0" collect-v8-coverage "^1.0.0" -"@jest/test-result@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.1.2.tgz#6a8d006eb2b31ce0287d1fc10d12b8ff8504f3c8" - integrity sha512-jjYYjjumCJjH9hHCoMhA8PCl1OxNeGgAoZ7yuGYILRJX9NjgzTN0pCT5qAoYR4jfOP8htIByvAlz9vfNSSBoVg== +"@jest/test-result@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.2.1.tgz#f42dbf7b9ae465d0a93eee6131473b8bb3bd2edb" + integrity sha512-lS4+H+VkhbX6z64tZP7PAUwPqhwj3kbuEHcaLuaBuB+riyaX7oa1txe0tXgrFj5hRWvZKvqO7LZDlNWeJ7VTPA== dependencies: - "@jest/console" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/console" "^29.2.1" + "@jest/types" "^29.2.1" "@types/istanbul-lib-coverage" "^2.0.0" collect-v8-coverage "^1.0.0" @@ -2087,14 +2086,14 @@ jest-haste-map "^28.1.3" slash "^3.0.0" -"@jest/test-sequencer@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.1.2.tgz#10bfd89c08bfdba382eb05cc79c1d23a01238a93" - integrity sha512-fU6dsUqqm8sA+cd85BmeF7Gu9DsXVWFdGn9taxM6xN1cKdcP/ivSgXh5QucFRFz1oZxKv3/9DYYbq0ULly3P/Q== +"@jest/test-sequencer@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.2.1.tgz#cafd2c5f3528c70bd4cc243800459ac366e480cc" + integrity sha512-O/pnk0/xGj3lxPVNwB6HREJ7AYvUdyP2xo/s14/9Dtf091HoOeyIhWLKQE/4HzB8lNQBMo6J5mg0bHz/uCWK7w== dependencies: - "@jest/test-result" "^29.1.2" + "@jest/test-result" "^29.2.1" graceful-fs "^4.2.9" - jest-haste-map "^29.1.2" + jest-haste-map "^29.2.1" slash "^3.0.0" "@jest/transform@^26.6.2": @@ -2139,22 +2138,22 @@ slash "^3.0.0" write-file-atomic "^4.0.1" -"@jest/transform@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.1.2.tgz#20f814696e04f090421f6d505c14bbfe0157062a" - integrity sha512-2uaUuVHTitmkx1tHF+eBjb4p7UuzBG7SXIaA/hNIkaMP6K+gXYGxP38ZcrofzqN0HeZ7A90oqsOa97WU7WZkSw== +"@jest/transform@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.2.1.tgz#f3d8154edd19cdbcaf1d6646bd8f4ff7812318a2" + integrity sha512-xup+iEuaIRSQabQaeqxaQyN0vg1Dctrp9oTObQsNf3sZEowTIa5cANYuoyi8Tqhg4GCqEVLTf18KW7ii0UeFVA== dependencies: "@babel/core" "^7.11.6" - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" "@jridgewell/trace-mapping" "^0.3.15" babel-plugin-istanbul "^6.1.1" chalk "^4.0.0" convert-source-map "^1.4.0" fast-json-stable-stringify "^2.1.0" graceful-fs "^4.2.9" - jest-haste-map "^29.1.2" - jest-regex-util "^29.0.0" - jest-util "^29.1.2" + jest-haste-map "^29.2.1" + jest-regex-util "^29.2.0" + jest-util "^29.2.1" micromatch "^4.0.4" pirates "^4.0.4" slash "^3.0.0" @@ -2194,10 +2193,10 @@ "@types/yargs" "^17.0.8" chalk "^4.0.0" -"@jest/types@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.1.2.tgz#7442d32b16bcd7592d9614173078b8c334ec730a" - integrity sha512-DcXGtoTykQB5jiwCmVr8H4vdg2OJhQex3qPkG+ISyDO7xQXbt/4R6dowcRyPemRnkH7JoHvZuxPBdlq+9JxFCg== +"@jest/types@^29.2.1": + version "29.2.1" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.2.1.tgz#ec9c683094d4eb754e41e2119d8bdaef01cf6da0" + integrity sha512-O/QNDQODLnINEPAI0cl9U6zUIDXEWXt6IC1o2N2QENuos7hlGUIthlKyV4p6ki3TvXFX071blj8HUhgLGquPjw== dependencies: "@jest/schemas" "^29.0.0" "@types/istanbul-lib-coverage" "^2.0.0" @@ -2255,9 +2254,9 @@ "@jridgewell/sourcemap-codec" "^1.4.10" "@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.9": - version "0.3.16" - resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.16.tgz#a7982f16c18cae02be36274365433e5b49d7b23f" - integrity sha512-LCQ+NeThyJ4k1W2d+vIKdxuSt9R3pQSZ4P92m7EakaYuXcVWbHuT5bjNcqLd4Rdgi6xYWYDvBJZJLZSLanjDcA== + version "0.3.17" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985" + integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g== dependencies: "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" @@ -2592,9 +2591,9 @@ resolve "^1.22.1" "@rollup/plugin-typescript@^9.0.0": - version "9.0.0" - resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-9.0.0.tgz#ab7267b1df7a578f2786e4b24100dee001856a4a" - integrity sha512-zGTFF6bt/Vl9LzsBfKsqNu01G3ILNhwmkGP/zciLv4bQ2JPNIAJEBabph4S8aq3pdhDNdm1ISUMQ9rBDzLIqLA== + version "9.0.1" + resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-9.0.1.tgz#3358c78be36aecacb045c76433af06f4428588a2" + integrity sha512-fj+CTk8+HvFCEwwDQdNgWd0lIJVXtMQ0Z3vH/ZgzFSbK2s1zs5wjZrjzrhViTTN+UF49+P69/tybgKRdGHpj/Q== dependencies: "@rollup/pluginutils" "^4.2.1" resolve "^1.22.1" @@ -2625,9 +2624,9 @@ integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ== "@sinclair/typebox@^0.24.1": - version "0.24.44" - resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.44.tgz#0a0aa3bf4a155a678418527342a3ee84bd8caa5c" - integrity sha512-ka0W0KN5i6LfrSocduwliMMpqVgohtPFidKdMEOUjoOFCHcOOYkKsPRxfs5f15oPNHTm6ERAm0GV/+/LTKeiWg== + version "0.24.47" + resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.47.tgz#530b67163714356f93e82bdb871e7db4b7bc564e" + integrity sha512-J4Xw0xYK4h7eC34MNOPQi6IkNxGRck6n4VJpWDzXIFVTW8I/D43Gf+NfWz/v/7NHlzWOPd3+T4PJ4OqklQ2u7A== "@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0", "@sinonjs/commons@^1.8.3": version "1.8.3" @@ -3623,34 +3622,6 @@ regenerator-runtime "^0.13.7" resolve-from "^5.0.0" -"@storybook/web-components@^6.5.12": - version "6.5.12" - resolved "https://registry.yarnpkg.com/@storybook/web-components/-/web-components-6.5.12.tgz#1bdfeae58ac9e8ea05228978a810de35acec44fc" - integrity sha512-SkaLdaCYNXiKKtXoDcZ7sDvONkIB/NNfe39Kkijm/sotymi+7iDzbywwyAZY6tFxSy9DUkVZWQgexpmFpogWkw== - dependencies: - "@babel/plugin-syntax-dynamic-import" "^7.8.3" - "@babel/plugin-syntax-import-meta" "^7.10.4" - "@babel/preset-env" "^7.12.11" - "@storybook/addons" "6.5.12" - "@storybook/client-api" "6.5.12" - "@storybook/client-logger" "6.5.12" - "@storybook/core" "6.5.12" - "@storybook/core-common" "6.5.12" - "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/docs-tools" "6.5.12" - "@storybook/preview-web" "6.5.12" - "@storybook/store" "6.5.12" - "@types/node" "^14.14.20 || ^16.0.0" - "@types/webpack-env" "^1.16.0" - babel-plugin-bundled-import-meta "^0.3.1" - core-js "^3.8.2" - global "^4.4.0" - react "16.14.0" - react-dom "16.14.0" - read-pkg-up "^7.0.1" - regenerator-runtime "^0.13.7" - ts-dedent "^2.0.0" - "@testing-library/dom@^8.3.0", "@testing-library/dom@^8.5.0": version "8.19.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f" @@ -3880,9 +3851,9 @@ "@types/jest" "*" "@types/jest@*", "@types/jest@>=26.0.0", "@types/jest@^29.1.2": - version "29.1.2" - resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.1.2.tgz#7ad8077043ab5f6c108c8111bcc1d224e5600a87" - integrity sha512-y+nlX0h87U0R+wsGn6EBuoRWYyv3KFtwRNP3QWp9+k2tJ2/bqcGS3UxD7jgT+tiwJWWq3UsyV4Y+T6rsMT4XMg== + version "29.2.0" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.2.0.tgz#fa98e08b46ab119f1a74a9552c48c589f5378a96" + integrity sha512-KO7bPV21d65PKwv3LLsD8Jn3E05pjNjRZvkm+YTacWhVmykAb07wW6IkZUmQAltwQafNcDUEUrMO2h3jeBSisg== dependencies: expect "^29.0.0" pretty-format "^29.0.0" @@ -3935,14 +3906,14 @@ form-data "^3.0.0" "@types/node@*": - version "18.8.3" - resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.3.tgz#ce750ab4017effa51aed6a7230651778d54e327c" - integrity sha512-0os9vz6BpGwxGe9LOhgP/ncvYN5Tx1fNcd2TM3rD/aCGBkysb+ZWpXEocG24h6ZzOi13+VB8HndAQFezsSOw1w== + version "18.11.2" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.2.tgz#c59b7641832531264fda3f1ba610362dc9a7dfc8" + integrity sha512-BWN3M23gLO2jVG8g/XHIRFWiiV4/GckeFIqbU/C4V3xpoBBWSMk4OZomouN0wCkfQFPqgZikyLr7DOYDysIkkw== "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0": - version "16.11.64" - resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.64.tgz#9171f327298b619e2c52238b120c19056415d820" - integrity sha512-z5hPTlVFzNwtJ2LNozTpJcD1Cu44c4LNuzaq1mwxmiHWQh2ULdR6Vjwo1UGldzRpzL0yUEdZddnfqGW2G70z6Q== + version "16.11.68" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.68.tgz#30ee923f4d940793e0380f5ce61c0bd4b7196b6c" + integrity sha512-JkRpuVz3xCNCWaeQ5EHLR/6woMbHZz/jZ7Kmc63AkU+1HxnoUugzSWMck7dsR4DvNYX8jp9wTi9K7WvnxOIQZQ== "@types/normalize-package-data@^2.4.0": version "2.4.1" @@ -4053,11 +4024,6 @@ resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397" integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw== -"@types/trusted-types@^2.0.2": - version "2.0.2" - resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756" - integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg== - "@types/uglify-js@*": version "3.17.0" resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.17.0.tgz#95271e7abe0bf7094c60284f76ee43232aef43b9" @@ -4092,9 +4058,9 @@ source-map "^0.7.3" "@types/webpack@^4.41.26", "@types/webpack@^4.41.8": - version "4.41.32" - resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.32.tgz#a7bab03b72904070162b2f169415492209e94212" - integrity sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg== + version "4.41.33" + resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.33.tgz#16164845a5be6a306bcbe554a8e67f9cac215ffc" + integrity sha512-PPajH64Ft2vWevkerISMtnZ8rTs4YmRbs+23c402J0INmxDKCrhZNvwZYtzx96gY2wAtXdrK1BS2fiC8MlLr3g== dependencies: "@types/node" "*" "@types/tapable" "^1" @@ -4936,15 +4902,15 @@ babel-jest@^28.1.3: graceful-fs "^4.2.9" slash "^3.0.0" -babel-jest@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.1.2.tgz#540d3241925c55240fb0c742e3ffc5f33a501978" - integrity sha512-IuG+F3HTHryJb7gacC7SQ59A9kO56BctUsT67uJHp1mMCHUOMXpDwOHWGifWqdWVknN2WNkCVQELPjXx0aLJ9Q== +babel-jest@^29.1.2, babel-jest@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.2.1.tgz#213c47e28072de11bdb98c9d29b89f2ab99664f1" + integrity sha512-gQJwArok0mqoREiCYhXKWOgUhElJj9DpnssW6GL8dG7ARYqHEhrM9fmPHTjdqEGRVXZAd6+imo3/Vwa8TjLcsw== dependencies: - "@jest/transform" "^29.1.2" + "@jest/transform" "^29.2.1" "@types/babel__core" "^7.1.14" babel-plugin-istanbul "^6.1.1" - babel-preset-jest "^29.0.2" + babel-preset-jest "^29.2.0" chalk "^4.0.0" graceful-fs "^4.2.9" slash "^3.0.0" @@ -4972,14 +4938,6 @@ babel-plugin-apply-mdx-type-prop@1.6.22: "@babel/helper-plugin-utils" "7.10.4" "@mdx-js/util" "1.6.22" -babel-plugin-bundled-import-meta@^0.3.1: - version "0.3.2" - resolved "https://registry.yarnpkg.com/babel-plugin-bundled-import-meta/-/babel-plugin-bundled-import-meta-0.3.2.tgz#b99ebc651888030a668fb6660bb1c933020625e0" - integrity sha512-RMXzsnWoFHDSUc1X/QiejEwQBtQ0Y68HQZ542JQ4voFa5Sgl5f/D4T7+EOocUeSbiT4XIDbrhfxbH5OmcV8Ibw== - dependencies: - "@babel/plugin-syntax-import-meta" "^7.2.0" - "@babel/template" "^7.7.0" - babel-plugin-dynamic-import-node@^2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3" @@ -5015,10 +4973,10 @@ babel-plugin-jest-hoist@^28.1.3: "@types/babel__core" "^7.1.14" "@types/babel__traverse" "^7.0.6" -babel-plugin-jest-hoist@^29.0.2: - version "29.0.2" - resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.0.2.tgz#ae61483a829a021b146c016c6ad39b8bcc37c2c8" - integrity sha512-eBr2ynAEFjcebVvu8Ktx580BD1QKCrBG1XwEUTXJe285p9HA/4hOhfWCFRQhTKSyBV0VzjhG7H91Eifz9s29hg== +babel-plugin-jest-hoist@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.2.0.tgz#23ee99c37390a98cfddf3ef4a78674180d823094" + integrity sha512-TnspP2WNiR3GLfCsUNHqeXw0RoQ2f9U5hQ5L3XFpwuO8htQmSrhh8qsB6vi5Yi8+kuynN1yjDjQsPfkebmB6ZA== dependencies: "@babel/template" "^7.3.3" "@babel/types" "^7.3.3" @@ -5117,12 +5075,12 @@ babel-preset-jest@^28.1.3: babel-plugin-jest-hoist "^28.1.3" babel-preset-current-node-syntax "^1.0.0" -babel-preset-jest@^29.0.2: - version "29.0.2" - resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.0.2.tgz#e14a7124e22b161551818d89e5bdcfb3b2b0eac7" - integrity sha512-BeVXp7rH5TK96ofyEnHjznjLMQ2nAeDJ+QzxKnHAAMs0RgrQsCywjAN8m4mOm5Di0pxU//3AoEeJJrerMH5UeA== +babel-preset-jest@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.2.0.tgz#3048bea3a1af222e3505e4a767a974c95a7620dc" + integrity sha512-z9JmMJppMxNv8N7fNRHvhMg9cvIkMxQBXgFkane3yKVEvEOP+kB50lk8DFRvF9PGqbyXxlmebKWhuDORO8RgdA== dependencies: - babel-plugin-jest-hoist "^29.0.2" + babel-plugin-jest-hoist "^29.2.0" babel-preset-current-node-syntax "^1.0.0" bail@^1.0.0: @@ -5576,9 +5534,9 @@ camelcase@^6.2.0: integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== camelize@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" - integrity sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg== + version "1.0.1" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== can-bind-to-host@^1.1.1: version "1.1.2" @@ -5586,9 +5544,9 @@ can-bind-to-host@^1.1.1: integrity sha512-CqsgmaqiyFRNtP17Ihqa/uHbZxRirntNVNl/kJz31DLKuNRfzvzionkLoUSkElQ6Cz+cpXKA3mhHq4tjbieujA== caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001400: - version "1.0.30001418" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6" - integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg== + version "1.0.30001422" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001422.tgz#f2d7c6202c49a8359e6e35add894d88ef93edba1" + integrity sha512-hSesn02u1QacQHhaxl/kNMZwqVG35Sz/8DgvmgedxSH8z9UUpcDYSPYgsj3x5dQNRcNp6BwpSfQfVzYUTm+fog== capture-exit@^2.0.0: version "2.0.0" @@ -5739,11 +5697,6 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5: - version "2.3.2" - resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" - integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== - clean-css@^4.2.3: version "4.2.4" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178" @@ -6069,14 +6022,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369" - integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA== - dependencies: - safe-buffer "~5.1.1" - -convert-source-map@^1.5.0: +convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.9.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== @@ -6420,9 +6366,9 @@ decamelize@^1.1.2, decamelize@^1.2.0: integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA== decimal.js@^10.4.1: - version "10.4.1" - resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.1.tgz#be75eeac4a2281aace80c1a8753587c27ef053e7" - integrity sha512-F29o+vci4DodHYT9UrR5IEbfBw9pE5eSapIJdTqXK5+6hq+t8VRxwQyKlW2i+KDKFkkJQRvFyI/QXD83h8LyQw== + version "10.4.2" + resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e" + integrity sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA== decode-uri-component@^0.2.0: version "0.2.0" @@ -6605,10 +6551,10 @@ diff-sequences@^28.1.1: resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6" integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw== -diff-sequences@^29.0.0: - version "29.0.0" - resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.0.0.tgz#bae49972ef3933556bcb0800b72e8579d19d9e4f" - integrity sha512-7Qe/zd1wxSDL4D/X/FPjOMB+ZMDt71W94KYaq05I2l0oQqgXgs7s4ftYYmV38gBSrPz2vcygxfs1xn0FT+rKNA== +diff-sequences@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.2.0.tgz#4c55b5b40706c7b5d2c5c75999a50c56d214e8f6" + integrity sha512-413SY5JpYeSBZxmenGEmCVQ8mCgtFJF0w9PROdaS6z987XC2Pd2GOKqOITLtMftmyFZqgtCOb/QA7/Z3ZXfzIw== diff@^4.0.1: version "4.0.2" @@ -6786,9 +6732,9 @@ ee-first@1.1.1: integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow== electron-to-chromium@^1.4.251: - version "1.4.276" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.276.tgz#17837b19dafcc43aba885c4689358b298c19b520" - integrity sha512-EpuHPqu8YhonqLBXHoU6hDJCD98FCe6KDoet3/gY1qsQ6usjJoHqBH2YIVs8FXaAtHwVL8Uqa/fsYao/vq9VWQ== + version "1.4.284" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592" + integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA== element-resize-detector@^1.2.2: version "1.2.4" @@ -7203,16 +7149,16 @@ expect@^28.1.3: jest-message-util "^28.1.3" jest-util "^28.1.3" -expect@^29.0.0, expect@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/expect/-/expect-29.1.2.tgz#82f8f28d7d408c7c68da3a386a490ee683e1eced" - integrity sha512-AuAGn1uxva5YBbBlXb+2JPxJRuemZsmlGcapPXWNSBNsQtAULfjioREGBWuI0EOvYUKjDnrCy8PW5Zlr1md5mw== +expect@^29.0.0, expect@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/expect/-/expect-29.2.1.tgz#25752d0df92d3daa5188dc8804de1f30759658cf" + integrity sha512-BJtA754Fba0YWRWHgjKUMTA3ltWarKgITXHQnbZ2mTxTXC4yMQlR0FI7HkB3fJYkhWBf4qjNiqvg3LDtXCcVRQ== dependencies: - "@jest/expect-utils" "^29.1.2" - jest-get-type "^29.0.0" - jest-matcher-utils "^29.1.2" - jest-message-util "^29.1.2" - jest-util "^29.1.2" + "@jest/expect-utils" "^29.2.1" + jest-get-type "^29.2.0" + jest-matcher-utils "^29.2.1" + jest-message-util "^29.2.1" + jest-util "^29.2.1" express@^4.17.1: version "4.18.2" @@ -7663,9 +7609,9 @@ forwarded@0.2.0: integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow== fp-ts@^2.5.3: - version "2.12.3" - resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-2.12.3.tgz#d991b1e8467d325dadbb6b0ab9524f773e9c3c49" - integrity sha512-8m0XvW8kZbfnJOA4NvSVXu95mLbPf4LQGwQyqVukIYS4KzSNJiyKSmuZUmbVHteUi6MGkAJGPb0goPZqI+Tsqg== + version "2.13.1" + resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-2.13.1.tgz#1bf2b24136cca154846af16752dc29e8fa506f2a" + integrity sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ== fragment-cache@^0.2.1: version "0.2.1" @@ -8675,9 +8621,9 @@ is-color-stop@^1.1.0: rgba-regex "^1.0.0" is-core-module@^2.9.0: - version "2.10.0" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed" - integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg== + version "2.11.0" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144" + integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw== dependencies: has "^1.0.3" @@ -9141,10 +9087,10 @@ jest-changed-files@^28.1.3: execa "^5.0.0" p-limit "^3.1.0" -jest-changed-files@^29.0.0: - version "29.0.0" - resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.0.0.tgz#aa238eae42d9372a413dd9a8dadc91ca1806dce0" - integrity sha512-28/iDMDrUpGoCitTURuDqUzWQoWmOmOKOFST1mi2lwh62X4BFf6khgH3uSuo1e49X/UDjuApAj3w0wLOex4VPQ== +jest-changed-files@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.2.0.tgz#b6598daa9803ea6a4dce7968e20ab380ddbee289" + integrity sha512-qPVmLLyBmvF5HJrY7krDisx6Voi8DmlV3GZYX0aFNbaQsZeoz1hfxcCMbqDGuQCxU1dJy9eYc2xscE8QrCCYaA== dependencies: execa "^5.0.0" p-limit "^3.1.0" @@ -9174,28 +9120,28 @@ jest-circus@^28.1.3: slash "^3.0.0" stack-utils "^2.0.3" -jest-circus@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.1.2.tgz#4551068e432f169a53167fe1aef420cf51c8a735" - integrity sha512-ajQOdxY6mT9GtnfJRZBRYS7toNIJayiiyjDyoZcnvPRUPwJ58JX0ci0PKAKUo2C1RyzlHw0jabjLGKksO42JGA== +jest-circus@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.2.1.tgz#1385353d9bca6acf58f916068bbeffcfc95bef02" + integrity sha512-W+ZQQ5ln4Db2UZNM4NJIeasnhCdDhSuYW4eLgNAUi0XiSSpF634Kc5wiPvGiHvTgXMFVn1ZgWIijqhi9+kLNLg== dependencies: - "@jest/environment" "^29.1.2" - "@jest/expect" "^29.1.2" - "@jest/test-result" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/environment" "^29.2.1" + "@jest/expect" "^29.2.1" + "@jest/test-result" "^29.2.1" + "@jest/types" "^29.2.1" "@types/node" "*" chalk "^4.0.0" co "^4.6.0" dedent "^0.7.0" is-generator-fn "^2.0.0" - jest-each "^29.1.2" - jest-matcher-utils "^29.1.2" - jest-message-util "^29.1.2" - jest-runtime "^29.1.2" - jest-snapshot "^29.1.2" - jest-util "^29.1.2" + jest-each "^29.2.1" + jest-matcher-utils "^29.2.1" + jest-message-util "^29.2.1" + jest-runtime "^29.2.1" + jest-snapshot "^29.2.1" + jest-util "^29.2.1" p-limit "^3.1.0" - pretty-format "^29.1.2" + pretty-format "^29.2.1" slash "^3.0.0" stack-utils "^2.0.3" @@ -9217,21 +9163,21 @@ jest-cli@^28.1.3: prompts "^2.0.1" yargs "^17.3.1" -jest-cli@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.1.2.tgz#423b9c5d3ea20a50b1354b8bf3f2a20e72110e89" - integrity sha512-vsvBfQ7oS2o4MJdAH+4u9z76Vw5Q8WBQF5MchDbkylNknZdrPTX1Ix7YRJyTlOWqRaS7ue/cEAn+E4V1MWyMzw== +jest-cli@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.2.1.tgz#fbfa90b87b27a04e1041cc9d33ee80f32e2f2528" + integrity sha512-UIMD5aNqvPKpdlJSaeUAoLfxsh9TZvOkaMETx5qXnkboc317bcbb0eLHbIj8sFBHdcJAIAM+IRKnIU7Wi61MBw== dependencies: - "@jest/core" "^29.1.2" - "@jest/test-result" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/core" "^29.2.1" + "@jest/test-result" "^29.2.1" + "@jest/types" "^29.2.1" chalk "^4.0.0" exit "^0.1.2" graceful-fs "^4.2.9" import-local "^3.0.2" - jest-config "^29.1.2" - jest-util "^29.1.2" - jest-validate "^29.1.2" + jest-config "^29.2.1" + jest-util "^29.2.1" + jest-validate "^29.2.1" prompts "^2.0.1" yargs "^17.3.1" @@ -9263,31 +9209,31 @@ jest-config@^28.1.3: slash "^3.0.0" strip-json-comments "^3.1.1" -jest-config@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.1.2.tgz#7d004345ca4c09f5d8f802355f54494e90842f4d" - integrity sha512-EC3Zi86HJUOz+2YWQcJYQXlf0zuBhJoeyxLM6vb6qJsVmpP7KcCP1JnyF0iaqTaXdBP8Rlwsvs7hnKWQWWLwwA== +jest-config@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.2.1.tgz#2182af014d6c73978208626335db5134803dd183" + integrity sha512-EV5F1tQYW/quZV2br2o88hnYEeRzG53Dfi6rSG3TZBuzGQ6luhQBux/RLlU5QrJjCdq3LXxRRM8F1LP6DN1ycA== dependencies: "@babel/core" "^7.11.6" - "@jest/test-sequencer" "^29.1.2" - "@jest/types" "^29.1.2" - babel-jest "^29.1.2" + "@jest/test-sequencer" "^29.2.1" + "@jest/types" "^29.2.1" + babel-jest "^29.2.1" chalk "^4.0.0" ci-info "^3.2.0" deepmerge "^4.2.2" glob "^7.1.3" graceful-fs "^4.2.9" - jest-circus "^29.1.2" - jest-environment-node "^29.1.2" - jest-get-type "^29.0.0" - jest-regex-util "^29.0.0" - jest-resolve "^29.1.2" - jest-runner "^29.1.2" - jest-util "^29.1.2" - jest-validate "^29.1.2" + jest-circus "^29.2.1" + jest-environment-node "^29.2.1" + jest-get-type "^29.2.0" + jest-regex-util "^29.2.0" + jest-resolve "^29.2.1" + jest-runner "^29.2.1" + jest-util "^29.2.1" + jest-validate "^29.2.1" micromatch "^4.0.4" parse-json "^5.2.0" - pretty-format "^29.1.2" + pretty-format "^29.2.1" slash "^3.0.0" strip-json-comments "^3.1.1" @@ -9311,15 +9257,15 @@ jest-diff@^28.1.3: jest-get-type "^28.0.2" pretty-format "^28.1.3" -jest-diff@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.1.2.tgz#bb7aaf5353227d6f4f96c5e7e8713ce576a607dc" - integrity sha512-4GQts0aUopVvecIT4IwD/7xsBaMhKTYoM4/njE/aVw9wpw+pIUVp8Vab/KnSzSilr84GnLBkaP3JLDnQYCKqVQ== +jest-diff@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.2.1.tgz#027e42f5a18b693fb2e88f81b0ccab533c08faee" + integrity sha512-gfh/SMNlQmP3MOUgdzxPOd4XETDJifADpT937fN1iUGz+9DgOu2eUPHH25JDkLVcLwwqxv3GzVyK4VBUr9fjfA== dependencies: chalk "^4.0.0" - diff-sequences "^29.0.0" - jest-get-type "^29.0.0" - pretty-format "^29.1.2" + diff-sequences "^29.2.0" + jest-get-type "^29.2.0" + pretty-format "^29.2.1" jest-docblock@^28.1.1: version "28.1.1" @@ -9328,10 +9274,10 @@ jest-docblock@^28.1.1: dependencies: detect-newline "^3.0.0" -jest-docblock@^29.0.0: - version "29.0.0" - resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.0.0.tgz#3151bcc45ed7f5a8af4884dcc049aee699b4ceae" - integrity sha512-s5Kpra/kLzbqu9dEjov30kj1n4tfu3e7Pl8v+f8jOkeWNqM6Ds8jRaJfZow3ducoQUrf2Z4rs2N5S3zXnb83gw== +jest-docblock@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.2.0.tgz#307203e20b637d97cee04809efc1d43afc641e82" + integrity sha512-bkxUsxTgWQGbXV5IENmfiIuqZhJcyvF7tU4zJ/7ioTutdz4ToB5Yx6JOFBpgI+TphRY4lhOyCWGNH/QFQh5T6A== dependencies: detect-newline "^3.0.0" @@ -9346,29 +9292,29 @@ jest-each@^28.1.3: jest-util "^28.1.3" pretty-format "^28.1.3" -jest-each@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.1.2.tgz#d4c8532c07a846e79f194f7007ce7cb1987d1cd0" - integrity sha512-AmTQp9b2etNeEwMyr4jc0Ql/LIX/dhbgP21gHAizya2X6rUspHn2gysMXaj6iwWuOJ2sYRgP8c1P4cXswgvS1A== +jest-each@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.2.1.tgz#6b0a88ee85c2ba27b571a6010c2e0c674f5c9b29" + integrity sha512-sGP86H/CpWHMyK3qGIGFCgP6mt+o5tu9qG4+tobl0LNdgny0aitLXs9/EBacLy3Bwqy+v4uXClqJgASJWcruYw== dependencies: - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" chalk "^4.0.0" - jest-get-type "^29.0.0" - jest-util "^29.1.2" - pretty-format "^29.1.2" + jest-get-type "^29.2.0" + jest-util "^29.2.1" + pretty-format "^29.2.1" jest-environment-jsdom@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-29.1.2.tgz#59c5d7c53c999e1518cc2f1cd4ee19ab4b68eb68" - integrity sha512-D+XNIKia5+uDjSMwL/G1l6N9MCb7LymKI8FpcLo7kkISjc/Sa9w+dXXEa7u1Wijo3f8sVLqfxdGqYtRhmca+Xw== + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-29.2.1.tgz#5bfbbc52a74b333c7e69ff3a4f540af850a7a718" + integrity sha512-MipBdmrjgzEdQMkK7b7wBShOfv1VqO6FVwa9S43bZwKYLC4dlWnPiCgNpZX3ypNEpJO8EMpMhg4HrUkWUZXGiw== dependencies: - "@jest/environment" "^29.1.2" - "@jest/fake-timers" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/environment" "^29.2.1" + "@jest/fake-timers" "^29.2.1" + "@jest/types" "^29.2.1" "@types/jsdom" "^20.0.0" "@types/node" "*" - jest-mock "^29.1.2" - jest-util "^29.1.2" + jest-mock "^29.2.1" + jest-util "^29.2.1" jsdom "^20.0.0" jest-environment-node@^28.1.3: @@ -9383,17 +9329,17 @@ jest-environment-node@^28.1.3: jest-mock "^28.1.3" jest-util "^28.1.3" -jest-environment-node@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.1.2.tgz#005e05cc6ea4b9b5ba55906ab1ce53c82f6907a7" - integrity sha512-C59yVbdpY8682u6k/lh8SUMDJPbOyCHOTgLVVi1USWFxtNV+J8fyIwzkg+RJIVI30EKhKiAGNxYaFr3z6eyNhQ== +jest-environment-node@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.2.1.tgz#f90311d0f0e8ef720349f83c97a076e403f90665" + integrity sha512-PulFKwEMz6nTAdLUwglFKei3b/LixwlRiqTN6nvPE1JtrLtlnpd6LXnFI1NFHYJGlTmIWilMP2n9jEtPPKX50g== dependencies: - "@jest/environment" "^29.1.2" - "@jest/fake-timers" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/environment" "^29.2.1" + "@jest/fake-timers" "^29.2.1" + "@jest/types" "^29.2.1" "@types/node" "*" - jest-mock "^29.1.2" - jest-util "^29.1.2" + jest-mock "^29.2.1" + jest-util "^29.2.1" jest-get-type@^26.3.0: version "26.3.0" @@ -9405,10 +9351,10 @@ jest-get-type@^28.0.2: resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203" integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA== -jest-get-type@^29.0.0: - version "29.0.0" - resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.0.0.tgz#843f6c50a1b778f7325df1129a0fd7aa713aef80" - integrity sha512-83X19z/HuLKYXYHskZlBAShO7UfLFXu/vWajw9ZNJASN32li8yHMaVGAQqxFW1RCFOkB7cubaL6FaJVQqqJLSw== +jest-get-type@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.2.0.tgz#726646f927ef61d583a3b3adb1ab13f3a5036408" + integrity sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA== jest-haste-map@^26.6.2: version "26.6.2" @@ -9450,20 +9396,20 @@ jest-haste-map@^28.1.3: optionalDependencies: fsevents "^2.3.2" -jest-haste-map@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.1.2.tgz#93f3634aa921b6b654e7c94137b24e02e7ca6ac9" - integrity sha512-xSjbY8/BF11Jh3hGSPfYTa/qBFrm3TPM7WU8pU93m2gqzORVLkHFWvuZmFsTEBPRKndfewXhMOuzJNHyJIZGsw== +jest-haste-map@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.2.1.tgz#f803fec57f8075e6c55fb5cd551f99a72471c699" + integrity sha512-wF460rAFmYc6ARcCFNw4MbGYQjYkvjovb9GBT+W10Um8q5nHq98jD6fHZMDMO3tA56S8XnmNkM8GcA8diSZfnA== dependencies: - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" "@types/graceful-fs" "^4.1.3" "@types/node" "*" anymatch "^3.0.3" fb-watchman "^2.0.0" graceful-fs "^4.2.9" - jest-regex-util "^29.0.0" - jest-util "^29.1.2" - jest-worker "^29.1.2" + jest-regex-util "^29.2.0" + jest-util "^29.2.1" + jest-worker "^29.2.1" micromatch "^4.0.4" walker "^1.0.8" optionalDependencies: @@ -9487,13 +9433,13 @@ jest-leak-detector@^28.1.3: jest-get-type "^28.0.2" pretty-format "^28.1.3" -jest-leak-detector@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.1.2.tgz#4c846db14c58219430ccbc4f01a1ec52ebee4fc2" - integrity sha512-TG5gAZJpgmZtjb6oWxBLf2N6CfQ73iwCe6cofu/Uqv9iiAm6g502CAnGtxQaTfpHECBdVEMRBhomSXeLnoKjiQ== +jest-leak-detector@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.2.1.tgz#ec551686b7d512ec875616c2c3534298b1ffe2fc" + integrity sha512-1YvSqYoiurxKOJtySc+CGVmw/e1v4yNY27BjWTVzp0aTduQeA7pdieLiW05wTYG/twlKOp2xS/pWuikQEmklug== dependencies: - jest-get-type "^29.0.0" - pretty-format "^29.1.2" + jest-get-type "^29.2.0" + pretty-format "^29.2.1" jest-matcher-utils@^26.6.2: version "26.6.2" @@ -9515,15 +9461,15 @@ jest-matcher-utils@^28.1.3: jest-get-type "^28.0.2" pretty-format "^28.1.3" -jest-matcher-utils@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.1.2.tgz#e68c4bcc0266e70aa1a5c13fb7b8cd4695e318a1" - integrity sha512-MV5XrD3qYSW2zZSHRRceFzqJ39B2z11Qv0KPyZYxnzDHFeYZGJlgGi0SW+IXSJfOewgJp/Km/7lpcFT+cgZypw== +jest-matcher-utils@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.2.1.tgz#2bf876c5f891b33786aadf5d65d5da5970744122" + integrity sha512-hUTBh7H/Mnb6GTpihbLh8uF5rjAMdekfW/oZNXUMAXi7bbmym2HiRpzgqf/zzkjgejMrVAkPdVSQj+32enlUww== dependencies: chalk "^4.0.0" - jest-diff "^29.1.2" - jest-get-type "^29.0.0" - pretty-format "^29.1.2" + jest-diff "^29.2.1" + jest-get-type "^29.2.0" + pretty-format "^29.2.1" jest-message-util@^26.6.2: version "26.6.2" @@ -9555,18 +9501,18 @@ jest-message-util@^28.1.3: slash "^3.0.0" stack-utils "^2.0.3" -jest-message-util@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.1.2.tgz#c21a33c25f9dc1ebfcd0f921d89438847a09a501" - integrity sha512-9oJ2Os+Qh6IlxLpmvshVbGUiSkZVc2FK+uGOm6tghafnB2RyjKAxMZhtxThRMxfX1J1SOMhTn9oK3/MutRWQJQ== +jest-message-util@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.2.1.tgz#3a51357fbbe0cc34236f17a90d772746cf8d9193" + integrity sha512-Dx5nEjw9V8C1/Yj10S/8ivA8F439VS8vTq1L7hEgwHFn9ovSKNpYW/kwNh7UglaEgXO42XxzKJB+2x0nSglFVw== dependencies: "@babel/code-frame" "^7.12.13" - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" "@types/stack-utils" "^2.0.0" chalk "^4.0.0" graceful-fs "^4.2.9" micromatch "^4.0.4" - pretty-format "^29.1.2" + pretty-format "^29.2.1" slash "^3.0.0" stack-utils "^2.0.3" @@ -9586,14 +9532,14 @@ jest-mock@^28.1.3: "@jest/types" "^28.1.3" "@types/node" "*" -jest-mock@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.1.2.tgz#de47807edbb9d4abf8423f1d8d308d670105678c" - integrity sha512-PFDAdjjWbjPUtQPkQufvniXIS3N9Tv7tbibePEjIIprzjgo0qQlyUiVMrT4vL8FaSJo1QXifQUOuPH3HQC/aMA== +jest-mock@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.2.1.tgz#a0d361cffcb28184fa9c5443adbf591fa5759775" + integrity sha512-NDphaY/GqyQpTfnTZiTqqpMaw4Z0I7XnB7yBgrT6IwYrLGxpOhrejYr4ANY4YvO2sEGdd8Tx/6D0+WLQy7/qDA== dependencies: - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" "@types/node" "*" - jest-util "^29.1.2" + jest-util "^29.2.1" jest-playwright-preset@^2.0.0: version "2.0.0" @@ -9638,10 +9584,10 @@ jest-regex-util@^28.0.2: resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead" integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw== -jest-regex-util@^29.0.0: - version "29.0.0" - resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.0.0.tgz#b442987f688289df8eb6c16fa8df488b4cd007de" - integrity sha512-BV7VW7Sy0fInHWN93MMPtlClweYv2qrSCwfeFWmpribGZtQPWNvRSq9XOVgOEjU1iBGRKXUZil0o2AH7Iy9Lug== +jest-regex-util@^29.0.0, jest-regex-util@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.2.0.tgz#82ef3b587e8c303357728d0322d48bbfd2971f7b" + integrity sha512-6yXn0kg2JXzH30cr2NlThF+70iuO/3irbaB4mh5WyqNIvLLP+B6sFdluO1/1RJmslyh/f9osnefECflHvTbwVA== jest-resolve-dependencies@^28.1.3: version "28.1.3" @@ -9651,13 +9597,13 @@ jest-resolve-dependencies@^28.1.3: jest-regex-util "^28.0.2" jest-snapshot "^28.1.3" -jest-resolve-dependencies@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.1.2.tgz#a6919e58a0c7465582cb8ec2d745b4e64ae8647f" - integrity sha512-44yYi+yHqNmH3OoWZvPgmeeiwKxhKV/0CfrzaKLSkZG9gT973PX8i+m8j6pDrTYhhHoiKfF3YUFg/6AeuHw4HQ== +jest-resolve-dependencies@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.2.1.tgz#8d717dd41dc615fef1d412d395ea3deccfb1b9fa" + integrity sha512-o3mUGX2j08usj1jIAIE8KmUVpqVAn54k80kI27ldbZf2oJn6eghhB6DvJxjrcH40va9CQgWTfU5f2Ag/MoUqgQ== dependencies: - jest-regex-util "^29.0.0" - jest-snapshot "^29.1.2" + jest-regex-util "^29.2.0" + jest-snapshot "^29.2.1" jest-resolve@^26.6.2: version "26.6.2" @@ -9688,17 +9634,17 @@ jest-resolve@^28.1.3: resolve.exports "^1.1.0" slash "^3.0.0" -jest-resolve@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.1.2.tgz#9dd8c2fc83e59ee7d676b14bd45a5f89e877741d" - integrity sha512-7fcOr+k7UYSVRJYhSmJHIid3AnDBcLQX3VmT9OSbPWsWz1MfT7bcoerMhADKGvKCoMpOHUQaDHtQoNp/P9JMGg== +jest-resolve@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.2.1.tgz#a4d2f76db88aeb6ec5f5453c9a40b52483d17799" + integrity sha512-1dJTW76Z9622Viq4yRcwBuEXuzGtE9B2kdl05RC8Om/lAzac9uEgC+M8Q5osVidbuBPmxm8wSrcItYhca2ZAtQ== dependencies: chalk "^4.0.0" graceful-fs "^4.2.9" - jest-haste-map "^29.1.2" + jest-haste-map "^29.2.1" jest-pnp-resolver "^1.2.2" - jest-util "^29.1.2" - jest-validate "^29.1.2" + jest-util "^29.2.1" + jest-validate "^29.2.1" resolve "^1.20.0" resolve.exports "^1.1.0" slash "^3.0.0" @@ -9730,30 +9676,30 @@ jest-runner@^28.0.0, jest-runner@^28.1.3: p-limit "^3.1.0" source-map-support "0.5.13" -jest-runner@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.1.2.tgz#f18b2b86101341e047de8c2f51a5fdc4e97d053a" - integrity sha512-yy3LEWw8KuBCmg7sCGDIqKwJlULBuNIQa2eFSVgVASWdXbMYZ9H/X0tnXt70XFoGf92W2sOQDOIFAA6f2BG04Q== +jest-runner@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.2.1.tgz#885afe64661cb2f51f84c1b97afb713d1093c124" + integrity sha512-PojFI+uVhQ4u4YZKCN/a3yU0/l/pJJXhq1sW3JpCp8CyvGBYGddRFPKZ1WihApusxqWRTHjBJmGyPWv6Av2lWA== dependencies: - "@jest/console" "^29.1.2" - "@jest/environment" "^29.1.2" - "@jest/test-result" "^29.1.2" - "@jest/transform" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/console" "^29.2.1" + "@jest/environment" "^29.2.1" + "@jest/test-result" "^29.2.1" + "@jest/transform" "^29.2.1" + "@jest/types" "^29.2.1" "@types/node" "*" chalk "^4.0.0" emittery "^0.10.2" graceful-fs "^4.2.9" - jest-docblock "^29.0.0" - jest-environment-node "^29.1.2" - jest-haste-map "^29.1.2" - jest-leak-detector "^29.1.2" - jest-message-util "^29.1.2" - jest-resolve "^29.1.2" - jest-runtime "^29.1.2" - jest-util "^29.1.2" - jest-watcher "^29.1.2" - jest-worker "^29.1.2" + jest-docblock "^29.2.0" + jest-environment-node "^29.2.1" + jest-haste-map "^29.2.1" + jest-leak-detector "^29.2.1" + jest-message-util "^29.2.1" + jest-resolve "^29.2.1" + jest-runtime "^29.2.1" + jest-util "^29.2.1" + jest-watcher "^29.2.1" + jest-worker "^29.2.1" p-limit "^3.1.0" source-map-support "0.5.13" @@ -9785,31 +9731,31 @@ jest-runtime@^28.1.3: slash "^3.0.0" strip-bom "^4.0.0" -jest-runtime@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.1.2.tgz#dbcd57103d61115479108d5864bdcd661d9c6783" - integrity sha512-jr8VJLIf+cYc+8hbrpt412n5jX3tiXmpPSYTGnwcvNemY+EOuLNiYnHJ3Kp25rkaAcTWOEI4ZdOIQcwYcXIAZw== - dependencies: - "@jest/environment" "^29.1.2" - "@jest/fake-timers" "^29.1.2" - "@jest/globals" "^29.1.2" - "@jest/source-map" "^29.0.0" - "@jest/test-result" "^29.1.2" - "@jest/transform" "^29.1.2" - "@jest/types" "^29.1.2" +jest-runtime@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.2.1.tgz#62e3a23c33710ae4d9c3304dda851a5fb225b574" + integrity sha512-PSQ880OoIW9y8E6/jjhGn3eQNgNc6ndMzCZaKqy357bv7FqCfSyYepu3yDC6Sp1Vkt+GhP2M/PVgldS2uZSFZg== + dependencies: + "@jest/environment" "^29.2.1" + "@jest/fake-timers" "^29.2.1" + "@jest/globals" "^29.2.1" + "@jest/source-map" "^29.2.0" + "@jest/test-result" "^29.2.1" + "@jest/transform" "^29.2.1" + "@jest/types" "^29.2.1" "@types/node" "*" chalk "^4.0.0" cjs-module-lexer "^1.0.0" collect-v8-coverage "^1.0.0" glob "^7.1.3" graceful-fs "^4.2.9" - jest-haste-map "^29.1.2" - jest-message-util "^29.1.2" - jest-mock "^29.1.2" - jest-regex-util "^29.0.0" - jest-resolve "^29.1.2" - jest-snapshot "^29.1.2" - jest-util "^29.1.2" + jest-haste-map "^29.2.1" + jest-message-util "^29.2.1" + jest-mock "^29.2.1" + jest-regex-util "^29.2.0" + jest-resolve "^29.2.1" + jest-snapshot "^29.2.1" + jest-util "^29.2.1" slash "^3.0.0" strip-bom "^4.0.0" @@ -9879,10 +9825,10 @@ jest-snapshot@^28.1.3: pretty-format "^28.1.3" semver "^7.3.5" -jest-snapshot@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.1.2.tgz#7dd277e88c45f2d2ff5888de1612e63c7ceb575b" - integrity sha512-rYFomGpVMdBlfwTYxkUp3sjD6usptvZcONFYNqVlaz4EpHPnDvlWjvmOQ9OCSNKqYZqLM2aS3wq01tWujLg7gg== +jest-snapshot@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.2.1.tgz#f3843b3099c8fec7e6218dea18cc506f10ea5d30" + integrity sha512-KZdLD7iEz5M4ZYd+ezZ/kk73z+DtNbk/yJ4Qx7408Vb0CCuclJIZPa/HmIwSsCfIlOBNcYTKufr7x/Yv47oYlg== dependencies: "@babel/core" "^7.11.6" "@babel/generator" "^7.7.2" @@ -9890,23 +9836,23 @@ jest-snapshot@^29.1.2: "@babel/plugin-syntax-typescript" "^7.7.2" "@babel/traverse" "^7.7.2" "@babel/types" "^7.3.3" - "@jest/expect-utils" "^29.1.2" - "@jest/transform" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/expect-utils" "^29.2.1" + "@jest/transform" "^29.2.1" + "@jest/types" "^29.2.1" "@types/babel__traverse" "^7.0.6" "@types/prettier" "^2.1.5" babel-preset-current-node-syntax "^1.0.0" chalk "^4.0.0" - expect "^29.1.2" + expect "^29.2.1" graceful-fs "^4.2.9" - jest-diff "^29.1.2" - jest-get-type "^29.0.0" - jest-haste-map "^29.1.2" - jest-matcher-utils "^29.1.2" - jest-message-util "^29.1.2" - jest-util "^29.1.2" + jest-diff "^29.2.1" + jest-get-type "^29.2.0" + jest-haste-map "^29.2.1" + jest-matcher-utils "^29.2.1" + jest-message-util "^29.2.1" + jest-util "^29.2.1" natural-compare "^1.4.0" - pretty-format "^29.1.2" + pretty-format "^29.2.1" semver "^7.3.5" jest-specific-snapshot@^4.0.0: @@ -9940,12 +9886,12 @@ jest-util@^28.1.3: graceful-fs "^4.2.9" picomatch "^2.2.3" -jest-util@^29.0.0, jest-util@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.1.2.tgz#ac5798e93cb6a6703084e194cfa0898d66126df1" - integrity sha512-vPCk9F353i0Ymx3WQq3+a4lZ07NXu9Ca8wya6o4Fe4/aO1e1awMMprZ3woPFpKwghEOW+UXgd15vVotuNN9ONQ== +jest-util@^29.0.0, jest-util@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.2.1.tgz#f26872ba0dc8cbefaba32c34f98935f6cf5fc747" + integrity sha512-P5VWDj25r7kj7kl4pN2rG/RN2c1TLfYYYZYULnS/35nFDjBai+hBeo3MDrYZS7p6IoY3YHZnt2vq4L6mKnLk0g== dependencies: - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" "@types/node" "*" chalk "^4.0.0" ci-info "^3.2.0" @@ -9964,17 +9910,17 @@ jest-validate@^28.1.3: leven "^3.1.0" pretty-format "^28.1.3" -jest-validate@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.1.2.tgz#83a728b8f6354da2e52346878c8bc7383516ca51" - integrity sha512-k71pOslNlV8fVyI+mEySy2pq9KdXdgZtm7NHrBX8LghJayc3wWZH0Yr0mtYNGaCU4F1OLPXRkwZR0dBm/ClshA== +jest-validate@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.2.1.tgz#db814ce12c4c7e4746044922762e56eb177d066c" + integrity sha512-DZVX5msG6J6DL5vUUw+++6LEkXUsPwB5R7fsfM7BXdz2Ipr0Ib046ak+8egrwAR++pvSM/5laxLK977ieIGxkQ== dependencies: - "@jest/types" "^29.1.2" + "@jest/types" "^29.2.1" camelcase "^6.2.0" chalk "^4.0.0" - jest-get-type "^29.0.0" + jest-get-type "^29.2.0" leven "^3.1.0" - pretty-format "^29.1.2" + pretty-format "^29.2.1" jest-watch-typeahead@^2.0.0: version "2.2.0" @@ -10003,18 +9949,18 @@ jest-watcher@^28.1.3: jest-util "^28.1.3" string-length "^4.0.1" -jest-watcher@^29.0.0, jest-watcher@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.1.2.tgz#de21439b7d889e2fcf62cc2a4779ef1a3f1f3c62" - integrity sha512-6JUIUKVdAvcxC6bM8/dMgqY2N4lbT+jZVsxh0hCJRbwkIEnbr/aPjMQ28fNDI5lB51Klh00MWZZeVf27KBUj5w== +jest-watcher@^29.0.0, jest-watcher@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.2.1.tgz#1cb91f8aa9e77b1332af139944ad65e51430d7c3" + integrity sha512-7jFaHUaRq50l4w/f6RuY713bvI5XskMmjWCE54NGYcY74fLkShS8LucXJke1QfGnwDSCoIqGnGGGKPwdaBYz2Q== dependencies: - "@jest/test-result" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/test-result" "^29.2.1" + "@jest/types" "^29.2.1" "@types/node" "*" ansi-escapes "^4.2.1" chalk "^4.0.0" emittery "^0.10.2" - jest-util "^29.1.2" + jest-util "^29.2.1" string-length "^4.0.1" jest-worker@^26.2.1, jest-worker@^26.5.0, jest-worker@^26.6.2: @@ -10044,13 +9990,13 @@ jest-worker@^28.1.3: merge-stream "^2.0.0" supports-color "^8.0.0" -jest-worker@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.1.2.tgz#a68302af61bce82b42a9a57285ca7499d29b2afc" - integrity sha512-AdTZJxKjTSPHbXT/AIOjQVmoFx0LHFcVabWu0sxI7PAy7rFf8c0upyvgBKgguVXdM4vY74JdwkyD4hSmpTW8jA== +jest-worker@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.2.1.tgz#8ba68255438252e1674f990f0180c54dfa26a3b1" + integrity sha512-ROHTZ+oj7sBrgtv46zZ84uWky71AoYi0vEV9CdEtc1FQunsoAGe5HbQmW76nI5QWdvECVPrSi1MCVUmizSavMg== dependencies: "@types/node" "*" - jest-util "^29.1.2" + jest-util "^29.2.1" merge-stream "^2.0.0" supports-color "^8.0.0" @@ -10065,19 +10011,19 @@ jest@^28.0.0: jest-cli "^28.1.3" jest@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/jest/-/jest-29.1.2.tgz#f821a1695ffd6cd0efc3b59d2dfcc70a98582499" - integrity sha512-5wEIPpCezgORnqf+rCaYD1SK+mNN7NsstWzIsuvsnrhR/hSxXWd82oI7DkrbJ+XTD28/eG8SmxdGvukrGGK6Tw== + version "29.2.1" + resolved "https://registry.yarnpkg.com/jest/-/jest-29.2.1.tgz#352ec0b81a0e436691d546d984cd7d8f72ffd26a" + integrity sha512-K0N+7rx+fv3Us3KhuwRSJt55MMpZPs9Q3WSO/spRZSnsalX8yEYOTQ1PiSN7OvqzoRX4JEUXCbOJRlP4n8m5LA== dependencies: - "@jest/core" "^29.1.2" - "@jest/types" "^29.1.2" + "@jest/core" "^29.2.1" + "@jest/types" "^29.2.1" import-local "^3.0.2" - jest-cli "^29.1.2" + jest-cli "^29.2.1" joi@^17.3.0: - version "17.6.2" - resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.2.tgz#00ac55ce6495596545cce45309f38738cfbd7cd3" - integrity sha512-+gqqdh1xc1wb+Lor0J9toqgeReyDOCqOdG8QSdRcEvwrcRiFQZneUCGKjFjuyBWUb3uaFOgY56yMaZ5FIc+H4w== + version "17.6.3" + resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.3.tgz#b8e9e143f0188884563e6de50f8b23ddcd3cb2f5" + integrity sha512-YlQsIaS9MHYekzf1Qe11LjTkNzx9qhYluK3172z38RxYoAUf82XMX1p1DG1H4Wtk2ED/vPdSn9OggqtDu+aTow== dependencies: "@hapi/hoek" "^9.0.0" "@hapi/topo" "^5.0.0" @@ -10268,13 +10214,6 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== -lit-html@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.4.0.tgz#b510430f39a56ec959167ed1187241a4e3ab1574" - integrity sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg== - dependencies: - "@types/trusted-types" "^2.0.2" - load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -10756,9 +10695,9 @@ minimatch@^5.0.1: brace-expansion "^2.0.1" minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6: - version "1.2.6" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" - integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== + version "1.2.7" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18" + integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g== minipass-collect@^1.0.2: version "1.0.2" @@ -10870,9 +10809,9 @@ ms@2.1.3, ms@^2.1.1: integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== nan@^2.12.1: - version "2.16.0" - resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916" - integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA== + version "2.17.0" + resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb" + integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ== nanoid@^3.3.1: version "3.3.4" @@ -11691,17 +11630,17 @@ pkg-dir@^5.0.0: dependencies: find-up "^5.0.0" -playwright-core@1.27.0, playwright-core@>=1.2.0: - version "1.27.0" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.27.0.tgz#e5f9d2bc19ebdd9581a01e74f019bb91aa7cf55d" - integrity sha512-VBKaaFUVKDo3akW+o4DwbK1ZyXh46tcSwQKPK3lruh8IJd5feu55XVZx4vOkbb2uqrNdIF51sgsadYT533SdpA== +playwright-core@1.27.1, playwright-core@>=1.2.0: + version "1.27.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.27.1.tgz#840ef662e55a3ed759d8b5d3d00a5f885a7184f4" + integrity sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q== playwright@^1.14.0: - version "1.27.0" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.27.0.tgz#68a0e29f1756da105b22291a7c3f402ae749213a" - integrity sha512-F+0+0RD03LS+KdNAMMp63OBzu+NwYYLd52pKLczuSlTsV5b/SLkUoNhSfzDFngEFOuRL2gk0LlfGW3mKiUBk6w== + version "1.27.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.27.1.tgz#4eecac5899566c589d4220ca8acc16abe8a67450" + integrity sha512-xXYZ7m36yTtC+oFgqH0eTgullGztKSRMb4yuwLPl8IYSmgBM88QiB+3IWb1mRIC9/NNwcgbG0RwtFlg+EAFQHQ== dependencies: - playwright-core "1.27.0" + playwright-core "1.27.1" pnp-webpack-plugin@1.6.4: version "1.6.4" @@ -11848,10 +11787,10 @@ pretty-format@^28.1.3: ansi-styles "^5.0.0" react-is "^18.0.0" -pretty-format@^29.0.0, pretty-format@^29.1.2: - version "29.1.2" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.1.2.tgz#b1f6b75be7d699be1a051f5da36e8ae9e76a8e6a" - integrity sha512-CGJ6VVGXVRP2o2Dorl4mAwwvDWT25luIsYhkyVQW32E4nL+TgW939J7LlKT/npq5Cpq6j3s+sy+13yk7xYpBmg== +pretty-format@^29.0.0, pretty-format@^29.2.1: + version "29.2.1" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.2.1.tgz#86e7748fe8bbc96a6a4e04fa99172630907a9611" + integrity sha512-Y41Sa4aLCtKAXvwuIpTvcFBkyeYp2gdFWzXGA+ZNES3VwURIB165XO/z7CjETwzCCS53MjW/rLMyyqEnTtaOfA== dependencies: "@jest/schemas" "^29.0.0" ansi-styles "^5.0.0" @@ -12093,25 +12032,6 @@ raw-loader@^4.0.2: loader-utils "^2.0.0" schema-utils "^3.0.0" -rc-slider@^10.0.1: - version "10.0.1" - resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.0.1.tgz#7058c68ff1e1aa4e7c3536e5e10128bdbccb87f9" - integrity sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q== - dependencies: - "@babel/runtime" "^7.10.1" - classnames "^2.2.5" - rc-util "^5.18.1" - shallowequal "^1.1.0" - -rc-util@^5.18.1: - version "5.24.4" - resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.24.4.tgz#a4126f01358c86f17c1bf380a1d83d6c9155ae65" - integrity sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q== - dependencies: - "@babel/runtime" "^7.18.3" - react-is "^16.12.0" - shallowequal "^1.1.0" - rc@^1.2.8, rc@~1.2.7: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" @@ -12166,16 +12086,6 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" - integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" - react-dom@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" @@ -12207,16 +12117,16 @@ react-is@17.0.2, react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" - integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== - "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.1.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-is@^16.13.1, react-is@^16.7.0: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -12233,9 +12143,9 @@ react-refresh@^0.11.0: integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== react-select@^5.5.1: - version "5.5.1" - resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.5.1.tgz#60cc6767e77396cdf1d6f49a10555b80d27e749a" - integrity sha512-zOXIKvNqrnBn030Goi7pRHfLJHnvjPweA4uDyj9me8YPqgkaJp+vX3eNGHOzTlI442rbfPUMGrEZQnymJn/XUg== + version "5.5.2" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.5.2.tgz#40ac709338860b836feda5e43bdab56cb8ae5b57" + integrity sha512-zbcxtiqXvFW2Wh+dd8zAqMY6QaqX9Ez0WlcjSXycXn1ASpKdc17LcGJj7gAJiUcHI/UVlo6wfg44hgBsUPyEBQ== dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" @@ -12291,15 +12201,6 @@ react-transition-group@^4.3.0: loose-envify "^1.4.0" prop-types "^15.6.2" -react@16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" - integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -12422,9 +12323,9 @@ regenerate@^1.4.2: integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7, regenerator-runtime@^0.13.9: - version "0.13.9" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" - integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA== + version "0.13.10" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee" + integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw== regenerator-transform@^0.15.0: version "0.15.0" @@ -12836,14 +12737,6 @@ saxes@^6.0.0: dependencies: xmlchars "^2.2.0" -scheduler@^0.19.1: - version "0.19.1" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" - integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler@^0.22.0: version "0.22.0" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8" @@ -14063,9 +13956,9 @@ typical@^5.2.0: integrity sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg== ua-parser-js@^0.7.30: - version "0.7.31" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6" - integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ== + version "0.7.32" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.32.tgz#cd8c639cdca949e30fa68c44b7813ef13e36d211" + integrity sha512-f9BESNVhzlhEFf2CHMSj40NWOjYPl1YKYbrvIr/hFTDEmLq7SRbWvm7FcdcpCYT95zrOhC7gZSxjdnnTpBcwVw== uglify-js@^3.1.4: version "3.17.3" From 4364453a1de76d9bebea357bf00631c6ac4fa0c3 Mon Sep 17 00:00:00 2001 From: Kristin Galvin Date: Wed, 19 Oct 2022 11:03:28 -0700 Subject: [PATCH 2/4] clear out webaudio-controls for now --- src/index.tsx | 1 - {src/stories => temp-zone}/Knob.stories.tsx | 2 +- {src => temp-zone}/Knob.tsx | 0 {src => temp-zone}/Knob.types.ts | 0 .../images/img/LittlePhatty_sample.png | Bin .../webaudio-controls/images/img/bg.png | Bin .../webaudio-controls/images/img/defknob2.png | Bin .../webaudio-controls/images/img/demo.png | Bin .../webaudio-controls/images/img/hsliderbody.png | Bin .../webaudio-controls/images/img/hsliderknob.png | Bin .../webaudio-controls/images/img/hsw5.png | Bin .../webaudio-controls/images/img/midilearn.png | Bin .../webaudio-controls/images/img/sample3.png | Bin .../webaudio-controls/images/img/switch_toggle.png | Bin .../webaudio-controls/images/img/testknob.png | Bin .../webaudio-controls/images/img/vsliderbody.png | Bin .../webaudio-controls/images/img/vsliderknob.png | Bin .../webaudio-controls/images/knobs/Aqua.knob | Bin .../webaudio-controls/images/knobs/Aqua.png | Bin .../webaudio-controls/images/knobs/Carbon.knob | Bin .../webaudio-controls/images/knobs/Carbon.png | Bin .../webaudio-controls/images/knobs/Chromed.png | Bin .../webaudio-controls/images/knobs/JP8000.knob | Bin .../webaudio-controls/images/knobs/JP8000.png | Bin .../webaudio-controls/images/knobs/Jambalaya.knob | Bin .../webaudio-controls/images/knobs/Jambalaya.png | Bin .../images/knobs/LittlePhatty.knob | Bin .../webaudio-controls/images/knobs/LittlePhatty.png | Bin .../images/knobs/MiniMoog_Main.knob | Bin .../images/knobs/MiniMoog_Main.png | Bin .../webaudio-controls/images/knobs/SimpleFlat3.knob | Bin .../webaudio-controls/images/knobs/SimpleFlat3.png | Bin .../images/knobs/Vintage_Knob.knob | Bin .../webaudio-controls/images/knobs/Vintage_Knob.png | Bin .../images/knobs/Vintage_VUMeter.knob | Bin .../images/knobs/Vintage_VUMeter.png | Bin .../images/knobs/Vintage_VUMeter_2.knob | Bin .../images/knobs/Vintage_VUMeter_2.png | Bin .../images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png | Bin .../webaudio-controls/images/knobs/controls.skin | Bin .../webaudio-controls/images/knobs/hsliderbody.png | Bin .../webaudio-controls/images/knobs/hsliderknob.png | Bin .../webaudio-controls/images/knobs/hsw5.png | Bin .../images/knobs/knob_metal_mesh.png | Bin .../webaudio-controls/images/knobs/lineshadow.knob | Bin .../webaudio-controls/images/knobs/lineshadow.png | Bin .../webaudio-controls/images/knobs/lineshadow2.knob | Bin .../webaudio-controls/images/knobs/lineshadow2.png | Bin .../webaudio-controls/images/knobs/m400.knob | Bin .../webaudio-controls/images/knobs/m400.png | Bin .../images/knobs/nice_lamp_knob.png | Bin .../images/knobs/parambg120x32.png | Bin .../webaudio-controls/images/knobs/plastic_knob.png | Bin .../webaudio-controls/images/knobs/redbutton128.png | Bin .../webaudio-controls/images/knobs/simplegray.knob | Bin .../webaudio-controls/images/knobs/simplegray.png | Bin .../images/knobs/switch_toggle.knob | Bin .../images/knobs/switch_toggle.png | Bin .../webaudio-controls/images/knobs/vernier.knob | Bin .../webaudio-controls/images/knobs/vernier.png | Bin .../webaudio-controls/images/knobs/vsliderbody.png | Bin .../webaudio-controls/images/knobs/vsliderknob.png | Bin .../webaudio-controls/images/knobs/yellow.png | Bin .../webaudio-controls/webaudio-controls-modules.js | 0 64 files changed, 1 insertion(+), 2 deletions(-) rename {src/stories => temp-zone}/Knob.stories.tsx (97%) rename {src => temp-zone}/Knob.tsx (100%) rename {src => temp-zone}/Knob.types.ts (100%) rename {src => temp-zone}/webaudio-controls/images/img/LittlePhatty_sample.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/bg.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/defknob2.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/demo.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/hsliderbody.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/hsliderknob.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/hsw5.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/midilearn.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/sample3.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/switch_toggle.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/testknob.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/vsliderbody.png (100%) rename {src => temp-zone}/webaudio-controls/images/img/vsliderknob.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Aqua.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Aqua.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Carbon.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Carbon.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Chromed.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/JP8000.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/JP8000.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Jambalaya.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Jambalaya.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/LittlePhatty.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/LittlePhatty.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/MiniMoog_Main.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/MiniMoog_Main.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/SimpleFlat3.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/SimpleFlat3.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Vintage_Knob.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Vintage_Knob.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Vintage_VUMeter.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Vintage_VUMeter.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/Vintage_VUMeter_2.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/controls.skin (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/hsliderbody.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/hsliderknob.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/hsw5.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/knob_metal_mesh.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/lineshadow.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/lineshadow.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/lineshadow2.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/lineshadow2.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/m400.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/m400.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/nice_lamp_knob.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/parambg120x32.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/plastic_knob.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/redbutton128.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/simplegray.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/simplegray.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/switch_toggle.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/switch_toggle.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/vernier.knob (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/vernier.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/vsliderbody.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/vsliderknob.png (100%) rename {src => temp-zone}/webaudio-controls/images/knobs/yellow.png (100%) rename {src => temp-zone}/webaudio-controls/webaudio-controls-modules.js (100%) diff --git a/src/index.tsx b/src/index.tsx index 1b6ef29..5a3824b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,4 @@ export * from "./Button"; -export * from "./Knob"; export * from "./Oscilloscope"; export * from "./PlayPauseAudio"; export * from "./PlayPauseButton"; diff --git a/src/stories/Knob.stories.tsx b/temp-zone/Knob.stories.tsx similarity index 97% rename from src/stories/Knob.stories.tsx rename to temp-zone/Knob.stories.tsx index f9ae20c..7d76a7a 100644 --- a/src/stories/Knob.stories.tsx +++ b/temp-zone/Knob.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { ComponentMeta } from "@storybook/react"; -import Knob from "../Knob"; +import Knob from "./Knob"; export default { title: "ui/Knob", diff --git a/src/Knob.tsx b/temp-zone/Knob.tsx similarity index 100% rename from src/Knob.tsx rename to temp-zone/Knob.tsx diff --git a/src/Knob.types.ts b/temp-zone/Knob.types.ts similarity index 100% rename from src/Knob.types.ts rename to temp-zone/Knob.types.ts diff --git a/src/webaudio-controls/images/img/LittlePhatty_sample.png b/temp-zone/webaudio-controls/images/img/LittlePhatty_sample.png similarity index 100% rename from src/webaudio-controls/images/img/LittlePhatty_sample.png rename to temp-zone/webaudio-controls/images/img/LittlePhatty_sample.png diff --git a/src/webaudio-controls/images/img/bg.png b/temp-zone/webaudio-controls/images/img/bg.png similarity index 100% rename from src/webaudio-controls/images/img/bg.png rename to temp-zone/webaudio-controls/images/img/bg.png diff --git a/src/webaudio-controls/images/img/defknob2.png b/temp-zone/webaudio-controls/images/img/defknob2.png similarity index 100% rename from src/webaudio-controls/images/img/defknob2.png rename to temp-zone/webaudio-controls/images/img/defknob2.png diff --git a/src/webaudio-controls/images/img/demo.png b/temp-zone/webaudio-controls/images/img/demo.png similarity index 100% rename from src/webaudio-controls/images/img/demo.png rename to temp-zone/webaudio-controls/images/img/demo.png diff --git a/src/webaudio-controls/images/img/hsliderbody.png b/temp-zone/webaudio-controls/images/img/hsliderbody.png similarity index 100% rename from src/webaudio-controls/images/img/hsliderbody.png rename to temp-zone/webaudio-controls/images/img/hsliderbody.png diff --git a/src/webaudio-controls/images/img/hsliderknob.png b/temp-zone/webaudio-controls/images/img/hsliderknob.png similarity index 100% rename from src/webaudio-controls/images/img/hsliderknob.png rename to temp-zone/webaudio-controls/images/img/hsliderknob.png diff --git a/src/webaudio-controls/images/img/hsw5.png b/temp-zone/webaudio-controls/images/img/hsw5.png similarity index 100% rename from src/webaudio-controls/images/img/hsw5.png rename to temp-zone/webaudio-controls/images/img/hsw5.png diff --git a/src/webaudio-controls/images/img/midilearn.png b/temp-zone/webaudio-controls/images/img/midilearn.png similarity index 100% rename from src/webaudio-controls/images/img/midilearn.png rename to temp-zone/webaudio-controls/images/img/midilearn.png diff --git a/src/webaudio-controls/images/img/sample3.png b/temp-zone/webaudio-controls/images/img/sample3.png similarity index 100% rename from src/webaudio-controls/images/img/sample3.png rename to temp-zone/webaudio-controls/images/img/sample3.png diff --git a/src/webaudio-controls/images/img/switch_toggle.png b/temp-zone/webaudio-controls/images/img/switch_toggle.png similarity index 100% rename from src/webaudio-controls/images/img/switch_toggle.png rename to temp-zone/webaudio-controls/images/img/switch_toggle.png diff --git a/src/webaudio-controls/images/img/testknob.png b/temp-zone/webaudio-controls/images/img/testknob.png similarity index 100% rename from src/webaudio-controls/images/img/testknob.png rename to temp-zone/webaudio-controls/images/img/testknob.png diff --git a/src/webaudio-controls/images/img/vsliderbody.png b/temp-zone/webaudio-controls/images/img/vsliderbody.png similarity index 100% rename from src/webaudio-controls/images/img/vsliderbody.png rename to temp-zone/webaudio-controls/images/img/vsliderbody.png diff --git a/src/webaudio-controls/images/img/vsliderknob.png b/temp-zone/webaudio-controls/images/img/vsliderknob.png similarity index 100% rename from src/webaudio-controls/images/img/vsliderknob.png rename to temp-zone/webaudio-controls/images/img/vsliderknob.png diff --git a/src/webaudio-controls/images/knobs/Aqua.knob b/temp-zone/webaudio-controls/images/knobs/Aqua.knob similarity index 100% rename from src/webaudio-controls/images/knobs/Aqua.knob rename to temp-zone/webaudio-controls/images/knobs/Aqua.knob diff --git a/src/webaudio-controls/images/knobs/Aqua.png b/temp-zone/webaudio-controls/images/knobs/Aqua.png similarity index 100% rename from src/webaudio-controls/images/knobs/Aqua.png rename to temp-zone/webaudio-controls/images/knobs/Aqua.png diff --git a/src/webaudio-controls/images/knobs/Carbon.knob b/temp-zone/webaudio-controls/images/knobs/Carbon.knob similarity index 100% rename from src/webaudio-controls/images/knobs/Carbon.knob rename to temp-zone/webaudio-controls/images/knobs/Carbon.knob diff --git a/src/webaudio-controls/images/knobs/Carbon.png b/temp-zone/webaudio-controls/images/knobs/Carbon.png similarity index 100% rename from src/webaudio-controls/images/knobs/Carbon.png rename to temp-zone/webaudio-controls/images/knobs/Carbon.png diff --git a/src/webaudio-controls/images/knobs/Chromed.png b/temp-zone/webaudio-controls/images/knobs/Chromed.png similarity index 100% rename from src/webaudio-controls/images/knobs/Chromed.png rename to temp-zone/webaudio-controls/images/knobs/Chromed.png diff --git a/src/webaudio-controls/images/knobs/JP8000.knob b/temp-zone/webaudio-controls/images/knobs/JP8000.knob similarity index 100% rename from src/webaudio-controls/images/knobs/JP8000.knob rename to temp-zone/webaudio-controls/images/knobs/JP8000.knob diff --git a/src/webaudio-controls/images/knobs/JP8000.png b/temp-zone/webaudio-controls/images/knobs/JP8000.png similarity index 100% rename from src/webaudio-controls/images/knobs/JP8000.png rename to temp-zone/webaudio-controls/images/knobs/JP8000.png diff --git a/src/webaudio-controls/images/knobs/Jambalaya.knob b/temp-zone/webaudio-controls/images/knobs/Jambalaya.knob similarity index 100% rename from src/webaudio-controls/images/knobs/Jambalaya.knob rename to temp-zone/webaudio-controls/images/knobs/Jambalaya.knob diff --git a/src/webaudio-controls/images/knobs/Jambalaya.png b/temp-zone/webaudio-controls/images/knobs/Jambalaya.png similarity index 100% rename from src/webaudio-controls/images/knobs/Jambalaya.png rename to temp-zone/webaudio-controls/images/knobs/Jambalaya.png diff --git a/src/webaudio-controls/images/knobs/LittlePhatty.knob b/temp-zone/webaudio-controls/images/knobs/LittlePhatty.knob similarity index 100% rename from src/webaudio-controls/images/knobs/LittlePhatty.knob rename to temp-zone/webaudio-controls/images/knobs/LittlePhatty.knob diff --git a/src/webaudio-controls/images/knobs/LittlePhatty.png b/temp-zone/webaudio-controls/images/knobs/LittlePhatty.png similarity index 100% rename from src/webaudio-controls/images/knobs/LittlePhatty.png rename to temp-zone/webaudio-controls/images/knobs/LittlePhatty.png diff --git a/src/webaudio-controls/images/knobs/MiniMoog_Main.knob b/temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.knob similarity index 100% rename from src/webaudio-controls/images/knobs/MiniMoog_Main.knob rename to temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.knob diff --git a/src/webaudio-controls/images/knobs/MiniMoog_Main.png b/temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.png similarity index 100% rename from src/webaudio-controls/images/knobs/MiniMoog_Main.png rename to temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.png diff --git a/src/webaudio-controls/images/knobs/SimpleFlat3.knob b/temp-zone/webaudio-controls/images/knobs/SimpleFlat3.knob similarity index 100% rename from src/webaudio-controls/images/knobs/SimpleFlat3.knob rename to temp-zone/webaudio-controls/images/knobs/SimpleFlat3.knob diff --git a/src/webaudio-controls/images/knobs/SimpleFlat3.png b/temp-zone/webaudio-controls/images/knobs/SimpleFlat3.png similarity index 100% rename from src/webaudio-controls/images/knobs/SimpleFlat3.png rename to temp-zone/webaudio-controls/images/knobs/SimpleFlat3.png diff --git a/src/webaudio-controls/images/knobs/Vintage_Knob.knob b/temp-zone/webaudio-controls/images/knobs/Vintage_Knob.knob similarity index 100% rename from src/webaudio-controls/images/knobs/Vintage_Knob.knob rename to temp-zone/webaudio-controls/images/knobs/Vintage_Knob.knob diff --git a/src/webaudio-controls/images/knobs/Vintage_Knob.png b/temp-zone/webaudio-controls/images/knobs/Vintage_Knob.png similarity index 100% rename from src/webaudio-controls/images/knobs/Vintage_Knob.png rename to temp-zone/webaudio-controls/images/knobs/Vintage_Knob.png diff --git a/src/webaudio-controls/images/knobs/Vintage_VUMeter.knob b/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.knob similarity index 100% rename from src/webaudio-controls/images/knobs/Vintage_VUMeter.knob rename to temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.knob diff --git a/src/webaudio-controls/images/knobs/Vintage_VUMeter.png b/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.png similarity index 100% rename from src/webaudio-controls/images/knobs/Vintage_VUMeter.png rename to temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.png diff --git a/src/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob b/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob similarity index 100% rename from src/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob rename to temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob diff --git a/src/webaudio-controls/images/knobs/Vintage_VUMeter_2.png b/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.png similarity index 100% rename from src/webaudio-controls/images/knobs/Vintage_VUMeter_2.png rename to temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.png diff --git a/src/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png b/temp-zone/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png similarity index 100% rename from src/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png rename to temp-zone/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png diff --git a/src/webaudio-controls/images/knobs/controls.skin b/temp-zone/webaudio-controls/images/knobs/controls.skin similarity index 100% rename from src/webaudio-controls/images/knobs/controls.skin rename to temp-zone/webaudio-controls/images/knobs/controls.skin diff --git a/src/webaudio-controls/images/knobs/hsliderbody.png b/temp-zone/webaudio-controls/images/knobs/hsliderbody.png similarity index 100% rename from src/webaudio-controls/images/knobs/hsliderbody.png rename to temp-zone/webaudio-controls/images/knobs/hsliderbody.png diff --git a/src/webaudio-controls/images/knobs/hsliderknob.png b/temp-zone/webaudio-controls/images/knobs/hsliderknob.png similarity index 100% rename from src/webaudio-controls/images/knobs/hsliderknob.png rename to temp-zone/webaudio-controls/images/knobs/hsliderknob.png diff --git a/src/webaudio-controls/images/knobs/hsw5.png b/temp-zone/webaudio-controls/images/knobs/hsw5.png similarity index 100% rename from src/webaudio-controls/images/knobs/hsw5.png rename to temp-zone/webaudio-controls/images/knobs/hsw5.png diff --git a/src/webaudio-controls/images/knobs/knob_metal_mesh.png b/temp-zone/webaudio-controls/images/knobs/knob_metal_mesh.png similarity index 100% rename from src/webaudio-controls/images/knobs/knob_metal_mesh.png rename to temp-zone/webaudio-controls/images/knobs/knob_metal_mesh.png diff --git a/src/webaudio-controls/images/knobs/lineshadow.knob b/temp-zone/webaudio-controls/images/knobs/lineshadow.knob similarity index 100% rename from src/webaudio-controls/images/knobs/lineshadow.knob rename to temp-zone/webaudio-controls/images/knobs/lineshadow.knob diff --git a/src/webaudio-controls/images/knobs/lineshadow.png b/temp-zone/webaudio-controls/images/knobs/lineshadow.png similarity index 100% rename from src/webaudio-controls/images/knobs/lineshadow.png rename to temp-zone/webaudio-controls/images/knobs/lineshadow.png diff --git a/src/webaudio-controls/images/knobs/lineshadow2.knob b/temp-zone/webaudio-controls/images/knobs/lineshadow2.knob similarity index 100% rename from src/webaudio-controls/images/knobs/lineshadow2.knob rename to temp-zone/webaudio-controls/images/knobs/lineshadow2.knob diff --git a/src/webaudio-controls/images/knobs/lineshadow2.png b/temp-zone/webaudio-controls/images/knobs/lineshadow2.png similarity index 100% rename from src/webaudio-controls/images/knobs/lineshadow2.png rename to temp-zone/webaudio-controls/images/knobs/lineshadow2.png diff --git a/src/webaudio-controls/images/knobs/m400.knob b/temp-zone/webaudio-controls/images/knobs/m400.knob similarity index 100% rename from src/webaudio-controls/images/knobs/m400.knob rename to temp-zone/webaudio-controls/images/knobs/m400.knob diff --git a/src/webaudio-controls/images/knobs/m400.png b/temp-zone/webaudio-controls/images/knobs/m400.png similarity index 100% rename from src/webaudio-controls/images/knobs/m400.png rename to temp-zone/webaudio-controls/images/knobs/m400.png diff --git a/src/webaudio-controls/images/knobs/nice_lamp_knob.png b/temp-zone/webaudio-controls/images/knobs/nice_lamp_knob.png similarity index 100% rename from src/webaudio-controls/images/knobs/nice_lamp_knob.png rename to temp-zone/webaudio-controls/images/knobs/nice_lamp_knob.png diff --git a/src/webaudio-controls/images/knobs/parambg120x32.png b/temp-zone/webaudio-controls/images/knobs/parambg120x32.png similarity index 100% rename from src/webaudio-controls/images/knobs/parambg120x32.png rename to temp-zone/webaudio-controls/images/knobs/parambg120x32.png diff --git a/src/webaudio-controls/images/knobs/plastic_knob.png b/temp-zone/webaudio-controls/images/knobs/plastic_knob.png similarity index 100% rename from src/webaudio-controls/images/knobs/plastic_knob.png rename to temp-zone/webaudio-controls/images/knobs/plastic_knob.png diff --git a/src/webaudio-controls/images/knobs/redbutton128.png b/temp-zone/webaudio-controls/images/knobs/redbutton128.png similarity index 100% rename from src/webaudio-controls/images/knobs/redbutton128.png rename to temp-zone/webaudio-controls/images/knobs/redbutton128.png diff --git a/src/webaudio-controls/images/knobs/simplegray.knob b/temp-zone/webaudio-controls/images/knobs/simplegray.knob similarity index 100% rename from src/webaudio-controls/images/knobs/simplegray.knob rename to temp-zone/webaudio-controls/images/knobs/simplegray.knob diff --git a/src/webaudio-controls/images/knobs/simplegray.png b/temp-zone/webaudio-controls/images/knobs/simplegray.png similarity index 100% rename from src/webaudio-controls/images/knobs/simplegray.png rename to temp-zone/webaudio-controls/images/knobs/simplegray.png diff --git a/src/webaudio-controls/images/knobs/switch_toggle.knob b/temp-zone/webaudio-controls/images/knobs/switch_toggle.knob similarity index 100% rename from src/webaudio-controls/images/knobs/switch_toggle.knob rename to temp-zone/webaudio-controls/images/knobs/switch_toggle.knob diff --git a/src/webaudio-controls/images/knobs/switch_toggle.png b/temp-zone/webaudio-controls/images/knobs/switch_toggle.png similarity index 100% rename from src/webaudio-controls/images/knobs/switch_toggle.png rename to temp-zone/webaudio-controls/images/knobs/switch_toggle.png diff --git a/src/webaudio-controls/images/knobs/vernier.knob b/temp-zone/webaudio-controls/images/knobs/vernier.knob similarity index 100% rename from src/webaudio-controls/images/knobs/vernier.knob rename to temp-zone/webaudio-controls/images/knobs/vernier.knob diff --git a/src/webaudio-controls/images/knobs/vernier.png b/temp-zone/webaudio-controls/images/knobs/vernier.png similarity index 100% rename from src/webaudio-controls/images/knobs/vernier.png rename to temp-zone/webaudio-controls/images/knobs/vernier.png diff --git a/src/webaudio-controls/images/knobs/vsliderbody.png b/temp-zone/webaudio-controls/images/knobs/vsliderbody.png similarity index 100% rename from src/webaudio-controls/images/knobs/vsliderbody.png rename to temp-zone/webaudio-controls/images/knobs/vsliderbody.png diff --git a/src/webaudio-controls/images/knobs/vsliderknob.png b/temp-zone/webaudio-controls/images/knobs/vsliderknob.png similarity index 100% rename from src/webaudio-controls/images/knobs/vsliderknob.png rename to temp-zone/webaudio-controls/images/knobs/vsliderknob.png diff --git a/src/webaudio-controls/images/knobs/yellow.png b/temp-zone/webaudio-controls/images/knobs/yellow.png similarity index 100% rename from src/webaudio-controls/images/knobs/yellow.png rename to temp-zone/webaudio-controls/images/knobs/yellow.png diff --git a/src/webaudio-controls/webaudio-controls-modules.js b/temp-zone/webaudio-controls/webaudio-controls-modules.js similarity index 100% rename from src/webaudio-controls/webaudio-controls-modules.js rename to temp-zone/webaudio-controls/webaudio-controls-modules.js From 8dc01f10890d1cd0b99482c6ef31dd49d39bf29f Mon Sep 17 00:00:00 2001 From: Kristin Galvin Date: Wed, 19 Oct 2022 12:07:47 -0700 Subject: [PATCH 3/4] still broken --- .../images/img/LittlePhatty_sample.png | Bin .../webaudio-controls/images/img/bg.png | Bin .../webaudio-controls/images/img/defknob2.png | Bin .../webaudio-controls/images/img/demo.png | Bin .../images/img/hsliderbody.png | Bin .../images/img/hsliderknob.png | Bin .../webaudio-controls/images/img/hsw5.png | Bin .../images/img/midilearn.png | Bin .../webaudio-controls/images/img/sample3.png | Bin .../images/img/switch_toggle.png | Bin .../webaudio-controls/images/img/testknob.png | Bin .../images/img/vsliderbody.png | Bin .../images/img/vsliderknob.png | Bin .../webaudio-controls/images/knobs/Aqua.knob | Bin .../webaudio-controls/images/knobs/Aqua.png | Bin .../images/knobs/Carbon.knob | Bin .../webaudio-controls/images/knobs/Carbon.png | Bin .../images/knobs/Chromed.png | Bin .../images/knobs/JP8000.knob | Bin .../webaudio-controls/images/knobs/JP8000.png | Bin .../images/knobs/Jambalaya.knob | Bin .../images/knobs/Jambalaya.png | Bin .../images/knobs/LittlePhatty.knob | Bin .../images/knobs/LittlePhatty.png | Bin .../images/knobs/MiniMoog_Main.knob | Bin .../images/knobs/MiniMoog_Main.png | Bin .../images/knobs/SimpleFlat3.knob | Bin .../images/knobs/SimpleFlat3.png | Bin .../images/knobs/Vintage_Knob.knob | Bin .../images/knobs/Vintage_Knob.png | Bin .../images/knobs/Vintage_VUMeter.knob | Bin .../images/knobs/Vintage_VUMeter.png | Bin .../images/knobs/Vintage_VUMeter_2.knob | Bin .../images/knobs/Vintage_VUMeter_2.png | Bin .../knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png | Bin .../images/knobs/controls.skin | Bin .../images/knobs/hsliderbody.png | Bin .../images/knobs/hsliderknob.png | Bin .../webaudio-controls/images/knobs/hsw5.png | Bin .../images/knobs/knob_metal_mesh.png | Bin .../images/knobs/lineshadow.knob | Bin .../images/knobs/lineshadow.png | Bin .../images/knobs/lineshadow2.knob | Bin .../images/knobs/lineshadow2.png | Bin .../webaudio-controls/images/knobs/m400.knob | Bin .../webaudio-controls/images/knobs/m400.png | Bin .../images/knobs/nice_lamp_knob.png | Bin .../images/knobs/parambg120x32.png | Bin .../images/knobs/plastic_knob.png | Bin .../images/knobs/redbutton128.png | Bin .../images/knobs/simplegray.knob | Bin .../images/knobs/simplegray.png | Bin .../images/knobs/switch_toggle.knob | Bin .../images/knobs/switch_toggle.png | Bin .../images/knobs/vernier.knob | Bin .../images/knobs/vernier.png | Bin .../images/knobs/vsliderbody.png | Bin .../images/knobs/vsliderknob.png | Bin .../webaudio-controls/images/knobs/yellow.png | Bin src/webaudio-controls/webaudio-knob.js | 562 +++ src/webaudio-controls/webaudio-widget.js | 378 ++ temp-zone/Knob.tsx | 4 +- .../webaudio-controls-modules.js | 3092 ++++++++--------- tsconfig.json | 8 +- 64 files changed, 2485 insertions(+), 1559 deletions(-) rename {temp-zone => src}/webaudio-controls/images/img/LittlePhatty_sample.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/bg.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/defknob2.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/demo.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/hsliderbody.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/hsliderknob.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/hsw5.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/midilearn.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/sample3.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/switch_toggle.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/testknob.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/vsliderbody.png (100%) rename {temp-zone => src}/webaudio-controls/images/img/vsliderknob.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Aqua.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Aqua.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Carbon.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Carbon.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Chromed.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/JP8000.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/JP8000.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Jambalaya.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Jambalaya.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/LittlePhatty.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/LittlePhatty.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/MiniMoog_Main.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/MiniMoog_Main.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/SimpleFlat3.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/SimpleFlat3.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Vintage_Knob.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Vintage_Knob.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Vintage_VUMeter.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Vintage_VUMeter.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/Vintage_VUMeter_2.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/controls.skin (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/hsliderbody.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/hsliderknob.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/hsw5.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/knob_metal_mesh.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/lineshadow.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/lineshadow.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/lineshadow2.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/lineshadow2.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/m400.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/m400.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/nice_lamp_knob.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/parambg120x32.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/plastic_knob.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/redbutton128.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/simplegray.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/simplegray.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/switch_toggle.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/switch_toggle.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/vernier.knob (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/vernier.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/vsliderbody.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/vsliderknob.png (100%) rename {temp-zone => src}/webaudio-controls/images/knobs/yellow.png (100%) create mode 100644 src/webaudio-controls/webaudio-knob.js create mode 100644 src/webaudio-controls/webaudio-widget.js diff --git a/temp-zone/webaudio-controls/images/img/LittlePhatty_sample.png b/src/webaudio-controls/images/img/LittlePhatty_sample.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/LittlePhatty_sample.png rename to src/webaudio-controls/images/img/LittlePhatty_sample.png diff --git a/temp-zone/webaudio-controls/images/img/bg.png b/src/webaudio-controls/images/img/bg.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/bg.png rename to src/webaudio-controls/images/img/bg.png diff --git a/temp-zone/webaudio-controls/images/img/defknob2.png b/src/webaudio-controls/images/img/defknob2.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/defknob2.png rename to src/webaudio-controls/images/img/defknob2.png diff --git a/temp-zone/webaudio-controls/images/img/demo.png b/src/webaudio-controls/images/img/demo.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/demo.png rename to src/webaudio-controls/images/img/demo.png diff --git a/temp-zone/webaudio-controls/images/img/hsliderbody.png b/src/webaudio-controls/images/img/hsliderbody.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/hsliderbody.png rename to src/webaudio-controls/images/img/hsliderbody.png diff --git a/temp-zone/webaudio-controls/images/img/hsliderknob.png b/src/webaudio-controls/images/img/hsliderknob.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/hsliderknob.png rename to src/webaudio-controls/images/img/hsliderknob.png diff --git a/temp-zone/webaudio-controls/images/img/hsw5.png b/src/webaudio-controls/images/img/hsw5.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/hsw5.png rename to src/webaudio-controls/images/img/hsw5.png diff --git a/temp-zone/webaudio-controls/images/img/midilearn.png b/src/webaudio-controls/images/img/midilearn.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/midilearn.png rename to src/webaudio-controls/images/img/midilearn.png diff --git a/temp-zone/webaudio-controls/images/img/sample3.png b/src/webaudio-controls/images/img/sample3.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/sample3.png rename to src/webaudio-controls/images/img/sample3.png diff --git a/temp-zone/webaudio-controls/images/img/switch_toggle.png b/src/webaudio-controls/images/img/switch_toggle.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/switch_toggle.png rename to src/webaudio-controls/images/img/switch_toggle.png diff --git a/temp-zone/webaudio-controls/images/img/testknob.png b/src/webaudio-controls/images/img/testknob.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/testknob.png rename to src/webaudio-controls/images/img/testknob.png diff --git a/temp-zone/webaudio-controls/images/img/vsliderbody.png b/src/webaudio-controls/images/img/vsliderbody.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/vsliderbody.png rename to src/webaudio-controls/images/img/vsliderbody.png diff --git a/temp-zone/webaudio-controls/images/img/vsliderknob.png b/src/webaudio-controls/images/img/vsliderknob.png similarity index 100% rename from temp-zone/webaudio-controls/images/img/vsliderknob.png rename to src/webaudio-controls/images/img/vsliderknob.png diff --git a/temp-zone/webaudio-controls/images/knobs/Aqua.knob b/src/webaudio-controls/images/knobs/Aqua.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Aqua.knob rename to src/webaudio-controls/images/knobs/Aqua.knob diff --git a/temp-zone/webaudio-controls/images/knobs/Aqua.png b/src/webaudio-controls/images/knobs/Aqua.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Aqua.png rename to src/webaudio-controls/images/knobs/Aqua.png diff --git a/temp-zone/webaudio-controls/images/knobs/Carbon.knob b/src/webaudio-controls/images/knobs/Carbon.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Carbon.knob rename to src/webaudio-controls/images/knobs/Carbon.knob diff --git a/temp-zone/webaudio-controls/images/knobs/Carbon.png b/src/webaudio-controls/images/knobs/Carbon.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Carbon.png rename to src/webaudio-controls/images/knobs/Carbon.png diff --git a/temp-zone/webaudio-controls/images/knobs/Chromed.png b/src/webaudio-controls/images/knobs/Chromed.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Chromed.png rename to src/webaudio-controls/images/knobs/Chromed.png diff --git a/temp-zone/webaudio-controls/images/knobs/JP8000.knob b/src/webaudio-controls/images/knobs/JP8000.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/JP8000.knob rename to src/webaudio-controls/images/knobs/JP8000.knob diff --git a/temp-zone/webaudio-controls/images/knobs/JP8000.png b/src/webaudio-controls/images/knobs/JP8000.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/JP8000.png rename to src/webaudio-controls/images/knobs/JP8000.png diff --git a/temp-zone/webaudio-controls/images/knobs/Jambalaya.knob b/src/webaudio-controls/images/knobs/Jambalaya.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Jambalaya.knob rename to src/webaudio-controls/images/knobs/Jambalaya.knob diff --git a/temp-zone/webaudio-controls/images/knobs/Jambalaya.png b/src/webaudio-controls/images/knobs/Jambalaya.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Jambalaya.png rename to src/webaudio-controls/images/knobs/Jambalaya.png diff --git a/temp-zone/webaudio-controls/images/knobs/LittlePhatty.knob b/src/webaudio-controls/images/knobs/LittlePhatty.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/LittlePhatty.knob rename to src/webaudio-controls/images/knobs/LittlePhatty.knob diff --git a/temp-zone/webaudio-controls/images/knobs/LittlePhatty.png b/src/webaudio-controls/images/knobs/LittlePhatty.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/LittlePhatty.png rename to src/webaudio-controls/images/knobs/LittlePhatty.png diff --git a/temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.knob b/src/webaudio-controls/images/knobs/MiniMoog_Main.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.knob rename to src/webaudio-controls/images/knobs/MiniMoog_Main.knob diff --git a/temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.png b/src/webaudio-controls/images/knobs/MiniMoog_Main.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/MiniMoog_Main.png rename to src/webaudio-controls/images/knobs/MiniMoog_Main.png diff --git a/temp-zone/webaudio-controls/images/knobs/SimpleFlat3.knob b/src/webaudio-controls/images/knobs/SimpleFlat3.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/SimpleFlat3.knob rename to src/webaudio-controls/images/knobs/SimpleFlat3.knob diff --git a/temp-zone/webaudio-controls/images/knobs/SimpleFlat3.png b/src/webaudio-controls/images/knobs/SimpleFlat3.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/SimpleFlat3.png rename to src/webaudio-controls/images/knobs/SimpleFlat3.png diff --git a/temp-zone/webaudio-controls/images/knobs/Vintage_Knob.knob b/src/webaudio-controls/images/knobs/Vintage_Knob.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Vintage_Knob.knob rename to src/webaudio-controls/images/knobs/Vintage_Knob.knob diff --git a/temp-zone/webaudio-controls/images/knobs/Vintage_Knob.png b/src/webaudio-controls/images/knobs/Vintage_Knob.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Vintage_Knob.png rename to src/webaudio-controls/images/knobs/Vintage_Knob.png diff --git a/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.knob b/src/webaudio-controls/images/knobs/Vintage_VUMeter.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.knob rename to src/webaudio-controls/images/knobs/Vintage_VUMeter.knob diff --git a/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.png b/src/webaudio-controls/images/knobs/Vintage_VUMeter.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter.png rename to src/webaudio-controls/images/knobs/Vintage_VUMeter.png diff --git a/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob b/src/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob rename to src/webaudio-controls/images/knobs/Vintage_VUMeter_2.knob diff --git a/temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.png b/src/webaudio-controls/images/knobs/Vintage_VUMeter_2.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/Vintage_VUMeter_2.png rename to src/webaudio-controls/images/knobs/Vintage_VUMeter_2.png diff --git a/temp-zone/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png b/src/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png rename to src/webaudio-controls/images/knobs/WOK_vintage_AbbeyRoad_PAN_Knob.png diff --git a/temp-zone/webaudio-controls/images/knobs/controls.skin b/src/webaudio-controls/images/knobs/controls.skin similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/controls.skin rename to src/webaudio-controls/images/knobs/controls.skin diff --git a/temp-zone/webaudio-controls/images/knobs/hsliderbody.png b/src/webaudio-controls/images/knobs/hsliderbody.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/hsliderbody.png rename to src/webaudio-controls/images/knobs/hsliderbody.png diff --git a/temp-zone/webaudio-controls/images/knobs/hsliderknob.png b/src/webaudio-controls/images/knobs/hsliderknob.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/hsliderknob.png rename to src/webaudio-controls/images/knobs/hsliderknob.png diff --git a/temp-zone/webaudio-controls/images/knobs/hsw5.png b/src/webaudio-controls/images/knobs/hsw5.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/hsw5.png rename to src/webaudio-controls/images/knobs/hsw5.png diff --git a/temp-zone/webaudio-controls/images/knobs/knob_metal_mesh.png b/src/webaudio-controls/images/knobs/knob_metal_mesh.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/knob_metal_mesh.png rename to src/webaudio-controls/images/knobs/knob_metal_mesh.png diff --git a/temp-zone/webaudio-controls/images/knobs/lineshadow.knob b/src/webaudio-controls/images/knobs/lineshadow.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/lineshadow.knob rename to src/webaudio-controls/images/knobs/lineshadow.knob diff --git a/temp-zone/webaudio-controls/images/knobs/lineshadow.png b/src/webaudio-controls/images/knobs/lineshadow.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/lineshadow.png rename to src/webaudio-controls/images/knobs/lineshadow.png diff --git a/temp-zone/webaudio-controls/images/knobs/lineshadow2.knob b/src/webaudio-controls/images/knobs/lineshadow2.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/lineshadow2.knob rename to src/webaudio-controls/images/knobs/lineshadow2.knob diff --git a/temp-zone/webaudio-controls/images/knobs/lineshadow2.png b/src/webaudio-controls/images/knobs/lineshadow2.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/lineshadow2.png rename to src/webaudio-controls/images/knobs/lineshadow2.png diff --git a/temp-zone/webaudio-controls/images/knobs/m400.knob b/src/webaudio-controls/images/knobs/m400.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/m400.knob rename to src/webaudio-controls/images/knobs/m400.knob diff --git a/temp-zone/webaudio-controls/images/knobs/m400.png b/src/webaudio-controls/images/knobs/m400.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/m400.png rename to src/webaudio-controls/images/knobs/m400.png diff --git a/temp-zone/webaudio-controls/images/knobs/nice_lamp_knob.png b/src/webaudio-controls/images/knobs/nice_lamp_knob.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/nice_lamp_knob.png rename to src/webaudio-controls/images/knobs/nice_lamp_knob.png diff --git a/temp-zone/webaudio-controls/images/knobs/parambg120x32.png b/src/webaudio-controls/images/knobs/parambg120x32.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/parambg120x32.png rename to src/webaudio-controls/images/knobs/parambg120x32.png diff --git a/temp-zone/webaudio-controls/images/knobs/plastic_knob.png b/src/webaudio-controls/images/knobs/plastic_knob.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/plastic_knob.png rename to src/webaudio-controls/images/knobs/plastic_knob.png diff --git a/temp-zone/webaudio-controls/images/knobs/redbutton128.png b/src/webaudio-controls/images/knobs/redbutton128.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/redbutton128.png rename to src/webaudio-controls/images/knobs/redbutton128.png diff --git a/temp-zone/webaudio-controls/images/knobs/simplegray.knob b/src/webaudio-controls/images/knobs/simplegray.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/simplegray.knob rename to src/webaudio-controls/images/knobs/simplegray.knob diff --git a/temp-zone/webaudio-controls/images/knobs/simplegray.png b/src/webaudio-controls/images/knobs/simplegray.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/simplegray.png rename to src/webaudio-controls/images/knobs/simplegray.png diff --git a/temp-zone/webaudio-controls/images/knobs/switch_toggle.knob b/src/webaudio-controls/images/knobs/switch_toggle.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/switch_toggle.knob rename to src/webaudio-controls/images/knobs/switch_toggle.knob diff --git a/temp-zone/webaudio-controls/images/knobs/switch_toggle.png b/src/webaudio-controls/images/knobs/switch_toggle.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/switch_toggle.png rename to src/webaudio-controls/images/knobs/switch_toggle.png diff --git a/temp-zone/webaudio-controls/images/knobs/vernier.knob b/src/webaudio-controls/images/knobs/vernier.knob similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/vernier.knob rename to src/webaudio-controls/images/knobs/vernier.knob diff --git a/temp-zone/webaudio-controls/images/knobs/vernier.png b/src/webaudio-controls/images/knobs/vernier.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/vernier.png rename to src/webaudio-controls/images/knobs/vernier.png diff --git a/temp-zone/webaudio-controls/images/knobs/vsliderbody.png b/src/webaudio-controls/images/knobs/vsliderbody.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/vsliderbody.png rename to src/webaudio-controls/images/knobs/vsliderbody.png diff --git a/temp-zone/webaudio-controls/images/knobs/vsliderknob.png b/src/webaudio-controls/images/knobs/vsliderknob.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/vsliderknob.png rename to src/webaudio-controls/images/knobs/vsliderknob.png diff --git a/temp-zone/webaudio-controls/images/knobs/yellow.png b/src/webaudio-controls/images/knobs/yellow.png similarity index 100% rename from temp-zone/webaudio-controls/images/knobs/yellow.png rename to src/webaudio-controls/images/knobs/yellow.png diff --git a/src/webaudio-controls/webaudio-knob.js b/src/webaudio-controls/webaudio-knob.js new file mode 100644 index 0000000..556adb5 --- /dev/null +++ b/src/webaudio-controls/webaudio-knob.js @@ -0,0 +1,562 @@ +/* * + * + * WebAudio-Controls is based on + * webaudio-knob by Eiji Kitamura http://google.com/+agektmr + * webaudio-slider by RYoya Kawai https://plus.google.com/108242669191458983485/posts + * webaudio-switch by Keisuke Ai http://d.hatena.ne.jp/aike/ + * Integrated and enhanced by g200kg http://www.g200kg.com/ + * + * Copyright 2013 Eiji Kitamura / Ryoya KAWAI / Keisuke Ai / g200kg(Tatsuya Shinyagaito) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * */ +import { WebAudioControlsWidget } from "./webaudio-widget.js"; + +let styles = document.createElement("style"); +styles.innerHTML = `#webaudioctrl-context-menu { + display: none; + position: absolute; + z-index: 10; + padding: 0; + width: 100px; + color:#eee; + background-color: #268; + border: solid 1px #888; + box-shadow: 1px 1px 2px #888; + font-family: sans-serif; + font-size: 11px; + line-height:1.7em; + text-align:center; + cursor:pointer; + color:#fff; + list-style: none; +} +#webaudioctrl-context-menu.active { + display: block; +} +.webaudioctrl-context-menu__item { + display: block; + margin: 0; + padding: 0; + color: #000; + background-color:#eee; + text-decoration: none; +} +.webaudioctrl-context-menu__title{ + font-weight:bold; +} +.webaudioctrl-context-menu__item:last-child { + margin-bottom: 0; +} +.webaudioctrl-context-menu__item:hover { + background-color: #b8b8b8; +} +`; +document.head.appendChild(styles); +let midimenu = document.createElement("ul"); +midimenu.id = "webaudioctrl-context-menu"; +midimenu.innerHTML = `
  • MIDI Learn
    • +
  • Learn
    • +
  • Clear
    • +
  • Close
    • +`; +let opt = { + useMidi: 0, + preserveMidiLearn: 0, + preserveValue: 0, + midilearn: 0, + mididump: 0, + outline: null, + knobSrc: null, + knobSprites: null, + knobWidth: null, + knobHeight: null, + knobDiameter: null, + knobColors: "#e00;#000;#fff", + sliderSrc: null, + sliderWidth: null, + sliderHeight: null, + sliderKnobSrc: null, + sliderKnobWidth: null, + sliderKnobHeight: null, + sliderDitchlength: null, + sliderColors: "#e00;#333;#fcc", + switchWidth: null, + switchHeight: null, + switchDiameter: null, + switchColors: "#e00;#000;#fcc", + paramWidth: null, + paramHeight: null, + paramFontSize: 9, + paramColors: "#fff;#000", + valuetip: 0, + xypadColors: "#e00;#000;#fcc", +}; +if (window.WebAudioControlsOptions) + Object.assign(opt, window.WebAudioControlsOptions); + +try { + customElements.define("webaudio-knob", WebAudioKnob); +} catch (error) { + console.log("webaudio-knob already defined"); +} + +export class WebAudioKnob extends WebAudioControlsWidget { + constructor() { + super(); + } + connectedCallback() { + let root; + if (this.attachShadow) root = this.attachShadow({ mode: "open" }); + else root = this; + root.innerHTML = ` +
    + `; + this.elem = root.childNodes[2]; + this.ttframe = this.elem.firstChild; + this.label = this.ttframe.nextSibling; + this.enable = this.getAttr("enable", 1); + this._src = this.getAttr("src", opt.knobSrc); + Object.defineProperty(this, "src", { + get: () => { + return this._src; + }, + set: (v) => { + this._src = v; + this.setupImage(); + }, + }); + this._value = this.getAttr("value", 0); + Object.defineProperty(this, "value", { + get: () => { + return this._value; + }, + set: (v) => { + this._value = v; + this.redraw(); + }, + }); + this.defvalue = this.getAttr("defvalue", this._value); + this._min = this.getAttr("min", 0); + Object.defineProperty(this, "min", { + get: () => { + return this._min; + }, + set: (v) => { + this._min = +v; + this.redraw(); + }, + }); + this._max = this.getAttr("max", 100); + Object.defineProperty(this, "max", { + get: () => { + return this._max; + }, + set: (v) => { + this._max = +v; + this.redraw(); + }, + }); + this._step = this.getAttr("step", 1); + Object.defineProperty(this, "step", { + get: () => { + return this._step; + }, + set: (v) => { + this._step = +v; + this.redraw(); + }, + }); + this._sprites = this.getAttr("sprites", opt.knobSprites); + Object.defineProperty(this, "sprites", { + get: () => { + return this._sprites; + }, + set: (v) => { + this._sprites = v; + this.setupImage(); + }, + }); + this._width = this.getAttr("width", null); + Object.defineProperty(this, "width", { + get: () => { + return this._width; + }, + set: (v) => { + this._width = v; + this.setupImage(); + }, + }); + this._height = this.getAttr("height", null); + Object.defineProperty(this, "height", { + get: () => { + return this._height; + }, + set: (v) => { + this._height = v; + this.setupImage(); + }, + }); + this._diameter = this.getAttr("diameter", null); + Object.defineProperty(this, "diameter", { + get: () => { + return this._diameter; + }, + set: (v) => { + this._diameter = v; + this.setupImage(); + }, + }); + this._colors = this.getAttr("colors", opt.knobColors); + Object.defineProperty(this, "colors", { + get: () => { + return this._colors; + }, + set: (v) => { + this._colors = v; + this.setupImage(); + }, + }); + this.outline = this.getAttr("outline", opt.outline); + this.setupLabel(); + this.log = this.getAttr("log", 0); + this.sensitivity = this.getAttr("sensitivity", 1); + this.valuetip = this.getAttr("valuetip", opt.valuetip); + this.tooltip = this.getAttr("tooltip", null); + this.conv = this.getAttr("conv", null); + if (this.conv) { + const x = this._value; + this.convValue = eval(this.conv); + if (typeof this.convValue == "function") + this.convValue = this.convValue(x); + } else this.convValue = this._value; + this.midilearn = this.getAttr("midilearn", opt.midilearn); + this.midicc = this.getAttr("midicc", null); + this.midiController = {}; + this.midiMode = "normal"; + if (this.midicc) { + let ch = + parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - 1; + let cc = parseInt( + this.midicc.substring(this.midicc.lastIndexOf(".") + 1) + ); + this.setMidiController(ch, cc); + } + if (this.midilearn && this.id) { + if ( + webAudioControlsWidgetManager && + webAudioControlsWidgetManager.midiLearnTable + ) { + const ml = webAudioControlsWidgetManager.midiLearnTable; + for (let i = 0; i < ml.length; ++i) { + if (ml[i].id == this.id) { + this.setMidiController(ml[i].cc.channel, ml[i].cc.cc); + break; + } + } + } + } + this.setupImage(); + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + this._setValue(this._value); + this.coltab = ["#e00", "#000", "#000"]; + if (window.webAudioControlsWidgetManager) + window.webAudioControlsWidgetManager.addWidget(this); + } + disconnectedCallback() {} + setupImage() { + this.kw = + this._width || this._diameter || opt.knobWidth || opt.knobDiameter; + this.kh = + this._height || this._diameter || opt.knobHeight || opt.knobDiameter; + if (!this.src) { + if (this.colors) this.coltab = this.colors.split(";"); + if (!this.coltab) this.coltab = ["#e00", "#000", "#000"]; + let svg = ` + + + + + + + + + + + + + + + + + + + + +`; + for (let i = 0; i < 101; ++i) { + svg += ``; + } + svg += ""; + this.elem.style.backgroundImage = + "url(data:image/svg+xml;base64," + btoa(svg) + ")"; + if (this.kw == null) this.kw = 64; + if (this.kh == null) this.kh = 64; + this.elem.style.backgroundSize = `${this.kw}px ${this.kh * 101}px`; + this.elem.style.width = this.kw + "px"; + this.elem.style.height = this.kh + "px"; + this.style.height = this.kh + "px"; + this.fireflag = true; + this.redraw(); + return; + } else { + this.img = new Image(); + this.img.onload = () => { + this.elem.style.backgroundImage = "url(" + this.src + ")"; + if (this._sprites == null) + this._sprites = this.img.height / this.img.width - 1; + else this._sprites = +this._sprites; + if (this.kw == null) this.kw = this.img.width; + if (this.kh == null) this.kh = this.img.height / (this.sprites + 1); + if (!this.sprites) this.elem.style.backgroundSize = "100% 100%"; + else + this.elem.style.backgroundSize = `${this.kw}px ${ + this.kh * (this.sprites + 1) + }px`; + this.elem.style.width = this.kw + "px"; + this.elem.style.height = this.kh + "px"; + this.style.height = this.kh + "px"; + this.redraw(); + }; + this.img.src = this.src; + } + } + redraw() { + let ratio; + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + if (this.value < this.min) { + this.value = this.min; + } + if (this.value > this.max) { + this.value = this.max; + } + if (this.log) + ratio = Math.log(this.value / this.min) / Math.log(this.max / this.min); + else ratio = (this.value - this.min) / (this.max - this.min); + let style = this.elem.style; + let sp = this.src ? this.sprites : 100; + if (sp >= 1) { + let offset = (sp * ratio) | 0; + style.backgroundPosition = "0px " + -offset * this.kh + "px"; + style.transform = "rotate(0deg)"; + } else { + let deg = 270 * (ratio - 0.5); + style.backgroundPosition = "0px 0px"; + style.transform = "rotate(" + deg + "deg)"; + } + } + _setValue(v) { + if (this.step) + v = Math.round((v - this.min) / this.step) * this.step + this.min; + this._value = Math.min(this.max, Math.max(this.min, v)); + if (this._value != this.oldvalue) { + this.fireflag = true; + this.oldvalue = this._value; + if (this.conv) { + const x = this._value; + this.convValue = eval(this.conv); + if (typeof this.convValue == "function") + this.convValue = this.convValue(x); + } else this.convValue = this._value; + if (typeof this.convValue == "number") { + this.convValue = this.convValue.toFixed(this.digits); + } + this.redraw(); + this.showtip(0); + return 1; + } + return 0; + } + setValue(v, f) { + if (this._setValue(v) && f) + this.sendEvent("input"), this.sendEvent("change"); + } + keydown(e) { + const delta = this.step; + if (delta == 0) delta = 1; + switch (e.key) { + case "ArrowUp": + this.setValue(this.value + delta, true); + break; + case "ArrowDown": + this.setValue(this.value - delta, true); + break; + default: + return; + } + e.preventDefault(); + e.stopPropagation(); + } + wheel(e) { + if (!this.enable) return; + if (this.log) { + let r = Math.log(this.value / this.min) / Math.log(this.max / this.min); + let d = e.deltaY > 0 ? -0.01 : 0.01; + if (!e.shiftKey) d *= 5; + r += d; + this.setValue(this.min * Math.pow(this.max / this.min, r), true); + } else { + let delta = Math.max(this.step, (this.max - this.min) * 0.05); + if (e.shiftKey) delta = this.step ? this.step : 1; + delta = e.deltaY > 0 ? -delta : delta; + this.setValue(+this.value + delta, true); + } + e.preventDefault(); + e.stopPropagation(); + } + pointerdown(ev) { + if (!this.enable) return; + let e = ev; + if (ev.touches) { + e = ev.changedTouches[0]; + this.identifier = e.identifier; + } else { + if (e.buttons != 1 && e.button != 0) return; + } + this.elem.focus(); + this.drag = 1; + this.showtip(0); + this.oldvalue = this._value; + let pointermove = (ev) => { + let e = ev; + if (ev.touches) { + for (let i = 0; i < ev.touches.length; ++i) { + if (ev.touches[i].identifier == this.identifier) { + e = ev.touches[i]; + break; + } + } + } + if (this.lastShift !== e.shiftKey) { + this.lastShift = e.shiftKey; + this.startPosX = e.pageX; + this.startPosY = e.pageY; + this.startVal = this.value; + } + let offset = + (this.startPosY - e.pageY - this.startPosX + e.pageX) * + this.sensitivity; + if (this.log) { + let r = + Math.log(this.startVal / this.min) / Math.log(this.max / this.min); + r += offset / ((e.shiftKey ? 4 : 1) * 128); + if (r < 0) r = 0; + if (r > 1) r = 1; + this._setValue(this.min * Math.pow(this.max / this.min, r)); + } else { + this._setValue( + this.min + + (((this.startVal + + ((this.max - this.min) * offset) / ((e.shiftKey ? 4 : 1) * 128) - + this.min) / + this.step) | + 0) * + this.step + ); + } + if (this.fireflag) { + this.sendEvent("input"); + this.fireflag = false; + } + if (e.preventDefault) e.preventDefault(); + if (e.stopPropagation) e.stopPropagation(); + return false; + }; + let pointerup = (ev) => { + let e = ev; + if (ev.touches) { + for (let i = 0; ; ) { + if (ev.changedTouches[i].identifier == this.identifier) { + break; + } + if (++i >= ev.changedTouches.length) return; + } + } + this.drag = 0; + this.showtip(0); + this.startPosX = this.startPosY = null; + window.removeEventListener("mousemove", pointermove); + window.removeEventListener("touchmove", pointermove, { + passive: false, + }); + window.removeEventListener("mouseup", pointerup); + window.removeEventListener("touchend", pointerup); + window.removeEventListener("touchcancel", pointerup); + document.body.removeEventListener("touchstart", preventScroll, { + passive: false, + }); + this.sendEvent("change"); + }; + let preventScroll = (e) => { + e.preventDefault(); + }; + if (e.ctrlKey || e.metaKey) this.setValue(this.defvalue, true); + else { + this.startPosX = e.pageX; + this.startPosY = e.pageY; + this.startVal = this.value; + window.addEventListener("mousemove", pointermove); + window.addEventListener("touchmove", pointermove, { + passive: false, + }); + } + window.addEventListener("mouseup", pointerup); + window.addEventListener("touchend", pointerup); + window.addEventListener("touchcancel", pointerup); + document.body.addEventListener("touchstart", preventScroll, { + passive: false, + }); + ev.preventDefault(); + ev.stopPropagation(); + return false; + } +} diff --git a/src/webaudio-controls/webaudio-widget.js b/src/webaudio-controls/webaudio-widget.js new file mode 100644 index 0000000..98d0eb3 --- /dev/null +++ b/src/webaudio-controls/webaudio-widget.js @@ -0,0 +1,378 @@ +export class WebAudioControlsWidgetManager { + constructor() { + this.midiAccess = null; + this.listOfWidgets = []; + this.listOfExternalMidiListeners = []; + if (opt.preserveMidiLearn) + this.midiLearnTable = JSON.parse( + localStorage.getItem("WebAudioControlsMidiLearn") + ); + else this.midiLearnTable = null; + this.initWebAudioControls(); + } + addWidget(w) { + this.listOfWidgets.push(w); + } + initWebAudioControls() { + if (navigator.requestMIDIAccess) { + navigator.requestMIDIAccess().then( + (ma) => { + (this.midiAccess = ma), this.enableInputs(); + }, + (err) => { + console.log("MIDI not initialized - error encountered:" + err.code); + } + ); + } + } + enableInputs() { + let inputs = this.midiAccess.inputs.values(); + console.log("Found " + this.midiAccess.inputs.size + " MIDI input(s)"); + for ( + let input = inputs.next(); + input && !input.done; + input = inputs.next() + ) { + console.log("Connected input: " + input.value.name); + input.value.onmidimessage = this.handleMIDIMessage.bind(this); + } + } + midiConnectionStateChange(e) { + console.log( + "connection: " + + e.port.name + + " " + + e.port.connection + + " " + + e.port.state + ); + enableInputs(); + } + + onMIDIStarted(midi) { + this.midiAccess = midi; + midi.onstatechange = this.midiConnectionStateChange; + enableInputs(midi); + } + // Add hooks for external midi listeners support + addMidiListener(callback) { + this.listOfExternalMidiListeners.push(callback); + } + getCurrentConfigAsJSON() { + return currentConfig.stringify(); + } + handleMIDIMessage(event) { + this.listOfExternalMidiListeners.forEach(function (externalListener) { + externalListener(event); + }); + if ( + (event.data[0] & 0xf0) == 0xf0 || + ((event.data[0] & 0xf0) == 0xb0 && event.data[1] >= 120) + ) + return; + for (let w of this.listOfWidgets) { + if (w.processMidiEvent) w.processMidiEvent(event); + } + if (opt.mididump) console.log(event.data); + } + contextMenuOpen(e, knob) { + if (!this.midiAccess) return; + let menu = document.getElementById("webaudioctrl-context-menu"); + menu.style.left = e.pageX + "px"; + menu.style.top = e.pageY + "px"; + menu.knob = knob; + menu.classList.add("active"); + menu.knob.focus(); + menu.knob.addEventListener( + "keydown", + this.contextMenuCloseByKey.bind(this) + ); + } + contextMenuCloseByKey(e) { + if (e.keyCode == 27) this.contextMenuClose(); + } + contextMenuClose() { + let menu = document.getElementById("webaudioctrl-context-menu"); + menu.knob.removeEventListener("keydown", this.contextMenuCloseByKey); + menu.classList.remove("active"); + let menuItemLearn = document.getElementById( + "webaudioctrl-context-menu-learn" + ); + menuItemLearn.innerHTML = "Learn"; + menu.knob.midiMode = "normal"; + } + contextMenuLearn() { + let menu = document.getElementById("webaudioctrl-context-menu"); + let menuItemLearn = document.getElementById( + "webaudioctrl-context-menu-learn" + ); + menuItemLearn.innerHTML = "Listening..."; + menu.knob.midiMode = "learn"; + } + contextMenuClear(e) { + let menu = document.getElementById("webaudioctrl-context-menu"); + menu.knob.midiController = {}; + this.contextMenuClose(); + } + preserveMidiLearn() { + if (!opt.preserveMidiLearn) return; + const v = []; + for (let w of this.listOfWidgets) { + if (w.id) v.push({ id: w.id, cc: w.midiController }); + } + const s = JSON.stringify(v); + localStorage.setItem("WebAudioControlsMidiLearn", s); + } +} + +export class WebAudioControlsWidget extends HTMLElement { + constructor() { + super(); + this.addEventListener("keydown", this.keydown); + this.addEventListener("mousedown", this.pointerdown, { passive: false }); + this.addEventListener("touchstart", this.pointerdown, { passive: false }); + this.addEventListener("wheel", this.wheel, { passive: false }); + this.addEventListener("mouseover", this.pointerover); + this.addEventListener("mouseout", this.pointerout); + this.addEventListener("contextmenu", this.contextMenu); + this.hover = this.drag = 0; + document.body.appendChild(midimenu); + this.basestyle = ` +.webaudioctrl-tooltip{ + display:inline-block; + position:absolute; + margin:0 -1000px; + z-index: 999; + background:#eee; + color:#000; + border:1px solid #666; + border-radius:4px; + padding:5px 10px; + text-align:center; + left:0; top:0; + font-size:11px; + opacity:0; + visibility:hidden; +} +.webaudioctrl-tooltip:before{ + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -8px; + border: 8px solid transparent; + border-top: 8px solid #666; +} +.webaudioctrl-tooltip:after{ + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -6px; + border: 6px solid transparent; + border-top: 6px solid #eee; +} +`; + this.onblur = () => { + this.elem.style.outline = "none"; + }; + this.onfocus = () => { + switch (+this.outline) { + case null: + case 0: + this.elem.style.outline = "none"; + break; + case 1: + this.elem.style.outline = "1px solid #444"; + break; + default: + this.elem.style.outline = this.outline; + } + }; + } + sendEvent(ev) { + let event; + event = document.createEvent("HTMLEvents"); + event.initEvent(ev, false, true); + this.dispatchEvent(event); + } + getAttr(n, def) { + let v = this.getAttribute(n); + if (v == null) return def; + switch (typeof def) { + case "number": + if (v == "true") return 1; + v = +v; + if (isNaN(v)) return 0; + return v; + } + return v; + } + showtip(d) { + function valstr(x, c, type) { + switch (type) { + case "x": + return (x | 0).toString(16); + case "X": + return (x | 0).toString(16).toUpperCase(); + case "d": + return (x | 0).toString(); + case "f": + return parseFloat(x).toFixed(c); + case "s": + return x.toString(); + } + return ""; + } + function numformat(s, x) { + let i = s.indexOf("%"); + let j = i + 1; + if (i < 0) j = s.length; + let c = [0, 0], + type = 0, + m = 0, + r = ""; + if (s.indexOf("%s") >= 0) { + return s.replace("%s", x); + } + for (; j < s.length; ++j) { + if ("dfxXs".indexOf(s[j]) >= 0) { + type = s[j]; + break; + } + if (s[j] == ".") m = 1; + else c[m] = c[m] * 10 + parseInt(s[j]); + } + r = valstr(x, c[1], type); + if (c[0] > 0) r = (" " + r).slice(-c[0]); + r = s.replace(/%.*[xXdfs]/, r); + return r; + } + let s = this.tooltip; + if (this.drag || this.hover) { + if (this.valuetip) { + if (s == null) s = `%s`; + else if (s.indexOf("%") < 0) s += ` : %s`; + } + if (s) { + this.ttframe.innerHTML = numformat(s, this.convValue); + this.ttframe.style.display = "inline-block"; + this.ttframe.style.width = "auto"; + this.ttframe.style.height = "auto"; + this.ttframe.style.transition = + "opacity 0.5s " + d + "s,visibility 0.5s " + d + "s"; + this.ttframe.style.opacity = 0.9; + this.ttframe.style.visibility = "visible"; + let rc = this.getBoundingClientRect(), + rc2 = this.ttframe.getBoundingClientRect(), + rc3 = document.documentElement.getBoundingClientRect(); + this.ttframe.style.left = (rc.width - rc2.width) * 0.5 + 1000 + "px"; + this.ttframe.style.top = -rc2.height - 8 + "px"; + return; + } + } + this.ttframe.style.transition = + "opacity 0.1s " + d + "s,visibility 0.1s " + d + "s"; + this.ttframe.style.opacity = 0; + this.ttframe.style.visibility = "hidden"; + } + setupLabel() { + this.labelpos = this.getAttr("labelpos", "bottom 0px"); + const lpos = this.labelpos.split(" "); + let offs = ""; + if (lpos.length == 3) offs = `translate(${lpos[1]},${lpos[2]})`; + this.label.style.position = "absolute"; + switch (lpos[0]) { + case "center": + this.label.style.top = "50%"; + this.label.style.left = "50%"; + this.label.style.transform = `translate(-50%,-50%) ${offs}`; + break; + case "right": + this.label.style.top = "50%"; + this.label.style.left = "100%"; + this.label.style.transform = `translateY(-50%) ${offs}`; + break; + case "left": + this.label.style.top = "50%"; + this.label.style.left = "0%"; + this.label.style.transform = `translate(-100%,-50%) ${offs}`; + break; + case "bottom": + this.label.style.top = "100%"; + this.label.style.left = "50%"; + this.label.style.transform = `translateX(-50%) ${offs}`; + break; + case "top": + this.label.style.top = "0%"; + this.label.style.left = "50%"; + this.label.style.transform = `translate(-50%,-100%) ${offs}`; + break; + } + } + pointerover(e) { + this.hover = 1; + this.showtip(0.6); + } + pointerout(e) { + this.hover = 0; + this.showtip(0); + } + contextMenu(e) { + if (window.webAudioControlsWidgetManager && this.midilearn) + webAudioControlsWidgetManager.contextMenuOpen(e, this); + e.preventDefault(); + e.stopPropagation(); + } + setMidiController(channel, cc) { + if (this.listeningToThisMidiController(channel, cc)) return; + this.midiController = { channel: channel, cc: cc }; + console.log( + "Added mapping for channel=" + + channel + + " cc=" + + cc + + " tooltip=" + + this.tooltip + ); + } + listeningToThisMidiController(channel, cc) { + const c = this.midiController; + if ((c.channel === channel || c.channel < 0) && c.cc === cc) return true; + return false; + } + processMidiEvent(event) { + const channel = event.data[0] & 0xf; + const controlNumber = event.data[1]; + if (this.midiMode == "learn") { + this.setMidiController(channel, controlNumber); + webAudioControlsWidgetManager.contextMenuClose(); + this.midiMode = "normal"; + webAudioControlsWidgetManager.preserveMidiLearn(); + } + if (this.listeningToThisMidiController(channel, controlNumber)) { + if (this.tagName == "WEBAUDIO-SWITCH") { + switch (this.type) { + case "toggle": + if (event.data[2] >= 64) this.setValue(1 - this.value, true); + break; + case "kick": + this.setValue(event.data[2] >= 64 ? 1 : 0); + break; + case "radio": + let els = document.querySelectorAll( + "webaudio-switch[type='radio'][group='" + this.group + "']" + ); + for (let i = 0; i < els.length; ++i) { + if (els[i] == this) els[i].setValue(1); + else els[i].setValue(0); + } + break; + } + } else { + const val = this.min + ((this.max - this.min) * event.data[2]) / 127; + this.setValue(val, true); + } + } + } +} diff --git a/temp-zone/Knob.tsx b/temp-zone/Knob.tsx index 199413d..00a80ac 100644 --- a/temp-zone/Knob.tsx +++ b/temp-zone/Knob.tsx @@ -1,7 +1,7 @@ import React, { FC, DOMAttributes } from "react"; -import { WebAudioKnob } from "./webaudio-controls/webaudio-controls-modules.js"; +import { WebAudioKnob } from "../src/webaudio-controls/webaudio-knob"; console.log("WebAudioKnob", WebAudioKnob); -import "./webaudio-controls/webaudio-controls-modules.js"; +import "../src/webaudio-controls/webaudio-knob.js"; import { KnobProps } from "./Knob.types"; export type CustomEvents = { diff --git a/temp-zone/webaudio-controls/webaudio-controls-modules.js b/temp-zone/webaudio-controls/webaudio-controls-modules.js index 7c547c2..2f31825 100644 --- a/temp-zone/webaudio-controls/webaudio-controls-modules.js +++ b/temp-zone/webaudio-controls/webaudio-controls-modules.js @@ -112,604 +112,7 @@ if (window.customElements) { } try { - customElements.define( - "webaudio-slider", - class WebAudioSlider extends WebAudioControlsWidget { - constructor() { - super(); - } - connectedCallback() { - let root; - if (this.attachShadow) root = this.attachShadow({ mode: "open" }); - else root = this; - root.innerHTML = ` -
    -`; - this.elem = root.childNodes[2]; - this.knob = this.elem.firstChild; - this.ttframe = this.knob.nextSibling; - this.label = this.ttframe.nextSibling; - this.enable = this.getAttr("enable", 1); - this.tracking = this.getAttr("tracking", "rel"); - this._src = this.getAttr("src", opt.sliderSrc); - Object.defineProperty(this, "src", { - get: () => { - return this._src; - }, - set: (v) => { - this._src = v; - this.setupImage(); - }, - }); - this._knobsrc = this.getAttr("knobsrc", opt.sliderKnobSrc); - Object.defineProperty(this, "knobsrc", { - get: () => { - return this._knobsrc; - }, - set: (v) => { - this._knobsrc = v; - this.setupImage(); - }, - }); - this._value = this.getAttr("value", 0); - Object.defineProperty(this, "value", { - get: () => { - return this._value; - }, - set: (v) => { - this._value = v; - this.redraw(); - }, - }); - this.defvalue = this.getAttr("defvalue", this._value); - this._min = this.getAttr("min", 0); - Object.defineProperty(this, "min", { - get: () => { - return this._min; - }, - set: (v) => { - this._min = v; - this.redraw(); - }, - }); - this._max = this.getAttr("max", 100); - Object.defineProperty(this, "max", { - get: () => { - return this._max; - }, - set: (v) => { - this._max = v; - this.redraw(); - }, - }); - this._step = this.getAttr("step", 1); - Object.defineProperty(this, "step", { - get: () => { - return this._step; - }, - set: (v) => { - this._step = v; - this.redraw(); - }, - }); - this._sprites = this.getAttr("sprites", 0); - Object.defineProperty(this, "sprites", { - get: () => { - return this._sprites; - }, - set: (v) => { - this._sprites = v; - this.setupImage(); - }, - }); - this._direction = this.getAttr("direction", null); - Object.defineProperty(this, "direction", { - get: () => { - return this._direction; - }, - set: (v) => { - this._direction = v; - this.setupImage(); - }, - }); - this.log = this.getAttr("log", 0); - this._width = this.getAttr("width", opt.sliderWidth); - Object.defineProperty(this, "width", { - get: () => { - return this._width; - }, - set: (v) => { - this._width = v; - this.setupImage(); - }, - }); - this._height = this.getAttr("height", opt.sliderHeight); - Object.defineProperty(this, "height", { - get: () => { - return this._height; - }, - set: (v) => { - this._height = v; - this.setupImage(); - }, - }); - this._knobwidth = this.getAttr("knobwidth", opt.sliderKnobWidth); - Object.defineProperty(this, "knobwidth", { - get: () => { - return this._knobwidth; - }, - set: (v) => { - this._knobwidth = v; - this.setupImage(); - }, - }); - this._knobheight = this.getAttr("knobheight", opt.sliderKnobHeight); - Object.defineProperty(this, "knobheight", { - get: () => { - return this._knobheight; - }, - set: (v) => { - this._knobheight = v; - this.setupImage(); - }, - }); - this._ditchlength = this.getAttr( - "ditchlength", - opt.sliderDitchlength - ); - Object.defineProperty(this, "ditchlength", { - get: () => { - return this._ditchlength; - }, - set: (v) => { - this._ditchlength = v; - this.setupImage(); - }, - }); - this._colors = this.getAttr("colors", opt.sliderColors); - Object.defineProperty(this, "colors", { - get: () => { - return this._colors; - }, - set: (v) => { - this._colors = v; - this.setupImage(); - }, - }); - this.outline = this.getAttr("outline", opt.outline); - this.setupLabel(); - this.sensitivity = this.getAttr("sensitivity", 1); - this.valuetip = this.getAttr("valuetip", opt.valuetip); - this.tooltip = this.getAttr("tooltip", null); - this.conv = this.getAttr("conv", null); - if (this.conv) { - const x = this._value; - this.convValue = eval(this.conv); - if (typeof this.convValue == "function") - this.convValue = this.convValue(x); - } else this.convValue = this._value; - this.midilearn = this.getAttr("midilearn", opt.midilearn); - this.midicc = this.getAttr("midicc", null); - this.midiController = {}; - this.midiMode = "normal"; - if (this.midicc) { - let ch = - parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - - 1; - let cc = parseInt( - this.midicc.substring(this.midicc.lastIndexOf(".") + 1) - ); - this.setMidiController(ch, cc); - } - if (this.midilearn && this.id) { - if ( - webAudioControlsWidgetManager && - webAudioControlsWidgetManager.midiLearnTable - ) { - const ml = webAudioControlsWidgetManager.midiLearnTable; - for (let i = 0; i < ml.length; ++i) { - if (ml[i].id == this.id) { - this.setMidiController(ml[i].cc.channel, ml[i].cc.cc); - break; - } - } - } - } - this.setupImage(); - this.digits = 0; - if (this.step && this.step < 1) { - for (let n = this.step; n < 1; n *= 10) ++this.digits; - } - this.fireflag = true; - if (window.webAudioControlsWidgetManager) - // window.webAudioControlsWidgetManager.updateWidgets(); - window.webAudioControlsWidgetManager.addWidget(this); - this.elem.onclick = (e) => { - e.stopPropagation(); - }; - } - disconnectedCallback() {} - setupImage() { - this.coltab = this.colors.split(";"); - this.bodyimg = new Image(); - this.knobimg = new Image(); - this.srcurl = null; - if (this.src == null || this.src == "") { - this.sw = +this._width; - this.sh = +this.height; - if (this._direction == "horz") { - if (this._width == null) this.sw = 128; - if (this._height == null) this.sh = 24; - } else if (this._direction == "vert") { - if (this._width == null) this.sw = 24; - if (this._height == null) this.sh = 128; - } else { - if (this._width == null) this.sw = 128; - if (this._height == null) this.sh = 24; - } - const r = Math.min(this.sw, this.sh) * 0.5; - const svgbody = ` - - - - - this.sh ? 'x2="0%" y2="100%"' : 'x2="100%" y2="0%"' - }> - - - - - - - -`; - this.srcurl = "data:image/svg+xml;base64," + btoa(svgbody); - } else { - this.srcurl = this.src; - } - this.bodyimg.onload = () => { - if (this.src != "") - this.elem.style.backgroundImage = "url(" + this.srcurl + ")"; - this.sw = +this._width; - this.sh = +this._height; - if (this._width == null) this.sw = this.bodyimg.width; - if (this._height == null) this.sh = this.bodyimg.height; - if (this.dr == null) { - if (this.sw > this.sh) this.dr = "horz"; - else this.dr = "vert"; - } - this.kw = +this._knobwidth; - this.kh = +this._knobheight; - if (this._knobsrc == null) { - if (this._knobwidth == null) this.kw = Math.min(this.sw, this.sh); - if (this._knobheight == null) - this.kh = Math.min(this.sw, this.sh); - const mm = Math.min(this.kw, this.kh) * 0.5; - const kw2 = Math.max(1, this.kw - 12); - const kh2 = Math.max(1, this.kh - 12); - const svgknob = ` - - - - - - - - - - - - - - - - - - - - - - -`; - this.knobsrcurl = "data:image/svg+xml;base64," + btoa(svgknob); - } else { - this.knobsrcurl = this.knobsrc; - } - this.knobimg.onload = () => { - this.knob.style.backgroundImage = "url(" + this.knobsrcurl + ")"; - if (this._knobwidth == null) this.kw = this.knobimg.width; - if (this._knobheight == null) this.kh = this.knobimg.height; - this.dlen = this.ditchlength; - if (this.dlen == null) { - if (this.dr == "horz") this.dlen = this.sw - this.kw; - else this.dlen = this.sh - this.kh; - } - this.knob.style.backgroundSize = "100% 100%"; - this.knob.style.width = this.kw + "px"; - this.knob.style.height = this.kh + "px"; - this.elem.style.backgroundSize = "100% 100%"; - this.elem.style.width = this.sw + "px"; - this.elem.style.height = this.sh + "px"; - this.redraw(); - }; - this.knobimg.src = this.knobsrcurl; - }; - this.bodyimg.src = this.srcurl; - } - redraw() { - let ratio; - this.digits = 0; - if (this.step && this.step < 1) { - for (let n = this.step; n < 1; n *= 10) ++this.digits; - } - if (this.value < this.min) { - this.value = this.min; - } - if (this.value > this.max) { - this.value = this.max; - } - if (this.log) - ratio = - Math.log(this.value / this.min) / Math.log(this.max / this.min); - else ratio = (this.value - this.min) / (this.max - this.min); - let style = this.knob.style; - if (this.dr == "horz") { - style.top = (this.sh - this.kh) * 0.5 + "px"; - style.left = - (this.sw - this.kw - this.dlen) * 0.5 + ratio * this.dlen + "px"; - this.sensex = 1; - this.sensey = 0; - } else { - style.left = (this.sw - this.kw) * 0.5 + "px"; - style.top = - (this.sh - this.kh - this.dlen) * 0.5 + - (1 - ratio) * this.dlen + - "px"; - this.sensex = 0; - this.sensey = 1; - } - } - _setValue(v) { - v = Math.round((v - this.min) / this.step) * this.step + this.min; - this._value = Math.min(this.max, Math.max(this.min, v)); - if (this._value != this.oldvalue) { - this.oldvalue = this._value; - this.fireflag = true; - if (this.conv) { - const x = this._value; - this.convValue = eval(this.conv); - if (typeof this.convValue == "function") - this.convValue = this.convValue(x); - } else this.convValue = this._value; - if (typeof this.convValue == "number") { - this.convValue = this.convValue.toFixed(this.digits); - } - this.redraw(); - this.showtip(0); - return 1; - } - return 0; - } - setValue(v, f) { - if (this._setValue(v) && f) - this.sendEvent("input"), this.sendEvent("change"); - } - keydown(e) { - const delta = this.step; - if (delta == 0) delta = 1; - switch (e.key) { - case "ArrowUp": - this.setValue(this.value + delta, true); - break; - case "ArrowDown": - this.setValue(this.value - delta, true); - break; - default: - return; - } - e.preventDefault(); - e.stopPropagation(); - } - wheel(e) { - if (!this.enable) return; - if (this.log) { - let r = - Math.log(this.value / this.min) / Math.log(this.max / this.min); - let d = e.deltaY > 0 ? -0.01 : 0.01; - if (!e.shiftKey) d *= 5; - r += d; - this.setValue(this.min * Math.pow(this.max / this.min, r), true); - } else { - let delta = Math.max(this.step, (this.max - this.min) * 0.05); - if (e.shiftKey) delta = this.step ? this.step : 1; - delta = e.deltaY > 0 ? -delta : delta; - this.setValue(+this.value + delta, true); - } - e.preventDefault(); - e.stopPropagation(); - } - pointerdown(ev) { - if (!this.enable) return; - let e = ev; - if (ev.touches) { - e = ev.changedTouches[0]; - this.identifier = e.identifier; - } else { - if (e.buttons != 1 && e.button != 0) return; - } - this.elem.focus(); - this.drag = 1; - this.showtip(0); - let pointermove = (ev) => { - let e = ev; - if (ev.touches) { - for (let i = 0; i < ev.touches.length; ++i) { - if (ev.touches[i].identifier == this.identifier) { - e = ev.touches[i]; - break; - } - } - } - if (this.lastShift !== e.shiftKey) { - this.lastShift = e.shiftKey; - this.startPosX = e.pageX; - this.startPosY = e.pageY; - this.startVal = this.value; - } - if (this.tracking == "abs") { - const rc = this.getBoundingClientRect(); - let val; - if (this.dr == "horz") - val = Math.max( - 0, - Math.min( - 1, - (e.pageX - rc.left - window.pageXOffset - this.kw * 0.5) / - (this.width - this.kw) - ) - ); - else - val = - 1 - - Math.max( - 0, - Math.min( - 1, - (e.pageY - rc.top - window.pageYOffset - this.kh * 0.5) / - (this.height - this.kh) - ) - ); - if (this.log) { - this._setValue(this.min * Math.pow(this.max / this.min, val)); - } else this._setValue(this.min + (this.max - this.min) * val); - } else { - let offset = - ((this.startPosY - e.pageY) * this.sensey - - (this.startPosX - e.pageX) * this.sensex) * - this.sensitivity; - if (this.log) { - let r = - Math.log(this.startVal / this.min) / - Math.log(this.max / this.min); - r += offset / ((e.shiftKey ? 4 : 1) * 128); - if (r < 0) r = 0; - if (r > 1) r = 1; - this._setValue(this.min * Math.pow(this.max / this.min, r)); - } else { - this._setValue( - this.min + - (((this.startVal + - ((this.max - this.min) * offset) / - ((e.shiftKey ? 4 : 1) * this.dlen) - - this.min) / - this.step) | - 0) * - this.step - ); - } - } - if (this.fireflag) { - this.sendEvent("input"); - this.fireflag = false; - } - if (e.preventDefault) e.preventDefault(); - if (e.stopPropagation) e.stopPropagation(); - return false; - }; - let pointerup = (ev) => { - let e = ev; - if (ev.touches) { - for (let i = 0; ; ) { - if (ev.changedTouches[i].identifier == this.identifier) { - break; - } - if (++i >= ev.changedTouches.length) return; - } - } - this.drag = 0; - this.showtip(0); - this.startPosX = this.startPosY = null; - window.removeEventListener("mousemove", pointermove); - window.removeEventListener("touchmove", pointermove, { - passive: false, - }); - window.removeEventListener("mouseup", pointerup); - window.removeEventListener("touchend", pointerup); - window.removeEventListener("touchcancel", pointerup); - document.body.removeEventListener("touchstart", preventScroll, { - passive: false, - }); - this.sendEvent("change"); - }; - let preventScroll = (e) => { - e.preventDefault(); - }; - if (e.touches) e = e.touches[0]; - if (e.ctrlKey || e.metaKey) this.setValue(this.defvalue, true); - else { - this.startPosX = e.pageX; - this.startPosY = e.pageY; - this.startVal = this.value; - window.addEventListener("mousemove", pointermove); - window.addEventListener("touchmove", pointermove, { - passive: false, - }); - pointermove(ev); - } - window.addEventListener("mouseup", pointerup); - window.addEventListener("touchend", pointerup); - window.addEventListener("touchcancel", pointerup); - document.body.addEventListener("touchstart", preventScroll, { - passive: false, - }); - e.preventDefault(); - e.stopPropagation(); - return false; - } - } - ); + customElements.define("webaudio-slider", WebAudioSlider); } catch (error) { console.log("webaudio-slider already defined"); } @@ -721,256 +124,31 @@ ${this.basestyle} } try { - customElements.define( - "webaudio-param", - class WebAudioParam extends WebAudioControlsWidget { - constructor() { - super(); - this.addEventListener("keydown", this.keydown); - this.addEventListener("mousedown", this.pointerdown, { - passive: false, - }); - this.addEventListener("touchstart", this.pointerdown, { - passive: false, - }); - this.addEventListener("wheel", this.wheel); - this.addEventListener("mouseover", this.pointerover); - this.addEventListener("mouseout", this.pointerout); - this.addEventListener("contextmenu", this.contextMenu); - } - connectedCallback() { - let root; - if (this.attachShadow) root = this.attachShadow({ mode: "open" }); - else root = this; - root.innerHTML = ` -
    -`; - this.elem = root.childNodes[2]; - this.ttframe = root.childNodes[3]; - this.enable = this.getAttr("enable", 1); - this._value = this.getAttr("value", 0); - Object.defineProperty(this, "value", { - get: () => { - return this._value; - }, - set: (v) => { - this._value = v; - this.redraw(); - }, - }); - this.defvalue = this.getAttr("defvalue", 0); - this._fontsize = this.getAttr("fontsize", 9); - Object.defineProperty(this, "fontsize", { - get: () => { - return this._fontsize; - }, - set: (v) => { - this._fontsize = v; - this.setupImage(); - }, - }); - this._src = this.getAttr("src", opt.paramSrc); - Object.defineProperty(this, "src", { - get: () => { - return this._src; - }, - set: (v) => { - this._src = v; - this.setupImage(); - }, - }); - this.link = this.getAttr("link", ""); - this._width = this.getAttr("width", opt.paramWidth); - Object.defineProperty(this, "width", { - get: () => { - return this._width; - }, - set: (v) => { - this._width = v; - this.setupImage(); - }, - }); - this._height = this.getAttr("height", opt.paramHeight); - Object.defineProperty(this, "height", { - get: () => { - return this._height; - }, - set: (v) => { - this._height = v; - this.setupImage(); - }, - }); - this._colors = this.getAttr("colors", opt.paramColors); - Object.defineProperty(this, "colors", { - get: () => { - return this._colors; - }, - set: (v) => { - this._colors = v; - this.setupImage(); - }, - }); - this.outline = this.getAttr("outline", opt.outline); - this.rconv = this.getAttr("rconv", null); - this.midiController = {}; - this.midiMode = "normal"; - this.currentLink = null; - if (this.midicc) { - let ch = - parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - - 1; - let cc = parseInt( - this.midicc.substring(this.midicc.lastIndexOf(".") + 1) - ); - this.setMidiController(ch, cc); - } - this.setupImage(); - if (window.webAudioControlsWidgetManager) - // window.webAudioControlsWidgetManager.updateWidgets(); - window.webAudioControlsWidgetManager.addWidget(this); - this.fromLink = ((e) => { - this.setValue(e.target.convValue.toFixed(e.target.digits)); - }).bind(this); - this.elem.onchange = () => { - if ( - !this.currentLink.target.conv || - (this.currentLink.target.conv && this.rconv) - ) { - let val = (this.value = this.elem.value); - if (this.rconv) { - let x = +this.elem.value; - val = eval(this.rconv); - } - if (this.currentLink) { - this.currentLink.target.setValue(val, true); - } - } - }; - } - disconnectedCallback() {} - setupImage() { - this.imgloaded = () => { - if (this.src != "" && this.src != null) { - this.elem.style.backgroundImage = "url(" + this.src + ")"; - this.elem.style.backgroundSize = "100% 100%"; - if (this._width == null) this._width = this.img.width; - if (this._height == null) this._height = this.img.height; - } else { - if (this._width == null) this._width = 32; - if (this._height == null) this._height = 20; - } - this.elem.style.width = this._width + "px"; - this.elem.style.height = this._height + "px"; - this.elem.style.fontSize = this.fontsize + "px"; - let l = document.getElementById(this.link); - if (l && typeof l.value != "undefined") { - if (typeof l.convValue == "number") - this.setValue(l.convValue.toFixed(l.digits)); - else this.setValue(l.convValue); - if (this.currentLink) - this.currentLink.removeEventListener( - "input", - this.currentLink.func - ); - this.currentLink = { - target: l, - func: (e) => { - if (typeof l.convValue == "number") - this.setValue(l.convValue.toFixed(l.digits)); - else this.setValue(l.convValue); - }, - }; - this.currentLink.target.addEventListener( - "input", - this.currentLink.func - ); - // l.addEventListener("input",(e)=>{this.setValue(l.convValue.toFixed(l.digits))}); - } - this.redraw(); - }; - this.coltab = this.colors.split(";"); - this.elem.style.color = this.coltab[0]; - this.img = new Image(); - this.img.onload = this.imgloaded.bind(); - if (this.src == null) { - this.elem.style.backgroundColor = this.coltab[1]; - this.imgloaded(); - } else if (this.src == "") { - this.elem.style.background = "none"; - this.imgloaded(); - } else { - this.img.src = this.src; - } - } - redraw() { - this.elem.value = this.value; - } - setValue(v, f) { - this.value = v; - if (this.value != this.oldvalue) { - this.redraw(); - this.showtip(0); - if (f) { - let event = document.createEvent("HTMLEvents"); - event.initEvent("change", false, true); - this.dispatchEvent(event); - } - this.oldvalue = this.value; - } - } - pointerdown(ev) { - if (!this.enable) return; - let e = ev; - if (ev.touches) e = ev.touches[0]; - else { - if (e.buttons != 1 && e.button != 0) return; - } - this.elem.focus(); - this.redraw(); - } - } - ); + customElements.define("webaudio-param", WebAudioParam); } catch (error) { console.log("webaudio-param already defined"); } try { - customElements.define( - "webaudio-keyboard", - class WebAudioKeyboard extends WebAudioControlsWidget { - constructor() { - super(); - } - connectedCallback() { - let root; - if (this.attachShadow) root = this.attachShadow({ mode: "open" }); - else root = this; - root.innerHTML = ` -
    -`; - this.elem = this.cv = root.childNodes[2]; - this.ttframe = root.childNodes[3]; - this.ctx = this.cv.getContext("2d"); - this._values = []; - this.enable = this.getAttr("enable", 1); - this._width = this.getAttr("width", 480); - Object.defineProperty(this, "width", { - get: () => { - return this._width; - }, - set: (v) => { - this._width = v; - this.setupImage(); - }, - }); - this._height = this.getAttr("height", 128); - Object.defineProperty(this, "height", { - get: () => { - return this._height; - }, - set: (v) => { - this._height = v; - this.setupImage(); - }, - }); - this._min = this.getAttr("min", 0); - Object.defineProperty(this, "min", { - get: () => { - return this._min; - }, - set: (v) => { - this._min = +v; - this.redraw(); - }, - }); - this._keys = this.getAttr("keys", 25); - Object.defineProperty(this, "keys", { - get: () => { - return this._keys; - }, - set: (v) => { - this._keys = +v; - this.setupImage(); - }, - }); - this._colors = this.getAttr( - "colors", - "#222;#eee;#ccc;#333;#000;#e88;#c44;#c33;#800" - ); - Object.defineProperty(this, "colors", { - get: () => { - return this._colors; - }, - set: (v) => { - this._colors = v; - this.setupImage(); - }, - }); - this.outline = this.getAttr("outline", opt.outline); - this.midilearn = this.getAttr("midilearn", 0); - this.midicc = this.getAttr("midicc", null); - this.press = 0; - this.keycodes1 = [ - 90, 83, 88, 68, 67, 86, 71, 66, 72, 78, 74, 77, 188, 76, 190, 187, - 191, 226, - ]; - this.keycodes2 = [ - 81, 50, 87, 51, 69, 82, 53, 84, 54, 89, 55, 85, 73, 57, 79, 48, 80, - 192, 222, 219, - ]; - this.addEventListener("keyup", this.keyup); - this.midiController = {}; - this.midiMode = "normal"; - if (this.midicc) { - let ch = - parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - - 1; - let cc = parseInt( - this.midicc.substring(this.midicc.lastIndexOf(".") + 1) - ); - this.setMidiController(ch, cc); - } - this.setupImage(); - this.digits = 0; - if (this.step && this.step < 1) { - for (let n = this.step; n < 1; n *= 10) ++this.digits; - } - if (window.webAudioControlsWidgetManager) - window.webAudioControlsWidgetManager.addWidget(this); - } - disconnectedCallback() {} - setupImage() { - this.cv.style.width = this.width + "px"; - this.cv.style.height = this.height + "px"; - this.bheight = this.height * 0.55; - this.kp = [ - 0, - 7 / 12, - 1, - (3 * 7) / 12, - 2, - 3, - (6 * 7) / 12, - 4, - (8 * 7) / 12, - 5, - (10 * 7) / 12, - 6, - ]; - this.kf = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0]; - this.ko = [ - 0, - 0, - (7 * 2) / 12 - 1, - 0, - (7 * 4) / 12 - 2, - (7 * 5) / 12 - 3, - 0, - (7 * 7) / 12 - 4, - 0, - (7 * 9) / 12 - 5, - 0, - (7 * 11) / 12 - 6, - ]; - this.kn = [0, 2, 4, 5, 7, 9, 11]; - this.coltab = this.colors.split(";"); - this.cv.width = this.width; - this.cv.height = this.height; - this.cv.style.width = this.width + "px"; - this.cv.style.height = this.height + "px"; - this.style.height = this.height + "px"; - this.cv.style.outline = this.outline ? "" : "none"; - this.bheight = this.height * 0.55; - this.max = this.min + this.keys - 1; - this.dispvalues = []; - this.valuesold = []; - if (this.kf[this.min % 12]) --this.min; - if (this.kf[this.max % 12]) ++this.max; - this.redraw(); - } - redraw() { - function rrect(ctx, x, y, w, h, r, c1, c2) { - if (c2) { - let g = ctx.createLinearGradient(x, y, x + w, y); - g.addColorStop(0, c1); - g.addColorStop(1, c2); - ctx.fillStyle = g; - } else ctx.fillStyle = c1; - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(x + w, y); - ctx.lineTo(x + w, y + h - r); - ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); - ctx.lineTo(x + r, y + h); - ctx.quadraticCurveTo(x, y + h, x, y + h - r); - ctx.lineTo(x, y); - ctx.fill(); - } - this.ctx.fillStyle = this.coltab[0]; - this.ctx.fillRect(0, 0, this.width, this.height); - let x0 = 7 * ((this.min / 12) | 0) + this.kp[this.min % 12]; - let x1 = 7 * ((this.max / 12) | 0) + this.kp[this.max % 12]; - let n = x1 - x0; - this.wwidth = (this.width - 1) / (n + 1); - this.bwidth = (this.wwidth * 7) / 12; - let h2 = this.bheight; - let r = Math.min(8, this.wwidth * 0.2); - for (let i = this.min, j = 0; i <= this.max; ++i) { - if (this.kf[i % 12] == 0) { - let x = this.wwidth * j++ + 1; - if (this.dispvalues.indexOf(i) >= 0) - rrect( - this.ctx, - x, - 1, - this.wwidth - 1, - this.height - 2, - r, - this.coltab[5], - this.coltab[6] - ); - else - rrect( - this.ctx, - x, - 1, - this.wwidth - 1, - this.height - 2, - r, - this.coltab[1], - this.coltab[2] - ); - } - } - r = Math.min(8, this.bwidth * 0.3); - for (let i = this.min; i < this.max; ++i) { - if (this.kf[i % 12]) { - let x = - this.wwidth * this.ko[this.min % 12] + - this.bwidth * (i - this.min) + - 1; - if (this.dispvalues.indexOf(i) >= 0) - rrect( - this.ctx, - x, - 1, - this.bwidth, - h2, - r, - this.coltab[7], - this.coltab[8] - ); - else - rrect( - this.ctx, - x, - 1, - this.bwidth, - h2, - r, - this.coltab[3], - this.coltab[4] - ); - this.ctx.strokeStyle = this.coltab[0]; - this.ctx.stroke(); - } - } - } - _setValue(v) { - if (this.step) - v = Math.round((v - this.min) / this.step) * this.step + this.min; - this._value = Math.min(this.max, Math.max(this.min, v)); - if (this._value != this.oldvalue) { - this.oldvalue = this._value; - this.redraw(); - this.showtip(0); - return 1; - } - return 0; - } - setValue(v, f) { - if (this._setValue(v) && f) - this.sendEvent("input"), this.sendEvent("change"); - } - wheel(e) {} - keydown(e) { - let m = Math.floor((this.min + 11) / 12) * 12; - let k = this.keycodes1.indexOf(e.keyCode); - if (k < 0) { - k = this.keycodes2.indexOf(e.keyCode); - if (k >= 0) k += 12; - } - if (k >= 0) { - k += m; - if (this.currentKey != k) { - this.currentKey = k; - this.sendEventFromKey(1, k); - this.setNote(1, k); - } - } - } - keyup(e) { - let m = Math.floor((this.min + 11) / 12) * 12; - let k = this.keycodes1.indexOf(e.keyCode); - if (k < 0) { - k = this.keycodes2.indexOf(e.keyCode); - if (k >= 0) k += 12; - } - if (k >= 0) { - k += m; - this.currentKey = -1; - this.sendEventFromKey(0, k); - this.setNote(0, k); - } - } - pointerdown(ev) { - this.cv.focus(); - if (this.enable) { - ++this.press; - } - let pointermove = (ev) => { - if (!this.enable) return; - let r = this.getBoundingClientRect(); - let v = [], - p; - if (ev.touches) p = ev.targetTouches; - else if (this.press) p = [ev]; - else p = []; - if (p.length > 0) this.drag = 1; - for (let i = 0; i < p.length; ++i) { - let px = p[i].clientX - r.left; - let py = p[i].clientY - r.top; - let x, k, ko; - if (py >= 0 && py < this.height) { - if (py < this.bheight) { - x = px - this.wwidth * this.ko[this.min % 12]; - k = this.min + ((x / this.bwidth) | 0); - } else { - k = (px / this.wwidth) | 0; - ko = this.kp[this.min % 12]; - k += ko; - k = - this.min + - ((k / 7) | 0) * 12 + - this.kn[k % 7] - - this.kn[ko % 7]; - } - if (k >= this.min && k <= this.max) v.push(k); - } - } - v.sort(); - this.values = v; - this.sendevent(); - this.redraw(); - }; - - let pointerup = (ev) => { - if (this.enable) { - if (ev.touches) this.press = ev.touches.length; - else this.press = 0; - pointermove(ev); - this.sendevent(); - if (this.press == 0) { - window.removeEventListener("mousemove", pointermove); - window.removeEventListener("touchmove", pointermove, { - passive: false, - }); - window.removeEventListener("mouseup", pointerup); - window.removeEventListener("touchend", pointerup); - window.removeEventListener("touchcancel", pointerup); - document.body.removeEventListener("touchstart", preventScroll, { - passive: false, - }); - } - this.redraw(); - } - this.drag = 0; - ev.preventDefault(); - }; - let preventScroll = (ev) => { - ev.preventDefault(); - }; - window.addEventListener("mousemove", pointermove); - window.addEventListener("touchmove", pointermove, { passive: false }); - window.addEventListener("mouseup", pointerup); - window.addEventListener("touchend", pointerup); - window.addEventListener("touchcancel", pointerup); - document.body.addEventListener("touchstart", preventScroll, { - passive: false, - }); - pointermove(ev); - ev.preventDefault(); - ev.stopPropagation(); - } - sendEventFromKey(s, k) { - let ev = document.createEvent("HTMLEvents"); - ev.initEvent("change", true, true); - ev.note = [s, k]; - this.dispatchEvent(ev); - } - sendevent() { - let notes = []; - for (let i = 0, j = this.valuesold.length; i < j; ++i) { - if (this.values.indexOf(this.valuesold[i]) < 0) - notes.push([0, this.valuesold[i]]); - } - for (let i = 0, j = this.values.length; i < j; ++i) { - if (this.valuesold.indexOf(this.values[i]) < 0) - notes.push([1, this.values[i]]); - } - if (notes.length) { - this.valuesold = this.values; - for (let i = 0; i < notes.length; ++i) { - this.setdispvalues(notes[i][0], notes[i][1]); - let ev = document.createEvent("HTMLEvents"); - ev.initEvent("change", true, true); - ev.note = notes[i]; - this.dispatchEvent(ev); - } - } - } - setdispvalues(state, note) { - let n = this.dispvalues.indexOf(note); - if (state) { - if (n < 0) this.dispvalues.push(note); - } else { - if (n >= 0) this.dispvalues.splice(n, 1); - } - } - setNote(state, note, actx, when) { - const t = actx && when - actx.currentTime; - if (t > 0) { - setTimeout(() => { - this.setNote(state, note); - }, t * 1000); - } else { - this.setdispvalues(state, note); - this.redraw(); - } - } - } - ); - } catch (error) { - console.log("webaudio-keyboard already defined"); - } - - class WebAudioControlsWidgetManager { - constructor() { - this.midiAccess = null; - this.listOfWidgets = []; - this.listOfExternalMidiListeners = []; - this.updateWidgets(); - if (opt.preserveMidiLearn) - this.midiLearnTable = JSON.parse( - localStorage.getItem("WebAudioControlsMidiLearn") - ); - else this.midiLearnTable = null; - this.initWebAudioControls(); - } - addWidget(w) { - this.listOfWidgets.push(w); - } - updateWidgets() { - // this.listOfWidgets = document.querySelectorAll("webaudio-knob,webaudio-slider,webaudio-switch"); - } - initWebAudioControls() { - if (navigator.requestMIDIAccess) { - navigator.requestMIDIAccess().then( - (ma) => { - (this.midiAccess = ma), this.enableInputs(); - }, - (err) => { - console.log("MIDI not initialized - error encountered:" + err.code); - } - ); - } - } - enableInputs() { - let inputs = this.midiAccess.inputs.values(); - console.log("Found " + this.midiAccess.inputs.size + " MIDI input(s)"); - for ( - let input = inputs.next(); - input && !input.done; - input = inputs.next() - ) { - console.log("Connected input: " + input.value.name); - input.value.onmidimessage = this.handleMIDIMessage.bind(this); - } - } - midiConnectionStateChange(e) { - console.log( - "connection: " + - e.port.name + - " " + - e.port.connection + - " " + - e.port.state - ); - enableInputs(); - } - - onMIDIStarted(midi) { - this.midiAccess = midi; - midi.onstatechange = this.midiConnectionStateChange; - enableInputs(midi); - } - // Add hooks for external midi listeners support - addMidiListener(callback) { - this.listOfExternalMidiListeners.push(callback); - } - getCurrentConfigAsJSON() { - return currentConfig.stringify(); - } - handleMIDIMessage(event) { - this.listOfExternalMidiListeners.forEach(function (externalListener) { - externalListener(event); - }); - if ( - (event.data[0] & 0xf0) == 0xf0 || - ((event.data[0] & 0xf0) == 0xb0 && event.data[1] >= 120) - ) - return; - for (let w of this.listOfWidgets) { - if (w.processMidiEvent) w.processMidiEvent(event); - } - if (opt.mididump) console.log(event.data); - } - contextMenuOpen(e, knob) { - if (!this.midiAccess) return; - let menu = document.getElementById("webaudioctrl-context-menu"); - menu.style.left = e.pageX + "px"; - menu.style.top = e.pageY + "px"; - menu.knob = knob; - menu.classList.add("active"); - menu.knob.focus(); - menu.knob.addEventListener( - "keydown", - this.contextMenuCloseByKey.bind(this) - ); - } - contextMenuCloseByKey(e) { - if (e.keyCode == 27) this.contextMenuClose(); - } - contextMenuClose() { - let menu = document.getElementById("webaudioctrl-context-menu"); - menu.knob.removeEventListener("keydown", this.contextMenuCloseByKey); - menu.classList.remove("active"); - let menuItemLearn = document.getElementById( - "webaudioctrl-context-menu-learn" - ); - menuItemLearn.innerHTML = "Learn"; - menu.knob.midiMode = "normal"; - } - contextMenuLearn() { - let menu = document.getElementById("webaudioctrl-context-menu"); - let menuItemLearn = document.getElementById( - "webaudioctrl-context-menu-learn" - ); - menuItemLearn.innerHTML = "Listening..."; - menu.knob.midiMode = "learn"; - } - contextMenuClear(e) { - let menu = document.getElementById("webaudioctrl-context-menu"); - menu.knob.midiController = {}; - this.contextMenuClose(); - } - preserveMidiLearn() { - if (!opt.preserveMidiLearn) return; - const v = []; - for (let w of this.listOfWidgets) { - if (w.id) v.push({ id: w.id, cc: w.midiController }); - } - const s = JSON.stringify(v); - localStorage.setItem("WebAudioControlsMidiLearn", s); - } - } - if (window.UseWebAudioControlsMidi || opt.useMidi) - window.webAudioControlsWidgetManager = window.webAudioControlsMidiManager = - new WebAudioControlsWidgetManager(); -} - -export class WebAudioSwitch extends WebAudioControlsWidget { - constructor() { - super(); - } - connectedCallback() { - let root; - if (this.attachShadow) root = this.attachShadow({ mode: "open" }); - else root = this; - root.innerHTML = ` -
    +
    `; this.elem = root.childNodes[2]; this.ttframe = this.elem.firstChild; @@ -2071,33 +681,710 @@ export class WebAudioControlsWidget extends HTMLElement { this.midiMode = "normal"; webAudioControlsWidgetManager.preserveMidiLearn(); } - if (this.listeningToThisMidiController(channel, controlNumber)) { - if (this.tagName == "WEBAUDIO-SWITCH") { - switch (this.type) { - case "toggle": - if (event.data[2] >= 64) this.setValue(1 - this.value, true); - break; - case "kick": - this.setValue(event.data[2] >= 64 ? 1 : 0); - break; - case "radio": - let els = document.querySelectorAll( - "webaudio-switch[type='radio'][group='" + this.group + "']" - ); - for (let i = 0; i < els.length; ++i) { - if (els[i] == this) els[i].setValue(1); - else els[i].setValue(0); - } - break; + if (this.listeningToThisMidiController(channel, controlNumber)) { + if (this.tagName == "WEBAUDIO-SWITCH") { + switch (this.type) { + case "toggle": + if (event.data[2] >= 64) this.setValue(1 - this.value, true); + break; + case "kick": + this.setValue(event.data[2] >= 64 ? 1 : 0); + break; + case "radio": + let els = document.querySelectorAll( + "webaudio-switch[type='radio'][group='" + this.group + "']" + ); + for (let i = 0; i < els.length; ++i) { + if (els[i] == this) els[i].setValue(1); + else els[i].setValue(0); + } + break; + } + } else { + const val = this.min + ((this.max - this.min) * event.data[2]) / 127; + this.setValue(val, true); + } + } + } +} +export class WebAudioKnob extends WebAudioControlsWidget { + constructor() { + super(); + } + connectedCallback() { + let root; + if (this.attachShadow) root = this.attachShadow({ mode: "open" }); + else root = this; + root.innerHTML = ` +
    +`; + this.elem = root.childNodes[2]; + this.ttframe = this.elem.firstChild; + this.label = this.ttframe.nextSibling; + this.enable = this.getAttr("enable", 1); + this._src = this.getAttr("src", opt.knobSrc); + Object.defineProperty(this, "src", { + get: () => { + return this._src; + }, + set: (v) => { + this._src = v; + this.setupImage(); + }, + }); + this._value = this.getAttr("value", 0); + Object.defineProperty(this, "value", { + get: () => { + return this._value; + }, + set: (v) => { + this._value = v; + this.redraw(); + }, + }); + this.defvalue = this.getAttr("defvalue", this._value); + this._min = this.getAttr("min", 0); + Object.defineProperty(this, "min", { + get: () => { + return this._min; + }, + set: (v) => { + this._min = +v; + this.redraw(); + }, + }); + this._max = this.getAttr("max", 100); + Object.defineProperty(this, "max", { + get: () => { + return this._max; + }, + set: (v) => { + this._max = +v; + this.redraw(); + }, + }); + this._step = this.getAttr("step", 1); + Object.defineProperty(this, "step", { + get: () => { + return this._step; + }, + set: (v) => { + this._step = +v; + this.redraw(); + }, + }); + this._sprites = this.getAttr("sprites", opt.knobSprites); + Object.defineProperty(this, "sprites", { + get: () => { + return this._sprites; + }, + set: (v) => { + this._sprites = v; + this.setupImage(); + }, + }); + this._width = this.getAttr("width", null); + Object.defineProperty(this, "width", { + get: () => { + return this._width; + }, + set: (v) => { + this._width = v; + this.setupImage(); + }, + }); + this._height = this.getAttr("height", null); + Object.defineProperty(this, "height", { + get: () => { + return this._height; + }, + set: (v) => { + this._height = v; + this.setupImage(); + }, + }); + this._diameter = this.getAttr("diameter", null); + Object.defineProperty(this, "diameter", { + get: () => { + return this._diameter; + }, + set: (v) => { + this._diameter = v; + this.setupImage(); + }, + }); + this._colors = this.getAttr("colors", opt.knobColors); + Object.defineProperty(this, "colors", { + get: () => { + return this._colors; + }, + set: (v) => { + this._colors = v; + this.setupImage(); + }, + }); + this.outline = this.getAttr("outline", opt.outline); + this.setupLabel(); + this.log = this.getAttr("log", 0); + this.sensitivity = this.getAttr("sensitivity", 1); + this.valuetip = this.getAttr("valuetip", opt.valuetip); + this.tooltip = this.getAttr("tooltip", null); + this.conv = this.getAttr("conv", null); + if (this.conv) { + const x = this._value; + this.convValue = eval(this.conv); + if (typeof this.convValue == "function") + this.convValue = this.convValue(x); + } else this.convValue = this._value; + this.midilearn = this.getAttr("midilearn", opt.midilearn); + this.midicc = this.getAttr("midicc", null); + this.midiController = {}; + this.midiMode = "normal"; + if (this.midicc) { + let ch = + parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - 1; + let cc = parseInt( + this.midicc.substring(this.midicc.lastIndexOf(".") + 1) + ); + this.setMidiController(ch, cc); + } + if (this.midilearn && this.id) { + if ( + webAudioControlsWidgetManager && + webAudioControlsWidgetManager.midiLearnTable + ) { + const ml = webAudioControlsWidgetManager.midiLearnTable; + for (let i = 0; i < ml.length; ++i) { + if (ml[i].id == this.id) { + this.setMidiController(ml[i].cc.channel, ml[i].cc.cc); + break; + } + } + } + } + this.setupImage(); + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + this._setValue(this._value); + this.coltab = ["#e00", "#000", "#000"]; + if (window.webAudioControlsWidgetManager) + window.webAudioControlsWidgetManager.addWidget(this); + } + disconnectedCallback() {} + setupImage() { + this.kw = + this._width || this._diameter || opt.knobWidth || opt.knobDiameter; + this.kh = + this._height || this._diameter || opt.knobHeight || opt.knobDiameter; + if (!this.src) { + if (this.colors) this.coltab = this.colors.split(";"); + if (!this.coltab) this.coltab = ["#e00", "#000", "#000"]; + let svg = ` + + + + + + + + + + + + + + + + + + + + +`; + for (let i = 0; i < 101; ++i) { + svg += ``; + } + svg += ""; + this.elem.style.backgroundImage = + "url(data:image/svg+xml;base64," + btoa(svg) + ")"; + if (this.kw == null) this.kw = 64; + if (this.kh == null) this.kh = 64; + this.elem.style.backgroundSize = `${this.kw}px ${this.kh * 101}px`; + this.elem.style.width = this.kw + "px"; + this.elem.style.height = this.kh + "px"; + this.style.height = this.kh + "px"; + this.fireflag = true; + this.redraw(); + return; + } else { + this.img = new Image(); + this.img.onload = () => { + this.elem.style.backgroundImage = "url(" + this.src + ")"; + if (this._sprites == null) + this._sprites = this.img.height / this.img.width - 1; + else this._sprites = +this._sprites; + if (this.kw == null) this.kw = this.img.width; + if (this.kh == null) this.kh = this.img.height / (this.sprites + 1); + if (!this.sprites) this.elem.style.backgroundSize = "100% 100%"; + else + this.elem.style.backgroundSize = `${this.kw}px ${ + this.kh * (this.sprites + 1) + }px`; + this.elem.style.width = this.kw + "px"; + this.elem.style.height = this.kh + "px"; + this.style.height = this.kh + "px"; + this.redraw(); + }; + this.img.src = this.src; + } + } + redraw() { + let ratio; + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + if (this.value < this.min) { + this.value = this.min; + } + if (this.value > this.max) { + this.value = this.max; + } + if (this.log) + ratio = Math.log(this.value / this.min) / Math.log(this.max / this.min); + else ratio = (this.value - this.min) / (this.max - this.min); + let style = this.elem.style; + let sp = this.src ? this.sprites : 100; + if (sp >= 1) { + let offset = (sp * ratio) | 0; + style.backgroundPosition = "0px " + -offset * this.kh + "px"; + style.transform = "rotate(0deg)"; + } else { + let deg = 270 * (ratio - 0.5); + style.backgroundPosition = "0px 0px"; + style.transform = "rotate(" + deg + "deg)"; + } + } + _setValue(v) { + if (this.step) + v = Math.round((v - this.min) / this.step) * this.step + this.min; + this._value = Math.min(this.max, Math.max(this.min, v)); + if (this._value != this.oldvalue) { + this.fireflag = true; + this.oldvalue = this._value; + if (this.conv) { + const x = this._value; + this.convValue = eval(this.conv); + if (typeof this.convValue == "function") + this.convValue = this.convValue(x); + } else this.convValue = this._value; + if (typeof this.convValue == "number") { + this.convValue = this.convValue.toFixed(this.digits); + } + this.redraw(); + this.showtip(0); + return 1; + } + return 0; + } + setValue(v, f) { + if (this._setValue(v) && f) + this.sendEvent("input"), this.sendEvent("change"); + } + keydown(e) { + const delta = this.step; + if (delta == 0) delta = 1; + switch (e.key) { + case "ArrowUp": + this.setValue(this.value + delta, true); + break; + case "ArrowDown": + this.setValue(this.value - delta, true); + break; + default: + return; + } + e.preventDefault(); + e.stopPropagation(); + } + wheel(e) { + if (!this.enable) return; + if (this.log) { + let r = Math.log(this.value / this.min) / Math.log(this.max / this.min); + let d = e.deltaY > 0 ? -0.01 : 0.01; + if (!e.shiftKey) d *= 5; + r += d; + this.setValue(this.min * Math.pow(this.max / this.min, r), true); + } else { + let delta = Math.max(this.step, (this.max - this.min) * 0.05); + if (e.shiftKey) delta = this.step ? this.step : 1; + delta = e.deltaY > 0 ? -delta : delta; + this.setValue(+this.value + delta, true); + } + e.preventDefault(); + e.stopPropagation(); + } + pointerdown(ev) { + if (!this.enable) return; + let e = ev; + if (ev.touches) { + e = ev.changedTouches[0]; + this.identifier = e.identifier; + } else { + if (e.buttons != 1 && e.button != 0) return; + } + this.elem.focus(); + this.drag = 1; + this.showtip(0); + this.oldvalue = this._value; + let pointermove = (ev) => { + let e = ev; + if (ev.touches) { + for (let i = 0; i < ev.touches.length; ++i) { + if (ev.touches[i].identifier == this.identifier) { + e = ev.touches[i]; + break; + } + } + } + if (this.lastShift !== e.shiftKey) { + this.lastShift = e.shiftKey; + this.startPosX = e.pageX; + this.startPosY = e.pageY; + this.startVal = this.value; + } + let offset = + (this.startPosY - e.pageY - this.startPosX + e.pageX) * + this.sensitivity; + if (this.log) { + let r = + Math.log(this.startVal / this.min) / Math.log(this.max / this.min); + r += offset / ((e.shiftKey ? 4 : 1) * 128); + if (r < 0) r = 0; + if (r > 1) r = 1; + this._setValue(this.min * Math.pow(this.max / this.min, r)); + } else { + this._setValue( + this.min + + (((this.startVal + + ((this.max - this.min) * offset) / ((e.shiftKey ? 4 : 1) * 128) - + this.min) / + this.step) | + 0) * + this.step + ); + } + if (this.fireflag) { + this.sendEvent("input"); + this.fireflag = false; + } + if (e.preventDefault) e.preventDefault(); + if (e.stopPropagation) e.stopPropagation(); + return false; + }; + let pointerup = (ev) => { + let e = ev; + if (ev.touches) { + for (let i = 0; ; ) { + if (ev.changedTouches[i].identifier == this.identifier) { + break; + } + if (++i >= ev.changedTouches.length) return; + } + } + this.drag = 0; + this.showtip(0); + this.startPosX = this.startPosY = null; + window.removeEventListener("mousemove", pointermove); + window.removeEventListener("touchmove", pointermove, { + passive: false, + }); + window.removeEventListener("mouseup", pointerup); + window.removeEventListener("touchend", pointerup); + window.removeEventListener("touchcancel", pointerup); + document.body.removeEventListener("touchstart", preventScroll, { + passive: false, + }); + this.sendEvent("change"); + }; + let preventScroll = (e) => { + e.preventDefault(); + }; + if (e.ctrlKey || e.metaKey) this.setValue(this.defvalue, true); + else { + this.startPosX = e.pageX; + this.startPosY = e.pageY; + this.startVal = this.value; + window.addEventListener("mousemove", pointermove); + window.addEventListener("touchmove", pointermove, { + passive: false, + }); + } + window.addEventListener("mouseup", pointerup); + window.addEventListener("touchend", pointerup); + window.addEventListener("touchcancel", pointerup); + document.body.addEventListener("touchstart", preventScroll, { + passive: false, + }); + ev.preventDefault(); + ev.stopPropagation(); + return false; + } +} + +export class WebAudioParam extends WebAudioControlsWidget { + constructor() { + super(); + this.addEventListener("keydown", this.keydown); + this.addEventListener("mousedown", this.pointerdown, { + passive: false, + }); + this.addEventListener("touchstart", this.pointerdown, { + passive: false, + }); + this.addEventListener("wheel", this.wheel); + this.addEventListener("mouseover", this.pointerover); + this.addEventListener("mouseout", this.pointerout); + this.addEventListener("contextmenu", this.contextMenu); + } + connectedCallback() { + let root; + if (this.attachShadow) root = this.attachShadow({ mode: "open" }); + else root = this; + root.innerHTML = ` +
    +`; + this.elem = root.childNodes[2]; + this.ttframe = root.childNodes[3]; + this.enable = this.getAttr("enable", 1); + this._value = this.getAttr("value", 0); + Object.defineProperty(this, "value", { + get: () => { + return this._value; + }, + set: (v) => { + this._value = v; + this.redraw(); + }, + }); + this.defvalue = this.getAttr("defvalue", 0); + this._fontsize = this.getAttr("fontsize", 9); + Object.defineProperty(this, "fontsize", { + get: () => { + return this._fontsize; + }, + set: (v) => { + this._fontsize = v; + this.setupImage(); + }, + }); + this._src = this.getAttr("src", opt.paramSrc); + Object.defineProperty(this, "src", { + get: () => { + return this._src; + }, + set: (v) => { + this._src = v; + this.setupImage(); + }, + }); + this.link = this.getAttr("link", ""); + this._width = this.getAttr("width", opt.paramWidth); + Object.defineProperty(this, "width", { + get: () => { + return this._width; + }, + set: (v) => { + this._width = v; + this.setupImage(); + }, + }); + this._height = this.getAttr("height", opt.paramHeight); + Object.defineProperty(this, "height", { + get: () => { + return this._height; + }, + set: (v) => { + this._height = v; + this.setupImage(); + }, + }); + this._colors = this.getAttr("colors", opt.paramColors); + Object.defineProperty(this, "colors", { + get: () => { + return this._colors; + }, + set: (v) => { + this._colors = v; + this.setupImage(); + }, + }); + this.outline = this.getAttr("outline", opt.outline); + this.rconv = this.getAttr("rconv", null); + this.midiController = {}; + this.midiMode = "normal"; + this.currentLink = null; + if (this.midicc) { + let ch = + parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - 1; + let cc = parseInt( + this.midicc.substring(this.midicc.lastIndexOf(".") + 1) + ); + this.setMidiController(ch, cc); + } + this.setupImage(); + if (window.webAudioControlsWidgetManager) + // window.webAudioControlsWidgetManager.updateWidgets(); + window.webAudioControlsWidgetManager.addWidget(this); + this.fromLink = ((e) => { + this.setValue(e.target.convValue.toFixed(e.target.digits)); + }).bind(this); + this.elem.onchange = () => { + if ( + !this.currentLink.target.conv || + (this.currentLink.target.conv && this.rconv) + ) { + let val = (this.value = this.elem.value); + if (this.rconv) { + let x = +this.elem.value; + val = eval(this.rconv); + } + if (this.currentLink) { + this.currentLink.target.setValue(val, true); } + } + }; + } + disconnectedCallback() {} + setupImage() { + this.imgloaded = () => { + if (this.src != "" && this.src != null) { + this.elem.style.backgroundImage = "url(" + this.src + ")"; + this.elem.style.backgroundSize = "100% 100%"; + if (this._width == null) this._width = this.img.width; + if (this._height == null) this._height = this.img.height; } else { - const val = this.min + ((this.max - this.min) * event.data[2]) / 127; - this.setValue(val, true); + if (this._width == null) this._width = 32; + if (this._height == null) this._height = 20; + } + this.elem.style.width = this._width + "px"; + this.elem.style.height = this._height + "px"; + this.elem.style.fontSize = this.fontsize + "px"; + let l = document.getElementById(this.link); + if (l && typeof l.value != "undefined") { + if (typeof l.convValue == "number") + this.setValue(l.convValue.toFixed(l.digits)); + else this.setValue(l.convValue); + if (this.currentLink) + this.currentLink.removeEventListener("input", this.currentLink.func); + this.currentLink = { + target: l, + func: (e) => { + if (typeof l.convValue == "number") + this.setValue(l.convValue.toFixed(l.digits)); + else this.setValue(l.convValue); + }, + }; + this.currentLink.target.addEventListener( + "input", + this.currentLink.func + ); + // l.addEventListener("input",(e)=>{this.setValue(l.convValue.toFixed(l.digits))}); + } + this.redraw(); + }; + this.coltab = this.colors.split(";"); + this.elem.style.color = this.coltab[0]; + this.img = new Image(); + this.img.onload = this.imgloaded.bind(); + if (this.src == null) { + this.elem.style.backgroundColor = this.coltab[1]; + this.imgloaded(); + } else if (this.src == "") { + this.elem.style.background = "none"; + this.imgloaded(); + } else { + this.img.src = this.src; + } + } + redraw() { + this.elem.value = this.value; + } + setValue(v, f) { + this.value = v; + if (this.value != this.oldvalue) { + this.redraw(); + this.showtip(0); + if (f) { + let event = document.createEvent("HTMLEvents"); + event.initEvent("change", false, true); + this.dispatchEvent(event); } + this.oldvalue = this.value; + } + } + pointerdown(ev) { + if (!this.enable) return; + let e = ev; + if (ev.touches) e = ev.touches[0]; + else { + if (e.buttons != 1 && e.button != 0) return; } + this.elem.focus(); + this.redraw(); } } -export class WebAudioKnob extends WebAudioControlsWidget { + +export class WebAudioSlider extends WebAudioControlsWidget { constructor() { super(); } @@ -2109,13 +1396,14 @@ export class WebAudioKnob extends WebAudioControlsWidget { ${this.basestyle} :host{ display:inline-block; + position:relative; margin:0; padding:0; - cursor:pointer; font-family: sans-serif; font-size: 11px; + cursor:pointer; } -.webaudio-knob-body{ +.webaudio-slider-body{ display:inline-block; position:relative; margin:0; @@ -2123,14 +1411,22 @@ ${this.basestyle} vertical-align:bottom; white-space:pre; } +.webaudio-slider-knob{ + display:inline-block; + position:absolute; + margin:0; + padding:0; +} -
    +
    `; this.elem = root.childNodes[2]; - this.ttframe = this.elem.firstChild; + this.knob = this.elem.firstChild; + this.ttframe = this.knob.nextSibling; this.label = this.ttframe.nextSibling; this.enable = this.getAttr("enable", 1); - this._src = this.getAttr("src", opt.knobSrc); + this.tracking = this.getAttr("tracking", "rel"); + this._src = this.getAttr("src", opt.sliderSrc); Object.defineProperty(this, "src", { get: () => { return this._src; @@ -2140,6 +1436,16 @@ ${this.basestyle} this.setupImage(); }, }); + this._knobsrc = this.getAttr("knobsrc", opt.sliderKnobSrc); + Object.defineProperty(this, "knobsrc", { + get: () => { + return this._knobsrc; + }, + set: (v) => { + this._knobsrc = v; + this.setupImage(); + }, + }); this._value = this.getAttr("value", 0); Object.defineProperty(this, "value", { get: () => { @@ -2157,7 +1463,7 @@ ${this.basestyle} return this._min; }, set: (v) => { - this._min = +v; + this._min = v; this.redraw(); }, }); @@ -2167,7 +1473,7 @@ ${this.basestyle} return this._max; }, set: (v) => { - this._max = +v; + this._max = v; this.redraw(); }, }); @@ -2177,11 +1483,11 @@ ${this.basestyle} return this._step; }, set: (v) => { - this._step = +v; + this._step = v; this.redraw(); }, }); - this._sprites = this.getAttr("sprites", opt.knobSprites); + this._sprites = this.getAttr("sprites", 0); Object.defineProperty(this, "sprites", { get: () => { return this._sprites; @@ -2191,7 +1497,18 @@ ${this.basestyle} this.setupImage(); }, }); - this._width = this.getAttr("width", null); + this._direction = this.getAttr("direction", null); + Object.defineProperty(this, "direction", { + get: () => { + return this._direction; + }, + set: (v) => { + this._direction = v; + this.setupImage(); + }, + }); + this.log = this.getAttr("log", 0); + this._width = this.getAttr("width", opt.sliderWidth); Object.defineProperty(this, "width", { get: () => { return this._width; @@ -2201,7 +1518,7 @@ ${this.basestyle} this.setupImage(); }, }); - this._height = this.getAttr("height", null); + this._height = this.getAttr("height", opt.sliderHeight); Object.defineProperty(this, "height", { get: () => { return this._height; @@ -2211,17 +1528,37 @@ ${this.basestyle} this.setupImage(); }, }); - this._diameter = this.getAttr("diameter", null); - Object.defineProperty(this, "diameter", { + this._knobwidth = this.getAttr("knobwidth", opt.sliderKnobWidth); + Object.defineProperty(this, "knobwidth", { get: () => { - return this._diameter; + return this._knobwidth; }, set: (v) => { - this._diameter = v; + this._knobwidth = v; this.setupImage(); }, }); - this._colors = this.getAttr("colors", opt.knobColors); + this._knobheight = this.getAttr("knobheight", opt.sliderKnobHeight); + Object.defineProperty(this, "knobheight", { + get: () => { + return this._knobheight; + }, + set: (v) => { + this._knobheight = v; + this.setupImage(); + }, + }); + this._ditchlength = this.getAttr("ditchlength", opt.sliderDitchlength); + Object.defineProperty(this, "ditchlength", { + get: () => { + return this._ditchlength; + }, + set: (v) => { + this._ditchlength = v; + this.setupImage(); + }, + }); + this._colors = this.getAttr("colors", opt.sliderColors); Object.defineProperty(this, "colors", { get: () => { return this._colors; @@ -2233,7 +1570,6 @@ ${this.basestyle} }); this.outline = this.getAttr("outline", opt.outline); this.setupLabel(); - this.log = this.getAttr("log", 0); this.sensitivity = this.getAttr("sensitivity", 1); this.valuetip = this.getAttr("valuetip", opt.valuetip); this.tooltip = this.getAttr("tooltip", null); @@ -2275,82 +1611,137 @@ ${this.basestyle} if (this.step && this.step < 1) { for (let n = this.step; n < 1; n *= 10) ++this.digits; } - this._setValue(this._value); - this.coltab = ["#e00", "#000", "#000"]; + this.fireflag = true; if (window.webAudioControlsWidgetManager) + // window.webAudioControlsWidgetManager.updateWidgets(); window.webAudioControlsWidgetManager.addWidget(this); + this.elem.onclick = (e) => { + e.stopPropagation(); + }; } disconnectedCallback() {} setupImage() { - this.kw = - this._width || this._diameter || opt.knobWidth || opt.knobDiameter; - this.kh = - this._height || this._diameter || opt.knobHeight || opt.knobDiameter; - if (!this.src) { - if (this.colors) this.coltab = this.colors.split(";"); - if (!this.coltab) this.coltab = ["#e00", "#000", "#000"]; - let svg = ` + this.coltab = this.colors.split(";"); + this.bodyimg = new Image(); + this.knobimg = new Image(); + this.srcurl = null; + if (this.src == null || this.src == "") { + this.sw = +this._width; + this.sh = +this.height; + if (this._direction == "horz") { + if (this._width == null) this.sw = 128; + if (this._height == null) this.sh = 24; + } else if (this._direction == "vert") { + if (this._width == null) this.sw = 24; + if (this._height == null) this.sh = 128; + } else { + if (this._width == null) this.sw = 128; + if (this._height == null) this.sh = 24; + } + const r = Math.min(this.sw, this.sh) * 0.5; + const svgbody = ` - + this.sh ? 'x2="0%" y2="100%"' : 'x2="100%" y2="0%"' + }> + + + + + + + +`; + this.srcurl = "data:image/svg+xml;base64," + btoa(svgbody); + } else { + this.srcurl = this.src; + } + this.bodyimg.onload = () => { + if (this.src != "") + this.elem.style.backgroundImage = "url(" + this.srcurl + ")"; + this.sw = +this._width; + this.sh = +this._height; + if (this._width == null) this.sw = this.bodyimg.width; + if (this._height == null) this.sh = this.bodyimg.height; + if (this.dr == null) { + if (this.sw > this.sh) this.dr = "horz"; + else this.dr = "vert"; + } + this.kw = +this._knobwidth; + this.kh = +this._knobheight; + if (this._knobsrc == null) { + if (this._knobwidth == null) this.kw = Math.min(this.sw, this.sh); + if (this._knobheight == null) this.kh = Math.min(this.sw, this.sh); + const mm = Math.min(this.kw, this.kh) * 0.5; + const kw2 = Math.max(1, this.kw - 12); + const kh2 = Math.max(1, this.kh - 12); + const svgknob = ` + + + + + - - + + + + + + + - - - - - - - - -`; - for (let i = 0; i < 101; ++i) { - svg += ``; + + + + + +`; + this.knobsrcurl = "data:image/svg+xml;base64," + btoa(svgknob); + } else { + this.knobsrcurl = this.knobsrc; } - svg += ""; - this.elem.style.backgroundImage = - "url(data:image/svg+xml;base64," + btoa(svg) + ")"; - if (this.kw == null) this.kw = 64; - if (this.kh == null) this.kh = 64; - this.elem.style.backgroundSize = `${this.kw}px ${this.kh * 101}px`; - this.elem.style.width = this.kw + "px"; - this.elem.style.height = this.kh + "px"; - this.style.height = this.kh + "px"; - this.fireflag = true; - this.redraw(); - return; - } else { - this.img = new Image(); - this.img.onload = () => { - this.elem.style.backgroundImage = "url(" + this.src + ")"; - if (this._sprites == null) - this._sprites = this.img.height / this.img.width - 1; - else this._sprites = +this._sprites; - if (this.kw == null) this.kw = this.img.width; - if (this.kh == null) this.kh = this.img.height / (this.sprites + 1); - if (!this.sprites) this.elem.style.backgroundSize = "100% 100%"; - else - this.elem.style.backgroundSize = `${this.kw}px ${ - this.kh * (this.sprites + 1) - }px`; - this.elem.style.width = this.kw + "px"; - this.elem.style.height = this.kh + "px"; - this.style.height = this.kh + "px"; + this.knobimg.onload = () => { + this.knob.style.backgroundImage = "url(" + this.knobsrcurl + ")"; + if (this._knobwidth == null) this.kw = this.knobimg.width; + if (this._knobheight == null) this.kh = this.knobimg.height; + this.dlen = this.ditchlength; + if (this.dlen == null) { + if (this.dr == "horz") this.dlen = this.sw - this.kw; + else this.dlen = this.sh - this.kh; + } + this.knob.style.backgroundSize = "100% 100%"; + this.knob.style.width = this.kw + "px"; + this.knob.style.height = this.kh + "px"; + this.elem.style.backgroundSize = "100% 100%"; + this.elem.style.width = this.sw + "px"; + this.elem.style.height = this.sh + "px"; this.redraw(); }; - this.img.src = this.src; - } + this.knobimg.src = this.knobsrcurl; + }; + this.bodyimg.src = this.srcurl; } redraw() { let ratio; @@ -2362,30 +1753,32 @@ ${this.basestyle} this.value = this.min; } if (this.value > this.max) { - this.value = this.max; - } - if (this.log) - ratio = Math.log(this.value / this.min) / Math.log(this.max / this.min); - else ratio = (this.value - this.min) / (this.max - this.min); - let style = this.elem.style; - let sp = this.src ? this.sprites : 100; - if (sp >= 1) { - let offset = (sp * ratio) | 0; - style.backgroundPosition = "0px " + -offset * this.kh + "px"; - style.transform = "rotate(0deg)"; + this.value = this.max; + } + if (this.log) + ratio = Math.log(this.value / this.min) / Math.log(this.max / this.min); + else ratio = (this.value - this.min) / (this.max - this.min); + let style = this.knob.style; + if (this.dr == "horz") { + style.top = (this.sh - this.kh) * 0.5 + "px"; + style.left = + (this.sw - this.kw - this.dlen) * 0.5 + ratio * this.dlen + "px"; + this.sensex = 1; + this.sensey = 0; } else { - let deg = 270 * (ratio - 0.5); - style.backgroundPosition = "0px 0px"; - style.transform = "rotate(" + deg + "deg)"; + style.left = (this.sw - this.kw) * 0.5 + "px"; + style.top = + (this.sh - this.kh - this.dlen) * 0.5 + (1 - ratio) * this.dlen + "px"; + this.sensex = 0; + this.sensey = 1; } } _setValue(v) { - if (this.step) - v = Math.round((v - this.min) / this.step) * this.step + this.min; + v = Math.round((v - this.min) / this.step) * this.step + this.min; this._value = Math.min(this.max, Math.max(this.min, v)); if (this._value != this.oldvalue) { - this.fireflag = true; this.oldvalue = this._value; + this.fireflag = true; if (this.conv) { const x = this._value; this.convValue = eval(this.conv); @@ -2450,7 +1843,6 @@ ${this.basestyle} this.elem.focus(); this.drag = 1; this.showtip(0); - this.oldvalue = this._value; let pointermove = (ev) => { let e = ev; if (ev.touches) { @@ -2467,26 +1859,56 @@ ${this.basestyle} this.startPosY = e.pageY; this.startVal = this.value; } - let offset = - (this.startPosY - e.pageY - this.startPosX + e.pageX) * - this.sensitivity; - if (this.log) { - let r = - Math.log(this.startVal / this.min) / Math.log(this.max / this.min); - r += offset / ((e.shiftKey ? 4 : 1) * 128); - if (r < 0) r = 0; - if (r > 1) r = 1; - this._setValue(this.min * Math.pow(this.max / this.min, r)); + if (this.tracking == "abs") { + const rc = this.getBoundingClientRect(); + let val; + if (this.dr == "horz") + val = Math.max( + 0, + Math.min( + 1, + (e.pageX - rc.left - window.pageXOffset - this.kw * 0.5) / + (this.width - this.kw) + ) + ); + else + val = + 1 - + Math.max( + 0, + Math.min( + 1, + (e.pageY - rc.top - window.pageYOffset - this.kh * 0.5) / + (this.height - this.kh) + ) + ); + if (this.log) { + this._setValue(this.min * Math.pow(this.max / this.min, val)); + } else this._setValue(this.min + (this.max - this.min) * val); } else { - this._setValue( - this.min + - (((this.startVal + - ((this.max - this.min) * offset) / ((e.shiftKey ? 4 : 1) * 128) - - this.min) / - this.step) | - 0) * - this.step - ); + let offset = + ((this.startPosY - e.pageY) * this.sensey - + (this.startPosX - e.pageX) * this.sensex) * + this.sensitivity; + if (this.log) { + let r = + Math.log(this.startVal / this.min) / Math.log(this.max / this.min); + r += offset / ((e.shiftKey ? 4 : 1) * 128); + if (r < 0) r = 0; + if (r > 1) r = 1; + this._setValue(this.min * Math.pow(this.max / this.min, r)); + } else { + this._setValue( + this.min + + (((this.startVal + + ((this.max - this.min) * offset) / + ((e.shiftKey ? 4 : 1) * this.dlen) - + this.min) / + this.step) | + 0) * + this.step + ); + } } if (this.fireflag) { this.sendEvent("input"); @@ -2524,6 +1946,7 @@ ${this.basestyle} let preventScroll = (e) => { e.preventDefault(); }; + if (e.touches) e = e.touches[0]; if (e.ctrlKey || e.metaKey) this.setValue(this.defvalue, true); else { this.startPosX = e.pageX; @@ -2533,15 +1956,572 @@ ${this.basestyle} window.addEventListener("touchmove", pointermove, { passive: false, }); + pointermove(ev); + } + window.addEventListener("mouseup", pointerup); + window.addEventListener("touchend", pointerup); + window.addEventListener("touchcancel", pointerup); + document.body.addEventListener("touchstart", preventScroll, { + passive: false, + }); + e.preventDefault(); + e.stopPropagation(); + return false; + } +} + +export class WebAudioKeyboard extends WebAudioControlsWidget { + constructor() { + super(); + } + connectedCallback() { + let root; + if (this.attachShadow) root = this.attachShadow({ mode: "open" }); + else root = this; + root.innerHTML = ` +
    +`; + this.elem = this.cv = root.childNodes[2]; + this.ttframe = root.childNodes[3]; + this.ctx = this.cv.getContext("2d"); + this._values = []; + this.enable = this.getAttr("enable", 1); + this._width = this.getAttr("width", 480); + Object.defineProperty(this, "width", { + get: () => { + return this._width; + }, + set: (v) => { + this._width = v; + this.setupImage(); + }, + }); + this._height = this.getAttr("height", 128); + Object.defineProperty(this, "height", { + get: () => { + return this._height; + }, + set: (v) => { + this._height = v; + this.setupImage(); + }, + }); + this._min = this.getAttr("min", 0); + Object.defineProperty(this, "min", { + get: () => { + return this._min; + }, + set: (v) => { + this._min = +v; + this.redraw(); + }, + }); + this._keys = this.getAttr("keys", 25); + Object.defineProperty(this, "keys", { + get: () => { + return this._keys; + }, + set: (v) => { + this._keys = +v; + this.setupImage(); + }, + }); + this._colors = this.getAttr( + "colors", + "#222;#eee;#ccc;#333;#000;#e88;#c44;#c33;#800" + ); + Object.defineProperty(this, "colors", { + get: () => { + return this._colors; + }, + set: (v) => { + this._colors = v; + this.setupImage(); + }, + }); + this.outline = this.getAttr("outline", opt.outline); + this.midilearn = this.getAttr("midilearn", 0); + this.midicc = this.getAttr("midicc", null); + this.press = 0; + this.keycodes1 = [ + 90, 83, 88, 68, 67, 86, 71, 66, 72, 78, 74, 77, 188, 76, 190, 187, 191, + 226, + ]; + this.keycodes2 = [ + 81, 50, 87, 51, 69, 82, 53, 84, 54, 89, 55, 85, 73, 57, 79, 48, 80, 192, + 222, 219, + ]; + this.addEventListener("keyup", this.keyup); + this.midiController = {}; + this.midiMode = "normal"; + if (this.midicc) { + let ch = + parseInt(this.midicc.substring(0, this.midicc.lastIndexOf("."))) - 1; + let cc = parseInt( + this.midicc.substring(this.midicc.lastIndexOf(".") + 1) + ); + this.setMidiController(ch, cc); + } + this.setupImage(); + this.digits = 0; + if (this.step && this.step < 1) { + for (let n = this.step; n < 1; n *= 10) ++this.digits; + } + if (window.webAudioControlsWidgetManager) + window.webAudioControlsWidgetManager.addWidget(this); + } + disconnectedCallback() {} + setupImage() { + this.cv.style.width = this.width + "px"; + this.cv.style.height = this.height + "px"; + this.bheight = this.height * 0.55; + this.kp = [ + 0, + 7 / 12, + 1, + (3 * 7) / 12, + 2, + 3, + (6 * 7) / 12, + 4, + (8 * 7) / 12, + 5, + (10 * 7) / 12, + 6, + ]; + this.kf = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0]; + this.ko = [ + 0, + 0, + (7 * 2) / 12 - 1, + 0, + (7 * 4) / 12 - 2, + (7 * 5) / 12 - 3, + 0, + (7 * 7) / 12 - 4, + 0, + (7 * 9) / 12 - 5, + 0, + (7 * 11) / 12 - 6, + ]; + this.kn = [0, 2, 4, 5, 7, 9, 11]; + this.coltab = this.colors.split(";"); + this.cv.width = this.width; + this.cv.height = this.height; + this.cv.style.width = this.width + "px"; + this.cv.style.height = this.height + "px"; + this.style.height = this.height + "px"; + this.cv.style.outline = this.outline ? "" : "none"; + this.bheight = this.height * 0.55; + this.max = this.min + this.keys - 1; + this.dispvalues = []; + this.valuesold = []; + if (this.kf[this.min % 12]) --this.min; + if (this.kf[this.max % 12]) ++this.max; + this.redraw(); + } + redraw() { + function rrect(ctx, x, y, w, h, r, c1, c2) { + if (c2) { + let g = ctx.createLinearGradient(x, y, x + w, y); + g.addColorStop(0, c1); + g.addColorStop(1, c2); + ctx.fillStyle = g; + } else ctx.fillStyle = c1; + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + w, y); + ctx.lineTo(x + w, y + h - r); + ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); + ctx.lineTo(x + r, y + h); + ctx.quadraticCurveTo(x, y + h, x, y + h - r); + ctx.lineTo(x, y); + ctx.fill(); + } + this.ctx.fillStyle = this.coltab[0]; + this.ctx.fillRect(0, 0, this.width, this.height); + let x0 = 7 * ((this.min / 12) | 0) + this.kp[this.min % 12]; + let x1 = 7 * ((this.max / 12) | 0) + this.kp[this.max % 12]; + let n = x1 - x0; + this.wwidth = (this.width - 1) / (n + 1); + this.bwidth = (this.wwidth * 7) / 12; + let h2 = this.bheight; + let r = Math.min(8, this.wwidth * 0.2); + for (let i = this.min, j = 0; i <= this.max; ++i) { + if (this.kf[i % 12] == 0) { + let x = this.wwidth * j++ + 1; + if (this.dispvalues.indexOf(i) >= 0) + rrect( + this.ctx, + x, + 1, + this.wwidth - 1, + this.height - 2, + r, + this.coltab[5], + this.coltab[6] + ); + else + rrect( + this.ctx, + x, + 1, + this.wwidth - 1, + this.height - 2, + r, + this.coltab[1], + this.coltab[2] + ); + } + } + r = Math.min(8, this.bwidth * 0.3); + for (let i = this.min; i < this.max; ++i) { + if (this.kf[i % 12]) { + let x = + this.wwidth * this.ko[this.min % 12] + + this.bwidth * (i - this.min) + + 1; + if (this.dispvalues.indexOf(i) >= 0) + rrect( + this.ctx, + x, + 1, + this.bwidth, + h2, + r, + this.coltab[7], + this.coltab[8] + ); + else + rrect( + this.ctx, + x, + 1, + this.bwidth, + h2, + r, + this.coltab[3], + this.coltab[4] + ); + this.ctx.strokeStyle = this.coltab[0]; + this.ctx.stroke(); + } + } + } + _setValue(v) { + if (this.step) + v = Math.round((v - this.min) / this.step) * this.step + this.min; + this._value = Math.min(this.max, Math.max(this.min, v)); + if (this._value != this.oldvalue) { + this.oldvalue = this._value; + this.redraw(); + this.showtip(0); + return 1; + } + return 0; + } + setValue(v, f) { + if (this._setValue(v) && f) + this.sendEvent("input"), this.sendEvent("change"); + } + wheel(e) {} + keydown(e) { + let m = Math.floor((this.min + 11) / 12) * 12; + let k = this.keycodes1.indexOf(e.keyCode); + if (k < 0) { + k = this.keycodes2.indexOf(e.keyCode); + if (k >= 0) k += 12; + } + if (k >= 0) { + k += m; + if (this.currentKey != k) { + this.currentKey = k; + this.sendEventFromKey(1, k); + this.setNote(1, k); + } + } + } + keyup(e) { + let m = Math.floor((this.min + 11) / 12) * 12; + let k = this.keycodes1.indexOf(e.keyCode); + if (k < 0) { + k = this.keycodes2.indexOf(e.keyCode); + if (k >= 0) k += 12; + } + if (k >= 0) { + k += m; + this.currentKey = -1; + this.sendEventFromKey(0, k); + this.setNote(0, k); + } + } + pointerdown(ev) { + this.cv.focus(); + if (this.enable) { + ++this.press; } + let pointermove = (ev) => { + if (!this.enable) return; + let r = this.getBoundingClientRect(); + let v = [], + p; + if (ev.touches) p = ev.targetTouches; + else if (this.press) p = [ev]; + else p = []; + if (p.length > 0) this.drag = 1; + for (let i = 0; i < p.length; ++i) { + let px = p[i].clientX - r.left; + let py = p[i].clientY - r.top; + let x, k, ko; + if (py >= 0 && py < this.height) { + if (py < this.bheight) { + x = px - this.wwidth * this.ko[this.min % 12]; + k = this.min + ((x / this.bwidth) | 0); + } else { + k = (px / this.wwidth) | 0; + ko = this.kp[this.min % 12]; + k += ko; + k = + this.min + ((k / 7) | 0) * 12 + this.kn[k % 7] - this.kn[ko % 7]; + } + if (k >= this.min && k <= this.max) v.push(k); + } + } + v.sort(); + this.values = v; + this.sendevent(); + this.redraw(); + }; + + let pointerup = (ev) => { + if (this.enable) { + if (ev.touches) this.press = ev.touches.length; + else this.press = 0; + pointermove(ev); + this.sendevent(); + if (this.press == 0) { + window.removeEventListener("mousemove", pointermove); + window.removeEventListener("touchmove", pointermove, { + passive: false, + }); + window.removeEventListener("mouseup", pointerup); + window.removeEventListener("touchend", pointerup); + window.removeEventListener("touchcancel", pointerup); + document.body.removeEventListener("touchstart", preventScroll, { + passive: false, + }); + } + this.redraw(); + } + this.drag = 0; + ev.preventDefault(); + }; + let preventScroll = (ev) => { + ev.preventDefault(); + }; + window.addEventListener("mousemove", pointermove); + window.addEventListener("touchmove", pointermove, { passive: false }); window.addEventListener("mouseup", pointerup); window.addEventListener("touchend", pointerup); window.addEventListener("touchcancel", pointerup); document.body.addEventListener("touchstart", preventScroll, { passive: false, }); + pointermove(ev); ev.preventDefault(); ev.stopPropagation(); - return false; + } + sendEventFromKey(s, k) { + let ev = document.createEvent("HTMLEvents"); + ev.initEvent("change", true, true); + ev.note = [s, k]; + this.dispatchEvent(ev); + } + sendevent() { + let notes = []; + for (let i = 0, j = this.valuesold.length; i < j; ++i) { + if (this.values.indexOf(this.valuesold[i]) < 0) + notes.push([0, this.valuesold[i]]); + } + for (let i = 0, j = this.values.length; i < j; ++i) { + if (this.valuesold.indexOf(this.values[i]) < 0) + notes.push([1, this.values[i]]); + } + if (notes.length) { + this.valuesold = this.values; + for (let i = 0; i < notes.length; ++i) { + this.setdispvalues(notes[i][0], notes[i][1]); + let ev = document.createEvent("HTMLEvents"); + ev.initEvent("change", true, true); + ev.note = notes[i]; + this.dispatchEvent(ev); + } + } + } + setdispvalues(state, note) { + let n = this.dispvalues.indexOf(note); + if (state) { + if (n < 0) this.dispvalues.push(note); + } else { + if (n >= 0) this.dispvalues.splice(n, 1); + } + } + setNote(state, note, actx, when) { + const t = actx && when - actx.currentTime; + if (t > 0) { + setTimeout(() => { + this.setNote(state, note); + }, t * 1000); + } else { + this.setdispvalues(state, note); + this.redraw(); + } + } +} + +export class WebAudioControlsWidgetManager { + constructor() { + this.midiAccess = null; + this.listOfWidgets = []; + this.listOfExternalMidiListeners = []; + this.updateWidgets(); + if (opt.preserveMidiLearn) + this.midiLearnTable = JSON.parse( + localStorage.getItem("WebAudioControlsMidiLearn") + ); + else this.midiLearnTable = null; + this.initWebAudioControls(); + } + addWidget(w) { + this.listOfWidgets.push(w); + } + updateWidgets() { + // this.listOfWidgets = document.querySelectorAll("webaudio-knob,webaudio-slider,webaudio-switch"); + } + initWebAudioControls() { + if (navigator.requestMIDIAccess) { + navigator.requestMIDIAccess().then( + (ma) => { + (this.midiAccess = ma), this.enableInputs(); + }, + (err) => { + console.log("MIDI not initialized - error encountered:" + err.code); + } + ); + } + } + enableInputs() { + let inputs = this.midiAccess.inputs.values(); + console.log("Found " + this.midiAccess.inputs.size + " MIDI input(s)"); + for ( + let input = inputs.next(); + input && !input.done; + input = inputs.next() + ) { + console.log("Connected input: " + input.value.name); + input.value.onmidimessage = this.handleMIDIMessage.bind(this); + } + } + midiConnectionStateChange(e) { + console.log( + "connection: " + + e.port.name + + " " + + e.port.connection + + " " + + e.port.state + ); + enableInputs(); + } + + onMIDIStarted(midi) { + this.midiAccess = midi; + midi.onstatechange = this.midiConnectionStateChange; + enableInputs(midi); + } + // Add hooks for external midi listeners support + addMidiListener(callback) { + this.listOfExternalMidiListeners.push(callback); + } + getCurrentConfigAsJSON() { + return currentConfig.stringify(); + } + handleMIDIMessage(event) { + this.listOfExternalMidiListeners.forEach(function (externalListener) { + externalListener(event); + }); + if ( + (event.data[0] & 0xf0) == 0xf0 || + ((event.data[0] & 0xf0) == 0xb0 && event.data[1] >= 120) + ) + return; + for (let w of this.listOfWidgets) { + if (w.processMidiEvent) w.processMidiEvent(event); + } + if (opt.mididump) console.log(event.data); + } + contextMenuOpen(e, knob) { + if (!this.midiAccess) return; + let menu = document.getElementById("webaudioctrl-context-menu"); + menu.style.left = e.pageX + "px"; + menu.style.top = e.pageY + "px"; + menu.knob = knob; + menu.classList.add("active"); + menu.knob.focus(); + menu.knob.addEventListener( + "keydown", + this.contextMenuCloseByKey.bind(this) + ); + } + contextMenuCloseByKey(e) { + if (e.keyCode == 27) this.contextMenuClose(); + } + contextMenuClose() { + let menu = document.getElementById("webaudioctrl-context-menu"); + menu.knob.removeEventListener("keydown", this.contextMenuCloseByKey); + menu.classList.remove("active"); + let menuItemLearn = document.getElementById( + "webaudioctrl-context-menu-learn" + ); + menuItemLearn.innerHTML = "Learn"; + menu.knob.midiMode = "normal"; + } + contextMenuLearn() { + let menu = document.getElementById("webaudioctrl-context-menu"); + let menuItemLearn = document.getElementById( + "webaudioctrl-context-menu-learn" + ); + menuItemLearn.innerHTML = "Listening..."; + menu.knob.midiMode = "learn"; + } + contextMenuClear(e) { + let menu = document.getElementById("webaudioctrl-context-menu"); + menu.knob.midiController = {}; + this.contextMenuClose(); + } + preserveMidiLearn() { + if (!opt.preserveMidiLearn) return; + const v = []; + for (let w of this.listOfWidgets) { + if (w.id) v.push({ id: w.id, cc: w.midiController }); + } + const s = JSON.stringify(v); + localStorage.setItem("WebAudioControlsMidiLearn", s); } } diff --git a/tsconfig.json b/tsconfig.json index 4d63d49..70537e2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -30,7 +30,13 @@ "es2021" ] }, - "include": ["src", "jest.transform.js"], + "include": [ + "src", + "jest.transform.js", + "temp-zone/Knob.tsx", + "temp-zone/webaudio-controls", + "temp-zone/Knob.stories.tsx" + ], "exclude": [ "dist", "node_modules", From e3d7fa66d75d19981dcbc8f7a5f49898c36eae06 Mon Sep 17 00:00:00 2001 From: Kristin Galvin Date: Wed, 19 Oct 2022 13:36:38 -0700 Subject: [PATCH 4/4] fixed webcomponents --- {temp-zone => src}/Knob.tsx | 8 ++-- src/Knob.types.ts | 12 ++++++ src/stories/Knob.stories.mdx | 8 ++++ src/stories/Knob.stories.tsx | 55 ++++++++++++++++++++++++ src/webaudio-controls/webaudio-knob.js | 13 +++--- src/webaudio-controls/webaudio-widget.js | 2 +- temp-zone/Knob.stories.tsx | 38 ---------------- temp-zone/Knob.types.ts | 5 --- tsconfig.json | 4 +- 9 files changed, 89 insertions(+), 56 deletions(-) rename {temp-zone => src}/Knob.tsx (76%) create mode 100644 src/Knob.types.ts create mode 100644 src/stories/Knob.stories.mdx create mode 100644 src/stories/Knob.stories.tsx delete mode 100644 temp-zone/Knob.stories.tsx delete mode 100644 temp-zone/Knob.types.ts diff --git a/temp-zone/Knob.tsx b/src/Knob.tsx similarity index 76% rename from temp-zone/Knob.tsx rename to src/Knob.tsx index 00a80ac..a17f0b1 100644 --- a/temp-zone/Knob.tsx +++ b/src/Knob.tsx @@ -1,7 +1,7 @@ import React, { FC, DOMAttributes } from "react"; -import { WebAudioKnob } from "../src/webaudio-controls/webaudio-knob"; +import { WebAudioKnob } from "./webaudio-controls/webaudio-knob"; console.log("WebAudioKnob", WebAudioKnob); -import "../src/webaudio-controls/webaudio-knob.js"; +import "./webaudio-controls/webaudio-knob.js"; import { KnobProps } from "./Knob.types"; export type CustomEvents = { @@ -19,6 +19,6 @@ declare global { } } -export default function Knob(props: KnobProps) { +export const Knob: FC = (props) => { return ; -} +}; diff --git a/src/Knob.types.ts b/src/Knob.types.ts new file mode 100644 index 0000000..25c2a64 --- /dev/null +++ b/src/Knob.types.ts @@ -0,0 +1,12 @@ +export interface KnobProps { + src?: string; + sprites?: number; + value?: number; + knobColors?: string; //example: "#e00;#000;#fff" + knobWidth?: number; + knobHeight?: number; + knobDiameter?: number; + outline?: number; + valueTip?: string; + midilearn?: boolean; +} diff --git a/src/stories/Knob.stories.mdx b/src/stories/Knob.stories.mdx new file mode 100644 index 0000000..52d3af6 --- /dev/null +++ b/src/stories/Knob.stories.mdx @@ -0,0 +1,8 @@ +import { Meta } from "@storybook/addon-docs"; + + + +# webaudio-controls + +- [webaudio-controls](https://g200kg.github.io/webaudio-controls/docs/) +- Check out WebKnobMan at [g200kg KnobGallery](https://www.g200kg.com/en/webknobman/gallery.php) diff --git a/src/stories/Knob.stories.tsx b/src/stories/Knob.stories.tsx new file mode 100644 index 0000000..9db57e7 --- /dev/null +++ b/src/stories/Knob.stories.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { Knob } from "../Knob"; + +export default { + title: "UI/Knob", + component: Knob, +} as ComponentMeta; + +export const Gallery = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + ); +}; + +const Template: ComponentStory = (args) => ; + +export const Default = Template.bind({}); + +Default.args = { + src: "", + sprites: 100, + value: 0, + /* knobColors: "#000;#fff;#e00;", + knobWidth: 100, + knobHeight: 100, + knobDiameter: 100, + outline: 0, + valueTip: "info here", + midilearn: false,*/ +}; diff --git a/src/webaudio-controls/webaudio-knob.js b/src/webaudio-controls/webaudio-knob.js index 556adb5..5cf581e 100644 --- a/src/webaudio-controls/webaudio-knob.js +++ b/src/webaudio-controls/webaudio-knob.js @@ -106,12 +106,6 @@ let opt = { if (window.WebAudioControlsOptions) Object.assign(opt, window.WebAudioControlsOptions); -try { - customElements.define("webaudio-knob", WebAudioKnob); -} catch (error) { - console.log("webaudio-knob already defined"); -} - export class WebAudioKnob extends WebAudioControlsWidget { constructor() { super(); @@ -560,3 +554,10 @@ export class WebAudioKnob extends WebAudioControlsWidget { return false; } } + +try { + console.log("custom elements", customElements); + customElements.define("webaudio-knob", WebAudioKnob); +} catch (error) { + console.log("webaudio-knob already defined"); +} diff --git a/src/webaudio-controls/webaudio-widget.js b/src/webaudio-controls/webaudio-widget.js index 98d0eb3..8e8ca50 100644 --- a/src/webaudio-controls/webaudio-widget.js +++ b/src/webaudio-controls/webaudio-widget.js @@ -136,7 +136,7 @@ export class WebAudioControlsWidget extends HTMLElement { this.addEventListener("mouseout", this.pointerout); this.addEventListener("contextmenu", this.contextMenu); this.hover = this.drag = 0; - document.body.appendChild(midimenu); + //document.body.appendChild(midimenu); this.basestyle = ` .webaudioctrl-tooltip{ display:inline-block; diff --git a/temp-zone/Knob.stories.tsx b/temp-zone/Knob.stories.tsx deleted file mode 100644 index 7d76a7a..0000000 --- a/temp-zone/Knob.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { ComponentMeta } from "@storybook/react"; -import Knob from "./Knob"; - -export default { - title: "ui/Knob", - component: Knob, -} as ComponentMeta; - -export const Default = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/temp-zone/Knob.types.ts b/temp-zone/Knob.types.ts deleted file mode 100644 index d812226..0000000 --- a/temp-zone/Knob.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface KnobProps { - src?: string; - sprites?: number; - value?: number; -} diff --git a/tsconfig.json b/tsconfig.json index 70537e2..7af725b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -33,9 +33,9 @@ "include": [ "src", "jest.transform.js", - "temp-zone/Knob.tsx", + "src/Knob.tsx", "temp-zone/webaudio-controls", - "temp-zone/Knob.stories.tsx" + "src/stories/Knob.stories.tsx" ], "exclude": [ "dist",