test/html-whatpm/table-script.js

function tableToCanvas (table, parent) {
  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,
    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 map = document.createElement ('map');
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;
        if (c[0].id) {
          var area = document.createElement ('area');
          area.shape = 'rect';
          area.coords = [x, y, x + width, y + height].join (',');
          area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')';
          area.href = '#node-' + c[0].id;
          area.id = 'cell-' + c[0].id;
          map.appendChild (area);
        }
      } 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 ();
}

  if (map.hasChildNodes ()) {
    var mapid = 'table-map-' + ++document.TableMapId;
    map.name = mapid;
    parent.appendChild (map);
    var img = document.createElement ('img');
    img.src = canvas.toDataURL ();
    img.useMap = '#' + mapid;
    parent.appendChild (img);
    canvas.style.display = 'none';
  }
} // tableToCanvas

if (!document.TableMapId) document.TableMapId = 0;

/*

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 10:00:48 $ */
1	wakaba	1.3	function tableToCanvas (table, parent) {
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			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	wakaba	1.2	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	wakaba	1.1	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	wakaba	1.3	var map = document.createElement ('map');
122	wakaba	1.1	var x = param.cellLeft;
123			for (var i = 1; i < table.cell.length; i++) {
124			var y = param.cellTop;
125			if (!table.cell[i]) continue;
126			for (var j = 1; j < table.cell[i].length; j++) {
127			var c = table.cell[i][j];
128			if (c && ((c[0].x == i && c[0].y == j) \|\| c.length > 1)) {
129			c2d.beginPath ();
130			var width = (param.columnWidth + param.columnSpacing) * c[0].width
131			- param.columnSpacing;
132			var height = (param.rowHeight + param.rowSpacing) * c[0].height
133			- param.rowSpacing;
134			if (c.length == 1) {
135			c2d.rect (x, y, width, height);
136			c2d.fillStyle = c[0].is_header
137			? param.headerCellFillStyle : param.dataCellFillStyle;
138			c2d.strokeStyle = c[0].is_header
139			? param.headerCellStrokeStyle : param.dataCellStrokeStyle;
140	wakaba	1.3	if (c[0].id) {
141			var area = document.createElement ('area');
142			area.shape = 'rect';
143			area.coords = [x, y, x + width, y + height].join (',');
144			area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')';
145			area.href = '#node-' + c[0].id;
146			area.id = 'cell-' + c[0].id;
147			map.appendChild (area);
148			}
149	wakaba	1.1	} else {
150			c2d.rect (x, y, param.columnWidth, param.rowHeight);
151			c2d.fillStyle = param.overlappingCellFillStyle;
152			c2d.strokeStyle = param.overlappingCellStrokeStyle;
153			}
154			c2d.fill ();
155			c2d.stroke ();
156			c2d.closePath ();
157			}
158			y += param.rowHeight + param.rowSpacing;
159			}
160			x += param.columnWidth + param.columnSpacing;
161			}
162
163			var y = param.rowTop;
164			for (var i = 1; i < rowNumber; i++) {
165			c2d.beginPath ();
166			c2d.moveTo (param.rowLeft, y);
167			y += param.rowHeight + param.rowSpacing;
168			c2d.lineTo (param.rowLeft, y - param.rowSpacing);
169			//if (true) {
170			c2d.strokeStyle = param.explicitRowStrokeStyle;
171			//} else {
172			// c2d.strokeStyle = param.impliedRowStrokeStyle;
173			//}
174			c2d.stroke ();
175			c2d.closePath ();
176			}
177	wakaba	1.3
178			if (map.hasChildNodes ()) {
179			var mapid = 'table-map-' + ++document.TableMapId;
180			map.name = mapid;
181			parent.appendChild (map);
182			var img = document.createElement ('img');
183			img.src = canvas.toDataURL ();
184			img.useMap = '#' + mapid;
185			parent.appendChild (img);
186			canvas.style.display = 'none';
187			}
188	wakaba	1.1	} // tableToCanvas
189
190	wakaba	1.3	if (!document.TableMapId) document.TableMapId = 0;
191
192	wakaba	1.1	/*
193
194			Copyright 2007 Wakaba <w@suika.fam.cx>
195
196			This library is free software; you can redistribute it
197			and/or modify it under the same terms as Perl itself.
198
199			*/
200	wakaba	1.3	/* $Date: 2007/05/27 10:00:48 $ */