Hello there. I've been dreaming for years about a 2D spatial interface for laying out and editing / manipulating files in a filesystem (something like a local miro for my pc). I've recently attempted to build something using https://github.com/anvaka/panzoom which is great, but I'm pushing it beyond its limit, I think (or my own). I want a solid, intuitive (google maps-like) rendering and interaction to build off of. I mainly program in and prefer web technologies. But if there is something like panzoom for python or java or something, I'll do that instead. Does anyone have any recommendations? panzoom is the closest library I've found that is generic enough and flexible enough to do what I want, but I'm running into bizarre problems with it that I just don't want to deal with. Any recommendations for other libraries would be very appreciated! Thanks 🙂

Sounds like you might want to use WebGL for better rendering performance? A friend of mine maintains this Open Source project that can visualize massive visual collections: https://vikusviewer.fh-potsdam.de/

Thanks for this link! I'll check to see if I can adapt the panning and zooming to what I need. 👍

I’d definitely suggest trying to craft the panning and zooming yourself. Not because you necessarily will get it better than everyone else, but because 1. It will be crafted specifically to your needs 2. You will learn what things are hard and be able to better evaluate a library

Thanks! I have actually implemented panning / zooming in the past, and as you say I learned how to better evaluate libraries. I do really like panzoom, it is almost perfect for my needs; I just seem to be pushing it to its limits. If I don't find a better option, I will just stick with it and hope to overcome the issues I'm running up against.

@David Brooks Same! Web tech document paradigm and makes adapting a zoompan UI paradigm to it annoying. I've now started exploring going directly to the GPU (similar to eg. figma), using rust+wgpu->native+web w wasm. Totally different performance class + possibilities for novel UI's!

that's great! @Leonard Pauli I'd love to see where you go with that 🙂 I've dabbled in webgl but the DOM is already so useful for media (html, audio, video, iframes, etc) but if I can more easily get where I want to go with webgl, I'll absolutely jump ship 😛

I'm also interested in panzoom like tools for the DOM. I tried panzoom and found it nice at first, but I've not bring it too far yet. The main issue I had is that I want to combine panzooming with drag'n drop, the two don't work nice together, at least by using existing drag'n drop libraries. It was due to the transformation matrix applied to elements by panzoom which confuses the following-mouse-position of drag'n drop libs. @David Brooks What were the issues you had with panzoom?

@ogadaki lol that's exactly what I had problems with 😛 I'm trying to build a "file browser" type of interface where I can move around files in a folder in some spatial coordinate system that I can pan and zoom. I actually figured out the transformation matrix adjustment for following mouse position (I didn't use a lib for drag 'n drop), but dragging something past the "initial frame" that panzoom starts out with (when zoomed out, for instance) really confuses it. Zooming back down to 1 is sometimes impossible, it gets stuck and starts panning wildly. But sometimes (not always) it fixes itself after a few zoom-ins/zoom-outs. Hard to explain.

Do you have a screenshoot/video of what you're building @David Brooks? I did a 3D file browser as my undergrad thesis many years ago, so really interested in hear what ideas you have 😄

Right now, it's super simple, just a 2D panning / zooming file browser where the user can position the files spatially. The user can zoom out to see the big picture:

Nice! thanks for the screenshots!