We’re proud to announce Composable’s DataFlow Designer now supports full zooming and panning! We think this feature will make working with larger and more complicated DataFlows much easier.
Over the last year, the ability to pan and zoom in the Designer has probably been our most requested feature. At long last, it’s fully implemented! The feature leverages CSS matrix transforms in modern browsers, meaning that the graphics card will do the heavy lifting.
Check it out:
Here’s the run down of how it all works:
There are 2 different modes: pan & select. You can switch between these modes via the pan/select slider, or ctrl-i. We expect that most users will stay primarily in select mode, as all the functionality in pan mode is available in select mode provided the user has a mouse wheel. Pan mode exists so users can easily pan with a touchpad.
Here are some keyboard shortcuts:
- ctrl + mouse-wheel – zoom in and out (to where ever the mouse it)
- mouse-wheel – move the page down/up incrementally
- shift + mouse-wheel – move the left/right incrementally
- middle-click+drag – panning
- left-click + drag – (Select Mode) selection rubber band, (Pan Mode) pan
- arrow-keys – pan in small increments
- space-bar – page down
- shift+space-bar – page up
The Designer Toolbar offers the following easy-to-use buttons:
Reset Button: Reset zoom to 0, align to top-left corner- Zoom-to-fit Button
The Designer also offers a Navigation panel:
- Set zoom level via dragging slider, or using +/- buttons
pan&select: Switch mode (ctrl-i)
We’re interested in any feedback from developers/users! Go forth and profit.
