cropper

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