Improve scaling response (optically) => with sollution
@oscarlorentzon is already working on this.
Since Nov 19, 2019.
Assessment
This issue has not been assessed yet.
Description
When the size of the mapillary element changes the canvas remains the "old" size for some time.
This is because a higher resolution image needs to be downloaded and/or the canvas needs the be recalculated for the new size. This takes some time which makes the system look a bit sluggish.
Especially when the size of the mapillary gets animated from a relatively small size to a large size the effect is beyond akward.
I fixed this (optically)!
1) I set this in CSS (the container of the canvas)
.mapillary-js-interactive {
height: 100%;
width: 100%;
}
2) Just before I do (and/or detect) the resizing of the window/div I set the canvas (with class 'mapillary-js-canvas') : to
height: 100%;
width: 100%;
3) I call mly.resize(); (after the animation of the resizing is completed!)
The result is that the image of the "old" canvas gets stretched into the new size, that way the complete area remains to be covered with the "old image". When the animation/resizing is complete the new canvas gets calculated.
this can easily be implemented into mapillary-js... no harm done and animation is very exceptable, resulting in an optically more responsive/adaptive feeling :)
PS: you could even go the whole nine yards with calculating the difference in size and alter the percentages accordingly (one at 100% an the other one more, using negative margins to center the image.. haven't done that, yet:P)
PS2: Now that I come to think of it.. why not keep it at 100%/100% by default (for the canvas ant it's container)? I see no reason to force the size of the canvas?
- Dominant language
- TypeScript
- Stars
- 519
- Forks
- 89
- Avg merge
- 3d 18h
- Merged PRs (30d)
- 4
Getting set up
- Ships a Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mapillary/mapillary-js
-
Missing tooltipsOpen
Difficulty 4/5 3-5 days Newbie friendliness 25/100
mapillary/mapillary-js#639 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
mapillary/mapillary-js#638 ·
-
Transition modeOpen
Difficulty 4/5 3-5 days Newbie friendliness 25/100
mapillary/mapillary-js#633 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
mapillary/mapillary-js#623 ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
mapillary/mapillary-js#618 ·
All issues in mapillary/mapillary-js
Similar issues
-
area/dashboard kind/bug QA/dev-automation
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
rancher/dashboard#19379 · 2 comments ·
Maintainers usually reply within 5 days
-
perf(core): getComments() runs the approved count and the comment list as two sequential queriesOpenarea/core bot:bug bot:working
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
emdash-cms/emdash#3905 · 2 comments ·
Maintainers usually reply within 1 day
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 90/100
lingdojo/kana-dojo#31728 · 1 comment · 5 reactions ·
Maintainers usually reply within 1 day
-
selective-claw: freshTailTurns=0 keeps ALL turns verbatim and summarizes none (slice(-0) === slice(0))Possibly taken @zjncs claimed this today. Opencomponent:tokenless
Difficulty 2/5 1-3 hours Newbie friendliness 80/100
agentic-os-org/ANOLISA#6112 · 1 comment ·
Maintainers usually reply within 1 day
-
bug needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
rjsf-team/react-jsonschema-form#5439 ·
Maintainers usually reply within 1 day