@tremolo-ui/react 0.0.11 → 0.1.0-alpha.0

package/src/components/XYPad/index.tsx

@@ -19,14 +19,17 @@ import {
   styleHelper,
 } from '@tremolo-ui/functions'
 
-import { useEventListener } from '../../hooks/useEventListener'
+import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
 import { XYPadArea, AreaProps } from './Area'
 import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
 
-/** @category XYPad */
+/**
+ * Two-dimensional slider component.
+ * @category XYPad
+ */
 export interface ValueOptions {
   // required
   value: number
@@ -56,6 +59,8 @@ export interface XYPadProps {
   disabled?: boolean
   readonly?: boolean
   onChange?: (valueX: number, valueY: number) => void
+  onDragStart?: (valueX: number, valueY: number) => void
+  onDragEnd?: (valueX: number, valueY: number) => void
   /** \<XYPadThumb /> | \<XYPadArea /> */
   children?: ReactElement | ReactElement[]
 }
@@ -92,6 +97,12 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       disabled = false,
       readonly = false,
       onChange,
+      onDragStart,
+      onDragEnd,
+      onPointerDown,
+      onKeyDown,
+      onFocus,
+      onBlur,
       children,
       ...props
     }: Props,
@@ -107,7 +118,6 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     // -- state and ref ---
     const areaElementRef = useRef<HTMLDivElement>(null)
     const thumbRef = useRef<XYPadThumbMethods>(null)
-    const thumbDragged = useRef(false)
 
     // --- interpret props ---
     const nx = normalizeValue(x.value, x.min, x.max, x.skew)
@@ -115,8 +125,8 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     const percentX = toFixed((x.reverse ? 1 - nx : nx) * 100)
     const percentY = toFixed((y.reverse ? 1 - ny : ny) * 100)
 
-    let areaProps: AreaProps = {},
-      thumbProps: ThumbProps = {}
+    let areaProps: AreaProps = {}
+    let thumbProps: ThumbProps = {}
     if (children != undefined) {
       React.Children.forEach(children, (child) => {
         if (React.isValidElement(child)) {
@@ -134,35 +144,53 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     }
 
     // --- internal functions ---
-    const handleValue = (
-      event: MouseEvent | React.PointerEvent<HTMLDivElement> | TouchEvent,
-    ) => {
-      if (
-        !areaElementRef.current ||
-        !thumbDragged.current ||
-        !onChange ||
-        readonly
-      )
-        return
-      const isTouch = event instanceof TouchEvent
-      if (isTouch && event.cancelable) event.preventDefault()
-      if (bodyNoSelect) addNoSelect()
-      const {
-        left: x1,
-        top: y1,
-        right: x2,
-        bottom: y2,
-      } = areaElementRef.current.getBoundingClientRect()
-      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
-      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
-      const nx = normalizeValue(mouseX, x1, x2)
-      const ny = normalizeValue(mouseY, y1, y2)
-      const vx = rawValue(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew)
-      const vy = rawValue(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew)
-      const newX = clamp(stepValue(vx, x.step), x.min, x.max)
-      const newY = clamp(stepValue(vy, y.step), y.min, y.max)
-      onChange(newX, newY)
-    }
+    const onDrag = useCallback(
+      (nx: number, ny: number) => {
+        if (!onChange || readonly) return
+        const vx = rawValue(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew)
+        const vy = rawValue(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew)
+        const newX = clamp(stepValue(vx, x.step), x.min, x.max)
+        const newY = clamp(stepValue(vy, y.step), y.min, y.max)
+        onChange(newX, newY)
+      },
+      [
+        onChange,
+        readonly,
+        x.max,
+        x.min,
+        x.reverse,
+        x.skew,
+        x.step,
+        y.max,
+        y.min,
+        y.reverse,
+        y.skew,
+        y.step,
+      ],
+    )
+
+    const updateValueByEvent = useCallback(
+      (
+        eventType: InputEventOption[0],
+        target: Required<ValueOptions>,
+        x: number,
+      ) => {
+        let v
+        if (eventType == 'normalized') {
+          const n = normalizeValue(
+            target.value,
+            target.min,
+            target.max,
+            target.skew,
+          )
+          v = rawValue(n + x, target.min, target.max, target.skew)
+        } else {
+          v = target.value + x
+        }
+        return clamp(stepValue(v, target.step), target.min, target.max)
+      },
+      [],
+    )
 
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -176,23 +204,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
           let delta = target.keyboard[1]
           if (key == 'ArrowLeft' || key == 'ArrowUp') delta *= -1
           if (target.reverse) delta *= -1
-          let v
-          if (target.keyboard[0] == 'normalized') {
-            const n = normalizeValue(
-              target.value,
-              target.min,
-              target.max,
-              target.skew,
-            )
-            v = rawValue(n + delta, target.min, target.max, target.skew)
-          } else {
-            v = target.value + delta
-          }
-          const newValue = clamp(
-            stepValue(v, target.step),
-            target.min,
-            target.max,
-          )
+          const newValue = updateValueByEvent(target.keyboard[0], target, delta)
           if (isHorizontal) {
             onChange(newValue, y.value)
           } else {
@@ -200,16 +212,46 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
           }
         }
       },
-      [x, y, onChange, readonly],
+      [onChange, readonly, x, y, updateValueByEvent],
     )
 
     // --- hooks ---
-    const touchMoveRefCallback = useRefCallbackEvent(
-      'touchmove',
-      handleValue,
-      { passive: false },
-      [x, onChange, readonly],
-    )
+    const [touchMoveRefCallback, pointerDownHandler] =
+      useDragWithElement<HTMLDivElement>({
+        baseElementRef: areaElementRef,
+        onDrag: onDrag,
+        onDragStart: (nx, ny) => {
+          if (readonly) return
+          if (bodyNoSelect) addNoSelect()
+          thumbRef.current?.focus()
+          const valueX = clamp(
+            stepValue(rawValue(nx, x.min, x.max, x.skew), x.step),
+            x.min,
+            x.max,
+          )
+          const valueY = clamp(
+            stepValue(rawValue(ny, y.min, y.max, y.skew), y.step),
+            y.min,
+            y.max,
+          )
+          onDragStart?.(valueX, valueY)
+        },
+        onDragEnd: (nx, ny) => {
+          if (readonly) return
+          if (bodyNoSelect) removeNoSelect()
+          const valueX = clamp(
+            stepValue(rawValue(nx, x.min, x.max, x.skew), x.step),
+            x.min,
+            x.max,
+          )
+          const valueY = clamp(
+            stepValue(rawValue(ny, y.min, y.max, y.skew), y.step),
+            y.min,
+            y.max,
+          )
+          onDragEnd?.(valueX, valueY)
+        },
+      })
 
     const wheelRefCallback = useRefCallbackEvent(
       'wheel',
@@ -221,23 +263,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
         let delta = target.wheel[1]
         if (event.deltaY < 0) delta *= -1
         if (target.reverse) delta *= -1
-        let v
-        if (target.wheel[0] == 'normalized') {
-          const n = normalizeValue(
-            target.value,
-            target.min,
-            target.max,
-            target.skew,
-          )
-          v = rawValue(n + delta, target.min, target.max, target.skew)
-        } else {
-          v = target.value + delta
-        }
-        const newValue = clamp(
-          stepValue(v, target.step),
-          target.min,
-          target.max,
-        )
+        const newValue = updateValueByEvent(target.wheel[0], target, delta)
         if (event.shiftKey) {
           onChange(newValue, y.value)
         } else {
@@ -247,18 +273,9 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       {
         passive: false,
       },
-      [x, y],
+      [x, y, onChange, readonly, updateValueByEvent],
     )
 
-    useEventListener(globalThis.window, 'mousemove', (event) => {
-      handleValue(event)
-    })
-
-    useEventListener(globalThis.window, 'mouseup', () => {
-      thumbDragged.current = false
-      if (bodyNoSelect) removeNoSelect()
-    })
-
     useImperativeHandle(ref, () => {
       return {
         focus() {
@@ -288,12 +305,21 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
           ...style,
         }}
         onPointerDown={(event) => {
-          thumbDragged.current = true
-          handleValue(event)
+          pointerDownHandler(event)
+          onPointerDown?.(event)
+        }}
+        onKeyDown={(event) => {
+          handleKeyDown(event)
+          onKeyDown?.(event)
+        }}
+        onFocus={(event) => {
+          thumbRef.current?.focus()
+          onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          thumbRef.current?.blur()
+          onBlur?.(event)
         }}
-        onKeyDown={handleKeyDown}
-        onFocus={thumbRef.current?.focus}
-        onBlur={thumbRef.current?.blur}
         {...props}
       >
         <div className="tremolo-xy-pad-area-wrapper" ref={areaElementRef}>

package/src/hooks/useDrag.ts

@@ -52,13 +52,12 @@ export function useDrag<T extends Element>({
         dragOffsetY.current = screenY
       }
       if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return
-      if (onDrag)
-        onDrag(
-          screenX - dragStartX.current,
-          screenY - dragStartY.current,
-          deltaX,
-          deltaY,
-        )
+      onDrag(
+        screenX - dragStartX.current,
+        screenY - dragStartY.current,
+        deltaX,
+        deltaY,
+      )
     },
     [threshold, onDrag],
   )

package/src/hooks/useDragWithElement.ts

@@ -0,0 +1,76 @@
+import { useRef, useCallback, RefObject } from 'react'
+
+import { normalizeValue } from '@tremolo-ui/functions'
+
+import { useEventListener } from './useEventListener'
+import { useRefCallbackEvent } from './useRefCallbackEvent'
+
+interface Props<T extends Element> {
+  baseElementRef: RefObject<T | null>
+  onDrag: (normalizedX: number, normalizedY: number) => void
+  onDragStart?: (normalizedX: number, normalizedY: number) => void
+  onDragEnd?: (normalizedX: number, normalizedY: number) => void
+}
+
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+export function useDragWithElement<T extends Element>({
+  baseElementRef,
+  onDrag,
+  onDragStart,
+  onDragEnd,
+}: Props<T>): [
+  (div: EventTarget | null) => void,
+  (event: React.PointerEvent<T>) => void,
+] {
+  const dragged = useRef(false)
+  const normalizedX = useRef(0)
+  const normalizedY = useRef(0)
+
+  const handleDrag = useCallback(
+    (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
+      if (!baseElementRef.current || !dragged.current) {
+        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)
+    },
+    [onDrag, baseElementRef],
+  )
+
+  const refHandler = useRefCallbackEvent(
+    'touchmove',
+    handleDrag,
+    { passive: false },
+    [onDrag],
+  )
+
+  const pointerDownHandler = useCallback(
+    (event: React.PointerEvent<T>) => {
+      dragged.current = true
+      handleDrag(event)
+      onDragStart?.(normalizedX.current, normalizedY.current)
+    },
+    [handleDrag, onDragStart],
+  )
+
+  useEventListener(globalThis.window, 'pointermove', handleDrag)
+
+  useEventListener(globalThis.window, 'pointerup', () => {
+    if (!dragged.current) return
+    dragged.current = false
+    onDragEnd?.(normalizedX.current, normalizedY.current)
+  })
+
+  return [refHandler, pointerDownHandler]
+}

package/src/hooks/useInterval.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback)
+
+  // Remember the latest callback if it changes.
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (delay === null) {
+      return
+    }
+
+    const id = setInterval(() => {
+      savedCallback.current()
+    }, delay)
+
+    return () => {
+      clearInterval(id)
+    }
+  }, [delay])
+}

package/src/hooks/useLongPress.ts

@@ -0,0 +1,31 @@
+import { useCallback, useState } from 'react'
+
+import { useEventListener } from './useEventListener'
+import { useInterval } from './useInterval'
+
+export function useLongPress(
+  callback: () => void,
+  initialDelay = 500,
+  interval = 40,
+) {
+  const [pressed, setPressed] = useState(false)
+  const [delay, setDelay] = useState(initialDelay)
+
+  useInterval(
+    () => {
+      callback()
+      setDelay(interval)
+    },
+    pressed ? delay : null,
+  )
+
+  useEventListener(globalThis.window, 'pointerup', () => {
+    setPressed(false)
+    setDelay(initialDelay)
+  })
+
+  return useCallback(() => {
+    callback()
+    setPressed(true)
+  }, [callback])
+}

package/src/index.ts

@@ -14,3 +14,9 @@ export * from './components/Piano'
 export * from './components/Slider'
 export * from './components/WheelObserver'
 export * from './components/XYPad'
+
+export * from './hooks/useAnimationFrame'
+export * from './hooks/useDrag'
+export * from './hooks/useEventListener'
+export * from './hooks/useInterval'
+export * from './hooks/useLongPress'

package/src/styles/index.css

@@ -1,6 +1,5 @@
 :root {
   --tremolo-theme-color: #4e76e6;
-  --tremolo-theme-color-rgb: 78, 118, 230;
 }
 
 .tremolo-no-select {

package/dist/cjs/types/components/Piano/BlackKey.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { KeyMethods, KeyProps } from './key';
-/** @category Piano */
-export declare const BlackKey: React.ForwardRefExoticComponent<KeyProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React.RefAttributes<KeyMethods>>;
-//# sourceMappingURL=BlackKey.d.ts.map

package/dist/cjs/types/components/Piano/BlackKey.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlackKey.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/BlackKey.tsx"],"names":[],"mappings":"AACA,OAAO,KAKN,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAM5C,sBAAsB;AACtB,eAAO,MAAM,QAAQ,gMAsGpB,CAAA"}

package/dist/cjs/types/components/Piano/WhiteKey.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { KeyMethods, KeyProps } from './key';
-/** @category Piano */
-export declare const defaultWhiteKeyWidth = 40;
-/** @category Piano */
-export declare const WhiteKey: React.ForwardRefExoticComponent<KeyProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React.RefAttributes<KeyMethods>>;
-//# sourceMappingURL=WhiteKey.d.ts.map

package/dist/cjs/types/components/Piano/WhiteKey.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WhiteKey.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/WhiteKey.tsx"],"names":[],"mappings":"AACA,OAAO,KAKN,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAK5C,sBAAsB;AACtB,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAEtC,sBAAsB;AACtB,eAAO,MAAM,QAAQ,gMAsGpB,CAAA"}

package/dist/esm/types/components/Piano/BlackKey.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { KeyMethods, KeyProps } from './key';
-/** @category Piano */
-export declare const BlackKey: React.ForwardRefExoticComponent<KeyProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React.RefAttributes<KeyMethods>>;
-//# sourceMappingURL=BlackKey.d.ts.map

package/dist/esm/types/components/Piano/BlackKey.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlackKey.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/BlackKey.tsx"],"names":[],"mappings":"AACA,OAAO,KAKN,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAM5C,sBAAsB;AACtB,eAAO,MAAM,QAAQ,gMAsGpB,CAAA"}

package/dist/esm/types/components/Piano/WhiteKey.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { KeyMethods, KeyProps } from './key';
-/** @category Piano */
-export declare const defaultWhiteKeyWidth = 40;
-/** @category Piano */
-export declare const WhiteKey: React.ForwardRefExoticComponent<KeyProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React.RefAttributes<KeyMethods>>;
-//# sourceMappingURL=WhiteKey.d.ts.map

package/dist/esm/types/components/Piano/WhiteKey.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WhiteKey.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/WhiteKey.tsx"],"names":[],"mappings":"AACA,OAAO,KAKN,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAK5C,sBAAsB;AACtB,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAEtC,sBAAsB;AACtB,eAAO,MAAM,QAAQ,gMAsGpB,CAAA"}

package/src/components/Piano/BlackKey.tsx

@@ -1,118 +0,0 @@
-import clsx from 'clsx'
-import React, {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-} from 'react'
-
-import { KeyMethods, KeyProps } from './key'
-import { KeyLabel, KeyLabelProps } from './KeyLabel'
-import { defaultWhiteKeyWidth } from './WhiteKey'
-
-type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
-
-/** @category Piano */
-export const BlackKey = forwardRef<KeyMethods, Props>(
-  (
-    {
-      width = defaultWhiteKeyWidth * 0.65,
-      height = '60%',
-      className,
-      style,
-      children,
-      __glissando,
-      __position,
-      __note,
-      __disabled,
-      __index,
-      __fill,
-      __width,
-      __onPlayNote,
-      __onStopNote,
-      __label,
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    const [played, setPlayed] = useState(false)
-
-    useImperativeHandle(ref, () => {
-      return {
-        play() {
-          if (__disabled) return
-          setPlayed(true)
-          if (__onPlayNote) __onPlayNote(__note!)
-        },
-        stop() {
-          setPlayed(false)
-          if (__onStopNote) __onStopNote(__note!)
-        },
-        played() {
-          return played
-        },
-      }
-    }, [__disabled, __note, __onPlayNote, __onStopNote, played])
-
-    let keyLabelProps: KeyLabelProps = {}
-    if (children != undefined) {
-      React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child)) {
-          if (child.type == KeyLabel) {
-            keyLabelProps = child.props as KeyLabelProps
-          } else {
-            throw new Error('only <KeyLabel>')
-          }
-        } else {
-          throw new Error('children is an invalid element.')
-        }
-      })
-    }
-
-    return (
-      <div
-        className={clsx(`tremolo-piano-black-key`, className)}
-        aria-disabled={__disabled}
-        data-active={played}
-        style={{
-          left: __position,
-          width: __fill ? __width : (width ?? __width),
-          height: height,
-          ...style,
-        }}
-        onPointerDown={() => {
-          if (__disabled) return
-          setPlayed(true)
-          if (__onPlayNote) __onPlayNote(__note!)
-        }}
-        onPointerEnter={() => {
-          if (__disabled) return
-          if (__glissando) {
-            setPlayed(true)
-            if (__onPlayNote) __onPlayNote(__note!)
-          }
-        }}
-        onPointerUp={() => {
-          if (__disabled) return
-          setPlayed(false)
-          if (__onStopNote) __onStopNote(__note!)
-        }}
-        onPointerLeave={() => {
-          if (__disabled) return
-          if (__glissando) {
-            setPlayed(false)
-            if (__onStopNote) __onStopNote(__note!)
-          }
-        }}
-        {...props}
-      >
-        <KeyLabel
-          __note={__note}
-          __label={__label}
-          __index={__index}
-          {...keyLabelProps}
-        />
-      </div>
-    )
-  },
-)