Merge branch 'rj/design-magnification' into 'master'

Zoom into design image upto 100% of actual size

See merge request gitlab-org/gitlab!68755

app/assets/javascripts/design_management/components/design_scaler.vue

 <script>
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 
-const SCALE_STEP_SIZE = 0.2;
 const DEFAULT_SCALE = 1;
 const MIN_SCALE = 1;
-const MAX_SCALE = 2;
+const ZOOM_LEVELS = 5;
 
 export default {
   components: {
     GlButtonGroup,
     GlButton,
   },
+  props: {
+    maxScale: {
+      type: Number,
+      required: true,
+    },
+  },
   data() {
     return {
       scale: DEFAULT_SCALE,
@@ -24,7 +29,10 @@ export default {
       return this.scale === DEFAULT_SCALE;
     },
     disableIncrease() {
-      return this.scale >= MAX_SCALE;
+      return this.scale >= this.maxScale;
+    },
+    stepSize() {
+      return (this.maxScale - MIN_SCALE) / ZOOM_LEVELS;
     },
   },
   methods: {
@@ -37,10 +45,10 @@ export default {
       this.$emit('scale', this.scale);
     },
     incrementScale() {
-      this.setScale(this.scale + SCALE_STEP_SIZE);
+      this.setScale(Math.min(this.scale + this.stepSize, this.maxScale));
     },
     decrementScale() {
-      this.setScale(this.scale - SCALE_STEP_SIZE);
+      this.setScale(Math.max(this.scale - this.stepSize, MIN_SCALE));
     },
     resetScale() {
       this.setScale(DEFAULT_SCALE);

app/assets/javascripts/design_management/components/image.vue

@@ -57,6 +57,7 @@ export default {
   methods: {
     onImgLoad() {
       requestIdleCallback(this.setBaseImageSize, { timeout: 1000 });
+      requestIdleCallback(this.setImageNaturalScale, { timeout: 1000 });
       performanceMarkAndMeasure({
         measures: [
           {
@@ -79,6 +80,27 @@ export default {
       };
       this.onResize({ width: this.baseImageSize.width, height: this.baseImageSize.height });
     },
+    setImageNaturalScale() {
+      const { contentImg } = this.$refs;
+
+      if (!contentImg) {
+        return;
+      }
+
+      const { naturalHeight, naturalWidth } = contentImg;
+
+      // In case image 404s
+      if (naturalHeight === 0 || naturalWidth === 0) {
+        return;
+      }
+
+      const { height, width } = this.baseImageSize;
+
+      this.$parent.$emit(
+        'setMaxScale',
+        Math.round(((height + width) / (naturalHeight + naturalWidth)) * 100) / 100,
+      );
+    },
     onResize({ width, height }) {
       this.$emit('resize', { width, height });
     },

app/assets/javascripts/design_management/pages/design/index.vue

@@ -46,6 +46,7 @@ import {
 import { trackDesignDetailView, servicePingDesignDetailView } from '../../utils/tracking';
 
 const DEFAULT_SCALE = 1;
+const DEFAULT_MAX_SCALE = 2;
 
 export default {
   components: {
@@ -96,6 +97,7 @@ export default {
       scale: DEFAULT_SCALE,
       resolvedDiscussionsExpanded: false,
       prevCurrentUserTodos: null,
+      maxScale: DEFAULT_MAX_SCALE,
     };
   },
   apollo: {
@@ -328,6 +330,9 @@ export default {
     toggleResolvedComments() {
       this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded;
     },
+    setMaxScale(event) {
+      this.maxScale = 1 / event;
+    },
   },
   createImageDiffNoteMutation,
   DESIGNS_ROUTE_NAME,
@@ -376,12 +381,13 @@ export default {
           @openCommentForm="openCommentForm"
           @closeCommentForm="closeCommentForm"
           @moveNote="onMoveNote"
+          @setMaxScale="setMaxScale"
         />
 
         <div
           class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
         >
-          <design-scaler @scale="scale = $event" />
+          <design-scaler :max-scale="maxScale" @scale="scale = $event" />
         </div>
       </div>
       <design-sidebar

spec/frontend/design_management/components/design_scaler_spec.js

@@ -13,7 +13,11 @@ describe('Design management design scaler component', () => {
   const setScale = (scale) => wrapper.vm.setScale(scale);
 
   const createComponent = () => {
-    wrapper = shallowMount(DesignScaler);
+    wrapper = shallowMount(DesignScaler, {
+      propsData: {
+        maxScale: 2,
+      },
+    });
   };
 
   beforeEach(() => {
@@ -61,6 +65,18 @@ describe('Design management design scaler component', () => {
     expect(wrapper.emitted('scale')).toEqual([[1.2]]);
   });
 
+  it('computes & increments correct stepSize based on maxScale', async () => {
+    wrapper.setProps({ maxScale: 11 });
+
+    await wrapper.vm.$nextTick();
+
+    getIncreaseScaleButton().vm.$emit('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().scale[0][0]).toBe(3);
+  });
+
   describe('when `scale` value is 1', () => {
     it('disables the "reset" button', () => {
       const resetButton = getResetScaleButton();
@@ -77,7 +93,7 @@ describe('Design management design scaler component', () => {
     });
   });
 
-  describe('when `scale` value is 2 (maximum)', () => {
+  describe('when `scale` value is maximum', () => {
     beforeEach(async () => {
       setScale(2);
       await wrapper.vm.$nextTick();

spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -25,7 +25,9 @@ exports[`Design management design index page renders design index 1`] = `
     <div
       class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
     >
-      <design-scaler-stub />
+      <design-scaler-stub
+        maxscale="2"
+      />
     </div>
   </div>
    
@@ -186,7 +188,9 @@ exports[`Design management design index page with error GlAlert is rendered in c
     <div
       class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center"
     >
-      <design-scaler-stub />
+      <design-scaler-stub
+        maxscale="2"
+      />
     </div>
   </div>