feat(annotations): pass isResizable to AnnotationShape based on selection + transcribeMode
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -107,6 +107,7 @@ const containerStyle = $derived(
|
|||||||
annotation={annotation}
|
annotation={annotation}
|
||||||
isHovered={hoveredId === annotation.id}
|
isHovered={hoveredId === annotation.id}
|
||||||
isActive={annotation.id === activeAnnotationId}
|
isActive={annotation.id === activeAnnotationId}
|
||||||
|
isResizable={canDraw && annotation.id === activeAnnotationId && !annotation.polygon}
|
||||||
faded={!dimmed && !!activeAnnotationId && annotation.id !== activeAnnotationId}
|
faded={!dimmed && !!activeAnnotationId && annotation.id !== activeAnnotationId}
|
||||||
dimmed={dimmed}
|
dimmed={dimmed}
|
||||||
blockNumber={blockNumbers[annotation.id]}
|
blockNumber={blockNumbers[annotation.id]}
|
||||||
|
|||||||
@@ -16,6 +16,17 @@ const annotation: Annotation = {
|
|||||||
createdAt: '2026-01-01T00:00:00Z'
|
createdAt: '2026-01-01T00:00:00Z'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const polygonAnnotation: Annotation = {
|
||||||
|
...annotation,
|
||||||
|
id: 'ann-poly',
|
||||||
|
polygon: [
|
||||||
|
[0.1, 0.2],
|
||||||
|
[0.4, 0.21],
|
||||||
|
[0.39, 0.29],
|
||||||
|
[0.11, 0.28]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
describe('AnnotationLayer', () => {
|
describe('AnnotationLayer', () => {
|
||||||
describe('dimmed prop', () => {
|
describe('dimmed prop', () => {
|
||||||
it('should hide block number badges when dimmed is true', async () => {
|
it('should hide block number badges when dimmed is true', async () => {
|
||||||
@@ -65,6 +76,60 @@ describe('AnnotationLayer', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('isResizable computation', () => {
|
||||||
|
it('passes isResizable=true when canDraw, annotation is active, and has no polygon', async () => {
|
||||||
|
render(AnnotationLayer, {
|
||||||
|
annotations: [annotation],
|
||||||
|
canDraw: true,
|
||||||
|
color: '#00c7b1',
|
||||||
|
activeAnnotationId: 'ann-1',
|
||||||
|
onDraw: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handles = document.querySelectorAll('[data-handle]');
|
||||||
|
expect(handles).toHaveLength(8);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes isResizable=false when annotation has a polygon', async () => {
|
||||||
|
render(AnnotationLayer, {
|
||||||
|
annotations: [polygonAnnotation],
|
||||||
|
canDraw: true,
|
||||||
|
color: '#00c7b1',
|
||||||
|
activeAnnotationId: 'ann-poly',
|
||||||
|
onDraw: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handles = document.querySelectorAll('[data-handle]');
|
||||||
|
expect(handles).toHaveLength(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes isResizable=false when canDraw is false', async () => {
|
||||||
|
render(AnnotationLayer, {
|
||||||
|
annotations: [annotation],
|
||||||
|
canDraw: false,
|
||||||
|
color: '#00c7b1',
|
||||||
|
activeAnnotationId: 'ann-1',
|
||||||
|
onDraw: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handles = document.querySelectorAll('[data-handle]');
|
||||||
|
expect(handles).toHaveLength(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes isResizable=false when annotation is not active', async () => {
|
||||||
|
render(AnnotationLayer, {
|
||||||
|
annotations: [annotation],
|
||||||
|
canDraw: true,
|
||||||
|
color: '#00c7b1',
|
||||||
|
activeAnnotationId: 'other-id',
|
||||||
|
onDraw: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handles = document.querySelectorAll('[data-handle]');
|
||||||
|
expect(handles).toHaveLength(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('flashAnnotationId prop', () => {
|
describe('flashAnnotationId prop', () => {
|
||||||
it('should apply annotation-flash class when flashAnnotationId matches', async () => {
|
it('should apply annotation-flash class when flashAnnotationId matches', async () => {
|
||||||
render(AnnotationLayer, {
|
render(AnnotationLayer, {
|
||||||
|
|||||||
Reference in New Issue
Block a user