/[suikacvs]/test/html-whatpm/table-script.js
Suika

Diff of /test/html-whatpm/table-script.js

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 1.1 by wakaba, Sun May 27 06:37:05 2007 UTC revision 1.7 by wakaba, Tue May 6 07:50:28 2008 UTC
# Line 1  Line 1 
1  function tableToCanvas (table) {  function tableToCanvas (table, parent, idPrefix) {
2    var canvas = document.createElement ('canvas');    var canvas = document.createElement ('canvas');
3    document.body.appendChild (canvas);    parent.appendChild (canvas);
4      if (window.G_vmlCanvasManager) {
5        canvas = G_vmlCanvasManager.initElement (canvas);
6      }
7    var c2d = canvas.getContext ('2d');    var c2d = canvas.getContext ('2d');
8    
9    var param = {    var param = {
# Line 13  function tableToCanvas (table) { Line 16  function tableToCanvas (table) {
16      rowHeight: 20,      rowHeight: 20,
17      rowSpacing: 5,      rowSpacing: 5,
18      rowGroupLeft: 10,      rowGroupLeft: 10,
19        rowGroupFillLeft: 20, /* Must be same as columnLeft */
20      rowLeft: 15,      rowLeft: 15,
21      cellTop: 20,      cellTop: 20,
22      cellLeft: 20,      cellLeft: 20, /* Must be same as columnLeft */
23      cellBottom: 20,      cellBottom: 20,
24      cellRight: 20,      cellRight: 20,
25      explicitColumnGroupStrokeStyle: 'black',      explicitColumnGroupStrokeStyle: 'black',
# Line 34  function tableToCanvas (table) { Line 38  function tableToCanvas (table) {
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;
50  for (var i = 1; i < table.cell.length; i++) {  for (var i = 0; i < table.cell.length; i++) {
51    if (table.cell[i] && rowNumber < table.cell[i].length) {    if (table.cell[i] && rowNumber < table.cell[i].length) {
52      rowNumber = table.cell[i].length;      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  canvas.width = param.cellLeft
60      + (param.columnWidth + param.columnSpacing) * columnNumber      + (param.columnWidth + param.columnSpacing) * columnNumber
61      + param.cellRight;      + param.cellRight;
62  canvas.height = param.cellTop  canvas.height = param.cellTop
63      + (param.rowHeight + param.rowSpacing) * rowNumber      + (param.rowHeight + param.rowSpacing) * rowNumber
64      + param.cellBottom;      + param.cellBottom;
 canvas.style.width = 'auto'; // NOTE: Opera9 has default style=""  
 canvas.style.height = 'auto';  
65    
66  var y = param.rowTop;  var y = param.rowTop;
67  for (var i = 1; i < table.row_group.length; i++) {  for (var i = 0; i < table.row_group.length; i++) {
68    var rg = table.row_group[i];    var rg = table.row_group[i];
69    c2d.beginPath ();    c2d.beginPath ();
70    if (rg.type == 'thead') {    if (rg.type == 'thead') {
# Line 75  for (var i = 1; i < table.row_group.leng Line 83  for (var i = 1; i < table.row_group.leng
83    c2d.stroke ();    c2d.stroke ();
84    c2d.closePath ();    c2d.closePath ();
85    c2d.beginPath ();    c2d.beginPath ();
86    c2d.rect (param.rowGroupLeft,    c2d.rect (param.rowGroupFillLeft,
87              y,              y,
88              (param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,              (param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,
89              dy - param.rowSpacing);              dy - param.rowSpacing);
# Line 88  for (var i = 1; i < table.row_group.leng Line 96  for (var i = 1; i < table.row_group.leng
96  c2d.beginPath ();  c2d.beginPath ();
97  c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;  c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;
98  var x = param.columnLeft;  var x = param.columnLeft;
99  for (var i = 1; i < table.column_group.length; i++) {  for (var i = 0; i < table.column_group.length; i++) {
100    var cg = table.column_group[i];    var cg = table.column_group[i];
101    c2d.moveTo (x, param.columnGroupTop);    c2d.moveTo (x, param.columnGroupTop);
102    x += (param.columnWidth + param.columnSpacing) * cg.width;    x += (param.columnWidth + param.columnSpacing) * cg.width;
# Line 99  c2d.stroke (); Line 107  c2d.stroke ();
107  c2d.closePath ();  c2d.closePath ();
108    
109  var x = param.columnLeft;  var x = param.columnLeft;
110  for (var i = 1; i < columnNumber; i++) {  for (var i = 0; i < columnNumber; i++) {
111    var c = table.column[i];    var c = table.column[i];
112    c2d.beginPath ();    c2d.beginPath ();
113    c2d.moveTo (x, param.columnTop);    c2d.moveTo (x, param.columnTop);
# Line 114  for (var i = 1; i < columnNumber; i++) { Line 122  for (var i = 1; i < columnNumber; i++) {
122    c2d.closePath ();    c2d.closePath ();
123  }  }
124    
125    var map = document.createElement ('map');
126  var x = param.cellLeft;  var x = param.cellLeft;
127  for (var i = 1; i < table.cell.length; i++) {  for (var i = 0; i < table.cell.length; i++) {
128    var y = param.cellTop;    var y = param.cellTop;
129    if (!table.cell[i]) continue;    if (!table.cell[i]) continue;
130    for (var j = 1; j < table.cell[i].length; j++) {    for (var j = 0; j < table.cell[i].length; j++) {
131      var c = table.cell[i][j];      var c = table.cell[i][j];
132      if (c && ((c[0].x == i && c[0].y == j) || c.length > 1)) {      if (c && ((c[0].x == i && c[0].y == j) || c.length > 1)) {
133        c2d.beginPath ();        c2d.beginPath ();
# Line 132  for (var i = 1; i < table.cell.length; i Line 141  for (var i = 1; i < table.cell.length; i
141              ? param.headerCellFillStyle : param.dataCellFillStyle;              ? param.headerCellFillStyle : param.dataCellFillStyle;
142          c2d.strokeStyle = c[0].is_header          c2d.strokeStyle = c[0].is_header
143              ? param.headerCellStrokeStyle : param.dataCellStrokeStyle;              ? 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 {        } else {
159          c2d.rect (x, y, param.columnWidth, param.rowHeight);          c2d.rect (x, y, param.columnWidth, param.rowHeight);
160          c2d.fillStyle = param.overlappingCellFillStyle;          c2d.fillStyle = param.overlappingCellFillStyle;
# Line 147  for (var i = 1; i < table.cell.length; i Line 170  for (var i = 1; i < table.cell.length; i
170  }  }
171    
172  var y = param.rowTop;  var y = param.rowTop;
173  for (var i = 1; i < rowNumber; i++) {  for (var i = 0; i < rowNumber; i++) {
174    c2d.beginPath ();    c2d.beginPath ();
175    c2d.moveTo (param.rowLeft, y);    c2d.moveTo (param.rowLeft, y);
176    y += param.rowHeight + param.rowSpacing;    y += param.rowHeight + param.rowSpacing;
# Line 160  for (var i = 1; i < rowNumber; i++) { Line 183  for (var i = 1; i < rowNumber; i++) {
183    c2d.stroke ();    c2d.stroke ();
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 ()) {
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  } // tableToCanvas
236    
237    if (!document.TableMapId) document.TableMapId = 0;
238    
239  /*  /*
240    
241  Copyright 2007 Wakaba <w@suika.fam.cx>  Copyright 2007-2008 Wakaba <w@suika.fam.cx>
242    
243  This library is free software; you can redistribute it  This library is free software; you can redistribute it
244  and/or modify it under the same terms as Perl itself.  and/or modify it under the same terms as Perl itself.
Legend:
Removed from v.1.1  
changed lines
  Added in v.1.7
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24