@tremolo-ui/react 0.6.0 → 0.8.0

package/src/components/PointsEditor/context.tsx

@@ -1,32 +1,11 @@
 import { createContext, CSSProperties, RefObject, useContext } from 'react'
 
-import type { SelectionBoxRect } from '@tremolo-ui/dom'
-import type {
-  InputEventOption,
-  ModifierState,
-  ModifierValue,
-} from '@tremolo-ui/functions'
-
-import type { PointBaseType } from './Point'
-
-/**
- * What a `Point` tells the editor about itself, so that a selection can be
- * moved without the editor knowing how the points are stored.
- *
- * Held behind a ref and rewritten on every render: the value changes on every
- * frame of a drag, and a registry keyed on it would be rebuilt just as often.
- */
-export interface PointRegistration {
-  value: PointBaseType
-  min?: Partial<PointBaseType>
-  max?: Partial<PointBaseType>
-  readonly: boolean
-  onChange?: (value: PointBaseType) => void
-  /** The point's own element, to match the focus against. */
-  element: HTMLElement | null
-  /** The wheel option this point resolved, root inheritance applied. */
-  wheel: ModifierValue<InputEventOption> | null
-}
+import {
+  type InputEventOption,
+  type ModifierValue,
+  type PointsEditorInstance,
+  type SelectionBoxRect,
+} from '@tremolo-ui/dom'
 
 export type PointsEditorContextValue = {
   disabled: boolean
@@ -40,53 +19,23 @@ export type PointsEditorContextValue = {
   externalStyles: {
     cursor?: CSSProperties['cursor']
   }
-
   /**
    * `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>
-
   /** Whether points can be selected at all. See `PointsEditorProps.selectable`. */
   selectable: boolean
   /** Ids of the points currently selected. Always empty while `selectable` is off. */
   selection: readonly string[]
-  /** Register a point so that a selection can move it with the rest. */
-  registerPoint: (id: string, entry: RefObject<PointRegistration>) => () => void
-  /**
-   * Whether the element is a point, or inside one. The registry knows which
-   * elements the points are, so nothing has to be recognised by a class name.
-   */
-  isPointElement: (element: Element | null | undefined) => boolean
-  /**
-   * A pointer went down on a point: works out the new selection and takes the
-   * snapshot the move will be measured against.
-   */
-  beginPointDrag: (id: string, modifiers: ModifierState) => void
-  /** Move everything the drag picked up, by one amount, clamped as one. */
-  movePointDrag: (delta: PointBaseType) => void
-  /**
-   * Move the selection by an amount that did not come from a drag — an arrow
-   * key or a wheel notch. The current values are the starting point.
-   */
-  nudgeSelection: (id: string, delta: PointBaseType) => void
   /**
-   * Move the point that currently holds focus by one notch. The wheel listener
-   * belongs to `Container` rather than to every `Point`, so the lookup of who
-   * has focus happens here, where the registry is. Returns whether a point
-   * took it, so the caller knows whether to consume the event.
+   * The selection and the moves, from `createPointsEditor` in
+   * `@tremolo-ui/dom`: every `Point` registers with it, and a press, a drag,
+   * a key or the wheel goes through it so that a selection moves as one.
    */
-  nudgeFocusedPoint: (
-    axis: 'x' | 'y',
-    direction: number,
-    modifiers: ModifierState,
-  ) => boolean
-
+  editor: PointsEditorInstance
   /** The selection box, while one is being dragged. */
   selectionBox: SelectionBoxRect | null
-  beginSelectionBox: (at: PointBaseType, modifiers: ModifierState) => void
-  moveSelectionBox: (to: PointBaseType) => void
-  endSelectionBox: () => void
 }
 
 const PointsEditorContext =

package/src/components/PointsEditor/index.tsx

@@ -3,8 +3,6 @@ import {
   CSSProperties,
   forwardRef,
   ReactNode,
-  RefObject,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -12,90 +10,25 @@ import {
 } from 'react'
 
 import {
-  createSelectionBox,
-  type SelectionBoxInstance,
-  type SelectionBoxRect,
-  type XY,
-} from '@tremolo-ui/dom'
-import {
-  applyDelta,
-  clamp,
+  createPointsEditor,
+  DEFAULT_DRAG_SENSITIVITY,
   type InputEventOption,
-  type ModifierState,
   type ModifierValue,
-  toPrecision,
-} from '@tremolo-ui/functions'
-
-import { DEFAULT_DRAG_SENSITIVITY } from '../../input-event'
-import { cssLength } from '../_util/css-length'
+  POINTS_EDITOR_DEFAULT_KEYBOARD,
+  POINTS_EDITOR_DEFAULT_WHEEL,
+  type SelectionBoxRect,
+} from '@tremolo-ui/dom'
 
 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'
 
 /** 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.
@@ -221,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,
@@ -241,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 ?? [],
@@ -255,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(
       () => ({
@@ -481,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,
@@ -501,16 +234,8 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
         cursor,
         selectable,
         selection,
-        registerPoint,
-        isPointElement,
-        beginPointDrag,
-        movePointDrag,
-        nudgeSelection,
-        nudgeFocusedPoint,
+        editor,
         selectionBox,
-        beginSelectionBox,
-        moveSelectionBox,
-        endSelectionBox,
       ],
     )
 
@@ -523,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,
@@ -554,11 +277,4 @@ export {
   usePointsEditorContext,
   type PointsEditorContextValue,
 } from './context'
-export { type PointsEditorBackgroundProps } from './Background'
-export { type PointsEditorContainerProps } from './Container'
-export { type PointsEditorSelectionBoxProps } from './SelectionBox'
-export {
-  clampPoint,
-  type PointBaseType,
-  type PointsEditorPointProps,
-} from './Point'
+export { type PointsEditorPointProps } from './Point'

package/src/components/Slider/Marks.tsx

@@ -1,13 +1,13 @@
-import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
-import { xor } from '@tremolo-ui/functions'
+import { cssLength, type MarksOptions, sliderMarks } from '@tremolo-ui/dom'
 
-import { cssLength } from '../_util/css-length'
 import { Placement } from '../_util/Placement'
 
 import { useSliderContext } from './context'
 import { MarksOption } from './MarksOption'
-import { generateOptionsList, MarksOptions } from './type'
+
+import type { CSSVariables } from '../../css-variables'
 
 export interface SliderMarksProps {
   /**
@@ -24,11 +24,8 @@ export interface SliderMarksProps {
    * `'step'` makes one per step, which is a great many for a fine `step`.
    */
   options?: MarksOptions
-  /**
-   * `<Slider.MarksOption />` goes here, one per mark. Ignored while `options`
-   * is set.
-   */
-  children?: ReactNode
+
+  style?: CSSProperties & CSSVariables<'gap'>
 }
 
 export function Marks({
@@ -46,10 +43,8 @@ export function Marks({
   const vertical = useSliderContext((s) => s.vertical)
   const reverse = useSliderContext((s) => s.reverse)
 
-  const optionsList = options
-    ? generateOptionsList(options, min, max, step)
-    : []
-  if (xor(vertical, reverse)) optionsList.reverse()
+  const optionsList = options ? sliderMarks(options, min, max, step) : []
+  if (vertical !== reverse) optionsList.reverse()
 
   return (
     <div

package/src/components/Slider/MarksOption.tsx

@@ -1,12 +1,13 @@
-import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
-import { toFixed, xor } 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'
 
+import type { CSSVariables } from '../../css-variables'
+
 export interface SliderMarksOptionProps {
   /** Where the mark sits, on the same scale as the thumb. */
   value: number
@@ -27,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
@@ -39,6 +38,9 @@ export interface SliderMarksOptionProps {
     mark?: CSSProperties
     label?: CSSProperties
   }
+
+  style?: CSSProperties &
+    CSSVariables<'thickness' | 'length' | 'gap' | 'translate'>
 }
 
 export function MarksOption({
@@ -48,7 +50,6 @@ export function MarksOption({
   thickness,
   length,
   gap,
-  labelWidth,
   classes,
   styles,
   className,
@@ -64,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(xor(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
@@ -82,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
@@ -91,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'}