diff --git a/ee/app/assets/javascripts/design_management/components/design_presentation.vue b/ee/app/assets/javascripts/design_management/components/design_presentation.vue index 0b110e3e9441eb9623c95c6845264c1df8a4b500..4046bb17534f1dce2c765f2008eb4db1c3d5b974 100644 --- a/ee/app/assets/javascripts/design_management/components/design_presentation.vue +++ b/ee/app/assets/javascripts/design_management/components/design_presentation.vue @@ -201,10 +201,10 @@ export default { const { x, y } = coordinates; const { width, height } = this.overlayDimensions; return { - x, - y, - width, - height, + x: Math.round(x), + y: Math.round(y), + width: Math.round(width), + height: Math.round(height), }; }, openCommentForm(coordinates) { diff --git a/ee/spec/frontend/design_management/components/design_presentation_spec.js b/ee/spec/frontend/design_management/components/design_presentation_spec.js index 0d7922d758d92d9c78162ac52e73e189bd3729e3..8eba43f04cba75435b4c63f01810865cbac991fa 100644 --- a/ee/spec/frontend/design_management/components/design_presentation_spec.js +++ b/ee/spec/frontend/design_management/components/design_presentation_spec.js @@ -443,6 +443,23 @@ describe('Design management design presentation component', () => { }); }); + describe('getAnnotationPositon', () => { + it.each` + coordinates | overlayDimensions | position + ${{ x: 100, y: 100 }} | ${{ width: 50, height: 50 }} | ${{ x: 100, y: 100, width: 50, height: 50 }} + ${{ x: 100.2, y: 100.5 }} | ${{ width: 50.6, height: 50.0 }} | ${{ x: 100, y: 101, width: 51, height: 50 }} + `('returns correct annotation position', ({ coordinates, overlayDimensions, position }) => { + createComponent(undefined, { + overlayDimensions: { + width: overlayDimensions.width, + height: overlayDimensions.height, + }, + }); + + expect(wrapper.vm.getAnnotationPositon(coordinates)).toStrictEqual(position); + }); + }); + describe('when design is overflowing', () => { beforeEach(() => { createComponent(