@tremolo-ui/react 0.2.0 → 0.2.1

package/src/components/Knob/index.tsx

@@ -5,22 +5,38 @@ import {
   useCallback,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react'
 
 import {
   clamp,
   InputEventOption,
   normalizeValue,
-  radian,
   rawValue,
   stepValue,
 } from '@tremolo-ui/functions'
 
 import { useDrag } from '../../hooks/useDrag'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { addNoSelect, removeNoSelect } from '../_util'
+import {
+  addUserSelectNone,
+  Cursor,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} from '../_util'
+
+import { ActiveLine } from './ActiveLine'
+import { KnobProvider } from './context'
+import { InactiveLine } from './InactiveLine'
+import { SVGRoot } from './SVGRoot'
+import { Thumb } from './Thumb'
+
+const defaultExternalStyles: KnobProps['externalStyles'] = {
+  userSelectNone: true,
+  cursor: 'grabbing',
+}
 
-/** @category Knob */
 export interface KnobProps {
   // required
   value: number
@@ -29,9 +45,10 @@ export interface KnobProps {
 
   // optional
   step?: number
-  skew?: number // | SkewFunction
+  skew?: number // | SkewFunction // TODO
   /**
    * value set when double-clicking
+   * restriction: enableDoubleClickDefault = true
    * @default min
    * @see enableDoubleClickDefault
    */
@@ -46,14 +63,22 @@ export interface KnobProps {
   /** width and height */
   size?: number | string
 
-  /** Whether to apply `{use-select: none}` when dragging */
-  bodyNoSelect?: boolean
+  /**
+   * Global style to apply when dragged
+   * @default defaultExternalStyles
+   */
+  externalStyles?: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   keyboard?: InputEventOption | null
   enableDoubleClickDefault?: boolean
@@ -61,51 +86,20 @@ export interface KnobProps {
   disabled?: boolean
   readonly?: boolean
 
-  /** color */
-  activeLine?: string
-  /** color */
-  inactiveLine?: string
-  /** color */
-  thumb?: string
-  /** color */
-  thumbLine?: string
-  /** percent (0-100) */
-  thumbSize?: number
-  /** percent (0-100) */
-  thumbLineWeight?: number
-  /** percent (0-100) */
-  thumbLineLength?: number
-  /** line weight [px] */
-  lineWeight?: number
   /** angle range [degree] */
   angleRange?: number
 
-  classes?: {
-    activeLine?: string
-    inactiveLine?: string
-    thumb?: string
-    thumbLine?: string
-  }
-
   onChange?: (value: number) => void
 }
 
-/**
- * @category Knob
- */
 export interface KnobMethods {
   focus: () => void
   blur: () => void
 }
 
-type Props = KnobProps & Omit<ComponentPropsWithoutRef<'svg'>, keyof KnobProps>
+type Props = KnobProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KnobProps>
 
-/**
- * Interactive rotary knob component implemented in SVG.
- *
- * @category Knob
- */
-export const Knob = forwardRef<KnobMethods, Props>(
+const Root = forwardRef<KnobMethods, Props>(
   (
     {
       value,
@@ -115,34 +109,30 @@ export const Knob = forwardRef<KnobMethods, Props>(
       skew = 1,
       defaultValue = min,
       startValue = min,
-      size = 50,
-      bodyNoSelect = true,
+      size,
+      externalStyles: _externalStyles,
       wheel = ['raw', 1],
       keyboard = ['raw', 1],
       enableDoubleClickDefault = true,
       disabled = false,
       readonly = false,
-      activeLine,
-      inactiveLine,
-      thumb,
-      thumbLine,
-      thumbSize = 84,
-      thumbLineWeight = 6,
-      thumbLineLength = 35,
-      lineWeight = 6,
       angleRange = 270,
       onChange,
       onKeyDown,
       onPointerDown,
       onDoubleClick,
       className,
-      classes,
+      style,
+      children,
       ...props
     }: Props,
     forwardedRef,
   ) => {
+    const [dragging, setDragging] = useState(false)
     const valueRef = useRef(0)
-    const elmRef = useRef<HTMLOrSVGElement>(null)
+    const elmRef = useRef<HTMLElement | SVGElement>(null)
+
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
 
     // --- internal functions ---
     const onDrag = useCallback(
@@ -184,14 +174,20 @@ export const Knob = forwardRef<KnobMethods, Props>(
     )
 
     // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] = useDrag<SVGElement>({
+    const [touchMoveRefCallback, pointerDownHandler] = useDrag<
+      HTMLElement | SVGElement
+    >({
       onDrag: onDrag,
       onDragStart: () => {
+        setDragging(true)
         valueRef.current = normalizeValue(value, min, max, skew)
-        if (bodyNoSelect) addNoSelect()
+        if (externalStyles.userSelectNone) addUserSelectNone()
+        if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
       },
       onDragEnd: () => {
-        if (bodyNoSelect) removeNoSelect()
+        setDragging(false)
+        if (externalStyles.userSelectNone) removeUserSelectNone()
+        if (externalStyles.cursor) resetCursorStyle()
       },
     })
 
@@ -219,118 +215,68 @@ export const Knob = forwardRef<KnobMethods, Props>(
       }
     }, [])
 
-    const viewBoxSize = 100
-    const center = viewBoxSize / 2
-    const padding = (viewBoxSize - clamp(thumbSize, 0, 100)) / 2 // %
-    const p = normalizeValue(value, min, max, skew)
-    const s = normalizeValue(startValue, min, max, skew)
-
-    // 時計回りで描画していく
-    const r1 = -angleRange / 2 // ロータリー開始位置
-    const r2 = r1 + Math.min(p, s) * angleRange // activeLineの開始位置
-    const r3 = r1 + Math.max(p, s) * angleRange // activeLineの終了位置
-    const r4 = angleRange / 2 // ロータリー終了位置
-    const x1 = center + center * Math.cos(radian(r1 - 90))
-    const y1 = center + center * Math.sin(radian(r1 - 90))
-    const x2 = center + center * Math.cos(radian(r2 - 90))
-    const y2 = center + center * Math.sin(radian(r2 - 90))
-    const x3 = center + center * Math.cos(radian(r3 - 90))
-    const y3 = center + center * Math.sin(radian(r3 - 90))
-    const x4 = center + center * Math.cos(radian(r4 - 90))
-    const y4 = center + center * Math.sin(radian(r4 - 90))
-
     return (
-      <svg
-        ref={(div) => {
-          elmRef.current = div
-          wheelRefCallback(div)
-          touchMoveRefCallback(div)
-        }}
-        className={clsx('tremolo-knob', className)}
-        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-        width={size}
-        height={size}
-        tabIndex={0}
-        role="slider"
-        aria-valuenow={value}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-disabled={disabled}
-        aria-readonly={readonly}
-        onPointerDown={(event) => {
-          pointerDownHandler(event)
-          onPointerDown?.(event)
-        }}
-        onDoubleClick={(event) => {
-          if (enableDoubleClickDefault && onChange) {
-            onChange(defaultValue)
-          }
-          onDoubleClick?.(event)
-        }}
-        onKeyDown={(event) => {
-          handleKeyDown(event)
-          onKeyDown?.(event)
-        }}
-        {...props}
+      <KnobProvider
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        skew={skew}
+        startValue={startValue}
+        angleRange={angleRange}
       >
-        {/* lines */}
-        {startValue > min && (
-          <path
-            className={clsx(
-              'tremolo-knob-inactive-line',
-              classes?.inactiveLine,
-            )}
-            d={`M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`}
-            fill="none"
-            stroke={inactiveLine || 'currentColor'}
-            strokeWidth={lineWeight}
-          />
-        )}
-        {startValue < max && (
-          <path
-            className={clsx(
-              'tremolo-knob-inactive-line',
-              classes?.inactiveLine,
-            )}
-            d={`M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`}
-            fill="none"
-            stroke={inactiveLine || 'currentColor'}
-            strokeWidth={lineWeight}
-          />
-        )}
-        <path
-          className={clsx('tremolo-knob-active-line', classes?.activeLine)}
-          d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`}
-          fill="none"
-          stroke={activeLine || 'currentColor'}
-          strokeWidth={lineWeight}
-        />
-        {/* thumb */}
-        <svg className={clsx('tremolo-knob-thumb', classes?.thumb)}>
-          <circle
-            cx="50%"
-            cy="50%"
-            r={`${thumbSize / 2}%`}
-            fill={thumb || 'currentColor'}
-          />
-          <line
-            className={clsx('tremolo-knob-thumb-line', classes?.thumbLine)}
-            x1="50%"
-            y1={`${padding}%`}
-            x2="50%"
-            y2={`${thumbLineLength}%`}
-            stroke={thumbLine || 'currentColor'}
-            strokeWidth={`${thumbLineWeight}%`}
-            // NOTE
-            // https://bugs.webkit.org/show_bug.cgi?id=201854
-            // https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform-origin#browser_compatibility
-            style={{
-              transform: `rotate(${r1 + p * angleRange}deg)`,
-              transformOrigin: '50% 50%',
-            }}
-          />
-        </svg>
-      </svg>
+        <div
+          ref={(elm) => {
+            elmRef.current = elm
+            wheelRefCallback(elm)
+            touchMoveRefCallback(elm)
+          }}
+          className={clsx('tremolo-knob', className)}
+          tabIndex={0}
+          role="slider"
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-disabled={disabled}
+          aria-readonly={readonly}
+          data-dragging={dragging}
+          style={{
+            width: size,
+            height: size,
+            ...style,
+          }}
+          onPointerDown={(event) => {
+            pointerDownHandler(event)
+            onPointerDown?.(event)
+          }}
+          onDoubleClick={(event) => {
+            if (enableDoubleClickDefault && onChange) {
+              onChange(defaultValue)
+            }
+            onDoubleClick?.(event)
+          }}
+          onKeyDown={(event) => {
+            handleKeyDown(event)
+            onKeyDown?.(event)
+          }}
+          {...props}
+        >
+          {children || <SVGRoot />}
+        </div>
+      </KnobProvider>
     )
   },
 )
+
+/**
+ * Interactive rotary knob component implemented in SVG.
+ */
+export const Knob = {
+  Root,
+  SVGRoot,
+  InactiveLine,
+  ActiveLine,
+  Thumb,
+}
+
+export { useKnobContext } from './context'

package/src/components/NumberInput/DecrementStepper.tsx

@@ -5,13 +5,11 @@ import { useLongPress } from '../../hooks/useLongPress'
 
 import { useNumberInputContext } from './context'
 
-/** @category NumberInput */
 export interface DecrementStepperProps {
   size?: number
   children?: ReactNode
 }
 
-/** @category NumberInput */
 export function DecrementStepper({
   size = 12,
   children,

package/src/components/NumberInput/IncrementStepper.tsx

@@ -5,13 +5,11 @@ import { useLongPress } from '../../hooks/useLongPress'
 
 import { useNumberInputContext } from './context'
 
-/** @category NumberInput */
 export interface IncrementStepperProps {
   size?: number
   children?: ReactNode
 }
 
-/** @category NumberInput */
 export function IncrementStepper({
   size = 12,
   children,

package/src/components/NumberInput/InternalInput.tsx

@@ -96,7 +96,9 @@ export const InternalInput = forwardRef<
         let newValue
         if (eventType == 'normalized') {
           if (!min || !max) {
-            throw new Error('required parameter: min, max') // TODO
+            throw new Error(
+              '[NumberInput] "min" and "max" are required when InputEventOption[0] is set to "normalized".',
+            )
           }
           const n = normalizeValue(valueAsNumber, min, max)
           newValue = rawValue(n + x, min, max)

package/src/components/NumberInput/Stepper.tsx

@@ -1,14 +1,12 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
 
-/** @category NumberInput */
 export interface StepperProps {
   /** Display only when hovering. */
   dynamic?: boolean
   children?: ReactNode
 }
 
-/** @category NumberInput */
 export function Stepper({
   dynamic = true,
   children,

package/src/components/NumberInput/context.tsx

@@ -153,7 +153,6 @@ export function NumberInputProvider({
   )
 }
 
-/** @category NumberInput */
 export function useNumberInputContext<T>(
   selector: (state: State & Action) => T,
 ): T {

package/src/components/NumberInput/index.tsx

@@ -16,7 +16,6 @@ TODO
 - skew
 */
 
-/** @category NumberInput */
 export interface NumberInputProps {
   value: number | string
 
@@ -60,10 +59,12 @@ export interface NumberInputProps {
 
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   keyboard?: InputEventOption | null
 
@@ -86,9 +87,6 @@ export interface NumberInputProps {
   children?: ReactNode
 }
 
-/**
- * @category NumberInput
- */
 export interface NumberInputMethods {
   focus: () => void
   blur: () => void
@@ -97,7 +95,7 @@ export interface NumberInputMethods {
 type Props = NumberInputProps &
   Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>
 
-const NumberInputImpl = forwardRef<NumberInputMethods, Props>(
+const Root = forwardRef<NumberInputMethods, Props>(
   (
     {
       value,
@@ -175,13 +173,13 @@ const NumberInputImpl = forwardRef<NumberInputMethods, Props>(
 
 /**
  * Input with some useful functions for entering numerical values.
- * @category NumberInput
  */
-export const NumberInput = Object.assign(NumberInputImpl, {
+export const NumberInput = {
+  Root,
   Stepper,
   IncrementStepper,
   DecrementStepper,
-})
+}
 
 export { type StepperProps } from './Stepper'
 export { type IncrementStepperProps } from './IncrementStepper'

package/src/components/Piano/KeyLabel.tsx

@@ -5,7 +5,6 @@ import { usePianoContext } from './context'
 
 import { getNoteRangeArray } from '.'
 
-/** @category Piano */
 export interface KeyLabelProps {
   /**
    * override Piano.label
@@ -21,7 +20,6 @@ export interface KeyLabelProps {
   __label?: (note: number, index: number) => ReactNode
 }
 
-/** @category Piano */
 export function KeyLabel({
   label,
   className,

package/src/components/Piano/context.tsx

@@ -1,7 +1,6 @@
 import { createContext, ReactNode, useContext, useEffect, useRef } from 'react'
 import { createStore, useStore } from 'zustand'
 
-/** @category Piano */
 export type NoteRange = {
   first: number
   last: number
@@ -67,7 +66,6 @@ export function PianoProvider({ children, ...props }: PianoProviderProps) {
   )
 }
 
-/** @category Piano */
 export function usePianoContext<T>(selector: (state: State & Action) => T): T {
   const store = useContext(PianoContext)
   if (!store) throw new Error('Missing PianoContext.Provider in the tree')

package/src/components/Piano/index.tsx

@@ -23,8 +23,8 @@ import {
   noteKeys,
 } from '@tremolo-ui/functions'
 
-import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useEventListener } from '../../hooks/useEventListener'
+import { usePianoDrag } from '../../hooks/usePianoDrag'
 
 import { NoteRange, PianoProvider } from './context'
 import {
@@ -39,7 +39,6 @@ import { KeyLabel } from './KeyLabel'
 
 /**
  * [noteRange.first, noteRange.first + 1 ..., noteRange.last]
- * @category Piano
  */
 export function getNoteRangeArray(noteRange: NoteRange) {
   return Array.from(
@@ -48,7 +47,6 @@ export function getNoteRangeArray(noteRange: NoteRange) {
   )
 }
 
-/** @category Piano */
 export interface PianoProps {
   noteRange: NoteRange
 
@@ -74,9 +72,6 @@ export interface PianoProps {
 
 const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth // 0.65
 
-/**
- * @category Piano
- */
 export interface PianoMethods {
   playNote: (note: number, velocity?: number) => void
   stopNote: (note: number) => void
@@ -85,7 +80,7 @@ export interface PianoMethods {
 type Props = PianoProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>
 
-const PianoImpl = forwardRef<PianoMethods, Props>(
+const Root = forwardRef<PianoMethods, Props>(
   (
     {
       noteRange,
@@ -240,10 +235,12 @@ const PianoImpl = forwardRef<PianoMethods, Props>(
       }
     }, [fill, _whiteNoteWidth, whiteNoteCount])
 
-    const [touchMoveRefCallback, pointerDownHandler] =
-      useDragWithElement<HTMLDivElement>({
+    // FIXME
+    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
+      usePianoDrag<HTMLDivElement>({
         baseElementRef: pianoRef,
         onDrag: onDrag,
+        // onDragStart: onDrag,
         onDragEnd: onDragEnd,
       })
 
@@ -344,9 +341,8 @@ const PianoImpl = forwardRef<PianoMethods, Props>(
 
 /**
  * Customizable piano component.
- * @category Piano
  */
-export const Piano = Object.assign(PianoImpl, { WhiteKey, BlackKey, KeyLabel })
+export const Piano = { Root, WhiteKey, BlackKey, KeyLabel }
 
 export { type KeyboardShortcuts, SHORTCUTS } from './keyboardShortcuts'
 export { type KeyProps, type KeyMethods } from './key'

package/src/components/Piano/key.tsx

@@ -11,9 +11,6 @@ import React, {
 import { usePianoContext } from './context'
 import { KeyLabel, KeyLabelProps } from './KeyLabel'
 
-/**
- * @category Piano
- */
 export interface KeyProps {
   noteNumber: number
 
@@ -36,9 +33,6 @@ export interface KeyProps {
   __width?: number
 }
 
-/**
- * @category Piano
- */
 export interface KeyMethods {
   play: (velocity?: number) => void
   stop: () => void
@@ -48,9 +42,7 @@ export interface KeyMethods {
 type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 type ImplProps = Props & { keyType: 'black' | 'white' }
 
-/** @category Piano */
 export const defaultWhiteKeyWidth = 40
-/** @category Piano */
 export const defaultBlackKeyWidth = 26
 
 const KeyImpl = forwardRef<KeyMethods, ImplProps>(
@@ -166,7 +158,6 @@ const KeyImpl = forwardRef<KeyMethods, ImplProps>(
   },
 )
 
-/** @category Piano */
 export const WhiteKey = forwardRef<KeyMethods, Props>(
   (
     {
@@ -190,7 +181,6 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
   },
 )
 
-/** @category Piano */
 export const BlackKey = forwardRef<KeyMethods, Props>(
   (
     {

package/src/components/Piano/keyboardShortcuts.ts

@@ -1,4 +1,3 @@
-/** @category Piano */
 export type KeyboardShortcuts = {
   keys: string[]
   // TODO
@@ -7,7 +6,6 @@ export type KeyboardShortcuts = {
   }
 }
 
-/** @category Piano */
 export const SHORTCUTS = {
   HOME_ROW: {
     keys: [

package/src/components/PointsEditor/Background.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef } from 'react'
+
+export function Background({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      className={clsx('tremolo-points-editor-background', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}