Merge branch...

Merge branch '214101-creating-an-annotation-on-the-design-that-is-bigger-that-screen-size-is-broken' into 'master'

Fix leaving annotations on designs not fitting the viewport

See merge request gitlab-org/gitlab!29351

ee/app/assets/javascripts/design_management/components/design_presentation.vue

@@ -46,6 +46,7 @@ export default {
         height: 0,
       },
       initialLoad: true,
+      startDragPosition: null,
       lastDragPosition: null,
     };
   },
@@ -218,10 +219,12 @@ export default {
     onPresentationMousedown({ clientX, clientY }) {
       if (!this.isDesignOverflowing()) return;
 
-      this.lastDragPosition = {
+      this.startDragPosition = {
         x: clientX,
         y: clientY,
       };
+
+      this.lastDragPosition = { ...this.startDragPosition };
     },
     onPresentationMousemove({ clientX, clientY }) {
       if (!this.lastDragPosition) return;
@@ -239,7 +242,14 @@ export default {
         y: clientY,
       };
     },
-    onPresentationMouseup() {
+    onPresentationMouseup({ offsetX, offsetY }) {
+      if (
+        this.startDragPosition?.x === this.lastDragPosition?.x &&
+        this.startDragPosition?.y === this.lastDragPosition?.y
+      ) {
+        this.openCommentForm({ x: offsetX, y: offsetY });
+      }
+
       this.lastDragPosition = null;
     },
     isDesignOverflowing() {

ee/changelogs/unreleased/214101-creating-an-annotation-on-the-design-that-is-bigger-that-screen.yml

+---
+title: Resolve Creating an annotation on the design that is bigger that screen size
+  is broken
+merge_request: 29351
+author:
+type: fixed

ee/spec/frontend/design_management/components/design_presentation_spec.js

@@ -425,6 +425,39 @@ describe('Design management design presentation component', () => {
     });
   });
 
+  describe('onPresentationMouseUp when design is overflowing', () => {
+    it('does not open a comment form if design was dragged', () => {
+      const startDragPosition = { x: 1, y: 1 };
+      const lastDragPosition = { x: 2, y: 2 };
+      createComponent({}, { startDragPosition, lastDragPosition });
+
+      wrapper.vm.onPresentationMouseup({ offsetX: 2, offsetY: 2 });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.emitted('openCommentForm')).toBeFalsy();
+      });
+    });
+
+    it('opens a comment form if design was not dragged', () => {
+      const startDragPosition = { x: 1, y: 1 };
+      const lastDragPosition = { x: 1, y: 1 };
+      createComponent(
+        {},
+        {
+          startDragPosition,
+          lastDragPosition,
+          ...mockOverlayData,
+        },
+      );
+
+      wrapper.vm.onPresentationMouseup({ offsetX: 2, offsetY: 2 });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.emitted('openCommentForm')).toBeDefined();
+      });
+    });
+  });
+
   describe('when clicking and dragging', () => {
     it.each`
       description               | useTouchEvents