Zoom to bounds about polymaps

[michael]

I'm currently struggling with that exactly that problem. (funny that I'm reading this now in the Github feed) http://stackoverflow.com/questions/3604190/constrained-panning-zooming-using-a-viewmatrix

Can you point me to some resources describing how this can be done?

-- Michael

[mbostock]

@michael Sounds like you're describing a different problem. Polymaps does have code to constrain panning and zooming, and the centerRange constraint is specifically designed so that the user can zoom in to any visible point on screen without needing to recenter. This avoids shifting the center while zooming, which (in my personal opinion) is icky usability. However, not doing this means it is possible to push (pan) the map just outside the edge of the screen. More details on this commit:

http://github.com/simplegeo/polymaps/commit/62171ece9609e4454ec56f4bcb6b12cc9f196557

The code isn't structured to constrain an matrix-tranformed view, though; the view is defined using a center point (a location), a zoom level, and a rotation angle. (It's also possible to apply an affine transformation to the tiles, which requires some fancy logic to determine tile visibility, but that doesn't affect the panning and zooming constraints.)

Protovis has some code for constraining panning and zooming. See:

http://github.com/mbostock/protovis/blob/master/src/behavior/Zoom.js
http://github.com/mbostock/protovis/blob/master/src/behavior/Pan.js

However, this is simpler yet because it only supports panning and zooming and not arbitrary affine/rigid-body transforms.

[michael]

Well, what you're describing in the first par. is the "scale around a reference point" approach on zooming. This is already working in my case. I do a translate(x,y) to the reference point (mouse position) followed by a scale, to translate(-x,-y) back. This avoids shifting the center during zooming as you've described. When zooming in this way there's no problem. I can't get out of the scene boundaries. But when I want to zoom back to 100% I'm violating the scene boundaries. The problem is that I can't just scale down around the mouse position again. I need a different approach on scaling back to the full (original) view. Actually what I want to reach eventually on zooming back to origin is an identity matrix as the view transformation. I need to somehow tween the current view matrix to the origin (=identity matrix). I guess I can do that with linear combinations. However I'm not entirely sure if that's how it's done. What do you think?

It's a bit hard to explain that in text since I'm neither s native speaker, nor a mathematician. ;)

Thanks for pointing me to the Protovis Zoom and Pan behaviors, that's a good reference. One question: In Protovis I can add zoom/pan behaviors to any panel in the scene, right? What happens with the objects inside a smaller panel (with zooming enabled), placed somewhere in the middle of the screen when I perform a zoom in. Are they visible in the scene outside the panel's boundaries? If not, how do you manage this clippling? It seems to be pretty hard with Canvas do that, that's why for now I allow zoom and pan behaviors to be attached to the whole scene only (or to the output display to be exact).

Thanks a lot!

-- Michael

[mbostock]

@michael Check this out, if you want to interpolate between two matrix transforms:

http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition

[michael]

Thanks for the link.

I've now solved it by justifying the view matrix after each transform by clamping the values of tx,ty accordingly.

Here's the code (~50 lines) for both behaviors:
http://github.com/michael/unveil/blob/master/src/scene/behaviors.js

Demo:
http://quasipartikel.at/unveil/examples/multiple_displays/

[mbostock]

@michael If you're doing mousewheel stuff, be aware that the wheelDelta is broken in Safari & Chrome (unless you're using a WebKit or Chromium nightly). See this bug:

https://bugs.webkit.org/show_bug.cgi?id=40441

And this bug-detection and work-around:

http://github.com/mbostock/polymaps/commit/3f591e76126d40a37ef4cf20113ba244f7b19157

[michael]

Good to know! Thanks for the hint.

Could I integrate po.wheel in my code? ...Trying to get rid of jQuery dependencies anyway.

[mbostock]

@michael Yep, it's all BSD licensed.

[mbostock]

Implemented here:

http://github.com/mbostock/polymaps/commit/75973cc3c87fbbc458f2f587241aca4e52230fc0

[tomtaylor]

Superb, thank you!