Skip to content

Add zooming functionality to designs in Design view (#13217 part 2)

Tom Quirk requested to merge zooming-design-2 into master

What does this MR do?

Gives user the ability to zoom in and out of designs in Design view (#13217 (closed)).

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 in any zoom state

Out of scope:

  • Click-and-drag to explore image when zoomed in (coming in !22867 (closed))
  • Mouse scroll-wheel to zoom

Demo

Video demo here. This demos the basics of the functionality on desktop.

Screenshots

Initial view on Desktop (small image) Screen_Shot_2020-01-14_at_4.27.14_pm
Initial view on Desktop (large image) Screen_Shot_2020-01-14_at_4.27.00_pm
Initial view on mobile Screen_Shot_2020-01-14_at_4.28.41_pm

What's in this MR?

3 main parts:

  • New component, design_scaler.vue
  • Adding scaling capabilities to design_presentation.vue and image.vue
  • Adding "automatically centering scroll" capability to design_presentation.vue. Includes the concept of a "focal point" which can shift around the image as the user scrolls

This feature will need documentation, but will happen in a follow-up MR.

⚠️ This MR is the third in a set of MR's for this feature. It currently targets scrollable-design-view branch, and depends on !22852 (merged) and !22942 (merged) being merged. At the time of writing, these are both waiting on maintainer review.

Implementation notes

For an overview of the general approach here, see the PoC MR description

Why not use transform: scale(x) ?

A number of reasons, but boils down to:

Performance

Initial load

The following results are the averages of 4 tests, grouped by activity, and focused on the time between where the loading spinner disappears, to when the pin painting is finalised.

- Before After
Composite layers 272.66ms 236.25ms
Javascript 147.733ms 19.775ms
Paint 4.9ms 3.5ms

Performance is fortunately slightly improved with this MR for initial load. This is likely mostly due to the fact that we now only show the commenting pins once we have image dimensions to work with - before, they were drawn immediately, then recalculated when the image loads.

Zooming

No experiments done for the actual zooming portion, because we have nothing to ccompare to! We should encounter them as they arise.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by 🤖 GitLab Bot 🤖

Merge request reports