Handle negative height & width in image annotations (#7116)

* add fix

* remove debug code

* add test for unholy rectangles

* make test a bit more forgiving

* address pr review
This commit is contained in:
Scott Bell 2023-10-06 19:08:42 +02:00 committed by GitHub
parent 734a8dd592
commit 084784a409
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 7 deletions

View File

@ -209,7 +209,6 @@ test.describe('Example Imagery Object', () => {
const canvasBoundingBox = await canvas.boundingBox();
const canvasCenterX = canvasBoundingBox.x + canvasBoundingBox.width / 2;
const canvasCenterY = canvasBoundingBox.y + canvasBoundingBox.height / 2;
await Promise.all(tagHotkey.map((x) => page.keyboard.down(x)));
await page.mouse.down();
// steps not working for me here
@ -222,7 +221,7 @@ test.describe('Example Imagery Object', () => {
await expect(page.locator('[role="toolbar"][aria-label="Image controls"]')).toBeVisible();
await Promise.all(tagHotkey.map((x) => page.keyboard.up(x)));
//Wait for canvas to stabilize.
// Wait for canvas to stabilize.
await canvas.hover({ trial: true });
// add some tags
@ -234,6 +233,20 @@ test.describe('Example Imagery Object', () => {
await page.getByRole('button', { name: /Add Tag/ }).click();
await page.getByPlaceholder('Type to select tag').click();
await page.getByText('Science').click();
// click on a separate part of the canvas to ensure no tags appear
await page.mouse.click(canvasCenterX + 10, canvasCenterY + 10);
await expect(page.getByText('Driving')).toBeHidden();
await expect(page.getByText('Science')).toBeHidden();
test.info().annotations.push({
type: 'issue',
description: 'https://github.com/nasa/openmct/issues/7083'
});
// click on annotation again and expect tags to appear
await page.mouse.click(canvasCenterX - 50, canvasCenterY - 50);
await expect(page.getByText('Driving')).toBeVisible();
await expect(page.getByText('Science')).toBeVisible();
});
test('Can use + - buttons to zoom on the image @unstable', async ({ page }) => {

View File

@ -78,12 +78,10 @@ export default {
)?.rectangle;
const annotationRectangleForPixelDepth =
this.transformRectangleToPixelDense(annotationRectangle);
const indexNumber = builtAnnotationsIndex.add(
annotationRectangleForPixelDepth.x,
annotationRectangleForPixelDepth.y,
annotationRectangleForPixelDepth.x + annotationRectangleForPixelDepth.width,
annotationRectangleForPixelDepth.y + annotationRectangleForPixelDepth.height
const { x, y, x2, y2 } = this.transformAnnotationRectangleToFlatbushRectangle(
annotationRectangleForPixelDepth
);
const indexNumber = builtAnnotationsIndex.add(x, y, x2, y2);
this.indexToAnnotationMap[indexNumber] = annotation;
});
builtAnnotationsIndex.finish();
@ -124,6 +122,23 @@ export default {
this.selectedAnnotations = annotations;
this.$emit('annotations-changed', annotations);
},
transformAnnotationRectangleToFlatbushRectangle(annotationRectangle) {
let { x, y, width, height } = annotationRectangle;
let x2 = x + width;
let y2 = y + height;
// if height or width are negative, we need to adjust the x and y
if (width < 0) {
x2 = x;
x = x + width;
}
if (height < 0) {
y2 = y;
y = y + height;
}
return { x, y, x2, y2 };
},
updateSelection(selection) {
const selectionContext = selection?.[0]?.[0]?.context?.item;
const selectionType = selection?.[0]?.[0]?.context?.type;