icon support enhanced

abc91199 · Apr 30, 2015 · 436e4ba · 436e4ba
1 parent 396bb09
commit 436e4ba
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 25 deletions.
diff --git a/fin-hypergrid.dev.html b/fin-hypergrid.dev.html
@@ -21425,6 +21425,9 @@
 
 var config = {
     getTextWidth: function(gc, string) {
+        if (!string) {
+            return 0;
+        }
         if (string.length === 0) {
             return 0;
         }
@@ -23599,11 +23602,13 @@
                 iyoffset = Math.round((height - leftIcon.height) / 2);
                 ixoffset = Math.round((halignOffset - leftIcon.width) / 2);
                 gc.drawImage(leftIcon, x + ixoffset, y + iyoffset);
+                this.config.minWidth = this.config.minWidth + leftIcon.width + 6;
             }
             if (rightIcon) {
                 iyoffset = Math.round((height - rightIcon.height) / 2);
                 ixoffset = Math.round((halignOffset - rightIcon.width) / 2);
                 gc.drawImage(rightIcon, x + width - ixoffset - rightIcon.width, y + iyoffset);
+                this.config.minWidth = this.config.minWidth + rightIcon.width + 6;
             }
         },
 
@@ -27056,6 +27061,7 @@
         ['up-rectangle', 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAECAYAAABcDxXOAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAHklEQVQYV2PAAv5DaZwApACGsQJkBVgVYlMAxQwMABOrD/GvP+EWAAAAAElFTkSuQmCC'],
         ['down-rectangle', 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAECAYAAABcDxXOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAABpJREFUGFdjgIL/eDAKIKgABggqgAE0BQwMAPTlD/Fpi0JfAAAAAElFTkSuQmCC'],
 
+        ['sortable', 'iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAAC5JREFUKFNjQAP/oTQGAEnAMApAlkBRgE0ChikA2IyDYTDAKQEDOCVgAEmCgQEA4DEf4Wk8bewAAAAASUVORK5CYII='],
         ['up-arrow', 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA9SURBVBhXbYvRCgAgCAOtqP//Y9tElw8NDrcDzd0DBCd7iSL3E0IvGOpf2fKXeZUFKDcYFMwBlDNWS76bXUM5P9In5AzyAAAAAElFTkSuQmCC'],
         ['down-arrow', 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA+SURBVBhXhYvRCgAgCAOtqP//4+WWhtBDB1duqBUQ/2W5LLtSMFyW020skuecwOGj6QzfkuExt1LlcqICgG3S7z/SL/jVpgAAAABJRU5ErkJggg==']
     ];
@@ -30332,11 +30338,12 @@
     //* ⤒ sort absolute value ascending
     //* ⤓ sort absolute value descending;
     // \u25be
+
     var sortMap = {
-        a: '↑', //'\u2191',
-        d: '↓', //'\u2193',
-        A: '⤒', //'\u2912',
-        D: '⤓', //'\u2913'
+        a: '-up',
+        d: '-down',
+        A: '-abs-up',
+        D: '-abs-down',
     };
 
     var sortStates = {
@@ -30462,7 +30469,19 @@
 
                 }
             };
+
             provider.getTopLeftCell = function(config) {
+                var empty = provider.cellCache.emptyCellRenderer;
+                var label = provider.cellCache.simpleCellRenderer;
+                label.config = config;
+                if (config.y === 0) {
+                    return label;
+                } else {
+                    return empty;
+                }
+            };
+
+            provider.getTopLeftCellX = function(config) {
                 var label = provider.cellCache.emptyCellRenderer;
                 label.config = config;
                 if (config.y === 0) {
@@ -30497,9 +30516,7 @@
             //     return clone;
             // }
             //var hValue = this.block.Z[0].g_[0];
-            var clone = [
-                [this.getImage('up-arrow'), 'Hierarchy', this.getImage('down-arrow')]
-            ];
+            var clone = [this.getImage('up-rectangle'), 'Hierarchy', this.getSortIndicator(hierarchyColumn)];
             //clone[0] = clone[0] + ' ' + sortIndicator;
             return clone;
         },
@@ -30569,25 +30586,25 @@
             if (y < 1) {
                 var sortIndicator = this.getSortIndicator(colId);
                 var clickIndicator = this.getClickIndicator(colId);
-                return clickIndicator + ' ' + colId + ' ' + sortIndicator;
+                return [clickIndicator, colId, sortIndicator];
             }
             var total = this.block.Z[0][colId];
             return total;
         },
 
         getClickIndicator: function(colId) {
             noop(colId);
-            return '▾ ';
+            return this.getImage('down-rectangle');
         },
 
         getSortIndicator: function(colId) {
             var sortIndex = this.block.S.cols.indexOf(colId);
             if (sortIndex < 0) {
-                return ' ▪ ';
+                return this.getImage('sortable');
             }
             var sortState = this.block.S.sorts[sortIndex];
-            var symbol = sortMap[sortState];
-            var state = symbol + ' ' + (sortIndex + 1);
+            var symbol = (sortIndex + 1) + sortMap[sortState];
+            var state = this.getImage(symbol);
             return state;
         },
 

diff --git a/fin-hypergrid.min.html b/fin-hypergrid.min.html
diff --git a/images/sortable.png b/images/sortable.png
diff --git a/polymer/js/behaviors/fin-hypergrid-behavior-base.js b/polymer/js/behaviors/fin-hypergrid-behavior-base.js
@@ -24,6 +24,7 @@
         ['up-rectangle', 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAECAYAAABcDxXOAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAHklEQVQYV2PAAv5DaZwApACGsQJkBVgVYlMAxQwMABOrD/GvP+EWAAAAAElFTkSuQmCC'],
         ['down-rectangle', 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAECAYAAABcDxXOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAABpJREFUGFdjgIL/eDAKIKgABggqgAE0BQwMAPTlD/Fpi0JfAAAAAElFTkSuQmCC'],
 
+        ['sortable', 'iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAAC5JREFUKFNjQAP/oTQGAEnAMApAlkBRgE0ChikA2IyDYTDAKQEDOCVgAEmCgQEA4DEf4Wk8bewAAAAASUVORK5CYII='],
         ['up-arrow', 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA9SURBVBhXbYvRCgAgCAOtqP//Y9tElw8NDrcDzd0DBCd7iSL3E0IvGOpf2fKXeZUFKDcYFMwBlDNWS76bXUM5P9In5AzyAAAAAElFTkSuQmCC'],
         ['down-arrow', 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAYAAAB8OZQwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA+SURBVBhXhYvRCgAgCAOtqP//4+WWhtBDB1duqBUQ/2W5LLtSMFyW020skuecwOGj6QzfkuExt1LlcqICgG3S7z/SL/jVpgAAAABJRU5ErkJggg==']
     ];

diff --git a/polymer/js/behaviors/fin-hypergrid-behavior-qtree.js b/polymer/js/behaviors/fin-hypergrid-behavior-qtree.js
@@ -124,11 +124,12 @@
     //* ⤒ sort absolute value ascending
     //* ⤓ sort absolute value descending;
     // \u25be
+
     var sortMap = {
-        a: '↑', //'\u2191',
-        d: '↓', //'\u2193',
-        A: '⤒', //'\u2912',
-        D: '⤓', //'\u2913'
+        a: '-up',
+        d: '-down',
+        A: '-abs-up',
+        D: '-abs-down',
     };
 
     var sortStates = {
@@ -254,7 +255,19 @@
 
                 }
             };
+
             provider.getTopLeftCell = function(config) {
+                var empty = provider.cellCache.emptyCellRenderer;
+                var label = provider.cellCache.simpleCellRenderer;
+                label.config = config;
+                if (config.y === 0) {
+                    return label;
+                } else {
+                    return empty;
+                }
+            };
+
+            provider.getTopLeftCellX = function(config) {
                 var label = provider.cellCache.emptyCellRenderer;
                 label.config = config;
                 if (config.y === 0) {
@@ -289,9 +302,7 @@
             //     return clone;
             // }
             //var hValue = this.block.Z[0].g_[0];
-            var clone = [
-                [this.getImage('up-arrow'), 'Hierarchy', this.getImage('down-arrow')]
-            ];
+            var clone = [this.getImage('up-rectangle'), 'Hierarchy', this.getSortIndicator(hierarchyColumn)];
             //clone[0] = clone[0] + ' ' + sortIndicator;
             return clone;
         },
@@ -361,25 +372,25 @@
             if (y < 1) {
                 var sortIndicator = this.getSortIndicator(colId);
                 var clickIndicator = this.getClickIndicator(colId);
-                return clickIndicator + ' ' + colId + ' ' + sortIndicator;
+                return [clickIndicator, colId, sortIndicator];
             }
             var total = this.block.Z[0][colId];
             return total;
         },
 
         getClickIndicator: function(colId) {
             noop(colId);
-            return '▾ ';
+            return this.getImage('down-rectangle');
         },
 
         getSortIndicator: function(colId) {
             var sortIndex = this.block.S.cols.indexOf(colId);
             if (sortIndex < 0) {
-                return ' ▪ ';
+                return this.getImage('sortable');
             }
             var sortState = this.block.S.sorts[sortIndex];
-            var symbol = sortMap[sortState];
-            var state = symbol + ' ' + (sortIndex + 1);
+            var symbol = (sortIndex + 1) + sortMap[sortState];
+            var state = this.getImage(symbol);
             return state;
         },
 

diff --git a/polymer/js/fin-hypergrid-cell-provider.js b/polymer/js/fin-hypergrid-cell-provider.js
@@ -173,11 +173,13 @@ var noop = function() {};
                 iyoffset = Math.round((height - leftIcon.height) / 2);
                 ixoffset = Math.round((halignOffset - leftIcon.width) / 2);
                 gc.drawImage(leftIcon, x + ixoffset, y + iyoffset);
+                this.config.minWidth = this.config.minWidth + leftIcon.width + 6;
             }
             if (rightIcon) {
                 iyoffset = Math.round((height - rightIcon.height) / 2);
                 ixoffset = Math.round((halignOffset - rightIcon.width) / 2);
                 gc.drawImage(rightIcon, x + width - ixoffset - rightIcon.width, y + iyoffset);
+                this.config.minWidth = this.config.minWidth + rightIcon.width + 6;
             }
         },
 

diff --git a/polymer/js/fin-hypergrid-renderer.js b/polymer/js/fin-hypergrid-renderer.js
@@ -22,6 +22,9 @@ var textWidthCache = new SimpleLRU(10000);
 
 var config = {
     getTextWidth: function(gc, string) {
+        if (!string) {
+            return 0;
+        }
         if (string.length === 0) {
             return 0;
         }