Mini Map Panel
Panneau d'apercu de la vue montrant les limites du canvas, les marqueurs et la fenetre de zoom actuelle. Installez Mini Map Panel depuis le registre VLLNT UI avec la CLI shadcn.
Panneau d'apercu de la vue montrant les limites du canvas, les marqueurs et la fenetre de zoom actuelle. Fait partie de la famille data dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Mini Map Panel a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/mini-map-panel.jsonSource
import { cn } from "../../lib/utils";
export type MiniMapMarker = {
id: string;
label?: string;
x: number;
y: number;
};
export type MiniMapPanelProps = React.ComponentPropsWithoutRef<"div"> & {
markers?: MiniMapMarker[];
title?: string;
viewport: {
height: number;
width: number;
x: number;
y: number;
zoom: number;
};
world: {
height: number;
width: number;
};
};
const MiniMapPanel = ({
className,
markers = [],
ref,
title = "Overview",
viewport,
world,
...props
}: MiniMapPanelProps & { ref?: React.Ref<HTMLDivElement> }) => {
const viewportWidth = Math.max(
(viewport.width / viewport.zoom / world.width) * 100,
8,
);
const viewportHeight = Math.max(
(viewport.height / viewport.zoom / world.height) * 100,
8,
);
const viewportLeft = Math.min(
Math.max((viewport.x / world.width) * 100, 0),
100 - viewportWidth,
);
const viewportTop = Math.min(
Math.max((viewport.y / world.height) * 100, 0),
100 - viewportHeight,
);
return (
<div
className={cn(
"w-52 rounded-sm border border-border bg-background p-3 font-mono",
className,
)}
ref={ref}
{...props}
>
<div className="mb-3 flex items-center justify-between">
<div>
<div className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">
{title}
</div>
<div className="mt-1 text-xs text-muted-foreground">
Zoom {Math.round(viewport.zoom * 100)}%
</div>
</div>
</div>
<div className="relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background">
{markers.map((marker) => (
<div
className="absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground"
key={marker.id}
style={{
left: `${(marker.x / world.width) * 100}%`,
top: `${(marker.y / world.height) * 100}%`,
}}
title={marker.label}
/>
))}
<div
className="absolute border border-foreground/80 bg-transparent"
style={{
height: `${viewportHeight}%`,
left: `${viewportLeft}%`,
top: `${viewportTop}%`,
width: `${viewportWidth}%`,
}}
/>
</div>
</div>
);
};
MiniMapPanel.displayName = "MiniMapPanel";
export { MiniMapPanel };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.