@tremolo-ui/react 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [
@@ -26,11 +26,11 @@
     "@storybook/addon-a11y": "10.5.10",
     "@storybook/addon-links": "10.5.10",
     "@storybook/react-vite": "10.5.10",
-    "@testing-library/react": "16.3.2",
+    "@testing-library/react": "16.3.3",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.5",
     "jest-environment-jsdom": "29.7.0",
-    "jotai": "2.20.2",
+    "jotai": "2.20.3",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "storybook": "10.5.10",
@@ -42,8 +42,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/dom": "^0.3.0",
-    "@tremolo-ui/functions": "^0.3.0",
+    "@tremolo-ui/dom": "^0.4.0",
+    "@tremolo-ui/functions": "^0.4.0",
     "clsx": "^2.1.1",
     "zustand": "^5.0.3"
   },

package/src/components/Knob/index.tsx

@@ -17,14 +17,8 @@ import {
 } from '@tremolo-ui/functions'
 
 import { useDrag } from '../../hooks/useDrag'
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import {
-  addUserSelectNone,
-  Cursor,
-  removeUserSelectNone,
-  resetCursorStyle,
-  setCursorStyle,
-} from '../_util'
+import { useWheel } from '../../hooks/useWheel'
+import { addUserSelectNone, Cursor, removeUserSelectNone } from '../_util'
 
 import { ActiveLine } from './ActiveLine'
 import { KnobProvider } from './context'
@@ -174,35 +168,27 @@ const Root = forwardRef<KnobMethods, Props>(
     )
 
     // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] = useDrag<
-      HTMLElement | SVGElement
-    >({
+    const dragRefCallback = useDrag<HTMLElement | SVGElement>({
+      cursor: readonly ? undefined : externalStyles.cursor,
       onDrag: onDrag,
       onDragStart: () => {
         setDragging(true)
         valueRef.current = normalizeValue(value, min, max, skew)
         if (externalStyles.userSelectNone) addUserSelectNone()
-        if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
       },
       onDragEnd: () => {
         setDragging(false)
         if (externalStyles.userSelectNone) removeUserSelectNone()
-        if (externalStyles.cursor) resetCursorStyle()
       },
     })
 
-    const wheelRefCallback = useRefCallbackEvent(
-      'wheel',
-      (event) => {
-        if (!wheel || readonly) return
-        event.preventDefault()
-        if (!onChange || event.deltaY == 0) return
-        const x = Math.sign(event.deltaY) * -wheel[1]
-        onChange(updateValueByEvent(wheel[0], x))
-      },
-      { passive: false },
-      [wheel, onChange, readonly, updateValueByEvent],
-    )
+    const wheelRefCallback = useWheel<HTMLElement>((event) => {
+      if (!wheel || readonly) return
+      event.preventDefault()
+      if (!onChange || event.deltaY == 0) return
+      const x = Math.sign(event.deltaY) * -wheel[1]
+      onChange(updateValueByEvent(wheel[0], x))
+    })
 
     useImperativeHandle(forwardedRef, () => {
       return {
@@ -229,7 +215,7 @@ const Root = forwardRef<KnobMethods, Props>(
           ref={(elm) => {
             elmRef.current = elm
             wheelRefCallback(elm)
-            touchMoveRefCallback(elm)
+            dragRefCallback(elm)
           }}
           className={clsx('tremolo-knob', className)}
           tabIndex={0}
@@ -245,10 +231,7 @@ const Root = forwardRef<KnobMethods, Props>(
             height: size,
             ...style,
           }}
-          onPointerDown={(event) => {
-            pointerDownHandler(event)
-            onPointerDown?.(event)
-          }}
+          onPointerDown={onPointerDown}
           onDoubleClick={(event) => {
             if (enableDoubleClickDefault && onChange) {
               onChange(defaultValue)

package/src/components/NumberInput/InternalInput.tsx

@@ -17,7 +17,7 @@ import {
   stepValue,
 } from '@tremolo-ui/functions'
 
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { useWheel } from '../../hooks/useWheel'
 
 import { safeClamp, useNumberInputContext } from './context'
 import { parseValue } from './type'
@@ -125,20 +125,15 @@ export const InternalInput = forwardRef<
       [keyboard, readonly, onChange, updateValueByEvent],
     )
 
-    const wheelRefCallback = useRefCallbackEvent(
-      'wheel',
-      (event) => {
-        if (!wheel || readonly) return
-        event.preventDefault()
-        if (!onChange || event.deltaY == 0) return
-        const x = Math.sign(event.deltaY) * -wheel[1]
-        const parsed = parseValue(String(updateValueByEvent(wheel[0], x)))
-        // console.log('wheel control')
-        onChange?.(parsed.rawValue, parsed.formatValue)
-      },
-      { passive: false },
-      [wheel, readonly, onChange, updateValueByEvent],
-    )
+    const wheelRefCallback = useWheel<HTMLInputElement>((event) => {
+      if (!wheel || readonly) return
+      event.preventDefault()
+      if (!onChange || event.deltaY == 0) return
+      const x = Math.sign(event.deltaY) * -wheel[1]
+      const parsed = parseValue(String(updateValueByEvent(wheel[0], x)))
+      // console.log('wheel control')
+      onChange?.(parsed.rawValue, parsed.formatValue)
+    })
 
     useImperativeHandle(ref, () => {
       return {

package/src/components/PointsEditor/Point.tsx

@@ -4,12 +4,7 @@ import { ComponentPropsWithoutRef } from 'react'
 import { clamp } from '@tremolo-ui/functions'
 
 import { useDragWithElement } from '../../hooks/useDragWithElement'
-import {
-  addUserSelectNone,
-  removeUserSelectNone,
-  resetCursorStyle,
-  setCursorStyle,
-} from '../_util'
+import { addUserSelectNone, removeUserSelectNone } from '../_util'
 
 import { usePointsEditorContext } from './context'
 
@@ -76,32 +71,28 @@ export function Point<T extends PointBaseType>({
 
   // Piano: 値が更新されることで、イベントハンドラがリセットされる
 
-  const {
-    refHandler: touchMoveRefCallback,
-    pointerDownHandler,
-    dragging,
-  } = useDragWithElement<HTMLDivElement>({
-    baseElementRef: containerElementRef,
-    onDrag: (x, y) => {
-      if (readonly) return
-
-      onChange?.(clampPoint({ x, y }, min, max))
-    },
-    onDragStart: (x, y) => {
-      if (readonly) return
-      if (externalStyles.userSelectNone) addUserSelectNone()
-      if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
-
-      onDragStart?.(clampPoint({ x, y }, min, max))
-    },
-    onDragEnd: (x, y) => {
-      if (readonly) return
-      if (externalStyles.userSelectNone) removeUserSelectNone()
-      if (externalStyles.cursor) resetCursorStyle()
-
-      onDragEnd?.(clampPoint({ x, y }, min, max))
-    },
-  })
+  const { refCallback: dragRefCallback, dragging } =
+    useDragWithElement<HTMLDivElement>({
+      baseElementRef: containerElementRef,
+      cursor: readonly ? undefined : externalStyles.cursor,
+      onDrag: (x, y) => {
+        if (readonly) return
+
+        onChange?.(clampPoint({ x, y }, min, max))
+      },
+      onDragStart: (x, y) => {
+        if (readonly) return
+        if (externalStyles.userSelectNone) addUserSelectNone()
+
+        onDragStart?.(clampPoint({ x, y }, min, max))
+      },
+      onDragEnd: (x, y) => {
+        if (readonly) return
+        if (externalStyles.userSelectNone) removeUserSelectNone()
+
+        onDragEnd?.(clampPoint({ x, y }, min, max))
+      },
+    })
 
   const colors: Record<string, string | undefined> = {
     '--color': color,
@@ -109,10 +100,7 @@ export function Point<T extends PointBaseType>({
 
   return (
     <div
-      ref={(div) => {
-        // wheelRefCallback(div)
-        touchMoveRefCallback(div)
-      }}
+      ref={dragRefCallback}
       className={clsx('tremolo-points-editor-point', className)}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
@@ -127,10 +115,7 @@ export function Point<T extends PointBaseType>({
         top: `${value.y * 100}%`,
         ...style,
       }}
-      onPointerDown={(event) => {
-        pointerDownHandler(event)
-        onPointerDown?.(event)
-      }}
+      onPointerDown={onPointerDown}
       {...props}
     />
   )

package/src/components/Slider/index.tsx

@@ -22,14 +22,8 @@ import {
 } from '@tremolo-ui/functions'
 
 import { useDragWithElement } from '../../hooks/useDragWithElement'
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import {
-  addUserSelectNone,
-  Cursor,
-  removeUserSelectNone,
-  resetCursorStyle,
-  setCursorStyle,
-} from '../_util'
+import { useWheel } from '../../hooks/useWheel'
+import { addUserSelectNone, Cursor, removeUserSelectNone } from '../_util'
 
 import { SliderProvider } from './context'
 import { Scale } from './Scale'
@@ -215,14 +209,15 @@ const Root = forwardRef<SliderMethods, Props>(
     )
 
     // --- hooks ---
-    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
-      useDragWithElement<HTMLDivElement>({
+    const { refCallback: dragRefCallback } = useDragWithElement<HTMLDivElement>(
+      {
         baseElementRef: trackElementRef,
+        cursor: readonly ? undefined : externalStyles.cursor,
+        updateOnPointerDown: true,
         onDrag: onDrag,
         onDragStart: (nx, ny) => {
           if (readonly) return
           if (externalStyles.userSelectNone) addUserSelectNone()
-          if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
 
           thumbRef.current?.focus()
           onDragStart?.(
@@ -237,7 +232,6 @@ const Root = forwardRef<SliderMethods, Props>(
           if (readonly) return
 
           if (externalStyles.userSelectNone) removeUserSelectNone()
-          if (externalStyles.cursor) resetCursorStyle()
 
           onDragEnd?.(
             clamp(
@@ -247,29 +241,23 @@ const Root = forwardRef<SliderMethods, Props>(
             ),
           )
         },
-      })
-
-    const wheelRefCallback = useRefCallbackEvent(
-      'wheel',
-      (event) => {
-        if (!wheel || !onChange || readonly) return
-        event.preventDefault()
-        let x
-        if (!vertical && event.deltaX != 0) {
-          x = event.deltaX > 0 ? wheel[1] : -wheel[1]
-        } else {
-          if (event.deltaY == 0) return
-          x = event.deltaY > 0 ? -wheel[1] : wheel[1]
-        }
-        if (vertical && reverse) x *= -1
-        onChange(updateValueByEvent(wheel[0], x))
       },
-      {
-        passive: false,
-      },
-      [wheel, vertical, readonly, onChange, updateValueByEvent],
     )
 
+    const wheelRefCallback = useWheel<HTMLDivElement>((event) => {
+      if (!wheel || !onChange || readonly) return
+      event.preventDefault()
+      let x
+      if (!vertical && event.deltaX != 0) {
+        x = event.deltaX > 0 ? wheel[1] : -wheel[1]
+      } else {
+        if (event.deltaY == 0) return
+        x = event.deltaY > 0 ? -wheel[1] : wheel[1]
+      }
+      if (vertical && reverse) x *= -1
+      onChange(updateValueByEvent(wheel[0], x))
+    })
+
     useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
@@ -296,7 +284,7 @@ const Root = forwardRef<SliderMethods, Props>(
           className={clsx('tremolo-slider', className)}
           ref={(div) => {
             wheelRefCallback(div)
-            touchMoveRefCallback(div)
+            dragRefCallback(div)
           }}
           tabIndex={-1}
           role="slider"
@@ -310,10 +298,7 @@ const Root = forwardRef<SliderMethods, Props>(
             margin: `calc(${styleHelper(thumbProps?.size ?? 22)} / 2)`, // half thumb size
             ...style,
           }}
-          onPointerDown={(event) => {
-            pointerDownHandler(event)
-            onPointerDown?.(event)
-          }}
+          onPointerDown={onPointerDown}
           onKeyDown={(event) => {
             handleKeyDown(event)
             onKeyDown?.(event)

package/src/components/XYPad/index.tsx

@@ -21,14 +21,8 @@ import {
 } from '@tremolo-ui/functions'
 
 import { useDragWithElement } from '../../hooks/useDragWithElement'
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import {
-  addUserSelectNone,
-  Cursor,
-  removeUserSelectNone,
-  resetCursorStyle,
-  setCursorStyle,
-} from '../_util'
+import { useWheel } from '../../hooks/useWheel'
+import { addUserSelectNone, Cursor, removeUserSelectNone } from '../_util'
 import { composeRefs } from '../_util/composeRefs'
 
 import { Area, XYPadAreaProps } from './Area'
@@ -231,15 +225,16 @@ export const Root = forwardRef<XYPadMethods, Props>(
     )
 
     // --- hooks ---
-    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
-      useDragWithElement<HTMLDivElement>({
+    const { refCallback: dragRefCallback } = useDragWithElement<HTMLDivElement>(
+      {
         baseElementRef: areaElementRef,
+        cursor: readonly ? undefined : externalStyles.cursor,
+        updateOnPointerDown: true,
         onDrag: onDrag,
         onDragStart: (nx, ny) => {
           if (readonly) return
 
           if (externalStyles.userSelectNone) addUserSelectNone()
-          if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
 
           thumbRef.current?.focus()
 
@@ -254,15 +249,12 @@ export const Root = forwardRef<XYPadMethods, Props>(
             y.max,
           )
 
-          // TODO: ドラッグせず、pointer downだけの場合でも、onChange を発火させるべき
-          // onChange()
           onDragStart?.(valueX, valueY)
         },
         onDragEnd: (nx, ny) => {
           if (readonly) return
 
           if (externalStyles.userSelectNone) removeUserSelectNone()
-          if (externalStyles.cursor) resetCursorStyle()
 
           const valueX = clamp(
             stepValue(rawValue(nx, x.min, x.max, x.skew), x.step),
@@ -276,31 +268,25 @@ export const Root = forwardRef<XYPadMethods, Props>(
           )
           onDragEnd?.(valueX, valueY)
         },
-      })
-
-    const wheelRefCallback = useRefCallbackEvent(
-      'wheel',
-      (event) => {
-        if (!onChange || readonly) return
-        const target = event.shiftKey ? x : y
-        if (!target.wheel) return
-        event.preventDefault()
-        let delta = target.wheel[1]
-        if (event.deltaY < 0) delta *= -1
-        if (target.reverse) delta *= -1
-        const newValue = updateValueByEvent(target.wheel[0], target, delta)
-        if (event.shiftKey) {
-          onChange(newValue, y.value)
-        } else {
-          onChange(x.value, newValue)
-        }
-      },
-      {
-        passive: false,
       },
-      [x, y, onChange, readonly, updateValueByEvent],
     )
 
+    const wheelRefCallback = useWheel<HTMLDivElement>((event) => {
+      if (!onChange || readonly) return
+      const target = event.shiftKey ? x : y
+      if (!target.wheel) return
+      event.preventDefault()
+      let delta = target.wheel[1]
+      if (event.deltaY < 0) delta *= -1
+      if (target.reverse) delta *= -1
+      const newValue = updateValueByEvent(target.wheel[0], target, delta)
+      if (event.shiftKey) {
+        onChange(newValue, y.value)
+      } else {
+        onChange(x.value, newValue)
+      }
+    })
+
     useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
@@ -317,7 +303,7 @@ export const Root = forwardRef<XYPadMethods, Props>(
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         className={clsx('tremolo-xy-pad', className)}
-        ref={composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback)}
+        ref={composeRefs(rootRef, wheelRefCallback, dragRefCallback)}
         tabIndex={-1}
         aria-disabled={disabled}
         aria-readonly={readonly}
@@ -327,10 +313,7 @@ export const Root = forwardRef<XYPadMethods, Props>(
           WebkitTapHighlightColor: 'transparent',
           ...style,
         }}
-        onPointerDown={(event) => {
-          pointerDownHandler(event)
-          onPointerDown?.(event)
-        }}
+        onPointerDown={onPointerDown}
         onKeyDown={(event) => {
           handleKeyDown(event)
           onKeyDown?.(event)

package/src/hooks/useDrag.ts

@@ -1,93 +1,58 @@
-import { useRef, useCallback } from 'react'
+import { useEffect, useState } from 'react'
 
-import { useEventListener } from './useEventListener'
-import { useRefCallbackEvent } from './useRefCallbackEvent'
+import { createDrag } from '@tremolo-ui/dom'
+
+import { useCallbackRef } from './useCallbackRef'
 
 interface UseDragProps {
+  /**
+   * Threshold at which the onDrag event fires.
+   * Prevents onDrag events from firing, for example, when double-clicking.
+   */
   threshold?: number
 
+  /** CSS cursor to show while dragging. Applied to the element itself. */
+  cursor?: string
+
   onDrag?: (x: number, y: number, deltaX: number, deltaY: number) => void
   onDragStart?: () => void
   onDragEnd?: () => void
 }
 
 /**
- * @returns [refCallback, pointerDownHandler]
+ * Track a pointer drag on an element.
+ *
+ * @returns a ref callback to attach to the element being dragged
  */
 export function useDrag<T extends Element>({
-  threshold: _threshold = 1,
+  threshold = 1,
+  cursor,
   onDrag,
   onDragStart,
   onDragEnd,
-}: UseDragProps): [
-  (div: EventTarget | null) => void,
-  (event: React.PointerEvent<T>) => void,
-] {
-  const dragOffsetX = useRef<number | undefined>(undefined)
-  const dragOffsetY = useRef<number | undefined>(undefined)
-  const dragStartX = useRef(0)
-  const dragStartY = useRef(0)
-
-  const threshold = Math.max(_threshold, 1)
-
-  const handleDrag = useCallback(
-    (
-      event: MouseEvent | React.MouseEvent<T, MouseEvent> | TouchEvent,
-      first = false,
-    ) => {
-      const isTouch = event instanceof TouchEvent
-      if (isTouch && event.cancelable) event.preventDefault()
-      const screenX = isTouch ? event.touches[0].screenX : event.screenX
-      const screenY = isTouch ? event.touches[0].screenY : event.screenY
-      let deltaX = 0
-      let deltaY = 0
-      if (first) {
-        dragStartX.current = screenX
-        dragStartY.current = screenY
-      }
-      if (dragOffsetX.current) {
-        deltaX = screenX - dragOffsetX.current
-        dragOffsetX.current = screenX
-      }
-      if (dragOffsetY.current) {
-        deltaY = screenY - dragOffsetY.current
-        dragOffsetY.current = screenY
-      }
-      if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return
-      onDrag?.(
-        screenX - dragStartX.current,
-        screenY - dragStartY.current,
-        deltaX,
-        deltaY,
-      )
-    },
-    [threshold, onDrag],
-  )
-
-  const pointerDownHandler = useCallback(
-    (event: React.PointerEvent<T>) => {
-      dragOffsetX.current = event.screenX
-      dragOffsetY.current = event.screenY
-      handleDrag(event, true)
-      onDragStart?.()
-    },
-    [handleDrag, onDragStart],
-  )
-
-  const refHandler = useRefCallbackEvent(
-    'touchmove',
-    handleDrag,
-    { passive: false },
-    [onDrag],
-  )
-
-  useEventListener(globalThis.window, 'mousemove', handleDrag)
-
-  useEventListener(globalThis.window, 'pointerup', () => {
-    dragOffsetX.current = undefined
-    dragOffsetY.current = undefined
-    onDragEnd?.()
-  })
-
-  return [refHandler, pointerDownHandler]
+}: UseDragProps): (node: T | null) => void {
+  const dragHandler = useCallbackRef(onDrag)
+  const dragStartHandler = useCallbackRef(onDragStart)
+  const dragEndHandler = useCallbackRef(onDragEnd)
+
+  // The node is held in state rather than bound in the ref callback itself, so
+  // that re-attaching the ref with the same node does not restart the drag.
+  // React re-attaches on every render when the caller passes an inline ref.
+  const [node, setNode] = useState<T | null>(null)
+
+  useEffect(() => {
+    if (!node) return
+
+    const instance = createDrag(node, {
+      threshold,
+      cursor,
+      onDragStart: () => dragStartHandler(),
+      onDrag: ({ x, y, deltaX, deltaY }) => dragHandler(x, y, deltaX, deltaY),
+      onDragEnd: () => dragEndHandler(),
+    })
+
+    return () => instance.destroy()
+  }, [node, threshold, cursor, dragHandler, dragStartHandler, dragEndHandler])
+
+  return setNode
 }