diff --git a/src/editor/codemirror/helper-widgets/openWidgets.tsx b/src/editor/codemirror/helper-widgets/openWidgets.tsx index fcb392471..5a217a2cd 100644 --- a/src/editor/codemirror/helper-widgets/openWidgets.tsx +++ b/src/editor/codemirror/helper-widgets/openWidgets.tsx @@ -17,28 +17,28 @@ export const OpenReactComponent = ({ }); }, [loc, view]); return ( - + ); }; - function createSoundWavePath(): string { - let pathData = 'M0,12'; + let pathData = "M0,12"; + + const totalPoints = 18; - const totalPoints = 18; + const stepSize = 24 / totalPoints; - - const stepSize = 24 / totalPoints; + for (let i = 0; i < totalPoints; i++) { + const x = i * stepSize; + const angle = (x / totalPoints) * 3 * Math.PI; - for (let i = 0; i < totalPoints; i++) { - const x = i * stepSize; - const angle = (x / totalPoints) * 3 * Math.PI; + const heightVariation = Math.cos(angle) * 6; + const y1 = 12 + heightVariation; + const y2 = 12 - heightVariation; - const heightVariation = Math.cos(angle) * 6; - const y1 = 12 + heightVariation; - const y2 = 12 - heightVariation; - - pathData += ` M${x},${y1} L${x},${y2}`; + pathData += ` M${x},${y1} L${x},${y2}`; } return pathData; @@ -51,9 +51,6 @@ export const OpenSoundComponent = ({ loc: number; view: EditorView; }) => { - - - const handleClick = useCallback(() => { view.dispatch({ effects: [openWidgetEffect.of(loc)], @@ -63,20 +60,17 @@ export const OpenSoundComponent = ({ const soundWavePath = createSoundWavePath(); return ( - + ); -}; \ No newline at end of file +}; diff --git a/src/editor/codemirror/helper-widgets/setPixelWidget.tsx b/src/editor/codemirror/helper-widgets/setPixelWidget.tsx index 209d3c15f..0ff724dfc 100644 --- a/src/editor/codemirror/helper-widgets/setPixelWidget.tsx +++ b/src/editor/codemirror/helper-widgets/setPixelWidget.tsx @@ -46,81 +46,85 @@ const MicrobitSinglePixelGrid: React.FC = ({ return (
- + - - - - - {[...Array(5)].map((_, gridY) => ( - - {[...Array(5)].map((_, gridX) => ( - -
); }; diff --git a/src/editor/codemirror/helper-widgets/showImageWidget.tsx b/src/editor/codemirror/helper-widgets/showImageWidget.tsx index 826ee00a4..bfa409d5d 100644 --- a/src/editor/codemirror/helper-widgets/showImageWidget.tsx +++ b/src/editor/codemirror/helper-widgets/showImageWidget.tsx @@ -47,76 +47,85 @@ const MicrobitMultiplePixelsGrid: React.FC = ({ return (
- + - - - - - {[...Array(5)].map((_, gridY) => ( - - {[...Array(5)].map((_, gridX) => ( - -
); }; diff --git a/src/editor/codemirror/helper-widgets/soundWidget.tsx b/src/editor/codemirror/helper-widgets/soundWidget.tsx index 2d80d6f34..7e64faa5e 100644 --- a/src/editor/codemirror/helper-widgets/soundWidget.tsx +++ b/src/editor/codemirror/helper-widgets/soundWidget.tsx @@ -13,7 +13,15 @@ import { openWidgetEffect } from "./openWidgets"; import { zIndexAboveDialogs } from "../../../common/zIndex"; import { start } from "repl"; -type FixedLengthArray = [number, number, number, number, number, string, string]; +type FixedLengthArray = [ + number, + number, + number, + number, + number, + string, + string +]; interface SliderProps { min: number; @@ -27,7 +35,6 @@ interface SliderProps { colour: string; } - interface SVGprops { endFrequency: number; initialFrequency: number; @@ -36,9 +43,14 @@ interface SVGprops { waveType: string; } -const WaveSVG: React.FC = ({ endFrequency, initialFrequency, endAmplitude, startAmplitude, waveType }) => { - - console.log('wavepath generated', waveType) +const WaveSVG: React.FC = ({ + endFrequency, + initialFrequency, + endAmplitude, + startAmplitude, + waveType, +}) => { + console.log("wavepath generated", waveType); const waveLength = 400; // Width of the box const pathData = []; @@ -48,32 +60,41 @@ const WaveSVG: React.FC = ({ endFrequency, initialFrequency, endAmplit // 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 = + (initialFrequency + (frequencyDifference * x) / waveLength) / 100; + const currentAmplitude = + (startAmplitude + (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.toLowerCase()) { - 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; @@ -85,7 +106,7 @@ const WaveSVG: React.FC = ({ endFrequency, initialFrequency, endAmplit return ( - + = ({ endFrequency, initialFrequency, endAmplit strokeWidth="0.5" /> - - ) - + ); }; - const startVolProps: SliderProps = { min: 0, max: 255, @@ -119,7 +137,7 @@ const startVolProps: SliderProps = { }, label: "Start Vol", vertical: true, - colour: 'red' + colour: "red", }; const endFrequencySliderProps: SliderProps = { @@ -140,7 +158,7 @@ const endFrequencySliderProps: SliderProps = { }, label: "End Freq", vertical: true, - colour: 'green' + colour: "green", }; const startFrequencySliderProps: SliderProps = { @@ -161,7 +179,7 @@ const startFrequencySliderProps: SliderProps = { }, label: "Start Freq", vertical: true, - colour: 'blue' + colour: "blue", }; const endVolProps: SliderProps = { @@ -182,61 +200,72 @@ const endVolProps: SliderProps = { }, label: "End Vol", vertical: true, - colour: 'black' + colour: "black", }; -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 ( -
- +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; @@ -245,10 +274,14 @@ const TripleSliderWidget: React.FC<{ volEndprops: SliderProps; 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; @@ -257,20 +290,23 @@ 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] - if (args[i].split('_')[0] == 'SoundEffect.WAVEFORM' || args[i].split('_')[0] == 'SoundEffect.FX') { - argsToBeUsed[count] = (args[i].split('_')[1]).toLowerCase() + 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]; + if ( + args[i].split("_")[0] == "SoundEffect.WAVEFORM" || + args[i].split("_")[0] == "SoundEffect.FX" + ) { + argsToBeUsed[count] = args[i].split("_")[1].toLowerCase(); } let arg = args[i]; console.log("arg: ", arg); count += 1; - }; - - console.log("args", argsToBeUsed) + } + console.log("args", argsToBeUsed); console.log("args", argsToBeUsed); @@ -306,16 +342,14 @@ const TripleSliderWidget: React.FC<{ }; const handleWaveTypeChange = (value: string) => { - setWaveType(value); - updateView({ waveType: value }) + updateView({ waveType: value }); }; const handleFxChange = (value: string) => { updateView({ fx: value }); }; - const updateView = (change: Partial) => { let insertion = statesToString({ startFreq, @@ -539,10 +573,6 @@ const TripleSliderWidget: React.FC<{ ); }; - - - - export const SoundComponent = ({ props, view, @@ -630,20 +660,24 @@ function statesToString({ }: ParsedArgs): string { console.log("waveType", waveType); if (fx.toLocaleLowerCase() == "none") { - return `\n` - + ` freq_start=${startFreq},\n` - + ` freq_end=${endFreq},\n` - + ` duration=${duration},\n` - + ` vol_start=${startVol},\n` - + ` vol_end=${endVol},\n` - + ` waveform=SoundEffect.WAVEFORM_${waveType.toUpperCase()}` + return ( + `\n` + + ` freq_start=${startFreq},\n` + + ` freq_end=${endFreq},\n` + + ` duration=${duration},\n` + + ` vol_start=${startVol},\n` + + ` vol_end=${endVol},\n` + + ` waveform=SoundEffect.WAVEFORM_${waveType.toUpperCase()}` + ); } - return `\n` - + ` freq_start=${startFreq},\n` - + ` freq_end=${endFreq},\n` - + ` duration=${duration},\n` - + ` vol_start=${startVol},\n` - + ` vol_end=${endVol},\n` - + ` waveform=SoundEffect.WAVEFORM_${waveType.toUpperCase()},\n` - + ` fx=SoundEffect.FX_${fx.toUpperCase()}`; -} \ No newline at end of file + return ( + `\n` + + ` freq_start=${startFreq},\n` + + ` freq_end=${endFreq},\n` + + ` duration=${duration},\n` + + ` vol_start=${startVol},\n` + + ` vol_end=${endVol},\n` + + ` waveform=SoundEffect.WAVEFORM_${waveType.toUpperCase()},\n` + + ` fx=SoundEffect.FX_${fx.toUpperCase()}` + ); +} diff --git a/src/editor/codemirror/helper-widgets/widgetArgParser.tsx b/src/editor/codemirror/helper-widgets/widgetArgParser.tsx index 176cd8b6e..1afdf4c85 100644 --- a/src/editor/codemirror/helper-widgets/widgetArgParser.tsx +++ b/src/editor/codemirror/helper-widgets/widgetArgParser.tsx @@ -9,7 +9,7 @@ import { OpenReactComponent, OpenSoundComponent } from "./openWidgets"; export interface CompProps { comp: React.ComponentType; props: WidgetProps; - open: React.ComponentType + open: React.ComponentType; } export function createWidget( @@ -49,7 +49,7 @@ export function createWidget( from: node.from, to: node.to, }, - open: OpenButtonDesign(component, args, types) + open: OpenButtonDesign(component, args, types), }; } return null; diff --git a/src/editor/codemirror/language-server/docstrings.test.ts b/src/editor/codemirror/language-server/docstrings.test.ts index b8ca71d0c..b221791bf 100644 --- a/src/editor/codemirror/language-server/docstrings.test.ts +++ b/src/editor/codemirror/language-server/docstrings.test.ts @@ -24,10 +24,12 @@ describe("splitDocString", () => { expect(remainder).toBeUndefined(); }); it("captures examples", () => { - expect(splitDocString("Summary\n\nExample: `Foo`\n\nRemainder\n\nMore remainder")).toEqual({ + expect( + splitDocString("Summary\n\nExample: `Foo`\n\nRemainder\n\nMore remainder") + ).toEqual({ summary: "Summary", example: "Foo", - remainder: "Remainder\n\nMore remainder" - }) - }) + remainder: "Remainder\n\nMore remainder", + }); + }); });