aqandrew/fret-zone

🎸 React clone of Guitar Pro tab editor (WIP)

👋🏽 I'm Andrew, a frontend developer in Southern California. My specialties are CSS/animation, modern JavaScript (React, Svelte), and interactive visual experiences (data visualization with D3, three.js).

• 👨🏽‍💻 I'm currently working on svelte-onion and a few React projects:
  • baybayin
  • crayola-oklch
  • kulintang
  • FretZone
• 🌱 I'm currently learning:
  • three.js
  • how to play octavina
• 💬 Ask me about prog metal, jazz, or The Food Lab
• 📫 How to reach me: Twitter or email
• ⚡ Fun fact: Two of my CodePens have been picked for CodePen's front page.
  1. React music visualizer
  2. ginger beer cat infinite zoom

fret-zone's Issues

vertically drag to resize GlobalView

• minimum height accommodates 1 track, provided there's >= 1 track
• maximum height accommodates all tracks is 50vh

change Workspace layout when display mode changes

add TypeScript

custom objects like notes, measures, and durations are unwieldy

multitrack view

put commands in menu bar

A menu bar is probably a wheel that doesn't need to be reinvented:

add tied notes

• Whether a note is tied is boolean at the note level, not the duration level.
• A tied note can be rendered with parentheses: (0)
• Pressing L at a duration with no preceding notes on that string does nothing.
• If there are preceding notes,
  • If there are empty durations between the selected duration and the preceding note on that string,
    • The empty durations are filled to fill the bar(s), using the longest possible duration lengths first.

Before pressing L:

After pressing L:

error when document has one duration, with multiple notes, and a note is deleted

utils.js:10 Uncaught TypeError: Cannot read property 'notes' of undefined
    at dispatchChangeNextSelectedDurationLengthIfNecessary (utils.js:10)
    at App.jsx:565
    at HTMLDocument.<anonymous> (App.jsx:718)

add real UI icons

PNG spritesheet or individual SVGs?

What are the pros and cons of each?

add CSS preprocessor

zoom Workspace when zoomLevel changes

MIDI audio playback

ArrowLeft always selects the first duration of the previous measure

use library for accessible UI components

especially modals

e.g.,

• react-aria-components
• reach-ui
• radix-ui

draw SVG standard notation based on measures and notes

Lots of free SVG resources here:

https://commons.wikimedia.org/wiki/Musical_notation

add copy/paste functionality

Guitar Pro's copy/paste doesn't make use of the OS clipboard, so clipboard contents will have to be stored somewhere in app state.

This also means that we can't paste from Guitar Pro into FretZone. 😢

IA concerning measures' notes is wrong

Right now, a measure has notes, each of which has a duration. The state shape of a measure is as follows:

{
  id: 'foo',
  notes: [
    {
      id: 'bar',
      isRest: false,
      string: 0,
      fret: 3,
      duration: 1/4
    },
    ...
  ]
}

This is fine for sequences of single notes only. However, to support chords and make calculating measure durations much easier, the shape must be changed so that a measure has durations, each of which has notes. For example: if a single voice is playing a two-note power chord, you can't change the duration of the root note without changing the fifth's duration as well. The above state (playing a G note on the third fret of the high E string) would be better represented like this:

{
  id: 'foo',
  durations: [
    {
      id: 'bar',
      length: 1/4,
      isRest: false,
      notes: [
        {
          id: 'baz',
          string: 0,
          fret: 3
        }
      ]
    },
    ...
  ]
}

on start, AddTrackModal should be open

To help make the UX more clear.

This will break quite a few tests.

^Those tests will have to be changed so that creating a new track simply requires pressing Enter, rather than having to click the Add Track button first.

add ability to set fret numbers > 9

• cutoff time for two consecutive number inputs to be treated as one: ~1 second
• maximum fret number: 63

keeping track of lastFretInputTime in state causes re-renders every time it changes

useRef is better for keeping track of a variable like this.

define dimensions using rem instead of px

move action definitions into separate file

Action definitions account for almost half of App.jsx's length:

fret-zone/src/App.jsx

Lines 70 to 511 in 4612f11

	const dispatchDeleteTrack = () => {
	// If a track that's not last is being deleted,
	if (selectedTrackNumber < tracks.length - 1) {
	const nextTracksFirstDurationAtSelectedMeasureNumber = durations.find(
	(duration) =>
	duration.id ===
	measures.find(
	(measure) =>
	measure.id ===
	tracks[selectedTrackNumber + 1].measures[selectedMeasureNumber]
	).durations[0]
	);
	// Select first duration of next track's measure at selectedMeasureNumber
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: nextTracksFirstDurationAtSelectedMeasureNumber.id,
	});
	}
	// Otherwise, select first duration of previous track's measure at selectedMeasureNumber
	else if (selectedTrackNumber !== 0) {
	const previousTracksFirstDurationAtSelectedMeasureNumber = durations.find(
	(duration) =>
	duration.id ===
	measures.find(
	(measure) =>
	measure.id ===
	tracks[selectedTrackNumber - 1].measures[selectedMeasureNumber]
	).durations[0]
	);
	dispatch({
	type: actionTypes.SELECT_TRACK,
	trackNumber: selectedTrackNumber - 1,
	});
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: previousTracksFirstDurationAtSelectedMeasureNumber.id,
	});
	}
	dispatch({
	type: actionTypes.DELETE_TRACK,
	trackId: tracks[selectedTrackNumber].id,
	});
	};
	const dispatchAddTrack = useCallback(
	(trackToAdd) => {
	let newTrackId = nanoid();
	// TODO Turn ID array generation into a function
	let measureIds =
	tracks.length === 0
	? [nanoid()]
	: tracks[0].measures.map((measure) => nanoid());
	let durationIds =
	tracks.length === 0
	? [nanoid()]
	: tracks[0].measures.map((measure) => nanoid());
	dispatch({
	type: actionTypes.ADD_TRACK,
	id: newTrackId,
	measures: measureIds,
	durationIds: durationIds,
	durationLength: selectedDuration?.length,
	...trackToAdd,
	});
	return {
	newTrackId: newTrackId,
	durationIdToSelect: durationIds[selectedMeasureNumber],
	};
	},
	[selectedMeasureNumber, selectedDuration, tracks]
	);
	const dispatchShortenDuration = useCallback(
	(durationId) => {
	dispatch({
	type: actionTypes.SET_DURATION_LENGTH,
	durationId: durationId,
	newLength: selectedDuration?.length / 2,
	});
	},
	[selectedDuration]
	);
	const dispatchLengthenDuration = useCallback(
	(durationId) => {
	dispatch({
	type: actionTypes.SET_DURATION_LENGTH,
	durationId: durationId,
	newLength: selectedDuration?.length * 2,
	});
	},
	[selectedDuration]
	);
	const dispatchSelectPreviousString = useCallback(() => {
	dispatch({
	type: actionTypes.SELECT_STRING,
	stringNumber:
	selectedStringNumber === 0
	? selectedTrack?.tuning.length - 1
	: selectedStringNumber - 1,
	});
	}, [selectedTrack, selectedStringNumber]);
	const dispatchSelectNextString = useCallback(() => {
	dispatch({
	type: actionTypes.SELECT_STRING,
	stringNumber: (selectedStringNumber + 1) % selectedTrack?.tuning.length,
	});
	}, [selectedTrack, selectedStringNumber]);
	const dispatchSelectPreviousDuration = useCallback(() => {
	// If currently selected duration is NOT first in the measure,
	if (selectedDurationId !== selectedMeasure?.durations[0]) {
	// Select the previous duration
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId:
	selectedMeasure?.durations[
	selectedMeasure?.durations.findIndex(
	(durationId) => durationId === selectedDurationId
	) - 1
	],
	});
	} else if (selectedMeasureNumber > 0) {
	const previousMeasure = measures.find(
	(measure) =>
	measure.id === selectedTrack?.measures[selectedMeasureNumber - 1]
	);
	const durationIdToSelect = previousMeasure.durations.slice(-1)[0];
	// Select the last duration of the previous measure
	dispatch({
	type: actionTypes.SELECT_MEASURE,
	measureNumber: selectedMeasureNumber - 1,
	});
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: durationIdToSelect,
	});
	}
	}, [
	measures,
	selectedTrack,
	selectedMeasureNumber,
	selectedMeasure,
	selectedDurationId,
	]);
	const dispatchSelectNextDuration = useCallback(() => {
	let shouldCheckIfMeasureIsLast = false;
	// If there's a note at this duration,
	// Or if this duration is a rest,
	if (selectedDuration?.notes.length || selectedDuration?.isRest) {
	// If this is the last duration,
	if (selectedDurationId === selectedMeasure?.durations.slice(-1)[0]) {
	// If the measure's total length === maximum,
	if (currentBarDuration === currentBarMaximumDuration) {
	shouldCheckIfMeasureIsLast = true;
	}
	// Add a new duration to this measure
	else {
	let newDurationId = nanoid();
	dispatch({
	type: actionTypes.ADD_DURATION,
	measureId: selectedMeasure?.id,
	newDurationId: newDurationId,
	length: selectedDuration?.length,
	isDotted: selectedDuration?.isDotted,
	});
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: newDurationId,
	});
	}
	}
	// Select the next duration in this measure
	else {
	const nextDuration = durations.find(
	(duration) =>
	duration.id ===
	selectedMeasure?.durations[
	selectedMeasure?.durations.findIndex(
	(durationId) => durationId === selectedDurationId
	) + 1
	]
	);
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: nextDuration.id,
	});
	}
	} else {
	shouldCheckIfMeasureIsLast = true;
	}
	if (shouldCheckIfMeasureIsLast) {
	// If selectedMeasure is last,
	// Add a new measure
	if (selectedMeasureNumber === selectedTrack?.measures.length - 1) {
	// TODO Use parallel arrays like in dispatchAddTrack instead
	// Create a mapping from track IDs to new measure IDs
	let trackMeasureIds = tracks.reduce((map, track) => {
	map[track.id] = {
	measureId: nanoid(),
	durationId: nanoid(),
	};
	return map;
	}, {});
	// TODO Pass in current measure's time signature
	dispatch({
	type: actionTypes.ADD_MEASURE,
	trackMeasureIds: trackMeasureIds,
	durationLength: selectedDuration?.length,
	});
	dispatch({
	type: actionTypes.SELECT_MEASURE,
	measureNumber: selectedMeasureNumber + 1,
	});
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: trackMeasureIds[selectedTrack?.id].durationId,
	});
	}
	// Select the next measure
	else {
	const nextMeasure = measures.find(
	(measure) =>
	measure.id === selectedTrack?.measures[selectedMeasureNumber + 1]
	);
	const durationIdToSelect = nextMeasure.durations[0];
	dispatch({
	type: actionTypes.SELECT_MEASURE,
	measureNumber: selectedMeasureNumber + 1,
	});
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: durationIdToSelect,
	});
	}
	}
	}, [
	tracks,
	measures,
	durations,
	selectedTrack,
	selectedMeasureNumber,
	selectedMeasure,
	selectedDurationId,
	selectedDuration,
	currentBarDuration,
	currentBarMaximumDuration,
	]);
	const dispatchDeleteMeasure = useCallback(() => {
	if (selectedTrack?.measures.length > 1) {
	let newSelectedMeasureNumber;
	if (selectedMeasureNumber > 0) {
	newSelectedMeasureNumber = selectedMeasureNumber - 1;
	dispatch({
	type: actionTypes.SELECT_MEASURE,
	measureNumber: newSelectedMeasureNumber,
	});
	} else {
	newSelectedMeasureNumber = selectedMeasureNumber + 1;
	}
	const durationToSelect = durations.find(
	(duration) =>
	duration.id ===
	measures.find(
	(measure) =>
	measure.id === selectedTrack?.measures[newSelectedMeasureNumber]
	).durations[0]
	);
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: durationToSelect.id,
	});
	// Even though dispatch runs synchronously, selectedMeasureNumber does not change within this closure,
	// so this still deletes the correct measure after SELECT_MEASURE has executed
	dispatch({
	type: actionTypes.DELETE_MEASURE,
	measureNumber: selectedMeasureNumber,
	});
	}
	}, [measures, durations, selectedTrack, selectedMeasureNumber]);
	const dispatchDeleteNote = useCallback(() => {
	let needToSelectNewDuration = false;
	// If there is a note at this selected duration/string,
	if (selectedPositionHasNote) {
	// Delete that note
	// TODO These lines are horribly inefficient
	const selectedNoteId = selectedDuration?.notes.find(
	(noteId) =>
	notes.find((note) => note.id === noteId).string ===
	selectedStringNumber
	);
	dispatch({ type: actionTypes.DELETE_NOTE, noteId: selectedNoteId });
	// If the deleted note was the last one in the selected duration,
	if (selectedDuration?.notes.length === 1) {
	// Turn the duration into a rest
	dispatch({
	type: actionTypes.ADD_REST,
	durationId: selectedDurationId,
	});
	}
	// Don't select a new duration if we're in the first duration of the document
	else if (
	!(
	selectedMeasureNumber === 0 &&
	selectedDurationId === selectedMeasure?.durations[0]
	)
	) {
	needToSelectNewDuration = true;
	}
	} else {
	// If the selected duration is a rest,
	if (selectedDuration?.isRest) {
	// If this is the only duration in the measure,
	if (selectedMeasure?.durations.length === 1) {
	// Change the duration to NOT a rest
	dispatch({
	type: actionTypes.MARK_DURATION_AS_NOT_REST,
	durationId: selectedDurationId,
	});
	} else {
	// Delete that duration
	dispatch({
	type: actionTypes.DELETE_DURATION,
	durationId: selectedDurationId,
	});
	needToSelectNewDuration = true;
	}
	}
	}
	if (needToSelectNewDuration) {
	let durationIdToSelect;
	// If the selected duration is first in the measure,
	if (selectedDurationId === selectedMeasure?.durations[0]) {
	// If the first measure of the document is selected,
	if (selectedMeasureNumber === 0) {
	// Select the next duration of this measure
	durationIdToSelect =
	selectedMeasure?.durations[
	selectedMeasure?.durations.findIndex(
	(durationId) => durationId === selectedDurationId
	) + 1
	];
	} else {
	// Select the previous measure's last duration
	durationIdToSelect = measures[
	selectedMeasureNumber - 1
	].durations.slice(-1)[0];
	dispatch({
	type: actionTypes.SELECT_MEASURE,
	measureNumber: selectedMeasureNumber - 1,
	});
	}
	} else {
	// Select this measure's previous duration
	durationIdToSelect =
	selectedMeasure?.durations[
	selectedMeasure?.durations.findIndex(
	(durationId) => durationId === selectedDurationId
	) - 1
	];
	}
	dispatch({
	type: actionTypes.SELECT_DURATION,
	durationId: durationIdToSelect,
	});
	}
	}, [
	measures,
	notes,
	selectedMeasureNumber,
	selectedMeasure,
	selectedDurationId,
	selectedDuration,
	selectedStringNumber,
	selectedPositionHasNote,
	]);
	const dispatchAddNote = useCallback(
	(fretNumber) => {
	const fretInputTime = Date.now();
	setLastFretInputTime(fretInputTime);
	// TODO See other comment about "horribly inefficient"
	// TODO selectedNote is probably a good variable to have
	const currentFretNumber =
	notes.find(
	(note) =>
	note.string === selectedStringNumber &&
	selectedDuration?.notes.includes(note.id)
	)?.fret || 0;
	const enteredFretNumber = parseInt(fretNumber);
	const newFretNumber = currentFretNumber * 10 + enteredFretNumber;
	dispatch({
	type: actionTypes.ADD_NOTE,
	durationId: selectedDurationId,
	id: nanoid(),
	string: selectedStringNumber,
	fret:
	fretInputTime - lastFretInputTime < SAME_FRET_NUMBER_CUTOFF_TIME &&
	newFretNumber <= MAXIMUM_FRET_NUMBER
	? newFretNumber
	: enteredFretNumber,
	});
	},
	[
	notes,
	selectedDurationId,
	selectedDuration,
	selectedStringNumber,
	lastFretInputTime,
	]
	);

These can live in a custom hook instead: https://stackoverflow.com/questions/59556939/reactjs-create-a-separate-file-for-functions-that-dispatch-actions

move keybindings outside of App.jsx

• tinykeys will probably make this clean
  • Supports cross-platform keybinding with $mod!

prevent default event action when arrow keys are pressed

pressing arrow keys shouldn't scroll the Document; rather, it should select strings (vertically) or durations (horizontally)

https://stackoverflow.com/a/8916697/6432160

empty non-rest durations' length should change based on last selected duration

Durations that satisfy both of the following conditions:

• isRest === false
• notes.length === 0

should should have the same length as that of the last selected duration. These durations are either the only one in a measure, or the last one a measure whose total duration isn't the maximum.

ArrowLeft/ArrowRight listeners add/remove dotting for no reason

Repro steps:

1. Select a dotted note.
2. Use ArrowLeft/ArrowRight to select an adjacent duration containing at least one note.
   • This can be a duration in an adjacent measure.
3. If the adjacent duration was not dotted, it will be now.

Similar behavior occurs when a dotted note is navigated to from an undotted note; the target note's dotting is removed.

This bug doesn't occur when selecting adjacent durations on click.

Note: Changing a duration's dotting when selecting with arrow keys is desired when the target duration does not contain any notes.