Implement click-drag exploration of designs

- Adds mousedown/up/move logic to design_presentation
- stops propogation of various events in design_overlay
- adds disableCommenting prop to designOverlay

doc/user/project/issues/design_management.md

@@ -126,6 +126,8 @@ to help summarize changes between versions.
 Designs can be explored in greater detail by zooming in and out of the image.
 Control the amount of zoom with the `+` and `-` buttons at the bottom of the image.
 While zoomed, you can still [start new discussions](#starting-discussions-on-designs) on the image, and see any existing ones.
+[Introduced](https://gitlab.com/gitlab-org/gitlab/issues/197324) in GitLab 12.10, while zoomed in,
+you can click-and-drag on the image to move around it.
 
 ![Design zooming](img/design_zooming_v12_7.png)
 

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

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: null,
     },
+    disableCommenting: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -34,11 +39,16 @@ export default {
   },
   computed: {
     overlayStyle() {
-      return {
+      const style = {
         width: `${this.dimensions.width}px`,
         height: `${this.dimensions.height}px`,
         ...this.position,
       };
+
+      if (this.disableCommenting) {
+        style.cursor = 'unset';
+      }
+      return style;
     },
     isMovingCurrentComment() {
       return Boolean(this.movingNoteStartPosition && !this.movingNoteStartPosition.noteId);
@@ -207,6 +217,7 @@ export default {
     @mouseleave="onNoteMouseup"
   >
     <button
+      v-show="!disableCommenting"
       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"
@@ -222,15 +233,15 @@ export default {
           ? getNotePositionStyle(movingNoteNewPosition)
           : getNotePositionStyle(note.position)
       "
-      @mousedown="onNoteMousedown($event, note)"
-      @mouseup="onNoteMouseup"
+      @mousedown.stop="onNoteMousedown($event, note)"
+      @mouseup.stop="onNoteMouseup"
     />
     <design-note-pin
       v-if="currentCommentForm"
       :position="currentCommentPositionStyle"
       :repositioning="isMovingCurrentComment"
-      @mousedown="onNoteMousedown"
-      @mouseup="onNoteMouseup"
+      @mousedown.stop="onNoteMousedown"
+      @mouseup.stop="onNoteMouseup"
     />
   </div>
 </template>

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

@@ -46,6 +46,9 @@ export default {
         height: 0,
       },
       initialLoad: true,
+      mousedown: false,
+      lastDragPosition: null,
+      isDraggingDesign: false,
     };
   },
   computed: {
@@ -55,6 +58,13 @@ export default {
     currentCommentForm() {
       return (this.isAnnotating && this.currentAnnotationPosition) || null;
     },
+    presentationStyle() {
+      return this.isDraggingDesign
+        ? {
+            cursor: 'grabbing',
+          }
+        : undefined;
+    },
   },
   beforeDestroy() {
     const { presentationViewport } = this.$refs;
@@ -206,12 +216,60 @@ export default {
       const position = this.getAnnotationPositon(coordinates);
       this.$emit('moveNote', { noteId, discussionId, position });
     },
+    onPresentationMousedown({ clientX, clientY }) {
+      if (!this.isDesignOverflowing()) return;
+
+      this.lastDragPosition = {
+        x: clientX,
+        y: clientY,
+      };
+    },
+    onPresentationMousemove({ clientX, clientY }) {
+      if (!this.lastDragPosition) return;
+      this.isDraggingDesign = true;
+
+      const { presentationViewport } = this.$refs;
+      if (!presentationViewport) return;
+
+      const { scrollLeft, scrollTop } = presentationViewport;
+      const deltaX = this.lastDragPosition.x - clientX;
+      const deltaY = this.lastDragPosition.y - clientY;
+
+      presentationViewport.scrollTo(scrollLeft + deltaX, scrollTop + deltaY);
+
+      this.lastDragPosition = {
+        x: clientX,
+        y: clientY,
+      };
+    },
+    onPresentationMouseup() {
+      this.lastDragPosition = null;
+      this.mousedown = null;
+      this.isDraggingDesign = false;
+    },
+    isDesignOverflowing() {
+      const { presentationContainer } = this.$refs;
+      if (!presentationContainer) return false;
+
+      return (
+        presentationContainer.scrollWidth > presentationContainer.offsetWidth ||
+        presentationContainer.scrollHeight > presentationContainer.offsetHeight
+      );
+    },
   },
 };
 </script>
 
 <template>
-  <div ref="presentationViewport" class="h-100 w-100 p-3 overflow-auto position-relative">
+  <div
+    ref="presentationViewport"
+    class="h-100 w-100 p-3 overflow-auto position-relative"
+    :style="presentationStyle"
+    @mousedown="onPresentationMousedown"
+    @mousemove="onPresentationMousemove"
+    @mouseup="onPresentationMouseup"
+    @mouseleave="onPresentationMouseup"
+  >
     <div
       ref="presentationContainer"
       class="h-100 w-100 d-flex align-items-center position-relative"
@@ -229,6 +287,7 @@ export default {
         :position="overlayPosition"
         :notes="discussionStartingNotes"
         :current-comment-form="currentCommentForm"
+        :disable-commenting="isDraggingDesign"
         @openCommentForm="openCommentForm"
         @moveNote="moveNote"
       />

ee/changelogs/unreleased/tq-click-drag-design-explore.yml

+---
+title: Add ability to explore zoomed in designs via click-and-drag
+merge_request: 25405
+author:
+type: added