angle-slider

1"use client";
2 
3import {
4  Direction as DirectionPrimitive,
5  Slot as SlotPrimitive,
6} from "radix-ui";
7import * as React from "react";
8import { useComposedRefs } from "@/lib/compose-refs";
9import { cn } from "@/lib/utils";
10import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input";
11import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
12import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
13import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
14 
15const ROOT_NAME = "AngleSlider";
16const THUMB_NAME = "AngleSliderThumb";
17 
18const PAGE_KEYS = ["PageUp", "PageDown"];
19const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
20 
21type Direction = "ltr" | "rtl";
22 
23interface DivProps extends React.ComponentProps<"div"> {
24  asChild?: boolean;
25}
26 
27type RootElement = React.ComponentRef<typeof AngleSlider>;
28type ThumbElement = React.ComponentRef<typeof AngleSliderThumb>;
29 
30function clamp(value: number, [min, max]: [number, number]) {
31  return Math.min(max, Math.max(min, value));
32}
33 
34function getNextSortedValues(
35  prevValues: number[] = [],
36  nextValue: number,
37  atIndex: number,
38) {
39  const nextValues = [...prevValues];
40  nextValues[atIndex] = nextValue;
41  return nextValues.sort((a, b) => a - b);
42}
43 
44function getStepsBetweenValues(values: number[]) {
45  return values.slice(0, -1).map((value, index) => {
46    const nextValue = values[index + 1];
47    return nextValue !== undefined ? nextValue - value : 0;
48  });
49}
50 
51function hasMinStepsBetweenValues(
52  values: number[],
53  minStepsBetweenValues: number,
54) {
55  if (minStepsBetweenValues > 0) {
56    const stepsBetweenValues = getStepsBetweenValues(values);
57    const actualMinStepsBetweenValues =
58      stepsBetweenValues.length > 0 ? Math.min(...stepsBetweenValues) : 0;
59    return actualMinStepsBetweenValues >= minStepsBetweenValues;
60  }
61  return true;
62}
63 
64function getDecimalCount(value: number) {
65  return (String(value).split(".")[1] ?? "").length;
66}
67 
68function roundValue(value: number, decimalCount: number) {
69  const rounder = 10 ** decimalCount;
70  return Math.round(value * rounder) / rounder;
71}
72 
73function getClosestValueIndex(values: number[], nextValue: number) {
74  if (values.length === 1) return 0;
75  const distances = values.map((value) => Math.abs(value - nextValue));
76  const closestDistance = Math.min(...distances);
77  return distances.indexOf(closestDistance);
78}
79 
80interface ThumbData {
81  id: string;
82// … truncated