Add buffer for mouse events on design pres

Previously, mousedown/up events were very sensitive to user
clicks, and a comment form would not be opened when it
should have.

This commit adds a 2px buffer to click-drag events in
design presentation: the user must move their mouse 2px
from the start position before we intiate the dragging action.

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

@@ -204,7 +204,7 @@ export default {
       this.movingNoteNewPosition = null;
     },
     onAddCommentMouseup({ offsetX, offsetY }) {
-      if (!this.disableCommenting) return;
+      if (this.disableCommenting) return;
 
       this.setNewNoteCoordinates({ x: offsetX, y: offsetY });
     },

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,
@@ -222,15 +224,23 @@ export default {
       };
     },
     onPresentationMousemove({ clientX, clientY }) {
-      if (!this.lastDragPosition) return;
-      this.isDraggingDesign = true;
-
       const { presentationViewport } = this.$refs;
-      if (!presentationViewport) return;
+      if (!this.lastDragPosition || !presentationViewport) return;
 
       const { scrollLeft, scrollTop } = presentationViewport;
       const deltaX = this.lastDragPosition.x - clientX;
       const deltaY = this.lastDragPosition.y - clientY;
+
+      // only respond to mousemove events after the
+      // mousemove's position exceeds the buffer amount
+      if (
+        !this.isDraggingDesign &&
+        Math.abs(deltaX) <= CLICK_DRAG_BUFFER_PX &&
+        Math.abs(deltaY) <= CLICK_DRAG_BUFFER_PX
+      )
+        return;
+
+      this.isDraggingDesign = true;
       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(() => {
@@ -498,12 +509,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();
+        });
       });
     });
   });