test/html-whatpm/table-script.js

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