Creator: Add legend to Connections and adjust labels

[brettfiedler]

While we're rooting around creator - Shall we remove the Connections after each checkbox and turn that word into a header? And then add a small dash line that matches the color of the link beside the label? This will add clarity and shrink the size of the legend.

If it's simple, it might be a nice addition to vary the line structure for each type of connection by a little

 - . - . - . -
 - - - - - -
 . . . . . . . .
 - . . - . . -
 - - . - - . - -

and so on if we add new connections.

[jessegreenberg]

Pushed to the dev branch. How is this?

If it's simple, it might be a nice addition to vary the line structure for each type of connection by a little

It is simple to play around with lineDash. But I think anything else would be a lot more manual drawing code. I made the lineDash different for each wire in the canvas and in the legend.

If you want to try out different values, you can play with these: https://github.com/phetsims/paper-land/blob/d7088a15e9dd1843b27f448f5f7b7baf198f0292/client/creator/view/ViewConstants.js#L89-L94

But if that is no good I will revert that part. Let me know what you think!

[terracoda]

Changing the patterns on the dashed lines is a good idea. It means we are not using color alone to communicate meaning!

[jessegreenberg]

I just reduced the spacing a bit so it is easier to see the arrow heads. But the constants are still in place to make the line-dashes different for each wire! Feel free to change these however you see fit:

https://github.com/phetsims/paper-land/blob/ec9abd5159ece6467a4f48910efb48346dfe8935/client/creator/view/ViewConstants.js#L91-L95

[brettfiedler]

I tried out this arrangement. Was different enough I thought worth pushing (commit: https://github.com/phetsims/paper-land/commit/35f32b68f8b5596735056e282de700cc7c0dda4f)! Currently on dev branch

[brettfiedler]

Overall complete, raise issues as needed.