Hypergrid v2.1.15

[joneit]

Synopsis

1. Fix partial render grid lines (Issue gridlines vs. by-cells renderer #730)
2. Option to turn off canvas's alpha channel
3. Fix error in Hypgrid.prototype.terminate
4. Add more dashboard controls to demo/row-props.html
5. Add autosizeGroups and documentation to fin-hypergrid-grouped-header-plugin

1. Fix partial renderer grid lines (Issue #730)

This issue affects the "partial renderer" only. The partial render is the "by-cells" grid renderer, which is the "difference engine" renderer that only repaints cells whose contents has changed. This renderer has the major advantage of speed, up to 5x faster (!).

The issue was that the cells were overwriting the lines previously drawn by the key frame render. This is because in the default "boxSizing" mode (grid.properties.boxSizing = 'border-box'), cell contents includes the one-pixel borders.

The fix was to redraw the grid lines in this situation, which incurs a negligible performance hit. You can however avoid this by setting .boxSizing = 'content-box' (which has some other advantages besides).

You can play with the box-sizing modes as well as the grid line widths using the new dashboard controls in the row-props.html app. (See item 4 below.)

2. Option to turn off canvas's alpha channel

Hypergrid intentionally supports transparent/translucent grids, for example:

grid.properties.backgroundColor = 'transparent'; grid.repaint();
grid.properties.backgroundColor = 'rgba(0,0,0,0)'; grid.repaint();
grid.properties.backgroundColor = 'rgba(200,0,0,.5)'; grid.repaint();

The use case for a transparent or translucent grid is rare, however, so we are introducing a new grid instantiation option for v2.1.15 and v3.0.0: options.canvasContextAttributes a value that will be passed to HTMLCanvasElement.getContext:

var gridOptions = {
    canvasContextAttributes: { alpha: false }
};
var myGrid = new Hypergrid(gridOptions);

The only "context attribute" currently available is alpha:

Boolean that indicates if the canvas contains an alpha channel. If set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images.

Use with caution. In particular, if the canvas is set to "opaque" ({alpha: false}), do not also specify a transparent or translucent color for grid.properties.backGround because content may then be drawn with corrupt anti-aliasing (at lest in Chrome v67).

Note that such an "opaque" canvas can still be made to appear translucent using the CSS opacity property — a different effect entirely.

Although alpha: false has no apparent performance gains (in Chrome v63), it does permit the graphics context to use sub-pixel rendering for sharper text when viewed on LCD or LED screens, in especially black text on white backgrounds. The improvement is particularly apparent when viewed on a high-pixel-density display (such as an Apple retina display).

canvasContextAttributes	Canvas	Text	Sample
alpha: true	transparent	regular anti-aliasing
alpha: false	opaque	sub-pixel rendering

3. Fix error in Hypgrid.prototype.terminate

Fixed a coding error in the terminate method, which now functions correctly: The shared property Hypergrid.grids maintains a list of instantiated grids. Use grid.terminate() to remove a grid from the list before deleting it's canvas element.

4. Add more dashboard controls to demo/row-props.html

• New controls:
  • Rule lines
    • Horizontal (between rows)
      • enable (gridLinesH)
      • color (gridLinesHColor)
      • width (gridLinesHWidth)
    • Vertical (between columns)
      • enable (gridLinesV)
      • color (gridLinesVColor)
      • width (gridLinesVWidth)
  • Divider rule lines
    • Horizontal (between column headers or fixed rows and the scrolling content)
      • color (fixedLinesHColor)
      • width (fixedLinesHWidth)
      • edge (fixedLinesHEdge)
    • Vertical (between row headers or fixed columns and the scrolling content)
      • color (fixedLinesVColor)
      • width (fixedLinesVWidth)
      • edge (fixedLinesVEdge)
  • Fixed row count (fixedRowCount)
  • Fixed column count (fixedColumnCount)
  • Cell "box sizing" (box-sizing)
• Added missing repaint() calls to some controls.
• Reposition "behind-the-grid content" (orange circle) relative to grid to accommodate wrapped controls.

5. Add autosizeGroups and documentation to fin-hypergrid-grouped-header-plugin

Though technically not a part of Hypergrid core, it is worth noting here that fin-hypergrid-grouped-header-plugin has been updated to version 1.2.0.

• Add autosizeGroups property (default: true) — see README
• Rewrote README.md. (The original README content w/examples was unfortunately lost some time back.)
• Published to nmpjs.org. (Note however the version of the README found here has some minor errors & omissions.)
• Published to CDN.