32 lines
768 B
TypeScript
32 lines
768 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import type { CanvasViewport } from "@/domain/design";
|
||
|
|
import type { CanvasAnnotation } from "@/ui/components/PromptComposer";
|
||
|
|
|
||
|
|
export function CanvasAnnotations({
|
||
|
|
annotations,
|
||
|
|
viewport
|
||
|
|
}: {
|
||
|
|
annotations: CanvasAnnotation[];
|
||
|
|
viewport: CanvasViewport;
|
||
|
|
}) {
|
||
|
|
if (annotations.length === 0) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="canvas-annotation-layer" aria-hidden="true">
|
||
|
|
{annotations.map((annotation) => (
|
||
|
|
<span
|
||
|
|
key={annotation.id}
|
||
|
|
className="canvas-annotation-marker"
|
||
|
|
style={{
|
||
|
|
left: viewport.x + annotation.x * viewport.k,
|
||
|
|
top: viewport.y + annotation.y * viewport.k
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<b>{annotation.index}</b>
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|