@tremolo-ui/react 0.7.0 → 0.8.0

package/src/components/NumberInput/index.tsx

@@ -10,21 +10,23 @@ import {
 } from 'react'
 
 import {
-  applyDelta,
+  DEFAULT_DRAG_SENSITIVITY,
+  DEFAULT_KEYBOARD_OPTIONS,
+  DEFAULT_WHEEL_OPTIONS,
+  commitNumberInputText,
   InputEventOption,
   ModifierState,
   type ModifierValue,
-  selectModifier,
+  numberInputBounds,
+  numberInputRanges,
+  nudgeNumberInput,
+  parseNumberText,
+  wheelDirection,
 } from '@tremolo-ui/dom'
-import { linearScale, type Scale, type ValueRange } from '@tremolo-ui/functions'
+import { linearScale, type Scale } from '@tremolo-ui/functions'
 
 import { useCheckSteps } from '../../hooks/_internal/useCheckSteps'
 import { useWheel } from '../../hooks/useWheel'
-import {
-  DEFAULT_DRAG_SENSITIVITY,
-  DEFAULT_KEYBOARD_OPTIONS,
-  DEFAULT_WHEEL_OPTIONS,
-} from '../../input-event'
 
 import { NumberInputProvider } from './context'
 import { DecrementStepper } from './DecrementStepper'
@@ -83,6 +85,9 @@ export interface NumberInputProps {
    * Read a value back out of the text. Has to undo `format`.
    *
    * Text with no number in it reads as `NaN`, which leaves the value alone.
+   * The default, `parseNumberText` from `@tremolo-ui/dom`, reads the number
+   * with the unit around it left out, and is `NaN` for one it cannot read
+   * whole: `1,000`, `1:30`, or a number with a unit in front, such as `L 30`.
    */
   parse?: (text: string) => number
 
@@ -160,7 +165,7 @@ export interface NumberInputProps {
 
   /**
    * Select the text when `InputField` takes focus: `'all'` selects all of it,
-   * `'number'` only the leading number, leaving whatever the format appended,
+   * `'number'` only the number, leaving the unit the format put around it,
    * and `'none'` leaves the caret where the click put it.
    * @default 'none'
    */
@@ -244,20 +249,8 @@ export interface NumberInputMethods {
   blur: () => void
 }
 
-/**
- * A number at the start of the text, and nothing read after it. A half-typed
- * entry still yields the number in front of it, but text with no number is
- * `NaN` rather than 0, so that "unreadable" and "the user typed 0" stay apart.
- */
-const LEADING_NUMBER = /^\s*([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?)/
-
 const defaultFormat = (value: number) => String(value)
 
-const defaultParse = (text: string) => {
-  const match = text.match(LEADING_NUMBER)
-  return match ? Number(match[1]) : NaN
-}
-
 type Props = NumberInputProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputProps>
 
@@ -302,32 +295,15 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
 
     // --- interpret props ---
     const format = formatProp ?? defaultFormat
-    const parse = parseProp ?? defaultParse
+    const parse = parseProp ?? parseNumberText
 
-    // Normalized input needs a finite span even when an end is unbounded or
-    // the caller opted out of clamping. Safe integers provide one without
-    // overflowing the span calculation used by a scale.
-    const range: ValueRange = useMemo(
-      () => ({
-        min: (clampValue ? min : undefined) ?? Number.MIN_SAFE_INTEGER,
-        max: (clampValue ? max : undefined) ?? Number.MAX_SAFE_INTEGER,
-        step,
-        scale,
-      }),
+    const { normalized: range, raw: rawRange } = useMemo(
+      () => numberInputRanges({ min, max, step, scale, clampValue }),
       [clampValue, min, max, step, scale],
     )
-
-    // Raw input does not need a finite span for normalization, so its open
-    // ends can cover every finite JavaScript number instead of stopping at the
-    // safe-integer range.
-    const rawRange: ValueRange = useMemo(
-      () => ({
-        min: (clampValue ? min : undefined) ?? -Number.MAX_VALUE,
-        max: (clampValue ? max : undefined) ?? Number.MAX_VALUE,
-        step,
-        scale,
-      }),
-      [clampValue, min, max, step, scale],
+    const ranges = useMemo(
+      () => ({ normalized: range, raw: rawRange }),
+      [range, rawRange],
     )
 
     // The pipeline range stands in the safe-integer range when an end is
@@ -351,9 +327,9 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
 
     const text = draft ?? format(value)
     const editing = draft !== null
-    const outOfRange =
-      !editing &&
-      ((min !== undefined && value < min) || (max !== undefined && value > max))
+    const bounds = numberInputBounds(value, { min, max, clampValue })
+    const { atMin, atMax } = bounds
+    const outOfRange = !editing && bounds.outOfRange
 
     // --- internal functions ---
     const handleDraft = useCallback(
@@ -379,18 +355,15 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
 
     const commitDraft = useCallback(() => {
       if (draft === null || inactive) return
-      const parsed = parse(draft)
+      const committed = commitNumberInputText(draft, parse, {
+        min,
+        max,
+        clampValue,
+      })
       // Text with no number in it is not a value. Dropping the draft puts the
-      // input back to what it was showing, rather than committing a zero the
-      // user never typed.
-      if (!Number.isFinite(parsed)) {
-        setDraft(null)
-        return
-      }
-      let committed = parsed
-      if (clampValue && min !== undefined) committed = Math.max(committed, min)
-      if (clampValue && max !== undefined) committed = Math.min(committed, max)
-      changeValue(committed)
+      // input back to what it was showing.
+      if (committed === null) setDraft(null)
+      else changeValue(committed)
     }, [draft, inactive, parse, clampValue, min, max, changeValue])
 
     const nudge = useCallback(
@@ -399,26 +372,20 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
         option: ModifierValue<InputEventOption>,
         modifiers?: ModifierState,
       ) => {
-        const [mode] = selectModifier(option, modifiers).value
         changeValue(
-          applyDelta(
-            value,
-            direction,
-            option,
-            mode === 'raw' ? rawRange : range,
-            modifiers,
-          ),
+          nudgeNumberInput(value, direction, option, ranges, modifiers),
         )
       },
-      [changeValue, value, rawRange, range],
+      [changeValue, value, ranges],
     )
 
     // --- hooks ---
     const wheelRefCallback = useWheel<HTMLDivElement>(
       (event) => {
-        if (!wheel || inactive || event.deltaY === 0) return
+        const direction = wheelDirection(event)
+        if (!wheel || inactive || direction === null) return
         event.preventDefault()
-        nudge(-Math.sign(event.deltaY), wheel, event)
+        nudge(direction, wheel, event)
       },
       { requireFocus: true },
     )
@@ -445,8 +412,8 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
         unformatOnFocus,
         keepCaretOnStep,
         blurOnEnter,
-        atMin: clampValue && min !== undefined && value <= min,
-        atMax: clampValue && max !== undefined && value >= max,
+        atMin,
+        atMax,
         drag,
         format,
         parse,
@@ -471,6 +438,8 @@ export const Root = /* @__PURE__ */ forwardRef<NumberInputMethods, Props>(
         text,
         editing,
         outOfRange,
+        atMin,
+        atMax,
         drag,
         dragSensitivity,
         pointerLock,

package/src/components/Piano/index.tsx

@@ -3,7 +3,6 @@ import {
   CSSProperties,
   forwardRef,
   ReactNode,
-  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -14,7 +13,10 @@ import {
 import {
   blackKeyWidth,
   createPianoInput,
+  fitWhiteKeyWidth,
   getNoteRangeArray,
+  type KeyboardShortcuts,
+  type KeyboardShortcutsScope,
   notePosition,
   pianoWidth,
   type NoteRange,
@@ -23,33 +25,6 @@ import {
 } from '@tremolo-ui/dom'
 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
-}
-
 /**
  * What {@link PianoProps.keyProps} may return for one key.
  *
@@ -57,10 +32,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 +124,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
@@ -189,8 +155,6 @@ export interface PianoProps {
   onPlayNote?: (note: number, velocity?: number) => void
   /** Called once everything holding a note has let go of it. */
   onStopNote?: (note: number) => void
-
-  style?: CSSProperties & CSSVariables<'height'>
 }
 
 export interface PianoMethods {
@@ -214,7 +178,6 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
       keyGap = 1,
       blackKeyWidthRatio = 0.65,
       blackKeyHeightRatio = 0.6,
-      height,
       style,
       className,
       label,
@@ -234,10 +197,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 +223,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 +236,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 +256,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,89 +284,16 @@ 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],
-    )
-
-    const windowBlurTarget = useMemo(
-      () => () => (hasShortcuts ? globalThis.window : null),
-      [hasShortcuts],
-    )
-
-    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)
+    }, [resizable, node, first, last, keyGap, blackKeyWidthRatio])
 
     useImperativeHandle(
       forwardedRef,
@@ -423,7 +319,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 +387,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'
+
 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 },
     )