/[pub]/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.3 by wakaba, Sat Jun 30 08:26:08 2007 UTC revision 1.8 by wakaba, Tue May 6 08:47:09 2008 UTC
# Line 1  Line 1 
1  function tableToCanvas (table, parent) {  function tableToCanvas (table, parent, idPrefix) {
2    var canvas = document.createElement ('canvas');    var canvas = document.createElement ('canvas');
3    parent.appendChild (canvas);    parent.appendChild (canvas);
4    if (window.G_vmlCanvasManager) {    if (window.G_vmlCanvasManager) {
# Line 16  function tableToCanvas (table, parent) { Line 16  function tableToCanvas (table, parent) {
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 36  function tableToCanvas (table, parent) { Line 37  function tableToCanvas (table, parent) {
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;
51  for (var i = 1; i < table.cell.length; i++) {  for (var i = 0; i < table.cell.length; i++) {
52    if (table.cell[i] && rowNumber < table.cell[i].length) {    if (table.cell[i] && rowNumber < table.cell[i].length) {
53      rowNumber = table.cell[i].length;      rowNumber = table.cell[i].length;
54    }    }
# Line 60  canvas.height = param.cellTop Line 65  canvas.height = param.cellTop
65      + param.cellBottom;      + param.cellBottom;
66    
67  var y = param.rowTop;  var y = param.rowTop;
68  for (var i = 1; i < table.row_group.length; i++) {  for (var i = 0; i < table.row_group.length; i++) {
69    var rg = table.row_group[i];    var rg = table.row_group[i];
70    c2d.beginPath ();    c2d.beginPath ();
71    if (rg.type == 'thead') {    if (rg.type == 'thead') {
# Line 79  for (var i = 1; i < table.row_group.leng Line 84  for (var i = 1; i < table.row_group.leng
84    c2d.stroke ();    c2d.stroke ();
85    c2d.closePath ();    c2d.closePath ();
86    c2d.beginPath ();    c2d.beginPath ();
87    c2d.rect (param.rowGroupLeft,    c2d.rect (param.rowGroupFillLeft,
88              y,              y,
89              (param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,              (param.columnWidth + param.columnSpacing) * columnNumber - param.columnSpacing,
90              dy - param.rowSpacing);              dy - param.rowSpacing);
# Line 92  for (var i = 1; i < table.row_group.leng Line 97  for (var i = 1; i < table.row_group.leng
97  c2d.beginPath ();  c2d.beginPath ();
98  c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;  c2d.strokeStyle = param.explicitColumnGroupStrokeStyle;
99  var x = param.columnLeft;  var x = param.columnLeft;
100  for (var i = 1; i < table.column_group.length; i++) {  for (var i = 0; i < table.column_group.length; i++) {
101    var cg = table.column_group[i];    var cg = table.column_group[i];
102    c2d.moveTo (x, param.columnGroupTop);    c2d.moveTo (x, param.columnGroupTop);
103    x += (param.columnWidth + param.columnSpacing) * cg.width;    x += (param.columnWidth + param.columnSpacing) * cg.width;
# Line 103  c2d.stroke (); Line 108  c2d.stroke ();
108  c2d.closePath ();  c2d.closePath ();
109    
110  var x = param.columnLeft;  var x = param.columnLeft;
111  for (var i = 1; i < columnNumber; i++) {  for (var i = 0; i < columnNumber; i++) {
112    var c = table.column[i];    var c = table.column[i];
113    c2d.beginPath ();    c2d.beginPath ();
114    c2d.moveTo (x, param.columnTop);    c2d.moveTo (x, param.columnTop);
# Line 120  for (var i = 1; i < columnNumber; i++) { Line 125  for (var i = 1; i < columnNumber; i++) {
125    
126  var map = document.createElement ('map');  var map = document.createElement ('map');
127  var x = param.cellLeft;  var x = param.cellLeft;
128  for (var i = 1; i < table.cell.length; i++) {  for (var i = 0; i < table.cell.length; i++) {
129    var y = param.cellTop;    var y = param.cellTop;
130    if (!table.cell[i]) continue;    if (!table.cell[i]) continue;
131    for (var j = 1; j < table.cell[i].length; j++) {    for (var j = 0; j < table.cell[i].length; j++) {
132      var c = table.cell[i][j];      var c = table.cell[i][j];
133      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)) {
134        c2d.beginPath ();        c2d.beginPath ();
# Line 136  for (var i = 1; i < table.cell.length; i Line 141  for (var i = 1; i < table.cell.length; i
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';
151            area.coords = [x, y, x + width, y + height].join (',');            area.coords = [x, y, x + width, y + height].join (',');
152            area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')';            area.alt = 'Cell (' + c[0].x + ', ' + c[0].y + ')';
153            area.href = '#node-' + c[0].id;            area.href = '#' + idPrefix + 'node-' + c[0].id;
154            area.id = '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 {
# Line 161  for (var i = 1; i < table.cell.length; i Line 174  for (var i = 1; i < table.cell.length; i
174  }  }
175    
176  var y = param.rowTop;  var y = param.rowTop;
177  for (var i = 1; i < rowNumber; i++) {  for (var i = 0; i < rowNumber; i++) {
178    c2d.beginPath ();    c2d.beginPath ();
179    c2d.moveTo (param.rowLeft, y);    c2d.moveTo (param.rowLeft, y);
180    y += param.rowHeight + param.rowSpacing;    y += param.rowHeight + param.rowSpacing;
# Line 175  for (var i = 1; i < rowNumber; i++) { Line 188  for (var i = 1; i < rowNumber; i++) {
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 = '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    
# Line 191  if (!document.TableMapId) document.Table Line 242  if (!document.TableMapId) document.Table
242    
243  /*  /*
244    
245  Copyright 2007 Wakaba <w@suika.fam.cx>  Copyright 2007-2008 Wakaba <w@suika.fam.cx>
246    
247  This library is free software; you can redistribute it  This library is free software; you can redistribute it
248  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.3  
changed lines
  Added in v.1.8
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24