@tremolo-ui/react 0.7.0 → 0.9.0

package/src/components/Piano/index.tsx

@@ -3,7 +3,7 @@ import {
   CSSProperties,
   forwardRef,
   ReactNode,
-  useCallback,
+  Ref,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -12,43 +12,23 @@ import {
 } from 'react'
 
 import {
-  blackKeyWidth,
   createPianoInput,
-  getNoteRangeArray,
+  type KeyboardShortcuts,
+  type KeyboardShortcutsScope,
   notePosition,
-  pianoWidth,
   type NoteRange,
   type PianoInputInstance,
   type PianoLayout,
 } from '@tremolo-ui/dom'
+import {
+  blackKeyWidth,
+  fitWhiteKeyWidth,
+  getNoteRangeArray,
+  pianoWidth,
+} from '@tremolo-ui/dom/internal'
 import { isWhiteKey, noteKey } from '@tremolo-ui/functions'
 
-import { useEventListener } from '../../hooks/useEventListener'
-import { cssLength } from '../_util/css-length'
-
-import { KeyboardShortcuts } from './keyboard-shortcuts'
-
-import type { CSSVariables } from '../../css-variables'
-
-type KeyboardShortcutsScope = 'root' | 'window'
-
-function isEditableTarget(target: EventTarget | null) {
-  if (!(target instanceof HTMLElement)) return false
-  if (target.matches('input, textarea, select')) return true
-
-  for (let element: HTMLElement | null = target; element;) {
-    const contentEditable = element.getAttribute('contenteditable')
-    if (contentEditable !== null)
-      return contentEditable.toLowerCase() !== 'false'
-    element = element.parentElement
-  }
-
-  return false
-}
-
-function shortcutKey(event: KeyboardEvent) {
-  return event.code || event.key
-}
+import { useComposedRefs } from '../../compose-refs'
 
 /**
  * What {@link PianoProps.keyProps} may return for one key.
@@ -57,10 +37,8 @@ function shortcutKey(event: KeyboardEvent) {
  * JSX syntax, not on an object type, and selecting on one is the usual way to
  * mark a key out.
  */
-export type KeyAttributes = Omit<ComponentPropsWithoutRef<'div'>, 'style'> & {
-  style?: CSSProperties &
-    CSSVariables<'color' | 'bg' | 'active-color' | 'active-bg'>
-} & Record<`data-${string}`, string | number | boolean | undefined>
+export type KeyAttributes = ComponentPropsWithoutRef<'div'> &
+  Record<`data-${string}`, string | number | boolean | undefined>
 
 /** What a key is, when {@link PianoProps.label} or `keyProps` is asked about it. */
 export interface KeyState {
@@ -151,16 +129,9 @@ export interface PianoProps {
    */
   blackKeyHeightRatio?: number
 
-  /**
-   * Height of the keyboard. Sets `--height`; when it is omitted, the height
-   * the theme gives stands, and the theme can tell `resizable` apart through
-   * `data-resizable`.
-   */
-  height?: number | string
-
   /**
    * What to draw inside a key. `''`, `null` and `undefined` leave it bare, so
-   * a layout with gaps — {@link SHORTCUTS.HOME_ROW_NATURAL}, say — needs no
+   * a layout with gaps — `SHORTCUTS.HOME_ROW_NATURAL`, say — needs no
    * special casing.
    */
   label?: (note: number, state: KeyState) => ReactNode
@@ -190,7 +161,11 @@ export interface PianoProps {
   /** Called once everything holding a note has let go of it. */
   onStopNote?: (note: number) => void
 
-  style?: CSSProperties & CSSVariables<'height'>
+  /**
+   * Receives `playNote` and `stopNote`, which press and release a key as the
+   * pointer or the keyboard would. `ref` reaches the root element itself.
+   */
+  actionsRef?: Ref<PianoMethods>
 }
 
 export interface PianoMethods {
@@ -201,7 +176,7 @@ export interface PianoMethods {
 type Props = PianoProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>
 
-export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
+export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   function Root(
     {
       noteRange,
@@ -214,7 +189,6 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
       keyGap = 1,
       blackKeyWidthRatio = 0.65,
       blackKeyHeightRatio = 0.6,
-      height,
       style,
       className,
       label,
@@ -222,6 +196,7 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
       classes,
       onPlayNote,
       onStopNote,
+      actionsRef,
       ...props
     },
     forwardedRef,
@@ -234,10 +209,6 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
     const [resizedKeyWidth, setResizedKeyWidth] = useState(whiteKeyWidth)
 
     const notes = useMemo(() => getNoteRangeArray(noteRange), [noteRange])
-    const whiteKeyCount = useMemo(
-      () => notes.filter(isWhiteKey).length,
-      [notes],
-    )
 
     const layout: PianoLayout = useMemo(
       () => ({
@@ -264,21 +235,12 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
       layout,
       glissando,
       midiMax,
+      keyboardShortcuts,
+      keyboardShortcutsScope,
       onPlayNote,
       onStopNote,
     })
     const instanceRef = useRef<PianoInputInstance | null>(null)
-    const shortcutNotes = useRef(
-      new Map<string, { note: number; source: string }>(),
-    )
-
-    const releaseShortcutNotes = useCallback(() => {
-      for (const { note, source } of shortcutNotes.current.values()) {
-        instanceRef.current?.noteOff(note, { source })
-      }
-      shortcutNotes.current.clear()
-    }, [])
-
     useEffect(() => {
       if (!node) return
 
@@ -286,6 +248,8 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
         layout: latest.current.layout,
         glissando: latest.current.glissando,
         midiMax: latest.current.midiMax,
+        keyboardShortcuts: latest.current.keyboardShortcuts,
+        keyboardShortcutsScope: latest.current.keyboardShortcutsScope,
         onPlayNote: (note, velocity) =>
           latest.current.onPlayNote?.(note, velocity),
         onStopNote: (note) => latest.current.onStopNote?.(note),
@@ -304,10 +268,27 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
 
     // Runs after every render.
     useEffect(() => {
-      latest.current = { layout, glissando, midiMax, onPlayNote, onStopNote }
-      instanceRef.current?.update({ layout, glissando, midiMax })
+      latest.current = {
+        layout,
+        glissando,
+        midiMax,
+        keyboardShortcuts,
+        keyboardShortcutsScope,
+        onPlayNote,
+        onStopNote,
+      }
+      instanceRef.current?.update({
+        layout,
+        glissando,
+        midiMax,
+        keyboardShortcuts,
+        keyboardShortcutsScope,
+      })
     })
 
+    // By value, so that a range written inline does not reconnect the
+    // observer on every render.
+    const { first, last } = noteRange
     useEffect(() => {
       if (!resizable || !node) return
       const parent = node.parentElement
@@ -315,92 +296,24 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
 
       const resizeObserver = new ResizeObserver(() => {
         setResizedKeyWidth(
-          node.clientWidth / Math.max(whiteKeyCount, 1) - keyGap,
+          fitWhiteKeyWidth(node.clientWidth, {
+            noteRange: { first, last },
+            keyGap,
+            blackKeyWidthRatio,
+          }),
         )
       })
       resizeObserver.observe(parent)
       return () => resizeObserver.disconnect()
-    }, [resizable, node, whiteKeyCount, keyGap])
-
-    const shortcutKeys = keyboardShortcuts?.keys
-    const hasShortcuts = shortcutKeys !== undefined
-    // What the held keys were started against, as a value rather than the
-    // identity of the array: a caller who writes the keys inline hands over a
-    // new array on every render, and releasing on that would stop a note as
-    // soon as anything else re-renders — including the state change that
-    // playing the note caused.
-    const shortcutMapping = shortcutKeys?.join('\u0000')
-
-    useEffect(
-      () => releaseShortcutNotes,
-      [
-        releaseShortcutNotes,
-        shortcutMapping,
-        keyboardShortcutsScope,
-        noteRange.first,
-        noteRange.last,
-      ],
-    )
-
-    /** The note a shortcut key plays, or null when it has none. */
-    function shortcutNote(key: string) {
-      if (!shortcutKeys || key === '') return null
-      const index = shortcutKeys.indexOf(key)
-      const note = noteRange.first + index
-      return index === -1 || note > noteRange.last ? null : note
-    }
-
-    const shortcutTarget = useMemo(
-      () => () => {
-        if (!hasShortcuts) return null
-        return keyboardShortcutsScope === 'window' ? globalThis.window : node
-      },
-      [hasShortcuts, keyboardShortcutsScope, node],
-    )
-
-    const focusOutTarget = useMemo(
-      () => () =>
-        hasShortcuts && keyboardShortcutsScope === 'root' ? node : null,
-      [hasShortcuts, keyboardShortcutsScope, node],
-    )
+    }, [resizable, node, first, last, keyGap, blackKeyWidthRatio])
 
-    const windowBlurTarget = useMemo(
-      () => () => (hasShortcuts ? globalThis.window : null),
-      [hasShortcuts],
+    const rootRefCallback = useComposedRefs<HTMLDivElement>(
+      forwardedRef,
+      setNode,
     )
 
-    useEventListener(shortcutTarget, 'keydown', (e) => {
-      const key = shortcutKey(e)
-      if (e.repeat || shortcutNotes.current.has(key)) return
-      if (isEditableTarget(e.target)) return
-
-      const note = shortcutNote(e.key)
-      if (note === null) return
-
-      const source = `keyboard:${key}`
-      shortcutNotes.current.set(key, { note, source })
-      instanceRef.current?.noteOn(note, { source })
-    })
-
-    useEventListener(shortcutTarget, 'keyup', (e) => {
-      const key = shortcutKey(e)
-      const shortcut = shortcutNotes.current.get(key)
-      if (!shortcut) return
-
-      shortcutNotes.current.delete(key)
-      instanceRef.current?.noteOff(shortcut.note, { source: shortcut.source })
-    })
-
-    useEventListener(focusOutTarget, 'focusout', (e) => {
-      if (e.relatedTarget instanceof Node && node?.contains(e.relatedTarget))
-        return
-      releaseShortcutNotes()
-    })
-
-    useEventListener(windowBlurTarget, 'blur', releaseShortcutNotes)
-
     useImperativeHandle(
-      forwardedRef,
+      actionsRef,
       () => ({
         playNote: (note, velocity) =>
           instanceRef.current?.noteOn(note, { source: 'api', velocity }),
@@ -412,7 +325,7 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
 
     return (
       <div
-        ref={setNode}
+        ref={rootRefCallback}
         className={className}
         data-resizable={resizable ? '' : undefined}
         role="group"
@@ -423,7 +336,6 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
           {
             // Computed from the layout rather than chosen, so it stays inline.
             width: resizable ? '100%' : pianoWidth(layout),
-            '--height': cssLength(height),
             // The keys inside are placed against this box.
             position: 'relative',
             ...style,
@@ -492,5 +404,3 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
  * Customizable piano component.
  */
 export const Piano = { Root }
-
-export { type KeyboardShortcuts, SHORTCUTS } from './keyboard-shortcuts'

package/src/components/PointsEditor/Container.tsx

@@ -1,40 +1,33 @@
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
+import { POINT_AXIS, wheelMove } from '@tremolo-ui/dom/internal'
+
 import { useComposedRefs } from '../../compose-refs'
 import { useDragValue } from '../../hooks/useDragValue'
 import { useWheel } from '../../hooks/useWheel'
 import { Placement } from '../_util/Placement'
 
 import { usePointsEditorContext } from './context'
-import { AXIS } from './Point'
 
 type Props = ComponentPropsWithoutRef<'div'>
 
 export const Container = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   function Container({ children, className, style, ...props }, forwardedRef) {
-    const {
-      containerRef,
-      disabled,
-      selectable,
-      isPointElement,
-      nudgeFocusedPoint,
-      beginSelectionBox,
-      moveSelectionBox,
-      endSelectionBox,
-    } = usePointsEditorContext()
+    const { containerRef, disabled, selectable, editor } =
+      usePointsEditorContext()
     const { refCallback: dragRefCallback } = useDragValue<HTMLDivElement>({
-      axis: AXIS,
+      axis: POINT_AXIS,
       baseElementRef: containerRef,
       // A press that landed on a point belongs to that point. Declining here
       // rather than in onDragStart matters: by then the container would already
       // have taken the pointer capture away from the point.
       shouldStart: (event) =>
-        !disabled && !isPointElement(event.target as Element | null),
+        !disabled && !editor.isPointElement(event.target as Element | null),
       onDragStart: ([x, y], state) => {
-        beginSelectionBox({ x, y }, state.event)
+        editor.beginSelectionBox({ x, y }, state.event)
       },
-      onChange: ([x, y]) => moveSelectionBox({ x, y }),
-      onDragEnd: endSelectionBox,
+      onChange: ([x, y]) => editor.moveSelectionBox({ x, y }),
+      onDragEnd: () => editor.endSelectionBox(),
     })
 
     // One listener for the whole editor rather than one per point: a wheel
@@ -44,16 +37,12 @@ export const Container = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     useWheel(
       (event) => {
         // Scrolling up moves the point towards y = 0; shift switches to x.
-        // Browsers turn shift+wheel into horizontal scrolling: `deltaY` comes
-        // out empty and `deltaX` carries the movement. Reading whichever axis
-        // moved keeps shift working as the x-axis modifier — and picks up a
-        // trackpad's own horizontal gesture, which never had a modifier.
-        const horizontal = event.deltaX !== 0
-        const delta = horizontal ? event.deltaX : event.deltaY
-        if (delta === 0) return
-        const axis = horizontal || event.shiftKey ? 'x' : 'y'
-        const direction = delta < 0 ? -1 : 1
-        if (nudgeFocusedPoint(axis, direction, event)) event.preventDefault()
+        const move = wheelMove(event)
+        if (!move) return
+        const axis = move.axis === 0 ? 'x' : 'y'
+        if (editor.nudgeFocusedPoint(axis, move.direction, event)) {
+          event.preventDefault()
+        }
       },
       { target: containerRef },
     )