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: Add a close button to the annotation toolbar and ensure annotation mode is correctly reset upon removal.

Browse Source
This commit is contained in:
Yusuf İpek
2026-02-22 06:30:10 +03:00
parent fc047841cf
commit 87d6c0ab0a
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/annotation-canvas.tsx
+11 -4
View File
@@ -2,7 +2,7 @@
import { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from 'react'; import { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Undo2, Trash2, Minus, Plus } from 'lucide-react'; import { Undo2, Trash2, Minus, Plus, X } from 'lucide-react';
export interface AnnotationStroke { export interface AnnotationStroke {
points: { x: number; y: number }[]; points: { x: number; y: number }[];
@@ -176,7 +176,7 @@ export const AnnotationCanvas = forwardRef<AnnotationCanvasHandle, AnnotationCan
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className="absolute inset-0 z-20 cursor-pointer" className="absolute inset-0 z-[60] cursor-pointer"
onClick={handleViewClick} onClick={handleViewClick}
title="Click to dismiss annotation" title="Click to dismiss annotation"
> >
@@ -191,7 +191,7 @@ export const AnnotationCanvas = forwardRef<AnnotationCanvasHandle, AnnotationCan
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className="absolute inset-0 z-20" className="absolute inset-0 z-[60]"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<canvas <canvas
@@ -207,7 +207,7 @@ export const AnnotationCanvas = forwardRef<AnnotationCanvasHandle, AnnotationCan
/> />
{/* Toolbar */} {/* Toolbar */}
<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"> <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-[70]">
{/* Colors */} {/* Colors */}
<div className="flex items-center justify-center flex-wrap gap-1.5"> <div className="flex items-center justify-center flex-wrap gap-1.5">
{COLORS.map(c => ( {COLORS.map(c => (
@@ -248,6 +248,13 @@ export const AnnotationCanvas = forwardRef<AnnotationCanvasHandle, AnnotationCan
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
<div className="hidden sm:block w-px h-6 bg-border mx-1" />
{/* Close */}
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={onCancel} title="Close annotation tool">
<X className="h-4 w-4" />
</Button>
</div> </div>
</div> </div>
); );
components/video-page-content.tsx
+1 -1
View File
@@ -3257,7 +3257,7 @@ export function VideoPageContent({ mode, videoId, projectId: propProjectId }: Vi
<span className="text-xs text-violet-400 font-medium">Annotation attached</span> <span className="text-xs text-violet-400 font-medium">Annotation attached</span>
<button <button
className="ml-auto text-xs text-muted-foreground hover:text-destructive transition-colors" className="ml-auto text-xs text-muted-foreground hover:text-destructive transition-colors"
onClick={() => setAnnotationStrokes(null)} onClick={() => { setAnnotationStrokes(null); setIsAnnotating(false); }}
> >
Remove Remove
</button> </button>