Page MenuHomePhabricator

Add pan and zoom of image
Closed, ResolvedPublic5 Story Points

Description

User story

As a user, I would like to be able to zoom and pan images which have small text in order to be able to translate them more easily.

At the moment if an image is too wide it is scaled down, and if it's too high it's not possible to scroll to the bottom of it without also scrolling to the bottom of the form (i.e. possibly away from the form fields that are being used).

Requirements

  • The image should be constrained to a box, and be initially shown completely so that it's all visible.
  • It should be possible to zoom in, and pan around the image with zoom indicators (+/-) visible on the image when user hovers over it.
  • Use Leaflet library, per discussion in comments.

Needs QA?

Yes.

Event Timeline

Samwilson created this task.Dec 6 2018, 8:42 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 6 2018, 8:42 PM

@Prtksxna Do you have a design/screenshot to demo how you think this will look?

Restricted Application added a project: Community-Tech. · View Herald TranscriptDec 14 2018, 6:08 AM
Niharika moved this task from Untriaged to In Design on the Community-Tech board.Dec 14 2018, 6:09 AM

If we want to use the same functionality as in ProofreadPage (e.g. click, scroll, and pane this image), it has the jquery.prpZoom module. Although, there's a million other libraries out there that do similar things.

@Samwilson, you had mentioned that we'd be able to do something like Leaflet? It'd be cool if that is possible 🙂If not we could use the ButtonGroupWidget with the + and - icons being overlaid on the image. We would also want to show the ✋mouse cursor on hover to let the user pan around.

I like Leaflet, if that's the one you have in mind. Is that the one we're talking about?

I like Leaflet, if that's the one you have in mind. Is that the one we're talking about?

Yep, that's the one.

I saw the WIP PR with Leaflet demo'ed on @Samwilson's computer. It's awesome, works amazingly well seemingly out of the box, and covers a bunch of those zoom/pinch/move features. We could probably share screenshots, but it basically looks like you'd expect; the image and the +/- buttons, enabling zoom and movement in desktop and mobile natively.

I'm super excited about using this library. I think it'll save us a lot of time, and it has a lot of potential if we ever need to use any of its other features.

That sounds promising! I'd love to see it in action.

Niharika updated the task description. (Show Details)Jan 4 2019, 5:30 AM
aezell added a subscriber: aezell.Jan 7 2019, 10:44 PM

@Samwilson Should we mark this as in-sprint and in-progress and assigned to you?

Oh hmm... yes I rather subverted the queue there didn't I? Oops.

Yeah assigned to me by all means, but let's leave it out of the sprint for now because I'm going to stick to eventmetrics this week.

Niharika set the point value for this task to 5.Jan 23 2019, 12:55 AM
Niharika moved this task from To be estimated/discussed to Estimated on the Community-Tech board.

Merged and deployed to the staging site. Note that the Beta Commons search is not working correctly, so you'll have to paste the full filename into the search box or modify the URL directly.

e.g. https://tools.wmflabs.org/svgtranslate-test/File:Speech_bubbles.svg

This is not really test-able at the moment because image rendering is completely broken for me. Filed as T215187: [BUG] Resolve issues with broken image rendering on SVG Translate. That might or might not be a consequence of the work done in this ticket.

aezell added a comment.Feb 5 2019, 7:29 PM

I was able to test this briefly locally and it worked for a time but as @Niharika says, the rendering seems to be non-functional now. I haven't had a chance to dig into any errors or anything yet though.

I'm seeing this bug on the first load of an image, but if I hit refresh it loads the thing properly. Is anyone else seeing something similar? e.g. for https://tools.wmflabs.org/svgtranslate-test/File:Square_with_corners.svg

I'm seeing this bug on the first load of an image, but if I hit refresh it loads the thing properly. Is anyone else seeing something similar? e.g. for https://tools.wmflabs.org/svgtranslate-test/File:Square_with_corners.svg

@Samwilson - it's the other way around for me. On first load, I see the image just fine and on refreshing the image goes away.

aezell added a comment.Feb 6 2019, 6:47 PM

I see it both ways. Refreshing over a dozen times, I see the image about half of the time. Sometimes, it does appear on the first load of a given URL and sometimes it doesn't.

This would lead me to believe that this is a race condition.

What kind of cross browser support do we need?

Leafletjs claims support for IE7-11, but I was unable to get it to work with IE8 (on a VM). Error: "Expected identifier app.10e4989a.js, line 1 character 774" (although I cannot see what the problem is with that character...).

I believe the CSS functions being used are not supported before about IE9 (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility)

@dom_walden We only care about IE11 and Chrome, Firefox and Safari latest. The tool is not going to have a very widespread usage so I'd rather prioritise features than support old browsers.

Niharika closed this task as Resolved.Feb 11 2019, 7:05 PM
Niharika moved this task from QA to Q3 2018-19 on the Community-Tech-Sprint board.

@dom_walden I'm gonna close this ticket. Please file follow-up tickets if you find any bugs. Thanks!

Niharika moved this task from In progress to Done on the SVG Translate Tool board.Feb 11 2019, 7:05 PM