Schema for configuring layers in plexus graphs

[tiffon]

Which problem is this PR solving?

This is the first PR of a series of PRs that will enhance plexus by adding the ability to specify elements of a directed graph as a series of layers.

This PR adds the types necessary to configure layers, which is a large part of the public API of the new functionality.

Short description of the changes

This covers the types for the layers prop on the not-yet-created LayeredDirectedGraph component.

See TLayer for the implementation.

An example use of the component and layers prop:

<LayeredDigraph
  minimap
  zoom
  className="DdgGraph"
  minimapClassName="u-plexusMiniMap"
  layoutManager={this.layoutManager}
  setOnGraph={classNameIsSmall}
  edges={edges}
  vertices={vertices}
  measurableNodesKey="nodes"
  layers={[
    {
      key: 'find-match-nodes-outline-layer',
      html: true,
      nodeRender: this.renderNodeOutline, 
    },
    {
      key: 'svg-layers',
      svg: true,
      defs: [
        {
          type: plexus.ArrowMarkerEnd,
          scaleDampener: 0.8,
          setOnMarker: { className: 'DdgGraph--edgeMarkerEnd' },
          localId: 'arrow'
        },
        {
          type: plexus.ArrowMarkerEnd,
          scaleDampener: 0.8,
          setOnMarker: { className: 'DdgGraph--edgeMarkerEnd is-hovered' },
          localId: 'hoveredArrow'
        }
      ],
      layers: [
        {
          key: 'nodes-outline',
          nodeRender: this.renderNodeOutline,
        },
        {
          key: 'edges-visible-path',
          edges: true,
          setOnContainer: [{ className: 'DdgGraph--edges' }, this.scaleOpacity],
          setOnEdge: this.setOnEdge,
        },
        {
          key: 'edges-pointer-area',
          edges: true,
          setOnContainer: { className: 'DdgGraph--edgesPointerArea' },
          setOnEdge: { onMouseOver: console.log },
        }
      ],
    },
    {
      key: 'nodes',
      html: true,
      nodeRender: this.renderNode,
      measurable: true,
    }
  ]}
/>

[codecov]

Codecov Report

Merging #414 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #414   +/-   ##
=======================================
  Coverage   91.46%   91.46%           
=======================================
  Files         174      174           
  Lines        3915     3915           
  Branches      897      897           
=======================================
  Hits         3581     3581           
  Misses        296      296           
  Partials       38       38

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9b816a5...72b4e7a. Read the comment docs.

[everett980]

It looks good to me. Some questions but they may not lead to code changes just my own understanding of TypeScript.

[everett980]

Minor, but: would undefined be better than null?