Improving the Canvas experience

[emilwidlund]

Based on feedback received about improving the Canvas experience.

Support for zooming

The lack of proper zoom support can make the experience a bit problematic when the canvas has a lot of nodes. It would be helpful if we added a zoom factor, which snaps at 100% but allows for a range between 1% - 200% for example.

Support for panning

Navigating on the canvas is currently quite cumbersome as it needs to be done through scrolling. Using an approach like Figma would most likely make the experience much better (Spacebar + Drag).

Grouping nodes

Nested Node logic would be very handy to improve composability. A suggestion would be to allow a user to select a bunch of nodes and generate a single "group node". Inputs and Outputs would have to be automatically inferred from the child nodes in some convenient way.

Support for collapsible nodes

A simple prop on the component which hides non-connected ports on the node.

Refactor of the Store

I'd like to move away from the MobX approach, as it is a bit unnecessary. We should be able to achieve the same thing with a simple React Context all the way.

Custom keybindings

Implement an API for custom keybindings for easy access to node-related actions.

[nestorandrespe]

I was currently implementing the zoom and pannig for my projects. Will try to make a decent PR this week.

[emilwidlund]

Nice! Appreciate it!