Help features

As the next big milestone for the project will be to do some testing with external testers an important feature is to start working on the built in help features. As I’ve mentioned before the intention is to make Paragraphic work more like traditional WYSIWYG graphic editors, which should help users get started. However, this also means that users will have more preconceptions on how they expect things to work that might collide with the parametric nature of Paragraphic. With this in mind I want to start early adding features that provide the users with feedback and information to understand what is going on / going wrong.

Inline warnings and message flashes

I’ve now implemented an inline warning and info message system that allows nodes, layers and individual parameters to display warnings or information messages. The warning count is shown on the affected layer or closest collapsed parent allowing you to see and track down issues even if they’re in a collapsed group or closed node panel in the inspector.

I’ve also added a way to display simple “flash warnings” that pop up temporarily at the bottom of the screen and then fade away for more action based feedback/warnings. For example explaining that the position of a layer is locked if you try to move a layer where the position is based on a connected value.

Hopefully this will make it easier to figure out why something isn’t working, and help users learn how the application works and what they can do with it.

Output structure panel

Another new feature is the new layer output structure panel that you can now show for any layer (or the entire artboard). This gives you an hierarchical view of the elements generated by the layer, showing for example the grouping and individual instances of repeated elements. This will be nice as a debugging tool during development, but also hopefully be a help for future users to understand how the generation works. For example it could help understanding the hierarchy and order of elements that the layer nodes work with.

One issue that quickly became apparent was that the order of the elements is reversed compared to the layers in the layers list. This is because the generated output is in the order it will be drawn, so the Line will be drawn last and on top. This is also the order they will be in the generated SVG export. However, in the layers view I’ve followed the convention of putting the top layer on top instead and reversed that list. Ideally the order would be the same, so I’ve now reversed it again to get the same order as the layers list, and hopefully this will not cause more confusion.

Additional changes and additions

UI additions

• Added Layers top bar menu, giving access to the same context menu for layer actions (like group/ungroup, reorder etc) with keyboard shortcuts.
• Improved “home tab” shown when all documents are closed.
• More improvements to layer node panels, with added layer output socket at the end.

Generation / structure

• Remade how layer Groups work, making them more like regular layers with a custom layer group generator node as the first node in the node sequence.
• Reworked internal vector parameters (sizes, positions etc) to use double precision floats to avoid future precision issues with the faster standard float Vector2 precision. This was a big job, and there are some components left.