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