diff --git a/src/components/Key/Key.tsx b/src/components/Key/Key.tsx index a412e37..2cb5be6 100644 --- a/src/components/Key/Key.tsx +++ b/src/components/Key/Key.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from 'react'; -import { midiToNote } from 'utils/midi'; -import type { KeyColor, CustomKeyComponent } from 'types'; +import { midiToNote } from 'lib/midi'; +import type { CustomKeyComponent, KeyColor } from 'types'; +import { DEFAULT_BLACK_KEY_HEIGHT, DEFAULT_WHITE_KEY_ASPECT_RATIO } from 'lib/constants'; type KeyProps = { midiNumber: number; @@ -38,11 +39,6 @@ const Key = React.memo((props: KeyProps) => { ); }); -const DEFAULT_WHITE_KEY_ASPECT_RATIO = '24 / 150'; -const DEFAULT_BLACK_KEY_HEIGHT = '67.5%'; -const WHITE_KEY_COLUMN_SPAN = 12; -const BLACK_KEY_COLUMN_SPAN = 8; - function getKeyStyles( midiNumber: number, firstNoteMidiNumber: number, @@ -50,6 +46,8 @@ function getKeyStyles( whiteKeyAspectRatio: React.CSSProperties['aspectRatio'] = DEFAULT_WHITE_KEY_ASPECT_RATIO, blackKeyHeight: React.CSSProperties['height'] = DEFAULT_BLACK_KEY_HEIGHT ): React.CSSProperties { + const WHITE_KEY_COLUMN_SPAN = 12; + const BLACK_KEY_COLUMN_SPAN = 8; const position = getKeyPosition(midiNumber, firstNoteMidiNumber); const { keyColor } = midiToNote(midiNumber); switch (keyColor) { @@ -82,9 +80,9 @@ function getKeyComponent(components: KeyProps['components'], color: KeyColor) { // White keys span over 12 columns each, making the octave length 84 columns total. // Black keys span over 8 columns each, and are overlaid on top white keys. // Key positions (starting columns) of a single octave are calculated by hand to match a real piano keyboard as closely as possible. -const KEY_POSITIONS = [1, 8, 13, 22, 25, 37, 44, 49, 57, 61, 70, 73]; -const OCTAVE_LENGTH_IN_COLUMNS = 84; function getAbsoluteKeyPosition(midiNumber: number) { + const KEY_POSITIONS = [1, 8, 13, 22, 25, 37, 44, 49, 57, 61, 70, 73]; + const OCTAVE_LENGTH_IN_COLUMNS = 84; const { octave } = midiToNote(midiNumber); return octave * OCTAVE_LENGTH_IN_COLUMNS + KEY_POSITIONS[midiNumber % KEY_POSITIONS.length]; } diff --git a/src/components/Klavier.tsx b/src/components/Klavier.tsx index 88e6406..b77995f 100644 --- a/src/components/Klavier.tsx +++ b/src/components/Klavier.tsx @@ -1,10 +1,11 @@ import React, { useMemo, useRef } from 'react'; import type { Keymap, CustomKeyComponent } from 'types'; import { DEFAULT_KEYMAP } from 'keymap'; +import { DEFAULT_NOTE_RANGE } from 'lib/constants'; +import { range } from 'lib/range'; import { Key } from 'components/Key'; import { defaultKeyComponents } from 'components/Key/defaultKeyComponents'; -import { range } from 'utils/range'; -import { isMidiNumber } from 'utils/midi'; +import { isMidiNumber } from 'lib/midi'; import { useKlavier } from 'state/useKlavier'; import { useMouse } from 'interactivity/useMouse'; import { useKeyboard } from 'interactivity/useKeyboard'; @@ -102,7 +103,7 @@ const Klavier = (props: KlavierProps) => { onNotePlay, onNoteStop, onChange, - noteRange = [21, 108], + noteRange = DEFAULT_NOTE_RANGE, interactive = true, keyMap = DEFAULT_KEYMAP, width, diff --git a/src/interactivity/useKeyboard.ts b/src/interactivity/useKeyboard.ts index 44f9fea..d5e3cbe 100644 --- a/src/interactivity/useKeyboard.ts +++ b/src/interactivity/useKeyboard.ts @@ -1,6 +1,6 @@ import { useCallback, useEffect } from 'react'; import type { Keymap } from 'types'; -import { noop } from 'utils/noop'; +import { noop } from 'lib/noop'; type UseKeyboardProps = { enabled: boolean; diff --git a/src/lib/constants.ts b/src/lib/constants.ts new file mode 100644 index 0000000..12461d9 --- /dev/null +++ b/src/lib/constants.ts @@ -0,0 +1,12 @@ +export const MIN_MIDI_NUMBER = 0; +export const MAX_MIDI_NUMBER = 127; +export const MIDI_NUMBER_C0 = 12; +export const OCTAVE_LENGTH = 12; +export const BLACK_KEY_MIDI_NUMBERS = [ + 1, 3, 6, 8, 10, 13, 15, 18, 20, 22, 25, 27, 30, 32, 34, 37, 39, 42, 44, 46, 49, 51, 54, 56, 58, 61, 63, 66, 68, 70, + 73, 75, 78, 80, 82, 85, 87, 90, 92, 94, 97, 99, 102, 104, 106, 109, 111, 114, 116, 118, 121, 123, 126, +]; + +export const DEFAULT_NOTE_RANGE: [number, number] = [21, 108]; +export const DEFAULT_WHITE_KEY_ASPECT_RATIO = '24 / 150'; +export const DEFAULT_BLACK_KEY_HEIGHT = '67.5%'; diff --git a/src/utils/midi.ts b/src/lib/midi.ts similarity index 67% rename from src/utils/midi.ts rename to src/lib/midi.ts index 8e545b7..865b263 100644 --- a/src/utils/midi.ts +++ b/src/lib/midi.ts @@ -1,13 +1,5 @@ import type { Note } from 'types'; - -export const MIN_MIDI_NUMBER = 0; -export const MAX_MIDI_NUMBER = 127; -export const MIDI_NUMBER_C0 = 12; -export const OCTAVE_LENGTH = 12; -export const BLACK_KEY_MIDI_NUMBERS = [ - 1, 3, 6, 8, 10, 13, 15, 18, 20, 22, 25, 27, 30, 32, 34, 37, 39, 42, 44, 46, 49, 51, 54, 56, 58, 61, 63, 66, 68, 70, - 73, 75, 78, 80, 82, 85, 87, 90, 92, 94, 97, 99, 102, 104, 106, 109, 111, 114, 116, 118, 121, 123, 126, -]; +import { BLACK_KEY_MIDI_NUMBERS, MAX_MIDI_NUMBER, MIDI_NUMBER_C0, MIN_MIDI_NUMBER, OCTAVE_LENGTH } from 'lib/constants'; export function midiToNote(midiNumber: number): Note { if (!isMidiNumber(midiNumber)) { diff --git a/src/utils/noop.ts b/src/lib/noop.ts similarity index 100% rename from src/utils/noop.ts rename to src/lib/noop.ts diff --git a/src/utils/range.ts b/src/lib/range.ts similarity index 100% rename from src/utils/range.ts rename to src/lib/range.ts