38 |
dataCellFillStyle: 'rgba(0, 0, 0, 0)', |
dataCellFillStyle: 'rgba(0, 0, 0, 0)', |
39 |
dataCellStrokeStyle: 'black', |
dataCellStrokeStyle: 'black', |
40 |
overlappingCellFillStyle: 'red', |
overlappingCellFillStyle: 'red', |
41 |
overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)' |
overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)', |
42 |
|
highlightCellFillStyle: 'yellow' |
43 |
}; |
}; |
44 |
|
|
45 |
|
canvas.drawTable = function () { |
46 |
|
|
47 |
var columnNumber = table.column.length; |
var columnNumber = table.column.length; |
48 |
if (columnNumber < table.cell.length) columnNumber = table.cell.length; |
if (columnNumber < table.cell.length) columnNumber = table.cell.length; |
49 |
var rowNumber = 0; |
var rowNumber = 0; |
148 |
area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')'; |
area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')'; |
149 |
area.href = '#' + idPrefix + 'node-' + c[0].id; |
area.href = '#' + idPrefix + 'node-' + c[0].id; |
150 |
area.id = idPrefix + 'cell-' + c[0].id; |
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); |
map.appendChild (area); |
157 |
} |
} |
158 |
} else { |
} else { |
184 |
c2d.closePath (); |
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 ()) { |
if (map.hasChildNodes ()) { |
215 |
var mapid = /* idPrefix + */ 'table-map-' + ++document.TableMapId; |
var mapid = /* idPrefix + */ 'table-map-' + ++document.TableMapId; |
216 |
map.name = mapid; |
map.name = mapid; |
217 |
parent.appendChild (map); |
parent.appendChild (map); |
218 |
var img = document.createElement ('img'); |
var img = document.createElement ('img'); |
|
img.src = canvas.toDataURL (); |
|
219 |
img.useMap = '#' + mapid; |
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); |
parent.appendChild (img); |
231 |
canvas.style.display = 'none'; |
canvas.style.display = 'none'; |
232 |
|
} else { |
233 |
|
canvas.updateImgElement = function () {}; |
234 |
} |
} |
235 |
} // tableToCanvas |
} // tableToCanvas |
236 |
|
|