added event formattext for issue #153

README.md

@@ -48,13 +48,7 @@ With [npm](https://www.npmjs.com/package/canvas-datagrid)
     npm install canvas-datagrid
 
 
-With [bower](https://libraries.io/bower/canvas-datagrid)
-
-    bower install canvas-datagrid
-
-
-Place the single source file `./dist/canvas-datagrid.js` in your web page using
-a script tag that points to the source or use webpack.
+Place the single source file `./dist/canvas-datagrid.js` in your web page using a script tag that points to the source or use webpack.
 
     <script src="dist/canvas-datagrid.js"></script>
 

build.txt

@@ -1 +1 @@
-2024
+2025

lib/docs.js

@@ -1010,5 +1010,12 @@
  * @param {object} e.ctx Canvas context.
  * @param {object} e.input The edit input.  You're free to do what you will with it.  It will remove itself when editing is complete.
 */
+/**
+ * Fires when text is about to be formatted.  You can stop the default formatting function, text wrap, from occurring by calling `e.preventDefault`.  You might do this to improve performance on very long values (e.g.: lists of numbers not requiring formatting) or to replace the default formatting function with your own.  When preventing default it is important to populate the `e.cell.text` property with a text line array that looks like this `{ lines: [{value: "line 1" }, {value: "line 2" }] }`.  Each item in the array is assumed to fit the width of the cell.  The total number of lines is assumed to fit into the height of the cell.
+ * @event
+ * @name canvasDatagrid#formattext
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+*/
 
 

lib/draw.js

@@ -817,7 +817,9 @@ define([], function () {
                                 cell.formattedValue = self.attributes.filterTextPrefix + val;
                             }
                             self.ctx.font = (self.style[cellStyle + 'FontHeight'] * self.scale) + 'px ' + self.style[cellStyle + 'FontName'];
-                            cell.text = wrapText(cell, ' ');
+                            if (!self.dispatchEvent('formattext', ev)) {
+                                cell.text = wrapText(cell, ' ');
+                            }
                             if (!self.dispatchEvent('rendertext', ev)) {
                                 if (cell.innerHTML || header.type === 'html') {
                                     drawHtml(cell);

tutorials/sparklineDemo.js

@@ -24,7 +24,7 @@ document.addEventListener('DOMContentLoaded', function () {
         }
         ctx.save();
         gb = ctx.createLinearGradient((cell.x + cell.width) / 2, cell.y, (cell.x + cell.width) / 2, cell.y + cell.height);
-        gb.addColorStop(0, d >= 0 ? '#0C4B73' : '#A1680F');
+        gb.addColorStop(0, '#0C4B73');
         gb.addColorStop(1, (cell.selected || cell.active) ? '#B3C3CC' : '#041724');
         ctx.fillStyle = gb;
         ctx.fillRect(cell.x, cell.y, cell.width, cell.height);
@@ -69,6 +69,14 @@ document.addEventListener('DOMContentLoaded', function () {
             {name: 'col3', width: 300}
         ]
     });
+    grid.sizes.rows[2] = 200;
+    grid.sizes.columns[1] = 600;
+    grid.sizes.columns[2] = 400;
+    grid.addEventListener('formattext', function (e) {
+        if (e.cell.columnIndex < 1) { return; }
+        e.preventDefault();
+        e.cell.text = { lines: [{value: e.cell.value }] };
+    });
     grid.style.height = '100%';
     grid.style.width = '100%';
     grid.addEventListener('contextmenu', function (e) {
@@ -132,7 +140,7 @@ document.addEventListener('DOMContentLoaded', function () {
         pollData();
     }
     function pollData() {
-        setTimeout(getData, 1000);
+        setTimeout(getData, 50);
     }
     getData(true);
 });