Add Clear Button on Tune Editor (hackclub#1488)

* Add Clear Button on Tune Editor

as mentioned on hackclub#905 , i have added clear button which clear the sequence rather than right click each line

* Added Comment For Friendly Codebase

as @JosiasAurel requested , i have added the function description + comment.

* add a chicky missing } to the code

src/components/subeditors/sequencer.tsx

@@ -136,6 +136,19 @@ export default function SequencerEditor(props: EditorProps) {
  const preventContextMenu = (event: MouseEvent) => { event.preventDefault(); }
  window.addEventListener('contextmenu', preventContextMenu)
 
+ /**
+ * Clear the sequencer editor.
+ * This function:
+ * - Clears the cells from the sequencer
+ * - Sets the lastDraw (used for drawing lines) to null
+ * - Clears the text in the editor
+ */
+ const clearSequencer = () => {
+ cells.value = {}; // Remove all cells from the sequencer
+ lastDraw.value = null; // Reset the draw cursor
+ props.text.value = ""; // Clear the text in the editor
+ }
+
  // Sync text changes with cells
  useSignalEffect(() => {
  const newCells = tuneToCells(textToTune(props.text.value))
@@ -196,6 +209,15 @@ export default function SequencerEditor(props: EditorProps) {
  beat.value = 0
  }}
  />
+ <Button
+ onClick={() => {
+ const isConfirmed = confirm('Are you sure you want to clear the sequencer?');
+ if (isConfirmed) {
+ clearSequencer();
+ }
+ }}
+ > {'Clear'}
+ </Button>
  </div>
 
  <div class={styles.bpm}>