Charts/graphs should be resizable

[jonathanolson]

This came up as being potentially desirable (and seemed like it could have helped a sim). Not currently needed but could be very helpful.

[veillette]

@jonathanolson, I am not sure what you are proposing, but to give you some context, I am currently using Bamboo in calculus Grapher. So far it has worked remarkably well.

When zooming and or changing the (view) vertical height of the graph, you merely update the bamboo/chartTransform and the graph updates itself.

See below for an example of its uses in calculusGrapher GraphNode.js

    // chart transform for the graph, the height and Y range will be updated later
    this.chartTransform = new ChartTransform( {
      viewWidth: CalculusGrapherConstants.GRAPH_VIEW_WIDTH,
      modelXRange: CalculusGrapherConstants.CURVE_X_RANGE
    } );

    // grid lines
    const horizontalGridLines = new GridLineSet( this.chartTransform, Orientation.HORIZONTAL, 1, options.gridLineSetOptions );
    const verticalGridLines = new GridLineSet( this.chartTransform, Orientation.VERTICAL, 1, options.gridLineSetOptions );

    // chart Rectangle for the graph
    const chartRectangle = new ChartRectangle( this.chartTransform, options.chartRectangleOptions );

    // Axes nodes are clipped in the chart
    const horizontalAxisLine = new AxisLine( this.chartTransform, Orientation.HORIZONTAL );
    const verticalAxisLine = new AxisLine( this.chartTransform, Orientation.VERTICAL );

    // zoom level
    this.zoomLevelProperty = new NumberProperty(
      CalculusGrapherConstants.ZOOM_LEVEL_RANGE.defaultValue, {
        range: CalculusGrapherConstants.ZOOM_LEVEL_RANGE,
        tandem: options.tandem.createTandem( 'zoomLevelProperty' )
      } );

   // curve associated with this graph
    this.curveNode = this.getCurveNode( curve, this.chartTransform, options.curveNodeOptions );

    const getModelYRange = ( zoomLevel: number ): Range => {

      //TODO replace the constant 5
      const maxY = 5 * Math.pow( 2, -zoomLevel + CalculusGrapherConstants.ZOOM_LEVEL_RANGE.defaultValue );
      return new Range( -maxY, maxY );
    };

    this.zoomLevelProperty.link( zoomLevel => {
      this.chartTransform.setModelYRange( getModelYRange( zoomLevel ) );
    } );

   graphHeightProperty.link( height => {
      this.chartTransform.setViewHeight( height );
      this.curveNode.clipArea = chartRectangle.getShape();
      expandCollapseButton.top = chartRectangle.top;
      eyeToggleButton.bottom = chartRectangle.bottom;
      zoomButtonGroup.centerY = chartRectangle.centerY;
    } );
```

[veillette]

I was curious about how it works. Here is how Bamboo/AxisLine knows how to update itself.

    // Update when the transform changes.
    const changedListener = () => this.update();
    chartTransform.changedEmitter.addListener( changedListener );

    this.disposeAxisLine = () => chartTransform.changedEmitter.removeListener( changedListener );
  }

  private update(): void {
    const viewValue = this.chartTransform.modelToView( this.axisOrientation.opposite, this.value );

    // Move the axis to viewValue.
    if ( this.axisOrientation === Orientation.VERTICAL ) {
      this.setLine( viewValue, 0 - this.extension, viewValue, this.chartTransform.viewHeight + this.extension );
      this.setVisible( viewValue >= 0 && viewValue <= this.chartTransform.viewWidth );
    }
    else {
      this.setLine( 0 - this.extension, viewValue, this.chartTransform.viewWidth + this.extension, viewValue );
      this.setVisible( viewValue >= 0 && viewValue <= this.chartTransform.viewHeight );
    }
  }

As long as one updates the Bamboo/chartTransform, all the other Bamboo classes will update themselves.