streaper2/impact
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: add PhotoOverlay component for visualizing and editing impact coordinates

Browse Source
This commit is contained in:
streaper2
2026-05-07 21:07:55 +02:00
parent cea2fab989
commit 6892d55c65
4 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
backendia/dashboard/src/components/PhotoOverlay.tsx
View File

@@ -22,12 +22,12 @@ interface PhotoOverlayProps {
onImpactsChange?: (impacts: Impact[]) => void; onImpactsChange?: (impacts: Impact[]) => void;
} }
export default function PhotoOverlay({ export default function PhotoOverlay({
imageUrl, imageUrl,
impacts, impacts,
targetCorners, targetCorners,
isEditing = false, isEditing = false,
onImpactsChange onImpactsChange
}: PhotoOverlayProps) { }: PhotoOverlayProps) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -95,8 +95,8 @@ export default function PhotoOverlay({
}; };
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className={`relative w-full flex items-center justify-center bg-slate-900 rounded-2xl overflow-hidden border border-slate-800 shadow-2xl min-h-[400px] ${isEditing ? 'cursor-crosshair' : ''}`} className={`relative w-full flex items-center justify-center bg-slate-900 rounded-2xl overflow-hidden border border-slate-800 shadow-2xl min-h-[400px] ${isEditing ? 'cursor-crosshair' : ''}`}
onClick={handleImageClick} onClick={handleImageClick}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
@@ -104,9 +104,9 @@ export default function PhotoOverlay({
onMouseLeave={() => setDragIndex(null)} onMouseLeave={() => setDragIndex(null)}
> >
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={imageUrl} src={imageUrl}
alt="Target Analysis" alt="Target Analysis"
className="max-w-full max-h-[80vh] object-contain select-none" className="max-w-full max-h-[80vh] object-contain select-none"
draggable={false} draggable={false}
onLoad={(e) => { onLoad={(e) => {
@@ -114,9 +114,9 @@ export default function PhotoOverlay({
setDimensions({ width: img.clientWidth, height: img.clientHeight }); setDimensions({ width: img.clientWidth, height: img.clientHeight });
}} }}
/> />
{dimensions.width > 0 && ( {dimensions.width > 0 && (
<svg <svg
className="absolute pointer-events-none" className="absolute pointer-events-none"
viewBox={`0 0 ${dimensions.width} ${dimensions.height}`} viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
style={{ width: dimensions.width, height: dimensions.height }} style={{ width: dimensions.width, height: dimensions.height }}
@@ -172,7 +172,7 @@ export default function PhotoOverlay({
))} ))}
</svg> </svg>
)} )}
{isEditing && ( {isEditing && (
<div className="absolute bottom-4 right-4 bg-slate-950/80 backdrop-blur-md px-3 py-1.5 rounded-full text-[10px] font-bold text-indigo-400 border border-indigo-500/30"> <div className="absolute bottom-4 right-4 bg-slate-950/80 backdrop-blur-md px-3 py-1.5 rounded-full text-[10px] font-bold text-indigo-400 border border-indigo-500/30">
MODE ÉDITION : CLIC POUR AJOUTER • DRAG POUR DÉPLACER • CLIC DROIT POUR SUPPRIMER MODE ÉDITION : CLIC POUR AJOUTER • DRAG POUR DÉPLACER • CLIC DROIT POUR SUPPRIMER

1
backendia/uploads/data/.gitkeep
View File

@@ -1 +0,0 @@
# Keep directory structure

BIN
backendia/uploads/data/database.sqlite
View File

Binary file not shown.

1
backendia/uploads/images/.gitkeep
View File

@@ -1 +0,0 @@
# Keep directory structure