test/html-whatpm/table-script.js

function tableToCanvas (table, parent, idPrefix) {
  var canvas = document.createElement ('canvas');
  parent.appendChild (canvas);
  if (window.G_vmlCanvasManager) {
    canvas = G_vmlCanvasManager.initElement (canvas);
  }
  var c2d = canvas.getContext ('2d');

  var param = {
    columnLeft: 20,
    columnWidth: 20,
    columnSpacing: 5,
    columnGroupTop: 10,
    columnTop: 15,
    rowTop: 20,
    rowHeight: 20,
    rowSpacing: 5,
    rowGroupLeft: 10,
    rowGroupFillLeft: 20, /* Must be same as columnLeft */
    rowLeft: 15,
    cellTop: 20,
    cellLeft: 20, /* Must be same as columnLeft */
    cellBottom: 20,
    cellRight: 20,
    explicitColumnGroupStrokeStyle: 'black',
    explicitColumnStrokeStyle: 'black',
    impliedColumnStrokeStyle: '#C0C0C0',
    explicitHeaderRowGroupStrokeStyle: 'black',
    explicitHeaderRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)',
    explicitBodyRowGroupStrokeStyle: 'black',
    explicitBodyRowGroupFillStyle: 'rgba(0, 0, 0, 0)',
    explicitFooterRowGroupStrokeStyle: 'black',
    explicitFooterRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)',
    explicitRowStrokeStyle: 'black',
    impliedRowStrokeStyle: '#C0C0C0',
    headerCellFillStyle: 'rgba(192, 192, 192, 0.5)',
    headerCellStrokeStyle: 'black',
    dataCellFillStyle: 'rgba(0, 0, 0, 0)',
    dataCellStrokeStyle: 'black',
    emptyDataCellStrokeStyle: '#C0C0C0',
    overlappingCellFillStyle: 'red',
    overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)',
    highlightCellFillStyle: 'yellow'
  };

  canvas.drawTable = function () {

var columnNumber = table.column.length;
if (columnNumber < table.cell.length) columnNumber = table.cell.length;
var rowNumber = 0;
for (var i = 0; i < table.cell.length; i++) {
  if (table.cell[i] && rowNumber < table.cell[i].length) {
    rowNumber = table.cell[i].length;
  }
}

canvas.style.width = 'auto'; // NOTE: Opera9 has default style=""
canvas.style.height = 'auto';
// NOTE: Set style="" before width/height="" for ExplorerCanvas compatibility
canvas.width = param.cellLeft
    + (param.columnWidth + param.columnSpacing) * columnNumber
    + param.cellRight;
canvas.height = param.cellTop
    + (param.rowHeight + param.rowSpacing) * rowNumber
    + param.cellBottom;

var y = param.rowTop;
for (var i = 0; i < table.row_group.length; i++) {
  var rg = table.row_group[i];
  c2d.beginPath ();
  if (rg.type == 'thead') {
    c2d.strokeStyle = param.explicitHeaderRowGroupStrokeStyle;
    c2d.fillStyle = param.explicitHeaderRowGroupFillStyle;
  } else if (rg.type == 'tfoot') {
    c2d.strokeStyle = param.explicitFooterRowGroupStrokeStyle;
    c2d.fillStyle = param.explicitFooterRowGroupFillStyle;
  } else {
    c2d.strokeStyle = param.explicitBodyRowGroupStrokeStyle;
    c2d.fillStyle = param.explicitBodyRowGroupFillStyle;
  }
  var dy = (param.rowHeight + param.rowSpacing) * rg.height;
  c2d.moveTo (param.rowGroupLeft, y);
  c2d.lineTo (param.rowGroupLeft, y + dy - param.rowSpacing);
  c2d.stroke ();
  c2d.closePath ();
1	wakaba	1.4	function tableToCanvas (table, parent, idPrefix) {
2	wakaba	1.1	var canvas = document.createElement ('canvas');
3	wakaba	1.3	parent.appendChild (canvas);
4	wakaba	1.2	if (window.G_vmlCanvasManager) {
5			canvas = G_vmlCanvasManager.initElement (canvas);
6			}
7	wakaba	1.1	var c2d = canvas.getContext ('2d');
8
9			var param = {
10			columnLeft: 20,
11			columnWidth: 20,
12			columnSpacing: 5,
13			columnGroupTop: 10,
14			columnTop: 15,
15			rowTop: 20,
16			rowHeight: 20,
17			rowSpacing: 5,
18			rowGroupLeft: 10,
19	wakaba	1.6	rowGroupFillLeft: 20, /* Must be same as columnLeft */
20	wakaba	1.1	rowLeft: 15,
21			cellTop: 20,
22	wakaba	1.6	cellLeft: 20, /* Must be same as columnLeft */
23	wakaba	1.1	cellBottom: 20,
24			cellRight: 20,
25			explicitColumnGroupStrokeStyle: 'black',
26			explicitColumnStrokeStyle: 'black',
27			impliedColumnStrokeStyle: '#C0C0C0',
28			explicitHeaderRowGroupStrokeStyle: 'black',
29			explicitHeaderRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)',
30			explicitBodyRowGroupStrokeStyle: 'black',
31			explicitBodyRowGroupFillStyle: 'rgba(0, 0, 0, 0)',
32			explicitFooterRowGroupStrokeStyle: 'black',
33			explicitFooterRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)',
34			explicitRowStrokeStyle: 'black',
35			impliedRowStrokeStyle: '#C0C0C0',
36			headerCellFillStyle: 'rgba(192, 192, 192, 0.5)',
37			headerCellStrokeStyle: 'black',
38			dataCellFillStyle: 'rgba(0, 0, 0, 0)',
39			dataCellStrokeStyle: 'black',
40	wakaba	1.8	emptyDataCellStrokeStyle: '#C0C0C0',
41	wakaba	1.1	overlappingCellFillStyle: 'red',
42	wakaba	1.7	overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)',
43			highlightCellFillStyle: 'yellow'
44	wakaba	1.1	};
45
46	wakaba	1.7	canvas.drawTable = function () {
47
48	wakaba	1.1	var columnNumber = table.column.length;
49			if (columnNumber < table.cell.length) columnNumber = table.cell.length;
50			var rowNumber = 0;
51	wakaba	1.5	for (var i = 0; i < table.cell.length; i++) {
52	wakaba	1.1	if (table.cell[i] && rowNumber < table.cell[i].length) {
53			rowNumber = table.cell[i].length;
54			}
55			}
56
57	wakaba	1.2	canvas.style.width = 'auto'; // NOTE: Opera9 has default style=""
58			canvas.style.height = 'auto';
59			// NOTE: Set style="" before width/height="" for ExplorerCanvas compatibility
60	wakaba	1.1	canvas.width = param.cellLeft
61			+ (param.columnWidth + param.columnSpacing) * columnNumber
62			+ param.cellRight;
63			canvas.height = param.cellTop
64			+ (param.rowHeight + param.rowSpacing) * rowNumber
65			+ param.cellBottom;
66
67			var y = param.rowTop;
68	wakaba	1.5	for (var i = 0; i < table.row_group.length; i++) {
69	wakaba	1.1	var rg = table.row_group[i];
70			c2d.beginPath ();
71			if (rg.type == 'thead') {
72			c2d.strokeStyle = param.explicitHeaderRowGroupStrokeStyle;
73			c2d.fillStyle = param.explicitHeaderRowGroupFillStyle;
74			} else if (rg.type == 'tfoot') {
75			c2d.strokeStyle = param.explicitFooterRowGroupStrokeStyle;
76			c2d.fillStyle = param.explicitFooterRowGroupFillStyle;
77			} else {
78			c2d.strokeStyle = param.explicitBodyRowGroupStrokeStyle;
79			c2d.fillStyle = param.explicitBodyRowGroupFillStyle;
80			}
81			var dy = (param.rowHeight + param.rowSpacing) * rg.height;
82			c2d.moveTo (param.rowGroupLeft, y);
83			c2d.lineTo (param.rowGroupLeft, y + dy - param.rowSpacing);
84			c2d.stroke ();
85			c2d.closePath ();
86