Function Cropper

apps/desktop/src/components/Cropper.tsx:234–1334

(
	props: ParentProps<{
		onCropChange?: (bounds: CropBounds) => void;
		onInteraction?: (interacting: boolean) => void;
		onContextMenu?: (event: PointerEvent) => void;
		ref?: CropperRef | ((ref: CropperRef) => void);
		class?: string;
		minSize?: Vec2;
		maxSize?: Vec2;
		targetSize?: Vec2;
		initialCrop?: CropBounds | (() => CropBounds | undefined);
		aspectRatio?: Ratio;
		showBounds?: boolean;
		snapToRatioEnabled?: boolean;
		useBackdropFilter?: boolean;
		allowLightMode?: boolean;
	}>,
)

};

export function Cropper(
	props: ParentProps<{
		onCropChange?: (bounds: CropBounds) => void;
		onInteraction?: (interacting: boolean) => void;
		onContextMenu?: (event: PointerEvent) => void;
		ref?: CropperRef | ((ref: CropperRef) => void);
		class?: string;
		minSize?: Vec2;
		maxSize?: Vec2;
		targetSize?: Vec2;
		initialCrop?: CropBounds | (() => CropBounds | undefined);
		aspectRatio?: Ratio;
		showBounds?: boolean;
		snapToRatioEnabled?: boolean;
		useBackdropFilter?: boolean;
		allowLightMode?: boolean;
	}>,
) {
	let containerRef: HTMLDivElement | undefined;
	let regionRef: HTMLDivElement | undefined;
	let occTopRef: HTMLDivElement | undefined;
	let occBottomRef: HTMLDivElement | undefined;
	let occLeftRef: HTMLDivElement | undefined;
	let occRightRef: HTMLDivElement | undefined;

	const resolvedChildren = children(() => props.children);

	// raw bounds are in "logical" coordinates (not scaled to targetSize)
	const [rawBounds, setRawBounds] = createSignal<CropBounds>(CROP_ZERO);
	const [displayRawBounds, setDisplayRawBounds] =
		createSignal<CropBounds>(CROP_ZERO);

	const [isAnimating, setIsAnimating] = createSignal(false);
	let animationFrameId: number | null = null;
	const [isReady, setIsReady] = createSignal(false);

	function stopAnimation() {
		if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
		animationFrameId = null;
		setIsAnimating(false);
		setDisplayRawBounds(rawBounds());
	}

	const boundsTooSmall = createMemo(
		() => displayRawBounds().width <= 30 || displayRawBounds().height <= 30,
	);

	const [mouseState, setMouseState] = createStore<
		(
			| { drag: null | "region" | "overlay" }
			| { drag: "handle"; cursor: string }
		) & { hoveringHandle: HandleSide | null }
	>({ drag: null, hoveringHandle: null });

	const resizing = () =>
		mouseState.drag === "handle" || mouseState.drag === "overlay";
	const cursorStyle = () => {
		if (mouseState.drag === "region" || mouseState.drag === "overlay")