A canvas-rendered quiet dot grid that clears space around region boundaries and a carried object's footprint, and tints near a host-selected drop target, for drag-and-drop surfaces.
"use client";
import * as React from "react";
import SpatialFieldCanvas, {
SpatialFieldController,
} from "@/components/ui/spatial-field";
import type { SpatialFieldRect } from "@/components/ui/spatial-field";
const REGION: SpatialFieldRect = { x: 40, y: 40, width: 220, height: 140 };
export default function SpatialFieldDemo() {
const containerRef = React.useRef<HTMLDivElement>(null);
const controllerRef = React.useRef<SpatialFieldController | null>(null);
if (!controllerRef.current)
controllerRef.current = new SpatialFieldController();
const controller = controllerRef.current;
React.useEffect(() => {
controller.setScene({ regions: [{ id: "drop-zone", rect: REGION }] });
}, [controller]);
const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
const bounds = containerRef.current?.getBoundingClientRect();
if (!bounds) return;
const x = event.clientX - bounds.left;
const y = event.clientY - bounds.top;
const carried: SpatialFieldRect = {
x: x - 28,
y: y - 28,
width: 56,
height: 56,
};
const over =
x >= REGION.x &&
x <= REGION.x + REGION.width &&
y >= REGION.y &&
y <= REGION.y + REGION.height;
controller.setProjection(carried, over ? "drop-zone" : null);
};
const handlePointerLeave = () => {
controller.endProjection(false);
};
return (
<div
ref={containerRef}
onPointerMove={handlePointerMove}
onPointerLeave={handlePointerLeave}
className="relative h-screen w-full overflow-hidden"
style={{ background: "var(--mu-page)" }}
>
<SpatialFieldCanvas controller={controller} />
<div
className="pointer-events-none absolute rounded-[18px] border border-black/10 dark:border-white/10"
style={{
left: REGION.x,
top: REGION.y,
width: REGION.width,
height: REGION.height,
}}
/>
</div>
);
}