feat(P4A.T3): annotator toolbar — tool/color/width/undo/redo controls
This commit is contained in:
byGalax
@@ -34,15 +34,13 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
|
||||
// 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);
|
||||
const [tool, setTool] = useState<AnnotatorTool>('pen');
|
||||
const [color, setColor] = useState<AnnotatorColor>('#ef4444');
|
||||
const [width, setWidth] = useState<AnnotatorWidth>(4);
|
||||
|
||||
const draftRef = useRef<AnnotatorOp | null>(null);
|
||||
const [draftTick, setDraftTick] = useState(0);
|
||||
|
||||
void _setTool; void _setColor; void _setWidth; void redoStack;
|
||||
|
||||
useEffect(() => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
@@ -236,13 +234,113 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
|
||||
)}
|
||||
</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' })}
|
||||
<footer className="flex shrink-0 flex-wrap items-center gap-4 border-t border-line/40 bg-surface-2 px-4 py-3">
|
||||
<div className="flex items-center gap-1">
|
||||
{(['pen', 'highlighter', 'arrow', 'rect', 'circle', 'text'] as AnnotatorTool[]).map((id) => {
|
||||
const label = t('app:annotator.tool.' + id, {
|
||||
defaultValue:
|
||||
id === 'pen' ? 'Stift'
|
||||
: id === 'highlighter' ? 'Marker'
|
||||
: id === 'arrow' ? 'Pfeil'
|
||||
: id === 'rect' ? 'Rechteck'
|
||||
: id === 'circle' ? 'Kreis'
|
||||
: 'Text',
|
||||
});
|
||||
const active = tool === id;
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
onClick={() => setTool(id)}
|
||||
aria-pressed={active}
|
||||
title={label}
|
||||
className={
|
||||
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-xs font-semibold transition ' +
|
||||
(active
|
||||
? 'bg-accent/20 text-accent ring-2 ring-accent/40'
|
||||
: 'bg-surface-3 text-fg-muted hover:bg-surface hover:text-fg')
|
||||
}
|
||||
>
|
||||
{toolGlyph(id)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
<div className="h-6 w-px bg-line/40" aria-hidden />
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{(['#ef4444', '#3b82f6', '#22c55e', '#facc15', '#a855f7', '#ffffff'] as AnnotatorColor[]).map((c) => {
|
||||
const active = color === c;
|
||||
return (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => setColor(c)}
|
||||
aria-pressed={active}
|
||||
aria-label={c}
|
||||
className={
|
||||
'h-6 w-6 cursor-pointer rounded-full border-2 transition ' +
|
||||
(active ? 'border-fg scale-110' : 'border-line/40 hover:scale-105')
|
||||
}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-line/40" aria-hidden />
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{([2, 4, 8] as AnnotatorWidth[]).map((w) => {
|
||||
const active = width === w;
|
||||
return (
|
||||
<button
|
||||
key={w}
|
||||
type="button"
|
||||
onClick={() => setWidth(w)}
|
||||
aria-pressed={active}
|
||||
title={w + 'px'}
|
||||
className={
|
||||
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md transition ' +
|
||||
(active
|
||||
? 'bg-accent/20 ring-2 ring-accent/40'
|
||||
: 'bg-surface-3 hover:bg-surface')
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="rounded-full bg-fg"
|
||||
style={{ width: w + 2 + 'px', height: w + 2 + 'px' }}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-line/40" aria-hidden />
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleUndo}
|
||||
disabled={ops.length === 0}
|
||||
title={t('app:annotator.undo', { defaultValue: 'Rückgängig (Ctrl+Z)' })}
|
||||
className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-surface-3 text-fg-muted transition hover:bg-surface hover:text-fg disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
↶
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRedo}
|
||||
disabled={redoStack.length === 0}
|
||||
title={t('app:annotator.redo', { defaultValue: 'Wiederholen (Ctrl+Y)' })}
|
||||
className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-surface-3 text-fg-muted transition hover:bg-surface hover:text-fg disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
↷
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReset}
|
||||
@@ -265,6 +363,17 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
|
||||
);
|
||||
}
|
||||
|
||||
function toolGlyph(t: AnnotatorTool): string {
|
||||
switch (t) {
|
||||
case 'pen': return '✎';
|
||||
case 'highlighter': return '🖍';
|
||||
case 'arrow': return '↗';
|
||||
case 'rect': return '▭';
|
||||
case 'circle': return '◯';
|
||||
case 'text': return 'T';
|
||||
}
|
||||
}
|
||||
|
||||
function renderOp(ctx: CanvasRenderingContext2D, op: AnnotatorOp): void {
|
||||
ctx.save();
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
Reference in New Issue
Block a user