From 52fa8528b6b5f3fc1db3a31934340f38b850e05a Mon Sep 17 00:00:00 2001 From: Matt Hillsdon Date: Tue, 30 Apr 2024 14:44:26 +0100 Subject: [PATCH] Illustration of stateless version --- .../codemirror/helper-widgets/soundWidget.tsx | 444 ++++++++++-------- 1 file changed, 255 insertions(+), 189 deletions(-) diff --git a/src/editor/codemirror/helper-widgets/soundWidget.tsx b/src/editor/codemirror/helper-widgets/soundWidget.tsx index 1fea4bdfe..f999f19e3 100644 --- a/src/editor/codemirror/helper-widgets/soundWidget.tsx +++ b/src/editor/codemirror/helper-widgets/soundWidget.tsx @@ -1,25 +1,24 @@ -import React, { useState } from "react"; -import { - Box, - Button, - SliderTrack, - SliderFilledTrack, - SliderThumb, - HStack, -} from "@chakra-ui/react"; +import { Box, Button, HStack } from "@chakra-ui/react"; import { EditorView } from "@codemirror/view"; -import { WidgetProps } from "./reactWidgetExtension"; +import React, { useState } from "react"; import { openWidgetEffect } from "./openWidgets"; -import { zIndexAboveDialogs } from "../../../common/zIndex"; -import { start } from "repl"; +import { WidgetProps } from "./reactWidgetExtension"; -type FixedLengthArray = [number, number, number, number, number, string, string]; +type FixedLengthArray = [ + number, + number, + number, + number, + number, + string, + string +]; interface SliderProps { min: number; max: number; step: number; - defaultValue: number; + value: number; onChange: (value: number) => void; sliderStyle?: React.CSSProperties; label: string; @@ -27,14 +26,10 @@ interface SliderProps { colour: string; } -const startVolProps: SliderProps = { +const startVolProps: Omit = { min: 0, max: 255, step: 1, - defaultValue: 50, - onChange: (value) => { - console.log("Slider value changed:", value); - }, sliderStyle: { width: "100%", // Adjust the width of the slider height: "100px", // Adjust the height of the slider @@ -45,17 +40,13 @@ const startVolProps: SliderProps = { }, label: "Start Vol", vertical: true, - colour: 'red' + colour: "red", }; -const endFrequencySliderProps: SliderProps = { +const endFrequencySliderProps: Omit = { min: 0, max: 9999, step: 1, - defaultValue: 5000, - onChange: (value) => { - console.log("Slider value changed:", value); - }, sliderStyle: { width: "100%", height: "100px", @@ -66,17 +57,13 @@ const endFrequencySliderProps: SliderProps = { }, label: "End Freq", vertical: true, - colour: 'green' + colour: "green", }; -const startFrequencySliderProps: SliderProps = { +const startFrequencySliderProps: Omit = { min: 0, max: 9999, step: 1, - defaultValue: 5000, - onChange: (value) => { - console.log("Slider value changed:", value); - }, sliderStyle: { width: "200%", // Adjust the width of the slider height: "100px", // Adjust the height of the slider @@ -87,17 +74,13 @@ const startFrequencySliderProps: SliderProps = { }, label: "Start Freq", vertical: true, - colour: 'blue' + colour: "blue", }; -const endVolProps: SliderProps = { +const endVolProps: Omit = { min: 0, max: 255, step: 1, - defaultValue: 50, - onChange: (value) => { - console.log("Slider value changed:", value); - }, sliderStyle: { width: "200%", // Adjust the width of the slider height: "100px", // Adjust the height of the slider @@ -108,74 +91,88 @@ const endVolProps: SliderProps = { }, label: "End Vol", vertical: true, - colour: 'black' + colour: "black", }; -const Slider: React.FC = ({ - min, - max, - step, - defaultValue, - onChange, - sliderStyle, - label, - vertical, - colour -}) => { - const [value, setValue] = useState(defaultValue); - - const handleChange = (event: React.ChangeEvent) => { - const newValue = parseFloat(event.target.value); - setValue(newValue); - onChange(newValue); - }; - - return ( -
- +const Slider: React.FC = + ({ + min, + max, + step, + value, + onChange, + sliderStyle, + label, + vertical, + colour, + }) => { + const handleChange = (event: React.ChangeEvent) => { + const newValue = parseFloat(event.target.value); + onChange(newValue); + }; + + return (
- {value} -
-
- {label} + +
+ {value} +
+
+ {label} +
-
- ); -}; - + ); + }; const TripleSliderWidget: React.FC<{ - freqStartProps: SliderProps; - freqEndProps: SliderProps; - volStartProps: SliderProps; - volEndprops: SliderProps; + freqStartProps: Omit; + freqEndProps: Omit; + volStartProps: Omit; + volEndprops: Omit; props: WidgetProps; view: EditorView; -}> = ({ freqStartProps, freqEndProps, volStartProps, volEndprops, props, view}) => { - +}> = ({ + freqStartProps, + freqEndProps, + volStartProps, + volEndprops, + props, + view, +}) => { let args = props.args; let ranges = props.ranges; let types = props.types; @@ -184,39 +181,37 @@ const TripleSliderWidget: React.FC<{ //parse args - let argsToBeUsed: FixedLengthArray = [200, 500, 2000, 50, 50, "sine", "None"] // default args - let count = 0 - for (let i = 2; i < args.length; i += 3) { //Update default args with user args where they exist - argsToBeUsed[count] = args[i] + let argsToBeUsed: FixedLengthArray = [200, 500, 2000, 50, 50, "sine", "None"]; // default args + let count = 0; + for (let i = 2; i < args.length; i += 3) { + //Update default args with user args where they exist + argsToBeUsed[count] = args[i]; let arg = args[i]; console.log("arg: ", arg); count += 1; - }; - - console.log("args", argsToBeUsed) - - const [initialFrequency, setInitialFrequency] = useState(Math.min(argsToBeUsed[0], 9999)); - freqStartProps.defaultValue = initialFrequency - - const [endFrequency, setEndFrequency] = useState(Math.min(argsToBeUsed[1], 9999)); - freqEndProps.defaultValue = endFrequency + } + console.log("args", argsToBeUsed); - const [startAmplitude, setStartAmplitude] = useState(Math.min(argsToBeUsed[3], 255)); - volStartProps.defaultValue = startAmplitude + const startFreq = Math.min(argsToBeUsed[0], 9999); + const endFreq = Math.min(argsToBeUsed[1], 9999); + const startVol = Math.min(argsToBeUsed[3], 255); + const endVol = Math.min(argsToBeUsed[4], 9999); - const [endAmplitude, setEndAmplitude] = useState(Math.min(argsToBeUsed[4], 9999)); - volEndprops.defaultValue = endAmplitude + const [waveType, setWaveType] = useState("sine"); - - const [waveType, setWaveType] = useState("sine") + const waveformOptions = ["None", "Vibrato", "Tremolo", "Warble"]; + const textBoxValue = Number(argsToBeUsed[2]); - const waveformOptions = ["None", "Vibrato", "Tremolo", "Warble"] - const [textBoxValue, setTextBoxValue] = useState(Number(argsToBeUsed[2])); - - - const updateView = () => { - let insertion = statesToString(initialFrequency, endFrequency, textBoxValue, startAmplitude, endAmplitude); + const updateView = (change: Partial) => { + let insertion = statesToString({ + startFreq, + endFreq, + duration: textBoxValue, + startVol, + endVol, + ...change, + }); console.log(insertion); if (ranges.length === 1) { view.dispatch({ @@ -241,78 +236,86 @@ const TripleSliderWidget: React.FC<{ } }; - const handleTextInputChange = (e: React.ChangeEvent) => { - const newValue = e.target.value; - setTextBoxValue(Number(newValue)); - updateView(); + //const newValue = e.target.value; + //setTextBoxValue(Number(newValue)); + updateView({}); }; const handleSlider1Change = (value: number) => { - freqStartProps.onChange(value); - setInitialFrequency(value); - updateView(); + //freqStartProps.onChange(value); + //setInitialFrequency(value); + updateView({ + startFreq: value, + }); }; const handleSlider2Change = (value: number) => { - freqEndProps.onChange(value); - setEndFrequency(value); // - updateView(); + //freqEndProps.onChange(value); + //setEndFrequency(value); // + updateView({}); }; const handleSlider3Change = (value: number) => { - freqStartProps.onChange(value); - setStartAmplitude(value); - updateView(); + //freqStartProps.onChange(value); + //setStartAmplitude(value); + updateView({}); }; const handleSlider4Change = (value: number) => { - freqStartProps.onChange(value); - setEndAmplitude(value); - updateView(); + //freqStartProps.onChange(value); + //setEndAmplitude(value); + updateView({}); }; const handleWaveTypeChange = (value: string) => { setWaveType(value); }; - - const generateWavePath = () => { const waveLength = 400; // Width of the box const pathData = []; - const frequencyDifference = endFrequency - initialFrequency; - const amplitudeDifference = endAmplitude - startAmplitude; + const frequencyDifference = endFreq - startFreq; + const amplitudeDifference = endVol - startVol; // Loop through the wave's width to generate the path for (let x = 0; x <= waveLength; x++) { - const currentFrequency = (initialFrequency + (frequencyDifference * x) / waveLength)/100; - const currentAmplitude = (startAmplitude + (amplitudeDifference * x) / waveLength)/2.2; - const period = waveLength / currentFrequency - + const currentFrequency = + (startFreq + (frequencyDifference * x) / waveLength) / 100; + const currentAmplitude = + (startVol + (amplitudeDifference * x) / waveLength) / 2.2; + const period = waveLength / currentFrequency; // Calculate the y-coordinate based on the current frequency and amplitude let y = 0; switch (waveType) { - case 'sine': + case "sine": y = 65 + currentAmplitude * Math.sin((x / period) * 2 * Math.PI); break; - case 'square': - y = x % period < period / 2 ? 65 + currentAmplitude : 65 - currentAmplitude; + case "square": + y = + x % period < period / 2 + ? 65 + currentAmplitude + : 65 - currentAmplitude; break; - case 'sawtooth': - y = 65 + currentAmplitude - ((x % period) / period) * (2 * currentAmplitude); + case "sawtooth": + y = + 65 + + currentAmplitude - + ((x % period) / period) * (2 * currentAmplitude); break; - case 'triangle': + case "triangle": const tPeriod = x % period; - y = tPeriod < period / 2 - ? 65 + (2 * currentAmplitude / period) * tPeriod - : 65 - (2 * currentAmplitude / period) * (tPeriod - period / 2); + y = + tPeriod < period / 2 + ? 65 + ((2 * currentAmplitude) / period) * tPeriod + : 65 - ((2 * currentAmplitude) / period) * (tPeriod - period / 2); break; - case 'noisy': + case "noisy": // Generate noisy wave based on sine wave and random noise - const baseWave = 65 + currentAmplitude * Math.sin((x / period) * 2 * Math.PI); + const baseWave = + 65 + currentAmplitude * Math.sin((x / period) * 2 * Math.PI); const randomNoise = Math.random() * 2 - 1; y = baseWave + randomNoise * (currentAmplitude * 0.3); break; @@ -323,34 +326,74 @@ const TripleSliderWidget: React.FC<{ } // Join the path data points to create the path - return `M${pathData.join(' ')}`; + return `M${pathData.join(" ")}`; }; return (
-
+
{/* Vertical Slider 1 */} -
- +
+
{/* Vertical Slider 2 */} -
- +
+
{/* Vertical Slider 3 */} -
- +
+
{/* Vertical Slider 4 */} -
- +
+
- -
- +
{/* waveform type selection */} -
{/* Waveform box */} -
+
- ); }; - - export const SoundComponent = ({ props, view, @@ -417,12 +468,11 @@ export const SoundComponent = ({ props: WidgetProps; view: EditorView; }) => { - let args = props.args; let ranges = props.ranges; let types = props.types; let from = props.from; - let to = props.to + let to = props.to; //for future reference add a aclose button const handleCloseClick = () => { @@ -430,7 +480,7 @@ export const SoundComponent = ({ effects: [openWidgetEffect.of(-1)], }); }; - + const updateView = () => { let insertion = "test"; console.log(insertion); @@ -456,7 +506,7 @@ export const SoundComponent = ({ }); } }; - + return ( @@ -478,13 +528,29 @@ export const SoundComponent = ({ //(startFreq: number, endFreq: Number, duration: Number, startVol: number, endVol: Number, waveform: string, fx: string) -function statesToString(startFreq: number, endFreq: Number, duration: Number, startVol: number, endVol: Number): string { - return `\n` - + ` freq_start=${startFreq},\n` - + ` freq_end=${endFreq},\n` - + ` duration=${duration},\n` - + ` vol_start=${startVol},\n` - + ` vol_end=${endVol},\n` - + ` waveform=SoundEffect.FX_WARBLE,\n` - + ` fx=SoundEffect.FX_VIBRATO`; +interface ParsedArgs { + startFreq: number; + endFreq: number; + duration: number; + startVol: number; + endVol: number; +} + +function statesToString({ + startFreq, + endFreq, + duration, + startVol, + endVol, +}: ParsedArgs): string { + return ( + `\n` + + ` freq_start=${startFreq},\n` + + ` freq_end=${endFreq},\n` + + ` duration=${duration},\n` + + ` vol_start=${startVol},\n` + + ` vol_end=${endVol},\n` + + ` waveform=SoundEffect.FX_WARBLE,\n` + + ` fx=SoundEffect.FX_VIBRATO` + ); }