Spaces:
Sleeping
Sleeping
File size: 1,694 Bytes
8608e55 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/**
* ShapeOverlay.jsx
*
* This component renders an SVG overlay on top of an image to visually highlight
* detected circles and text regions. Each shape is clickable, allowing users
* to select a shape and view detailed information via a popup.
*/
import React from "react";
function ShapeOverlay({ imageInfo, circles, texts, setSelectedShape }) {
const handleShapeClick = (e, shape) => {
e.preventDefault();
e.stopPropagation();
console.log("Shape clicked:", shape);
setSelectedShape(shape);
};
return (
<svg
className="overlay-svg"
width={imageInfo.clientWidth}
height={imageInfo.clientHeight}
viewBox={`0 0 ${imageInfo.clientWidth} ${imageInfo.clientHeight}`}
style={{
position: "absolute",
top: 0,
left: 0,
pointerEvents: "auto",
zIndex: 10,
transformOrigin: "0 0",
}}
>
{circles.map((c) => (
<circle
key={`circle-${c.id}`}
cx={c.x}
cy={c.y}
r={c.r}
fill="rgba(255, 0, 0, 0.22)"
stroke="red"
strokeWidth="2"
onClick={(e) => handleShapeClick(e, c)}
style={{ cursor: "pointer", pointerEvents: "all" }}
/>
))}
{texts.map((t) => (
<rect
key={`text-${t.id}`}
x={t.x1}
y={t.y1}
width={t.x2 - t.x1}
height={t.y2 - t.y1}
fill="rgba(0,255,0,0.18)"
stroke="green"
strokeWidth="2"
onClick={(e) => handleShapeClick(e, t)}
style={{ cursor: "pointer", pointerEvents: "all" }}
/>
))}
</svg>
);
}
export default ShapeOverlay;
|