Merge branch 'better-design-overlay-commenting-wrt-click-drag' into 'master'

Design View: Add small buffer to click-drag action

See merge request gitlab-org/gitlab!29469

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

@@ -203,6 +203,11 @@ export default {
       this.movingNoteStartPosition = null;
       this.movingNoteNewPosition = null;
     },
+    onAddCommentMouseup({ offsetX, offsetY }) {
+      if (this.disableCommenting) return;
+
+      this.setNewNoteCoordinates({ x: offsetX, y: offsetY });
+    },
   },
 };
 </script>
@@ -219,7 +224,7 @@ export default {
       type="button"
       class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
       data-qa-selector="design_image_button"
-      @mouseup="setNewNoteCoordinates({ x: $event.offsetX, y: $event.offsetY })"
+      @mouseup="onAddCommentMouseup"
     ></button>
     <design-note-pin
       v-for="(note, index) in notes"

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

@@ -3,6 +3,8 @@ import { throttle } from 'lodash';
 import DesignImage from './image.vue';
 import DesignOverlay from './design_overlay.vue';
 
+const CLICK_DRAG_BUFFER_PX = 2;
+
 export default {
   components: {
     DesignImage,
@@ -221,16 +223,31 @@ export default {
         y: clientY,
       };
     },
-    onPresentationMousemove({ clientX, clientY }) {
-      if (!this.lastDragPosition) return;
-      this.isDraggingDesign = true;
+    getDragDelta(clientX, clientY) {
+      return {
+        deltaX: this.lastDragPosition.x - clientX,
+        deltaY: this.lastDragPosition.y - clientY,
+      };
+    },
+    exceedsDragThreshold(clientX, clientY) {
+      const { deltaX, deltaY } = this.getDragDelta(clientX, clientY);
 
+      return Math.abs(deltaX) > CLICK_DRAG_BUFFER_PX || Math.abs(deltaY) > CLICK_DRAG_BUFFER_PX;
+    },
+    shouldDragDesign(clientX, clientY) {
+      return (
+        this.lastDragPosition &&
+        (this.isDraggingDesign || this.exceedsDragThreshold(clientX, clientY))
+      );
+    },
+    onPresentationMousemove({ clientX, clientY }) {
       const { presentationViewport } = this.$refs;
-      if (!presentationViewport) return;
+      if (!presentationViewport || !this.shouldDragDesign(clientX, clientY)) return;
+
+      this.isDraggingDesign = true;
 
       const { scrollLeft, scrollTop } = presentationViewport;
-      const deltaX = this.lastDragPosition.x - clientX;
-      const deltaY = this.lastDragPosition.y - clientY;
+      const { deltaX, deltaY } = this.getDragDelta(clientX, clientY);
       presentationViewport.scrollTo(scrollLeft + deltaX, scrollTop + deltaY);
 
       this.lastDragPosition = {

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

@@ -63,7 +63,7 @@ describe('Design management design presentation component', () => {
       .mockReturnValue((childDimensions.height - viewportDimensions.height) * scrollTopPerc);
   }
 
-  function clickDragExplore(startCoords, endCoords, { useTouchEvents } = {}) {
+  function clickDragExplore(startCoords, endCoords, { useTouchEvents, mouseup } = {}) {
     const event = useTouchEvents
       ? {
           mousedown: 'touchstart',
@@ -85,13 +85,24 @@ describe('Design management design presentation component', () => {
       clientX: startCoords.clientX,
       clientY: startCoords.clientY,
     });
-    return wrapper.vm.$nextTick().then(() => {
-      addCommentOverlay.trigger(event.mousemove, {
-        clientX: endCoords.clientX,
-        clientY: endCoords.clientY,
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
+        addCommentOverlay.trigger(event.mousemove, {
+          clientX: endCoords.clientX,
+          clientY: endCoords.clientY,
+        });
+
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        if (mouseup) {
+          addCommentOverlay.trigger(event.mouseup);
+          return wrapper.vm.$nextTick();
+        }
+
+        return undefined;
       });
-      return wrapper.vm.$nextTick();
-    });
   }
 
   afterEach(() => {
@@ -494,12 +505,24 @@ describe('Design management design presentation component', () => {
         });
       });
 
-      it('does not open a comment form', () => {
-        return clickDragExplore({ clientX: 0, clientY: 0 }, { clientX: 10, clientY: 10 }).then(
-          () => {
-            expect(wrapper.emitted('openCommentForm')).toBeFalsy();
-          },
-        );
+      it('does not open a comment form when drag position exceeds buffer', () => {
+        return clickDragExplore(
+          { clientX: 0, clientY: 0 },
+          { clientX: 10, clientY: 10 },
+          { mouseup: true },
+        ).then(() => {
+          expect(wrapper.emitted('openCommentForm')).toBeFalsy();
+        });
+      });
+
+      it('opens a comment form when drag position is within buffer', () => {
+        return clickDragExplore(
+          { clientX: 0, clientY: 0 },
+          { clientX: 1, clientY: 0 },
+          { mouseup: true },
+        ).then(() => {
+          expect(wrapper.emitted('openCommentForm')).toBeDefined();
+        });
       });
     });
   });