Making connections

With the basics of layers and layer nodes in place I’ve turned my attention to another key parametric functionality of Paragraphic: connections. As you might have seen in the screenshots almost all parameters, like sizes, position, angles and colors, have little notches or sockets to the left and right of them. These are the graphical representations of the input and output sockets of these parameters, and you can use these to connect parameters together so that one sets the other.

While the connection functionality has been implemented for a while now (see instance layers for examples), the UI for adding and working with connections has been very rudimentary. So this was something I wanted to improve in time for the next round of prototype tests focusing on these connection functionalities.

The biggest improvement is that while hovering connections and adding them via the sockets menus, connections are now rendered as lines indicating what sockets they connect between. And you can even drag out connections between visible sockets as shown in the video. As a fallback, and for connections to layers or nodes that are not selected you can also use the socket menus to select between all matching sockets to add connections to.

In addition to the structural improvements of the add connection socket menus and the visual connection lines I’ve also added a way of connecting to and from sub-components of complex parameters. For example, a lot of parameters are 2D vector values, like a size with width and height, or a position with an x and y component. Before you could only connect these to other 2d parameters, but now it’s possible to connect to/from just one. For example setting just the height of elements using a value while leaving the width.

Additional improvements

UI/UX

• Like layers nodes now get a number to distinguish between then when there is more than one of the same type on a layer.
• Implemented alt-mouse wheel zoom.
• Improved selection highlights and automatic tool selection updates when clicking a layer node header and a layer nod parameter field.
• Improvements to transform handle dragging in transformed groups.

Platform support

• Many fixes and improvements related to testing the prototype on Windows.