yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 17:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance annotation canvas toolbar responsiveness, group controls

Browse Source
This commit is contained in:
Yusuf İpek
2026-02-21 20:27:19 +03:00
parent d731c9434a
commit fc047841cf
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/annotation-canvas.tsx
+34 -28
View File
@@ -207,41 +207,47 @@ export const AnnotationCanvas = forwardRef<AnnotationCanvasHandle, AnnotationCan
/> />
{/* Toolbar */} {/* Toolbar */}
<div className="absolute top-3 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-background/90 backdrop-blur-sm rounded-lg px-3 py-2 shadow-lg border z-30"> <div className="absolute top-3 left-1/2 -translate-x-1/2 flex items-center justify-center flex-wrap gap-x-2 gap-y-2 w-[calc(100%-24px)] max-w-fit bg-background/90 backdrop-blur-sm rounded-lg px-3 py-2 shadow-lg border z-30">
{/* Colors */} {/* Colors */}
{COLORS.map(c => ( <div className="flex items-center justify-center flex-wrap gap-1.5">
<button {COLORS.map(c => (
key={c} <button
className="w-6 h-6 rounded-full border-2 transition-transform hover:scale-110 shrink-0" key={c}
style={{ className="w-6 h-6 rounded-full border-2 transition-transform hover:scale-110 shrink-0"
backgroundColor: c, style={{
borderColor: color === c ? 'white' : 'transparent', backgroundColor: c,
boxShadow: color === c ? `0 0 0 2px ${c}` : 'none', borderColor: color === c ? 'white' : 'transparent',
}} boxShadow: color === c ? `0 0 0 2px ${c}` : 'none',
onClick={() => setColor(c)} }}
/> onClick={() => setColor(c)}
))} />
))}
</div>
<div className="w-px h-6 bg-border mx-1" /> <div className="hidden sm:block w-px h-6 bg-border mx-1" />
{/* Brush size */} {/* Brush size */}
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setWidth(w => Math.max(MIN_WIDTH, w - 1))}> <div className="flex items-center gap-1">
<Minus className="h-3 w-3" /> <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setWidth(w => Math.max(MIN_WIDTH, w - 1))}>
</Button> <Minus className="h-3 w-3" />
<span className="text-xs tabular-nums w-4 text-center">{width}</span> </Button>
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setWidth(w => Math.min(MAX_WIDTH, w + 1))}> <span className="text-xs tabular-nums w-4 text-center">{width}</span>
<Plus className="h-3 w-3" /> <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setWidth(w => Math.min(MAX_WIDTH, w + 1))}>
</Button> <Plus className="h-3 w-3" />
</Button>
</div>
<div className="w-px h-6 bg-border mx-1" /> <div className="hidden sm:block w-px h-6 bg-border mx-1" />
{/* Actions */} {/* Actions */}
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleUndo} disabled={strokes.length === 0} title="Undo"> <div className="flex items-center gap-1">
<Undo2 className="h-4 w-4" /> <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleUndo} disabled={strokes.length === 0} title="Undo">
</Button> <Undo2 className="h-4 w-4" />
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleClear} disabled={strokes.length === 0} title="Clear all"> </Button>
<Trash2 className="h-4 w-4" /> <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:bg-destructive/10" onClick={handleClear} disabled={strokes.length === 0} title="Clear all">
</Button> <Trash2 className="h-4 w-4" />
</Button>
</div>
</div> </div>
</div> </div>
); );