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

package/src/components/Slider/index.tsx

@@ -21,7 +21,7 @@ import {
   xor,
 } from '@tremolo-ui/functions'
 
-import { useEventListener } from '../../hooks/useEventListener'
+import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
@@ -117,7 +117,6 @@ export const Slider = forwardRef<SliderMethods, Props>(
     // -- state and ref ---
     const trackElementRef = useRef<HTMLDivElement>(null)
     const thumbRef = useRef<SliderThumbMethods>(null)
-    const thumbDragged = useRef(false)
 
     // --- interpret props ---
     const p = toFixed(normalizeValue(value, min, max, skew) * 100)
@@ -155,36 +154,16 @@ export const Slider = forwardRef<SliderMethods, Props>(
     }
 
     // --- internal functions ---
-    const handleValue = (
-      event: MouseEvent | React.PointerEvent<HTMLDivElement> | TouchEvent,
-    ) => {
-      if (
-        !trackElementRef.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,
-      } = trackElementRef.current.getBoundingClientRect()
-      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
-      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
-      const n = vertical
-        ? normalizeValue(mouseY, y1, y2)
-        : normalizeValue(mouseX, x1, x2)
-      const v = rawValue(displayReversed ? 1 - n : n, min, max, skew)
-      const v2 = clamp(stepValue(v, step), min, max)
-      onChange(v2)
-      return v2
-    }
+    const onDrag = useCallback(
+      (nx: number, ny: number) => {
+        if (!onChange || readonly) return
+        const n = vertical ? ny : nx
+        const v = rawValue(displayReversed ? 1 - n : n, min, max, skew)
+        const v2 = clamp(stepValue(v, step), min, max)
+        onChange(v2)
+      },
+      [displayReversed, max, min, onChange, readonly, skew, step, vertical],
+    )
 
     const updateValueByEvent = useCallback(
       (eventType: InputEventOption[0], x: number) => {
@@ -216,12 +195,34 @@ export const Slider = forwardRef<SliderMethods, Props>(
     )
 
     // --- hooks ---
-    const touchMoveRefCallback = useRefCallbackEvent(
-      'touchmove',
-      handleValue,
-      { passive: false },
-      [min, max, skew, step, vertical, reverse, onChange, readonly],
-    )
+    const [touchMoveRefCallback, pointerDownHandler] =
+      useDragWithElement<HTMLDivElement>({
+        baseElementRef: trackElementRef,
+        onDrag: onDrag,
+        onDragStart: (nx, ny) => {
+          if (readonly) return
+          if (bodyNoSelect) addNoSelect()
+          thumbRef.current?.focus()
+          onDragStart?.(
+            clamp(
+              stepValue(rawValue(vertical ? ny : nx, min, max, skew), step),
+              min,
+              max,
+            ),
+          )
+        },
+        onDragEnd: (nx, ny) => {
+          if (readonly) return
+          if (bodyNoSelect) removeNoSelect()
+          onDragEnd?.(
+            clamp(
+              stepValue(rawValue(vertical ? ny : nx, min, max, skew), step),
+              min,
+              max,
+            ),
+          )
+        },
+      })
 
     const wheelRefCallback = useRefCallbackEvent(
       'wheel',
@@ -244,17 +245,6 @@ export const Slider = forwardRef<SliderMethods, Props>(
       [wheel, vertical, readonly, onChange, updateValueByEvent],
     )
 
-    useEventListener(globalThis.window, 'mousemove', (event) => {
-      handleValue(event)
-    })
-
-    useEventListener(globalThis.window, 'mouseup', () => {
-      if (!thumbDragged.current || readonly) return
-      thumbDragged.current = false
-      onDragEnd?.(value)
-      if (bodyNoSelect) removeNoSelect()
-    })
-
     useImperativeHandle(ref, () => {
       return {
         focus() {
@@ -296,9 +286,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
             ...style,
           }}
           onPointerDown={(event) => {
-            thumbDragged.current = true
-            const v = handleValue(event)
-            if (!readonly) onDragStart?.(v ?? value)
+            pointerDownHandler(event)
             onPointerDown?.(event)
           }}
           onKeyDown={(event) => {

package/src/components/XYPad/index.tsx

@@ -19,7 +19,7 @@ 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'
 
@@ -118,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)
@@ -126,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)) {
@@ -145,36 +144,30 @@ 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)
-      return [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(
       (
@@ -223,12 +216,42 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     )
 
     // --- 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',
@@ -253,17 +276,6 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       [x, y, onChange, readonly, updateValueByEvent],
     )
 
-    useEventListener(globalThis.window, 'mousemove', (event) => {
-      handleValue(event)
-    })
-
-    useEventListener(globalThis.window, 'mouseup', () => {
-      if (!thumbDragged.current || readonly) return
-      thumbDragged.current = false
-      onDragEnd?.(x.value, y.value)
-      if (bodyNoSelect) removeNoSelect()
-    })
-
     useImperativeHandle(ref, () => {
       return {
         focus() {
@@ -293,9 +305,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
           ...style,
         }}
         onPointerDown={(event) => {
-          thumbDragged.current = true
-          const v = handleValue(event)
-          if (!readonly) onDragStart?.(v?.[0] ?? x.value, v?.[1] ?? y.value)
+          pointerDownHandler(event)
           onPointerDown?.(event)
         }}
         onKeyDown={(event) => {

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/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,gMAoHpB,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,gMAoHpB,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,gMAoHpB,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,gMAoHpB,CAAA"}

package/src/components/Piano/BlackKey.tsx

@@ -1,132 +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%',
-      bg,
-      color,
-      activeBg,
-      activeColor,
-      className,
-      style,
-      children,
-      __glissando,
-      __position,
-      __note,
-      __disabled,
-      __index,
-      __fill,
-      __width,
-      __onPlayNote,
-      __onStopNote,
-      __label,
-      onContextMenu = (e) => e.preventDefault(),
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    const [played, setPlayed] = useState(false)
-
-    const colors = {
-      '--bg': bg,
-      '--color': color,
-      '--active-bg': activeBg,
-      '--active-color': activeColor,
-    }
-
-    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={{
-          ...colors,
-          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!)
-          }
-        }}
-        onContextMenu={onContextMenu}
-        {...props}
-      >
-        <KeyLabel
-          __note={__note}
-          __label={__label}
-          __index={__index}
-          {...keyLabelProps}
-        />
-      </div>
-    )
-  },
-)