Compress Key layouts

[samreid]

While working on #540 I came across the key layouts, which look like this:

    PositiveIntegerLayout: [
      [ new Key( '7', KeyID.SEVEN ), new Key( '8', KeyID.EIGHT ), new Key( '9', KeyID.NINE ) ],
      [ new Key( '4', KeyID.FOUR ), new Key( '5', KeyID.FIVE ), new Key( '6', KeyID.SIX ) ],
      [ new Key( '1', KeyID.ONE ), new Key( '2', KeyID.TWO ), new Key( '3', KeyID.THREE ) ],
      [ new Key( '0', KeyID.ZERO, { horizontalSpan: 2 } ), new Key( ( new BackspaceIcon( { scale: 1.5 } ) ), KeyID.BACKSPACE ) ]
    ],

    PositiveAndNegativeIntegerLayout: [
      [ new Key( '7', KeyID.SEVEN ), new Key( '8', KeyID.EIGHT ), new Key( '9', KeyID.NINE ) ],
      [ new Key( '4', KeyID.FOUR ), new Key( '5', KeyID.FIVE ), new Key( '6', KeyID.SIX ) ],
      [ new Key( '1', KeyID.ONE ), new Key( '2', KeyID.TWO ), new Key( '3', KeyID.THREE ) ],
      [ new Key( ( new BackspaceIcon( { scale: 1.5 } ) ), KeyID.BACKSPACE ), new Key( '0', KeyID.ZERO ), new Key( PLUS_CHAR + '/' + MINUS_CHAR, KeyID.PLUS_MINUS ) ]
    ],

Since the Key seems to be a data type, it may be possible to factor out the keys like so:

  const _7 = new Key( '7', KeyID.SEVEN );
  const _8 = new Key( '8', KeyID.EIGHT );
  const _9 = new Key( '9', KeyID.NINE );
  const _4 = new Key( '4', KeyID.FOUR );
  const _5 = new Key( '5', KeyID.FIVE );
  const _6 = new Key( '6', KeyID.SIX );

  const _1 = new Key( '1', KeyID.ONE );
  const _2 = new Key( '2', KeyID.TWO );
  const _3 = new Key( '3', KeyID.THREE );

  const backspaceKey = new Key( ( new BackspaceIcon( { scale: 1.5 } ) ), KeyID.BACKSPACE );
  const _0 = new Key( '0', KeyID.ZERO, { horizontalSpan: 2 } );

     PositiveIntegerLayout: [
      [ _7, _8, _9 ],
      [ _4, _5, _6 ],
      [ _1, _2, _3 ],
      [ _0, backspaceKey ]
    ],

    PositiveAndNegativeIntegerLayout: [
      [ _7, _8, _9 ],
      [ _4, _5, _6 ],
      [ _1, _2, _3 ],
      [ backspaceKey, new Key( '0', KeyID.ZERO ), new Key( PLUS_CHAR + '/' + MINUS_CHAR, KeyID.PLUS_MINUS ) ]
    ],

Assigning to @jbphet for initial discussion.

[jbphet]

Seems like decent idea - it would certainly be easier to read. There is a difference between the code above and the code that is in Keypad.js right now in that the existing code uses unique instances if the Key class in each layout, whereas the suggested code is reusing instances across layouts. I'm not sure if that would have any consequences or not.

Back to @samreid for continued discussion. I don't have time to jump in on this at the moment since it doesn't seem particularly urgent, so you're welcome to try it out, request prioritization, or mark as deferred as you see fit.

[samreid]

@ariel-phet is there someone else that can look into this? It seems a straightforward suggestion that any developer could investigate.

[ariel-phet]

marking as medium since should be reasonably straightforward, but not a rush

[Denz1994]

I factored out the keys into constants in KeyPad.js. A few notes about the change:

• The static layouts use the constants, so the code looks more readable.
• KeyPad.WierdLayout wasn't refactored because the intent for that layout is for testing (according to its documentation). I thought it would make sense to leave as is since devs will most likely adjust the layout as needed.
• This was tested by running a few cycles in aqua and testing the keypads in Unit Rates, Projectile Motion, Area-Model-Algebra, and the scenery-phet/components screen.

Note: I did run into a "duplicates not allowed " console error while testing Projectile-Motion but this doesn't seem related to the changes above. Assigning back to @samreid for review.

[samreid]

The code changes look great, and I tested in scenery-phet test harness. Nice work @Denz1994, thanks, closing.