This week I spend a lot of time adding basic keyboaed support in the visual programming system that I am developing. For productivity I think that just using a mouse for creating a visual flow is not enough. One of the reasons why we are so productive when using a text editor for programming is the usage of the keyboard I think. Off course it's not the only reason but I do think it's of major influence.
So being able to use the keyboard for visual programming seems like a very good idea. In this video
I show exactly that.
Currently after every update to the flow, the tabindex is set on all the nodes and input elements. In normal webapps this is not a good idea, but here it is the only way to give the browser the proper and logical tab order. When tabbing through the flow, the camera is focused on the selected node overriding default browser scroll-behavior when a focused element is out of the current view. Using ctrl+a you can add a new node and also select the thumbs for the connection.
Furthermore I've added some other features like being able to run a flow using the keyboard (ctrl + Enter) and opening the properties popup. A missing feature is being able to add a new node before the currently selected node.
Lots of small tweaks were needed to make this work, but I am glad I spend the time because this also increases the accessibility.