@tremolo-ui/react 0.2.0 → 0.3.0

package/src/components/PointsEditor/Container.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, useRef } from 'react'
+
+import { usePointsEditorContext } from './context'
+
+export function Container({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'div'>) {
+  const containerElementRef = useRef<HTMLDivElement>(null)
+  const setContainerElementRef = usePointsEditorContext(
+    (s) => s.setContainerElementRef,
+  )
+  setContainerElementRef(containerElementRef)
+
+  return (
+    <div
+      ref={containerElementRef}
+      className={clsx('tremolo-points-editor-container', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/PointsEditor/Point.tsx

@@ -0,0 +1,137 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef } from 'react'
+
+import { clamp } from '@tremolo-ui/functions'
+
+import { useDragWithElement } from '../../hooks/useDragWithElement'
+import {
+  addUserSelectNone,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} from '../_util'
+
+import { usePointsEditorContext } from './context'
+
+export type PointBaseType = { x: number; y: number }
+
+export function clampPoint(
+  point: PointBaseType,
+  min?: Partial<PointBaseType>,
+  max?: Partial<PointBaseType>,
+) {
+  const { x, y } = point
+  const newX = clamp(x, min?.x ?? 0, max?.x ?? 1)
+  const newY = clamp(y, min?.y ?? 0, max?.y ?? 1)
+  return { x: newX, y: newY }
+}
+
+export interface PointProps<T extends PointBaseType> {
+  value: T
+  min?: Partial<PointBaseType>
+  max?: Partial<PointBaseType>
+
+  size?: number | string
+  width?: number | string
+  height?: number | string
+  color?: string
+
+  disabled?: boolean
+  readonly?: boolean
+
+  onChange?: (value: PointBaseType) => void
+  onDragStart?: (value: PointBaseType) => void
+  onDragEnd?: (value: PointBaseType) => void
+}
+
+export function Point<T extends PointBaseType>({
+  value,
+  min,
+  max,
+  size,
+  width = 16,
+  height = 16,
+  color,
+
+  disabled,
+  readonly,
+
+  onChange,
+  onDragStart,
+  onDragEnd,
+
+  className,
+  style,
+  onPointerDown,
+  ...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))
+    },
+    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 colors: Record<string, string | undefined> = {
+    '--color': color,
+  }
+
+  return (
+    <div
+      ref={(div) => {
+        // wheelRefCallback(div)
+        touchMoveRefCallback(div)
+      }}
+      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}
+      data-dragging={dragging}
+      style={{
+        ...colors,
+        width: size ?? width,
+        height: size ?? height,
+        left: `${value.x * 100}%`,
+        top: `${value.y * 100}%`,
+        ...style,
+      }}
+      onPointerDown={(event) => {
+        pointerDownHandler(event)
+        onPointerDown?.(event)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/PointsEditor/context.tsx

@@ -0,0 +1,91 @@
+import {
+  createContext,
+  createRef,
+  RefObject,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react'
+import { createStore, useStore } from 'zustand'
+
+import { Cursor } from '../_util'
+
+type State = {
+  containerElementRef: RefObject<HTMLDivElement | null>
+  disabled: boolean
+  readonly: boolean
+  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,
+      }))
+    },
+  }))
+}
+
+const PointsEditorContext = createContext<PointsEditorStore | 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 function usePointsEditorContext<T>(
+  selector: (state: State & Action) => T,
+): T {
+  const store = useContext(PointsEditorContext)
+  if (!store)
+    throw new Error('Missing PointsEditorContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/PointsEditor/index.css

@@ -0,0 +1,30 @@
+.tremolo-points-editor {
+  position: relative;
+}
+
+.tremolo-points-editor-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.tremolo-points-editor-container {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+}
+
+.tremolo-points-editor-point {
+  --color: oklch(59.5% 0.17548 266.373);
+
+  position: absolute;
+  border-radius: 50%;
+  outline: none;
+  cursor: grab;
+  background-color: var(--color);
+  translate: -50% -50%;
+
+  &[data-dragging='true'] {
+    cursor: inherit;
+  }
+}

package/src/components/PointsEditor/index.tsx

@@ -0,0 +1,129 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+
+import { InputEventOption } from '@tremolo-ui/functions'
+
+import { Cursor } from '../_util'
+
+import { Background } from './Background'
+import { Container } from './Container'
+import { PointsEditorProvider } from './context'
+import { Point, PointBaseType } from './Point'
+
+/*
+TODO:
+
+- 複数選択
+- modifier
+*/
+
+/*
+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',
+}
+
+export interface PointsEditorProps {
+  width?: number | string
+  height?: number | string
+
+  // TODO
+  grid?: number | PointBaseType
+  // modifier?:
+
+  disabled?: boolean
+  readonly?: boolean
+
+  externalStyles?: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
+
+  // TODO
+  /**
+   * 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
+}
+
+type Props = PointsEditorProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorProps>
+
+const Root = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      width = 200,
+      height = 100,
+      disabled = false,
+      readonly = false,
+      externalStyles: _externalStyles,
+      style,
+      className,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
+
+    return (
+      <PointsEditorProvider
+        disabled={disabled}
+        readonly={readonly}
+        externalStyles={externalStyles}
+      >
+        <div
+          ref={forwardedRef}
+          className={clsx('tremolo-points-editor', className)}
+          style={{
+            width,
+            height,
+            ...style,
+          }}
+          {...props}
+        >
+          {children}
+        </div>
+      </PointsEditorProvider>
+    )
+  },
+)
+
+/**
+ * Multiple Point Controller
+ */
+export const PointsEditor = {
+  Root,
+  Background,
+  Container,
+  Point,
+}
+
+export { usePointsEditorContext } from './context'
+export { clampPoint, type PointBaseType, type PointProps } from './Point'

package/src/components/Slider/Scale.tsx

@@ -7,14 +7,12 @@ import { useSliderContext } from './context'
 import { ScaleOption } from './ScaleOption'
 import { generateOptionsList, ScaleOptions } from './type'
 
-/** @category Slider */
 export interface ScaleProps {
   gap?: number | string
   options?: ScaleOptions
   children?: ReactNode
 }
 
-/** @category Slider */
 export function Scale({
   gap = 6,
   options,

package/src/components/Slider/ScaleOption.tsx

@@ -6,7 +6,6 @@ import { toFixed, xor, normalizeValue } from '@tremolo-ui/functions'
 import { useSliderContext } from './context'
 import { ScaleType } from './type'
 
-/** @category Slider */
 export interface ScaleOptionProps {
   // required
   value: number
@@ -32,7 +31,6 @@ export interface ScaleOptionProps {
   }
 }
 
-/** @category Slider */
 export function ScaleOption({
   value,
   type = 'mark-number',

package/src/components/Slider/Thumb.tsx

@@ -9,7 +9,6 @@ import {
 
 import { useSliderContext } from './context'
 
-/** @category Slider */
 export interface SliderThumbProps {
   size?: number | string
   width?: number | string
@@ -25,16 +24,13 @@ export interface SliderThumbProps {
   __percent?: number
 }
 
-/** @category Slider */
 export interface SliderThumbMethods {
   focus: () => void
   blur: () => void
 }
 
-/** @category Slider */
 export const defaultThumbSize = 22
 
-/** @category Slider */
 export const Thumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
   (
     {

package/src/components/Slider/Track.tsx

@@ -8,7 +8,6 @@ import { useSliderContext } from './context'
 export const defaultLength = 140
 export const defaultThickness = 10
 
-/** @category Slider */
 export interface SliderTrackProps {
   length?: number | string
   thickness?: number | string
@@ -28,7 +27,6 @@ export interface SliderTrackProps {
   __percent?: number
 }
 
-/** @category Slider */
 export function Track({
   length = defaultLength,
   thickness = defaultThickness,

package/src/components/Slider/context.tsx

@@ -57,7 +57,6 @@ export function SliderProvider({ children, ...props }: SliderProviderProps) {
   )
 }
 
-/** @category Slider */
 export function useSliderContext<T>(selector: (state: State) => T): T {
   const store = useContext(SliderContext)
   if (!store) throw new Error('Missing SliderContext.Provider in the tree')

package/src/components/Slider/index.tsx

@@ -23,7 +23,13 @@ import {
 
 import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { addNoSelect, removeNoSelect } from '../_util'
+import {
+  addUserSelectNone,
+  Cursor,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} from '../_util'
 
 import { SliderProvider } from './context'
 import { Scale } from './Scale'
@@ -31,7 +37,11 @@ import { ScaleOption } from './ScaleOption'
 import { Thumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
 import { Track, SliderTrackProps } from './Track'
 
-/** @category Slider */
+const defaultExternalStyles: SliderProps['externalStyles'] = {
+  userSelectNone: true,
+  cursor: 'pointer',
+}
+
 export interface SliderProps {
   // required
   value: number
@@ -41,24 +51,38 @@ export interface SliderProps {
   // optional
   step?: number
   skew?: number // TODO | SkewFunction
+  /**
+   * slider orientation
+   * aria-orientation property is also applied.
+   */
   vertical?: boolean
   reverse?: boolean
-  bodyNoSelect?: boolean
+
+  /** Global style to apply when dragged */
+  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
+
   /**
    * Only the appearance will change.
    * Please consider using with readonly.
+   * aria-disabled property is also applied.
    */
   disabled?: boolean
   /**
    * Make the value unchangeable.
+   * aria-readonly property is also applied.
    */
   readonly?: boolean
   className?: string
@@ -71,9 +95,6 @@ export interface SliderProps {
   // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
 }
 
-/**
- * @category Slider
- */
 export interface SliderMethods {
   focus: () => void
   blur: () => void
@@ -82,7 +103,7 @@ export interface SliderMethods {
 type Props = SliderProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof SliderProps>
 
-const SliderImpl = forwardRef<SliderMethods, Props>(
+const Root = forwardRef<SliderMethods, Props>(
   (
     {
       value,
@@ -92,7 +113,7 @@ const SliderImpl = forwardRef<SliderMethods, Props>(
       skew = 1,
       vertical = false,
       reverse = false,
-      bodyNoSelect = true,
+      externalStyles: _externalStyles,
       wheel = ['raw', 1],
       keyboard = ['raw', 1],
       disabled = false,
@@ -116,6 +137,8 @@ const SliderImpl = forwardRef<SliderMethods, Props>(
     const thumbRef = useRef<SliderThumbMethods>(null)
 
     // --- interpret props ---
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
+
     const p = toFixed(normalizeValue(value, min, max, skew) * 100)
     const rev = toFixed(100 - p)
     // NOTE
@@ -192,13 +215,15 @@ const SliderImpl = forwardRef<SliderMethods, Props>(
     )
 
     // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] =
+    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
       useDragWithElement<HTMLDivElement>({
         baseElementRef: trackElementRef,
         onDrag: onDrag,
         onDragStart: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) addNoSelect()
+          if (externalStyles.userSelectNone) addUserSelectNone()
+          if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
+
           thumbRef.current?.focus()
           onDragStart?.(
             clamp(
@@ -210,7 +235,10 @@ const SliderImpl = forwardRef<SliderMethods, Props>(
         },
         onDragEnd: (nx, ny) => {
           if (readonly) return
-          if (bodyNoSelect) removeNoSelect()
+
+          if (externalStyles.userSelectNone) removeUserSelectNone()
+          if (externalStyles.cursor) resetCursorStyle()
+
           onDragEnd?.(
             clamp(
               stepValue(rawValue(vertical ? ny : nx, min, max, skew), step),
@@ -327,14 +355,14 @@ const SliderImpl = forwardRef<SliderMethods, Props>(
 
 /**
  * Customizable slider
- * @category Slider
  */
-export const Slider = Object.assign(SliderImpl, {
+export const Slider = {
+  Root,
   Thumb,
   Track,
   Scale,
   ScaleOption,
-})
+}
 
 export { useSliderContext } from './context'
 export { type SliderThumbMethods, type SliderThumbProps } from './Thumb'

package/src/components/WheelObserver/index.tsx

@@ -1,20 +1,9 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
+import { ComponentProps, ElementType, ReactNode } from 'react'
 
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { composeRefs } from '../_util/composeRefs'
+import { Override } from '../_util/type'
 
-/**
- * @example
- * <WheelObserver
- *   onWheel={(event) => {
- *     event.preventDefault()
- *     console.log(event.deltaY)
- *   }
- * >
- *   <div>Wheel here</div>
- * </WheelObserver>
- */
-
-/** @category WheelObserver */
 export interface WheelObserverProps<T extends ElementType> {
   /**
    * React.ElementType
@@ -26,12 +15,21 @@ export interface WheelObserverProps<T extends ElementType> {
   onWheel?: (event: WheelEvent) => void
 }
 
-/** @category WheelObserver */
+/**
+ * @example
+ * <WheelObserver
+ *   onWheel={(event) => {
+ *     event.preventDefault()
+ *     console.log(event.deltaY)
+ *   }
+ * >
+ *   <div>Wheel here</div>
+ * </WheelObserver>
+ */
 export function WheelObserver<T extends ElementType = 'div'>(
-  props: WheelObserverProps<T> &
-    Omit<ComponentPropsWithoutRef<T>, keyof WheelObserverProps<T>>,
+  props: Override<WheelObserverProps<T>, ComponentProps<T>>,
 ) {
-  const { children, onWheel, as: Component = 'div', ...attributes } = props
+  const { as: Component = 'div', children, onWheel, ref, ...attributes } = props
 
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
@@ -43,7 +41,7 @@ export function WheelObserver<T extends ElementType = 'div'>(
   )
 
   return (
-    <Component ref={wheelRefCallback} {...attributes}>
+    <Component ref={composeRefs(ref, wheelRefCallback)} {...attributes}>
       {children}
     </Component>
   )