cropper

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { Slot as SlotPrimitive } from "radix-ui";
5import * as React from "react";
6import { useComposedRefs } from "@/lib/compose-refs";
7import { cn } from "@/lib/utils";
8import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
9import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
10import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
11 
12const ROOT_NAME = "Cropper";
13const ROOT_IMPL_NAME = "CropperImpl";
14const IMAGE_NAME = "CropperImage";
15const VIDEO_NAME = "CropperVideo";
16const AREA_NAME = "CropperArea";
17 
18interface Point {
19  x: number;
20  y: number;
21}
22 
23interface GestureEvent extends UIEvent {
24  rotation: number;
25  scale: number;
26  clientX: number;
27  clientY: number;
28}
29 
30interface Size {
31  width: number;
32  height: number;
33}
34 
35interface Area {
36  width: number;
37  height: number;
38  x: number;
39  y: number;
40}
41 
42interface MediaSize {
43  width: number;
44  height: number;
45  naturalWidth: number;
46  naturalHeight: number;
47}
48 
49type Shape = "rectangle" | "circle";
50type ObjectFit = "contain" | "cover" | "horizontal-cover" | "vertical-cover";
51 
52interface DivProps extends React.ComponentProps<"div"> {
53  asChild?: boolean;
54}
55 
56const MAX_CACHE_SIZE = 200;
57const DPR = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
58 
59const rotationSizeCache = new Map<string, Size>();
60const cropSizeCache = new Map<string, Size>();
61const croppedAreaCache = new Map<
62  string,
63  { croppedAreaPercentages: Area; croppedAreaPixels: Area }
64>();
65const onPositionClampCache = new Map<string, Point>();
66 
67function clamp(value: number, min: number, max: number): number {
68  return Math.min(Math.max(value, min), max);
69}
70 
71function quantize(n: number, step = 2 / DPR): number {
72  return Math.round(n / step) * step;
73}
74 
75function quantizePosition(n: number, step = 4 / DPR): number {
76  return Math.round(n / step) * step;
77}
78 
79function quantizeZoom(n: number, step = 0.01): number {
80  return Math.round(n / step) * step;
81}
82 
83function quantizeRotation(n: number, step = 1.0): number {
84  return Math.round(n / step) * step;
85}
86 
87function snapToDevicePixel(n: number): number {
88  return Math.round(n * DPR) / DPR;
89}
90 
91function lruGet<K, V>(map: Map<K, V>, key: K): V | undefined {
92  const v = map.get(key);
93  if (v !== undefined) {
94    map.delete(key);
95    map.set(key, v);
96  }
97  return v;
98}
99 
100function lruSet<K, V>(
101  map: Map<K, V>,
102  key: K,
103  val: V,
104// … truncated