@tremolo-ui/react 0.7.0 → 0.8.0

package/src/components/PointsEditor/index.tsx

@@ -3,8 +3,6 @@ import {
   CSSProperties,
   forwardRef,
   ReactNode,
-  RefObject,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -12,89 +10,25 @@ import {
 } from 'react'
 
 import {
-  applyDelta,
-  createSelectionBox,
+  createPointsEditor,
+  DEFAULT_DRAG_SENSITIVITY,
   type InputEventOption,
-  type ModifierState,
   type ModifierValue,
-  type SelectionBoxInstance,
+  POINTS_EDITOR_DEFAULT_KEYBOARD,
+  POINTS_EDITOR_DEFAULT_WHEEL,
   type SelectionBoxRect,
-  type XY,
 } from '@tremolo-ui/dom'
-import { clamp, toPrecision } from '@tremolo-ui/functions'
-
-import { DEFAULT_DRAG_SENSITIVITY } from '../../input-event'
-import { cssLength } from '../_util/css-length'
 
 import { Background } from './Background'
 import { Container } from './Container'
-import { type PointRegistration, PointsEditorProvider } from './context'
-import { AXIS, Point, type PointBaseType } from './Point'
+import { PointsEditorProvider } from './context'
+import { Point } from './Point'
 import { SelectionBox } from './SelectionBox'
 
-import type { CSSVariables } from '../../css-variables'
-
 /** One array for every editor with selection turned off, so memos hold still. */
 const EMPTY: readonly string[] = []
 
-/**
- * How far a point may move before something in the selection leaves its range.
- *
- * Clamping each point on its own would break the shape of the selection: the
- * one that reached the edge would stop while the rest carried on. One amount
- * for all of them means the whole selection stops together.
- */
-function allowedDelta(
-  delta: PointBaseType,
-  entries: { start: PointBaseType; registration: PointRegistration }[],
-): PointBaseType {
-  let loX = -Infinity
-  let hiX = Infinity
-  let loY = -Infinity
-  let hiY = Infinity
-
-  for (const { start, registration } of entries) {
-    loX = Math.max(loX, (registration.min?.x ?? 0) - start.x)
-    hiX = Math.min(hiX, (registration.max?.x ?? 1) - start.x)
-    loY = Math.max(loY, (registration.min?.y ?? 0) - start.y)
-    hiY = Math.min(hiY, (registration.max?.y ?? 1) - start.y)
-  }
-
-  // A point that started outside its own range leaves nothing to move within.
-  return {
-    x: hiX < loX ? 0 : clamp(delta.x, loX, hiX),
-    y: hiY < loY ? 0 : clamp(delta.y, loY, hiY),
-  }
-}
-
-/*
-TODO:
-
-- grid
-*/
-
-/**
- * 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_WHEEL: ModifierValue<InputEventOption> = ['normalized', 0.01]
-
-/**
- * Shift is the fine-adjustment key everywhere else, so it is bound here too
- * — but only on the keyboard. On the wheel it already means the x axis, and
- * browsers hand shift+wheel over as horizontal scrolling anyway.
- */
-const DEFAULT_KEYBOARD: ModifierValue<InputEventOption> = {
-  default: ['normalized', 0.01],
-  shift: ['normalized', 0.001],
-}
-
 export interface PointsEditorProps {
-  /** Sets `--width`; the size the theme gives it stands when omitted. */
-  width?: number | string
-  /** Sets `--height`; the size the theme gives it stands when omitted. */
-  height?: number | string
-
   /**
    * Make the points unchangeable and remove them from the tab order.
    * The parts carry `data-disabled` while it is set.
@@ -212,8 +146,6 @@ export interface PointsEditorProps {
    * </PointsEditor.Root>
    */
   children: ReactNode
-
-  style?: CSSProperties & CSSVariables<'width' | 'height'>
 }
 
 type Props = PointsEditorProps &
@@ -222,12 +154,10 @@ type Props = PointsEditorProps &
 export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   (
     {
-      width,
-      height,
       disabled = false,
       readonly = false,
-      wheel = DEFAULT_WHEEL,
-      keyboard = DEFAULT_KEYBOARD,
+      wheel = POINTS_EDITOR_DEFAULT_WHEEL,
+      keyboard = POINTS_EDITOR_DEFAULT_KEYBOARD,
       dragSensitivity = DEFAULT_DRAG_SENSITIVITY,
       selectable = false,
       selection: selectionProp,
@@ -242,12 +172,13 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     forwardedRef,
   ) => {
     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 { cursor = 'grabbing' } = externalStyles ?? {}
 
     // --- selection ---
+    // The selection lives here, where React state can hold it; which points a
+    // press or a box selects, and how a selection moves, is the core's.
     const controlled = selectionProp !== undefined
     const [ownSelection, setOwnSelection] = useState<string[]>(
       defaultSelection ?? [],
@@ -256,220 +187,29 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     // point it started on and `data-selected` never turns on.
     const selection = selectable ? (selectionProp ?? ownSelection) : EMPTY
 
-    // Drags read the selection from a native event handler, which runs after
-    // the commit, so a ref is current by the time it matters.
-    const selectionRef = useRef(selection)
-    const changeHandlerRef = useRef(onSelectionChange)
-    useEffect(() => {
-      selectionRef.current = selection
-      changeHandlerRef.current = onSelectionChange
-    })
-
-    const changeSelection = useCallback(
-      (next: string[]) => {
-        selectionRef.current = next
-        if (!controlled) setOwnSelection(next)
-        changeHandlerRef.current?.(next)
-      },
-      [controlled],
-    )
-
-    /**
-     * Every mounted point, by id. A registration is a ref rather than a value:
-     * the value inside changes on every frame of a drag, and a registry keyed
-     * on it would be rebuilt just as often.
-     */
-    const points = useRef(new Map<string, RefObject<PointRegistration>>())
-
-    const registerPoint = useCallback(
-      (id: string, entry: RefObject<PointRegistration>) => {
-        points.current.set(id, entry)
-        return () => {
-          points.current.delete(id)
-        }
-      },
-      [],
-    )
-
-    /** What the current drag picked up, and where those points started. */
-    const dragRef = useRef<{ id: string; start: PointBaseType }[]>([])
-
-    const snapshot = useCallback((ids: readonly string[]) => {
-      return ids.flatMap((id) => {
-        const registration = points.current.get(id)?.current
-        return registration ? [{ id, start: { ...registration.value } }] : []
-      })
-    }, [])
-
-    const applyDeltaTo = useCallback(
-      (
-        entries: { id: string; start: PointBaseType }[],
-        delta: PointBaseType,
-      ) => {
-        const withRegistration = entries.flatMap((entry) => {
-          const registration = points.current.get(entry.id)?.current
-          return registration ? [{ ...entry, registration }] : []
-        })
-        const allowed = allowedDelta(delta, withRegistration)
-        for (const { start, registration } of withRegistration) {
-          if (registration.readonly) continue
-          // Rounded here as well as in the pipeline: a move is a subtraction
-          // and an addition of its own, and that is enough to put the binary
-          // artefact back (0.2 + 0.1 lands on 0.30000000000000004).
-          registration.onChange?.({
-            x: toPrecision(start.x + allowed.x),
-            y: toPrecision(start.y + allowed.y),
-          })
-        }
-      },
-      [],
-    )
-
-    const beginPointDrag = useCallback(
-      (id: string, modifiers: ModifierState) => {
-        if (!selectable) {
-          dragRef.current = snapshot([id])
-          return
-        }
-        const current = selectionRef.current
-        // Ctrl / meta rather than shift: shift is the fine-adjustment key on
-        // every control here, and it cannot be both.
-        const additive = modifiers.ctrlKey || modifiers.metaKey
-        let next: readonly string[]
-        if (additive) {
-          next = current.includes(id)
-            ? current.filter((x) => x !== id)
-            : [...current, id]
-        } else if (current.includes(id)) {
-          // Already part of a group: keep it, so the group can be dragged.
-          next = current
-        } else {
-          next = [id]
-        }
-        changeSelection([...next])
-        // A press that took the point out of the selection was a deselect, not
-        // the start of a move, so there is nothing to drag.
-        dragRef.current = next.includes(id) ? snapshot(next) : []
-      },
-      [selectable, changeSelection, snapshot],
-    )
-
-    const movePointDrag = useCallback(
-      (delta: PointBaseType) => applyDeltaTo(dragRef.current, delta),
-      [applyDeltaTo],
-    )
-
-    const nudgeSelection = useCallback(
-      (id: string, delta: PointBaseType) => {
-        // From wherever the points are now: a key press is not a drag, so
-        // there is no earlier position to measure against.
-        const ids = selectionRef.current.includes(id)
-          ? selectionRef.current
-          : [id]
-        applyDeltaTo(snapshot(ids), delta)
-      },
-      [applyDeltaTo, snapshot],
-    )
-
-    const isPointElement = useCallback(
-      (element: Element | null | undefined) => {
-        if (!element) return false
-        for (const [, entry] of points.current) {
-          if (entry.current.element?.contains(element)) return true
-        }
-        return false
-      },
-      [],
-    )
-
-    const nudgeFocusedPoint = useCallback(
-      (axis: 'x' | 'y', direction: number, modifiers: ModifierState) => {
-        const container = containerRef.current
-        const active = container?.ownerDocument.activeElement
-        if (!container || !active || !container.contains(active)) return false
-        for (const [id, entry] of points.current) {
-          const { element, wheel, readonly, onChange, value } = entry.current
-          // A point answers only for the focus inside its own inputs, so both
-          // axes stay part of the same interaction.
-          if (!element?.contains(active)) continue
-          if (!wheel || readonly || !onChange) return false
-          const next = applyDelta(
-            value[axis],
-            direction,
-            wheel,
-            AXIS,
-            modifiers,
-          )
-          // As a move, so that the rest of the selection comes along and the
-          // whole group stops together at the edge.
-          nudgeSelection(id, {
-            x: axis === 'x' ? next - value.x : 0,
-            y: axis === 'y' ? next - value.y : 0,
-          })
-          return true
-        }
-        return false
-      },
-      [nudgeSelection],
-    )
-
-    // --- selection box ---
-    // The box itself lives in the core: which items a rectangle covers, and
-    // what a press adds to or replaces, are not React's to decide. What is
-    // left here is the registry it reads and the state the box is drawn from.
     const [selectionBox, setSelectionBox] = useState<SelectionBoxRect | null>(
       null,
     )
-    const selectionBoxRef = useRef<SelectionBoxInstance<string> | null>(null)
-    selectionBoxRef.current ??= createSelectionBox<string>({
-      *items(): Generator<readonly [string, XY<number>]> {
-        for (const [id, entry] of points.current) {
-          const { x, y } = entry.current.value
-          yield [id, [x, y]]
-        }
-      },
-      onBoxChange: setSelectionBox,
-    })
-
-    // The selection is reported to whoever owns it, and that handler is a new
-    // function whenever the caller's is, so it is handed over rather than
-    // closed over.
-    useEffect(() => {
-      selectionBoxRef.current?.update({ onSelectionChange: changeSelection })
-    }, [changeSelection])
-
-    useEffect(() => {
-      const box = selectionBoxRef.current
-      return () => box?.destroy()
-    }, [])
 
-    const beginSelectionBox = useCallback(
-      (at: PointBaseType, modifiers: ModifierState) => {
-        if (!selectable) return
-        selectionBoxRef.current?.begin([at.x, at.y], {
-          // Ctrl / meta rather than shift: shift is the fine-adjustment key on
-          // every control here, and it cannot be both.
-          additive: modifiers.ctrlKey || modifiers.metaKey,
-          selection: selectionRef.current,
-        })
-      },
-      [selectable],
+    const [editor] = useState(() =>
+      createPointsEditor({ onSelectionBoxChange: setSelectionBox }),
     )
 
-    const moveSelectionBox = useCallback((to: PointBaseType) => {
-      selectionBoxRef.current?.move([to.x, to.y])
-    }, [])
+    // Drags read the selection from a native event handler, which runs after
+    // the commit, so pushing it from an effect is current by the time it
+    // matters. The handler goes the same way: it closes over this render.
+    useEffect(() => {
+      editor.update({
+        selectable,
+        selection,
+        onSelectionChange: (next) => {
+          if (!controlled) setOwnSelection(next)
+          onSelectionChange?.(next)
+        },
+      })
+    })
 
-    const endSelectionBox = useCallback(() => {
-      if (!selectionBoxRef.current?.end()) return
-      // A selection box is drawn on the container, which is not a control and
-      // cannot hold focus, so the press that started it left the focus on
-      // nothing. The arrow keys and the wheel reach a point only through the
-      // focus, so it is handed to one of the points the box selected —
-      // whichever point takes it moves the whole selection.
-      const [first] = selectionRef.current
-      if (first) points.current.get(first)?.current.element?.focus()
-    }, [])
+    useEffect(() => () => editor.destroy(), [editor])
 
     const context = useMemo(
       () => ({
@@ -482,16 +222,8 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
         containerRef,
         selectable,
         selection,
-        registerPoint,
-        isPointElement,
-        beginPointDrag,
-        movePointDrag,
-        nudgeSelection,
-        nudgeFocusedPoint,
+        editor,
         selectionBox,
-        beginSelectionBox,
-        moveSelectionBox,
-        endSelectionBox,
       }),
       [
         disabled,
@@ -502,16 +234,8 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
         cursor,
         selectable,
         selection,
-        registerPoint,
-        isPointElement,
-        beginPointDrag,
-        movePointDrag,
-        nudgeSelection,
-        nudgeFocusedPoint,
+        editor,
         selectionBox,
-        beginSelectionBox,
-        moveSelectionBox,
-        endSelectionBox,
       ],
     )
 
@@ -524,8 +248,6 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
           data-readonly={readonly ? '' : undefined}
           style={
             {
-              '--width': cssLength(width),
-              '--height': cssLength(height),
               // The layers inside are placed against this box.
               position: 'relative',
               ...style,
@@ -555,8 +277,4 @@ export {
   usePointsEditorContext,
   type PointsEditorContextValue,
 } from './context'
-export {
-  clampPoint,
-  type PointBaseType,
-  type PointsEditorPointProps,
-} from './Point'
+export { type PointsEditorPointProps } from './Point'

package/src/components/Slider/Marks.tsx

@@ -1,11 +1,11 @@
 import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
-import { cssLength } from '../_util/css-length'
+import { cssLength, type MarksOptions, sliderMarks } from '@tremolo-ui/dom'
+
 import { Placement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
 import { MarksOption } from './MarksOption'
-import { generateOptionsList, MarksOptions } from './type'
 
 import type { CSSVariables } from '../../css-variables'
 
@@ -43,9 +43,7 @@ export function Marks({
   const vertical = useSliderContext((s) => s.vertical)
   const reverse = useSliderContext((s) => s.reverse)
 
-  const optionsList = options
-    ? generateOptionsList(options, min, max, step)
-    : []
+  const optionsList = options ? sliderMarks(options, min, max, step) : []
   if (vertical !== reverse) optionsList.reverse()
 
   return (

package/src/components/Slider/MarksOption.tsx

@@ -1,8 +1,7 @@
-import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
-import { toFixed } from '@tremolo-ui/functions'
+import { cssLength, valuePercent } from '@tremolo-ui/dom'
 
-import { cssLength } from '../_util/css-length'
 import { useCheckPlacement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
@@ -29,8 +28,6 @@ export interface SliderMarksOptionProps {
   length?: number | string
   /** Space between the mark and the label. Sets `--gap`. */
   gap?: number | string
-  /** Width of the label. Sets `--label-width`. */
-  labelWidth?: number | string
   /** Classes for the mark and the label inside the option. */
   classes?: {
     mark?: string
@@ -43,7 +40,7 @@ export interface SliderMarksOptionProps {
   }
 
   style?: CSSProperties &
-    CSSVariables<'thickness' | 'length' | 'gap' | 'label-width' | 'translate'>
+    CSSVariables<'thickness' | 'length' | 'gap' | 'translate'>
 }
 
 export function MarksOption({
@@ -53,7 +50,6 @@ export function MarksOption({
   thickness,
   length,
   gap,
-  labelWidth,
   classes,
   styles,
   className,
@@ -69,14 +65,8 @@ export function MarksOption({
   const vertical = useSliderContext((s) => s.vertical)
   const reverse = useSliderContext((s) => s.reverse)
 
-  const calcPercent = useCallback(
-    (value: number) => {
-      // The marks have to sit on the same curve the thumb runs along.
-      const percent = scale.normalize(value, min, max) * 100
-      return toFixed(vertical !== reverse ? 100 - percent : percent)
-    },
-    [vertical, reverse, max, min, scale],
-  )
+  // The marks have to sit on the same curve the thumb runs along.
+  const percent = valuePercent(value, { min, max, scale }, vertical !== reverse)
 
   return (
     <div
@@ -87,7 +77,6 @@ export function MarksOption({
           '--thickness': cssLength(thickness),
           '--length': cssLength(length),
           '--gap': cssLength(gap),
-          '--label-width': cssLength(labelWidth),
           // The mechanics of the position below, as on the thumb.
           position: 'absolute',
           translate: vertical
@@ -96,8 +85,8 @@ export function MarksOption({
           zIndex: 10,
           ...style,
           // Where the mark belongs on the track: the value, not a style.
-          left: !vertical ? `${calcPercent(value)}%` : undefined,
-          top: vertical ? `${calcPercent(value)}%` : undefined,
+          left: !vertical ? `${percent}%` : undefined,
+          top: vertical ? `${percent}%` : undefined,
         } as CSSProperties
       }
       data-orientation={vertical ? 'vertical' : 'horizontal'}

package/src/components/Slider/Track.tsx

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from 'react'
 
+import { cssLength } from '@tremolo-ui/dom'
+
 import { useComposedRefs } from '../../compose-refs'
-import { cssLength } from '../_util/css-length'
 import { Placement } from '../_util/Placement'
 
 import { useSliderContext } from './context'

package/src/components/Slider/index.tsx

@@ -11,23 +11,24 @@ import React, {
 
 import {
   applyDelta,
+  arrowKeyDirection,
   type AxisOptions,
+  DEFAULT_DRAG_SENSITIVITY,
+  DEFAULT_KEYBOARD_OPTIONS,
+  DEFAULT_WHEEL_OPTIONS,
   type InputEventOption,
   type ModifierValue,
   selectModifier,
+  valuePercent,
+  wheelDirection,
   type XY,
 } from '@tremolo-ui/dom'
-import { linearScale, type Scale, toFixed } from '@tremolo-ui/functions'
+import { linearScale, type Scale } from '@tremolo-ui/functions'
 
 import { useComposedRefs } from '../../compose-refs'
 import { useCheckSteps } from '../../hooks/_internal/useCheckSteps'
 import { useDragValue } from '../../hooks/useDragValue'
 import { useWheel } from '../../hooks/useWheel'
-import {
-  DEFAULT_DRAG_SENSITIVITY,
-  DEFAULT_KEYBOARD_OPTIONS,
-  DEFAULT_WHEEL_OPTIONS,
-} from '../../input-event'
 
 import { SliderProvider } from './context'
 import { Marks } from './Marks'
@@ -216,15 +217,13 @@ export const Root = /* @__PURE__ */ forwardRef<SliderMethods, Props>(
     const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
     const inactive = disabled || readonly
 
-    const p = toFixed(scale.normalize(value, min, max) * 100)
-    const rev = toFixed(100 - p)
-    // NOTE
+    // Measured from the left or the top, as CSS places things:
     // normal -> normal (right)
-    // vertical -> rev (up)
-    // reverse -> rev (left)
+    // vertical -> reversed (up)
+    // reverse -> reversed (left)
     // vertical & reverse -> normal (down)
     const displayReversed = vertical !== reverse
-    const percent = displayReversed ? rev : p
+    const percent = valuePercent(value, { min, max, scale }, displayReversed)
 
     // --- internal functions ---
     // The pointer is normalized against the track on both axes; only the one
@@ -239,14 +238,19 @@ export const Root = /* @__PURE__ */ forwardRef<SliderMethods, Props>(
 
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
-        const key = event.key
-        if (!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key))
-          return
+        const direction = arrowKeyDirection(event.key)
+        if (direction === null) return
         event.preventDefault()
         if (!keyboard || !onChange || inactive) return
-        let direction = key === 'ArrowRight' || key === 'ArrowUp' ? 1 : -1
-        if (reverse) direction *= -1
-        onChange(applyDelta(value, direction, keyboard, axis, event))
+        onChange(
+          applyDelta(
+            value,
+            reverse ? -direction : direction,
+            keyboard,
+            axis,
+            event,
+          ),
+        )
       },
       [keyboard, onChange, inactive, reverse, value, axis],
     )
@@ -279,16 +283,14 @@ export const Root = /* @__PURE__ */ forwardRef<SliderMethods, Props>(
 
     const wheelRefCallback = useWheel<HTMLDivElement>((event) => {
       if (!wheel || !onChange || inactive) return
+      // A notch the slider does not read — a sideways scroll on a vertical
+      // slider — is left to the page rather than swallowed.
+      const direction = wheelDirection(event, { horizontal: !vertical })
+      if (direction === null) return
       event.preventDefault()
-      let direction
-      if (!vertical && event.deltaX !== 0) {
-        direction = event.deltaX > 0 ? 1 : -1
-      } else {
-        if (event.deltaY === 0) return
-        direction = event.deltaY > 0 ? -1 : 1
-      }
-      if (reverse) direction *= -1
-      onChange(applyDelta(value, direction, wheel, axis, event))
+      onChange(
+        applyDelta(value, reverse ? -direction : direction, wheel, axis, event),
+      )
     }, WHEEL_OPTIONS)
 
     // Composed once, so React attaches the refs a single time instead of
@@ -394,4 +396,3 @@ export { type SliderThumbMethods, type SliderThumbProps } from './Thumb'
 export { type SliderTrackProps } from './Track'
 export { type SliderMarksProps } from './Marks'
 export { type SliderMarksOptionProps } from './MarksOption'
-export { type MarksOptions } from './type'