@tremolo-ui/react 0.2.1 → 0.4.0

package/src/hooks/useDragWithElement.ts

@@ -1,19 +1,39 @@
-import { useRef, useCallback, RefObject, useState } from 'react'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 
+import { createDrag } from '@tremolo-ui/dom'
 import { normalizeValue } from '@tremolo-ui/functions'
 
-import { useEventListener } from './useEventListener'
-import { useRefCallbackEvent } from './useRefCallbackEvent'
+import { useCallbackRef } from './useCallbackRef'
 
 interface UseDragWithElement<T extends Element> {
   baseElementRef: RefObject<T | null>
+  /**
+   * Report the position on pointer down, before any movement.
+   *
+   * Enable it where the pointer position *is* the value, so that a plain click
+   * jumps to it. Leave it off where the element being dragged is an object in
+   * its own right, so that grabbing its edge does not shift it under the cursor.
+   *
+   * @default false
+   */
+  updateOnPointerDown?: boolean
+  /** CSS cursor to show while dragging. Applied to the element itself. */
+  cursor?: string
   onDrag: (normalizedX: number, normalizedY: number) => void
   onDragStart?: (normalizedX: number, normalizedY: number) => void
   onDragEnd?: (normalizedX: number, normalizedY: number) => void
 }
 
+/**
+ * Track a pointer drag, reporting the position normalized against
+ * the bounding rect of `baseElementRef`.
+ *
+ * @returns a ref callback for the element that starts the drag, and whether a drag is in progress
+ */
 export function useDragWithElement<T extends Element>({
   baseElementRef,
+  updateOnPointerDown = false,
+  cursor,
   onDrag,
   onDragStart,
   onDragEnd,
@@ -22,51 +42,59 @@ export function useDragWithElement<T extends Element>({
   const normalizedX = useRef(0)
   const normalizedY = useRef(0)
 
-  const handleDrag = useCallback(
-    (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
-      if (!baseElementRef.current || !dragging) {
-        return
-      }
-      const isTouch = event instanceof TouchEvent
-      if (isTouch && event.cancelable) event.preventDefault()
-      const { left, top, right, bottom } =
-        baseElementRef.current.getBoundingClientRect()
-      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
-      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
-      const nx = normalizeValue(mouseX, left, right)
-      const ny = normalizeValue(mouseY, top, bottom)
-      normalizedX.current = nx
-      normalizedY.current = ny
-      onDrag(nx, ny)
+  const dragHandler = useCallbackRef(onDrag)
+  const dragStartHandler = useCallbackRef(onDragStart)
+  const dragEndHandler = useCallbackRef(onDragEnd)
+
+  const update = useCallback(
+    (clientX: number, clientY: number) => {
+      const base = baseElementRef.current
+      if (!base) return false
+      const { left, top, right, bottom } = base.getBoundingClientRect()
+      normalizedX.current = normalizeValue(clientX, left, right)
+      normalizedY.current = normalizeValue(clientY, top, bottom)
+      return true
     },
-    [onDrag, baseElementRef, dragging],
+    [baseElementRef],
   )
 
-  const refHandler = useRefCallbackEvent(
-    'touchmove',
-    handleDrag,
-    { passive: false },
-    [onDrag],
-  )
+  // See useDrag for why the node is held in state.
+  const [node, setNode] = useState<Element | null>(null)
 
-  const pointerDownHandler = useCallback(
-    (event: React.PointerEvent<T>) => {
-      // dragging.current = true
-      setDragging(true)
-      handleDrag(event)
-      onDragStart?.(normalizedX.current, normalizedY.current)
-    },
-    [handleDrag, onDragStart],
-  )
+  useEffect(() => {
+    if (!node) return
 
-  useEventListener(globalThis.window, 'pointermove', handleDrag)
+    const instance = createDrag(node, {
+      cursor,
+      onDragStart: ({ clientX, clientY }) => {
+        setDragging(true)
+        const updated = update(clientX, clientY)
+        if (updated && updateOnPointerDown) {
+          dragHandler(normalizedX.current, normalizedY.current)
+        }
+        dragStartHandler(normalizedX.current, normalizedY.current)
+      },
+      onDrag: ({ clientX, clientY }) => {
+        if (update(clientX, clientY)) {
+          dragHandler(normalizedX.current, normalizedY.current)
+        }
+      },
+      onDragEnd: () => {
+        setDragging(false)
+        dragEndHandler(normalizedX.current, normalizedY.current)
+      },
+    })
 
-  useEventListener(globalThis.window, 'pointerup', () => {
-    if (!dragging) return
-    // dragging.current = false
-    setDragging(false)
-    onDragEnd?.(normalizedX.current, normalizedY.current)
-  })
+    return () => instance.destroy()
+  }, [
+    node,
+    update,
+    updateOnPointerDown,
+    cursor,
+    dragHandler,
+    dragStartHandler,
+    dragEndHandler,
+  ])
 
-  return { refHandler, pointerDownHandler, dragging }
+  return { refCallback: setNode, dragging }
 }

package/src/hooks/useMIDIAccess.ts

@@ -1,39 +1,32 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useMemo, useSyncExternalStore } from 'react'
 
-/** @private */
-export const PERMISSION_DENIED = 'PERMISSION_DENIED'
-/** @private */
-export const NOT_SUPPORTED = 'NOT_SUPPORTED'
+import { createMIDIAccess } from '@tremolo-ui/dom'
 
-/** @private */
-export type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED
+export {
+  NOT_SUPPORTED,
+  PERMISSION_DENIED,
+  type MIDIAccessError,
+} from '@tremolo-ui/dom'
 
 /**
  * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
  */
 export function useMIDIAccess(requestOnMount = true) {
-  const [midiAccess, setMidiAccess] = useState<MIDIAccess | null>(null)
-  const [error, setError] = useState<MIDIAccessError | null>(null)
+  const instance = useMemo(() => createMIDIAccess(), [])
 
-  const request = useCallback(() => {
-    if (navigator.requestMIDIAccess) {
-      navigator
-        .requestMIDIAccess()
-        .then((access) => {
-          setMidiAccess(access)
-          setError(null)
-        })
-        .catch(() => {
-          setError(PERMISSION_DENIED)
-        })
-    } else {
-      setError(NOT_SUPPORTED)
-    }
-  }, [])
+  const { midiAccess, error } = useSyncExternalStore(
+    instance.subscribe,
+    instance.getState,
+    instance.getServerState,
+  )
 
   useEffect(() => {
-    if (requestOnMount) request()
-  }, [requestOnMount, request])
+    if (requestOnMount) instance.request()
+  }, [instance, requestOnMount])
 
-  return { request, midiAccess, error }
+  useEffect(() => {
+    return () => instance.destroy()
+  }, [instance])
+
+  return { request: instance.request, midiAccess, error }
 }

package/src/hooks/useMIDIInput.ts

@@ -1,18 +1,6 @@
-import { useCallback } from 'react'
+import { useEffect } from 'react'
 
-import { useMIDIMessage } from './useMIDIMessage'
-
-const MIDI_EVENT_TO_NUMBER = {
-  NOTE_ON: 0x90,
-  NOTE_OFF: 0x80,
-  PITCH_BEND: 0xe0,
-}
-
-// const NUMBER_TO_MIDI_EVENT: Record<number, string> = {
-//   0x90: 'NOTE_ON',
-//   0x80: 'NOTE_OFF',
-//   0xe0: 'PITCH_BEND',
-// }
+import { createMIDIInput } from '@tremolo-ui/dom'
 
 /**
  * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
@@ -23,27 +11,12 @@ export function useMIDIInput(
   onNoteOffEvent?: (note: number) => void,
   onPitchBendEvent?: (msb: number, lsb: number) => void,
 ) {
-  const handleMIDIMessage = useCallback(
-    (event: MIDIMessageEvent) => {
-      if (!event.data) return
-      // event.data[0] ... command
-      // event.data[1] ... note, MSB (Most Significant Byte)
-      // event.data[2] ... velocity, LSB (Least Significant Byte)
-      const kind = event.data[0] & 0xf0
-
-      if (
-        kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||
-        (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)
-      ) {
-        onNoteOffEvent?.(event.data[1])
-      } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {
-        onNoteOnEvent?.(event.data[1], event.data[2])
-      } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {
-        onPitchBendEvent?.(event.data[1], event.data[2])
-      }
-    },
-    [onNoteOffEvent, onNoteOnEvent, onPitchBendEvent],
-  )
-
-  useMIDIMessage(midiAccess, handleMIDIMessage)
+  useEffect(() => {
+    const instance = createMIDIInput(midiAccess, {
+      onNoteOnEvent,
+      onNoteOffEvent,
+      onPitchBendEvent,
+    })
+    return () => instance.destroy()
+  }, [midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEvent])
 }

package/src/hooks/useMIDIMessage.ts

@@ -1,5 +1,7 @@
 import { useEffect } from 'react'
 
+import { createMIDIMessage } from '@tremolo-ui/dom'
+
 /**
  * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
  */
@@ -8,16 +10,7 @@ export function useMIDIMessage(
   onMIDIMessage: (event: MIDIMessageEvent) => void,
 ) {
   useEffect(() => {
-    if (!midiAccess) return
-
-    for (const input of midiAccess.inputs.values()) {
-      input.addEventListener('midimessage', onMIDIMessage)
-    }
-
-    return () => {
-      for (const input of midiAccess.inputs.values()) {
-        input.removeEventListener('midimessage', onMIDIMessage)
-      }
-    }
+    const instance = createMIDIMessage(midiAccess, onMIDIMessage)
+    return () => instance.destroy()
   }, [midiAccess, onMIDIMessage])
 }

package/src/hooks/useWheel.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+import { createWheel } from '@tremolo-ui/dom'
+
+import { useCallbackRef } from './useCallbackRef'
+
+/**
+ * Listen to wheel events on an element.
+ *
+ * The listener is not passive, so the handler may call `preventDefault()`.
+ *
+ * @returns a ref callback to attach to the element
+ */
+export function useWheel<T extends Element>(
+  onWheel: (event: WheelEvent) => void,
+): (node: T | null) => void {
+  const wheelHandler = useCallbackRef(onWheel)
+
+  // See useDrag for why the node is held in state.
+  const [node, setNode] = useState<T | null>(null)
+
+  useEffect(() => {
+    if (!node) return
+
+    const instance = createWheel(node, (event) => wheelHandler(event))
+
+    return () => instance.destroy()
+  }, [node, wheelHandler])
+
+  return setNode
+}

package/src/index.ts

@@ -16,7 +16,6 @@ export {
   type InitFunction,
   type RelativeSizingProps,
 } from './components/AnimationCanvas'
-export { DragObserver, type DragObserverProps } from './components/DragObserver'
 export { Knob, type KnobProps, type KnobMethods } from './components/Knob'
 export {
   NumberInput,
@@ -55,10 +54,6 @@ export {
   type SliderThumbProps,
   type SliderTrackProps,
 } from './components/Slider'
-export {
-  WheelObserver,
-  type WheelObserverProps,
-} from './components/WheelObserver'
 export {
   XYPad,
   type XYPadProps,
@@ -84,3 +79,4 @@ export {
 } from './hooks/useMIDIAccess'
 export { useMIDIInput } from './hooks/useMIDIInput'
 export { useMIDIMessage } from './hooks/useMIDIMessage'
+export { useWheel } from './hooks/useWheel'

package/src/components/DragObserver/index.tsx

@@ -1,58 +0,0 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
-
-import { useDrag } from '../../hooks/useDrag'
-import { Override } from '../_util/type'
-
-export interface DragObserverProps<T extends ElementType> {
-  /**
-   * React.ElementType
-   * @default div
-   */
-  as?: T
-
-  /**
-   * Threshold at which the onDrag event fires.
-   * Prevents onDrag events from firing, for example, when double-clicking.
-   */
-  threshold?: number
-
-  children?: ReactNode
-  onDrag?: (x: number, y: number, deltaX: number, deltaY: number) => void
-  onDragStart?: () => void
-  onDragEnd?: () => void
-}
-
-export function DragObserver<T extends ElementType = 'div'>(
-  props: Override<DragObserverProps<T>, ComponentPropsWithoutRef<T>>,
-) {
-  const {
-    as: Component = 'div',
-    threshold = 1,
-    onDrag,
-    onDragStart,
-    onDragEnd,
-    children,
-    onPointerDown,
-    ...attributes
-  } = props
-
-  const [refCallback, pointerDownHandler] = useDrag({
-    threshold: threshold,
-    onDrag: onDrag,
-    onDragStart: onDragStart,
-    onDragEnd: onDragEnd,
-  })
-
-  return (
-    <Component
-      ref={refCallback}
-      onPointerDown={(e) => {
-        pointerDownHandler(e)
-        onPointerDown?.(e)
-      }}
-      {...attributes}
-    >
-      {children}
-    </Component>
-  )
-}

package/src/components/WheelObserver/index.tsx

@@ -1,48 +0,0 @@
-import { ComponentProps, ElementType, ReactNode } from 'react'
-
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { composeRefs } from '../_util/composeRefs'
-import { Override } from '../_util/type'
-
-export interface WheelObserverProps<T extends ElementType> {
-  /**
-   * React.ElementType
-   * @default div
-   */
-  as?: T
-
-  children?: ReactNode
-  onWheel?: (event: WheelEvent) => void
-}
-
-/**
- * @example
- * <WheelObserver
- *   onWheel={(event) => {
- *     event.preventDefault()
- *     console.log(event.deltaY)
- *   }
- * >
- *   <div>Wheel here</div>
- * </WheelObserver>
- */
-export function WheelObserver<T extends ElementType = 'div'>(
-  props: Override<WheelObserverProps<T>, ComponentProps<T>>,
-) {
-  const { as: Component = 'div', children, onWheel, ref, ...attributes } = props
-
-  const wheelRefCallback = useRefCallbackEvent(
-    'wheel',
-    (event) => {
-      if (onWheel) onWheel(event)
-    },
-    { passive: false },
-    [onWheel],
-  )
-
-  return (
-    <Component ref={composeRefs(ref, wheelRefCallback)} {...attributes}>
-      {children}
-    </Component>
-  )
-}