Support for axis without arrow head(s)

[pixelzoom]

Axes are frequently need to be drawn without arrow heads in PhET sims. To accomplish that using bamboo's AxisNode, you have to clip to the ChartRectange to remove the parts of the axis (including the arrow head or heads) that extend past the edges.

So something like what I've done in base class WaveformChartNode in Fourier:

    // Parent for Nodes that must be clipped to the bounds of chartRectangle
    const clippedParent = new Node( {
      clipArea: chartRectangle.getShape(),
      children: [ xAxis, yAxis ]
    } );

    options.children = [
      .... // all the childen that are not clipped
      clippedParent
    ];

This is inconvenient, and I'd like to have a way of creating axes that do not have arrow heads. Some ways to accomplish that:

(1) Add an option to AxisNode, maybe something like:

// 0  = no arrow heads
// 1 = one arrow head, pointing in the positive direction
// 2 = two arrow heads
numberOfArrowHeads: 2

This would be a rewrite of AxisNode, since it currently extends ArrowNode and uses its options. Surprisingly, I only see AxisNode used in Fourier.

(2) Create a new type of axis Node that does not involve arrows. The extension option might still be nice to have, but default to 0. This involves coming up with a good name for the new class, and probably coming up with a new name for AxisNode -- maybe AxisLine and AxisArrowNode, since they are subclasses (specializations) of Line and ArrowNode? This is definitely the easier of the 2 approaches.

@samreid thoughts?

[pixelzoom]

In the above commits, I added AxisLine, and I'm using it throughout Fourier.

There is a lot of duplication between AxisLine and AxisNode, but also some important differences.

[samreid]

AxisLine sounds reasonable, but I'm wondering what you think about using the ArrowNode API for customizing it. For instance, setting an arrow head width/height to 0? Or combining that with doubleHead to determine the number of arrowheads?

[pixelzoom]

That was option (2) in #38 (comment). It's more complicated and will involve options that can't be combined. I sort of double that ArrowNode supports headWidth:0 or headHeight:0, and I really don't want to touch ArrowNode.

So I'm inclined to rename AxisNode to AxisArrowNode, and call this done. @samreid thoughts?

[pixelzoom]

I guess another approach would be AxisNode extends Node, and then have it create either ArrowNode or Line, based on options. An immediate problem is that ArrowNode and Line have very different APIs. So AxisNode API would probably need to look something like (yuck):

class AxisNode extends Node {

    options = merge( {
      value: 0, // by default the axis is at 0, but you can put it somewhere else
      extension: 20, // in view coordinates, how far the axis goes past the edge of the ChartRectangle

      useArrowNode: true, // true=use ArrowNode and arrowNodeOptions, false= use Line and lineOptions
      
      // ArrowNode options
      arrowNodeOptions: {
        doubleHead: true,
        headHeight: 10,
        headWidth: 10,
        tailWidth: 2
      },
      
      // Line options
      lineOptions: {
        lineWidth: 2
      }
    }, options );
} 

[samreid]

So I'm inclined to rename AxisNode to AxisArrowNode, and call this done. @samreid thoughts?

That seems the best solution to me. Still sound good to you?

[pixelzoom]

In the above commits, I renamed AxisNode to AxisArrowNode, and I used AxisLine in one bamboo demo. I was surprised to find that AxisNode was not used outside of the bamboo demos.

Since this is a breaking API change, I announced on the Google Group at https://groups.google.com/g/developing-interactive-simulations-in-html5/c/1Zm4l3sye20/m/Iy34b9jRAAAJ.

@samreid have a look, feel free to close if it looks OK.

[samreid]

I reviewed the commits and tested the ChartCanvasNode demo. It seems reasonable and I don't have any recommendations, closing.