@tremolo-ui/react 0.4.0 → 0.6.0

package/src/components/PointsEditor/context.tsx

@@ -1,91 +1,113 @@
-import {
-  createContext,
-  createRef,
-  RefObject,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react'
-import { createStore, useStore } from 'zustand'
+import { createContext, CSSProperties, RefObject, useContext } from 'react'
 
-import { Cursor } from '../_util'
+import type { SelectionBoxRect } from '@tremolo-ui/dom'
+import type {
+  InputEventOption,
+  ModifierState,
+  ModifierValue,
+} from '@tremolo-ui/functions'
 
-type State = {
-  containerElementRef: RefObject<HTMLDivElement | null>
+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
+  /** Inherited by every `Point`; `null` turns the wheel off. */
+  wheel: ModifierValue<InputEventOption> | null
+  /** Inherited by every `Point`; `null` turns the keyboard off. */
+  keyboard: ModifierValue<InputEventOption> | null
+  /** Inherited by every `Point`. See `PointsEditorProps.dragSensitivity`. */
+  dragSensitivity: ModifierValue<number>
   externalStyles: {
-    userSelectNone?: boolean
-    cursor?: Cursor
+    cursor?: CSSProperties['cursor']
   }
-}
-
-type Action = {
-  setContainerElementRef: (
-    containerElementRef: RefObject<HTMLDivElement | null>,
-  ) => void
-}
 
-type PointsEditorStore = ReturnType<typeof createPointsEditorStore>
+  /**
+   * `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 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',
-    },
-  }
+  /** 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.
+   */
+  nudgeFocusedPoint: (
+    axis: 'x' | 'y',
+    direction: number,
+    modifiers: ModifierState,
+  ) => boolean
 
-  return createStore<State & Action>()((set) => ({
-    ...DEFAULT_PROPS,
-    ...initProps,
-    setContainerElementRef: (containerElementRef) => {
-      set(() => ({
-        containerElementRef,
-      }))
-    },
-  }))
+  /** 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 = 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)
-  }
+const PointsEditorContext =
+  /* @__PURE__ */ createContext<PointsEditorContextValue | null>(null)
 
-  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. A point's
+ * value still belongs to the `Point` that draws it; what the root keeps is
+ * which points are selected, and a registry of who they are.
+ */
+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
 }