De-constrain design image when scale is reset

When scale is 1, add the `img-fluid` class
and re-set the base image size.

This way, the image can better respond to window resizes

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

@@ -37,7 +37,11 @@ export default {
     this.onImgLoad();
 
     this.resizeThrottled = _.throttle(() => {
-      this.onWindowResize();
+      // NOTE: if imageStyle is set, then baseImageSize
+      // won't change due to resize. We must still emit a
+      // `resize` event so that the parent can handle
+      // resizes appropriately (e.g. for design_overlay)
+      this.setBaseImageSize();
     }, 400);
     window.addEventListener('resize', this.resizeThrottled, false);
   },
@@ -45,15 +49,6 @@ export default {
     onImgLoad() {
       requestIdleCallback(this.setBaseImageSize, { timeout: 1000 });
     },
-    onWindowResize() {
-      const { contentImg } = this.$refs;
-      if (!contentImg) return;
-
-      this.onResize({
-        width: contentImg.offsetWidth,
-        height: contentImg.offsetHeight,
-      });
-    },
     setBaseImageSize() {
       const { contentImg } = this.$refs;
       if (!contentImg || contentImg.offsetHeight === 0 || contentImg.offsetWidth === 0) return;
@@ -68,6 +63,13 @@ export default {
       this.$emit('resize', { width, height });
     },
     zoom(amount) {
+      if (amount === 1) {
+        this.imageStyle = null;
+        this.$nextTick(() => {
+          this.setBaseImageSize();
+        });
+        return;
+      }
       const width = this.baseImageSize.width * amount;
       const height = this.baseImageSize.height * amount;
 

ee/changelogs/unreleased/197325-design-view-better-resizing-support-for-zoomed-in-designs.yml

+---
+title: Improve zoom reset after resizing window in Design Management
+merge_request: 25406
+author:
+type: added

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

@@ -53,6 +53,9 @@ describe('Design management large image component', () => {
   });
 
   describe('zoom', () => {
+    const baseImageWidth = 100;
+    const baseImageHeight = 100;
+
     beforeEach(() => {
       createComponent(
         {
@@ -62,22 +65,32 @@ describe('Design management large image component', () => {
         },
         {
           imageStyle: {
-            width: '100px',
-            height: '100px',
+            width: `${baseImageWidth}px`,
+            height: `${baseImageHeight}px`,
           },
           baseImageSize: {
-            width: 100,
-            height: 100,
+            width: baseImageWidth,
+            height: baseImageHeight,
           },
         },
       );
+
+      jest
+        .spyOn(wrapper.vm.$refs.contentImg, 'offsetWidth', 'get')
+        .mockImplementation(() => baseImageWidth);
+      jest
+        .spyOn(wrapper.vm.$refs.contentImg, 'offsetHeight', 'get')
+        .mockImplementation(() => baseImageHeight);
     });
 
     it('emits @resize event on zoom', () => {
-      wrapper.vm.zoom(2);
+      const zoomAmount = 2;
+      wrapper.vm.zoom(zoomAmount);
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('resize')).toEqual([[{ width: 200, height: 200 }]]);
+        expect(wrapper.emitted('resize')).toEqual([
+          [{ width: baseImageWidth * zoomAmount, height: baseImageHeight * zoomAmount }],
+        ]);
       });
     });
 
@@ -85,13 +98,19 @@ describe('Design management large image component', () => {
       wrapper.vm.zoom(1);
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('resize')).toEqual([[{ width: 100, height: 100 }]]);
+        expect(wrapper.emitted('resize')).toEqual([
+          [{ width: baseImageWidth, height: baseImageHeight }],
+        ]);
       });
     });
 
     it('sets image style when zoomed', () => {
-      wrapper.vm.zoom(2);
-      expect(wrapper.vm.imageStyle).toEqual({ width: '200px', height: '200px' });
+      const zoomAmount = 2;
+      wrapper.vm.zoom(zoomAmount);
+      expect(wrapper.vm.imageStyle).toEqual({
+        width: `${baseImageWidth * zoomAmount}px`,
+        height: `${baseImageHeight * zoomAmount}px`,
+      });
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.element).toMatchSnapshot();
       });