| 37 |
headerCellStrokeStyle: 'black', |
headerCellStrokeStyle: 'black', |
| 38 |
dataCellFillStyle: 'rgba(0, 0, 0, 0)', |
dataCellFillStyle: 'rgba(0, 0, 0, 0)', |
| 39 |
dataCellStrokeStyle: 'black', |
dataCellStrokeStyle: 'black', |
| 40 |
|
emptyDataCellStrokeStyle: '#C0C0C0', |
| 41 |
overlappingCellFillStyle: 'red', |
overlappingCellFillStyle: 'red', |
| 42 |
overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)' |
overlappingCellStrokeStyle: 'rgba(0, 0, 0, 0)', |
| 43 |
|
highlightCellFillStyle: 'yellow' |
| 44 |
}; |
}; |
| 45 |
|
|
| 46 |
|
canvas.drawTable = function () { |
| 47 |
|
|
| 48 |
var columnNumber = table.column.length; |
var columnNumber = table.column.length; |
| 49 |
if (columnNumber < table.cell.length) columnNumber = table.cell.length; |
if (columnNumber < table.cell.length) columnNumber = table.cell.length; |
| 50 |
var rowNumber = 0; |
var rowNumber = 0; |
| 141 |
c2d.fillStyle = c[0].is_header |
c2d.fillStyle = c[0].is_header |
| 142 |
? param.headerCellFillStyle : param.dataCellFillStyle; |
? param.headerCellFillStyle : param.dataCellFillStyle; |
| 143 |
c2d.strokeStyle = c[0].is_header |
c2d.strokeStyle = c[0].is_header |
| 144 |
? param.headerCellStrokeStyle : param.dataCellStrokeStyle; |
? param.headerCellStrokeStyle |
| 145 |
|
: c[0].is_empty |
| 146 |
|
? param.emptyDataCellStrokeStyle |
| 147 |
|
: param.dataCellStrokeStyle; |
| 148 |
if (c[0].id) { |
if (c[0].id) { |
| 149 |
var area = document.createElement ('area'); |
var area = document.createElement ('area'); |
| 150 |
area.shape = 'rect'; |
area.shape = 'rect'; |
| 152 |
area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')'; |
area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')'; |
| 153 |
area.href = '#' + idPrefix + 'node-' + c[0].id; |
area.href = '#' + idPrefix + 'node-' + c[0].id; |
| 154 |
area.id = idPrefix + 'cell-' + c[0].id; |
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); |
map.appendChild (area); |
| 161 |
} |
} |
| 162 |
} else { |
} else { |
| 188 |
c2d.closePath (); |
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 ()) { |
if (map.hasChildNodes ()) { |
| 219 |
var mapid = /* idPrefix + */ 'table-map-' + ++document.TableMapId; |
var mapid = /* idPrefix + */ 'table-map-' + ++document.TableMapId; |
| 220 |
map.name = mapid; |
map.name = mapid; |
| 221 |
parent.appendChild (map); |
parent.appendChild (map); |
| 222 |
var img = document.createElement ('img'); |
var img = document.createElement ('img'); |
|
img.src = canvas.toDataURL (); |
|
| 223 |
img.useMap = '#' + mapid; |
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); |
parent.appendChild (img); |
| 235 |
canvas.style.display = 'none'; |
canvas.style.display = 'none'; |
| 236 |
|
} else { |
| 237 |
|
canvas.updateImgElement = function () {}; |
| 238 |
} |
} |
| 239 |
} // tableToCanvas |
} // tableToCanvas |
| 240 |
|
|