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 ();
  c2d.beginPath ();
  c2d.rect (param.rowGroupFillLeft,
            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 = 0; 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 = 0; 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 = 0; i < table.cell.length; i++) {
  var y = param.cellTop;
  if (!table.cell[i]) continue;
  for (var j = 0; 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
            : c[0].is_empty
                ? param.emptyDataCellStrokeStyle
                : 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 = '#' + idPrefix + 'node-' + c[0].id;
          area.id = idPrefix + 'cell-' + c[0].id;
          area.onmouseover = (function (v) {
            return function () {
              canvas.highlightCells (v);
            };
          }) (c[0].header);
          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 = 0; 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 ();
}

    return map;
  }; // canvas.drawTable

  canvas.highlightCells = function (cells) {
    var c2d = this.getContext ('2d');

    for (var x in cells) {
      for (var y in cells[x]) {
        if (cells[x][y]) {
          var cell = table.cell[x][y][0];
          c2d.beginPath ();
          c2d.rect
              (param.cellLeft + (param.columnWidth + param.columnSpacing) * x,
               param.cellTop + (param.rowHeight + param.rowSpacing) * y,
               (param.columnWidth + param.columnSpacing) * cell.width - param.columnSpacing,
               (param.rowHeight + param.rowSpacing) * cell.height - param.rowSpacing);
          c2d.fillStyle = param.highlightCellFillStyle;
          c2d.fill ();
          c2d.stroke ();
          c2d.closePath ();
        }
      }
    }
    this.updateImgElement ();
  } // canvas.highlightCells

  var map = canvas.drawTable ();
  if (map.hasChildNodes ()) {
    var mapid = /* idPrefix + */ 'table-map-' + ++document.TableMapId;
    map.name = mapid;
    parent.appendChild (map);
    var img = document.createElement ('img');
    img.useMap = '#' + mapid;
    canvas.updateImgElement = function () {
      img.src = this.toDataURL ();
    };
    img.onmouseover = function (e) {
      if (e.target == e.currentTarget) {
        canvas.drawTable ();
        canvas.updateImgElement ();
      }
    };
    canvas.updateImgElement ();
    parent.appendChild (img);
    canvas.style.display = 'none';
  } else {
    canvas.updateImgElement = function () {};
  }
} // tableToCanvas

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

/*

Copyright 2007-2008 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: 2008/05/06 07:50:28 $ */
1	function tableToCanvas (table, parent, idPrefix) {
2	var canvas = document.createElement ('canvas');
3	parent.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	rowGroupFillLeft: 20, /* Must be same as columnLeft */
20	rowLeft: 15,
21	cellTop: 20,
22	cellLeft: 20, /* Must be same as columnLeft */
23	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	emptyDataCellStrokeStyle: '#C0C0C0',
41	overlappingCellFillStyle: 'red',
42	overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)',
43	highlightCellFillStyle: 'yellow'
44	};
45
46	canvas.drawTable = function () {
47
48	var columnNumber = table.column.length;
49	if (columnNumber < table.cell.length) columnNumber = table.cell.length;
50	var rowNumber = 0;
51	for (var i = 0; i < table.cell.length; i++) {
52	if (table.cell[i] && rowNumber < table.cell[i].length) {
53	rowNumber = table.cell[i].length;
54	}
55	}
56
57	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	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	for (var i = 0; i < table.row_group.length; i++) {
69	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	c2d.beginPath ();
87	c2d.rect (param.rowGroupFillLeft,
88	y,
89	(param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,
90	dy - param.rowSpacing);
91	c2d.fill ();
92	c2d.closePath ();
93	y += dy;
94	i += rg.height - 1;
95	}
96
97	c2d.beginPath ();
98	c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;
99	var x = param.columnLeft;
100	for (var i = 0; i < table.column_group.length; i++) {
101	var cg = table.column_group[i];
102	c2d.moveTo (x, param.columnGroupTop);
103	x += (param.columnWidth + param.columnSpacing) * cg.width;
104	c2d.lineTo (x - param.columnSpacing, param.columnGroupTop);
105	i += cg.width - 1;
106	}
107	c2d.stroke ();
108	c2d.closePath ();
109
110	var x = param.columnLeft;
111	for (var i = 0; i < columnNumber; i++) {
112	var c = table.column[i];
113	c2d.beginPath ();
114	c2d.moveTo (x, param.columnTop);
115	x += param.columnWidth + param.columnSpacing;
116	c2d.lineTo (x - param.columnSpacing, param.columnTop);
117	if (c) {
118	c2d.strokeStyle = param.explicitColumnStrokeStyle;
119	} else {
120	c2d.strokeStyle = param.impliedColumnStrokeStyle;
121	}
122	c2d.stroke ();
123	c2d.closePath ();
124	}
125
126	var map = document.createElement ('map');
127	var x = param.cellLeft;
128	for (var i = 0; i < table.cell.length; i++) {
129	var y = param.cellTop;
130	if (!table.cell[i]) continue;
131	for (var j = 0; j < table.cell[i].length; j++) {
132	var c = table.cell[i][j];
133	if (c && ((c[0].x == i && c[0].y == j) \|\| c.length > 1)) {
134	c2d.beginPath ();
135	var width = (param.columnWidth + param.columnSpacing) * c[0].width
136	- param.columnSpacing;
137	var height = (param.rowHeight + param.rowSpacing) * c[0].height
138	- param.rowSpacing;
139	if (c.length == 1) {
140	c2d.rect (x, y, width, height);
141	c2d.fillStyle = c[0].is_header
142	? param.headerCellFillStyle : param.dataCellFillStyle;
143	c2d.strokeStyle = c[0].is_header
144	? param.headerCellStrokeStyle
145	: c[0].is_empty
146	? param.emptyDataCellStrokeStyle
147	: param.dataCellStrokeStyle;
148	if (c[0].id) {
149	var area = document.createElement ('area');
150	area.shape = 'rect';
151	area.coords = [x, y, x + width, y + height].join (',');
152	area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')';
153	area.href = '#' + idPrefix + 'node-' + c[0].id;
154	area.id = idPrefix + 'cell-' + c[0].id;
155	area.onmouseover = (function (v) {
156	return function () {
157	canvas.highlightCells (v);
158	};
159	}) (c[0].header);
160	map.appendChild (area);
161	}
162	} else {
163	c2d.rect (x, y, param.columnWidth, param.rowHeight);
164	c2d.fillStyle = param.overlappingCellFillStyle;
165	c2d.strokeStyle = param.overlappingCellStrokeStyle;
166	}
167	c2d.fill ();
168	c2d.stroke ();
169	c2d.closePath ();
170	}
171	y += param.rowHeight + param.rowSpacing;
172	}
173	x += param.columnWidth + param.columnSpacing;
174	}
175
176	var y = param.rowTop;
177	for (var i = 0; i < rowNumber; i++) {
178	c2d.beginPath ();
179	c2d.moveTo (param.rowLeft, y);
180	y += param.rowHeight + param.rowSpacing;
181	c2d.lineTo (param.rowLeft, y - param.rowSpacing);
182	//if (true) {
183	c2d.strokeStyle = param.explicitRowStrokeStyle;
184	//} else {
185	// c2d.strokeStyle = param.impliedRowStrokeStyle;
186	//}
187	c2d.stroke ();
188	c2d.closePath ();
189	}
190
191	return map;
192	}; // canvas.drawTable
193
194	canvas.highlightCells = function (cells) {
195	var c2d = this.getContext ('2d');
196
197	for (var x in cells) {
198	for (var y in cells[x]) {
199	if (cells[x][y]) {
200	var cell = table.cell[x][y][0];
201	c2d.beginPath ();
202	c2d.rect
203	(param.cellLeft + (param.columnWidth + param.columnSpacing) * x,
204	param.cellTop + (param.rowHeight + param.rowSpacing) * y,
205	(param.columnWidth + param.columnSpacing) * cell.width - param.columnSpacing,
206	(param.rowHeight + param.rowSpacing) * cell.height - param.rowSpacing);
207	c2d.fillStyle = param.highlightCellFillStyle;
208	c2d.fill ();
209	c2d.stroke ();
210	c2d.closePath ();
211	}
212	}
213	}
214	this.updateImgElement ();
215	} // canvas.highlightCells
216
217	var map = canvas.drawTable ();
218	if (map.hasChildNodes ()) {
219	var mapid = /* idPrefix + */ 'table-map-' + ++document.TableMapId;
220	map.name = mapid;
221	parent.appendChild (map);
222	var img = document.createElement ('img');
223	img.useMap = '#' + mapid;
224	canvas.updateImgElement = function () {
225	img.src = this.toDataURL ();
226	};
227	img.onmouseover = function (e) {
228	if (e.target == e.currentTarget) {
229	canvas.drawTable ();
230	canvas.updateImgElement ();
231	}
232	};
233	canvas.updateImgElement ();
234	parent.appendChild (img);
235	canvas.style.display = 'none';
236	} else {
237	canvas.updateImgElement = function () {};
238	}
239	} // tableToCanvas
240
241	if (!document.TableMapId) document.TableMapId = 0;
242
243	/*
244
245	Copyright 2007-2008 Wakaba <w@suika.fam.cx>
246
247	This library is free software; you can redistribute it
248	and/or modify it under the same terms as Perl itself.
249
250	*/
251	/* $Date: 2008/05/06 07:50:28 $ */