@tremolo-ui/react 0.0.12 → 0.1.0-alpha.0

package/src/components/Piano/index.tsx

@@ -6,19 +6,33 @@ import React, {
   ReactElement,
   ReactNode,
   RefObject,
+  useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
 
-import { isWhiteKey, NoteKey, noteKeys, noteKey } from '@tremolo-ui/functions'
+import {
+  isBlackKey,
+  isWhiteKey,
+  noteKey,
+  NoteKey,
+  noteKeys,
+} from '@tremolo-ui/functions'
 
+import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useEventListener } from '../../hooks/useEventListener'
 
-import { BlackKey } from './BlackKey'
-import { KeyMethods, KeyProps } from './key'
+import { NoteRange, PianoProvider } from './context'
+import {
+  BlackKey,
+  defaultBlackKeyWidth,
+  defaultWhiteKeyWidth,
+  KeyMethods,
+  WhiteKey,
+} from './key'
 import { KeyboardShortcuts } from './keyboardShortcuts'
-import { defaultWhiteKeyWidth, WhiteKey } from './WhiteKey'
 
 /**
  * Piano component
@@ -27,18 +41,27 @@ import { defaultWhiteKeyWidth, WhiteKey } from './WhiteKey'
  * - add scale highlight
  */
 
+/** @category Piano */
+export function getNoteRangeArray(noteRange: NoteRange) {
+  return Array.from(
+    { length: noteRange.last - noteRange.first + 1 },
+    (_, i) => i + noteRange.first,
+  )
+}
+
 /** @category Piano */
 export interface PianoProps {
   // required
-  noteRange: { first: number; last: number }
+  noteRange: NoteRange
 
   // optional
-  height?: number | string
-
   glissando?: boolean
   midiMax?: number
   keyboardShortcuts?: KeyboardShortcuts
   fill?: boolean
+  whiteNoteWidth?: number
+  blackNoteWidth?: number
+  height?: number | string
 
   style?: CSSProperties
 
@@ -64,76 +87,130 @@ export function Piano({
   keyboardShortcuts,
   fill = false,
   height = fill ? '100%' : 160,
+  whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth,
   style,
   className,
   onPlayNote,
   onStopNote,
   label,
   children,
-  onPointerUp,
   onPointerDown,
   ...props
 }: PianoProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>) {
   // -- state and ref ---
-  const [pressed, setPressed] = useState(false)
-  const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1)
+  const [whiteNoteWidth, setWhiteNoteWidth] = useState(_whiteNoteWidth)
   const keyRefs = useRef<RefObject<KeyMethods | null>[]>([])
   for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
     keyRefs.current[i] = createRef<KeyMethods>()
   }
   const pianoRef = useRef<HTMLDivElement>(null)
+  const hitKeyIndex = useRef(-1)
 
   // --- interpret props ---
-  const noteRangeArray = Array.from(
-    { length: noteRange.last - noteRange.first + 1 },
-    (_, i) => i + noteRange.first,
+  const noteRangeArray = getNoteRangeArray(noteRange)
+  const whiteNotes = noteRangeArray.filter((v) => isWhiteKey(v))
+  const blackNotes = noteRangeArray.filter((v) => isBlackKey(v))
+  const whiteNoteCount = whiteNotes.length
+  const padding = 1
+  const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount
+  // const blackNoteShiftPercent = 0.3
+
+  // TODO: if fill setWhiteNoteWidth
+  // useMemo
+  // __width
+  const childrenWithProps = useMemo(() => {
+    return (
+      children &&
+      React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+          const props = { ref: keyRefs.current[index] }
+          return React.cloneElement(child, props)
+        }
+        return child
+      })
+    )
+  }, [children])
+
+  // --- internal functions ---
+  const notePosition = useCallback(
+    (note: number) => {
+      const pitchPositions: Record<NoteKey, number> = {
+        C: 0,
+        'C#': 1,
+        D: 1,
+        'D#': 2,
+        E: 2,
+        F: 3,
+        'F#': 4,
+        G: 4,
+        'G#': 5,
+        A: 5,
+        'A#': 6,
+        B: 6,
+      }
+
+      const whiteNoteWidth = defaultWhiteKeyWidth
+      const blackNoteWidth = defaultBlackKeyWidth
+      const padding = 1
+
+      const targetNoteKey = noteKey(note)
+      const firstNoteKey = noteKey(noteRange.first)
+      const octave = Math.floor((note - noteRange.first) / 12)
+      const octaveOffset =
+        noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0
+      const w = whiteNoteWidth + padding
+      const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey]
+      const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0
+      return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset
+    },
+    [noteRange.first],
   )
-  const whiteNoteCount = noteRangeArray.filter((v) => isWhiteKey(v)).length
-
-  let whiteKeyProps: KeyProps = {},
-    blackKeyProps: KeyProps = {}
-  if (children != undefined) {
-    React.Children.forEach(children, (child) => {
-      if (React.isValidElement(child)) {
-        if (child.type == WhiteKey) {
-          whiteKeyProps = child.props as KeyProps
-        } else if (child.type == BlackKey) {
-          blackKeyProps = child.props as KeyProps
-        } else {
-          throw new Error('only <WhiteKey> or <BlackKey>')
+
+  const getHitKeyIndex = useCallback(
+    (x: number, y: number) => {
+      if (!pianoRef.current) return -1
+      const containerHeight = pianoRef.current.clientHeight
+      const notes = [...blackNotes, ...whiteNotes]
+      for (let i = 0; i < notes.length; i++) {
+        const note = notes[i]
+        const pos = notePosition(note)
+        const w = isWhiteKey(note) ? defaultWhiteKeyWidth : defaultBlackKeyWidth
+        const h = isWhiteKey(note) ? containerHeight : containerHeight * 0.6
+        if (pos <= x && x < pos + w && 0 <= y && y < h) {
+          return note
         }
-      } else {
-        throw new Error('children is an invalid element.')
       }
-    })
-  }
+      return -1
+    },
+    [blackNotes, notePosition, whiteNotes],
+  )
 
-  // --- internal functions ---
-  function notePosition(note: number) {
-    const pitchPositions: Record<NoteKey, number> = {
-      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,
-    }
+  // TODO: 単一のポインターに対しては、useDragで対応可能だが、
+  // マルチタッチに対しては、TouchEventを使う必要がありそう
+  // 取り敢えず、シングルタッチだけ対応
+  const onDrag = useCallback(
+    (perX: number, perY: number) => {
+      if (!pianoRef.current) return
+      const x = perX * staticWidth
+      const y = perY * pianoRef.current.clientHeight
+      const note = getHitKeyIndex(x, y)
+      const index = noteRangeArray.indexOf(note)
+      if (index == -1) return
+      if (hitKeyIndex.current != index) {
+        keyRefs.current[hitKeyIndex.current]?.current?.stop()
+        keyRefs.current[index]?.current?.play()
+        hitKeyIndex.current = index
+      }
+    },
+    [getHitKeyIndex, noteRangeArray, staticWidth],
+  )
 
-    const targetNoteKey = noteKey(note)
-    const firstNoteKey = noteKey(noteRange.first)
-    const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey]
-    const octave = Math.floor((note - noteRange.first) / 12)
-    const octaveOffset =
-      noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0
-    const length = whiteNoteWidth + 3
-    return pos * length + (octave + octaveOffset) * 7 * length
-  }
+  const onDragEnd = useCallback(() => {
+    if (keyRefs.current[hitKeyIndex.current]?.current?.played()) {
+      keyRefs.current[hitKeyIndex.current]?.current?.stop()
+    }
+    hitKeyIndex.current = -1
+  }, [keyRefs])
 
   // --- hooks ---
   useEffect(() => {
@@ -142,16 +219,23 @@ export function Piano({
       if (!parent) throw new Error("doesn't have a parent element.")
       const resizeObserver = new ResizeObserver(() => {
         const w = pianoRef.current!.clientWidth
-        setWhiteNoteWidth(w / whiteNoteCount - 3)
+        setWhiteNoteWidth(w / whiteNoteCount - padding)
       })
       resizeObserver.observe(parent)
       return () => {
         resizeObserver.unobserve(parent)
       }
     } else {
-      setWhiteNoteWidth(whiteKeyProps?.width || defaultWhiteKeyWidth)
+      setWhiteNoteWidth(_whiteNoteWidth)
     }
-  }, [fill, whiteKeyProps?.width, whiteNoteCount])
+  }, [fill, _whiteNoteWidth, whiteNoteCount])
+
+  const [touchMoveRefCallback, pointerDownHandler] =
+    useDragWithElement<HTMLDivElement>({
+      baseElementRef: pianoRef,
+      onDrag: onDrag,
+      onDragEnd: onDragEnd,
+    })
 
   useEventListener(globalThis.window, 'keydown', (e) => {
     if (e.repeat) return
@@ -174,66 +258,54 @@ export function Piano({
   })
 
   return (
-    <div
-      ref={pianoRef}
-      className={clsx('tremolo-piano', className)}
-      style={{
-        width: fill ? '100%' : (whiteNoteWidth + 3) * whiteNoteCount,
-        height: height,
-        ...style,
-      }}
-      onPointerDown={(e) => {
-        setPressed(true)
-        onPointerDown?.(e)
-      }}
-      onPointerUp={(e) => {
-        setPressed(false)
-        onPointerUp?.(e)
-      }}
-      {...props}
+    <PianoProvider
+      noteRange={noteRange}
+      glissando={glissando}
+      midiMax={midiMax}
+      fill={fill}
+      onPlayNote={onPlayNote}
+      onStopNote={onStopNote}
+      label={label}
     >
-      {noteRangeArray.map((note, index) => {
-        return isWhiteKey(note) ? (
-          <WhiteKey
-            key={note}
-            ref={keyRefs.current[index]}
-            __glissando={glissando && pressed}
-            __position={notePosition(note)}
-            __note={note}
-            __disabled={note > midiMax}
-            __index={index}
-            __fill={fill}
-            __width={whiteNoteWidth}
-            __onPlayNote={onPlayNote}
-            __onStopNote={onStopNote}
-            __label={label}
-            {...whiteKeyProps}
-          />
-        ) : (
-          <BlackKey
-            key={note}
-            ref={keyRefs.current[index]}
-            __glissando={glissando && pressed}
-            __position={notePosition(note)}
-            __note={note}
-            __disabled={note > midiMax}
-            __index={index}
-            __fill={fill}
-            __width={whiteNoteWidth * 0.65}
-            __onPlayNote={onPlayNote}
-            __onStopNote={onStopNote}
-            __label={label}
-            {...blackKeyProps}
-          />
-        )
-      })}
-    </div>
+      <div
+        ref={(div) => {
+          pianoRef.current = div
+          touchMoveRefCallback(div)
+        }}
+        className={clsx('tremolo-piano', className)}
+        style={{
+          width: fill ? '100%' : staticWidth,
+          height: height,
+          ...style,
+        }}
+        onPointerDown={(event) => {
+          pointerDownHandler(event)
+          onPointerDown?.(event)
+        }}
+        {...props}
+      >
+        {childrenWithProps ||
+          getNoteRangeArray(noteRange).map((note, index) =>
+            isWhiteKey(note) ? (
+              <WhiteKey
+                ref={keyRefs.current[index]}
+                key={note}
+                noteNumber={note}
+              />
+            ) : (
+              <BlackKey
+                ref={keyRefs.current[index]}
+                key={note}
+                noteNumber={note}
+              />
+            ),
+          )}
+      </div>
+    </PianoProvider>
   )
 }
 
-export * from './key'
 export * from './keyboardShortcuts'
 
-export { WhiteKey } from './WhiteKey'
-export { BlackKey } from './BlackKey'
+export { WhiteKey, BlackKey, type KeyProps, type KeyMethods } from './key'
 export { KeyLabel, type KeyLabelProps } from './KeyLabel'

package/src/components/Piano/key.tsx

@@ -0,0 +1,215 @@
+import clsx from 'clsx'
+import React, {
+  CSSProperties,
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useImperativeHandle,
+  useState,
+  ReactElement,
+} from 'react'
+
+import { usePianoContext } from './context'
+import { KeyLabel, KeyLabelProps } from './KeyLabel'
+
+/**
+ * @category Piano
+ */
+export interface KeyProps {
+  noteNumber: number
+
+  width?: number
+  height?: number | `${number}%`
+
+  bg?: string
+  color?: string
+  activeBg?: string
+  activeColor?: string
+
+  style?: CSSProperties
+
+  /**
+   * \<KeyLabel />
+   */
+  children?: ReactElement
+
+  /** @internal */
+  __width?: number
+}
+
+/**
+ * @category Piano
+ */
+export interface KeyMethods {
+  play: () => void
+  stop: () => void
+  played: () => boolean
+}
+
+type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
+type ImplProps = Props & { keyType: 'black' | 'white' }
+
+/** @category Piano */
+export const defaultWhiteKeyWidth = 40
+/** @category Piano */
+export const defaultBlackKeyWidth = 26
+
+const KeyImpl = forwardRef<KeyMethods, ImplProps>(
+  (
+    {
+      keyType,
+      noteNumber,
+      width,
+      height,
+      bg,
+      color,
+      activeBg,
+      activeColor,
+      className,
+      style,
+      children,
+      __width,
+      ...props
+    }: ImplProps,
+    ref,
+  ) => {
+    const [played, setPlayed] = useState(false)
+    const midiMax = usePianoContext((s) => s.midiMax)
+    const fill = usePianoContext((s) => s.fill)
+    // const glissando = usePianoContext(s => s.glissando)
+    const onPlayNote = usePianoContext((s) => s.onPlayNote)
+    const onStopNote = usePianoContext((s) => s.onStopNote)
+    const label = usePianoContext((s) => s.label)
+    const notePosition = usePianoContext((s) => s.notePosition)
+    const position = notePosition(noteNumber)
+
+    const disabled = noteNumber > midiMax
+    const colors = {
+      '--bg': bg,
+      '--color': color,
+      '--active-bg': activeBg,
+      '--active-color': activeColor,
+    }
+
+    useImperativeHandle(ref, () => {
+      return {
+        play() {
+          if (disabled) return
+          setPlayed(true)
+          if (onPlayNote) onPlayNote(noteNumber)
+        },
+        stop() {
+          setPlayed(false)
+          if (onStopNote) onStopNote(noteNumber)
+        },
+        played() {
+          return played
+        },
+      }
+    }, [disabled, noteNumber, onPlayNote, onStopNote, played])
+
+    let keyLabelProps: KeyLabelProps = {}
+    if (children != undefined) {
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          if (child.type == KeyLabel) {
+            keyLabelProps = child.props as KeyLabelProps
+          } else {
+            throw new Error('only <KeyLabel>')
+          }
+        } else {
+          throw new Error('children is an invalid element.')
+        }
+      })
+    }
+
+    return (
+      <div
+        className={clsx(`tremolo-piano-${keyType}-key`, className)}
+        aria-disabled={disabled}
+        data-active={played}
+        style={{
+          ...colors,
+          left: position,
+          width: fill ? __width : width,
+          height: height,
+          ...style,
+        }}
+        // onPointerDown={() => {
+        //   if (disabled) return
+        //   setPlayed(true)
+        //   if (onPlayNote) onPlayNote(noteNumber)
+        // }}
+        // onPointerEnter={() => {
+        //   if (disabled) return
+        //   if (glissando) {
+        //     setPlayed(true)
+        //     if (onPlayNote) onPlayNote(noteNumber)
+        //   }
+        // }}
+        // onPointerUp={() => {
+        //   if (disabled) return
+        //   setPlayed(false)
+        //   if (onStopNote) onStopNote(noteNumber)
+        // }}
+        // onPointerLeave={() => {
+        //   if (disabled) return
+        //   if (glissando) {
+        //     setPlayed(false)
+        //     if (onStopNote) onStopNote(noteNumber)
+        //   }
+        // }}
+        {...props}
+      >
+        <KeyLabel label={label} __note={noteNumber} {...keyLabelProps} />
+      </div>
+    )
+  },
+)
+
+/** @category Piano */
+export const WhiteKey = forwardRef<KeyMethods, Props>(
+  (
+    {
+      width = defaultWhiteKeyWidth,
+      height = '100%',
+      onContextMenu = (e) => e.preventDefault(),
+      ...props
+    }: Props,
+    ref,
+  ) => {
+    return (
+      <KeyImpl
+        ref={ref}
+        keyType="white"
+        width={width}
+        height={height}
+        onContextMenu={onContextMenu}
+        {...props}
+      />
+    )
+  },
+)
+
+/** @category Piano */
+export const BlackKey = forwardRef<KeyMethods, Props>(
+  (
+    {
+      width = defaultBlackKeyWidth,
+      height = '60%',
+      onContextMenu = (e) => e.preventDefault(),
+      ...props
+    }: Props,
+    ref,
+  ) => {
+    return (
+      <KeyImpl
+        ref={ref}
+        keyType="black"
+        width={width}
+        height={height}
+        onContextMenu={onContextMenu}
+        {...props}
+      />
+    )
+  },
+)