@tremolo-ui/react 0.3.0 → 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/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>
-  )
-}