@tremolo-ui/react 0.0.6 → 0.0.7

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { css, Global } from '@emotion/react';
-import React, { useRef, useEffect, useInsertionEffect, useCallback, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useRef, useEffect, useInsertionEffect, useCallback, useMemo, useState, forwardRef, useImperativeHandle, createRef } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -240,6 +240,62 @@ function styleHelper(value, op, influencer) {
         }
     }
 }
+/**
+ * @category Utility
+ */
+function mod(n, m) {
+    return (((n % m) + m) % m);
+}
+/**
+ * @category MIDI
+ */
+const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+/**
+ * @category MIDI
+ */
+function parseNoteName(noteName) {
+    const m = noteName.match(/^([a-g])(#{0,2}|b{0,2})(-?\d+)$/i);
+    if (!m)
+        throw new Error('Invalid note name');
+    const [, letter, accidental, octave] = m;
+    return {
+        letter: letter.toLocaleUpperCase(),
+        accidental: accidental,
+        octave: Number(octave),
+    };
+}
+/**
+ *
+ * @category MIDI
+ */
+function noteNumber(noteName) {
+    const { letter, accidental, octave, } = parseNoteName(noteName);
+    const noteIndex = noteNames.indexOf(letter.toLocaleUpperCase());
+    const accidentalValue = (accidental[0] == 'b' ? -1 : 1) * accidental.length;
+    return noteIndex + 12 * (Number(octave) + 1) + accidentalValue;
+}
+/**
+ *
+ * @category MIDI
+ */
+function noteName(noteNumber) {
+    const noteIndex = mod(noteNumber, 12);
+    const octave = Math.floor(noteNumber / 12) - 1;
+    return noteNames[noteIndex] + octave;
+}
+/**
+ * @category MIDI
+ */
+function isWhiteKey(note) {
+    const n = typeof note == 'string' ? noteNumber(note) : note;
+    return (mod(n, 12) == 0 ||
+        mod(n, 12) == 2 ||
+        mod(n, 12) == 4 ||
+        mod(n, 12) == 5 ||
+        mod(n, 12) == 7 ||
+        mod(n, 12) == 9 ||
+        mod(n, 12) == 11);
+}
 
 /**
  * This hook is user-land implementation of the experimental `useEffectEvent` hook.
@@ -535,6 +591,261 @@ function NumberInput(_a) {
         } }, rest)));
 }
 
+function KeyLabel({ label, className, style, wrapperStyle, __note, __index, __label, }) {
+    const content = label ? label(__note, __index) : __label && __label(__note, __index);
+    return ((content != undefined || content != null) &&
+        jsx("div", { className: 'tremolo-piano-key-label-wrapper', css: css(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'end', height: '100%' }, wrapperStyle)), children: jsx("div", { className: clsx('tremolo-piano-key-label', className), css: css(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '0.6rem', height: 10, marginBottom: 10, padding: 4, borderRadius: 4, borderStyle: 'solid', borderWidth: 1, borderColor: '#888', aspectRatio: 1, maxWidth: 'calc(100% - 16px)' }, style)), children: content }) }));
+}
+
+const WhiteKey = forwardRef(({ width = 40, height = '100%', bg = 'white', activeBg = '#ccc', style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label, }, ref) => {
+    const [played, setPlayed] = useState(false);
+    useImperativeHandle(ref, () => {
+        return {
+            play() {
+                if (__disabled)
+                    return;
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            },
+            stop() {
+                setPlayed(false);
+                if (__stopNote)
+                    __stopNote(__note);
+            },
+            played() {
+                return played;
+            }
+        };
+    }, []);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let keyLabelProps;
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == KeyLabel) {
+                    keyLabelProps = child.props;
+                }
+                else {
+                    throw new Error('only <KeyLabel>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    return (jsx("div", { className: `tremolo-piano-white-key`, "aria-disabled": __disabled, css: css(Object.assign({ position: 'absolute', backgroundColor: played ? activeBg : bg, color: 'black', left: __position, width: __fill ? __width : (width !== null && width !== undefined ? width : __width), height: height, border: '1px solid #555', borderRadius: '0 0 8px 8px', cursor: __disabled ? 'not-allowed' : 'pointer', zIndex: 1 }, style)), onPointerDown: () => {
+            if (__disabled)
+                return;
+            setPlayed(true);
+            if (__playNote)
+                __playNote(__note);
+        }, onPointerEnter: () => {
+            if (__disabled)
+                return;
+            if (__glissando) {
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            }
+        }, onPointerUp: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, onPointerLeave: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) }));
+});
+
+const BlackKey = forwardRef(({ width = 40 * 0.65, height = '60%', bg = '#333', activeBg = '#666', style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label, }, ref) => {
+    const [played, setPlayed] = useState(false);
+    useImperativeHandle(ref, () => {
+        return {
+            play() {
+                if (__disabled)
+                    return;
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            },
+            stop() {
+                setPlayed(false);
+                if (__stopNote)
+                    __stopNote(__note);
+            },
+            played() {
+                return played;
+            }
+        };
+    }, []);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let keyLabelProps;
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == KeyLabel) {
+                    keyLabelProps = child.props;
+                }
+                else {
+                    throw new Error('only <KeyLabel>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    return (jsx("div", { className: `tremolo-piano-black-key`, "aria-disabled": __disabled, css: css(Object.assign({ position: 'absolute', backgroundColor: played ? activeBg : bg, color: 'white', left: __position, width: __fill ? __width : (width !== null && width !== undefined ? width : __width), height: height, border: '1px solid #555', borderRadius: '0 0 8px 8px', cursor: __disabled ? 'not-allowed' : 'pointer', zIndex: 2 }, style)), onPointerDown: () => {
+            if (__disabled)
+                return;
+            setPlayed(true);
+            if (__playNote)
+                __playNote(__note);
+        }, onPointerEnter: () => {
+            if (__disabled)
+                return;
+            if (__glissando) {
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            }
+        }, onPointerUp: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, onPointerLeave: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) }));
+});
+
+const Shortcuts = {
+    HOME_ROW: {
+        keys: ['a', 'w', 's', 'e', 'd', 'f', 't', 'g', 'y', 'h', 'u', 'j', 'k', 'o', 'l', 'p', ';']
+    }
+};
+
+function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, style, playNote, stopNote, label, children, }) {
+    // -- state and ref ---
+    const [pressed, setPressed] = useState(false);
+    const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1);
+    const keyRefs = useRef([]);
+    for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
+        keyRefs.current[i] = createRef();
+    }
+    const pianoRef = useRef(null);
+    // --- interpret props ---
+    const noteRangeArray = Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
+    const whiteNoteCount = noteRangeArray.filter((v) => isWhiteKey(v)).length;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let whiteKeyProps, blackKeyProps;
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == WhiteKey) {
+                    whiteKeyProps = child.props;
+                }
+                else if (child.type == BlackKey) {
+                    blackKeyProps = child.props;
+                }
+                else {
+                    throw new Error('only <WhiteKey> or <BlackKey>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    // --- internal functions ---
+    function notePosition(note) {
+        const pitchPositions = {
+            C: 0,
+            'C#': 0.55,
+            D: 1,
+            'D#': 1.8,
+            E: 2,
+            F: 3,
+            'F#': 3.5,
+            G: 4,
+            'G#': 4.7,
+            A: 5,
+            'A#': 5.85,
+            B: 6,
+        };
+        const toNoteName = (n) => {
+            const { letter, accidental } = parseNoteName(noteName(n));
+            return (letter + accidental);
+        };
+        const _noteName = toNoteName(note);
+        const firstNoteName = toNoteName(noteRange.first);
+        const pos = pitchPositions[_noteName] - pitchPositions[firstNoteName];
+        const octave = Math.floor((note - noteRange.first) / 12);
+        const octaveOffset = noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0;
+        const length = whiteNoteWidth + 3;
+        return pos * length + (octave + octaveOffset) * 7 * length;
+    }
+    // --- hooks ---
+    useEffect(() => {
+        if (fill && pianoRef.current) {
+            const parent = pianoRef.current.parentElement;
+            if (!parent)
+                throw new Error("doesn't have a parent element.");
+            const resizeObserver = new ResizeObserver(() => {
+                const w = pianoRef.current.clientWidth;
+                setWhiteNoteWidth(w / whiteNoteCount - 3);
+            });
+            resizeObserver.observe(parent);
+        }
+        else {
+            setWhiteNoteWidth((whiteKeyProps === null || whiteKeyProps === undefined ? undefined : whiteKeyProps.width) || 40);
+        }
+    }, []);
+    useEventListener(window, 'keydown', (e) => {
+        var _a, _b, _c, _d;
+        if (e.repeat)
+            return;
+        if (!keyboardShortcuts)
+            return;
+        const index = keyboardShortcuts.keys.indexOf(e.key);
+        if (index != -1) {
+            if (!((_b = (_a = keyRefs.current[index]) === null || _a === undefined ? undefined : _a.current) === null || _b === undefined ? undefined : _b.played())) {
+                (_d = (_c = keyRefs.current[index]) === null || _c === undefined ? undefined : _c.current) === null || _d === undefined ? undefined : _d.play();
+            }
+        }
+    });
+    useEventListener(window, 'keyup', (e) => {
+        var _a, _b;
+        if (e.repeat)
+            return;
+        if (!keyboardShortcuts)
+            return;
+        const index = keyboardShortcuts.keys.indexOf(e.key);
+        if (index != -1) {
+            (_b = (_a = keyRefs.current[index]) === null || _a === undefined ? undefined : _a.current) === null || _b === undefined ? undefined : _b.stop();
+        }
+    });
+    return (jsx("div", { ref: pianoRef, className: "tremolo-piano", css: css(Object.assign({ display: 'inline-block', boxSizing: 'border-box', userSelect: 'none', width: fill ? '100%' : undefined, height: height, position: 'relative' }, style)), onPointerDown: () => {
+            setPressed(true);
+        }, onPointerUp: () => {
+            setPressed(false);
+        }, children: noteRangeArray.map((note, index) => {
+            return (isWhiteKey(note) ? (jsx(WhiteKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth, __playNote: playNote, __stopNote: stopNote, __label: label }, whiteKeyProps), note)) : (jsx(BlackKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth * 0.65, __playNote: playNote, __stopNote: stopNote, __label: label }, blackKeyProps), note)));
+        }) }));
+}
+
 /**
  * clamp value between min and max
  * @category Math
@@ -804,5 +1115,5 @@ const Slider = forwardRef((_a, ref) => {
                         }) }))] })] }));
 });
 
-export { AnimationCanvas, Knob, NumberInput, Slider, SliderThumb, SliderTrack, gradientDirection };
+export { AnimationCanvas, BlackKey, KeyLabel, Knob, NumberInput, Piano, Shortcuts, Slider, SliderThumb, SliderTrack, WhiteKey, gradientDirection };
 //# sourceMappingURL=index.js.map