added doubleclick on column header for autosizing

abc91199 · Apr 27, 2015 · 2cd0c58 · 2cd0c58
1 parent 2df6fea
commit 2cd0c58
Show file tree

Hide file tree

Showing 19 changed files with 17,188 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -194,6 +194,12 @@ cellProvider.getCell = function(config) {
 };
 ```
 
+# Column autosizing
+
+You can autosize a column to best fit size by double clicking on the column header.
+
+<img src="images/gridshot09.png">
+
 # Cell Editors
 
 Hypergrid comes with several default cell editors you can easily select, and the ability to create your own. [The javascript code](https://github.com/openfin/fin-hypergrid/tree/master/polymer/js/cell-editors) for the cell editors is found here.

diff --git a/bower.json b/bower.json
@@ -29,6 +29,7 @@
   "devDependencies": {
     "polymer": "Polymer/polymer#0.5.4",
     "accountingjs": "~0.3.2",
-    "numeral": "~1.5.3"
+    "numeral": "~1.5.3",
+    "simple-lru": "~0.0.3"
   }
 }
diff --git a/fin-hypergrid.dev.html b/fin-hypergrid.dev.html
diff --git a/fin-hypergrid.min.html b/fin-hypergrid.min.html
diff --git a/images/gridshot09.png b/images/gridshot09.png
diff --git a/index.html b/index.html
@@ -39,6 +39,7 @@
       './polymer/html/features/fin-hypergrid-feature-cell-click.html',
       './polymer/html/features/fin-hypergrid-feature-cell-editing.html',
       './polymer/html/features/fin-hypergrid-feature-cell-selection.html',
+      './polymer/html/features/fin-hypergrid-feature-column-autosizing.html',
       './polymer/html/features/fin-hypergrid-feature-column-moving.html',
       './polymer/html/features/fin-hypergrid-feature-column-resizing.html',
       './polymer/html/features/fin-hypergrid-feature-column-sorting.html',

diff --git a/npm-debug.log b/npm-debug.log
diff --git a/polymer/css/features/fin-hypergrid-feature-column-autosizing.css b/polymer/css/features/fin-hypergrid-feature-column-autosizing.css
@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    position: relative;
+}
diff --git a/polymer/html/behaviors/fin-hypergrid-behavior-base.html b/polymer/html/behaviors/fin-hypergrid-behavior-base.html
@@ -14,6 +14,7 @@
 <link rel="import" href="../features/fin-hypergrid-feature-column-moving.html">
 <link rel="import" href="../features/fin-hypergrid-feature-row-resizing.html">
 <link rel="import" href="../features/fin-hypergrid-feature-on-hover.html">
+<link rel="import" href="../features/fin-hypergrid-feature-column-autosizing.html">
 <polymer-element name="fin-hypergrid-behavior-base" attributes="">
   <template>
     <link rel="stylesheet" type="text/css" href="../../../polymer/css/behaviors/fin-hypergrid-behavior-base.css">

diff --git a/polymer/html/features/fin-hypergrid-feature-column-autosizing.html b/polymer/html/features/fin-hypergrid-feature-column-autosizing.html
@@ -0,0 +1,10 @@
+<!--
+The `fin-hypergrid-feature-column-autosizing` element is a custom Polymer web component
+@element fin-hypergrid-feature-column-autosizing
+-->
+<polymer-element name="fin-hypergrid-feature-column-autosizing" extends="fin-hypergrid-feature-base">
+  <template>
+    <link rel="stylesheet" type="text/css" href="../../../polymer/css/features/fin-hypergrid-feature-column-autosizing.css">
+  </template>
+  <script src="../../../polymer/js/features/fin-hypergrid-feature-column-autosizing.js"></script>
+</polymer-element>
diff --git a/polymer/html/fin-hypergrid-renderer.html b/polymer/html/fin-hypergrid-renderer.html
@@ -4,6 +4,7 @@
 @element fin-hypergrid-renderer
 @homepage http://github.com/openfin/fin-hypergrid
 -->
+<script src="../../../simple-lru/simple-lru.min.js"></script>
 <link rel="import" href="../../../fin-canvas/fin-canvas-component.html">
 <polymer-element name="fin-hypergrid-renderer" extends="fin-canvas-component">
   <template>

diff --git a/polymer/js/behaviors/fin-hypergrid-behavior-base.js b/polymer/js/behaviors/fin-hypergrid-behavior-base.js
@@ -133,6 +133,7 @@
             this.setNextFeature(document.createElement('fin-hypergrid-feature-cell-editing'));
             this.setNextFeature(document.createElement('fin-hypergrid-feature-column-sorting'));
             this.setNextFeature(document.createElement('fin-hypergrid-feature-on-hover'));
+            this.setNextFeature(document.createElement('fin-hypergrid-feature-column-autosizing'));
 
             this.featureChain.initializeOn(grid);
         },

diff --git a/polymer/js/features/fin-hypergrid-feature-cell-editing.js b/polymer/js/features/fin-hypergrid-feature-cell-editing.js
@@ -3,8 +3,18 @@
     'use strict';
 
     Polymer({ /* jshint ignore:line */
-        handleDoubleClick: function(grid, mouseEvent) {
-            grid.activateEditor(mouseEvent);
+        handleDoubleClick: function(grid, event) {
+            var fixedColCount = grid.getFixedColumnCount();
+            var fixedRowCount = grid.getFixedRowCount();
+            var gridCell = event.gridCell;
+            if (gridCell.x > fixedColCount && gridCell.y > fixedRowCount) {
+                var x = grid.getHScrollValue() + gridCell.x - fixedColCount;
+                var y = grid.getVScrollValue() + gridCell.y - fixedRowCount;
+                event.gridCell = grid.rectangles.point.create(x, y);
+                grid.activateEditor(event);
+            } else if (this.next) {
+                this.next.handleDoubleClick(grid, event);
+            }
         },
 
         handleHoldPulse: function(grid, mouseEvent) {

diff --git a/polymer/js/features/fin-hypergrid-feature-column-autosizing.js b/polymer/js/features/fin-hypergrid-feature-column-autosizing.js
@@ -0,0 +1,19 @@
+'use strict';
+
+(function() {
+
+    Polymer('fin-hypergrid-feature-column-autosizing', { /* jshint ignore:line  */
+        handleDoubleClick: function(grid, event) {
+            var fixedRowCount = grid.getFixedRowCount();
+            var fixedColCount = grid.getFixedColumnCount();
+            var gridCell = event.gridCell;
+            if (gridCell.y <= fixedRowCount) {
+                var col = grid.getHScrollValue() + gridCell.x - fixedColCount;
+                grid.autosizeColumn(col);
+            } else if (this.next) {
+                this.next.handleDoubleClick(grid, event);
+            }
+        }
+    });
+
+})(); /* jshint ignore:line */
diff --git a/polymer/js/fin-hypergrid-cell-provider.js b/polymer/js/fin-hypergrid-cell-provider.js
@@ -4,8 +4,8 @@ var noop = function() {};
 
 (function() {
 
-    var underline = function(ctx, text, x, y, thickness) {
-        var width = ctx.measureText(text).width;
+    var underline = function(config, ctx, text, x, y, thickness) {
+        var width = config.getTextWidth(ctx, text);
 
         switch (ctx.textAlign) {
             case 'center':
@@ -103,7 +103,6 @@ var noop = function() {};
                 halign = this.config.halign,
                 isColumnHovered = this.config.isColumnHovered,
                 isRowHovered = this.config.isRowHovered,
-                size,
                 textWidth;
 
             //setting gc properties are expensive, lets not do it unnecessarily
@@ -120,14 +119,17 @@ var noop = function() {};
                 gc.textBaseline = 'middle';
             }
 
-            //don't measure the text if we don't have to as it is very expensive
+            textWidth = this.config.getTextWidth(gc, this.config.value);
+
+            //we must set this in order to compute the minimum width
+            //for column autosizing purposes
+            this.config.minWidth = textWidth + (2 * colHEdgeOffset);
+
             if (halign === 'right') {
-                size = gc.measureText(this.config.value);
-                textWidth = size.width;
+                //textWidth = this.config.getTextWidth(gc, this.config.value);
                 halignOffset = width - colHEdgeOffset - textWidth;
             } else if (halign === 'center') {
-                size = gc.measureText(this.config.value);
-                textWidth = size.width;
+                //textWidth = this.config.getTextWidth(gc, this.config.value);
                 halignOffset = (width - textWidth) / 2;
             } else if (halign === 'left') {
                 halignOffset = colHEdgeOffset;
@@ -154,7 +156,7 @@ var noop = function() {};
                 gc.beginPath();
                 if (isLink) {
                     gc.beginPath();
-                    underline(gc, this.config.value, x + halignOffset, y + valignOffset + Math.floor(fontMetrics.height / 2), 1);
+                    underline(this.config, gc, this.config.value, x + halignOffset, y + valignOffset + Math.floor(fontMetrics.height / 2), 1);
                     gc.stroke();
                     gc.closePath();
                 }

diff --git a/polymer/js/fin-hypergrid-renderer.js b/polymer/js/fin-hypergrid-renderer.js
@@ -1,3 +1,5 @@
+/* global SimpleLRU */
+
 //HypergridRenderer is the canvas enabled top level sub component that handles the renderering of the Grid.
 // * It relies on two other external subprojects
 //  * of-canvas: a wrapper to provide a simpler interface to the HTML5 canvas component
@@ -15,11 +17,23 @@
 
 var noop = function() {};
 
-var fontData = {
-
-};
+var fontData = {};
+var textWidthCache = new SimpleLRU(10000);
 
 var config = {
+    getTextWidth: function(gc, string) {
+        if (string.length === 0) {
+            return 0;
+        }
+        var key = gc.font + string;
+        var width = textWidthCache.get(key);
+        if (!width) {
+            width = gc.measureText(string).width;
+            textWidthCache.set(key, width);
+        }
+        return width;
+    },
+
     getTextHeight: function(font) {
 
         var result = fontData[font];
@@ -95,6 +109,7 @@ var config = {
         attached: function() {
             this.readyInit();
             this.renderedColumnWidths = [0];
+            this.renderedColumnMinWidths = [];
             this.renderedHeight = 0;
             this.renderedRowHeights = [0];
             this.renderedColumns = [];
@@ -502,6 +517,9 @@ var config = {
                 ctx.fillStyle = bgColor;
                 ctx.fillRect(x, y, x + width, viewHeight - y);
 
+                //reset this for this pass..
+                this.renderedColumnMinWidths[c + scrollLeft] = 0;
+
                 for (var r = 0; r < numRows; r++) {
 
                     var height = this.getFixedRowHeight(r);
@@ -514,6 +532,9 @@ var config = {
                     var cell = cellProvider.getFixedRowCell(this.cellConfig(translatedX, r, value, fgColor, bgColor, fgSelColor, bgSelColor, font, isSelected, isColumnHovered, isRowHovered, align, hoffset, voffset));
                     cell.paint(ctx, x, y, width, height);
 
+                    //lets capture the col preferred widths for col autosizing
+                    this.renderedColumnMinWidths[c + scrollLeft] = Math.max(cell.config.minWidth || 0, this.renderedColumnMinWidths[c + scrollLeft]);
+
                     if (behavior.highlightCellOnHover(isColumnHovered, isRowHovered)) {
                         ctx.beginPath();
                         var pre = ctx.globalAlpha;
@@ -661,6 +682,9 @@ var config = {
 
                     cell.paint(ctx, x, y, width, height);
 
+                    //lets capture the col preferred widths for col autosizing
+                    this.renderedColumnMinWidths[c + scrollLeft] = Math.max(cell.config.minWidth || 0, this.renderedColumnMinWidths[c + scrollLeft]);
+
                     if (behavior.highlightCellOnHover(isColumnHovered, isRowHovered)) {
                         ctx.beginPath();
                         var pre = ctx.globalAlpha;

diff --git a/polymer/js/fin-hypergrid.js b/polymer/js/fin-hypergrid.js
@@ -1,6 +1,4 @@
-/* globals document, alert, Polymer */
-
-
+/* global alert */
 'use strict';
 
 (function() {
@@ -465,7 +463,7 @@
             var fixedX = this.getFixedColumnCount();
             var fixedY = this.getFixedRowCount();
             this.hoverCell = rectangles.point.create(point.x - fixedX, point.y - fixedY);
-            this.paintNow();
+            this.repaint();
         },
 
         addGlobalProperties: function(props) {
@@ -1358,15 +1356,9 @@
             this.cellEdtr = cellEditor;
 
             var cell = coordinates.gridCell;
-            var behavior = this.getBehavior();
-            var scrollTop = this.getVScrollValue();
-            var scrollLeft = this.getHScrollValue();
 
-            var numFixedColumns = behavior.getFixedColumnCount();
-            var numFixedRows = behavior.getFixedRowCount();
-
-            var x = cell.x - numFixedColumns + scrollLeft;
-            var y = cell.y - numFixedRows + scrollTop;
+            var x = cell.x;
+            var y = cell.y;
 
             if (x < 0 || y < 0) {
                 return;
@@ -2146,13 +2138,8 @@
         },
 
         activateEditor: function(event) {
-            var fixedColCount = this.getFixedColumnCount();
-            var fixedRowCount = this.getFixedRowCount();
             var gridCell = event.gridCell;
-            var mX = this.getHScrollValue() + gridCell.x - fixedColCount;
-            var mY = this.getVScrollValue() + gridCell.y - fixedRowCount;
-
-            var editor = this.getCellEditorAt(mX, mY);
+            var editor = this.getCellEditorAt(gridCell.x, gridCell.y);
             if (editor) {
                 this.editAt(editor, event);
             }
@@ -2302,6 +2289,11 @@
             });
             this.canvas.dispatchEvent(clickEvent);
         },
+        autosizeColumn: function(column) {
+            var width = this.getRenderer().renderedColumnMinWidths[column];
+            console.log(column + ' - ' + width);
+            this.setColumnWidth(column, width);
+        }
     });
 
 })(); /* jslint ignore:line */
diff --git a/test/features/fin-hypergrid-feature-column-autosizing.js b/test/features/fin-hypergrid-feature-column-autosizing.js
@@ -0,0 +1,16 @@
+/* globals describe, it, assert */
+
+'use strict';
+
+var customElement = document.querySelector('fin-hypergrid-feature-column-autosizing');
+
+describe('<fin-hypergrid-feature-column-autosizing>', function() {
+
+    describe('features/fin-hypergrid-feature-column-autosizing.js', function() {
+        it('should have real tests filled out', function() {
+            assert.equal(customElement, customElement);
+        });
+
+    });
+
+});
diff --git a/test/index.html b/test/index.html
@@ -33,6 +33,7 @@
         'features/fin-hypergrid-feature-cell-click.js',
         'features/fin-hypergrid-feature-cell-editing.js',
         'features/fin-hypergrid-feature-cell-selection.js',
+        'features/fin-hypergrid-feature-column-autosizing.js',
         'features/fin-hypergrid-feature-column-moving.js',
         'features/fin-hypergrid-feature-column-resizing.js',
         'features/fin-hypergrid-feature-column-sorting.js',