test/html-whatpm/table-script.js

function tableToCanvas (table) {
  var canvas = document.createElement ('canvas');
  document.body.appendChild (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,
    rowLeft: 15,
    cellTop: 20,
    cellLeft: 20,
    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',
    overlappingCellFillStyle: 'red',
    overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)'
  };

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

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

var y = param.rowTop;
for (var i = 1; 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 ();
  c2d.beginPath ();
  c2d.rect (param.rowGroupLeft,
            y,
            (param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,
            dy - param.rowSpacing);
  c2d.fill ();
  c2d.closePath ();
  y += dy;
  i += rg.height - 1;
}

c2d.beginPath ();
c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;
var x = param.columnLeft;
for (var i = 1; i < table.column_group.length; i++) {
  var cg = table.column_group[i];
  c2d.moveTo (x, param.columnGroupTop);
  x += (param.columnWidth + param.columnSpacing) * cg.width;
  c2d.lineTo (x - param.columnSpacing, param.columnGroupTop);
  i += cg.width - 1;
}
c2d.stroke ();
c2d.closePath ();

var x = param.columnLeft;
for (var i = 1; i < columnNumber; i++) {
  var c = table.column[i];
  c2d.beginPath ();
  c2d.moveTo (x, param.columnTop);
  x += param.columnWidth + param.columnSpacing;
  c2d.lineTo (x - param.columnSpacing, param.columnTop);
  if (c) {
    c2d.strokeStyle = param.explicitColumnStrokeStyle;
  } else {
    c2d.strokeStyle = param.impliedColumnStrokeStyle;
  }
  c2d.stroke ();
  c2d.closePath ();
}

var x = param.cellLeft;
for (var i = 1; i < table.cell.length; i++) {
  var y = param.cellTop;
  if (!table.cell[i]) continue;
  for (var j = 1; j < table.cell[i].length; j++) {
    var c = table.cell[i][j];
    if (c && ((c[0].x == i && c[0].y == j) || c.length > 1)) {
      c2d.beginPath ();
      var width = (param.columnWidth + param.columnSpacing) * c[0].width
          - param.columnSpacing;
      var height = (param.rowHeight + param.rowSpacing) * c[0].height
          - param.rowSpacing;
      if (c.length == 1) {
        c2d.rect (x, y, width, height);
        c2d.fillStyle = c[0].is_header
            ? param.headerCellFillStyle : param.dataCellFillStyle;
        c2d.strokeStyle = c[0].is_header
            ? param.headerCellStrokeStyle : param.dataCellStrokeStyle;
      } else {
        c2d.rect (x, y, param.columnWidth, param.rowHeight);
        c2d.fillStyle = param.overlappingCellFillStyle;
        c2d.strokeStyle = param.overlappingCellStrokeStyle;
      }
      c2d.fill ();
      c2d.stroke ();
      c2d.closePath ();
    }
    y += param.rowHeight + param.rowSpacing;
  }
  x += param.columnWidth + param.columnSpacing;
}

var y = param.rowTop;
for (var i = 1; i < rowNumber; i++) {
  c2d.beginPath ();
  c2d.moveTo (param.rowLeft, y);
  y += param.rowHeight + param.rowSpacing;
  c2d.lineTo (param.rowLeft, y - param.rowSpacing);
  //if (true) {
    c2d.strokeStyle = param.explicitRowStrokeStyle;
  //} else {
  //  c2d.strokeStyle = param.impliedRowStrokeStyle;
  //}
  c2d.stroke ();
  c2d.closePath ();
}
} // tableToCanvas

/*

Copyright 2007 Wakaba <w@suika.fam.cx>

This library is free software; you can redistribute it
and/or modify it under the same terms as Perl itself.

*/
/* $Date: $ */
1	wakaba	1.1	function tableToCanvas (table) {
2			var canvas = document.createElement ('canvas');
3			document.body.appendChild (canvas);
4			var c2d = canvas.getContext ('2d');
5
6			var param = {
7			columnLeft: 20,
8			columnWidth: 20,
9			columnSpacing: 5,
10			columnGroupTop: 10,
11			columnTop: 15,
12			rowTop: 20,
13			rowHeight: 20,
14			rowSpacing: 5,
15			rowGroupLeft: 10,
16			rowLeft: 15,
17			cellTop: 20,
18			cellLeft: 20,
19			cellBottom: 20,
20			cellRight: 20,
21			explicitColumnGroupStrokeStyle: 'black',
22			explicitColumnStrokeStyle: 'black',
23			impliedColumnStrokeStyle: '#C0C0C0',
24			explicitHeaderRowGroupStrokeStyle: 'black',
25			explicitHeaderRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)',
26			explicitBodyRowGroupStrokeStyle: 'black',
27			explicitBodyRowGroupFillStyle: 'rgba(0, 0, 0, 0)',
28			explicitFooterRowGroupStrokeStyle: 'black',
29			explicitFooterRowGroupFillStyle: 'rgba(220, 220, 220, 0.3)',
30			explicitRowStrokeStyle: 'black',
31			impliedRowStrokeStyle: '#C0C0C0',
32			headerCellFillStyle: 'rgba(192, 192, 192, 0.5)',
33			headerCellStrokeStyle: 'black',
34			dataCellFillStyle: 'rgba(0, 0, 0, 0)',
35			dataCellStrokeStyle: 'black',
36			overlappingCellFillStyle: 'red',
37			overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)'
38			};
39
40			var columnNumber = table.column.length;
41			if (columnNumber < table.cell.length) columnNumber = table.cell.length;
42			var rowNumber = 0;
43			for (var i = 1; i < table.cell.length; i++) {
44			if (table.cell[i] && rowNumber < table.cell[i].length) {
45			rowNumber = table.cell[i].length;
46			}
47			}
48
49			canvas.width = param.cellLeft
50			+ (param.columnWidth + param.columnSpacing) * columnNumber
51			+ param.cellRight;
52			canvas.height = param.cellTop
53			+ (param.rowHeight + param.rowSpacing) * rowNumber
54			+ param.cellBottom;
55			canvas.style.width = 'auto'; // NOTE: Opera9 has default style=""
56			canvas.style.height = 'auto';
57
58			var y = param.rowTop;
59			for (var i = 1; i < table.row_group.length; i++) {
60			var rg = table.row_group[i];
61			c2d.beginPath ();
62			if (rg.type == 'thead') {
63			c2d.strokeStyle = param.explicitHeaderRowGroupStrokeStyle;
64			c2d.fillStyle = param.explicitHeaderRowGroupFillStyle;
65			} else if (rg.type == 'tfoot') {
66			c2d.strokeStyle = param.explicitFooterRowGroupStrokeStyle;
67			c2d.fillStyle = param.explicitFooterRowGroupFillStyle;
68			} else {
69			c2d.strokeStyle = param.explicitBodyRowGroupStrokeStyle;
70			c2d.fillStyle = param.explicitBodyRowGroupFillStyle;
71			}
72			var dy = (param.rowHeight + param.rowSpacing) * rg.height;
73			c2d.moveTo (param.rowGroupLeft, y);
74			c2d.lineTo (param.rowGroupLeft, y + dy - param.rowSpacing);
75			c2d.stroke ();
76			c2d.closePath ();
77			c2d.beginPath ();
78			c2d.rect (param.rowGroupLeft,
79			y,
80			(param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,
81			dy - param.rowSpacing);
82			c2d.fill ();
83			c2d.closePath ();
84			y += dy;
85			i += rg.height - 1;
86			}
87
88			c2d.beginPath ();
89			c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;
90			var x = param.columnLeft;
91			for (var i = 1; i < table.column_group.length; i++) {
92			var cg = table.column_group[i];
93			c2d.moveTo (x, param.columnGroupTop);
94			x += (param.columnWidth + param.columnSpacing) * cg.width;
95			c2d.lineTo (x - param.columnSpacing, param.columnGroupTop);
96			i += cg.width - 1;
97			}
98			c2d.stroke ();
99			c2d.closePath ();
100
101			var x = param.columnLeft;
102			for (var i = 1; i < columnNumber; i++) {
103			var c = table.column[i];
104			c2d.beginPath ();
105			c2d.moveTo (x, param.columnTop);
106			x += param.columnWidth + param.columnSpacing;
107			c2d.lineTo (x - param.columnSpacing, param.columnTop);
108			if (c) {
109			c2d.strokeStyle = param.explicitColumnStrokeStyle;
110			} else {
111			c2d.strokeStyle = param.impliedColumnStrokeStyle;
112			}
113			c2d.stroke ();
114			c2d.closePath ();
115			}
116
117			var x = param.cellLeft;
118			for (var i = 1; i < table.cell.length; i++) {
119			var y = param.cellTop;
120			if (!table.cell[i]) continue;
121			for (var j = 1; j < table.cell[i].length; j++) {
122			var c = table.cell[i][j];
123			if (c && ((c[0].x == i && c[0].y == j) \|\| c.length > 1)) {
124			c2d.beginPath ();
125			var width = (param.columnWidth + param.columnSpacing) * c[0].width
126			- param.columnSpacing;
127			var height = (param.rowHeight + param.rowSpacing) * c[0].height
128			- param.rowSpacing;
129			if (c.length == 1) {
130			c2d.rect (x, y, width, height);
131			c2d.fillStyle = c[0].is_header
132			? param.headerCellFillStyle : param.dataCellFillStyle;
133			c2d.strokeStyle = c[0].is_header
134			? param.headerCellStrokeStyle : param.dataCellStrokeStyle;
135			} else {
136			c2d.rect (x, y, param.columnWidth, param.rowHeight);
137			c2d.fillStyle = param.overlappingCellFillStyle;
138			c2d.strokeStyle = param.overlappingCellStrokeStyle;
139			}
140			c2d.fill ();
141			c2d.stroke ();
142			c2d.closePath ();
143			}
144			y += param.rowHeight + param.rowSpacing;
145			}
146			x += param.columnWidth + param.columnSpacing;
147			}
148
149			var y = param.rowTop;
150			for (var i = 1; i < rowNumber; i++) {
151			c2d.beginPath ();
152			c2d.moveTo (param.rowLeft, y);
153			y += param.rowHeight + param.rowSpacing;
154			c2d.lineTo (param.rowLeft, y - param.rowSpacing);
155			//if (true) {
156			c2d.strokeStyle = param.explicitRowStrokeStyle;
157			//} else {
158			// c2d.strokeStyle = param.impliedRowStrokeStyle;
159			//}
160			c2d.stroke ();
161			c2d.closePath ();
162			}
163			} // tableToCanvas
164
165			/*
166
167			Copyright 2007 Wakaba <w@suika.fam.cx>
168
169			This library is free software; you can redistribute it
170			and/or modify it under the same terms as Perl itself.
171
172			*/
173			/* $Date: $ */