Skip to content

Commit 5244173

Browse files
yinanazhouyinanazhou
committed
style: prettier format
1 parent 9fc3e49 commit 5244173

File tree

7 files changed

+57
-47
lines changed

7 files changed

+57
-47
lines changed

‎src/components/AnnotationCanvas.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,21 @@ function getClassName(classId: number): string {
2626
return CLASSES.find((c) => c.id === classId)?.name ?? 'unknown';
2727
}
2828

29-
export default function AnnotationCanvas({ image, isHelpOpen, onToggleHelp }: AnnotationCanvasProps) {
29+
export default function AnnotationCanvas({
30+
image,
31+
isHelpOpen,
32+
onToggleHelp,
33+
}: AnnotationCanvasProps) {
3034
const canvasRef = useRef<HTMLCanvasElement>(null);
3135
const containerRef = useRef<HTMLDivElement>(null);
3236
const rafId = useRef<number>(0);
3337
// Getter function ref — populated after useCanvasInteraction initializes
3438
const getDrawingStateRef = useRef<() => DrawingState>(() => ({
35-
isDrawing: false, startX: 0, startY: 0, currentX: 0, currentY: 0,
39+
isDrawing: false,
40+
startX: 0,
41+
startY: 0,
42+
currentX: 0,
43+
currentY: 0,
3644
}));
3745

3846
const draw = useCallback(() => {
@@ -41,10 +49,8 @@ export default function AnnotationCanvas({ image, isHelpOpen, onToggleHelp }: An
4149
const ctx = canvas.getContext('2d');
4250
if (!ctx) return;
4351

44-
const {
45-
zoom, panX, panY,
46-
annotations, boxOpacity, showLabels, selectedId, activeClassId,
47-
} = useAppStore.getState();
52+
const { zoom, panX, panY, annotations, boxOpacity, showLabels, selectedId, activeClassId } =
53+
useAppStore.getState();
4854
const dpr = window.devicePixelRatio || 1;
4955

5056
// Clear
@@ -129,8 +135,7 @@ export default function AnnotationCanvas({ image, isHelpOpen, onToggleHelp }: An
129135
rafId.current = requestAnimationFrame(draw);
130136
}, [draw]);
131137

132-
const { getDrawingState, cancelDrawing } =
133-
useCanvasInteraction(canvasRef, requestRedraw);
138+
const { getDrawingState, cancelDrawing } = useCanvasInteraction(canvasRef, requestRedraw);
134139
useEffect(() => {
135140
getDrawingStateRef.current = getDrawingState;
136141
}, [getDrawingState]);
@@ -152,7 +157,12 @@ export default function AnnotationCanvas({ image, isHelpOpen, onToggleHelp }: An
152157

153158
useAppStore.getState().setCanvasSize(containerWidth, containerHeight);
154159

155-
const fitZoom = computeFitZoom(containerWidth, containerHeight, image.naturalWidth, image.naturalHeight);
160+
const fitZoom = computeFitZoom(
161+
containerWidth,
162+
containerHeight,
163+
image.naturalWidth,
164+
image.naturalHeight,
165+
);
156166

157167
const panX = (containerWidth - image.naturalWidth * fitZoom) / 2;
158168
const panY = (containerHeight - image.naturalHeight * fitZoom) / 2;

‎src/components/ExportPanel.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ export default function ExportPanel() {
4545
if (hasImage && (session.imageWidth !== imageWidth || session.imageHeight !== imageHeight)) {
4646
const proceed = window.confirm(
4747
`Image dimensions mismatch:\n` +
48-
`Current: ${imageWidth}×${imageHeight}\n` +
49-
`JSON: ${session.imageWidth}×${session.imageHeight}\n\n` +
50-
`Import anyway? Annotations may not align correctly.`
48+
`Current: ${imageWidth}×${imageHeight}\n` +
49+
`JSON: ${session.imageWidth}×${session.imageHeight}\n\n` +
50+
`Import anyway? Annotations may not align correctly.`,
5151
);
5252
if (!proceed) return;
5353
}

‎src/components/ImageLoader.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,9 @@ export default function ImageLoader({ onLoadImage, error }: ImageLoaderProps) {
7272
d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
7373
/>
7474
</svg>
75-
<p className="text-gray-600 font-medium mb-1">
76-
Drop image here or click to browse
77-
</p>
75+
<p className="text-gray-600 font-medium mb-1">Drop image here or click to browse</p>
7876
<p className="text-gray-400 text-sm">Supports PNG, JPEG, WebP</p>
79-
{error && (
80-
<p className="text-red-500 text-sm mt-3">{error}</p>
81-
)}
77+
{error && <p className="text-red-500 text-sm mt-3">{error}</p>}
8278
<input
8379
ref={inputRef}
8480
type="file"

‎src/components/StatusBar.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,7 @@ export default function StatusBar() {
3737

3838
{/* Cursor coordinates */}
3939
<span className="tabular-nums w-32">
40-
{cursorImageCoords
41-
? `X: ${cursorImageCoords[0]} Y: ${cursorImageCoords[1]}`
42-
: '—'}
40+
{cursorImageCoords ? `X: ${cursorImageCoords[0]} Y: ${cursorImageCoords[1]}` : '—'}
4341
</span>
4442

4543
{/* Spacer */}

‎src/components/Toolbar.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,7 @@ export default function Toolbar({ onToggleHelp }: ToolbarProps) {
3434
}`}
3535
style={{
3636
boxShadow:
37-
activeClassId === cls.id
38-
? `0 0 0 2px white, 0 0 0 4px ${cls.color}`
39-
: undefined,
37+
activeClassId === cls.id ? `0 0 0 2px white, 0 0 0 4px ${cls.color}` : undefined,
4038
}}
4139
aria-label={`Select class: ${cls.name} (${cls.shortcut})`}
4240
>
@@ -45,9 +43,7 @@ export default function Toolbar({ onToggleHelp }: ToolbarProps) {
4543
style={{ backgroundColor: cls.color }}
4644
/>
4745
<span>{cls.name}</span>
48-
<kbd className="text-[10px] text-gray-400 bg-gray-100 px-1 rounded">
49-
{cls.shortcut}
50-
</kbd>
46+
<kbd className="text-[10px] text-gray-400 bg-gray-100 px-1 rounded">{cls.shortcut}</kbd>
5147
</button>
5248
))}
5349
</div>

‎src/hooks/useCanvasInteraction.ts‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,29 @@ export function useCanvasInteraction(
4141
}, [requestRedraw]);
4242

4343
// Apply zoom toward a given screen-space point
44-
const applyZoom = useCallback((newZoom: number, screenX: number, screenY: number) => {
45-
const { zoom: oldZoom, panX, panY, imageWidth, imageHeight } = useAppStore.getState();
46-
47-
const canvas = canvasRef.current;
48-
const minZoom = canvas && imageWidth && imageHeight
49-
? computeFitZoom(canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1), imageWidth, imageHeight)
50-
: MIN_ZOOM;
51-
52-
const clamped = clamp(newZoom, minZoom, MAX_ZOOM);
53-
if (clamped === oldZoom) return;
54-
const newPanX = screenX - (screenX - panX) * (clamped / oldZoom);
55-
const newPanY = screenY - (screenY - panY) * (clamped / oldZoom);
56-
useAppStore.getState().setViewport(clamped, newPanX, newPanY);
57-
}, [canvasRef]);
44+
const applyZoom = useCallback(
45+
(newZoom: number, screenX: number, screenY: number) => {
46+
const { zoom: oldZoom, panX, panY, imageWidth, imageHeight } = useAppStore.getState();
47+
48+
const canvas = canvasRef.current;
49+
const minZoom =
50+
canvas && imageWidth && imageHeight
51+
? computeFitZoom(
52+
canvas.width / (window.devicePixelRatio || 1),
53+
canvas.height / (window.devicePixelRatio || 1),
54+
imageWidth,
55+
imageHeight,
56+
)
57+
: MIN_ZOOM;
58+
59+
const clamped = clamp(newZoom, minZoom, MAX_ZOOM);
60+
if (clamped === oldZoom) return;
61+
const newPanX = screenX - (screenX - panX) * (clamped / oldZoom);
62+
const newPanY = screenY - (screenY - panY) * (clamped / oldZoom);
63+
useAppStore.getState().setViewport(clamped, newPanX, newPanY);
64+
},
65+
[canvasRef],
66+
);
5867

5968
useEffect(() => {
6069
const canvas = canvasRef.current;
@@ -142,11 +151,7 @@ export function useCanvasInteraction(
142151
const dx = e.clientX - panStart.current.x;
143152
const dy = e.clientY - panStart.current.y;
144153
const { zoom } = useAppStore.getState();
145-
useAppStore.getState().setViewport(
146-
zoom,
147-
panOrigin.current.x + dx,
148-
panOrigin.current.y + dy,
149-
);
154+
useAppStore.getState().setViewport(zoom, panOrigin.current.x + dx, panOrigin.current.y + dy);
150155
};
151156

152157
const onPointerUp = (e: PointerEvent) => {

‎src/lib/export.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,12 @@ export async function importJSON(file: File): Promise<AnnotationSession> {
7575
}
7676

7777
for (const ann of data.annotations) {
78-
if (!ann.id || typeof ann.classId !== 'number' || !Array.isArray(ann.bbox) || ann.bbox.length !== 4) {
78+
if (
79+
!ann.id ||
80+
typeof ann.classId !== 'number' ||
81+
!Array.isArray(ann.bbox) ||
82+
ann.bbox.length !== 4
83+
) {
7984
throw new Error('Invalid annotation entry in JSON');
8085
}
8186
}

0 commit comments

Comments
 (0)