Skip to content

WIP: PoC for support zooming functionality in Design view

Tom Quirk requested to merge zooming-design into design-presentation-component

What does this MR do?

Proof of concept (albeit, almost the complete implementation) for the ability to zoom in on a design in the Design View (#13217 (closed))

WIP Notes

Due to the amount of change required for this feature and complexity it adds to Design Management code, I'm sharing my progress early and am open to any feedback, concerns and potential issues regarding performance and UX - fire away!

Note that this is still very much a WIP. Obvious things like zoom button styling, tests, cross-browser testing etc. are still outstanding. There are likely minor bugs here and there as well, and the code itself is in need of cleaning up 😅.

Because of new components and refactoring the code in this MR might be too time-consuming to follow, so below is a PoC to demonstrate the approach described below:

  • PoC codepen (it's different from this MR in a few ways but the demonstrates the basic approach))

Current Scope

A user can:

  • Zoom in and out, and reset the zoom, with the buttons provided
  • Scroll around the image using native scroll (i.e. scrollbars)
  • See comment pins and place new ones

Currently out of scope:

  • Mouse scroll-wheel to zoom
  • Click-and-drag to explore image when zoomed in

WIP Demo

Demo 1

  • Basic zooming with pre-existing comments. Image is smaller than Design view viewport. Shows resizing and reseting zoom after resizing

Demo 2

  • Basic zooming and adding comments. Image is larger than Design view viewport and is scaled such that max-width: 100% (and overflows vertically on initial load).

Note that in both cases, there isn't a concept of a "focal point" yet i.e. the "center" of the zoom (this shouldn't be difficult or change the fundamental implementation)

Approach

The basic approach is as follows:

When design is opened (initial state):

  • Image width is max 100% (but can be smaller if natural width < 100% width)
  • Image height can overflow and scroll
  • Image is centered
  1. Store this image's initial ("default") dimensions

Zoom in:

In image.vue:

  1. Calculate new dimensions of the image, as some multiple of the default dimensions.
  2. Set image width & height via :style tag
  3. Emit a @resized event.

In design_presentation.vue:

  1. Handle @resized event by:
    • Setting the overlay's dimensions
    • Setting the overlay's absolute position: if the dimensions on either axis overflow, set the position to top: 0; left: 0 respectively. Else,calc the center in CSS

Zoom reset:

  1. Remove any custom style on the image
  2. Emit @resized event, and overlay will resize accordingly

"But Tom..."

Why not use transform: scale(x) ?

A number of reasons, but boils down to:

  • Complexity in positioning the image correctly in all scenarios
  • Ensuring the entire image is visible (see this comment on the original issue related to this initial PoC

If curious, please ping me and I'll walk you through some of my old commits in this branch 🤕

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by 🤖 GitLab Bot 🤖

Merge request reports