9fe5b32a69
Extends the 4-corner L-bracket handles with 4 tick-mark edge handles (short lines along each edge), enabling single-axis resize from any edge. Updates applyHandleDrag to route each handle to the correct axis. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render } from 'vitest-browser-svelte';
|
|
import AnnotationShape from './AnnotationShape.svelte';
|
|
import type { Annotation } from '$lib/types';
|
|
|
|
const annotation: Annotation = {
|
|
id: 'ann-1',
|
|
documentId: 'doc-1',
|
|
pageNumber: 1,
|
|
x: 0.1,
|
|
y: 0.2,
|
|
width: 0.3,
|
|
height: 0.4,
|
|
color: '#00c7b1',
|
|
createdAt: '2026-01-01T00:00:00Z'
|
|
};
|
|
|
|
describe('AnnotationShape', () => {
|
|
describe('isResizable prop', () => {
|
|
it('does not render AnnotationEditOverlay when isResizable is false', async () => {
|
|
render(AnnotationShape, {
|
|
annotation,
|
|
isHovered: false,
|
|
isActive: false,
|
|
isResizable: false,
|
|
onclick: () => {},
|
|
onpointerenter: () => {},
|
|
onpointerleave: () => {}
|
|
});
|
|
|
|
const handles = document.querySelectorAll('[data-handle]');
|
|
expect(handles).toHaveLength(0);
|
|
});
|
|
|
|
it('renders AnnotationEditOverlay when isResizable is true', async () => {
|
|
render(AnnotationShape, {
|
|
annotation,
|
|
isHovered: false,
|
|
isActive: true,
|
|
isResizable: true,
|
|
onclick: () => {},
|
|
onpointerenter: () => {},
|
|
onpointerleave: () => {}
|
|
});
|
|
|
|
const handles = document.querySelectorAll('[data-handle]');
|
|
expect(handles).toHaveLength(8);
|
|
});
|
|
});
|
|
});
|