Speed improvements in Chrome

MIT-LICENCE.txt

@@ -1,4 +1,4 @@
-Copyright 2015 AlignAlytics
+Copyright 2017 AlignAlytics
 www.align-alytics.com
 
 Permission is hereby granted, free of charge, to any person obtaining
@@ -18,4 +18,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bower.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "d3": ">=3.5.2"
   },
-  "version": "0.2.1",
+  "version": "0.2.2",
   "homepage": "https://github.com/PMSI-AlignAlytics/scrollgrid",
   "authors": [
     "johnkiernander <jkiernander@pmsi-consulting.com>"

dist/scrollgrid.latest.js

@@ -203,7 +203,7 @@ Scrollgrid.prototype.internal.dom.layoutDOM = function (fixedSize) {
     dom.top.right.transform.attr('transform', 'translate(' + physical.dragHandleWidth / 2 + ', 0)');
 
     // Invoke draw on scroll
-    dom.main.viewport.on('scroll', function () { render.draw.call(self, false); });
+    dom.main.viewport.on('scroll', function () { render.draw.call(self, false, false); });
 
     // Invoke eventHandlers of the target group behind the main viewport
     dom.redirectViewportEvents.call(self);
@@ -824,7 +824,7 @@ Scrollgrid.prototype.internal.render.cropText = function (textShape, width) {
 // Copyright: 2015 AlignAlytics
 // License: "https://github.com/PMSI-AlignAlytics/scrollgrid/blob/master/MIT-LICENSE.txt"
 // Source: /src/internal/render/draw.js
-Scrollgrid.prototype.internal.render.draw = function (clearCache) {
+Scrollgrid.prototype.internal.render.draw = function (clearCache, reviewSize) {
     "use strict";
 
     var int = this.internal,
@@ -871,15 +871,32 @@ Scrollgrid.prototype.internal.render.draw = function (clearCache) {
     }
 
     // Calculate if the rendering means that the width of the
-    // whole table should change and layout accordingly
-    totalWidth = (physical.left + physical.totalInnerWidth + physical.right + physical.verticalScrollbarWidth);
-    fixedSize.width = (totalWidth < dom.parent.node().offsetWidth ? totalWidth : null);
-    totalHeight = (physical.top + physical.totalInnerHeight + physical.bottom + physical.horizontalScrollbarHeight);
-    fixedSize.height = (totalHeight < dom.parent.node().offsetHeight ? totalHeight : null);
-    dom.layoutDOM.call(this, fixedSize);
+    // whole table should change and layout accordingly, this only runs if the flag is set
+    // this is because it can be slow to run when scrolling
+    if (reviewSize) {
+        totalWidth = (physical.left + physical.totalInnerWidth + physical.right + physical.verticalScrollbarWidth);
+        fixedSize.width = (totalWidth < dom.parent.node().offsetWidth ? totalWidth : null);
+        totalHeight = (physical.top + physical.totalInnerHeight + physical.bottom + physical.horizontalScrollbarHeight);
+        fixedSize.height = (totalHeight < dom.parent.node().offsetHeight ? totalHeight : null);
+        dom.layoutDOM.call(this, fixedSize);
+    }
 
 };
 
+
+// Copyright: 2015 AlignAlytics
+// License: "https://github.com/PMSI-AlignAlytics/scrollgrid/blob/master/MIT-LICENSE.txt"
+// Source: /src/internal/render/getClipPath.js
+Scrollgrid.prototype.internal.render.getClipPath = function (viewData) {
+    "use strict";
+    var int = this.internal,
+        render = int.render,
+        right = (viewData.textWidth - viewData.cellPadding - (!(!viewData.sortIcon || viewData.sortIcon === 'none') ? render.sortIconSize + viewData.cellPadding : 0)) + "px",
+        bottom = (viewData.textHeight - viewData.cellPadding) + "px";
+    return "polygon(0px 0px, " + right + " 0px, " + right + " " + bottom + ", 0px " + bottom + ")";
+};
+
+
 // Copyright: 2015 AlignAlytics
 // License: "https://github.com/PMSI-AlignAlytics/scrollgrid/blob/master/MIT-LICENSE.txt"
 // Source: /src/internal/render/getDataBounds.js
@@ -1160,6 +1177,7 @@ Scrollgrid.prototype.internal.render.renderForeground = function (g, viewData) {
     var self = this,
         int = self.internal,
         render = int.render,
+        path,
         text;
 
     // Clear any existing text
@@ -1170,17 +1188,23 @@ Scrollgrid.prototype.internal.render.renderForeground = function (g, viewData) {
         .attr("dy", "0.35em")
         .attr("x", render.getTextPosition.call(self, viewData))
         .attr("y", viewData.textHeight / 2)
-        .style("text-anchor", render.getTextAnchor.call(self, viewData));
+        .style("text-anchor", render.getTextAnchor.call(self, viewData))
+        .style("clip-path", render.getClipPath.call(self, viewData));
 
     if (viewData.formatter) {
         text.text(viewData.formatter(viewData.value));
     } else {
         text.text(viewData.value);
     }
-    render.cropText.call(this, text, viewData.textWidth - viewData.cellPadding - (!(!viewData.sortIcon || viewData.sortIcon === 'none') ? render.sortIconSize + viewData.cellPadding : 0));
 
+    path = text.node().style.clipPath;
+    // If the new clip path css doesn't work (I'm looking at you IE and Firefox) revert to the slower method
+    if (!path || path === "") {
+        render.cropText.call(self, text, viewData.textWidth - viewData.cellPadding - (!(!viewData.sortIcon || viewData.sortIcon === 'none') ? render.sortIconSize + viewData.cellPadding : 0));
+    }
 };
 
+
 // Copyright: 2015 AlignAlytics
 // License: "https://github.com/PMSI-AlignAlytics/scrollgrid/blob/master/MIT-LICENSE.txt"
 // Source: /src/internal/render/renderRegion.js
@@ -2034,11 +2058,12 @@ Scrollgrid.prototype.refresh = function (maintainCache) {
 
     // Call the instantiated layout refresh
     dom.layoutDOM.call(this);
-    render.draw.call(this, !maintainCache);
+    render.draw.call(this, !maintainCache, true);
     dom.setScrollerSize.call(this);
 
 };
 
+
 // Copyright: 2015 AlignAlytics
 // License: "https://github.com/PMSI-AlignAlytics/scrollgrid/blob/master/MIT-LICENSE.txt"
 // Source: /src/external/rowHeight.js

dist/scrollgrid.v0.2.1.js

@@ -1075,12 +1075,8 @@ Scrollgrid.prototype.internal.render.matchRule = function (ruleSelector, toCompa
     var match = false,
         defs,
         rangeMarker,
-        skipRange,
-        skip,
         lhs,
         rhs,
-        min,
-        max,
         i;
 
     // Valid rule selectors are:
@@ -1090,8 +1086,7 @@ Scrollgrid.prototype.internal.render.matchRule = function (ruleSelector, toCompa
     //      "12:14,16"      Match 12th, 13th, 14th and 16th element of dimension
     //      "-1"            Match last element of dimension
     //      "-2:-1"         Match last two elements of dimension
-    //      "2:-2"          Match all but first and last element
-    //      "12(2)16"       Match every 2nd element from the 12th to the 16th.  i.e. 12th,14th,16th
+    //      "2:-2"          Match all but first and last elements
     //      "*"             Match all elements (same as no selector
     if (!ruleSelector || ruleSelector === "*") {
         match = true;
@@ -1100,32 +1095,20 @@ Scrollgrid.prototype.internal.render.matchRule = function (ruleSelector, toCompa
         defs = ruleSelector.toString().replace(/\s/g, '').split(",");
         for (i = 0; i < defs.length; i += 1) {
             rangeMarker = defs[i].indexOf(":");
-            // Find the pattern a(n)b where we want every nth cell
-            skipRange = defs[i].match(/(\-{0,1}[0-9]+)\(([0-9]+)\)(\-{0,1}[0-9]+)/);
             if (rangeMarker !== -1) {
-                // Handle ranges a:b
+                // Handle ranges
                 lhs = parseFloat(defs[i].substring(0, rangeMarker));
-                skip = 1;
                 rhs = parseFloat(defs[i].substring(rangeMarker + 1));
-            } else if (skipRange && skipRange.length === 4) {
-                // Handle skip ranges a(n)b
-                lhs = parseFloat(skipRange[1]);
-                skip = Math.max(parseFloat(skipRange[2]), 1);
-                rhs = parseFloat(skipRange[3]);
             } else {
-                // Handle single values by creating as a range where both ends match
+                // Create as a range where both ends match
                 lhs = parseFloat(defs[i]);
-                skip = 1;
                 rhs = lhs;
             }
             // Handle the requirement for negatives to come from the end of the set
             lhs = (lhs < 0 ? extremity + lhs + 1 : lhs);
             rhs = (rhs < 0 ? extremity + rhs + 1 : rhs);
             // Match them from min to max regardless of the way they are defined
-            min = Math.min(lhs, rhs);
-            max = Math.max(lhs, rhs);
-            // Check that the cell is in the range and not skipped
-            match = (min <= toCompare && max >= toCompare) && ((toCompare - min) % skip === 0);
+            match = match || (Math.min(lhs, rhs) <= toCompare && Math.max(lhs, rhs) >= toCompare);
             // If any match the rule passes
             if (match) {
                 break;