feat(P4A.T1): ImageAnnotator modal skeleton with canvas mount + op-stack types
This commit is contained in:
byGalax
@@ -0,0 +1,194 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import { XIcon } from './icons';
|
||||||
|
|
||||||
|
export type AnnotatorTool = 'pen' | 'arrow' | 'rect' | 'circle' | 'text' | 'highlighter';
|
||||||
|
export type AnnotatorColor = '#ef4444' | '#3b82f6' | '#22c55e' | '#facc15' | '#a855f7' | '#ffffff';
|
||||||
|
export type AnnotatorWidth = 2 | 4 | 8;
|
||||||
|
|
||||||
|
export interface AnnotatorOp {
|
||||||
|
tool: AnnotatorTool;
|
||||||
|
color: AnnotatorColor;
|
||||||
|
width: AnnotatorWidth;
|
||||||
|
points?: Array<{ x: number; y: number }>;
|
||||||
|
from?: { x: number; y: number };
|
||||||
|
to?: { x: number; y: number };
|
||||||
|
text?: string;
|
||||||
|
at?: { x: number; y: number };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
file: File;
|
||||||
|
onCancel: () => void;
|
||||||
|
onSave: (next: File) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ImageAnnotator({ file, onCancel, onSave }: Props) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||||
|
const imageRef = useRef<HTMLImageElement | null>(null);
|
||||||
|
const [imageLoaded, setImageLoaded] = useState(false);
|
||||||
|
const [ops, setOps] = useState<AnnotatorOp[]>([]);
|
||||||
|
const [redoStack, setRedoStack] = useState<AnnotatorOp[]>([]);
|
||||||
|
// tool/color/width are read by Task 2 (drawing engine) and Task 3 (toolbar).
|
||||||
|
// Defaults shown here are intentional so T2's pointer handlers work
|
||||||
|
// immediately with sensible behavior before T3's UI is wired.
|
||||||
|
const [tool, _setTool] = useState<AnnotatorTool>('pen');
|
||||||
|
const [color, _setColor] = useState<AnnotatorColor>('#ef4444');
|
||||||
|
const [width, _setWidth] = useState<AnnotatorWidth>(4);
|
||||||
|
|
||||||
|
void tool; void color; void width; void _setTool; void _setColor; void _setWidth; void redoStack;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const url = URL.createObjectURL(file);
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = () => {
|
||||||
|
imageRef.current = img;
|
||||||
|
setImageLoaded(true);
|
||||||
|
};
|
||||||
|
img.onerror = () => {
|
||||||
|
console.error('ImageAnnotator: failed to decode source image');
|
||||||
|
onCancel();
|
||||||
|
};
|
||||||
|
img.src = url;
|
||||||
|
return () => URL.revokeObjectURL(url);
|
||||||
|
}, [file, onCancel]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!imageLoaded) return;
|
||||||
|
const cv = canvasRef.current;
|
||||||
|
const img = imageRef.current;
|
||||||
|
if (!cv || !img) return;
|
||||||
|
cv.width = img.naturalWidth;
|
||||||
|
cv.height = img.naturalHeight;
|
||||||
|
const ctx = cv.getContext('2d');
|
||||||
|
if (!ctx) return;
|
||||||
|
ctx.drawImage(img, 0, 0);
|
||||||
|
for (const op of ops) {
|
||||||
|
renderOp(ctx, op);
|
||||||
|
}
|
||||||
|
}, [imageLoaded, ops]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onKey = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') onCancel();
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleUndo();
|
||||||
|
} else if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleRedo();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('keydown', onKey);
|
||||||
|
return () => window.removeEventListener('keydown', onKey);
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleUndo = () => {
|
||||||
|
setOps((cur) => {
|
||||||
|
if (cur.length === 0) return cur;
|
||||||
|
const next = cur.slice(0, -1);
|
||||||
|
setRedoStack((r) => [...r, cur[cur.length - 1]!]);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRedo = () => {
|
||||||
|
setRedoStack((r) => {
|
||||||
|
if (r.length === 0) return r;
|
||||||
|
const top = r[r.length - 1]!;
|
||||||
|
setOps((cur) => [...cur, top]);
|
||||||
|
return r.slice(0, -1);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
setOps([]);
|
||||||
|
setRedoStack([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
const cv = canvasRef.current;
|
||||||
|
if (!cv) return;
|
||||||
|
cv.toBlob((blob) => {
|
||||||
|
if (!blob) {
|
||||||
|
console.error('ImageAnnotator: toBlob returned null');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const baseName = file.name.replace(/\.[^.]+$/, '');
|
||||||
|
const next = new File([blob], baseName + '-annotated.png', {
|
||||||
|
type: 'image/png',
|
||||||
|
lastModified: Date.now(),
|
||||||
|
});
|
||||||
|
onSave(next);
|
||||||
|
}, 'image/png');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label={t('app:annotator.title', { defaultValue: 'Bild bearbeiten' })}
|
||||||
|
className="fixed inset-0 z-[80] flex flex-col bg-ink-950/95"
|
||||||
|
>
|
||||||
|
<header className="flex shrink-0 items-center justify-between border-b border-line/40 bg-surface-2 px-4 py-2">
|
||||||
|
<h2 className="font-display text-sm font-semibold text-fg">
|
||||||
|
{t('app:annotator.title', { defaultValue: 'Bild bearbeiten' })}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
aria-label={t('app:annotator.cancel', { defaultValue: 'Abbrechen' })}
|
||||||
|
className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg"
|
||||||
|
>
|
||||||
|
<XIcon className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="flex min-h-0 flex-1 items-center justify-center overflow-hidden p-6">
|
||||||
|
{imageLoaded ? (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
className="max-h-full max-w-full cursor-crosshair rounded-lg border border-line/40 bg-black shadow-2xl"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-fg-muted">
|
||||||
|
{t('app:annotator.loading', { defaultValue: 'Bild wird geladen…' })}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer className="flex shrink-0 items-center justify-between gap-3 border-t border-line/40 bg-surface-2 px-4 py-3">
|
||||||
|
<div className="text-xs text-fg-muted">
|
||||||
|
{ops.length === 0
|
||||||
|
? t('app:annotator.no_changes', { defaultValue: 'Keine Änderungen' })
|
||||||
|
: ops.length + ' ' + t('app:annotator.changes', { defaultValue: 'Änderungen' })}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleReset}
|
||||||
|
disabled={ops.length === 0}
|
||||||
|
className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-1.5 text-xs font-medium text-fg-muted transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{t('app:annotator.reset', { defaultValue: 'Zurücksetzen' })}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={!imageLoaded}
|
||||||
|
className="cursor-pointer rounded-md bg-accent px-4 py-1.5 text-xs font-semibold text-accent-fg transition hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{t('app:annotator.save', { defaultValue: 'Speichern' })}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stub — filled in by P4A.T2 with the actual draw switch per tool.
|
||||||
|
function renderOp(_ctx: CanvasRenderingContext2D, _op: AnnotatorOp): void {
|
||||||
|
// implemented in P4A.T2
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user