Bounding Box Selector

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { ReactNode, CSSProperties } from "react";
5 
6export interface BoundingBoxSelectorProps {
7  children?: ReactNode;
8  borderColor?: string;
9  handleColor?: string;
10  borderWidth?: number;
11  appearAt?: number;
12  background?: string;
13  speed?: number;
14  className?: string;
15  fps?: number;
16  durationInFrames?: number;
17  width?: number;
18  height?: number;
19}
20 
21const FONT_FAMILY =
22  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
23 
24const DefaultPlaceholder = () => (
25  <div
26    style={{
27      alignItems: "center",
28      background: "white",
29      borderRadius: 16,
30      boxShadow: "0 12px 40px rgba(0,0,0,0.08)",
31      color: "#71717a",
32      display: "flex",
33      fontFamily: FONT_FAMILY,
34      fontSize: 24,
35      fontWeight: 600,
36      height: 280,
37      justifyContent: "center",
38      letterSpacing: "-0.02em",
39      width: 480,
40    }}
41  >
42    Selected element
43  </div>
44);
45 
46const Handle = ({ color, style }: { color: string; style: CSSProperties }) => (
47  <div
48    style={{
49      background: "white",
50      border: `2px solid ${color}`,
51      borderRadius: 2,
52      height: 10,
53      position: "absolute",
54      width: 10,
55      ...style,
56    }}
57  />
58);
59 
60export const BoundingBoxSelector = ({
61  children,
62  borderColor = "#0ea5e9",
63  handleColor = "#0ea5e9",
64  borderWidth = 2,
65  appearAt = 15,
66  background = "#fafafa",
67  speed = 1,
68  className,
69  fps = 30,
70  durationInFrames = 90,
71  width = 1000,
72  height = 500,
73}: BoundingBoxSelectorProps) => {
74  const safeSpeed = Math.max(0.01, speed);
75  const durationMs = (durationInFrames / fps) * 1000;
76  const frameMs = 1000 / fps;
77  const appearDelayMs = (appearAt * frameMs) / safeSpeed;
78  const animationDurationMs = (durationMs - appearDelayMs) / safeSpeed;
79 
80  const content = children ?? <DefaultPlaceholder />;
81 
82  const containerStyle: CSSProperties = {
83    alignItems: "center",
84    background,
85    display: "flex",
86    height,
87    justifyContent: "center",
88    overflow: "hidden",
89    position: "relative",
90    width,
91  };
92 
93  return (
94    <Timegroup
95      className={className}
96      duration={`${durationMs}ms`}
97      mode="fixed"
98      style={containerStyle}
99    >
100      <>
101        <style>{`
102          @keyframes framecn-bbox-appear {
103            from {
104              opacity: 0;
105              transform: scale(0.96);
106            }
107            to {
108              opacity: 1;
109              transform: scale(1);
110            }
111          }
112// … truncated