@tremolo-ui/react 0.7.0 → 0.8.0

package/src/components/PointsEditor/Point.tsx

@@ -1,7 +1,6 @@
 import {
   ComponentPropsWithoutRef,
   CSSProperties,
-  useCallback,
   useEffect,
   useId,
   useRef,
@@ -9,38 +8,26 @@ import {
 } from 'react'
 
 import {
-  applyDelta,
+  arrowKeyMove,
+  clampPoint,
   type InputEventOption,
-  type ModifierState,
   type ModifierValue,
+  POINT_AXIS,
+  type PointPosition,
+  type PointsEditorPoint,
   selectModifier,
 } from '@tremolo-ui/dom'
-import { clamp } from '@tremolo-ui/functions'
 
 import { useComposedRefs } from '../../compose-refs'
 import { useDragValue } from '../../hooks/useDragValue'
-import { cssLength } from '../_util/css-length'
 import { useCheckPlacement } from '../_util/Placement'
 import { VisuallyHiddenRangeInput } from '../_util/VisuallyHiddenRangeInput'
 
-import { type PointRegistration, usePointsEditorContext } from './context'
+import { usePointsEditorContext } from './context'
 
 import type { CSSVariables } from '../../css-variables'
 
-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 PointsEditorPointProps<T extends PointBaseType> {
+export interface PointsEditorPointProps<T extends PointPosition> {
   /**
    * Where the point is, as `{ x, y }` from 0 to 1 on each axis, with `y`
    * growing downwards.
@@ -53,16 +40,10 @@ export interface PointsEditorPointProps<T extends PointBaseType> {
    */
   id?: string
   /** The lowest position the point can take, per axis. An axis left out is 0. */
-  min?: Partial<PointBaseType>
+  min?: Partial<PointPosition>
   /** The highest position the point can take, per axis. An axis left out is 1. */
-  max?: Partial<PointBaseType>
+  max?: Partial<PointPosition>
 
-  /** Width and height at once. Sets both `--width` and `--height`. */
-  size?: number | string
-  /** 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
   /** Sets `--color`, for the theme to colour the point with. */
   color?: string
 
@@ -88,22 +69,15 @@ export interface PointsEditorPointProps<T extends PointBaseType> {
    * Called with the new position when the point is dragged or moved by the
    * arrow keys or the wheel, including when it moves along with a selection.
    */
-  onChange?: (value: PointBaseType) => void
+  onChange?: (value: PointPosition) => void
   /** Called when a drag on this point starts, with where the point is. */
-  onDragStart?: (value: PointBaseType) => void
+  onDragStart?: (value: PointPosition) => void
   /** Called when that drag ends, with where the point is. */
-  onDragEnd?: (value: PointBaseType) => void
+  onDragEnd?: (value: PointPosition) => void
 
-  style?: CSSProperties &
-    CSSVariables<'width' | 'height' | 'color' | 'translate'>
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>
 }
 
-/**
- * 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.
- */
-export const AXIS = { min: 0, max: 1 }
-
 /**
  * One setting for both axes, or one per axis. The point holds a range input
  * for each, so anything that names or describes it comes in a pair.
@@ -115,15 +89,12 @@ function perAxis(
   return typeof value === 'string' ? value : value?.[axis]
 }
 
-export function Point<T extends PointBaseType>({
+export function Point<T extends PointPosition>({
   value,
   children,
   id: idProp,
   min,
   max,
-  size,
-  width,
-  height,
   color,
 
   disabled: _disabled,
@@ -154,10 +125,7 @@ export function Point<T extends PointBaseType>({
     keyboard: rootKeyboard,
     dragSensitivity,
     selection,
-    registerPoint,
-    beginPointDrag,
-    movePointDrag,
-    nudgeSelection,
+    editor,
   } = usePointsEditorContext()
 
   const generatedId = useId()
@@ -182,7 +150,7 @@ export function Point<T extends PointBaseType>({
   // What the editor needs to move this point along with the rest of a
   // selection. Rewritten after every render rather than kept in the registry
   // itself: the value changes on every frame of a drag.
-  const registration = useRef<PointRegistration>({
+  const registration = useRef<PointsEditorPoint>({
     value,
     min,
     max,
@@ -203,15 +171,18 @@ export function Point<T extends PointBaseType>({
     }
   })
 
-  useEffect(() => registerPoint(id, registration), [id, registerPoint])
+  useEffect(
+    () => editor.registerPoint(id, () => registration.current),
+    [id, editor],
+  )
 
   /** Where the pointer was when the drag started, to measure the move from. */
-  const pointerOrigin = useRef<PointBaseType | null>(null)
+  const pointerOrigin = useRef<PointPosition | null>(null)
 
   // The value is the position itself: no scaling, and no rounding to a step.
   const { refCallback: dragRefCallback, dragging } =
     useDragValue<HTMLDivElement>({
-      axis: AXIS,
+      axis: POINT_AXIS,
       baseElementRef: containerRef,
       sensitivity: (state) =>
         selectModifier(dragSensitivity, state.event).value,
@@ -223,13 +194,13 @@ export function Point<T extends PointBaseType>({
       onChange: ([x, y]) => {
         const origin = pointerOrigin.current
         if (!origin) return
-        movePointDrag({ x: x - origin.x, y: y - origin.y })
+        editor.movePointDrag({ x: x - origin.x, y: y - origin.y })
       },
       onDragStart: ([x, y], state) => {
         // The press decides the selection before the snapshot is taken, so it
         // happens here rather than in an onPointerDown: a native listener on
         // the element runs before React's, and the two would disagree.
-        beginPointDrag(id, state.event)
+        editor.beginPointDrag(id, state.event)
         pointerOrigin.current = { x, y }
         xInputRef.current?.focus()
 
@@ -244,43 +215,27 @@ export function Point<T extends PointBaseType>({
       },
     })
 
-  const nudge = useCallback(
-    (
-      axis: 'x' | 'y',
-      direction: number,
-      option: ModifierValue<InputEventOption>,
-      modifiers: ModifierState,
-    ) => {
-      const next = applyDelta(value[axis], direction, option, 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,
-      })
-    },
-    [value, id, nudgeSelection],
-  )
-
   const refCallback = useComposedRefs<HTMLDivElement>(
     dragRefCallback,
     setElement,
   )
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    const key = event.key
-    if (!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key))
-      return
-    // The key picks the axis, whichever of the two inputs holds the focus: a
-    // point is one control to the person moving it, and the focus lands on the
-    // x input, so reading the axis off the input would leave the y axis with
-    // no keys at all.
-    const axis = key === 'ArrowRight' || key === 'ArrowLeft' ? 'x' : 'y'
+    // The key picks the axis, whichever of the two inputs holds the focus:
+    // the focus lands on the x input, so reading the axis off the input would
+    // leave the y axis with no keys at all. y grows downwards, so ArrowUp
+    // moves the point towards 0.
+    const move = arrowKeyMove(event.key)
+    if (!move) return
     event.preventDefault()
     if (!onChange || inactive || !keyboard) return
-    // y grows downwards, so ArrowUp moves the point towards 0.
-    const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? -1 : 1
-    nudge(axis, direction, keyboard, event)
+    editor.nudgePoint(
+      id,
+      move.axis === 0 ? 'x' : 'y',
+      move.direction,
+      keyboard,
+      event,
+    )
   }
 
   const current = clampPoint(value, min, max)
@@ -304,8 +259,6 @@ export function Point<T extends PointBaseType>({
       style={
         {
           '--color': color,
-          '--width': cssLength(size ?? width),
-          '--height': cssLength(size ?? height),
           // The mechanics of the position below: a point is placed by its
           // position in the container, measured from its own centre.
           position: 'absolute',
@@ -351,7 +304,7 @@ export function Point<T extends PointBaseType>({
               return
             }
             const delta = event.currentTarget.valueAsNumber - value[axis]
-            nudgeSelection(id, {
+            editor.nudgeSelection(id, {
               x: axis === 'x' ? delta : 0,
               y: axis === 'y' ? delta : 0,
             })

package/src/components/PointsEditor/context.tsx

@@ -2,32 +2,11 @@ import { createContext, CSSProperties, RefObject, useContext } from 'react'
 
 import {
   type InputEventOption,
-  type ModifierState,
   type ModifierValue,
+  type PointsEditorInstance,
   type SelectionBoxRect,
 } from '@tremolo-ui/dom'
 
-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
-}
-
 export type PointsEditorContextValue = {
   disabled: boolean
   readonly: 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 =