@tremolo-ui/react 0.3.0 → 0.5.0

package/src/components/PointsEditor/Background.tsx

@@ -1,11 +1,17 @@
 import clsx from 'clsx'
-import { ComponentPropsWithoutRef } from 'react'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+export interface PointsEditorBackgroundProps {
+  /** Whatever the points are placed over: a graph, a canvas, an image. */
+  children?: ReactNode
+}
 
 export function Background({
   className,
   children,
   ...props
-}: ComponentPropsWithoutRef<'div'>) {
+}: PointsEditorBackgroundProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorBackgroundProps>) {
   return (
     <div
       className={clsx('tremolo-points-editor-background', className)}

package/src/components/PointsEditor/Container.tsx

@@ -1,22 +1,32 @@
 import clsx from 'clsx'
-import { ComponentPropsWithoutRef, useRef } from 'react'
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'
+
+import { useComposedRefs } from '../_util/composeRefs'
 
 import { usePointsEditorContext } from './context'
 
+export interface PointsEditorContainerProps {
+  /** `<PointsEditor.Point />` goes here. */
+  children?: ReactNode
+  ref?: Ref<HTMLDivElement>
+}
+
 export function Container({
-  className,
   children,
+  className,
+  ref,
   ...props
-}: ComponentPropsWithoutRef<'div'>) {
-  const containerElementRef = useRef<HTMLDivElement>(null)
-  const setContainerElementRef = usePointsEditorContext(
-    (s) => s.setContainerElementRef,
-  )
-  setContainerElementRef(containerElementRef)
+}: PointsEditorContainerProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorContainerProps>) {
+  const containerRef = usePointsEditorContext((s) => s.containerRef)
+
+  // The container is what the pointer position is normalized against, so the
+  // context ref is composed with any ref the caller passed.
+  const composedRef = useComposedRefs<HTMLDivElement>(ref, containerRef)
 
   return (
     <div
-      ref={containerElementRef}
+      ref={composedRef}
       className={clsx('tremolo-points-editor-container', className)}
       {...props}
     >

package/src/components/PointsEditor/Point.tsx

@@ -1,15 +1,12 @@
 import clsx from 'clsx'
-import { ComponentPropsWithoutRef } from 'react'
+import { ComponentPropsWithoutRef, useCallback, useState } from 'react'
 
-import { clamp } from '@tremolo-ui/functions'
+import { applyDelta, clamp, InputEventOption } from '@tremolo-ui/functions'
 
-import { useDragWithElement } from '../../hooks/useDragWithElement'
-import {
-  addUserSelectNone,
-  removeUserSelectNone,
-  resetCursorStyle,
-  setCursorStyle,
-} from '../_util'
+import { useDragValue } from '../../hooks/useDragValue'
+import { useWheel } from '../../hooks/useWheel'
+import { addUserSelectNone, removeUserSelectNone } from '../_util'
+import { useComposedRefs } from '../_util/composeRefs'
 
 import { usePointsEditorContext } from './context'
 
@@ -36,14 +33,27 @@ export interface PointProps<T extends PointBaseType> {
   height?: number | string
   color?: string
 
+  /** Overrides the `disabled` of `PointsEditor.Root`. */
   disabled?: boolean
+  /** Overrides the `readonly` of `PointsEditor.Root`. */
   readonly?: boolean
 
+  /** Overrides the `wheel` of `PointsEditor.Root`. */
+  wheel?: InputEventOption | null
+  /** Overrides the `keyboard` of `PointsEditor.Root`. */
+  keyboard?: InputEventOption | null
+
   onChange?: (value: PointBaseType) => void
   onDragStart?: (value: PointBaseType) => void
   onDragEnd?: (value: PointBaseType) => void
 }
 
+/**
+ * A point is placed by its position within the container, so its value is a
+ * position: 0..1 on each axis, with y growing downwards.
+ */
+const AXIS = { min: 0, max: 1 }
+
 export function Point<T extends PointBaseType>({
   value,
   min,
@@ -53,8 +63,10 @@ export function Point<T extends PointBaseType>({
   height = 16,
   color,
 
-  disabled,
-  readonly,
+  disabled: _disabled,
+  readonly: _readonly,
+  wheel: _wheel,
+  keyboard: _keyboard,
 
   onChange,
   onDragStart,
@@ -63,61 +75,113 @@ export function Point<T extends PointBaseType>({
   className,
   style,
   onPointerDown,
+  onKeyDown,
   ...props
 }: PointProps<T> & Omit<ComponentPropsWithoutRef<'div'>, keyof PointProps<T>>) {
-  const containerElementRef = usePointsEditorContext(
-    (s) => s.containerElementRef,
-  )
-  const externalStyles = usePointsEditorContext((s) => s.externalStyles)
-  const __disabled = usePointsEditorContext((s) => s.disabled)
-  const __readonly = usePointsEditorContext((s) => s.readonly)
-
-  // console.log(value.x, value.y)
-
-  // Piano: 値が更新されることで、イベントハンドラがリセットされる
-
   const {
-    refHandler: touchMoveRefCallback,
-    pointerDownHandler,
-    dragging,
-  } = useDragWithElement<HTMLDivElement>({
-    baseElementRef: containerElementRef,
-    onDrag: (x, y) => {
-      if (readonly) return
-
-      onChange?.(clampPoint({ x, y }, min, max))
+    containerRef,
+    externalStyles,
+    disabled: rootDisabled,
+    readonly: rootReadonly,
+    wheel: rootWheel,
+    keyboard: rootKeyboard,
+  } = usePointsEditorContext()
+
+  const disabled = _disabled ?? rootDisabled
+  const readonly = _readonly ?? rootReadonly
+  // `null` means "no event" and has to survive the fallback, so `??` is not
+  // enough: only an omitted prop inherits from the root.
+  const wheel = _wheel === undefined ? rootWheel : _wheel
+  const keyboard = _keyboard === undefined ? rootKeyboard : _keyboard
+
+  // Compared against the focus below, so the point needs its own element.
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+
+  // The value is the position itself: no scaling, and no rounding to a step.
+  const { refCallback: dragRefCallback, dragging } =
+    useDragValue<HTMLDivElement>({
+      axis: AXIS,
+      baseElementRef: containerRef,
+      cursor: readonly ? undefined : externalStyles.cursor,
+      onChange: ([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 nudge = useCallback(
+    (axis: 'x' | 'y', direction: number, option: InputEventOption) => {
+      const next = applyDelta(value[axis], direction, option, AXIS)
+      onChange?.(clampPoint({ ...value, [axis]: next }, min, max))
     },
-    onDragStart: (x, y) => {
-      if (readonly) return
-      if (externalStyles.userSelectNone) addUserSelectNone()
-      if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
+    [value, min, max, onChange],
+  )
 
-      onDragStart?.(clampPoint({ x, y }, min, max))
+  // The listener sits on the container rather than on the point: a wheel event
+  // only reaches what the cursor is over, and a point is a 16px target. Every
+  // point sees the event and the focused one acts, so the wheel works anywhere
+  // over the editor, the way it does for Slider and XYPad.
+  //
+  // The focus test is an identity check, not `contains`: with `contains` every
+  // point would match the container's focus and they would all move at once.
+  useWheel(
+    (event) => {
+      if (!onChange || readonly || !wheel) return
+      if (!element || element.ownerDocument.activeElement !== element) return
+      event.preventDefault()
+      // Scrolling up moves the point towards y = 0; shift switches to x.
+      const axis = event.shiftKey ? 'x' : 'y'
+      const direction = event.deltaY < 0 ? -1 : 1
+      nudge(axis, direction, wheel)
     },
-    onDragEnd: (x, y) => {
-      if (readonly) return
-      if (externalStyles.userSelectNone) removeUserSelectNone()
-      if (externalStyles.cursor) resetCursorStyle()
+    { target: containerRef },
+  )
 
-      onDragEnd?.(clampPoint({ x, y }, min, max))
-    },
-  })
+  const refCallback = useComposedRefs<HTMLDivElement>(
+    dragRefCallback,
+    setElement,
+  )
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!onChange || readonly || !keyboard) return
+    const key = event.key
+    if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
+      event.preventDefault()
+      // y grows downwards, so ArrowUp moves the point towards 0.
+      const axis = key === 'ArrowRight' || key === 'ArrowLeft' ? 'x' : 'y'
+      const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? -1 : 1
+      nudge(axis, direction, keyboard)
+    }
+  }
 
   const colors: Record<string, string | undefined> = {
     '--color': color,
   }
 
   return (
+    // The point is a drag handle rather than a control of a known kind: it has
+    // no single value to announce, so there is no role that fits it.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
-      ref={(div) => {
-        // wheelRefCallback(div)
-        touchMoveRefCallback(div)
-      }}
+      ref={refCallback}
       className={clsx('tremolo-points-editor-point', className)}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
-      aria-disabled={disabled != undefined ? disabled : __disabled}
-      aria-readonly={readonly != undefined ? readonly : __readonly}
+      aria-disabled={disabled}
+      aria-readonly={readonly}
       data-dragging={dragging}
       style={{
         ...colors,
@@ -127,9 +191,10 @@ export function Point<T extends PointBaseType>({
         top: `${value.y * 100}%`,
         ...style,
       }}
-      onPointerDown={(event) => {
-        pointerDownHandler(event)
-        onPointerDown?.(event)
+      onPointerDown={onPointerDown}
+      onKeyDown={(event) => {
+        handleKeyDown(event)
+        onKeyDown?.(event)
       }}
       {...props}
     />

package/src/components/PointsEditor/context.tsx

@@ -1,91 +1,45 @@
-import {
-  createContext,
-  createRef,
-  RefObject,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react'
-import { createStore, useStore } from 'zustand'
+import { createContext, RefObject, useContext } from 'react'
+
+import type { InputEventOption } from '@tremolo-ui/functions'
 
 import { Cursor } from '../_util'
 
-type State = {
-  containerElementRef: RefObject<HTMLDivElement | null>
+export type PointsEditorContextValue = {
   disabled: boolean
   readonly: boolean
+  /** Inherited by every `Point`; `null` turns the wheel off. */
+  wheel: InputEventOption | null
+  /** Inherited by every `Point`; `null` turns the keyboard off. */
+  keyboard: InputEventOption | null
   externalStyles: {
     userSelectNone?: boolean
     cursor?: Cursor
   }
-}
-
-type Action = {
-  setContainerElementRef: (
-    containerElementRef: RefObject<HTMLDivElement | null>,
-  ) => void
-}
-
-type PointsEditorStore = ReturnType<typeof createPointsEditorStore>
-
-const createPointsEditorStore = (initProps: Partial<State & Action>) => {
-  // const noteRange = initProps.noteRange || { first: 0, last: 127 }
-  const DEFAULT_PROPS: State = {
-    containerElementRef: createRef(),
-    disabled: false,
-    readonly: false,
-    externalStyles: {
-      userSelectNone: true,
-      cursor: 'grabbing',
-    },
-  }
 
-  return createStore<State & Action>()((set) => ({
-    ...DEFAULT_PROPS,
-    ...initProps,
-    setContainerElementRef: (containerElementRef) => {
-      set(() => ({
-        containerElementRef,
-      }))
-    },
-  }))
+  /**
+   * `Container` registers its element here; `Point` normalizes the pointer
+   * against it, so a point is placed by its position within the container.
+   */
+  containerRef: RefObject<HTMLDivElement | null>
 }
 
-const PointsEditorContext = createContext<PointsEditorStore | null>(null)
+const PointsEditorContext = createContext<PointsEditorContextValue | null>(null)
 
-type PointsEditorProviderProps = React.PropsWithChildren<
-  Partial<State & Action>
->
-
-export function PointsEditorProvider({
-  children,
-  ...props
-}: PointsEditorProviderProps) {
-  const storeRef = useRef<PointsEditorStore>(null)
-  if (!storeRef.current) {
-    storeRef.current = createPointsEditorStore(props)
-  }
-
-  useEffect(() => {
-    if (storeRef.current) {
-      storeRef.current.setState(props)
-    } else {
-      storeRef.current = createPointsEditorStore(props)
-    }
-  }, [props])
-
-  return (
-    <PointsEditorContext.Provider value={storeRef.current}>
-      {children}
-    </PointsEditorContext.Provider>
-  )
-}
+export const PointsEditorProvider = PointsEditorContext.Provider
 
+/**
+ * The settings `Root` was given, for the subcomponents to read. There is no
+ * state to keep in sync: a point's value belongs to the `Point` that draws it.
+ */
+export function usePointsEditorContext(): PointsEditorContextValue
+export function usePointsEditorContext<T>(
+  selector: (state: PointsEditorContextValue) => T,
+): T
 export function usePointsEditorContext<T>(
-  selector: (state: State & Action) => T,
-): T {
-  const store = useContext(PointsEditorContext)
-  if (!store)
+  selector?: (state: PointsEditorContextValue) => T,
+) {
+  const context = useContext(PointsEditorContext)
+  if (!context)
     throw new Error('Missing PointsEditorContext.Provider in the tree')
-  return useStore(store, selector)
+  return selector ? selector(context) : context
 }

package/src/components/PointsEditor/index.css

@@ -27,4 +27,9 @@
   &[data-dragging='true'] {
     cursor: inherit;
   }
+
+  /* Dragging does nothing while readonly, so do not offer to. */
+  &[aria-readonly='true'] {
+    cursor: default;
+  }
 }

package/src/components/PointsEditor/index.tsx

@@ -1,5 +1,11 @@
 import clsx from 'clsx'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  ReactNode,
+  useMemo,
+  useRef,
+} from 'react'
 
 import { InputEventOption } from '@tremolo-ui/functions'
 
@@ -8,50 +14,36 @@ import { Cursor } from '../_util'
 import { Background } from './Background'
 import { Container } from './Container'
 import { PointsEditorProvider } from './context'
-import { Point, PointBaseType } from './Point'
+import { Point } from './Point'
 
 /*
 TODO:
 
 - 複数選択
 - modifier
+- grid
 */
 
-/*
-import { useState } from 'react'
-
-export default function App() {
-  const [points, setPoints] = useState(initialPoints)
-
-  return (
-    <PointsEditor.Root
-      onDoubleClick={({ x, y }, _e) => {
-        const newPoints = [...points, { x, y }]
-        setPoints(newPoints)
-      }}
-    >
-      {points.map((point) => (
-        <PointsEditor.Point key={`${point.x}, ${point.y}`} value={point} />
-      ))}
-    </PointsEditor.Root>
-  )
-}
-*/
-
-const defaultExternalStyles: PointsEditorProps['externalStyles'] = {
-  userSelectNone: true,
-  cursor: 'grabbing',
-}
+/**
+ * A point moves over 0..1 in both axes, so a nudge of 0.01 crosses the editor
+ * in a hundred steps whatever its pixel size.
+ */
+const DEFAULT_INPUT_EVENT_OPTION: InputEventOption = ['normalized', 0.01]
 
 export interface PointsEditorProps {
   width?: number | string
   height?: number | string
 
-  // TODO
-  grid?: number | PointBaseType
-  // modifier?:
-
+  /**
+   * Only the appearance will change.
+   * Please consider using with readonly.
+   * aria-disabled property is also applied.
+   */
   disabled?: boolean
+  /**
+   * Make the points unmovable.
+   * aria-readonly property is also applied.
+   */
   readonly?: boolean
 
   externalStyles?: {
@@ -59,30 +51,53 @@ export interface PointsEditorProps {
     cursor?: Cursor
   }
 
-  // TODO
   /**
-   * wheel control option
+   * wheel control option for every `Point`. Shift selects the x axis.
    * If null, no event will be triggered
+   *
+   * A `Point` can override it with a `wheel` of its own.
    */
   wheel?: InputEventOption | null
   /**
-   * keyboard control option
+   * keyboard control option for every `Point`, on the arrow keys.
    * If null, no event will be triggered
+   *
+   * A `Point` can override it with a `keyboard` of its own.
    */
   keyboard?: InputEventOption | null
+
+  /**
+   * The editor renders exactly what you compose here; there is no default
+   * markup to fall back to.
+   *
+   * @example
+   * <PointsEditor.Root>
+   *   <PointsEditor.Background>
+   *     <svg viewBox="0 0 200 100">...</svg>
+   *   </PointsEditor.Background>
+   *   <PointsEditor.Container>
+   *     {points.map((point, i) => (
+   *       <PointsEditor.Point key={i} value={point} onChange={...} />
+   *     ))}
+   *   </PointsEditor.Container>
+   * </PointsEditor.Root>
+   */
+  children: ReactNode
 }
 
 type Props = PointsEditorProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorProps>
 
-const Root = forwardRef<HTMLDivElement, Props>(
+export const Root = forwardRef<HTMLDivElement, Props>(
   (
     {
       width = 200,
       height = 100,
       disabled = false,
       readonly = false,
-      externalStyles: _externalStyles,
+      wheel = DEFAULT_INPUT_EVENT_OPTION,
+      keyboard = DEFAULT_INPUT_EVENT_OPTION,
+      externalStyles,
       style,
       className,
       children,
@@ -90,17 +105,31 @@ const Root = forwardRef<HTMLDivElement, Props>(
     },
     forwardedRef,
   ) => {
-    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    // Picked apart so that the memo below depends on values rather than on the
+    // object literal a caller writes inline, which is new on every render.
+    const { userSelectNone = true, cursor = 'grabbing' } = externalStyles ?? {}
+
+    const context = useMemo(
+      () => ({
+        disabled,
+        readonly,
+        wheel,
+        keyboard,
+        externalStyles: { userSelectNone, cursor },
+        containerRef,
+      }),
+      [disabled, readonly, wheel, keyboard, userSelectNone, cursor],
+    )
 
     return (
-      <PointsEditorProvider
-        disabled={disabled}
-        readonly={readonly}
-        externalStyles={externalStyles}
-      >
+      <PointsEditorProvider value={context}>
         <div
           ref={forwardedRef}
           className={clsx('tremolo-points-editor', className)}
+          aria-disabled={disabled}
+          aria-readonly={readonly}
           style={{
             width,
             height,
@@ -125,5 +154,10 @@ export const PointsEditor = {
   Point,
 }
 
-export { usePointsEditorContext } from './context'
+export {
+  usePointsEditorContext,
+  type PointsEditorContextValue,
+} from './context'
+export { type PointsEditorBackgroundProps } from './Background'
+export { type PointsEditorContainerProps } from './Container'
 export { clampPoint, type PointBaseType, type PointProps } from './Point'

package/src/components/Slider/{Scale.tsx → Marks.tsx}

@@ -4,23 +4,23 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { xor } from '@tremolo-ui/functions'
 
 import { useSliderContext } from './context'
-import { ScaleOption } from './ScaleOption'
-import { generateOptionsList, ScaleOptions } from './type'
+import { MarksOption } from './MarksOption'
+import { generateOptionsList, MarksOptions } from './type'
 
-export interface ScaleProps {
+export interface MarksProps {
   gap?: number | string
-  options?: ScaleOptions
+  options?: MarksOptions
   children?: ReactNode
 }
 
-export function Scale({
+export function Marks({
   gap = 6,
   options,
   children,
   className,
   style,
   ...props
-}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>) {
+}: MarksProps & Omit<ComponentPropsWithoutRef<'div'>, keyof MarksProps>) {
   const min = useSliderContext((s) => s.min)
   const max = useSliderContext((s) => s.max)
   const step = useSliderContext((s) => s.step)
@@ -34,7 +34,7 @@ export function Scale({
 
   return (
     <div
-      className={clsx('tremolo-slider-scale', className)}
+      className={clsx('tremolo-slider-marks', className)}
       style={{
         marginLeft: vertical ? gap : undefined,
         marginTop: !vertical ? gap : undefined,
@@ -44,7 +44,7 @@ export function Scale({
     >
       {options
         ? optionsList.map(({ value, type }, index) => {
-            return <ScaleOption key={index} value={value} type={type} />
+            return <MarksOption key={index} value={value} type={type} />
           })
         : children}
     </div>