in src/injected/visualization/center-position-calculator.ts [115:192]
private getCenterPositionRelativeToAreaShape(
dom: Document,
element: HTMLAreaElement,
image: HTMLImageElement,
offset: BoundingRectOffset,
bodyStyle: CSSStyleDeclaration,
docStyle: CSSStyleDeclaration,
): Point {
const elementBoundingClientRect = image.getBoundingClientRect();
const top = this.drawerUtils.getContainerTopOffset(offset);
const left = this.drawerUtils.getContainerLeftOffset(offset);
let x = left;
let y = top;
const shape = element.shape;
const coords = element.getAttribute('coords')?.split(',') ?? [];
if (coords.length > 0) {
let deltaX: number;
let deltaY: number;
switch (shape) {
case 'default': {
const minHeight = this.drawerUtils.getContainerHeight(
offset,
dom,
elementBoundingClientRect.height,
bodyStyle,
docStyle,
);
const minWidth = this.drawerUtils.getContainerWidth(
offset,
dom,
elementBoundingClientRect.width,
bodyStyle,
docStyle,
);
deltaX = minWidth / 2;
deltaY = minHeight / 2;
break;
}
case 'rect':
case 'poly': {
let sumX = 0;
let sumY = 0;
coords.forEach((coordValue, index) => {
if (index % 2 === 0) {
sumX += parseInt(coordValue, 10);
} else {
sumY += parseInt(coordValue, 10);
}
});
deltaX = sumX / (coords.length / 2);
deltaY = sumY / (coords.length / 2);
break;
}
case 'circle':
deltaX = parseInt(coords[0], 10);
deltaY = parseInt(coords[1], 10);
break;
default:
deltaX = 0;
deltaY = 0;
break;
}
if (!isNaN(deltaX) && !isNaN(deltaY)) {
x += deltaX;
y += deltaY;
}
}
return { x, y };
}