[New Plugin] Pan & Zoom Pro - A Figma-like Canvas for Your Native Bubble Elements

tmxl · 2024-11-06T05:58:36.803Z

Hey Bubblers, some exciting news:

We’ve just launched our first plugin, Pan & Zoom Pro - an infinite ‘Figma-like’ canvas for your native Bubble elements that works everywhere (PC/Mac/touch devices).

What does ‘Figma-like’ mean?
To us, Figma (the design tool) is the gold standard of how a canvas UI should behave. We’ve used this experience as our benchmark to deliver your Bubble app the following:

Performant and lightweight pan/zoom across all platforms
Intuitive control schemes across all platforms
A robust coordinate system with exposed states
Streamlined element position detection with Positioner
Actions for manipulating pan/zoom/positioner via workflows

What can I put on the canvas?
Pretty much anything. Really, we’ve tested this plugin with every native Bubble element in the editor and they pan and zoom correctly and performantly. We’ve even put other plugins inside the Element folder and it simply works (although we can’t guarantee this). This high level of compatibility is inherited from the core library used for this plugin (Panzoom.js) and the fact that we’ve been careful to preserve this as we’ve built out the features of the plugin on top of it.

Can I put clickable/tappable elements on the canvas?
We’ve worked to ensure full compatibility for all workflow-enabled elements that reside within the canvas across all platforms. Rest assured that whether your users are on PC (with a mouse), Mac (via trackpad or mouse) or any touch-enabled device, they will be able to interact with your canvas the way you intend them to.

What is Positioner?
Positioner is a powerful utility bundled in with this version of Pan & Zoom Pro that uses the internal coordinate system to detect the location of any element on the canvas using its ID. For example, you could use positioner to detect a Repeating Group’s cell on your canvas from a sidebar menu item, then feed the XY coordinates to Pan & Zoom Pro’s in-built ‘Pan & Zoom to XY’ to pan directly that element, centering it on the page. You can see this in action in our demo.

We really believe that this plugin makes a whole new category of apps possible on Bubble that were previously in the ‘too-hard’ bucket. We’re excited to see what app ideas this unlocks for the clever people in this community!

DEMO: https://uncode-25838.bubbleapps.io/version-test/panzoompro

EDITOR: uncode | Bubble Editor

PLUGIN: Pan & Zoom Pro Plugin | Bubble

Please reach out if you have any questions or issues, we’re more than happy to help you.

Best,
Tom & Rick

cmarchan · 2024-11-06T12:54:49.882Z

@tmxl This functionality is amazing!

If I understand correctly, I could build OpenTable seating-arrangements-type apps where the elements can be clicked? … Including rows of RGs?

tmxl · 2024-11-06T13:17:42.835Z

cmarchan:

I could build OpenTable seating-arrangements-type apps where the elements can be clicked?

Thanks @cmarchan !

Yes you most definitely can - follow the setup instruction and place an RG (and another nested if needed) inside your element folder. Each cell (or table in this example) can be clickable/selectable using a custom state, and maybe you could show a default table selection on load using positioner. Your users will be able to pan around the canvas and select an alternative table to their liking.

cmarchan · 2024-11-06T14:27:32.424Z

Terrific!

WIll you plan to make it compatible with the upcoming mobile editor?

tmxl · 2024-11-07T00:35:59.816Z

As the Bubble mobile editor is based on React Native, I see no reason Pan & Zoom Pro would have any compatibility or performance issues.

We’ll be sure to test it thoroughly once we have access and I’ll reply to this comment with confirmation.

tmxl · 2024-11-07T05:01:30.610Z

Demo Update + Bug Fixes

Screenshot 2024-11-07 1551451648×1126 144 KB

Demo:

Examples of all primary exposed states:

pan_center_coordinate_x (live)
pan_center_coordinate_y (live)
pan_center_coordinate_x_end (only updated on mouse out)
pan_center_coordinate_y_end (only updated on mouse out)
current_zoom_level (live)
You can find the coordinate values in the nav.

Pan left/right/down/up buttons wired to their corresponding actions
Zoom in/out buttons in the top right of the canvas wired to their corresponding actions
Control schemes and shortcuts for PC/Mac/touch devices in the nav

Fixes:

Resolved a conflict with external element scrolling.

Happy Bubbling.

tmxl · 2024-12-03T23:13:38.341Z

Hey legends!

Just a note that we’ve updated our pricing for this plugin. Thanks to those who reached out—we understand a subscription-only model doesn’t work for everyone, so you can now own Pan & Zoom Pro outright for $89 per app.

We have an exciting roadmap ahead (multiplayer cursors anyone?) for this plugin and this new structure should let us hit those development goals while also being more accessible to those who want to build around it right away.

All the best

Tanvi2 · 2024-12-07T08:47:13.747Z

tmxl:

We have an exciting roadmap ahead (multiplayer cursors anyone?)

Hi @tmxl

Interested in hearing a little more about your roadmap.

Could you provide an example usecase the multiplayer cursors will enable and it’s full intended capabilities? I may have a few apps that could benefit from this.

And when are you planning to release this.

alexcooney5 · 2024-12-07T10:21:47.394Z

This plugin looks great @tmxl. Congrats on the release!

tmxl · 2024-12-09T05:19:05.939Z

Hey @Tanvi2

Appreciate the interest! Here’s a preview of our multiplayer cursors update working inside Pan & Zoom Pro:

We’re relying heavily on Pan & Zoom Pro’s coordinate system to place other user’s cursors into your canvas. This approach mitigates the drawbacks common in page-based multiplayer cursor systems (like Together.js) as the Pan & Zoom Pro canvas is scale invariant and we therefore don’t have to worry about differences in user page width, zoom level, etc.

Keep in mind, you will need to set up your own realtime database with Firebase to act as an intermediate server for this to work. We’re working hard to make this as lightweight as possible and will have all details on how to set this up upon release. It’s pretty simple.

At present we’ve got the following key features working:

Render cursor position correctly regardless of canvas scale. For example, if your canvas is at 200% and mine is at 50%, our code will correctly offset your cursor on my canvas so it is correctly positioned.
Keep cursor representations static when other users are panning the canvas
Polling frequency adjustment
Linear interpolation for cursor representations to keep things smooth even at low polling frequencies
Display names from your Bubble database
User colours from your Bubble database

Still in development:

Anonymous user cursor representations for users who are not logged in
Proper cursor culling based on user cursor leaving viewport/not hovering over canvas
Methods to only show cursors for certain canvas instances (say if you were changing canvas data based on URL and wanted cursors only viewable when given users are viewing that URL, etc.)
More bug fixes and performance optimisations.

We expect to release this update around Jan/Feb 2025.

As for the rest of the roadmap, we’ll be sharing that soon once we’ve bedded down our priorities for this plugin. Stay tuned.

Tom

tmxl · 2024-12-09T05:25:40.108Z

Cheers Alex! Hope you’re well mate.

Tanvi2 · 2024-12-09T06:15:31.626Z

That sounds like a lot of cool features and I’d be very interested to see the finished plugin in action.

As for setting up a realtime Firebase database, have you tried Liveblocks? I’ve seen some users achieve multiplayer cursor feature using Liveblocks which seems to have a minimal setup.

tmxl · 2024-12-09T07:51:26.870Z

Glad to hear it.

Tanvi2:

As for setting up a realtime Firebase database, have you tried Liveblocks?

Liveblocks is awesome. While I do like their strategy of pricing realtime databases using MAU vs Firebase’s request based pricing, their MAU limits per plan are quite restrictive and their pricing tiers are extreme in my opinion.

We decided to prioritise Firebase support for this as, for most Bubble apps, request based pricing is more cost effective. Throttling requests also has a measurable impact on Firebase fees whereas it does not on Liveblocks due to their pricing, so there is less ability for users to tune their apps… But if I’m missing something here please let me know.

This all being said, I don’t see why we couldn’t support different realtime databases for this plugin such as Liveblocks in future.

buero · 2025-01-18T08:42:13.625Z

wtf - this plugin is gamechanger to the plattform - why did no one noticed this more?

buero · 2025-01-18T08:44:36.089Z

btw - what is the subjourney app you showcased. - it looks really interessting!

buero · 2025-01-18T09:08:09.427Z

any info about this functionality able in the app - seems you tested it but then the plugin was removed from the market place - i would be interessted in buying if this is part of it or at least you give me a recommandation to another app that makes this possible combined with yours

Screenshot 2025-01-18 at 4.06.52 PM3584×2274 557 KB

akamarski · 2025-01-18T13:51:48.741Z

Is it possible to have a max pan offset (from elements?) after which, the canvas ends?

Say I have 5 blocks one under another and I can pan as usual. I need the top position to be 32px off the first block and not allow me to scroll past this position (up) and the bottom to behave the same way.

Like a boundary in which I can pan and zoom but not go out of it

tmxl · 2025-01-20T22:56:23.310Z

@buero thanks for the kind words!

Subjourney is a journey mapping app we’re about to launch that leverages this plugin. It is actually the primary test-bed for the plugin featureset at the moment. I will post an update here once we’re in beta.

tmxl · 2025-01-20T22:58:35.849Z

This is our next plugin release! You’ll here more about this very soon. Stay tuned.

tmxl · 2025-01-20T23:01:34.342Z

@akamarski thanks for the interest - currently this is not possible in the plugin as we’ve focused on the infinite canvas approach, however we’ve received similar feedback from other plugin users and are now building toward supporting canvas constraints.

The use case you detailed is essentially solvable with canvas constraints. I’ll reply here again once this update is released.